Veleta WebアプリからVeletaで生成したAPIのデータを取得・更新する

Veletaで生成したAPIに対してデータの取得や更新ができるWebアプリの実行方法や操作方法を解説します。

この記事ではVeletaで生成されたAPIに対して、データの取得・更新を行うWebアプリケーション(Webクライアント)の実行方法および基本的な操作方法について解説します。VeletaのWebクライアント生成機能を利用することで、APIの定義からUIを持つアプリケーションを立ち上げ、データ操作を視覚的に行うことが可能になります。

 

Webアプリ(Webクライアント)の生成と実行

1. まずは、「API生成」ボタンを押してVeletaのAPIとWebアプリを生成します。

veleta-client-generate-api
2. 生成が完了したら、ダウンロードボタンからAPIとWebアプリのコンテナイメージをそれぞれダウンロードします。

veleta-client-download
3. zipファイルがダウンロードできるので、zipファイルを解凍してtarファイルを取り出しDockerイメージとして読み込みます。

// zipファイルを解凍する
$ unzip sampleapi.tar.zip
$ unzip sampleapi-client.tar.zip

// 解凍されたファイル一覧
$ ls
sampleapi.tar // APIのコンテナイメージ
sampleapi-client.tar // Webアプリのコンテナイメージ
docker-compose.yml // コンテナ起動用設定ファイル


// API, Webアプリをコンテナイメージとして読み込む
$ docker load < sampleapi.tar
$ docker load < sampleapi-client.tar

4. docker-compose.ymlの環境変数DSNを設定します。DSNについてはこちらの記事の環境変数 > DSNの項目を参考ください。

veleta-client-dsn

5. docker-compose upまたはdocker compose upコマンドを実行することでWebアプリが実行できます。

veleta-client-top

データの一覧表示と検索

トップページからテーブル名を選択するとデータの検索画面に移動できます。

この画面では検索条件を指定してヒットしたデータを一覧にできます。また、検索条件を指定しなかった場合はすべてのデータを一覧できます。

veleta-client-select

データの新規作成

検索画面の「新規作成」ボタンを押すとデータの登録画面に移動できます。

フォームに値を入力して「作成」ボタンを押すとテーブルにデータを登録します。

veleta-client-create

データの更新・削除

データ一覧の右側にあるエンピツアイコンから編集画面に移動できます。

編集画面ではデータの更新や削除が実行できます。

veleta-client-select2

veleta-client-edit