2017/12/22

第三天:作一隻最簡單的 Line 聊天機器人( 2018 iT邦幫忙鐵人賽-只要有心,人人都可以作卡米狗 )

markdown 上一篇:[第二天:認識卡米狗](http://etrex.blogspot.tw/2017/12/2018-it_21.html) 我們今天來作一個最簡單的 Line 聊天機器人,要完成這個目標,我們連一行程式都不用寫。 # 建立 Line Messaging API 帳號 ### 第一步:開啟 [Line developers 首頁](https://developers.line.me/en/) [https://developers.line.me/en/](https://developers.line.me/en/) 首頁長這樣: ![](https://1.bp.blogspot.com/-Q-FbGxIUGKA/WjvjabpyopI/AAAAAAAA_Mg/uR90xn79A6MpzFnSAnyeEfaEmCQmaZvCwCLcBGAs/s1600/1.jpg) 我們把注意力放到右上角,看到那顆 Log in 按鈕了嗎?勇敢地按下去。 他說:請輸入你正確的名字(Name)跟信箱(Email address)。 ![](https://3.bp.blogspot.com/-t-TLJYJlH6c/WjvjzL71RzI/AAAAAAAA_Mk/lTVxsUUIqngfvrbdyAu8xdLAc6cuspnOgCLcBGAs/s1600/3.jpg) 填好後就可以按下 Confirm。 ![](https://3.bp.blogspot.com/-tbDE9osdS9A/WjvkOR7CN_I/AAAAAAAA_Mo/kPTh9XENv2YWOXGQZpKOIQHUH0k_JJ3kwCLcBGAs/s1600/4.jpg) 然後他要求你再次確認你沒有亂填,當然我相信你沒有亂填,這裡直接按下右邊的 Register 就可以。 ![](https://2.bp.blogspot.com/-CE2pcGfU5zI/Wjvkh_qcuFI/AAAAAAAA_M4/slTdl1Cfr6wA4dZ-_7b46gNGECj2RZRZACLcBGAs/s1600/5.jpg) 恭喜你成為一個開發者,這邊我們直接按下 Start。 ![](https://4.bp.blogspot.com/-VFTP-xMFMVs/Wjvkvf-z7zI/AAAAAAAA_M8/-cWWsfGauO0r_Btz7WZT5-PMMuNxbIsGQCLcBGAs/s1600/6.jpg) 玩到這裡你應該會注意到一件事:如果畫面上有綠色按鈕,按下去就對了。所以這裡我們按 Create provider。 ![](https://2.bp.blogspot.com/-mwqBvzbgpGQ/WjvlKyqHD9I/AAAAAAAA_NM/L9Bh8GpaNlw9rwPCGwsNchiAhAmzI0vzgCLcBGAs/s1600/7.jpg) 如果你有開公司,這裡填公司名字。沒有開公司的話這裡就填你的名字,填完按 Confirm。 ![](https://4.bp.blogspot.com/-lHbCHW5D4Xo/Wjvlh_1IFjI/AAAAAAAA_NQ/cDnf8GYDQpo3vKUiv0sg30C_xPu7WBrWQCLcBGAs/s1600/8.jpg) 又是再次確認畫面,按綠色的 Create。 ![](https://2.bp.blogspot.com/-c-rjugY46zA/Wjvlsh_O4II/AAAAAAAA_NY/lD3mrZYdmBcSy7D5ozkDkaJk6TBE7_e2gCLcBGAs/s1600/9.jpg) 哇!這裡有三個綠色按鈕,該按哪個呢?答案是按右邊的 Messaging API。 從這裡開始,我們要填入的是聊天機器人的相關資訊。 ![](https://1.bp.blogspot.com/-5g-4FH5w5Ag/WjvmGEiIlbI/AAAAAAAA_Nk/xiHp22l-mLo0q-dnKdB7pstcuA9h7yEjwCLcBGAs/s1600/FireShot%2BCapture%2B54%2B-%2BLINE%2BDevelopers_%2B-%2Bhttps___developers.line.me_console.png) - App icon:聊天機器人的大頭照 - App name:聊天機器人的顯示名稱 - App description:聊天機器人的簡介,不過這欄隨便填就可以了,因為好像不會被任何人看見。 - Plan:Developer Trail 是試用版,Free 是免費版。當然試用版也是免費,差別在於試用版只能加 50 個好友,但是可以使用加值功能,建議選試用版。 - Category:這個隨便選 - Subcategory:這個也隨便選 - Email address:這裡填信箱 我的填完之後長這樣: ![](https://2.bp.blogspot.com/--dNYoVxXbeA/WjvoAon-89I/AAAAAAAA_Nw/ObsJqs5aZ4MIlNZjcgg08SjzY7K1Sbe9QCLcBGAs/s1600/FireShot%2BCapture%2B55%2B-%2BLINE%2BDevelopers_%2B-%2Bhttps___developers.line.me_console.png) 填好就可以按 Confirm。 ![](https://3.bp.blogspot.com/-p7UF3UsyPv0/WjvoVnbXKDI/AAAAAAAA_N0/x7W1IT9XHvkZJUegzqSg1oobD3i6EaN1ACLcBGAs/s1600/FireShot%2BCapture%2B56%2B-%2BLINE%2BDevelopers_%2B-%2Bhttps___developers.line.me_console.png) 不曉得為什麼, Line 很愛再次確認,這裡有兩個勾勾要打,先打勾再按 Create。 ![](https://1.bp.blogspot.com/-ZagOJ7nAP-U/WjvooSgKCrI/AAAAAAAA_N8/ek7ZMoudFnsdjKqhb-WV3KlSB1JhzijKQCLcBGAs/s1600/FireShot%2BCapture%2B57%2B-%2BLINE%2BDevelopers_%2B-%2Bhttps___developers.line.me_console_.png) 終於創好聊天機器人囉!點進去看看,這裡當然就不是點綠色按鈕了。 ![](https://3.bp.blogspot.com/-qsoDpFcQPgg/WjvpEFlvhOI/AAAAAAAA_OE/b6QQb-P_Ki0kZVSUHd2uAhfTMfiUXP4nACLcBGAs/s1600/FireShot%2BCapture%2B58%2B-%2BLINE%2BDevelopers%2B-%2Bhttps___developers.line.me_console_channel_1553191554_basic_.png) 訊息量很大,不過我們直接看到最後面有個 QR code of your bot。 # 加入聊天機器人為好友 拿起你的手機,作行動條碼掃描。 ![](https://4.bp.blogspot.com/-LiYmU1LxKB8/WjvqSWsu1EI/AAAAAAAA_OY/lVprNpBloJo8k-DKhCNqbCpn7408zp90QCLcBGAs/s1600/2017-12-22%2B00.52.31.png) 點綠色的加入。 # 傳訊息給這個聊天機器人 點進私聊畫面後會看到他傳了一個訊息給你: ![](https://2.bp.blogspot.com/-xmrpZ2rh_qk/Wjvra1zog1I/AAAAAAAA_O0/5YNRvId7_ygkhROxN-B3m82oedjckU9FQCLcBGAs/s1600/2017-12-22%2B01.09.06.png) 這是歡迎訊息(Greeting messages),隨便跟他說句話先。 你應該會注意到沒地方可以打字,這裡要先按左下角的鍵盤按鈕,然後再打字。 ![](https://3.bp.blogspot.com/-QXd0XPX_K_g/WjvraujGsLI/AAAAAAAA_Ow/eddpF62ohHQ4xuW2YYmSbpGDpmMfXLyyQCLcBGAs/s1600/2017-12-22%2B01.11.03.png) 這是自動回覆訊息(Auto-reply messages)。 最簡單的聊天機器人到此完成!!!! 但是要怎麼控制他呢? # 登入後台修改歡迎訊息 從這個網址可以找到剛剛創好的聊天機器人。 [https://developers.line.me/console/](https://developers.line.me/console/) 跟剛剛一樣,先點進去,最下面的 QR code of your bot 再往上一點: ![](https://2.bp.blogspot.com/-SvSwq297FOs/Wjvuf3yMMhI/AAAAAAAA_PU/PpgjOLDuLo0qfuriCGmBet6O3aMD3yepQCLcBGAs/s1600/1513877097033.jpg) 這裡可以修改歡迎訊息和自動回覆訊息,這裡我們先點下面的 Set message。 你有可能會看見要求登入的畫面: ![](https://2.bp.blogspot.com/-0YCapXyudU8/WjvvqSQSdHI/AAAAAAAA_Pg/kdhfFxWyzk0j_igOEHKJml-W6iEFDNh8ACLcBGAs/s1600/1513877366762.jpg) 或者直接進入招呼語設定頁: ![](https://4.bp.blogspot.com/-bhMw9mmLjFw/Wjvv-dGVuaI/AAAAAAAA_Pk/9ubyRV7LpcAIHA4iVlLBdCMmJRGcXEtJgCLcBGAs/s1600/1513877331470.jpg) 這裡是全中文的,是因為這裡已經是 Line@ 的後台,而不是 Line developer 的後台。Line developer 的後台目前還沒有作中文版。也就是說,我們剛創好的聊天機器人帳號,其實是一個啟用了 Line Messaging API 的 Line@ 帳號。 ![](https://3.bp.blogspot.com/-CiYWkeD94d0/WjvxONLSEEI/AAAAAAAA_Pw/sP9xaVbGPtIqDerrDeAN_GMVVlWCL1BWgCLcBGAs/s1600/1513877784112.jpg) 稍微改一下字之後按儲存。這裡我們需要測試一下剛剛的設定有沒有正確運作。 測試的方法是先封鎖聊天機器人。 ![](https://3.bp.blogspot.com/-9oOk19pT9DQ/Wjvx0jr5npI/AAAAAAAA_P8/ccrA91tXnPg1HyF_Y_WiiRRJcj2wN5FnwCLcBGAs/s1600/111.png) 再解除封鎖。 ![](https://2.bp.blogspot.com/-8N9_qFnxxZM/WjvyE1VdGYI/AAAAAAAA_QA/UP2a2pPYM20k2_Ja75wXPvDSiDSlK0GhQCLcBGAs/s1600/112.png) 成功! # 修改自動回應 我們不用回到 Line Developer 後台,直接點左邊的自動回應作設定就可以。 ![](https://4.bp.blogspot.com/-dZk9bU07X6Y/WjvypLqIdaI/AAAAAAAA_QM/KbssBe7elJMLrQ3q4VoQA0EsUSPSdqNeQCLcBGAs/s1600/113.jpg) 點擊後會看到這個畫面。 ![](https://1.bp.blogspot.com/-c22oU5bqMMM/WjvzwOlPyiI/AAAAAAAA_QY/UuqXDPaQHnUhPoNZqtnu65bz_WMufxfbgCLcBGAs/s1600/1513878410265.jpg) 接著一樣點紅色箭頭的部分,修改預設值。 ![](https://2.bp.blogspot.com/-NjA-FEh0LAA/Wjv0XfrDeFI/AAAAAAAA_Qg/7lW13HD4Amw8Pn1ezlrGL8SiSAJVp1rywCLcBGAs/s1600/114.jpg) 這裡就隨便填入一個幹話。 ![](https://1.bp.blogspot.com/-CyCtD4zwzqI/Wjv0fSbvrOI/AAAAAAAA_Qk/PWalxIqVEyQpwB3LRiWS57hWxgHfv4IAACLcBGAs/s1600/115.jpg) 按儲存,然後試用一下。 ![](https://2.bp.blogspot.com/-v52Xg1VvXzQ/Wjv0twIfpvI/AAAAAAAA_Qo/Sy7H0smfKiwrxT8ZVuuQ36yjSo9HFXQoACLcBGAs/s1600/116.png) 馬上就變成幹話機器人。 # 新增關鍵字回應 如果你都有仔細看,應該會發現左邊有一個叫作是關鍵字回應訊息的,剛剛應該很想點進去看吧?現在可以點了,點進去長這樣: ![](https://3.bp.blogspot.com/-UvK3PKef-1M/Wjv1wV5MQNI/AAAAAAAA_Q0/b5b_e6g88lQhX1kO6MYiHLz2NtjMtmLEACLcBGAs/s1600/1513878951876.jpg) 我們點綠色的建立關鍵字按紐。 ![](https://1.bp.blogspot.com/-lFjkm66bo8I/Wjv2frAUukI/AAAAAAAA_Q8/KXuu8gh0v50L8Pm8YqbGrusvGCw6dB80gCLcBGAs/s1600/118.jpg) 在代表關鍵字我們填入「QQ」,然後在下面一堆按紐的地方點一下文字按紐,接著在文字區塊填入「我難過」。 ![](https://2.bp.blogspot.com/-FQDQINaPQds/Wjv2fjRiDEI/AAAAAAAA_RA/uk-MtTtrsB8c0C2HqD4kYTGxc8ep7xZzACLcBGAs/s1600/119.jpg) 然後按下儲存。 ![](https://3.bp.blogspot.com/-uFjH3J9MB1w/Wjv1Ih0vk_I/AAAAAAAA_Qs/tCDW7Q2RgBUv3stUPKTit3dG1q7Csg-9wCLcBGAs/s1600/1513878791635.jpg) 測試一下結果: ![](https://2.bp.blogspot.com/-8939jW2bM0A/Wjv3ebP7VjI/AAAAAAAA_RM/XIGVeLEzpX0erp1mwrNx-YVeWgO1ixKTACLcBGAs/s1600/117.png) 所以關鍵字回應其實 Line@ 平台已經作好了。 對的,只有作者能教的卡米狗這樣就完成了,你還能自行切換大頭照跟顯示名稱。 # 怎麼讓聊天機器人能加入群組? 其實就在剛剛的 Line Developer 後台,再往上看一點。 ![](https://1.bp.blogspot.com/-vrIlFMKlmkg/Wjv4-_inP-I/AAAAAAAA_RY/jmkMdNYuVL0DNtoePmZ2XVcgCwmw7IL_ACLcBGAs/s1600/120.jpg) Allow bot to join group chats (允許機器人加入群聊) 預設值是 Disabled,我們按一下右邊那個鉛筆按鈕,改成另一個選項,再按 Update 就好了。 # 怎麼讓其他人也能加關鍵字回應? 要像卡米狗那樣讓大家都能夠透過對話新增關鍵字回應的話,我們需要使用 Line Messaging API 中的 Webhook 功能。 明天會介紹 Webhook 的運作原理。

沒有留言: