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"/>여러분 생각보다 M5Stack에 통보 보내고 싶네요...MQTT인가 리모트이지만, 어느 쪽으로 갈까… #히어로즈리그
— 루시완 (@tkyko13)
라는 뜻으로 가르치고 있던 내용을 정리해 갑니다.
준비
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는 되어 있지 않기 때문에 이것이 할 수 없으면 당일의 제작은 성립되지 않았습니다.
사람에게 듣는 것의 소중함을 재차 배우는 것과 동시에, 지금 있는 환경에 감사하고 싶었습니다.
Reference
이 문제에 관하여(LineBot (LINE Messaging API)에서 UiFlow를 통해 M5StackBASIC 제어), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/UhRhythm/items/ee7b398f0a9b58501867텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)