Nota

¡Hola! Bienvenido a la Comunidad de Entusiastas de SunFounder para Raspberry Pi, Arduino y ESP32 en Facebook. Sumérgete en el mundo de Raspberry Pi, Arduino y ESP32 junto a otros entusiastas.

¿Por qué unirse?

  • Soporte Experto: Resuelve problemas posventa y desafíos técnicos con la ayuda de nuestra comunidad y equipo.

  • Aprende y Comparte: Intercambia consejos y tutoriales para mejorar tus habilidades.

  • Previsualizaciones Exclusivas: Obtén acceso anticipado a anuncios de nuevos productos y adelantos exclusivos.

  • Descuentos Especiales: Disfruta de descuentos exclusivos en nuestros productos más recientes.

  • Promociones Festivas y Sorteos: Participa en sorteos y promociones de temporada.

👉 ¿Listo para explorar y crear con nosotros? Haz clic en [Aquí] y únete hoy.

7. Configurar un Servidor Web

En este artículo, aprenderás cómo convertir el Pico W en un servidor web que te permita operar el circuito y obtener lecturas del sensor desde un navegador.

setup_web

1. Componentes Requeridos

Para este proyecto, necesitamos los siguientes componentes.

Es conveniente adquirir el kit completo; aquí tienes el enlace:

Nombre

ELEMENTOS EN ESTE KIT

ENLACE

Kit Kepler

450+

Kepler Ultimate Kit

También puedes comprarlos por separado a través de los enlaces a continuación.

N.º

COMPONENTE

CANTIDAD

ENLACE

1

Conociendo el Pico W

1

COMPRAR

2

Cable Micro USB

1

3

Protoboard

1

COMPRAR

4

Cables de Puente (Jumpers)

Varios

COMPRAR

5

Resistor

4(1-330Ω, 2-220Ω, 1-10KΩ)

COMPRAR

6

LED RGB

1

COMPRAR

7

Termistor

1

COMPRAR

8

Módulo Cargador Li-po

1

9

Batería 18650

1

10

Portapilas

1

2. Construcción del Circuito

Advertencia

Asegúrate de que el Módulo de Carga Li-po esté conectado como se muestra en el diagrama. De lo contrario, un cortocircuito podría dañar tu batería y el circuito.

../../_images/7.web_page_bb.png

3. Ejecutar el Código

  1. Abre el archivo 7_web_page.py en la ruta kepler-kit-main/iot.

  2. Haz clic en el botón Run current script o presiona F5 para ejecutarlo. Después de una conexión exitosa, verás la IP del Pico W.

    ../../_images/7_web_server.png

    Nota

    Antes de ejecutar el código, asegúrate de tener los scripts do_connect.py y secrets.py en tu Pico W. Si no los tienes, consulta 1. Acceso a la Red para crearlos.

  3. Ingresa la dirección IP del Pico W en tu navegador para acceder a la página web creada para este proyecto. Haz clic en cualquier botón para cambiar el color de los LED RGB y actualizar la temperatura y la humedad.

  4. Si deseas que este script se ejecute al iniciar, puedes guardarlo en la Raspberry Pi Pico W como main.py.

Cómo funciona

La página web que estás visitando en realidad está alojada en un servidor, y el socket en el servidor enviará la página cuando accedamos a ella. Un socket es la forma en que un servidor puede escuchar a un cliente que desea conectarse a él.

En este proyecto, el Pico W actúa como tu servidor, y tu computadora accede a la página web alojada en el Pico W a través de un navegador.

Primero, creamos un socket, el cual requiere una dirección IP y un port. La conexión de red y la forma de obtener la IP se describen en 1. Acceso a la Red. Para el puerto, utilizamos el 80. Después de configurar el socket, lo devolvemos para usarlo en el siguiente paso.

socket library - Python Docs

import socket

def open_socket(ip):
    # Abrir un socket
    address = (ip, 80)
    connection = socket.socket()
    connection.bind(address)
    connection.listen(1)
    print(connection)
    return(connection)

Luego, configura tu servicio web utilizando el socket que configuraste anteriormente. El siguiente código permite que tu Pico W reciba solicitudes de acceso desde tu navegador.

def serve(connection):
    while True:
        client = connection.accept()[0]
        request = client.recv(1024)
        client.close()

A continuación, necesitas una página html para enviar al visitante. Este ejemplo almacena una página html sencilla en forma de cadena en la variable html.

Nota

Si deseas escribir tu propio html, puedes obtener ayuda en HTML.COM.

def webpage(value):
    html = f"""
            <!DOCTYPE html>
            <html>
            <body>
            <form action="./red">
            <input type="submit" value="red " />
            </form>
            <form action="./green">
            <input type="submit" value="green" />
            </form>
            <form action="./blue">
            <input type="submit" value="blue" />
            </form>
            <form action="./off">
            <input type="submit" value="off" />
            </form>
            <p>Temperature is {value} degrees Celsius</p>
            </body>
            </html>
            """
    return html

Envía la página html al visitante.

def serve(connection):
    while True:
        client = connection.accept()[0]
        request = client.recv(1024)
        html=webpage(0)
        client.send(html)
        client.close()

Puedes acceder a la página a través de tu navegador si combinas las partes anteriores. Si quieres ver el efecto, ejecuta el código siguiente en Thonny.

import machine
import socket

from secrets import *
from do_connect import *

def webpage(value):
    html = f"""
            <!DOCTYPE html>
            <html>
            <body>
            <form action="./red">
            <input type="submit" value="red " />
            </form>
            <form action="./green">
            <input type="submit" value="green" />
            </form>
            <form action="./blue">
            <input type="submit" value="blue" />
            </form>
            <form action="./off">
            <input type="submit" value="off" />
            </form>
            <p>Temperature is {value} degrees Celsius</p>
            </body>
            </html>
            """
    return html

def open_socket(ip):
    # Abrir un socket
    address = (ip, 80)
    connection = socket.socket()
    connection.bind(address)
    connection.listen(1)
    print(connection)
    return(connection)

def serve(connection):
    while True:
        client = connection.accept()[0]
        request = client.recv(1024)
        html=webpage(0)
        client.send(html)
        client.close()

try:
    ip=do_connect()
    if ip is not None:
        connection=open_socket(ip)
        serve(connection)
except KeyboardInterrupt:
    machine.reset()

Cuando ejecutes el código anterior, verás que solo muestra una página web, pero no te permite controlar los LEDs RGB ni mostrar lecturas de sensores. El servicio web necesita refinarse aún más.

Lo primero que necesitamos saber es qué información recibe el servidor cuando el navegador accede a la página web. Por lo tanto, modifica ligeramente serve() para imprimir request.

def serve(connection):
    while True:
        client = connection.accept()[0]
        request = client.recv(1024)
        request = str(request)
        print(request)
        html=webpage(0)
        client.send(html)
        client.close()

Ejecuta nuevamente el script y el Shell imprimirá el siguiente mensaje cuando presionamos un botón en la página web.

b'GET /red? HTTP/1.1\r\nHost: 192.168.18.162\r\nConnection: keep-alive.......q=0.5\r\n\r\n'
b'GET /favicon.ico HTTP/1.1\r\nHost: 192.168.18.162\r\nConnection: keep-alive.......q=0.5\r\n\r\n'
b'GET /blue? HTTP/1.1\r\nHost: 192.168.18.162\r\nConnection: keep-alive.......q=0.5\r\n\r\n'
b'GET /favicon.ico HTTP/1.1\r\nHost: 192.168.18.162\r\nConnection: keep-alive.......q=0.5\r\n\r\n'

¡Son demasiado largos para leer!

Pero todo lo que realmente necesitamos es la pequeña parte de información frente a /red?, /blue?. Nos dice qué botón fue presionado. Refinamos serve() un poco para extraer la información de la tecla.

def serve(connection):
    while True:
        client = connection.accept()[0]
        request = client.recv(1024)
        request = str(request)
        try:
            request = request.split()[1]
        except IndexError:
            pass
        print(request)
        html=webpage(0)
        client.send(html)
        client.close()

Ejecuta de nuevo el programa y el Shell imprimirá el siguiente mensaje cuando presionamos un botón en la página web.

/red?
/favicon.ico
/blue?
/favicon.ico
/off?
/favicon.ico

Entonces, solo necesitamos cambiar el color del LED RGB de acuerdo al valor de request.

def serve(connection):
    while True:
        client = connection.accept()[0]
        request = client.recv(1024)
        request = str(request)
        try:
            request = request.split()[1]
        except IndexError:
            pass

        print(request)

        if request == '/off?':
            red.low()
            green.low()
            blue.low()
        elif request == '/red?':
            red.high()
            green.low()
            blue.low()
        elif request == '/green?':
            red.low()
            green.high()
            blue.low()
        elif request == '/blue?':
            red.low()
            green.low()
            blue.high()

        html=webpage(0)
        client.send(html)
        client.close()

Lo último es mostrar el valor del termistor en la página web (consulta 2.13 Termómetro para más detalles sobre el uso del termistor). Esta parte en realidad se realiza modificando el texto en el html. Configuramos los parámetros en la función webpage(value) y simplemente cambiamos los parámetros entrantes para cambiar el número que se muestra en la página web.

def serve(connection):
    while True:
        client = connection.accept()[0]
        request = client.recv(1024)
        request = str(request)
        try:
            request = request.split()[1]
        except IndexError:
            pass

        #print(request)

        if request == '/off?':
            red.low()
            green.low()
            blue.low()
        elif request == '/red?':
            red.high()
            green.low()
            blue.low()
        elif request == '/green?':
            red.low()
            green.high()
            blue.low()
        elif request == '/blue?':
            red.low()
            green.low()
            blue.high()

        value='%.2f'%temperature()
        html=webpage(value)
        client.send(html)
        client.close()