Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

Продуктивните функции на Notion стават все по-популярни както за отделни лица, така и за организации. Тези функции ви позволяват да управлявате широк набор от задачи, от съхраняване на лични данни до управление на работни потоци на проекти. Системата от бази данни на Notion прави това възможно. Той предоставя интуитивен интерфейс, за да ви помогне да създадете персонализирана система за управление на съдържанието.

Notion предоставя богат на функции API, който можете лесно да интегрирате във всяко приложение, за да взаимодействате с неговата система от бази данни. Освен това можете да персонализирате предоставената функционалност, за да отговаря на специфичните нужди на вашето приложение.

Настройте интеграция на концепция

Notion предоставя няколко интеграции, които ви позволяват да добавяте съдържание или данни от други инструменти като Google Docs директно в база данни на Notion. Въпреки това, за създадени по поръчка приложения, ще трябва да създадете персонализирани интеграции, като използвате неговия публичен API.

instagram viewer

За да създадете интеграция на Notion, следвайте тези стъпки.

  1. Насочете се към Интеграция на Notion уеб страница, регистрирайте се и влезте в акаунта си. Щракнете върху страницата с преглед на интеграциите Нова интеграция за създаване на нов.
  2. Въведете име за вашата интеграция, проверете дали сте избрали правилните настройки на възможностите за интеграция и щракнете върху Изпращане. Тези настройки определят как вашето приложение взаимодейства с Notion.
  3. Копирайте предоставения секретен токен за вътрешна интеграция и щракнете Запазите промените.

Създайте база данни с идеи

След като интеграцията е настроена, влезте във вашия понятие работно пространство за създаване на база данни за вашето приложение. След това изпълнете следните стъпки:

  1. Щракнете върху Нова страница в левия панел на менюто на вашето работно пространство Notion.
  2. В изскачащия прозорец въведете името на вашата база данни и таблицата, създадена от Notion. Накрая добавете необходимите полета към вашата таблица, като натиснете + в заглавната част на вашата таблица.
  3. След това щракнете върху Отворете като цяла страница бутон, за да разгънете страницата на базата данни, за да запълните страницата, и да видите ИД на базата данни в URL адреса.
  4. Ще ви трябва ID на базата данни, за да взаимодействате с базата данни от вашето приложение React. Идентификаторът на базата данни е низът от знаци в URL адреса на базата данни между последната наклонена черта (/) и въпросителния знак (?).
  5. Накрая свържете базата данни към вашата интеграция. Този процес предоставя интеграционен достъп до базата данни, така че да можете да съхранявате и извличате данни във вашата база данни от приложението React.
  6. На страницата на вашата база данни щракнете върху три точки в горния десен ъгъл, за да отворите менюто с настройки на базата данни. В долната част на страничния панел на менюто щракнете върху Добавяне на връзки и потърсете и изберете вашата интеграция.

Създайте експресен сървър

Notion предоставя клиентска библиотека, която улеснява взаимодействието с API от backend Express сървър. За да го използвате, създайте папка на проекта локално, променете текущата директория на тази папка и създайте уеб сървър express.js.

Можете да намерите кода на този проект в негоGitHub хранилище.

След това инсталирайте тези пакети.

npm инсталирайте @notionhq/client cors body-parser dotenv

Пакетът CORS позволява на бекенда на Express и клиента на React да обменят данни през крайните точки на API. Можете да използвате пакета body-parser за обработка на входящи HTTP заявки. Ще анализирате JSON полезния товар от клиента, ще извлечете конкретни данни и ще направите тези данни достъпни като обект в свойството req.body. И накрая, пакетът dotenv прави възможно зареждането на променливи на средата от a .env файл във вашето приложение.

В главната директория на папката на сървъра създайте .env файл и добавете кода по-долу:

NOTION_INTEGRATION_TOKEN = „вашият интеграционен таен токен“
NOTION_DATABASE_ID = 'ID на база данни'

Настройте експресния сървър

Отвори index.js файл в папката на сървърния проект и добавете този код:

конст експрес = изискват("експресен");
конст {Клиент} = изискват(„@notionhq/клиент“);
конст корс = изискват("корс");
конст bodyParser = изискват("body-parser");
конст jsonParser = bodyParser.json();
конст порт = process.env. ПРИСТАНИЩЕ || 8000;
изискват('dotenv').config();
конст приложение = експрес();
app.use (cors());


конст authToken = process.env. NOTION_INTEGRATION_TOKEN;
конст notionDbID = process.env. NOTION_DATABASE_ID;
конст понятие = нов Клиент ({авт: authToken});


app.post(„/NotionAPIPost“, jsonParser, асинхронен(req, res) => {
конст {Пълно име, Фирмена роля, местоположение} = req.body;


опитвам { 
конст отговор = изчакайте notion.pages.create({
 родител: {
 database_id: notionDbID,
 },
 Имоти: {
 Пълно име: {
 заглавие: [
 {
 текст: {
 съдържание: пълно име
 },
 },
 ],
 },
 Фирмена роля: {
 богат текст: [
 {
 текст: {
 съдържание: CompanyRole
 },
 },
 ],
 },
 Местоположение: {
 богат текст: [
 {
 текст: {
 съдържание: Местоположение
 },
 },
 ],
 },
 },
 });


 res.send (отговор);
конзола.log("успех");
 } улов (грешка) {
конзола.log (грешка);
 }
});


app.get(„/NotionAPIGet“, асинхронен(req, res) => {
опитвам { 
конст отговор = изчакайте notion.databases.query({
 database_id: notionDbID, 
 сортира: [
 {
 клеймо за време: 'created_time',
 посока: "спускане",
 },
 ]
 });


 res.send (отговор);
конст {резултати} = отговор;
конзола.log("успех");
 } улов (грешка) {
конзола.log (грешка);
 }
});
app.listen (порт, () => {
конзола.log('сървър слуша на порт 8000!');
});

Този код прави следното:

  • Клиентската библиотека на Notion предоставя начин за взаимодействие с API на Notion и извършване на различни операции, като четене и запис на данни във вашата база данни.
  • Клиентският метод създава нов екземпляр на обекта Notion. Този обект се инициализира с параметър за удостоверяване, който приема токен за удостоверяване, интеграционният токен.
  • Двата HTTP метода — get и post — правят заявки към API на Notion. Методът post приема идентификатор на базата данни в заглавката си, който указва базата данни, в която да се записват данни, като се използва методът create. Основният текст на заявката също съдържа свойствата на новата страница: потребителските данни за съхраняване.
  • Методът get прави заявки и извлича потребителски данни от базата данни и ги сортира според времето, когато са създадени.

И накрая, завъртете сървъра за разработка, като използвате Nodemon, мониторът Node.js:

npm стартиране

Настройте React клиент

В основната директория на папката на вашия проект, създайте приложение Reactи инсталирайте Axios. Ще използвате тази библиотека, за да правите HTTP заявки от браузъра.

npm инсталирайте axios

Внедрете методите POST и GET API

Отвори src/App.js файл, изтрийте шаблонния код на React и го заменете с този код:

импортиране Реагирайте, {useState} от"реагира";
импортиране Аксиос от"аксиос";
функцияПриложение() {
конст [име, setName] = useState("");
конст [роля, setRole] = useState("");
конст [местоположение, setLocation] = useState("");
конст [APIData, setAPIData] = useState([]);


конст handleSubmit = (д) => {
 e.preventDefault();


 Axios.post(' http://localhost: 8000/NotionAPIPost', {
 Пълно име: име,
 CompanyRole: роля,
 Местоположение: местоположение
 }).catch(грешка => {
конзола.log (грешка);
 });


 Axios.get(' http://localhost: 8000/NotionAPIGet')
 .тогава(отговор => {
 setAPIData (response.data.results);
конзола.log (response.data.results);
 }).catch(грешка => { 
конзола.log (грешка);
 }); 
 };


връщане (


"приложение">
„Заглавка на приложението“>
"форма">


Първо име</p>


 тип="текст"
 заместител ="Първо име ..."
 onChange={(e) => {setName (e.target.value)}}
 />




Фирмена роля</p>


 тип="текст"
 заместител = „Роля на компанията...“
 onChange={(e) => {setRole (e.target.value)}}
 />




 Фирмена роля</p>


 тип="текст"
 заместител = „Местоположение...“
 onChange={(e) => {setLocation (e.target.value)}}
 />






"Данни">
API ДАННИ</p>
 {
 APIData.map((данни) => {
връщане (




Име: {data.properties. пълно име.title[0].обикновен_текст</p>


Роля: {data.properties. CompanyRole.rich_text[0].обикновен_текст</p>


Местоположение: {data.properties. Location.rich_text[0].обикновен_текст</p> 
 </div>
 )
 })
 }
 </div>
 </header>
 </div>
 );
}










износпо подразбиране Приложение;

Този компонент изобразява формуляр, който позволява на потребителя да изпрати своето име, роля и информация за местоположение. Той използва кука useState, за да съхранява входните стойности на потребителя в променливи на състоянието и след това прави POST заявка към API от страна на сървъра, като предава информацията на потребителя, след като натисне бутона за изпращане.

При успешно изпращане този код прави GET заявка към същия API от страна на сървъра, за да извлече данните, които току-що е изпратил. И накрая, той картографира извлечените данни, съхранени в състояние, и ги изобразява в API ДАННИ раздел под формата.

Завъртете сървъра за разработка на React и се насочете към http://localhost: 3000 в браузъра си, за да видите резултатите.

Използване на Notion като система за управление на съдържанието

Notion е невероятно гъвкав инструмент за продуктивност, който освен за съхранение на данни може да служи като система за управление на съдържанието (CMS) за вашите приложения. Неговата гъвкава система от бази данни предоставя набор от инструменти за редактиране и функции за управление, които опростяват процеса на управление на съдържание за вашето приложение.