Slik bruker du Notions API med React to Store Data i en Notion-database

Notions produktivitetsfunksjoner har blitt stadig mer populære for både enkeltpersoner og organisasjoner. Disse funksjonene lar deg administrere et bredt spekter av oppgaver, fra lagring av personlige data til administrasjon av prosjektarbeidsflyter. Notions databasesystem gjør dette mulig. Det gir et intuitivt grensesnitt for å hjelpe deg med å lage et tilpasset innholdsstyringssystem.

Notion gir en funksjonsrik API som du enkelt kan integrere i alle programmer for å samhandle med databasesystemet. Videre kan du tilpasse den medfølgende funksjonaliteten for å passe til applikasjonens spesifikke behov.

Sett opp en begrepsintegrasjon

Notion gir flere integrasjoner som lar deg legge til innhold eller data fra andre verktøy som Google Docs direkte inn i en Notion-database. For spesialbygde applikasjoner må du imidlertid lage tilpassede integrasjoner ved å bruke dens offentlige API.

Følg disse trinnene for å lage en Notion-integrasjon.

1. Gå over til Integrasjon av begrepet nettsiden, registrer deg og logg på kontoen din. På integrasjonsoversiktssiden klikker du Ny integrasjon å sette opp en ny.
2. Oppgi et navn for integreringen din, sjekk at du har valgt de riktige integreringsfunksjonene, og klikk Sende inn. Disse innstillingene definerer hvordan applikasjonen din samhandler med Notion.
3. Kopier det hemmelige interne integrasjonstokenet som følger med, og klikk Lagre endringer.

Opprett en forestillingsdatabase

Med integreringsoppsettet ditt, logg inn på din Forestilling arbeidsområde for å lage en database for applikasjonen din. Følg deretter disse trinnene:

1. Klikk på Ny side knappen i venstre menypanel i Notion-arbeidsområdet.
2. I popup-vinduet oppgir du navnet på databasen og tabellen satt opp av Notion. Til slutt legger du til feltene du trenger i tabellen ved å trykke på + knappen på overskriftsdelen av tabellen.
3. Klikk deretter på Åpne som helside for å utvide databasesiden for å fylle siden, og se database-ID-en på URL-en.
4. Du trenger database-IDen for å samhandle med databasen fra React-applikasjonen din. Database-IDen er strengen med tegn i databasens URL mellom siste skråstrek (/) og spørsmålstegnet (?).
5. Til slutt kobler du databasen til integrasjonen din. Denne prosessen gir integreringen tilgang til databasen slik at du kan lagre og hente data på databasen fra React-applikasjonen.
6. På databasesiden din klikker du på tre prikker øverst til høyre for å åpne menyen for databaseinnstillinger. Klikk på nederst i menysidepanelet Legg til tilkoblinger knappen og søk etter og velg din integrasjon.

Opprett en ekspressserver

Notion gir et klientbibliotek som gjør det enkelt å samhandle med API fra en backend Express-server. For å bruke den, opprett en prosjektmappe lokalt, endre gjeldende katalog til den mappen, og opprette en express.js webserver.

Du kan finne dette prosjektets kode i sinGitHub-depot.

Installer deretter disse pakkene.

npm installer @notionhq/client cors body-parser dotenv

CORS-pakken lar Express-backend- og React-klienten utveksle data gjennom API-endepunktene. Du kan bruke body-parser-pakken til å behandle innkommende HTTP-forespørsler. Du vil analysere JSON-nyttelasten fra klienten, hente spesifikke data og gjøre disse dataene tilgjengelige som et objekt i req.body-egenskapen. Til slutt gjør dotenv-pakken det mulig å laste inn miljøvariabler fra en .env fil i søknaden din.

Opprett en .env-fil i rotkatalogen til servermappen, og legg til koden nedenfor:

NOTION_INTEGRATION_TOKEN = 'din hemmelige integreringstoken'
NOTION_DATABASE_ID = 'database-ID'

Sett opp Express Server

Åpne index.js fil i serverprosjektmappen, og legg til denne koden:

konst uttrykke = krever('uttrykke');
konst {Client} = krever('@notionhq/klient');
konst cors = krever('cors');
konst bodyParser = krever("kropps-parser");
konst jsonParser = bodyParser.json();
konst port = prosess.env. PORT || 8000;
krever('dotenv').config();
konst app = express();
app.use (cors());
konst authToken = prosess.env. NOTION_INTEGRATION_TOKEN;
konst notionDbID = prosess.env. NOTION_DATABASE_ID;
konst forestilling = ny Klient ({auth: authToken});
app.post('/NotionAPIPost', jsonParser, asynkron(req, res) => {
konst {Fullnavn, CompanyRole, Location} = req.body;
prøve { 
konst svar = avvente notion.pages.create({
 forelder: {
 database_id: notionDbID,
 },
 egenskaper: {
 Fullt navn: {
 tittel: [
 {
 tekst: {
 innhold: Fullt navn
 },
 },
 ],
 },
 Bedriftsrolle: {
 rik tekst: [
 {
 tekst: {
 innhold: Bedriftsrolle
 },
 },
 ],
 },
 Plassering: {
 rik tekst: [
 {
 tekst: {
 innhold: Sted
 },
 },
 ],
 },
 },
 });
 res.send (svar);
konsoll.Logg("suksess");
 } å fange (feil) {
konsoll.log (feil);
 }
});
app.get('/NotionAPIGet', asynkron(req, res) => {
prøve { 
konst svar = avvente notion.databases.query({
 database_id: notionDbID, 
 sorterer: [
 {
 tidsstempel: 'skapt_tid',
 retning: "synkende",
 },
 ]
 });
 res.send (svar);
konst {resultater} = svar;
konsoll.Logg("suksess");
 } å fange (feil) {
konsoll.log (feil);
 }
});
app.listen (port, () => {
konsoll.Logg('server lytter på port 8000!');
});

Denne koden gjør følgende:

• Notions klientbibliotek gir en måte å samhandle med Notions API og utføre ulike operasjoner, for eksempel å lese og skrive data til databasen din.
• Klientmetoden oppretter en ny forekomst av Notion-objektet. Dette objektet initialiseres med en autentiseringsparameter som tar et autentiseringstoken, integrasjonstokenet.
• De to HTTP-metodene – get og post – sender forespørsler til Notions API. Postmetoden tar inn en database-ID i overskriften som spesifiserer databasen som skal skrives data inn i ved hjelp av opprettelsesmetoden. Brødteksten i forespørselen inneholder også egenskapene til den nye siden: brukerdataene som skal lagres.
• Get-metoden spør etter og henter brukerdata fra databasen, og sorterer dem i henhold til tidspunktet de ble opprettet.

Til slutt snurr du opp utviklingsserveren ved hjelp av Nodemon, Node.js-skjermen:

npm start

Sett opp en React-klient

I rotkatalogen til prosjektmappen din, opprette en React-applikasjon, og installer Axios. Du vil bruke dette biblioteket til å lage HTTP-forespørsler fra nettleseren.

npm installer aksioer

Implementer POST- og GET API-metodene

Åpne src/App.js fil, slett reaktorkoden og erstatt den med denne koden:

import Reager, { useState} fra'reagere';
import Axios fra'aksios';
funksjonApp() {
konst [navn, settnavn] = brukState("");
konst [rolle, setRole] = brukState("");
konst [location, setLocation] = useState("");
konst [APIData, setAPIData] = brukState([]);
konst handleSubmit = (e) => {
 e.preventDefault();
 Axios.post(' http://localhost: 8000/NotionAPIPost', {
 Fullt navn: navn,
 BedriftRolle: rolle,
 Sted: plassering
 }).å fange(feil => {
konsoll.log (feil);
 });
 Axios.get(' http://localhost: 8000/NotionAPIGet')
 .deretter(respons => {
 setAPIData (respons.data.resultater);
konsoll.log (respons.data.resultater);
 }).å fange(feil => { 
konsoll.log (feil);
 }); 
 };
komme tilbake (

"App">
"App-header">
"form">


Fornavn</p>
 type="tekst"
 plassholder="Fornavn ..."
 onChange={(e) => {setName (e.target.value)}}
 />

Bedriftsrolle</p>
 type="tekst"
 plassholder = "Bedriftsrolle..."
 onChange={(e) => {setRole (e.target.value)}}
 />

 Bedriftsrolle</p>
 type="tekst"
 plassholder = "Plassering..."
 onChange={(e) => {setLocation (e.target.value)}}
 />
"sende inn">Send inn</button>
 </form>
 </div>

"Data">
API DATA</p>
 {
 APIData.map((data) => {
komme tilbake (



Navn: {data.properties. Fullt navn.tittel[0].plain_text}</p>

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

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




eksportmisligholde App;

Denne komponenten gjengir et skjema som lar en bruker sende inn navn, rolle og plasseringsinformasjon. Den bruker useState-hook for å lagre brukerens inngangsverdier i tilstandsvariabler og sender deretter en POST-forespørsel til en server-side API, og sender brukerens informasjon når de trykker på send-knappen.

Ved vellykket innsending sender denne koden en GET-forespørsel til den samme server-side API for å hente dataene den nettopp sendte. Til slutt kartlegger den de hentede dataene, lagret i tilstand, og gjengir dem i API DATA delen under skjemaet.

Spinn opp Reacts utviklingsserver og gå over til http://localhost: 3000 på nettleseren din for å se resultater.

Bruke Notion som et innholdsstyringssystem

Notion er et utrolig allsidig produktivitetsverktøy som, bortsett fra datalagring, kan fungere som et innholdsstyringssystem (CMS) for applikasjonene dine. Det fleksible databasesystemet gir et sett med redigeringsverktøy og administrasjonsfunksjoner som forenkler prosessen med å administrere innhold for applikasjonen din.