كيفية إنشاء تطبيق ويب في Vue.js باستخدام Firebase و Vuex و Vue Router (الجزء 1)

نحن هنا بصدد تنفيذ تطبيق عرض مع خلفية firebase. سوف نستخدم Vuetify و Vuex و Vue-Router و Firebase.

ماذا سنفعل

  1. إنشاء تطبيق Vue.js
  2. أضف vuetify
  3. إنشاء هيكل لتطبيقنا
  4. سير العمل من التطبيق لدينا
  5. إنشاء حساب firebase
  6. ربط قاعدة firebase بالتطبيق
  7. إنشاء شريط التنقل إلى التطبيق
  8. إضافة صفحة التسجيل
  9. اختبار التسجيل باستخدام firebase
  10. إضافة صفحة تسجيل الدخول
  11. اختبار تسجيل الدخول باستخدام firebase
  12. دمج vuex
  13. Refactor الملف Register.vue
  14. Refactor ملف Signin.vue
  15. إصلاح مشاكل التنقل في تسجيل الدخول والخروج

1. إنشاء تطبيق Vue.js

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

فيو خلق معرضا

الصيحة ، اكتمال الخطوة الأولى ، تحتاج الآن إلى تشغيل التنمية المحلية باستخدام

تشغيل npm تخدم

تطبيقنا يعمل على المنفذ 8080.

2. إضافة vuetify

Vuetify هو إطار عمل لتصميم المواد لـ Vue.js ويبسط تنفيذ احتياجات التطبيق لدينا. سنستخدم ذلك أيضًا. نظرًا لأننا نستخدم vue-cli ، يمكننا بسهولة إضافة vuetify إلى تطبيقنا باستخدام الأمر ،

إضافة vuetify

الآن تشغيل خادم التنمية ، لرؤية سحر vuetify.

رائع ، vuetify متكامل إلى التطبيق لدينا

3. إنشاء هيكل لتطبيقنا

حاليا ، طلبنا هو هيكل مثل هذا.

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

ستكون هذه هي خطتنا المقترحة للتطبيق. سيحتوي مجلد المصادقة على مكونات التسجيل وتسجيل الدخول.

سيحتوي مجلد الخدمات على أي مكالمة API أو يحتاج إلى إضافة البيانات.

سيساعد مجلد المساعد لأي حراس مثل المصادقة اللازمة لعرض أي صفحة.

بقية هيكل المجلد هو التفسير الذاتي وأعتقد.

5. إنشاء حساب firebase

قبل الغوص في firebase ، يحتاج المرء أن يفهم لماذا firebase. بادئ ذي بدء ، هو نتاج جوجل نقلا عن كلماتهم

يمنحك Firebase وظائف مثل التحليلات وقواعد البيانات والرسائل وتقارير الأعطال حتى تتمكن من التحرك بسرعة والتركيز على المستخدمين.

في تطبيقنا ، سيتم التركيز على وظائف المصادقة وقواعد البيانات فقط.

رابط ل firebase

يمكننا استخدام Gmail الخاص بنا لتسجيل الدخول إلى firebase console. في الزاوية العلوية اليمنى ، لدينا "وحدة تحكم Goto" ستتم إعادة توجيهها إلى قسم التطبيق.

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

نعم ، مشروعنا جاهز للتشغيل في firebase.

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

انقر فوق المصادقة -> إعداد طريقة تسجيل الدخول.

أقوم حاليًا بالتسجيل باستخدام سيناريو كلمة مرور البريد الإلكتروني ، لذلك نقوم بتمكين ذلك فقط.

الآن ، نحتاج إلى ربط تطبيقنا بقاعدة firebase ، ويمكن القيام بذلك باستخدام التكوينات المتوفرة عند النقر فوق إعداد الويب ،

انسخ التكوينات ، نحتاج إلى إضافة التكوينات إلى تطبيق Vue.js قريبًا.

6. ربط firebase إلى التطبيق

حتى الآن ، أنشأنا تطبيق firebase ، والآن نحن بحاجة إلى ربط تطبيق Vue.js لدينا. للقيام بذلك نحن بحاجة إلى بعض الخطوات

  1. إضافة تنفيذ env.
  2. تثبيت firebase.
  3. أضف مفاتيح firebase إلى التطبيق.

1. إضافة تنفيذ env.

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

النقاط أدناه تحتاج إلى أن تكون في الاعتبار قبل القيام بذلك.

ا. قم بإنشاء ملف .env في المسار الجذر لتطبيقنا ، والذي سيحتوي على جميع التفاصيل المطلوبة عند تشغيل التطبيق لدينا في كل وضع.

ب. قم بإنشاء ملف .env.development يحتوي على كافة التفاصيل اللازمة لتطبيقنا ليتم تنفيذه محليًا. نحن نحتفظ ببيانات اعتماد firebase الخاصة بنا هنا.

ج. يجب أن تبدأ جميع متغيرات env بـ "VUE_APP_". وإلا يتم تجاهلهم.

د. تأكد من إعادة تشغيل التطبيق بعد إضافة تلك الملفات. بالنسبة لي ، أنها تعمل فقط بعد إعادة التشغيل.

لقد أضفت للتو عنوان اختبار للتأكد من أنه يعمل في ملف .env. سيتم استخدام هذا لكل وضع في تطبيقنا.

VUE_APP_TITLE = 'SHOW CASE'

الآن ، يصبح الرمز ،

سوف تعطي حالة المعرض كرابط

2. تثبيت firebase

لاستخدام firebase في تطبيقنا ، تحتاج إلى تثبيت firebase على تطبيقنا.

npm تثبيت firebase - حفظ

3. أضف مفاتيح firebase إلى التطبيق.

الآن يمكننا نسخ مفتاح firebase إلى تطبيقنا. يمكننا استخدام ملف .env.development و main.js لهذا الغرض.

انسخ التكوينات من firebase وأضفها إلى ملف main.js في المتغيرات البيئية.

يتم الآن تغيير كافة المفاتيح باستخدام متغيرات ENV ، ويتم استبدالها بقيم أصلية من ملف .env.development.

استيراد firebase إلى ملف main.js أيضًا ، يصبح إجمالي الكود في main.js ،

استيراد Vue من "vue"
استيراد "./plugins/vuetify"
استيراد التطبيق من "@ / App.vue"
استيراد جهاز التوجيه من "@ / جهاز التوجيه"
استيراد متجر من "@ / متجر"
استيراد * كـ firebase من 'firebase'
Vue.config.productionTip = false
Vue الجديد ({
  جهاز التوجيه،
  متجر،
  تقديم: h => h (التطبيق)
}). $ جبل ( '# التطبيق')
فار config = {
  apiKey: process.env.VUE_APP_FIREBASE_API_KEY ،
  authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN ،
  databaseURL: process.env.VUE_APP_FIREBASE_DATASE_URL ،
  projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID ،
  storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET ،
  messenderSenderId: process.env.VUE_APP_FIREBASE_MESSAGE_SENDER_ID
}
firebase.initializeApp (التكوين)

7. إنشاء شريط التنقل إلى التطبيق

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

قم باستيراد مكون شريط التنقل إلى App.vue وحدد المكون في App.vue.

<القالب>
  <الخامس التطبيق>
    
    <الملاحة بار>