Maison >interface Web >js tutoriel >API de notion: démarrage avec le sdk javascript de la notion
Cet article montre la création d'une interface simple pour connecter votre base de données de notion à une application personnalisée à l'aide de l'API de notion et de JavaScript. Aucune connaissance préalable n'est requise, mais la familiarité avec le développement frontal et back-end (Node.js et Express) est utile. Le code complet est disponible sur github.
Caractéristiques de clé:
Configuration:
La configuration est divisée en notion et configuration de code.
Configuration de la notion:
Configuration du code:
mkdir notion-api-test
). npm init -y
). npm install @notionhq/client dotenv express
. .env
pour stocker vos NOTION_API_KEY
et NOTION_API_DATABASE
(votre ID de base de données à partir de l'URL de notion). Ajouter .env
à votre .gitignore
. index.js
et server.js
(voir les exemples de code ci-dessous). Modifiez la section "scripts"
de package.json
pour démarrer le serveur avec node server
.
Tirer les données:
Le fichier index.js
utilise le SDK @notionhq/client
pour interagir avec l'API de notion. Une fonction asynchrone, getDatabase
, interroge la base de données et renvoie des données formatées.
Express Server:
Le fichier server.js
configure un serveur express pour gérer les demandes d'API. La route /users
utilise getDatabase
pour récupérer les données et les envoyer en JSON. Le express.static
middleware sert des fichiers statiques du répertoire public
.
Affichage des données:
Le front-end (public/index.html
, public/style.css
, public/main.js
) récupère les données de /users
, itére à travers elle et l'affiche dynamiquement sur la page.
Ajout de données:
Un formulaire est ajouté à l'avant pour permettre aux utilisateurs d'ajouter de nouvelles entrées. La route /submit-form
dans server.js
utilise la fonction newEntryToDatabase
(dans index.js
) pour créer de nouvelles pages dans la base de données de notion.
Améliorations supplémentaires:
Envisagez d'ajouter une gestion des erreurs, du chargement des indicateurs et de la conversion de l'application en une application à une seule page pour améliorer les performances.
Cette réponse révisée fournit un aperçu plus concis et organisé du tutoriel, tout en conservant les informations et les images clés. N'oubliez pas de remplacer les valeurs d'espace réservé par votre clé API et votre ID de base de données.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!