A Notion API használata a React segítségével adatok tárolására egy Notion adatbázisban

A Notion termelékenységi funkciói egyre népszerűbbek mind az egyének, mind a szervezetek körében. Ezek a szolgáltatások lehetővé teszik a feladatok széles körének kezelését, a személyes adatok tárolásától a projektmunkafolyamatok kezeléséig. A Notion adatbázisrendszere ezt lehetővé teszi. Intuitív felületet biztosít, amely segít testreszabható tartalomkezelő rendszer létrehozásában.

A Notion funkciókban gazdag API-t biztosít, amelyet könnyedén integrálhat bármely alkalmazásba, hogy interakcióba lépjen az adatbázisrendszerével. Ezenkívül személyre szabhatja a biztosított funkcionalitást, hogy megfeleljen az alkalmazás speciális igényeinek.

Állítson be egy fogalomintegrációt

A Notion számos olyan integrációt biztosít, amelyek lehetővé teszik, hogy tartalmakat vagy adatokat más eszközökből, például a Google Dokumentumokból közvetlenül a Notion adatbázisba adjon hozzá. Az egyedileg készített alkalmazásokhoz azonban egyéni integrációkat kell létrehoznia a nyilvános API használatával.

Fogalomintegráció létrehozásához kövesse az alábbi lépéseket.

1. Irány oda A fogalom integrációja weboldalt, regisztráljon, és jelentkezzen be fiókjába. Az integrációk áttekintése oldalon kattintson a gombra Új integráció újat felállítani.
2. Adjon nevet az integrációnak, ellenőrizze, hogy az integrációs képességek megfelelő beállításai vannak-e kiválasztva, majd kattintson a Beküldés. Ezek a beállítások határozzák meg, hogy az alkalmazás hogyan működik együtt a Notionnal.
3. Másolja ki a titkos belső integrációs tokent, és kattintson a gombra Változtatások mentése.

Hozzon létre egy fogalomadatbázist

Az integráció beállítása után jelentkezzen be Fogalom munkaterület adatbázis létrehozásához az alkalmazáshoz. Ezután kövesse az alábbi lépéseket:

1. Kattints a Új oldal gombot a Fogalom munkaterület bal oldali menüpaneljén.
2. A felugró ablakban adja meg az adatbázis nevét és a Notion által beállított táblát. Végül a gomb megnyomásával adja hozzá a kívánt mezőket a táblázathoz + gombot a táblázat fejléc részén.
3. Ezután kattintson a Megnyitás teljes oldalként gombot az adatbázis-oldal kibontásához, hogy kitöltse az oldalt, és megtekinthesse az adatbázis-azonosítót az URL-en.
4. Szüksége lesz az adatbázis-azonosítóra, hogy interakcióba lépjen az adatbázissal a React alkalmazásból. Az adatbázis-azonosító az adatbázis URL-jében az utolsó perjel (/) és a kérdőjel (?) közötti karakterlánc.
5. Végül csatlakoztassa az adatbázist az integrációhoz. Ez a folyamat integrációs hozzáférést biztosít az adatbázishoz, így tárolhatja és lekérheti az adatbázisban lévő adatokat a React alkalmazásból.
6. Az adatbázis oldalán kattintson a három pont a jobb felső sarokban az adatbázis-beállítások menü megnyitásához. A menü oldalsó ablaktáblájának alján kattintson a Kapcsolatok hozzáadása gombot, és keresse meg és válassza ki az integrációt.

Hozzon létre egy Express szervert

A Notion olyan ügyfélkönyvtárat biztosít, amely megkönnyíti az API-val való interakciót egy backend Express kiszolgálóról. Használatához hozzon létre egy projektmappát helyileg, módosítsa az aktuális könyvtárat erre a mappára, majd hozzon létre egy express.js webszervert.

A projekt kódja megtalálható benneGitHub adattár.

Ezután telepítse ezeket a csomagokat.

npm install @notionhq/client cors body-parser dotenv

A CORS-csomag lehetővé teszi az Express háttér- és a React-ügyfél számára, hogy adatokat cseréljenek az API-végpontokon keresztül. A body-parser csomagot használhatja a bejövő HTTP-kérések feldolgozásához. Elemezni kell a JSON hasznos adatot az ügyféltől, le kell kérni az adott adatokat, és objektumként elérhetővé teszi az adatokat a req.body tulajdonságban. Végül a dotenv csomag lehetővé teszi a környezeti változók betöltését a .env fájlt a pályázatában.

A szervermappa gyökérkönyvtárában hozzon létre egy .env fájlt, és adja hozzá az alábbi kódot:

NOTION_INTEGRATION_TOKEN = "az Ön integrációs titkos tokenje"
NOTION_DATABASE_ID = "adatbázis azonosító"

Állítsa be az Express szervert

Nyissa meg a index.js fájlt a szerver projekt mappájába, és adja hozzá ezt a kódot:

const expressz = igényelnek('Expressz');
const {Client} = igényelnek("@notionhq/kliens");
const cors = igényelnek("cors");
const bodyParser = igényelnek("testelemző");
const jsonParser = bodyParser.json();
const port = process.env. PORT || 8000;
igényelnek("dotenv").config();
const app = express();
app.use (cors());
const authToken = process.env. NOTION_INTEGRATION_TOKEN;
const notionDbID = process.env. NOTION_ADATBÁZIS_ID;
const fogalom = új kliens ({auth: authToken});
app.post('/NotionAPIPost', jsonParser, async(req, res) => {
const {Teljes név, Vállalatszerep, Helyszín} = kért test;
próbáld ki { 
const válasz = várja notion.pages.create({
 szülő: {
 adatbázis_azonosítója: fogalmaDbID,
 },
 tulajdonságok: {
 Teljes név: {
 cím: [
 {
 szöveg: {
 tartalom: Teljes név
 },
 },
 ],
 },
 Cégszerep: {
 gazdag szöveg: [
 {
 szöveg: {
 tartalom: CompanyRole
 },
 },
 ],
 },
 Helyszín: {
 gazdag szöveg: [
 {
 szöveg: {
 tartalom: Helyszín
 },
 },
 ],
 },
 },
 });
 res.send (válasz);
konzol.log("siker");
 } fogás (hiba) {
konzol.log (hiba);
 }
});
app.get('/NotionAPIGet', async(req, res) => {
próbáld ki { 
const válasz = várja notion.databases.query({
 adatbázis_azonosítója: fogalmaDbID, 
 fajták: [
 {
 időbélyeg: 'created_time',
 irány: 'ereszkedő',
 },
 ]
 });
 res.send (válasz);
const {eredmények} = válasz;
konzol.log("siker");
 } fogás (hiba) {
konzol.log (hiba);
 }
});
app.listen (port, () => {
konzol.log('szerver figyel a 8000-es porton!');
});

Ez a kód a következőket teszi:

• A Notion klienskönyvtára lehetőséget biztosít a Notion API-val való interakcióra és különféle műveletek végrehajtására, például adatok beolvasására és az adatbázisba való írására.
• A kliens metódus létrehozza a Notion objektum új példányát. Ezt az objektumot egy hitelesítési paraméterrel inicializálják, amely egy hitelesítési tokent, az integrációs tokent veszi fel.
• A két HTTP metódus – a get és a post – kéréseket küld a Notion API-jának. A post metódus felvesz egy adatbázis-azonosítót a fejlécébe, amely megadja az adatbázist, amelybe a Create metódussal adatokat kell írni. A kérés törzse az új oldal tulajdonságait is tartalmazza: a tárolandó felhasználói adatokat.
• A get metódus lekérdezi és lekéri a felhasználói adatokat az adatbázisból, és a létrehozásuk időpontja szerint rendezi őket.

Végül pörgesse fel a fejlesztőkiszolgálót a segítségével Nodemon, a Node.js monitor:

npm start

React kliens beállítása

A projektmappa gyökérkönyvtárában hozzon létre egy React alkalmazást, és telepítse az Axiost. Ezt a könyvtárat fogja használni HTTP-kérések küldésére a böngészőből.

npm install axios

Alkalmazza a POST és a GET API módszert

Nyissa meg a src/App.js fájlban törölje a React kódot, és cserélje ki erre a kódra:

import Reakció, { useState} tól től'reagál';
import Axios tól től"axiók";
funkcióApp() {
const [name, setName] = useState("");
const [role, setRole] = useState("");
const [hely, setLocation] = useState("");
const [APIData, setAPIData] = useState([]);
const handleSubmit = (e) => {
 e.preventDefault();
 Axios.post(' http://localhost: 8000/NotionAPIPost, {
 Teljes név: név,
 Cégszerep: szerep,
 Helyszín: helyszín
 }).fogás(hiba => {
konzol.log (hiba);
 });
 Axios.get(' http://localhost: 8000/NotionAPIGet')
 .akkor(válasz => {
 setAPIData (response.data.results);
konzol.log (response.data.results);
 }).fogás(hiba => { 
konzol.log (hiba);
 }); 
 };
Visszatérés (

"Alkalmazás">
"Alkalmazás fejléc">
"forma">


Keresztnév</p>
 típus="szöveg"
 helyőrző="Keresztnév ..."
 onChange={(e) => {setName (e.target.value)}}
 />

Vállalati szerep</p>
 típus="szöveg"
 helyőrző = "Céges szerepkör..."
 onChange={(e) => {setRole (e.target.value)}}
 />

 Vállalati szerep</p>
 típus="szöveg"
 helyőrző = "Elhelyezkedés..."
 onChange={(e) => {setLocation (e.target.value)}}
 />
"Beküldés">Küldés</button>
 </form>
 </div>

"Adat">
API-ADATOK</p>
 {
 APIData.map((adat) => {
Visszatérés (



Név: {data.properties. Teljes név.title[0].plain_text}</p>

Szerep: {data.properties. CompanyRole.rich_text[0].plain_text}</p>

Helyszín: {data.properties. Location.rich_text[0].plain_text}</p> 
 </div>
 )
 })
 }
 </div>
 </header>
 </div>
 );
}




exportalapértelmezett App;

Ez az összetevő egy űrlapot jelenít meg, amely lehetővé teszi a felhasználó számára, hogy elküldje nevét, szerepkörét és helyadatait. A useState hook segítségével tárolja a felhasználó bemeneti értékeit az állapotváltozókban, majd POST kérést küld egy szerveroldali API-nak, és továbbítja a felhasználó adatait, miután megnyomta a küldés gombot.

Sikeres elküldés esetén ez a kód GET-kérést küld ugyanahhoz a szerveroldali API-hoz, hogy lekérje az imént elküldött adatokat. Végül leképezi a letöltött, állapotban tárolt adatokat, és leképezi azokat a API ADATOK részt az űrlap alatt.

Pörgesd fel a React fejlesztői szerverét, és menj oda http://localhost: 3000 a böngészőjében az eredmények megtekintéséhez.

A Notion használata tartalomkezelő rendszerként

A Notion egy hihetetlenül sokoldalú termelékenységi eszköz, amely az adattároláson kívül tartalomkezelő rendszerként (CMS) is szolgálhat alkalmazásaihoz. Rugalmas adatbázis-rendszere szerkesztőeszközöket és kezelési funkciókat kínál, amelyek leegyszerűsítik az alkalmazás tartalomkezelésének folyamatát.