MIT App Inventorで遊ぶ (Journal アプリ１C & R / REST API）

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＞

今回は、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もアプリに同梱していたみたい（リソースの無駄！）。

実行画面：

（インプット内容は、フィクション。この動画を作った日時がわかると思う。）

スクリーンのデザイン：

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を選んで正解だったようだ。