PyWebView: como criar uma aplicação desktop usando HTML, CSS, JavaScript e Python
Se você desenvolveu uma aplicação em Python e precisa criar uma interface gráfica para ela, há diversas opções que você pode escolher. Desde pacotes com visuais mais simples como Tkinter até frameworks mais robustos com QT, a linguagem é bem flexível quanto a isso. Porém, se você já tem experiência com linguagens utilizadas para a construição de aplicações web, talvez a solução a seguir seja mais a sua cara.
PyWebView é um pacote que permite que você crie aplicações desktop leves e multiplataforma usando código Python como "back-end" e tecnologias web - HTML, CSS e JavaScript - para a construção de uma interface gráfica. Nesse post, nós iremos dar uma olhada nos principais aspectos desse pacote.
Instalação
Para instalar, basta utilizar o pip
:
pip install pywebview
Após isso, o pacote pode ser importado como webview
:
import webview
Iniciando a aplicação
Para iniciar a aplicação, nós precisamos instanciar um objeto Window
e chamar a função start
:
webview.create_window("Título")
webview.start()
Apenas com isso já é possível abrir uma janela em branco.
Para exibir algo, precisamos passar como argumento um link, um caminho para um arquivo HTML ou código HTML como string.
webview.create(title="Título", url="https://www.tabnews.com.br/")
webview.start()
O código acima produz a seguinte tela:
Todos os links devem funcionar contanto que o usuário tenha acesso à internet. Porém, esse não seria exatamente o cenário ideal para quem quer criar uma aplicação desktop. Neste caso, podemos passar o caminho para um arquivo HTML ou uma string:
webview.create(title="App Útil", url="caminho/para/arquivo.html")
ou
webview.create(title="App Útil", html="<h1>Meu App Desktop</h1>")
Esse segundo geraria a seguinte tela:
Há diversos parâmetros configuráveis na tela, e a maioria pode ser definida ao invocar a função create_window
. Recomendo dar uma passada na documentação para saber mais!
Arquitetura
Ao criar sua aplicação, você pode escolher entre criar um servidor local ou não criar servidor nenhum.
Ao optar por utilizar um servidor local, você tem a vantagem de poder utilizar uma aplicação web já existente, além de ser mais fácil de debugar. Entretanto, você deve lidar com a segurança da aplicação por si só.
Por outro lado, a alternativa de não criar servidor é mais complicada de debugar, mas tem uma arquitetura mais direta e não depende de nada externo.
Comunicação interdomínio
Se você optar por não criar servidor, não existirá uma API propriamente dita para que seja realizada a comunicação entre o Python (back-end) e o JavaScript (front-end). Em vez disso, criaremos uma classe no nosso código Python para representar um objeto que pode ser invocado pelo JS.
Expondo código Python para o JavaScript
Primeiro, criaremos nossa classe com todo o código que quisermos expor:
class API:
def minha_funcao(self):
...
Ao instanciar o componente Window
, passaremos um objeto da classe API
como argumento para o parâmetro js_api
:
api = API()
webview.create(title="Meu App", url="caminho/para/arquivo.html", js_api=api)
A partir disso, todas os métodos da classe API
estarão disponíveis para uso no nosso código em JavaScript, e o objeto que passamos como argumento estará acessível com o nome de pywebview.api
:
pywebview.api.minha_funcao()
É importante dizer que o nome da função não pode começar com underscore.
As funções expostas retornam uma promise que se resolve para o valor retornado no Python. Exceções são rejeitadas e encapsuladas dentro de um objeto Error
no JavaScript.
O pacote dá suporte para a conversão automática de tipos primitivos no Python. Alguns exemplos incluem:
str
viraString
;int
efloat
viramNumber
;bool
viraBoolean
;None
viraNull
;list
viraArray
;dict
viraObject
.
Conclusão
Apesar de não ser tão difundido como QT ou Tkinter, PyWebView é um framework que tem sido desenvolvido desde 2014. Ele pode ser utilizado nas versões mais recentes do Python (o código que testei acima foi executado na 3.11), e pode ser uma opção mais viável para quem já tem costume de trabalhar com ferramentas web.
Se você ficou interessado, não deixe de dar uma vasculhada na documentação! Obrigado pela atenção =)