『Ionic4とFirebaseでパスワード制限つきチャットアプリ』を写経してみる（１）Firebase設定とSignInとSignUpページの作成

2018年9月22日

前回まで、@angular/fire version5（旧AngularFire2）を用いて、Firebaseを用いたチャットアプリを写経してみようと試みたが、RxJSだとかDateの扱い方などがよく分からず、途中までで挫折した。

http://twosquirrel.mints.ne.jp/?p=28073

今回からは、@angular/fire（旧AngularFire2）を用いないIonic4-Firebaseチャットアプリの解説サイトがあった（日本語！）ので、写経してみたい。

https://qiita.com/s_kozake/items/6c7a0cec75c957606a33

（開発環境）

git version 2.17.1.windows.2
Sourcetree Version 2.6.9.0
VisualStudioCode 1.27.2

(今回構築した環境)
firebase-tools@4.2.1
firebase@5.5.1

（０）やること

（１）Firebaseでアプリ作成

以下のサイトにログインして、新しいFirebaseアプリを作成。

https://console.firebase.google.com/

新規Projectを作成後の画面で、以下ようにクリック

以下のようにAPIキーなどが表示されるので、テキストファイルにコピーしておく。

（これは、後で、Ionic4アプリの、src/environments/environment.ts にコピペします。）

（２）Firebase CLIのインストール

今回、C:/ionic4/ フォルダに、新規Ionic4アプリを作成する。

C:/ionic4/ フォルダをVisualStudioCodeで開き、Ctrl+@ で、コマンドプロンプトを開き、以下を入力。

npm install -g firebase-tools

firebase login

（３）Ionic4アプリの作成

ionic start ionic4-firebase-chat2 blank --type=angular

何か聞かれたら、N + Enter　とする。

cd ionic4-firebase-chat2
ionic serve -l

Install @ionic/lab? 　と聞かれたら、y + Enter

なぜか、ionic serve -lab は、真っ暗になってしまった。。。理由は分からない。
ionic serveではうまくいくのに。。。面倒である、、、

————————–

https://stackoverflow.com/questions/51803079/ionic-lab-404-not-found

node_modules/… のフォルダを見てみると、ionlab.(xxxxxxx).js なるファイルは２つ。

試してみてもよいが、さすがにやめました。修正されるのを待ちます。

（2018/9/22時点での解決方法）

npm install @ionic/lab@1.0.1 --save

したら、できるようになりました。

————————–

（４）firebaseのインストール

npm install --save firebase

（５）GitHubにpush

GitHubにログインして、

https://github.com/new

から、新規リポジトリを作成

SourceTreeを起動し、　Add　＞　から、ローカルの場所を指定して、「追加」

画面右上の「設定」をクリック

追加　をクリック

GitHubの https:// …….. / ….. git をコピーして、図のようにクリック。

SoruceTree上で commit & push

GitHub上で確認。

.gitignore ファイルの最後に、

src/environments/environment.ts

を加えて保存。その後、

git rm -r --cached .

以下のような手順でVisualStudioCode上でcommit

以下のように順にクリックして、push

Githubで、src/environments/environment.ts がpushされていないことを確認。

参考：https://qiita.com/fuwamaki/items/3ed021163e50beab7154

（６）src/environments/environment.ts に、FirebaseのAPIキーなどを記載

上記の（１）の最後でコピーしたFirebaseプロジェクトのAPIキーなどを、以下のようにコピペします。

(変更前)

(変更後)

src/app/app.component.ts の変更
（AngularFIre2(@angular/fire)を用いるときは、app.module.ts であったが、今回は、app.component.tsに記載する。）

(変更後)

この時点でのソースコード

https://github.com/adash333/ionic4-firebase-chat2/tree/3f2e5bf874a1b5f58668b783721955316c9ec773

（７）認証画面とルーム画面の作成

ionic g page signin
ionic g page room

ホーム画面を、room画面に変更

src/app/app-routing.module.ts

(変更前)

(変更後)

この時点でのソースコード

https://github.com/adash333/ionic4-firebase-chat2/tree/43ffa38a6ef1324f70ab381eb8e09d7340fbe2c3

（８）認証画面の実装

ルーム画面(room.page.html)を訪れた際に、未認証の場合は、認証画面（signin.page.html）を表示するようにする。

src/app/room/room.page.ts

(変更前)

(変更後)

なぜか、私の場合は、navCtrl.goRoot()がエラーになってしまったので、Angularのrouterをimport して用いた。

参考：https://stackoverflow.com/questions/51828017/navcontroller-doesnt-work-in-ionic-4

認証画面（signin.page.html）の作成

src/app/signin/signin.page.html

(変更前)

(変更後)

src/app/signin/signin.page.ts

(変更前)

(変更後)

ここまでのソースコード

https://github.com/adash333/ionic4-firebase-chat2/tree/e554abc768c8d3ac0a2b3c5cdba2179a617a87b9

（９）Firebaseでのメール認証の設定と、SignUpページの作成

Firebaseのコンソール画面で、Authentication　＞　ログイン方法　＞　メール/パスワード　を　有効　にする。

ionic g page signup

src/app/signup/signup.page.html

ブラウザのアドレスには、localhost:8100/signin と入力。

(変更前)

(変更後)

src/app/signin/signin.page.ts

(変更後)

src/app/signup/signup.page.ts

(変更前)

(変更後)

ユーザ登録してみる。

SignUp画面で、メールアドレスとパスワードを入力して、SIGN UP　をクリックすると、数秒してから、room 画面に遷移する。

Firebaseのコンソール画面の、Authentication　を見てみると、先ほど入力したメールアドレスが登録されているのが分かる。

ここまでのソースコード

https://github.com/adash333/ionic4-firebase-chat2/tree/eb7687be378840591791fee9b4ad460d08259ef7

続きは次回に、、、