Flask: desenvolvendo APIs e aplicações web com MongoDB

Aula 1 - Introdução

Apresentando o instrutor e o curso

Olá! Seja muito bem-vindo ao nosso curso de aplicações web com Flask. É um enorme prazer tê-lo aqui conosco ao longo desta jornada. Meu nome é Vanerson Gouveia Maroni.

Audiodescrição: Vanerson é uma pessoa branca, possui cabelo estilo coque samurai, tem barba cheia, usa óculos de grau e está vestindo uma camiseta marrom.

Atuo como especialista em engenharia de dados, mas tenho mais de 10 anos de experiência na área de desenvolvimento, atuando em back-end, front-end e full-stack. Atualmente, estou focando minha carreira na área de engenharia de dados.

Explicando o objetivo do curso

Nosso objetivo aqui é não apenas compartilhar o código, mas também a forma de pensar por trás dele. Para que nosso aprendizado seja o mais realista possível, iremos simular um cenário de mercado real, para que possamos desenvolver a aplicação.

Imaginem que existe uma startup chamada StyleSync, uma empresa de e-commerce com diversas necessidades de negócio. Nós seremos o time de tecnologia responsável por desenvolver essas necessidades. Como em todo projeto, recebemos perguntas sobre possibilidades da diretoria. A primeira pergunta que recebemos é a seguinte: precisamos desenvolver uma aplicação e disponibilizá-la o mais rápido possível. Como faremos isso? Desenvolveremos linha a linha ou utilizaremos tecnologias robustas e modernas? Esse será o foco das próximas aulas.

Destacando a metodologia de aprendizado

Gostaríamos de destacar que nosso aprendizado não se limitará aos vídeos. Teremos também atividades práticas para fortalecer o conhecimento, com o intuito de que vocês desenvolvam um projeto que seja um ótimo portfólio. A ideia é que aprendamos fazendo.

No próximo vídeo, vamos explorar a primeira parte: utilizaremos linha a linha, desenvolveremos comando a comando ou utilizaremos aplicações modernas. Vamos explorar esse primeiro ponto, desenvolvendo linha a linha, para vermos qual é o desafio que nos espera. Vamos iniciar essa jornada juntos?

Aula 1 - Conhecendo Flask, Django E Fastapi

Introduzindo frameworks no desenvolvimento web

No vídeo anterior, vimos que construir algo do zero pode ser bastante desafiador. Agora, iremos explorar soluções desenvolvidas pela própria comunidade Python para nós, conhecidas como frameworks. Mas o que são frameworks? Um framework é uma espécie de caixa de ferramentas acompanhada de um manual de instruções para construir coisas complexas. No desenvolvimento web, ele oferece estruturas, componentes e regras prontas que agilizam o desenvolvimento de aplicações, evitando que precisemos construir tudo do zero.

Podemos pensar em uma analogia com a construção civil. Ao construir algo do zero, sem nenhum framework, teríamos que utilizar matérias-primas soltas, sem qualquer tipo de estrutura ou direcionamento. No momento atual, estamos tentando adotar algum tipo de framework para nossa solução. Assim, procuramos ferramentas e componentes pré-aplicados para o desenvolvimento de nossa casa ou apartamento. A partir do momento em que adotamos um framework, conseguimos ter um direcionamento claro de como utilizar essas matérias-primas, quais ferramentas usar e qual caminho seguir.

Explorando os principais frameworks Python

Na comunidade Python, temos três grandes frameworks utilizados para o desenvolvimento web: o Flask, o FastAPI e o Django. Vamos começar pelo Django.

O Django é um kit de construção completo, comparável a uma caixa de Lego que já vem com o castelo montado. Ele é opinativo e batteries included (inclui tudo que é necessário). Isso significa que ele já traz um sistema robusto, contemplando administração, acesso ao banco de dados através de ORM e muito mais. Oferece toda uma estrutura pronta, sendo uma ótima solução para projetos grandes e complexos, onde precisamos de velocidade no desenvolvimento e de funcionalidades padrão.

Comparando Flask e FastAPI

Por outro lado, se o Django é o castelo pronto, o Flask é como uma caixa de peças de Lego soltas. Ele é um micro-framework, fornecendo o mínimo essencial e toda a liberdade para escolhermos e montarmos nossa aplicação. É perfeito para APIs, protótipos e para quem deseja ter controle total sobre a aplicação.

Por fim, o FastAPI pode ser comparado a um carro de corrida da Fórmula 1. Ele foi projetado para máxima performance na construção de APIs. É moderno, utiliza recursos avançados de Python e sua grande vantagem é criar documentações interativas para a API de forma automática. Temos aqui o kit completo de peças soltas do carro de corrida, mas como é a sensação de dirigir cada um deles?

Preparando para a prática

No próximo vídeo, vamos colocar a mão na massa para desenvolver um pouco de código e sentir a diferença na prática em cada uma dessas soluções. Nos vemos na próxima aula.

Aula 1 - Começando A Desenvolver A Partir De Uma Demanda

Recebendo o desafio e explorando padrões da linguagem

Recebemos nosso primeiro desafio: desenvolver uma aplicação web o mais rápido possível e disponibilizá-la. No entanto, precisamos entender alguns pontos. Iremos desenvolver essa aplicação utilizando padrões da própria linguagem, escrevendo linha a linha, ou utilizaremos tecnologias modernas e robustas. Nesta primeira aula, exploraremos nosso primeiro cenário, que é desenvolver utilizando padrões da linguagem.

O que realmente significa desenvolver uma aplicação web utilizando as bibliotecas padrão do Python? Como não utilizaremos nenhuma estrutura pré-pronta, precisaremos entender os fundamentos da web e como o Python se comunica com o servidor e com as aplicações web. Nesse caso, como ele se comunica com o HTTP, como se comporta com o servidor, e para isso, exploraremos de maneira correta e moderna utilizando a biblioteca padrão do Python chamada WSGI (Web Server Gateway Interface), que em tradução livre significa interface de gateway do servidor. Seguiremos o padrão chamado PEP 3333.

Entendendo o PEP 3333 e iniciando o projeto no VS Code

Antes de prosseguir, vamos entender o que é o PEP. PEP é uma sigla para Python Enhancement Proposal, que significa Proposta de Melhoria do Python. É o principal mecanismo de comunicação que propõe novas funcionalidades, erros, opiniões da comunidade sobre problemas e documentações desenvolvidas para a própria linguagem Python. O PEP 3333 é um dos padrões da PEP. Ele define o padrão que separa o servidor da aplicação, permitindo que se escreva a lógica da aplicação uma vez e ela funcione com qualquer servidor que entenda WSGI.

Vamos iniciar nossa aplicação utilizando o VS Code. Ao abrir o VS Code, notem que já estamos com ele aberto em uma pasta chamada "Style Sync", que é nosso projeto. Como desenvolveremos uma aplicação utilizando os padrões do Python, não há necessidade de instalar nenhuma extensão ou biblioteca adicional. Tudo está disponível na própria linguagem Python.

Desenvolvendo o servidor WSGI

No VS Code, vamos desenvolver nosso primeiro arquivo Python, que chamaremos de aplicacao_web.py. Para utilizar o módulo WSGI, precisamos escrever from wsgiref.simple_server import make_server. Esse é o jeito de desenvolver um servidor WSGI.

from wsgiref.simple_server import make_server

Ao importar a função make_server, podemos executá-la. No entanto, ela espera receber três grandes atributos. O primeiro é o host onde será executado. Como estamos fazendo uma aplicação local, não há necessidade de definir um host. O segundo parâmetro é a porta onde será executado, que definiremos como 5000. O terceiro parâmetro é o aplicativo, ou seja, o retorno do servidor. Podemos definir uma função para trabalhar com isso.

make_server('', 5000, aplicacao)

Definindo a função de aplicação e configurando a resposta do servidor

Fora da função make_server, definiremos a função chamada aplicacao. Vamos defini-la e abrir e fechar parênteses. Essa é a forma de criar uma função no Python. No entanto, o make_server espera receber uma função pré-definida com alguns atributos, como environ, que é um dicionário que armazena todas as requisições feitas para o servidor. Não necessariamente precisamos utilizá-lo, mas ele está disponível. O segundo parâmetro é o start_response, uma função que executa antes do retorno do servidor, sinalizando informações importantes para o navegador.

def aplicacao(environ, start_response):

Dentro da função, trabalharemos com o start_response. Como primeiro parâmetro, ele espera receber o status que precisamos definir para o navegador sobre a requisição ao servidor. Podemos colocar como string dos ints. O segundo parâmetro são os cabeçalhos da requisição, que podemos definir como uma tupla. No primeiro campo, definimos o tipo de conteúdo enviado do servidor, que é o content-type. O segundo parâmetro é o valor do content-type, que será text/html. Também definimos o encode da página como charset=utf-8.

start_response('200 OK', [('Content-Type', 'text/html;charset=utf-8')])

Criando e retornando o HTML da aplicação

Para o retorno do servidor, podemos definir uma variável chamada html onde construiremos nosso HTML de retorno. Utilizaremos aspas triplas para desenhar a string sem necessidade de quebra de linha, e definiremos que esse valor será atribuído como byte, a forma como ele recebe essas informações e entrega ao navegador.

html = b'''
    <html>
        <head>
        </head>
        <body>
            Ola mundo!
        </body>
    </html>
'''

Com a variável html, que será o corpo do HTML retornado, damos um retorno dessa função. Esse retorno precisa estar dentro de uma lista. Podemos enviar diversas informações em lista como resposta do servidor. Como queremos mostrar uma página HTML, retornaremos a string que contém nossa página HTML.

return [html]

Executando a aplicação e mantendo o servidor ativo

Para executar a aplicação, abrimos o terminal com o comando de atalho Ctrl + J, escrevemos python seguido do nome do arquivo, aplicacao_web.py. No PowerShell, ao escrever apenas aplicacao e apertar "Tab", ele reconhece o caminho do arquivo. Ao executar, notem que ele inicia e já encerra. Para interagir com o servidor, queremos que ele permaneça aberto. Para isso, chamamos a função serve_forever, que mantém a execução até que definamos o momento de parar.

make_server('', 5000, aplicacao).serve_forever()

Ao abrir no navegador o localhost:5000, que é a porta definida, notem que ele mostra "Olá Mundo", nosso HTML. Se inspecionarmos os elementos, veremos que está igual ao definido na string. Com isso, temos um servidor responsável por receber e disponibilizar nosso HTML na web.

Separando responsabilidades entre back-end e front-end

Voltando à necessidade do "Style Sync", precisamos disponibilizar uma aplicação web rapidamente. Ainda não temos muitas informações sobre a solução necessária, mas podemos deduzir algumas coisas. Como é um e-commerce, ele precisa exibir informações do produto, como nome e valor. A página exibida é estática, sem mudanças de informação ou conteúdo dinâmico provido por uma API ou banco de dados.

Para tornar a interface mais rica e interativa, podemos separá-la em partes dinâmicas. Podemos separar as responsabilidades, deixando o servidor e a lógica de dados em um arquivo Python e o HTML, que é a parte visual, em outro arquivo. Assim, ambos interagem e trabalham com suas próprias responsabilidades, mas se comunicam.

Criando arquivos separados para HTML e lógica de aplicação

Para isso, copiamos o HTML e criamos um novo arquivo na pasta chamado index.html, onde salvamos o resultado. Estamos dividindo o projeto em duas grandes áreas que conversam entre si, mas têm funções diferentes: back-end e front-end. O arquivo Python será o back-end, enquanto o HTML será o front-end.

Para entender o que é back-end e front-end, utilizamos a analogia de um restaurante. O back-end, nosso código Python, é a cozinha do restaurante, onde a mágica acontece e os clientes não têm visibilidade. Na cozinha, recebemos quatro grandes fatores: pedidos (requisições HTML), ingredientes (banco de dados), receitas (lógicas de negócio) e preparo dos pratos (processos de dados).

Agora, ao olharmos para o front-end, podemos defini-lo como o salão do restaurante, onde ocorre toda a interação direta com o cliente, como mesas, cadeiras, decorações e cardápios. A função do salão é representar os pratos preparados pela cozinha da melhor forma possível, de maneira bonita e organizada. O cliente não precisa saber como o chefe preparou o prato, apenas que ele chega à mesa bem apresentado e saboroso. O front-end é executado no navegador do usuário e é constituído essencialmente por três grandes pilares: HTML, CSS e JavaScript.

Explicando a estrutura do front-end

O HTML é o esqueleto da página, definindo toda a estrutura bruta, que no nosso restaurante seria a lista de pratos, o cardápio, tudo escrito em texto puro, como prato principal, bebidas e sobremesas. O CSS é o estilo visual da página, que transforma o esquema HTML em algo bonito, com cores, fontes, espaçamento e layout. No restaurante, o CSS seria o design gráfico do cardápio, com tipos de letra e cores que combinam com a imagem do restaurante. Pode ser um framework como o Bootstrap ou um kit de decoração personalizado.

Por fim, o JavaScript é o cérebro que roda no navegador, responsável pela interatividade. Se o cardápio fosse em um tablet, o JavaScript seria o código que faz a foto do prato aparecer ou mudar de formato quando tocamos no nome, além de realizar animações e interagir com solicitações de pedido. Ele se comunica com o back-end para trazer e recarregar a página completa.

Separando responsabilidades e integrando HTML com Python

Vamos agora separar essas responsabilidades. Já temos o HTML adicionado e um servidor utilizando Python. Vamos colocar as informações de produtos dentro da nossa página HTML e consumi-las através do Python. Atualmente, o servidor está retornando um HTML que é uma string vazia, pois separamos as responsabilidades. Podemos trabalhar no HTML e adicionar produtos. No title, colocamos "Style Sync", a empresa que nos contratou. No corpo, podemos listar produtos usando ul e li, como meia, cadeira, bola e computador.

Para que o servidor leia o arquivo, utilizamos a função open do Python, que lê e escreve arquivos. No primeiro parâmetro, especificamos o arquivo, neste caso, index.html. No segundo, indicamos a operação, que será leitura, usando "r". Definimos o encoding como UTF-8 e atribuímos um alias ao open, como file. A variável html recebe file.read. Para facilitar, aplicamos encode na variável html com UTF-8, garantindo o encoding correto no retorno do servidor.

with open('index.html', 'r', encoding='utf-8') as file:
    html = file.read()

Adicionando produtos dinamicamente ao HTML

Após configurar o servidor, executamos a aplicação web em Python. Ao atualizar a página, vemos a listagem de arquivos de forma estática. Queremos definir esses valores dinamicamente. Sem uma estrutura pré-pronta, trabalhamos com pequenas marcações na aplicação. No HTML, criamos uma marcação de listagem de arquivos com {{PRODUTOS}}. Ao salvar e atualizar, apenas essa marcação aparece. Precisamos trabalhar sobre ela para mostrar informações dinâmicas.

Simulamos o consumo de uma API ou banco de dados. Na função da aplicação, definimos uma variável produtos, um array de dicionários com chaves como nome e valor. Adicionamos produtos como notebook, mouse, teclado e monitor, com seus respectivos valores. Manipulamos o HTML para preencher a marcação com esses valores.

produtos = [
    {'nome': 'Notebook', 'valor': 7499.99},
    {'nome': 'Mouse', 'valor': 125.99},
    {'nome': 'Teclado', 'valor': 450.99},
    {'nome': 'Monitor', 'valor': 2100.99},
]

Iterando sobre produtos e atualizando o HTML

Criamos a variável html_final, que recebe o HTML trabalhado. Iteramos sobre produtos para preencher linhas_html com valores em formato HTML. Utilizamos f-string para inserir variáveis na string, criando tags li com nome e valor dos produtos. Substituímos a marcação no HTML com replace, trocando {{PRODUTOS}} por linhas_html.

linhas_html = ''
for produto in produtos:
    linhas_html += f"<li>{produto['nome']} - R$ {produto['valor']}</li>"

html_final = html.replace(
    '{{PRODUTOS}}',
    linhas_html
)

Retornamos html_final ao servidor, substituindo html por html_final.encode. Salvamos o arquivo e executamos novamente a aplicação. Ao atualizar o navegador, vemos valores dinâmicos. Melhoramos a aplicação do zero, adicionando valores dinâmicos ao servidor e HTML exibido na página web.

return [html_final.encode('utf-8')]

Considerando a expansão para múltiplas rotas

Agora, imagine fazer isso para várias rotas. Atualmente, temos apenas uma página inicial mostrando a listagem de produtos. Para páginas de contato, sobre, FAQ e outras, teríamos que adicionar muitos ifs e elses no servidor, tornando o trabalho repetitivo e arriscado. Gastamos tempo desenvolvendo um servidor e uma regra de negócio para a Style Sync. Isso é o que chamamos de reinventar a roda.

Felizmente, existem várias soluções para isso. No próximo vídeo, abordaremos algumas delas, incluindo atalhos e complementos, como os famosos frameworks. Até lá!

Sobre o curso Flask: desenvolvendo APIs e aplicações web com MongoDB

O curso Flask: desenvolvendo APIs e aplicações web com MongoDB possui 226 minutos de vídeos, em um total de 31 atividades. Gostou? Conheça nossos outros cursos de Python em Programação, ou leia nossos artigos de Programação.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• capitulo