Diferencias

Muestra las diferencias entre dos versiones de la página.

--- es:pibot:lesson4:softwaremac [2021/12/02 20:23] – Added software explanation section jstruebel
+++ es:pibot:lesson4:softwaremac [2022/10/20 19:53] (actual) – editor externo 127.0.0.1
@@ Línea 1: / Línea 1: @@
+====== Configuración del Software ======
+  - Abra la aplicación de terminal\\ \\ <WRAP round tip>Haga clic en la lupa en la esquina superior derecha de la pantalla y escriba "terminal" para encontrar la aplicación de terminal</WRAP>
+  - Escriba el siguiente comando y presione enter para conectarse a la terminal Raspberry Pi a través de SSH\\ \\ <WRAP round important>Reemplace el texto "pibot##" con la etiqueta del PiBot</WRAP> <WRAP round important>La contraseña para ingresar cuando se le solicite es "DogsAndCatsAreNice2." sin las comillas. Los '.' al final es importante!</WRAP><code>ssh pi@pibot##.local</code>
+  - Realice los siguientes pasos para habilitar la interfaz CSI en la placa Raspberry Pi
+    - Escriba el siguiente comando y presione enter para ejecutar la utilidad de configuración de Raspberry Pi\\ \\ <code>sudo raspi-config</code>
+    - Utilice las teclas de flecha hacia arriba y hacia abajo para seleccionar el elemento del menú "Interfacing Options" y luego presione la tecla Intro.\\ \\ <WRAP box>{{ :pibot:lesson4:softwaremac:s1.png |Menú Principal}}</WRAP>
+    - Utilice las teclas de flecha hacia arriba y hacia abajo para seleccionar el elemento del menú "Camera" y presione la tecla Intro.\\ \\ <WRAP box>{{ :pibot:lesson4:softwaremac:s2.png |Menú de Interfaz}}</WRAP>
+    - Utilice las teclas de flecha izquierda y derecha para seleccionar la opción "Yes" y presione la tecla Intro.\\ \\ <WRAP box>{{ :pibot:lesson4:softwaremac:s3.png |Activar Cámara}}</WRAP>
+    - Seleccione la opción "OK" y presione la tecla Intro.\\ \\ <WRAP box>{{ :pibot:lesson4:softwaremac:s4.png |Cámara Confirmada}}</WRAP>
+    - Utilice las teclas de flecha izquierda y derecha para seleccionar la opción "Finish" y presione la tecla Intro.\\ \\ <WRAP box>{{ :pibot:lesson4:softwaremac:s5.png |Salida}}</WRAP>
+    - Utilice las teclas de flecha izquierda y derecha para seleccionar la opción "Yes" y presione la tecla Intro.\\ \\ <WRAP box>{{ :pibot:lesson4:softwaremac:s6.png |Reiniciar}}</WRAP>
+  - Abra el código de Visual Studio desde el directorio de aplicaciones en la unidad flash
+  - Haga clic en el pequeño cuadrado verde en la esquina inferior izquierda de la pantalla.\\ \\ <WRAP box>{{ :pibot:lesson4:softwaremac:s7.png |Pantalla principal de VSCode}}</WRAP>
+  - Seleccione la opción"Connect Current Window to Host..."\\ \\ <WRAP box>{{ :pibot:lesson4:softwaremac:s8.png |VSCode Remote-SSH}}</WRAP>
+  - Escriba "pi@pibot##.local" y presione enter\\ \\ <WRAP round important>Reemplace el texto "pibot##" con la etiqueta en el pibot</WRAP> <WRAP round important>La contraseña para ingresar cuando se le solicite es "DogsAndCatsAreNice2." sin las comillas. Los '.' al final es importante!</WRAP> <WRAP round tip>Es posible que tarde un par de minutos en instalar algunos archivos en el PiBot.</WRAP> <WRAP box>{{ :pibot:lesson4:softwaremac:s9.png |Conexión remota VSCode}}</WRAP>
+  - Haga clic en el botón "Open Folder"\\ \\ <WRAP box>{{ :pibot:lesson4:softwaremac:s10.png |Carpeta abierta VSCode}}</WRAP>
+  - Seleccione la carpeta "pi" y haga clic en el botón "OK"\\ \\ <WRAP box>{{ :pibot:lesson4:softwaremac:s11.png |Exploración de VSCode}}</WRAP>
+  - Abra una terminal en Visual Studio Code desde el menú Terminal-> New Terminal
+  - Escriba los siguientes comandos y presione enter después de cada línea para descargar el código MJPEG Streamer para esta lección\\ \\ <code>wget http://osoyoo.com/driver/picar/webcam.sh
+wget http://osoyoo.com/driver/picar/camstart.sh
+bash webcam.sh</code>
+  - Escriba el siguiente comando y presione enter para iniciar el servidor MJPEG Streamer para esta lección\\ \\ <code>bash camstart.sh</code>
+  - Abra la aplicación Safari, escriba http://pibot##.local:8899 en la barra de direcciones, presione Intro y haga clic en el enlace Stream a la izquierda para probar el software MJPEG Streamer\\ \\ <WRAP round important>Reemplace el texto "pibot##" con la etiqueta en el pibot</WRAP> <WRAP box>{{ :pibot:lesson4:softwaremac:s12.png |Prueba de streamer MJPEG}}</WRAP>
+  - Abra otra terminal en Visual Studio Code desde el menú Terminal-> New Terminal
+  - Escriba los siguientes comandos y presione Intro después de cada línea para descargar el código Python y HTML para esta lección\\ \\ <WRAP round tip>Responda "yes" o "y" cuando se le solicite instalar paquetes adicionales o continuar</WRAP> <code>wget http://osoyoo.com/driver/picar/osoyoowebcar.sh
+bash osoyoowebcar.sh</code>
+  - Cierre la carpeta actual en Visual Studio Code desde el menú File->Close Folder
+  - Haga clic en el icono de páginas dobles a la izquierda y haga clic en el botón "Open Folder"\\ \\ <WRAP box>{{ :pibot:lesson4:softwaremac:s13.png |Carpeta abierta VSCode}}</WRAP>
+  - Seleccione la carpeta "osoyoowebcar" y haga clic en el botón "OK"\\ \\ <WRAP box>{{ :pibot:lesson4:softwaremac:s14.png |Exploración de VSCode}}</WRAP>
+  - Seleccione el archivo webcar.py en la lista\\ \\ <WRAP box>{{ :pibot:lesson4:softwaremac:s15.png |VSCode webcar.py}}</WRAP>
+  - Reemplace **192.168.0.32** en la línea 15 con **0.0.0.0**
+  - Save the change by using the File->Save menu
+  - Haga clic en el directorio de plantillas y seleccione el archivo index.html\\ \\ <WRAP box>{{ :pibot:lesson4:softwaremac:s16.png |VSCode index.html}}</WRAP>
+  - Reemplace **192.168.0.32** en la línea 34 con **pibot##.local**\\ \\ <WRAP round important>Reemplace el texto "pibot##" con la etiqueta en el pibot</WRAP>
+  - Guarde el cambio usando el menú File->Save
+  - Abra una terminal en Visual Studio Code desde el menú Terminal->New Terminal
+  - Escriba el siguiente comando y presione Intro para ejecutar el código de Python para esta lección\\ \\ <code>sudo python3 webcar.py</code>
+  - Abra la aplicación Safari, escriba http://pibot##.local en la barra de direcciones y presione enter\\ \\ <WRAP round important>Reemplace el texto "pibot##" con la etiqueta en el pibot</WRAP> <WRAP round important>Es posible que deba ajustar la posición de montaje del soporte de la cámara para que apunte hacia adelante.</WRAP> <WRAP box>{{ :pibot:lesson4:softwaremac:s17.png |Aplicación webcar}}</WRAP>
+====== Explicación del Software ======
+El archivo webcar.py usa una biblioteca de Python llamada Flask que maneja los detalles de servir una página web a su navegador web. El uso de bibliotecas como Flask es una forma poderosa de obtener capacidades avanzadas en su software sin tener que escribir mucho código desde cero. Al usar la biblioteca Flask, solo hay unas pocas líneas de código que se requieren para hacer que el PiBot funcione desde su navegador web.
+  - En el archivo webcar.py, busque la última línea de código. ¿Qué crees que hace esta línea?\\ \\ <WRAP round tip>La función app.run es lo que llama a la biblioteca Flask y le dice que envíe páginas a su navegador web.</WRAP> <WRAP round tip>El puerto 80 es el puerto estándar que se usa en Internet cuando escribe %%http://%% al principio de la dirección web</WRAP>
+  - En el archivo webcar.py, busque dónde está definida la función de acción. ¿Qué crees que hace esta función?\\ \\ <WRAP round tip>Si no recuerda qué es una variable, revise la descripción de [[:es:pibot:lesson1:softwaremac#explicacion_del_software|Lección 1]]</WRAP> </WRAP round tip>El '@app.route' que aparece encima de la función de acción se llama decorador de funciones. Le dice a Python que esta función tiene un significado especial para la biblioteca Flask.</WRAP> <WRAP round tip>Flask utiliza el decorador @app.route para ejecutar una función cuando su navegador web accede a una determinada URL. Se puede acceder a todas las páginas que muestra su navegador web mediante una URL. La mayoría de las URL comienzan con %%http://%% o %%https://%% y luego el nombre del sitio web, como google.com o yahoo.com. Después del sitio web, a menudo hay una ruta que le dice al servidor web exactamente qué página web desea ver. Flask usa esa ruta para determinar qué función ejecutar según el decorador @app.route.</WRAP>
+  - ¿Cómo se relacionan los valores '<action>' y '<cmd>' en el decorador con los parámetros de la función de acción?\\ \\ <WRAP round tip>Los valores '<action>' y '<cmd>' en la llamada al decorador @app.route se pasan a la función de acción como los parámetros 'action' y 'cmd'.</WRAP>
+  - ¿Cuáles son algunas rutas válidas que harán que la función de action haga algo? Encuentre lo que hace el código cuando su navegador web solicita esa ruta.\\ \\ <WRAP round tip>Cada ruta termina llamando a otra función en el código según lo determinado por las declaraciones 'if'. Encuentre dónde se definen esas funciones en el código para ver qué sucede cuando se solicita cada ruta. </WRAP>
+  - Agregue código a la función de acción para que cuando se solicite la ruta '/print/hello' se imprima el texto "Hello from PiBot".
+  - Guarde sus cambios usando el menú File->Save
+  - Escriba control + C en la ventana de la terminal y luego ejecute el siguiente comando en la terminal de Visual Studio Code para obtener su nuevo código\\ \\ <code>sudo python3 webcar.py</code>
+  - En la aplicación Safari, escriba http://pibot##.local/print/hello en la barra de direcciones y presione Intro. ¿Qué sucede en la ventana de terminal?\\ \\ <WRAP round important>Reemplace el texto "pibot##" con la etiqueta en el pibot</WRAP>
+  - En el archivo webcar.py, busque la llamada a la función render_template. ¿Cuál es el nombre del archivo que enviará?\\ \\ <WRAP round tip>La plantilla render_function toma el nombre del archivo que se pasa como parámetro y lo envía al navegador web que está accediendo a él. Todos los archivos deben estar en el directorio de 'templates' para que Flask pueda enviarlos.</WRAP>
+  - Abra el archivo 'index.html' del directorio de plantillas
+  - En el archivo index.html, busque donde solicita una de las rutas que vio en el archivo webcar.py. ¿De qué función forma parte?\\ \\ <WRAP round tip>El comando "GET" es un comando HTTP estándar que los navegadores web utilizan para solicitar una URL del servidor web. Algunos otros comandos son "POST", "PUT" y "CONNECT".</WRAP>
+  - Busque la línea '<script>' en el archivo index.html.\\ \\<WRAP round tip>La etiqueta '<script> inicia un bloque de código Javascript en medio de un archivo HTML. Javascript permite que una página web sea más interactiva que simplemente mostrar información. El archivo index.html usa funciones de Javascript para enviar los comandos a la Raspberry Pi para que pueda controlar PiBot.</WRAP>
+  - Encuentre dónde se llama una de las funciones de Javascript en el HTML anterior. ¿Qué crees que hace que se llame a la función?\\ \\ <WRAP round tip>HTML utiliza etiquetas que se encuentran entre corchetes '<' y '>'. Las etiquetas HTML se utilizan para organizar, formatear y dibujar los elementos que ve en una página web.</WRAP>
+  - Agregue un botón al HTML que, al hacer clic, solicitará la URL '/print/hello' que agregó.\\ \\ <WRAP round tip>No olvide crear una función de Javascript para enviar la solicitud. Copie una de las funciones existentes y modifíquela.</WRAP>
+  - Guarde sus cambios usando el menú File->Save
+  - Vuelva a cargar la página web en la aplicación Safari para ver su nuevo botón. Haga clic en él y vea si imprime el mensaje correcto en la ventana del terminal.
+  - Cuando haya terminado de conducir el PiBot, mantenga presionadas las teclas control + C y escriba el siguiente comando en la terminal de Visual Studio Code para apagar el PiBot\\ \\ <code>sudo shutdown -h now</code>
+  - Haga clic en el pequeño rectángulo verde en la esquina inferior izquierda de la pantalla y seleccione "Close Remote Connection"
+  - Espere de 3 a 5 minutos para que la luz verde de la Raspberry Pi deje de parpadear y apague el interruptor de la batería PiBot
+[[:es:pibot:lesson4#software|Regresar a la Lección 4]]