Kaip naudoti „Notion“ API su „React“ ir saugoti duomenis „Notion“ duomenų bazėje

„Notion“ produktyvumo funkcijos tapo vis populiaresnės tiek asmenims, tiek organizacijoms. Šios funkcijos leidžia valdyti daugybę užduočių – nuo ​​asmens duomenų saugojimo iki projekto darbo eigos valdymo. „Notion“ duomenų bazių sistema tai leidžia. Tai intuityvi sąsaja, padedanti sukurti tinkinamą turinio valdymo sistemą.

„Notion“ suteikia daug funkcijų turinčią API, kurią galite lengvai integruoti į bet kurią programą, kad galėtumėte sąveikauti su jos duomenų bazių sistema. Be to, galite pritaikyti teikiamas funkcijas, kad jos atitiktų konkrečius jūsų programos poreikius.

Nustatykite sąvokų integravimą

„Notion“ suteikia keletą integracijų, leidžiančių tiesiogiai į „Notion“ duomenų bazę įtraukti turinį arba duomenis iš kitų įrankių, pvz., „Google“ dokumentų. Tačiau pagal užsakymą sukurtoms programoms turėsite sukurti pasirinktines integracijas naudodami viešąją API.

Norėdami sukurti sąvokos integravimą, atlikite šiuos veiksmus.

1. Eikite į Sąvokos integracija tinklalapį, prisiregistruokite ir prisijunkite prie savo paskyros. Integracijų apžvalgos puslapyje spustelėkite Nauja integracija įsteigti naują.
2. Pateikite integravimo pavadinimą, patikrinkite, ar pasirinkote teisingus integravimo galimybių nustatymus, ir spustelėkite Pateikti. Šie nustatymai apibrėžia, kaip jūsų programa sąveikauja su „Notion“.
3. Nukopijuokite pateiktą slaptą vidinės integracijos prieigos raktą ir spustelėkite Išsaugoti pakeitimus.

Sukurkite sąvokų duomenų bazę

Nustatę integraciją prisijunkite prie savo Sąvoka darbo sritį, kad sukurtumėte savo programos duomenų bazę. Tada atlikite šiuos veiksmus:

1. Spustelėkite Naujas puslapis mygtuką kairiojoje sąvokos darbo srities meniu srityje.
2. Iššokančiajame lange pateikite savo duomenų bazės pavadinimą ir „Notion“ nustatytą lentelę. Galiausiai pridėkite reikiamus laukus į lentelę paspausdami + mygtuką lentelės antraštės skiltyje.
3. Tada spustelėkite Atidaryti kaip visą puslapį mygtuką, norėdami išplėsti duomenų bazės puslapį, kad užpildytumėte puslapį, ir peržiūrėti duomenų bazės ID URL.
4. Jums reikės duomenų bazės ID, kad galėtumėte sąveikauti su duomenų baze iš „React“ programos. Duomenų bazės ID yra simbolių eilutė duomenų bazės URL tarp paskutinio pasvirojo brūkšnio (/) ir klaustuko (?).
5. Galiausiai prijunkite duomenų bazę prie integracijos. Šis procesas suteikia integravimo prieigą prie duomenų bazės, kad galėtumėte saugoti ir gauti duomenis savo duomenų bazėje iš programos „React“.
6. Savo duomenų bazės puslapyje spustelėkite trys taškai viršutiniame dešiniajame kampe, kad atidarytumėte duomenų bazės nustatymų meniu. Meniu šoninės srities apačioje spustelėkite Pridėti jungtis mygtuką ir ieškokite bei pasirinkite savo integraciją.

Sukurkite Express serverį

„Notion“ suteikia kliento biblioteką, kuri leidžia lengvai sąveikauti su API iš galinio „Express“ serverio. Norėdami jį naudoti, sukurkite projekto aplanką vietoje, pakeiskite dabartinį katalogą į tą aplanką ir sukurti express.js žiniatinklio serverį.

Šio projekto kodą galite rasti jameGitHub saugykla.

Tada įdiekite šiuos paketus.

npm įdiegti @notionhq/client cors body-parser dotenv

CORS paketas leidžia „Express backend“ ir „React“ klientui keistis duomenimis per API galinius taškus. Norėdami apdoroti gaunamas HTTP užklausas, galite naudoti turinio analizavimo paketą. Išanalizuojate JSON naudingą apkrovą iš kliento, nuskaitysite konkrečius duomenis ir padarysite tuos duomenis pasiekiamus kaip objektą ypatybėje req.body. Galiausiai dotenv paketas leidžia įkelti aplinkos kintamuosius iš a .env failą savo paraiškoje.

Serverio aplanko šakniniame kataloge sukurkite .env failą ir pridėkite toliau pateiktą kodą:

NOTION_INTEGRATION_TOKEN = „jūsų integracijos slaptasis prieigos raktas“
NOTION_DATABASE_ID = "duomenų bazės ID"

Nustatykite Express serverį

Atidaryk index.js failą serverio projekto aplanke ir pridėkite šį kodą:

konst išreikšti = reikalauti("išreikšti");
konst {Klientas} = reikalauti(„@notionhq/client“);
konst cors = reikalauti("cors");
konst bodyParser = reikalauti("kūno analizatorius");
konst jsonParser = bodyParser.json();
konst prievadas = procesas.env. UOSTAS || 8000;
reikalauti('dotenv'.config();
konst programa = express ();
app.use (cors());
konst authToken = process.env. NOTION_INTEGRATION_TOKEN;
konst notionDbID = process.env. NOTION_DATABASE_ID;
konst sąvoka = naujas Klientas ({aut: authToken});
app.post(„/NotionAPIPost“, jsonParser, async(req, res) => {
konst {Fullname, CompanyRole, Location} = req.body;
bandyti { 
konst atsakymas = laukti notion.pages.create({
 tėvas: {
 duomenų bazės_id: notionDbID,
 },
 savybės: {
 Pilnas vardas: {
 pavadinimas: [
 {
 tekstas: {
 turinys: Pilnas vardas
 },
 },
 ],
 },
 Įmonės vaidmuo: {
 turiningas tekstas: [
 {
 tekstas: {
 turinys: Įmonės vaidmuo
 },
 },
 ],
 },
 Vieta: {
 turiningas tekstas: [
 {
 tekstas: {
 turinys: Vieta
 },
 },
 ],
 },
 },
 });
 res.send (atsakymas);
konsolė.log("sėkmė");
 } sugauti (klaida) {
konsolė.log (klaida);
 }
});
app.get(„/NotionAPIGet“, async(req, res) => {
bandyti { 
konst atsakymas = laukti notion.databases.query({
 duomenų bazės_id: notionDbID, 
 Rūšiuoti: [
 {
 laiko žyma: 'created_time',
 kryptis: "nusileidžiantis",
 },
 ]
 });
 res.send (atsakymas);
konst {rezultatai} = atsakymas;
konsolė.log("sėkmė");
 } sugauti (klaida) {
konsolė.log (klaida);
 }
});
app.listen (port, () => {
konsolė.log('serveris klausosi 8000 prievado!');
});

Šis kodas atlieka šiuos veiksmus:

• „Notion“ kliento biblioteka suteikia galimybę sąveikauti su „Notion“ API ir atlikti įvairias operacijas, tokias kaip duomenų skaitymas ir įrašymas į duomenų bazę.
• Kliento metodas sukuria naują objekto Notion egzempliorių. Šis objektas inicijuojamas naudojant autentifikavimo parametrą, kuris paima autentifikavimo prieigos raktą, integravimo prieigos raktą.
• Du HTTP metodai – gauti ir paskelbti – pateikia užklausas Notion API. Paskelbimo metodas savo antraštėje įveda duomenų bazės ID, kuris nurodo duomenų bazę, į kurią reikia įrašyti duomenis naudojant kūrimo metodą. Užklausos turinyje taip pat yra naujo puslapio ypatybės: saugomi vartotojo duomenys.
• Gauti metodas pateikia užklausas ir nuskaito vartotojo duomenis iš duomenų bazės ir surūšiuoja juos pagal jų sukūrimo laiką.

Galiausiai sukite kūrimo serverį naudodami Nodemon, Node.js monitorius:

npm pradžia

Nustatykite „React“ klientą

Projekto aplanko šakniniame kataloge sukurti „React“ programąir įdiekite „Axios“. Šią biblioteką naudosite HTTP užklausoms iš naršyklės pateikti.

npm įdiegti axios

Įdiekite POST ir GET API metodus

Atidaryk src/App.js failą, ištrinkite „React“ kodą ir pakeiskite jį šiuo kodu:

importuoti Reaguoti, { useState} iš'reaguoti';
importuoti Axios iš"aksios";
funkcijaProgramėlė() {
konst [vardas, setName] = useState("");
konst [role, setRole] = useState("");
konst [location, setLocation] = useState("");
konst [APIData, setAPIData] = useState([]);
konst rankenaPateikti = (e) => {
 e.preventDefault();
 Axios.post(' http://localhost: 8000/NotionAPIPost“, {
 Pilnas vardas: vardas,
 Įmonės vaidmuo: vaidmuo,
 Vieta: vieta
 }).catch(klaida => {
konsolė.log (klaida);
 });
 Axios.get(' http://localhost: 8000/NotionAPIGet')
 .thena(atsakymą => {
 setAPIData (response.data.results);
konsolė.log (response.data.results);
 }).catch(klaida => { 
konsolė.log (klaida);
 }); 
 };
grąžinti (

"Programėlė">
"Programos antraštė">
"forma">


Vardas </p>
 tipas ="tekstas"
 vietos rezervuaras="Pirmas vardas ..."
 onChange={(e) => {setName (e.target.value)}}
 />

Įmonės vaidmuo</p>
 tipas ="tekstas"
 vietos rezervavimo priemonė = „Įmonės vaidmuo...“
 onChange={(e) => {setRole (e.target.value)}}
 />

 Įmonės vaidmuo</p>
 tipas ="tekstas"
 vietos rezervavimo priemonė = „Vieta...“
 onChange={(e) => {setLocation (e.target.value)}}
 />
"Pateikti">Pateikti</button>
 </form>
 </div>

"Duomenys">
API DUOMENYS</p>
 {
 APIData.map((duomenis) => {
grąžinti (



Pavadinimas: {data.properties. Pilnas vardas.title[0].paprastas_tekstas}</p>

Vaidmuo: {data.properties. CompanyRole.rich_text[0].paprastas_tekstas}</p>

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




eksportuotinumatytas Programėlė;

Šis komponentas pateikia formą, leidžiančią vartotojui pateikti savo vardą, vaidmenį ir informaciją apie vietą. Jis naudoja „useState hook“, kad saugotų vartotojo įvesties reikšmes būsenos kintamuosiuose, o tada pateikia POST užklausą serverio API, perduodant vartotojo informaciją, kai tik jis paspaudžia mygtuką „Pateikti“.

Sėkmingai pateikus, šis kodas pateikia GET užklausą tai pačiai serverio API, kad gautų ką tik pateiktus duomenis. Galiausiai, jis susieja gautus duomenis, saugomus būsenoje, ir pateikia juos API DUOMENYS skyrių po forma.

Pasukite „React“ kūrimo serverį ir eikite į http://localhost: 3000 naršyklėje, kad peržiūrėtumėte rezultatus.

„Notion“ naudojimas kaip turinio valdymo sistema

„Notion“ yra neįtikėtinai universalus produktyvumo įrankis, kuris, be duomenų saugojimo, gali būti jūsų programų turinio valdymo sistema (TVS). Lanksti duomenų bazių sistema suteikia redagavimo įrankių ir valdymo funkcijų rinkinį, kuris supaprastina programos turinio valdymo procesą.