Examen #3 Examen Práctico

Contenido

1. Resumen
2. Cliente emisor
3. Servidor
4. Cliente receptor

Resumen

Por medio de hardware realizar acciones en una página web utilizando un servidor con WebSockets.

El sistema se compone de tres módulos o bloques independientes que interactúan entre sí. Dos de los tres módulos son clientes, un cliente emisor (controlado por hardware), un cliente receptor (página web con html) y el servidor que permite la comunicación entre los dos clientes para que sea posible mover objetos o realizar diferentes acciones en la página web con la información que envía el emisor.

_Contenido

Cliente emisor

Circuito

Los materiales que se utilizaron son:

• Arduino uno.
• 8 resistenciias de 1k ohms.
• 1 Protoboard.
• 7 Push buttos.

A continuacion armar el circuito de la imagen.

Los botones tienen asignados los números del 1 al 6 y el 13, además, cada botón con su respectivo número tiene una función diferente en el cliente receptor como se muestra en la imagen.

Código

Emisor.ino:

• Abrir el archivo en el IDE de Arduino.
• En la pestaña de Herramientas/Tools seleccionamos la Placa en la que se desea subir el codigo y tambien seleccionamos el Puerto al que este conectado el microocontrolador.
• Darle al boton de "Subir/Upload".

Lo que se espera del código "Emisor.ino" es que cada botón nos regrese un valor del 1 al 6 y el 13 que será leído por el código "ClienteEmisor.py" y enviado al servidor.

ClienteEmisor.py:

• Desde la ubicacion del archivo "Cliente emisor.py" abrir la consola (cmd) y ejecutar el programa.
• Ejemplo:
  C:\Users\minim\Desktop\Sistema de Computo y Redes\Examen>python ClienteEmisor.py
  

Lo anterior debería desplegar una pequeña ventana donde se puede seleccionar el puerto del arduino y se debe introducir el usuario y el servidor al que se quiere conectar. Y así sabemos que todo salio bien.

El nombre de usuario ingresado será el que se use para validar el acceso en el "index.html".

Lo que se espera del código "ClienteEmisor.py" es que pueda conectarse con el servidor cuando el "main.js" se esté ejecutando y que le mande la información leída del arduino para que el servidor la envíe al cliente receptor.

_Contenido

Servidor

Para tener el servidor desde tu computadora hacer lo siguiente:
En caso de tener un modem de INFINITUM ingresar a http://192.168.1.254/login.html y buscar el apartado "DMZ" (Demilitarized Zone ó Zona desmilitarizada) y activamos la función DMZ.
Buscar el apartado "Mapeo de Puertos/Port Mapping" y una vez ahí en la sección "Reenvió de Puertos" definimos un puerto nuevo y especificamos que se trata de un Protocolo TCP.

Nota: Es importante guardar los datos de la Dirección IP Pública.

Código

main.js:
Si es la primera vez que se ejecuta el servidor es necesario hacer lo siguiente:

• Tener descargados por lo menos el "package.json" y el servidor "main.js"
• Desde la ubicación dentro de la carpeta abrir la consola (cmd) y escribir lo siguiente:
  • Ejemplo:
    C:\Users\minim\Desktop\Sistema de Computo y Redes\Examen>npm install
    

esto crea dos nuevos elementos en la carpeta de trabajo, una carpeta llamada "node_modules" que es donde se almacenan todas las dependencias y librerías que utilizas en tu proyecto nodejs y el "package-lock.json" que es como un historial de las operaciones npm que modifiquen el "node_modules". Tambien es necesario instalar nodemon y socket.io, estos se instalan con los siguientes comandos: npm install --save nodemon y npm install socket.io.

• Ahora desde la consola en la carpeta de trabajo hay que escribir lo siguiente:
  • Ejemplo:
    C:\Users\minim\Desktop\Sistema de Computo y Redes\Examen>npm start
    
  como resultado en la consola se despliega el mensaje "Servidor corriendo en http://localhost:80", ademas deberiamos poder recivir conecciones desde el "ClienteEmisor.py". Y con eso sabemos que todo salió bien.

Lo que se espera del código "main.js" es que reciba la coneccion del cliente emisor y se conecte con el cliente receptor para enviar los datos leídos del arduino y poder realizar diferentes acciones en el cliente receptor.

_Contenido

Cliente receptor

El cliente receptor consta de varias páginas web en documentos html.

• La primera página a la que accedemos es "index.html" donde tenemos que hacer login con el nombre de usuario ingresado en el "ClienteEmisor.py".
  

• Una vez hecho login ingresamos a la página de inicio donde podemos navegar con los botones "5" y "6" del circuito emisor.

• Por último a disfrutar de los jueguitos.

• Tetris

• Snake

• Dino

Gracias por leer hasta el final <3

_Contenido