So verwenden Sie die API von Notion mit React, um Daten in einer Notion-Datenbank zu speichern

Die Produktivitätsfunktionen von Notion werden sowohl bei Einzelpersonen als auch bei Unternehmen immer beliebter. Mit diesen Funktionen können Sie eine Vielzahl von Aufgaben verwalten, von der Speicherung personenbezogener Daten bis zur Verwaltung von Projektabläufen. Das Datenbanksystem von Notion macht dies möglich. Es bietet eine intuitive Benutzeroberfläche, mit der Sie ein anpassbares Content-Management-System erstellen können.

Notion bietet eine funktionsreiche API, die Sie einfach in jede Anwendung integrieren können, um mit ihrem Datenbanksystem zu interagieren. Darüber hinaus können Sie die bereitgestellte Funktionalität an die spezifischen Anforderungen Ihrer Anwendung anpassen.

Richten Sie eine Notion-Integration ein

Notion bietet mehrere Integrationen, mit denen Sie Inhalte oder Daten aus anderen Tools wie Google Docs direkt in eine Notion-Datenbank einfügen können. Für benutzerdefinierte Anwendungen müssen Sie jedoch benutzerdefinierte Integrationen mithilfe der öffentlichen API erstellen.

Führen Sie die folgenden Schritte aus, um eine Notion-Integration zu erstellen.

1. Geh 'rüber zu Die Integration von Notion Webseite, registrieren Sie sich und melden Sie sich bei Ihrem Konto an. Klicken Sie auf der Übersichtsseite der Integrationen auf Neue Integration einen neuen einzurichten.
2. Geben Sie einen Namen für Ihre Integration ein, überprüfen Sie, ob Sie die richtigen Einstellungen für die Integrationsfunktionen ausgewählt haben, und klicken Sie auf Einreichen. Diese Einstellungen definieren, wie Ihre Anwendung mit Notion interagiert.
3. Kopieren Sie das bereitgestellte geheime interne Integrationstoken und klicken Sie auf Änderungen speichern.

Erstellen Sie eine Begriffsdatenbank

Melden Sie sich mit Ihrer eingerichteten Integration bei Ihrer an Vorstellung Arbeitsbereich, um eine Datenbank für Ihre Anwendung zu erstellen. Befolgen Sie dann diese Schritte:

1. Drücke den Neue Seite Schaltfläche im linken Menübereich Ihres Notion-Arbeitsbereichs.
2. Geben Sie im Popup-Fenster den Namen Ihrer Datenbank und der von Notion eingerichteten Tabelle ein. Fügen Sie abschließend die gewünschten Felder zu Ihrer Tabelle hinzu, indem Sie auf drücken + Schaltfläche im Kopfbereich Ihrer Tabelle.
3. Klicken Sie dann auf die Als ganze Seite öffnen Schaltfläche, um die Datenbankseite zu erweitern, um die Seite zu füllen, und die Datenbank-ID auf der URL anzuzeigen.
4. Sie benötigen die Datenbank-ID, um von Ihrer React-Anwendung aus mit der Datenbank zu interagieren. Die Datenbank-ID ist die Zeichenfolge in der Datenbank-URL zwischen dem letzten Schrägstrich (/) und dem Fragezeichen (?).
5. Verbinden Sie abschließend die Datenbank mit Ihrer Integration. Dieser Prozess gewährt der Integration Zugriff auf die Datenbank, sodass Sie Daten in Ihrer Datenbank aus der React-Anwendung speichern und abrufen können.
6. Klicken Sie auf Ihrer Datenbankseite auf die drei Punkte in der oberen rechten Ecke, um das Datenbankeinstellungsmenü zu öffnen. Klicken Sie unten im seitlichen Menübereich auf Verbindungen hinzufügen Schaltfläche und suchen Sie nach Ihrer Integration und wählen Sie sie aus.

Erstellen Sie einen Express-Server

Notion stellt eine Client-Bibliothek bereit, die die Interaktion mit der API von einem Express-Backend-Server vereinfacht. Um es zu verwenden, erstellen Sie lokal einen Projektordner, ändern Sie das aktuelle Verzeichnis in diesen Ordner und Erstellen Sie einen express.js-Webserver.

Sie finden den Code dieses Projekts in seinerGitHub-Repository.

Als nächstes installieren Sie diese Pakete.

npm install @notionhq/client cors body-parser dotenv

Das CORS-Paket ermöglicht es dem Express-Backend und dem React-Client, Daten über die API-Endpunkte auszutauschen. Sie können das body-parser-Paket verwenden, um eingehende HTTP-Anforderungen zu verarbeiten. Sie parsen die JSON-Nutzdaten vom Client, rufen bestimmte Daten ab und stellen diese Daten als Objekt in der Eigenschaft req.body zur Verfügung. Schließlich ermöglicht das dotenv-Paket das Laden von Umgebungsvariablen aus a .env Datei in Ihrer Bewerbung.

Erstellen Sie im Stammverzeichnis des Serverordners eine .env-Datei und fügen Sie den folgenden Code hinzu:

NOTION_INTEGRATION_TOKEN = 'Ihr geheimes Token für die Integration'
NOTION_DATABASE_ID = 'Datenbank-ID'

Richten Sie den Express-Server ein

Öffne das index.js Datei im Serverprojektordner und fügen Sie diesen Code hinzu:

konst ausdrücken = erfordern('äußern');
konst {Kunde} = erfordern('@notionhq/client');
konst Kors = erfordern('kors');
konst bodyParser = erfordern('Body-Parser');
konst jsonParser = bodyParser.json();
konst port = process.env. HAFEN || 8000;
erfordern('dotenv').config();
konst app = ausdrücken ();
app.use (cors());
konst authToken = process.env. NOTION_INTEGRATION_TOKEN;
konst notionDbID = process.env. NOTION_DATABASE_ID;
konst Vorstellung = neu Klient ({Authentifizierung: authToken});
app.post('/NotionAPIPost', jsonParser, asynchron(req, res) => {
konst {Fullname, CompanyRole, Location} = req.body;
versuchen { 
konst Antwort = erwarten notion.pages.create({
 Elternteil: {
 database_id: notionDbID,
 },
 Eigenschaften: {
 Vollständiger Name: {
 Titel: [
 {
 Text: {
 Inhalt: Vollständiger Name
 },
 },
 ],
 },
 Unternehmensrolle: {
 rich_text: [
 {
 Text: {
 Inhalt: CompanyRolle
 },
 },
 ],
 },
 Standort: {
 rich_text: [
 {
 Text: {
 Inhalt: Standort
 },
 },
 ],
 },
 },
 });
 res.send (Antwort);
Konsole.Protokoll("Erfolg");
 } fangen (Fehler) {
Konsole.log (Fehler);
 }
});
app.get('/NotionAPIGet', asynchron(req, res) => {
versuchen { 
konst Antwort = erwarten notion.databases.query({
 database_id: notionDbID, 
 sortiert: [
 {
 Zeitstempel: 'created_time',
 Richtung: 'absteigend',
 },
 ]
 });
 res.send (Antwort);
konst {Ergebnisse} = Antwort;
Konsole.Protokoll("Erfolg");
 } fangen (Fehler) {
Konsole.log (Fehler);
 }
});
app.listen (port, () => {
Konsole.Protokoll('Server lauscht auf Port 8000!');
});

Dieser Code macht Folgendes:

• Die Client-Bibliothek von Notion bietet eine Möglichkeit, mit der API von Notion zu interagieren und verschiedene Operationen durchzuführen, wie z. B. das Lesen und Schreiben von Daten in Ihre Datenbank.
• Die Client-Methode erstellt eine neue Instanz des Notion-Objekts. Dieses Objekt wird mit einem Authentifizierungsparameter initialisiert, der ein Authentifizierungstoken akzeptiert, das Integrationstoken.
• Die beiden HTTP-Methoden – get und post – stellen Anforderungen an die API von Notion. Die post-Methode nimmt eine Datenbank-ID in ihren Header auf, die die Datenbank angibt, in die Daten unter Verwendung der create-Methode geschrieben werden sollen. Der Text der Anfrage enthält auch die Eigenschaften der neuen Seite: die zu speichernden Benutzerdaten.
• Die get-Methode fragt Benutzerdaten aus der Datenbank ab, ruft sie ab und sortiert sie nach ihrer Erstellungszeit.

Starten Sie schließlich den Entwicklungsserver mit Nodemon, der Node.js-Monitor:

npm starten

Richten Sie einen React-Client ein

Im Stammverzeichnis Ihres Projektordners Erstellen Sie eine React-Anwendung, und installieren Sie Axios. Sie verwenden diese Bibliothek, um HTTP-Anforderungen vom Browser zu stellen.

npm installiert Axios

Implementieren Sie die POST- und GET-API-Methoden

Öffne das src/App.js löschen Sie den Boilerplate-React-Code und ersetzen Sie ihn durch diesen Code:

importieren Reagieren, {useState} aus'reagieren';
importieren Axios aus'axios';
FunktionApp() {
konst [name, setName] = useState("");
konst [Rolle, SetRolle] = useState("");
konst [Standort, setLocation] = useState("");
konst [APIData, setAPIData] = useState([]);
konst handleSubmit = (e) => {
 e.preventDefault();
 Axios.post(' http://localhost: 8000/NotionAPIPost', {
 Vollständiger Name: Name,
 CompanyRole: Rolle,
 Standort: Standort
 }).fangen(Fehler => {
Konsole.log (Fehler);
 });
 Axios.get(' http://localhost: 8000/NotionAPIGet')
 .Dann(Antwort => {
 setAPIData (response.data.results);
Konsole.log (Antwort.Daten.Ergebnisse);
 }).fangen(Fehler => { 
Konsole.log (Fehler);
 }); 
 };
zurückkehren (

"App">
"App-Header">
"form">


Vorname</p>
 Typ="Text"
 Platzhalter="Vorname ..."
 onChange={(e) => {setName (e.target.value)}}
 />

Unternehmensrolle</p>
 Typ="Text"
 Platzhalter = "Rolle im Unternehmen..."
 onChange={(e) => {setRole (e.target.value)}}
 />

 Unternehmensrolle</p>
 Typ="Text"
 Platzhalter = "Standort..."
 onChange={(e) => {setLocation (e.target.value)}}
 />
"einreichen">Senden</button>
 </form>
 </div>

"Daten">
API-DATEN</p>
 {
 APIData.map((Daten) => {
zurückkehren (



Name: {data.properties. VollständigerName.Titel[0].plain_text}</p>

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

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




ExportStandard Anwendung;

Diese Komponente rendert ein Formular, mit dem ein Benutzer seinen Namen, seine Rolle und seine Standortinformationen übermitteln kann. Es verwendet den useState-Hook, um die Eingabewerte des Benutzers in Zustandsvariablen zu speichern, und sendet dann eine POST-Anforderung an eine serverseitige API, wobei die Informationen des Benutzers übergeben werden, sobald er auf die Schaltfläche „Senden“ klickt.

Nach erfolgreicher Übermittlung sendet dieser Code eine GET-Anforderung an dieselbe serverseitige API, um die soeben übermittelten Daten abzurufen. Schließlich ordnet es die abgerufenen Daten zu, die im Status gespeichert sind, und rendert sie im API-DATEN Abschnitt unterhalb des Formulars.

Drehen Sie den Entwicklungsserver von React hoch und gehen Sie zu http://localhost: 3000 in Ihrem Browser, um die Ergebnisse anzuzeigen.

Verwendung von Notion als Content-Management-System

Notion ist ein unglaublich vielseitiges Produktivitätstool, das neben der Datenspeicherung auch als Content-Management-System (CMS) für Ihre Anwendungen dienen kann. Sein flexibles Datenbanksystem bietet eine Reihe von Bearbeitungswerkzeugen und Verwaltungsfunktionen, die den Prozess der Verwaltung von Inhalten für Ihre Anwendung vereinfachen.