Kā izmantot Notion API ar React, lai uzglabātu datus Notion datu bāzē

Notion produktivitātes funkcijas ir kļuvušas arvien populārākas gan privātpersonām, gan organizācijām. Šīs funkcijas ļauj pārvaldīt plašu uzdevumu klāstu, sākot no personas datu uzglabāšanas līdz projekta darbplūsmu pārvaldībai. Notion datu bāzes sistēma to padara iespējamu. Tas nodrošina intuitīvu saskarni, lai palīdzētu jums izveidot pielāgojamu satura pārvaldības sistēmu.

Notion nodrošina ar funkcijām bagātu API, ko varat viegli integrēt jebkurā lietojumprogrammā, lai mijiedarbotos ar tās datu bāzes sistēmu. Turklāt jūs varat pielāgot piedāvāto funkcionalitāti, lai tā atbilstu jūsu lietojumprogrammas īpašajām vajadzībām.

Iestatiet jēdziena integrāciju

Notion nodrošina vairākas integrācijas, kas ļauj pievienot saturu vai datus no citiem rīkiem, piemēram, Google dokumentiem, tieši Notion datubāzē. Tomēr pielāgotām lietojumprogrammām jums būs jāizveido pielāgotas integrācijas, izmantojot tās publisko API.

Lai izveidotu jēdziena integrāciju, veiciet šīs darbības.

1. Dodieties uz Jēdziena integrācija tīmekļa lapā, reģistrējieties un piesakieties savā kontā. Integrāciju pārskata lapā noklikšķiniet uz Jauna integrācija lai izveidotu jaunu.
2. Norādiet integrācijas nosaukumu, pārbaudiet, vai ir atlasīti pareizi integrācijas iespēju iestatījumi, un noklikšķiniet uz Iesniegt. Šie iestatījumi nosaka, kā jūsu lietojumprogramma mijiedarbojas ar Notion.
3. Kopējiet nodrošināto slepeno iekšējās integrācijas marķieri un noklikšķiniet uz Saglabāt izmaiņas.

Izveidojiet jēdzienu datu bāzi

Kad integrācija ir iestatīta, piesakieties savā Jēdziens darbvieta, lai izveidotu datu bāzi savai lietojumprogrammai. Pēc tam veiciet tālāk norādītās darbības.

1. Noklikšķiniet uz Jauna lapa pogu Notion darbvietas kreisajā izvēlnes rūtī.
2. Uznirstošajā logā norādiet savas datu bāzes nosaukumu un tabulu, ko iestatījis Notion. Visbeidzot pievienojiet tabulai nepieciešamos laukus, nospiežot + pogu tabulas galvenes sadaļā.
3. Pēc tam noklikšķiniet uz Atvērt kā pilnu lapu pogu, lai izvērstu datu bāzes lapu, lai aizpildītu lapu, un skatītu datu bāzes ID URL.
4. Jums būs nepieciešams datu bāzes ID, lai mijiedarbotos ar datu bāzi no savas React lietojumprogrammas. Datu bāzes ID ir rakstzīmju virkne datu bāzes vietrādī URL starp pēdējo slīpsvītru (/) un jautājuma zīmi (?).
5. Visbeidzot pievienojiet datu bāzi savai integrācijai. Šis process nodrošina integrācijas piekļuvi datu bāzei, lai jūs varētu saglabāt un izgūt datus savā datu bāzē no lietojumprogrammas React.
6. Savā datu bāzes lapā noklikšķiniet uz trīs punkti augšējā labajā stūrī, lai atvērtu datu bāzes iestatījumu izvēlni. Izvēlnes sānu rūts apakšā noklikšķiniet uz Pievienot savienojumus pogu un meklējiet un atlasiet savu integrāciju.

Izveidojiet Express serveri

Notion nodrošina klienta bibliotēku, kas atvieglo mijiedarbību ar API no aizmugursistēmas Express servera. Lai to izmantotu, lokāli izveidojiet projekta mapi, mainiet pašreizējo direktoriju uz šo mapi un izveidot express.js tīmekļa serveri.

Jūs varat atrast šī projekta kodu tajāGitHub repozitorijs.

Pēc tam instalējiet šīs pakotnes.

npm instalēt @notionhq/client cors body-parser dotenv

CORS pakotne ļauj Express aizmugursistēmai un React klientam apmainīties ar datiem, izmantojot API galapunktus. Ienākošo HTTP pieprasījumu apstrādei varat izmantot body-parser pakotni. Jūs parsēsit klienta JSON lietderīgo slodzi, izgūsit konkrētus datus un padarīsit šos datus pieejamus kā objektu req.body rekvizītā. Visbeidzot, dotenv pakotne ļauj ielādēt vides mainīgos no a .env failu savā pieteikumā.

Servera mapes saknes direktorijā izveidojiet .env failu un pievienojiet tālāk norādīto kodu:

NOTION_INTEGRATION_TOKEN = "jūsu integrācijas slepenais marķieris"
NOTION_DATABASE_ID = "datu bāzes ID"

Iestatiet Express serveri

Atveriet index.js failu servera projekta mapē un pievienojiet šo kodu:

konst izteikt = pieprasīt('izteikt');
konst {Klients} = pieprasīt('@notionhq/client');
konst cors = pieprasīt('kors');
konst bodyParser = pieprasīt("ķermeņa parsētājs");
konst jsonParser = bodyParser.json();
konst ports = process.env. OST || 8000;
pieprasīt('dotenv').config();
konst lietotne = express();
app.use (cors());
konst authToken = process.env. NOTION_INTEGRATION_TOKEN;
konst notionDbID = process.env. NOTION_DATABASE_ID;
konst jēdziens = jauns Klients ({aut: authToken});
app.post('/NotionAPIPost', jsonParser, asinhrons(req, res) => {
konst {Fullname, CompanyRole, Location} = req.body;
mēģināt { 
konst atbilde = gaidīt notion.pages.create({
 vecāks: {
 Database_id: jēdziensDbID,
 },
 īpašības: {
 Pilnais vārds: {
 nosaukums: [
 {
 teksts: {
 saturs: pilns vārds
 },
 },
 ],
 },
 Uzņēmuma loma: {
 rich_text: [
 {
 teksts: {
 saturs: CompanyRole
 },
 },
 ],
 },
 Atrašanās vieta: {
 rich_text: [
 {
 teksts: {
 saturs: Atrašanās vieta
 },
 },
 ],
 },
 },
 });
 res.send (atbilde);
konsole.log("panākumi");
 } noķert (kļūda) {
konsole.log (kļūda);
 }
});
app.get('/NotionAPIGet', asinhrons(req, res) => {
mēģināt { 
konst atbilde = gaidīt notion.databases.query({
 Database_id: jēdziensDbID, 
 šķiro: [
 {
 laikspiedols: 'created_time',
 virziens: "nolaižas",
 },
 ]
 });
 res.send (atbilde);
konst {rezultāti} = atbilde;
konsole.log("panākumi");
 } noķert (kļūda) {
konsole.log (kļūda);
 }
});
app.listen (port, () => {
konsole.log('serveris klausās portā 8000!');
});

Šis kods veic šādas darbības:

• Notion klienta bibliotēka nodrošina veidu, kā mijiedarboties ar Notion API un veikt dažādas darbības, piemēram, datu lasīšanu un ierakstīšanu datu bāzē.
• Klienta metode izveido jaunu objekta Jēdziens gadījumu. Šis objekts tiek inicializēts ar autentifikācijas parametru, kas izmanto autentifikācijas pilnvaru, integrācijas pilnvaru.
• Divas HTTP metodes — iegūt un izlikt — veic pieprasījumus Notion API. Post metode savā galvenē uzņem datu bāzes ID, kas norāda datu bāzi, kurā jāieraksta dati, izmantojot izveides metodi. Pieprasījuma pamattekstā ir arī jaunās lapas rekvizīti: glabājamie lietotāja dati.
• Iegūšanas metode vaicā un izgūst lietotāja datus no datu bāzes un sakārto tos pēc to izveides laika.

Visbeidzot, pagrieziet izstrādes serveri, izmantojot Nodemon, Node.js monitors:

npm sākums

Iestatiet React klientu

Projekta mapes saknes direktorijā izveidot React lietojumprogrammuun instalējiet Axios. Šo bibliotēku izmantosit, lai no pārlūkprogrammas veiktu HTTP pieprasījumus.

npm instalēt axios

Ieviesiet POST un GET API metodes

Atveriet src/App.js failu, izdzēsiet React kodu un aizstājiet to ar šo kodu:

imports Reaģēt, { useState} no'reaģēt';
imports Axios no"aksios";
funkcijuApp() {
konst [nosaukums, setName] = useState("");
konst [role, setRole] = useState("");
konst [location, setLocation] = useState("");
konst [APIData, setAPIData] = useState([]);
konst HandSubmit = (e) => {
 e.preventDefault();
 Axios.post(' http://localhost: 8000/NotionAPIPost, {
 Pilns vārds: vārds,
 UzņēmumsLoma: loma,
 Atrašanās vieta: atrašanās vieta
 }).catch(kļūda => {
konsole.log (kļūda);
 });
 Axios.get(' http://localhost: 8000/NotionAPIGet')
 .hen(atbildi => {
 setAPIData (response.data.results);
konsole.log (response.data.results);
 }).catch(kļūda => { 
konsole.log (kļūda);
 }); 
 };
atgriezties (

"Lietotne">
"Lietotnes galvene">
"veidlapa">


Vārds </p>
 tips="teksts"
 vietturis="Vārds ..."
 onChange={(e) => {setName (e.target.value)}}
 />

Uzņēmuma loma</p>
 tips="teksts"
 vietturis = "Uzņēmuma loma..."
 onChange={(e) => {setRole (e.target.value)}}
 />

 Uzņēmuma loma</p>
 tips="teksts"
 vietturis = "Atrašanās vieta..."
 onChange={(e) => {setLocation (e.target.value)}}
 />
"Iesniegt">Iesniegt</button>
 </form>
 </div>

"Dati">
API DATI</p>
 {
 APIData.map((datus) => {
atgriezties (



Nosaukums: {data.properties. Pilns vārds.nosaukums[0].plain_text}</p>

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

Atrašanās vieta: {data.properties. Location.rich_text[0].plain_text}</p> 
 </div>
 )
 })
 }
 </div>
 </header>
 </div>
 );
}




eksportētnoklusējuma Lietotne;

Šis komponents atveido veidlapu, kas ļauj lietotājam iesniegt savu vārdu, lomu un atrašanās vietas informāciju. Tas izmanto useState hook, lai saglabātu lietotāja ievades vērtības stāvokļa mainīgajos un pēc tam veic POST pieprasījumu servera puses API, nododot lietotāja informāciju, tiklīdz viņš nospiež pogu Iesniegt.

Pēc veiksmīgas iesniegšanas šis kods veic GET pieprasījumu tai pašai servera puses API, lai izgūtu tikko iesniegtos datus. Visbeidzot, tas kartē izgūtos datus, kas tiek glabāti stāvoklī, un atveido tos API DATI sadaļā zem veidlapas.

Izveidojiet React izstrādes serveri un dodieties uz http://localhost: 3000 savā pārlūkprogrammā, lai skatītu rezultātus.

Notion kā satura pārvaldības sistēmas izmantošana

Notion ir neticami daudzpusīgs produktivitātes rīks, kas papildus datu glabāšanai var kalpot kā satura pārvaldības sistēma (CMS) jūsu lietojumprogrammām. Tās elastīgā datu bāzes sistēma nodrošina rediģēšanas rīku un pārvaldības līdzekļu kopumu, kas vienkāršo jūsu lietojumprogrammas satura pārvaldības procesu.