كيفية استخدام واجهة برمجة تطبيقات Notion مع التفاعل مع تخزين البيانات في قاعدة بيانات Notion

أصبحت ميزات إنتاجية Notion شائعة بشكل متزايد لكل من الأفراد والمؤسسات. تسمح لك هذه الميزات بإدارة مجموعة واسعة من المهام ، من تخزين البيانات الشخصية إلى إدارة سير عمل المشروع. نظام قاعدة بيانات Notion يجعل هذا ممكنًا. يوفر واجهة سهلة الاستخدام لمساعدتك في إنشاء نظام إدارة محتوى قابل للتخصيص.

يوفر Notion واجهة برمجة تطبيقات غنية بالميزات يمكنك دمجها بسهولة في أي تطبيق للتفاعل مع نظام قاعدة البيانات الخاص به. علاوة على ذلك ، يمكنك تخصيص الوظائف المتوفرة لتناسب احتياجات التطبيق الخاصة بك.

قم بإعداد فكرة تكامل

يوفر Notion العديد من عمليات الدمج التي تسمح لك بإضافة محتوى أو بيانات من أدوات أخرى مثل محرر مستندات Google مباشرة إلى قاعدة بيانات Notion. ومع ذلك ، بالنسبة للتطبيقات المصممة خصيصًا ، ستحتاج إلى إنشاء عمليات دمج مخصصة باستخدام واجهة برمجة التطبيقات العامة الخاصة بها.

لإنشاء تكامل Notion ، اتبع هذه الخطوات.

1. رئيس لأكثر من تكامل الفكرة صفحة الويب والاشتراك وتسجيل الدخول إلى حسابك. في صفحة نظرة عامة على عمليات الدمج ، انقر فوق تكامل جديد لإنشاء واحدة جديدة.
instagram viewer
2. أدخل اسمًا للتكامل الخاص بك ، وتحقق للتأكد من تحديد إعدادات إمكانات التكامل الصحيحة ، وانقر فوق يُقدِّم. تحدد هذه الإعدادات كيفية تفاعل تطبيقك مع Notion.
3. انسخ رمز التكامل الداخلي السري المقدم وانقر حفظ التغييرات.

قم بإنشاء قاعدة بيانات Notion

مع إعداد التكامل الخاص بك ، قم بتسجيل الدخول إلى ملف فكرة مساحة عمل لإنشاء قاعدة بيانات لتطبيقك. بعد ذلك ، اتبع الخطوات التالية:

1. انقر على صفحة جديدة زر في جزء القائمة الأيسر من مساحة عمل Notion.
2. في النافذة المنبثقة ، قم بتوفير اسم قاعدة البيانات الخاصة بك والجدول الذي تم إعداده بواسطة Notion. أخيرًا ، أضف الحقول التي تريدها إلى جدولك بالضغط على + زر في قسم رأس الجدول الخاص بك.
3. ثم ، انقر فوق فتح كصفحة كاملة لتوسيع صفحة قاعدة البيانات لملء الصفحة ، وعرض معرف قاعدة البيانات على عنوان URL.
4. ستحتاج إلى معرف قاعدة البيانات للتفاعل مع قاعدة البيانات من تطبيق React الخاص بك. معرف قاعدة البيانات هو سلسلة الأحرف في عنوان URL لقاعدة البيانات بين آخر شرطة مائلة للأمام (/) وعلامة الاستفهام (؟).
5. أخيرًا ، قم بتوصيل قاعدة البيانات بالتكامل الخاص بك. تمنح هذه العملية وصول التكامل إلى قاعدة البيانات بحيث يمكنك تخزين البيانات واستردادها في قاعدة البيانات الخاصة بك من تطبيق React.
6. في صفحة قاعدة البيانات الخاصة بك ، انقر فوق ثلاث نقاط في الزاوية اليمنى العليا لفتح قائمة إعدادات قاعدة البيانات. في الجزء السفلي من القائمة الجانبية ، انقر فوق أضف اتصالات زر وابحث عن التكامل وحدده.

أنشئ خادمًا سريعًا

يوفر Notion مكتبة عميل تسهل التفاعل مع API من خادم Express خلفي. لاستخدامه ، قم بإنشاء مجلد مشروع محليًا ، وقم بتغيير الدليل الحالي إلى هذا المجلد ، و إنشاء خادم ويب express.js.

يمكنك العثور على رمز هذا المشروع في ملفمستودع جيثب.

بعد ذلك ، قم بتثبيت هذه الحزم.

npm install @ 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 / العميل");
مقدار ثابت كور = يتطلب("كورس");
مقدار ثابت bodyParser = يتطلب("محلل الجسم");
مقدار ثابت 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 ، غير متزامن(مطلوب ، الدقة) => {
مقدار ثابت {Fullname، CompanyRole، Location} = req.body؛
يحاول { 
مقدار ثابت استجابة = انتظر notion.pages.create ({
 الأبوين: {
 معرّف_قاعدة البيانات: notionDbID ،
 },
 ملكيات: {
 الاسم الكامل: {
 عنوان: [
 {
 نص: {
 المحتوى: الاسم الكامل
 },
 },
 ],
 },
 الشركة الدور: {
 النص الغني: [
 {
 نص: {
 المحتوى: دور الشركة
 },
 },
 ],
 },
 موقع: {
 النص الغني: [
 {
 نص: {
 المحتوى: الموقع
 },
 },
 ],
 },
 },
 });
 res.send (استجابة) ؛
وحدة التحكم.سجل("نجاح");
 } يمسك (خطأ) {
وحدة التحكم.log (خطأ) ؛
 }
});
app.get ("/ NotionAPIGet", غير متزامن(مطلوب ، الدقة) => {
يحاول { 
مقدار ثابت استجابة = انتظر notion.databases.query ({
 معرّف_قاعدة البيانات: notionDbID ، 
 الأنواع: [
 {
 الطابع الزمني: "تاريخ_الإنشاء",
 اتجاه: "تنازلي",
 },
 ]
 });
 res.send (استجابة) ؛
مقدار ثابت {النتائج} = استجابة ؛
وحدة التحكم.سجل("نجاح");
 } يمسك (خطأ) {
وحدة التحكم.log (خطأ) ؛
 }
});
app.listen (المنفذ ، () => {
وحدة التحكم.سجل("الخادم يستمع على المنفذ 8000!");
});

يقوم هذا الرمز بما يلي:

• توفر مكتبة عميل Notion طريقة للتفاعل مع واجهة برمجة تطبيقات Notion وتنفيذ عمليات مختلفة ، مثل قراءة البيانات وكتابتها في قاعدة البيانات الخاصة بك.
• تقوم طريقة العميل بإنشاء مثيل جديد لكائن Notion. تتم تهيئة هذا الكائن باستخدام معلمة المصادقة التي تأخذ رمز المصادقة ، رمز التكامل.
• تعمل طريقتا HTTP - الحصول على ونشر - على تقديم طلبات إلى Notion’s API. يأخذ التابع post معرّف قاعدة البيانات في رأسه الذي يحدد قاعدة البيانات لكتابة البيانات باستخدام طريقة الإنشاء. يحتوي نص الطلب أيضًا على خصائص الصفحة الجديدة: بيانات المستخدم المراد تخزينها.
• يستعلم التابع get ويسترجع بيانات المستخدم من قاعدة البيانات ، ويصنفها وفقًا للوقت الذي تم إنشاؤه فيه.

أخيرًا ، قم بتدوير خادم التطوير باستخدام Nodemon ، جهاز مراقبة Node.js:

بدء npm

قم بإعداد عميل React

في الدليل الجذر لمجلد مشروعك ، إنشاء تطبيق React، وتثبيت أكسيوس. ستستخدم هذه المكتبة لإجراء طلبات HTTP من المتصفح.

npm تثبيت أكسيوس

تطبيق طرق POST و GET API

افتح ال src / App.js ملف ، احذف كود رد الفعل المعياري ، واستبدله بهذا الكود:

يستورد رد فعل ، {useState} من'تتفاعل';
يستورد أكسيوس من"أكسيوس";
وظيفةبرنامج() {
مقدار ثابت [name، setName] = useState ("");
مقدار ثابت [role، setRole] = useState ("");
مقدار ثابت [location، setLocation] = useState ("");
مقدار ثابت [APIData، setAPIData] = useState ([]) ،
مقدار ثابت مقبض (ه) => {
 e.preventDefault () ؛
 Axios.post (' http://localhost: 8000 / NotionAPIPost ', {
 الاسم الكامل: الاسم ،
 الشركة الدور: الدور ،
 الموقع: الموقع
 }).يمسك(خطأ => {
وحدة التحكم.log (خطأ) ؛
 });
 Axios.get (' http://localhost: 8000 / فكرة)
 .ثم(إجابة => {
 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 </p>
 {
 خريطة APIData ((بيانات) => {
يعود (



الاسم: {data.properties. الاسم الكامل. العنوان [0] .plain_text} </p>

الدور: {data.properties. الشركة Role.rich_text [0] .plain_text} </p>

الموقع: {data.properties. الموقع. rich_text [0] .plain_text} </p> 
 </div>
 )
 })
 }
 </div>
 </header>
 </div>
 );
}




يصدّرتقصير برنامج؛

يعرض هذا المكون نموذجًا يسمح للمستخدم بإرسال معلومات الاسم والدور والموقع. يستخدم الخطاف useState لتخزين قيم الإدخال الخاصة بالمستخدم في متغيرات الحالة ثم يقدم طلب POST إلى واجهة برمجة تطبيقات من جانب الخادم ، ويمرر معلومات المستخدم بمجرد الضغط على زر الإرسال.

عند الإرسال الناجح ، يقدم هذا الرمز طلب GET إلى نفس واجهة برمجة التطبيقات من جانب الخادم لاسترداد البيانات التي أرسلها للتو. أخيرًا ، يقوم بتعيين البيانات المسترجعة ، المخزنة في الحالة ، ويعرضها في ملف بيانات API قسم أسفل النموذج.

أدر خادم تطوير React وتوجه إلى http://localhost: 3000 على متصفحك لعرض النتائج.

استخدام Notion كنظام لإدارة المحتوى

Notion هي أداة إنتاجية متعددة الاستخدامات بشكل لا يصدق والتي ، بصرف النظر عن تخزين البيانات ، يمكن أن تكون بمثابة نظام إدارة محتوى (CMS) لتطبيقاتك. يوفر نظام قاعدة البيانات المرن الخاص به مجموعة من أدوات التحرير وميزات الإدارة التي تبسط عملية إدارة المحتوى لتطبيقك.