【AppSheet開発事例】買い物用のメモアプリを作ったよ

使用するテーブルを選んで、一旦UXを設定します。#

まず、AppSheetのホーム画面から、「Start with your own data」をクリックします。

こんな感じで入力して、Choose your dataをクリックします。

データを格納するシートを選んで、こんな画面になるので待ちます。

設定画面に遷移します。そして、そこからUXを設定しました。

まず、「買い物リスト」を作りました。既にカートに入っている「In the cart」の品物と、まだ入っていない「yet」の品物でグループ分けしています。

「Data」の「View Columns」で、Yes/Noに対応する値を、任意で設定できます。

ビュー上の「Enable QuickEdit」をONにします。これをすることで、カートに品物を入れたら、「カゴ」の列にチェックを入れるのが楽になります。（まだ、ベータ版っぽいですが使えるかもです。これから使い勝手が良くなるんですかね！？）

そして、「買い物袋」のUXはこんな感じです。

カートの中にある物がレジ袋に入るのかを知りたい。#

上記で挙げた「買い物袋」のビューは、カートの中にある物がレジ袋に入るのかを知りたいために作りました。あとどれぐらい買い物袋にサイズが大きい品物が入るのかだったり、どれぐらい買い物袋のサイズを超過しているのかを可視化しました。

このUXを表現するのは少し苦労しました。

可視化した方法としては、まず「カゴ確認」のカラムを追加しました。

なぜ追加したのかというと、カゴにあるかどうかは、別の「カゴ」のカラムで入力させているのですが、そのカラムは上記の見出しのようにYes/Noの２通りで入力するので、AppSheet上だと棒グラフを２本しか表示できません。

表示したい棒グラフは４本なので、４通りデータがあるカラムを追加する必要があったのです。そのカラムが「カゴ確認」です。そして、「3円のレジ袋」と「5円のレジ袋」のレコードも追加して、AppSheetの表示方法に沿う形にしました。

ビューの設定はこのようにしています。（買い物リスト）

ビューの設定はこのようにしています。（買い物袋）