スポンサーリンク

Ionic3とFirebaseでTodoアプリ（３）パスワード制限つきVersion2その1

前回は、Ionic3とFirebaseで、（AngularFire2 Version5を用いて）Todoアプリを作成した。

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

ところが、Androidスマホ実機（Zenfone4 Max）で実行してみると、編集ボタンと、削除ボタンをタップしても、テキストのところが選択されるだけで、うまく編集したり、削除したりすることができない。そのため、今回は、以下の本に記載されているTodoアプリを参考にして、Firebase利用パスワード制限つきDodoアプリを作成したい。

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

（開発環境）
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アプリを作成している。

（０）今回すること

（１）Ionic3アプリの作成

C:/ionic3/ フォルダを、VisualStudioCodeで開いて、Ctrl+@　でコマンドプロンプトを起動。

ionic start ionic3-firebase-todo2 tutorial

今回は、PWA（Progressive Web Apps）のみとするつもりなので、何か聞かれたら、N、ｎ　とした。

image

C:/ionic3/ionic3-firebase-todo2/ フォルダを、VisualStudioCodeで開き、ターミナルで以下を入力。

ionic serve --lab

image

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

（変更前）
image

（変更後）
image

（３）トップページの変更

src/pages/hello-ionic/hello-ionic.html

（変更前）
image

（変更後）
image

src/pages/hello-ionic/hello-ionic.ts
image

src/pages/hello-ionic/hello-ionic.html
image

（４）配列のバインディング

src/pages/hello-ionic/hello-ionic.ts
image

src/pages/hello-ionic/hello-ionic.html
image

（５）タスクの登録・表示と保存

inputのバインディング

src/pages/hello-ionic/hello-ionic.html
image

src/pages/hello-ionic/hello-ionic.ts
image

addTask() 関数を定義
image

src/pages/hello-ionic/hello-ionic.html
image

タスク登録してみる。

image

ちゃんとタスク追加できた。

この時点では、タスクはメモリ上に一時保存している状態で、ブラウザをリロードすると、入力したデータは消える。

そこで、Web Storageを使ってデータを永続化する。（後で、データを記憶させる場所を、Web Storageから、Firebaseに変更する予定である。）

image

localStorageの使い方

image

（６）タスクの永続化

hello-ionic.ts
image

JSON.stringify() 関数は、()の中身である配列を、JSON文字列に変換する関数らしい。

逆は、JSON.parse() 関数であり、JSON文字列を、javascriptの配列に変換する関数らしい。

image

タスクを入力して、一度Ctrl+C でサーバ停止して、再度、ionic serve でサーバ起動してみる。

なんかいろいろタイプミスがあって、修正した。

image

（７）値のバリデーション

今回は、「必須入力」「3文字以上、20文字以下」に設定する。

Form全体でValidationを行うために、Formタグに #f="ngForm"を追記する。

hello-ionic.html
image

（８）タスク一覧を別ページで作成

VisualStudioCodeのターミナル画面で、以下を入力

ionic g page taskList
image

メニューへの追加

src/app/app.component.ts

（変更前）
image

（変更後）
image

なんと、TaskListPageはLazy Loadingなので、importする必要も、app.module.ts に記載する必要もないらしい。Lazy Loading楽！

taskListへのタスク一覧の移動

src/pages/task-list/task-list.html

（変更前）
image

（変更後）
image

src/pages/task-list/task-list.ts

（変更前）
image

（変更後）
image

（９）タスクの変更・削除の実装

Action Sheet と、Alert　を用いる。以下の公式ページを参考にする。

ActionSheet
https://ionicframework.com/docs/components/#action-sheets
image

Alert
https://ionicframework.com/docs/components/#alert
image

src/pages/task-list/task-list.ts
image

タップしたらアクションシートを表示するようにする。

task-list.html
image

changeTask() を定義。

task-list.ts
image

タスク一覧のどれかをタップすると、アクションシートが表示された。

●タスク削除の実装

task-list.html
image

task-list.ts
image

実際に消してみる。

image

ちゃんと1個ずつ消えた。

image

参考：https://qiita.com/takeharu/items/d75f96f81ff83680013f#%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%9F%E4%BD%8D%E7%BD%AE%E3%81%8B%E3%82%89%E4%B8%80%E3%81%A4%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%80%A4%E3%82%92%E5%89%8A%E9%99%A4—splice
image

●タスクの変更の実装

AlertControllerを用いる。

task-list.ts
image

image

image

タスク１　をタップして、　タスク１変更後　にしてみる。

image　image

image

たしかに編集できるようになった。

src/app/app.component.ts
image

ここまでで、localStorage（データは各ブラウザに永久保存される。）を用いたTodoアプリの作成は終了。

次は、このアプリを変更して、Firebaseにデータ保存されるようにしたい。

スポンサーリンク

Angular5,Firebase,ionic,Ionic3,Javascript

Posted by twosquirrel