Maison >interface Web >js tutoriel >API de notion: démarrage avec le sdk javascript de la notion

API de notion: démarrage avec le sdk javascript de la notion

Lisa Kudrow
Lisa Kudroworiginal
2025-02-09 10:25:09654parcourir

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é:

  • exploite la notion ouverte Beta API et JavaScript SDK pour faciliter l'utilisation.
  • vous guide dans la configuration d'une base de données de notion, y compris la création de colonnes et l'ajout d'échantillons de données.
  • explique le processus de génération d'un jeton d'intégration pour l'accès à l'API sécurisé.
  • couvre à la fois le back-end (Node.js, express) et le développement frontal.
  • montre comment récupérer les données (nom, rôle) de votre base de données de notion.
  • Détails Configuration d'un serveur express pour gérer les demandes d'API et servir les données.
  • comprend des instructions sur l'ajout de nouvelles données à la base de données de notion via les appels API.

Configuration:

La configuration est divisée en notion et configuration de code.

Configuration de la notion:

  1. Créer un compte de notion (un niveau gratuit est disponible).
  2. Ajoutez une nouvelle page et sélectionnez le type de base de données "Table".
  3. Créer des colonnes (par exemple, "nom", "rôle") et les remplir avec des exemples de données.
  4. Accédez à la documentation de l'API de notion et créez une nouvelle intégration. Copiez le jeton d'intégration interne généré. IMPORTANT: Traitez ce jeton comme un mot de passe.
  5. Partagez votre base de données avec l'intégration nouvellement créée.

Notion API: Getting Started with Notion's JavaScript SDK

Configuration du code:

  1. Créer un répertoire de projet (mkdir notion-api-test).
  2. Initialiser un projet Node.js (npm init -y).
  3. Installez les packages nécessaires: npm install @notionhq/client dotenv express.
  4. Créez un fichier .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.
  5. Créer des fichiers 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.

Notion API: Getting Started with Notion's JavaScript SDK

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.

Notion API: Getting Started with Notion's JavaScript SDK

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn