כיצד להשתמש ב-API של Notion עם תגובה לאחסון נתונים במסד נתונים של Notion

תכונות הפרודוקטיביות של Notion הפכו פופולריות יותר ויותר הן עבור יחידים והן עבור ארגונים. תכונות אלו מאפשרות לך לנהל מגוון רחב של משימות, מאחסון נתונים אישיים ועד לניהול זרימות עבודה של פרויקטים. מערכת מסד הנתונים של Notion מאפשרת זאת. הוא מספק ממשק אינטואיטיבי שיעזור לך ליצור מערכת ניהול תוכן הניתנת להתאמה אישית.

Notion מספקת API עשיר בתכונות שתוכל לשלב בקלות בכל יישום כדי ליצור אינטראקציה עם מערכת מסד הנתונים שלו. יתר על כן, אתה יכול להתאים אישית את הפונקציונליות שסופקה כך שתתאים לצרכים הספציפיים של היישום שלך.

הגדר אינטגרציה של מושג

Notion מספקת מספר אינטגרציות המאפשרות לך להוסיף תוכן או נתונים מכלים אחרים כגון Google Docs ישירות למסד נתונים של Notion. עם זאת, עבור יישומים שנבנו בהתאמה אישית, תצטרך ליצור אינטגרציות מותאמות אישית באמצעות ה-API הציבורי שלו.

כדי ליצור שילוב של Notion, בצע את השלבים הבאים.

1. פנה אל שילוב של מושג דף אינטרנט, הירשם והיכנס לחשבון שלך. בדף סקירת האינטגרציות, לחץ אינטגרציה חדשה כדי להגדיר אחד חדש.
instagram viewer
2. ספק שם לאינטגרציה שלך, בדוק כדי לוודא שבחרת את ההגדרות הנכונות של יכולות האינטגרציה ולחץ שלח. הגדרות אלו מגדירות כיצד האפליקציה שלך מקיימת אינטראקציה עם Notion.
3. העתק את אסימון האינטגרציה הפנימי הסודי שסופק ולחץ שמור שינויים.

צור מסד נתונים של מושגים

עם הגדרת האינטגרציה שלך, היכנס לחשבון שלך רעיון סביבת עבודה ליצירת מסד נתונים עבור היישום שלך. לאחר מכן, בצע את השלבים הבאים:

1. לחץ על עמוד חדש לחצן בחלונית התפריט השמאלית של סביבת העבודה של Notion.
2. בחלון המוקפץ, ספק את שם מסד הנתונים שלך ואת הטבלה שהוגדרה על ידי Notion. לבסוף, הוסף את השדות שאתה צריך לטבלה שלך על ידי לחיצה על + לחצן בחלק הכותרת של הטבלה שלך.
3. לאחר מכן, לחץ על פתח כעמוד מלא לחצן כדי להרחיב את דף מסד הנתונים כדי למלא את הדף, ולהציג את מזהה מסד הנתונים בכתובת האתר.
4. תזדקק למזהה מסד הנתונים כדי ליצור אינטראקציה עם מסד הנתונים מאפליקציית React שלך. מזהה מסד הנתונים הוא מחרוזת התווים בכתובת האתר של מסד הנתונים בין הלוכסן האחרון קדימה (/) לסימן השאלה (?).
5. לבסוף, חבר את מסד הנתונים לאינטגרציה שלך. תהליך זה מעניק לאינטגרציה גישה למסד הנתונים כך שתוכל לאחסן ולאחזר נתונים על מסד הנתונים שלך מאפליקציית React.
6. בדף מסד הנתונים שלך, לחץ על שלוש נקודות בפינה השמאלית העליונה כדי לפתוח את תפריט הגדרות מסד הנתונים. בתחתית חלונית התפריט בצד, לחץ על הוסף חיבורים לחצן וחפש ובחר את השילוב שלך.

צור שרת אקספרס

Notion מספקת ספריית לקוח שמקלה על אינטראקציה עם ה-API משרת Backend Express. כדי להשתמש בו, צור תיקיית פרויקט באופן מקומי, שנה את הספרייה הנוכחית לתיקיה זו, ו צור שרת אינטרנט express.js.

אתה יכול למצוא את הקוד של הפרויקט הזה בומאגר GitHub.

לאחר מכן, התקן את החבילות הללו.

npm התקן את @notionhq/client cors body-parser dotenv

חבילת CORS מאפשרת ל-Express backend וללקוח React להחליף נתונים דרך נקודות הקצה של ה-API. אתה יכול להשתמש בחבילת body-parser כדי לעבד בקשות HTTP נכנסות. אתה תנתח את מטען ה-JSON מהלקוח, תשלוף נתונים ספציפיים ותהפוך את הנתונים האלה לזמינים כאובייקט במאפיין req.body. לבסוף, חבילת dotenv מאפשרת לטעון משתני סביבה מ-a .env קובץ בבקשה שלך.

בספריית השורש של תיקיית השרת, צור קובץ .env והוסף את הקוד שלהלן:

NOTION_INTEGRATION_TOKEN = 'אסימון הסודי של האינטגרציה שלך'
NOTION_DATABASE_ID = 'מזהה מסד נתונים'

הגדר את שרת האקספרס

פתח את ה index.js קובץ בתיקיית פרויקט השרת, והוסף את הקוד הזה:

const express = לִדרוֹשׁ('אֶקְסְפּרֶס');
const {Client} = לִדרוֹשׁ('@notionhq/client');
const cors = לִדרוֹשׁ('קורס');
const bodyParser = לִדרוֹשׁ('מנתח גוף');
const jsonParser = bodyParser.json();
const port = process.env. PORT || 8000;
לִדרוֹשׁ('dotenv').config();
const app = express();
app.use (cors());
const authToken = process.env. NOTION_INTEGRATION_TOKEN;
const notionDbID = process.env. NOTION_DATABASE_ID;
const מושג = חָדָשׁ לקוח ({אישור: authToken});
app.post('/NotionAPIPost', jsonParser, אסינכרון(req, res) => {
const {Fullname, CompanyRole, Location} = req.body;
לְנַסוֹת { 
const תגובה = לְהַמתִין notion.pages.create({
 הורה: {
 database_id: notionDbID,
 },
 נכסים: {
 שם מלא: {
 כותרת: [
 {
 טקסט: {
 תוכן: שם מלא
 },
 },
 ],
 },
 תפקיד חברה: {
 טקסט עשיר: [
 {
 טקסט: {
 תוכן: תפקיד החברה
 },
 },
 ],
 },
 מקום: {
 טקסט עשיר: [
 {
 טקסט: {
 תוכן: מיקום
 },
 },
 ],
 },
 },
 });
 res.send (תגובה);
לְנַחֵם.עֵץ("הַצלָחָה");
 } לתפוס (שגיאה) {
לְנַחֵם.log (שגיאה);
 }
});
app.get('/NotionAPIGet', אסינכרון(req, res) => {
לְנַסוֹת { 
const תגובה = לְהַמתִין notion.databases.query({
 database_id: notionDbID, 
 מיון: [
 {
 חותמת זמן: 'זמן_יצירה',
 כיוון: 'יורד',
 },
 ]
 });
 res.send (תגובה);
const {תוצאות} = תגובה;
לְנַחֵם.עֵץ("הַצלָחָה");
 } לתפוס (שגיאה) {
לְנַחֵם.log (שגיאה);
 }
});
app.listen (פורט, () => {
לְנַחֵם.עֵץ('שרת מאזין ביציאה 8000!');
});

הקוד הזה עושה את הדברים הבאים:

• ספריית הלקוחות של Notion מספקת דרך ליצור אינטראקציה עם ה-API של Notion ולבצע פעולות שונות, כגון קריאה וכתיבת נתונים למסד הנתונים שלך.
• שיטת הלקוח יוצרת מופע חדש של האובייקט Notion. אובייקט זה מאותחל עם פרמטר אימות שלוקח אסימון אימות, אסימון האינטגרציה.
• שתי שיטות ה-HTTP - get ו-post - עושות בקשות ל-API של Notion. שיטת הפוסט לוקחת מזהה מסד נתונים בכותרת שלה, המציין את מסד הנתונים לכתיבת נתונים באמצעות שיטת היצירה. גוף הבקשה מכיל גם את המאפיינים של הדף החדש: נתוני המשתמש לאחסון.
• שיטת get שואלת ומחזירה את נתוני המשתמש ממסד הנתונים, וממיינת אותם לפי הזמן שבו נוצרו.

לבסוף, הפוך את שרת הפיתוח באמצעות Nodemon, המוניטור של Node.js:

התחלה של npm

הגדר לקוח React

בספריית השורש של תיקיית הפרויקט שלך, ליצור אפליקציית React, והתקן את Axios. אתה תשתמש בספרייה זו כדי לבצע בקשות HTTP מהדפדפן.

npm להתקין אקסיות

יישם את שיטות POST ו-GET API

פתח את ה src/App.js קובץ, מחק את קוד ה-boilerplate React, והחלף אותו בקוד זה:

יְבוּא תגובה, { useState} מ'לְהָגִיב';
יְבוּא אקסיוס מ'אקסיות';
פוּנקצִיָהאפליקציה() {
const [name, setName] = useState("");
const [role, setRole] = useState("");
const [location, setLocation] = useState("");
const [APIData, setAPIData] = useState([]);
const handleSubmit = (ה) => {
 e.preventDefault();
 Axios.post(' http://localhost: 8000/NotionAPIPost', {
 שם מלא: שם,
 תפקיד החברה: תפקיד,
 מיקום: מיקום
 }).לתפוס(שְׁגִיאָה => {
לְנַחֵם.log (שגיאה);
 });
 Axios.get(' http://localhost: 8000/NotionAPIGet')
 .לאחר מכן(תְגוּבָה => {
 setAPIData (response.data.results);
לְנַחֵם.log (response.data.results);
 }).לתפוס(שְׁגִיאָה => { 
לְנַחֵם.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 DATA</p>
 {
 APIData.map((נתונים) => {
לַחֲזוֹר (



שם: {data.properties. שם מלא.כותרת[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 hook כדי לאחסן את ערכי הקלט של המשתמש במשתני מצב ולאחר מכן מבצע בקשת POST ל-API בצד השרת, ומעביר את המידע של המשתמש ברגע שהוא לוחץ על כפתור השליחה.

לאחר הגשה מוצלחת, קוד זה מבצע בקשת GET לאותו API בצד השרת כדי לאחזר את הנתונים שזה עתה שלח. לבסוף, הוא ממפה את הנתונים שאוחזרו, המאוחסנים במצב, ומעבד אותם ב- נתוני API החלק מתחת לטופס.

הפוך את שרת הפיתוח של React ופנה אליו http://localhost: 3000 בדפדפן שלך כדי לצפות בתוצאות.

שימוש ב-Notion כמערכת ניהול תוכן

Notion הוא כלי פרודוקטיבי צדדי להפליא, שמלבד אחסון נתונים, יכול לשמש כמערכת ניהול תוכן (CMS) עבור היישומים שלך. מערכת מסד הנתונים הגמישה שלה מספקת סט של כלי עריכה ותכונות ניהול המפשטות את תהליך ניהול התוכן עבור האפליקציה שלך.