標籤

Chatbot

LINE 開發者社群計畫:LINE API Update: 上半年度整理 @ Chatbot meetups 31

前言

大家好,我是 LINE Taiwan 的 Technology Evangelist - Nijia Lin。這次很開心受到 chatbot 社群的邀請,參加了 "Chatbot meetup 聊天機器人小小聚 31 @ Gather Town" 的聚會活動,並且分享 LINE API 更新心得。在此也跟各位分享本次參與的紀錄,並且也希望透過社群分享的力量能夠讓聊天機器人的開發動能更加的盛大。

繼續閱讀

LINE 開發社群計畫: 中部人的聊天機器人小小聚第 16 場心得分享

前言

大家好,我是 LINE Taiwan DevRel 團隊的 NiJia Lin,感覺已經許久沒有在社群上與大家分享相關的內容,本次受邀請參加「2021/07/14 中部人的聊天機器人小小聚 第 16 場」,能夠透過線上的方式帶各位會眾分享從最基本的 LINE Bot 操作開始認識,到一些大家常常會需要的 API 範例,再接著 Platform API 的更新內容,對於當天內容想回味的讀者們,趕快往下繼續看吧!

繼續閱讀

藉由 Flex Message Simulator 實現並發送測試用 Flex Message

前言

平時開發 LINE Bot 相關功能時,我們都會使用許多的文字、貼圖、圖片...來實現一個服務所需要的對話流程,而在開發許久之後,總想為自己的 LINE Bot 添加更多有特色的內容,不論是在文字中加入特殊符號、發送對應情境的貼圖、影片..等等。而在 LINE Bot 中有個可以讓開發者自由添加各種特色的訊息選單 - Flex Message,那這個功能有什麼特別的呢?以及我可以如何快速測試使用這功能呢?以下就讓我為各位介紹介紹。

索引

繼續閱讀

Chatbot Developer Meetup - LINE API Platform Update Sharing

前言

透過每個月持續的分享,將 LINE 平台上有更新的內容透過更生活化的方式整理給大家,希望透過此篇文章讓大家認識一樣 LINE API 的魅力!如果已經有正在開發的聊天機器人,抑或是有不同的搭配技巧,都歡迎至社群或是各大討論區分享你的技術吧!

繼續閱讀

【翻譯】如何個性化在 LINE 中顯示 Rich Menu 以匹配用戶的語系

翻譯來自泰國的 Jirawatee 的文章

在過去的一年中,Rich Menu 上的文章非常受歡迎,它的優點是在用戶聊天頁面上顯示重要的**選單(Menu)**並可以選擇各種操作,降低用戶使用官方帳號的門檻。而對於擁有 LINE 正式帳戶或 LINE Chatbot 的用戶而言,加上創建步驟是相當簡單的,可以透過 Official Account 後台或是讓具有程式能力的朋友透過呼叫 API 的方式建立 Rich Menu,若能這麼容易就建立 Rich Menu,那麼成為每個帳戶必須具備的基本功能也就不足為奇了。

本文中我將邀請所有人開發一個 Rich Menu,以便能夠顯示出來每個用戶在手機上使用的語系。首先必須知道的是 “該用戶使用哪種語言?”,我們可以透過哪種方式獲取用戶手機上的語系,早期我們只能取得 userIddisplayNamepictureUrlstatusMessage,而現今 LINE 已在用戶的個人資料訊息中添加了一個 language 參數以供使用。

到目前為止,我們已經準備好了想法。因此,讓我們看一下開發它的步驟:

  1. 準備使用 Cloud Functions for Firebase 開發的 LINE Chatbot
  2. 準備泰語英語的 Rich Menu
  3. 建立條件以獲取 Follow 類型 Webhook 的事件
  4. 從用戶個人資料中取得 “language” 參數
  5. 讓用戶匹配對應語系的 Rich Menu
繼續閱讀

LINE 開發社群計畫: 202103 LINE Platform API 更新與 Chatbot 社群心得分享

前言

大家好,我是 LINE Taiwan 的 Tech Evangelist - NiJia Lin。這次很開心受到 chatbot 社群的邀請,參加了 "Chatbot meetup 聊天機器人小小聚 28 @ Onramp Studio" 的聚會活動,過了一個農曆年,相信很多人也很期待三月 LINE Platform API 的新功能,藉由在社群上與大家分享 LINE API 更新與個人開發的心得,也希望透過社群分享的力量能夠讓聊天機器人的開發動能更加的盛大。

由於 Chatbot Meetup 本身屬於社群自主性的活動,裡面也有許多社群朋友所贊助的閃電秀。裡面的所有內容也是相當的難得與有趣。也希望能夠透過本篇文章讓大家稍微了解 Chatbot Meetup 社群閃電秀的魅力。

這次就由我用文章帶大家了解一下近期有什麼有趣的更新內容吧!

繼續閱讀

【翻譯】嘗試透過貼圖建立 Sticker-Driven Conversations 的 Chatbot

翻譯來自泰國的 Tan 的文章

大家好,我希望 2021 年對每個人來說都是美好的一年 😃,本次會分享一篇對於有在開發 LINE Chatbot 朋友相關的有趣文章。

12 月時,LINE 更新了 Messaging API 的新功能(新聞連結),方法是當用戶將貼圖發送給 Chatbot 時,將會從 Webhook 的 keywords 中找到貼圖的關鍵字訊息。

繼續閱讀

做 LINE Chatbot Side Project 可能會遇到的一些眉角

前言

跟在實事上的任何作品我相信都紅很快,如 口罩地圖、動森揪團系統...,只是這些題目紅的時候我個人沒有那麼大的憧憬去做相關題目。去年原本有東南亞職業聯賽(ABL),我也做了一隻 Chatbot,只是當時用比較土炮的方法用 CSV 輸入議程,每次查詢時都進 CSV 查詢,但也適逢疫情關係而聯盟停辦進而機器人荒廢。但在最近出現了一個籃球新聯盟 P+ league,而我既然學 Python 也一段時間了也該拿來試試看爬蟲,因此下定決定開爬,以下會記錄一下在這過程中我有遇到的問題。

繼續閱讀

【翻譯】使用 2020 Flex Message 的 10 個新功能 - 讓您在 LINE 的訊息設計更有彈性

翻譯來自泰國的 Jirawatee 的文章

經常許多開發人員會在 LINE 中設計 Flex Message,讓不同設備的使用者可以收到美美的訊息。在 2020 年也就是去年,Flex Message 開發團隊聽到各位開發者的聲音了,發布了比以往更輕鬆並能將您的想像力轉換成 LINE 樣式的版本。

若您對於 Flex Message 不熟悉,建議先了解這篇文章

繼續閱讀

LINE 開發社群計畫: 202103 Chatbot 社群心得與彈幕分享

前言

大家好,我是 LINE Taiwan 的 Tech Evangelist - NiJia Lin。這次很開心受到 chatbot 社群的邀請,參加了 "Chatbot meetup 聊天機器人小小聚 27 @ Onramp Studio" 的聚會活動,並且分享 LINE API 更新與個人開發的心得。在此也跟各位分享本次參與的心得,並且也希望透過社群分享的力量能夠讓聊天機器人的開發動能更加的盛大。

由於 Chatbots Meetup 本身屬於社群自主性的活動,裡面也有許多社群朋友所贊助的閃電秀。裡面的所有內容也是相當的難得與有趣。也希望能夠透過本篇文章讓大家稍微了解 Chatbots Meetup 社群閃電秀的魅力。

這次就由我用文章帶大家了解一下近期有什麼有趣的更新內容吧!

繼續閱讀

開發結合 LINE Chatbot 的簡易彈幕系統

前言

去年下半年時於 COSCUP 2020 的閉幕閃電秀中與 Chatbot 社群小聚看到社群朋友展示使用 LIFF 來發射彈幕覺得有趣又回憶滿滿,從以前在看ニコニコ動画時就很常看到彈幕出現在影片中(甚至有時候彈幕還比影片還好笑),而透過這樣的互動讓觀眾並及時回饋,拉近活動(影片、直播、演唱會...)與觀眾的距離。想到去年因為疫情需要把社群聚會改成線上,剛好在前一陣子搜尋到這篇文章,以下就使用 Chatbot 搭配文章在使用 OBS 來使用它!

繼續閱讀

2020 MOPCON 心得分享

前言

大家好,我是 LINE Taiwan Technology Evangelist - NiJia Lin,在大概三、四月那投稿了 MOPCON,經過漫長的等待在 10/24 這天有機會被邀請至濁水溪以南最大的技術研討會,除了與大家分享實作 Lotify 以及 Swagger 的使用經驗,並帶大家多認識研討會所帶來的魅力!

繼續閱讀

LINE 開發社群計畫: 202010 Chatbot 社群心得分享

前言

大家好,我是 LINE Taiwan 的 Tech Evangelist - NiJia Lin。這次很開心受到 chatbot 社群的邀請,參加了 "Chatbot meetup 聊天機器人新手小聚 24 @ Gandi" 的聚會活動,並且分享 LINE API 更新與個人開發的心得。在此也跟各位分享本次參與的心得,並且也希望透過社群分享的力量能夠讓聊天機器人的開發動能更加的盛大。

由於 Chatbots Meetup 本身屬於社群自主性的活動,所有內容也是相當的難得與有趣。也希望能夠透過本篇文章讓大家稍微了解 Chatbots Meetup 社群的魅力,讓更多朋友了解到打造自己的聊天機器人是如此讓人開心的事情。

繼續閱讀

LINE 開發社群計畫: 2020 九月 LINE 平台更新整理與 LIFF ShareTargetPicker 案例分享

前言

大家好,我是 LINE Taiwan 的 Tech Evangelist - NiJia Lin。這次很開心受到 chatbot 社群的邀請,參加了【Chatbot meetup 聊天機器人小小聚 23 @Onramp Studio】的聚會活動,前往且分享 LINE API 更新與個人 LINE Bot 開發心得,透過持續開發增加技術的敏銳度。在此也跟各位分享本次參與的心得,並且也希望透過社群分享的力量能夠讓聊天機器人的開發動能更加的盛大。

繼續閱讀

【翻譯】結合 LINE Chatbot 與 Spotify API 創建一個很酷的自動點唱機!

原文出自 มาสร้างตู้เพลง Jukebox เท่ห์ๆด้วย LINE Chatbot ผ่าน Spotify API กัน!

今天我將透過這篇文章帶大家在 LINE 中創建聊天機器人 “Nickelodeon”。會實作此聊天機器人是因為有時會有朋友來我家做飯,我會同時在家中播放音樂。但是朋友們會一下這首一下要求那首。所以我有了新主意:嘿,不如讓 Chatbot 擔任我的助手,幫助我脫離 555+ 種 DJ 身份。而實際上這個 Chatbot 可以應用於其他情境,例如在辦公室中或開車和朋友一起旅行等。

點唱機是什麼?

繼續閱讀

【Chatbot Taiwan 20】這次參加我又學到了什麼呢 @ LINE

前言

疫情穩定並解封後終於迎來期待已久的第 20 場小聚,且這次更是來到我最喜歡的熊大寶殿 - LINE 裡頭辦活動,感謝場地方贊助熊大、美食、飲料讓大家吃飽喝足,並且我們邀請了許多大大來分享超超超精實的議程!!

社群:https://www.facebook.com/groups/chatbot.tw/ 共筆:https://hackmd.io/@chatbot-tw/meetups-020 直播回顧:https://youtu.be/VxcpDFHWOb8?t=2146

那接下來就分享本次我參加的心得囉!🙂

繼續閱讀

如何建立一個跨平台的 Twitch 機器人

前言

在去年大約五月的時候寫了一隻 Twitch 的 LINE bot,不過後來似乎 Twitch API 有改版讓機器人壞掉了,最近又有需要一隻機器人幫我查詢,就開始去翻一下 Twitch 官方文件,碰巧逛到這個 Community Resources page,看到了好多資料在裡面,就索性來重寫囉!

因為 Twitch package 都是 Typescript,因此本篇的範例都會是 Typescript 哦!

⭐️ 本專案: Twitch-Bot

加好友

  • LINE

    QRcode
  • Messenger

    QRcode

準備

yarn add twitch
// or...
npm install --save twitch

[2020/06/08 修正] 申請完後將 oauth: 後的 key 透過官方文件的 Validating requests 指令放入 access token 中取得 Client_id,如下:

curl -H "Authorization: OAuth <access token>" https://id.twitch.tv/oauth2/validate

本專案的 TWITCH_CLIENT_ID 的環境變數就是這個回傳值中的 client_id

這部分可能會需要去 twitch 設定 -> 連結 去綁定 Oauth 的樣子,再麻煩各位注意一下。

  • 平台

    • 需要有個 Facebook 粉絲頁
    • LINE bot
  • 資料庫

    • MongoDB: Heroku 上為 mLab

實作

Clone 專案下來看 ➡️ https://github.com/louis70109/Twitch-Bot.git 首先把.env.sample改成 .env,並將對應的MessengerLINE以及Twtich key 放置對應的位置

跨平台

跨平台含本地總共會有三個:

  • Console (本地端)
  • Messenger (線上)
  • LINE (線上)

Console 是 bottender 的特色之一,可以在終端機上直接測試 Bot 的行為,會先用此模式先測試路由的回覆是否正常。

接著要讓同樣的 Action 可以導到 Messenger 以及 LINE,bottender 提供了可以設計針對特定平台處理 Action,如下:

import { platform } from 'bottender/router';
export default async function App(): Promise<void> {
  return await router([
    platform('line', LineAction),
    platform('messenger', MessengerAction),
  ]);
}

透過platform來把特定平台的訊息到打對應的 Action (如 LineActionMessengerAction),在傳遞 Action 過程中會有一個 context 的變數,裡頭會有底層幫忙整理好的參數:

ConsoleContext {
  ...
  _session: {
    _id: 5e08a45c719a1335aeae39bc,
    id: 'console:1',
    _state: {},
    lastActivity: 1578743328620,
    platform: 'console',
    user: { id: '1', name: 'you', _updatedAt: '2019-12-29T13:04:25.633Z' }
  },
  ...
}

_session 裡有個 platform 的參數,只要判斷這參數就能知道訊息是來自哪個平台,而user則是被正規化完後的使用者資訊 (這兩個參數為目前為止我最常用的參數)

遇到的問題

由於長期使用 LINE flex message 的 button template (參考),這按鈕事件可以設定按鈕上的文字並設定按下去回覆的字串。

而 Messenger 的按鈕就跟人家不一樣了(參考)!他沒有 LINE 的這個事件,差不多的事件只有 postback,在路由上就得特別處理這個事件,為了讓跨平台所使用的內容要統一,在訊息進 router 時就要處理掉:

import { messenger } from 'bottender/router';
import { withProps } from 'bottender';

async function LineAction(context): Promise<void> {
  return await router([
    ...
    text(/^[f|F]ind\s*(?<topic>.*)$/, searchGame)
    ...
  ]);
}

async function MessengerAction(context): Promise<void> {
  const payload = context.event?.postback?.payload;
  return await router([
    ...
    messenger.postback(
      withProps(searchGame, { match: { groups: { topic: payload } } })
    )
    ...
  ]);
}

這邊找到 bottender 官方文件中函式專門在處理 Messenger 的 postback 事件,並搭配withProps來幫忙把參數 postback 收到的參數傳進對應 Action。

為什麼會要把傳入的參數設定成巢狀 object -> { match: { groups: { topic: payload }}},因為在設計初期本是希望進來的內容都是從text傳進來,意指都是透過使用者打字進來,那 bottender 都會透過傳 match 參數進來(參考),而解析完 Messenger 的 postback 時也得需要符合這樣的格式,因此就這樣設計,當然如果有更好的設計歡迎送 PR 🎉。

Chatbot MVC

Model

  • Twitch: 這裡我設定 userId 為 unique,針對每個平台有自己的 id,每個平台都可以綁定 twitch 帳號,進而去做相關操作。
  • Game: 因為 Twitch 套件這部分是read only,因此我就在建立一個一樣的 model 來處理。

Twich id 是全開放的,只要知道其他使用者的 id 就可以查詢某些功能(參考),這邊我就使用查詢追隨的功能。

View

這裡設計上只要屬於送出訊息相關的樣板(FlexGeneticText)接放在此。

  • common: 作者資訊(author) 以及 幫助我(help) 的相關
  • LINE: Flex message 相關樣板
  • messenger: Genetic template 相關樣板

Controller

在呼叫 twitch api 出來的資料有時候會大於 LINE 以及 Messenger 的樣板限制,因此所有計算服務都會放在這邊,剛好就搭上 Controller 的對應功能。

  • common: 負責將 controller 處理完的內容送至 View
  • twitch: 處理最多人看得遊戲以及搜尋指定遊戲
  • user: 處理綁定以及查詢追隨

結論

基本上做到這如果之後要擴增Telegram或是Slack都可以很快速擴充,只要把相對只要把相對的 Action 加在 App.ts 就行了。

藉由這次也學到跨平台的機器人真的不好做,每家廠牌的行為都不一樣,所幸 bottender 已經處理大部分平台間的問題,接著我們只需要將欲輸出的內容處理好對應框架所提供的功能去回傳給使用者,讓整體的開發可以更專注在開發功能上並更有彈性。

歡迎各位幫我按個星星 ⭐️➡️ https://github.com/louis70109/Twitch-Bot 也一起支持開源專案 bottender⭐️➡️ https://github.com/Yoctol/bottender

繼續閱讀