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

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

MIT App Inventor 2で遊ぶ (GlobalChat 4)

2024-08-17 15:04:12 | 日記

nicknameの削除機能を追加。

このアプリ、一人で何通りもの役になって、チャットするとおもしろい。あまりnicknameをたくさん登録しすぎると、誰が誰だかわからなくなってしまうが。でも、それはそれでまたおもしろい。(孤独な老人の独り言?)

アプリ実行のビデオ:

スクリーンのデザイン:

追加したのは赤黄点線内の入力内容の可視化ボタンのみ。

                                               

ブロック・コード:

追加した削除の部分のみ。

1. 変数deleteKeyTagは、削除対象のnicknameのIDを格納

2. nickname登録、追加、削除画面は以下の通り。(赤点線部分が登録済nicknameリスト)

                 

削除したいnicknameをタップしたら(選択したら)、削除の意向を確かめるダイアログ・ウインドウが表示される。

また、タップしたらindexを返してくれるので、それをキーにしてtagList(IDリスト)よりIDを取得し、deleteKeyTagに格納する。

「Yes. Delete it.」が選択された場合は、管理者パスワードの入力を促すウインドウが表示される。

管理者パスワードである「123」が入力されれば、先ほど格納したdeleteKeyTag (ID)を所定のURLに追加し、DELETEをリクエストする。

約300m秒X2=600m秒程度間をおいて、関係する変数のリセットを行なった上で、関数setDataを実行して再度nickname のリストを取得する。=>更新された新しいデータをListViewに表示する。

入力したnicknameを可視化するためのボタンのステータスを格納する変数eyeImageStatusの設定

ボタンをタップするたびにeyeImageStatusがfalse => true => false ... と変更していくので、それに合わせて可視化の要否、画像の選択を実行していく。

今回は、nicknameの削除、データの取得でFirebase Realtime Databaseとのデータの受け渡しのタイミングが合わないことがたびたび発生した。(上記ビデオでもnicknameを追加した際、即登録済nicknameリストに反映しなかったため、一旦メイン画面を表示した上で、あらためて登録画面を表示した。)

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

前回までのブログ(CRUDの内Uを除くCRDを実装):

MIT App Inventor 2で遊ぶ (GlobalChat 3)

MIT App Inventor 2で遊ぶ (GlobalChat 2)

MIT App Inventor 2で遊ぶ (GlobalChat 1)

 

データベースに対するCRUD操作に関する以前のブログ:

MIT App Inventorで遊ぶ (Journal アプリ4 D / REST API)

MIT App Inventorで遊ぶ (Journal アプリ3 U / REST API)

MIT App Inventorで遊ぶ (Journal アプリ2)

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


MIT App Inventor 2で遊ぶ (GlobalChat 3)

2024-08-14 07:20:11 | 日記

前回までは、チャット参加者のニックネームは以下の通り変数に格納していた。

今回は、参加者のニックネームをFirebaseのRealtime Databaseにて管理することに変更。追加、削除(まだ実装していないが)もアプリを操作すれば可能になった。

以下の左図は、新たに設定したFirebase Realtime Database の NickNameListのディレクトリー。テスト中にスクリーンショットしたもので、ビデオ撮影の際には削除してアプリを実行した。

今回は、NickNameListが未設定の状態からアプリを実行。そのため最初にRuntime errorが表示されるが、そのエラー表示が右図。ピンク色の「END APPLICATION」をタップせずに、エラー表示ウインドウの以外のグレーの部分をタップすればアプリを続行できる。このあたりは以下アプリ実行のビデオを参照。

        .       

アプリ実行のビデオ:

スクリーンのデザイン:

<メイン画面>

右上の+ボタンを追加。タップすれば、コンテナーである赤黄色長方形のVerticalArrangementが非表示となり、登録画面が表示される。

「Enter Chat」ボタンの右側に小さな赤色の四角形を追加したが、これは、チェック用に、nicknameが一人でも登録されているかどうかを示す。登録されている場合は、緑色となる。今回は、nicknameが未登録の状態よりアプリを実行するので赤色となっており、エラーも表示される。(結果的に、これを作成した意味がまったくないので削除することになるか。。。)

                                          

<登録画面> 実際の画面では、右上の+ボタンは、Xボタンに変更され、タップすれば、赤黄色のコンテナーに収納されている部分が非表示となり、代わりに上記メイン画面が表示されることになる。   

                    

ブロック・コード:

1. チェック用四角形の背景色(濃い緑色)でnicknameが一人でも登録されている時の色

2. nicknameを登録する画面に遷移する「+」ボタンをタップした際の動作を設定

メイン画面のコンテナーと登録画面のコンテナーの表示、非表示を設定し、関数setDataを実行することによりnicknameListをFirebaseより取得する。

3. nicknameの新規登録ボタン「registerButton」をタップしたら、すでに登録済みのnicknameと重複しないかどうかをチェック=>重複しない場合は、登録の前に管理者パスワードの入力を促す。重複している場合は、同じnicknameの重複登録はできない旨を表示。

4. 管理者パスワード123が入力されれば、所定のFirebase Realtime DatabaseのURLのディレクトリー「NickNameList」に対し、入力したnicknameをPOSTする。(ディレクトリー「NickNameList」が未設定の場合は、新規に自動的に設定される)

5. 実際のアプリ実行の際の処理の順番としては、以下がまず実行され、Firebase Realtime Databaseの所定のURL/NickNameListよりIDリスト(TagList)とnicknameListが作成される。初めてこのアプリを実行した際は、NickNameListのディレクトリーが生成されておらず、存在しないものを取得しようとして実行エラーの警告が表示される。

エラー処理を施せば(具体的方法わからない)、この警告の表示もなくなると思うが、最初だけなので、まあいいか、という感じ。

まず、TagListの取得。(nicknameのIDのリストで、今後データの削除を実装する際に使用予定)

NickNameListの個数を取得

NickNameListのデータ(実際のnickname)を取得し、変数nicknameListに格納(関数makeNicknameListを実行)。

nicknameListが生成されれば、そのリストをListViewに表示。

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

課題としては、nicknameの削除機能に加えて、(もし可能であれば)新しくnicknameを登録した際、リアルタイムで List of registered nicknames に反映されないので、反映するようにしたい。

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

前回までのブログ(CRUDの内Uを除くCRDを実装):

MIT App Inventor 2で遊ぶ (GlobalChat 2)

MIT App Inventor 2で遊ぶ (GlobalChat 1)

 

データベースに対するCRUD操作に関する以前のブログ(なお、Journalアプリは、GlobalChatと比較して、Firebaseとのデータのやり取りが不安定であった。):

MIT App Inventorで遊ぶ (Journal アプリ4 D / REST API)

MIT App Inventorで遊ぶ (Journal アプリ3 U / REST API)

MIT App Inventorで遊ぶ (Journal アプリ2)

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


MIT App Inventor 2で遊ぶ (GlobalChat 2)

2024-08-10 08:53:31 | 日記

メッセージの削除は、当該メッセージの投稿者のみとした。(この種アプリでは、あまり意味はないが)

アプリ実行のビデオ:

(バックは、Googleに表示されている「Firebase Realtime Database」のページ)

スクリーンのデザイン:

変更点は特にないが、削除するアイテムのIDと投稿者名、および削除しようとしている者の名前をチェックするためのLabelを追加した。(赤点線枠内)

                                         

ブロック・コード:

追加・変更部分のみ。

1. 削除するアイテムのIDおよび投稿者名を格納する変数の設定

2. Listviewのアイテムをタップした場合、まず削除の是非を再確認するメッセージを表示。

削除するアイテムのIDおよび投稿者名に加え削除しようとしている者(ログインしている者)のニックネームをtestLabel (Label For Check)に表示。

3. 上記メッセージで「削除する」を選択した場合、投稿者名(deleteName)と削除しようとしている者(nickname)が同一であれば、Firebase所定のURL/MySecretMemo/ID.jsonに対しDeleteを実行。

同一でなければ、「このメッセージの作成者ではないので、削除できません。」を表示し、削除のリクエストはしない。

ListViewのアイテムを選択した状態を解放する。(ListViewのアイテムをタップした場合、当該アイテムの背景色がlight grayに変化するように設定してあるが、解放しなければ背景色がそのままとなる)

やはり、課題は、いつでもFirebaseとスムースにデータのやり取りができること。まだ、稀に不安定な時がある。

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

前回までのブログ(CRUDの内Uを除くCRDを実装):

MIT App Inventor 2で遊ぶ (GlobalChat 1)

 

データベースに対するCRUD操作に関する以前のブログ:

MIT App Inventorで遊ぶ (Journal アプリ4 D / REST API)

MIT App Inventorで遊ぶ (Journal アプリ3 U / REST API)

MIT App Inventorで遊ぶ (Journal アプリ2)

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


MIT App Inventor 2であのアプリを作ってみる (Whack-a-Mole 2)

2024-08-07 14:13:11 | 日記

ゲームのレベル選択を追加。

アプリ実行のビデオ:

(ちょっとスコアーの数字がおかしいようですが。退屈なビデオです。)

スクリーンのデザイン:

レベルの選択を追加しただけ。

                                   

ブロック・コード:

レベル選択部分のみ。

1. 「遊び方」にゲームのレベルに関する記述を追加。

2. ゲームのレベルは、モグラの出てくる間隔を長くするか短くするかで調節。数字の単位はミリ秒。

3. 「Start」ボタンをタップした時にゲームのレベル(ClockのInterval時間)をセットする。

 

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

前回までのブログ:

MIT App Inventorであのアプリを作ってみる (Whack-a-Mole 1)

 


MIT App Inventor 2で遊ぶ (GlobalChat 1)

2024-08-04 07:36:29 | 日記

Global Chatと呼ばれている(?)形式で、誰でもあらかじめ登録しておけばChatに参加できるという単純なチャット・アプリ。もちろん、push notificationなんて便利なものは備わっていない。pullしに行かないとダメ。あらかじめ登録しておいたニックネームを入力すればChat Roomにログインできる。チャットのメッセージが左右に分かれることもなく、リスト形式で表示される。

パスワード登録もなく、2〜3人の仲間内で使う「おもちゃ」、または秘密の連絡ツール?(作成途中で、なかなかうまくいかず、何度も中断があり、作成し始めてから結構時間が経過しているが、当初は、「MySecretMemo」と呼んでいた)。

Chatの内容はFirebaseのRealtime DBに保存されるので、Firebaseを通じてのコミュニケーションということになる。

今回は、DBを扱う時の基本4機能(CRUD:Create,Read,Update,Delete)のうち、U(Update)の更新機能を除く3機能を備えたもの。

アプリ実行のビデオ:

スクリーンのデザイン:

メインスクリーンとChat Roomのスクリーン(右側)

                                         

ブロック・コード:

既にCR(U)Dの部分については、以前取り上げているので、復習も兼ねることになる。

=>Screen1(メイン画面)

参加者のニックネームをリスト形式で変数registeredNamesに格納。登録されていないニックネームを入力すると、Warningが表示される。

Chat Roomに遷移する際、データとしてニックネームを渡す。

=>postsScreen

変数ならびにLsitView1を初期化する関数を設定しておく。

まず、TagListを取得。(Firebase RESTでデータをpostした際に各データに自動的に与えられるIDのリスト)

本アプリ用にはFirebaseのRealtime DB内のproject endpoint URLに「MySecretMemo」というdirectoryが設定されており、通常、Firebaseの所定のURL + MySecretMemo + .json でGETリクエストを行うと、MySecretMemo以下の全てのデータが返される。

しかし、「?shallow=true」を付加しておくと、MySecretMemo直下のデータのみを返してくれる。直下のデータとは、postした際に自動的に付されたID。(以下図)なお、実際に返ってくるデータは、[["-01g1UHk4sG5pttoICpb", true],[......],.....]のようにBool値とペアーとなったリスト形式となっており、IDのみを抽出するために、index=1 のデータのみを取り出している。(「when Web2.GotText」のcomponentの通り)

実際には、(ちょっと古いデータだが)以下のように各IDの下に具体的なデータが、キー/値の形式で格納されており、?shallow=trueを付けなければこれら全てが返される。設定したキーは、Date、Message、Nameの3つ。

Firebase データベース REST API の使い方等については、以前にも紹介した以下を参考にした。

Firebase Database REST API (Google)

Firebase Demo: No Security with Web Component (by METRIC RAT AI2)

 

 

そして、データを取得する。Clockを使っている理由は、今回、Firebaseとのデータの受け渡しがスムーズにいかない場合が多かったので、それぞれのデータの受け渡し時にClockを使って時間的余裕(約1秒:500ms x 2)を作るため。何の役に立つの?という疑問が湧いてくるかもしれないが、このようにすると割とうまくデータの受け渡しができるようになったのも事実。今回はやたらと使った。

全てのデータを受け取るので、?shallow=true の設定はなし。

データ取得に成功すれば、データを抽出してMessage, Name, Dateのアイテムごとの変数にリスト形式で格納。

                       *************** 以下 makeNameList、makeDateListの各関数が同様に定義。省略。 *******************

それら抽出されたデータをListViewに表示するため、関数makeFinalDataを実行し、同関数により統合されたデータ(finalData)をListViewに表示させている。なお、extensionを利用して、表示の順番を新しいものから古いものへとdescending order(降順)に変更している

関数makeFinalDataの内容:

Message, Name, Dateごとにデータを抽出し、適宜体裁を整えて変数finalDataへ追加している。Nameについては、現在ログイン中のメンバーであれば、「赤丸+Me」 を、出なければ Youを頭に付加している。

メッセージをポストする「send」ボタンをタップした時の動作:

現在の時刻、ニックネーム、メッセージをDictionary形式で所定のFirebase URL + 所定のdirectory.jsonにPOST。

「サーバーと交信中...」のメッセージが表示され、若干時間(約1秒:500ms x 2)をおいて関数reloadを実行。関数reloadは、データ取得(GETリクエスト)=>データのListViewへの表示を行う。

なお、Realtime Databaseにまだメッセージがない場合は、Firebaseの所定のproject URL + /<アプリ用の任意のDirectory名> + .jsonに対し、dictionary形式のデータと共にPOSTすると、自動的に<アプリ用のDirectory名>を作成してくれる。(今回のDirectory名は、MySecretMemo)

ListViewのアイテムをタップして選択=>削除の可否を聞くメッセージが表示 =>削除の対象となるメッセージのID(tageList)を取得

「削除する」を選択=> 所定のFirebase の project URL + 所定のdirectory + /ID + .jsonに対しDeleteを実行

若干時間(約1秒:500ms x 2)をおいて、再度関数getTagList、関数getDataを実行する。(関数reloadを実行しても同じ)

Firebaseとのデータのやり取りがなかなかうまくいかない時もあるので、そのような時は、この「Reload」ボタンをタップ。

postするメッセージを書き込むmessageTextBoxに書き込んだテキストを削除する「delete」ボタン(X)の動作

「Log out」ボタン:ニックネームを入力する最初の画面に戻るボタン

 

 

<課題>

1. 誰でも誰のpostでも削除できるようになっているが、ログインした人の自分のpostしか削除できないようにしたい。

2. まだうまくデータを取得できないことがまれにあるので、Firebaseとの間のデータの受け渡しを100%安定させたい。

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

データベースに対するCRUD操作に関する以前のブログ:

MIT App Inventorで遊ぶ (Journal アプリ4 D / REST API)

MIT App Inventorで遊ぶ (Journal アプリ3 U / REST API)

MIT App Inventorで遊ぶ (Journal アプリ2)

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