Tutorial 6 – ¡Ponlo en la web!¶
Además de ser compatible con plataformas móviles, el conjunto de herramientas de widgets Toga también es compatible con la web. Utilizando la misma API que usaste para desplegar tus aplicaciones de escritorio y móviles, puedes desplegar tu aplicación como una aplicación web de una sola página.
Prueba de concepto
El backend Toga Web es el menos maduro de todos los backend de Toga. Es lo suficientemente maduro como para presumir de algunas prestaciones, pero es probable que tenga fallos, y le faltarán muchos de los widgets que están disponibles en otras plataformas. En este momento, el despliegue de la web sería considerado como una «Prueba de Concepto» —suficiente para demostrar lo que se puede hacer, pero no lo suficiente como para confiar en él para un desarrollo serio.
Si tiene problemas con este paso del tutorial, puede pasar a la página siguiente.
Desplegar como aplicación web¶
El proceso de despliegue de una aplicación web de una sola página sigue el mismo patrón familiar: se crea la aplicación, se compila y se ejecuta. Sin embargo, Portafolio puede ser un poco inteligente; si intentas ejecutar una aplicación, y Portafolio determina que no ha sido creada o construida para la plataforma a la que se dirige, realizará los pasos de creación y construcción por ti. Dado que esta es la primera vez que ejecutamos la aplicación para la web, podemos realizar los tres pasos con un solo comando:
(beeware-venv) $ briefcase run web
[helloworld] Generando plantilla de aplicación...
Usando la plantilla de aplicación: https://github.com/beeware/briefcase-web-static-template.git, rama v0.3.18
...
[helloworld] Instalando el paquete de soporte...
No se requiere ningún paquete de soporte.
[helloworld] Instalando el código de la aplicación...
Instalando src/helloworld... hecho
[helloworld] Instalando los requisitos...
Escribiendo el archivo de requisitos... hecho
[helloworld] Instalando recursos de la aplicación...
...
[helloworld] Eliminando contenido innecesario de la aplicación...
Eliminando contenido innecesario del paquete de la aplicación... hecho
[helloworld] Creado build/helloworld/web/static
[helloworld] Compilando proyecto web...
...
[helloworld] Se ha compilado build/helloworld/web/static/www/index.html
[helloworld] Iniciando el servidor web...
Servidor web abierto en http://127.0.0.1:8080
[helloworld] Salida del registro del servidor web (pulsa CTRL-C para detener el registro)...
===========================================================================
(beeware-venv) $ briefcase run web
[helloworld] Generando plantilla de aplicación...
Usando la plantilla de aplicación: https://github.com/beeware/briefcase-web-static-template.git, rama v0.3.18
...
[helloworld] Instalando el paquete de soporte...
No se requiere ningún paquete de soporte.
[helloworld] Instalando el código de la aplicación...
Instalando src/helloworld... hecho
[helloworld] Instalando los requisitos...
Escribiendo el archivo de requisitos... hecho
[helloworld] Instalando recursos de la aplicación...
...
[helloworld] Eliminando contenido innecesario de la aplicación...
Eliminando contenido innecesario del paquete de la aplicación... hecho
[helloworld] Creado build/helloworld/web/static
[helloworld] Compilando proyecto web...
...
[helloworld] Se ha compilado build/helloworld/web/static/www/index.html
[helloworld] Iniciando el servidor web...
Servidor web abierto en http://127.0.0.1:8080
[helloworld] Salida del registro del servidor web (pulsa CTRL-C para detener el registro)...
===========================================================================
(beeware-venv) C:\...>briefcase run web
[helloworld] Generando plantilla de aplicación...
Usando la plantilla de aplicación: https://github.com/beeware/briefcase-web-static-template.git, rama v0.3.18
...
[helloworld] Instalando el paquete de soporte...
No se requiere ningún paquete de soporte.
[helloworld] Instalando el código de la aplicación...
Instalando src/helloworld... hecho
[helloworld] Instalando requisitos...
Escribiendo el archivo de requisitos... hecho
[helloworld] Instalando recursos de la aplicación...
...
[helloworld] Eliminando contenido innecesario de la aplicación...
Eliminando contenido innecesario del paquete de la aplicación... hecho
[helloworld] Creado build\helloworld\web\static
[helloworld] Compilando proyecto web...
...
[helloworld] Compilado build\helloworld\web\static\www\index.html
[helloworld] Iniciando el servidor web...
Servidor web abierto en http://127.0.0.1:8080
[helloworld] Salida del registro del servidor web (pulsa CTRL-C para detener el registro)...
===========================================================================
Esto abrirá un navegador web, apuntando a
Hola Mundo Tutorial 6 diálogo, en un navegador](../images/tutorial-6.png)
Si introduce su nombre y pulsa el botón, aparecerá un cuadro de diálogo.
¿Como funciona esto?¶
Esta aplicación web es un sitio web estático – una única página fuente HTML, con
algunos CSS y otros recursos. Briefcase ha iniciado un servidor web local para
servir esta página y que tu navegador pueda verla. Si quisieras poner esta
página web en producción, podrías copiar el contenido de la carpeta www en
cualquier servidor web que pueda servir contenido estático.
Pero cuando pulsas el botón, estás ejecutando código Python… ¿cómo funciona eso? Toga utiliza PyScript para proporcionar un intérprete de Python en el navegador. El portafolio empaqueta el código de tu aplicación como ruedas que PyScript puede cargar en el navegador. Cuando se carga la página, el código de la aplicación se ejecuta en el navegador, construyendo la interfaz de usuario utilizando el DOM del navegador. Cuando pulsas un botón, ese botón ejecuta el código de gestión de eventos en el navegador.
Publicación de la aplicación web¶
Si lo deseas, también puedes intentar publicar esta aplicación web en Internet utilizando el complementodel Portafolio PythonAnywhere. El tutorial para ese complemento continúa donde termina esta página y te guía a través del proceso de empaquetado y publicación en PythonAnywhere.
Siguientes pasos¶
Aunque ya hemos desplegado esta aplicación en escritorios, dispositivos móviles y la web, la aplicación es bastante sencilla y no incluye bibliotecas de terceros. ¿Podemos incluir bibliotecas del Python Package Index (PyPI) en nuestra aplicación? Visita Tutorial 7 para averiguarlo…