= استضف موقعًا ديناميكيًا على Google Firebase باستخدام Node.js و Cloud Firestore DB =
توشار كابور: (httpswww.tusharck.com/)
عنوان URL التجريبي لـ Git: httpsgithub.com/tusharck/firebase-demo
= لماذا استضافة Firebase؟ =
يعد Firebase نظامًا أساسيًا شاملاً للتطبيقات مبنيًا على بنية Google الأساسية ، وبالتالي فهو يوفر وسيلة آمنة وسريعة ومجانية (تتوفر أيضًا خيارات مدفوعة للحصول على موارد إضافية) وطريقة سهلة لاستضافة المحتوى الخاص بك على تطبيقات الويب أو الهاتف المحمول
== الميزات والفوائد الرئيسية للدرجة المجانية: ==
- يمنحك مجال مخصص مجاني&
SSL (يوفر SSL طبقة أمان قياسية لاتصالات https
- Cloud Firestore: قاعدة بيانات مرنة وقابلة للتطوير لمزامنة البيانات في الوقت الفعلي عبر تطبيقات العميل
- ميزات أخرى: وظائف السحابة ، والرسائل السحابية (FCM) ، و Crashlytics ، والروابط الديناميكية ، والاستضافة ، ومجموعة ML ، والتخزين ، ومراقبة الأداء ، والتنبؤات ، ومختبر الاختبار (يمكن زيادة وظائف وموارد هذه المنتجات عن طريق شراء خطة مدفوعة ، ولكن خدمات الطبقة المجانية جيدة جدًا. لإلقاء نظرة على الخطط ، تحقق من تسعير Firebase)
- التحجيم التلقائي للموارد
= خطوات استضافة موقعك الديناميكي على Firebase =
== المتطلبات ==
** 1. حساب Google ** إذا لم يكن لديك حساب Google ، فأنت بحاجة إلى التسجيل للحصول على حساب. يمكنك القيام بذلك عن طريق الانتقال إلى httpsaccounts.google.com/SignUp. ** 2. Node.js و npm ** Mac / Windows يمكنك تنزيل المثبت من httpsnodejs.org/en/download/. لينكس
اتبع الخطوات أدناه لتثبيت Node.js:
1. افتح محطة طرفية
2. قم بتشغيل الأوامر التالية:
sudo apt-get install curlcurl -sL httpsdeb.nodesource.com/
setup_13.x | sudo bash -sudo apt install nodejs ** لقد استخدمت ملاحظة: ** **
setup_13.xbecause في وقت البرنامج التعليمي كان أحدث إصدار
** 13 ** يمكنك التحقق من أحدث إصدار بالذهاب إلى httpsnodejs.org/en/
للتحقق مما إذا تم تثبيت Node.js و npm بنجاح ، قم بتشغيل الأوامر التالية ، والتي ستخرج الإصدار المثبت:
عقدة الخامس
npm -v
** 3. Firebase-CLI (واجهة سطر الأوامر - هذه هي أدوات إدارة مشروعات Firebase وعرضها ونشرها
npm install -g firebase-tools
= الخطوة 1: إنشاء مشروع Firebase =
- انتقل إلى httpsfirebase.google.com و
قم بالتسجيل من الزاوية اليمنى العليا
- انقر فوق
انتقل إلى وحدة التحكم ، من الزاوية اليمنى العليا
- ثم اضغط على
إنشاء مشروع ، كما هو موضح أدناه
4. الشيء التالي هو إدخال اسم مشروعك ، ثم الضغط على "متابعة"5. اضغط على "متابعة"لتمكين Google Analytics لمشروع Firebase الخاص بك (إذا كنت لا تريد ذلك ، فحدد لتعطيله)
6. حدد أقرب موقع لبرنامج Google Analytics
7. انقر فوق
** أنشئ مشروع وانتظر حتى يتم تحميله. ثم سترى شيئًا مثل أدناه
= الخطوة 2: تهيئة تسجيل الدخول إلى Firebase =
- افتح سطر أوامر / محطة ثم أنشئ دليلًا جديدًا وانتقل إليه
mkdir my-firebase-projectcd my-firebase-project
2. لاستضافة موقع ويب على Firebase ، سجّل الدخول إلى Firebase باستخدام الأمر التالي. بعد تشغيل الأمر ، ستفتح نافذة متصفح تطلب منك تسجيل الدخول إلى firebase باستخدام بيانات اعتماد Google الخاصة بك. أدخل بيانات الاعتماد هناك وسيقوم Firebase بتسجيل الدخول إلى نظامك
تسجيل الدخول إلى Firebase
= الخطوة 3: بدء مشروع Firebase في نظامك =
- الآن يتعين علينا تهيئة المشروع الذي أنشأناه على وحدة تحكم Firebase في النظام. للقيام بتشغيل الأمر أدناه
الحرف الأول من Firebase
2. اضغط على مفتاح لأسفل ثم حدد
** شيئين ** بالضغط على ** مفتاح شريط المسافة
- المهام
- الاستضافة
ثم
**إضغط مفتاح الدخول للاستمرار
3. ثم حدد
ثم اضغط دخول
** استخدم مشروع قائم **
4. اضغط على مفتاح الإدخال
** my-firebase-project ** ** أو اسم المشروع الذي استخدمته أو اسم المشروع الذي استخدمته
5. حدد
** Javascript ** واضغط على Enter
6. يمكنك القول
** لا ** هل تريد استخدام ESLint للقبض على الأخطاء المحتملة وفرض الأسلوب؟
7. النوع
** نعم ** لتثبيت التبعيات مع npm
8. هنا علينا القيام بمهمتين:
- يجب عليك تحديد الدليل الذي سيقيم فيه موقع الويب والأصول الخاصة بك. بشكل افتراضي هو
عام يمكنك الضغط على إدخال للمتابعة أو يمكنك التغيير إلى اسم الدليل المطلوب
- أنواع
نعم لصفحة التطبيق الواحد بحيث يمكن إعادة توجيه عناوين URL الديناميكية إلى وجهتها الصحيحة
9. اختبر تطبيق firebase على نظامك المحلي عن طريق تشغيل الأمر التالي. ثم اذهب الى
** HTplocalhost: 5000 ** لمشاهدة موقع الويب الأساسي الخاص بك قيد التشغيل
خدمة Firebase - فقط استضافة ، وظائف
يجب أن ترى شيئًا كهذا أدناه بعد فتح ملف
** HTTplocalhost: 5000 ** عنوان URL
10. أغلق الخادم من المحطة
= الخطوة 4: تثبيت الحزم وإنشاء دليل طرق العرض لموقع الويب الديناميكي =
- هنا سنقوم بالتبديل داخل دليل الوظائف للقيام بذلك
وظائف القرص المضغوط
** 2. تثبيت Express ** إنه إطار تطبيق ويب Node.js بسيط ومرن
npm أنا صريح - حفظ
** 3. تثبيت قضبان المقبض ** إنه محرك نموذجي لـ Node.js يستخدم للواجهة الأمامية الديناميكية لموقع الويب
npm أنا المقاود - حفظ
** 4. تثبيت التوحيد **
npm أقوم بتوحيد - حفظ
5. قم بإنشاء مجلد باسم
** المشاهدات ** داخل ** الوظائف ** المجلد الذي سنخزن فيه جميع كود الواجهة الأمامية
مكدير
الآراء
6. قم بالرجوع إلى الدليل الرئيسي عن طريق تشغيل الأمر التالي:
قرص مضغوط.
= الخطوة 5: إعداد Firestore (Cloud Database) =
== تكوين قاعدة البيانات ==
- انتقل إلى httpsconsole.firebase.google.com/
- اختر مشروعك
- يختار
قاعدة البيانات من الجزء الموجود على اليسار
4. انقر فوق
**إنشاء قاعدة بيانات**
5. حدد البدء في وضع الاختبار وإلا فلن تتمكن من الوصول إلى قاعدة البيانات من نظامك. سنقوم بتغيير هذا الإعداد بمجرد الانتهاء من تطوير الموقع
ثم اضغط
** التالي ** بعد القيام بذلك
6. حدد موقع Firestore DB الخاص بك
** بعد تعيين هذا الموقع ، لا يمكنك تغييره لاحقًا. ملحوظة: **
== CreateData ==
- انقر فوق بدء المجموعة
2. أدخل
** معرف المجموعة يمكنك أخذ عينات منه الآن
3. أدخل بيانات العينة. يدخل
** sample_doc ** باعتباره ** معرف المستند. ** أدخل ** العنوان ** داخل ** الحقل. أنا أحب السحابة ** داخل ** القيمة ثم انقر فوق ** حفظ **
= الخطوة 6: بناء المحتوى الديناميكي للموقع =
سنقسم الجزء إلى جزأين ، في الجزء الأول ، سنرى كيفية جلب البيانات من Firestore واستخدامها في موقع الويب. في الجزء الثاني ، سنرى كيفية إرسال بيانات النموذج
** أولاً ، سنقوم بتنزيل بيانات الاعتماد للوصول إلى Firestore **
2. انقر فوق
** الإعدادات ** من الجزء الأيمن وانتقل إلى ** إعدادات المشروع **
3. اذهب إلى
** حسابات الخدمة ** وانقر على ** إنشاء مفتاح خاص جديد
4. انقر فوق
** إنشاء مفتاح سيعطي نافذة منبثقة لتنزيل المفتاح. قم بتخزين المفتاح داخل مجلد ** وظائف ** الخاص بك على موقع الويب الخاص بك
== الجلب من Firestore ==
- يفتح
index.jsinside في مجلد الوظائف
2. نحتاج إلى تحديد بعض المكتبات التي نريد استخدامها في تطبيقنا. هذه هي نفس المكتبات التي قمنا بتثبيتها سابقًا
وظائف const = تتطلب ('firebase-functionconst express = تتطلب ('expressconst محركات = تتطلب ('unitedatevar hbs = need ('handlebarsconst admin = need ('firebase-admin
3. هنا نضع بعض الأشياء:
- تهيئة التطبيق باستخدام express
- سنقوم بتعيين محركنا كمقود
- ثم سنخبر الصريح أن كود الواجهة الأمامية سيكون داخل مجلد المشاهدات
const app = expressapp.engine ('hbs'، engine.handlebars)؛ app.set ('viewsviewsapp.set ('view enginehbs)
4. تخويل التطبيق الخاص بك للوصول إلى قاعدة بيانات Firestore الخاصة بك
*ملحوظة:*
1. التغيير
** YOUR_SDK_NAMEjson مع الملف الذي قمت بتنزيله ** لبيانات اعتماد للوصول إلى Firestore2. قم بتغيير عنوان URL لقاعدة البيانات إلى عنوان URL لقاعدة البيانات الخاصة بك. لرؤية عنوان URL ، يمكنك الانتقال إلى ** الإعدادات>حساب الخدمة **
var serviceAccount = يتطلب
YOUR_SDK_NAME.jsonadmin.initializeApp ({بيانات الاعتماد: admin.credential.cert (serviceAccount) ، قاعدة البيانات URL: "httpsmyfirebaseproject-bx54dasx3.firebaseio.com
5. وظيفة لجلب البيانات من Firestore
- معرف المجموعة هو
عينة
- معرف المستند هو
sample_doc
حددنا ما سبق أثناء إدخال بيانات العينة
دالة غير متزامنة getFirestoreconst firestore_con = انتظار admin.firestoreconst writeResult = firestore_con.collection ('sampledoc ('sample_docgetthen (doc =>{
if (! doc.exists) {console.log ('No such document}
آخر {عودة doc.data
.catch (يخطئ =>{console.log ('خطأ في إحضار المستند'، خطأ writeResult
}
** نستخدم ملاحظة: ** ** غير متزامن ** لأنه يتعين علينا الانتظار حتى تكتمل عملية الوعد بين قاعدة البيانات وموقعنا الإلكتروني
6. قم بإنشاء المسار وأرسل النتيجة إلى الواجهة الأمامية
app.getasync (طلب ، استجابة) var db_result = await getFirestoreresponse.render ('indexdb_resultexports.app = function.https.onRequest (app) ؛
7. إنشاء
** index.hbs ** داخل مجلد ** views **. hbs هو ملف Handelbars ملاحظة: **
8. اكتب كود HTML الأساسي هذا بالداخل
** index.hbs ** لمشاهدة النتيجة التي تم جلبها
Tushar Chand Kapoor
