OutSystemsを使ってローコードで座席管理システムを作ってみる そのいち

この記事は [リンク情報システム](https://www.lis.co.jp/) の「[2021新春アドベントカレンダー TechConnect!](https://qiita.com/dgkz/private/eabde6515457d8acec9b)」のリレー記事です。
TechConnect! は勝手に始めるアドベントカレンダーとして、engineer.hanzomon という勝手に作ったグループによってリレーされます。
（リンク情報システムのFacebookは[こちら](https://ja-jp.facebook.com/lis.co.jp/)から）

本記事は1日目、1/6(水)分です。

---
昨今の情勢の変化により、弊社でも在宅勤務が増えてきました。また、その流れで座席のフリーアドレス化も進みました。
そうなると「誰が出社してて何処にいるのか」がパッと把握できなくなってきてちょっと困ること（電話対応とか）が増えてきたので、いっちょ座席管理システムでも作ってやろうかと。
普通に作ってもいいんですが今回は[OutSystems](https://www.outsystems.com/ja-jp/)というローコード開発環境でやってやろうと思います。正直よくわかってない。

## OutSystemsの登録
無料のトライアル使ってやりまので、まずは登録から。
OutSystemsのトップページから右上の「無償トライアル」をクリックしてアカウント作ります。
ユーザ名とメールアドレス、パスワードを入力してTry now for free。登録メールアドレス宛に確認メールが届くので認証しておきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284283/45711382-dae2-bb55-5d9c-9da6c9cdf2be.png)
使用用途と会社情報聞かれるので適当に入力。今回は個人利用としておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284283/861706ea-adcc-0b10-1f65-a0d2e3665b18.png)
こんな画面に遷移したら開発ツールのインストーラがDLされます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284283/77e918d2-4b39-97e4-62ee-c05bc589cf4b.png)
あとはインストーラを起動して良しなに進めればOutSystemsが起動します。

## チュートリアルに従ってみる
起動するとチュートリアルが始まるので従ってみます。よくわかんないし。
New Applicationを押せ言われるので押してみる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284283/4e859c46-ffe5-b972-8607-9066f62d3580.png)
Start from scratch
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284283/fdc827c0-c3d5-1a66-45ac-99bad256e077.png)
Phone App
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284283/f904863a-5493-06ce-f5c7-4502a98b76a8.png)
アプリ名を決めます。今回はSeat management system
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284283/bd89cb5e-179e-9916-2896-790a38d8d50e.png)
とりあえずナニカができたらしい。箱ができたのかな。これからこれに詰める部品を作っていく感じか。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284283/17fa6c3b-3431-bd04-2839-5f7d9d31b441.png)

## モジュールを追加してそれっぽくする
上でCREATE MODULEを押せ言われてるし、とりあえずモジュールを作りましょう。
なんか謎の画面が出てきました。ここに右ペインからブツを選んでいくらしい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284283/9d5b14b2-fc56-4974-eec3-28e508f20baa.png)
Entitesを右クリックしてImport New Entities from Excelを選択、あらかじめ用意されてるTasks.xlsxを開く。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284283/7dbcda7a-e7f7-c406-f575-3ad9379893cf.png)
インポートすんのか聞かれるのでIMPORTを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284283/879e3994-4bfa-1bcd-d601-d9bdf0827688.png)
なんか右ペインにTaskが追加されてますね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284283/15d2b4bc-e58d-5571-f2c4-177c6383df53.png)
とりあえずここまでがEntity追加らしい。次はScreen追加だとか。

今作ったTaskをドラッグしてメイン領域に持っていくみたい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284283/030ec4c8-49ae-c253-0348-bec3c94bb2ba.png)
なんか生えました。TaskのScreenをダブルクリックしろとのこと。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284283/1db3b53c-8ac8-31e9-a983-f9cfe53093f6.png)
画面できた。①をクリックして保存、公開しろと。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284283/5810040c-ea1e-7de2-01ec-260403f8d834.png)
どうやらこれでもう出来てるらしい。下に表示されてるURLにアクセスしてみましょう。上のボタン押すとブラウザで開くと。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284283/2042c08e-60ab-943c-3946-99e9e2d936ba.png)
ぽちっとな
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284283/0deaf271-1277-6f68-8d39-6e817b79649e.png)
出ました。ほーほー、Taskの一覧が出ますと。右上の＋押したら追加されるぽい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284283/73310d1a-2fa5-f482-c30e-1545c2806a0c.png)
適当に入れてセーブ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284283/0285789d-a416-0bc8-0011-a817922c84ea.png)
追加されましたね。動いてる動いてる。ボタンポチポチするだけでとりあえずそれっぽい画面が作れますと。いいじゃない。

とりあえず今回はここまで！

---
画面べったべった張ってたら記事が縦になっがーくなったので分割します。~~あと締め切りに間に合わｎ~~
次回は本命の座席管理をやっていきたい所さん。なるはやでやります。出来たらこのページにもインデックス張りますね。

明日は@mefukuさんです。