> ## 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 site com Notion
> Aprenda a criar um site que usa o Notion como Sistema de Gerenciamento de Conteúdo (CMS) com o Replit Agent.
export const YouTubeEmbed = ({videoId, title = "YouTube video", startAt}) => {
if (!videoId) {
return null;
}
let url = "https://www.youtube.com/embed/" + videoId;
if (startAt) {
url = url + "?start=" + startAt;
}
return
;
};
## 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](/references/agent/overview), 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](/learn/effective-prompting) e [Como fazer vibe coding de forma eficaz](/learn/build-with-agent).
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
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](/references/agent/overview).
## 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. 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**.
5. Nomeie sua integração (ex.: "Minha Integração de Blog no Replit").
6. Associe-a ao espaço de trabalho desejado no Notion.
7. Para "Tipo de integração", escolha **Integração interna**.
8. Selecione **Enviar**.
9. Copie seu **Segredo de integração interna** (token) e salve-o com segurança. Esta é sua chave de API do Notion.
10. 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](https://developers.notion.com/docs/create-a-notion-integration).
Você pode acessar diretamente o painel de integrações do Notion em [notion.so/my-integrations](https://notion.so/my-integrations).
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)
5. Adicione alguns posts de exemplo. Você pode usar os recursos de IA do Notion para ajudar a gerar conteúdo!
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.
3. Selecione **+ Adicionar conexões**.
4. Pesquise e selecione a integração que você criou (ex.: "Minha Integração de Blog no Replit").
5. 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.
Navegue até a página inicial do Replit e abra o **Agent**.
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:
```text theme={null}
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](/learn/effective-prompting).
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.
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.
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]`
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](/learn/build-with-agent). **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.
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:
```text theme={null}
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:
```text theme={null}
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:
```text theme={null}
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](/learn/projects-and-artifacts/replit-deployments).
3. Selecione **Publicar**.
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](/references/version-control/checkpoints-and-rollbacks).
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](/build/welcome) ou [integrações do Agent](/references/integrations/overview). 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.