Introdução ao Flask

• Flask é um micro framework de Python usado para criar aplicativos web.
• Documentação: https://flask.palletsprojects.com/en/3.0.x/
• Possui um serviço de gateway WSGI que atua como uma “ponte” entre o servidor web e a aplicação Flask.

Fluxo:

1. Você faz uma requisição web: Por exemplo, ao digitar algo no Google, o navegador faz uma requisição GET HTTP.
2. Requisição GET HTTP vai para o servidor web: Essa requisição é enviada para o servidor web (como Nginx ou Apache), que está configurado para lidar com essas requisições.
3. Servidor web usa o WSGI para se comunicar com o Flask: O servidor web não processa a requisição diretamente. Em vez disso, ele usa o WSGI como um intermediário para passar a requisição para a aplicação Flask.
4. Flask verifica as rotas e gera uma resposta: O Flask então analisa a requisição, verifica qual rota (URL) está sendo solicitada, e executa a lógica necessária para gerar uma resposta. A resposta pode ser um código de status como 200 (OK), 404 (Not Found), 500 (Internal Server Error), entre outros, junto com qualquer conteúdo adicional (como uma página HTML ou dados JSON).
5. Flask devolve a resposta para o WSGI: Depois que o Flask gera a resposta, ele a envia de volta ao WSGI.
6. WSGI passa a resposta de volta para o servidor web: O WSGI retorna essa resposta ao servidor web.
7. Servidor web envia a resposta para o navegador: Finalmente, o servidor web envia a resposta para o navegador do usuário, que a exibe. Se for um código 200, por exemplo, o conteúdo requisitado é mostrado. Se for um 404, uma página de erro é exibida.

• Também conseguimos usar o Jinja com o Flask ,que permite usar variáveis, loops, condicionais, etc. no HTML.

Usando Flask na prática.

1. Crie um arquivo app.py
2. Abre o terminal.
3. Vamos criar um ambiente virtual para desenvolver a nossa aplicação, utilizando o comando python3 -m venv .venv

• py -3 ⇒ versão 3 do python
• -m venv ⇒ virtual enviroment
• .venv é o noem da nossa pasta.

4. Acesse a pasta .env para criar o ambiente virtual .\.venv\Scripts\activate

5. Agora, vamos instalar o flask com o pip usando o comando pip install Flask

Atualize a versão do Flask. Ele mesmo indica qual é o comando que você deve executar, em To Update, run: python.exe -m pip install — upgrade pip

‘Olá, WoMakers’ com Flask

#Importando o Flash
from flask import Flask

#Variável para armazenar os recusos do flask
app = Flask(__name__)

#Criação de uma rota com o decorator route. 
@app.route('/') 
#Criação de uma função hello_world. Vai imprimir 'Olá, womakers' para o usuário
def hello_world():
    return 'Olá, WoMakers!'

Agora vamos rodar o servidor para vermos o Olá, WoMakers na tela.

1. Abra o Terminal
2. Utilize o comando flask --app app run para criar um servidor local.

3. Utilize o código abaixo:

#Importando o Flash
from flask import Flask

#Variável para armazenar os recursos do flask
app = Flask(__name__)

#Criação de uma rota com o decorator route. 
@app.route('/') 
#Criação de uma função hello_world. Vai imprimir 'Olá, womakers' para o usuário
def hello_world():
    return '<h1>Olá, WoMakers!</h1>'

4. Acesse o seu servidor local (no meu caso, http://127.0.0.1:500) para visualizar a mensagem!

Criando um JSON de resultados

Vamos iniciar a conexão com a API do Ricky and Morty. Para isso, vamos adicionar duas bibliotecas. 1) url lib, que nos ajuda a manipular requisições para uma url/endpoint 2) json: me ajuda a imprimir o resultado da requisição

#Importando o Flash
from flask import Flask
#importando a url lib e json
import urllib.request, json

#Variável para armazenar os recursos do flask
app = Flask(__name__)

#Criação de uma rota com o decorator route. 
@app.route('/') 
 # função que lista os elementos
def get_list_characters():
    url = "https://rickandmortyapi.com/api/character/"
    #vamos utilizar urllib para abrir a url do rickandmorty
    response = urllib.request.urlopen(url)
    #variavel para carregar os resultados em json e ler os resultados
    characters = response.read()
    #variavel para formatar os resultados em json 
    dict = json.loads(characters)

    #utilização de um dicionario para guardar as infos da personagem
    characters = []

    #criação de um laço de repetição para visualizar todos os resultados da url
    for character in dict["results"]:
        character = {
            "name": character["name"],
            "status": character["status"]
        }
        
        characters.append(character)

    return {"characters": characters}

Criando um template

1. Crie uma pasta templates no seu projeto fora da pasta .venv
2. Crie um arquivo characters.html
3. Vamos utilizar a biblioteca do Bootstrap para a estilização.
4. Vamos fazer o esqueleto com HTML.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-4bw+/aepP/YC94hEpVNVgizdgICSf1Zg0g0kQ0nSgJ1wEFTlqLE4PV0m8E24WOVR0pZk"
    crossorigin="anonymous">
</head>
<body>
    <h1>Listagem de personagens</h1>

    <div>
        {% block content %}
        {% for character in characters %}
        <div class="">
            <h2>{{ character.name }}</h2>
        </div>
        {% endfor %}
        {% endblock %}
    </div>
</body>
</html>

De volta ao app.py, vamos criar uma rota lista e chamaremos o render_template para renderizar o characters.html. Não se esqueça de importar render_template no Flask.

from flask import Flask, render_template
import urllib.request, json

app = Flask(__name__)

@app.route("/")
def get_list_characters_page():
    url = "https://rickandmortyapi.com/api/character/"
    response = urllib.request.urlopen(url)
    data = response.read()
    dict = json.loads(data)
    
    return render_template("characters.html", characters=dict["results"])


@app.route('/lista') 
def get_list_characters():
    url = "https://rickandmortyapi.com/api/character/"
    response = urllib.request.urlopen(url)
    characters = response.read()
    dict = json.loads(characters)

    characters = []

    for character in dict["results"]:
        character = {
            "name": character["name"],
            "status": character["status"],
        }
        
        characters.append(character)

    return {"characters": characters}

O retorno será esse:

Um adendo:

• A função get_list_characters_page tem por objetivo renderizar a página HTML que exibe os personagens com o render_template e para isso, Faz uma solicitação para a API do Rick and Morty, converte os dados de JSON para um dicionário e utiliza o render template.
• A função get_list_characters retorna os dados dos personagens em formato JSON.

Customizando o template

• Bootstrap é uma biblioteca open-source para criação de páginas web responsivas.
• Documentação: https://getbootstrap.com/
• Certifique-se de importar o Bootstrap corretamente.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
              <ul class="navbar-nav">
                <li class="nav-item active">
                  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Episódios</a>
                </li>
              </ul>
            </div>
          </nav>
    </header>

    <main class="container">
        <div class="row">
            {% block content %}
            {% for character in characters %}
            <div class="col-sm-3 col-6">
                <img src="{{ character.image }}" alt="{{ character.name }}" class="img-fluid img-thumbnail"/>
                <h3 class="h5">{{ character.name }}</h3>
            </div>
            {% endfor %}
            {% endblock %}
        </div>
    </main>
</body>
</html>

O retorno será esse: