Todo List アプリはYouTubeにたくさん紹介されているが。。。Todoではなく、その日、その時の行動、感想などを書き留めるJournalアプリ。
データベースを扱う際の、ビギナーにとっての最初の関門は、CRUDを実装 することらしい。
C: Create 新規データの保存
R: Read データの取得
U: Update データの更新
D: Delete データの削除
今回はこれら機能を備えたJournalアプリに挑戦。
今回も以下のYouTuberのTutorialにお世話になった。
このYouTubeはインドネシア語らしいが、全く問題なく、参考に見たビデオの中でもわかりやすい方だった。
＜Save, Update & Delete Firebase to Listview MIT App Inventor＞
VIDEO
今回は、Firebase REST APIを使うので、前に紹介した以下のYouTube、ウエッブサイトも参考にした。
1. app inventor call firebase database with rest api
2. METRIC RAT AI2 Firebase with a Web Component
では、REST APIとは、一体何か？以前の記事と重複するが、今一度。ウエッブ上ではその解説記事はたくさんある。「REST APIとは？ざっくりと理解してみる【初心者向け】 」あたりを読んでなんとはなく分かった気になるが。本当は何も分かっていないと思う。
でも、理解しなくても利用はできる。要するに、MIT App Inventorが予め用意してくれているFirebaseDBなる特別のcomponent を使わなくても、データが格納されているサーバーのURL(URI)を知っていれば、後はHTTP GET, POST, PUT, and DELETEのリクエストをそのURLに送れば情報のやり取りができると言うものか。
（一人前に、HTTP GET, POST, PUT, and DELETEのリクエストなんて言っているが分かっていない）
FirebaseDBは、MIT App Inventorのcomponentの中では「Experimental（実験的）」に分類されており、将来ともにこのcomponentが使える保証はないらしい。Firebase自体のREST APIを使えばそんな心配もなく、データの扱いにも柔軟性が出てきて良いことずくめである。今後はREST APIを使っていきたいと思う。
と、ここまで書いてきた時に、突然「衝撃君」が頭を駆け巡った。「衝撃君」曰く：「何を大上段にふりかぶって、REST APIなんて言ってるの？もう何度も使ってきてるじゃないの？」
えっえっ。。。そうだ、「天気予報アプリ」のようにPublic APIを使ったアプリでは、Web componentを使ってHTTP GETリクエストを出していた〜〜〜。だから、素人は。。。と言われそう！！
*****************************************************************
ステップバイステップで作っていく。
今回は、データの保存と取得(CとR)。表示はListViewを利用する。
non-visible componentsは、Clock（日付を扱うため）、Web（サーバーへのリクエストで２つ使用）、ListUtilz（Listのソートを行うためにimportしたextension）。使わないが、FirebaseDBもアプリに同梱していたみたい（リソースの無駄！）。
実行画面：
（インプット内容は、フィクション。この動画を作った日時がわかると思う。）
VIDEO
スクリーンのデザイン：
non-visible componentとしてClock、Web1/Web2、Notifier、FirebaseDB、ListUtilz (リストをソートするextension)。
画面には出ていないが、データベースに送信するデータとしては、タイトル、記事内容、ポストした時の日時。ポストした日時についてはプログラムで追加。
プログラム（ブロック）：
初めて日付のフォーマットも行った。ググって見ると、communityのブログにここを参考にしなさいとあった。Class SimpleDateFormat
あとで念の為「java date format」で適当にググってみたら日本語版のサイト もあった。
1. 変数の初期化と各データに付されたIDのリスト（Tag List)をまず取得する。
各データには以下（赤枠）のように固有のIDが自動的に付されている。このIDのリスト。これをキーにして具体的なデータを抽出するので非常に重要。
Firebase REST API の検索パラメターとしてshallowというのがあり、shallow=trueとすれば、IDのリストが返されてくる。（前述のMETRIC RAT AI2 に教えてもらった）取得したIDリストを変数tagListに格納する。後で使用する変数をまとめて初期化。
2. Saveボタンをタップした時の処理。
まず、日付のフォーマットを、yyyy/MM/dd (E) HH:mm:ss に設定する。（参照 ）何度か試行錯誤をしたが、フォーマットのやり方自体はシンプルでわかりやすかった。
通常のTodo listアプリだと、日付は自動的に付していくのではなく、カレンダーなどから選択するという形になると思う。次回はカレンダーからの選択に変更するかもしれない。
3. タイトルと内容を入力するtextBoxがブランクでなければ、日付、タイトル、内容をdictionary形式に整え、Web componentでPOSTする。
入力がないのにSaveボタンをタップした時は、注意を促すウインドウを表示する。
4. データの取得処理。
Fetchボタンをタップした時、Tag Listをまず取得した上（procedure "callGetTag"を実行）で、データを取得するためWeb componentでGETリクエストを行う。
Clockを使って、Tag List取得とデータ取得の間に400ミリ秒の待ち時間を設定した。この待ち時間がないとうまくいかなかった。
5. GETリクエストによりデータを取得した時の処理。
Tag ListをキーにしてデータをList形式で変数tempListに格納。
Tag Listのindexをキーにして各データの、日付、タイトル、記事内容をそれぞれの変数にList形式で格納。
３つのデータ（日付、タイトル、記事内容）を、\nでそれぞれ改行を挿入の上、List形式で変数itemDataに格納。ListViewに表示するためにはデータをリスト形式にしておく必要がある。
このままだと、昇順（古いデータがトップに表示）なので、ListUtilzを利用して逆の順番（降順）にした上で、ListViewに表示。
次回以降、更新、削除 (U & D) といった機能を追加していく。（もちろん、Firebase REST APIを利用して。。。）また、Saveボタンをタップした際にListViewの一覧表も自動的に更新できるようにしたいが？今現在、どうしてもうまくいかない。
＜追加： Update（更新）、Delete（削除）の機能追加を試行錯誤しているが、どうしてもうまくいかず、見通し立たず＞
********************************************************
MIT App Inventorは、本当にアイデアさえあれば、色々なことができるようだ。しかも無料で！！また、今さら、このおもちゃの拡張性というか底力に驚いている。それを引き出しているのは、案外communityの力かもしれない。MIT App Inventorを選んで正解だったようだ。
. 
