75才からのモバイルアプリ作成

MIT App Inventor 2 を使ったアプリ作成

MIT App Inventor 2で遊ぶ (新ことわざ遊び 1 -C of CRUD-)

2024-11-04 07:58:25 | 日記

初めて作ったアプリが、ことわざ遊びだったが、もう一度作成。

初回はことわざデータをFirebase Databaseに登録する部分。主に、データベースを扱う基本CRUDのC (Create) を扱う。Firebase REST API を使用。

以前にこのブログで書いた内容と重複する箇所も多いが、Firebaseのデータベース (Realtime Database) の復習も兼ねて。

アプリ実行のビデオ:

スクリーン・デザイン:

左側:メインスクリーン(今回は対象ではない)

右側:ことわざデータ追加画面(今回のブログの対象)

             

ブロック・コード(ことわざデータ追加画面):

メインスクリーンで「追加」ボタンをタップしたら、追加画面 (AddScreen) へ遷移する。

追加画面の初期化componentで「入力チェック」ボタン (checkInputbutton) を無効化。

新規データ(Dictionary形式)を格納する変数postDataを設定。

1.  「保存」ボタン (saveButton) をタップした時のイベントハンドラーの内容

if 条件の内容は、長いため省略(collapse)してあるが、内容は、firstPartTextBox, SecondTextBox, meaningTextBox のいずれもが空白ではない(何らかのテキストが入力されている)場合は then 以下を実行することとしている。

set Web1.Url to =>

HTTP POST リクエストを行う対象のURLを定義。URLの内容は、「Firebase Realtime Database をセットアップした時にFirebase より指定された所定のURL + "NewProverb" + ".json"」

もし、所定のURLのサブディレクトリーに "NewProverb" が存在しない時は、Firebase側で自動的にその名前のサブディレクトリーを作成してくれる。

set global postData to =>

firstPartTextBox, SecondTextBox, meaningTextBox 及び fullText (firstPartTextBox + 全角空白 + SecondTextBox) の4つのデータをDictionary形式で変数postDataに格納。

call Web1.PostText => 変数postDataを所定のURLに対しPOST Requestする。

call AddScreen.HideKeyboard => キーボードを隠す。

checkInputButton.Enabled to true =>「入力チェック」ボタンを有効にする。

もし、if 条件が満たされない場合は、「call Notifier1.showMessageDialog」componentを実行し、入力漏れがあることを表示。

 

2. 「入力欄をクリアー」ボタンをタップした時の動作の設定。全てのTextBoxの入力欄をブランクにする。

3. 「入力チェック」ボタンをタップした時の動作の設定。

リスト型の変数tagListを設定し(念のため初期化しておく)、関数getTagListを実行する

関数tagListの実行内容

所定のURLのサブディレクトリー (NewProverb)にデータを保存した場合、以下サンプルデータのように各データごとにunique IDが与えられる。削除、更新等の際に各データを識別する場合に使用。

           

このIDのリストを取得するためには、所定のURLの末尾に ”?shallow=true" を付加すれば自動的にリストを取得できる。shallowについては、Firebase REST APIのページにも簡単な説明があるが、METRIC RAT AI2 の Firebase Demo: No Security with Web Component の GET(TAGS)の項目がわかりやすい。(以前の説明と同じ)

そして、このURLに対しGETリクエストを行う。

取得したサンプルデータは以下の通りで、これをデコードし、「get keys」componentでキーの値(ID)のみを取り出しtagListに格納。

{

  "-OAbncQpTSsdpqufxGj7": true,

  "-OAbpeo1tGyoMYLjfsIf": true

}

内容をListView (checkAddedDataListview) に表示。(とりあえず、追加したデータの分だけではなく、全てのIDを表示させている)

4. 右上端の backButton をタップした時の動作

メインスクリーンであるScreen1へ戻る。その時、startValueとして"fromAddScreen"を返す。

startValueとして"fromAddScreen"を受け取ったメインスクリーンでは、再度「追加」ボタンをタップした場合、管理者パスワードの再入力は不要となる。

なお、メインスクリーンの管理者パスワードの再入力が不要となる部分のブロック・コードは以下の通り。

「追加」ボタンをタップした時、遷移元より返される値(get start value)として"fromAddScreen" が返されていなければパスワード入力が促される。 "fromAddScreen" であればパスワードなしでAddScreenへ遷移できる。

初めて「追加」ボタンをタップした時は、当然、遷移元はないので get start value は null となり、パスワードの入力が必要となる。

                           *************************************************************************

今回も、Firebase側で、新規設定のサブディレクトリー(NewProverb)に対するアクセス権限設定を忘れたため、何度試みてもデータの保存ができず(アクセスできず)、四苦八苦した場面があった。(歳のせいか、すぐ忘れてしまう。。。もうすぐ76歳か〜!)

                           *************************************************************************