Aprenda a executar um código Python em um arquivo HTML
A linguagem Python, apesar de muito utilizada em projetos de ciência de dados e automatização de processos, pode ser empregada em uma variedade de soluções. A partir do uso de bibliotecas e módulos, é possível construir aplicações para diferentes propósitos.
Neste tutorial, conheceremos um pouco mais sobre o Pyscript, uma ferramenta que permite a inserção de códigos Python dentro de arquivos HTML, e também como realizar esse tipo de operação por meio do micro-framework Flask.
Especificações
Este projeto será criado com algumas especificações:
- Sistema operacional Windows;
- Python versão 3.11.2, que pode ser baixado neste link;
- Pycharm, que pode você pode encontrar neste link;
- Pyscript;
- Versão 2.2.3 do micro-framework Flask.
Criando um ambiente virtual
Para instalar as dependências necessárias para o desenvolvimento da aplicação de forma local, é necessário isolar o ambiente, criando uma virtualenv. Digite cmd no campo Pesquisar da barra de tarefas. Após, com o gerenciador de pacotes PIP, digite o comando pip install virtualenv.
Para criar o ambiente virtual, digite virtualenv <~nome_da_virtualenv~> e faça sua ativação com <~nome_da_virtualenv~>/Scripts/Activate. Para desativar, digite deactivate.
Pyscript
Existem algumas formas de integrar HTML com Python e uma das mais recentes é com a ferramenta Pyscript. O Pyscript, diferente dos frameworks e bibliotecas do Python, não precisa ser instalado. Ele foi desenvolvido para ser incorporado diretamente no código HTML. A documentação pode ser acessada no link.
Após a criação do ambiente virtual, acesse o PyCharm e abra o diretório principal. Agora, crie um arquivo chamado index.html. Será neste arquivo que iremos fazer as alterações para executar o código.
No trecho abaixo, importamos o Pyscript a partir das tags <link> e <script> dentro da tag <head>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Executando código Python com HTML</title>
<link rel="stylesheet" href="<https://pyscript.net/latest/pyscript.css>" />
<script defer src="<https://pyscript.net/latest/pyscript.js>"></script>
</head>
Para inserir o código Python, precisaremos adicionar uma nova tag, chamada de <py-script>. Será dentro desta tag que inseriremos o código Python. No exemplo, iremos adicionar dentro da tag um print, que mostrará a frase “Hello, World!”.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Executando código Python com HTML</title>
<link rel="stylesheet" href="<https://pyscript.net/latest/pyscript.css>" />
<script defer src="<https://pyscript.net/latest/pyscript.js>"></script>
<link rel="stylesheet" href="index.css">
</head>
<body>
<py-script>print("Hello, World!")</py-script>
</body>
</html>
Na tela, com uma breve estilização criada em CSS (repare que o arquivo CSS foi importado dentro da tag <head>), o resultado ficará desta forma:
Apesar de ser uma tecnologia muito promissora, ela ainda possui algumas limitações, tais como o tempo de carregamento, que ainda é razoavelmente longo. Entretanto, possui uma série de recursos, tal qual o import de módulos externos e realização de operações um pouco mais complexas dentro do código.
Flask
Outra forma de utilizar HTML e Python é aplicando o micro-framework Flask. O Flask é um módulo que, apesar de proporcionar um desenvolvimento facilitado de soluções para web, possui uma série de recursos as quais possibilitam a criação de uma variedade de aplicações. Para instalar o Flask em nosso projeto, utilizaremos o gerenciador de pacotes PIP, digitando no terminal, pip install flask.
No diretório criado a partir do ambiente virtual, crie um arquivo chamado app.py. Será neste arquivo que iremos inserir o código Python. Após, crie uma pasta chamada templates e um arquivo chamado index.html. O trecho HTML pode ser inserido dentro código Python, mas é uma norma do Flask a criação dos diretórios específicos.
No arquivo app.py, faça o import do Flask e do render_template. O render_template é responsável por carregar o arquivo HTML, exibindo os dados no navegador.
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def index():
nome = "Fernanda"
return render_template("index.html", nome=nome)
if __name__ == "__main__":
app.run(debug=True)
Para detalhar, iremos dividir o código em partes:
app = Flask(__name__)
No trecho acima, criamos uma instância de Flask com o argumento (__name__), que é uma variável Python necessária para esse procedimento.
Após, criamos rota, que será ‘/’:
@app.route("/")
A partir disto, definiremos uma função a qual será responsável por executar alguma ação quando a rota definida anteriormente for acessada.
def index():
nome = "Fernanda"
return render_template("index.html", nome=nome)
Dentro desta função, adicionaremos a variável nome que armazenará o valor "Fernanda". Na sequência, retornaremos o módulo render_template, que irá carregar o template index.html, além do nome definido ainda dentro da função.
Para que possamos executar o código e visualizar todas as criações, precisamos adicionar o seguinte trecho:
if __name__ == "__main__":
app.run(debug=True)
Com o if__name__ == '__main__':, a aplicação, ou seja, o app será executada apenas quando o arquivo em questão for rodado. Se você estiver utilizando o Pycharm, essa ação acontecerá ao clicar na setinha verde presente no canto superior direito da tela. Se o arquivo for importado por outro arquivo, o trecho não será executado. Para agilizar o desenvolvimento, inseriremos o código debug=True, que define que, ao serem salvas, as alterações deverão ser exibidas na tela, sem a necessidade de pausar o código e rodá-lo novamente.
Apesar de termos criado as linhas de código acima, elas não funcionarão se não adicionarmos as informações necessárias no arquivo index.html. Desta forma, iremos inserir o seguinte trecho:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Minha Página</title>
</head>
<body>
<h1>Olá, {{ nome }}! Seja muito bem-vindo (a)!</h1>
</body>
</html>
Esta é uma estrutura simples do HTML, contendo as tags <!DOCTYPE html>, <html>, <head> e <body>. Repare que dentro do <body>, adicionamos uma tag <h1>, que possui um texto e também o nome de uma variável chamada nome dentro de chaves. O conteúdo que será exibido dentro desta variável é justamente o nome definido na função index(), criada no arquivo app.py.
Ao rodar o arquivo app.py, o retorno esperado em tela é:
Se alterarmos o valor presente na variável, repare que o nome “Fernanda” também será modificado:
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def index():
nome = "Amora"
return render_template("index.html", nome=nome)
if __name__ == "__main__":
app.run(debug=True)
Este é um exemplo muito simples de integração entre Python e HTML, mas, a partir disto, é possível inserir outros elementos, tais como inputs, que receberão informações que poderão ser exibidas em tela. Além do Flask, é possível chegar a um resultado muito semelhante com Django, um framework Python mais completo para desenvolvimento web.
Sucesso!
A Revelo Content Network acolhe todas as raças, etnias, nacionalidades, credos, gêneros, orientações, pontos de vista e ideologias, desde que promovam diversidade, equidade, inclusão e crescimento na carreira dos profissionais de tecnologia.