Нека научим как да инсталирате и настроите AngularFire2 4.0

Спонсорирано от: letsboot.com
Вижте нашите обучения по Angular In-House или обществени курсове по Angular.
Изпробвайте fossilo.com, нашия ъглов проект за архивиране на цялостни уебсайтове.

или нашата уеб платформа „letslearn“, за да управляваме курсовете за обучение по Angular, очевидно сме избрали Angular4 и Firebase4 за изграждането на това ново приложение!

Тук ще научим как да създадем нов проект с ъглова / кли, аутентификация на Firebase за вход и база данни Firebase за четене на данни.

В края на май 2017 г. бяха пуснати нови надстройки на AngularFire2, така че AngularFire2 4.0 беше използван за този проект.

Създайте нова Firebase

Генерирайте две бази данни Firebase: една за разработка (letslearn-dev) и една за производство (letslearn).

2 начина да го направите:

> добавете проект в конзолата на Firebase

> импортирайте съществуващ проект на Google от платформата на Google Cloud

Стартирайте нов Angular проект

Инсталирайте angular-cli с помощта на npm.

npm инсталирайте -g @ angular / cli

Генерирайте новия си проект, преместете се в хранилището и стартирайте вашия сървър.

ng new letslearn - префикс lsl
cd letslearn
ng сервира -o

Вашето локално приложение вече се зарежда във вашия браузър: http: // localhost: 4200 / Можете да промените порта по подразбиране с опцията - port. Трябва да се покаже съобщението „Добре дошли в lsl !!“!

Инсталирайте и настройте вашата Firebase

Инсталирайте последната версия на AngularFire2 и Firebase с npm.

npm инсталирайте angularfire2 firebase --save

Копирайте и поставете вашата конфигурация Firebase от раздела Обзор и я добавете към файловете с променлива среда:

> src / environment / environment.ts за развитие (letslearn-dev)

> src / environment / environment.prod.ts за производство (letslearn)

експортиране const среда = {
  продукция: невярно,
  пожарна база: {
    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.

import {AngularFireModule} от 'angularfire2';
импортиране {AngularFireDatabaseModule} от 'angularfire2 / база данни';
import {AngularFireAuthModule} от 'angularfire2 / auth';
import {Environment} от 'среди / среда';

След това добавете модули в NgModule. Възможно е да персонализирате името на Firebase, използвайки „inicijaliazeApp“.

@NgModule ({
  декларации: [
    AppComponent
  ],
  внос: [
    BrowserModule,
    AngularFireModule.initializeApp (Environment.firebase, 'letslearn-dev'),
    AngularFireDatabaseModule,
    AngularFireAuthModule
  ],
  bootstrap: [AppComponent]
})
експорт клас AppModule {}

Създайте AuthService за управление на удостоверяването.

Можете да го създадете в споделена папка.

ng генериране на услуга споделено / auth

След това го импортирайте в src / app / app.module.ts и регистрирайте AuthService в доставчици.

import {AuthService} от './shared/auth.service';
@NgModule ({
  доставчици: [AuthService],
})

В src / app / shared / auth.service.ts, импортирайте AngularFireAuth от angularfire2, firebase от firebase и Observable. Инжектирайте AngularFireAuth и се абонирайте, за да включите текущия потребител в конструктора на услугата.

import {AngularFireAuth} от 'angularfire2 / auth';
import * като firebase от 'firebase / app';
import {Observable} от 'rxjs / Observable';
експорт клас AuthService {
  частен authState: Наблюдаем 
  частен currentUser: firebase.User = null;
конструктор (обществен afAuth: AngularFireAuth) {
    this.authState = this.afAuth.authState;
    this.authState.subscribe (user => {
      ако (потребител) {
        this.currentUser = потребител;
      } else {
        this.currentUser = null;
      }
    });
  }
  getAuthState () {
    върнете това.authState;
  }
}

Изпълнете удостоверяването

Вкарайте услугата Firebase Auth в компонента на приложението си.

import {AuthService} от './shared/auth.service';
експорт клас AppComponent реализира OnInit {
  потребител = null;
конструктор (
    частен авт: AuthService) {}
ngOnInit () {
    this.auth.getAuthState (). абонирате (
      (потребител) => this.user = потребител);
  }
}

Добавете вход с функция на Google

Във вашия src / app / shared / auth.service.ts добавете тази функция и активирайте доставчика на вход в конзолата Firebase> Раздел за удостоверяване> раздел раздел Метод за вход.

loginWithGoogle () {
  върнете това.afAuth.auth.signInWithPopup (
    нова 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, ако трябва да се свържете към списък или обект.

import {Component, OnInit} от '@ angular / core';
import {AuthService} от './shared/auth.service';
import {AngularFireDatabase, FirebaseListObservable} от 'angularfire2 / база данни';
import * като firebase от 'firebase / app';

Инжектирайте базата AngularFireData в конструктора на компонента.

конструктор (
  частен авт: AuthService,
  public db: AngularFireDatabase) {}

След това настройте променливата на вашите теми като FirebaseListObservable и задайте своя списък с теми във функцията ngOnInit.

експорт клас AppComponent реализира OnInit {
  теми: FirebaseListObservable ;
  ngOnInit () {
    this.auth.getAuthState (). абонирате (
      (потребител) => this.user = потребител);
    this.topics = this.db.list ('/ теми');
  }
}

Възможно е да получите грешка като „Клиентът няма разрешение за достъп до желаните данни“ в конзолата на браузъра си, когато стартирате сървъра. Нямате добри правила за четене и / или записване на данни от / в Firebase. За да поправите това, отидете на Firebase Console> раздел Database> раздел с правила и променете правилата!

Пример за правилата в конзолата Firebase.

Редактирайте шаблона си

Отворете src / app / app.component.html

Добавете бутон за вход с Google и свържете за вход с функцията си Google.

Показвайте списъка си с теми, използвайки цикъл For и не забравяйте тръбата за async.

<Ул>
  
  •     {{Тема. $ Стойност}}   
  • Това е! Лесно ли е? Вече можете да създадете нов проект с база данни Firebase, да използвате AngularFireAuth за удостоверяване и AngularFireDatabase за четене на данни от вашата база данни. Приложете го във вашия проект и тествайте различни методи за вход!

    Сега нека кодираме!

    Следващия път ще направим повече с Firebase, Angular4 и данни. Следвайте ме в Medium.com или Twitter, за да получите следващите статии!