Funkce produktivity Notion se stávají stále oblíbenějšími jak pro jednotlivce, tak pro organizace. Tyto funkce umožňují spravovat širokou škálu úkolů, od ukládání osobních údajů až po správu pracovních postupů projektu. Databázový systém Notion to umožňuje. Poskytuje intuitivní rozhraní, které vám pomůže vytvořit přizpůsobitelný systém správy obsahu.
Notion poskytuje rozhraní API s bohatými funkcemi, které můžete snadno integrovat do jakékoli aplikace pro interakci s jejím databázovým systémem. Kromě toho si můžete přizpůsobit poskytované funkce tak, aby vyhovovaly specifickým potřebám vaší aplikace.
Nastavte integraci Notion
Notion poskytuje několik integrací, které vám umožňují přidávat obsah nebo data z jiných nástrojů, jako jsou Dokumenty Google, přímo do databáze Notion. U aplikací vytvořených na zakázku však budete muset vytvořit vlastní integrace pomocí veřejného rozhraní API.
Chcete-li vytvořit integraci Notion, postupujte takto.
- Zamiřte k Integrace pojmu webovou stránku, zaregistrujte se a přihlaste se ke svému účtu. Na stránce s přehledem integrací klikněte na Nová integrace založit nový.
- Zadejte název své integrace, zkontrolujte, zda jste vybrali správná nastavení integračních funkcí, a klikněte Předložit. Tato nastavení definují, jak vaše aplikace spolupracuje s Notion.
- Zkopírujte poskytnutý tajný token interní integrace a klikněte Uložit změny.
Vytvořte databázi pojmů
Po nastavení integrace se přihlaste do svého Představa pracovní prostor k vytvoření databáze pro vaši aplikaci. Poté postupujte takto:
- Klikněte na Nová stránka v levém podokně nabídky vašeho pracovního prostoru Notion.
- Ve vyskakovacím okně zadejte název databáze a tabulku nastavenou Notion. Nakonec přidejte požadovaná pole do tabulky stisknutím tlačítka + v záhlaví vaší tabulky.
- Poté klikněte na Otevřít jako celou stránku tlačítko pro rozbalení stránky databáze a vyplnění stránky a zobrazení ID databáze na adrese URL.
- K interakci s databází z aplikace React budete potřebovat ID databáze. ID databáze je řetězec znaků v adrese URL databáze mezi posledním lomítkem (/) a otazníkem (?).
- Nakonec připojte databázi k vaší integraci. Tento proces uděluje integrační přístup k databázi, takže můžete ukládat a získávat data ve vaší databázi z aplikace React.
- Na stránce databáze klikněte na tři tečky v pravém horním rohu otevřete nabídku nastavení databáze. V dolní části postranního panelu nabídky klikněte na Přidat připojení a vyhledejte a vyberte svou integraci.
Vytvořte expresní server
Notion poskytuje klientskou knihovnu, která usnadňuje interakci s API z backendového Express serveru. Chcete-li jej použít, vytvořte lokálně složku projektu, změňte aktuální adresář na tuto složku a vytvořit webový server express.js.
Kód tohoto projektu najdete v němúložiště GitHub.
Dále nainstalujte tyto balíčky.
npm install @notionhq/client cors body-parser dotenvBalíček CORS umožňuje backendu Express a klientovi React vyměňovat si data prostřednictvím koncových bodů API. Ke zpracování příchozích požadavků HTTP můžete použít balíček body-parser. Z klienta analyzujete datovou část JSON, načtete konkrétní data a zpřístupníte tato data jako objekt ve vlastnosti req.body. A konečně, balíček dotenv umožňuje načíst proměnné prostředí z a .env soubor ve vaší aplikaci.
V kořenovém adresáři složky serveru vytvořte soubor .env a přidejte níže uvedený kód:
NOTION_INTEGRATION_TOKEN = 'váš tajný token integrace'
NOTION_DATABASE_ID = 'ID databáze'Nastavte expresní server
Otevři index.js soubor ve složce projektu serveru a přidejte tento kód:
konst vyjádřit = vyžadovat('vyjádřit');
konst {Klient} = vyžadovat('@notionhq/client');
konst kors = vyžadovat('cors');
konst bodyParser = vyžadovat('body-parser');
konst jsonParser = bodyParser.json();
konst port = proces.env. PORT || 8000;
vyžadovat('dotenv').config();konst app = express();
app.use (cors());konst authToken = process.env. NOTION_INTEGRATION_TOKEN;
konst ideaDbID = process.env. NOTION_DATABASE_ID;
konst představa = Nový Klient ({auth: authToken});app.post('/NotionAPIPost', jsonParser, asynchronní(req, res) => {
konst {Celé jméno, Role společnosti, Místo} = req.body;Snaž se {
konst odpověď = čekat idea.pages.create({
rodič: {
Database_id: ideaDbID,
},
vlastnosti: {
Celé jméno: {
název: [
{
text: {
obsah: Celé jméno
},
},
],
},
Role společnosti: {
bohatý text: [
{
text: {
obsah: CompanyRole
},
},
],
},
Místo: {
bohatý text: [
{
text: {
obsah: Umístění
},
},
],
},
},
});znovu.odeslat (odpověď);
řídicí panel.log("úspěch");
} chytit (chyba) {
řídicí panel.log (chyba);
}
});app.get('/NotionAPIGet', asynchronní(req, res) => {
Snaž se {
konst odpověď = čekat idea.databases.query({
Database_id: ideaDbID,
řadí: [
{
časové razítko: 'created_time',
směr: 'klesající',
},
]
});znovu.odeslat (odpověď);
konst {vysledky} = odezva;
řídicí panel.log("úspěch");
} chytit (chyba) {
řídicí panel.log (chyba);
}
});
app.listen (port, () => {
řídicí panel.log('server naslouchá na portu 8000!');
});
Tento kód dělá následující:
- Klientská knihovna Notion poskytuje způsob interakce s rozhraním Notion API a provádění různých operací, jako je čtení a zápis dat do vaší databáze.
- Metoda klienta vytvoří novou instanci objektu Notion. Tento objekt je inicializován parametrem auth, který přebírá ověřovací token, integrační token.
- Dvě metody HTTP – get a post – zasílají požadavky na Notion API. Metoda post má ve své hlavičce ID databáze, které určuje databázi, do které se mají zapisovat data pomocí metody create. Tělo požadavku také obsahuje vlastnosti nové stránky: uživatelská data k uložení.
- Metoda get se dotazuje a načítá uživatelská data z databáze a třídí je podle času, kdy byly vytvořeny.
Nakonec roztočte vývojový server pomocí Nodemon, monitor Node.js:
npm startNastavte klienta React
V kořenovém adresáři složky vašeho projektu vytvořit aplikaci Reacta nainstalujte Axios. Tuto knihovnu budete používat k vytváření požadavků HTTP z prohlížeče.
npm nainstalovat axiosImplementujte metody POST a GET API
Otevři src/App.js soubor, odstraňte standardní kód React a nahraďte jej tímto kódem:
import Reagovat, { useState} z'reagovat';
import Axios z'axios';funkceAplikace() {
konst [name, setName] = useState("");
konst [role, setRole] = useState("");
konst [location, setLocation] = useState("");
konst [APIData, setAPIData] = useState([]);konst handleSubmit = (E) => {
e.preventDefault();Axios.post(' http://localhost: 8000/NotionAPIPost', {
Celé jméno: jméno,
CompanyRole: role,
Umístění: umístění
}).chytit(chyba => {
řídicí panel.log (chyba);
});Axios.get(' http://localhost: 8000/NotionAPIGet')
.pak(Odezva => {
setAPIData (response.data.results);
řídicí panel.log (response.data.results);
}).chytit(chyba => {
řídicí panel.log (chyba);
});
};vrátit se (
"Aplikace">"Záhlaví aplikace"> "formulář">
vývoznívýchozí Aplikace;
Tato komponenta vykresluje formulář, který umožňuje uživateli odeslat své jméno, roli a informace o umístění. Používá háček useState k uložení vstupních hodnot uživatele do stavových proměnných a poté odešle požadavek POST do rozhraní API na straně serveru a předá informace o uživateli, jakmile stiskne tlačítko Odeslat.
Po úspěšném odeslání tento kód odešle požadavek GET na stejné rozhraní API na straně serveru k načtení dat, která právě odeslal. Nakonec mapuje načtená data, uložená ve stavu, a vykresluje je v DATA API sekce pod formulářem.
Roztočte vývojový server Reactu a zamiřte na něj http://localhost: 3000 ve vašem prohlížeči pro zobrazení výsledků.
Použití Notion jako systému pro správu obsahu
Notion je neuvěřitelně všestranný nástroj produktivity, který kromě ukládání dat může sloužit jako systém pro správu obsahu (CMS) pro vaše aplikace. Jeho flexibilní databázový systém poskytuje sadu editačních nástrojů a funkcí pro správu, které zjednodušují proces správy obsahu pro vaši aplikaci.
