差分

このページの2つのバージョン間の差分を表示します。

--- 00.ionic4:04.ionic4とfirebaseで掲示板part1 [2019/02/12] – [入力した投稿を表示させる] adash333
+++ 00.ionic4:04.ionic4とfirebaseで掲示板part1 [2019/02/14] (現在) – [すること] adash333
@@ 行 18: / 行 18: @@
 作成の流れとしては、[[https://amzn.to/2I7ktCj|初心者でも大丈夫!! IonicとFirebaseでゼロからはじめるアプリ開発]]によると、以下のようになります。
-  -PWA化する
   -ログイン機能のない『疑非メッセージボード』を作成する
   -上記メッセージボードにログイン機能をつける
@@ 行 123: / 行 123: @@
 {{}}は、Angularのインターポレーションという書き方だそうです。
-{{:00.ionic4:pasted:20190212-131601.png}}
+{{:00.ionic4:pasted:20190213-151218.png}}
 参考：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
@@ 行 135: / 行 135: @@
    -双方向バインディング [()] : Two-way (データ←→ビュー)
-参考２：https://angular.jp/guide/displaying-data
+参考２：https://angular.keicode.com/basics/data-binding.php
-Angular公式ドキュメント＞データの表示
+{{:00.ionic4:pasted:20190213-151322.png}}
 ===== 投稿を2つにする =====
@@ 行 169: / 行 169: @@
 {{:00.ionic4:pasted:20190212-144523.png}}
+===== メッセージを更新（update）できるようにする =====
+各メッセージの『編集』ボタンを押すと、モーダル画面が出て、メッセージを更新できるようにします。
+モーダル画面は、ionicのAlertControllerを用います。
+参考：https://ionicframework.com/docs/api/alert
+home.page.html
+（変更前）
+{{:00.ionic4:pasted:20190213-155937.png}}
+（変更後）
+{{:00.ionic4:pasted:20190213-160126.png}}
+<wrap hi>*ngFor="let p of posts; let i =index"</wrap>により、インデックス用の変数iを追加しています。
+編集ボタンのところに、<wrap hi>(click)="presentPrompt(i)"</wrap>と、presentPrompt(i)関数をiを用いて記載し、home.page.tsで関数を定義します。
+home.page.ts
+（変更後）
+{{:00.ionic4:pasted:20190213-160705.png}}
+{{:00.ionic4:pasted:20190213-161753.png}}
+いきなり大量のコードで目が回りますが、
+  -AlertControllerのimport文を一番上に記載。
+  -constructorでAlertControllerを注入
+  -presentPrompt(index)関数をasync/awaitを用いながら定義（ionic4からasync/awaitを使用するようになったとのことです）
+  -AlertControllerの使い方は、公式ドキュメントをコピペした後に編集
+という流れでやっていくのがよいと思われます。(このやり方は、<wrap hi>[[https://amzn.to/2tnUEna|Ionicで作る モバイルアプリ制作入門]]</wrap>に書かれていて、「公式ドキュメントはこのように使うのか？」と感心した記憶があります。)
+参考：https://ionicframework.com/docs/api/alert-controller/
+{{:00.ionic4:pasted:20190213-162136.png}}
+https://ionicframework.com/docs/api/alert
+{{:00.ionic4:pasted:20190213-162238.png}}
+==== 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
+{{:00.ionic4:pasted:20190213-163400.png}}
+===== メッセージの削除を実装する =====
+編集のときと同様に、削除ボタンを実装します。
+deletePost(i)関数の定義方法として、this.posts.splice(index, 1)とするのが、ポイントのようです。
+home.page.html
+（変更後）
+{{:00.ionic4:pasted:20190213-165144.png}}
+home.page.ts
+（変更後）
+{{:00.ionic4:pasted:20190213-165310.png}}
+これで、削除deleteも実装することができました。
+以上で、メッセージの
+  -追加create
+  -更新update
+  -削除delete
+を実装することができました。（いわゆるCRUDを実装できたことになります。）
+次の、<wrap hi>[[00.ionic4:05.ionic4とfirebaseで掲示板part2|Ionic4とFirebaseでEmail認証つき掲示板 Part.2]]</wrap>では、Firebaseを用いてメールアドレスとパスワードによるユーザー認証を実装します。
@@ 行 200: / 行 273: @@
 前：[[00.ionic4:03.ionic4で計算アプリ|Ionic4で計算アプリ]]
-次：
+次：[[00.ionic4:05.ionic4とfirebaseで掲示板part2|Ionic4とFirebaseでEmail認証つき掲示板 Part.2]]