Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation. En savoir plus.

Les fonctionnalités de productivité de Notion sont devenues de plus en plus populaires auprès des particuliers et des organisations. Ces fonctionnalités vous permettent de gérer un large éventail de tâches, du stockage des données personnelles à la gestion des flux de travail du projet. Le système de base de données de Notion rend cela possible. Il fournit une interface intuitive pour vous aider à créer un système de gestion de contenu personnalisable.

Notion fournit une API riche en fonctionnalités que vous pouvez facilement intégrer dans n'importe quelle application pour interagir avec son système de base de données. De plus, vous pouvez personnaliser les fonctionnalités fournies pour répondre aux besoins spécifiques de votre application.

Configurer une intégration de notion

Notion fournit plusieurs intégrations qui vous permettent d'ajouter du contenu ou des données provenant d'autres outils tels que Google Docs directement dans une base de données Notion. Cependant, pour les applications personnalisées, vous devrez créer des intégrations personnalisées à l'aide de son API publique.

instagram viewer

Pour créer une intégration Notion, procédez comme suit.

  1. Dirigez-vous vers Intégration de la notion page Web, inscrivez-vous et connectez-vous à votre compte. Sur la page de présentation des intégrations, cliquez sur Nouvelle intégration pour en créer un nouveau.
  2. Donnez un nom à votre intégration, vérifiez que vous avez sélectionné les paramètres des fonctionnalités d'intégration corrects, puis cliquez sur Soumettre. Ces paramètres définissent la façon dont votre application interagit avec Notion.
  3. Copiez le jeton d'intégration interne secret fourni et cliquez sur Sauvegarder les modifications.

Créer une base de données notionnelle

Une fois votre intégration configurée, connectez-vous à votre Notion espace de travail pour créer une base de données pour votre application. Ensuite, suivez ces étapes :

  1. Clique le Nouvelle page dans le volet de menu de gauche de votre espace de travail Notion.
  2. Dans la fenêtre contextuelle, indiquez le nom de votre base de données et la table configurée par Notion. Enfin, ajoutez les champs dont vous avez besoin à votre table en appuyant sur le + bouton dans la section d'en-tête de votre tableau.
  3. Ensuite, cliquez sur le Ouvrir en pleine page pour développer la page de la base de données afin de remplir la page et afficher l'ID de la base de données sur l'URL.
  4. Vous aurez besoin de l'ID de la base de données pour interagir avec la base de données à partir de votre application React. L'ID de base de données est la chaîne de caractères dans l'URL de la base de données entre la dernière barre oblique (/) et le point d'interrogation (?).
  5. Enfin, connectez la base de données à votre intégration. Ce processus accorde à l'intégration l'accès à la base de données afin que vous puissiez stocker et récupérer des données sur votre base de données à partir de l'application React.
  6. Sur votre page de base de données, cliquez sur le trois points dans le coin supérieur droit pour ouvrir le menu des paramètres de la base de données. Au bas du volet latéral du menu, cliquez sur le Ajouter des connexions et recherchez et sélectionnez votre intégration.

Créer un serveur express

Notion fournit une bibliothèque client qui facilite l'interaction avec l'API à partir d'un serveur Express backend. Pour l'utiliser, créez un dossier de projet localement, remplacez le répertoire actuel par ce dossier et créer un serveur web express.js.

Vous pouvez trouver le code de ce projet dans sonRéférentiel GitHub.

Ensuite, installez ces packages.

npm install @notionhq/client cors body-parser dotenv

Le package CORS permet au backend Express et au client React d'échanger des données via les points de terminaison de l'API. Vous pouvez utiliser le package body-parser pour traiter les requêtes HTTP entrantes. Vous allez analyser la charge utile JSON du client, récupérer des données spécifiques et rendre ces données disponibles en tant qu'objet dans la propriété req.body. Enfin, le package dotenv permet de charger des variables d'environnement à partir d'un .env fichier dans votre application.

Dans le répertoire racine du dossier du serveur, créez un fichier .env et ajoutez le code ci-dessous :

NOTION_INTEGRATION_TOKEN = 'votre jeton secret d'intégration'
NOTION_DATABASE_ID = 'identifiant de la base de données'

Configurer le serveur express

Ouvrez le index.js fichier dans le dossier du projet du serveur et ajoutez ce code :

constante exprimer = exiger('exprimer');
constante {Client} = exiger('@notionhq/client');
constante cors = exiger('cors');
constante bodyParser = exiger('analyseur de corps');
constante jsonParser = bodyParser.json();
constante port = processus.env. PORT || 8000;
exiger('dotenv').config();
constante app = express();
app.use (cors());


constante authToken = processus.env. NOTION_INTEGRATION_TOKEN ;
constante notionDbID = process.env. NOTION_DATABASE_ID ;
constante idée = nouveau Client ({authentification: authToken});


app.post('/NotionAPIPost', jsonParser, asynchrone(req, res) => {
constante {Fullname, CompanyRole, Location} = req.body ;


essayer { 
constante réponse = attendre notion.pages.create({
 parent: {
 id_base de données: notionDbID,
 },
 propriétés: {
 Nom et prénom: {
 titre: [
 {
 texte: {
 contenu: nom complet
 },
 },
 ],
 },
 Rôle de l'entreprise: {
 texte riche: [
 {
 texte: {
 contenu: CompanyRole
 },
 },
 ],
 },
 Emplacement: {
 texte riche: [
 {
 texte: {
 contenu: Emplacement
 },
 },
 ],
 },
 },
 });


 res.send (réponse);
console.enregistrer("succès");
 } attraper (erreur) {
console.log (erreur);
 }
});


app.get('/NotionAPIGet', asynchrone(req, res) => {
essayer { 
constante réponse = attendre notion.databases.query({
 id_base de données: notionDbID, 
 sortes: [
 {
 horodatage: 'créé_heure',
 direction: 'descendant',
 },
 ]
 });


 res.send (réponse);
constante {résultats} = réponse ;
console.enregistrer("succès");
 } attraper (erreur) {
console.log (erreur);
 }
});
app.listen (port, () => {
console.enregistrer('serveur en écoute sur le port 8000!');
});

Ce code effectue les opérations suivantes :

  • La bibliothèque client de Notion offre un moyen d'interagir avec l'API de Notion et d'effectuer diverses opérations, telles que la lecture et l'écriture de données dans votre base de données.
  • La méthode client crée une nouvelle instance de l'objet Notion. Cet objet est initialisé avec un paramètre auth qui prend un jeton d'authentification, le jeton d'intégration.
  • Les deux méthodes HTTP, get et post, envoient des requêtes à l'API de Notion. La méthode post prend un ID de base de données dans son en-tête qui spécifie la base de données dans laquelle écrire des données à l'aide de la méthode create. Le corps de la requête contient également les propriétés de la nouvelle page: les données utilisateur à stocker.
  • La méthode get interroge et récupère les données utilisateur de la base de données et les trie en fonction de l'heure à laquelle elles ont été créées.

Enfin, lancez le serveur de développement à l'aide de Nodemon, le moniteur Node.js:

début npm

Configurer un client React

Dans le répertoire racine de votre dossier de projet, créer une application React, et installez Axios. Vous utiliserez cette bibliothèque pour effectuer des requêtes HTTP à partir du navigateur.

npm installer axios

Implémenter les méthodes API POST et GET

Ouvrez le src/App.js fichier, supprimez le code passe-partout React et remplacez-le par ce code :

importer Réagissez, { useState} depuis'réagir';
importer Axios depuis'axios';
fonctionApplication() {
constante [nom, setName] = useState("");
constante [rôle, setRole] = useState("");
constante [emplacement, setLocation] = useState("");
constante [APIData, setAPIData] = useState([]);


constante handleSubmit = (e) => {
 e.preventDefault();


 Axios.post(' http://localhost: 8000/NotionAPIPost', {
 Nom complet: nom,
 CompanyRole: rôle,
 Emplacement: emplacement
 }).attraper(erreur => {
console.log (erreur);
 });


 Axios.get(' http://localhost: 8000/NotionAPIGet')
 .alors(réponse => {
 setAPIData (response.data.results);
console.log (response.data.results);
 }).attraper(erreur => { 
console.log (erreur);
 }); 
 };


retour (


"Application">
"App-header">
"former">


Prénom</p>


 taper="texte"
 espace réservé="Prénom ..."
 onChange={(e) => {setName (e.target.value)}}
 />




Rôle de l'entreprise</p>


 taper="texte"
 espace réservé = "Rôle de l'entreprise..."
 onChange={(e) => {setRole (e.target.value)}}
 />




 Rôle de l'entreprise</p>


 taper="texte"
 espace réservé = "Emplacement..."
 onChange={(e) => {setLocation (e.target.value)}}
 />






"Données">
DONNÉES API</p>
 {
 APIData.map((données) => {
retour (




Nom: {data.properties. Nom complet.titre[0].plain_text}</p>


Rôle: {data.properties. CompanyRole.rich_text[0].plain_text}</p>


Emplacement: {data.properties. Emplacement.rich_text[0].plain_text}</p> 
 </div>
 )
 })
 }
 </div>
 </header>
 </div>
 );
}










exporterdéfaut application ;

Ce composant rend un formulaire qui permet à un utilisateur de soumettre son nom, son rôle et ses informations de localisation. Il utilise le crochet useState pour stocker les valeurs d'entrée de l'utilisateur dans des variables d'état, puis envoie une requête POST à ​​une API côté serveur, en transmettant les informations de l'utilisateur une fois qu'il a appuyé sur le bouton d'envoi.

Une fois la soumission réussie, ce code envoie une requête GET à la même API côté serveur pour récupérer les données qu'il vient de soumettre. Enfin, il cartographie les données récupérées, stockées dans l'état, et les restitue dans le DONNÉES API sous le formulaire.

Faites tourner le serveur de développement de React et dirigez-vous vers http://localhost: 3000 sur votre navigateur pour afficher les résultats.

Utiliser Notion comme système de gestion de contenu

Notion est un outil de productivité incroyablement polyvalent qui, outre le stockage de données, peut servir de système de gestion de contenu (CMS) pour vos applications. Son système de base de données flexible fournit un ensemble d'outils d'édition et de fonctionnalités de gestion qui simplifient le processus de gestion du contenu de votre application.