Como criar aplicativo com chatgpt do absoluto zero

Neste tutorial prático, você vai aprender como criar aplicativo com ChatGPT. Vamos construir um gerador de roteiros de viagem funcional em Python. Para começar, você precisa apenas de um computador com acesso à internet, o editor VS Code instalado e uma chave de API da OpenAI.

O que você vai precisar

Conta de desenvolvedor ativa na plataforma oficial da OpenAI para gerar suas credenciais.
Editor de código instalado em seu computador para gerenciar os arquivos locais do sistema.
Ambiente local configurado com o interpretador documentação oficial do Python instalado na versão 3.10 ou superior.
Navegador de internet moderno para carregar e testar o painel visual da sua aplicação.
Tempo estimado de execução de 30 minutos seguindo todos os passos em tempo real.
Custo aproximado de US$ 5,00 para ativação de saldo mínimo de consumo na plataforma de inteligência artificial.

Passo a passo

Crie a pasta do projeto e configure o ambiente virtual de desenvolvimento

Inicie abrindo o terminal de comandos do seu sistema operacional para preparar o diretório de trabalho. Você deve criar uma pasta exclusiva para organizar todos os arquivos do script local. Use os comandos básicos do terminal para criar o diretório e acessar a pasta imediatamente.

A criação de um ambiente virtual isolado é um passo fundamental para evitar conflitos de versões entre as bibliotecas do sistema. Esse processo garante que todas as dependências adicionadas fiquem restritas apenas ao escopo deste projeto específico. Ative o ambiente local usando o script de inicialização correspondente ao seu sistema operacional.

Com o ambiente virtual devidamente ativado no terminal, execute o gerenciador de pacotes para instalar a estrutura do servidor web Flask. Instale também a biblioteca do cliente oficial e o gerenciador de arquivos de ambiente para carregar dados de configuração em segurança.
```
# Crie o diretório do projeto e mude para ele
mkdir gerador-roteiros
cd gerador-roteiros

# Crie o ambiente virtual isolado
python -m venv venv

# Ative o ambiente no Windows:
venv\Scripts\activate

# Ative o ambiente no macOS ou Linux:
source venv/bin/activate

# Instale os pacotes necessários para o sistema rodar
pip install flask openai python-dotenv
```
Ao final deste passo, você deve ver a indicação visual do ambiente ativo com o prefixo “(venv)” destacado antes do seu prompt de comando no terminal do VS Code.
Gere a sua chave de segurança pessoal no console da OpenAI

Abra o seu navegador de internet e acesse a sua conta de desenvolvedor no site oficial da plataforma. Localize o painel de configurações principais que gerencia as credenciais de autenticação externa para desenvolvedores de sistemas.

Navegue pelo menu lateral esquerdo do console e clique na opção “API keys” para abrir a tela de gerenciamento de tokens privados. Clique no botão de criação de novas chaves secretas, defina uma descrição simples para controle e finalize a geração clicando no botão de confirmação.

Copie imediatamente o código gerado que começa com os caracteres iniciais sk- e guarde-o temporariamente. Volte ao seu editor de código e crie um arquivo chamado `.env` na raiz da pasta do seu projeto. Cole o seu token privado dentro dele seguindo o modelo exato de variável de sistema.
```
# Arquivo de configuração de variáveis locais (.env)
OPENAI_API_KEY=sk-proj-InsiraAquiSuaChaveRealGeradaNoPainelDaOpenAiParaFuncionar
```
Ao final deste passo, você deve ver o arquivo chamado `.env` criado na raiz do seu projeto contendo a linha correspondente à sua chave de acesso sem espaços ou aspas.

Construa o servidor backend em Python utilizando o Flask

Crie um arquivo chamado `app.py` diretamente na raiz do diretório do seu aplicativo de roteiros. Este script será o cérebro do backend, responsável por receber os dados de entrada da interface do usuário e enviá-los de forma estruturada para o modelo de inteligência artificial.

Escreva a lógica de importação das dependências importando as rotas do Flask, as classes de comunicação do cliente e o carregador de dados de ambiente. Instancie o cliente de conexões utilizando a variável de ambiente que armazena a sua credencial secreta.

Configure a rota principal para renderizar a página inicial do sistema e a rota de processamento para realizar as requisições de texto. A chamada integrada efetuará uma consulta HTTP sob o capô enviando as informações exatas para a URL oficial da API da OpenAI.

# -*- coding: utf-8 -*-
import os
from flask import Flask, render_template, request, jsonify
from openai import OpenAI
from dotenv import load_dotenv

# Carrega a chave configurada no arquivo local .env
load_dotenv()

app = Flask(__name__)

# Inicializa o cliente oficial passando a credencial ativa
client = OpenAI(api_key=os.getenv("OPENAI_API_KEY"))

@app.route("/")
def index():
    return render_template("index.html")

@app.route("/gerar-roteiro", methods=["POST"])
def gerar_roteiro():
    dados = request.json
    cidade = dados.get("cidade")
    dias = dados.get("dias")
    
    if not cidade or not dias:
        return jsonify({"erro": "Dados incompletos fornecidos pelo cliente"}), 400
        
    prompt_completo = f"Crie um roteiro de viagem detalhado de {dias} dias para a cidade de {cidade}. Seja muito prático."
    
    try:
        # Requisição oficial para o endpoint de chat
        resposta = client.chat.completions.create(
            model="gpt-4o-mini",
            messages=[
                {"role": "system", "content": "Você é um especialista em turismo mundial."},
                {"role": "user", "content": prompt_completo}
            ]
        )
        conteudo_gerado = resposta.choices[0].message.content
        return jsonify({"roteiro": conteudo_gerado})
    except Exception as e:
        return jsonify({"erro": str(e)}), 500

if __name__ == "__main__":
    app.run(debug=True, port=5000)

Ao final deste passo, você deve ver o arquivo `app.py` preenchido e salvo no seu editor, sem marcações de erro ou linhas vermelhas sob a sintaxe.

Escreva a interface visual do usuário em HTML5 e CSS3

Crie uma nova pasta chamada `templates` na raiz do seu projeto para armazenar os arquivos de marcação visual que o Flask renderiza. Dentro dessa pasta, crie um arquivo chamado `index.html` para construir o formulário de entrada de dados.

Estruture a página HTML utilizando tags semânticas para manter o código limpo e de fácil leitura. Adicione estilos em folha de estilo CSS para estilizar os campos de entrada, o botão de envio e a caixa de exibição do roteiro de turismo de forma atraente.

Utilize a linguagem JavaScript com recursos modernos de comunicação assíncrona para enviar as requisições ao servidor de desenvolvimento local. A função de envio intercepta o formulário, extrai as informações dos campos, monta a estrutura JSON e exibe o texto de resposta na tela.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meu Assistente de Viagens</title>
    <style>
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; max-width: 650px; margin: 40px auto; padding: 20px; background-color: #f4f7f6; color: #333; }
        .container { background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
        .grupo-input { margin-bottom: 20px; }
        label { display: block; margin-bottom: 8px; font-weight: 600; color: #495057; }
        input { width: 100%; padding: 12px; font-size: 16px; border: 1px solid #ced4da; border-radius: 6px; box-sizing: border-box; }
        button { width: 100%; padding: 14px; font-size: 16px; background-color: #28a745; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; }
        button:hover { background-color: #218838; }
        #resultado { margin-top: 30px; padding: 20px; background: #e9ecef; border-left: 6px solid #28a745; border-radius: 4px; display: none; white-space: pre-wrap; font-size: 15px; }
    </style>
</head>
<body>
    <div class="container">
        <h2>Roteiro de Viagem Automatizado</h2>
        <div class="grupo-input">
            <label for="cidade">Qual cidade você deseja visitar?</label>
            <input type="text" id="cidade" placeholder="Ex: Paris">
        </div>
        <div class="grupo-input">
            <label for="dias">Por quantos dias pretende ficar?</label>
            <input type="number" id="dias" placeholder="Ex: 5" min="1" max="30">
        </div>
        <button onclick="solicitarRoteiro()">Consultar Inteligência Artificial</button>
        
        <div id="resultado"></div>
    </div>

    <script>
        async function solicitarRoteiro() {
            const cidade = document.getElementById('cidade').value;
            const dias = document.getElementById('dias').value;
            const divResultado = document.getElementById('resultado');
            
            if (!cidade || !dias) {
                alert('Por favor, preencha todos os campos do formulário.');
                return;
            }
            
            divResultado.style.display = 'block';
            divResultado.innerText = 'Consultando o guia turístico virtual... Por favor, aguarde...';
            
            try {
                const resposta = await fetch('/gerar-roteiro', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ cidade: cidade, dias: dias })
                });
                const dados = await resposta.json();
                
                if (dados.erro) {
                    divResultado.innerText = 'Ocorreu um erro no servidor: ' + dados.erro;
                } else {
                    divResultado.innerText = dados.roteiro;
                }
            } catch (erro) {
                divResultado.innerText = 'Falha ao conectar ao servidor local Flask.';
            }
        }
    </script>
</body>
</html>

Ao final deste passo, você deve ver o arquivo `index.html` salvo com a extensão correta dentro da estrutura de pastas do diretório `templates` do seu projeto.

Execute o seu servidor de desenvolvimento local para teste

Volte ao console do terminal integrado do VS Code que exibe o indicador ativo do seu ambiente de isolamento virtual. Digite o comando padrão de execução de scripts em Python informando o arquivo de controle do backend criado anteriormente.

Aguarde até que o Flask carregue todos os módulos de configuração necessários e inicie o servidor na sua máquina física. O sistema informará no console o endereço IP padrão de loopback de rede de desenvolvimento para testes locais.

Abra uma nova guia no navegador de internet do seu computador e digite o endereço de rede correspondente ao IP padrão local. Você verá a interface web do seu assistente de turismo carregada com os campos prontos para receberem dados.
```
# Comando para iniciar o servidor web integrado
python app.py
```
Ao final deste passo, você deve ver a saída de dados do servidor ativa no terminal exibindo a linha que aponta para o endereço local de teste http://127.0.0.1:5000 no navegador.
Utilize a ferramenta para gerar melhorias e novos recursos

Muitos desenvolvedores buscam entender na prática como criar aplicativo com ChatGPT. Esse processo se torna mais simples ao usar a engenharia de prompts correta.

Com a primeira versão funcional ativa e respondendo perfeitamente, você pode usar os comandos de prompts do chat para evoluir a sua aplicação local. Envie uma requisição estruturada solicitando novas melhorias visuais para o seu projeto.

Você pode pedir modificações rápidas copiando o código-fonte atual e colando diretamente na tela da interface de conversas da inteligência artificial. Copie o prompt exato apresentado abaixo para requisitar a inclusão de um botão de download de arquivos.
```
Aja como programador de software especialista em desenvolvimento web.
Tenho um arquivo HTML básico que interage com uma rota local do Flask.
Modifique a estrutura do código adicionando um botão de salvar em formato PDF.
Utilize uma biblioteca externa como a html2pdf diretamente via CDN.
Escreva apenas a nova estrutura completa do arquivo index.html atualizado.
```
Ao final deste passo, você deve ver a estrutura nova do script gerada pela interface inteligente pronta para ser colada no seu editor e testada imediatamente no seu navegador de internet.

Erros mais comuns

Ao realizar chamadas externas utilizando sistemas de requisições, erros de autenticação de tokens são ocorrências extremamente habituais. Isso acontece quando o arquivo `.env` não é carregado ou a chave foi digitada com caracteres ausentes.

{
  "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"
  }
}

O limite de consumo ou ausência de fundos na carteira de crédito para desenvolvedores gera interrupções automáticas nas requisições do sistema. Esse bloqueio ocorre diretamente na infraestrutura de servidores da empresa fornecedora de tecnologia de inteligência artificial.

{
  "error": {
    "message": "You exceeded your current quota, please check your plan and billing details.",
    "type": "insufficient_quota",
    "param": null,
    "code": "insufficient_quota"
  }
}

Iniciar o script do Flask com outro aplicativo já utilizando a mesma porta de comunicação de rede local gera um erro crítico de vinculação de soquete. Certifique-se de encerrar outros servidores em execução no terminal antes de reiniciar o seu sistema local de testes.

OSError: [WinError 10048] Only one usage of each socket address (protocol/network address/port) is normally permitted

Quanto custa

Desenvolver este tipo de sistema possui um custo de manutenção extremamente reduzido para testes locais. Você não paga absolutamente nada pelas ferramentas de escrita de código como o VS Code e pelas linguagens de programação instaladas.

O custo central está atrelado às requisições enviadas por tokens para a inteligência artificial. No plano pré-pago para desenvolvedores, você precisa realizar uma recarga de créditos mínima de US$ 5,00 na plataforma para liberar as chaves de requisição de forma contínua.

O modelo leve gpt-4o-mini custa em torno de US$ 0,15 por milhão de tokens enviados nas requisições. Isso significa que você pode fazer dezenas de milhares de testes práticos de geração de roteiros de viagem inteiros consumindo menos de US$ 1,00 do saldo recarregado.

Perguntas frequentes

Posso usar esse mesmo método para criar um aplicativo de filmes ou músicas?

Sim, você pode adaptar toda a estrutura do projeto alterando apenas as instruções textuais do prompt e o visual do formulário. Em vez de enviar o nome de uma cidade, configure a rota para receber gêneros cinematográficos ou estilos de músicas e peça sugestões de títulos diretamente ao modelo inteligente.

Como transformar esse projeto local em um daqueles aplicativos pro para colocar nas lojas?

Para construir uma versão comercial profissional e publicá-la nas lojas, você deve criar um aplicativo nativo usando estruturas como React Native ou Flutter. Você precisará de um servidor robusto de banco de dados e sistemas de login para evitar o uso indevido e descontrolado da sua chave financeira pessoal.

Dá para integrar sistemas de pagamentos ou gerenciadores como o aplicativo caixa do meu negócio?

Sim, é perfeitamente possível integrar plataformas de pagamento por Pix ou cartão de crédito como a API do Stripe ou do Mercado Pago em seu servidor Flask. Isso possibilita cobrar dos seus clientes finais taxas por cada consulta de inteligência artificial ou liberar assinaturas mensais de serviços.

É possível construir um aplicativo de jogos interativo utilizando esse fluxo?

Sim, você consegue criar aventuras em formato de texto onde a inteligência artificial narra os acontecimentos do cenário de forma dinâmica. O jogador envia as ações por campos de texto e o backend retorna os resultados, mantendo o histórico de jogo salvo em um arquivo local ou banco de dados estruturado.

Como criar uma automação segura sem expor a minha credencial privada?

Você nunca deve incluir chaves privadas diretamente no código do seu frontend ou em repositórios abertos na plataforma do GitHub. A prática recomendada de mercado é criar um backend intermediário, exatamente como o Flask construído neste guia, para ocultar as senhas no arquivo `.env` fora do alcance dos usuários.

Conclusão

A criação de microsserviços integrados com inteligência artificial se tornou extremamente rápida por meio do uso de modelos leves de processamento de texto. O ambiente construído neste guia serve como excelente ponto de partida para o desenvolvimento de soluções mais complexas de automação digital de tarefas.

Escreva um comentário abaixo relatando como foi a sua experiência na montagem deste primeiro projeto local de inteligência artificial!