انطلق إلى الأرض مع Vue.js و Firestore

يحتوي Google Firebase على إمكانية تخزين بيانات جديدة تسمى "Firestore" (حاليًا في المرحلة التجريبية) والتي تعتمد على نجاح قاعدة بيانات Firebase Realtime ولكنها تضيف بعض الميزات الرائعة. في هذه المقالة ، سنقوم بإعداد أساسيات تطبيق الويب باستخدام Vue.js و Firestore.

لنفترض أن لديك هذه الفكرة الرائعة لمنتج جديد (على سبيل المثال ، Twitter أو Facebook أو Instagram التالي ، لأنه لا يمكننا أبدًا أن يكون لدينا الكثير من وسائل التواصل الاجتماعي ، أليس كذلك؟). للبدء ، تريد إنشاء نموذج أولي أو M inimum V iable P roduct (MVP) لهذا المنتج. الهدف هو بناء جوهر التطبيق بأسرع ما يمكن حتى تتمكن من عرضه على المستخدمين والحصول على التعليقات وتحليل الاستخدام. ينصب التركيز بشكل كبير على سرعة التطوير والتكرار السريع.

ولكن قبل أن نبدأ في البناء ، يحتاج منتجنا المذهل إلى اسم. دعنا نسميها "Amazeballs." ستكون رائعة - انتظر - داري !

إليك لقطة توضح كيف أتخيلها:

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

عند إنشاء MVP ، ستحتاج إلى الأدوات التي تمنحك القدرة على تنفيذ الميزات الرئيسية بسرعة بالإضافة إلى المرونة في إضافة الميزات وتغييرها بسرعة في وقت لاحق. يقع خياري على Vue.js لأنه إطار عمل عرض جافا سكريبت ، مدعومًا بمجموعة Firebase (بواسطة Google) وقاعدة بياناتها الجديدة في الوقت الفعلي والتي تسمى Firestore.

يمكن الوصول إلى Firestore مباشرةً باستخدام طرق HTTP العادية مما يجعله حلاً كاملاً للخلفية كخدمة حيث لا يتعين عليك إدارة أي من الخوادم الخاصة بك ولكن لا تزال تخزن البيانات عبر الإنترنت.

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

لنبدأ

نبدأ مع Vue.js. إنه أمر رائع للمبتدئين في جافا سكريبت ، حيث تبدأ بـ HTML وتضيف منطقًا تدريجيًا إليها. لكن لا تستخف. يحتوي على الكثير من الميزات القوية. هذا المزيج يجعله خياري الأول لإطار عمل الواجهة الأمامية.

يحتوي Vue.js على واجهة سطر أوامر (CLI) لمشاريع السقالات. سنستخدم ذلك للحصول على العظام المجردة بسرعة. أولاً ، قم بتثبيت CLI ، ثم استخدمه لإنشاء مشروع جديد بناءً على نموذج "webpack-simple".

 npm install -g vue-cli vue init webpack-simple amazeballs

إذا اتبعت الخطوات التي تظهر على الشاشة ( npm install و npm run dev ) فسيتم فتح متصفح بشعار Vue.js كبير.

تهاني! كان ذلك سهلا.

بعد ذلك ، نحتاج إلى إنشاء مشروع Firebase. توجه إلى https://console.firebase.google.com/ وأنشئ مشروعًا. يبدأ المشروع في خطة Spark المجانية ، والتي تمنحك قاعدة بيانات محدودة (1 غيغابايت من البيانات ، 50 ألف قراءة في اليوم) و 1 غيغابايت من الاستضافة. هذا أكثر من كافٍ بالنسبة إلى MVP الخاص بنا ، ويمكن ترقيته بسهولة عندما يكتسب التطبيق قوة جذب.

انقر فوق "إضافة Firebase إلى تطبيق الويب الخاص بك" لعرض التكوين الذي تحتاجه. سنستخدم هذا التكوين في تطبيقنا ، ولكن بطريقة Vue.js لطيفة باستخدام الحالة المشتركة.

قم أولاً npm install firebase ، ثم قم بإنشاء ملف يسمى src / store.js . هذا هو المكان الذي سنضع فيه الحالة المشتركة بحيث يمكن لكل مكون من مكونات Vue.js الوصول إليها بشكل مستقل عن شجرة المكونات. يوجد أدناه محتوى الملف. الولاية تحتوي فقط على بعض العناصر النائبة في الوقت الحالي.

 import Vue from 'vue'; import firebase from 'firebase/app'; import 'firebase/firestore'; // Initialize Firebase, copy this from the cloud console // Or use mine :) var config = { apiKey: "AIzaSyDlRxHKYbuCOW25uCEN2mnAAgnholag8tU", authDomain: "amazeballs-by-q42.firebaseapp.com", databaseURL: "https://amazeballs-by-q42.firebaseio.com", projectId: "amazeballs-by-q42", storageBucket: "amazeballs-by-q42.appspot.com", messagingSenderId: "972553621573" }; firebase.initializeApp(config); // The shared state object that any vue component can get access to. // Has some placeholders that we'll use further on! export const store = { ballsInFeed: null, currentUser: null, writeBall: (message) => console.log(message) };

سنقوم الآن بإضافة أجزاء Firebase. قطعة واحدة من التعليمات البرمجية للحصول على البيانات من Firestore:

 // a reference to the Balls collection const ballsCollection = firebase.firestore() .collection('balls'); // onSnapshot is executed every time the data // in the underlying firestore collection changes // It will get passed an array of references to // the documents that match your query ballsCollection .onSnapshot((ballsRef) => { const balls = []; ballsRef.forEach((doc) => { const ball = doc.data(); ball.id = doc.id; balls.push(ball); }); store.ballsInFeed = balls; });

ثم استبدل وظيفة writeBall تقوم بتنفيذ عملية كتابة:

 writeBall: (message) => ballsCollection.add({ createdOn: new Date(), author: store.currentUser, message })

لاحظ كيف تم فصل الاثنين تمامًا. عند الإدراج في مجموعة ، يتم تشغيل onSnapshot لأنك قمت بإدراج عنصر. هذا يجعل إدارة الدولة أسهل كثيرًا.

لديك الآن كائن حالة مشترك يمكن لأي مكون Vue.js الوصول إليه بسهولة. دعونا نستخدمها بشكل جيد.

نشر الاشياء!

أولاً ، دعنا نتعرف على المستخدم الحالي.

يحتوي Firebase على واجهات برمجة تطبيقات للمصادقة تساعدك في مهمة التعرف على المستخدم. قم بتمكين العناصر المناسبة على وحدة تحكم Firebase في المصادقة ← أسلوب تسجيل الدخول . في الوقت الحالي ، سأستخدم تسجيل الدخول إلى Google - باستخدام زر غير رائع للغاية.

لا يمنحك Firebase أي مساعدة في الواجهة ، لذا سيتعين عليك إنشاء أزرار "تسجيل الدخول باستخدام Google / Facebook / Twitter" الخاصة بك ، و / أو حقول إدخال اسم المستخدم / كلمة المرور. من المحتمل أن يبدو مكون تسجيل الدخول الخاص بك مشابهًا إلى حد ما:

 <template> <div> <button @click.prevent="signInWithGoogle">Log in with Google</button> </div> </template> <script> import firebase from 'firebase/app'; import 'firebase/auth'; export default { methods: { signInWithGoogle() { var provider = new firebase.auth.GoogleAuthProvider(); firebase.auth().signInWithPopup(provider); } } } </script>

الآن هناك قطعة أخرى من أحجية تسجيل الدخول ، وهي الحصول على currentUser في المتجر. أضف هذه الأسطر إلى متجرك. js :

 // When a user logs in or out, save that in the store firebase.auth().onAuthStateChanged((user) => { store.currentUser = user; });

بسبب هذه الأسطر الثلاثة ، في كل مرة يتغير فيها المستخدم المسجل الدخول حاليًا (تسجيل الدخول أو الخروج) ، store.currentUser أيضًا. دعونا ننشر بعض الكرات!

نموذج الإدخال هو مكون Vue.js منفصل متصل بوظيفة writeBall في متجرنا ، مثل هذا:

 <template> <form @submit.prevent="formPost"> <textarea v-model="message" /> <input type="submit" value="DUNK!" /> </form> </template> <script> import { store } from './store'; export default { data() { return { message: null, }; }, methods: { formPost() { store.writeBall(this.message); } }, } </script>

مدهش! الآن يمكن للأشخاص تسجيل الدخول والبدء في نشر الكرات. لكن انتظر ، نحن نفتقد الإذن. نريدك أن تكون قادرًا على نشر الكرات بنفسك فقط ، وهنا يأتي دور قواعد Firestore . إنها مكونة من كود Javascript-ish الذي يحدد امتيازات الوصول إلى قاعدة البيانات. يمكنك إدخالها عبر وحدة تحكم Firestore ، ولكن يمكنك أيضًا استخدام Firebase CLI لتثبيتها من ملف على القرص. قم بتثبيته وتشغيله على النحو التالي:

 npm install -g firebase-tools firebase login firebase init firestore

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

 service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read: if true; allow create: if request.auth.uid != null && request.auth.uid == request.resource.data.author; } } }

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

إذا قمت بتشغيل firebase deploy ، فسيتم نشر قواعد Firestore وتأمين بيانات الإنتاج الخاصة بك في ثوانٍ.

مضيفا منطق الخادم

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

لتبسيط الأمثلة ، سأقدم عرضًا توضيحيًا صغيرًا للاستماع إلى الكرات التي تم إنشاؤها وتعديل رسالتها. ليس لأن هذا مفيد بشكل خاص ، ولكن لتوضيح مدى سهولة تشغيل وظائف السحابة.

 const functions = require('firebase-functions'); exports.createBall = functions.firestore .document('balls/{ballId}') .onCreate(event => { var createdMessage = event.data.get('message'); return event.data.ref.set({ message: createdMessage + ', yo!' }, {merge: true}); });

أوه ، انتظر ، لقد نسيت أن أخبرك أين تكتب هذا الرمز.

 firebase init functions

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

تمنحك وظائف السحابة مكانًا رائعًا لفصل أجزاء مختلفة من تطبيقك وجعلها تتواصل بشكل غير متزامن. أو في أسلوب الرسم المعماري:

الخطوة الأخيرة: النشر

يحتوي Firebase على خيار الاستضافة المتاح لهذا الغرض ، ويمكنك استخدامه عبر Firebase CLI.

 firebase init hosting

اختر dist كدليل عام ، ثم اختر "نعم" لإعادة كتابة كافة عناوين URL إلى index.html . يتيح لك هذا الخيار الأخير استخدام vue-router لإدارة عناوين URL الجميلة داخل تطبيقك.

الآن هناك عقبة صغيرة: لا يحتوي مجلد dist على ملف index.html يشير إلى الإنشاء الصحيح لشفرتك. لإصلاح ذلك ، أضف برنامج نصي npm إلى package.json الخاص بك:

 { "scripts": { "deploy": "npm run build && mkdir dist/dist && mv dist/*.* dist/dist/ && cp index.html dist/ && firebase deploy" } }

الآن ما عليك سوى تشغيل npm deploy ، وسيعرض لك Firebase CLI عنوان URL للشفرة المستضافة!

متى تستخدم هذه العمارة

هذا الإعداد مثالي لـ MVP. بحلول المرة الثالثة التي تقوم فيها بذلك ، سيكون لديك تطبيق ويب يعمل في غضون دقائق - مدعومًا بقاعدة بيانات قابلة للتطوير يتم استضافتها مجانًا. يمكنك البدء على الفور في بناء الميزات.

أيضًا ، هناك مساحة كبيرة للنمو. إذا لم تكن وظائف السحابة قوية بدرجة كافية ، فيمكنك الرجوع إلى واجهة برمجة تطبيقات تقليدية تعمل على عامل إرساء في Google Cloud على سبيل المثال. يمكنك أيضًا ترقية بنية Vue.js الخاصة بك باستخدام vue-router و vuex ، واستخدام قوة حزمة الويب المضمنة في قالب vue-cli.

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

خذ الوقت الكافي لاتخاذ قرار بشأن نموذج البيانات الخاص بك. إذا كنت بحاجة إلى تغيير نموذج البيانات الخاص بك لاحقًا ، فإن ترحيل البيانات هو خيارك الوحيد.

"

إذن ما هي أمثلة المشاريع التي تستخدم هذه الأدوات؟ من بين الأسماء الكبيرة التي تستخدم Vue.js Laravel و GitLab و (للهولنديين) nu.nl. لا يزال Firestore في مرحلة تجريبية ، لذا لا يوجد الكثير من المستخدمين النشطين هناك حتى الآن ، ولكن يتم استخدام مجموعة Firebase بالفعل بواسطة National Public Radio و Shazam وغيرها. لقد رأيت زملاءًا يطبقون Firebase للعبة Road Warriors المستندة إلى Unity والتي تم تنزيلها أكثر من مليون مرة في الأيام الخمسة الأولى. يمكن أن يستغرق الأمر بعض الحمل ، وهو متعدد الاستخدامات للغاية مع العملاء للويب ، والجوال المحلي ، والوحدة ، وما إلى ذلك.

أين يمكنني الاشتراك؟!

إذا كنت تريد معرفة المزيد ، ففكر في الموارد التالية:

• عينة العمل تحتوي على جميع الكود أعلاه
• الوثائق على Vue.js و vue-router و vue-cli
• وثائق على Firebase
• طريقة مسلية للتعرف على Firebase بشكل أفضل - مدونة YouTube الخاصة بهم

ترميز سعيد!