Desenvolvimento Web com Python

Prévia do material em texto

Python para Aplicações Web
Capítulo 1. Introdução ao desenvolvimento Web
Prof. Fernando Felix
Introdução ao desenvolvimento Web
1.1.[1, 2, 3]. Apresentação do Módulo
Prof. Fernando Felix
Nesta Aula
❑ Objetivos.
❑ Motivação/Indústria 4.0.
❑ Especificação do projeto.
Objetivos
Por que aprender desenvolvimento Web?
O que é a Web?
Construir páginas e formulários Web com HTML e JSON.
Consumir Web APIs.
Implementar aplicações Web com Flask ou Django.
Práticas!
Projeto Web para ingestão e visualização de 
dados.
A Indústria 4.0 engloba um amplo sistema de tecnologias
avançadas como inteligência artificial, robótica,
internet das coisas e
computação em nuvem
que estão mudando as
formas de produção e
os modelos de
negócios no Brasil e
no mundo.
“O futuro do 
emprego será 
feito por 
vagas que 
não existem, 
em indústrias 
que usam 
tecnologias 
novas, em 
condições 
planetárias 
que nenhum 
ser humano já 
experimentou”
(David Ritter - 
Greenpeace).
Motivação/Indústria 4.0
Engenheiro(a) Frontend Engenheiro(a) Backend
Engenheiro(a) Full Stack
Motivação/Indústria 4.0
BIG DATA LAKE HOUSE AI MODELING PREDICTION
SERVING
WEB PLATFORMS & APPS
Engenheiro
(a) de 
Dados
Cientista 
de Dados
Engenheiro
(a) de 
Machine 
Learning
Analista de 
Dados
etc.
Motivação/Indústria 4.0
História do Usuário:
Como Gestor de Estoque, eu quero 
acessar uma página Web e 
visualizar/filtrar informações analíticas 
de compartilhamento de bicicletas, 
para fazer um bom planejamento de 
demandas.
Fonte de Dados (mesma do desafio 
do módulo 2):
Contém a contagem de bicicletas 
alugadas entre 2011 e 2012 no sistema 
da Capital Bikeshare, com informações 
meteorológicas e sazonais.
Especificação do projeto
Primeiro, criar uma Prova de Conceito (PoC) no 
Google Data Studio com informações relevantes.
Segundo, criar o Protótipo de uma página Web 
(HTML) com dados simulados/mock (JSON).
Terceiro, criar um Servidor Web minimamente funcional 
para servir o protótipo (HTML + JSON).
Quarto, criar um Aplicativo Web minimamente 
funcional com os principais recursos 
(visualização/filtro).
Conclusão
O que aprendemos?
1) Abordamos sobre os objetivos do módulo.
2) Entendemos um pouco o contexto industrial em que estamos 
inseridos e as diferentes profissões que vêm sendo 
impulsionadas pela transformação digital da Indústria 3.0 e 4.0.
3) E, por fim, apresentamos o escopo e etapas do projeto que 
iremos desenvolver durante este módulo.
02.
01. 03.
04.
Próxima Aula
Prática: Preparação do ambiente 
de desenvolvimento
Prática: Visualizando dados na 
Web com Google Data Studio
FundamentosCasos de aplicação
Introdução ao desenvolvimento Web
1.1.4. Prática: Preparação do ambiente de desenvolvimento
Prof. Fernando Felix
02.
01. 03.
04.
Próxima Aula
Casos de aplicação Fundamentos
Prática: Consumindo Web API de 
TODO List com Postman
Prática: Visualizando dados na 
Web com Google Data Studio
Introdução ao desenvolvimento Web
1.2.[1, 2] Casos de aplicação
Prof. Fernando Felix
Nesta Aula
❑ Computação em Nuvem: SAAS, Streaming, etc.
❑ AIAAS.
Computação em Nuvem:
SAAS, Streaming, etc.
Aplicação AplicaçãoAplicaçãoAplicação
● Custo-benefício.
● Transformação digital (3.0, 4.0).
● Criação de soluções internas.
● Escalabilidade.
AIAAS
AI Infraestrutura
AI Data
Data Lake, RDBMS, No SQL, 
Feature Store
AI Compute
VM, Serverless (functions), 
Batch Processing
AI Services
Cognitive AI
1. Language 2. Speech 3. 
Search 4. Vision
Conversational AI Custom AI
AI Tools
Notebooks IDE Data Prep LibsFrameworks
AIAAS
https://sketch2code.azurewebsites.net/
https://sketch2code.azurewebsites.net/
https://copilot.github.com/
https://copilot.github.com/
https://openai.com/blog/dall-e/
https://openai.com/blog/dall-e/
https://www.autodraw.com/
https://www.autodraw.com/
https://translate.google.com.br/
https://translate.google.com.br/
https://deepart.io/
https://deepart.io/
https://teachablemachine.withgoogle.com/
https://teachablemachine.withgoogle.com/
https://www.nvidia.com/en-us/research/ai-playground/
https://www.nvidia.com/en-us/research/ai-playground/
AIAAS
Fórum de Debates do Módulo 3:
- Demonstrar uma aplicação Web com ênfase em AI (slide anterior).
- Discorrer sobre implicações futuras que a transformação digital ou 
AI terá na vida das pessoas ou empresas.
ConclusãoConclusão
O que aprendemos?
1) Diferentes tipos de nuvem de computadores: IAAS, PASS, SAAS.
2) Diferentes tipos de nuvem para AI: baixo nível vs. alto nível.
3) Alguns Web Apps divertidos baseados em AI.
02.
01. 03.
04.
Próxima Aula
Prática: Visualizando dados na 
Web com Google Data Studio
Fundamentos: Protocolo HTTP, 
Web APIs e Exemplos
Prática: Consumindo Web API de 
TODO List com Postman
Fundamentos: Modelo OSI, 
Arquitetura cliente-servidor
Introdução ao desenvolvimento Web
1.2.3. Prática: Visualizando dados na Web com Google Data Studio
Prof. Fernando Felix
02.
01. 03.
04.
Próxima Aula
Fundamentos: Modelo OSI, 
Arquitetura cliente-servidor
Prática: Consumindo Web API de 
TODO List com Postman
Capítulo 2. HTML, XML e JSONFundamentos: Protocolo HTTP, 
Web APIs e Exemplos
Introdução ao desenvolvimento Web
1.3.[1, 2] Fundamentos: Modelo OSI, Arquitetura cliente-servidor
Prof. Fernando Felix
Nesta Aula
❑ Modelo OSI.
❑ Arquitetura cliente-servidor.
Modelo OSI
MAN
LAN
WAN
Open Systems Interconnection
Servidor HTTP Servidor Banco 
de Dados
Arquitetura Cliente-Servidor
Cliente
Cliente
Cliente
Internet
HTTP
HTTP
HT
TP
ConclusãoConclusão
O que aprendemos?
1) Modelo OSI e tipos de redes de computadores.
2) Funcionamento básico de uma arquitetura cliente-servidor.
02.
01. 03.
04.
Próxima Aula
Fundamentos: Protocolo HTTP, 
Web APIs e Exemplos
Capítulo 2. HTML, XML e JSON
Prática: Consumindo Web API de 
TODO List com Postman
Introdução ao desenvolvimento Web
1.3.[3, 4] Fundamentos: Protocolo HTTP, Web APIs e Exemplos
Prof. Fernando Felix
Nesta Aula
❑ Protocolo HTTP.
❑ Web APIs e Exemplos.
Servidor 
HTTP
Protocolo HTTP
HTTP Request Get /watch?v=fk1Q9y6VVy0 HTTP/1.1
HTTP Method GET
Headers Host: www.youtube.com
Path: /watch?v=fk1Q9y6VVy0
Scheme: https
Accept: text/html
Accept-language: pt-BR
Query String v: fk1Q9y6VVy0
Body
HTTP 
Response
Get /watch?v=fk1Q9y6VVy0 HTTP/1.1
HTTP Status 200 OK
Headers content-type: text/html; charset=utf-8
date: Tue, 10 Aug 2021 03:56:17 GMT
Content <html> <body>
 <video 
src="blob:https://www.youtube.com/06df752b-a883
-443f-b282-8437a0ed7760">
 <\video>
<\body><\html>
Envia 
requisição
Recebe 
requisição Processa
Requisição
Envia
Resposta
Recebe
Resposta
http://www.youtube.com
https://www.youtube.com/watch?v=fk1Q9y6VVy0
https://www.youtube.com/06df752b-a883-443f-b282-8437a0ed7760
https://www.youtube.com/06df752b-a883-443f-b282-8437a0ed7760
Protocolo HTTP
Tipos de requisições HTTP:
● GET: São os tipos mais comuns de solicitações na Web. Eles simplesmente 
recuperam dados de um servidor. Em 99% das vezes, eles são usados para solicitar 
HTML.
● POST: São usadas para enviar dados ao servidor para criar um novo objeto 
(entidade) no servidor (Ex: novo vídeo). Os dados são enviados no Body da 
requisição.
● PUT: São usadas para enviar dados ao servidor para substituir um novo objeto 
(entidade) no servidor ( Ex: substituir vídeo).
● PATCH: São usados para atualizar algum atributo do objeto/entidade existente no 
servidor (Ex: descrição do vídeo).
● DELETE: São semelhantes às requisições GET por não terem Body. Eles são o 
oposto de GET. Requisições DELETE são usadas para excluir dados do servidor.
Protocolo HTTP
Códigos de status
Web APIs e Exemplos
https://pokeapi.co
https://pokeapi.co
https://www.omdbapi.com
https://www.omdbapi.com
https://thedogapi.com
https://thedogapi.com
https://developer.marvel.com
https://developer.marvel.com
https://developer.riotgames.com
https://developer.riotgames.com
https://brasil.io/homehttps://brasil.io/home
ConclusãoConclusão
O que aprendemos?
1) Funcionamento básico do protocolo HTTP, tipos de requisição e 
tipos de respostas (status codes).
2) Exemplos de Web APIs.
02.
01. 03.
04.
Próxima Aula
Prática: Consumindo Web API de 
TODO List com Postman
Capítulo 2. HTML, XML e JSON
Introdução ao desenvolvimento Web
1.3.5. Prática: Consumindo Web API de TODO List com Postman
Prof. Fernando Felix
02.
01. 03.
04.
Próxima Aula
Capítulo 2. HTML, XML e JSON Introdução ao XML/JSON
PráticasIntrodução ao HTML
Python para Aplicações Web
Capítulo 2. HTML, XML e JSON
Prof. Fernando Felix
HTML, XML e JSON
2.1. Introdução ao HTML
Prof. Fernando Felix
Nesta Aula
❑ O que é HTML?
❑ Anatomia de um elemento HTML.
❑ Atributos.
❑ Anatomia de um documento HTML.
❑ Indo Além.
HTML (HyperText Markup Language) não é uma linguagem 
de programação, é uma linguagem de marcação utilizada 
para dizer ao seu navegador como estruturar a página web 
que você visita.
● Descreve a estrutura de uma página da web.
● Consiste em uma série de elementos.
● Os elementos informam ao navegador como exibir o 
conteúdo.
● Os elementos identificam partes de conteúdo, como "isto 
é um título", "isto é um parágrafo", "isto é um link" etc.
O que é HTML?
1
3
4
2
Anatomia de um elemento HTML
● Ferramenta: CodePen
● Alterar: CodePen: Html 1
https://codepen.io/pen/
https://codepen.io/fernandojunior/pen/PomVqGm
● Alterar: CodePen: Html 2
https://codepen.io/fernandojunior/pen/PomVqQO
● Alterar: CodePen: Html 3
https://codepen.io/fernandojunior/pen/abWXORv
● Alterar: CodePen: Html 4
● Códigos caracteres 
especiais
https://codepen.io/fernandojunior/pen/YzVBXRV
https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references
https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references
Atributos
● Alterar: CodePen: Html 5
https://codepen.io/fernandojunior/pen/gOWqpNe
● Alterar: CodePen: Html 6
https://codepen.io/fernandojunior/pen/NWjoGPe
Anatomia de um documento HTML
● Alterar: CodePen: 
Html 7
Para testar no Navegador:
1. Copiar o exemplo de 
página HTML.
2. Criar um novo 
documento em seu 
editor de texto (bloco 
de notas, gedit, 
vscode).
3. Colar o código no 
novo arquivo de texto.
4. Salvar o arquivo com 
o nome index.html.
5. Abrir o arquivo 
index.html com um 
navegador.
https://codepen.io/fernandojunior/pen/KKmJdzO
https://codepen.io/fernandojunior/pen/KKmJdzO
Sugestões:
● HTML Style Guide and Coding Conventions
● HTML head Elements 
● HTML Encoding (Character Sets)
● HTML Elements 
● HTML Attributes 
● HTML - The id attribute
● HTML Headings
● HTML Paragraphs
● HTML Text Formatting
● HTML Links Hyperlinks 
● HTML Images Syntax 
● HTML Comments 
● HTML Layout Elements and Techniques 
● HTML Semantic Elements 
● HTML Lists
● HTML Styles chapter
● HTML Styles CSS
● HTML JavaScript
Indo Além
https://www.w3schools.com/html/html5_syntax.asp
https://www.w3schools.com/html/html_head.asp
https://www.w3schools.com/html/html_charset.asp
https://www.w3schools.com/html/html_elements.asp
https://www.w3schools.com/html/html_attributes.asp
https://www.w3schools.com/html/html_id.asp
https://www.w3schools.com/html/html_headings.asp
https://www.w3schools.com/html/html_paragraphs.asp
https://www.w3schools.com/html/html_formatting.asp
https://www.w3schools.com/html/html_links.asp
https://www.w3schools.com/html/html_images.asp
https://www.w3schools.com/html/html_comments.asp
https://www.w3schools.com/html/html_layout.asp
https://www.w3schools.com/html/html5_semantic_elements.asp
https://www.w3schools.com/html/html_lists.asp
https://www.w3schools.com/html/html_styles.asp
https://www.w3schools.com/html/html_css.asp
https://www.w3schools.com/html/html_scripts.asp
ConclusãoConclusão
O que aprendemos?
Princípios básicos do HTML. Agora, você deve entender como é a 
linguagem, como ela funciona em um nível básico, e ser capaz de 
escrever alguns elementos e atributos.
02.
01. 03.
04.
Próxima Aula
Tabelas HTML Introdução ao XML/JSON
PráticasFormulários HTML
HTML, XML e JSON
2.1.1. Tabelas HTML
Prof. Fernando Felix
Nesta Aula
❑ O que é uma tabela HTML?
❑ Adicionando cabeçalhos com elementos.
❑ Permitindo que as células ocupem várias linhas e colunas.
❑ Estilo comum para colunas.
❑ Indo Além.
Uma tabela é um conjunto estruturado de dados compostos de linhas e 
colunas (dados tabulares). Uma tabela permite consultar, de forma 
rápida e fácil, valores que indicam algum tipo de conexão entre 
diferentes tipos de dados.
Para que as tabelas sejam eficazes na web, você precisa fornecer um 
estilo CSS e uma boa estrutura HTML. Neste módulo, estamos nos 
concentrando na parte HTML.
O que é uma tabela?
Censo dos EUA de 1800
● Alterar: CodePen: Table 1
https://codepen.io/fernandojunior/pen/xxdMQQL
● Alterar: CodePen: Table 2
https://codepen.io/fernandojunior/pen/XWROorR
● Alterar: CodePen: Table 3
https://codepen.io/fernandojunior/pen/WNjPLQv
● Alterar: CodePen: Table 4
https://codepen.io/fernandojunior/pen/LYyqMRB
● Alterar: CodePen: Table 5
https://codepen.io/fernandojunior/pen/KKmJbGq
● Alterar: CodePen: 
Table 6
Para testar no Navegador:
1. Copiar o exemplo de 
tabela HTML.
2. Criar um novo 
documento em seu 
editor de texto (bloco 
de notas, gedit, 
vscode).
3. Colar o código no 
novo arquivo de texto.
4. Salvar o arquivo com 
o nome table.html.
5. Abrir o arquivo 
table.html com um 
navegador.
https://codepen.io/fernandojunior/pen/WNjPLmp
https://codepen.io/fernandojunior/pen/WNjPLmp
Sugestões:
● HTML Tables
Indo Além
https://www.w3schools.com/html/html_tables.asp
ConclusãoConclusão
O que aprendemos?
Criação básica de tabelas HTML: Cabeçalhos, Linhas, Colunas, Estilo.
02.
01. 03.
04.
Próxima Aula
Formulários HTML
Prática: Criando uma página Web 
com JSON e HTML
Prática Opcional: Criando um 
robô simples de coleta de dados 
com Beautiful Soup
Introdução ao XML/JSON
HTML, XML e JSON
2.1.2. Formulários HTML
Prof. Fernando Felix
Nesta Aula
❑ O que é um formulário HTML?
❑ O Elemento <form>.
❑ Adicionar campos: elementos <label>, <input>, e <textarea>.
❑ Elemento <button>.
❑ Enviar os dados para um servidor web.
❑ Indo Além.
Principal ponto de interação entre um 
usuário e um web site ou aplicativo. 
Permite que os usuários enviem dados 
para um servidor da web, mas a 
página da web também pode usá-los 
por conta própria.
Um formulário HTML é feito de um ou 
mais widgets: campos de texto, caixas 
de seleção, botões, checkboxes ou 
radio buttons.
O que é um formulário?
● Alterar: CodePen: Form 1
https://codepen.io/fernandojunior/pen/eYWXWQX
O atributo for permite 
que o usuário clique na 
legenda (ou rótulo) para 
ativar o campo 
correspondente ao id.
O atributo type define a 
forma como o elemento 
<input> se comporta.
Os elementos <div> 
estão lá para estruturar 
nosso código.
Os elementos <div> 
estão lá para estruturar 
nosso código.
● Alterar: CodePen: Form 2
https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/Input
https://codepen.io/fernandojunior/pen/xxdBdNb
● Alterar: CodePen: Form 3
https://codepen.io/fernandojunior/pen/oNWVwjz
No lado do servidor, existe um 
código para tratar a URL 
"/pagina-processa-dados-do-form", 
que receberá os dados como uma 
lista de itens 3 chave/valor contidos 
na solicitação HTTP.
O formulário irá enviar 3 
informações "usuario_nome", 
"usuario_email" e "usuario_msg" 
para a URL 
"/pagina-processa-dados-do-form" 
com o método POST HTTP.
● Alterar: CodePen: Form 4
https://codepen.io/fernandojunior/details/RwVdgaZ
1
2
4
3
Sugestões:
● HTML Forms
● HTML Form Attributes
● HTML Form Elements
● HTML Input Types
● HTML Input Attributes
● HTML Input form* Attributes
Indo Além
https://www.w3schools.com/html/html_forms.asp
https://www.w3schools.com/html/html_forms_attributes.asp
https://www.w3schools.com/html/html_form_elements.asp
https://www.w3schools.com/html/html_form_input_types.asphttps://www.w3schools.com/html/html_form_attributes.asp
https://www.w3schools.com/html/html_form_attributes_form.asp
ConclusãoConclusão
O que aprendemos?
Você construiu seu primeiro formulário HTML: form, input, label, 
button.
02.
01. 03.
04.
Próxima Aula
Introdução ao XML/JSON
Prática Opcional: Criando um 
robô simples de coleta de dados 
com Beautiful Soup
Capítulo 3. API e WebServer com 
Python
Prática: Criando uma página Web 
com JSON e HTML
HTML, XML e JSON
2.2. Introdução ao XML/JSON
Prof. Fernando Felix
Nesta Aula
❑ Introdução.
❑ XML: Estrutura Básica.
❑ JSON: Estrutura Básica.
❑ Comparação
Introdução
● JSON: JavaScript Object Notation.
● XML: Extensible Markup Language.
● São usados para enviar/receber 
dados para/de um servidor web.
● JSON é mais popular devido ao 
JavaScript (Browsers).
● XML é usado quando se precisa de 
mais confiabilidade, segurança e 
estabilidade Ex: NF do Brasil, Intercâmbio 
de Dados, SMTP. XML é útil quando 
precisamos deixar o tipo dos 
dados explícito.
https://insights.stackoverflow.com/trends?tags=json%2Cxml%2Ccsv%2Csoap
https://www.nfe.fazenda.gov.br/portal/download.aspx?tipoConteudo=YkoQKwGaI70=
https://esales.com.br/blog/intercambio-eletronico-de-dados-edi/
https://esales.com.br/blog/intercambio-eletronico-de-dados-edi/
https://pt.stackoverflow.com/questions/19423/por-que-e-quando-usar-xml-em-vez-de-json
https://insights.stackoverflow.com/trends?tags=json%2Cxml%2Ccsv%2Csoap
XML: Estrutura Básica
Cabeçalho para que os aplicativos saibam que é um arquivo 
XML.
Tag raiz (root), que marca o início dos registros de usuários.
Tag que marca o início do registro de um usuário.
Tag para finalizar o registro.
Tag para finalizar o arquivo.
Um campo dentro do registro. Todos os campos 
são de texto simples por padrão.
Recomendação da W3C para 
gerar linguagens de marcação 
para necessidades especiais.
Possibilidade de criação de 
tags sem limitação.
JSON: Estrutura Básica
https://www.json.org/json-en.html
https://www.json.org/json-en.html
https://www.json.org/json-en.html
Comparação
https://pt.stackoverflow.com/questions/402686/diferen%C3%A7as-entre-usar-xml-ou-json
https://medium.com/@gabrielpolo/representando-dados-com-xml-ou-json-b3fe5f074d7c
https://pt.stackoverflow.com/questions/402686/diferen%C3%A7as-entre-usar-xml-ou-json
ConclusãoConclusão
O que aprendemos?
● O que é JSON e XML.
● Principais diferenças e casos de uso.
02.
01. 03.
04.
Próxima Aula
Prática: Criando uma página Web 
com JSON e HTML
Capítulo 3. API e WebServer com 
Python
Prática Opcional: Criando um 
robô simples de coleta de dados 
com Beautiful Soup
HTML, XML e JSON
2.3. Prática: Criando uma página Web com JSON e HTML
Prof. Fernando Felix
02.
01. 03.
04.
Próxima Aula
Prática Opcional: Criando um 
robô simples de coleta de dados 
com Beautiful Soup
Capítulo 3. API e WebServer com 
Python
HTML, XML e JSON
2.4. Prática Opcional: Criando um robô simples de coleta de dados com Beautiful Soup
Prof. Fernando Felix
02.
01. 03.
04.
Próxima Aula
Capítulo 3. API e WebServer com 
Python
Web Frameworks
Práticas
Introdução a Web Services e ao 
ao Python WSGI
Python para Aplicações Web
Capítulo 3. API e WebServer com Python
Prof. Fernando Felix
API e WebServer com Python
3.1. Introdução a Web Services: REST vs SOAP APIs
Prof. Fernando Felix
Nesta Aula
❑ Introdução a Web Services.
❑ Fluxo SOAP.
❑ Fluxo REST.
❑ Comparação.
Introdução a Web Services
● Serviço HTTP/Web: Solução
utilizada na integração de sistemas.
● Aplicações que fornecem serviços 
simples podem interagir entre si.
● Se comunicam em uma rede por 
meio de HTTP entre os dois 
sistemas.
● Todos os serviços web são APIs, 
mas nem todas as APIs são 
serviços da web.
https://svitla.com/blog/soap-vs-rest-vs-json
https://testautomationresources.com/api-testing/differences-web-services-api/
Fluxo SOAP
Simple Object Access Protocol
● XML.
● Adotado pelo W3C.
● Estrutura extensível de 
mensagens.
● Mensagem via HTTP ou SMTP.
WSDL: Web Services Description Language
https://www.researchgate.net/publication/327054573_SSOAM_Automated_Security_Testing_Framework_for_SOA_Middleware_in_Banking_Domain
https://www.c-sharpcorner.com/article/calling-web-service-using-soap-request/
https://www.reply.com/solidsoft-reply/en/content/webservices-soap-and-rest-a-simple-introduction
Fluxo REST
Representational state transfer
● Geralmente, JSON.
● Arquitetura de software (conjunto 
coordenado de restrições).
● Transações aproveitam o 
protocolo HTTP (POST, GET, 
DELETE etc.).
● Stateless.
https://devdotcode.com/what-is-restful-api/
Comparação
http://tieprojetos.com.br/2016/11/03/rest-vs-soap/
https://jelvix.com/blog/rest-vs-soap
https://www.slideshare.net/JeisonBarros1/o-bsico-do-uso-de-rest-vs-soap
ConclusãoConclusão
O que aprendemos?
● Conhecemos melhor o que é Web Service ou Web API.
● Principais características de um Web Service Soap e Rest.
02.
01. 03.
04.
Próxima Aula
Introdução ao Python WSGI (Web 
Server Gateway Interface)
Prática: Criando uma página Web 
com HTML e uma Web API
Prática Opcional: Criando um 
servidor HTTP simples com 
Python
Web Frameworks
API e WebServer com Python
3.2. Introdução ao Python WSGI (Web Server Gateway Interface)
Prof. Fernando Felix
Nesta Aula
❑ Aplicações Web em Python.
❑ Objetivos do WSGI.
● Um Servidor web tradicional não entende código Python.
● Uma aplicação Web em Python em produção possui:
○ Servidor Web: Hospeda arquivos estáticos (HTML, CSS, JS) e recebe conexões HTTP.
○ Servidor WSGI: Invoca processos/instâncias de Aplicação Web e distribui carga.
○ Aplicação Web: Aplicação usando um framework web (páginas dinâmicas, APIs).
Aplicações Web em Python
Web Server
WSGI App
www.example.com/landpage.html
www.example.com/style.css
www.example.com/login
www.example.com/products/<id>
https://ai.plainenglish.io/machine-learning-on-akash-decloud-part-3-3-deploying-a-deep-learning-web-application-6a9e71e71dd1
https://medium.com/@nhudinhtuan/gunicorn-worker-types-practice-advice-for-better-performance-7a299bb8f929
https://medium.com/@nhudinhtuan/gunicorn-worker-types-practice-advice-for-better-performance-7a299bb8f929
● Web Server Gateway Interface ~ “Porta de Entrada do Servidor Web”.
● Por que usar WSGI e não apenas apontar um servidor Web para um app?
○ Flexibilidade (PEP 3333): Um desenvolvedor pode mudar de Unicorn para uWSGI 
sem modificar uma aplicação que implementa WSGI.
○ Dimensionamento: Atender milhares de requisições de conteúdo dinâmico de uma 
vez é a responsabilidade dos servidores WSGI.
Objetivos do WSGI
https://www.python.org/dev/peps/pep-3333/
https://www.fullstackpython.com/wsgi-servers.html
ConclusãoConclusão
O que aprendemos?
● Como funciona a arquitetura de aplicações Web em produção.
● Principais vantagens de usar o WSGI.
02.
01. 03.
04.
Próxima Aula
Web Frameworks
Prática Opcional: Criando um 
servidor HTTP simples com 
Python
Capítulo 4. Introdução ao Flask
Prática: Criando uma página Web 
com HTML e uma Web API
API e WebServer com Python
3.3. Web Frameworks
Prof. Fernando Felix
Nesta Aula
❑ O que é um Framework?
❑ O que é um Framework Web?
❑ Web Frameworks em Python.
❑ Outros Web Frameworks em Python.
❑ Comparações.
O que é um Framework?
Uma série de códigos prontos que 
oferecem alguma funcionalidade 
específica. Possuem lacunas que devem 
ser preenchidas pelo desenvolvedor para 
funcionar conforme sua necessidade.
https://pt.stackoverflow.com/questions/17501/qual-%C3%A9-a-diferen%C3%A7a-de-api-biblioteca-e-framework
https://www.oreilly.com/library/view/software-architecture-patterns/9781491971437/ch01.html
https://www.sciencedirect.com/science/article/abs/pii/S0164121220302363
O que é um Web Framework?
Construir Aplicações Web. Fornecem 
bibliotecas para acessar banco de dados, 
templates HTML, gerenciamento de login 
etc. Visam o desenvolvimento de sites 
dinâmicos ou Web APIs, mas tambémsão 
aplicáveis a sites estáticos.
Stackoverflow Survey 2020 - Top Web Frameworks
https://insights.stackoverflow.com/survey/2020#technology-web-frameworks
Web Frameworks em Python
Top Python Web Frameworks, 2021, Github stars Jetbrains Survey 2020 - Top Python Web 
Frameworks
https://gustavwillig.medium.com/python-web-development-in-2021-which-web-frameworks-are-the-most-popular-by-github-stars-e07b1d7ef6f7
https://www.jetbrains.com/lp/python-developers-survey-2020/
Outros Web Frameworks em Python
https://canaltech.com.br/inovacao/startup-de-veteranos-do-google-lanca-ferramenta-gratis-de-aprendizado-de-maquina-151291/
https://databricks.com/blog/2020/06/25/announcing-mlflow-model-serving-on-databricks.html
https://sanicframework.org/en/guide/#what-is-it
https://streamlit.io/
Comparações
https://www.techempower.com/benchmarks/#section=data-r20&hw=ph&test=fortune&l=zijzen-sf
https://www.techempower.com/benchmarks/#section=data-r20&hw=ph&test=fortune&l=zijzen-sf
https://www.techempower.com/benchmarks/
ConclusãoConclusão
O que aprendemos?
● O que são Web frameworks.
● Frameworks mais usados no mercado.
● Frameworks com melhores desempenhos.
02.
01. 03.
04.
Próxima Aula
Prática: Criando uma página Web 
com HTML e uma Web API
Capítulo 4. Introdução ao Flask
Prática Opcional: Criando um 
servidor HTTP simples com 
Python
API e WebServer com Python
3.4. Prática: Criando uma página Web com HTML e uma Web API
Prof. Fernando Felix
02.
01. 03.
04.
Próxima Aula
Prática Opcional: Criando um 
servidor HTTP simples com 
Python
Capítulo 4. Introdução ao Flask
API e WebServer com Python
3.5. Prática Opcional: Criando um servidor HTTP simples com Python
Prof. Fernando Felix
02.
01. 03.
04.
Próxima Aula
Capítulo 4. Introdução ao Flask
Prática: Criando uma Aplicação 
Web de TODO List com Flask
Introdução ao DjangoGuia Rápido para Iniciantes
Python para Aplicações Web
Capítulo 4. Introdução ao Flask
Prof. Fernando Felix
Introdução ao Flask
4.1. Guia Rápido para Iniciantes
Prof. Fernando Felix
Nesta Aula
❑ Características.
❑ Instalação.
❑ Aplicação Mínima.
❑ Modo de depuração.
❑ HTML Escaping.
❑ URL Dinâmica.
❑ Métodos HTTP.
❑ Templates.
❑ Dados de Requisição.
● Micro-framework - Lego-Like.
● Depurador e servidor integrados 
(para testes).
● Suporte a testes unitários.
● Plug-in para ORM (base de dados).
● Compatível com WSGI.
● Envio/recebimento de requisições 
REST.
● Mais usado para criação de REST 
APIs.
● Construção de aplicações web 
robustas.
Características
Instalação
Aplicação Mínima
● Importar classe Flask.
● Criar instância da classe.
● Usar o route() para dizer qual 
URL endpoint deve acionar a 
função hello_world.
● Executar aplicativo no terminal
○ WSGI para dev/testes.
● Abrir http://127.0.0.1:5000/
http://127.0.0.1:5000/
Modo de depuração
FLASK_ENV=development flask run
HTML Escaping
HTML Escaping
Regras de Variáveis
URL Dinâmica
● Mais descritivo do que codificar URLs.
● Podemos alterar URLs de uma vez, em 
vez alterar manualmente as URLs.
● URLs geradas são sempre absolutas:
○ Evita comportamento inesperado de 
caminhos relativos.
Métodos HTTP
Renderizado via 
show_the_login_form, 
método GET
Renderizado via 
do_the_login, método POST
Templates
Jinja2
Escape automático 
está habilitado.
https://jinja.palletsprojects.com/en/3.0.x/templates/
Dados de Requisição
Dados de Requisição / JSON
ConclusãoConclusão
O que aprendemos?
● Como é simples criar aplicações com Flask.
● Principais funcionalidades.
Extra:
● Templates com Jinja2
● Upload de arquivos
● Cookies
● Redirects e errors
● Sessões
● Logging
● Flask extensions
● Blueprints
https://jinja.palletsprojects.com/en/3.0.x/templates/
https://flask.palletsprojects.com/en/2.0.x/quickstart/#file-uploads
https://flask.palletsprojects.com/en/2.0.x/quickstart/#cookies
https://flask.palletsprojects.com/en/2.0.x/quickstart/#redirects-and-errors
https://flask.palletsprojects.com/en/2.0.x/quickstart/#sessions
https://flask.palletsprojects.com/en/2.0.x/quickstart/#logging
https://flask.palletsprojects.com/en/2.0.x/quickstart/#using-flask-extensions
https://flask.palletsprojects.com/en/2.0.x/blueprints
02.
01. 03.
04.
Próxima Aula
Prática: Criando uma Aplicação 
Web de TODO List com Flask
Capítulo 5. Introdução ao Django
Introdução ao Flask
4.2. Prática: Criando uma Aplicação Web de TODO List com Flask
Prof. Fernando Felix
02.
01. 03.
04.
Próxima Aula
Capítulo 5. Introdução ao Django
Prática: Criando uma Aplicação 
Web de TODO List com Django
Guia Rápido para Iniciantes
Python para Aplicações Web
Capítulo 5. Introdução ao Django
Prof. Fernando Felix
Introdução ao Django
5.1. Guia Rápido para Iniciantes
Prof. Fernando Felix
Nesta Aula
❑ Características.
❑ Django Tutorial.
❑ Instalação.
❑ Estrutura: Projeto.
❑ Estrutura: Micro Aplicação.
❑ Aplicação Mínima.
❑ Criação de Modelo de dados.
❑ Django Admin.
● Abordagem pragmática: DRY
○ Don't Repeat Yourself.
○ Reutilização de componentes.
● Baterias inclusas - muitas 
bibliotecas.
● Roteamento de URL.
● Templates e Formulários.
● Módulo de autenticação.
● ORM nativo.
● Entrega rápida (MVPs).
● Geralmente, aplicativos 
monolíticos.
● Suporte a REST via plugin.
Características
https://pythonacademy.com.br/blog/desenvolvimento-web-com-python-e-django-introducao
https://pythonacademy.com.br/blog/desenvolvimento-web-com-python-e-django-introducao
https://pythonacademy.com.br/blog/desenvolvimento-web-com-python-e-django-introducao
Django Tutorial
https://docs.djangoproject.com/en/3.2/contents/
https://docs.djangoproject.com/en/3.2/contents/
Django Tutorial
https://github.com/fernandojunior/django-tutorial
https://github.com/fernandojunior/django-tutorial
https://github.com/AnniePawl/Django-Poll-App
https://github.com/AnniePawl/Django-Poll-App
Instalação
Estrutura: Projeto
● manage.py: Utilitário de linha de comando 
(Ex.: iniciar servidor, criar micro apps etc.).
● __init__.py: Arquivo em branco para tratar o 
diretório como um pacote.
● settings.py: Contém as definições do website. 
Registramos aplicações, local de arquivos 
estáticos, configurações de banco de dados 
etc.
● urls.py: Mapeamentos de URL para 
visualização do site.
● wsgi.py: Ajuda na comunicação entre a 
aplicação principal e o Web server.
Estrutura: Micro Aplicação
Cada novo pacote é tratado como uma micro 
aplicação. Cada arquivo tem seu propósito.
● Configurações de administração (superuser) do 
site em admin.py.
● Definições de visões (conteúdo das urls) devem 
ser armazenadas em views.py.
● Entidades e regras de negócio em models.py.
● Casos de testes em tests.py.
● Configuração da aplicação em apps.py.
Estrutura: Micro Aplicação
● Arquivos estáticos como imagens e estilos em static/
● Template de páginas HTML em templates/
● Códigos para versionamento de base de dados em 
migrations/
Aplicação Mínima
Criação de Modelo de dados
Django Admin
ConclusãoConclusão
O que aprendemos?
● Principais características do Django.
● Estrutura básica de um projeto e aplicação.
● Como funciona o mapeamento de modelo de dados.
● Django possui uma interface de administração.
02.
01. 03.
04.
Próxima Aula
Prática: Criando uma Aplicação 
Web de TODO List com Django
Introdução ao Django
5.2. Prática: Criando uma Aplicação Web de TODO List com Django
Prof. Fernando Felix
02.
01. 03.
04.
Próxima Aula
https://github.com/fernandojunior/igti-flask-todo-app 
https://github.com/fernandojunior/igti-django-todo-app 
Fim!
https://www.linkedin.com/in/fernandofnjr/ 
https://github.com/fernandojunior/igti-flask-todo-app
https://github.com/fernandojunior/igti-django-todo-app
https://www.linkedin.com/in/fernandofnjr/