Funkcje produktywności Notion stają się coraz bardziej popularne zarówno wśród osób prywatnych, jak i organizacji. Funkcje te umożliwiają zarządzanie szerokim zakresem zadań, od przechowywania danych osobowych po zarządzanie przepływami pracy w projektach. Umożliwia to system baz danych Notion. Zapewnia intuicyjny interfejs, który pomaga stworzyć dostosowywalny system zarządzania treścią.
Notion zapewnia bogaty w funkcje interfejs API, który można łatwo zintegrować z dowolną aplikacją w celu interakcji z jej systemem baz danych. Co więcej, możesz dostosować udostępnianą funkcjonalność do specyficznych potrzeb Twojej aplikacji.
Skonfiguruj integrację pojęcia
Notion zapewnia kilka integracji, które umożliwiają dodawanie treści lub danych z innych narzędzi, takich jak Dokumenty Google, bezpośrednio do bazy danych Notion. Jednak w przypadku aplikacji niestandardowych konieczne będzie utworzenie niestandardowych integracji przy użyciu publicznego interfejsu API.
Aby utworzyć integrację Notion, wykonaj następujące kroki.
- Udaj się do Integracja pojęcia stronie internetowej, zarejestruj się i zaloguj na swoje konto. Na stronie przeglądu integracji kliknij Nowa integracja założyć nowy.
- Podaj nazwę swojej integracji, sprawdź, czy wybrałeś prawidłowe ustawienia możliwości integracji, i kliknij Składać. Te ustawienia określają sposób interakcji aplikacji z Notion.
- Skopiuj dostarczony tajny wewnętrzny token integracji i kliknij Zapisz zmiany.
Utwórz bazę danych pojęć
Po skonfigurowaniu integracji zaloguj się do swojego Pojęcie obszar roboczy, aby utworzyć bazę danych dla swojej aplikacji. Następnie wykonaj następujące kroki:
- Kliknij Nowa strona w lewym panelu menu obszaru roboczego Notion.
- W wyskakującym oknie podaj nazwę swojej bazy danych oraz tabelę utworzoną przez Notion. Na koniec dodaj wymagane pola do tabeli, naciskając przycisk + w sekcji nagłówka tabeli.
- Następnie kliknij Otwórz jako pełną stronę przycisk, aby rozwinąć stronę bazy danych, aby wypełnić stronę i wyświetlić identyfikator bazy danych w adresie URL.
- Będziesz potrzebować identyfikatora bazy danych do interakcji z bazą danych z aplikacji React. Identyfikator bazy danych to ciąg znaków w adresie URL bazy danych między ostatnim ukośnikiem (/) a znakiem zapytania (?).
- Na koniec podłącz bazę danych do swojej integracji. Ten proces zapewnia integracji dostęp do bazy danych, dzięki czemu możesz przechowywać i pobierać dane w swojej bazie danych z aplikacji React.
- Na stronie bazy danych kliknij przycisk trzy kropki w prawym górnym rogu, aby otworzyć menu ustawień bazy danych. U dołu panelu bocznego menu kliknij ikonę Dodaj połączenia i wyszukaj i wybierz swoją integrację.
Utwórz serwer ekspresowy
Notion udostępnia bibliotekę kliencką, która ułatwia interakcję z interfejsem API z zaplecza serwera Express. Aby z niego skorzystać, utwórz lokalnie folder projektu, zmień bieżący katalog na ten folder i utwórz serwer WWW express.js.
Możesz znaleźć kod tego projektu w jegoRepozytorium GitHub.
Następnie zainstaluj te pakiety.
npm install @notionhq/client cors body-parser dotenvPakiet CORS umożliwia backendowi Express i klientowi React wymianę danych przez punkty końcowe API. Możesz użyć pakietu body-parser do przetwarzania przychodzących żądań HTTP. Przeanalizujesz ładunek JSON od klienta, pobierzesz określone dane i udostępnisz te dane jako obiekt we właściwości req.body. Wreszcie pakiet dotenv umożliwia ładowanie zmiennych środowiskowych z pliku .env plik w swojej aplikacji.
W katalogu głównym folderu serwera utwórz plik .env i dodaj poniższy kod:
NOTION_INTEGRATION_TOKEN = „twój tajny token integracji”
IDENTYFIKATOR_NOTION_BAZY DANYCH = „identyfikator bazy danych”Skonfiguruj serwer ekspresowy
Otworzyć indeks.js plik w folderze projektu serwera i dodaj ten kod:
konst ekspres = wymagać('wyrazić');
konst {Klient} = wymagać(„@notionhq/klient”);
konst kors = wymagać(„kors”);
konst analizator ciała = wymagać(„parser ciała”);
konst jsonParser = bodyParser.json();
konst port = proces.env. PORT || 8000;
wymagać('dotenv'.config();konst aplikacja = ekspres();
app.use (cors());konst authToken = proces.env. NOTION_INTEGRATION_TOKEN;
konst ideaDbID = proces.env. NOTION_DATABASE_ID;
konst pojęcie = nowy Klient ({autoryzacja: authToken});aplikacja.post('/NotionAPIPost', jsonParser, asynchroniczny(wymaganie, res) => {
konst {Imię i nazwisko, Rola firmy, Lokalizacja} = req.body;próbować {
konst odpowiedź = czekać na idea.pages.create({
rodzic: {
database_id: pojęcieDbID,
},
nieruchomości: {
Imię i nazwisko: {
tytuł: [
{
tekst: {
treść: Imię i nazwisko
},
},
],
},
FirmaRola: {
bogaty_tekst: [
{
tekst: {
treść: FirmaRola
},
},
],
},
Lokalizacja: {
bogaty_tekst: [
{
tekst: {
treść: Lokalizacja
},
},
],
},
},
});res.send (odpowiedź);
konsola.dziennik("powodzenie");
} złapać (błąd) {
konsola.log (błąd);
}
});aplikacja.pobierz('/NotionAPIGet', asynchroniczny(wymaganie, res) => {
próbować {
konst odpowiedź = czekać na idea.databases.query({
database_id: pojęcieDbID,
sortuje: [
{
znak czasu: „czas utworzenia”,
kierunek: „zstępujący”,
},
]
});res.send (odpowiedź);
konst {wyniki} = odpowiedź;
konsola.dziennik("powodzenie");
} złapać (błąd) {
konsola.log (błąd);
}
});
app.listen (port, () => {
konsola.dziennik('serwer nasłuchuje na porcie 8000!');
});
Ten kod wykonuje następujące czynności:
- Biblioteka klienta Notion umożliwia interakcję z interfejsem API Notion i wykonywanie różnych operacji, takich jak odczytywanie i zapisywanie danych w bazie danych.
- Metoda klienta tworzy nową instancję obiektu Notion. Ten obiekt jest inicjowany z parametrem auth, który pobiera token uwierzytelniania, token integracji.
- Dwie metody HTTP — get i post — wysyłają żądania do interfejsu API Notion. Metoda post pobiera w swoim nagłówku identyfikator bazy danych, który określa bazę danych, do której mają zostać zapisane dane przy użyciu metody create. Treść żądania zawiera również właściwości nowej strony: dane użytkownika do zapisania.
- Metoda get wysyła zapytanie i pobiera dane użytkownika z bazy danych oraz sortuje je według czasu ich utworzenia.
Na koniec uruchom serwer deweloperski za pomocą Nodemon, monitor Node.js:
np startSkonfiguruj klienta React
W katalogu głównym folderu projektu, stworzyć aplikację Reacti zainstaluj Axios. Będziesz używać tej biblioteki do wysyłania żądań HTTP z przeglądarki.
npm zainstaluj osieZaimplementuj metody API POST i GET
Otworzyć src/App.js plik, usuń kod React na płycie głównej i zastąp go tym kodem:
import Reaguj, { useState} z'reagować';
import Aksjos z„osi”;funkcjonowaćAplikacja() {
konst [nazwa, setName] = useState("");
konst [rola, ustawRolę] = useState("");
konst [lokalizacja, setLocation] = useState("");
konst [APIDatane, setAPIDatane] = useState([]);konst uchwyt Prześlij = (mi) => {
e.preventDefault();Axios.post(' http://localhost: 8000/NotionAPIPost”, {
Imię i nazwisko: imię,
FirmaRola: rola,
Lokalizacja: lokalizacja
}).złapać(błąd => {
konsola.log (błąd);
});Axios.get(' http://localhost: 8000/NotionAPIGet”)
.Następnie(odpowiedź => {
setAPIData (odpowiedź.dane.wyniki);
konsola.log (odpowiedź.dane.wyniki);
}).złapać(błąd => {
konsola.log (błąd);
});
};powrót (
„Aplikacja”>„Nagłówek aplikacji”> "formularz">
eksportdomyślny Aplikacja;
Ten komponent renderuje formularz, który pozwala użytkownikowi przesłać swoje imię i nazwisko, rolę i informacje o lokalizacji. Używa haka useState do przechowywania wartości wejściowych użytkownika w zmiennych stanu, a następnie wysyła żądanie POST do API po stronie serwera, przekazując informacje użytkownika po naciśnięciu przycisku wysyłania.
Po pomyślnym przesłaniu ten kod wysyła żądanie GET do tego samego interfejsu API po stronie serwera w celu pobrania właśnie przesłanych danych. Na koniec mapuje pobrane dane, przechowywane w stanie i renderuje je w formacie DANE API sekcja pod formularzem.
Uruchom serwer programistyczny React i przejdź do http://localhost: 3000 w przeglądarce, aby wyświetlić wyniki.
Używanie Notion jako systemu zarządzania treścią
Notion to niezwykle wszechstronne narzędzie produktywności, które oprócz przechowywania danych może służyć jako system zarządzania treścią (CMS) dla Twoich aplikacji. Elastyczny system baz danych zapewnia zestaw narzędzi do edycji i funkcji zarządzania, które upraszczają proces zarządzania treścią aplikacji.