Ionic4とFirebaseでEmail認証つき掲示板 Part.1

前回は計算アプリを作成しました。今回は、いきなり『Emailパスワード制限つき掲示板』とハードルが高いですが、2019年2月現在、唯一のIonic4解説本である以下の本を写経してみたいと思います。

上記の本のサポートサイト
https://sinack.com/ird_ionic/

1. 掲示板
2. Emailアドレスとパスワードでログイン制限あり
3. ユーザー登録ができる
4. 掲示板にメッセージを書き込める（Create）
5. メッセージの更新（Update）と削除（Delete）ができる
6. メッセージにコメントできる
7. PWA化して、オフラインでもアプリとして利用できようにする

作成の流れとしては、初心者でも大丈夫!! IonicとFirebaseでゼロからはじめるアプリ開発によると、以下のようになります。

1. ログイン機能のない『疑非メッセージボード』を作成する
2. 上記メッセージボードにログイン機能をつける
3. 投稿されたメッセージをFirebaseに保存できるようにする

ソースコード

DEMO

私の環境は以下のようになっていますが、Windowsパソコンの場合、

WindowsでIonicを始める方法

や、

オプション：nvm-windowsでNode.jsのバージョン管理

の手順でインストールしていただければ、ほぼ同じ環境が整います。

Windows10パソコン購入後のWindows Subsystem for Linuxでの環境構築については、Windows10購入時の設定に記載させていただきました。

Panasonic CF-RZ6
Windows10 Pro (1803)
VisualStudioCode 

Windows Subsystem for Linux (WSL)
Ubuntu18.04
VisualStudioCodeのターミナル画面をWSLのBashに設定
git 2.17.1
anyenv 
nodenv 1.1.2-69-gced0e70
node 10.14.2

私の場合、以下のようにフォルダ共有しています。

Windowsの C:/Users/a/a/
Ubuntuの  /mnt/c/Users/a/a/

また、Windows10のVisualStudioCodeでC:/Users/a/a/フォルダを開き、こちらの設定にて、VisualStudioCodeのターミナル画面をWSLのUbuntuのBash画面に設定しています。

1. VisualStudioCodeでWindowsのC:/Users/a/a/ionic/フォルダを開く
2. Ctrl+@でターミナル画面を開いて、以下を入力します

cd ionic
ionic start ionic4-board blank --type=angular
// 何か聞かれたら、n + Enter

私の環境（Windows10のWSL）ではインストールに14分かかりました、、、（次回から、Windowsに直接nvm-windows, Nodejsをインストールして、Ionicを触ろうと思います。）（CodeSandboxでVue.js始めるためには2区クリックで3秒くらいで開始できるのに、、、）しかも、この時点で405 MB。。。

• 以下を入力して、サーバを起動します。1分くらいかかります。

cd ionic4-board
ionic serve

なお、サーバを停止するためには、Ctrl+C, Y, Enterの操作を行います。（Ubuntuだと、Ctrl+Cのみですぐにサーバ停止します。）

なお、ionic serve --labというコマンドを入力すると、Android、iPhoneでの見栄えをエミュレートすることができるようになります。

掲示板の見栄えを作っていきます。

（変更後）

• メッセージ投稿部分を作ります

• 投稿されたメッセージを表示する部分を作ります

• <ion-note>で記述された『2分前』がずれているのでhome.page.scssに以下のように記載して修正

（変更前）

（変更後）

掲示板の機能を実装していきます。

投稿の変数を定義します。

（変更前）

（変更後）

home.page.htmlに、このpostの値を反映させます。

（変更前）

（変更後）

{{}}は、Angularのインターポレーションという書き方だそうです。

参考：https://medium.com/@genta.ameku/angular-%E3%83%87%E3%83%BC%E3%82%BF%E3%83%90%E3%82%A4%E3%83%B3%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0-bdf8d0c96771
Angular データバインディング
Genta Ameku
May 3, 2018
→こちらによると、Angularのデータバインディングには、以下の４つがあるそうです。

1. Interpolation(補間) {{}} : One-way (データからビューへ)
2. プロパティバインディング [] : One-way (データからビューへ)
3. イベントバインディングが () : One-way (ビューからデータへ)
4. 双方向バインディング [()] : Two-way (データ←→ビュー)

参考２：https://angular.keicode.com/basics/data-binding.php

home.page.tsでpostの配列postsを定義して、home.page.htmlで表示できるようにします。

home.page.ts

home.page.html

この、 *ngFor=“let p of posts” は、配列postsを順番に、変数pに読み込んでいます。

home.page.html

（変更前）

（変更後）

#f=“ngForm” は、フォームにvalidationをつけるためだそうです。

(submit)=“addPost()” は、『このフォームがsubmitされたら、addPost()を実行する』という意味だそうです。

[(ngModel)]=“message” は、Angularの双方向データバインディングという構文だそうです。addPost()も、messageも、この後、home.page.tsで定義します。

home.page.ts

メッセージを入力して、投稿　をクリックしてみると、投稿が追加されることがわかります。

各メッセージの『編集』ボタンを押すと、モーダル画面が出て、メッセージを更新できるようにします。

モーダル画面は、ionicのAlertControllerを用います。
参考：https://ionicframework.com/docs/api/alert

home.page.html
（変更前）

（変更後）

*ngFor=“let p of posts; let i =index”により、インデックス用の変数iを追加しています。
編集ボタンのところに、(click)=“presentPrompt(i)”と、presentPrompt(i)関数をiを用いて記載し、home.page.tsで関数を定義します。

home.page.ts
（変更後）

いきなり大量のコードで目が回りますが、

1. AlertControllerのimport文を一番上に記載。
2. constructorでAlertControllerを注入
3. presentPrompt(index)関数をasync/awaitを用いながら定義（ionic4からasync/awaitを使用するようになったとのことです）
4. AlertControllerの使い方は、公式ドキュメントをコピペした後に編集

という流れでやっていくのがよいと思われます。(このやり方は、Ionicで作る モバイルアプリ制作入門に書かれていて、「公式ドキュメントはこのように使うのか？」と感心した記憶があります。)

参考：https://ionicframework.com/docs/api/alert-controller/

https://ionicframework.com/docs/api/alert

async/awaitは、『非同期処理』に関する記載方法らしいのですが、非同期処理は本当に難しくてよくわからないので、とりあえず、AlertControllerを使用するときにはこのように記載する、と覚えておいて、次に進みます。

ぶっちゃけ、以下を何回か繰り返し読んでみたのですが、内容の1割も理解できていません。。。きっと、避けて通れないのだとは思いますが、、、（まず、Promiseとかcallbackとかがなんなのか分からないんです、、、はい。。。）

https://www.sejuku.net/blog/69618
【JavaScript入門】5分で理解！async / awaitの使い方と非同期処理の書き方
更新日：2018年8月27日
書いた人 マサト

https://www.sejuku.net/blog/52314
【JavaScript入門】誰でも分かるPromiseの使い方とサンプル例まとめ！
更新日：2019年2月10日
書いた人 マサト

https://www.sejuku.net/blog/67743
【JavaScript入門】初めてのコールバック関数の書き方と応用例！
更新日：2018年8月13日
書いた人 マサト

https://qiita.com/soarflat/items/1a9613e023200bbebcb3

編集のときと同様に、削除ボタンを実装します。
deletePost(i)関数の定義方法として、this.posts.splice(index, 1)とするのが、ポイントのようです。

home.page.html
（変更後）

home.page.ts
（変更後）

これで、削除deleteも実装することができました。

以上で、メッセージの

1. 追加create
2. 更新update
3. 削除delete

を実装することができました。（いわゆるCRUDを実装できたことになります。）

次の、Ionic4とFirebaseでEmail認証つき掲示板 Part.2では、Firebaseを用いてメールアドレスとパスワードによるユーザー認証を実装します。

Javascriptフレームワーク初めての人向けの、Ionic4とFirebaseの解説本です。Macパソコン上で、Firebaseを利用した、Emailパスワード制限つきの掲示板を作成していきます。最初の一冊として非常にお勧めです。

しかし、Ionic自体の解説については、以下の本が詳しいですので、Ionic3とはなりますが、非常に分かりやすく、お勧めです。

目次：スマホ用ホームページ&スマホアプリ作成ソフトIonic4

前：Ionic4で計算アプリ

次：Ionic4とFirebaseでEmail認証つき掲示板 Part.2