Hoe de API van Notion te gebruiken met React om gegevens op te slaan in een Notion-database

De productiviteitsfuncties van Notion zijn steeds populairder geworden voor zowel individuen als organisaties. Met deze functies kunt u een breed scala aan taken beheren, van het opslaan van persoonlijke gegevens tot het beheren van projectworkflows. Het databasesysteem van Notion maakt dit mogelijk. Het biedt een intuïtieve interface waarmee u een aanpasbaar contentmanagementsysteem kunt maken.

Notion biedt een feature-rijke API die u eenvoudig kunt integreren in elke toepassing om te communiceren met het databasesysteem. Bovendien kunt u de aangeboden functionaliteit aanpassen aan de specifieke behoeften van uw toepassing.

Stel een notie-integratie in

Notion biedt verschillende integraties waarmee u inhoud of gegevens van andere tools zoals Google Docs rechtstreeks aan een Notion-database kunt toevoegen. Voor op maat gemaakte applicaties moet u echter aangepaste integraties maken met behulp van de openbare API.

Volg deze stappen om een ​​Notion-integratie te maken.

1. Ga naar De integratie van Notion webpagina, meld u aan en log in op uw account. Klik op de overzichtspagina van de integraties Nieuwe integratie om een ​​nieuwe op te zetten.
2. Geef een naam op voor uw integratie, controleer of u de juiste instellingen voor integratiemogelijkheden hebt geselecteerd en klik Indienen. Deze instellingen definiëren hoe uw toepassing met Notion omgaat.
3. Kopieer het verstrekte geheime interne integratietoken en klik Wijzigingen opslaan.

Maak een notiedatabase

Als uw integratie is ingesteld, logt u in op uw Begrip werkruimte om een ​​database voor uw toepassing te maken. Volg dan deze stappen:

1. Klik op de Nieuwe pagina knop in het linkermenuvenster van uw Notion-werkruimte.
2. Geef in het pop-upvenster de naam op van uw database en de tabel die door Notion is ingesteld. Voeg tot slot de velden die u nodig heeft toe aan uw tabel door op te drukken + knop in het kopgedeelte van uw tabel.
3. Klik vervolgens op de Openen als volledige pagina knop om de databasepagina uit te vouwen om de pagina te vullen en de database-ID op de URL te bekijken.
4. U hebt de database-ID nodig om vanuit uw React-toepassing met de database te communiceren. De database-ID is de tekenreeks in de database-URL tussen de laatste schuine streep (/) en het vraagteken (?).
5. Koppel ten slotte de database aan uw integratie. Dit proces verleent de integratietoegang tot de database, zodat u gegevens in uw database kunt opslaan en ophalen vanuit de React-applicatie.
6. Klik op uw databasepagina op de drie puntjes in de rechterbovenhoek om het menu met database-instellingen te openen. Klik onderaan het zijvenster van het menu op de Voeg verbindingen toe knop en zoek en selecteer uw integratie.

Maak een Express-server

Notion biedt een clientbibliotheek die het gemakkelijk maakt om met de API te communiceren vanaf een backend Express-server. Om het te gebruiken, maakt u lokaal een projectmap aan, wijzigt u de huidige map in die map en maak een express.js-webserver.

U kunt de code van dit project vinden in de bijbehorendeGitHub-opslagplaats.

Installeer vervolgens deze pakketten.

npm install @notionhq/client cors body-parser dotenv

Met het CORS-pakket kunnen de Express-backend en React-client gegevens uitwisselen via de API-eindpunten. U kunt het body-parser-pakket gebruiken om inkomende HTTP-verzoeken te verwerken. U parseert de JSON-payload van de client, haalt specifieke gegevens op en maakt die gegevens beschikbaar als een object in de eigenschap req.body. Ten slotte maakt het dotenv-pakket het mogelijk om omgevingsvariabelen te laden vanuit een .env bestand in uw aanvraag.

Maak in de hoofdmap van de servermap een .env-bestand en voeg de onderstaande code toe:

NOTION_INTEGRATION_TOKEN = 'uw Integratie geheime token'
NOTION_DATABASE_ID = 'database-ID'

Stel de Express-server in

Open de index.js bestand in de serverprojectmap en voeg deze code toe:

const uitdrukken = vereisen('nadrukkelijk');
const {Klant} = vereisen('@notionhq/klant');
const koren = vereisen('cors');
const bodyParser= vereisen('body-parser');
const jsonParser = bodyParser.json();
const poort = proces.env. HAVEN || 8000;
vereisen('dotenv'.config();
const app = uitdrukken();
app.gebruik (cors());
const authToken = proces.env. NOTION_INTEGRATION_TOKEN;
const notionDbID = proces.env. NOTION_DATABASE_ID;
const begrip = nieuw Klant ({autoriseren: authToken});
app.post('/BegripAPIPost', jsonParser, asynchroon(req, res) => {
const {Fullname, CompanyRole, Location} = req.body;
poging { 
const reactie = wachten notion.pages.create({
 ouder: {
 database_id: notionDbID,
 },
 eigenschappen: {
 Voor-en achternaam: {
 titel: [
 {
 tekst: {
 inhoud: volledige naam
 },
 },
 ],
 },
 Bedrijfsrol: {
 rijke text: [
 {
 tekst: {
 inhoud: Bedrijfsrol
 },
 },
 ],
 },
 Plaats: {
 rijke text: [
 {
 tekst: {
 inhoud: Locatie
 },
 },
 ],
 },
 },
 });
 opnieuw verzenden (antwoord);
troosten.log("succes");
 } vangst (fout) {
troosten.log (fout);
 }
});
app.get('/BegripAPIGet', asynchroon(req, res) => {
poging { 
const reactie = wachten notion.databases.query({
 database_id: notionDbID, 
 soorten: [
 {
 tijdstempel: 'gecreëerde_tijd',
 richting: 'aflopend',
 },
 ]
 });
 opnieuw verzenden (antwoord);
const {resultaten} = reactie;
troosten.log("succes");
 } vangst (fout) {
troosten.log (fout);
 }
});
app.listen (poort, () => {
troosten.log('server luistert op poort 8000!');
});

Deze code doet het volgende:

• De clientbibliotheek van Notion biedt een manier om te communiceren met de API van Notion en verschillende bewerkingen uit te voeren, zoals het lezen en schrijven van gegevens naar uw database.
• De clientmethode maakt een nieuwe instantie van het Notion-object. Dit object wordt geïnitialiseerd met een authenticatieparameter die een authenticatietoken nodig heeft, het integratietoken.
• De twee HTTP-methoden - get en post - doen verzoeken aan de API van Notion. De methode post neemt een database-ID op in de koptekst die de database specificeert waarnaar gegevens moeten worden geschreven met behulp van de methode create. De body van het verzoek bevat ook de eigenschappen van de nieuwe pagina: de gebruikersgegevens die moeten worden opgeslagen.
• De get-methode vraagt ​​en haalt gebruikersgegevens op uit de database en sorteert ze op basis van het tijdstip waarop ze zijn gemaakt.

Draai ten slotte de ontwikkelserver op met behulp van Nodemon, de Node.js-monitor:

npm begin

Stel een React-client in

In de hoofdmap van uw projectmap, maak een React-applicatie, en installeer Axios. U gebruikt deze bibliotheek om HTTP-verzoeken vanuit de browser te doen.

npm axios installeren

Implementeer de POST- en GET API-methoden

Open de src/App.js bestand, verwijder de boilerplate React-code en vervang deze door deze code:

importeren Reageer, { useState} van'Reageer';
importeren Axio's van'axios';
functieapp() {
const [naam, setnaam] = useState("");
const [rol, setRole] = useState("");
const [locatie, setLocation] = useState("");
const [APIData, setAPIData] = useState([]);
const handleSubmit = (e) => {
 e.preventDefault();
 Axios.post(' http://localhost: 8000/NotionAPIPost', {
 Volledige naam: naam,
 BedrijfRol: rol,
 Locatie: locatie
 }).vangst(fout => {
troosten.log (fout);
 });
 Axios.get(' http://localhost: 8000/NotionAPIGet')
 .Dan(antwoord => {
 setAPIData (antwoord.gegevens.resultaten);
troosten.log (antwoord.gegevens.resultaten);
 }).vangst(fout => { 
troosten.log (fout);
 }); 
 };
opbrengst (

"App">
"App-header">
"formulier">


Voornaam</p>
 type="tekst"
 tijdelijke aanduiding="Voornaam ..."
 onChange={(e) => {setName (e.target.value)}}
 />

Bedrijfsrol</p>
 type="tekst"
 tijdelijke aanduiding = "Bedrijfsrol..."
 onChange={(e) => {setRole (e.target.value)}}
 />

 Bedrijfsrol</p>
 type="tekst"
 tijdelijke aanduiding = "Plaats..."
 onChange={(e) => {setLocation (e.target.value)}}
 />
"indienen">Verzenden</button>
 </form>
 </div>

"Gegevens">
API-GEGEVENS</p>
 {
 APIData.map((gegevens) => {
opbrengst (



Naam: {data.properties. Volledigenaam.titel[0].platte_tekst}</p>

Rol: {data.properties. BedrijfRole.rich_text[0].platte_tekst}</p>

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




exporterenstandaard App;

Deze component geeft een formulier weer waarmee een gebruiker zijn naam, rol en locatiegegevens kan indienen. Het gebruikt de useState-hook om de invoerwaarden van de gebruiker op te slaan in statusvariabelen en maakt vervolgens een POST-verzoek aan een server-side API, waarbij de informatie van de gebruiker wordt doorgegeven zodra deze op de verzendknop drukt.

Na succesvolle indiening doet deze code een GET-verzoek aan dezelfde server-side API om de gegevens op te halen die zojuist zijn ingediend. Ten slotte brengt het de opgehaalde gegevens, opgeslagen in staat, in kaart en geeft deze weer in de API-GEGEVENS gedeelte onder het formulier.

Draai de ontwikkelingsserver van React op en ga naar http://localhost: 3000 in uw browser om de resultaten te bekijken.

Notion gebruiken als een contentmanagementsysteem

Notion is een ongelooflijk veelzijdige productiviteitstool die, afgezien van gegevensopslag, kan dienen als een contentmanagementsysteem (CMS) voor uw applicaties. Het flexibele databasesysteem biedt een reeks bewerkingstools en beheerfuncties die het proces van het beheren van inhoud voor uw toepassing vereenvoudigen.