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 backends Toga. Es lo suficientemente maduro como para mostrar algunas características, pero es probable que tenga errores, y le faltarán muchos de los widgets que están disponibles en otras plataformas. En este momento, el despliegue Web debe considerarse 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.

Despliegue 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, Briefcase puede ser un poco inteligente; si intentas ejecutar una aplicación, y Briefcase 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] Generating application template...
Using app template: https://github.com/beeware/briefcase-web-static-template.git, branch v0.3.18
...

[helloworld] Installing support package...
No support package required.

[helloworld] Installing application code...
Installing src/helloworld... done

[helloworld] Installing requirements...
Writing requirements file... done

[helloworld] Installing application resources...
...

[helloworld] Removing unneeded app content...
Removing unneeded app bundle content... done

[helloworld] Created build/helloworld/web/static

[helloworld] Building web project...
...

[helloworld] Built build/helloworld/web/static/www/index.html

[helloworld] Starting web server...
Web server open on http://127.0.0.1:8080

[helloworld] Web server log output (type CTRL-C to stop log)...
===========================================================================

Esto abrirá un navegador web, apuntando a http://127.0.0.1:8080:

Diálogo Hello World Tutorial 6, en un navegador

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. Briefcase 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.

Siguientes pasos

Aunque ya hemos desplegado esta aplicación en ordenadores de sobremesa, dispositivos móviles y la web, la aplicación es bastante sencilla y no incluye bibliotecas de terceros. ¿Podemos incluir librerías del Python Package Index (PyPI) en nuestra aplicación? Visita Tutorial 7 para averiguarlo…