MIT App Inventor 2で遊ぶ (新ことわざ遊び -番外編 2-）

Layoutのcomponentを使って複数画面の「ことわざ遊び-英語編-」を作ってみた。

アプリ実行のビデオ：

スクリーン・デザイン：

左から、ランディング・ページ（1600ミリ秒経過後メインスクリーンに自動的に遷移）、メインスクリーンの初期画面（クイズの画面）、メインスクリーンのデータ追加画面

なお、メインスクリーンの編集画面（更新・削除）は次回以降の予定。

                                         

ブロック・コード：

基本的にすでにこのブログで紹介したブロック・コードが多く、かなり重複していますが。。。

ランディング・ページ ＝＞

画面初期化時にClock1を有効にする。intervalはあらかじめ400ミリ秒にセット。

画面遷移のタイミングを決める変数countを0で初期化。

countが4以下の場合は、400ミリ秒毎にcountの数値を1ずつカウントアップする。

countが4超となったら、Clock1を無効とし、メインスクリーンに遷移する。

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

クイズの画面、追加画面、編集画面で共通に使うブロック・コーディング（（Firebase Realtime DBよりデータを取得し、項目毎にリスト形式の部分データを抽出）＝＞

この部分は以前のブログの内容と同じですが。

関数getTagList：各データのIDリストを取得するために所定のURLに対しGETのリクエストを行う。パラメーターshallowをtrueにし、IDのみを取り出すようにセット（既出）。

取得するTag List（データのIDリスト）は以下のようなDictionary形式なので、keyのみを取り出すとIDリストとなる。

tagListからデータの個数(length of list)を抽出し変数lengthOfDataに格納。そして、さらにデータ自体を取得する関数makeGETRequestを実行する。

関数makeGETRequest：パラメータshallowを外して、各データの詳細を取得するために所定のURLに対しGETリクエストを行う。

正常にデータを取得できたら、デコードを行った後、各項目毎のデータを抽出する。

関数makeFirstPartList（最初の句）、関数makeSecondPartList（次の句）、関数makeFullTextList（ことわざの全文）、関数makeMeaningList（ことわざの意味）、関数getRandomlyChosenFirstPart（任意に取り出した最初の句）を実行し、それぞれ変数にデータを格納する。

なお、メインスクリーンが表示されている場合は、mainListPickerに変数secondHalfListの値を渡し、追加画面が表示されている場合は、checkDataListViewに変数fullTextListを渡すようにセット。（赤黄色点線部分）

関数makeFirstPartListは以下の通りで、各データのIDをキーにしてデータを抽出しリスト形式で変数に格納。

なお、他の関数も内容的には同じなので省略形のみとした。

関数getRandomlyChosenFirstPartでは、extensionを利用して「最初の句」のリストをシャフルしてindex 1（最初のデータ）を取り出している。=> mainFirstHalfLabel（最初の句）に表示されるので、ユーザーは「Tap & pick second half」ボタンをタップし表示されるリストより「次の句」を選択することになる。

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

メインスクリーン（クイズの画面）＝＞

解答が正しい場合と間違った場合に再生する効果音をMultimedia ComponentであるSound1およびSound2にセットする

ことわざのデータ関係の変数およびListViewを初期化。

変数AuthStatusをfalseで初期化しセットする。（追加画面に入るためにはパスワードが必要だが、一度パスワードを入力すれば、追加画面からクイズ画面に戻って、再度追加画面に遷移する場合パスワードの入力を不要にするために使用）

「Add」ボタンをタップした際の動作を設定。

AuthStatusがtrueの場合=>変数を初期化。関数makeAddSCreenVisibleを実行し、メインスクリーンを非表示に、追加画面を表示にそれぞれ変更する。

AuthStatusがfalseの場合=>追加画面に入るためのパスワードを入力した事がないので、パスワードの入力を促すポップアップが表示される。

 

パスワードを促すポップアップで、パスワード（123）が正しく入力されれば、変数AuthStatusをtrueに設定。関数makeAddSCreenVisibleを実行し、変数の初期化、メインスクリーンの非表示、追加画面の表示を行う。パスワードが空白あるいは間違っていれば、正しいパスワードの入力を促すポップアップを表示。

関数makeAddScreenVisible：変数の初期化、Labelの初期化、メインスクリーンの非表示、追加画面の表示をそれぞれ行う。

変数startButtonStatusをfalseで初期化。これは、「Start」ボタンの表記を「Start」あるいは「Next」に変更するタイミングをコントロールするためのもの。

「Start」ボタンをタップすると、初回は、「Start」ボタンの表示をStartよりNextに変更。＝＞ statusButtonStatusをtrueにセット。=> 変数などの初期化 => 関数getTagListを実行してデータを取得（この関数および関連ブロックは冒頭の「クイズの画面、追加画面、編集画面で共通に使うブロック・コーディング」を参照）

任意に選択された最初の句に続く次の句をmainListPickerより選択＝＞変数answerFullTextに当該最初の句と選択された次の句を結合して格納。＝＞mainFullTextLabelに結合したテキストを表示＝＞最初の句のindexをキーにして、正しい次の句を取り出し、mainListPickerで選択されたものと同じであれば正解なので、その場合は、mainResultLabelに「Correct」と表示し、同時にことわざの意味もmeaningLabelに表示する。

＝＞正解でなければ、再度次の句の選択を促すポップアップを表示する。

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

データ追加画面 ＝＞

メイン画面に戻るボタンをタップした時の動作の設定：

取得データを項目毎に格納する変数や追加画面のLabelの初期化（関数clearAddScreen）。追加画面の非表示とメイン画面の表示。

メイン画面側のLabelの初期化。これら初期化を行った後、関数getTagListを実行して追加画面で追加したデータなどを含め改めて最新のデータを取得する。

ちょっとブロックがぼやけてしまってわかりにくいが、追加画面の３つの入力画面にテキストの入力がされていれば、それら入力データをデータベースの項目（キー）の値としてセットし変数postData(Dictionary形式)に格納。

そして、所定のURL（赤黄点線部分）に対しpostDataのデータをPOSTする。（赤白点線部分）

「Clear」ボタンの動作設定

 

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

スクリーンを一つだけにして画面展開をするメリットはあるが、今回のようなの独立した機能を持った画面の場合は、コードは重複するかもしれぬも、スクリーンを分けた方が良いと思われる。

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

前回までのブログ：

MIT App Inventor 2で遊ぶ　(新ことわざ遊び -番外編 1-）

MIT App Inventor 2で遊ぶ　(新ことわざ遊び 3 -U&D of CRUD-）

MIT App Inventor 2で遊ぶ　(新ことわざ遊び 2 -R of CRUD-）

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