Aprendendo Desenvolvimento Web Full Stack com FastAPI, TensorFlow e Tailwind

Um guia rápido e prático para construir do zero uma aplicação web inteligente e completa, com backend robusto em Python e frontend leve em HTML, JS e Tailwind CSS.

📌 Pré-requisitos

Antes de tudo, tenha isso instalado:

Python 3.10+ (intalado)
Node.js 18+ (instalação é opcional, nesse projeto é para iniciantes se quiser arriscar pode utilizar o nodejs)
Git & GitHub (essa integração é importante, principalmente para iniciantes testas os comandos Git)
Navegador de confiança (para testar e não ter problemas)
Sua IDE preferida (uso o VSCode)
📁 = criar pasta dentro da IDE
📄 = criar documento dentro da IDE

1️⃣ Estrutura do Projeto (pode somente criar os arquivos manualmente do VSCode ou sua IDE preferida)

meu-projeto-fullstack/
├── backend/
│   ├── main.py
│   ├── model.py
│   └── requirements.txt
├── frontend/
│   ├── index.html
│   ├── script.js
│   └── tailwind.css
└── README.md

2️⃣ Backend com FastAPI + TensorFlow (sistema intolerante a falhas e robusto com uma troca de dados que se "conversam")

📁 backend/requirements.txt

txt

fastapi
uvicorn
tensorflow
pydantic

📄 backend/model.py (exemplo simples de IA)

python

import tensorflow as tf
import numpy as np

# Modelo artificial simples (rede neural de brinquedo)
model = tf.keras.Sequential([
  tf.keras.layers.Dense(10, activation='relu', input_shape=(1,)),
  tf.keras.layers.Dense(1)
])
model.compile(optimizer='adam', loss='mse')

# Treinar com dados fictícios
x = np.array([1, 2, 3, 4, 5], dtype=float)
y = np.array([1, 4, 9, 16, 25], dtype=float)  # y = x²
model.fit(x, y, epochs=100, verbose=0)

def prever(valor: float) -> float:
  return float(model.predict([[valor]], verbose=0)[0][0])

📄 backend/main.py

python

from fastapi import FastAPI
from pydantic import BaseModel
from model import prever

app = FastAPI()

class Entrada(BaseModel):
  valor: float

@app.get("/")
def raiz():
  return {"mensagem": "API de Previsão com TensorFlow + FastAPI"}

@app.post("/prever")
def previsao(dado: Entrada):
  resultado = prever(dado.valor)
  return {"entrada": dado.valor, "previsao": resultado}

▶️ Para rodar o backend

bash

cd backend
pip install -r requirements.txt
uvicorn main:app --reload

A API estará em: http://localhost:8000

3️⃣ Frontend com HTML + Tailwind + JS (Node.js é opcional mas importante).

Você pode usar Node.js para rodar um servidor estático, mas nesse exemplo vamos rodar no navegador direto, o que é mais pratico para iniciantes. Mas você pode ir adicionar o NodeJS. É só ter ele instalado no PC e criar as pastas e arquivos dentro da IDE. 😉

📄 frontend/index.html

html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Previsão Inteligente</title>
<script src="script.js" defer></script>
<link href="tailwind.css" rel="stylesheet">
</head>
<body class="bg-gray-900 text-white flex flex-col items-center justify-center min-h-screen p-6">
<h1 class="text-3xl font-bold mb-4">🔮 Previsão com IA</h1>
<input type="number" id="entrada" placeholder="Digite um número" class="p-2 rounded text-black" />
<button onclick="enviar()" class="mt-4 px-4 py-2 bg-blue-500 hover:bg-blue-700 rounded">Enviar</button>
<div id="resposta" class="mt-6 text-lg"></div>
</body>
</html>

📄 frontend/script.js

javascript

async function enviar() {
const valor = parseFloat(document.getElementById("entrada").value)
const resposta = document.getElementById("resposta")

const res = await fetch("http://localhost:8000/prever", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ valor })
})

const dados = await res.json()
resposta.textContent = `Previsão da IA: ${dados.previsao.toFixed(2)}`
}

📄 frontend/tailwind.css

Use o Play CDN para testes rápidos. Substitua o <link> por:

html

<script src="https://cdn.tailwindcss.com"></script>

4️⃣ Como Rodar o Projeto

Primeiro, execute o backend:

bash

uvicorn main:app --reload

Depois, abra o index.html no navegador (duplo clique ou via Live Server).

✅ Testando

Você estando seu código aos poucos é uma ótima pratica pra iniciantes ou pode ser pratico e testar tudo no final mas tem que ter uma confiança no seu código!

Você pode usar o "terminal" da IDE ou abrir o "index.HTML" com a extensão "Live Server" (dentro do VSCode).

Também pode usar a extensão do gemini ou do github copilot, que super funciona e você consegui ir aprendendo com a IA, ate mesmo boas praticas de criação de codigo, usar comentários é muito importante e as IAS ate sugerem comandos no terminal bash (que é o git dentro do vscode).

Criar projetos vendo a documentação (é tudo questão de adaptação) ajuda a criar bons softwares, intolerantes a falhas, erros e usar boas praticas e aprender a fazer testes.

🧠 Expansões Futuras

Usar Node.js com Express para servir o frontend (bem legal).
Conectar com banco de dados (python se da muito bem com dados e ia).
Treinar IA com dados reais (ex: classificação, regressão, NLP, LLMs...).
Criar autenticação com JWT (sistema robusto).
Deploy com Gitlab, Github action, docker, kubernetes. (tudo isso tambem pode ser feito na numem e gratuito caso tenha créditos ou se tiver contas vinculadas a faculdade)

📚 Conclusão

Com poucas linhas, conseguimos unir:

FastAPI 🐍 + TensorFlow 🤖 para um backend inteligente.
HTML + JS + Tailwind 💅 para uma interface moderna, atrativa e ate entra em um pouco de UI e UX.
Comunicação total entre cliente e servidor.

Este é o "esqueleto" ideal para projetos reais de desenvolviemnto web, é uma boa base tambem. Sendo simples, direto, robusto.

🔛 Eai,

esse conteúdo te ajudou de algumas maneira❔ ficou alguma duvida❔ Deixa seu comentário...