Como criar aplicativo com ChatGPT sem saber programar

Neste tutorial prático, você vai aprender como criar aplicativo com ChatGPT partindo do absoluto zero. Você construirá uma aplicação funcional de recomendação de filmes em apenas 40 minutos usando ferramentas gratuitas instaladas no seu próprio computador, sem precisar digitar uma única linha de código manualmente.

O que você vai precisar

Editor de Código: Visual Studio Code instalado no seu computador.
Ambiente de Execução: Python instalado globalmente no seu sistema operacional.
Conta na Inteligência Artificial: Uma conta ativa no OpenAI.com para acessar o ChatGPT.
Navegador Web: Google Chrome ou Mozilla Firefox para testar o aplicativo localmente.
Tempo estimado: 40 minutos.
Custo aproximado: R$ 0 (todas as ferramentas necessárias possuem planos ou licenças totalmente gratuitas).

Passo a passo

Prepare o ambiente e instale os programas necessários

Para construir seu projeto, você precisa de um interpretador para rodar o código e de um editor para salvar os arquivos no computador. Acesse o site oficial de documentação e download do Python em docs.Python.org e baixe a versão estável mais recente para o seu sistema operacional. Durante a instalação do Python, marque a caixa de seleção com o rótulo “Add Python.exe to PATH” antes de clicar no botão “Install Now”. Em seguida, faça o download do editor de código Visual Studio Code e instale-o com as configurações padrão recomendadas.

Você deve ver a tela inicial do Visual Studio Code aberta com o painel de boas-vindas ativo no centro do monitor.
Crie a estrutura de pastas e arquivos locais

Você precisa organizar as pastas do seu projeto exatamente como o servidor web espera para conseguir ler os arquivos. Crie uma pasta principal na Área de Trabalho do seu computador chamada “app-filmes”. Abra o Visual Studio Code, vá no menu superior, clique em “File” e depois selecione “Open Folder”. Navegue até a Área de Trabalho, selecione a pasta “app-filmes” e clique em “Selecionar pasta”. No painel esquerdo do editor de código, clique no ícone de novo arquivo e crie o arquivo “app.py”. Em seguida, crie o arquivo “requirements.txt”. Por fim, crie uma pasta chamada “templates” e, dentro dela, crie um arquivo chamado “index.html”.

Você deve ver a seguinte estrutura de arquivos renderizada exatamente assim no painel esquerdo do Visual Studio Code:
```
app-filmes/
├── app.py
├── requirements.txt
└── templates/
    └── index.html
```

Gere o código do servidor com o ChatGPT

Aprender como criar aplicativo com ChatGPT exige apenas atenção às etapas de configuração dos arquivos. Abra o navegador, acesse a sua conta no ChatGPT e envie o comando exato que define as regras e comportamentos do servidor Python do seu aplicativo. Copie e cole o seguinte comando na barra de mensagens do chat:

Crie o código de um servidor web usando Python e a biblioteca Flask para um aplicativo recomendador de filmes.
O arquivo deve se chamar app.py.
Crie uma rota principal '/' que renderiza o arquivo index.html usando render_template.
Crie uma rota de API sob o endpoint '/api/recomendacoes' que aceite requisições GET com um parâmetro chamado 'genero'.
Se o gênero for 'acao', retorne um JSON com uma lista de 3 filmes de ação contendo nome, ano, sinopse e link_imagem da API de fotos públicas https://picsum.photos.
Crie dados semelhantes para os gêneros 'comedia' e 'drama'.
Ative o modo de depuração para rodar na porta 5000 do localhost.
Escreva apenas o código Python completo do arquivo app.py, sem textos adicionais explicativos.

O ChatGPT gerará o código que gerencia as recomendações e serve as páginas web. Copie todo o código gerado pelo robô e cole-o no arquivo “app.py” que você criou no Visual Studio Code. O código gerado deve ser idêntico a este:

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

filmes_database = {
    "acao": [
        {"nome": "Mad Max: Estrada da Fúria", "ano": 2015, "sinopse": "Um guerreiro do deserto se une a uma guerreira rebelde para escapar de um tirano.", "link_imagem": "https://picsum.photos/id/12/400/250"},
        {"nome": "John Wick: De Volta ao Jogo", "ano": 2014, "sinopse": "Um assassino aposentado busca vingança contra os criminosos que destruíram sua vida.", "link_imagem": "https://picsum.photos/id/15/400/250"},
        {"nome": "Inception", "ano": 2010, "sinopse": "Um ladrão que invade os sonhos das pessoas para roubar segredos corporativos enfrenta sua última missão.", "link_imagem": "https://picsum.photos/id/26/400/250"}
    ],
    "comedia": [
        {"nome": "Superbad: É Hoje", "ano": 2007, "sinopse": "Dois amigos de infância enfrentam as dificuldades de comprar bebidas para uma festa de formatura.", "link_imagem": "https://picsum.photos/id/42/400/250"},
        {"nome": "Se Beber, Não Case!", "ano": 2009, "sinopse": "Três amigos acordam em Las Vegas sem nenhuma memória da noite anterior e sem o noivo.", "link_imagem": "https://picsum.photos/id/64/400/250"},
        {"nome": "Gente Grande", "ano": 2010, "sinopse": "Amigos de infância se reúnem com suas famílias para passar o fim de semana do feriado de julho.", "link_imagem": "https://picsum.photos/id/88/400/250"}
    ],
    "drama": [
        {"nome": "O Show de Truman", "ano": 1998, "sinopse": "Um vendedor de seguros descobre que toda a sua vida é um reality show transmitido para o mundo.", "link_imagem": "https://picsum.photos/id/92/400/250"},
        {"nome": "Clube da Luta", "ano": 1999, "sinopse": "Um trabalhador de escritório deprimido e um fabricante de sabão carismático criam um clube secreto.", "link_imagem": "https://picsum.photos/id/102/400/250"},
        {"nome": "Interestelar", "ano": 2014, "sinopse": "Uma equipe de exploradores viaja através de um buraco de minhoca no espaço para garantir a sobrevivência humana.", "link_imagem": "https://picsum.photos/id/119/400/250"}
    ]
}

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

@app.route('/api/recomendacoes', methods=['GET'])
def obter_recomendacoes():
    genero = request.args.get('genero', 'acao')
    recomendacoes = filmes_database.get(genero, filmes_database['acao'])
    return jsonify(recomendacoes)

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

Você deve ver o código Python totalmente colado no arquivo “app.py”, exibindo as cores de realce de sintaxe azul, amarela e verde típicas do editor.

Crie a interface visual responsiva com Tailwind CSS

Agora você precisa definir a aparência estética que o usuário final vai acessar. Abra o arquivo vazio “index.html” localizado na pasta “templates”. Acesse o ChatGPT no seu navegador e envie este prompt exato para gerar a interface do usuário:

Crie o arquivo HTML completo chamado index.html para ser salvo dentro da pasta templates.
Use o framework Tailwind CSS importado via CDN para aplicar um layout com fundo escuro moderno.
O título principal da página deve ser 'Recomendador de Filmes Inteligente'.
Adicione três botões centralizados e proeminentes com os rótulos 'Ação', 'Comédia' e 'Drama'.
Crie uma área de exibição onde os cartões de filmes recomendados serão gerados dinamicamente com JavaScript.
Escreva um script nativo com fetch assíncrono que busca as recomendações no endpoint '/api/recomendacoes?genero=NOME_DO_GENERO'.
Quando a resposta JSON chegar, renderize os cartões com as fotos, o título, o ano e a sinopse na tela de forma responsiva.
Não insira nenhuma dependência de build complexa. Retorne apenas o código HTML legível.

A ferramenta de inteligência artificial escreverá o documento de marcação integrado com requisições assíncronas assentes na Web API. Para conhecer mais sobre a manipulação moderna de páginas web e a sintaxe do JavaScript, visite o repositório técnico de referência em developer.mozilla.org. Copie o HTML produzido pelo ChatGPT e cole-o diretamente no arquivo “templates/index.html”:

<!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 Inteligente</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-950 text-slate-100 font-sans min-h-screen flex flex-col items-center py-12 px-4">
    <header class="text-center max-w-2xl mb-12">
        <h1 class="text-4xl md:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-violet-400 to-indigo-500 mb-4">
            Recomendador de Filmes Inteligente
        </h1>
        <p class="text-slate-400 text-lg">Escolha um gênero cinematográfico abaixo para descobrir produções selecionadas instantaneamente.</p>
    </header>

    <main class="w-full max-w-6xl flex flex-col items-center">
        <div class="flex flex-wrap justify-center gap-4 mb-12">
            <button onclick="buscarFilmes('acao')" class="bg-violet-600 hover:bg-violet-700 transition duration-200 text-white font-bold px-8 py-3 rounded-full shadow-lg hover:shadow-violet-500/20">
                Ação
            </button>
            <button onclick="buscarFilmes('comedia')" class="bg-indigo-600 hover:bg-indigo-700 transition duration-200 text-white font-bold px-8 py-3 rounded-full shadow-lg hover:shadow-indigo-500/20">
                Comédia
            </button>
            <button onclick="buscarFilmes('drama')" class="bg-blue-600 hover:bg-blue-700 transition duration-200 text-white font-bold px-8 py-3 rounded-full shadow-lg hover:shadow-blue-500/20">
                Drama
            </button>
        </div>

        <div id="container-filmes" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full">
            <!-- Os cartões de filmes serão renderizados aqui dinamicamente -->
        </div>
    </main>

    <footer class="mt-16 text-slate-600 text-sm">
        Criado com inteligência artificial usando Python Flask e Tailwind CSS.
    </footer>

    <script>
        async function buscarFilmes(genero) {
            const container = document.getElementById('container-filmes');
            container.innerHTML = `
                <div class="col-span-full flex justify-center py-12">
                    <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-violet-500"></div>
                </div>
            `;

            try {
                const resposta = await fetch(`/api/recomendacoes?genero=${genero}`);
                const dados = await resposta.json();
                container.innerHTML = '';

                dados.forEach(filme => {
                    const cardHTML = `
                        <div class="bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden hover:border-violet-500/40 transition duration-300 shadow-xl">
                            <img class="w-full h-48 object-cover object-center" src="${filme.link_imagem}" alt="${filme.nome}">
                            <div class="p-6">
                                <div class="flex items-center justify-between mb-3">
                                    <h3 class="text-xl font-bold text-slate-100 truncate pr-2">${filme.nome}</h3>
                                    <span class="bg-slate-800 text-violet-400 text-xs font-semibold px-2.5 py-1 rounded-md">${filme.ano}</span>
                                </div>
                                <p class="text-slate-400 text-sm leading-relaxed">${filme.sinopse}</p>
                            </div>
                        </div>
                    `;
                    container.innerHTML += cardHTML;
                });
            } catch (erro) {
                container.innerHTML = `
                    <p class="text-red-400 text-center col-span-full py-8 font-semibold">
                        Falha ao carregar as recomendações de filmes. Tente novamente mais tarde.
                    </p>
                `;
            }
        }

        // Carrega filmes de ação por padrão ao abrir a página
        window.onload = () => buscarFilmes('acao');
    </script>
</body>
</html>

Você deve ver o código estruturado do arquivo “templates/index.html” preenchido com as seções do cabeçalho, da grade de exibição e os códigos em JavaScript.

Instale as dependências externas usando o terminal

O seu servidor Python precisa do pacote Flask para rodar como um servidor web local. Abra o arquivo “requirements.txt” no Visual Studio Code e salve a seguinte linha exata especificando a versão estável da dependência:
```
Flask==3.0.2
```
No menu superior do Visual Studio Code, selecione “Terminal” e depois clique em “New Terminal”. No rodapé da tela do editor, o painel de linha de comando será inicializado de maneira integrada. Digite o seguinte comando exato de instalação e pressione a tecla Enter:
```
pip install -r requirements.txt
```
Você deve ver o terminal exibir várias linhas de progresso de download e finalizar com a confirmação “Successfully installed Flask-3.0.2” destacada na base do terminal.
Rode o aplicativo e teste no navegador

Com o código salvo e as dependências devidamente integradas na pasta local, é hora de rodar o seu robô. No mesmo terminal integrado que você usou no passo anterior, digite o seguinte comando de inicialização e aperte Enter:
```
python app.py
```
Acesse o navegador Google Chrome no seu computador. Clique na barra de endereços do seu navegador, digite o endereço local `http://127.0.0.1:5000` e pressione Enter para acessar o site localmente do seu disco rígido.

Você deve ver uma página web estilizada com fundo roxo escuro contendo o título “Recomendador de Filmes Inteligente” e três cartões com pôsteres dinâmicos de filmes de ação carregados na tela principal do navegador.

Erros mais comuns

Ao executar o fluxo de desenvolvimento pela primeira vez em seu computador, o ambiente local pode disparar falhas de caminhos ou de dependências em falta. Veja as três falhas recorrentes e como corrigi-las de imediato.

1. Comando de execução do Python não reconhecido no sistema operacional: Esse problema ocorre quando o instalador do Python não adicionou os executáveis de caminho nas variáveis de sistema do computador. Você verá essa linha de erro no seu terminal:

'python' is not recognized as an internal or external command, operable program or batch file.

Para resolver isso, você deve desinstalar o Python atual e reinstalá-lo novamente, lembrando de marcar a caixa obrigatória intitulada “Add Python.exe to PATH” localizada bem no início do instalador do utilitário.

2. Erro de biblioteca do Flask não encontrada no ambiente virtual: Esse aviso é exibido quando a instalação do pacote principal não foi executada na raiz onde o comando está buscando referências. Você verá esta mensagem de log no terminal:

ModuleNotFoundError: No module named 'flask'

Para corrigir o erro de importação, certifique-se de que o terminal do Visual Studio Code está aberto na pasta exata “app-filmes” e repita o comando de terminal run `pip install Flask` de maneira direta para carregar os recursos locais do pacote.

3. Erro de porta já em uso no sistema operacional: Essa pane clássica ocorre se você tentar rodar o servidor duas vezes na mesma pasta, ou se houver outro programa ocupando o canal de rede padrão localhost do Flask. Você verá o seguinte rastro de erro:

OSError: [WinError 10013] An attempt was made to access a socket in a way forbidden by its access permissions

Para resolver o bloqueio de rede local, abra o arquivo “app.py” e mude a porta de execução na última linha alterando o parâmetro da função `app.run` de `port=5000` para `port=8080` e execute novamente no seu terminal.

Quanto custa

Desenvolver este aplicativo é totalmente acessível porque você roda a aplicação na sua própria máquina de desenvolvimento. Os custos se dividem entre a fase de criação, que ocorre no seu hardware, e a infraestrutura necessária se você decidir publicar o recomendador na web para o público.

ChatGPT: A versão do plano gratuito com o modelo GPT-4o mini custa R$ 0 por mês. Se você optar pelo plano pago ChatGPT Plus para ter mais velocidade e suporte para geração de imagens profissionais dos filmes de forma nativa, o valor de custo fica em torno de US$ 20 por mês.
Visual Studio Code e Python: Licenciamento aberto e com custo de R$ 0 para sempre.
Hospedagem na Web (Opcional): Se você quiser compartilhar a sua criação com os seus amigos através de um link público na internet, precisará contratar um servidor na nuvem. Existem provedores excelentes para este fim. O plano pago mais barato de servidores virtuais na nuvem para hospedar scripts Python no render.com ou no pythonanywhere.com fica em torno de US$ 5 por mês. Certifique-se de conferir as tabelas de preços oficiais atualizadas nas páginas desses serviços, pois essas taxas mudam periodicamente de acordo com as flutuações das moedas estrangeiras.

Perguntas frequentes

Consigo transformar esse recomendador em um aplicativo de filmes completo com reprodução de vídeo?

Sim, você pode expandir essa mesma estrutura. No entanto, precisará trocar a base de dados em memória do arquivo “app.py” por conexões reais com APIs externas de bancos de dados de cinema, além de integrar tocadores de mídia de terceiros compatíveis dentro do arquivo “index.html”.

Como posso adaptar esse modelo para criar um aplicativo de música ou playlists?

Basta trocar os nomes das chaves na base de dados fictícia de “acao” ou “comedia” para gêneros como “rock”, “pop” ou “jazz”. Ajuste o script JavaScript dentro de “templates/index.html” para receber links do reprodutor do Spotify e tocar as faixas selecionadas diretamente pelo navegador do computador.

Dá para usar essa mesma lógica para criar um aplicativo de jogos simples ou quiz?

Perfeitamente. O seu arquivo “app.py” passa a funcionar enviando perguntas e alternativas corretas em formato JSON para a rota de frontend. O arquivo “index.html” renderiza uma pergunta por vez e valida as respostas do jogador, acumulando pontuações em tempo real.

O que diferencia um protótipo local de aplicativos pro lançados nas lojas como Google Play?

Aplicações comerciais de alto nível, conhecidas como aplicativos pro, exigem bancos de dados estruturados na nuvem, segurança de tokens, gerenciamento de contas de usuários e compilação do código em pacotes para Android e iOS. Esse fluxo de protótipo ensina a lógica central de comunicação que esses sistemas mais avançados utilizam.

É possível criar um aplicativo de fluxo de caixa para controle financeiro usando o ChatGPT?

Sim. Você pode pedir ao ChatGPT para gerar um código em Python com persistência em arquivos locais para armazenar entradas e saídas financeiras. A interface web mostrará tabelas de somas, campos de entrada de valores e gráficos simples de despesas usando bibliotecas visuais gratuitas em JavaScript.

Conclusão

Seguindo este guia, você comprovou que é perfeitamente viável tirar uma ideia do papel e construir uma aplicação web funcional conectada a rotas dinâmicas do servidor local sem saber escrever linhas de programação complexas do zero. O uso guiado de prompts direcionados transforma a inteligência artificial em um parceiro técnico completo de criação de softwares.

O que você achou dessa experiência de criar o recomendador? Conte nos comentários aqui embaixo qual gênero de filme ou novo recurso você conseguiu adicionar no seu código!