المدونة القادمة Firestore
تستخدم هذه المدونة Next.js لـ SSR & Firebase Firestore API لتخزين البيانات وجلبها. قم بإنشاء وتحرير المحتوى الخاص بك في نظام إدارة المحتوى المخصص البسيط المصمم باستخدام React و Mobx State Tree والمكونات المصممة.
استنساخ هذا الريبو واستخدمه كنقطة انطلاق لإنشاء مدونة يتوهم الخاصة بك.
كومة التكنولوجيا:
- رد فعل
- Next.js
- Firebase Firestore و Auth
- المكونات المصممة
- Mobx-State Tree
- تصميم النمل
- ماركسي
- eslint
- أجمل
- WebPack
- Husky & Lint staged
ما تحصل عليه:
- موجز المشاركات
- وظائف مميزة
- المشاركات بالعلامات والفئة
- دعم اللغة متعددة
- دعم متعدد المؤلف
- التخفيض مع القدرة على استخدام مكونات رد الفعل المخصصة
- CMS بسيطة ومريحة مستوحاة من Ghost
- CMS محمي بواسطة Firebase Auth
- ردود سريعة وصديقة لكبار المسئولين الاقتصاديين مع SSR
- نتائج جيدة في المنارة
ابدء
الخطوة 1. إنشاء حساب Firebase
الخطوة 2. طريقة مصادقة الإعداد
- انقر فوق إعداد طريقة تسجيل الدخول في قسم المصادقة.
- تمكين فقط مزود مصادقة Google.
- أضف مجالك (إذا كان لديك واحد) إلى المجالات المعتمدة .
الخطوة 3. إنشاء قاعدة بيانات Firestore
- انتقل إلى قسم قاعدة البيانات وإنشاء مثيل Firestore.
Firestore لا يزال في بيتا ، لكنه لا يجعله أقل روعة.
الخطوة 4. تكوين قاعدة البيانات.
- انتقل إلى قسم القواعد في قاعدة البيانات الخاصة بك ولصق تكوين من .FireBase-Rules في جذر المشروع.
- نشر قواعد جديدة.
الخطوة 5. قم بإعداد مفاتيح Firebase السرية لتطبيقنا.
- إنشاء
.env في جذر المشروع. لا ترتكب هذا الملف. إنها بيانات شخصية لا ينبغي أن تكون متاحة للجميع. - انتقل إلى إعدادات المشروع في وحدة التحكم Firebase (انقر على أيقونة الترس بجانب نظرة عامة على المشروع ).
- نسخ البيانات من هذه الصفحة إلى
.env بالتنسيق التالي:
F_PROJECT_ID= < your Project ID >
F_AUTH_DOMAIN= < your Project ID > .firebaseapp.com
F_API_KEY= < your Web API Key >
الخطوة 6. إعداد مفتاح FireBase Admin SDK لاستيراد/تصدير البيانات من قاعدة البيانات.
من أجل أن تكون قادرًا على تهيئة قاعدة البيانات مع البذور الأولية ، نحتاج إلى إنشاء مفتاح خدمة إدارة Firebase الخاص.
- انتقل إلى إعدادات المشروع > حسابات الخدمة وانقر فوق إنشاء زر مفتاح خاص جديد .
- حفظ الملف الذي تم تنزيله باسم
firebase-service-key.json في Project Root. ** لا ترتكب هذا الملف. تمت إضافتها إلى .gitignore بشكل افتراضي.
الخطوة 7. تهيئة قاعدة البيانات مع البيانات الأولية.
لقد انتهينا تقريبًا. دعنا نهيئة قاعدة البيانات الخاصة بنا مع البيانات الأولية.
الخطوة 8. إعداد فهارس قاعدة البيانات.
نحتاج إلى فهارس الإعداد يدويًا في قاعدة بيانات Firestore الخاصة بنا لتتمكن من تقديم طلبات REST إلى قاعدة Firebase الخاصة بنا.
- انتقل إلى قاعدة البيانات > الفهرسة وإنشاء الفهرس التالي.
الخطوة 9. تشغيل المدونة محليا.
نحن على استعداد لإطلاق مدونتنا محليًا.
تم تشغيل المدونة على http: // localhost: 3000.
الخطوة 10. تسجيل الدخول إلى جزء المشرف.
انتظر .. ولكن ماذا عن جزء CMS؟
- انتقل إلى http: // localhost: 3000/admin وانقر فوق "انقر لبدء الكتابة" .
- تسجيل الدخول مع حساب Google الخاص بك في نافذة popup.
- انتقل إلى وحدة التحكم في Firebase وأضف حقوق المؤلف لحسابك للتو.
- نسخ المستخدم UID في قسم المصادقة .
- إنشاء مجموعة
authors في قاعدة البيانات - قم بإنشاء سجل في مجموعة
authors ، حيث يكون documentId هو uid للمستخدم name هو id المستخدم في ملف config.js .
الخطوة 11. جاهز للذهاب!
- انتقل إلى http: // localhost: 3000/admin
- إنشاء منشور جديد أو تحرير التغييرات الحالية ونشر.
رخصة
مرخصة بموجب ترخيص معهد ماساتشوستس للتكنولوجيا ، حقوق الطبع والنشر © 2018-ألكساندر سويفالوف في الوقت الحالي
انظر الترخيص لمزيد من المعلومات.