Cara Menggunakan API Notion Dengan Bereaksi untuk Menyimpan Data di Basis Data Notion

Fitur produktivitas Notion menjadi semakin populer baik untuk individu maupun organisasi. Fitur-fitur ini memungkinkan Anda mengelola berbagai tugas, mulai dari menyimpan data pribadi hingga mengelola alur kerja proyek. Sistem basis data Notion memungkinkan hal ini. Ini menyediakan antarmuka yang intuitif untuk membantu Anda membuat sistem manajemen konten yang dapat disesuaikan.

Notion menyediakan API kaya fitur yang dapat Anda integrasikan dengan mudah ke dalam aplikasi apa pun untuk berinteraksi dengan sistem basis datanya. Selain itu, Anda dapat menyesuaikan fungsionalitas yang disediakan agar sesuai dengan kebutuhan khusus aplikasi Anda.

Siapkan Integrasi Notion

Notion menyediakan beberapa integrasi yang memungkinkan Anda menambahkan konten atau data dari alat lain seperti Google Docs langsung ke database Notion. Namun, untuk aplikasi yang dibuat khusus, Anda harus membuat integrasi khusus menggunakan API publiknya.

Untuk membuat integrasi Notion, ikuti langkah-langkah berikut.

1. Pergilah ke integrasi Notion halaman web, daftar, dan masuk ke akun Anda. Pada halaman ikhtisar integrasi, klik Integrasi Baru untuk mengatur yang baru.
2. Berikan nama untuk integrasi Anda, periksa untuk memastikan Anda telah memilih pengaturan kemampuan integrasi yang benar, dan klik Kirim. Pengaturan ini menentukan bagaimana aplikasi Anda berinteraksi dengan Notion.
3. Salin Token Integrasi Internal rahasia yang disediakan dan klik Simpan perubahan.

Buat Database Gagasan

Dengan pengaturan integrasi Anda, masuk ke Gagasan ruang kerja untuk membuat database untuk aplikasi Anda. Lalu, ikuti langkah-langkah berikut:

1. Klik Lembaran baru tombol di panel menu kiri ruang kerja Notion Anda.
2. Di jendela pop-up, berikan nama database Anda dan tabel yang disiapkan oleh Notion. Terakhir, tambahkan bidang yang Anda perlukan ke tabel Anda dengan menekan tombol + tombol di bagian tajuk tabel Anda.
3. Kemudian, klik Buka sebagai Halaman Penuh tombol untuk memperluas halaman database untuk mengisi halaman, dan melihat ID database pada URL.
4. Anda memerlukan ID database untuk berinteraksi dengan database dari aplikasi React Anda. ID basis data adalah string karakter dalam URL basis data antara garis miring terakhir (/) dan tanda tanya (?).
5. Terakhir, sambungkan database ke integrasi Anda. Proses ini memberikan akses integrasi ke database sehingga Anda dapat menyimpan dan mengambil data di database Anda dari aplikasi React.
6. Pada halaman database Anda, klik tiga titik di pojok kanan atas untuk membuka menu pengaturan database. Di bagian bawah panel sisi menu, klik Tambahkan Koneksi tombol dan cari dan pilih integrasi Anda.

Buat Server Ekspres

Notion menyediakan pustaka klien yang memudahkan interaksi dengan API dari server backend Express. Untuk menggunakannya, buat folder proyek secara lokal, ubah direktori saat ini ke folder itu, dan buat server web express.js.

Anda dapat menemukan kode proyek ini di dalamnyarepositori GitHub.

Selanjutnya, instal paket-paket ini.

npm install @notionhq/client cors body-parser dotenv

Paket CORS memungkinkan backend Express dan klien React untuk bertukar data melalui titik akhir API. Anda dapat menggunakan paket body-parser untuk memproses permintaan HTTP yang masuk. Anda akan mem-parsing payload JSON dari klien, mengambil data tertentu, dan membuat data tersebut tersedia sebagai objek di properti req.body. Terakhir, paket dotenv memungkinkan untuk memuat variabel lingkungan dari a .env file di aplikasi Anda.

Di direktori root folder server, buat file .env, dan tambahkan kode di bawah ini:

NOTTION_INTEGRATION_TOKEN = 'token rahasia Integrasi Anda'
NOTION_DATABASE_ID = 'database id'

Siapkan Server Ekspres

Buka index.js file di folder proyek server, dan tambahkan kode ini:

const mengungkapkan = memerlukan('cepat');
const {Klien} = memerlukan('@notionhq/klien');
const kor = memerlukan('kor');
const bodyParser = memerlukan('tubuh-parser');
const jsonParser = bodyParser.json();
const port = process.env. PELABUHAN || 8000;
memerlukan('dotenv'.config();
const aplikasi = ekspres();
app.use (cors());
const authToken = process.env. NOTION_INTEGRATION_TOKEN;
const notionDbID = process.env. NOTION_DATABASE_ID;
const pengertian = baru Klien ({autentikasi: authToken});
aplikasi.posting('/ NotionAPIPosting', jsonParser, asinkron(req, res) => {
const {Nama Lengkap, Peran Perusahaan, Lokasi} = req.body;
mencoba { 
const tanggapan = menunggu notion.pages.create({
 orang tua: {
 database_id: notionDbID,
 },
 properti: {
 Nama lengkap: {
 judul: [
 {
 teks: {
 isi: Nama lengkap
 },
 },
 ],
 },
 Peran Perusahaan: {
 teks yang kaya: [
 {
 teks: {
 konten: Peran Perusahaan
 },
 },
 ],
 },
 Lokasi: {
 teks yang kaya: [
 {
 teks: {
 isi: Lokasi
 },
 },
 ],
 },
 },
 });
 kirim ulang (tanggapan);
menghibur.catatan("kesuksesan");
 } menangkap (kesalahan) {
menghibur.log (kesalahan);
 }
});
aplikasi.dapatkan('/NotionAPIGet', asinkron(req, res) => {
mencoba { 
const tanggapan = menunggu gagasan.databases.query({
 database_id: notionDbID, 
 macam: [
 {
 cap waktu: 'waktu_dibuat',
 arah: 'menurun',
 },
 ]
 });
 kirim ulang (tanggapan);
const {hasil} = tanggapan;
menghibur.catatan("kesuksesan");
 } menangkap (kesalahan) {
menghibur.log (kesalahan);
 }
});
app.listen (port, () => {
menghibur.catatan('server mendengarkan pada porta 8000!');
});

Kode ini melakukan hal berikut:

• Pustaka klien Notion menyediakan cara untuk berinteraksi dengan API Notion dan melakukan berbagai operasi, seperti membaca dan menulis data ke database Anda.
• Metode klien membuat instance baru dari objek Notion. Objek ini diinisialisasi dengan parameter auth yang mengambil token otentikasi, token integrasi.
• Dua metode HTTP—dapatkan dan kirim—buat permintaan ke API Notion. Metode post mengambil ID basis data di headernya yang menentukan basis data untuk menulis data menggunakan metode buat. Badan permintaan juga berisi properti halaman baru: data pengguna yang akan disimpan.
• Dapatkan kueri metode dan mengambil data pengguna dari database, dan mengurutkannya sesuai dengan waktu pembuatannya.

Terakhir, jalankan server pengembangan menggunakan Nodemon, monitor Node.js:

mulai npm

Siapkan React Client

Di direktori root folder proyek Anda, membuat aplikasi Bereaksi, dan instal Axios. Anda akan menggunakan perpustakaan ini untuk membuat permintaan HTTP dari browser.

npm instal axios

Menerapkan Metode POST dan GET API

Buka src/App.js file, hapus kode React boilerplate, dan ganti dengan kode ini:

impor Bereaksi, { useState} dari'reaksi';
impor Aksioma dari'axios';
fungsiAplikasi() {
const [nama, setName] = useState("");
const [peran, setRole] = useState("");
const [lokasi, setLocation] = useState("");
const [APIData, setAPIData] = useState([]);
const handleSubmit = (e) => {
 e.preventDefault();
 Axios.post(' http://localhost: 8000/NotionAPIPosting', {
 Nama lengkap: nama,
 PerusahaanPeran: peran,
 Lokasi: lokasi
 }).menangkap(kesalahan => {
menghibur.log (kesalahan);
 });
 Axios.dapatkan(' http://localhost: 8000/NotionAPIGet')
 .Kemudian(tanggapan => {
 setAPIData (response.data.hasil);
menghibur.log (respons.data.hasil);
 }).menangkap(kesalahan => { 
menghibur.log (kesalahan);
 }); 
 };
kembali (

"Aplikasi">
"Tajuk-aplikasi">
"membentuk">


Nama Depan</p>
 jenis="teks"
 placeholder="Nama depan ..."
 onChange={(e) => {setName (e.target.nilai)}}
 />

Peran Perusahaan</p>
 jenis="teks"
 pengganti = "Peran Perusahaan..."
 onChange={(e) => {setRole (e.target.nilai)}}
 />

 Peran Perusahaan</p>
 jenis="teks"
 pengganti = "Lokasi..."
 onChange={(e) => {setLocation (e.target.nilai)}}
 />
"kirim">Kirim</button>
 </form>
 </div>

"Data">
DATA API</p>
 {
 APIData.peta((data) => {
kembali (



Nama: {data.properties. nama lengkap.judul[0].plain_text}</p>

Peran: {data.properties. Peran Perusahaan.rich_text[0].plain_text}</p>

Lokasi: {data.properties. Lokasi.rich_text[0].plain_text}</p> 
 </div>
 )
 })
 }
 </div>
 </header>
 </div>
 );
}




eksporbawaan Aplikasi;

Komponen ini merender formulir yang memungkinkan pengguna mengirimkan nama, peran, dan informasi lokasi mereka. Ini menggunakan hook useState untuk menyimpan nilai input pengguna dalam variabel status dan kemudian membuat permintaan POST ke API sisi server, meneruskan informasi pengguna begitu mereka menekan tombol kirim.

Setelah pengiriman berhasil, kode ini membuat permintaan GET ke API sisi server yang sama untuk mengambil data yang baru saja dikirimkan. Terakhir, ini memetakan data yang diambil, disimpan dalam status, dan merendernya di DATAAPI bagian di bawah formulir.

Putar server pengembangan React dan buka http://localhost: 3000 di browser Anda untuk melihat hasilnya.

Menggunakan Notion sebagai Sistem Manajemen Konten

Notion adalah alat produktivitas yang sangat serbaguna, selain dari penyimpanan data, dapat berfungsi sebagai sistem manajemen konten (CMS) untuk aplikasi Anda. Sistem basis datanya yang fleksibel menyediakan seperangkat alat pengeditan dan fitur manajemen yang menyederhanakan proses pengelolaan konten untuk aplikasi Anda.