Vue 2 + Firebase: كيفية إنشاء تطبيق Vue باستخدام نظام مصادقة Firebase في 15 دقيقة

في هذا البرنامج التعليمي ، سنرى كيفية إنشاء تطبيق ويب بسرعة باستخدام نظام مصادقة باستخدام Vue 2 وجهاز التوجيه vue و Firebase.

10/11/2018: لقد قمت للتو بتحديث هذا البرنامج التعليمي بحيث يمكن استخدامه مع الإصدار Vue Cli 3 الرائع وأحدث إصدار من Vue. لا تزال جميع مصادر الإصدار السابق متوفرة في مستودع Github (github.com/CaptainYouz/vue-firebase-tutorial) قبل علامة ‘update-vue-cli`.

ما هو Vue.js؟

فيما يلي نظرة عامة على إطار عمل جافا سكريبت المذهل وخفيف الوزن:

Vue (واضح / vjuː / ، مثل طريقة العرض) هي إطار تدريجي لبناء واجهات المستخدم. على عكس الأُطُر المتجانسة الأخرى ، تم تصميم Vue من الألف إلى الياء بحيث يمكن اعتماده تدريجياً. تركز المكتبة الأساسية على طبقة العرض فقط ، ومن السهل جدًا التقاطها ودمجها مع المكتبات الأخرى أو المشاريع الحالية
من وثائق vuejs الرسمية: https://vuejs.org/v2/guide

لماذا Vue.js؟

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

إذا كنت تريد التعمق في سبب استخدام Vue.js ، فيمكنك التحقق من هذا التوافق مع إطار عمل جافا سكريبت الآخر: https://vuejs.org/v2/guide/comparison.html

ما هو Firebase؟

Firebase هي عبارة عن منصة لتطوير تطبيقات المحمول والويب يتكون Firebase من ميزات تكميلية يمكن للمطورين مزجها وتطابقها ليناسب احتياجاتهم. [...] كان المنتج الأولي لـ Firebase عبارة عن قاعدة بيانات في الوقت الفعلي ، والتي توفر واجهة برمجة تطبيقات تسمح للمطورين بتخزين ومزامنة البيانات عبر عدة عملاء. مع مرور الوقت ، وسعت خط إنتاجها لتصبح مجموعة كاملة لتطوير التطبيق.
من ويكيبيديا: https://en.wikipedia.org/wiki/Firebase

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

لماذا Firebase؟

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

لنبدأ !

أولاً ، سنقوم بتهيئة مشروع Vue جديد باستخدام الأداة الرائعة Vue Cli 3 (https://github.com/vuejs/vue-cli).

إذا لم يكن لديك برنامج vue cli مثبتًا بالفعل ، فلنقم بتثبيته:

$ npm install -g @ vue / cli

الآن بعد تثبيت vue cli ، فلنقم بإنشاء مشروع جديد. في وثائق vue cli ، تقول:

استعمال
vue $ إنشاء <اسم المشروع>

تتمثل إحدى الميزات الرائعة لبرنامج Vue Cli 3 في أنه يمكنك تهيئة مشروعك بتكوين الصفر المطلوب ، بحيث يمكنك البدء في الشفرة في أسرع وقت ممكن.

دعنا ننشئ مشروع Vue الجديد ونطلق عليه "vue-firebase-tutorial".

vue خلق vue-firebase ، تعليمي
vue إنشاء vue-firebase- تعليمي

سيُطلب منك اختيار إعداد مسبق. يمكنك إما اختيار الإعداد المسبق الافتراضي الذي يأتي مع إعداد Babel + ESLint الأساسي ، أو اختيار "تحديد الميزات يدويًا" لاختيار الميزات التي تحتاج إليها.

بالنسبة لحالتنا ، سنقوم بتحديد "تحديد الميزات يدويًا" واختيار خيار vue-router لأننا سنستخدمه خلال هذا البرنامج التعليمي. بالنسبة للميزات الأخرى ، افعل ما تريد ، حيث إنه لا يهم حقًا بقية البرنامج التعليمي.

اختر خيار

في النهاية ، سيتم سؤالك عما إذا كنت تريد حفظ هذا الإعداد المسبق للمشاريع المستقبلية وبعد ذلك ، سيتم تهيئة مشروعك.

بعد ذلك ، أدخل دليل البرنامج التعليمي الجديد vue-firebase ، وقم بتشغيل خدمة تشغيل npm

$ cd vue-firebase-tutorial
خدمة تشغيل npm $

الآن ، إذا فتحت عنوان url "http: // localhost: 8080" ، فيجب أن يكون لديك العرض الافتراضي لمشروع Vue الخاص بنا!

طريقة العرض الافتراضية من مشروع Vue الجديد

هيكل التطبيق

دعنا نلقي نظرة سريعة على بنية التطبيق.

هيكل التطبيق

في هذا البرنامج التعليمي ، نحتاج فقط إلى معرفة أن الكود المصدري الخاص بنا سيكون تحت src / directory.

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

أيضًا ، قبل المضي قدمًا في هذا البرنامج التعليمي ، إذا كنت لا تعرف بالفعل بنية ملف Vue (مثل src / components / HelloWorld.vue) ، فإنني أنصحك بإلقاء نظرة على هذا: https://vuejs.org /v2/guide/single-file-components.html

دعنا نكتب بعض الكود!

لدينا مستقبل التطبيقات العمارة

سيتألف تطبيقنا من ثلاث طرق عرض ، اثنان (عرض تسجيل الدخول وعرض التسجيل) لا يمكننا الوصول إليها إلا من خلال المصادقة ، وواحد (عرض الصفحة الرئيسية) لا يمكننا الوصول إليه إلا من خلال المصادقة.

بنية التطبيق

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

الخطوة الأولى: تسجيل الدخول والتسجيل

1-1 عرض تسجيل الدخول

لنقم بإنشاء عرض تسجيل الدخول. للقيام بذلك ، سنقوم بإنشاء مكون Vue جديد يسمى تسجيل الدخول تحت src / طرق العرض

في الوقت الحالي ، سيتألف المكون ببساطة من عنوان وحقلين للإدخال وزر وجمل صغيرة في html.

مكون تسجيل الدخول. `src / طرق العرض / تسجيل الدخول

تم إنشاء مكون لدينا الآن! ولكن كيف يتم عرض هذا المكون الجديد في تطبيقنا؟ حسنًا ، لذلك ، سوف نستخدم جهاز التوجيه الصوتي. تذكر؟ لقد قمنا بالفعل بتثبيته عندما قمنا بتهيئة التطبيق باستخدام vue-cli.

ما هو جهاز التوجيه vue؟

vue-router هو الموجه الرسمي لـ Vue.js. إنه يتكامل بعمق مع جوهر Vue.js لجعل بناء تطبيقات صفحة واحدة مع Vue.js نسيمًا.
أصبح إنشاء تطبيق أحادي الصفحة باستخدام Vue.js + vue-router أمرًا بسيطًا. باستخدام Vue.js ، نقوم بالفعل بتكوين تطبيقنا مع المكونات. عند إضافة جهاز توجيه vue إلى المزيج ، كل ما نحتاج إليه هو تعيين مكوناتنا على المسارات وإعلام جهاز التوجيه vue بمكان تقديمها.
من وثائق جهاز التوجيه: https://github.com/vuejs/vue-route

لذلك ، دعونا نضيف مكون تسجيل الدخول الجديد الذي أنشأناه للتو إلى جهاز توجيه التطبيق لدينا. افتح الملف src / router.js وأضف مكون تسجيل الدخول إلى جهاز التوجيه مثل هذا:

SRC / router.js

بعد ذلك ، إذا قمت بتغيير عنوان URL الخاص بالمتصفح إلى مضيف محلي: 8080 / # / ، فيجب أن ترى مكون تسجيل الدخول الجديد الذي أنشأناه للتو معروضًا في متصفحك:

HTTP: // المضيف المحلي: 8080 / # / دخول

لماذا لا تزال لدينا القائمة الافتراضية على الرغم من أننا لم نضعها في قالب html الخاص بمكون تسجيل الدخول؟ حسنًا ، إذا قمت بفتح ملف App.vue ، فسيكون قالب مكون التطبيق كما يلي:

قالب HTML من مكون التطبيق

مكون التطبيق هو المكون الرئيسي للتطبيق وسيكون أول من يتم تقديمه. يحتوي على div مع عنصري ارتباط جهاز التوجيه ومكون html يسمى طريقة عرض جهاز التوجيه.

سنتحدث قريبًا عن عنصر ارتباط جهاز التوجيه ، ولكن أولاً ، دعونا نرى ما هو عنصر عرض جهاز التوجيه.

عرض الموجه هو أحد مكونات الموجه vue:

المكون  هو مكون وظيفي يعرض المكون المطابق للمسار المحدد. يمكن أن تحتوي المكونات المقدمة في  أيضًا على  الخاصة بها ، والتي ستعرض المكونات للمسارات المتداخلة.
من وثائق جهاز التوجيه vtps https://router.vuejs.org/en/api/router-view.html

لذلك ، عند الوصول إلى http: // localhost: 8080 / # / login vue-router سيعرض المكون المرفق للمسار / تسجيل الدخول الذي حددناه في src / router.js داخل مكون عرض الموجه. ونظرًا لأن مكون التطبيق يحتوي أيضًا على div div مع عنصري ارتباط الموجه في القالب الخاص به ، فنحن أيضًا نعرضهما في رأينا.

لتجنب الخلط بين التنقل والتطبيق الذي نقوم بإنشائه ، دعنا نزيل عنصر التنقل هذا من مكون التطبيق واستبدله بشعار vue. لدينا بالفعل شعار Vue داخل src / الأصول / الدليل ، لذلك دعونا نستخدمه!

مكون التطبيق في `src / App.vue`

أيضًا ، نظرًا لأننا لن نستخدم طريقة العرض "حول" ، يمكننا إزالة الملف من دليلنا (src / views / About.vue) وأيضًا إزالة i t من تكوين طرقنا في src / router.js

SRC / router.js

الآن ، دعنا نعود إلى طريقة عرض تسجيل الدخول الخاصة بنا ، أضف بعض الأنماط إلى مكون تسجيل الدخول. داخل عنصر