Neste tutorial prático, você vai aprender como criar aplicativo com ChatGPT do absoluto zero, construindo um recomendador de filmes interativo em apenas 40 minutos. Você só precisa de um computador com acesso à internet, uma conta ativa na OpenAI e disposição para copiar e colar os comandos que vou ditar agora.
O que você vai precisar
- Tempo estimado: 40 minutos.
- Custo aproximado: US$ 5,00 (referente ao saldo mínimo para chamadas na API de testes).
- Uma conta ativa no painel da OpenAI para gerar credenciais de integração de dados.
- Uma conta criada na plataforma do GitHub para gerenciar e salvar códigos se desejar expandir o sistema futuramente.
- O editor de código VS Code instalado no seu sistema operacional de preferência.
- O interpretador de linguagem Python configurado na versão 3.10 ou superior.
- Um navegador web atualizado para realizar os testes práticos de usabilidade da interface gráfica.
Passo a passo
-
Crie a sua credencial de acesso na OpenAI
Abra o seu navegador web e faça login no portal oficial de desenvolvedores criado pela OpenAI. No canto esquerdo da tela de início, localize o menu lateral principal de ferramentas.
Clique em “API keys” no menu lateral para visualizar as suas credenciais de segurança do sistema. Pressione o botão rotulado como “Create new secret key” posicionado no centro do painel administrativo.
Insira a identificação “Recomendador_Filmes” no campo de texto exibido e confirme a criação clicando no botão verde de geração de chaves. Copie imediatamente a string de texto iniciada com os caracteres sk-proj e guarde o valor em um bloco de notas.
Você deve ver uma janela pop-up exibindo a sua chave secreta gerada com o botão para copiá-la.
-
Prepare a estrutura de pastas e arquivos
Abra o console de comandos do seu sistema operacional para preparar os diretórios do seu novo programa. Digite a sequência exata de diretrizes listadas no bloco de código abaixo para estruturar os arquivos.
mkdir recomendador-ia cd recomendador-ia mkdir templates touch app.py .env templates/index.htmlInicie o seu editor VS Code e escolha a opção de abrir uma pasta local do sistema. Selecione o diretório chamado recomendador-ia para carregar os arquivos recém-criados que estão vazios.
Você deve ver a árvore de diretórios do seu projeto contendo a pasta principal, a subpasta templates e os três arquivos vazios no painel lateral esquerdo.
-
Descubra como criar aplicativo com ChatGPT escrevendo o prompt ideal
Abra a interface de conversação padrão do seu assistente de inteligência artificial predileto. A precisão do código gerado depende exclusivamente da clareza das instruções técnicas contidas no comando que você vai disparar.
Copie o prompt estruturado do bloco abaixo e cole na caixa de envio de mensagens do seu assistente.
Escreva um código para uma aplicação Flask em Python que funcione como um recomendador de filmes baseado no humor do usuário. O projeto precisa ter um arquivo app.py que utilize o pacote dotenv para carregar a chave OPENAI_API_KEY do arquivo .env. O script deve chamar a API oficial da OpenAI usando o modelo gpt-4o-mini e retornar uma lista de 3 recomendações em formato JSON estruturado com título, ano, gênero e sinopse. Forneça também o arquivo templates/index.html contendo um campo de texto, um botão para enviar o humor e uma área limpa estilizada com Tailwind CSS para renderizar as recomendações de forma bonita sem recarregar a página.Aguarde alguns instantes até que o assistente conclua o processamento completo das lógicas de programação solicitadas. O resultado gerado trará separadamente o script do servidor e as marcações visuais da página web.
Você deve ver o ChatGPT gerando o código completo em Python e o código HTML com explicações detalhadas na sua tela.
-
Configure as variáveis de ambiente locais
Selecione o arquivo oculto chamado .env no painel de navegação do seu editor VS Code. Esse arquivo funciona como um cofre de segurança que impede a exposição pública de credenciais de acesso particulares.
Copie os parâmetros de configuração descritos abaixo e cole no corpo do documento oculto criado anteriormente.
OPENAI_API_KEY=sk-proj-SUA_CHAVE_AQUI_INTEIRA_SEM_ESPACOS FLASK_ENV=development PORT=5000Substitua o trecho após o sinal de igualdade pelo código alfanumérico que você guardou no primeiro passo deste guia. Salve o arquivo pressionando o atalho de teclado padrão para gravar os dados de ambiente.
Você deve ver a sua chave da OpenAI colada corretamente logo após o sinal de igual no arquivo de texto.
-
Crie o código principal no arquivo de servidor
Abra o arquivo nomeado como app.py no painel de edição de textos do seu ambiente de desenvolvimento. Esse arquivo centraliza toda a lógica de roteamento e faz a conexão entre a interface de usuário e os modelos inteligentes.
Copie o script Python completo exposto no bloco abaixo e cole no arquivo correspondente.
import os from flask import Flask, render_template, request, jsonify from openai import OpenAI from dotenv import load_dotenv load_dotenv() app = Flask(__name__) client = OpenAI(api_key=os.getenv("OPENAI_API_KEY")) @app.route("/") def index(): return render_template("index.html") @app.route("/recomendar", methods=["POST"]) def recomendar(): dados = request.get_json() sentimento = dados.get("sentimento", "") prompt = f"Recomende 3 filmes para quem está se sentindo: {sentimento}. Retorne apenas um array JSON válido contendo objetos com as chaves 'titulo', 'ano', 'genero' e 'sinopse'. Não use markdown ou blocos de código na resposta." try: response = client.chat.completions.create( model="gpt-4o-mini", messages=[ {"role": "system", "content": "Você é um recomendador de filmes que só fala em português e retorna dados estritamente em JSON."}, {"role": "user", "content": prompt} ] ) resposta_texto = response.choices[0].message.content.strip() return jsonify({"sucesso": True, "recomendacoes": resposta_texto}) except Exception as e: return jsonify({"sucesso": False, "erro": str(e)}), 500 if __name__ == "__main__": app.run(host="127.0.0.1", port=5000, debug=True)Certifique-se de salvar o documento antes de prosseguir com a montagem da interface visual. O código acima utiliza a estrutura atualizada de chamadas recomendada nas referências oficiais da API.
Você deve ver o arquivo app.py preenchido com a lógica de importação do Flask e as rotas de comunicação.
-
Desenvolva o visual com o arquivo HTML
Acesse a pasta templates no menu lateral esquerdo do VS Code e selecione o arquivo chamado index.html. Este documento abriga a estrutura de tags visuais que o usuário final usará para interagir com o robô.
Copie as instruções de formatação HTML apresentadas no código a seguir e insira diretamente no arquivo selecionado.
<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Recomendador de Filmes IA</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="bg-gray-900 text-white min-h-screen flex flex-col items-center justify-center p-6"> <div class="max-w-md w-full bg-gray-800 rounded-lg p-6 shadow-xl"> <h1 class="text-2xl font-bold mb-4 text-center">Como você está se sentindo hoje?</h1> <p class="text-gray-400 mb-6 text-sm text-center">Diga seu humor e o ChatGPT recomendará os melhores filmes.</p> <input type="text" id="sentimento" placeholder="Ex: Cansado mas querendo dar risada" class="w-full p-3 rounded bg-gray-700 border border-gray-600 focus:outline-none focus:border-blue-500 text-white mb-4"> <button onclick="buscarFilmes()" class="w-full bg-blue-600 hover:bg-blue-700 py-3 rounded font-bold transition">Recomendar Filmes</button> <div id="resultado" class="mt-6 space-y-4"></div> </div> <script> async function buscarFilmes() { const sentimento = document.getElementById("sentimento").value; const resultadoDiv = document.getElementById("resultado"); resultadoDiv.innerHTML = "<p class='text-center text-blue-400'>Consultando inteligência artificial...</p>"; try { const resposta = await fetch("/recomendar", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ sentimento }) }); const dados = await resposta.json(); if (dados.sucesso) { const filmes = JSON.parse(dados.recomendacoes); resultadoDiv.innerHTML = ""; filmes.forEach(f => { resultadoDiv.innerHTML += ` <div class='p-4 bg-gray-700 rounded border border-gray-600'> <h3 class='font-bold text-lg text-blue-300'>${f.titulo} (${f.ano})</h3> <p class='text-xs text-gray-400 italic mb-1'>Gênero: ${f.genero}</p> <p class='text-sm text-gray-200'>${f.sinopse}</p> </div>`; }); } else { resultadoDiv.innerHTML = `<p class='text-red-500'>Erro: ${dados.erro}</p>`; } } catch (err) { resultadoDiv.innerHTML = `<p class='text-red-500'>Erro de rede: ${err.message}</p>`; } } </script> </body> </html>Este arquivo usa uma biblioteca de estilos externa para gerar um visual escuro limpo. A estrutura de scripts nativos consome os dados assincronamente, conforme detalhado nas páginas de suporte de desenvolvimento do site de tecnologia MDN Web Docs.
Você deve ver a estrutura HTML estruturada com as tags do Tailwind CSS e a função assíncrona JavaScript implementada no final do arquivo.
-
Instale as dependências e rode o projeto
Retorne para o seu terminal de comandos que está aberto no diretório raiz do projeto. Digite a diretiva de instalação do Python apresentada no bloco abaixo para carregar os pacotes essenciais de execução.
pip install flask openai python-dotenvAguarde a conclusão dos downloads e insira o comando de inicialização padrão no terminal de trabalho. O script local será acionado, subindo o servidor imediatamente.
python app.pyAbra o navegador do seu computador e insira o endereço local http://127.0.0.1:5000 na barra de pesquisa. Teste o funcionamento do sistema escrevendo frases sobre o seu dia no campo de texto principal da página.
Você deve ver o terminal exibindo a linha avisando que o servidor está rodando na porta 5000 localmente.
Erros mais comuns
Durante a montagem desse projeto local, algumas falhas de comunicação podem ocorrer. Tratar essas exceções de forma rápida poupa tempo precioso de trabalho e garante o funcionamento correto da sua interface.
Chave de API inválida ou incorreta
Este erro ocorre quando o arquivo .env contém espaços indesejados ou quando a credencial criada no portal de desenvolvimento foi apagada acidentalmente.
{"error":{"message":"Incorrect API key provided: sk-proj-***. You can find your API key at https://platform.openai.com/account/api-keys.","type":"invalid_request_error","param":null,"code":"invalid_api_key"}}
Para corrigir o problema, gere uma chave nova no painel da OpenAI e substitua todo o texto inserido no seu arquivo oculto local.
Módulo ou pacote Python não encontrado
Este erro de sistema acontece quando você tenta acionar o servidor web sem antes instalar as bibliotecas de dependência necessárias pelo terminal.
ModuleNotFoundError: No module named 'openai'
Para resolver a interrupção de carregamento do servidor, execute o comando pip install OpenAI no seu terminal antes de rodar o script Python app.py.
Estouro de limite de cota da API
Este problema de resposta surge quando a sua conta de testes consome todo o orçamento gratuito de tokens ou quando você esquece de adicionar créditos mínimos.
{"error":{"message":"You exceeded your current quota, please check your plan and billing details. For more information on this error, please visit https://platform.openai.com/docs/guides/error-codes.","type":"insufficient_quota","param":null,"code":"insufficient_quota"}}
Para contornar o bloqueio de requisições, acesse a sua carteira digital no portal administrativo da OpenAI e faça uma recarga de testes de baixo valor.
Quanto custa
O custo para manter esse recomendador ativo localmente é virtualmente nulo durante a fase de desenvolvimento privado. A OpenAI exige um depósito inicial mínimo de US$ 5,00 para liberar o uso das chaves de integração do modelo gpt-4o-mini. O preço por execução de requisição é extremamente econômico, custando cerca de US$ 0,15 por milhão de caracteres lidos pelo sistema.
Para disponibilizar esse aplicativo de filmes para outros usuários acessarem diretamente pela internet de forma ininterrupta, você precisará de servidores de hospedagem adicionais. A plataforma Render disponibiliza pacotes básicos de hospedagem em nuvem por aproximadamente US$ 7,00 mensais. Recomendo pesquisar os valores exatos de hospedagem e tarifas de consulta nas páginas de preços das plataformas, pois os custos podem sofrer reajustes sazonais.
Perguntas frequentes
Como eu coloco esse aplicativo de filmes para rodar direto no celular dos meus amigos?
Para disponibilizar o sistema em smartphones externos, você precisará enviar o seu código para servidores web de nuvem. Plataformas como o Render conectam-se ao seu repositório pessoal de arquivos e geram um endereço de acesso seguro iniciado com HTTPS. Seus amigos poderão acessar as recomendações diretamente digitando essa URL gerada no navegador de qualquer aparelho móvel.
Consigo mudar o prompt para criar um aplicativo de música que recomenda playlists?
Sim, o comportamento do robô é moldado integralmente pelas diretrizes inseridas na requisição de texto do servidor. Para adaptar o funcionamento para música, basta abrir o arquivo app.py e trocar as ordens contidas no prompt de filmes por instruções musicais. Você pode instruir a IA a indicar três músicas ou listas de reprodução baseadas no humor do usuário.
Dá para usar essa mesma estrutura de inteligência artificial para criar um aplicativo de jogos de perguntas e respostas?
Esta arquitetura serve como uma excelente base para criar aplicações de entretenimento baseadas em interações de texto dinâmicas. Você precisará ajustar as rotas do Flask para enviar perguntas geradas pelo modelo e avaliar as respostas enviadas pelo jogador nas rodadas seguintes. O ChatGPT consegue atuar como um mestre de jogos em tempo real retornando pontuações estruturadas.
Consigo integrar essa tecnologia em um sistema de fluxo de caixa da minha empresa?
É perfeitamente possível integrar essa mecânica para processar e categorizar dados financeiros e despesas empresariais de maneira automatizada. Ao enviar os dados brutos de transações no prompt, a inteligência artificial analisa o histórico de compras e organiza os lançamentos em tabelas limpas de fluxo de caixa. O retorno em JSON estruturado simplifica a gravação direta desses dados financeiros em bancos locais de armazenamento.
O que diferencia esse protótipo de um aplicativo profissional lançado nas lojas?
Um protótipo serve para testar funcionalidades de forma rápida e avaliar a viabilidade de uma ideia sem gastar muito tempo. Sistemas profissionais comercializados em lojas oficiais necessitam de recursos adicionais de segurança de dados para controle de contas e assinaturas de clientes. Eles também dependem de arquiteturas que permitem ao aplicativo interagir nativamente com sistemas operacionais de celulares.
Conclusão
Com esse método prático, você aprendeu como criar aplicativo com ChatGPT sem precisar digitar linhas complexas de código manualmente. O uso do Flask integrado às chamadas estruturadas de inteligência artificial encurta drasticamente o tempo necessário para tirar suas ideias do papel. Deixe um comentário contando qual tipo de ferramenta inteligente você quer programar a partir de agora!
Leia também
Receba um tutorial de automação por semana
Toda terça, um passo a passo testado por mim e o prompt exato que usei. Sem enrolação, sem spam.