Tutorial 6 - Coloque na web!

Além de oferecer suporte a plataformas móveis, o kit de ferramentas de widget Toga também oferece suporte à Web! Usando a mesma API que você usou para implantar seus aplicativos de desktop e móveis, você pode implantar seu aplicativo como um aplicativo da Web de página única.

Prova de conceito

O backend do Toga Web é o menos maduro de todos os backends do Toga. Ele está maduro o suficiente para exibir alguns recursos, mas é provável que apresente bugs e não tenha muitos dos widgets disponíveis em outras plataformas. Neste momento, a implementação na Web deve ser considerada uma «Prova de Conceito» - o suficiente para demonstrar o que pode ser feito, mas não o suficiente para ser usado em um desenvolvimento sério.

Se você tiver problemas com esta etapa do tutorial, pule para a próxima página.

Implementação como um aplicativo Web

O processo de implementação como um aplicativo da Web de página única segue o mesmo padrão familiar - você cria o aplicativo, constrói o aplicativo e, em seguida, o executa. No entanto, o Briefcase pode ser um pouco inteligente; se você tentar executar um aplicativo e o Briefcase determinar que ele não foi criado ou compilado para a plataforma que está sendo visada, ele executará as etapas de criação e compilação para você. Como esta é a primeira vez que executamos o aplicativo para a Web, podemos executar todas as três etapas com um único 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)...
===========================================================================

Isso abrirá um navegador da Web, apontando para http://127.0.0.1:8080:

Diálogo do tutorial 6 do Hello World em um navegador

Se você digitar seu nome e clicar no botão, será exibida uma caixa de diálogo.

Como isso funciona?

Este aplicativo da Web é um site estático - uma única página de origem HTML, com alguns recursos CSS e outros. O Briefcase iniciou um servidor da Web local para servir essa página para que o seu navegador possa visualizá-la. Se você quiser colocar essa página da Web em produção, poderá copiar o conteúdo da pasta www em qualquer servidor da Web que possa servir conteúdo estático.

Mas quando você pressiona o botão, está executando código Python… como isso funciona? O Toga usa o PyScript para fornecer um interpretador Python no navegador. O Briefcase empacota o código do seu aplicativo como rodas que o PyScript pode carregar no navegador. Quando a página é carregada, o código do aplicativo é executado no navegador, criando a interface do usuário usando o DOM do navegador. Quando você clica em um botão, esse botão executa o código de manipulação de eventos no navegador.

Próximos passos

Embora já tenhamos implantado esse aplicativo no desktop, em dispositivos móveis e na Web, ele é bastante simples e não envolve bibliotecas de terceiros. Podemos incluir bibliotecas do Python Package Index (PyPI) em nosso aplicativo? Consulte o Tutorial 7 para descobrir…