【第5回】.bubbleでアプリ開発してみた

第5回ではDBを作成して、ログインした社員ごとに自分の情報が表示されるように画面の変更を行っていきたいと思います。

データベースの設定

このアプリのデータベースは「社員マスター」と「有給利用情報」の二つのテーブルで構成しようと思います。

社員マスターは、

  • 社員ID
  • 氏名
  • メールアドレス
  • パスワード
  • 入社日
  • 有給付与月
  • 残有給日数
  • 社員種別(社員/管理者)

有給利用情報は、

  • 社員ID
  • 申請日
  • 利用日
  • 有給種別(有給/半休)
  • ステータス(未承認/承認/否認/取消)

とすることにします。

bubbleDB

.BubbleでDBを作成、編集するには画面の左側のデータベースのアイコンをクリックします。

そしてそのアイコンの少し右下にこのアプリに作られているDBテーブルの一覧が表示されています。初期ではUserというデフォルトのテーブルだけ作られている状態になっています。

そしてさらにその右側の方には、そのDBテーブルの項目の一覧が表示されており、その下の「Cteate a new field」から項目を追加していくことができます。DBDEB02

「Cteate a new field」を押して出てきた画面のフィールドに、フィールド名とフィールドのタイプ、この場合は社員IDというフィールド名と数字フォーマットのnumberを指定して新しい項目を追加します。

なお、フィールドタイプの種類には以下のようなものがあります。

  • text 任意の種類の文字を含むことができるテキストの文字列です。
  • number 整数または小数点数を含む数値です。
  • numeric range 低値と高値を含む範囲です。例えば5-10のような範囲です。
  • date 日付と時刻を含みます。
  • date range 日付の範囲です。例えば1970年1月1日から1970年1月15日のような範囲です。
  • date interval 二つの日付の間の差を定量化します。それは日数/時間/分等の間の差です。
  • yes / no 真または偽の値です(ブーリアンとも呼ばれます)。
  • file ファイルのURLです。
  • image 画像ファイルのURLです。
  • geographic address Googleマップ形式の住所です。
  • Data type 設定できる任意のデータタイプもフィールドタイプとして使用できます。

また、これら以外に新しいオプションセットを作成することもできます。

例えば、社員種別として一般社員と管理者が選択できるフィールド、有給休暇の種別として半日休暇と全日休暇が選択できるようなフィールドを使いたい場合です。

DBDEB03

手順は、「New option set」に新しいフィールド名を入力し作成したら、「New option」に項目名を入力し作成をしていくことでOpti0nを無数に作成することができます。

ここでOption setを作成すると、先ほどの新しくフィールドを作成する時のField typeでこのOption setが選択することができます。

一通り、社員マスターの項目を登録した状態が以下の画面です。

DBDEB04

社員ID、氏名、メールアドレス、入社日、有給付与月、残有給日数、社員種別(社員/管理者)が登録されています。また、一つ前のOption Setで作成した社員種別というフィールドも作成されているのがわかります。

データの画面表示

続いて、データベースに登録されている情報をユーザーが見る画面に表示する方法です。今回は社員がログインをするとログインをした社員の氏名や、入社年月日、有給休暇付与月、社歴、残有給日数が表示されるように設定を行います。

第4回で作ったログイン後の画面は以下のようになっています。

従業員画面

この時点では画面の要素の配置やレイアウトを作っただけなので、仮のテキストが配置してある状態になっています。

ここの、従業員の名前や入社年月日などのテキストをログインしたユーザーのDBに登録されている情報を表示するように順番に設定をしていきます。

DBDEB05

従業員の名前というテキストパーツを選択し、プロパティ内に記載されている「従業員の名前」というテキストをダブルクリックすると、すぐ横に「Insert Dynamic Data」というテキストが表示されるのでクリックします。

すると、選択リストが表示されるので「Current User」「’s氏名」と順番に選択することで、ログインをしたユーザーのDBに登録されている「氏名」の値が表示させることができます。

そのほかの、入社年月日などのテキストも全て同様に設定をしていくと上記のようになります。

これでログイン後のデータを表示することができるようになりました。

次回「第6回」では、実際にログインをして表示されることの確認や表示された有給付与月、社歴、残有給日数などの単位を画面に表示するようにするなどの設定、有給休暇の申請の処理などを設定していきたいと思います。