スポンサーリンク

Ionic3とFirebaseでTodoアプリ(4)パスワード制限つきVersion2その2(ソースコード一部あり)

前回は、上記の本に記載されているTodoアプリを写経して、localStorage、すなわち、各々のブラウザにデータの永続化を行った。

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

今回は、これをもとに、データの保存先を、localStorageから、Firebaseに変更したい。

<目次>
Ionic3とFirebaseでTodoアプリ(1)
Ionic3とFirebaseでTodoアプリ(2)FirebaseAuthでパスワード制限
Ionic3とFirebaseでTodoアプリ(3)パスワード制限つきPart2その1
Ionic3とFirebaseでTodoアプリ(4)パスワード制限つきPart2その2

ソースコードの一部は以下にアップロードしました。

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

(開発環境)
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

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-todo2 というIonic3アプリを作成している。

(0)今回すること

データの保存先を、localStorageから、Firebaseに変更する。以下の記事を参考にする。

Ionic3とFirebaseでTodoアプリ(1)

(1)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

image

(2)Firebaseのセットアップ

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

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

image

(3)src/enironments/environment.ts の新規作成

こちらの記事の「(3)src/enironments/environment.ts の新規作成」と全く同様に設定する。

image

(4)src/app/app.module.ts の修正

こちらの記事の「(4)src/app/app.module.ts の修正」と全く同様に設定する。

image

image

(5)task モデルの定義(src/models/task.tsの新規作成)

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

src/models/task.ts (新規作成)
image

(6)TaskProviderの作成

ionic g provider task

image

src/providers/task/task.ts

(変更前)
image

(変更後)
image

image

(7)Firebaseにあるタスクリストの表示

task-list.ts
image

image

同様に、

hello-ionic.ts
image

(8)タスクの追加

hello-ionic.ts
image

hello-ionic.html
image

実際に、登録をすることができた。Firebaseにも反映されていた。

(9)タスクの編集

task-list.html
image

task-list.ts
image

image

試しに編集してみる

image image

image

できたようである。

(10)タスクの削除

task-list.ts
image

やってみる

image image

削除できた。

(11)email & passwordによるパスワード制限

あとは、以下の記事の通りにやる。

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

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

Database > ルール をクリック。

image

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

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

image

(12)LoginPageの作成と、AuthProviderの作成。

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

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

ionic generate page Login
ionic generate provider Auth

image

(13)authenticaton observerの作成

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

src/app/app.module.ts
image

src/app/app.component.ts
image

image

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

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

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

(14)AuthProviderの作成

src/providers/auth/auth.ts
image

AuthProviderに以下の4つの関数のうちの2つを定義しています。image

(15)LoginPageの作成

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

login.html
image

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

login.ts
image

image

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

また、FormBuilder関連、AuthProvider、HomePage、EmailValidator(これから作成)をimport その他、いろいろ、こちらを参考に。

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

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

image

(15)ログアウトボタンを作成

task-list.html
image

task-list.ts
image

うまくいかない。。。ログアウトボタンはあきらめるか。。。
(Netlifyにデプロイした後は、うまくいっていた。)

image

いったん終了とする。

(16)アイコンその他の変更

image

image

src/manifest.json
image

src/index.html
image

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

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

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

Screenshot_20180716-090932 Screenshot (2018_07_16 午前9_04_12)

ソースコードの一部は以下にアップロードしました。

https://github.com/adash333/ionic3-firebase-todo2
image

 

 

参考:https://qiita.com/xiaca/items/321fb5ab3cb36c0c6cf6
image

スポンサーリンク