Čitatelia ako vy pomáhajú podporovať MUO. Keď uskutočníte nákup pomocou odkazov na našej stránke, môžeme získať pridruženú províziu. Čítaj viac.

Funkcie produktivity Notion sa stávajú čoraz obľúbenejšími pre jednotlivcov aj organizácie. Tieto funkcie vám umožňujú spravovať širokú škálu úloh, od ukladania osobných údajov až po správu pracovných postupov projektu. Databázový systém Notion to umožňuje. Poskytuje intuitívne rozhranie, ktoré vám pomôže vytvoriť prispôsobiteľný systém správy obsahu.

Notion poskytuje API bohaté na funkcie, ktoré môžete jednoducho integrovať do akejkoľvek aplikácie a interagovať s jej databázovým systémom. Okrem toho si môžete prispôsobiť poskytované funkcie tak, aby vyhovovali špecifickým potrebám vašej aplikácie.

Nastavte integráciu Notion

Notion poskytuje niekoľko integrácií, ktoré vám umožňujú pridávať obsah alebo údaje z iných nástrojov, ako napríklad Google Docs, priamo do databázy Notion. V prípade aplikácií vytvorených na mieru však budete musieť vytvoriť vlastné integrácie pomocou verejného rozhrania API.

instagram viewer

Ak chcete vytvoriť integráciu Notion, postupujte podľa týchto krokov.

  1. Zamierte k Integrácia pojmu webovú stránku, zaregistrujte sa a prihláste sa do svojho účtu. Na stránke s prehľadom integrácií kliknite na Nová integrácia založiť nový.
  2. Zadajte názov pre svoju integráciu, skontrolujte, či ste vybrali správne nastavenia integračných schopností, a kliknite Predložiť. Tieto nastavenia definujú, ako vaša aplikácia spolupracuje s Notion.
  3. Skopírujte poskytnutý tajný token internej integrácie a kliknite Uložiť zmeny.

Vytvorte databázu pojmov

Po nastavení integrácie sa prihláste do svojho Pojem pracovný priestor na vytvorenie databázy pre vašu aplikáciu. Potom postupujte podľa týchto krokov:

  1. Kliknite na Nová stránka na ľavej table ponuky vášho pracovného priestoru Notion.
  2. Vo vyskakovacom okne zadajte názov vašej databázy a tabuľku, ktorú vytvoril Notion. Nakoniec pridajte požadované polia do tabuľky stlačením tlačidla + v sekcii hlavičky tabuľky.
  3. Potom kliknite na Otvoriť ako celú stránku rozbaľte stránku databázy, aby ste vyplnili stránku, a zobrazte ID databázy na adrese URL.
  4. Na interakciu s databázou z aplikácie React budete potrebovať ID databázy. ID databázy je reťazec znakov v adrese URL databázy medzi poslednou lomkou (/) a otáznikom (?).
  5. Nakoniec pripojte databázu k svojej integrácii. Tento proces udeľuje integračný prístup k databáze, aby ste mohli ukladať a získavať údaje vo svojej databáze z aplikácie React.
  6. Na stránke databázy kliknite na tri bodky v pravom hornom rohu otvorte ponuku nastavení databázy. V spodnej časti bočného panela ponuky kliknite na Pridať pripojenia a vyhľadajte a vyberte svoju integráciu.

Vytvorte expresný server

Notion poskytuje klientsku knižnicu, ktorá uľahčuje interakciu s API z backendového expresného servera. Ak ho chcete použiť, vytvorte lokálny priečinok projektu, zmeňte aktuálny adresár na tento priečinok a vytvorte webový server express.js.

Kód tohto projektu nájdete v ňomúložisko GitHub.

Ďalej nainštalujte tieto balíčky.

npm install @notionhq/client cors body-parser dotenv

Balík CORS umožňuje backendu Express a klientovi React vymieňať si údaje cez koncové body API. Balík body-parser môžete použiť na spracovanie prichádzajúcich požiadaviek HTTP. Spracujete dátovú časť JSON z klienta, získate konkrétne údaje a tieto údaje sprístupníte ako objekt vo vlastnosti req.body. Nakoniec balík dotenv umožňuje načítať premenné prostredia z a .env súbor vo vašej aplikácii.

V koreňovom adresári priečinka servera vytvorte súbor .env a pridajte nižšie uvedený kód:

NOTION_INTEGRATION_TOKEN = „váš tajný token integrácie“
NOTION_DATABASE_ID = 'database ID'

Nastavte expresný server

Otvor index.js súbor v priečinku projektu servera a pridajte tento kód:

konšt vyjadriť = vyžadovať('expresné');
konšt {Client} = vyžadovať('@notionhq/client');
konšt kors = vyžadovať('cors');
konšt bodyParser = vyžadovať('body-parser');
konšt jsonParser = bodyParser.json();
konšt port = process.env. PORT || 8000;
vyžadovať('dotenv').config();

konšt app = express();
app.use (cors());

konšt authToken = process.env. NOTION_INTEGRATION_TOKEN;
konšt ideaDbID = process.env. NOTION_DATABASE_ID;
konšt predstava = Nový Zákazník ({auth: authToken});

app.post('/NotionAPIPost', jsonParser, async(req, res) => {
konšt {Celé meno, Rola spoločnosti, Miesto} = req.body;

skúste {
konšt odpoveď = čakať idea.pages.create({
rodič: {
Database_id: pojemDbID,
},
vlastnosti: {
Celé meno: {
názov: [
{
text: {
obsah: Celé meno
},
},
],
},
Rola spoločnosti: {
bohatý text: [
{
text: {
obsah: Role spoločnosti
},
},
],
},
Miesto: {
bohatý text: [
{
text: {
obsah: Miesto
},
},
],
},
},
});

znovu.odoslať (odpoveď);
konzoly.log("úspech");
} chytiť (chyba) {
konzoly.log (chyba);
}
});

app.get('/NotionAPIGet', async(req, res) => {
skúste {
konšt odpoveď = čakať pojem.databases.query({
Database_id: pojemDbID,
druhy: [
{
časová značka: 'created_time',
smer: 'zostupne',
},
]
});

znovu.odoslať (odpoveď);
konšt {vysledky} = odozva;
konzoly.log("úspech");
} chytiť (chyba) {
konzoly.log (chyba);
}
});

app.listen (port, () => {
konzoly.log("server počúva na porte 8000!");
});

Tento kód robí nasledovné:

  • Klientska knižnica Notion poskytuje spôsob interakcie s API Notion a vykonávania rôznych operácií, ako je čítanie a zápis údajov do vašej databázy.
  • Metóda klienta vytvorí novú inštanciu objektu Notion. Tento objekt je inicializovaný pomocou parametra auth, ktorý preberá autentifikačný token, integračný token.
  • Dve metódy HTTP – získať a odoslať – odosielajú požiadavky na rozhranie API spoločnosti Notion. Metóda post má vo svojej hlavičke ID databázy, ktoré špecifikuje databázu, do ktorej sa majú zapisovať údaje pomocou metódy create. Telo požiadavky obsahuje aj vlastnosti novej stránky: údaje používateľa, ktoré sa majú uložiť.
  • Metóda get zisťuje a získava používateľské údaje z databázy a triedi ich podľa času, kedy boli vytvorené.

Nakoniec roztočte vývojový server pomocou Nodemon, monitor Node.js:

npm štart

Nastavte si klienta React

V koreňovom adresári priečinka projektu vytvorte aplikáciu Reacta nainštalujte Axios. Túto knižnicu použijete na vytváranie požiadaviek HTTP z prehliadača.

npm nainštalujte axios

Implementujte metódy POST a GET API

Otvor src/App.js súbor, odstráňte štandardný kód reakcie a nahraďte ho týmto kódom:

importovať Reagovať, { useState} od'reagovať';
importovať Axios od"axios";

funkciuApp() {
konšt [name, setName] = useState("");
konšt [rola, setRole] = useState("");
konšt [location, setLocation] = useState("");
konšt [APIData, setAPIData] = useState([]);

konšt handleSubmit = (e) => {
e.preventDefault();

Axios.post(' http://localhost: 8000/NotionAPIPost', {
Celé meno: meno,
CompanyRole: rola,
Miesto: umiestnenie
}).catch(chyba => {
konzoly.log (chyba);
});

Axios.get(' http://localhost: 8000/NotionAPIGet')
.potom(odpoveď => {
setAPIData (response.data.results);
konzoly.log (response.data.results);
}).catch(chyba => {
konzoly.log (chyba);
});
};

vrátiť (

"aplikácia">
"Hlavička aplikácie">
"forma">

Krstné meno</p>

typ="text"
zástupný symbol ="Krstné meno ..."
onChange={(e) => {setName (e.target.value)}}
/>

Úloha spoločnosti</p>

typ="text"
zástupný symbol = "Rola spoločnosti..."
onChange={(e) => {setRole (e.target.value)}}
/>

Úloha spoločnosti</p>

typ="text"
zástupný symbol = "Umiestnenie..."
onChange={(e) => {setLocation (e.target.value)}}
/>

"údaje">

ÚDAJE API</p>
{
APIData.map((údajov) => {
vrátiť (


Názov: {data.properties. Celé meno.názov[0].plain_text}</p>

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

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

exportpredvolená App;

Tento komponent vykresľuje formulár, ktorý umožňuje používateľovi zadať svoje meno, rolu a informácie o polohe. Používa hák useState na uloženie vstupných hodnôt používateľa do stavových premenných a potom odošle požiadavku POST do API na strane servera, pričom po stlačení tlačidla odoslania odovzdá informácie o používateľovi.

Po úspešnom odoslaní tento kód odošle požiadavku GET na rovnaké rozhranie API na strane servera na získanie údajov, ktoré práve odoslal. Nakoniec mapuje získané údaje, uložené v stave, a vykresľuje ich v ÚDAJE API časť pod formulárom.

Roztočte vývojový server Reactu a zamierte na http://localhost: 3000 vo vašom prehliadači, aby ste videli výsledky.

Použitie Notion ako systému na správu obsahu

Notion je neuveriteľne všestranný nástroj produktivity, ktorý okrem ukladania dát môže slúžiť aj ako systém správy obsahu (CMS) pre vaše aplikácie. Jeho flexibilný databázový systém poskytuje sadu nástrojov na úpravu a funkcie správy, ktoré zjednodušujú proces správy obsahu pre vašu aplikáciu.