Comment utiliser l’API de Notion avec React pour stocker des données dans une base de données Notion.

Les fonctions de productivité de Notion ont en fait fini par être significativement préférées tant par les personnes que par les organisations. Ces attributs vous permettent de prendre en charge un vaste éventail de tâches, du stockage des données individuelles à la prise en charge des flux de travail des projets. Le système de base de données d’Idea rend cela possible. Il fournit une interface intuitive pour vous aider à créer un système d’administration de contenu web personnalisé.

Notion fournit une API riche en fonctionnalités que vous pouvez rapidement intégrer à tout type d’application pour vous connecter à son système de source de données. En outre, vous pouvez personnaliser la fonctionnalité donnée pour répondre aux exigences particulières de votre application.

Configurer une intégration de Notion

Notion fournit un certain nombre d’intégrations qui vous permettent d’inclure du matériel ou des informations provenant d’autres outils tels que Google Docs directement dans une base de données Notion. Néanmoins, pour les applications sur mesure, vous devrez développer des assimilations sur mesure en utilisant son API publique.

Pour développer une assimilation Notion, adhérez à ces étapes.

  1. Rendez-vous sur L’intégration de Notion site web, inscrivez-vous, ainsi que connectez-vous à votre compte. Sur la page web d’aperçu des combinaisons, cliquez sur Nouvelle intégration pour en établir une toute nouvelle.
  2. Donnez un nom à votre combinaison, vérifiez que vous avez choisi les configurations des capacités d’assimilation appropriées et cliquez sur. Soumettre. Ces configurations spécifient exactement comment votre application s’engage avec Notion.
  3. Copiez le token secret d’intégration interne donné et cliquez sur. Enregistrer les modifications.

Créez une base de données Notion

Avec votre combinaison mise en place, connectez-vous à votre Notion espace de travail pour développer une base de données pour votre application. Après cela, conformez-vous à ces actions :

  1. Cliquez sur le bouton Nouvelle page sur le volet de sélection alimentaire gauche de votre espace de travail Notion.
  2. Dans la fenêtre pop-up, fournissez le nom de votre source de données et la table établie par Notion. Enfin, incluez les zones que vous appelez à votre tableau en appuyant sur le bouton + sur la zone d’en-tête de votre tableau.
  3. Ensuite, cliquez sur le bouton Ouvrir en pleine page pour développer la page web de la base de données afin de charger la page, et vérifier l’ID de la source de données sur l’URL.
  4. Vous aurez besoin de l’ID de la source de données pour interagir avec la source de données depuis votre application React. L’ID de la base de données est la chaîne de caractères dans l’URL de la source de données entre le dernier bas avant (/) et le point d’interrogation ( ?).
  5. Enfin, connectez la base de données à votre intégration. Ce processus accorde à la combinaison l’accès à la source de données afin que vous puissiez conserver et également récupérer des informations sur votre base de données à partir de l’application React.
  6. Sur votre page de source de données, cliquez sur le bouton trois points dans le coin supérieur droit pour ouvrir le menu des paramètres de la source de données. Au bas du volet latéral du menu, cliquez sur le bouton Ajouter des connexions et recherchez et aussi sélectionnez votre combinaison.
Voir aussi :  Map-Reduce vs. Aggregation Pipeline dans MongoDB

Créez un serveur express

Notion propose une bibliothèque client qui permet de se connecter simplement à l’API à partir d’un serveur web Express dorsal. Pour l’utiliser, développez un dossier de travail dans votre zone, modifiez le site du répertoire actuel vers ce dossier, et produisez un serveur internet express.js.

Vous pouvez localiser le code de ce projet dans sa base de données GitHub.

Ensuite, installez ces bundles.

Le plan CORS permet au backend Express ainsi qu’au client React d’échanger des informations via les points de terminaison de l’API. Vous pouvez utiliser le bundle body-parser pour traiter les requêtes HTTP entrantes. Vous analyserez le flux JSON du client, récupérerez certaines données, et rendrez ces données facilement disponibles en tant qu’objet dans le home req.body. Enfin, le bundle dotenv rend faisable le chargement de variables d’atmosphère à partir d’un. env fichier dans votre application.

Dans le répertoire d’origine du dossier du serveur, développez les documents a.env, et incluez également le code indiqué ci-dessous :

Configurez le serveur Express

Ouvrez le index. js data dans le dossier du projet du serveur, ainsi que d’ajouter ce code :

Ce code fait ce qui suit :

  • La collection client de Notion fournit un moyen de communiquer avec l’API de Notion et d’effectuer de nombreuses procédures, telles que l’analyse ainsi que la création d’informations vers votre source de données.
  • La technique client développe une nouvelle circonstance de l’élément Notion. Cet élément est démarré avec un critère d’authentification qui prend un jeton d’authentification, le jeton d’intégration.
  • Les 2 méthodes HTTP – obtain ainsi que upload – font des demandes à l’API de Notion. La méthode post absorbe un ID de source de données dans son en-tête qui définit la source de données pour créer des informations directement en utilisant la méthode create. Le corps de la demande comporte en outre les propriétés résidentielles ou commerciales de la toute nouvelle page : les informations de l’utilisateur pour faire des achats.
  • La méthode obtain interroge ainsi que récupère les données de l’utilisateur à partir de la source de données, ainsi que les types en fonction du moment où ils ont été créés.
Voir aussi :  Comment faire un mapping sur un tableau imbriqué dans un composant React.

Enfin, faites tourner le serveur de développement à l’aide de Nodemon, l’afficheur Node.js :

Configurez un client React

Dans le site du répertoire racine de votre dossier de projet, développez une application React, et installez Axios. Vous utiliserez cette bibliothèque pour faire des demandes HTTP à partir du navigateur web.

Implémentez les méthodes POST ainsi que GET de l’API.

Ouvrez le src/ App.js documents, supprimez le code React boilerplate, et remplacez-le par ce code :

Cet élément fournit un type qui permet à un individu d’envoyer son nom, son rôle et les détails de sa zone. Il utilise le crochet useState pour enregistrer les valeurs d’entrée de l’utilisateur dans des variables d’état, puis fait une demande POST à une API côté serveur, en transmettant les détails de l’individu une fois qu’il appuie sur le commutateur de soumission.

Après la soumission effective, ce code fait une demande GET à l’exacte même API côté serveur pour récupérer les informations qu’il a simplement soumises. Enfin, il mappe sur les données obtenues, stockées dans l’état, ainsi que les rend dans l’API. DONNÉES API listée sous le genre.

Faites tourner le serveur web de croissance de React et rendez-vous également sur http://localhost:3000 sur votre navigateur web pour voir les résultats.

Voir aussi :  Comment réutiliser la logique dans Vue.js avec les composables

Utilisation de Notion comme système de gestion de contenu

Notion est un outil de productivité incroyablement fonctionnel qui, outre le stockage d’informations, peut fonctionner comme un système de gestion de matériel (CMS) pour vos applications. Son système de source de données polyvalent donne un ensemble d’outils d’édition et aussi des fonctions d’administration qui rationalisent le processus de traitement du contenu web pour votre application.

Abonnez-vous à notre bulletin d’information

Comment intégrer l’API dans Notion ?

Faites votre première requête à l’API de Notion. Vous pouvez utiliser l’API de Notion pour étendre les pages et les bases de données dans les outils que vous utilisez tous les jours.

  • Étape 1 : créez une intégration.
  • Étape 2 : partagez une base de données avec votre intégration.
  • Étape 3 : Enregistrez l’identifiant de la base de données.
  • Étape 4 : Ajoutez un élément à la base de données.

Que puis-je faire avec l’API de Notion ?

L’API permet une interaction programmatique avec les bases de données, les pages et le contenu de Notion. Cela se fait par le biais d’une série de points de terminaison – des endroits où l’API communique et travaille avec Notion pour collecter et organiser les informations provenant d’autres sources (comme les apps).

Comment enregistrer une base de données dans Notion ?

Appuyez sur l’icône Notion, donnez un titre à la page que vous enregistrez, choisissez l’espace de travail et la page/base de données auxquels vous voulez l’ajouter, puis appuyez sur Enregistrer .

Comment faire un lien vers une base de données dans Notion ?

Créer une base de données liée

  • Appuyez sur le + qui apparaît dans la marge de gauche au survol, ou tapez /lien et appuyez sur la touche entrée .
  • Un menu s’affiche qui vous permet de taper pour rechercher des bases de données spécifiques dans votre espace de travail. Vous pouvez également faire défiler pour parcourir.
Cliquez pour évaluer cet article !
[Total: Moyenne : ]

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *