Ionic3とFirebaseでTodoアプリ（５）パスワード制限つきVersion3（ソースコードあり）

2018年7月16日

Ionic3とFirebaseを使って、パスワード制限つきTODOアプリ（WEBアプリとしてNetlifyにデプロイしてPWA形式でオフラインでも使用できるもの）を作成しているシリーズの最終章。

以下の本を非常に参考にさせていただいています。お勧めです。

＜目次＞
Ionic3とFirebaseでTodoアプリ（１）
Ionic3とFirebaseでTodoアプリ（２）FirebaseAuthでパスワード制限
Ionic3とFirebaseでTodoアプリ（３）パスワード制限つきVersion2その1
Ionic3とFirebaseでTodoアプリ（４）パスワード制限つきVersion2その2
Ionic3とFirebaseでTodoアプリ（５）パスワード制限つきVersion3

ソースコードは以下のリンク先へ
（src/environments/environment.ts はご自身のFirebaseのapiKeyを入力してください。）

https://github.com/adash333/ionic3-firebase-todo3

（開発環境）
Windows 8.1 Pro
VisualStudioCode
git version 2.16.1.windows.4
Sourcetree Version 2.4.8.0
Android Studio 3.0.1

Node v8.11.2
npm 6.1.0
@ionic/cli-utils 1.19.2
Ionic (Ionic CLI) 3.20.0
Ionic Framework    : ionic-angular 3.9.2

firebase@4.8.0
angularfire2@5.0.0-rc.4
promise-polyfill@8.0.0

npm install --save firebase@4.8.0
npm install --save angularfire2@5.0.0-rc.4
npm install --save promise-polyfill

C:/ionic3/ フォルダに、ionic3-firebase-todo3 というIonic3アプリを作成している。

（０）今回すること

前回は、1ページ目はタスク追加、2ページ目でタスクリストを表示して、編集や削除を行えるようにしていた。

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

今回は、タスク追加、タスクリスト、編集、削除を一つの画面で行えるようにしたい。

（１）Ionic3アプリの作成

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

ionic start ionic3-firebase-todo3 blank
cd ionic3-firebase-todo3
ionic serve --lab

Ctrl+C => y + Enter で、一旦、サーバを止めてから、VisualStudioCodeを閉じて、
再度、C:/ionic3/ionic3-firebase-todo3/ フォルダを、VisualStudioCodeで開く。

（２）firebase@4.8.0 angularfire2@5.0.0-rc.4 promise-polyfillをインストール。

npm install firebase@4.8.0 angularfire2@5.0.0-rc.4 promise-polyfill --save

（３）firebaseのセットアップと、src/enironments/environment.ts の新規作成と、src/app/app.module.tsの修正。

https://console.firebase.google.com/　にログインして、firebaseアプリを作成する。

こちらの記事の「（２）Firebaseのセットアップ」と全く同様に設定する。

ただし、この時点では、Databaseのルールが、以下のような設定になっている。
（あとで必ず、認証が必要なルールに戻す。）

次に、こちらの記事の「（３）src/enironments/environment.ts の新規作成」と全く同様に設定する。

src/environments/environment.ts　（新規作成）

さらに、こちらの記事の「（４）src/app/app.module.ts の修正」と全く同様に設定する。

src/app/app.module.ts

（変更前）

（変更後）

（４）src/index.html　を編集してPWA化

今回はWEBアプリのみの予定なので、<script src="cordova.js"> のところもコメントアウトしておく。

（変更前）

（変更後）

（５）HomePageをLazy Loadingにする

HomePageはデフォルトでは標準読み込みになっているが、すべてのページがLazy Loadingの方が管理がしやすいので、HomePageもLazy Loadingにする。

src/pages/home/home.module.ts (新規作成)

src/pages/home/home.ts

（変更前）

（変更後）

src/app/app.module.ts の変更

src/app/app.component.ts の変更

Lazy Loadingで呼び出す場合は、文字列 'HomePage’ として呼び出している。

これで、HomePageをLazy Loadingで読み込むようになった。

（６）task モデルの定義（src/models/task.tsの新規作成）

後で必要になるので、nameだけではなく、keyも定義しておく。

src/models/task.ts　（新規作成）

（７）TaskProviderの作成

コマンドプロンプトで以下を入力して、TaskProviderを作成する。

コードの見通しをよくするため、firebaseとの通信は、こちらに記載しておく。

ionic g provider task

src/providers/task/task.ts

（変更前）

（変更後）

コードは、以下と全く同じです。

https://github.com/adash333/ionic3-firebase-todo2/blob/master/src/providers/task/task.ts

（８）Firebaseにあるタスクリストの表示

src/home/home.html

（変更前）

（変更後）

src/home/home.ts

（変更前）

（変更後）

（９）タスクの追加

値のバリデーションとして、今回は、「必須入力」「3文字以上、20文字以下」に設定する。

Form全体でValidationを行うために、home.htmlの、Formタグに #f=”ngForm”を追記してある。

home.html

home.ts

home.htmlの実行画面から、firebase上にタスクを追加することができた。

（１０）タスクの編集と削除

home.html

home.ts

削除もできた。

（１１）email & passwordによるパスワード制限

これは、以下の記事の通りにやる。

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

こちらの記事の「（１）AngularFire2を使うための準備」の通りに、Firebaseを操作する。

Database > ルール　をクリック。

認証しているユーザーは全てのデータにアクセス許可する方式に変更。

この時点で、以下のようになる。

（１２）LoginPageの作成と、AuthProviderの作成。

今回は、自分でFirebase Consoleでユーザー登録するので、ResetPasswordPageとSignupPageは作成しない。

ローカルのVisualStudioCodeのターミナル画面で、以下を入力して、LoginPageの作成と、AuthProviderの作成を行います。

（１３）authenticaton observerの作成

例えば、Mikeが一度メールアドレスとパスワードでアプリにログインした後に、後日、またログインし直すのは面倒。ログアウトしない限り、2回目以降はログイン入力は省略したいような場合、auth listener　を作り、2回目以降はLoginPageを飛ばして直でHomePageへ誘導するようにする。

src/app/app.module.ts

src/app/app.component.ts

（変更前）

（変更後）

afAuth.authState　の、subscribe()関数で、userの状態を監視し、

user が authenticated(認証済み)　であれば、 HelloIonicPageに移動
userが not authenticated（未認証）　であればLoginPageへ移動

そして、ページ遷移が終了したら、unsubscribe()関数で、監視終了.

（１４）AuthProviderの作成

src/providers/auth/auth.ts

AuthProviderに以下の４つの関数のうちの２つを定義しています。

（１５）LoginPageの作成

今回は自分でFirebaseでパスワードなどを設定するので、validationなどは行う必要はないのだが、前回のコードをコピペする。

login.html

src/validators/email.ts (新規作成)

login.ts

Firebaseがログイン処理を行って居る際に用いるLoadingController　と、Firebaseの処理にエラーが出たときに表示するためのAlertControllerをimport

また、FormBuilder関連、AuthProvider、EmailValidatorをimport　その他、いろいろ、こちらを参考に。

一度、Ctrl+C でサーバ停止してから、再度、ionic serve

Firebase consoleで設定したメールアドレスとパスワードでちゃんとログインできた。

（１６）logout()関数

home.html

home.ts

うまくいかないが、Netlifyにデプロイした後は、うまくいっていたので、とりあえずこのままとする。

（１７）アイコンその他の変更

src/manifest.json

これで、（BitBucketを経由して）NetlifyにデプロイしたアドレスにAndroidスマホのChromeからアクセスして、

● chromeの画面右上の、点が縦に3つ並んでいるアイコンをクリック　＞　ホーム画面に追加　＞　追加　で、PWA（Progressive Web Apps）としてインストール

●次回以降は、スマホの画面から、「TODO3」をタップして起動すれば、スマホアプリとしてオフラインでも利用できる。

（１８）ソースコード

https://github.com/adash333/ionic3-firebase-todo3

src/environments/environment.ts は、ご自身で作成して、ご自身のfirebaseのAPIキーその他をコピペしてください。