HapInS アドベントカレンダー2023、6日目の記事です。

私が担当の今日は、ノーコード開発AppSheetについて書きました！

はじめに

Googleが運営しているアプリ開発ツールのAppSheetですが、弊社ではありがたいことに開発支援が増えてきており、ナレッジも溜まってきました。

簡単に開発できる上に開発できる幅も広く、どこまでカバーできちゃうんだ！？と思い、今回はPOSレジに挑戦してみました。

結論から言うと、「結構良さそう＆改良の余地もある」という感じです。

完成した動画も併せてご覧ください。

youtu.be

実はAppSheet開発者の中では、POSレジ開発の事例を求めている声を公式フォーラムで多く見かけます。

一部紹介されてはいるものの、あまり広く普及されていないのでもし興味があれば挑戦してみてください。

はじめに
DB設計
UI&UX
- 商品マスタページ
- 購入ページ
RawBTのインストール
- レシート発行アクション
- プリンターのBluetooth接続
さいごに

DB設計

invoice（レシート）

バーチャルカラムには合計金額や小計・税を設定しました。

invoice_detail（レシート明細）

invoice_idとproduct_idはそれぞれRefのデータ型にして、invoiceとproductを紐づけました。

jan（JANコード）にはSCAN?にチェックを入れておきます。

product（商品マスタ）

UI&UX

商品マスタページ

productのテーブルをここで参照します。

もし、商品を増やしたい場合はここからJANコードを読み取って商品の登録/編集/削除を行います。

Addボタンでの画面はこちら、シンプルです。

購入ページ

支払方法と合計・お釣り・お預りがぱっと見えるようにしました。

formはこんな感じ

invoice_detail（明細）をすぐに読み取れるように上部に設定しました。

読み取りが終了したら支払い方法の選択はenum型にして現金とpaypayにしてみました。

paypayの場合はお預り金額が合計金額と一致するようにInitial valueを設定しました。

お釣りは「お預り-合計金額」で自動算出に設定。

少し戻りまして、明細の入力画面は下記の通りです。

「Advance forms automatically」にチェックを入れて、formページにアクセスした際にバーコード読取が自動で開始されるようにカメラが起動されます。

また、明細情報の保存時に再度他の明細も登録したいので、「save」をしたら画面が再度新規のformが立ち上がるように「Auto re-open」にチェックを入れます。

全ての入力が完了したらSAVEを押しますが、そこでも再度invoiceの詳細ページが開くようにFinish viewをinvoiceの詳細ページに設定します。

RawBTのインストール

RawBTはAndroidでESC/POSサーマルプリンタが行えるアプリになっています。

サイト上に特別なタイプのリンクを配置するだけで使用しているスマホに接続されたサーマルプリンタにテキストを印刷してくれます。

レシート発行アクション

上記をAppSheetで使えるようにします。

Actionを設定し、ボタンをクリックしたら「External: go to a website」になるようにします。

Trgetを下記のように設定します。

こんな感じ

"rawbt:"&encodeurl( "○○商店 "&[date]&"

【領収書】

"&index([Related invoice_details][name],1)&" @ "&index([Related invoice_details][unit_price],1)&" * "&index([Related invoice_details][amount],1)&"　　"&index([Related invoice_details][subtotal_price],1)&"

"&ifs(count([Related invoice_details])>=2, index([Related invoice_details][name],2)&" @ "&index([Related invoice_details][unit_price],2)&" * "&index([Related invoice_details][amount],2)&"　　"&index([Related invoice_details][subtotal_price],2))&"

"&ifs(count([Related invoice_details])>=3, index([Related invoice_details][name],3)&" @ "&index([Related invoice_details][unit_price],3)&" * "&index([Related invoice_details][amount],3)&"　　"&index([Related invoice_details][subtotal_price],3))&"

"&ifs(count([Related invoice_details])>=4, index([Related invoice_details][name],4)&" @ "&index([Related invoice_details][unit_price],4)&" * "&index([Related invoice_details][amount],4)&"　　"&index([Related invoice_details][subtotal_price],4))&"

"&ifs(count([Related invoice_details])>=5, index([Related invoice_details][name],5)&" @ "&index([Related invoice_details][unit_price],5)&" * "&index([Related invoice_details][amount],5)&"　　"&index([Related invoice_details][subtotal_price],5))&"

合計："&[total_price]&" 小計："&[subtotal_price]&" (内消費税："&[tax]&"）

お預り："&[cash]&" お釣り："&[change]&"

"毎度ありがとうございます" ○○商店

"

)