Firebase 사용자의 Ionic 스토어 데이터

이전 기사에서 Firebase to Ionic for authentication users을 추가했습니다. 그러나 더 중요한 것은 이 특정 사용자에 대한 데이터를 저장하려는 것입니다.

어떻게 해야 할까요?

오늘 예제에서는 매우 기본적인 데이터를 저장하여 어떻게 사용할 수 있는지 확인합니다.

Firebase 데이터베이스 추가

Firebase 데이터베이스를 생성하고 Firebase console 으로 이동한 다음 데이터베이스 섹션을 클릭합니다.



데이터베이스를 추가한 후 링크를 ​​복사하여 environment.ts 파일에 추가하십시오.

export const environment = {
  production: false,
  firebaseConfig: {
    apiKey: "XXXXXXXXXXXXXXXXXX",
    authDomain: "xxx.firebaseapp.com",
    projectId: "xxxxxxx",
    storageBucket: "xxxxx.appspot.com",
    databaseURL: "https://xxxxxxxx-default-rtdb.firebaseio.com",
    messagingSenderId: "xxxxxxxxx",
    appId: "1:xxxxxx:web:xxxxxxx",
    measurementId: "G-xxxxx"
  }
};

그런 다음 app.module.ts 파일에 Firebase 데이터베이스 모듈을 추가해 보겠습니다.

imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule,
    AngularFireDatabaseModule
],

이제 tab1.page.ts 파일로 이동하여 데이터베이스에 대한 논리를 추가할 수 있습니다.

새 변수를 추가하고 구성에 데이터베이스를 추가해 보겠습니다.

ref: any;
count: Observable<any>;

constructor(public fireAuth: AngularFireAuth, public db: AngularFireDatabase)

그런 다음 사용자의 구독을 변경하고 사용자가 있는지 확인할 수 있습니다.

this.fireAuth.authState.subscribe((user) => {
  this.user = user ? user : null;
  if (this.user !== null) {
    this.ref = db.object(user.uid);
    this.count = this.ref.valueChanges();
    this.count.subscribe((initial) => {
      if (initial === null) this.ref.set(1);
    });
  }
});

이렇게 하면 현재 사용자에 대한 데이터베이스 개체에 대한 참조가 생성됩니다. 이는 사용자 ID를 기반으로 합니다.

다음으로 Firebase에서 직접 값을 추적하는 count 가 있습니다.

또한 초기 값을 보기 위해 구독합니다. 이것이 null이면 존재하지 않는다는 의미이므로 값을 1로 설정합니다.

이제 이 값을 증가시키는 멋진 간단한 함수를 추가해 보겠습니다.

addCount() {
    this.ref.set(firebase.database.ServerValue.increment(1));
}

이것으로 필요한 JavaScript가 완료되었으므로 이 버튼을 추가하기 위해 HTML 쪽으로 이동하겠습니다.

<ion-button (click)="addCount()" expand="block" color="success">{{ count | async }}</ion-button>

이 버튼은 카운트 변수를 보여주며, 클릭하면 addCount 함수가 실행됩니다.

로그인하기 전에 데이터베이스는 다음과 같습니다.



로그인하면 사용자 개체가 생성됩니다.



그리고 사용자가 버튼을 몇 번 클릭하면 다음과 같은 결과를 얻습니다.



다음GitHub repo에서 오늘의 코드를 찾을 수 있습니다.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나