دعونا نتعلم كيفية تثبيت وإعداد AngularFire2 4.0

برعاية: letsboot.com
تحقق من دورات Angular In-House أو دورات Angular العامة.
جرب fossilo.com ، مشروعنا الزاوي لأرشفة المواقع كاملة.

أو منصة الويب الخاصة بنا "Let'slearn" من أجل إدارة الدورات التدريبية Angular ، من الواضح أننا اخترنا Angular4 و Firebase4 لبناء هذا التطبيق الجديد!

هنا ، سوف نتعلم كيفية إنشاء مشروع جديد مع الزاوي / CLI ، مصادقة Firebase لتسجيل الدخول وقاعدة بيانات Firebase لقراءة البيانات.

تم إصدار ترقيات جديدة لـ AngularFire2 في نهاية مايو 2017 ، لذلك تم استخدام AngularFire2 4.0 لهذا المشروع.

إنشاء Firebase جديد

قم بإنشاء قاعدتي Firebase: واحدة للتطوير (letlearn-dev) والأخرى للإنتاج (letlearn).

2 طرق للقيام بذلك:

> إضافة مشروع في وحدة التحكم Firebase

> استيراد مشروع Google موجود من Google Cloud Platform

بدء مشروع الزاوي الجديد

تثبيت الزاوي- CLI باستخدام NPM.

تثبيت npm -g @ angular / cli

أنشئ مشروعك الجديد ، وانتقل إلى المستودع وقم بتشغيل الخادم الخاص بك.

نانوغرام الجديدة Let'slearn - إصلاح lsl
مؤتمر نزع السلاح letlearn
نانوغرام تخدم -o

تم الآن تحميل تطبيقك المحلي في متصفحك: http: // localhost: 4200 / يمكنك تغيير المنفذ الافتراضي باستخدام الخيار - port. يجب أن يتم عرض الرسالة "مرحبًا بك في lsl !!"!

تثبيت وإعداد Firebase الخاص بك

قم بتثبيت أحدث إصدار من AngularFire2 و Firebase باستخدام npm.

npm تثبيت angularfire2 firebase - حفظ

قم بنسخ تكوين Firebase الخاص بك من قسم النظرة العامة وإضافته إلى ملفات متغير البيئة الخاصة بك:

> src / environities / environment.ts من أجل التنمية (letslearn-dev)

> src / environities / environment.prod.ts للإنتاج (يتيح التعلم)

بيئة تشغيل التصدير = {
  الإنتاج: كاذبة ،
  firebase: {
    apiKey: 'xxx' ،
    authDomain: 'xxx.firebaseapp.com' ،
    databaseURL: 'https://xxx.firebaseio.com' ،
    projectId: 'xxx' ،
    storageBucket: 'xxx.appspot.com' ،
    messagingSenderId: 'xxx'
  }
}؛

إعداد واستيراد وحدات AngularFire

انتقل إلى src / app / app.module.ts لإعداد واستيراد الوحدات التي تحتاجها لتطبيقك.

قم باستيراد AngularFireModule و AngularFireDatabaseModule و AngularFireAuthModule من angularfire2 والبيئة للحصول على إعداد Firebase.

استيراد {AngularFireModule} من 'angularfire2' ؛
استيراد {AngularFireDatabaseModule} من 'angularfire2 / database' ؛
استيراد {AngularFireAuthModule} من 'angularfire2 / auth' ؛
استيراد {بيئة} من "البيئات / البيئة" ؛

ثم أضف وحدات في NgModule. من الممكن تخصيص اسم Firebase باستخدام "initialiazeApp".

NgModule ({
  التصريحات:
    AppComponent
  ]،
  الواردات: [
    BrowserModule،
    AngularFireModule.initializeApp (environment.firebase ، 'letslearn-dev') ،
    AngularFireDatabaseModule،
    AngularFireAuthModule
  ]،
  bootstrap: [AppComponent]
})
فئة التصدير AppModule {}

إنشاء AuthService لإدارة المصادقة.

يمكنك إنشائه في مجلد مشترك.

نانوغرام توليد خدمة مشتركة / مصادقة

ثم ، استيراده إلى src / app / app.module.ts وتسجيل AuthService في مقدمي الخدمات.

استيراد {AuthService} من './shared/auth.service' ؛
NgModule ({
  مقدمي الخدمات: [AuthService] ،
})

في src / app / shared / auth.service.ts ، استيراد AngularFireAuth من angularfire2 ، firebase من firebase و Observable. حقن AngularFireAuth والاشتراك للحصول على المستخدم الحالي في مُنشئ الخدمة.

استيراد {AngularFireAuth} من 'angularfire2 / auth' ؛
استيراد * كـ firebase من 'firebase / app' ؛
استيراد {Observable} من 'rxjs / Observable' ؛
فئة التصدير AuthService {
  authState الخاص: يمكن ملاحظتها 
  currentUser الخاص: firebase.User = null؛
مُنشئ (الجمهور العام: AngularFireAuth) {
    this.authState = this.afAuth.authState؛
    this.authState.subscribe (user => {
      إذا (مستخدم) {
        this.currentUser = مستخدم ؛
      } آخر {
        this.currentUser = null؛
      }
    })؛
  }
  getAuthState () {
    إرجاع this.authState؛
  }
}

تطبيق المصادقة

ضخ خدمة Firebase Auth في مكون التطبيق الخاص بك.

استيراد {AuthService} من './shared/auth.service' ؛
فئة التصدير AppComponent تنفذ OnInit {
  المستخدم = لاغ
البناء(
    مصادقة خاصة: AuthService) {}
ngOnInit () {
    this.auth.getAuthState (). الاشتراك (
      (user) => this.user = user) ؛
  }
}

إضافة تسجيل الدخول مع وظيفة جوجل

في src / app / shared / auth.service.ts ، أضف هذه الوظيفة وتمكين موفر تسجيل الدخول إلى وحدة Firebase> قسم المصادقة> علامة تبويب طريقة تسجيل الدخول.

loginWithGoogle () {
  إرجاع this.afAuth.auth.signInWithPopup (
    new firebase.auth.GoogleAuthProvider ()) ؛
}

في src / app / app.component.ts

فئة التصدير AppComponent تنفذ OnInit {
البناء(
    مصادقة خاصة: AuthService) {}
loginWithGoogle () {
    this.auth.loginWithGoogle ()؛
  }
}

إضافة AngularFireDatabase

حقن AngularFireDatabase في المكون الخاص بك.

افتح src / app / app.component.ts

استيراد AngularFireDatabase من angularfire2. ربما ، يمكنك أيضًا استيراد FirebaseListObservable و / أو FirebaseObjectObservable إذا كنت بحاجة إلى الربط بقائمة أو كائن.

استيراد {Component، OnInit} من '@ angular / core'؛
استيراد {AuthService} من './shared/auth.service' ؛
استيراد {AngularFireDatabase، FirebaseListObservable} من 'angularfire2 / database'؛
استيراد * كـ firebase من 'firebase / app' ؛

حقن قاعدة بيانات AngularFireDatabase في مُنشئ المكون.

البناء(
  المصادقة الخاصة: AuthService ،
  العام ديسيبل: AngularFireDatabase) {}

بعد ذلك ، قم بإعداد متغير المواضيع الخاص بك كـ FirebaseListObservable وقم بتعيين قائمة المواضيع الخاصة بك داخل وظيفة ngOnInit.

فئة التصدير AppComponent تنفذ OnInit {
  المواضيع: FirebaseListObservable  ؛
  ngOnInit () {
    this.auth.getAuthState (). الاشتراك (
      (user) => this.user = user) ؛
    this.topics = this.db.list ('/ Topics') ؛
  }
}

قد تحصل على خطأ مثل "العميل ليس لديه إذن للوصول إلى البيانات المطلوبة" في وحدة التحكم في المتصفح الخاص بك عند تشغيل الخادم. ليس لديك قواعد جيدة لقراءة و / أو كتابة البيانات من / في Firebase. لإصلاح ذلك ، انتقل إلى Firebase Console> قسم قاعدة البيانات> علامة تبويب "القواعد" وقم بتغيير القواعد!

مثال على القواعد في وحدة Firebase.

تحرير القالب الخاص بك

افتح src / app / app.component.html

أضف زرًا لتسجيل الدخول باستخدام Google والربط لتسجيل الدخول باستخدام وظيفة Google الخاصة بك.

اعرض قائمة المواضيع الخاصة بك باستخدام حلقة For ولا تنس توجيه الإخراج غير المتزامن.

      
  •     {{الموضوع. $ قيمة}}   

هذا هو! من السهل أليس كذلك؟ يمكنك الآن إنشاء مشروع جديد باستخدام قاعدة بيانات Firebase ، واستخدام AngularFireAuth للمصادقة و AngularFireDatabase لقراءة البيانات من قاعدة البيانات الخاصة بك. قم بتطبيقه على مشروعك واختبر طرق تسجيل الدخول المختلفة!

الآن دعونا كود!

في المرة القادمة سنفعل المزيد مع Firebase و Angular4 والبيانات. اتبعني على Medium.com أو Twitter للحصول على المقالات التالية!