Kako uporabljati Notionov API z React za shranjevanje podatkov v zbirko podatkov Notion

Funkcije produktivnosti Notion so postale vse bolj priljubljene tako za posameznike kot za organizacije. Te funkcije vam omogočajo upravljanje širokega nabora nalog, od shranjevanja osebnih podatkov do upravljanja projektnih delovnih tokov. Notionov sistem podatkovnih baz to omogoča. Zagotavlja intuitiven vmesnik, ki vam pomaga ustvariti prilagodljiv sistem za upravljanje vsebine.

Notion ponuja API, bogat s funkcijami, ki ga lahko preprosto integrirate v katero koli aplikacijo za interakcijo s sistemom baze podatkov. Poleg tega lahko ponujeno funkcionalnost prilagodite posebnim potrebam vaše aplikacije.

Nastavite integracijo pojmov

Notion ponuja več integracij, ki vam omogočajo dodajanje vsebine ali podatkov iz drugih orodij, kot je Google Dokumenti, neposredno v bazo podatkov Notion. Za aplikacije, izdelane po meri, pa boste morali ustvariti integracije po meri z uporabo javnega API-ja.

Če želite ustvariti integracijo Notion, sledite tem korakom.

1. Pojdite na Integracija pojma spletno stran, se prijavite in prijavite v svoj račun. Kliknite na strani s pregledom integracij Nova integracija za postavitev novega.
2. Vnesite ime za svojo integracijo, preverite, ali so izbrane pravilne nastavitve zmožnosti integracije, in kliknite Predloži. Te nastavitve določajo, kako vaša aplikacija sodeluje z Notionom.
3. Kopirajte priloženi skrivni žeton notranje integracije in kliknite Shrani spremembe.

Ustvarite zbirko pojmov

Z nastavljeno integracijo se prijavite v svoj Pojem delovni prostor za ustvarjanje baze podatkov za vašo aplikacijo. Nato sledite tem korakom:

1. Kliknite na Nova stran v levem podoknu menija vašega delovnega prostora Notion.
2. V pojavnem oknu vnesite ime svoje zbirke podatkov in tabelo, ki jo je nastavil Notion. Na koncu v svojo tabelo dodajte polja, ki jih potrebujete, tako da pritisnete + gumb v razdelku glave tabele.
3. Nato kliknite Odpri kot celotno stran gumb, da razširite stran zbirke podatkov, da zapolnite stran, in si ogledate ID baze podatkov na URL-ju.
4. Za interakcijo z bazo podatkov iz vaše aplikacije React boste potrebovali ID baze podatkov. ID baze podatkov je niz znakov v URL-ju baze podatkov med zadnjo poševnico (/) in vprašajem (?).
5. Končno povežite bazo podatkov z vašo integracijo. Ta postopek omogoča integracijski dostop do baze podatkov, tako da lahko shranjujete in pridobivate podatke v svoji bazi podatkov iz aplikacije React.
6. Na strani zbirke podatkov kliknite tri pike v zgornjem desnem kotu, da odprete meni z nastavitvami zbirke podatkov. Na dnu stranskega podokna menija kliknite Dodajte povezave ter poiščite in izberite svojo integracijo.

Ustvarite Express Server

Notion ponuja odjemalsko knjižnico, ki olajša interakcijo z API-jem iz zalednega strežnika Express. Če ga želite uporabiti, ustvarite lokalno mapo projekta, spremenite trenutni imenik v to mapo in ustvarite spletni strežnik express.js.

Kodo tega projekta najdete vRepozitorij GitHub.

Nato namestite te pakete.

npm namestite @notionhq/client cors body-parser dotenv

Paket CORS omogoča zaledju Express in odjemalcu React izmenjavo podatkov prek končnih točk API. Za obdelavo dohodnih zahtev HTTP lahko uporabite paket body-parser. Koristni tovor JSON boste razčlenili od odjemalca, pridobili določene podatke in jih dali na voljo kot objekt v lastnosti req.body. Nazadnje, paket dotenv omogoča nalaganje spremenljivk okolja iz a .env datoteko v vaši aplikaciji.

V korenskem imeniku mape strežnika ustvarite datoteko .env in dodajte spodnjo kodo:

NOTION_INTEGRATION_TOKEN = 'vaš integracijski skrivni žeton'
NOTION_DATABASE_ID = 'ID baze podatkov'

Nastavite strežnik Express

Odprite index.js datoteko v mapi strežniškega projekta in dodajte to kodo:

konst izraziti = zahtevati('express');
konst {Odjemalec} = zahtevati('@notionhq/klient');
konst cors = zahtevati('cors');
konst bodyParser = zahtevati('body-parser');
konst jsonParser = bodyParser.json();
konst vrata = proces.env. PRISTANIŠČE || 8000;
zahtevati('dotenv').config();
konst app = express();
app.use (cors());
konst authToken = process.env. NOTION_INTEGRATION_TOKEN;
konst notionDbID = proces.env. NOTION_DATABASE_ID;
konst pojem = novo Stranka ({avt: authToken});
app.post('/NotionAPIPost', jsonParser, asinh(req, res) => {
konst {Polno ime, Vloga podjetja, Lokacija} = req.body;
poskusi { 
konst odgovor = čakati notion.pages.create({
 nadrejeni: {
 database_id: notionDbID,
 },
 lastnosti: {
 Polno ime: {
 naslov: [
 {
 besedilo: {
 vsebina: Polno ime
 },
 },
 ],
 },
 CompanyRole: {
 obogateno_besedilo: [
 {
 besedilo: {
 vsebina: CompanyRole
 },
 },
 ],
 },
 Lokacija: {
 obogateno_besedilo: [
 {
 besedilo: {
 vsebina: Lokacija
 },
 },
 ],
 },
 },
 });
 res.send (odgovor);
konzola.log("uspeh");
 } ulov (napaka) {
konzola.log (napaka);
 }
});
app.get('/NotionAPIGet', asinh(req, res) => {
poskusi { 
konst odgovor = čakati notion.databases.query({
 database_id: notionDbID, 
 vrste: [
 {
 časovni žig: 'created_time',
 smer: 'padajoče',
 },
 ]
 });
 res.send (odgovor);
konst {rezultati} = odziv;
konzola.log("uspeh");
 } ulov (napaka) {
konzola.log (napaka);
 }
});
app.listen (vrata, () => {
konzola.log('strežnik posluša na vratih 8000!');
});

Ta koda naredi naslednje:

• Odjemalska knjižnica Notion ponuja način za interakcijo z API-jem Notion in izvajanje različnih operacij, kot je branje in pisanje podatkov v vašo bazo podatkov.
• Metoda odjemalca ustvari nov primerek predmeta Notion. Ta objekt je inicializiran s parametrom za preverjanje pristnosti, ki sprejme žeton za preverjanje pristnosti, integracijski žeton.
• Dve metodi HTTP – get in post – postavljata zahteve Notionovemu API-ju. Metoda post prevzame ID baze podatkov v svoji glavi, ki določa bazo podatkov, v katero naj se zapišejo podatki z uporabo metode create. Telo zahteve vsebuje tudi lastnosti nove strani: uporabniške podatke za shranjevanje.
• Metoda get poizveduje in pridobiva uporabniške podatke iz baze podatkov ter jih razvršča glede na čas, ko so bili ustvarjeni.

Končno zavrtite razvojni strežnik z uporabo Nodemon, monitor Node.js:

npm začetek

Nastavite odjemalca React

V korenskem imeniku vaše projektne mape ustvarite aplikacijo Reactin namestite Axios. To knjižnico boste uporabili za pošiljanje zahtev HTTP iz brskalnika.

npm namestite axios

Izvedite metodi POST in GET API

Odprite src/App.js datoteko, izbrišite kodo Boilerplate React in jo nadomestite s to kodo:

uvoz Odziv, {useState} od'reagirati';
uvoz Axios od'axios';
funkcijoaplikacija() {
konst [ime, setName] = useState("");
konst [vloga, setRole] = useState("");
konst [lokacija, setLocation] = useState("");
konst [APIData, setAPIData] = useState([]);
konst handleSubmit = (e) => {
 e.preventDefault();
 Axios.post(' http://localhost: 8000/NotionAPIPost', {
 Polno ime: ime,
 CompanyRole: vloga,
 Lokacija: lokacija
 }).catch(napaka => {
konzola.log (napaka);
 });
 Axios.get(' http://localhost: 8000/NotionAPIGet')
 .potem(odgovor => {
 setAPIData (response.data.results);
konzola.log (response.data.results);
 }).catch(napaka => { 
konzola.log (napaka);
 }); 
 };
vrnitev (

"Aplikacija">
"Glava aplikacije">
"oblika">


Ime</p>
 vrsta="besedilo"
 placeholder="Ime ..."
 onChange={(e) => {setName (e.target.value)}}
 />

Vloga podjetja</p>
 vrsta="besedilo"
 placeholder = "Vloga podjetja ..."
 onChange={(e) => {setRole (e.target.value)}}
 />

 Vloga podjetja</p>
 vrsta="besedilo"
 placeholder = "Lokacija ..."
 onChange={(e) => {setLocation (e.target.value)}}
 />
"oddaj">Pošlji</button>
 </form>
 </div>

"Podatki">
PODATKI API</p>
 {
 APIData.map((podatke) => {
vrnitev (



Ime: {data.properties. Fullname.title[0].navadno_besedilo</p>

Vloga: {data.properties. CompanyRole.rich_text[0].navadno_besedilo</p>

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




izvozprivzeto aplikacija;

Ta komponenta upodobi obrazec, ki uporabniku omogoča, da predloži svoje ime, vlogo in podatke o lokaciji. Uporablja kavelj useState za shranjevanje vhodnih vrednosti uporabnika v spremenljivke stanja in nato naredi zahtevo POST API-ju na strani strežnika, ki posreduje informacije uporabnika, ko pritisne gumb za pošiljanje.

Po uspešni predložitvi ta koda pošlje zahtevo GET istemu API-ju na strani strežnika za pridobitev podatkov, ki jih je pravkar poslala. Nazadnje preslika pridobljene podatke, shranjene v stanju, in jih upodobi v PODATKI API razdelek pod obrazcem.

Zavrtite Reactov razvojni strežnik in pojdite na http://localhost: 3000 v brskalniku za ogled rezultatov.

Uporaba Notiona kot sistema za upravljanje vsebin

Notion je neverjetno vsestransko orodje za produktivnost, ki lahko poleg shranjevanja podatkov služi kot sistem za upravljanje vsebin (CMS) za vaše aplikacije. Njegov prilagodljiv sistem podatkovnih baz ponuja nabor orodij za urejanje in funkcij upravljanja, ki poenostavijo proces upravljanja vsebine za vašo aplikacijo.