Picture of Por: Claudio Andrade
Por: Claudio Andrade

Full Stack Developer

Voltar Lição 1

 

Aqui tá o passo a passo de como chamar o GPT da OpenAI direto de uma função Firebase.

1. 🔐 Pegue sua API Key da OpenAI

2. 📁 Estrutura básica do projeto

				
					functions/
  ├── index.js
  ├── package.json

3. package.json

				
					{
  "name": "functions",
  "dependencies": {
    "axios": "^1.6.0",
    "firebase-functions": "^4.0.0",
    "firebase-admin": "^11.0.0"
  }
}

4. index.js – Chamada ao GPT-4 via OpenAI

				
					const functions = require('firebase-functions');
const axios = require('axios');

const OPENAI_API_KEY = "SUA_CHAVE_SECRETA"; // Substitua aqui

exports.gerarRoteiro = functions.https.onRequest(async (req, res) => {
  const { destino, perfil } = req.body;

  try {
    const resposta = await axios.post('https://api.openai.com/v1/chat/completions', {
      model: "gpt-4",
      messages: [
        { role: "system", content: "Você é um especialista em viagens." },
        { role: "user", content: `Crie um roteiro de 3 dias para um turista com perfil ${perfil} visitando ${destino}.` }
      ],
      temperature: 0.8
    }, {
      headers: {
        'Authorization': `Bearer ${OPENAI_API_KEY}`,
        'Content-Type': 'application/json'
      }
    });

    const roteiro = resposta.data.choices[0].message.content;
    res.status(200).send({ roteiro });

  } catch (error) {
    console.error("Erro:", error.response?.data || error.message);
    res.status(500).send({ erro: "Erro ao gerar roteiro com OpenAI" });
  }
});

5. 🚀 Deploy no Firebase

				
					firebase deploy --only functions

6. 🧪 Teste com curl ou Postman

				
					curl -X POST https://SUA-URL-FIREBASE.cloudfunctions.net/gerarRoteiro \
  -H "Content-Type: application/json" \
  -d '{"destino": "Recife", "perfil": "histórico e gastronômico"}'

Exemplo:

Uma agencia de viagem chamada Vaitour com uma tela bonita que:

  1. Pede o destino e o perfil do turista,

  2. Chama tua função Firebase com OpenAI por trás,

  3. Mostra o roteiro gerado como se fosse um guia de luxo. Codigo completo

🖼️ Tela bonitinha pro Vaitour (HTML + JS)

Aqui tá um exemplo de página bem clean:

👨🏻‍🏫 Resultado

Ele vai te cuspir um roteiro lindão, dia por dia, com dicas personalizadas. Tipo um agente de viagens com QI de 200.

				
					<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Vaitour - Roteiro Personalizado</title>
  <style>
    body { font-family: sans-serif; background: #f2f2f2; padding: 20px; }
    h1 { color: #333; }
    input, select, button {
      padding: 10px;
      margin: 10px 0;
      width: 100%;
      max-width: 400px;
      font-size: 16px;
    }
    #roteiro { white-space: pre-wrap; background: #fff; padding: 20px; border-radius: 8px; margin-top: 20px; box-shadow: 0 0 10px #ccc; }
  </style>
</head>
<body data-rsssl=1>

  <h1>Monte seu roteiro com o Vaitour 🧳</h1>

  <input type="text" id="destino" placeholder="Digite o destino (ex: Recife)" />
  <select id="perfil">
    <option value="">Escolha o perfil do viajante</option>
    <option>gastronômico</option>
    <option>histórico</option>
    <option>praieiro</option>
    <option>natureza</option>
    <option>cultural</option>
    <option>romântico</option>
  </select>

  <button onclick="gerarRoteiro()">Gerar roteiro ✈️</button>

  <div id="roteiro"></div>

  <script>
    async function gerarRoteiro() {
      const destino = document.getElementById("destino").value;
      const perfil = document.getElementById("perfil").value;
      const roteiroDiv = document.getElementById("roteiro");
      roteiroDiv.innerHTML = "Gerando roteiro... Aguarde ⏳";

      try {
        const resposta = await fetch("https://SUA-URL-FIREBASE.cloudfunctions.net/gerarRoteiro", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ destino, perfil })
        });

        const dados = await resposta.json();
        roteiroDiv.innerHTML = `<h2>Seu Roteiro:</h2><p>${dados.roteiro}</p>`;
      } catch (err) {
        roteiroDiv.innerHTML = "Erro ao gerar roteiro 😥";
        console.error(err);
      }
    }
  </script>

</body>
</html>

Veja como ficaria no seu site usando o código acima.

Vaitour - Roteiro Personalizado

Monte seu roteiro com o Vaitour 🧳

Gostou! Se de tudo certo, deixe o seu comentários abaixo. Ou se precisar de ajuda, pode postar abaixo tambem.  

Quer que eu te ajude integre isso direto com o Google Sites?

Se caso queria, poste abaixo ou visite o meu canal em video no classeline.

Você quer subir o exemplo da Vaitour, num servidor próprio?

Sim! Quero usar no meu servidor 

Ou você quer usar um servidor de teste da Cobrasi NetWork

Sim! Quero usar no meu servidor de teste gratuito da Cobrasi NetWork