Kuidas kasutada Notioni API-t koos Reactiga andmete salvestamiseks Notioni andmebaasi

Notioni tootlikkuse funktsioonid on muutunud üha populaarsemaks nii üksikisikute kui ka organisatsioonide jaoks. Need funktsioonid võimaldavad teil hallata mitmesuguseid ülesandeid alates isikuandmete salvestamisest kuni projekti töövoogude haldamiseni. Notioni andmebaasisüsteem teeb selle võimalikuks. See pakub intuitiivset liidest, mis aitab teil luua kohandatava sisuhaldussüsteemi.

Notion pakub funktsioonirikka API-t, mida saate hõlpsasti integreerida mis tahes rakendusse, et suhelda selle andmebaasisüsteemiga. Lisaks saate pakutavaid funktsioone kohandada vastavalt oma rakenduse spetsiifilistele vajadustele.

Seadistage mõistete integreerimine

Notion pakub mitmeid integratsioone, mis võimaldavad teil lisada sisu või andmeid muudest tööriistadest, nagu Google Docs, otse Notioni andmebaasi. Kuid kohandatud rakenduste jaoks peate looma kohandatud integratsioonid, kasutades selle avalikku API-d.

Mõiste integratsiooni loomiseks järgige neid samme.

1. Suunduge poole Mõistete integreerimine veebilehele, registreeruge ja logige oma kontole sisse. Klõpsake integratsioonide ülevaatelehel Uus integratsioon uue üles seadmiseks.
2. Sisestage oma integratsioonile nimi, veenduge, et olete valinud õiged integreerimisvõimaluste seaded, ja klõpsake Esita. Need sätted määravad, kuidas teie rakendus Notioniga suhtleb.
3. Kopeerige kaasas olev salajane sisemise integratsiooni tunnus ja klõpsake Salvesta muudatused.

Loo mõistete andmebaas

Kui integratsioon on seadistatud, logige sisse oma Mõte tööruumi oma rakenduse jaoks andmebaasi loomiseks. Seejärel toimige järgmiselt.

1. Klõpsake nuppu Uus leht nuppu tööala Notion vasakpoolsel menüüpaanil.
2. Sisestage hüpikaknas oma andmebaasi nimi ja Notioni loodud tabel. Lõpuks lisage oma tabelisse vajalikud väljad, vajutades + nuppu tabeli päise jaotises.
3. Seejärel klõpsake nuppu Ava täislehena nuppu, et laiendada andmebaasi lehte lehe täitmiseks ja vaadata andmebaasi ID-d URL-is.
4. Reacti rakenduse andmebaasiga suhtlemiseks vajate andmebaasi ID-d. Andmebaasi ID on tähemärkide jada andmebaasi URL-is viimase kaldkriipsu (/) ja küsimärgi (?) vahel.
5. Lõpuks ühendage andmebaas oma integratsiooniga. See protsess annab integratsioonile juurdepääsu andmebaasile, et saaksite oma andmebaasi andmeid salvestada ja rakendusest React hankida.
6. Klõpsake oma andmebaasi lehel nuppu kolm punkti paremas ülanurgas andmebaasi sätete menüü avamiseks. Klõpsake menüü külgpaani allosas nuppu Lisage ühendused nuppu ning otsige ja valige oma integratsioon.

Looge Express server

Notion pakub klienditeeki, mis hõlbustab API-ga suhtlemist Expressi taustaserverist. Selle kasutamiseks looge kohapeal projektikaust, muutke praegune kataloog selle kausta vastu ja luua express.js veebiserver.

Selle projekti koodi leiate sellestGitHubi hoidla.

Järgmisena installige need paketid.

npm install @notionhq/client cors body-parser dotenv

CORS pakett võimaldab Expressi taustaprogrammil ja Reacti kliendil API lõpp-punktide kaudu andmeid vahetada. Sissetulevate HTTP-päringute töötlemiseks saate kasutada paketti body-parser. Sõelute kliendi JSON-i kasuliku koormuse, hangite konkreetsed andmed ja teete need andmed objektina kättesaadavaks atribuudis req.body. Lõpuks võimaldab dotenv pakett laadida keskkonnamuutujaid a-st .env faili oma taotluses.

Looge serverikausta juurkataloogis env-fail ja lisage allolev kood:

NOTION_INTEGRATION_TOKEN = "teie integratsiooni salamärk"
NOTION_DATABASE_ID = 'andmebaasi ID'

Seadistage Express Server

Ava index.js faili serveri projekti kausta ja lisage see kood:

konst väljendada = nõuda('väljendama');
konst {Klient} = nõuda('@notionhq/klient');
konst cors = nõuda('kors');
konst bodyParser = nõuda("kehaparser");
konst jsonParser = bodyParser.json();
konst port = protsess.env. PORT || 8000;
nõuda('dotenv').config();
konst rakendus = express();
app.use (cors());
konst authToken = process.env. NOTION_INTEGRATION_TOKEN;
konst mõisteDbID = process.env. NOTION_DATABASE_ID;
konst mõiste = uus Klient ({aut: authToken});
app.post('/NotionAPIPost', jsonParser, asünkr(req, res) => {
konst {täisnimi, ettevõtte roll, asukoht} = nõutav keha;
proovi { 
konst vastus = ootama notion.pages.create({
 vanem: {
 andmebaasi_id: mõisteDbID,
 },
 omadused: {
 Täisnimi: {
 pealkiri: [
 {
 tekst: {
 sisu: täisnimi
 },
 },
 ],
 },
 Ettevõtte roll: {
 rich_text: [
 {
 tekst: {
 sisu: CompanyRole
 },
 },
 ],
 },
 Asukoht: {
 rich_text: [
 {
 tekst: {
 sisu: Asukoht
 },
 },
 ],
 },
 },
 });
 res.send (vastus);
konsool.log("edu");
 } püüda (viga) {
konsool.log (viga);
 }
});
app.get('/NotionAPIGet', asünkr(req, res) => {
proovi { 
konst vastus = ootama notion.databases.query({
 andmebaasi_id: mõisteDbID, 
 sorteerib: [
 {
 ajatempel: 'created_time',
 suund: 'laskev',
 },
 ]
 });
 res.send (vastus);
konst {tulemused} = vastus;
konsool.log("edu");
 } püüda (viga) {
konsool.log (viga);
 }
});
app.listen (port, () => {
konsool.log('server kuulab pordis 8000!');
});

See kood teeb järgmist:

• Notioni klienditeek pakub võimalust suhelda Notioni API-ga ja teha erinevaid toiminguid, näiteks andmete lugemist ja kirjutamist andmebaasi.
• Klientmeetod loob objekti Notion uue eksemplari. See objekt initsialiseeritakse autentimisparameetriga, mis võtab autentimisloa ehk integreerimisloa.
• Kaks HTTP-meetodit – hankimine ja postitamine – esitavad päringuid Notioni API-le. Postitusmeetod võtab oma päisesse andmebaasi ID, mis määrab andmebaasi, kuhu loomismeetodi abil andmed kirjutada. Päringu sisu sisaldab ka uue lehe atribuute: salvestatavaid kasutajaandmeid.
• Hankimismeetod pärib ja hangib andmebaasist kasutajaandmeid ning sorteerib need nende loomise aja järgi.

Lõpuks keerake arendusserver üles kasutades Nodemon, Node.js monitor:

npm start

Reacti kliendi seadistamine

Projekti kausta juurkataloogis looge rakendus Reactja installige Axios. Kasutate seda teeki brauserist HTTP-päringute tegemiseks.

npm install axios

Rakendage API meetodid POST ja GET

Ava src/App.js faili, kustutage reageerimiskood ja asendage see selle koodiga:

importida Reageerige, { useState} alates'reageeri';
importida Axios alates"axios";
funktsiooniRakendus() {
konst [nimi, setName] = useState("");
konst [roll, setRole] = useState("");
konst [location, setLocation] = useState("");
konst [APIData, setAPIData] = useState([]);
konst käepideEsita = (e) => {
 e.preventDefault();
 Axios.post(' http://localhost: 8000/NotionAPIPost, {
 Täisnimi: nimi,
 Ettevõte Roll: roll,
 Asukoht: asukoht
 }).catch(viga => {
konsool.log (viga);
 });
 Axios.get(' http://localhost: 8000/NotionAPIGet')
 .hen(vastuseks => {
 setAPIData (response.data.results);
konsool.log (response.data.results);
 }).catch(viga => { 
konsool.log (viga);
 }); 
 };
tagasi (

"Rakendus">
"Rakenduse päis">
"vorm">


Eesnimi</p>
 tüüp="tekst"
 kohatäide="Eesnimi ..."
 onChange={(e) => {setName (e.target.value)}}
 />

Ettevõtte roll</p>
 tüüp="tekst"
 kohatäide = "Ettevõtte roll..."
 onChange={(e) => {setRole (e.target.value)}}
 />

 Ettevõtte roll</p>
 tüüp="tekst"
 kohatäide = "Asukoht..."
 onChange={(e) => {setLocation (e.target.value)}}
 />
"Esita">Esita</button>
 </form>
 </div>

"Andmed">
API ANDMED</p>
 {
 APIData.map((andmeid) => {
tagasi (



Nimi: {data.properties. Täisnimi.title[0].lihttekst}</p>

Roll: {data.properties. CompanyRole.rich_text[0].lihttekst}</p>

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




eksportidavaikimisi Rakendus;

See komponent renderdab vormi, mis võimaldab kasutajal esitada oma nime, rolli ja asukohateabe. See kasutab kasutaja sisendväärtuste salvestamiseks olekumuutujatesse konksu useState ja teeb seejärel POST-päringu serveripoolsele API-le, edastades kasutaja teabe pärast esitamisnupu vajutamist.

Eduka esitamise korral teeb see kood GET-päringu samale serveripoolsele API-le, et tuua äsja esitatud andmed. Lõpuks kaardistab see olekusse salvestatud allalaaditud andmed ja renderdab need olekusse API ANDMED jaotise vormi all.

Keerake üles Reacti arendusserver ja minge selle juurde http://localhost: 3000 brauseris tulemuste vaatamiseks.

Notioni kasutamine sisuhaldussüsteemina

Notion on uskumatult mitmekülgne tootlikkuse tööriist, mis lisaks andmete salvestamisele võib toimida ka teie rakenduste sisuhaldussüsteemina (CMS). Selle paindlik andmebaasisüsteem pakub redigeerimistööriistade ja haldusfunktsioonide komplekti, mis lihtsustavad teie rakenduse sisu haldamise protsessi.