どんな事にチャレンジしたのか紹介
飲食店でのテイクアウトの自動化にチャレンジ
オンライン注文をより便利なものに。
今回私の考えた便利なものとは
1.LINEからもWEBからも予約が出来る
2.予約情報は一元管理されている
3.LINEで過去の予約状況を照会
上記の３工程
これをvue.js・node.js・Firebase・LINE Messaging APIを使って完全自動化！にチャレンジしました。
完成品フロー
webアプリ
LINEbot
環境
・Visual Studio Code
・Firebasehttps://firebase.google.com/
・Vue.js
・node.js
下準備
Firebaseでデータベースを構築
アプリ新規作成でSDKを発行し、データベースを構築
Firebaseでのデータベース構築方法は別記事に書きました↓↓
Firebase CloudFirestoreの使い方を初心者が解説してみた
作成したコレクションは【takeout】
ドキュメントは
・利用日
・名前
・メールアドレス
・電話番号
・商品名
・コメント
LINE Messaging API作成
LINE Messaging APIを1つ作成
・チャンネルアクセストークン
・シークレット
取得
レシピ
Visual Studio Codeで作業を進めました。
Vue.jsを使ってwebアプリ側を作成
htmlファイルを作成し、FirebaseのSDK名とコレクション名を入力します。
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>予約入力フォーム</title></head><body><divid="app"><p>商品サービス：<inputv-model="service"placeholder="サービス"><br>名前：
<inputv-model="name"placeholder="名前"><br>メールアドレス： <inputv-model="mail"placeholder="test@test.com"><br>電話番号： <inputv-model="tel"placeholder="090xxxxxxxx"><br>利用日時： <inputv-model="date"placeholder="2020年12月20日"><br>コメント： <inputv-model="message"placeholder="自由テキスト入力欄"><br><buttonv-on:click='post'>送信</button></p></div><scriptsrc="https://unpkg.com/vue"></script><scriptsrc="https://www.gstatic.com/firebasejs/7.2.3/firebase-app.js"></script><scriptsrc="https://www.gstatic.com/firebasejs/7.2.3/firebase-firestore.js"></script><script>// Your web app's Firebase configurationconstfirebaseConfig={apiKey:"ForebaseSDKを入力します",authDomain:"ForebaseSDKを入力します",projectId:"ForebaseSDKを入力します",storageBucket:"ForebaseSDKを入力します",messagingSenderId:"ForebaseSDKを入力します",appId:"ForebaseSDKを入力します",measurementId:"ForebaseSDKを入力します"};// Initialize Firebasefirebase.initializeApp(firebaseConfig);constdb=firebase.firestore();constapp=newVue({el:'#app',data:{allData:[],service:'',name:'',mail:'',tel:'',date:'',message:''},mounted:asyncfunction(){db.collection('takeout').onSnapshot(snapshot=>{// データベースに変更があった場合実行されるconsole.log('on snapshot!');// 更新されたデータだけでなく、全て取得されるthis.allData=[];snapshot.forEach(doc=>{// console.log(doc);this.allData.push(doc.data());});});},methods:{//データ追加post:asyncfunction(){awaitdb.collection("Firebaseコレクション名を入力").add({service:this.service,name:this.name,mail:this.mail,tel:this.tel,date:this.date,message:this.message});}}})</script></body></html>以下のフロント部分を作成しました。
入力するとForebaseにデータが格納されました。
LINEのリッチメニューを利用して、LINEから予約
リッチメニューを作成しました。
2分割で、
・予約確認 ⇒ テキストで【予約確認】と返答
・予約 ⇒ 予約webアプリへのリンク(LIFFを利用しても良い)
過去の予約状況をLINEのチャットで取得
リッチメニューで作成した予約確認バナーをクリックすると【予約確認】をテキストが返るようにしているので、このテキストで条件分岐してFirebaseからデータを取り出すようにしました。
node.jsのパッケージを利用するので
npm i express
npm i @line/bot-sdk
npm i firebase
をインストールします。
node.js
'use strict';// ########################################// 初期設定など// ########################################// パッケージを使用しますconstexpress=require('express');constline=require('@line/bot-sdk');constfirebase=require("firebase/app");require("firebase/firestore");constfirebaseConfig={apiKey:"ForebaseSDKを入力します",authDomain:"ForebaseSDKを入力します",projectId:"ForebaseSDKを入力します",storageBucket:"ForebaseSDKを入力します",messagingSenderId:"ForebaseSDKを入力します",appId:"ForebaseSDKを入力します",measurementId:"ForebaseSDKを入力します"};// Initialize Firebasefirebase.initializeApp(firebaseConfig);constdb=firebase.firestore();// ローカル（自分のPC）でサーバーを公開するときのポート番号ですconstPORT=process.env.PORT||3000;// Messaging APIで利用するクレデンシャル（秘匿情報）です。constconfig={channelSecret:'LINE Messaging APIシークレットキー',channelAccessToken:'LINE Messaging APIアクセストークン'};// ########################################// LINEサーバーからのWebhookデータを処理する部分// ########################################// LINE SDKを初期化しますconstclient=newline.Client(config);// LINEサーバーからWebhookがあると「サーバー部分」から以下の "handleEvent" という関数が呼び出されますasyncfunctionhandleEvent(event){// 受信したWebhookが「テキストメッセージ以外」であればnullを返すことで無視しますif(event.type!=='message'||event.message.type!=='text'){returnPromise.resolve(null);}//予約確認というテキストを受け取ったらお名前を教えてくださいと返しますif(event.message.text=='予約確認'){constmessage={type:'text',text:'お名前を教えてください'};client.pushMessage(event.source.userId,message);}constname=event.message.text;console.log(name);//入力してもらった名前をfirebaseから検索constonoStapshot=awaitdb.collection("takeout").where('name','==',name).get();conststr=[];onoStapshot.forEach(ono=>{console.log(ono.data());str.push(ono.data());});console.log(str);letmsg='';console.log(str.length);for(leti=0;i<str.length;i++){for(leti=0;i<str.length;i++){msg+="名前:"+str[i].name"\n"+"予約日:"+str[i].date+"\n"+"商品:"+str[i].service+"\n"+"メールアドレス:"+str[i].mail"\n"+"電話番号:"+str[i].tel+"\n"+"メッセージ:"+str[i].message+"\n";}}console.log(msg);constmessage={type:'text',text:msg};client.pushMessage(event.source.userId,message);}// ########################################// Expressによるサーバー部分// ########################################// expressを初期化しますconstapp=express();// HTTP GETによって '/' のパスにアクセスがあったときに 'Hello LINE BOT! (HTTP GET)' と返事します// これはMessaging APIとは関係のない確認用のものですapp.get('/',(req,res)=>res.send('Hello LINE BOT! (HTTP GET)'));// HTTP POSTによって '/webhook' のパスにアクセスがあったら、POSTされた内容に応じて様々な処理をしますapp.post('/webhook',line.middleware(config),(req,res)=>{// Webhookの中身を確認用にターミナルに表示しますconsole.log(req.body.events);// 空っぽの場合、検証ボタンをクリックしたときに飛んできた"接続確認"用// 削除しても問題ありませんif(req.body.events.length==0){res.send('Hello LINE BOT! (HTTP POST)');// LINEサーバーに返答しますconsole.log('検証イベントを受信しました！');// ターミナルに表示しますreturn;// これより下は実行されません}// あらかじめ宣言しておいた "handleEvent" 関数にWebhookの中身を渡して処理してもらい、// 関数から戻ってきたデータをそのままLINEサーバーに「レスポンス」として返しますPromise.all(req.body.events.map(handleEvent)).then((result)=>res.json(result));});// 最初に決めたポート番号でサーバーをPC内だけに公開します// （環境によってはローカルネットワーク内にも公開されます）app.listen(PORT);console.log(`ポート${PORT}番でExpressサーバーを実行中です…`);Firebaseから検索をして情報を取り出す部分
constnameSnapshot=awaitdb.collection("takeout").where('name','==',name).get();conststr=[];nameSnapshot.forEach(name=>{console.log(name.data());str.push(name.data());});無事、実装成功です！
まとめ・考察
今回のチャレンジで、LINE Messaging APIの仕組みをだいぶ理解できました。Firebaseの方はマニュアル通りに動かしているに留まっています。
飲食店のテイクアウトを想定して自動化の仕組みを作りましたが、様々なジャンルのweb予約、予約状況照会に使える機能だなと思いました。
また、Firebaseの管理画面だと情報の管理はしにくいので、iPaaSサービスを利用してスプレッドシートに接続したいなと思いました。