標籤

chatbot

透過 IRC 與 Twitch 聊天室連結互動

前言

為什麼會想玩這個呢,因為之前串了一隻介接 Twitch API 的聊天機器人,不過最近因為 API 似乎已經翻新了,所以那隻機器人暫時死亡了 😆,但是聊天機器人不限定只有在 facebook、LINE 通訊軟體上,因此就寫了這篇文章來紀錄一下使用過程。

文件 & 申請密鑰

Twitch Chatbot IRC 官方文件

要使用的朋友在 google 時可能會找到另一套,不過他也說請大家來用 tmi.js 了XD

首先要先申請一個 OAUTH 的密鑰,網址在這邊

套件安裝

透過npm安裝tmi.js

npm i tmi.js

IRC 通訊

接著需要寫一個腳本透過IRC的方法來與 Twitch 的聊天室連結:

IRC(Internet Relay Chat)是一個位於應用層的協定。其主要用於群體聊天,但同樣也可以用於個人對個人的聊天。

新增 bot.js

const tmi = require('tmi.js');
const client = new tmi.Client({
  options: { debug: true },
  connection: {
    reconnect: true,
    secure: true,
  },
  identity: {
    username: 'YOUR_NAME',
    password: 'oauth:YOUR_KEY',
  },
  channels: ['yuniko0720'], // 想加入的聊天室
});
client.connect();
client.on('message', (channel, tags, message, self) => {
  if (self) return;
  if (message.toLowerCase() === '87') {
    client.say(channel, `@${tags.username}, 你是第 N 個說 87!`);
  }
});

設定檔

  • username: 設定你的使用者名稱
  • password: 申請的 oauth 放在這邊,格式皆是oauth:XXXXX
  • channels: 一般會進入自己的頻道,當然也可以去其他頻道
identity: {
    username: 'YOUR_NAME',
    password: 'oauth:YOUR_KEY',
  },
  channels: ['yuniko0720'],

連結聊天室

這部分則是開始監聽聊天室的內容,所有的範例連結皆在此

client.on('message', (channel, tags, message, self) => {
  if (self) return;
  if (message.toLowerCase() === '87') {
    client.say(channel, `@${tags.username}, 你是第 N 個說 87!`);
  }
});

成果

執行node bot.js會看到以下的畫面

其實這樣監聽看起來真的是讓我這個宅心噴發 🚀🚀,可以透過IRC收到聊天室訊息後看後續要怎麼處理,像有些實況主與觀眾的互動可能是輸入+1這樣的文字來獲得獎賞(抑或是互罵 🤣),在很多情境下這樣用會讓觀眾除了跟實況主互動以外還有個對象能玩 👾。

結論

而在這樣監聽下若人數很高之後其實可以收集到更多的資訊去做利用,也許想是開啟訂閱者模式後讓訂閱者輸入特定文字後將資訊傳入Google sheet之類的資料表,在做抽獎等活動性質的內容,對整個遊戲實況內容行銷都會是滿好與觀眾互動的方式~

大概就玩到這邊了,下次想到什麼應用再來說 😆

繼續閱讀

Chatbot meetup #14 與 #15 小聚心得

前言

大家好,我是 NiJia

下半年度辛苦來參加小聚的各位了,最後一季場地一直變更,因為每次小聚都有熱情的夥伴提供場地給小聚,也一起尋找最適合各位的一個場地,若造成困擾小弟深感抱歉 <(_ _)>

2019 年度活動資訊請參考 ➡️Chatbot Taiwan GitHub

小聚活動 & 簡報連結

meetups 14

Topic Speaker Link
What's new in LIFF v2 and TECHPULSE 2019 preview Evan Lin link
Bottender 一路走來 林承澤(C.T Lin) link
如何使用 kamigo 快速開發 LINE bot 林家煜(NiJia Lin) link

心得

當時 LIFF v1 只能透過 Deep link 的方式讓很多需要 Web view 的動線設計上增加了許多困擾,而在 v2 上線後改善了這方面的問題,且也對外公布支援 Query string 讓開發者可以帶參數進去(雖然之前就已經在偷用了 😆),雖然很不幸的因為 iOS 的政策問題導致 Scan QR code 的功能在接下來的版本硬生生被拔除,但整體下來其實 LIFF v2 對於在 LINE 上開發功能的朋友可以更有彈性的去應用了。

iOS 政策問題參考

Bottender 是在某次小聚聊到時才知道原來有這麼酷的開源專案,我覺得最特別的除了可以支援多平台之外,就是 console 模式了,像我最近做的 ABL 台灣隊賽程機器人就只使用到純文字的功能,在console模式下很快速的就把功能弄好,部署時只要把相關 Key 放進去功能就完成了,這部分是真的很驚艷 😆 上週去參加 GDG Hackthon 時介紹給其他寫前端的朋友使用,從來沒寫過後端的他們也覺得使用上真的很快就上手,所以有寫Javascript的朋友不妨參考試試囉!

當初因為訓練時沒有一個可以幫我儲存記錄的地方,因此想到想做 LINE bot 來解決我的問題,但同時我又不喜歡處理一大堆 JSON 的問題,因此選用 Kamigo 作為我開發 bot 的框架,除了框架幫忙轉打請求轉到對應的controller讓我不用寫一堆if else以外,最好用的功能就是 Kamiflex 了,當我們在 Flex Message Simulator 弄了一堆 JSON 出來時,同時我們需要從資料庫拉資料出來組裝產生大量的 JSON,在組裝時程式碼會很髒亂,所以使用 Kamiflex 來幫忙轉譯讓我在寫 Flex message 時可以更像在寫 Ruby code,讓整個 JSON 可能幾千行瞬間被濃縮成 100 行時這段 Flex message 在維護時也能更好的維護。

Kamigo 流程

User->LINE: message
LINE->Route: webhook
Route->Kamigo: event notify
Kamigo->Controller: send params
Controller->View: send DB data
View->Kamigo: generator flex template
Kamigo->Route: send template
Route->LINE: response
LINE->User: reply
Topic Speaker Link
LINE Push / Message 開發經驗談 Caesar Chi
邊緣人救星!用 Laravel 打造私人定製的聊天機器人 李小胖 link
Chatbot builder Penny Sun link

心得

我平時就有在看一些社群行銷朋友分享他們是如何對行為下標籤tag以及發放對應內容給使用者進而提升購買力,在 Caesar 大大的快速了解到這些商業行為背後的開發經驗為何,從設計到大量推送所需注意的問題以及服務器之間的溝通問題...在這次的議程中讓我學到很多付費內容才會聽到的題材,讓我對於 Push message 這件事情的做法與思路又重新被教育了一次 😆

這次要請到一個月有一半時間都在參加小聚的小聚王小胖來為各位分享如何用Laravel做一隻專為自己客製化的機器人,雖然 Live demo 過程中了魔咒,好險後來也解決的一些 live demo 才會遇到的問題 🤣,總之若有使用 php 的朋友歡迎參考簡報哦~

最後由 LINE 的資料工程師-Penny 為我們帶來在 LINE techpulse 上的議程,從介紹中 NLU 部分看起來功能會像是 Dialogflow 一樣,而在其他的部分則是提供一個介面讓使用者可以更快速的在網頁上設定自己想要的機器人樣式,只是目前功能只提供給合作的商家,期待未來 release 時的效益 🚀

官方帳號已經有套用囉!想收到啲一手資訊或是想玩玩的朋友可以掃描加入 👾

所有小聚資訊接收藏在 -> Chatbot Taiwan GitHub 上哦!

閃電秀

14

Speaker Topic Link
陳佳新 LINE Beacon,數位導覽的小幫手!
Eric Flex box, 一起收集分享 Flex message link
徐郁涵 食農飽可夢
郭佳甯 午餐隊長 link

15

Speaker Topic Link
Calvin LINE Beacon,數位導覽的小幫手! link
JT ChatOps & Rasa link
NiJia ABL 台灣隊查詢機器人 link
郭佳甯 Bottender & Kamigo 介紹 link1link2

短評

除了內容豐富的主議程外,閃電秀就是在每個社群最特別的部分了,從每次的閃電秀中都讓我對於 side project 的想法又重新被定義了一番,常常會看到很多不同的應用情境以及特殊的用法,歡迎大家踴躍報名閃電秀來互相交流,多方交流或許有機會蹦出不一樣的想法並讓機器人的其他用途 😁

結論

在舉辦每次的小聚活動都希望可以給每個來的朋友最豐富的內容,以及提供 Lighting talk 的舞台讓有作品的朋友可以上來分享,而最近有與其他社群的朋友聊到,發現似乎把議程塞太緊,導致影響到會眾與講者交流以及回家休息的時間,所以之後的小聚改善這個狀況並調整時間,再麻煩大家多支持 Chatbot Taiwan🚀🚀🚀

繼續閱讀

Bottender x Dialogflow x LINE

大家好,我是 Chatbot Taiwan 的 NiJia,最近我們 Github 開張囉,想找之前演講的紀錄都會在此哦!

前言

事情是這樣的,本週末 12/13-12/15 我要去 GDG Taichung Hackthon Party 上當導師,礙於我實在想不出有個題目可以分享給其他同好,碰巧之前跟過 Wolke 大大的 Dialogflow + LINE bot 工作坊,憶起當時的明媚風景,接著前陣子寫鐵人賽也有跟到 C.T Lin 大大寫的使用 Modern Web 技術來打造 Chat App,如此一來我就乾脆把這兩個東西合在一起弄個東西!

又這麼剛好的我最近瘋狂看 ABL 球賽(支持本土球隊!),剛好週末也沒事,就順手把它做出來啦~有在看球賽的朋友別錯過這隻機器人囉!他可以告訴你下一場比賽是哪時候~

以下記錄著我踩雷的過程 🤣,詳細 bottender 使用手冊還是參考 -> 使用 Modern Web 技術來打造 Chat App

本篇文章的程式碼已經開源囉 Taiwan-ABL-Games

建立專案

npx create-bottender-app taiwan-abl-games

接著會看到以下的畫面,bottender 很貼心的列出一些大家平常比較會使用的平台,這邊我們先選擇 LINE,後續會再告訴大家如何增加其他平台選項。

Dialogflow 注意事項與串接

這邊一定是要參考主要開發者所寫的文章啊 -> Day25 大致上創建服務的過程差不多,這個部分就簡單帶過比較重要的部分。

在處理意圖部分有個小撇步,若鼠標從左邊到右邊,到第二個時會把第一個意圖覆蓋掉,這邊我都是從右邊到左邊一個一個選,才不會遇到覆蓋的問題。

接下來再處理 Dialogflow API 的問題,Day 25 文章中所提到的地方 Google UI 似乎有換位置,我找到的位置在此 -> URL

從頁面的藍色按鈕(建立服務金鑰)後會遇到下圖畫面,第一個紅色框框需要注意是不是剛剛建立的 Dialogflow 的 agent。 而第二個下拉式選單選擇 Dialogflow Integrations,下面則選擇 JSON 格式。

在一開始建立完之後若是要回來管理的話,直接到 GCP 的主控台左側的API & ServicesCedemtials來管理金鑰。

把下載的檔案放在主目錄下,接著要在.env下新增以下兩個 key,GOOGLE_APPLICATION_CREDENTIALS則需要打上絕對路徑,後面再部署會再解釋這段。

GOOGLE_APPLICATION_CREDENTIALS=/Users/.../taiwan-abl-games/YOUR_KEY.json
GOOGLE_APPLICATION_PROJECT_ID=taiwan-abl-games-mpmomf

PROJECT_ID要去 GCP 主控台查詢。

實作

這邊就先複製原作者的 code 並稍做修改至 /src/index.js:

const dialogflow = require('dialogflow'); // 記得安裝
const { format } = require('date-fns'); // 記得安裝

const PROJECT_ID = process.env.GOOGLE_APPLICATION_PROJECT_ID;
const sessionClient = new dialogflow.SessionsClient();

module.exports = async function App(context) {
  if (context.event.isText) {
    const sessionPath = sessionClient.sessionPath(
      PROJECT_ID,
      context.session.id
    );

    const request = {
      session: sessionPath,
      queryInput: {
        text: {
          text: context.event.text,
          languageCode: 'zh-tw',
        },
      },
      queryParams: {
        timeZone: 'Asia/Taipei',
      },
    };

    // 透過 dialogflow 偵測意圖
    const responses = await sessionClient.detectIntent(request);
    const { intent, parameters } = responses[0].queryResult;

    if (intent.displayName === 'dreamer-next-game') {
      //...YOUR CONTEXT
    } else {
      await context.sendText('您輸入的內容我不懂哦~🏀');
    }
  }
};

藉由上述程式碼會發現藉由 Dialogflow 判斷出來的 intent 到底是要填入什麼?intent 顯示的字串就如下圖所示,我們在 Dialogflow 裡建立的 Intent 的名字就是最後 API 會回傳給我們的判斷字串,這邊就正規化一下自己所要提供的意圖吧!

bottender.config.js

最後這邊提一下如何設定給多平台使用,一開始藉由npx create-bottender-app xxx幫我們建立 app 時這個檔案就會自動生成,bottender 很好心的把所有明台所會用到的 key 全部都會放在這裡面。 以我為例我就有使用到 Messager 來試玩,這邊就需要把enabled啟動(false -> true),實際建立粉絲頁相關可以參考

題外話: 最後再使用npx bottender messenger webhook set就會幫我們把 localhost 串接到 Message 上,實在是太讚了!!!

部署注意事項

我是使用 Heroku 當作我部署的環境,請服用這篇Heroku 部署

在本地端測試時會用到很多的環境變數,而 Dialogflow API json 的路徑我是透過環境變數去取得,在 Heroku 上會把專案的內容放在/app底下(不管你專案叫什麼名字),因此環境變數GOOGLE_APPLICATION_CREDENTIALS需要輸入/app/xx-ooo.json這樣就會取到當前目錄下的檔案囉!

結論

經由這次試玩這個 project 讓我覺得 bottender 這個 chatbot 框架整合真的是厲害,幫開發者處理掉很多跨平台上的問題,我認為最酷的就是 console mode,在測試程式邏輯上可以不用每次都一直用手機開 LINE 或是 FB 來測試機器人狀態,而是在終端機就解決這件事,這是我開發機器人到目前為止覺得最酷的模式 👍!

而在這個專案上我使用到 Dialogflow,除了參考的原文畫面 (GCP 頁面) 已有些許更動外,其實介接的速度是非常快的,此外我很認同原文作者的觀點,把 Dialogflow 接在程式後面才去處理這件事會增加很多彈性,畢竟當一個回應來的時候可能會想做其他不同的應用,此時若是模型就在前面先把訊息回覆掉,會增加很多開發上的問題(當然若簡單的功能單人沒問題 🤣)。

總而言之~誠心推薦大家去玩玩 bottender,也許你會跟我一樣發現了新大陸 😎。

參考

Dialogflow GCP Bottneder 建立專案 Heroku 部署

繼續閱讀

Chatbot meetup 北部 #13 at 台北商業大學 & 中部 #3 at 夢森林

前言

大家好,我是 NiJia,很榮幸被邀...是本來就負責 Chatbot meetup 的 Co-organizer,連續兩天參加了 meetup 真的是揮灑自己熱情兩邊跑(好 High),希望藉由社群的分享讓大家可以吸收到不同的新知!

這次活動場地感謝 溫明輝 教授幫 chatbot 借了台北商業大學的場地,而台北商業大學最近有跟 LINE PROTOSTAR 聯合舉辦了 ”LINE Chatbot 對話機器人設計大賽”,覺得自己的機器人不錯嘛?歡迎大家踴躍報名參賽哦!

北部小聚 in 台北商業大學

LINE Platform Update 201910 - Evan Lin

長期支持 Chatbot 社群的 Evan 大大為大家帶來陣子 LINE 的更新內容,像我這種開發者最期待的就是 LIFF v2 終於上線了 🎉,當中增加了很多種應用讓嗷嗷待哺的工程師們終於可以生出更多種不一樣的應用啦,

  • 外部瀏覽器上使用 LIFF 🎉
  • 兼容 Login v2.1,取得使用者基本資訊
  • 可掃描 QR code
  • 在 LIFF 的 webview 下可獲取使用者的 OS/Language/AccessToken 等等的內容

詳細參考: https://engineering.linecorp.com/ja/blog/liff-v2/

試玩新功能:

LINE Bot 上的表單驗證、搜尋以及分頁 - 郭佳甯

簡報連結

身為卡米粉的我終於再度聽到卡米哥的議程啦,這次介紹的是從 COSCUP 之後一直更新的 kamigo,並完全使用這個套件做的寵物協尋機器人,此議程就已這隻機器人為主體介紹。

在實作網頁的過程中最長需要弄的東西不外乎就是表單驗證、搜尋以及分頁,因為 kamigo 是讓使用者經由 LIFF 幫忙將表單回傳成一份 JSON 至使用者的的對話欄上, 再轉介給 controller 去解析並儲存進資料庫,但若使用者在操作的過程中少輸入會不會一樣送出? 此時 kamigo 透過 rails 原生既有的 validates 來驗證表單欄位內容,並藉由 Turbolinks ajax + js.erb 讓表單在送出時先透過 ajax 打到後端驗證,若驗證失敗後則回傳告知 LIFF 哪個欄位有問題,這個方法也讓我使用到這個套件的肌肉仔可以透過 rails 的鬼神方法幫我驗證表單,如此一來在表單的確認上就沒問題啦!🎉

順手捐星星,救救卡米狗: https://github.com/etrex/kamigo

不懂開發也能建立屬於自己的 Chatbot - 白凱仁

接著由 Cloud Native Taiwan User Group Co-organizer - Kyle Bai 為大家帶來講題,藉由故事的敘述讓大家知道他是為甚麼啟動這個 idea 出來,並靈活運用圖片演示對話流程(筆記),並因為打遊戲的困擾決定做一個機器人來解決朋友問題,運用 container 的技術來封裝 chatbot App,再用 k8s 透過 N 台機器來管理 container 讓它獲得不死之握能力,確保服務的可用性與延展性。

最後再透過 live demo 的方式讓會眾們一飽眼福,若是對於 Cloud Native 相關技術有興趣的朋友別忘了加入社群,或是你已經有相關主題遲遲沒地方講?趕快搭上線讓你有舞台可以發揮 😎

閃電秀

這部分就參考 Evan 大大的文章

  • Afore: 如何用 Chatbot 說 921 故事
  • 謝化挺: 921 Chatbot 開發心得
  • C.T Lin: 介紹即將發佈的 Bottender v1
  • kevin: 宣傳 DevFest 活動
  • Demo: FunWater - It’s time to rethink about the “single-use plastic” product.

中部小聚 in 夢森林

LINE Pay 串接全紀錄 - KoKo

身為通勤學的作者也是自由工作者的 KoKo 每次都熱情參加 Chatbot 的活動 👏,本次邀請來帶大家認識 LINE Pay,透過詳細的介紹 LINE Pay 帶著大家一步一步做並提醒大家當中需要注意的部分,有部分的會眾是金融相關背景也特地來了解 LINE Pay 的各種機制,透過 KoKo 解釋後讓會眾更清楚裡頭眉眉角角,此時真的是感受到滿滿的熱情,講者跟會眾踴躍的討論也讓整個活動更活絡,想了解更多議題的歡迎來許願或是來當講者體驗一下中部人真正的活力啊!

serveo 讓你用 Docker 開發 chatbot 也能過的去 - Jimmy

COSCUP 就來擔任 Chatbot Taiwan 講者的 Jimmy,本次來分享他包起來的 servo 的容器服務,主要原因是因為在開發機器人時大家都習慣用 ngrok,只是每次都要重新執行重新貼到 LINE Bot 或 LIFF 上,如此繁雜的步驟現在只要透過 container 以及自定義的 DNS 每次只要 docker 啟動後 Domain 啟動後即可開始寫機器人,根本不需要再進後台重新填寫,只能說工程師沒有極限啊!

透過 Jimmy 將 serveo 打包的 container 就不會有連線不穩定的問題(我有經歷過 🤣),這邊需要注意的問題 serveo 有 ssh 連線數的問題,但一般來說在開發人數不會太多,這樣理論上已經很夠用了~

若對這服務有興趣的話:https://github.com/taichunmin/docker-serveo

閃電秀

感謝 Flex Simulator 拯救了我 - 陳佳新

身為中部負責人的佳新,介紹 LINE 的工具 - Flex Message Simulator,因為應用大量的 flex message 在自家產品「彰化旅行+」上,透過 LINE 的工具讓我們使用 flex message 上能夠叫得心應手。

ChatBot 製造 ChatBot - EJ Lin

近期加入 chatbot 志工的 EJ 製作了一個可以透過 chatbot 管理 chatbot 的服務,將使用者所註冊機器人的 secret 以及 token 放入後,就能訂閱 ptt 特定作者的文章,當作者只要發文就會透過 push message 通知訂閱的人,若這邊 500 則免費訊息用完的話就建議使用者在開新的 🤣

肌肉仔更新啦 - NiJia Lin

最後則是我前一陣子分享過的健身記錄機器人-肌肉仔,引入了最新更新的 flex message 站牌樣板,讓健身者在訓練的每筆紀錄變得更漂亮,讓健身者可以像是公車一樣一步一步的往下一站走!

肌肉仔還是會持續更新,有興趣的朋友別忘了幫小弟按個星星 ⭐️ 鼓勵我繼續前進 😃

結論

臺北臺中連著兩天舉辦真的是很累,但是看到大家踴躍的互動讓我覺得不虛此行,接下來還需要大家的熱情支持,讓我們繼續辦下去 🚀


Chatbot Taiwan 在台北、台中皆有一個月一次的定期聚會,致力於提供並討論聊天機器人的相關應用,每回小聚將安排講者主題分享、新知討論,環繞 Chatbot 與 AI,及大家共同關心的話題。歡迎大家踴躍分享、自由與會眾交流,同時也期望大家可以在分享中得到收獲。

歡迎各位報名、推薦講者以及閃電秀,介紹自己開發的 chatbot 並分享 chatbot 相關的議題,若有相關需要合作歡迎與我聯繫 https://m.me/linnijia。

繼續閱讀

Day29 - LINE API 的使用心得

  • Imagemap

    • 這邊以微股力為範例,這隻機器人會再回應的時候輸出一張圖片讓使用者看到股票的曲線圖,然後圖片下方做三個類似按鈕的圖片在上面,再藉由設定觸發訊息在座標上,當使用者按到的時候就很像再按按鈕,更多使用方法或是 UX 上的問題可以參考 UX 三刀流
  • Richmenu

    • Richmenu 等於把 imagemap 活生生的塞在下面,讓使用者再進聊天室時就能馬上看到圖片並按下對應的區塊而不用再輸入指令把 Imagemap 叫出來,如此就少了個步驟了,並讓開發者可以有更多的發揮空間呢!
  • 設計工具

    • Bot designer 這個工具是桌面版,可以直接抓下來在本地端直接設計,
    • FLEX MESSAGE SIMULATOR [β] 它有提供線上工具讓大家可以在線上直接測試樣板或是直接刻自己想要的樣板。
      • 使用心得:因為寫 Rails 基本上就是在寫全端了,難免會碰到 CSS,身為一個後端工程師排版,一定要用 flex 這個超級毒品(\吸起來/),接著過了一段時間後接觸到 LINE bot,且 flex message 也是基於 Flexbox 的規格去實作的,所以很多排版上觀念都很像,也就不太會有障礙了 😁。 且在排版上還有表格告知你什麼 component 要在什麼區塊內才能用,多佛心啊~
  • API 文件

    • 在最近幾個月的時候 LINE 的文件有改版,讓某些 API 可以在線上就能測了,看起來是滿讚的,若在逛文件時碰巧想測試這些功能的話可以直接把相關參數放進去,在某些時候也是滿方便的。
  • LIFF (LINE Front-end Framework)

    • 個人覺得他讓 Bot 的發揮功力又更上一層樓了,以前很多開發者都會覺得在與機器人對談中會有很多東西是不好做的,像是購物車的流程,若使用者在流程中按了上面的按鈕的話可能會發生無法預期的錯誤,且得用其他的服務去儲存操作狀態,在開發上就很麻煩,那 LIFF 就讓這個流程可以簡單許多,且能透過 SDK 在網頁上取得使用者的資訊,讓網站再被使用的同時還可以確認身份。
  • 推播 500 則

    • 在今年 OAuth 2.0 釋出當中推播則數也跟改動了,改成 500 則後其實看到不少的使用者在跳腳怎麼改成這樣,或是另類的變貴收費,只能說 LINE 也是要找方法收點費用呀,不然很多功能爽爽用他們也沒有地方去收費,這部分因為我也是少用,推播功能就都交給 LINE Notify 嚕!
  • 客服與機器人的切換

    • 參考 C.T Lin 大大的文章 Day10,簡單來說 Messager 可以在機器人處理不來的時候將訊息轉丟給設定的那位管理員,讓他來回覆訊息,但 LINE 在機器人上只能透過網頁去切換機器人狀態,抑或是自己設計流程讓機器人在無法處理才通知管理員,這樣的話管理員很容易錯過黃金的第一時間,可能也會因此造成使用者的不便。
  • 個人的 mur mur 🤣

    • 文件實在是太瀑布式了,雖然現在都懂的如何搜尋到相對應的功能,但若一般想開發的使用者在看到這個文件時瘋狂往下滑,結果發現還沒有滑到或是滑過頭,倒是找資料時氣得要死 😓,所以若是文件能夠分個頁籤什麼就更好了~

結論

當然整體來說還是很喜歡使用 LINE 這個平台(絕對不是因為熊大 🐻),東西也不會像一開始在開發時什麼都找不太到,並且功能一直 release,讓服務可以透過不同的整合方法去達成目標,接下來 LINE 應該還會再繼續釋出不同的東西,就請大家拭目以待,或者...來參加 chatbot 小聚直接問問 LINE 的傳教士如何呢 😁

繼續閱讀

Day22 - 最常用的搭配 - 使用 Login + Message API 讓使用者在掃描加入好友時就綁定帳號

前言

在第 Day 13 Python SDK 試玩的時候使用過 get_profile,當時使用時就是在每次訊息來的時候才去 SQL 儲存使用者資訊,若只是單純想要使用者資訊的話這樣用好像有點多餘 😓,以下就帶各位簡單的實作。

實作

我們要將上篇的前端頁面(line_login_auth.html)改造一下

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>LINE Login</title>
  </head>
  <body></body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
  <script>
    $.ajax({
      url: "https://YOUR_SLS_DOMAIN.us-east-1.amazonaws.com/dev/line/auth",
      method: "POST",
      success: function(data) {
        window.location.replace(data.result);
      }
    });
  </script>
</html>

這邊我將 button 的 onclick 事件以及 button 本身移除掉,目的是要讓使用者一到這個頁面之後就直接透過 AJAX call api

到了這裡應該有感應到什麼了吧!接著就是把這個 html 檔的 S3 路徑網址使用 QR code 包起來,讓他看起來像是 LINE bot 的 QR code

到了這邊基本上已經快完成了,參考 LINE 的好友說明或下圖

接著到機器人的開發者頁面,並且往下滑會看到自己機器人的 QR code 以及 Bot 的 ID,把他複製下來並製作機器人的加好友網址

像是這樣子

https://line.me/R/@1234

接著到 controller/line_login_controller.pydef get(self)最後一行,原本我們這邊做的是回傳 JSON

if dt:
			return {'result': dt}, 200

改用

from flask import redirect
if dt:
 		return redirect("https://line.me/R/ti/p//@127ojvgz", code=302)

如此一來在登入驗證完之後就會把使用者導向到加好友的頁面,在手機上若已經加過好友則會直接導到機器人對話窗上,如此一來就可以讓使用者在加入好友的同時也綁定完帳號,在未來使用的時候 api 這邊也比較好控管使用者的權限問題。

結論

像是我自己做的健身記錄機器人,就是以這個方法下去實作,有聽過一些朋友跟我反應這樣的方法多此一舉,但我認為若是有網頁的話也是套用 LINE SSO 來實作,就可以讓兩個入口去統一,在狀態流上就能比較好控制了。

繼續閱讀

Day16 - 實作一個上下頁的 richmenu

前言

看著很多人的機器人都有上下頁的功能就心癢癢,一直沒有實際去操作,雖然看起來好像不難,但身為一個肥宅就是只有懶,到了現在才把他實作出來(羞),以下就帶大家來做嚕!

事前準備

首先我做了兩個超級陽春的圖片,來展示一下上下一頁的樣子(超弱) (1)


(2)

實作

我把上一篇的 richmenu_api_controller.py 的 create 部分改編了一下, 增加了讀 state Query string 的一個參數,用up&down來簡單判斷上傳的內容要傳什麼

if usage == 'create':
            rich_menu_to_create = None
            if request.args.get('state') == 'up':
                rich_menu_to_create = RichMenu(
                    size=RichMenuSize(width=2500, height=843),
                    selected=False,
                    name="Nice richmenu",  # display name
                    chat_bar_text="我是第一頁",
                    areas=[RichMenuArea(  # 這邊是陣列的格式,可以動態設定自己要的區域想要有什麼功能
                        bounds=RichMenuBounds(
                            x=0, y=0, width=2500, height=843),
                        action=MessageAction(
                            label='message',
                            text='下一頁'
                        ))]
                )
            elif request.args.get('state') == 'down':
                rich_menu_to_create = RichMenu(
                    size=RichMenuSize(width=2500, height=843),
                    selected=False,
                    name="Nice richmenu",  # display name
                    chat_bar_text="我是第二頁",
                    areas=[RichMenuArea(
                        bounds=RichMenuBounds(
                            x=0, y=0, width=2500, height=843),
                        action=MessageAction(
                            label='message',
                            text='上一頁'
                        ))]
                )
            else:
                rich_menu_to_create = RichMenu(
                    size=RichMenuSize(width=2500, height=843),
                    selected=False,
                    name="Nice richmenu",  # display name
                    chat_bar_text="我是測試使用",
                    areas=[RichMenuArea(  # 這邊是陣列的格式,可以動態設定自己要的區域想要有什麼功能
                        bounds=RichMenuBounds(
                            x=0, y=0, width=2500, height=843),
                        action=URIAction(label='Go to line.me', uri='https://line.me'))]
                )
            rich_menu_id = self.line_bot_api.create_rich_menu(
                rich_menu=rich_menu_to_create)
            print(rich_menu_id)
            return {'id': rich_menu_id}, 200

接著回到 message_api_controller.py 把前幾篇的 reply SDK code 先註解掉,並加入以下的 code

message = event['events'][0]['message']['text']
if message == "上一頁" or message == "下一頁":
    try:
        rich_menu_id = self.line_bot_api.get_rich_menu_id_of_user(id)
    except:
        # link default rich menu
        self.line_bot_api.link_rich_menu_to_user(id, "richmenu-269cc28b8e8497d76c2df062b274a2ce")

    if rich_menu_id == "richmenu-269cc28b8e8497d76c2df062b274a2ce":
        self.line_bot_api.link_rich_menu_to_user(id, "richmenu-e31be74ad7e577b4752ab70c9c2a3fba")
    else:
        self.line_bot_api.link_rich_menu_to_user(id, "richmenu-269cc28b8e8497d76c2df062b274a2ce")
else:
    self.line_bot_api.reply_message(token, TextSendMessage(text=message))

這邊簡單判斷讀取使用者回應來進入控制的程式碼,透過get_rich_menu_id_of_user來抓取當前使用者的 rich menu,但因為他是會返回 Error response,所以這邊就使用try except來包 except 部分就是透過link_rich_menu_to_user來設定當前使用者為第一張圖片的 richmenu id,下面的判斷式就是讓他互換成對應的 rich menu id 來換頁。

Richmenu 那邊事實上是要用 postback,因為要 demo 的關係我就弄成一般的文字格式,因為這個上下頁字串的理論上是不該讓使用者看到的,只要用圖片來引導使用者就好。

Demo

結論

透過這次練習大概把 LINE SDK 玩得差不多了(message api & richmenu api),寫到了今天真的是苦讀 LINE 的文件啊,都要以防萬一我這狗眼沒有看錯而寫出錯誤的程式碼 XD,到這打完收工,繼續期待下一篇~

繼續閱讀

Day14 - LINE Richmenu 介紹

Rich menu 是一個 LINE 提供給 chatbot 的圖文選單,可以再上面設定很多各式各樣的功能,下圖為一個範例

優點

  • 擁有長板 & 短板的圖片支援,讓一張圖片不再是一張圖片,機器人看起來可以更有品牌風格,根據 User 喜好、訂閱功能或是下一頁 Menu(即時切換)等等不同創意巧思,且可以客製化圖片讓機器人看起來有更不一樣的特色,也讓對話是互動並不限於對話,而圖片來讓使用者可以更直觀地去使用機器人。
  • 一個 Chatbot 可以設定 1000 組的功能選單
  • 針對不同 user ID 顯示不同功能選單 Rich menu 可以自己設計圖片並上傳,再透過 JSON 的樣式去設定圖片區間要進行各種用途,這邊使用 Youbike 小幫手為範例,設定很多相關的設計,並設計上下頁的選單提供像是 APP 的操作。

限制

  • 圖片格式: JPEG、PNG
  • 圖片尺寸: 2500x1686, 2500x843, 1200x810, 1200x405, 800x540, 800x270
  • 圖片大小: 1 MB

步驟

  1. 先準備一個圖片
  2. 對這個 API 下圖片每個位置要做什麼事 https://api.line.me/v2/bot/richmenu
  3. 接著上傳圖片給 LINE https://api.line.me/v2/bot/richmenu/richmenu-{id}/content
  4. 設定預設 https://api.line.me/v2/bot/user/all/richmenu/richmenu-{id}

結論

有很多的文章都有介紹過類似的功能,這邊簡介一下限制以及下篇要做的步驟~


繼續閱讀

Day12 - LINE 的服務都玩了,怎麼能忘了 Message api (Bot) 呢? (3) - 應聲蟲實作

實作

新增兩個 LINE Channel key 至 .env

LINE_CHANNEL_TOKEN=
LINE_CHANNEL_SECRET_KEY=

接著加入 LINE 的 python SDK 至 requirements.txt

line-bot-sdk==1.12.1

透過 pip 安裝一下

pip install -r requirements.txt --user

在 controller/ 底下新增一個 message_api_controller.py 並輸入以下程式

from flask import Flask, request, abort
from flask_restful import Resource
import json
import os
from linebot import (
    LineBotApi, WebhookHandler
)
from linebot.exceptions import (
    InvalidSignatureError
)
from linebot.models import (
    MessageEvent, TextMessage, TextSendMessage,
)


class LineMessageApiWebhookController(Resource):
    def post(self):
        line_bot_api = LineBotApi(os.getenv('LINE_CHANNEL_TOKEN'))
        handler = WebhookHandler(os.getenv('LINE_CHANNEL_SECRET_KEY'))

        # get X-Line-Signature header value
        signature = request.headers['X-Line-Signature']

        body = request.get_data(as_text=True)
        event = json.loads(body)
        print(event)
        try:
            handler.handle(body, signature)
        except InvalidSignatureError:
            print(
                "Invalid signature. Please check your channel access token/channel secret.")
            abort(400)

        token = event['events'][0]['replyToken']
        if token == "00000000000000000000000000000000":
            pass
        else:
            line_bot_api.reply_message(token, TextSendMessage(
                text=event['events'][0]['message']['text']))
        return 'OK'

用任何語言都會看到回傳會有 200, 'OK'...回傳的成功訊息,在內部系統的部分在處理時要考慮到回傳時間的問題,一般來說如果回傳的時間大於 1 秒的話就有可能失效,或許有些朋友有測試過大於 1 秒也可以,但最好還是於時間內回覆哦!

以下圖片來自 https://engineering.linecorp.com/zh-hant/blog/line-device-10/

https://engineering.linecorp.com/zh-hant/blog/line-device-10/

接著在 api.py 加入下面兩段 code,新增一個webhook的路由

from controller.message_api_controller import LineMessageApiWebhookController
api.add_resource(LineMessageApiWebhookController, '/webhook')

這邊可以使用sls wsgi serve + ngrok去搭配做測試

接著就部署啦

sls deploy

現在在接這種第三方的 API 時最好都使用 https,而使用 Serverless 的好處就是 AWS 在部署完之後會送你一個含有 SSL 的網址~

把網址貼到 webhook URL 上並在尾端加上 /webhook

測試結果如下

結論

這次整合了以前寫的 Repo,加入了.env讓我在抓下來使用時也更方便,也整合成 Restful 格式讓之後有需要的人在看 code 時可以更容易理解了~

專案也會持續更新,更多詳情可以 follow 我的專案 aws-python-line-api

繼續閱讀

Day11 - LINE 的服務都玩了,怎麼能忘了 Message api (Bot) 呢? (2) - 申請一步步

前言

今天會帶大家如何一步一步的建立 Message api 以及需要注意設定的地方。

實作

  1. 首先先到 https://developers.line.biz/zh-hant/ ,點選右上角的大頭貼並選擇 Add new provider
  2. 接著在 Provider name 填上自己的想要的名稱
  3. 再次確認
  4. 選擇想要使用那種服務,這邊我們就選擇Message API並按下Create Channel
  5. 接著就開始填寫自己的機器人(channel)所需要的資訊嚕!
  6. 這邊我們需要填寫的內容為 6.1. 大頭貼(option) 6.2. 名稱 App name (required) 6.3. 描述 app description (required) 6.4. 類別與子類別 Catagory (required) 6.5. 信箱 Email address (required) 6.6. 政策網址 Policy URL (option) 6.7. 服務條款網址 Term of use URL (option)


  1. 當填寫完之後的寫一步最後會需要勾兩個服務說明確認的選項並按下 Create
  2. 如此一來就看到自己百般折騰建立出來的 Message api 啦
  3. 滑到最下面,首先掃描 QR code 加入自己機器人的好友讓接下來好測試,接著按下圖篇右手邊的 Set message 進入調整頁面
  4. 進入之後到下面,將歡迎訊息 & 自動回應 停用,並將 Webhook 打開,讓之後的串接可以透過 Webhook 打到 Serverless 上,若是前兩個回應的選項沒有關的話即使 Webhook 有啟動也會因為優先權問題被擋下來哦!
繼續閱讀

Day10 - LINE 的服務都玩了,怎麼能忘了 Message api (Bot) 呢? (1) - 介紹

簡介

LINE 在 2016 年 9 月底發表了 Messaging API 功能,用戶可以透過 Messaging API 將自家的服務內容串聯到 LINE@ 上。

接著在 2019/04/18 之後 LINE@ 2.0 正式上線,在 5/22 後有升級的選項並會陸續更新,升級完的官方帳號也可以申請專屬 ID、進行帳號認證。

我認為比前一版本的最大的好處是在好友無上限的這部分,以前只能有 50 位好友,若一般開發者的機器人好不容易上線了並開放測試時被限制住,除了再開一隻機器人或是其他方法就超麻煩,現在好友無上限了,就不會有上述的問題了。

若您以前有開發過的機器人到現在還沒升級的話,可以參考 -> URL

這邊需要注意 1 on 1 聊天與 Messaging API 是無法同時使用的,但可以在後台切換看要使用哪種模式與顧客互動。對話記錄也會保存在各自的模式下,若要查看完整的對話記錄的話會建議以固定模式與顧客進行互動哦!

主要的功能環繞在以下兩點

  1. Push mode: 主動推播訊息給用戶,2.0 每個機器人都有 500 則免費推播則數,超過則數的話可以參考以下的價目表:

  1. Reply mode: 這個模式是接受使用者的訊息並透過 webhook 打到伺服器上讓伺服器去做對應訊息的處理,重點是它是是免費、免費、免費的!所以若能引導使用者去輸入訊息的話用這個模式是不用錢的哦 🎉

Message API 支援以下格式

  • Text message
  • Sticker message
  • Image message
  • Video message
  • Audio message
  • Location message
  • Imagemap message
  • Template message
  • Flex message

詳細內容可以參考 LINE doc

line sample 1 line sample 2

回傳格式

Message API 回傳格式都是一個陣列的格式,一開始在接的時候都沒注意到一直瘋狂出錯,事實上這樣陣列對 Server 有個好處就是當一次需要送較多訊息時格式會比較統一,只是對於有潔癖的開發者來說每次都要多打[0]會覺得有點髒 🤣

{
  'events': [{
    'replyToken': '00000000000000000000000000000000',
    'type': 'message',
    'timestamp': 1568983962754,
    'source': {
      'type': 'user',
      'userId': 'Udeadbeefdaaaaefdeadbeefdeadbeef'
    },
    'message': {
      'id': '100001',
      'type': 'text',
      'text': 'Hello, world'
    }
  }, {
    'replyToken': 'ffffffffffffffffffffffffffffffff',
    'type': 'message',
    'timestamp': 1568983962754,
    'source': {
      'type': 'user',
      'userId': 'Udeadbeeaaaaefdeadbeefdeadbeef'
    },
    'message': {
      'id': '100002',
      'type': 'sticker',
      'packageId': '1',
      'stickerId': '1'
    }
  }]
}

結論

以前剛開始接 LINE Message API 的時候都覺得他的文件不太人性,更新到現在文件內容也越來完整,讓開發者在開發的過程中不用再為了找不到文件而放棄了(我以前就是 🤣),下一篇將會帶來如何申請一隻機器人到如何建立一個 webhook API 到 AWS 上

參考

功能介紹】Messaging API LINE message template

繼續閱讀

Chatbot meetup #12 心得分享 - 2019/09/17

前言

本次小聚是 COSCUP 之後的第一場,趁著熱血玩兩個大型研討會的空檔舉辦了這次的小聚,先感謝各位的參與,別忘了定期關注社群,我們會在上面放出第一手 chatbot 小聚消息。 Chatbot Developers Taiwan

小聚開始

開場由 Evan Lin 為大家帶來 LINE 的第一手消息,首先是 LINE 不在信義區啦(抓錯重點),是 Flex message 更新啦 ,如下圖所示,他可以做出更多種不同的應用了,也有些實例可以供大家參考 🎉

Flex Messages 另外出了一個模擬器,如果再使用 Flex message 不是太熟悉整個主體的話可以參考 ⬇️,目前還在 beta 階段,若有問題直接寫信去 “問候“ 一下 🤣 Flex Message Simulator

中文版的文件也上線了,可以到官網去搜尋哦!

議程

簡報連結

第一位由 LAE — 郭冠宏 (ggm)為我們介紹 Confacts 訊息查證系統,在裡頭把使用者分為兩類

  • 收消息的人 🙋‍♂️
  • 編輯訊息的人 👨‍💻

在上面看得到的資料都是透過 「工人智慧」誕生的,所以看到每一個真假消息都要歸功於這些編輯們 🎉 而 Confacts 也秉持的 g0v 開放原始碼的精神把東西都 open,供大家去使用,像是 美玉姨 以及 趨勢科技防詐達人 都是使用他們的資料庫建立出來的,如果有需要請去找 GGM 大大~ 上次參加 g0v 小聚有稍微了解 Confacts 是做什麼的,聽到這次的講題就讓我更深入了解整個運作流程了,光想到要控制狀態就覺得苦惱,也因 Confacts 讓我瞭解到更多詳細流程~以下是他們的網站,討厭看到人家亂轉發消息嗎?直接加入消息並一起打造工人智慧的平台~ 了解更多: https://cofacts.g0v.tw


接著由 酮好的創辦人 撒景賢 為我們帶來 聊天機器人與社群經營,主要是透過機器人來幫忙定時推播訊息給讓使用者下單後會收到提醒訊息而不會跑單,也建議大家把機器人就定義他為機器人,別讓使用者誤會他是一個活生生的人,要定義好自己的機器人取向,最後提到了一個問題就是他認為工程師的毛病就是想要產品做完才去找市場,可能的意思是且戰且走(?),或許直接吸收市場的經驗也是個不錯的方法(筆記)。


再來就是台北商業大學的 溫明輝 教授為我們帶來 商用聊天機器人 UX 的十三種設計原則

商用聊天機器人 UX 的 13 個設計原則 (heuristics)

首先介紹了微股力與記帳雞上面應用中的實例以及一些與使用者互動的案例分享,兩隻機器人都被 LINE 收為官方帳號囉!有興趣的朋友可以去搜尋一下~ 🔍

  1. 確認目標族群的關鍵需求:要找到用戶滾動增長的點
  2. APP 的成功是無法直接複製的:找到 app 上的缺點去卡市場定位點。
  3. 人們可能並不想「聊天」:這邊分享的案例是讓 記帳雞 出來湊人鬧目的是讓使用者記得他並去引導記帳 。
  4. 擬人化 vs 機器主張定位:若在一開始實作時是以特定主題去做開發的話就該讓他是對應功能機器人,別想著機器人可以做原本的事又要去回應使用者的任何話。
  5. 對話是互動並不限於對話(dialog):有時候適時地在圖片上加入一些訊息也能讓使用者去自然觸擊。
  6. 讓使用者隨時握有主導權:因為人們可以隨時關掉它,就也意味著使用者的抗拒心不會那麼大,主要還是別讓使用者封鎖他~
  7. 不一眛追求介面的簡潔性:根本的需求滿足之後使用者還是會去用,把互動愉悅感弄出來,這邊例子是放在群組使用久了,有些使用者會自然地去記憶這他的指令。
  8. 考量對話訊息的時間堆疊:使用者因為訊息過多而演變成去點訊息已成敷衍的行為了。
  9. 避免一視同仁的廣播訊息:這邊分享的做法是透過工具去紀錄使用者的互動軌跡,且每個每個感應區塊都會有相對應的 tag,當後台在準備做推薦時可以針對分眾去做對應內容的推播。
  10. 用數據驅動的同理心:將機器人加入群組並紀錄使用者打過的指令,當今天已經封鎖的使用者在特定情況下看到群組裡面有其他使用者在打相關指令時或許會勾引出以前的興趣藉此解除封鎖並回歸。
  11. 用 UI 來補償 AI 的能力極限:藉由專家寫的文章以及當使用者點選到特定的內容時會直接把文章透過 LINE 嵌在訊息下方,讓使用者透過 UI 去看到相關內容,讓他看起來有點類似 AI。
  12. 個人化是 chatbot UX 極致:或許是因為客製化的關係所以當然個人化是最好的 🤣
  13. chatbot 是無所不在的意識:隨著運算越來越快,人可以隨心所欲去取用環境資訊,需要有個個人化服務,就能透過 chatbot 來搜集並歸納出對應的訊息內容。

閃電秀

最期待的其中一個部分就是閃電秀啦,因為每次閃電秀不僅可以展謝自己的練習成果,也可以發現到其他使用者對於同樣開發內容所想出不一樣的應用! 第一個由 斑斑 為大家帶來市容幫手,主要是因為現在各種公家機關幾乎都用 LINE 在做聯繫,但一個里長擁有上百個群組會造成很多收集訊息上的困擾,那這邊講者就希望透過提案的方式來尋求參與者一起參與這個提案,有興趣的可以參考一下他的簡報哦!

接著就是由小弟我帶來的閃電秀,這次主題是使用 kamigo 打造的一個紀錄健身記錄的機器人,透過 Restful 格式的內容以及對應網址的樣式做出一個類似網頁版的機器人來記錄成績,以下是我的簡報以及 Github,有興趣可以參考一下 😃

Muscle man light talk 20190917 in chatbotTW from Jia Yu Lin
> [louis70109/muscle_man](https://github.com/louis70109/muscle_man)

這是一個基於 kamigo 實作 LINE bot 來紀錄重訓數據的 肌肉仔 聊天機器人 在健身的過程中飲食固然重要,但往往訓練的人都是透過通靈的方法來選取適合自己的訓練重量,而透過數據的記載則是突破不可或缺的因素,因此產生了這個…

再來由 Fly Chang 帶來的在宅醫療服務,主要是幫助各地需要居家醫療的人讓他們有資源可以透過地圖的方式去找到,並想整合機器人提供在宅醫療診所情報、長期照護、藥物使用、衛教資訊…等等的資訊,有興趣的朋友可以點選以下網址去觀看哦! 台灣在宅支援診所聯盟 HSCA 在宅支援診所聯盟是秉持開放、共享、共學精神的網路平台社群。 資源地圖邀請在宅醫療團隊提供服務資訊,讓診所服務可以變得更透明、更公開,產生正面的循環。

最後由 kevin 介紹一下有關於 dialogflow 串接 LINE bot 的簡單介紹,並順便推廣了 voice hackthon,有興趣的朋友可以參考一下哦

若是 dialogflow+LINE bot 可以參考我之前寫的文章 Chatbot Taichung #2 工作坊心得分享

結論

雖然每次下班都從台中直接殺上台北辦小聚很累,但往往在小聚結束時總是收穫滿滿,因為大家的熱情交流讓我學到了不少東西,謝謝各位的支持與參與,小弟拜託大家有報名要來啊~看在火山孝子的份上(咦?)就來參加吧 🙏 Chatbot TW 很樂意接收到不同的意見,若有好的建立不好意思公開可以私訊我哦!很樂意為大家解答 😁

繼續閱讀