Normalmente, las páginas web se guardan en servidores remotos. En esta actividad, el propio CoCube se convierte en un pequeño servidor HTTP.

Cuando un ordenador o teléfono está conectado a la misma red Wi-Fi que CoCube, puede enviar peticiones desde la barra de direcciones del navegador para mostrar texto, encender un píxel o hacer que CoCube avance, retroceda y gire.

Este tutorial se basa en la actividad de MicroBlocks Learn Controlling the Robot with WiFi y se ha adaptado para CoCube.

1. Preparación

Necesitará:

• Un CoCube
• Un ordenador o teléfono
• Una red Wi-Fi de 2,4 GHz
• MicroBlocks
• El navegador Chrome o Edge

El ordenador o teléfono debe estar conectado a la misma red Wi-Fi que CoCube.

En MicroBlocks, haga clic en Añadir biblioteca, abra Red y seleccione Servidor HTTP.

La biblioteca Servidor HTTP depende de la biblioteca WiFi. Después de añadirla, puede utilizar bloques para conectarse a Wi-Fi, leer la dirección IP, recibir peticiones HTTP y enviar respuestas.

2. Conectar CoCube a la red Wi-Fi

Construya el siguiente programa. Sustituya Nombre de red y Contraseña por los datos de su red Wi-Fi.

Cuando se inicia el programa, CoCube se conecta a Wi-Fi y muestra su dirección IP en la pantalla TFT, por ejemplo:

172.20.10.2

La dirección IP es como la dirección de CoCube dentro de la red local. El navegador utilizará esta dirección para encontrarlo.

Su CoCube puede recibir una dirección diferente. Utilice siempre la dirección que aparece en su pantalla TFT.

El nombre y la contraseña de la red Wi-Fi quedan guardados en el programa. Elimine la contraseña antes de compartir el programa o sus capturas de pantalla.

3. Enviar una petición del navegador a CoCube

En una comunicación HTTP, el navegador es el cliente y CoCube es el servidor:

• El navegador envía una petición HTTP a CoCube.
• CoCube devuelve una respuesta HTTP al navegador.

Construya el siguiente programa:

El programa lee repetidamente la petición HTTP al servidor:

• Si nadie accede a CoCube, devuelve un valor vacío.
• Cuando un navegador accede a CoCube, devuelve una petición.
• Después de recibir una petición, el programa responde con el estado 200 OK y el texto Hello, This is CoCube..

Introduzca lo siguiente en la barra de direcciones del navegador del ordenador o teléfono:

Dirección_IP_de_CoCube/test

Por ejemplo:

172.20.10.2/test

El navegador muestra el texto que devuelve CoCube:

El navegador puede marcar la página local http:// como "No segura". Este experimento no solicita una cuenta, contraseña ni información personal, por lo que puede continuar.

4. Comprender las rutas de petición

La dirección anterior tiene dos partes:

La ruta es la parte que aparece después de la dirección IP y comienza por /. Utilice el bloque ruta de la petición para leerla.

Cada dirección produce una ruta diferente:

El contenido del bloque petición HTTP al servidor se elimina después de leerlo. Por eso, el programa lo guarda primero en la variable request y después lee la ruta desde esa variable.

5. Encender y apagar un píxel con una URL

Ahora haremos que distintas rutas ejecuten tareas diferentes:

Cuando el programa recibe una petición:

• Ruta /on: enciende el píxel de la posición (3,3) y responde con ON.
• Ruta /off: apaga el píxel de la posición (3,3) y responde con OFF.

Abra estas direcciones en el navegador:

Dirección_IP_de_CoCube/on
Dirección_IP_de_CoCube/off

Al abrir /on, el navegador muestra ON y se enciende el píxel de CoCube.

Lo importante no es el texto ON de la página. El navegador ha enviado una orden a CoCube mediante la ruta de la petición.

6. Controlar CoCube desde el navegador

Sustituya las órdenes del píxel por acciones del robot para convertir la barra de direcciones del navegador en un mando sencillo.

El programa utiliza cuatro rutas:

Abra estas direcciones una por una:

Dirección_IP_de_CoCube/forward
Dirección_IP_de_CoCube/backward
Dirección_IP_de_CoCube/left
Dirección_IP_de_CoCube/right

Por ejemplo, al abrir:

172.20.10.2/forward

CoCube avanza.

Después de comprobar la ruta, el programa devuelve al navegador la ruta recibida:

El bloque de respuesta se encuentra después de las comprobaciones de ruta. Cada vez que llega una petición, el navegador recibe rápidamente una respuesta, aunque la ruta no corresponda a ninguna acción.

7. Solución de problemas

El navegador no puede abrir la dirección de CoCube

• Confirme que CoCube se ha conectado a Wi-Fi y muestra una dirección IP.
• Confirme que el ordenador o teléfono está conectado a la misma red Wi-Fi que CoCube.
• Escriba http:// de forma explícita, no https://.
• Compruebe que la dirección IP coincide con la que aparece en la pantalla TFT.
• Algunas redes escolares, de hoteles y públicas aíslan los dispositivos. Pruebe con un punto de acceso del teléfono.

El navegador continúa cargando

• Compruebe si el programa ha recibido una petición HTTP.
• Asegúrese de que el bloque responde a petición HTTP aparece después de las comprobaciones de ruta.
• Asegúrese de que el bloque de respuesta sigue dentro de la condición que comprueba que request no está vacío.

El robot no se mueve

• La ruta debe comenzar por /.
• Las rutas distinguen entre mayúsculas y minúsculas: /forward y /Forward son diferentes.
• Compruebe que los bloques de movimiento de CoCube funcionan por separado.

8. Ampliación: un mando a distancia web

Cambiar la dirección del navegador para cada orden no es cómodo. CoCube también puede proporcionar una página de control con botones.

Abrir el programa completo del mando web en MicroBlocks

Introduzca el nombre y la contraseña de la red Wi-Fi en el programa completo y ejecútelo. Abra en un teléfono u ordenador la dirección IP que aparece en la pantalla de CoCube. Mantenga pulsado un botón de dirección para mover el robot y suéltelo para detenerlo. La página también actualiza automáticamente la posición y la dirección de CoCube.

Este programa incluye HTML, CSS y JavaScript y es más complejo que los ejemplos anteriores. No es necesario entenderlo por completo todavía. Su funcionamiento principal sigue utilizando las peticiones HTTP de esta lección:

La página web sustituye las direcciones escritas a mano por botones. Al pulsar un botón, envía una petición de movimiento; al soltarlo, envía /stop. Esta es la idea básica para controlar un robot desde una página web.