Tutorial 6 - Coloque-o 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] Gerando modelo de aplicativo...
Usando modelo de aplicativo: https://github.com/beeware/briefcase-web-static-template.git, ramificação v0.3.18
...
[helloworld] Instalando pacote de suporte...
Nenhum pacote de suporte necessário.
[helloworld] Instalando o código da aplicação...
Instalando src/helloworld... concluído
[helloworld] Instalando os requisitos...
Gravando arquivo de requisitos... concluído
[helloworld] Instalando recursos da aplicação...
...
[helloworld] Removendo conteúdo desnecessário da aplicação...
Removendo conteúdo desnecessário do pacote da aplicação... concluído
[helloworld] Criado build/helloworld/web/static
[helloworld] Compilando projeto web...
...
[helloworld] Compilado build/helloworld/web/static/www/index.html
[helloworld] Iniciando servidor web...
Servidor web aberto em http://127.0.0.1:8080
[helloworld] Saída do log do servidor web (digite CTRL-C para interromper o log)...
===========================================================================
(beeware-venv) $ briefcase run web
[helloworld] Gerando modelo de aplicativo...
Usando modelo de aplicativo: https://github.com/beeware/briefcase-web-static-template.git, ramificação v0.3.18
...
[helloworld] Instalando pacote de suporte...
Nenhum pacote de suporte necessário.
[helloworld] Instalando o código da aplicação...
Instalando src/helloworld... concluído
[helloworld] Instalando os requisitos...
Gravando arquivo de requisitos... concluído
[helloworld] Instalando recursos da aplicação...
...
[helloworld] Removendo conteúdo desnecessário da aplicação...
Removendo conteúdo desnecessário do pacote da aplicação... concluído
[helloworld] Criado build/helloworld/web/static
[helloworld] Compilando projeto web...
...
[helloworld] Compilado build/helloworld/web/static/www/index.html
[helloworld] Iniciando servidor web...
Servidor web aberto em http://127.0.0.1:8080
[helloworld] Saída do log do servidor web (digite CTRL-C para interromper o log)...
===========================================================================
(beeware-venv) C:\...>briefcase run web
[helloworld] Gerando modelo de aplicativo...
Usando modelo de aplicativo: https://github.com/beeware/briefcase-web-static-template.git, ramificação v0.3.18
...
[helloworld] Instalando pacote de suporte...
Nenhum pacote de suporte necessário.
[helloworld] Instalando o código do aplicativo...
Instalando src/helloworld... concluído
[helloworld] Instalando os requisitos...
Gravando arquivo de requisitos... concluído
[helloworld] Instalando recursos da aplicação...
...
[helloworld] Removendo conteúdo desnecessário da aplicação...
Removendo conteúdo desnecessário do pacote da aplicação... concluído
[helloworld] Criado build\helloworld\web\static
[helloworld] Compilando projeto web...
...
[helloworld] Compilado build\helloworld\web\static\www\index.html
[helloworld] Iniciando servidor web...
Servidor web aberto em http://127.0.0.1:8080
[helloworld] Saída do log do servidor web (digite CTRL-C para interromper o log)...
===========================================================================
Isso abrirá um navegador da Web, apontando para
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.
Publicando o aplicativo web¶
Se desejar, você também pode tentar publicar este aplicativo web na internet usando o [PythonAnywhere Briefcase Plugin]. O [tutorial] para esse plugin continua a partir deste ponto e orienta você sobre como empacotar e publicar no [PythonAnywhere].
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…