では、App Inventorでアプリを作成しましょう。まずはレイアウトを作成します。今回は、けっこうたくさんの部品を作るので、部品の並び方などをよく考えて作っていきましょう。なお、（）内は部品の名前（Renameで設定する名前）です。

・Label（Label1）
実行時の簡単なメッセージなどを表示させるものです。これはデフォルトのままでOKです。

・TextBox（TextBox1）
メッセージを入力するためのフィールドです。WidthをFill parentにして横幅を広げておきましょう。

・Button（SendButton）
メッセージをサーバーに送信するためのボタンです。Textを「Send」などわかりやすいものにしておきましょう。

・ListPicker×３個
　（yearList, monthList, dayList）
多数の項目をリスト表示するリストピッカー（ListPicker）を３つ配置します。これは、それぞれ年・月・日の数字を表示するようにしておきます。例えばyearListならば、「2013, 2014, 2015」といった値をElementsFromStringに記入すれば、それぞれの値をリストにして表示できます。同様に、monthListには１～12を、dayListには１～31をリストに設定しておきます。

・Button（SearchButton）
２つ目のボタンです。これは検索用のボタンです。「Search」などわかりやすい名前にTextを変更しておきます。

・Label（ResultLabel）
検索結果を表示するボタンです。たくさんのテキストが表示された場合を考え、一番下に配置しておくとよいでしょう。

・Web×２個（WebSend、WebSearch）
Webを２つ配置します。２つのサーブレットそれぞれに対応させるためです。まぁ、Urlを設定するなどして１個を使いまわすこともできますが、ここではわかりやすく、「１つのサーブレット（アクセス先）に１つのWeb」としておきました。WebSendのほうにはメッセージを保存するサーブレットのアドレス、WebSearchはデータん検索をするサーブレットのアドレスをそれぞれのUrlプロパティに設定しておいてください。

・Clock（Clock1）
クロックは、タイマーとしての機能を提供するものですが、実は日時に関する機能も提供してくれます。現在の年月日の情報を得るのにClockを１つ配置しておきます。


――以上の部品類を適当に配置してください。部品を整列して並べるには、「Screen Alignment」のところにある部品を利用すると良いでしょう。ここには、部品を縦や横に並べて配置するためのものが用意されています。これらを配置し、その中に部品類を組み込んでいくことで、簡単に部品を整列できます。これらの部品をうまく使ってレイアウトをしてください。

※下図は、作成したアプリのレイアウト。