Microsoft PowerPoint - Tutorial_6.ppt

Size: px

Start display at page:

Download "Microsoft PowerPoint - Tutorial_6.ppt"

ひでかつくとの
4 years ago
Views:

1 6 RapidApps を使ったスピーディーなアプリ開発 1

2 課題手順 RapidApps でアプリを開発する開発した Kiosk アプリの動作を確認する 2

オブジェクトとそのリレーションをベースに簡単にモバイルアプリの画設計と開発をうことができますこのハンズオンでは訪問者 (Visits) と訪問先担当者

3 RapidApps でアプリを開発する (1) Bluemix RapidApps は Web やモバイルアプリをスピーディーに設計 / 開発し Bluemix にデプロイすることができるビジュアル開発ツールですここでは RapidApps を使って無人受付システムを作成してみます RapidApps はデータオブジェクトとそのリレーションをベースに簡単にモバイルアプリの画設計と開発をうことができますこのハンズオンでは訪問者 (Visits) と訪問先担当者 (Employees) のデータオブジェクトとその間のリレーションから受付システムの設計開発をっていきます訪問者訪問先担当者 (Visits) (Employees) 訪問者エントリー画面 3

4 RapidApps でアプリを開発する (2) Web ブラウザーのブックマークから RapidApps を選択し下記 URL の RapidApps Dashboard にアクセスします Open your RapidApps dashboard をクリックし Bluemix の ID でログインします 4

5 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.

6 RapidApps でアプリを開発する (4) Zip ファイルをダウンロードして Excel ファイルを解凍し担当者のデータオブジェクトを作成します RapidApps キャンバスの左メニューの DATA アイコンをクリックし右側に現れる Spreadsheet をクリックしますファイルを選択をクリックし用意した Employees.xls を選択し OBJECT を Employees2 に変更 CREATE OBJECT をチェックして IMPORT ボタンをクリックします 6

RapidApps でアプリを開発する (5) RapidApps キャンバス上に Employees2 のデータオブジェクトが表示されます訪問者情報のデータオブジェクト (Visits) はサンプルアプリ用に Dashboard に事前登録されている Visits をそのまま使用します右側の Add existing object

7 RapidApps でアプリを開発する (5) RapidApps キャンバス上に Employees2 のデータオブジェクトが表示されます訪問者情報のデータオブジェクト (Visits) はサンプルアプリ用に Dashboard に事前登録されている Visits をそのまま使用します右側の Add existing object アイコンをクリックします Object in My Space Visits を選択し NEXT ボタンをクリックします表示されるチェックボックスでは何もチェックせず NEXT ボタンをクリック (Visits にリンクされたデフォルトの Employees が配置される場合は右クリック : Remove で Employees を削除します ) 7

8 RapidApps でアプリを開発する (6) キャンバス上に Visits と Employees2 の 2 つのデータオブジェクトが表示されていることを確認します Visits の host フィールドと Employees2 のタイトル部分をリンクします ( 左下図のようになります ) Visits と Employees2 の関係を HOST == NAME としますこれで訪問者情報 (Visits) の訪問先担当者名 (HOST) と担当者 (Employees2) の名前 (NAME) が関連づけられましたこの関連づけは画面設計の際にそのまま反映されます 8

9 RapidApps でアプリを開発する (7) 訪問者が情報する画を作成してみます左側メニューの SCREENS の + アイコンをクリックします Name として VisitorEntry とし SAVE ボタンをクリックします VisitorEntry のキャンバスに Form をドラッグドロップし Collection として Visits を選択しますキャンバスに Form が配置されます 9

10 RapidApps でアプリを開発する (8) 次に訪問者情報画上に表するフィールドを定義します配置した Form の host フィールド右の虫眼鏡アイコンを右クリックし Properties をクリックしますデータオブジェクトにおいて Visits の host と関係づけをった Employees2 のフィールドが一覧されます LIST VIEW では name と office-phone がチェックされるようにし DETAIL VIEW では building location name office office-phone がチェックされるようにし SAVE ボタンをクリックします 10

11 RapidApps でアプリを開発する (9) 次に訪問者情報のが完了したときに表する画を作成します先ほどと同様に SCREENS の + アイコンでもう 1 画面作成し Name に Success とし SAVE ボタンをクリックします右側の Text アイコンをキャンバスにドラッグドロップし以下のようにします ${Input.Visits.name} さんようこそ IBM XCITE へ! 11

12 RapidApps でアプリを開発する (10) 次に各画面の遷移を定義します Success 画面のキャンバス上に Button アイコンをドラッグドロップし戻るとします戻るボタンを右クリックし Properties をクリックしますナビゲート先として VisitorEntry を選択し SAVE ボタンをクリックします 12

13 RapidApps でアプリを開発する (11) 右上のをクリックし Initial Screen として VisitorEntry をセットして SAVE ボタンをクリックします VisitorEntry 画面の SUBMIT ボタンをダブルクリック後右クリックし Properties を選択しますナビゲート先として Success を選択し SAVE ボタンをクリックします 13

開発したアプリの動作確認をうことができます訪問者の名前 (name) 会社名 (company) をし

14 開発した Kiosk アプリの動作を確認するここまで設計 / 開発した受付システムの動作を確認してみます右上の (Preview) アイコンをクリックするとモバイルブラウザーシミュレーターが起動し開発したアプリの動作確認をうことができます訪問者の名前 (name) 会社名 (company) をし訪問先担当者名 (host) を選択し Submit ボタンをクリックします問題なく Success 画面に推移することを確認します 14

15 Kiosk アプリを変更し確認するここまでの準備ステップで作成した Kiosk アプリを以下のように変更しモバイルブラウザーシミュレーターで動作を確認してください訪問者が Submit したときに訪問先担当者のにメールを送信しメールの本文には訪問者の会社名と名前が明記されるように変更します Step 1 : Employees2 のデータを部修正し分のメールアドレスに変更します Step 2 : LOGIC を追加しメールを送信するように定義します ( 現 BETA 版では古い LOGIC が残って意図しないメールが送信される不具合が確認されていますそれらのメールは無視して自分が定義したメールが送信されることが確認できれば OK です ) 15

16 Employees2 のデータの一部を更新する (1) 右上のをクリックします左側の Objects アイコンをクリックし Employees2 をクリックします 16

17 Employees2 のデータの一部を更新する (2) 社員一覧が表示されるので誰か一人を選びクリックします ( 選択した人の名前を憶えておいてください ) 右側に表されるパネルから分が受信できるメールアドレスに変更します右下にある Save ボタンを押して変更を保存します 17

18 メール送信のロジックを追加する (1) ブラウザのタブを切り替えて元の画に戻ります LOGIC を追加し SendMailToHost という名前を付けて保存します 18

19 メール送信のロジックを追加する (2) Event Type に Data Event を選択し Object Type に Visits を選択します 19

メール送信のロジックを追加する (3) Action Type に Send a Message を選択します送信先に ${input.host.email} メールの Subject に ${input.company} の ${input.

20 メール送信のロジックを追加する (3) Action Type に Send a Message を選択します送信先に ${input.host. } メールの Subject に ${input.company} の ${input.name} 様が来社されました Content に ${input.company} の ${input.name} 様が受付に来られましたと記入します 20 右上のアイコンをクリックして再度シミュレーターを動かします訪問先として先にメールアドレスを変更したを選択し ( 番下までスクロールして ) Submitしますメールが届くのを確認できたら終了です

Microsoft PowerPoint - Tutorial_2_upd.ppt

Microsoft PowerPoint - Tutorial_2_upd.ppt 2 Eclipse を使った Bluemix アプリケーション開発 1 ハンズオン手順ハンズオンの概要 Eclipse から Java アプリをデプロイする公開されているプロジェクトをインポートするインポートしたプロジェクトをBluemixにデプロイするここでは PostgreSQL サービスを提供する ElephantSQL というサービスを使用しますデプロイしたアプリケーションを確認する