Como usar a API do Notion com o React para armazenar dados em um banco de dados do Notion

Os recursos de produtividade do Notion tornaram-se cada vez mais populares para indivíduos e organizações. Esses recursos permitem que você gerencie uma ampla gama de tarefas, desde o armazenamento de dados pessoais até o gerenciamento de fluxos de trabalho do projeto. O sistema de banco de dados da Notion torna isso possível. Ele fornece uma interface intuitiva para ajudá-lo a criar um sistema de gerenciamento de conteúdo personalizável.

O Notion fornece uma API rica em recursos que você pode integrar facilmente a qualquer aplicativo para interagir com seu sistema de banco de dados. Além disso, você pode personalizar a funcionalidade fornecida para atender às necessidades específicas de seu aplicativo.

Configurar uma integração de noção

O Notion fornece várias integrações que permitem adicionar conteúdo ou dados de outras ferramentas, como o Google Docs, diretamente em um banco de dados do Notion. No entanto, para aplicativos personalizados, você precisará criar integrações personalizadas usando sua API pública.

Para criar uma integração do Notion, siga estas etapas.

1. Dirija-se a Integração da noção página da Web, inscreva-se e faça login em sua conta. Na página de visão geral das integrações, clique em Nova Integração para configurar um novo.
2. Forneça um nome para sua integração, verifique se você selecionou as configurações corretas dos recursos de integração e clique em Enviar. Essas configurações definem como seu aplicativo interage com o Notion.
3. Copie o token de integração interno secreto fornecido e clique em Salvar alterações.

Criar um banco de dados de noção

Com sua integração configurada, faça login em seu Noção workspace para criar um banco de dados para seu aplicativo. Em seguida, siga estas etapas:

1. Clique no Nova página botão no painel de menu esquerdo do espaço de trabalho do Notion.
2. Na janela pop-up, forneça o nome do seu banco de dados e a tabela configurada pelo Notion. Por fim, adicione os campos necessários à sua tabela pressionando o botão + botão na seção de cabeçalho da sua tabela.
3. Em seguida, clique no Abrir como página inteira botão para expandir a página do banco de dados para preencher a página e exibir o ID do banco de dados na URL.
4. Você precisará do ID do banco de dados para interagir com o banco de dados do seu aplicativo React. O ID do banco de dados é a sequência de caracteres na URL do banco de dados entre a última barra (/) e o ponto de interrogação (?).
5. Por fim, conecte o banco de dados à sua integração. Este processo concede o acesso de integração ao banco de dados para que você possa armazenar e recuperar dados em seu banco de dados do aplicativo React.
6. Na página do seu banco de dados, clique no botão três pontos no canto superior direito para abrir o menu de configurações do banco de dados. Na parte inferior do painel lateral do menu, clique no botão Adicionar conexões botão e procure e selecione sua integração.

Criar um Servidor Expresso

O Notion fornece uma biblioteca cliente que facilita a interação com a API de um servidor Express de back-end. Para usá-lo, crie uma pasta de projeto localmente, altere o diretório atual para essa pasta e criar um servidor web express.js.

Você pode encontrar o código deste projeto em seuRepositório GitHub.

Em seguida, instale esses pacotes.

npm install @notionhq/client cors body-parser dotenv

O pacote CORS permite que o back-end do Express e o cliente React troquem dados por meio dos endpoints da API. Você pode usar o pacote body-parser para processar solicitações HTTP recebidas. Você analisará a carga JSON do cliente, recuperará dados específicos e disponibilizará esses dados como um objeto na propriedade req.body. Por fim, o pacote dotenv permite carregar variáveis ​​de ambiente de um .env arquivo em seu aplicativo.

No diretório raiz da pasta do servidor, crie um arquivo .env e adicione o código abaixo:

NOTION_INTEGRATION_TOKEN = 'seu token secreto de integração'
NOTION_DATABASE_ID = 'ID do banco de dados'

Configurar o Express Server

Abra o index.js arquivo na pasta do projeto do servidor e adicione este código:

const expresso = exigir('expressar');
const {Cliente} = exigir('@notionhq/cliente');
const cors = exigir('cors');
const bodyParser = exigir('analisador de corpo');
const jsonParser = bodyParser.json();
const port = process.env. PORTO || 8000;
exigir('dotenv').config();
const aplicativo = expresso();
app.use (cors());
const authToken = process.env. NOTION_INTEGRATION_TOKEN;
const notionDbID = process.env. NOTION_DATABASE_ID;
const noção = novo Cliente ({autenticação: authToken});
app.post('/NotionAPIPost', jsonParser, assíncrono(req, res) => {
const {Nome completo, CompanyRole, Localização} = req.body;
tentar { 
const resposta = aguardam noção.páginas.criar({
 pai: {
 database_id: notionDbID,
 },
 propriedades: {
 Nome completo: {
 título: [
 {
 texto: {
 conteúdo: nome completo
 },
 },
 ],
 },
 Função da Empresa: {
 rich_text: [
 {
 texto: {
 conteúdo: CompanyRole
 },
 },
 ],
 },
 Localização: {
 rich_text: [
 {
 texto: {
 conteúdo: Localização
 },
 },
 ],
 },
 },
 });
 res.enviar (resposta);
console.registro("sucesso");
 } pegar (erro) {
console.log (erro);
 }
});
app.get('/NotionAPIGet', assíncrono(req, res) => {
tentar { 
const resposta = aguardam notion.databases.query({
 database_id: notionDbID, 
 tipos: [
 {
 carimbo de data/hora: 'hora_criada',
 direção: 'descendente',
 },
 ]
 });
 res.enviar (resposta);
const {resultados} = resposta;
console.registro("sucesso");
 } pegar (erro) {
console.log (erro);
 }
});
app.listen (porta, () => {
console.registro('servidor escutando na porta 8000!');
});

Este código faz o seguinte:

• A biblioteca cliente do Notion fornece uma maneira de interagir com a API do Notion e executar várias operações, como ler e gravar dados em seu banco de dados.
• O método cliente cria uma nova instância do objeto Notion. Esse objeto é inicializado com um parâmetro auth que recebe um token de autenticação, o token de integração.
• Os dois métodos HTTP - get e post - fazem solicitações à API do Notion. O método post recebe um ID de banco de dados em seu cabeçalho, que especifica o banco de dados no qual gravar dados usando o método create. O corpo da solicitação também contém as propriedades da nova página: os dados do usuário a serem armazenados.
• O método get consulta e recupera os dados do usuário do banco de dados e os classifica de acordo com a hora em que foram criados.

Por fim, ative o servidor de desenvolvimento usando Nodemon, o monitor Node.js:

npm start

Configurar um cliente React

No diretório raiz da pasta do seu projeto, criar um aplicativo Reacte instale o Axios. Você usará essa biblioteca para fazer solicitações HTTP do navegador.

npm instalar axios

Implemente os métodos de API POST e GET

Abra o src/App.js arquivo, exclua o código padrão do React e substitua-o por este código:

importar Reagir, {useState} de'reagir';
importar Axios de'axios';
funçãoAplicativo() {
const [nome, setName] = useState("");
const [role, setRole] = useState("");
const [localização, setLocation] = useState("");
const [APIData, setAPIData] = useState([]);
const handleEnviar = (e) => {
 e.preventDefault();
 Axios.post(' http://localhost: 8000/NotionAPIPost', {
 Nome Completo: nome,
 CompanyRole: função,
 localização: localização
 }).pegar(erro => {
console.log (erro);
 });
 Axios.get(' http://localhost: 8000/NotionAPIGet')
 .então(resposta => {
 setAPIData (resposta.data.resultados);
console.log (resposta.data.resultados);
 }).pegar(erro => { 
console.log (erro);
 }); 
 };
retornar (

"Aplicativo">
"Cabeçalho do aplicativo">
"forma">


Nome</p>
 tipo="texto"
 espaço reservado ="Primeiro nome ..."
 onChange={(e) => {setName (e.target.value)}}
 />

Função da Empresa</p>
 tipo="texto"
 espaço reservado = "Papel da empresa..."
 onChange={(e) => {setRole (e.target.value)}}
 />

 Função da Empresa</p>
 tipo="texto"
 espaço reservado = "Localização..."
 onChange={(e) => {setLocation (e.target.value)}}
 />
"enviar">Enviar</button>
 </form>
 </div>

"Dados">
DADOS DA API</p>
 {
 APIData.map((dados) => {
retornar (



Nome: {data.properties. Nome completo.título[0].plain_text}</p>

Função: {data.properties. CompanyRole.rich_text[0].plain_text}</p>

Localização: {data.properties. Localização.rich_text[0].plain_text}</p> 
 </div>
 )
 })
 }
 </div>
 </header>
 </div>
 );
}




exportarpadrão Aplicativo;

Este componente renderiza um formulário que permite que um usuário envie seu nome, função e informações de localização. Ele usa o gancho useState para armazenar os valores de entrada do usuário em variáveis ​​de estado e, em seguida, faz uma solicitação POST para uma API do lado do servidor, passando as informações do usuário assim que ele pressiona o botão enviar.

Após o envio bem-sucedido, esse código faz uma solicitação GET para a mesma API do lado do servidor para recuperar os dados que acabou de enviar. Por fim, mapeia os dados recuperados, armazenados no estado e os renderiza no DADOS DA API seção abaixo do formulário.

Gire o servidor de desenvolvimento do React e vá para http://localhost: 3000 no seu navegador para ver os resultados.

Usando o Notion como um sistema de gerenciamento de conteúdo

O Notion é uma ferramenta de produtividade incrivelmente versátil que, além do armazenamento de dados, pode servir como um sistema de gerenciamento de conteúdo (CMS) para seus aplicativos. Seu sistema de banco de dados flexível fornece um conjunto de ferramentas de edição e recursos de gerenciamento que simplificam o processo de gerenciamento de conteúdo para seu aplicativo.