Tutoriel 6 - Mettez-le sur le web !

En plus de prendre en charge les plateformes mobiles, la boîte à outils Toga widget prend également en charge le web ! En utilisant la même API que celle utilisée pour déployer vos applications de bureau et mobiles, vous pouvez déployer votre application en tant qu’application web à page unique.

Preuve de concept

Le backend de Toga Web est le moins mature de tous les backends de Toga. Il est suffisamment mature pour présenter quelques fonctionnalités, mais il est probable qu’il soit bogué et qu’il manque de nombreux widgets disponibles sur d’autres plates-formes. À ce stade, le déploiement sur le Web doit être considéré comme une « preuve de concept » - suffisante pour démontrer ce qui peut être fait, mais pas assez pour être utilisée pour un développement sérieux.

Si vous avez des problèmes avec cette étape du tutoriel, vous pouvez passer à la page suivante.

Déploiement en tant qu’application web

Le processus de déploiement en tant qu’application web à page unique suit le même schéma familier - vous créez l’application, vous la construisez, puis vous l’exécutez. Cependant, Briefcase peut être un peu plus intelligent ; si vous essayez d’exécuter une application et que Briefcase détermine qu’elle n’a pas été créée ou construite pour la plateforme ciblée, il effectuera les étapes de création et de construction pour vous. Puisque c’est la première fois que nous lançons l’application pour le web, nous pouvons exécuter les trois étapes en une seule commande :

macOSLinuxWindows

(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)...
===========================================================================

Cela ouvrira un navigateur web, pointant sur http://127.0.0.1:8080 :

Si vous entrez votre nom et cliquez sur le bouton, une boîte de dialogue apparaît.

Comment ça marche ?

Cette application web est un site web statique - une seule page source HTML, avec quelques feuilles de style CSS et d’autres ressources. Briefcase a démarré un serveur web local pour servir cette page afin que votre navigateur puisse la voir. Si vous voulez mettre cette page web en production, vous pouvez copier le contenu du dossier www sur n’importe quel serveur web qui peut servir du contenu statique.

Mais lorsque vous appuyez sur le bouton, vous exécutez du code Python… Comment cela fonctionne-t-il ? Toga utilise PyScript pour fournir un interprète Python dans le navigateur. Briefcase présente le code de votre application sous forme de roues que PyScript peut charger dans le navigateur. Lorsque la page est chargée, le code de l’application s’exécute dans le navigateur, construisant l’interface utilisateur en utilisant le DOM du navigateur. Lorsque vous cliquez sur un bouton, ce bouton exécute le code de gestion des événements dans le navigateur.

Étapes suivantes

Bien que nous ayons maintenant déployé cette application sur les ordinateurs de bureau, les téléphones portables et le web, l’application est assez simple et n’implique pas de bibliothèques tierces. Pouvons-nous inclure des bibliothèques du Python Package Index (PyPI) dans notre application ? Consultez Tutoriel 7 pour le savoir…