LINE BOT と MQTT の仕組みを起動する

大事なこと

  • ここからは Gitpod の LINE BOT 側の作業です
  • Chrome ブラウザのなるべく最新版でアクセスしましょう

使う Git リポジトリ

すでに、今回の LINE BOT をはじめる環境は作ってあります。

https://github.com/1ft-seabass/dhw-pp2-2021-m5stack-linebot-mqtt

image

こちらを使います。前回の授業で使ったものとは違うのでご注意ください。

Gitpod で構築開始

Gitpod は GitHub 公開されたリポジトリであれば、すぐに https://www.gitpod.io/# のあとに GitHub リポジトリのある URL をつけた状態でアクセスすると構築できます。

ということで、以下にアクセスします。

https://www.gitpod.io/#https://github.com/1ft-seabass/dhw-pp2-2021-m5stack-linebot-mqtt

構築がはじまります。

image

すすんでいきます

image

ここまですすむとだいぶ良い感じです。

image

しばらく待つと、このようにブラウザ上で Visual Studio Code が起動し、さきほどの GitHub の Git リポジトリにあるファイルが移植されています。

このあとは、このブラウザ上で Visual Studio Code で作業を進めていきましょう。

npm install する

package.json に、すでに今回使う express や @line/bot-sdk ライブラリについて登録されています。

また、今回使う mqtt という MQTT のライブラリも登録されています。

npm i することでインストールを開始します。

npm i

コマンドでインストールします。

作成したBOTのチャンネルシークレットとチャンネルアクセストークンを反映

// 作成したBOTのチャンネルシークレットとチャンネルアクセストークン
const config = {
  channelSecret: '作成したBOTのチャンネルシークレット',
  channelAccessToken: '作成したBOTのチャンネルアクセストークン'
};

LINE BOT 作成手順 で、作成したBOTのチャンネルシークレットとチャンネルアクセストークンを、それぞれ反映します。

わりと編集中にシングルクォーテーション消してしまったり、channelSecretとchannelAccessTokenを、逆に書いたりしてハマるので気をつけましょう。

M5Stack から来るプッシュ通知の送り先のユーザーIDを反映

まず、プッシュ通知の送り先であるこの BOT のユーザーIDを LINE Developers から取得します。

https://developers.line.biz/ja/

こちらからログインしましょう。

image

今回使っている BOT のチャネル設定に移動します。

image

下にスクロールしていくと あなたのユーザーID という項目があるので、これをメモしておきます。

// プッシュメッセージで受け取る宛先となる作成したBOTのユーザーID'
const userId = '作成したBOTのユーザーID';

作成したBOTのユーザーID の部分を先ほどメモしたユーザーIDで書き換えます。

ここまで設定出来たらファイルを保存します。

MQTT の接続設定

冒頭でもお知らせしたとおり、本来であれば MQTT ブローカーという指揮者のような役割のサーバーが必要ですが、今回は私（講師）の方が、CloudMQTT というサービスで、ひとつブローカーを立ち上げているので、そのまま使いましょう。

// 今回使う CloudMQTT のブローカーアドレス
const clientMQTTAddress = 'CloudMQTT のブローカーアドレス'

// 今回使う CloudMQTT のポート番号
const clientMQTTPort = 1883;

// 今回使う CloudMQTT のユーザー名
const clientMQTTUserName = 'CloudMQTT のユーザー名';

// 今回使う CloudMQTT のパスワード
const clientMQTTPassword = 'CloudMQTT のパスワード';

ここの設定を Slack でお知らせする設定で置き換えましょう。

image

このような関係性で動作しています。

自分の名前の半角英数字で決める

このあと、M5Stack と LINE BOT がやりとりするトピック名などで、半角英数字の自分の名前を決めておきましょう。

M5Stack からのデータ受信を待つ MQTT トピックに自分の名前を入れる

clientMQTT.on('connect', function () {
  // 接続時にログ
  console.log('MQTT Connected!');
  // M5Stack からのデータ受信を待ちます
  // M5Stack の A B C ボタンを押したときに送られてきます
  clientMQTT.subscribe('/dhw/pp2/mqtt/YOURNAME/publish');

こちらのコードに M5Stack からのデータ受信を待つ MQTT トピック '/dhw/pp2/mqtt/YOURNAME/publish' の YOURNAME のところに自分の名前を入れます。

半角英数字です。自分の名前は hogehoge の場合は '/dhw/pp2/mqtt/hogehoge/publish' となります。

image

M5Stack から LINE BOT へやり取りするイメージです。

M5Stack にデータを送る MQTT トピックに自分の名前を入れる

  // M5Stack が待っているトピックにデータを送る
  clientMQTT.publish('/dhw/pp2/mqtt/YOURNAME/subscribe', jsonString);

こちらのコードに、M5Stack にデータを送る MQTT トピック '/dhw/pp2/mqtt/YOURNAME/subscribe' の YOURNAME に自分の名前を入れます。

半角英数字です。自分の名前は hogehoge の場合は '/dhw/pp2/mqtt/hogehoge/subscribe' となります。

image

LINE BOT から M5Stack へやり取りするイメージです。

本カリキュラム完了まで使えます、以後は自分でつくりましょう

本カリキュラムが終わるまで、使えるようにしているので、制作のためにお使いください。

もし、自分でつくって使いたくなったら、私のブログ記事を参考に作ってみましょう。

app.js を起動してみる

これで準備完了です。

node app.js

こちらのコマンドで app.js を起動してみます。

image

このように起動します。

image

すぐに新しいブラウザがもうひとつ開いて、今回起動したサーバーのルートアドレスが表示されます。

今回のサーバー URL をメモ

image

ブラウザのアドレスを見て今回のサーバー URL をメモしておきましょう。

Webhook URL の更新

https://developers.line.biz/ja/ こちらから、

image

今回使っている BOT の Messaging API 設定に移動します。

image

Webhook URL の項目に移動して以下の手順を行います。（大事な設定なので、一息タイミングを置いています）

さきほどの URL に /webhook をつけて反映

image

さきほどの URL https://**********.gitpod.io に /webhook をつけて Webhook URL の項目に入力して更新ボタンをクリックします。

image

同時に Webhook の利用がオンになっていることも確認しましょう。

BOT に返答が来るか確認しましょう

一旦ここで、以下のように動作するか確認してみましょう。

image

送る文字列は、M5Stack で表示できる半角英数字を試してみましょう。

次にすすみましょう

左のナビゲーションから次の教材にすすみましょう。

results matching ""

    No results matching ""