写真の撮影と一覧表示機能を実装した
モバイルアプリケーションを作成します。
アプリケーションを新規作成します
アプリケーションに名前を付けて
アイコンをアップロードします。
Camera Pluginを使えるようにします。
データモデルの定義をします。
Entity（テーブル）を作成します。
"PhotoData"という名前にしました。
Entity Attribute （列）を作成します。
ここでは、画像を格納する"Image"と
撮影日時を保持する"DateTime"の、
2つのEntity Attributeを作成します。
ローカルDBを作成します。
サーバー側に作成したデータ定義を
コピーして作成することができます。
まず、一覧画面を作成します。
見栄えの調整をします。
日付の書式があちらの仕様になっているので、
日本でよく使われる形式に変更します
画面左上にアイコンを配置して、
クリックすると撮影画面へ遷移するように
設定します。
撮影画面を作成します。
コンテナ（CSSでいうのような
レイアウト用コンポーネント）を配置し、
中にボタンを配置します。
LocalPhotoData型のローカル変数を作成し
画像が画面上に表示されるように配置します。
”Take Picture”ボタンを押下した時の処理を
作成します。
AIがアシストするので、
左のツールボックスや右のツリーから
アイコンを探してドラッグ＆ドロップする
操作は不要です！
変数や条件式も可能な限り自動的に設定！
Camera Pluginが使えるかどうかをチェックします
チェック結果を判定します
NGならエラーメッセージとエラーコードを表示します
OKならカメラを起動して撮影します
撮影結果を判定します
OKならLocalPhotoData変数の各属性に
値を設定します。
idへの値のセットは不要なので削除し、
DateTimeには現在日時をセットします。
Imageは、AIにより自動設定されています！
データベースに保存します
処理成功のメッセージを表示します。
終了します。
撮影失敗時にはエラーメッセージを表示して
終了します。
これで実装が完了しました。
ビルド・パブリッシュして動作確認しましょう
ここで必要な情報を設定して
iOS/Android用のアプリをビルドできます。
また、左側のメニューから
PWAとして配布する設定を有効化できます
iPhone実機でPWAの動作確認をしてみましょう。
ServiceStudio上で生成されたQRコードを
カメラで読み込むと、PWAを起動できます。
モバイルアプリとして作成しましたが、
ブラウザ上で動作できます。
ブラウザのメニューから「ホーム画面に追加」
を選択すると、ホーム画面にアイコンを配置できます。
アイコンから起動するとブラウザのウィンドウが隠れ,
通常のモバイルアプリに近い
ルック&フィールで利用できます。
いかがでしたか？
