Kako koristiti Notionov API s Reactom za pohranu podataka u Notion bazi podataka

Produktivne značajke Notiona postale su sve popularnije i za pojedince i za organizacije. Ove značajke omogućuju vam upravljanje širokim rasponom zadataka, od pohranjivanja osobnih podataka do upravljanja tijekovima rada projekta. Notionov sustav baze podataka to omogućuje. Omogućuje intuitivno sučelje koje vam pomaže u stvaranju prilagodljivog sustava za upravljanje sadržajem.

Notion nudi API bogat značajkama koji možete jednostavno integrirati u bilo koju aplikaciju za interakciju s njegovim sustavom baze podataka. Nadalje, možete prilagoditi pruženu funkcionalnost kako bi odgovarala specifičnim potrebama vaše aplikacije.

Postavite integraciju pojmova

Notion nudi nekoliko integracija koje vam omogućuju dodavanje sadržaja ili podataka iz drugih alata kao što su Google Docs izravno u Notion bazu podataka. Međutim, za aplikacije izrađene po narudžbi morat ćete izraditi prilagođene integracije pomoću javnog API-ja.

Za izradu Notion integracije slijedite ove korake.

1. Prijeđite na Integracija pojma web stranicu, prijavite se i prijavite na svoj račun. Kliknite na stranici s pregledom integracija Nova integracija postaviti novi.
2. Navedite naziv za svoju integraciju, provjerite jesu li odabrane ispravne postavke mogućnosti integracije i kliknite podnijeti. Ove postavke definiraju način na koji vaša aplikacija komunicira s Notionom.
3. Kopirajte dostavljeni tajni interni integracijski token i kliknite Spremi promjene.

Napravite bazu podataka pojmova

S postavljenom integracijom prijavite se na svoj Pojam radni prostor za izradu baze podataka za vašu aplikaciju. Zatim slijedite ove korake:

1. Kliknite na Nova stranica gumb na lijevom oknu izbornika vašeg radnog prostora Notion.
2. U skočnom prozoru unesite naziv vaše baze podataka i tablice koju je postavio Notion. Na kraju, dodajte polja koja su vam potrebna u vašu tablicu pritiskom na + gumb na dijelu zaglavlja vaše tablice.
3. Zatim kliknite na Otvori kao cijelu stranicu gumb za proširenje stranice baze podataka za popunjavanje stranice i prikaz ID-a baze podataka na URL-u.
4. Trebat će vam ID baze podataka za interakciju s bazom podataka iz vaše React aplikacije. ID baze podataka je niz znakova u URL-u baze podataka između zadnje kose crte (/) i upitnika (?).
5. Na kraju povežite bazu podataka sa svojom integracijom. Ovaj proces omogućuje integracijski pristup bazi podataka tako da možete pohraniti i dohvatiti podatke u svojoj bazi podataka iz aplikacije React.
6. Na stranici baze podataka kliknite na tri točkice u gornjem desnom kutu za otvaranje izbornika postavki baze podataka. Na dnu bočnog okna izbornika kliknite Dodajte veze gumb i potražite i odaberite svoju integraciju.

Stvorite Express poslužitelj

Notion pruža klijentsku biblioteku koja olakšava interakciju s API-jem s pozadinskog Express poslužitelja. Da biste ga koristili, kreirajte mapu projekta lokalno, promijenite trenutni direktorij u tu mapu i stvoriti express.js web poslužitelj.

Kôd ovog projekta možete pronaći uGitHub spremište.

Zatim instalirajte ove pakete.

npm instalirajte @notionhq/client cors body-parser dotenv

Paket CORS omogućuje Express backend-u i React klijentu razmjenu podataka putem API krajnjih točaka. Možete koristiti body-parser paket za obradu dolaznih HTTP zahtjeva. Analizirat ćete JSON korisni teret od klijenta, dohvatiti određene podatke i te podatke učiniti dostupnima kao objekt u svojstvu req.body. Na kraju, paket dotenv omogućuje učitavanje varijabli okoline iz a .env datoteku u svojoj prijavi.

U korijenskom direktoriju mape poslužitelja stvorite .env datoteku i dodajte kod u nastavku:

NOTION_INTEGRATION_TOKEN = 'vaš integracijski tajni token'
NOTION_DATABASE_ID = 'ID baze podataka'

Postavite Express poslužitelj

Otvori index.js datoteku u mapi projekta poslužitelja i dodajte ovaj kod:

konst izraziti = zahtijevati('izraziti');
konst {Klijent} = zahtijevati('@notionhq/klijent');
konst cors = zahtijevati('cors');
konst bodyParser = zahtijevati('parser tijela');
konst jsonParser = bodyParser.json();
konst luka = ​​proces.env. LUKA || 8000;
zahtijevati('dotenv').config();
konst app = express();
app.use (cors());
konst authToken = proces.env. NOTION_INTEGRATION_TOKEN;
konst pojamDbID = proces.env. NOTION_DATABASE_ID;
konst pojam = novi Klijent ({auth: authToken});
app.post('/NotionAPIPost', jsonParser, asinkroni(req, res) => {
konst {Puno ime, uloga tvrtke, lokacija} = req.body;
probati { 
konst odgovor = čekati notion.pages.create({
 roditelj: {
 database_id: notionDbID,
 },
 Svojstva: {
 Puno ime: {
 naslov: [
 {
 tekst: {
 sadržaj: Puno ime
 },
 },
 ],
 },
 Uloga tvrtke: {
 bogati tekst: [
 {
 tekst: {
 sadržaj: CompanyRole
 },
 },
 ],
 },
 Lokacija: {
 bogati tekst: [
 {
 tekst: {
 sadržaj: Lokacija
 },
 },
 ],
 },
 },
 });
 res.poslati (odgovor);
konzola.log("uspjeh");
 } ulov (pogreška) {
konzola.log (greška);
 }
});
app.get('/NotionAPIGet', asinkroni(req, res) => {
probati { 
konst odgovor = čekati notion.databases.query({
 database_id: notionDbID, 
 sortira: [
 {
 vremenska oznaka: 'kreirano_vrijeme',
 smjer: 'silazni',
 },
 ]
 });
 res.poslati (odgovor);
konst {rezultati} = odgovor;
konzola.log("uspjeh");
 } ulov (pogreška) {
konzola.log (greška);
 }
});
app.listen (port, () => {
konzola.log('poslužitelj sluša na portu 8000!');
});

Ovaj kôd čini sljedeće:

• Notionova klijentska biblioteka pruža način interakcije s Notionovim API-jem i izvođenje raznih operacija, poput čitanja i pisanja podataka u vašu bazu podataka.
• Metoda klijenta stvara novu instancu objekta Notion. Ovaj se objekt inicijalizira s parametrom autentifikacije koji uzima token za provjeru autentičnosti, integracijski token.
• Dvije HTTP metode — get i post — postavljaju zahtjeve Notionovom API-ju. Metoda post uzima ID baze podataka u svoje zaglavlje koje specificira bazu podataka u koju će se pisati podaci pomoću metode create. Tijelo zahtjeva također sadrži svojstva nove stranice: korisničke podatke za pohranu.
• Metoda get postavlja upite i dohvaća korisničke podatke iz baze podataka te ih sortira prema vremenu kada su kreirani.

Na kraju, zavrtite razvojni poslužitelj pomoću Nodemon, Node.js monitor:

npm početak

Postavite React klijenta

U korijenskom direktoriju mape vašeg projekta, izraditi React aplikaciju, i instalirajte Axios. Koristit ćete ovu biblioteku za postavljanje HTTP zahtjeva iz preglednika.

npm instalirati axios

Implementirajte POST i GET API metode

Otvori src/App.js datoteku, izbrišite predložak React koda i zamijenite ga ovim kodom:

uvoz Reagiraj, {useState} iz'reagirati';
uvoz Axios iz'axios';
funkcijaaplikacija() {
konst [ime, setName] = useState("");
konst [uloga, setRole] = useState("");
konst [lokacija, setLocation] = useState("");
konst [APIData, setAPIData] = useState([]);
konst handleSubmit = (e) => {
 e.preventDefault();
 Axios.post(' http://localhost: 8000/NotionAPIPost', {
 Puno ime: ime,
 CompanyRole: uloga,
 Mjesto: mjesto
 }).ulov(greška => {
konzola.log (greška);
 });
 Axios.get(' http://localhost: 8000/NotionAPIGet')
 .zatim(odgovor => {
 setAPIData (response.data.results);
konzola.log (odgovor.podaci.rezultati);
 }).ulov(greška => { 
konzola.log (greška);
 }); 
 };
povratak (

"Aplikacija">
"Zaglavlje aplikacije">
"oblik">


Ime</p>
 vrsta="tekst"
 rezervirano mjesto="Ime ..."
 onChange={(e) => {setName (e.target.value)}}
 />

Uloga tvrtke</p>
 vrsta="tekst"
 rezervirano mjesto = "Uloga tvrtke..."
 onChange={(e) => {setRole (e.target.value)}}
 />

 Uloga tvrtke</p>
 vrsta="tekst"
 rezervirano mjesto = "Mjesto..."
 onChange={(e) => {setLocation (e.target.value)}}
 />
"podnijeti">Pošalji</button>
 </form>
 </div>

"Podaci">
API PODACI</p>
 {
 APIData.map((podaci) => {
povratak (



Naziv: {data.properties. Fullname.title[0].obični_tekst}</p>

Uloga: {data.properties. CompanyRole.rich_text[0].obični_tekst}</p>

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




izvozzadano aplikacija;

Ova komponenta prikazuje obrazac koji korisniku omogućuje da podnese svoje ime, ulogu i podatke o lokaciji. Koristi useState hook za pohranjivanje korisničkih ulaznih vrijednosti u varijable stanja, a zatim šalje POST zahtjev API-ju na strani poslužitelja, prosljeđujući korisničke informacije nakon što pritisne gumb za slanje.

Nakon uspješnog podnošenja, ovaj kod upućuje zahtjev GET istom API-ju na strani poslužitelja za dohvaćanje podataka koje je upravo poslao. Na kraju, preslikava dohvaćene podatke, pohranjene u stanju, i prikazuje ih u API PODACI odjeljak ispod obrasca.

Okrenite Reactov razvojni poslužitelj i prijeđite na http://localhost: 3000 na vašem pregledniku da vidite rezultate.

Korištenje Notiona kao sustava za upravljanje sadržajem

Notion je nevjerojatno svestran alat za produktivnost koji, osim kao pohrana podataka, može poslužiti i kao sustav za upravljanje sadržajem (CMS) za vaše aplikacije. Njegov fleksibilni sustav baze podataka pruža skup alata za uređivanje i značajke upravljanja koje pojednostavljuju proces upravljanja sadržajem za vašu aplikaciju.