[5] Ionic & Firebase 사용자 리스트 출력

이전 포스팅에서 사용자 로그인 및 등록 페이지를 구현하고 Firebase console에서 등록한 사용자에 대한 기록을 확인 하였습니다. 이번 포스팅에서는 등록되어 있는 사용자리스트를 출력하는 사용자 리스트 페이지를 구현해보도록 하겠습니다.

---

사용자 리스트 출력 기능 구현

프로젝트를 생성하면 기본적으로 추가되어 있는 list폴더에서 기능구현을 진행하도록 합니다. 사용자가 등록하는 시점에서 사용자 Email과 Uid 값을 Database에 저장하여 출력하는 과정입니다. 기존에 설치했던 angulrFire2 모듈에 포함되어 있는 AngularFireDatabase, FirebaseListObservable 기반으로 로직을 구현하게 됩니다.

(1) list 페이지 구현

src/pages/list/list.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>User List</ion-title>
  </ion-navbar>
</ion-header>
 
<ion-content>
  <ion-list>
    <button ion-item *ngFor="let item of items | async">
      <ion-row>
        <ion-col> {{item.email}} </ion-col>
          <ion-col> {{item.uid}} </ion-col>
        </ion-row>
    </button>
  </ion-list>
</ion-content>

src/pages/list/list.ts

import { Component } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
 
@Component({
  selector: 'page-list',
  templateUrl: 'list.html'
})
export class ListPage {
  selectedItem: any;
  icons: string[];
  items: FirebaseListObservable<any>;
 
  constructor(private afDB: AngularFireDatabase) {
    this.items = afDB.list('/users');
  }
}
 

(2) resister 페이지에서 로직 추가

src/pages/resister/resister.html

<ion-header>
  <ion-navbar>
    <ion-title>Register</ion-title>
  </ion-navbar>
</ion-header>
 
<ion-content padding>
  <ion-item>
    <ion-label floating>Email Address</ion-label>
    <ion-input type="text" [(ngModel)]="user.email"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label floating>Password</ion-label>
    <ion-input type="password" [(ngModel)]="user.password"></ion-input>
  </ion-item>
  <button ion-button color="primary" (click)="signup();">Register</button>
  <button ion-button full clear color="light" (click)="goBack()">Go Back</button>
</ion-content>

src/pages/resister/resister.ts

import { Component } from '@angular/core';
import { NavController, LoadingController } from 'ionic-angular';
import { AngularFireAuth } from 'angularfire2/auth';
 
import { LoginPage } from '../login/login';
import { ProfilePage } from '../profile/profile';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
import { AuthProvider } from '../../providers/auth/auth';
 
import { User } from '../models/user';
 
@Component({
    selector: 'page-register',
    templateUrl: 'register.html',
})
export class RegisterPage {
 
    user: any = {} as User;
    items: FirebaseListObservable<any>;
 
    constructor(public navCtrl: NavController,
        private loadingCtrl: LoadingController,
        private authService: AuthProvider,
        private afDB: AngularFireDatabase) {
        // Firebase database
        this.items = this.afDB.list('/users');
    }
 
    async signup() {
        let loading = this.loadingCtrl.create({
            content: 'Loading...'
        });
        loading.present();
 
        try {
            await this.authService.addUser(this.user).then(
                (user: any) => {
                    console.log(user);
                    //DB insert
                    this.items.push(
                        {
                            email: user.email,
                            uid: user.uid
                        }
                    );
 
                    this.navCtrl.setRoot(ProfilePage);
                    loading.dismiss();
                }, (error) => {
                    loading.dismiss();
                    let errortoast = this.loadingCtrl.create({
                        content: 'Register Error!',
                        duration: 2000
                    });
                    errortoast.present();
                });
 
        } catch (err) {
            console.error(err);
            loading.dismiss();
        }
    }
 
    goBack() {
        this.navCtrl.setRoot(LoginPage);
    }
 
    ionViewDidLoad() {
        console.log('ionViewDidLoad RegisterPage');
    }
 
}
 

사용자 리스트 출력 확인

$ ionic serve -lab