Cách sử dụng API của Notion với React để lưu trữ dữ liệu trong cơ sở dữ liệu Notion

Tiếp theo, cài đặt các gói này.

 npm install @notionhq/client cors body-parser dotenv 

Gói CORS cho phép chương trình phụ trợ Express và ứng dụng khách React trao đổi dữ liệu thông qua các điểm cuối API. Bạn có thể sử dụng gói body-parser để xử lý các yêu cầu HTTP đến. Bạn sẽ phân tích cú pháp tải trọng JSON từ máy khách, truy xuất dữ liệu cụ thể và cung cấp dữ liệu đó dưới dạng một đối tượng trong thuộc tính req.body. Cuối cùng, gói dotenv cho phép tải các biến môi trường từ một .env tập tin trong ứng dụng của bạn.

Trong thư mục gốc của thư mục máy chủ, tạo tệp .env và thêm mã bên dưới:

 NOTION_INTEGRATION_TOKEN = 'your Integration secret token'
NOTION_DATABASE_ID = 'database ID' 

Thiết lập máy chủ tốc hành

Mở index.js tệp trong thư mục dự án máy chủ và thêm mã này:

 const express = require('express');
const {Client} = require('@notionhq/client');
const cors = require('cors');
const bodyParser = require('body-parser');
const jsonParser = bodyParser.json();
const port = process.env.PORT || 8000;
require('dotenv').config();
const app = express();
app.use(cors());
const authToken = process.env.NOTION_INTEGRATION_TOKEN;
const notionDbID = process.env.NOTION_DATABASE_ID;
const notion = new Client ({auth: authToken});
app.post('/NotionAPIPost', jsonParser, async(req, res) => {
    const {Fullname, CompanyRole, Location} = req.body;
    try { 
        const response = await notion.pages.create({
            parent: {
                database_id: notionDbID,
            },
            properties: {
                Fullname: {
                    title: [
                        {
                            text: {
                                content: Fullname
                            },
                        },
                    ],
                },
                CompanyRole: {
                    rich_text: [
                        {
                            text: {
                                content: CompanyRole
                            },
                        },
                    ],
                },
                Location: {
                    rich_text: [
                        {
                            text: {
                                content: Location
                            },
                        },
                    ],
                },
            },
        });
        res.send(response);
        console.log("success");
    } catch (error) {
        console.log(error);
    }
});
app.get('/NotionAPIGet', async(req, res) => {
    try { 
        const response = await notion.databases.query({
            database_id: notionDbID, 
            sorts: [
                {
                    timestamp: 'created_time',
                    direction: 'descending',
                },
            ]
        });
        res.send(response);
        const {results} = response;
        console.log("success");
    } catch (error) {
        console.log(error);
    }
});
app.listen(port, () => {
    console.log('server listening on port 8000!');
}); 

Mã này làm như sau:

• Thư viện máy khách của Notion cung cấp một cách để tương tác với API của Notion và thực hiện nhiều hoạt động khác nhau, chẳng hạn như đọc và ghi dữ liệu vào cơ sở dữ liệu của bạn.
• Phương thức máy khách tạo một thể hiện mới của đối tượng Notion. Đối tượng này được khởi tạo với tham số auth nhận mã thông báo xác thực, mã thông báo tích hợp.
• Hai phương thức HTTP—nhận và đăng—tạo các yêu cầu tới API của Notion. Phương thức post lấy một ID cơ sở dữ liệu trong tiêu đề của nó, chỉ định cơ sở dữ liệu để ghi dữ liệu vào bằng cách sử dụng phương thức tạo. Phần thân của yêu cầu cũng chứa các thuộc tính của trang mới: dữ liệu người dùng cần lưu trữ.
• Phương thức get truy vấn và truy xuất dữ liệu người dùng từ cơ sở dữ liệu, đồng thời sắp xếp chúng theo thời gian chúng được tạo.

Cuối cùng, khởi động máy chủ phát triển bằng Nodemon, trình giám sát Node.js:

 npm start 

Thiết lập ứng dụng khách React

Trong thư mục gốc của thư mục dự án của bạn, hãy tạo một ứng dụng React và cài đặt Axios. Bạn sẽ sử dụng thư viện này để thực hiện các yêu cầu HTTP từ trình duyệt.

 npm install axios 

Triển khai các Phương thức API POST và GET

Mở src/App.js tệp, hãy xóa mã React soạn sẵn và thay thế bằng mã này:

 import React, { useState} from 'react';
import Axios from 'axios';
function App() {
  const [name, setName] = useState("");
  const [role, setRole] = useState("");
  const [location, setLocation] = useState("");
  const [APIData, setAPIData] = useState([]);
  const handleSubmit = (e) => {
    e.preventDefault();
    Axios.post('http://localhost:8000/NotionAPIPost', {
      Fullname: name,
      CompanyRole:role,
      Location:location
    }).catch(error => {
      console.log(error);
    });
    Axios.get('http://localhost:8000/NotionAPIGet')
      .then(response => {
        setAPIData(response.data.results);
        console.log(response.data.results);
      }).catch(error => { 
        console.log(error);
      }); 
  };
  return (
    <div className="App">
      <header className="App-header">
        <div className="form">
          <form onSubmit={handleSubmit}>
            <p>First Name</p>
            <input
              type="text" 
              placeholder="First name ..."
              onChange={(e) => {setName(e.target.value)}}
            />
            <p>Company Role</p>
            <input 
              type="text" 
              placeholder = "Company Role...." 
              onChange={(e) => {setRole(e.target.value)}}
            />
            <p> Company Role</p>
            <input 
              type="text" 
              placeholder = "Location...." 
              onChange={(e) => {setLocation(e.target.value)}}
            />
            <button type="submit">Submit</button>
          </form>
        </div>
        <div className="Data">
          <p>API DATA</p>
          {
            APIData.map((data) => {
              return (
                <div key={data.id}>
                   <p>Name: {data.properties.Fullname.title[0].plain_text}</p>
                   <p>Role: {data.properties.CompanyRole.rich_text[0].plain_text}</p>
                   <p>Location: {data.properties.Location.rich_text[0].plain_text}</p> 
               </div>
              )
           })
          }
        </div>
      </header>
    </div>
  );
}
export default App;
 

Thành phần này hiển thị biểu mẫu cho phép người dùng gửi tên, vai trò và thông tin vị trí của họ. Nó sử dụng hook useState để lưu trữ các giá trị đầu vào của người dùng trong các biến trạng thái, sau đó thực hiện yêu cầu POST tới API phía máy chủ, chuyển thông tin của người dùng sau khi họ nhấn nút gửi.

Sau khi gửi thành công, mã này tạo một yêu cầu GET tới cùng một API phía máy chủ để truy xuất dữ liệu mà nó vừa gửi. Cuối cùng, nó ánh xạ qua dữ liệu đã truy xuất, được lưu trữ ở trạng thái và hiển thị nó trong DỮ LIỆU API phần bên dưới biểu mẫu.

Khởi động máy chủ phát triển của React và truy cập http://localhost:3000 trên trình duyệt của bạn để xem kết quả.

Sử dụng Notion làm Hệ thống quản lý nội dung

Notion là một công cụ năng suất cực kỳ linh hoạt, ngoài việc lưu trữ dữ liệu, có thể đóng vai trò là một hệ thống quản lý nội dung (CMS) cho các ứng dụng của bạn. Hệ thống cơ sở dữ liệu linh hoạt của nó cung cấp một bộ công cụ chỉnh sửa và các tính năng quản lý giúp đơn giản hóa quy trình quản lý nội dung cho ứng dụng của bạn.