Módulo 08 AdmTech · Computação · Semana 10 · 16/12/2026

Do Script ao Produto

React, FastAPI e interpretação com LLM para o A5, Sprint 5

Logo Inteli

Agenda do encontro

BlocoMinutosTemaInteração que fecha o bloco
Daily15O que fiz, o que vou fazer, impedimentosmódulo de cada entrega e chave fora do repositório
10 a 15Resgate da Aula 05 e onde o otimizador rodaPeer Instruction
215 a 30Cliente, servidor, HTTP, JSON e o contratoprevisão do status no montador
330 a 45FastAPI ao vivo, Pydantic e cacheque erro para um ticker que não existe
445 a 60A API testada com TestClientdupla no notebook, seções 3 e 4
560 a 75O componente React e o CORSescolha coletiva: navegador ou servidor
675 a 90O LLM chamado pelo backendque número conferir por código
790 a 105Quiz e amarração com a Sprint 5quiz de três perguntas

Horários de relógio a confirmar na Adalove; os blocos contam do fim da daily.

Logo Inteli

A Aula 05 deixou o teste fora da amostra pronto

A Aula 05 deixou pronto o teste fora da amostra das duas carteiras ótimas e a medida de estabilidade dos pesos entre janelas. Hoje cada entrega vira um módulo que a API importa.

EntregaMódulo no backend do exemploO que a API usa
A1carteira/dados.pyAdj Close e CDI, com a lacuna isolada preenchida pelo último preço (ADR-009)
A2carteira/metricas.pyretornos na janela comum dos tickers pedidos e métricas anualizadas por 252
A3módulo de Monte Carlo do gruporota de simulação, a cargo do grupo
A4carteira/otimizador.pyvariância mínima, máximo Sharpe e fronteira de 50 pontos
Aula 05validação do grupoteste fora da amostra e estabilidade, a cargo do grupo

Um gestor do parceiro digita tickers numa tela. O otimizador roda no navegador ou no servidor?

Logo Inteli

Verificação do preparo

O gestor digita cinco tickers e clica em Otimizar. Onde o otimizador deve rodar?

  • No navegador, em JavaScript, para responder mais rápido
  • No servidor, em Python, e o navegador recebe JSON
  • Nos dois, para um conferir o outro
  • No servidor, que devolve a imagem pronta do gráfico
  1. Votar sozinho, sem conversar.
  2. Discutir em dupla por dois minutos, defendendo o voto.
  3. Votar de novo e só então revelar.

Cliente, servidor e o contrato da API

Método HTTP, JSON e código de status

Logo Inteli

O pedido volta com 50 pares da fronteira

Antes de tocar: anote em qual das três caixas um pedido com ticker repetido para.

Logo Inteli

Contrato da API do simulador

RotaEntradaSucessoErros do contrato
GET /ativosnenhuma200, tickers da basenenhum
POST /carteiras/otimizar2 a 15 tickers, início, fim, taxa opcional200, ativos, duas carteiras e fronteira404 ticker fora da base; 422 entrada inválida
POST /carteiras/interpretaro mesmo pedido200, texto e checagem de presença de cada número404, 422; 503 sem chave; 502 provedor
POST /carteiras/exportaro mesmo pedido200, CSV com os pesos404, 422

Este contrato vai para o SPEC.md antes de dividir o trabalho: frontend e backend passam a andar em paralelo.

Logo Inteli

Nove requisições devolvem quatro status

Cada dupla anota o status previsto antes de clicar em Enviar. Respostas gravadas da API de exemplo, sem chave do LLM.

FastAPI ao vivo

Rota por operação de negócio, Pydantic e /docs

Logo Inteli

A rota importa o otimizador das sprints

from carteira import dados, pipeline

class PedidoCarteira(BaseModel):
    tickers: list[str] = Field(min_length=2,
                               max_length=15)
    inicio: date = date(2019, 1, 1)
    fim: date = date(2026, 8, 31)
    # + taxa opcional e validador de repetição

@lru_cache(maxsize=64)
def _calcular(tickers, inicio, fim, rf):
    try:
        return Resultado(**pipeline.calcular(
            tickers, inicio, fim, rf))
    except dados.TickerDesconhecido as erro:
        raise HTTPException(404, "Ticker fora ...")

@app.post("/carteiras/otimizar")
def otimizar(pedido: PedidoCarteira) -> Resultado:
    return _calcular(tuple(pedido.tickers), ...)
Rotanome da operação do gestor, /carteiras/otimizar
Pydanticrecusa a entrada errada com 422, antes de qualquer cálculo
Importapipeline.calcular não sabe de HTTP e serve também ao notebook
/docsdocumentação gerada dos mesmos modelos, para testar no navegador
Logo Inteli

O cache reduz 260 problemas de otimização a 104

Antes de tocar: cada pedido novo calcula 52 carteiras no otimizador. Em quais dos cinco pedidos o servidor com cache volta a calcular?

Logo Inteli

Erros do contrato da API

Que erro a API deve devolver para um ticker que não existe: 404, recurso fora da base, ou 422, entrada inválida? Cada dupla escolhe e justifica pelo contrato antes de revelar.

StatusQuem detectaExemploO que o gestor lê
422Pydantic, antes do cálculoum ticker só; início depois do fimescolha ao menos dois ativos e um período válido
404o coletor, ao procurar o tickerXPTO3algum ativo não está na base (XPTO3)
503a rota de interpretaçãoservidor sem OPENROUTER_API_KEYos números da carteira continuam válidos
502a rota de interpretaçãoo provedor do LLM não respondeuos números da carteira continuam válidos

O exemplo adota 404 e registra a escolha no SPEC.md; 422 também é defensável, desde que o contrato diga qual e mantenha o mesmo corpo de erro. Um 500 fica fora do contrato: é exceção sem tratamento, defeito do grupo.

Logo Inteli

Prática em dupla: a API sem servidor

  1. Seções 1 a 4, com as células prontas: o condutor roda e vê passar o 200 e o 422; o navegador lê o campo que o 422 aponta.
  2. A dupla escreve o caso do caminho que recebeu: 200 com dois tickers da cesta, 422 com início depois do fim ou erro de domínio com XPTO3 (célula c).
  3. Aos 6 minutos, troquem de papel. O novo condutor fixa o status esperado antes de rodar e roda o caso.
  4. ExtensãoEscrevam os outros dois caminhos e anotem os três no plano de testes do SPEC.md.

Checagem aos 6 min: a seção 4 passou e o caso da dupla está escrito, ainda sem rodar. Debrief: uma dupla por caminho mostra o status obtido, e a turma confronta o do XPTO3 com o contrato do slide 12.

Abrir o notebook da Aula 06 no Colab

O componente React

Estado, fetch, carregamento, erro e o gráfico

Logo Inteli

O componente guarda estado e delega o cálculo

const [carregando, setCarregando] = useState(false);
const [erro, setErro] = useState(null);
const [resultado, setResultado] = useState(null);

async function aoOtimizar(evento) {
  evento.preventDefault();
  setCarregando(true);
  setErro(null);
  try {
    setResultado(await otimizar(pedido()));
  } catch (e) {
    setResultado(null);
    setErro(e.message);   // já traduzida em api.js
  } finally {
    setCarregando(false);
  }
}
useStatecada mudança de estado redesenha a tela
api.jstodo o fetch num arquivo; 404 vira "algum ativo não está na base"
Carregandoo botão vira "Calculando..." e não aceita outro clique
CORSReact em localhost:5173, API em 127.0.0.1:8000: sem o middleware, o navegador descarta a resposta
Logo Inteli

Em que camada fica cada parte

1. A chave do LLM

  • Navegador
  • Servidor
  • Nos dois

2. O cálculo da fronteira

  • Navegador
  • Servidor
  • Nos dois

3. O gráfico da fronteira

  • Navegador
  • Servidor
  • Nos dois

4. A validação da entrada

  • Navegador
  • Servidor
  • Nos dois

Cada dupla decide antes do clique. A sala vota em cada item.

O LLM como componente do produto

Chamado pelo backend, conferido contra os números

Logo Inteli

O prompt leva os números reais da carteira

"maximo_sharpe": {
 "pesos_pct": {
  "PETR4": 23.33,
  "WEGE3": 25.02,
  "IVVB11": 51.64
 },
 "retorno_anual_pct": 26.9,
 "volatilidade_anual_pct": 19.13,
 "sharpe": 0.91
},
"taxa_livre_risco_pct": 9.51,
"inicio_janela": "2019-01-03",
"pregoes": 1907
ChaveOPENROUTER_API_KEY no ambiente do backend; .env fora do git
Contextoo JSON de /carteiras/otimizar, em porcentagem; pregoes conta os retornos diários da janela comum dos 5 tickers, que começa em inicio_janela
Regrasusar só esses números, declarar limitações, não prometer retorno
ModeloLLM_MODELO no ambiente: trocar de modelo muda custo por token e texto
Saídao texto volta com a checagem de presença de cada número citado
Logo Inteli

Exercício: conferir o texto número a número

Que número desse texto o grupo consegue conferir por código? Marquem à mão antes de clicar.

Logo Inteli

O verificador acusa 2 dos 3 erros plantados

TrechoErro plantadoVerificação de presençaValor certo
17,13%volatilidade alteradaacusa: não existe no JSON19,13%
30,00%promessa de retornoacusa: não existe no JSONnenhum: o JSON não tem futuro
0,16ativo trocadoaprova: existe, no IVVB11o IVVB11 diversifica mais, com 0,16; VALE3 tem 0,32

10 dos 12 números passam na verificação de presença, e 9 estão certos. A presença, sem conferir ativo, unidade nem período, deixa passar o 0,16, e a origem devolvida mostra o erro.

Logo Inteli

Quiz de verificação

1. O pedido traz só a PETR4. Que status a API devolve?

  • 404
  • 422
  • 500

2. Onde mora a OPENROUTER_API_KEY?

  • Variável VITE_ do front
  • .env no repositório
  • Ambiente do backend

3. Que campo da verificação mostra o ativo trocado?

  • confere
  • origem
  • trecho
Logo Inteli

Notebook da aula

SeçãoO que entrega
1 e 2Os dados e os módulos das sprints numa função calcular sem HTTP
3 e 4A API no notebook e os casos 200, 422 e do ticker inexistente com TestClient
5O cache contando os problemas de otimização por pedido
6 e 7O prompt com os números reais, a chamada opcional e o verificador
8Desafio do A5: rota de métricas para pesos informados, com 422 para pesos que não somam 1

Notebook no GitHub · Abrir no Colab · Exemplo com backend e frontend

Logo Inteli

Artefato A5 da Sprint 5

Critério do baremaPesoO que hoje já adiantou
Operabilidade por não programador25%estado de carregamento e erro traduzido para o gestor
Integração do pipeline10%API que importa os módulos, com cache da mesma consulta
Qualidade da interpretação por LLM25%prompt com os números reais e o verificador de números
Exportação e estabilidade5%rota de CSV e limite de 15 ativos no Pydantic
Especificação e documentação15%contrato da API no SPEC.md; README com fastapi dev e npm run dev
ADRs, nota individual20%divisão entre frontend e backend, rotas e desenho do prompt

A5 vale 2 pontos. /backend e /frontend separados, .env.example sem chave. Review da Sprint 5 em 18/12/2026, que fecha o módulo.

Logo Inteli

Referências

  1. dados/README.md: snapshot do case e cesta de 15 ativos.
  2. exemplos/aula06-api-carteira: API e tela de exemplo, com testes.
  3. REACT. Início rápido. Documentação oficial em português. Autoestudo: React e FastAPI: a interface conversando com o código Python.
  4. HIROTA, F. ChatGPT e inteligência artificial. Actual, 2023. cap. 4, 12 e 13. Autoestudo: LLMs com senso crítico: codificação, limitações e bom uso.
  5. FastAPI: Primeiros Passos.
  6. FastAPI: CORS.
  7. OpenRouter: Quickstart, API compatível com a da OpenAI.
  8. MDN: códigos de status HTTP.
  9. Modelo de ADR do curso.

Review final em 18/12/2026

A Sprint 5 fecha o módulo com o A5 demonstrado ao parceiro

Prof. José Romualdo