Saltar para o conteúdo principal

Documentation Index

Fetch the complete documentation index at: https://docs.replit.com/llms.txt

Use this file to discover all available pages before exploring further.

​
Crie um blog com Notion usando o Replit Agent

O Notion é uma ferramenta poderosa para organizar informações e se destaca como um Sistema de Gerenciamento de Conteúdo (CMS). Ao integrar o Notion com o Replit, você pode gerenciar o conteúdo do seu site — como posts de blog, itens de portfólio ou listagens de produtos — diretamente do seu espaço de trabalho no Notion. O Replit, com o suporte do Replit Agent, cuida da programação, hospedagem e publicação, permitindo que você vá da ideia a um aplicativo publicado rapidamente. Criar prompts eficazes é fundamental para guiar o Agent; para um guia completo, consulte Prompting eficaz com o Replit AI e Como fazer vibe coding de forma eficaz. Este tutorial orienta você na criação de um blog minimalista que busca seus posts de uma tabela do Notion. Você irá:
  • Usar o Replit Agent para gerar o aplicativo inicial
  • Conectar seu app do Replit a um banco de dados do Notion
  • Aprender a guiar a IA e solucionar problemas comuns usando técnicas eficazes de prompting
  • Publicar seu blog para o mundo ver
Captura de tela do aplicativo de blog final com Notion, com design minimalista
O tutorial seguirá em grande parte o vídeo acima, mas com contexto e etapas adicionais para ajudá-lo a entender o processo.

​
Pré-requisitos

Para seguir este tutorial, você precisará de:
  • Uma conta no Replit
  • Uma conta no Notion
  • Familiaridade com as interações básicas do Replit Agent. Se você é novo no Agent, confira a documentação do Replit Agent.

​
Etapa 1: Prepare seu banco de dados no Notion

Antes de criar prompts para o Agent, configure sua fonte de conteúdo no Notion. Isso envolve pensar de forma procedural sobre o que seu blog precisa, semelhante ao planejamento de um produto.
1

Crie uma integração no Notion

  1. No Notion, vá para Configurações e membros (geralmente na barra lateral superior esquerda).
  2. Navegue até Conexões (anteriormente “Integrações”).
  3. Selecione Desenvolver ou gerenciar integrações.
  4. Selecione + Nova integração.
Portal do desenvolvedor do Notion mostrando o botão Nova integração
  1. Nomeie sua integração (ex.: “Minha Integração de Blog no Replit”).
  2. Associe-a ao espaço de trabalho desejado no Notion.
Tela de configuração de integração do Notion com nome e seleção de espaço de trabalho
  1. Para “Tipo de integração”, escolha Integração interna.
  2. Selecione Enviar.
  3. Copie seu Segredo de integração interna (token) e salve-o com segurança. Esta é sua chave de API do Notion.
Página de segredos de integração do Notion mostrando o token de integração
  1. Em Recursos, certifique-se de que “Ler conteúdo” está habilitado. Para este tutorial, apenas leitura é suficiente. Se posteriormente quiser gravar dados no Notion, habilite “Inserir conteúdo” e “Atualizar conteúdo”.
Crie uma nova integração para cada projeto para gerenciar permissões de forma granular. Esta é uma prática recomendada de segurança.
Para instruções mais detalhadas, consulte a documentação oficial do Notion sobre como criar uma integração.Você pode acessar diretamente o painel de integrações do Notion em notion.so/my-integrations.
2

Crie uma página do Notion com um banco de dados

  1. Crie uma nova página no Notion para o conteúdo do seu blog.
  2. Nesta página, adicione um novo banco de dados do tipo Tabela.
  3. Nomeie sua tabela (ex.: “Posts do Blog”).
  4. Defina colunas para seus posts. Especifique isso claramente em sua mente, pois em breve você contará ao Agent sobre elas:
    • Title (Texto, propriedade de título padrão)
    • Body (Texto, para o conteúdo principal do post)
    • Slug (Texto, para identificadores amigáveis para URL)
    • PublishedDate (Data, ou use “Hora de criação” / “Hora da última edição”)
    • ReadingTime (Texto ou Número, ex.: “5 min de leitura”)
    • Description (Texto, resumo curto para pré-visualizações)
Banco de dados do Notion configurado com colunas para posts de blog
  1. Adicione alguns posts de exemplo. Você pode usar os recursos de IA do Notion para ajudar a gerar conteúdo!
3

Conecte sua integração à página

  1. Abra a página do Notion que contém seu banco de dados.
  2. Clique no menu ••• (três pontos) no canto superior direito.
Menu de conexões do Notion mostrando como adicionar sua integração à página
  1. Selecione + Adicionar conexões.
  2. Pesquise e selecione a integração que você criou (ex.: “Minha Integração de Blog no Replit”).
Página do Notion mostrando o menu de três pontos para adicionar integrações
  1. Confirme a conexão. Isso permite que o Replit (via token de integração) acesse esta página e seu banco de dados.

​
Etapa 2: Crie prompts para o Replit Agent

Com o Notion configurado, vamos fazer o Replit Agent construir a base do nosso blog. Planeje antes de criar o prompt: um esboço claro dos recursos leva a prompts mais focados.
1

Abra o Replit Agent

Navegue até a página inicial do Replit e abra o Agent.
2

Escreva seu prompt

Forneça ao Agent um prompt detalhado. Simplifique sua linguagem, mas seja específico sobre requisitos, restrições e resultados desejados. Aqui está um exemplo:
Ajude-me a criar um blog extremamente minimalista usando o Notion como CMS.
O blog deve buscar posts de uma página do Notion.
A tabela na página do Notion tem as seguintes colunas: Title, Body, Slug, PublishedDate, ReadingTime, Description.
Você deve gerar um slug para cada post com base em seu título se a coluna Slug estiver vazia.
Deixe o tema do blog preto com texto branco. Mantenha-o extremamente minimal.
Os posts devem ser listados na página inicial, e clicar em um post deve navegar para uma página que exibe o conteúdo completo do post.
Para mais dicas sobre como criar prompts eficazes, consulte nosso guia sobre Prompting eficaz com o Replit AI. Você também pode mostrar ao Agent o que você quer fornecendo uma URL para raspar para ideias iniciais de estilo ou conteúdo (ex.: seu portfólio pessoal) adicionando: Raspe o conteúdo de [URL] para inspiração de design inicial e texto de espaço reservado.
O Agent gerará um plano. Revise-o para garantir que esteja alinhado com suas expectativas e, em seguida, aprove-o. Este é seu primeiro ponto de verificação no processo de construção assistido por IA.
3

Revise a pré-visualização inicial

O Agent então gerará uma pré-visualização visual. Verifique se o layout básico e o estilo estão indo na direção certa. Os ajustes virão depois.

​
Etapa 3: Conecte o Replit ao Notion com Secrets

O Agent provavelmente precisará dos seus dados de integração com o Notion para buscar dados.
1

Adicione Secrets no Replit

Normalmente, você precisará de:
  1. NOTION_API_KEY: Seu Segredo de integração interna da Etapa 1.
  2. NOTION_DATABASE_ID: O ID do seu banco de dados do Notion.
Como encontrar o ID do banco de dados do Notion:
  • Abra sua página do Notion com o banco de dados em um navegador.
  • A URL pode ser https://www.notion.so/seu-espaço-de-trabalho/TÍTULO_DA_PÁGINA-ID_DA_PÁGINA?v=ID_DA_VISUALIZAÇÃO_DO_BANCO_DE_DADOS. O ID_DA_PÁGINA geralmente é o ID do banco de dados se o banco de dados for o elemento principal da página.
  • De forma mais confiável: Clique no menu ••• na visualização do seu banco de dados, selecione Copiar link para a visualização e cole-o. O link https://www.notion.so/seu-espaço-de-trabalho/ID_DO_BANCO_DE_DADOS?v=ID_DA_VISUALIZAÇÃO contém o ID_DO_BANCO_DE_DADOS antes de ?v=.
Vá para a ferramenta Secrets (ícone 🔒) no Editor de projeto. Adicione estas informações:
  • Chave: NOTION_API_KEY, Valor: [Seu_Segredo_de_Integração_do_Notion]
  • Chave: NOTION_DATABASE_ID, Valor: [Seu_ID_do_Banco_de_Dados_do_Notion]
Ferramenta Secrets do Replit com chave API do Notion e ID do banco de dados adicionados
O Agent deve usar esses secrets automaticamente e tentar se conectar. O aplicativo provavelmente será reiniciado.

​
Etapa 4: Depurando e refinando com o Agent

Construir com IA é iterativo. Espere erros ou imperfeições. É aqui que guiar a IA de forma eficaz — muitas vezes chamado de “vibe coding” — é fundamental. Para uma análise mais aprofundada dessa habilidade, confira nosso tutorial sobre Como fazer vibe coding de forma eficaz. Domine o contexto fornecendo apenas informações relevantes para cada etapa de depuração.
Mantenha o Console no Editor de projeto aberto. Ele fornece mensagens de erro e logs valiosos.
Console do Replit mostrando mensagens de erro durante a depuração da integração com o Notion
Aqui estão cenários comuns e como abordá-los com depuração metódica:

​
Cenário 1: “Falha ao carregar posts” ou erros de propriedade

​
Sintoma

O aplicativo executa mas não exibe posts. Erros no Console podem mencionar “Não foi possível encontrar propriedade de classificação com o nome ID created_time” ou outras incompatibilidades de colunas.

​
Causa

O Agent pode assumir nomes de colunas ou propriedades (ex.: created_time para classificação) que não existem ou têm nomes diferentes no seu banco de dados do Notion.

​
Solução de problemas

  1. Verifique o Banco de Dados do Notion: Certifique-se de que os nomes das colunas no seu banco de dados correspondem exatamente às expectativas do Agent ou ao seu prompt. Se o Agent busca created_time e você tem PublishedDate, há uma incompatibilidade.
  2. Solicite ao Agent com o erro (princípio de Depuração): Copie o erro exato do console e selecione trechos de código relevantes se você os tiver identificado. Forneça este contexto focado ao Agent: 
    Há um erro ao buscar posts. Console: "Não foi possível encontrar propriedade de classificação com o nome ID created_time".
Meu banco de dados do Notion usa 'PublishedDate'. Use isso para classificação/busca. Aqui está o código suspeito de `services/notion.js`: [trecho de código]
  3. Itere (princípio de Experimentação): Se a correção do Agent falhar, forneça mais detalhes. “Posts ainda não carregando. Erro persiste. Mostre-me o código para buscar/classificar posts do Notion.” Se você adicionou uma coluna como created_time no Notion como uma solução rápida, pode posteriormente pedir ao Agent: “Remova a dependência de ‘created_time’, use ‘PublishedDate’ em vez disso.” Lembre-se de usar os Checkpoints do Agent para salvar estados funcionais.

​
Cenário 2: Exibição ou formatação incorreta de dados

​
Sintoma

Os dados aparecem, mas incorretamente (ex.: tempo de leitura errado na página inicial, mas correto na página do post; problemas de renderização do Markdown).

​
Solução de problemas

  1. Seja específico (princípio de Especificação): Descreva o problema e a localização claramente: 
    Na página inicial, o tempo de leitura do post está incorreto, mas está correto nas páginas de posts individuais.
Além disso, exiba 'PublishedDate' na página inicial para cada resumo de post.
  2. Problemas de Markdown (princípio de Demonstração): Se o Markdown “Body” do Notion renderizar incorretamente (ex.: espaços extras, erros de formatação):
    • Inspecione o conteúdo bruto no Notion; sua formatação pode introduzir caracteres sutis.
    • Solicite ao Agent claramente. Você pode até demonstrar um exemplo: 
      Problema de renderização do Markdown: No post X, texto em negrito como '**isso**' aparece como ' ** isso **' e não renderiza. Garanta que a análise do Markdown trate esses casos ou remova espaços em branco. Exemplo de renderização correta para negrito: **Isso é negrito**.
    • Testar com Markdown comprovadamente bom (ex.: do ChatGPT colado no Notion) pode isolar se o problema é nos dados de origem ou na lógica de renderização.

​
Fluxo geral de depuração

  1. Observe: Note o erro ou comportamento incorreto.
  2. Prompt de alto nível (Simplificar): Descreva o problema ao Agent claramente.
  3. Verifique o Console/DevTools (Depurar): Procure erros detalhados.
  4. Itere e forneça contexto (Selecionar, Demonstrar): Se a correção do Agent falhar, forneça mais contexto (mensagem de erro, código relevante, seu objetivo, tentativas feitas).
  5. Mudanças incrementais (Checkpoint): Peça ao Agent para corrigir uma coisa por vez. Use os Checkpoints no Agent para salvar o progresso.
  6. Reverter: Se os prompts piorarem as coisas, reverta para um Checkpoint funcionando e tente uma nova abordagem.
Não hesite em examinar o código gerado pelo Agent. Mesmo sem expertise no idioma, muitas vezes você pode identificar problemas lógicos ou entender o fluxo de dados, ajudando-o a escrever prompts melhores. Arquivos como notionService.js geralmente tratam chamadas à API do Notion.

​
Etapa 5: Melhorias adicionais

Assim que a funcionalidade principal funcionar, peça ao Agent para adicionar recursos. Use linguagem positiva e direta (princípio de Instrução). Aqui estão algumas ideias:
Peça ao Agent: “Implemente cache e pré-busca de posts do Notion para um site super-rápido.” Isso reduz as chamadas à API do Notion e acelera o carregamento das páginas.
Peça ao Agent: “Adicione um efeito de hover nos links de posts do blog na página inicial.” ou “Melhore a tipografia do post para melhor legibilidade.” Pequenos ajustes visuais melhoram significativamente a experiência do usuário. Você pode demonstrar ao Agent exemplos de estilos que você gosta.
Considere com que frequência buscar novos dados do Notion. Para blogs simples, no carregamento da página ou na reinicialização do servidor pode ser suficiente. Para conteúdo dinâmico, peça ao Agent: “Explore opções para atualizar automaticamente os posts do Notion a cada hora.” Isso pode envolver polling em segundo plano (adiciona complexidade, mas mantém o conteúdo atualizado).

​
Etapa 6: Publique seu site

Satisfeito com seu site? Hora de compartilhá-lo!
  1. Selecione Publicar no Editor de projeto (canto superior direito).
  2. Revise as configurações de publicação (nome do projeto, nível). Para mais detalhes, consulte Implantações.
  3. Selecione Publicar.
Interface de publicação do Replit mostrando como publicar seu site com Notion
O Replit constrói, agrupa e publica seu aplicativo em uma URL pública.

​
O que você aprendeu

Seguindo este tutorial, você aprendeu a:
  • Configurar o Notion como um CMS com uma integração e banco de dados estruturado
  • Criar prompts para o Replit Agent construir um aplicativo web conectado ao Notion, aplicando princípios como planejamento, especificação e simplificação
  • Gerenciar chaves de API com segurança usando Secrets do Replit
  • Depurar e refinar iterativamente um aplicativo gerado por IA usando técnicas como fornecer contexto, demonstrar exemplos e usar checkpoints
  • Publicar seu site com Notion no Replit
Para informações detalhadas sobre checkpoints e reversões, consulte Checkpoints e Reversões. Construir com IA como o Replit Agent é colaborativo. Pensamento procedural, instruções claras e depuração metódica são fundamentais para transformar ideias em realidade rapidamente.

​
Próximos passos

Continue desenvolvendo seu site com Notion:
Tente adicionar conteúdo diverso do Notion: galerias de imagens, vídeos incorporados ou itens categorizados.
Explore fórmulas, rollups e relações do Notion para estruturas de dados complexas. Trabalhe com o Agent para exibir esses dados ricos no seu site do Replit.
Aprimore seu aplicativo mesclando dados do Notion com outras ferramentas do Replit AI ou integrações do Agent. Por exemplo, use o Replit Auth para conteúdo privado ou o OpenAI para resumos gerados por IA a partir de dados do Notion no seu aplicativo.
Boas criações! Mal podemos esperar para ver o que você cria.