LineBot (LINE Messaging API)에서 UiFlow를 통해 M5StackBASIC 제어

본 기사에 대하여



요 전날 참가한 Hackason에서 M5Stack과 LineBot를 연계하기 위해 한 일에 대해 정리합니다.

【증가 프레임! ] M5Stack 해커슨 by #히어로즈리그

덧붙여 이 기사는 해커슨 당일에 기술 서포트를 담당해 주신 ProtoOut Studio에서 강사를 맡고 있다 오노씨 으로부터 지도해 주신 내용을 기록한 것입니다.
다시 오노 씨에게 감사드립니다.

M5Stack→Line Notify에 관한 기사는 상당히 있습니다만



IFTTT로 간단 IoT! M5Stack과 LINE을 연결하는 방법
푸딩을 지키는 기술 ~그 1:LINE에의 통지~
M5Stack에서 LINE으로 데이터 전송
(▼이쪽은 꽤 최근 투고된 것이군요. LGTM!▼)
【초보자용】 M5Stack의 UiFlow에서 LINE에 알림을 보낼 수 있도록 하는 방법 【LINE Notify】

이번에하고 싶은 것은 반대입니다.



LineBot (LineMessagingAPI)에서 보낸 값을 사용하여 M5Stack을 제어하는 ​​방법이 있습니까? Bot에서 1이라고 하면 M5Stack의 화면을 빨강으로 한다든가, 그런 느낌입니다. . . ! #히어로즈리그 #protoout — 울리즘 (@Uh_rhythm) September 20, 2020


이미 오노씨는 대답을 했던 것 같아요!

<script async=""src="https://platform.twitter.com/widgets.js"/>

라는 뜻으로 가르치고 있던 내용을 정리해 갑니다.



준비



UiFlow측



1.Remote 메뉴에서 버튼 만들기

2. 배포하기

3.QR 코드에서 URL 얻기

September 20, 2020



4.URL 방문. 검증 도구에서 엔드포인트 URL 얻기



LineBot (LINE Messaging API, Node.js) 측



1. 귀환 돌기 등을 미리 만들어 둔다

2. axios를 사용하여 Bot에서 게시한 메시지로 UiFlow 엔드포인트 호출



코드는 이런 느낌입니다




'use strict';

const express = require('express');
const line = require('@line/bot-sdk');
const axios = require('axios');
const PORT = process.env.PORT || 3000;

const config = {
    channelSecret: '{CHANNELSECRET}',
    channelAccessToken: '{CHANNELACCESSTOKEN}'
};

const app = express();

app.get('/', (req, res) => res.send('Hello LINE BOT!(GET)')); //ブラウザ確認用(無くても問題ない)
app.post('/webhook', line.middleware(config), (req, res) => {
    Promise
      .all(req.body.events.map(handleEvent))
      .then((result) => res.json(result));
});

const client = new line.Client(config);
var message = "Hello M5Stack";
async function handleEvent(event) {
  if (event.type !== 'message' || event.message.type !== 'text') {
    return Promise.resolve(null);
  }
  if (event.message.text == "1") {
  // エンドポイントに先ほどのButtonのURLを設定する  
  axios.get('http://api.m5stack.com/v1/{APIKEY}/call?func=_remote_ButtonName1()')
  }
  console.log(event.message.text)
  return client.replyMessage(event.replyToken, {
        type: 'text',
        text: message
  });
}

app.listen(PORT);
console.log(`Server running at ${PORT}`);


요약



이것은 API의 지식만 있으면 구현은 곧 이해할 수 있습니다만 UiFlow는 되어 있지 않기 때문에 이것이 할 수 없으면 당일의 제작은 성립되지 않았습니다.

사람에게 듣는 것의 소중함을 재차 배우는 것과 동시에, 지금 있는 환경에 감사하고 싶었습니다.


좋은 웹페이지 즐겨찾기