目次

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画面に設定しています。

新規Ionic4アプリの作成

  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。。。


cd ionic4-board
ionic serve


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

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

src/app/home/home.page.htmlの編集

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

(変更後)

(変更前)

(変更後)

src/app/home/home.page.tsの編集

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

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

(変更前)

(変更後)

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のデータバインディングには、以下の4つがあるそうです。

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

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

投稿を2つにする

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

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

メッセージを更新(update)できるようにする

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

モーダル画面は、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について

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