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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU3d95PUfPvx_pN5tC_N39EC89xZmKAyHOxjqhqoM8OJY7czagCzYjqWA3H9Anchd3yxIVcmug-gdTrE_5fT4eBDnJ6XgisRfpWehyphenhyphenYfyp9seSeeusscQPG_6OhAP9B7D136y8HPY-8UM/s1600/1.jpg) 我們把注意力放到右上角,看到那顆 Log in 按鈕了嗎?勇敢地按下去。 他說:請輸入你正確的名字(Name)跟信箱(Email address)。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCVbDiCPlEEN8KZaUdODDny7V7jSM5PLQnN7be-5X_icVCeBCPzgZgmRyG9ezsO_7yL9TYQ7bEH1TJvCEWft6Maf94fKrXvr4oll6-O_k5GEwAiiRmx8Lrv3d2EM4aWiUGht2aAJkoRO4/s1600/3.jpg) 填好後就可以按下 Confirm。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhraaKYLTTVHPzXlsHNnjF4hdpKCpUCwr-x0Yvx3FwOkqbAyQXeVLZAazoQYJHG1wlmL9gqBAjH8WKT9z5fp0JE8q8aw_ZjE2A2gJIfHKp8d6HCW0nUreBsZRoj9r5TLxrxFxHMbIQW6Ec/s1600/4.jpg) 然後他要求你再次確認你沒有亂填,當然我相信你沒有亂填,這裡直接按下右邊的 Register 就可以。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdk7H2w2j9IL9z0gc5ZQd5eOXMuChkrfuk9S7Mzw-_K9muh93keP4qPV1OBcwfGKgpM2l_i4dcUfK_9s-H6IRvE26VWlHLJdruhzbX4Joq-QnyXIMrLkrdaRjPMpQN-buVTf5glAxEaWg/s1600/5.jpg) 恭喜你成為一個開發者,這邊我們直接按下 Start。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlCsMUYR177InqW2a0Y2vCIalSfTfSwRrhRUaYr10IsR_ihO3ZyB_WT-OQjiD4_f011A3_8JMQFRuMEviyRgeew3d9_G7sNwUsaUZsaMOuAXFfYDhyUx8nI7CfbbbZMYXN0pZdXwV5m7Q/s1600/6.jpg) 玩到這裡你應該會注意到一件事:如果畫面上有綠色按鈕,按下去就對了。所以這裡我們按 Create provider。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU-UlNN-k52Wm37BvVSicI9t1tQctFOkUPjv_Vs0pW5qOzJeSrHvJ64B2mdg0QoS1H4BqQxKLEd2o9fMy0hqhODAYc5sZjTfqGTrTETBnTGOOy1wy9Jy8eVSX7vZx_RzTtNbBaeGO481c/s1600/7.jpg) 如果你有開公司,這裡填公司名字。沒有開公司的話這裡就填你的名字,填完按 Confirm。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrH_EiWZfhyphenhyphenmRZ6kUwwXgY95GUvhrI8Zq4b2bsWqDlGM-YDDcP7Wqc5cSfjHVj4MeJG1HMl7JMBEzh0DfivKkmgHdvKF4pAQP5hgGKa5tcevAqPHv5Y8OMiixyf5la2nzFU57QSMBs5NM/s1600/8.jpg) 又是再次確認畫面,按綠色的 Create。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgePf4YZt3c9SNw6fnRWvnCxU5y7rQpLMDGPf9joNf9AsMzzB89Rz3BYk1h4w9dV4ZV-03iMRRMYejkB7AW7vWngcWpZzNNH05eugOiLuWpxJA3rDry19BEiFJq1OPJwPEqwdkW7LSvXkM/s1600/9.jpg) 哇!這裡有三個綠色按鈕,該按哪個呢?答案是按右邊的 Messaging API。 從這裡開始,我們要填入的是聊天機器人的相關資訊。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3c_zWhaE57TP1xWjaOxCekI4GTXkAkaYYkz314iZhFJYJaqazQ3f3xQvd40O0Uj6dclMJOE5B1vJZ3Mw81635hvj3vUivZAUj0YktC4utiP7zk2AOcZoSCEfI4Crv5WFjyN_g8QHWMEM/s1600/FireShot+Capture+54+-+LINE+Developers_+-+https___developers.line.me_console.png) - App icon:聊天機器人的大頭照 - App name:聊天機器人的顯示名稱 - App description:聊天機器人的簡介,不過這欄隨便填就可以了,因為好像不會被任何人看見。 - Plan:Developer Trail 是試用版,Free 是免費版。當然試用版也是免費,差別在於試用版只能加 50 個好友,但是可以使用加值功能,建議選試用版。 - Category:這個隨便選 - Subcategory:這個也隨便選 - Email address:這裡填信箱 我的填完之後長這樣: ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfBnHnpp2uXbytTBof0AckqcIwcxqud1GCRGQJ6yBxKM1bKYnYVbLaVsYAN5T08kr9JdwO6r-QR6kkDTzG8xBBu6NDM2yiuz8j4tEMyfVrwG2-7J14VjyGkfhLJiX3rYRoZU9VF4vtQug/s1600/FireShot+Capture+55+-+LINE+Developers_+-+https___developers.line.me_console.png) 填好就可以按 Confirm。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuuDZIvZQJuWvfFYLzhD-Jvyey5zbnbkt7-FGfoqsEEAm0450d7eDo07Jde5Z1XfYaGpzOdipQ_P7HxFbvzgb10XqyFvQoyxx5AxmR3ijeWCUn658HSJCG9gfgbkSV9jlVDXm_TvIWWH8/s1600/FireShot+Capture+56+-+LINE+Developers_+-+https___developers.line.me_console.png) 不曉得為什麼, Line 很愛再次確認,這裡有兩個勾勾要打,先打勾再按 Create。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ2_XH0KhrdXADmoa2rh_F20wtBD_As08hnY-XxFO50vzwNMapOS2ehAzkI07Z1xTCDvkhQuF6ClFGQk00hGVa6iiSVL1ZFhvuXlPD91_vy7SXitiFhSnkEsDrBjKRvdy08AVsZXv29As/s1600/FireShot+Capture+57+-+LINE+Developers_+-+https___developers.line.me_console_.png) 終於創好聊天機器人囉!點進去看看,這裡當然就不是點綠色按鈕了。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3XZjMyscOj4utNdvFPx_SGEudlb5hqhBunLq4t20lR63NEDeCa1o3piq-kQ4gXId-4X9TE3DDkDMhMoi7RX4PGZZpc57hvIQ3FUMtJdd2WJZN2QRt76gVRSSOsUeeenmmEiv7RzgoEvg/s1600/FireShot+Capture+58+-+LINE+Developers+-+https___developers.line.me_console_channel_1553191554_basic_.png) 訊息量很大,不過我們直接看到最後面有個 QR code of your bot。 # 加入聊天機器人為好友 拿起你的手機,作行動條碼掃描。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDAaeQSEM14nyoJPe9yQZUZD6uQmVchColbASiFDdeVqQLA3P9PRIaHD-Un_RBNG9Am95ziimhRR5ewmHqw59O_ef1bddkb62GOMAeWj2vZjyH9vOF6y-W4Lla-aXbhJYQShaGSs3lTm8/s1600/2017-12-22+00.52.31.png) 點綠色的加入。 # 傳訊息給這個聊天機器人 點進私聊畫面後會看到他傳了一個訊息給你: ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYNrAYKFm7DPAcS4k05z-rCOLXvMO1-63kjW2OePjrxsM859fJH4svTdeZNqGJywEKe4hR-A9rs9_TZVwAyLmnDpUSN_DDoFq5AZYXEviAiWRnUwam_YzMRA8bqxc6tLSxgIzhO9fIrnA/s1600/2017-12-22+01.09.06.png) 這是歡迎訊息(Greeting messages),隨便跟他說句話先。 你應該會注意到沒地方可以打字,這裡要先按左下角的鍵盤按鈕,然後再打字。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgio6xyjLzvm-pylg7XrSLQmx6HrWKIeTVNNB8DQYYj9mZxRYetxyhX9aFPXZBJXpZ9o5AGlY9EHuqAxJX6XQ5Kc3WpWjOU4H45ZnzG9aLbjDhbFkhl8SEMdtcwql-cB72YWdfPaSIDN2c/s1600/2017-12-22+01.11.03.png) 這是自動回覆訊息(Auto-reply messages)。 最簡單的聊天機器人到此完成!!!! 但是要怎麼控制他呢? # 登入後台修改歡迎訊息 從這個網址可以找到剛剛創好的聊天機器人。 [https://developers.line.me/console/](https://developers.line.me/console/) 跟剛剛一樣,先點進去,最下面的 QR code of your bot 再往上一點: ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJJIULDLID4W86pu34HKv_uV_pwM3GTYbo75svjGxcOxZ51Cl0y6t7fYyawuSU1p1Be8Uvo-GwofhUdMIguv2FV1qo7Vrw6xRfxm0ZwRQtjVbGvK8pD3TS5sziqYP7vYRbQH8UHGTu9Dg/s1600/1513877097033.jpg) 這裡可以修改歡迎訊息和自動回覆訊息,這裡我們先點下面的 Set message。 你有可能會看見要求登入的畫面: ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgml2ReFzC7rnaaYIKJA5lOOPmQRshM-CJHDOWif4xBJ2Qlz3x3bvMdwpAu9lO4N3N2hUc8SB3pf8X-DI2OAIiMrGI_iuZ5sWERe63amP7DzloPTz37Yh7smGKCNSJXKAfJHaT0UQ_b37M/s1600/1513877366762.jpg) 或者直接進入招呼語設定頁: ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji1lwERY0ZM4AG-5mUpqxkPF5xJrxkeMNT9qTKna1FgKMKrfb-Mh7LxL9orx1zkr_NvMGzVuW7z-iSO1h9XCdZWuOKxNVTZ79iC9PZDmaRa3tJ2TZ9B-UoGvx9Ef-9vRN9rxuAvJ98IuQ/s1600/1513877331470.jpg) 這裡是全中文的,是因為這裡已經是 Line@ 的後台,而不是 Line developer 的後台。Line developer 的後台目前還沒有作中文版。也就是說,我們剛創好的聊天機器人帳號,其實是一個啟用了 Line Messaging API 的 Line@ 帳號。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUYoFfLTBeTFEsBK46dU2PhthynAiQTVza5NZbjWQaCdyP6hUK3rmj5vWqYIBf2DuLhmQOXa2Zf6TqC7wYsUAtpVuYkunsi3kTREAdwlVq6XlQ7dqZ-vO2LdgOHd_1DRfOinGoLvAGamo/s1600/1513877784112.jpg) 稍微改一下字之後按儲存。這裡我們需要測試一下剛剛的設定有沒有正確運作。 測試的方法是先封鎖聊天機器人。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiII255fNrJ3HWSpqd3C9c6zhvwCUWUyVDkDq6jLy0myxI18gqyzBXnq4kXNHYl1UrxWS75BJygGWxABrgFn12XdIDsVeKAWRIqCTQ8lGZPDDMVOe6rr7kjDq0wWJGFQgSACXqlnXNaHok/s1600/111.png) 再解除封鎖。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMZ2hyM5L45LjldKK8lvHkYk2zGgf-yBODhLvMKKOTa0ko5U_m-uhveHAbmMpcvyQTGjFisVaPKqiTZMIEqluV187NWC7jewm0ussboIlMBvJ_oQz4AeBHTZak6-9fH85TxYmwVnc712w/s1600/112.png) 成功! # 修改自動回應 我們不用回到 Line Developer 後台,直接點左邊的自動回應作設定就可以。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE0_X3NPjIJENI0BBUmfJZWpIzq84WpCUYQFn5cV6nMwmC-ykNfMaW3bgTdct1oNV1HHvjCBcYt4RI5nao2_vFhWH9gJdtbIL2oG5-2JEzh8HlR9QB6kv-DcUBKKWKNk6x18j15tjM-Jc/s1600/113.jpg) 點擊後會看到這個畫面。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmtjGWRaQ8SFzTfT3iOaXNyxKbKje9vYCy6ZKvz262ixlonEAWTwrFBPfOpAeU75ooXygSpMOiG7Wq6rv6eMH2aZuuLnb9WE8zfHBB0c8_qQXAjqrw2-4TMGu7iTlSraBlBZPcubY1NHI/s1600/1513878410265.jpg) 接著一樣點紅色箭頭的部分,修改預設值。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt2P5tgRpKXPLvMJDstiqWQIeidNBwyhUyXxifPpbZPhesicnAbTjqbzdNhUWSUF4yrgwYaLqGOL_ej14gEpw4XtiRdFMOctxoGu3Lt1PuTC6lGFno0mq8AOQRkpQ7rykhPd18ouNpFnE/s1600/114.jpg) 這裡就隨便填入一個幹話。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp_DZFPneLk-dkO73Ld9LdBm3Gcg7p7pkDlcKzFvum9ZD4Ysv3PtCNWDrJjJharxeQpUY7zwmVWxb9xyAI_W2lsNMv-Wusn_8npZkjbkAtTXlr8JtoAWPQyjuoWmYRJyLA5wBbeIXuPcA/s1600/115.jpg) 按儲存,然後試用一下。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvDAxKCLPfgAUXCz1itI6tV04WI4YDjntUxTjXc-6u1K2LDlDJZmbp6KlNJ_aEyu0CjT0Nbo1BlbhVwQShCHmPdH9U71vvfUFpWVynVJQeEZsg7Sdob4PP5c8jiqIPwlQ_Dihv5ap7tM4/s1600/116.png) 馬上就變成幹話機器人。 # 新增關鍵字回應 如果你都有仔細看,應該會發現左邊有一個叫作是關鍵字回應訊息的,剛剛應該很想點進去看吧?現在可以點了,點進去長這樣: ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJO7amgbX00nY7yjWo4CD8JOc9lUacApjbGGKBT88dnCR4_9S_gHkjd3P4Cg8EkXnLMO5EqQL7jaqF-OtIAdSG8nnkqLxvgoItNEpUKzKpJqs1w4ACi4hQpGV2_gMWLGqrSh274mfP8tM/s1600/1513878951876.jpg) 我們點綠色的建立關鍵字按紐。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja4mVJ2Pha85KCTuEe6WQ23NxoMrKRKMnzr7cNQybMLjVJKLlpFw5xFB-S_0tIS1VsO37fHzEttvC_RLaTHo-dNoQXvrkWS_vXHHsbnJUBgNT7t7qlzCFs_mURiS5JBWB-VswrEDBw1G4/s1600/118.jpg) 在代表關鍵字我們填入「QQ」,然後在下面一堆按紐的地方點一下文字按紐,接著在文字區塊填入「我難過」。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6h9zwn2iwFlk7Ot9Ky8FKd7nnHC3Cc3wcBYOmOgl8W8h7ngZaBkH4-U1pJwzqwqieqzeN2EoB3I1Z0CnLG52Nn1yYV7xhyphenhyphen5gQZl6Za013oFH6Ci7U2zlVR-61FajFVO7hQx3Qa2kNCj4/s1600/119.jpg) 然後按下儲存。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2vQqcYQlVyNQSZGZ784PFJu-DjA0N82_Ipb8DoFwJTrur4NYI1SDLyioUbmHAp64edcDn1p8VzGlyBYVkgxRIhQYsDApCFvksWBfXwTLfYQPC6AmXb9i4gl_7sHuAEZ-CdHWf6GSqayw/s1600/1513878791635.jpg) 測試一下結果: ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRQsFxXUGxNRpnubJMQr2F6Obag9q_wGn-1JKJl6OEMP5RGWotOIlZPBv_3jp4dlV6wxnVllybnt0I0jO9j1Ie00rXAyRIzBb8pp3bx6kxPpP4i0d7sUz-plfnnmoxPskd1_aFl-cZYOM/s1600/117.png) 所以關鍵字回應其實 Line@ 平台已經作好了。 對的,只有作者能教的卡米狗這樣就完成了,你還能自行切換大頭照跟顯示名稱。 # 怎麼讓聊天機器人能加入群組? 其實就在剛剛的 Line Developer 後台,再往上看一點。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc3VOHh9G_Z-pAiZZ84rVo1DRWNjOcap0LM_IZjDSd1quO41e99WZHjMZqwv1RgM9QkbJd7ysP1JrNQG-h8zsHoicFpNdZ07shXLROXtlaIaXhbOoC5FXivd5zftO72o1UPoFZYVt3fYs/s1600/120.jpg) Allow bot to join group chats (允許機器人加入群聊) 預設值是 Disabled,我們按一下右邊那個鉛筆按鈕,改成另一個選項,再按 Update 就好了。 # 怎麼讓其他人也能加關鍵字回應? 要像卡米狗那樣讓大家都能夠透過對話新增關鍵字回應的話,我們需要使用 Line Messaging API 中的 Webhook 功能。 明天會介紹 Webhook 的運作原理。

沒有留言: