6 RapidApps を使ったスピーディーなアプリ開発 1
課題手順 RapidApps でアプリを開発する 開発した Kiosk アプリの動作を確認する 2
RapidApps でアプリを開発する (1) Bluemix RapidApps は Web やモバイル アプリをスピーディーに設計 / 開発し Bluemix にデプロイすることができるビジュアル開発ツールです ここでは RapidApps を使って 無人受付システムを作成してみます RapidApps は データ オブジェクトとそのリレーションをベースに簡単に モバイル アプリの画 設計と開発を うことができます このハンズオンでは 訪問者 (Visits) と訪問先担当者 (Employees) のデータ オブジェクトとその間のリレーションから受付システムの設計 開発を っていきます 訪問者 訪問先担当者 (Visits) (Employees) 訪問者エントリー画面 3
RapidApps でアプリを開発する (2) Web ブラウザーのブックマークから RapidApps を選択し 下記 URL の RapidApps Dashboard にアクセスします https://rapidapps.ng.bluemix.net/ Open your RapidApps dashboard をクリックし Bluemix の ID でログインします 4
RapidApps でアプリを開発する (3) RapidApps Dashboard で Start building an App をクリックし Name に KioskApp と し Create ボタンをクリックします 下の方に表示される Your app is ready! Start building をクリックすると RapidApps のキャンバスが開きます 5
RapidApps でアプリを開発する (4) Zip ファイルをダウンロードして Excel ファイルを解凍し 担当者のデータ オブジェクトを作成します https://developer.ibm.com/rapidapps/wp-content/uploads/sites/22/2014/04/employees.zip RapidApps キャンバスの左メニューの DATA アイコンをクリックし 右側に現れる Spreadsheet をクリックします ファイルを選択 をクリックし 用意した Employees.xls を選択し OBJECT を Employees2 に変更 CREATE OBJECT をチェックして IMPORT ボタンをクリックします 6
RapidApps でアプリを開発する (5) RapidApps キャンバス上に Employees2 のデータ オブジェクトが表示されます 訪問者情報のデータ オブジェクト (Visits) は サンプル アプリ用に Dashboard に事前登録されている Visits をそのまま使用します 右側の Add existing object アイコンをクリックします Object in My Space Visits を選択し NEXT ボタンをクリックします 表示されるチェック ボックスでは何もチェックせず NEXT ボタンをクリック (Visits にリンクされたデフォルトの Employees が配置される場合は 右クリック : Remove で Employees を削除します ) 7
RapidApps でアプリを開発する (6) キャンバス上に Visits と Employees2 の 2 つのデータ オブジェクトが 表示されていることを確認します Visits の host フィールドと Employees2 のタイトル部分をリンクします ( 左下図のようになります ) Visits と Employees2 の関係を HOST == NAME とします これで訪問者情報 (Visits) の訪問先担当者名 (HOST) と担当者 (Employees2) の名前 (NAME) が関連づけられました この関連づけは画面設計の際にそのまま反映されます 8
RapidApps でアプリを開発する (7) 訪問者が情報 する画 を作成してみます 左側メニューの SCREENS の + アイコンをクリックします Name として VisitorEntry と し SAVE ボタンをクリックします VisitorEntry のキャンバスに Form をドラッグ ドロップし Collection として Visits を選択します キャンバスに Form が配置されます 9
RapidApps でアプリを開発する (8) 次に 訪問者情報 画 上に表 するフィールドを定義します 配置した Form の host フィールド右の虫眼鏡アイコンを右クリックし Properties をクリックします データ オブジェクトにおいて Visits の host と関係づけを った Employees2 のフィールドが一覧されます LIST VIEW では name と office-phone がチェックされるようにし DETAIL VIEW では building location name office office-phone がチェックされるようにし SAVE ボタンをクリックします 10
RapidApps でアプリを開発する (9) 次に 訪問者情報の が完了したときに表 する画 を作成します 先ほどと同様に SCREENS の + アイコンで もう 1 画面作成し Name に Success と し SAVE ボタンをクリックします 右側の Text アイコンをキャンバスにドラッグ ドロップし 以下のように します ${Input.Visits.name} さん ようこそ IBM XCITE へ! 11
RapidApps でアプリを開発する (10) 次に 各画面の遷移を定義します Success 画面のキャンバス上に Button アイコンをドラッグ ドロップし 戻る と します 戻る ボタンを右クリックし Properties をクリックします ナビゲート先として VisitorEntry を選択し SAVE ボタンをクリックします 12
RapidApps でアプリを開発する (11) 右上のをクリックし Initial Screen として VisitorEntry をセットして SAVE ボタンをクリックします VisitorEntry 画面の SUBMIT ボタンをダブルクリック後 右クリックし Properties を選択します ナビゲート先として Success を選択し SAVE ボタンをクリックします 13
開発した Kiosk アプリの動作を確認する ここまで設計 / 開発した受付システムの動作を確認してみます 右上の (Preview) アイコンをクリックすると モバイル ブラウザー シミュレーターが起動し 開発したアプリの動作確認を うことができます 訪問者の名前 (name) 会社名 (company) を し 訪問先担当者名 (host) を選択し Submit ボタンをクリックします 問題なく Success 画面に推移することを確認します 14
Kiosk アプリを変更し 確認する ここまでの準備ステップで作成した Kiosk アプリを以下のように変更し モバイル ブラウザー シミュレーターで動作を確認してください 訪問者が Submit したときに 訪問先担当者の Email にメールを送信し メールの本文には訪問者の会社名と名前が明記されるように変更します Step 1 : Employees2 のデータを 部修正し 分のメールアドレスに変更します Step 2 : LOGIC を追加し メールを送信するように定義します ( 現 BETA 版では 古い LOGIC が残って意図しないメールが送信される不具合が確認されています それらのメールは無視して 自分が定義したメールが送信されることが確認できれば OK です ) 15
Employees2 のデータの一部を更新する (1) 右上の をクリックします 左側の Objects アイコンをクリックし Employees2 をクリックします 16
Employees2 のデータの一部を更新する (2) 社員一覧が表示されるので 誰か一人を選びクリックします ( 選択した人の名前を憶えておいてください ) 右側に表 されるパネルから 分が受信できるメールアドレスに変更します 右下にある Save ボタンを押して 変更を保存します 17
メール送信のロジックを追加する (1) ブラウザのタブを切り替えて元の画 に戻ります LOGIC を追加し SendMailToHost という名前を付けて保存します 18
メール送信のロジックを追加する (2) Event Type に Data Event を選択し Object Type に Visits を選択します 19
メール送信のロジックを追加する (3) Action Type に Send a Message を選択します 送信先に ${input.host.email} メールの Subject に ${input.company} の ${input.name} 様が来社されました Content に ${input.company} の ${input.name} 様が受付に来られました と記入します 20 右上のアイコンをクリックして再度シミュレーターを動かします 訪問先として先にメールアドレスを変更した を選択し ( 番下までスクロールして ) Submitします メールが届くのを確認できたら終了です