はじめての OutSystems OutSystemsってなにができるの？ Taiji Eddie Hagino Lead Community Manager, Developer Advocate @ OutSystems

2 萩野たいじ (Taiji Eddie Hagino) @taiponrock Please follow me! My books for programming: “はじめてのNode-RED”, “Node-RED活用マニュアル” (工学社) “Practical Node-RED Programming” (Packt Publishing), etc. My books for developer relations: “開発者向けマーケティング DevRel Q&A”, “英語で広がる開発者のキャリア ” (Impress R&D), etc. Lecturer, University of Tsukuba Lead Community Manager, Developer Advocate - APAC

3 Agenda 1. OutSystemsでかんたんアプリ作成 2. データモデル・ER図の作成 3. パーツの配置、図の表示、ハイパーリンクの設置 4. ボタンアクションの作成 5. REST APIの呼び出し

4 OutSystemsの無料アカウント https://outsyste.ms/osugtokyo20220323

5 OutSystemsでかんたんアプリ作成

OutSystemsでかんたんアプリ作成 5分チュートリアルで学んでみよう！ 6

OutSystemsでかんたんアプリ作成 1. New Applicationを選択 2. From scratchを選択 3. Phone Appを選択 4. 任意のアプリ名を入力しCreate Appをクリック 5. ModulesからCreate Moduleをクリック 6. Dataタブを選択 7. Entitiesを右クリックしImport New Entities from Excelを選択 8. あらかじめダウンロードしたサンプルデータのExcelを選択 9. 作成されたTask EntityをMainFlowエリアへドラッグドロップ 10. Publishボタンをクリック 7

8 OutSystemsでかんたんアプリ作成

9 データモデル・ER図の作成

データモデル・ER図の作成 10 1. Dataタブを選択 2. Databaseを右クリックし、Add Entityを選択 3. Entity名に「Employee」を指定 4. デフォルトでIDアトリビュートは作成されているので残りのアトリビュートを追加（Name, Birthday, Address, Tell, Note） 5. 同様に「Division」という名でEntityを作成し Division Name アトリビュートを追加 6. Dataタブ配下、Entity DiagramsのData Modelを選択 7. EmployeeとDivisionのEntityをData Modelエリアへドラッグドロップ 8. Employee Entityに DivisionId というアトリビュートを追加 9. 自動でリレーションが貼られることを確認

データモデル・ER図の作成 11

12 パーツの配置、図の表示、 ハイパーリンクの設置

パーツの配置、図の表示、ハイパーリンクの設置 13 1. ウィジェットパネルからScreenをワークスペースへドラッグドロップ 2. アプリの見出しに「自己紹介」と設定 3. ウィジェットパネルからコンテナを使ってレイアウト枠を確保 4. 上からImage、テキスト、Input、ボタンをそれぞれ配置 5. Imageには自分のコンピューターから画像を読み込み 6. テキストには自分の名前を設定 7. ボタンはダブルクリックしてOnClickアクションを追加 8. テキストの自分の名前に任意のハイパーリンクを設置

パーツの配置、図の表示、ハイパーリンクの設置 14

15 ボタンアクションの作成

ボタンアクションの作成 16 1. 画面エディタ上でボタンをダブルクリックする 2. アクションフローが開くので任意の処理を追加する（ここではAssign） 3. AssignのプロパティにてValuableにTextVarを指定 a. TextVarは画面作成時にInputウィジェットに割り当てたオブジェクト 4. Valueにリテラル文字列を設定（ここでは"データを表示したよ"）

ボタンアクションの作成 17

18 REST APIの呼び出し

REST APIの呼び出し 19 1. Logicタブに移動し、Integrations配下のRESTを右クリックし、Consume REST API を 選択 2. Add single method を選択し、Continueボタンをクリック 3. Method URLに呼び出すREST APIのURLを入力 *MethodはGETを選択 4. Testボタンをクリックすると、ペーストしたURLが呼び出され、結果がResponse test resultエリアへ出力されるので、Copy to response bodyボタンをクリック 5. Bodyタブへ自動で切り替わり、ResponseエリアにAPIの結果値が設定される 6. Finishボタンをクリックし、LogicタブのRESTの下にメソッドが作成されていることを確認

REST APIの呼び出し 20 1. Screen上に配置したボタンをダブルクリックして、ボタンクリック時の処理を実装 2. アクションフロー画面で、先程作成したREST呼び出しのメソッドをドラッグ a. Assignの前 3. Assignのプロパティで、ValueにExpression Editorを選択 a. Variableには前のステップでTextVarを選択済み 4. Expression EditorでName、Role、TeamをダブルクリックするとValueエリアに値が セットされるので、文字列連結してCloseボタンをクリック ※ 呼び出すAPIに合わせ設定する値は変更してください

REST APIの呼び出し 21

Congratulations 🎉 みなさんは、OutSystems Developerとしてス タートすることができました！ これからOutSystemsを使っていろいろなアプリ を作って、ぜひSNSやコミュニティグループで シェアしてみてくださいね 👋 22

Thanks! Taiji Eddie Hagino Lead Community Manager, Developer Advocate - APAC @taiponrock Please follow me!