ForgeVision Engineer Blog

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

OutSystemsを始めよう! 「QA管理システム」を作ってみた①【前編 ~「Entity Diagrams」作成~】

OutSystemsのわからないことをまとめるためにOutSystemsで「QA管理システム」を作ってみた。

f:id:fv_yamazaki:20180823102245j:plain

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

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

この記事は前編です。

説明を抜かせばサクッと開発できるのでぜひ試してみてください。
(週次で中編、後編を更新予定です!)

この記事について

ポルトガル発のローコードプラットフォーム、OutSystems の紹介記事です。

この記事は以下の人を対象にしています。

  • OutSystems初心者
  • OutSystemsを使いたい人
  • OutSystemsをインストールしたけどどう使っていいかわからない人
  • エンジニアじゃないけど高速開発してドヤ顔したい人
  • OutSystemsがわからないからQAをまとめたい人

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

techblog.forgevision.com


内容に入る前に

今回、3つの連載記事で「QA管理システム」を作ります。
まずはどういったシステムができるのか、最初に下記のデモを御覧ください。

Questions

※デモなので勝手にデータ入れちゃっても問題ありません。

こんな「QA管理システム」がすぐに作れちゃいます!

はじめに

OutSystemsを使って「QA管理システム」の作成を目指して頑張っていきます!

今回は3つの記事に分けて段階的に作っていきます。

  1. (前編) データベース作成(前編、この記事で作ります。)
    データベースを作成するフェーズ「Entity」、「Entity Diagrams」作成
  2. (中編) 「質問一覧画面」、「質問作成画面」作成(中編)
    簡単にWebアプリ作成を体験してみるフェーズ「Scaffold」での高速開発
  3. (後編) 「 回答画面」、その他の設定(後編)
    「QA管理システム」の完成!

少しだけ「OutSystems」をさわってみたい人は、 1.(前編) と2.(中編) までを作れればなんとなく雰囲気がわかります。 ぜひ、チャレンジしてみてください。
(週次で中編、後編を更新予定です!)

準備

「OutSystems」の準備

1.「OutSystems」アカウントを作成し、アプリをダウンロード&インストールを行います。

Try OutSystems for free

※Bluememe様のページにインストール方法がまとまっています。

今すぐ無料体験! | OutSystems(日本)

「Web Application」の作成

「OutSystems」を起動し、まずは「Web Application」の新規Moduleの作成を行いましょう、以下の手順にて行います。

1.アプリケーション作成、Developmentタブから「New Application」を選択します。

f:id:fv_yamazaki:20180810150118p:plain
準備1

2.「New Application」のダイアログから「Web App」を選択、「Next」を押下します。

f:id:fv_yamazaki:20180810150122p:plain
準備2

3.次に「Web Application」を選択、「Next」を押下します。

f:id:fv_yamazaki:20180810150126p:plain
準備3

4.今回は以下の様に、アプリ名、アプリ詳細説明、アイコンカラーを入力、選択し、「Next」を押下します。

f:id:fv_yamazaki:20180810150129p:plain
準備4

5.次に「CREATE MODULE」を押下します。

f:id:fv_yamazaki:20180810150132p:plain
準備5

6.これで「QA管理システム」の新規モジュールの作成準備完了です。

f:id:fv_yamazaki:20180810150114p:plain
準備6

開発「Entity」の作成

「Entity」とは

「Entity」とは、ざっくり言うとデータベースのテーブルのことです。

ここでは、「QA管理システム」で使う「Entity」を作成し、ER図にあたる「Entity Diagrams」を作成します。
この作業だけで実際にモジュールが参照するデータベースが完成します!

「Entity」は、2つの種類があります。

  • 「Entity」
  • 「Static Entity」

「Entity」はテーブル定義にあたり、「Static Entity」はテーブルに紐づく特定の値のEnum(列挙型)定義にあたります。
※「Static Entity」は特定の項目「男/女」「オープン/解決/クローズ」などあらかじめ決まった内容についてのデータを管理するために使います。

「QA管理システム」でのテーブル定義

「QA管理システム」では、下記の3つの「Entity」を作成します。

  • 「質問ステータス」(Static Entity)
  • 「質問」(Entity)
  • 「回答」(Entity)

下記が作成予定の「Entity Diagrams」(ER図)です。

f:id:fv_yamazaki:20180903200322p:plain

「質問ステータス」(Static Entity)の作成

1.まずは、質問のステータス管理の「Static Entity」を作成します。

f:id:fv_yamazaki:20180823185535p:plain
Entity作成1

2.「質問ステータス」(Static Entity)として「オープン」、「解決」、「クローズ」を作成します。

f:id:fv_yamazaki:20180810170302p:plain
Entity作成2

3.「質問」(Entity)を作成します。

f:id:fv_yamazaki:20180823185620p:plain
Entity作成3

4.「質問」(Entity)を作成して行きます。作成済みの「質問ステータス」(Static Entity)と紐づける「QuestionStatusId」を追加します。

f:id:fv_yamazaki:20180810175216p:plain
Entity作成4

5.「質問」(Entity)に「Title」を追加します。

f:id:fv_yamazaki:20180810175222p:plain
Entity作成5

6.「質問」(Entity)に「Message」を追加します。最大サイズを2000に変更します。

f:id:fv_yamazaki:20180810175225p:plain
Entity作成6

7.「質問」(Entity)に「UpdateDateTime」を追加します。

f:id:fv_yamazaki:20180810175229p:plain
Entity作成7

※お気づきかもしれませんが、OutSystemsは項目の名前によってData Typeを予測変換しています。これについてはまた別の記事で記載する予定です。

8.今のDataModelのキャプチャ:ここまでで、こんな画面が表示されます。名前の入力だけで、Entityが紐づいているのがわかりますね。OutSystemsはネーミングルールによりEntityを紐づけることができます。

f:id:fv_yamazaki:20180823185855p:plain
Entity作成8

9.「回答」(Entity)を作成して行きます。さきほどの3. と同じようにEntityを追加します。
 作成済みの「質問」(Entity)と紐づける「QuestionId」を追加します。

f:id:fv_yamazaki:20180810184228p:plain
Entity作成9

10.「回答」(Entity)に「Message」を追加します。最大サイズを2000に変更します。

f:id:fv_yamazaki:20180810184015p:plain
Entity作成10

11.「Entity Diagrams」の作成完了です。画面に下記のようなER図が表示されていると思います。

f:id:fv_yamazaki:20180810184619p:plain
Entity作成11

以上で必要な、テーブル定義(「Entity」、「Static Entity」)の作成が完了しました。

前編まとめ

ここまでで「Entity」、「Static Entity」を追加する事でデータベース定義を作成することが出来ました。
これだけでシステムが利用するデータベースに関する作業は全て完了です。
データベースを作ったら、あとは画面設計です!

ぜひ続けて次の記事で「質問一覧画面」、「質問作成画面」を作っちゃいましょう!

techblog.forgevision.com