Ionicで作るモバイルアプリ制作入門 読了

Ionicで作る モバイルアプリ制作入門[Angular版]<Web/iPhone/Android対応>

気になっていたIonicのサンプルアプリ開発のチュートリアルです。
Ionic + Anuglar + Firebaseで認証機能付きのチャットアプリを開発していきます。
若干コードが古いので、Angular未経験の人はsample codeのversionに合わせたほうが良いかもしれません。
内容は中々よかったです。

IonicはCordovaを利用して、iPhone/AndroidのAPIを利用していると知りました。
PhoneGapの頃とか、遅くて辛かった記憶しかないので、頑張ってんだなぁと（ワレ、生きとったんか）と思いました。
がっつりしたMobileアプリではなく、まぁ簡単な物ならIonicで作るのは良いかもしれません。
IonicのWeb周りの実装も見た目もよく、Angularとの親和性も高いので、Mobile向けのWebをさくっと作るには良いかもしれないと思いました。 後、Firebaseの認証とfirestore使ったことがなかったのですが、こちらも簡単で良いです。

以下、最新versionを利用のために修正が必要な箇所

開発環境。 Angular: 8.2.14 Angular CLI: 8.3.26 firebase: 7.14.3

AngularFireAuthGuard

APIのBug?。以下でissueとworkaroundが記載されている。

5.2.1 AngularFireAuthGuard causes TypeError: source.lift is not a function · Issue #2099 · angular/angularfire https://github.com/angular/angularfire/issues/2099

# before
const redirectUnauthorized = redirectUnauthorizedTo(['auth/signin']);
const redirectLoggedIn = redirectLoggedInTo(['/']);

# after
const redirectUnauthorized = () => redirectUnauthorizedTo(['auth/signin']);
const redirectLoggedIn = () => redirectLoggedInTo(['/']);

AngularFireAuth

APIが若干変更され、以下の auth が必要なくなっている。AngularFireAuth

# before
  this.afAuth.auth.createUserWithEmailAndPassword(login.email, login.password)

# after
  this.afAuth.createUserWithEmailAndPassword(login.email, login.password)

ngModel

AngularのngModelにname属性がないためエラー。

# before
  <ion-input type="email" required [(ngModel)]="login.email"></ion-input>

# after
  <ion-input type="email" required [(ngModel)]="login.email" name="email"></ion-input>

AngularFireAuthがPromiseに変更されている

firebaseに登録したuserのuidを取得するために、以下のようにPromiseで取得しないと行けなくなってました。 この辺はAngular触ったことがないときついかも。

  async getUserId(): Promise<string> {
    return (await this.afAuth.currentUser).uid;
  }

使うときはこんな感じ。

    const user = await this.auth
      .getUserId()
      .then((uid) => this.firestore.userInit(uid));