OutSystemsのわからないことをまとめるためにOutSystemsで「QA管理システム」を作ってみた。
※過去の記事が version 10.0 での記事だったため、version 11.0 の記事に更新しました！
こんにちは、ソリューション技術部の藤山と山崎と溝井です。
ポルトガル発のローコードプラットフォーム、OutSystems で「QA管理システム」を作ってみます。
画面キャプチャや説明が多いため、前編、中編、後編の３つの記事に分けて紹介します。
この記事は前編です。
説明を抜かせばサクッと開発できるのでぜひ試してみてください。
(週次で中編、後編を更新予定です！)
この記事について
ポルトガル発のローコードプラットフォーム、OutSystems の紹介記事です。
この記事は以下の人を対象にしています。
- OutSystems初心者
- OutSystemsを使いたい人
- OutSystemsをインストールしたけどどう使っていいかわからない人
- エンジニアじゃないけど高速開発してドヤ顔したい人
- OutSystemsがわからないからQAをまとめたい人
OutSystemsって何のこと？って方は以下の記事をどうぞ
内容に入る前に
今回、３つの連載記事で「QA管理システム」を作ります。
まずはどういったシステムができるのか、最初に下記のデモを御覧ください。
https://mizoi-shouma11.outsystemscloud.com/QA/Entry1.aspx?_ts=636903336745077979
※デモなので勝手にデータ入れちゃっても問題ありません。
こんな「QA管理システム」がすぐに作れちゃいます！
はじめに
OutSystemsを使って「QA管理システム」の作成を目指して頑張っていきます！
今回は３つの記事に分けて段階的に作っていきます。
- (前編) データベース作成（前編、この記事で作ります。）
データベースを作成するフェーズ「Entity」、「Entity Diagrams」作成 - (中編) 「質問一覧画面」、「質問作成画面」作成（中編）
簡単にWebアプリ作成を体験してみるフェーズ「Scaffold」での高速開発 - (後編) 「 回答画面」、その他の設定（後編）
「QA管理システム」の完成！
少しだけ「OutSystems」をさわってみたい人は、 1.(前編) と2.(中編) までを作れればなんとなく雰囲気がわかります。
ぜひ、チャレンジしてみてください。
(週次で中編、後編を更新予定です！)
準備
「OutSystems」の準備
1.「OutSystems」アカウントを作成し、アプリをダウンロード＆インストールを行います。
https://www.outsystems.com/home/GetStartedForFree.aspx
※Bluememe様のページにインストール方法がまとまっています。
「Web Application」の作成
「OutSystems」を起動し、まずは「Web Application」の新規Moduleの作成を行いましょう、以下の手順にて行います。
1、アプリケーション作成します。
1.1、Developmentタブから「New Application」をクリックします。
2、作成するアプリケーションのタイプを設定します。
2.1、 「Web App」をクリックします。
2.2、 「Next」をクリックします。
3、テンプレートを設定します。
3.1、「Side Menu」をクリックします。
3.2、 「Next」をクリックします。
4、アプリ名とアイコンの設定します。
4.1、アプリ名を「QA」と記入します。
4.2、アプリ詳細説明に「QA管理表」と記入します。
4.3、任意のアイコンカラーをクリックします。
4.4、「CREATE APP」をクリックします。
5、「QA管理システム」の中身を表示します。
5.1、[CREATE MODULE]をクリックします。
1)、 「QA管理システム」の編集画面に遷移したことを確認します。
開発「Entity」の作成
「Entity」とは
「Entity」とは、ざっくり言うとデータベースのテーブルのことです。
ここでは、「QA管理システム」で使う「Entity」を作成し、ER図にあたる「Entity Diagrams」を作成します。
この作業だけでモジュールが参照するデータベースが完成します！
「Entity」は、２つの種類があります。
- 「Entity」
- 「Static Entity」
「Entity」はテーブル定義にあたり、「Static Entity」はテーブルに紐づく特定の値のEnum(列挙型)定義にあたります。
※「Static Entity」は特定の項目「男／女」「オープン／解決／クローズ」などあらかじめ決まった内容についてのデータを管理するために使います。
「QA管理システム」でのテーブル定義
「QA管理システム」では、下記の３つの「Entity」を作成します。
- 「質問ステータス」(Static Entity)
- 「質問」(Entity)
- 「回答」(Entity)
下記が作成予定の「Entity Diagrams」(ER図)です。
「質問ステータス」(Static Entity)の作成
1、質問のステータス管理の「Static Entity」を作成します。
1.1、画面右上の[Data]をクリックします。
1.2、[QADataModel]をダブルクリックします。
1.3、 画面中央の指示通り右クリックします。
1.4、 表示されたメニューから[Add Static Entity]をクリックします。
を行うことで質問のステータス管理の「Static Entity」を作成します。
2、「質問ステータス」(QuestionStatus)を作成します。
2.1、[Name]に「QuestionStatus」と記入します。
2.2、[New]のアイコンを三度クリックします。
2.6、[Record3]の項目に「クローズ」と記入します。
2.7、[CLOSE]をクリックします。
3、「質問」(Question)を作成します。
3.1、 画面中央に右クリックします。
3.2、表示されたメニューから[Add Entity]をクリックします。
4、「質問」(Question)に「質問ステータスID」(QuestionStatusId)を作成します。
4.1、[Name]に「Question」と記入します。
4.2、[New]のアイコンをクリックします。
4.3、画面下部の[Name]の項目に「QuestionStatusId」と記入します。
4.4、[Data Type]に「QuestionStatus Identifier」と予測変換していることを確認します。
5、「質問」(Question)に「Title」を作成します。
5.1、[New]のアイコンをクリックします。
5.2、画面下部の[Name]の項目に「Title」と記入します。
6、「質問」(Question)に「Message」を作成します。
6.1、[New]のアイコンをクリックします。
6.2、画面下部の[Name]の項目に「Message」と記入します。
6.3、[Length]の項目に「2000」と記入します。
7、「質問」(Question)に「UpdateDateTime」を追加します。
7.1、[New]のアイコンをクリックします。
7.2、画面下部の[Name]の項目に「UpdateDateTime」と記入します。
7.3、[Data Type]に「Date Time」と予測変換していることを確認します。
※お気づきかもしれませんが、OutSystemsは項目の名前によってData Typeを予測変換しています。これについてはまた別の記事で記載する予定です。
8、「回答」(Answer)の「Entity」を作成します。
8.1、作成前に名前の入力だけで、Entityが紐づいていることを確認します。
8.2、画面中央に右クリックします。
8.3、表示されたメニューから[Add Entity]をクリックします。
8.4、[CLOSE]をクリックします。
9、「回答」(Answer)を作成します。
9.1、[Name]に「Answer」と記入します。
9.2、[New]のアイコンをクリックします。
9.3、画面下部の[Name]の項目に「QuestionId」と記入します。
9.4、[Data Type]に「Questions Identifier」と予測変換していることを確認します。
10、「回答」(Answer)に「Message」を作成します。
10.1、[New]のアイコンをクリックします。
10.2、画面下部の[Name]の項目に「Message」と記入します。
10.3、[Length]の項目に「2000」と記入します。
10.4、[CLOSE]をクリックします。
11、作成した「Entity Diagrams」が以下のようなER図が表示されていることを確認します 。
以上で必要な、テーブル定義（「Entity」、「Static Entity」）の作成が完了しました。
前編まとめ
ここまでで「Entity」、「Static Entity」を追加する事でデータベース定義を作成することが出来ました。
これだけでシステムが利用するデータベースに関する作業は全て完了です。
データベースを作ったら、あとは画面設計です！
ぜひ続けて次の記事で「質問一覧画面」、「質問作成画面」を作っちゃいましょう！
