LINEで注文システム作ってみた

皆さんこんにちは、たんてぃです。はじめてのQiita投稿ですが、頑張って書いていこうと思います。２年くらい前に思いついたシステムをLINE botで作ってるんですが、先に同じようなことやってる企業があって、まねされるとか思ってるような段階でもないなって思ったんでシステムの内容とコードを公開しちゃおうかと思います！

僕が作ったシステム

僕が作っているのはたまにレストランに置いてある注文用のタブレットの代わりにお客さんのスマホから注文ができるようにするシステムです。
このシステムのいいところはタブレットを店側で用意する必要がないので、初期導入費用が抑えられることです。
通常だと注文用のタブレットって大型のチェーン店でしか導入されていなくて、個人経営の店で注文システムが導入されているところはほとんどありません。それはレストランのような飲食店では支出が多いため設備投資に回せる資金が集まりにくく、タブレットが買えないからだと考えています。
これはシステムの概要です。

お客さんはスマホから注文をLINEで送信します。その注文を集計して厨房から注文リストを確認しながら料理を作り、お客さんに届けます。会計の際には注文リストを元にレシートを作成します。

開発手順

どうやって作るか調べる

作るものは決まっていましたが、LINE botを作ったことはおろかサーバーを使ったシステムを作ったこともなかったのでとりあえずLINE botの設定をググって調べてLINE公式アカウントを作成しました。

アカウント作成の参考にしたブログ↓
LINEのBot開発超入門（前編）ゼロから応答ができるまで

このままコーディングまでこのブログを参考にしながら作っちゃおうかと思ったんですが、Herokuって何？って思って調べてみたんですが、よくわかんなかったんで別の方法を探していたらGASというものを見つけました。

こんなサイト↓
GASを用いたサーバーレスで作るLINEbot

GASはGoogle Apps Scriptの略でGoogle Spread Sheetから開いて直接コードを打ち込めばプログラムができるので環境構築とかしなくてよかったので初心者にとっては簡単だろうなと思いました。

必要な機能の実装

開発環境は整ったのでこのシステムに必要な機能を実装していきます。ちなみに僕は↑このイラストと同じ格好で作業してることが多いです。

ユーザーのメッセージを受信

受信内容に合わせてSpread Sheetに入力

送信メッセージを作成

メッセージを送信

必要な機能は大きく分けるとこの４つなのでこれらを含んだソースコードをネットで検索してお手本にしました。

メッセージの受信と送信メッセージ作成のお手本にしたブログ↓
Google Apps ScriptでLINE BOTつくったら30分で動かせた件

Spread Sheetの操作のお手本にしたブログ↓
【GAS】スプレッドシートの値をスクリプトから操作するぞ
Spread Sheetの操作は他にもいろんなブログを見ながら作ったんですが、履歴が残ってないので１つだけ紹介してます。

送信メッセージ作成の参考にしたブログ↓
JavaScriptの文字列操作（置換・連結・検索・比較など）を徹底解説！

僕はJavascriptは書いたことがないので、自分で考えて書き換えるというよりはネット上に転がっているコードを切り貼りしながら自分が作りたいものに必要な機能を備えていく方法を取りました。自分が知らない言語で何か作りたいときはこのように、作りたいものの部品をネットに転がってるコードから取り出してきて組み合わせるのがおすすめです。
実際に僕が書いたコードが見たい人は下のリンクから確認してください。↓
実際に書いたコード

テスト

ある程度機能が書けたら実際にスマホを使ってテストしていきます。僕は機能の追加や変更があるたびに毎回テストしてます。テストといってもスマホから何回か入力するだけですが、これで課題抽出しながら書けるので完成度も高くなるし、次にすることを確認できるので作りやすいです。また何かを作っていると実感しやすいので、何らかの出力ができるようになればそこからはテストしながらコーディングすることをおすすめします。
テストの様子↓

実際に作ったシステム

僕が作っているシステムのリンクを張り付けてます。ぜひ試して遊んでみてください。
システムの説明書
 システムのLINEアカウント

LINE botで注文システム作ってみました！