Cum să utilizați API-ul Notion cu React pentru a stoca date într-o bază de date Notion

Caracteristicile de productivitate ale Notion au devenit din ce în ce mai populare atât pentru persoane fizice, cât și pentru organizații. Aceste caracteristici vă permit să gestionați o gamă largă de sarcini, de la stocarea datelor personale până la gestionarea fluxurilor de lucru ale proiectului. Sistemul de baze de date al Notion face acest lucru posibil. Oferă o interfață intuitivă pentru a vă ajuta să creați un sistem de management al conținutului personalizabil.

Notion oferă un API bogat în funcții pe care îl puteți integra cu ușurință în orice aplicație pentru a interacționa cu sistemul său de baze de date. În plus, puteți personaliza funcționalitatea furnizată pentru a se potrivi nevoilor specifice ale aplicației dvs.

Configurați o integrare a noțiunii

Notion oferă mai multe integrări care vă permit să adăugați conținut sau date din alte instrumente, cum ar fi Google Docs, direct într-o bază de date Notion. Cu toate acestea, pentru aplicațiile personalizate, va trebui să creați integrări personalizate folosind API-ul public.

Pentru a crea o integrare Notion, urmați acești pași.

1. Du-te la Integrarea noțiunii pagina web, înscrieți-vă și conectați-vă la contul dvs. Pe pagina de prezentare generală a integrărilor, faceți clic Noua integrare pentru a înființa unul nou.
2. Furnizați un nume pentru integrarea dvs., verificați pentru a vă asigura că ați selectat setările corecte ale capabilităților de integrare și faceți clic pe Trimite. Aceste setări definesc modul în care aplicația dumneavoastră interacționează cu Notion.
3. Copiați codul secret de integrare internă furnizat și faceți clic Salvează modificările.

Creați o bază de date de noțiuni

Cu integrarea configurată, conectați-vă la dvs Noţiune spațiu de lucru pentru a crea o bază de date pentru aplicația dvs. Apoi, urmați acești pași:

1. Apasă pe Pagina noua butonul din panoul de meniu din stânga al spațiului de lucru Notion.
2. În fereastra pop-up, furnizați numele bazei de date și tabelul configurat de Notion. În cele din urmă, adăugați câmpurile de care aveți nevoie în tabel apăsând butonul + butonul din secțiunea antet a tabelului dvs.
3. Apoi, faceți clic pe Deschideți ca pagină completă butonul pentru a extinde pagina bazei de date pentru a completa pagina și pentru a vedea ID-ul bazei de date pe adresa URL.
4. Veți avea nevoie de ID-ul bazei de date pentru a interacționa cu baza de date din aplicația dvs. React. ID-ul bazei de date este șirul de caractere din adresa URL a bazei de date între ultima bară oblică (/) și semnul întrebării (?).
5. În cele din urmă, conectați baza de date la integrarea dvs. Acest proces oferă acces de integrare la baza de date, astfel încât să puteți stoca și prelua date din baza de date din aplicația React.
6. Pe pagina bazei de date, faceți clic pe trei puncte în colțul din dreapta sus pentru a deschide meniul de setări a bazei de date. În partea de jos a panoului lateral al meniului, faceți clic pe Adăugați conexiuni butonul și căutați și selectați integrarea dvs.

Creați un server Express

Notion oferă o bibliotecă client care facilitează interacțiunea cu API-ul de pe un server Express backend. Pentru a-l utiliza, creați un folder de proiect local, schimbați directorul curent în acel folder și creați un server web express.js.

Puteți găsi codul acestui proiect în documentul săuDepozitul GitHub.

Apoi, instalați aceste pachete.

npm install @notionhq/client cors body-parser dotenv

Pachetul CORS permite backend-ului Express și clientului React să facă schimb de date prin punctele finale API. Puteți utiliza pachetul body-parser pentru a procesa solicitările HTTP primite. Veți analiza încărcătura utilă JSON de la client, veți prelua date specifice și veți face acele date disponibile ca obiect în proprietatea req.body. În cele din urmă, pachetul dotenv face posibilă încărcarea variabilelor de mediu din a .env dosar în aplicația dvs.

În directorul rădăcină al folderului serverului, creați un fișier .env și adăugați codul de mai jos:

NOTION_INTEGRATION_TOKEN = „indicativul tău secret de integrare”
NOTION_DATABASE_ID = „ID baza de date”

Configurați serverul Express

Deschide index.js fișier în folderul de proiect al serverului și adăugați acest cod:

const expres = cere('expres');
const {Client} = cere(„@notionhq/client”);
const cors = cere('cors');
const bodyParser = cere(„analizator-corp”);
const jsonParser = bodyParser.json();
const port = process.env. PORT || 8000;
cere('dotenv').config();
const aplicație = expres();
app.use (cors());
const authToken = process.env. NOTION_INTEGRATION_TOKEN;
const notionDbID = proces.env. NOTION_DATABASE_ID;
const noțiune = nou Client ({auth: authToken});
app.post(„/NotionAPIPost”, jsonParser, asincron(req, res) => {
const {Fullname, CompanyRole, Location} = req.body;
încerca { 
const răspuns = așteaptă notion.pages.create({
 părinte: {
 database_id: notionDbID,
 },
 proprietăți: {
 Numele complet: {
 titlu: [
 {
 text: {
 conținut: Nume complet
 },
 },
 ],
 },
 Rolul companiei: {
 text_bogat: [
 {
 text: {
 conținut: CompanyRole
 },
 },
 ],
 },
 Locație: {
 text_bogat: [
 {
 text: {
 conținut: locație
 },
 },
 ],
 },
 },
 });
 res.send (răspuns);
consolă.Buturuga("succes");
 } captură (eroare) {
consolă.log (eroare);
 }
});
app.get(„/NotionAPIGet”, asincron(req, res) => {
încerca { 
const răspuns = așteaptă notion.databases.query({
 database_id: notionDbID, 
 sortează: [
 {
 timestamp-ul: „timp_creat”,
 direcţie: 'Descendentă',
 },
 ]
 });
 res.send (răspuns);
const {rezultate} = răspuns;
consolă.Buturuga("succes");
 } captură (eroare) {
consolă.log (eroare);
 }
});
app.listen (port, () => {
consolă.Buturuga('server ascultă pe portul 8000!');
});

Acest cod face următoarele:

• Biblioteca client a Notion oferă o modalitate de a interacționa cu API-ul Notion și de a efectua diverse operațiuni, cum ar fi citirea și scrierea datelor în baza de date.
• Metoda client creează o nouă instanță a obiectului Notion. Acest obiect este inițializat cu un parametru de autentificare care ia un jeton de autentificare, jetonul de integrare.
• Cele două metode HTTP - obține și post - fac cereri către API-ul Notion. Metoda post include un ID de bază de date în antetul său care specifică baza de date în care să scrie datele folosind metoda create. Corpul cererii conține și proprietățile noii pagini: datele utilizatorului de stocat.
• Metoda get interogează și preia datele utilizatorului din baza de date și le sortează în funcție de momentul în care au fost create.

În cele din urmă, rotiți serverul de dezvoltare folosind Nodemon, monitorul Node.js:

npm start

Configurați un client React

În directorul rădăcină al folderului de proiect, creați o aplicație Reactși instalați Axios. Veți folosi această bibliotecă pentru a face solicitări HTTP din browser.

npm instalează axios

Implementați metodele API POST și GET

Deschide src/App.js fișier, ștergeți codul boilerplate React și înlocuiți-l cu acest cod:

import Reacționează, { useState} din'reacţiona';
import Axios din"axios";
funcţieApp() {
const [nume, setName] = useState("");
const [rol, setRole] = useState("");
const [locație, setLocation] = useState("");
const [APIData, setAPIData] = useState([]);
const handleSubmit = (e) => {
 e.preventDefault();
 Axios.post(' http://localhost: 8000/NotionAPIPost', {
 Nume complet: nume,
 Rolul companiei: rol,
 Locație: locație
 }).captură(eroare => {
consolă.log (eroare);
 });
 Axios.get(' http://localhost: 8000/NotionAPIGet')
 .apoi(raspuns => {
 setAPIData (response.data.results);
consolă.log (răspuns.date.rezultate);
 }).captură(eroare => { 
consolă.log (eroare);
 }); 
 };
întoarcere (

„Aplicație”>
„Aplicație-antet”>
"formă">


Prenume</p>
 tip="text"
 substituent="Nume ..."
 onChange={(e) => {setName (e.target.value)}}
 />

Rolul companiei</p>
 tip="text"
 substituent = "Rolul companiei..."
 onChange={(e) => {setRole (e.target.value)}}
 />

 Rolul companiei</p>
 tip="text"
 substituent = "Locație..."
 onChange={(e) => {setLocation (e.target.value)}}
 />
"Trimite">Trimite</button>
 </form>
 </div>

"Date">
DATE API</p>
 {
 APIData.map((date) => {
întoarcere (



Nume: {data.properties. Nume complet.titlu[0].text_plat}</p>

Rol: {data.properties. CompanyRole.rich_text[0].text_plat}</p>

Locație: {data.properties. Location.rich_text[0].text_plat}</p> 
 </div>
 )
 })
 }
 </div>
 </header>
 </div>
 );
}




exportMod implicit Aplicație;

Această componentă redă un formular care permite unui utilizator să-și trimită informațiile despre numele, rolul și locația. Utilizează useState hook pentru a stoca valorile de intrare ale utilizatorului în variabilele de stare și apoi face o solicitare POST către un API de pe partea serverului, transmițând informațiile utilizatorului odată ce acesta apasă butonul de trimitere.

După trimiterea cu succes, acest cod face o solicitare GET către același API de pe server pentru a prelua datele pe care tocmai le-a trimis. În cele din urmă, mapează peste datele preluate, stocate în stare și le redă în DATE API secțiunea de sub formular.

Porniți serverul de dezvoltare React și mergeți la http://localhost: 3000 pe browser pentru a vedea rezultatele.

Utilizarea Notion ca sistem de management al conținutului

Notion este un instrument de productivitate incredibil de versatil care, pe lângă stocarea datelor, poate servi ca sistem de management al conținutului (CMS) pentru aplicațiile dvs. Sistemul său de baze de date flexibil oferă un set de instrumente de editare și caracteristici de gestionare care simplifică procesul de gestionare a conținutului pentru aplicația dvs.