Как использовать API Notion с React для хранения данных в базе данных Notion

Функции производительности Notion становятся все более популярными как для отдельных лиц, так и для организаций. Эти функции позволяют управлять широким спектром задач, от хранения личных данных до управления рабочими процессами проекта. Система базы данных Notion делает это возможным. Он предоставляет интуитивно понятный интерфейс, который поможет вам создать настраиваемую систему управления контентом.

Notion предоставляет многофункциональный API, который можно легко интегрировать в любое приложение для взаимодействия с его системой баз данных. Кроме того, вы можете настроить предоставляемые функции в соответствии с конкретными потребностями вашего приложения.

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

Notion предоставляет несколько интеграций, которые позволяют добавлять контент или данные из других инструментов, таких как Google Docs, непосредственно в базу данных Notion. Однако для пользовательских приложений вам потребуется создавать пользовательские интеграции с использованием общедоступного API.

Чтобы создать интеграцию Notion, выполните следующие действия.

1. Направляйтесь к Интеграция понятия веб-странице, зарегистрируйтесь и войдите в свою учетную запись. На странице обзора интеграций нажмите Новая интеграция чтобы установить новый.
2. Укажите имя для интеграции, убедитесь, что выбраны правильные параметры интеграции, и нажмите Представлять на рассмотрение. Эти настройки определяют, как ваше приложение взаимодействует с Notion.
3. Скопируйте предоставленный секретный токен внутренней интеграции и нажмите Сохранить изменения.

Создайте базу данных понятий

Настроив интеграцию, войдите в свой Понятие workspace для создания базы данных для вашего приложения. Затем выполните следующие действия:

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

Создать экспресс-сервер

Notion предоставляет клиентскую библиотеку, которая упрощает взаимодействие с API с внутреннего сервера Express. Чтобы использовать его, создайте папку проекта локально, измените текущий каталог на эту папку и создать веб-сервер express.js.

Вы можете найти код этого проекта в егоРепозиторий GitHub.

Затем установите эти пакеты.

npm установить @notionhq/client cors body-parser dotenv

Пакет CORS позволяет серверной части Express и клиенту React обмениваться данными через конечные точки API. Вы можете использовать пакет body-parser для обработки входящих HTTP-запросов. Вы будете анализировать полезную нагрузку JSON от клиента, извлекать определенные данные и делать эти данные доступными в виде объекта в свойстве req.body. Наконец, пакет dotenv позволяет загружать переменные среды из .env файл в вашем приложении.

В корневом каталоге папки сервера создайте файл .env и добавьте следующий код:

NOTION_INTEGRATION_TOKEN = 'ваш секретный токен интеграции'
NOTION_DATABASE_ID = 'идентификатор базы данных'

Настройте экспресс-сервер

Открой index.js файл в папке проекта сервера и добавьте этот код:

константа экспресс = требовать('выражать');
константа {Клиент} = требовать('@notionhq/клиент');
константа кор = требовать(корс);
константа парсер тела = требовать('парсер тела');
константа jsonParser = bodyParser.json();
константа порт = процесс.env. ПОРТ || 8000;
требовать('дотенв').конфиг();
константа приложение = экспресс();
app.use(cors());
константа authToken = процесс.env. NOTION_INTEGRATION_TOKEN;
константа notionDbID = процесс.env. NOTION_DATABASE_ID;
константа понятие = новый Клиент ({авторизация: токен авторизации});
приложение.пост('/NotionAPIPost', jsonParser, асинхронный(требование, разрешение) => {
константа {Fullname, CompanyRole, Location} = req.body;
пытаться { 
константа ответ = Ждите notion.pages.create({
 родитель: {
 database_id: notionDbID,
 },
 характеристики: {
 Полное имя: {
 заголовок: [
 {
 текст: {
 содержание: полное имя
 },
 },
 ],
 },
 CompanyRole: {
 богатый текст: [
 {
 текст: {
 содержание: CompanyRole
 },
 },
 ],
 },
 Расположение: {
 богатый текст: [
 {
 текст: {
 содержание: местоположение
 },
 },
 ],
 },
 },
 });
 res.send (ответ);
консоль.бревно("успех");
 } ловить (ошибка) {
консоль.лог (ошибка);
 }
});
приложение.получить('/ПонятиеAPIGet', асинхронный(требование, разрешение) => {
пытаться { 
константа ответ = Ждите notion.databases.query({
 database_id: notionDbID, 
 сорта: [
 {
 отметка времени: 'создано_время',
 направление: 'нисходящий',
 },
 ]
 });
 res.send (ответ);
константа {результаты} = ответ;
консоль.бревно("успех");
 } ловить (ошибка) {
консоль.лог (ошибка);
 }
});
app.listen (порт, () => {
консоль.бревно('сервер прослушивает порт 8000!');
});

Этот код делает следующее:

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

Наконец, разверните сервер разработки, используя Nodemon, монитор Node.js:

запуск нпм

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

В корневом каталоге папки вашего проекта создать React-приложениеи установите Axios. Вы будете использовать эту библиотеку для выполнения HTTP-запросов из браузера.

npm установить аксиомы

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

Открой источник/App.js файл, удалите шаблонный код React и замените его следующим кодом:

Импортировать Реагируйте, {useState} от«реагировать»;
Импортировать Аксиос отаксиос;
функцияПриложение() {
константа [имя, setName] = useState("");
константа [роль, setRole] = useState("");
константа [местоположение, setLocation] = useState("");
константа [APIData, setAPIData] = useState([]);
константа обработатьОтправить = (е) => {
 e.preventDefault();
 Аксиос.пост(' http://localhost: 8000/NotionAPIPПост', {
 Полное имя: имя,
 CompanyRole: роль,
 Местоположение: местоположение
 }).ловить(ошибка => {
консоль.лог (ошибка);
 });
 Аксиос.получить(' http://localhost: 8000/Понятие APIПолучить)
 .затем(ответ => {
 setAPIData(ответ.данные.результаты);
консоль.log(ответ.данные.результаты);
 }).ловить(ошибка => { 
консоль.лог (ошибка);
 }); 
 };
возвращаться (

"Приложение">
"Заголовок приложения">
"форма">


Имя</p>
 тип="текст"
 заполнитель ="Имя ..."
 onChange={(e) => {setName (e.target.value)}}
 />

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

 Роль компании</p>
 тип="текст"
 заполнитель = "Расположение..."
 onChange={(e) => {setLocation (e.target.value)}}
 />
"представлять на рассмотрение">Отправить</button>
 </form>
 </div>

"Данные">
ДАННЫЕ API</p>
 {
 APIData.map((данные) => {
возвращаться (



Имя: {данные.свойства. Полное имя.заголовок[0].plain_text}</p>

Роль: {data.properties. CompanyRole.rich_text[0].plain_text}</p>

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




экспортпо умолчанию Приложение;

Этот компонент отображает форму, которая позволяет пользователю отправлять информацию о своем имени, роли и местоположении. Он использует хук useState для хранения введенных пользователем значений в переменных состояния, а затем отправляет запрос POST к API на стороне сервера, передавая информацию о пользователе, когда он нажимает кнопку отправки.

После успешной отправки этот код отправляет запрос GET к тому же серверному API для получения только что отправленных данных. Наконец, он сопоставляет извлеченные данные, сохраненные в состоянии, и отображает их в ДАННЫЕ API раздел под формой.

Запустите сервер разработки React и перейдите к http://localhost: 3000 в браузере для просмотра результатов.

Использование Notion в качестве системы управления контентом

Notion — невероятно универсальный инструмент для повышения производительности, который, помимо хранения данных, может служить системой управления контентом (CMS) для ваших приложений. Его гибкая система баз данных предоставляет набор инструментов редактирования и функций управления, которые упрощают процесс управления контентом для вашего приложения.