Aula 9: Deploy - Colocando Sua Aplicação Online - Curso Grátis Introdutório de Programação, Web e Jogos

 

Aula 9: Deploy - Colocando Sua Aplicação Online 

📌 Objetivo: Aprender a publicar sua aplicação na internet para que qualquer pessoa possa acessá-la.

1️⃣ O Que é Deploy?

Deploy significa tornar seu site ou sistema acessível online. Hoje, vamos colocar nossa API Flask e nosso Front-End no ar para que funcionem na internet!

Para isso, usaremos:
✅ Render → Para hospedar nossa API Flask (grátis e fácil).
✅ Vercel ou Netlify → Para hospedar o Front-End (rápido e eficiente).

2️⃣ Preparando a API Flask Para Deploy

📌 Antes de publicar, precisamos fazer algumas mudanças.

🔹 Criando um arquivo requirements.txt

O Render precisa saber quais pacotes nossa API usa.

📌 Crie um arquivo chamado requirements.txt na pasta do seu projeto e adicione:

nginx

flask
flask-cors
sqlite3

🔥 Isso informa ao servidor quais bibliotecas instalar!

🔹 Modificando o app.py para produção

Atualmente, nossa API roda apenas localmente (127.0.0.1). Precisamos permitir que outras pessoas acessem.

📌 No seu app.py, altere esta linha:


python

app.run(debug=True)


Para:

python

app.run(host="0.0.0.0", port=5000)


Isso permite que o servidor aceite conexões externas.


3️⃣ Fazendo Deploy da API Flask no Render

Agora, vamos colocar nossa API online!

🔹 Passo a Passo no Render

  1. Crie uma conta no Render.
  2. Clique em New > Web Service.
  3. Conecte seu repositório (se estiver no GitHub, use ele!).
  4. Escolha Python como linguagem.
  5. No campo Build Command, coloque: 
    nginx

    pip install -r requirements.txt
  6. No campo Start Command, coloque: 
    nginx

    python app.py
  7. Clique em Deploy e aguarde! 🎉

4️⃣ Preparando o Front-End Para Deploy

Nosso index.html atualmente está rodando localmente. Vamos colocá-lo online com o Vercel ou Netlify!

📌 Duas Opções Fáceis:
✅ Netlify → Melhor para arrastar e soltar arquivos.
✅ Vercel → Melhor para projetos no GitHub.

🔹 Deploy no Netlify

  1. Acesse Netlify.
  2. Crie uma conta e faça login.
  3. Arraste sua pasta do front-end (onde está index.html).
  4. O site será publicado e um link será gerado!

🔹 Deploy no Vercel (para quem usa GitHub)

  1. Acesse Vercel.
  2. Conecte sua conta do GitHub.
  3. Escolha o repositório do seu projeto.
  4. Clique em Deploy e pronto!

5️⃣ Testando o Sistema Online

Agora que tudo está online:
✅ Acesse sua API Flask pelo link do Render.
✅ Acesse seu site pelo link do Netlify/Vercel.
✅ O Front-End agora se comunica com a API real online!

🎯 Exercício Prático

📌 Crie um botão "Atualizar Cliente" na interface!

  • Quando clicado, deve enviar uma requisição PUT para a API.
  • A API Flask deve atualizar o cliente no banco.
  • O Front-End deve mostrar os dados atualizados.

💡 Dica: Use fetch() com method: "PUT".

📩 Próxima Aula

Na Aula 10, vamos aprender sobre banco de dados avançado, adicionando mais recursos ao nosso projeto!

📌 Dúvidas? Pergunta aqui! 🚀

Location: Tôrres - Torres, RS, 95560-000, Brazil

Comments

Post a Comment

Popular posts from this blog

Aula 7: Criando um Back-End com Flask (API Web) - Curso Grátis Introdutório de Programação, Web e Jogos

  Aula 7: Criando um Back-End com Flask (API Web) 📌 Objetivo: Aprender a criar uma API usando Flask para conectar um site ou app ao banco de dados. 1️⃣ O Que é um Back-End? O back-end é a parte de um sistema que roda no servidor e gerencia dados. 💡 Exemplo: Quando você acessa um site de pedidos de comida, o back-end processa o pedido, armazena no banco de dados e envia a resposta ao usuário. Para criar um back-end, usaremos Flask , um framework leve do Python. 2️⃣ Instalando o Flask Abra o terminal e digite: bash pip install flask 3️⃣ Criando uma API Simples Agora, vamos criar um servidor que responde "Olá, mundo!" quando acessamos. 📌 Crie um arquivo app.py e cole o código abaixo: python from flask import Flask app = Flask(__name__) @app.route( '/' ) def home (): return "Olá, mundo!" if __name__ == '__main__' : app.run(debug= True ) ✅ Explicação: Criamos um servidor com Flask. @app.route('/') def...
Read more

Aula 8: Criando o Front-End com HTML, CSS e JavaScript - Curso Grátis Introdutório de Programação, Web e Jogos

  Aula 8: Criando o Front-End com HTML, CSS e JavaScript 📌 Objetivo: Criar uma interface web para exibir os dados da nossa API usando HTML, CSS e JavaScript. 1️⃣ O Que é um Front-End? O front-end é a parte visual de um site ou aplicação, aquilo que o usuário vê e interage. Ele usa três tecnologias principais: ✅ HTML → Estrutura da página (como ossos do corpo). ✅ CSS → Estilização (como roupas e aparência). ✅ JavaScript → Funcionalidade (como os músculos que permitem o movimento). 2️⃣ Criando o Arquivo HTML Vamos criar um site simples que lista os clientes da nossa API. 📌 Crie um arquivo index.html e cole isso: html <!DOCTYPE html > < html lang = "pt-br" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Lista de Clientes </ title > < style > body { font-famil...
Read more