完成アプリを見て、今日作るものを理解する
この時間でやること
この授業では、学校祭やイベントで使えるグッズ販売POSアプリを作ります。
POSアプリとは、かんたんに言うと「レジアプリ」です。
商品を選んで、カートに入れて、受け取ったお金を入力して、会計を完了するアプリです。
今回作るアプリでは、会計が終わると自動でスプレッドシートに記録されます。
さらに、在庫も減ります。
販売履歴も残ります。
売上分析も見られます。
つまり、ただの画面ではなく、実際にイベントで使える業務アプリを作ります。
今日作るアプリの完成イメージ
完成すると、次のような画面が使えるようになります。
販売
在庫
履歴
分析
左側、または上側にメニューがあります。
それぞれの役割はこのようになっています。
| メニュー | できること |
|---|---|
| 販売 | 商品を選んで会計する |
| 在庫 | 商品の残り数を確認・調整する |
| 履歴 | 過去の注文を見る・取消する |
| 分析 | 売上や販売数を見る |
この4つがあるだけで、かなり本格的なアプリに見えます。
でも、最初から全部を理解しなくて大丈夫です。
今日はまず、完成品を動かして、全体の流れをつかむことが目的です。
このアプリでできること
このアプリでは、次のことができます。
| できること | 内容 |
|---|---|
| 商品を表示する | Tシャツ、トートバッグ、キーホルダーなどを表示 |
| カートに入れる | 商品を選んで注文に追加 |
| 数量を変更する | ＋ボタン、−ボタンで個数を変更 |
| 現金決済する | 受取金額を入力して会計 |
| お釣りを表示する | 注文合計から自動計算 |
| 注文番号を出す | 会計ごとに注文番号を作成 |
| 在庫を減らす | 売れた分だけ自動で在庫が減る |
| 販売履歴を見る | 過去の注文を確認 |
| 注文を取消する | 間違えた注文を取消して在庫を戻す |
| 売上を見る | 総売上、注文件数、販売点数を確認 |
ここまでできると、かなり「実務アプリ」に近いです。
まずは操作の流れを見てみよう
完成アプリでは、販売の流れはこのようになります。
商品を選ぶ
↓
カートに入れる
↓
受取金額を入力する
↓
販売担当者を入力する
↓
現金決済を確定する
↓
注文番号が表示される
↓
スプレッドシートに保存される
↓
在庫が減る
↓
売上分析に反映される
ここで大切なのは、画面で操作したことが、裏側のスプレッドシートに残るということです。
普段使っているアプリも、ほとんど同じです。
たとえば、ネットショップで商品を買うと、注文履歴が残ります。
コンビニのレジでも、売上や在庫の情報が裏側に残っています。
今回のアプリは、その小さな版です。
画面は index.html が作っています
今回のアプリには、主に2つのファイルがあります。
index.html
Code.gs
まず、index.html は画面を作るファイルです。
たとえば、次のような部分があります。
<h1 class="page-title">グッズ販売受付</h1>
これは、画面に表示されるタイトルです。
アプリ上では、
グッズ販売受付
と表示されます。
つまり、index.html の中には、画面に見える文字やボタン、レイアウトが入っています。
Code.gs は裏側の処理をしています
Code.gs は、裏側で動く処理です。
たとえば、次のようなことをしています。
商品を読み込む
注文を保存する
在庫を減らす
販売履歴を取得する
売上を集計する
画面には直接見えませんが、アプリを動かすためにとても大事な部分です。
イメージはこうです。
index.html
見える部分
Code.gs
裏側で働く部分
スプレッドシート
データを保存する場所
スプレッドシートはデータベースの代わり
今回のアプリでは、Googleスプレッドシートをデータの保存場所として使います。
難しい言い方をすると「データベース」の代わりです。
でも、今はこう覚えれば大丈夫です。
スプレッドシート = アプリの記録ノート
このアプリでは、次のようなシートが使われます。
| シート名 | 保存するもの |
|---|---|
| 商品マスタ | 商品名、価格、在庫 |
| 注文サマリー | 注文ごとの合計金額 |
| 販売明細 | どの商品が何個売れたか |
| 在庫調整履歴 | 在庫を変更した記録 |
| 取消履歴 | 注文を取消した記録 |
| 設定 | イベント名など |
販売したら、ここにデータが自動で入ります。
手で入力しなくても記録されるのが、このアプリの便利なところです。
この授業で大事にすること
この授業では、最初からコードを全部理解しようとしなくて大丈夫です。
大事なのは、この順番です。
まず動かす
↓
何が起きているか見る
↓
少しだけ変えてみる
↓
自分のアプリに近づける
プログラミングが苦手な人でも大丈夫です。
最初は、完成コードをコピペします。
そこから、商品名やタイトルを少しずつ変えていきます。
「全部作れるようになる」よりも、まずは、動くアプリを自分で持つことを目指します。
今日のゴール
この第1節では、まだコードは貼り付けません。
まずは、今日作るアプリのイメージをつかみます。
今日のゴールはこれです。
今日作るものが何か分かる
販売・在庫・履歴・分析の役割が分かる
index.html と Code.gs の違いが少し分かる
スプレッドシートにデータが保存されると分かる
ここまで分かれば十分です。
画面で見るポイント
先生の完成デモを見るときは、次の4つだけ見てください。
| 見る場所 | 見るポイント |
|---|---|
| 販売画面 | 商品がカードで並んでいる |
| カート | 商品を入れると合計金額が変わる |
| 在庫画面 | 商品ごとの残り数が見える |
| 分析画面 | 売上や販売数が見える |
全部を覚えなくて大丈夫です。
まずは、
あ、レジっぽい
あ、在庫も動くんだ
あ、売上も見えるんだ
くらいでOKです。
ミニ確認
次の質問に、心の中で答えてみましょう。
Q1. このアプリは何をするアプリですか？
回答
イベントや学校祭で、グッズ販売をするためのレジアプリです。
Q2. 注文が終わると、どこに記録されますか？
回答
Googleスプレッドシートに記録されます。
Q3. index.html は何を担当しますか？
回答
画面の表示を担当します。
商品カード、カート、ボタン、メニューなどを表示します。
Q4. Code.gs は何を担当しますか？
回答
裏側の処理を担当します。
注文保存、在庫更新、履歴取得、売上集計などを行います。
まとめ
このアプリは、ただ商品を表示するだけではありません。
売る
記録する
在庫を減らす
履歴を見る
売上を分析する
ここまでできるアプリです。
最初はむずかしく見えるかもしれません。
でも、今日の進め方は「完成コードを貼る → 動かす → 少し変える」です。
全部を最初から書けなくても大丈夫です。
まずは、動くものを作りましょう。
動いたあとに少しずつ分かっていけばOKです。