Conexión de su Raspberry Pi a la web: 9 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:41

En esta lección, aprenderá a crear una página web, recopilar datos utilizando la World Wide Web y utilizar API para publicar imágenes en Tumblr y Twitter.

Paso 1: cliente y servidor

En informática, cliente-servidor es un modelo de software que consta de dos partes: un cliente y un servidor. Ambos se comunican a través de una red informática o juntos en la misma computadora. El cliente es un programa o una computadora con software que se basa en realizar solicitudes de servicio a un servidor. El servidor es un programa informático o un dispositivo que puede aceptar estas solicitudes, procesarlas y devolver la información solicitada al cliente. A veces es complicado averiguar cuál es cuál cuando se trabaja con máquinas que realizan varias tareas a la vez. A continuación, presentamos algunas características que le ayudarán a distinguir entre un cliente y un servidor.

Características del cliente:

• Es el primer activo
• Envía solicitudes al servidor
• Espera y recibe respuestas del servidor.
• Por lo general, interactúa directamente con los usuarios finales mediante cualquier interfaz de usuario, como la interfaz gráfica de usuario.

Características del servidor:

• Inicialmente es pasivo
• Está escuchando, listo para responder a las solicitudes enviadas por los clientes.
• cuando llega una solicitud, responde con los datos solicitados a los clientes
• Los usuarios finales normalmente no interactúan directamente con un servidor, sino que utilizan un cliente.

Un ejemplo común de una relación cliente-servidor es un navegador web (cliente) que solicita y recibe archivos de páginas web alojados en un servidor web.

Paso 2: crear un servidor web local

La Raspberry Pi puede convertirse en un servidor web instalando y ejecutando una aplicación de servidor. Dos aplicaciones de servidor de código abierto populares son: NGINX (pronunciado motor x) y Apache. En esta lección, usará Apache porque, al momento de escribir este artículo, está más documentado. Esto facilita la búsqueda de respuestas en línea a medida que aprende.

Su Raspberry Pi alojará un sitio web al que puede acceder cualquier dispositivo de la misma red. ¡Empecemos!

Paso 3: instalar Apache

Instale el paquete apache2. El indicador -y responde a la pregunta de seguridad previa a la instalación.

sudo apt-get install apache2 -y

Apache viene con un archivo HTML de prueba que genera una página web de marcador de posición para probar la instalación. Este archivo HTML de prueba viene en el directorio raíz de Apache. De forma predeterminada, Apache está configurado para buscar en este directorio documentos web para crear contenido dentro de un navegador web. Para echar un vistazo a esta página de prueba y confirmar que Apache efectivamente se instaló correctamente, levántelo en su navegador web escribiendo esta dirección URL:

localhost /

Si Apache se instaló correctamente, verá la página web de prueba de Apache en el navegador:

Encuentre la dirección IP de su Raspberry Pi

Puede usar la dirección de localhost para acceder a la página web mientras está en la Raspberry Pi. Para acceder a la página web desde otra computadora, necesita la dirección IP de su Raspberry Pi. Para encontrar el tipo de dirección IP en LXTerminal:

ifconfig

También puede encontrarlo en el escritorio si coloca el cursor sobre el símbolo de recepción WiFi.

Paso 4: crea una página web estática

Su Raspberry Pi ahora puede alojar una página web y todo el contenido que se publicará en ella. Hay dos tipos básicos de páginas web: estáticas y dinámicas. Una página estática tiene contenido que no cambia. Una página dinámica puede mostrar datos cambiantes, como lecturas de sensores o cambios de hora y fecha.

Comencemos con una página estática. Para crear uno, debe utilizar un lenguaje llamado HTML. Cuando accedes a una página web, lo primero que ves es probablemente una página index.html. Esta página es la página predeterminada que muestra un navegador si no se especifica otra página. De forma predeterminada, Apache busca el archivo index.html aquí:

/ var / www / html

Esto se llama raíz del documento y es una carpeta oculta. Está diseñado para albergar páginas web. Ve allí y echa un vistazo a tu alrededor:

cd / var / www / html

ls

Verá el archivo index.html de prueba predeterminado en la lista. Si desea guardar el archivo predeterminado, cámbiele el nombre a algo como defaultIndex.html usando el comando mv.

sudo mv index.html defaultIndex.html

si no desea guardarlo, elimine el archivo usando el comando rm:

sudo rm index.html

Ahora, puede crear y comenzar a editar su propio archivo index.html:

sudo nano index.html

Recuerde usar sudo, los directorios www y html son propiedad de root, por lo que debe actuar como root para crear, editar y manipular cualquier archivo que viva en esos directorios.

Página HTML básica

HTML es un lenguaje profundo. Puedes hacer mucho con él. Si está interesado en obtener más información, visite el sitio web de W3Schools, donde puede encontrar muchos tutoriales sobre cómo usar HTML para crear un sitio web. Comenzaremos con una página HTML simple.

Primero, dígale al navegador qué versión de HTML está utilizando. Este documento se declara como un documento HTML5:

Comience con las etiquetas html y body:

La mayor parte de su contenido va a continuación, entre las etiquetas corporales. Haga de la primera línea un encabezado con la etiqueta h1. El número después de la "h" define la importancia del título que afecta el tamaño de la fuente. Utilice la etiqueta p para definir un párrafo:

¡Mi Raspberry Pi tiene un sitio web

¿Qué debo poner aquí?

Termine la página cerrando el cuerpo y html y etiquetas:

Guarde el documento con el sufijo.html y visite localhost en su navegador. ¡Verás tu página web!

¿Qué debería poner en la página web? ¡Pongamos una imagen, o mejor aún, el animateMe.gif! Para que cualquier activo se muestre en esta página web, debe colocarse en la raíz del documento de Apache. Debe copiarlo y pegarlo para que también permanezca en su directorio boof / fotos. Para copiar y pegar un archivo en la línea de comandos, use el comando cp. Primero, cd a su directorio personal:

cd ~

Copie y pegue el archivo animateMe.gif:

sudo cp boof / fotos / animateMe-g.webp

Regrese al directorio html:

cd / var / www / html

Vuelva a abrir el archivo index.html para que pueda agregar la imagen:

sudo nano index.html

Para definir e incrustar una imagen en una página HTML, use la etiqueta img. Pon la siguiente línea entre el encabezado y el párrafo.

Abra la página en el navegador y se verá así, excepto con su propio-g.webp

Paso 5: agrega un poco de estilo

La página se ve un poco sosa. Sin color y sin estilo. Aquí es donde entra en juego CSS. Es un lenguaje que trabaja de la mano con HTML para hacer una página web más atractiva y visualmente creativa. Solo tocará aquí, pero si desea obtener más información, visite las W3schools para obtener más información.

Como ejemplo, cambiemos el color del fondo agregando CSS a su archivo HTML. Hay varias formas de diseñar su página web usando CSS. Para esta clase, usará las etiquetas de estilo para incrustar CSS directamente en su archivo HTML.

Coloque las siguientes líneas entre las primeras etiquetas html y body en la parte superior de su página HTML:

body {background-color: powderblue;} etiquetas. Se verá así:

body {background-color: powderblue;}

Paso 6: instalar PHP

En lugar de una página estática, puede crear una dinámica que sea capaz de cambiar sin que usted cargue archivos manualmente. Una forma popular de hacer esto es usar un lenguaje de programación llamado PHP. Para usar PHP en Raspberry Pi, primero debe instalarlo con el paquete de módulo para Apache:

sudo apt-get install libapache2-mod-php5 php5 -y

Paso 7: crea una página web dinámica

Combine PHP con HTMLA siempre que el código PHP esté contenido en etiquetas, puede incluirlo en una estructura de archivo HTML. Como ejemplo, combine sus scripts HTML y PHP actuales y agrande el texto utilizando etiquetas HTML.

Incluyamos un script PHP simple que muestra la fecha y la hora. Pegue lo siguiente en cualquier lugar entre las etiquetas:

Guarde el archivo con Ctrl + o pero cambie la extensión de.html a.php, que guardará un nuevo archivo. Para no confundir al navegador, elimine la antigua versión.html:

sudo rm index.html

Actualice localhost en su navegador web. La salida se verá así:

Ok, entonces cual es la diferencia? Parece una página HTML normal, ¿no? Actualiza la página y observa la magia. ¡La magia es que el tiempo cambiará! Eso es PHP y su función date () incorporada trabajando para que usted cree una página web dinámica.

Paso 8: crea un cliente API de Tumblr

La Raspberry Pi puede solicitar y obtener información de otras aplicaciones de software en línea a través de una API (interfaz de programación de aplicaciones). Una API facilita que algo como Raspberry Pi corte todos los datos de un sitio web para obtener solo las cosas útiles. Haga que su Raspberry Pi hable con Tumblr, Twitter y weather.com para twittear, publicar imágenes y mostrar pronósticos del tiempo.

Raspberry Pi y Tumblr

El siguiente ejercicio crea una conversación entre su Raspberry Pi y Tumblr. Como cliente, su Raspberry Pi le pedirá a Tumblr fragmentos de datos para que pueda cargar imágenes en el servidor remoto de Tumblr, lo que dará como resultado que las imágenes se publiquen en una cuenta de Tumblr. Para que una Raspberry Pi funcione con una API, lo más probable es que ya exista una biblioteca para que la use. Para Tumblr está Pytumblr. Un cliente se crea en un programa Python usando una función incorporada creada en Pytumblr. Esta función utiliza cuatro códigos de autorización generados por Tumblr:

• clave del consumidor
• secreto del consumidor
• clave de token
• secreto simbólico

Antes de poder utilizar la API de Tumblr, debe obtener cuatro de estas claves (similares a las contraseñas). Para obtenerlos, siga estos pasos:

1. Cree una cuenta de Tumblr gratuita e inicie sesión.
2. Registre una aplicación. Solo necesita proporcionar información básica como un título (pruebe con "Mi Raspberry Pi"), descripción, correo electrónico y sitio web (use este si no tiene uno). Después del registro, obtendrá una clave de consumidor y un secreto de consumidor. Cópielos y péguelos en un lugar seguro, como un archivo de texto o un correo electrónico. Para acceder a ellos nuevamente, vaya a la página de su cuenta de Tumblr, elija Configuración en el menú Cuenta y haga clic en Aplicaciones.
3. Inicie sesión en la consola de desarrollador con su clave y códigos de autorización secretos. Haga clic en permitir cuando se le pregunte si desea que se publique en su nombre.
4. Una vez que haya iniciado sesión en la consola del desarrollador, verá un código de ejemplo en varios idiomas diferentes. Haga clic en la pestaña Python y copie el bloque OAuth, o en el menú superior haga clic en Mostrar claves para ver la clave del token y los códigos secretos del token junto con los dos códigos que ya tiene.

Pongamos estos códigos a trabajar y creemos un programa Python que publique animateMe-g.webp

Primero instale Pytumblr:

sudo apt-get update

sudo pip instalar pytumblr

Desde su directorio de inicio, cd en la carpeta boof y cree un archivo Python:

cd boof

Cree su archivo usando el editor de IDLE para que sea más fácil cortar y pegar sus códigos de autorización muy largos. Pon esto en tu archivo testPytumblr.py, actualizando las cuatro claves y tu nombre de usuario:

importar pytumblr

# Autentica a través de OAuth, copia de https://api.tumblr.com/console/calls/user/info client = pytumblr. TumblrRestClient ('your_consumer_key', 'your_consumer_secret', 'your_token', 'your_token_secret') client.create_photo ('your_account_username', state = "Published", tags = [“raspberrypi”, “picamera”], data = “fotos / animateMe.gif") print ("subido")

El programa etiqueta la foto cargada por usted con "raspberrypi" y "picamera". Si lo desea, puede eliminar, sustituir o agregar estas etiquetas. Estos se almacenan en una variable llamada etiquetas que se usa en client.create_photo ().

Presione F5 para ejecutar el programa. Habrá un error … pero ya ha instalado Pytumblr, entonces, ¿por qué Python dice que no puede encontrar el módulo? Esto se debe a que Pytumblr no es compatible con Python 3, solo funciona en Python 2 *. Abra el editor de Python 2 IDLE y corte y pegue su código, sobrescriba el programa Python 3 y luego ejecútelo. Cuando haya subido el GIF, "subido" se imprimirá en la ventana del shell de Python.

¡Esta es la mejor parte! ¡Ve a tu página de Tumblr y mira el GIF! Cambie "publicado" en su programa a "borrador" si desea crear borradores de publicaciones.

* Después de que se publicó esta clase, otro usuario de github ha bifurcado el original, agregando soporte para Python 3 para ciertos comandos.

Si la publicación no aparece, verifique que haya ingresado correctamente sus cuatro claves y el nombre de usuario de Tumblr, y que la conexión a Internet de su Pi esté activa. También puede ejecutar su script desde la línea de comando usando Python 2 (cd a su carpeta boof si aún no está allí):

prueba de pythonPytumblr.py

Paso 9: tome una captura de pantalla de Tumblr y / o sitio web

Cree un sitio web para mostrarle un-g.webp