最初のアプリケーションを作る

1. このページで伝える機能

顧客の連絡先を登録し、顧客名で探せるアプリケーションを作ります。標準の登録・検索一覧・詳細画面と、必須チェック・自動採番を一つの例で体験します。

本例は、インストールと初回の起動確認が済んだWagby11環境で、既存のシステムモデルとG_ADMINロールを残して進めます。確認する利用者にこのロールを割り当ててください。

2. Wagby11で実現できること

2.1 アプリケーションを用意する

次の指示例をAIへ伝えて設計情報を作成し、検証・コード生成・起動を行います。標準ポートを使う場合のWeb UIはhttp://localhost:18921です。ログイン後、「顧客管理」の「顧客検索」を開きます。

2.2 手動で生成・起動する場合

AIに起動まで依頼する代わりに、自分でコマンドを実行することもできます。ターミナルを2つ使います。ターミナルは、文字でコマンドを入力してプログラムを動かす画面です。WindowsではPowerShell、macOSでは「ターミナル」などを開きます。

1. 起動中のアプリケーションを停止します。

   Web UIとREST APIを起動した各ターミナルでCtrl + Cを押します。停止してコマンドを入力できる状態に戻ったことを確認してください。

2. ターミナル①で生成し、REST APIを起動します。

   Wagby11を展開した場所のrestapiフォルダへ移動します。フォルダを移動するコマンドはcdです。例えばcd "Wagby11を展開した場所/restapi"の引用符内を、自分の環境の実際のパスへ置き換えます。次の2つのコマンドを1行ずつ実行してください。

   macOS・Linux	Windows（PowerShell）
   ./generate.sh ./run.sh	.\generate.bat .\run.bat

   generateがエラーなく完了してからrunを実行します。REST APIの起動完了を確認したら、このターミナルは開いたままにします。

3. 別のターミナル②でWeb UIを起動します。

   同じ展開先のweb-uiフォルダへ移動し、次のコマンドを実行します。

   macOS・Linux	Windows（PowerShell）
   ./run.sh	.\run.bat

   起動完了を確認し、このターミナルも開いたままにします。

4. ブラウザーで画面を確認します。

   http://localhost:18921を開いてログインし、「顧客管理」の「顧客検索」へ進みます。ポート番号を変更した環境では、その番号のURLを使います。

2.3 顧客を登録する

1. 顧客の検索一覧で「＋ 新規」を選びます。
2. 顧客名に「サンプル商事」、担当者名に「山田 太郎」、電話番号に「03-1234-5678」を入力します。
3. 「保存」を選びます。

2.4 保存した内容を確認する

保存に成功すると詳細画面が開きます。入力した連絡先と、自動採番された顧客IDを確認します。画像の顧客IDは「1」ですが、すでに登録データがある環境では異なります。

2.5 顧客名で検索する

1. 詳細画面で「検索へ」を選びます。
2. 検索条件の顧客名に「サンプル」を入力します。
3. 「検索」を選び、一覧に「サンプル商事」が表示されることを確認します。

2.6 必須チェックを確かめる

もう一度「＋ 新規」を開き、顧客名を空欄のまま「保存」を選ぶと、「顧客名は必須です。」と表示され、保存できません。確認後はエラー表示を閉じ、「キャンセル」で未保存の入力を終了できます。

外部データベースを使う場合の準備とライセンスの条件は、外部データベースを使う場合を参照してください。

3. AIへの指示例

最小限の指示例

顧客名・担当者名・電話番号を登録し、顧客名で検索できる顧客管理を作ってください。

項目の長さ、必須条件、IDの採番、利用者の権限などは、AIが類推して仕様を補います。画面例と同じ条件に揃えたい場合は、次のように詳細を伝えます。

より詳細な指示例

このWagby11インストールフォルダのREADME.mdとHOWTODEV.mdを読み、開発手順を確認してください。
AppSchemaのguideを読み、必要なreferenceを参照して、顧客管理を標準機能で追加してください。

・モデル名は「顧客」、英語名はCustomerとしてください。
・顧客IDは自動採番する主キーにしてください。
・顧客名は最大100文字で、登録・更新時とも必須にしてください。
・担当者名は最大100文字、電話番号は最大30文字の任意入力にしてください。
・顧客名で検索できるようにしてください。
・一覧には顧客ID、顧客名、担当者名、電話番号をこの順で表示してください。
・標準の登録・検索一覧・詳細・更新・削除を利用できるようにしてください。
・既存のG_ADMINロールへ、登録・参照・更新・削除を許可してください。
・「顧客管理」メニューに「顧客検索」を追加してください。
・既存のシステムモデル・ロール・メニューと、既存の変更を保持してください。

既存のCustomerがある場合は上書きせず、差分を確認して変更してください。
設計情報の検証とコード生成を行い、REST APIとWeb UIを起動してください。
確認する利用者のロールを確認し、架空データの登録・検索・必須チェックを検証してください。
画面に対応する一般利用者向け操作マニュアルも追加し、検証・HTML生成を確認してください。
変更したファイルと確認結果を説明してください。

実際に作業するフォルダをAI開発ツールで指定してから依頼します。この例のロールは学習用です。業務で利用するときは、認証と認可で担当者ごとの許可範囲を検討します。

4. 編集されるAppSchemaの例

通常のautoモードで各ファイルを追加します。ファイルの配置や構文はAIが資料を参照して扱うため、利用者が暗記する必要はありません。

顧客モデル・権限・検索一覧

配置先：designer/repository/appschema/Customer.yaml

entity:
  name: 顧客
  name_en: Customer
  type: M
  attributes:
    - name: 顧客ID
      name_en: customerId
      type: autoid
      pk: true
    - name: 顧客名
      name_en: customerName
      type: string
      length: 100
      validation:
        presence: { create: error, update: error }
    - name: 担当者名
      name_en: contactName
      type: string
      length: 100
    - name: 電話番号
      name_en: telephone
      type: string
      length: 30
    - name: バージョン
      name_en: version
      type: number
      hidden: true
      reserved: true
permissions:
  - role: G_ADMIN
    crud: [C, R, U, D]
functions:
  - description: 顧客検索
    filter:
      - name_en: customerName
    list:
      - name_en: customerId
      - name_en: customerName
      - name_en: contactName
      - name_en: telephone
ui:
  enabled: true

validation.presenceが必須チェック、permissionsが操作権限、functionsが検索条件と一覧表示、ui.enabledが標準画面の利用を表します。versionは更新時の競合検出に使う内部項目です。

実際の設計情報には固定識別子migration_idが付与されますが、ここでは省略しています。目的と手動編集時の注意点はモデル・項目の固定IDを参照してください。

顧客検索へのメニュー

配置先：designer/repository/menus/customer-menu.yaml

id: customer-menu
order: 10000
title_key: menu.customer.title
children:
  - kind: item
    id: customer-search
    order: 10000
    title_key: menu.customer.search
    target: { kind: entity, entity: Customer, screen: search }

配置先：designer/repository/menus/customer-menu.properties

menu.customer.title=顧客管理
menu.customer.search=顧客検索

メニューもファイルを追加することで読み込まれます。この例はG_ADMINを持つ利用者で確認します。モデルを追加するだけではメニューの入口は作られないため、メニュー定義も用意しています。

一般利用者向け操作マニュアルは、プロダクトツアー・操作マニュアルで扱います。

5. 参考資料

guide：最小アプリケーション構成

designer/docs/appschema/html/guide/01-project/03-minimum-application.html

guide：モデルを作成する

designer/docs/appschema/html/guide/03-model/01-create-model.html

guide：登録・更新の必須チェック

designer/docs/appschema/html/guide/04-validation/01-required.html

reference：entity

designer/docs/appschema/html/reference/06-entity.html

reference：permissions

designer/docs/appschema/html/reference/07-permissions.html

reference：functions

designer/docs/appschema/html/reference/09-functions.html

reference：menus

designer/docs/appschema/html/reference/13-menus.html

reference：固定識別子

designer/docs/appschema/html/reference/06-entity.html