ForgeVision Engineer Blog

フォージビジョン エンジニア ブログ

OutSystemsを始めよう! 「QA管理システム」を作ってみた②【中編 ~「Scaffold」高速開発~】

高速開発「scaffold」で質問一覧画面、質問登録画面を作る。

f:id:fv_yamazaki:20180823102800j:plain

こんにちは、ソリューション技術部の藤山と山崎です。

ポルトガル発のローコードプラットフォーム、OutSystems で「QA管理システム」を作ってみます。
画面キャプチャや説明が多いため、前編、中編、後編の3つの記事に分けて紹介します。

この記事は中編です。

説明を抜かせばサクッと開発できるのでぜひ試してみてください。

この記事について

前編に続き、「scaffold」で簡単に画面作成とアプリの動作確認体験して行きたいと思います。

この記事は、続きの記事です。 前回の記事からの「Entity」を作成していない人は以下の記事からをどうぞ

techblog.forgevision.com

 
 

OutSystemsって何のこと?って方は以下の記事をどうぞ

techblog.forgevision.com


「scaffold」とは

「scaffold」はざっくり言うと、何かのトリガーでデータやテーブルなどを自動で生成してくれる機能です。
Ruby on RailsCakePHPでもある機能ですね。
「OutSystems」では、「Entity」から画面やSQLを自動生成してくれます。
前の記事でも簡単に紹介しました。
([内容に入る前に....]の動画の部分)

techblog.forgevision.com

「scaffold」を使えば簡単な画面ならすぐに作ることができます!

「scaffold」高速開発

質問一覧画面、質問登録画面の作成

今回は以下の手順にて簡単に、作成済み「Entity」から簡単に一覧、登録画面を作成します。

  1. 「MainFlow」を表示させます。

    f:id:fv_yamazaki:20180813165113p:plain
    画面作成2-1

  2. ドラック&ドロップにて、一覧、登録画面を作成します。
    必ず2回ドラック&ドロップしてください!

    f:id:fv_yamazaki:20180813165116p:plain
    画面作成2-2

  3. 「Questions」、「QuestionDetail」が作成されている事を確認します。

    f:id:fv_yamazaki:20180813165119p:plain
    画面作成2-3
    ※これ、何が起こっているかというと…
    ①一回目のドラック&ドロップ:
     OutSystemsが「テーブルを画面に挿入したいってことは、一覧画面を作るんだなー」と自動認識して一覧画面を作ってくれてます
    ②二回目のドラック&ドロップ:
     OutSystemsが「一覧画面はもうあるから、次は登録編集画面を作るんだなー」と自動認識して登録編集画面を作ってくれてます
    この短い間に一覧画面と登録編集画面のロジック、レイアウトができています!デプロイ後を楽しみにしましょう!

  4. トップページを「Questions」に変更します。 「Home」から「HomeScreen」へ向かっている矢印の先を選択して「Questions」へドラック&ドロップで向き先を変更します。

    f:id:fv_yamazaki:20180815134523p:plain
    画面作成2-4

質問一覧画面、質問登録画面のアクセス権限変更

  1. 「Questions」の権限を変更します。

    f:id:fv_yamazaki:20180815140629p:plain
    画面作成2-5
    ※この設定でだれでもログインできるようになります。
     これを設定しない場合、ユーザログインが必要になります。

  2. 「QuestionDetail」の権限を変更します。

    f:id:fv_yamazaki:20180815141207p:plain
    画面作成2-6

動作確認

  1. 「1-Click Publish」ボタンを押下し、開発環境にPublishします。

    f:id:fv_yamazaki:20180815141946p:plain
    画面作成2-7
    ※この「1-Click Publish」で、コード生成、デプロイまでの処理を行ってくれます。ボタン一つで質問一覧画面(Questions)、質問登録画面(QuestionDetail)が作成できました!すごい早い!

  2. 「Open in Browser」ボタンを押下し、Publish済みのアプリを表示します。

    f:id:fv_yamazaki:20180815142003p:plain
    画面作成2-8

  3. ブラウザーにて「Questions」画面が表示されれば完了です。これだけの作業で検索、ソート、登録、編集まで出来てしまいます!

    f:id:fv_yamazaki:20180815142023p:plain
    画面作成2-9

f:id:fv_yamazaki:20180822174023p:plain
画面作成2-10

f:id:fv_yamazaki:20180822174045p:plain
画面作成2-11

中編まとめ

ここまでで質問一覧画面(Questions)、質問登録画面(QuestionDetail)をあっという間に作ることができました。この開発のスピード感を体感いただけたでしょうか。
コンテンツが多いので、色々と開発ツールに慣れる時間は必要ですが、ここまでで動作環境の構築等に手を煩わせることなく、簡単にデプロイ&動作確認を行う事が出来たと思います。

次回は回答画面を作成し、「QA管理システム」を完成させます。
皆様もさわってみて「OutSystems」の速さ、面白さが感じられているかと思います。
ぜひぜひ、後編にもにチャレンジしてください!

techblog.forgevision.com