تعلم Firebase cloud function
السلام عليكم ..
عنوان الدرس/ شرح طريقة عمل Firebase Function
الاختصاص/ Cloud Computing
الموضوع/ قواعد البيانات
المستوى/ الكل
الأدوات المستعملة: 1- موقع فايربيس
2- برنامج vscode
2- برنامج vscode
3- node js
الشرح:
يعتبر Cloud Functions الخاص بقاعدة البيانات firebase من البيئات التي تسمح بكتابة الكودات الخاصة بجزء الـ back end ، حيث يقوم بتشغيل الكود وتنفيذ اوامر http request و http response بالاضافة الى وظائف الكلاود الاخرى على google cloud فيما تسمى بخدمة serverless ، يمكن كتابة كود Cloud Function بثلاث لغات برمجية وهي javascrip و Typescript و python بالاعتماد على اشهر بيئة تشغيلية هي node js
نقوم في هذه المقالة بشرح تطبيقي لكيفية عمل هذه البيئة من تنصيب وتجهيز وكتابة الكود والخ.
الخطوات:
1) عمل مشروع جديد في firebase
- نقوم بالذهاب الى موقع فايربيس (https://firebase.google.com)
ونعمل تسجيل دخول ومن ثم نضغط Go to console ومن ثم نضغط انشاء مشروع جديد حيث تظهر لنا النافذة ادناه نقوم بادخال اسم المشروع وفي هذا المثال هو fb-function-test ونفعل خيار المربعات ونضغط continue
- تظهر لنا نافذة اخرى يوضح ميزات فايربيس نضغط continue
- الخطوة الاخيرة هي اختيار الدولة وتفعيل مربع القبول ونضغط create project
ملاحظة : في حال كنت تملك حساب دفع الكتروني لاحد الدول يجب ان تختار هذه الدولة في هذه الخطوة والا فاتركها كما هي
يقوم الان فايربيس بتجهيز المشروع ، نضغط continue للذهاب الى لوحة التحكم الخاص بالمشروع
2) تحميل node js وتنصيبه
نقوم بتحميل حزمة node js كما في الصورة ادناه من خلال الموقع https://nodejs.org/en حيث يمكن ادارة مشروع functions من خلاله
3) تنصيب ادوات firebase
نعمل مجلد جديد في مكان معين داخل النظام ثم نقوم بفتح نافذة سطر الاوامر cmd او bash cli
- نقوم بكتابة الامر التالي لتنصيب ادوات فايربيس :
npm install -g firebase-tools
ثم نضغط Enter ، حيث يقوم بتنصيب الادوات كما في الصورة
npm fund
حيث يقوم بتجهيز المكتبات الخاصة بالمشروع
4) تسجيل الدخول الى فايربيس وتجهيز ملفات المشروع
- نقوم بتسجيل الدخول الى الفايربيس من خلال الامر :
firebase login
يؤدي ذلك الى الذهاب الى موقع فايربيس لاتمام عملية تسجيل الدخول ، اما في حال عمل تسجيل دخول مسبقا فتظهر رسالة تقول ان الحساب مسجل بالفعل !
- بعد ذلك نكتب الامر التالي :
firebase init
هذا الامر يقوم بانشاء ملفات المشروع وربطه مباشرة مع مشروع الفايربيس الذي قمنا بانشائه في خطوة رقم 1
- تظهر رسالة كما في الصورة تنبيه فيما اذا كنت جاهزا لعمل الشروع نكتب y ونضغط Enter
> Realtime Database
خدمة قواعد البيانات من نوع realtime وتضمينه ضمن المشروع لخزن وقراءة البيانات
> Firestore
خدمة قواعد البيانات من نوع Firestore وتضمينه ضمن المشروع لخزن وقراءة البيانات
> Functions
خدمة Cloud Function (موضوعنا الرئيسي) وتضمين ملفاته ضمن المشروع
> Hosting
خدمة الاستضافة وتضمينه ضمن المشروع في حال عمل deploy لمشروع بالاضافة الى رفعه الى حساب github
> Storage
خدمة الخزن في الكلاود
> Emulators
خدمة تشغيل الكود الخاص بالفايربيس بشكل local
ملاحظة: يمكن اختيار واحدة او اكثر من الخدمات اعلاه من خلال مفتاح space في الكيبورد ومن ثم نضغط eneter ، في هذا المشروع نختار الكل
- بعدها تظهر رسالة لعمل مشروع جديد او اختيار مشروع تم انشاءه مسبقا ، نختار
Use an existing project
ستظهر لنا جميع المشاريع الموجود على الفايربيس نختار منها المشروع الاخير الذي قمنا بانشائه في خطوة رقم 1
تظهر رسالة لعمل initialize لقاعدة البيانات الخاصة بالمشروع نضغ yes
نختار asia ونضغط enter
بعدها تظهر رسالة تخبرنا عن الملف الذي يخزن rules الخاصة بحماية قاعدة بيانات ونرى ان الملف تم تجهيزه فنضغط eneter مباشرة
هنا نرى ظهور رسالة خطأ تخبرنا بعدم عمل قاعدة بيانات firestore من قبل لذلك نذهب الى مو فايربيس ونختار firestore ثم نضغط create database
تظهر نافذة نضغط next
ثم تظهر نافذة اخرى نضغط create project
ملاحظة : في حال ظهور رسالة وسؤال عن الملفات ونوعها نضغط enter مباشرة
اخيرا نختار اللغة التي نريد كتابة الكود من خلالها كما في الصورة ادناه (في هذا المثال اختار javascript)
ثم يطلب منا تنصيب الـ dependencies الخاص بالمشروع نضغط yes كما في الصورة
ثم يطلب منا تحديد البورت الذي تعمل عليه كل خدمة فنختارها كما هي كما في الصورة
وبهذا تنتهي عملية تنصيب واعداد المشروع والان اصبح جاهزا للاستخدام وكتابة الكود
4) توضيح ملفات المشروع
الان نلقي نظر على ملفات المشروع الظاهر في الصورة ادناه
index.html / ملف الرئيسي الذي يمكن من خلاله عرض النتائج عند استدعاء البيانات
index.js / الملف الذي نكتب فيه الكود الخاص بالسيرفر (وهذا ما نقصده في Function)
eslintrc.json / ملف يحتوي على rules الخاص بـ javascript
package.json / ملف يحتوي على خصائص cloud function code
وغيرها...
4) كتابة الكود (مثال / خزن رسالة message في firestore)
نذهب الى الملف index.js ونقوم بكتابة الاسطر التالي :
توضيح:
السطر الاول
const functions = require('firebase-functions/v1');
هنا نعمل متغير نسميه function ونسند اليه قيمة اصدار firebase function
السطر الثاني
const admin = require("firebase-admin");
ايضا نعمل متغير اخر نسميه admin ويستخدم كمتغير عام لوظائف firebase لعمل FCM و Realtime database وغيرها
بعدها نقوم بتكملة الكود ونكتب الاسطر التالية:
exports.addMessage = functions.https.onRequest( (req, res) => {
const msg = "Hi Firebase Function";
const result = admin
.firestore()
.collection("messages")
.add({msg: msg});
res.json({result: `Message with ID: ${result.id} added.`});
});
توضيح:
نقوم بعمل function ونسميه addMessage كالتالي
exports.addMessage = functions.https.onRequest(async (req, res) =>
نقوم بعمل متغير ونسند اليه قيمة معينة (هذه القيمة نريد خزنها في firestore)
const msg = "Hi Firebase Function";
نقوم بعمل متنغير اخر ونضع فيه مصدر الخزن الخاص للـ firestore
const result = admin
.firestore()
.collection("messages")
.add({msg: msg});
واخيراً نقوم بارجاع النتيجة باستخدام باراميتر res كالتالي
res.json({result: `Message with ID: ${result.id} added.
بعد الانتهاء من كتابة الكود نذهب الى الـ Terminal وننفذ الامر التالي
firebase serve
سيتولد رابط URL كالتالي
http://localhost:5000/fb-function-test-6a29f/us-central1/addMessage
نقوم بنسخه ولصقه في المتصفح لنرى نتيجة الكود .. الصورة أدناه توضح الخزن في الـfirestore كما هو في الكود
كان هذا مثال بسيط لكيفية خزن رسالة في الـ firestore باستخدام cloud function اتمنى الاستفادة من الدرس وايضا يمكنك كتابة وبرمجة امور اخرى وتجربتها بنفسك بالاضافة الى استخدام خدمات اخرى مثل FCM و Auth وغيرها ..
enjoy 😊
وللاطلاع وتعلم المزيد راجع الموقع الرسمي
تعليقات
إرسال تعليق