標籤

LINE

2010 年老筆電復活!OpenClaw LINE 頻道配對實戰與解密

這幾天在測試 OpenClaw 的 LINE 頻道整合。說實話,我是在這台 MacBook Air 2010(我的老戰友,現在只能拿來當伺服器跑)上面測試的。雖然硬體已經是「古董」級別,但 OpenClaw 的反應速度真的驚豔到我。

不過,身為一個技術宅,我原本以為串接 LINE Bot 至少要寫個幾百行 Node.js 或 Python,處理那些煩人的 Webhook、什麼加密驗證之類的。結果... 我發現我根本是在「填空」。

繼續閱讀

如何透過新的建立方式,開啟你第一隻 LINE Bot 【2024/09/04】

前言

在 2024/09/04 發布關於 Messaging API 的建立方式有所變更的新聞,過去因為 LINE Developer Console 與 Official Account Manager 皆可以建立官方帳號(LINE Bot, OA...etc),導致大家很容易搞混。

而這次的更新當中,透過統一介面,讓大家可以可以在一樣的介面中建立官方帳號,至於詳細操作步驟請見下文 ✨

繼續閱讀

LINE TECH FRESH 2024 畢業分享會精彩回顧

前言

大家好,我們是 LINE Developer Relations 團隊,不曉得大家從 LINE TECH FRESH 畢業分享會中是否有獲得哪些有趣的收穫呢?從 Save your time - TECH FRESH 畢業分享會 2024 @ LINE活動當中有許多介紹,以下就帶大家回味一下當天的內容囉!

繼續閱讀

Save your time - TECH FRESH 畢業分享會 2024 @ LINE

前言

大家好!我們是 LINE Developer Relations 團隊,很高興向大家介紹一個特別的活動——2024 年 6 月 18 日舉行的 TECH FRESH 畢業分享會。去年我們首次開放對外的分享會,現場引起了取多迴響,我們在這個活動上學到了很多,因此希望透過今年的舉辦,能與更多同學分享我們 LINE TECH FRESH 的成長和收穫。

繼續閱讀

在 Cloud Functions 上部署有 Open Data 功能的 LINE Bot | 摘要王, 天氣, 紅外線

繼續閱讀

在 Cloud Run 上部署有 Open Data 功能的 LINE Bot | 摘要王, 天氣, 紅外線

前言

此為 Cloud Run + Firebase + Gemini 工作坊中的操作文,如果有興趣針對有記憶能力的 LINE Bot 以及整合各方 Open Data 歡迎參考以下的內容

繼續閱讀

幫 LINE Bot 加點回覆動畫魔法:Loading Animation 功能解析

前言

大家好!今天我們要聊聊 LINE Bot 最近更新的一個超酷炫的功能——Loading Animation。對於那些經常與 LINE 官方帳號互動的朋友來說,這一定是個期待已久的更新!

想象一下,當你向一個 LINE Bot 發送訊息,等待回應的時候,畫面上出現一個動畫效果,在視覺上告訴用戶 “訊息處理中,請稍等片刻”,是不是感覺整個用戶體驗都提升了呢?接下來來仔細看看這個功能的細節和如何實現它。

繼續閱讀

【GCP】Pub/Sub Python 實戰紀錄 | DevFest 2023 台中工作坊

前言

此篇文章為 2023/12/09 DevFest Taichung Serverless workshop 步驟文章,如果有需要透過 GCP Pub/Sub 將訊息轉打給訂閱的 Cloud Run endpoint,可以參考看看這篇文章喔!

繼續閱讀

在 Google Cloud Run 上安裝 Chromium 抓取 CCTV 影像

前言

近期因為有玩滑板,而且身處台北很容易下雨,因此需要找到加入了交流社群,其中設定了一些指令可以讓社群機器人可以提供 CCTV 的畫面,但其中因為需要去社群當中打指令對於一個剛加入的人有點害羞,有這些攝影機畫面真的可以幫助看是否要出門(大部分場地都室外),但身為工程師會想要按個按鍵就出現,因此就有以下文章囉!

繼續閱讀

就用 LINE Pay 在 Apple Watch 付款吧

昨天看到同事用手錶付款想說是什麼功能,去問一下才發現我落後了!這篇文章來跟大家說明遺下我連結 LINE Pay APP 到 Apple Watch 的過程!

Apple Watch 安裝 LINE Pay APP

首先到手機上搜尋 Watch,找到原生的程式

繼續閱讀

新米到上手 LangChain: 藉由 Function Agent 在 LINE Bot 上處理 Calendar 資訊!

前言

平時我們經常需要管理/安排行程和資訊。這篇文章將介紹我是如何透過 Google Calendar 與 LangChain,讓我更快在 LINE Bot 上可以加入個人行事曆。同時,我也將分享有關使用 Google Calendar 的好處,以及如何更有效地利用 LangChain Function Agent 來簡化程式碼開發過程。相信這對於建立 LINE Bot 以及各種相關應用的開發者來說會是一個不錯的範例,讓我們就往下看下去吧!

Slide: https://speakerdeck.com/line_developers_tw/first-time-lanchain-line-bot 範例程式碼:https://github.com/louis70109/BookingStep 歡迎試玩 LINE Bot:https://lin.ee/92O5Od8

繼續閱讀

【從零開始養】讓 Public Cloud 增加你的能見度!

前言

大家好,我是 LINE Taiwan 的技術傳教士 Nijia (a.k.a 忍者),這次很榮幸可以來 COSCUP 2023 分享業餘時間作 Side project 的一些心得,這次透過文章跟大家分享經驗談!

簡報:https://speakerdeck.com/line_developers_tw/how-to-develop-side-project-to-public-cloud

繼續閱讀

【TECH FRESH 畢業分享會】原來實習有這些眉角?

前言

大家好!我們是 LINE Developer Relations 團隊,上一篇 TECH FRESH 畢業分享會:探索 2022 屆實習生的故事 分享了為何推薦大家來參加年度 TECH FRESH 畢業分享會;在 6/27 活動結束之後,也來跟各位分享一下當中的活動內容!

繼續閱讀

客製 QR Code 就用 LINE Bot

前言

延續上一篇「幫 QR Code 加上背景圖,別只留下黑白!」,因為只需要一個輸入框輸入網址、以及上傳一張圖片,想了想感覺就很適合透過 LINE Bot 來幫忙產生,以下就來跟大家介紹一下這次開發時的一些註解~

NodeJS repository: https://github.com/louis70109/qrcode-background-generator

繼續閱讀

加入 LINE TECH FRESH,開啟你的職場新鮮人生!

前言

LINE TECH FRESH 是 LINE 技術新星人才計畫,旨在培養年輕人扎實的技術實力和軟實力,並提供全方位的職涯發展支援。

該計畫主要針對具備程式設計、資訊工程、電機電子等相關科系背景的大學畢業生,提供一年的專業訓練課程和實習機會,並且與 LINE 內部各部門的專業人才進行交流和學習。

此外,LINE TECH FRESH 也提供完善的職涯發展支援,包括個人職涯規劃、內部培訓課程、專業技能提升、實習薪資、轉正機會等,讓年輕人能夠在 LINE 中發揮潛力,實現個人職業目標。

繼續閱讀

【LINE TECHPULSE 2023】精彩回顧與議程資訊

前言

台灣最具指標之一的年度科技盛會-LINE 台灣第七屆開發者大會「LINE TAIWAN TECHPULSE 2023」,於 2/17 日正式登場,以「開發與創新」為主軸,著重於「流程再造、創新應用」等各式技術議題,更匯聚 26 個議程與 32 位講者,精彩豐富的內容超過千人報名!現場也容納高達七百位的參加者,讓這次活動能夠圓滿落幕,以下小編就跟大家分享一下這次大會上的內容!

繼續閱讀

【LINE TECHPULSE 2023】久違實體活動消息一把抓

前言

過完農曆年,是否也跟小編一樣,覺得好久沒有實體吸收研討會的精華呢?本篇文章將跟大家透露本週五實體舉辦的 LINE TECHPULSE 2023 中的一些細節,讓大家在活動前可以了解一下這次的一些內容!

繼續閱讀

2022 LINE Taiwan On Job Training(OJT) 花絮

前言

LINE 台灣每年會定期舉辦 On Job Training,提供新進同仁可以在上班時間有個完整的訓練,了解研發工程部門過去與現在,以及在跟每個團隊中合作需要注意的項目,當然在活動過程中也有些有趣的互動,到底當天活動發生了哪些事情呢?讓我們一同往下看看吧!

繼續閱讀

【JCConf 2022】活動紀錄 | Keynote, 攤位, 開發統計版

前言

JCConf 為台灣最大的 Java 開發者研討會,這次的研討會中也看到許多講者、開發者的活力!有在現場的朋友一定會被這活力感染。當然今年 LINE 如往常一樣透過「黃金級」贊助 JCConf,除了讓開發者可以在攤位上與 LINER 互動外,也讓社群能夠有持續前進的動力!沒參加到也沒關係,以下就讓小編用文章帶大家走走。

繼續閱讀

在 GCS || GitHub 上傳圖片並取得網址

前言

從以前使用雲端硬碟,如 Dropbox, Google Drive, Box...我們都很習慣可以手動拉照片、影片上去放,而在開始寫程式之後理所當然就會想用 API 丟,但這些雲端硬碟一般來說除非用模擬器,不然理論上應該是不好用程式跑,而在公有雲出來後,就有像是 AWS S3, Google Cloud Storage 等等的服務陸續出來,讓大家可以使用他們的服務建立自己的硬碟空間,也不用自己架伺服器弄硬碟空間,權限管控都幫你弄好好,也可以用 API 訪問,實在是很方便呢!

隨著程式越寫越多,除了在 LINE Bot 上需要圖片網址才可以發送圖片外,像是 video.js 以及許多很多服務、工具越來越依靠  https 相關的網址來找圖片,接下來就讓筆者就帶大家認識一下近期使用的一些範例以及我發現的另一種上傳方法。

繼續閱讀

LINE Thailand Developer Conference 現場全都錄 | 一同體會現場活動氛圍!

前言

這次小編非常高興有機會參加泰國辦公室年度開發者大會,這場活動也是泰國開發者非常指標性的一場活動,現場交流氣氛是真的非常熱絡的!稍候的內容將會有戰地記者的方式帶大家一起走訪研討會當天,讓我們一起看下去吧!

繼續閱讀

Life Hacker 初章: 用 LINE Bot 看你平常做的事

前言

大家好,我是 LINE 台灣技術傳教士 - NiJia Lin,此次的內容於「中部人的聊天機器人小小聚 #22」分享,分享這陣子以來自己做的一個小專案,拋磚引玉希望能讓更多點子於社群上發酵,想了解更多分享的內容請繼續往下看吧!

繼續閱讀

【LINE TECH FRESH】2021 屆畢業囉!這一年來又有什麼新鮮事呢?

2021 屆的 TECH FRESH 在六月底時已經畢業囉!不管是繼續留下,抑或是生涯另有規劃,相信在 LINE 研發工程團隊中經歷的一切都會讓大家印象深刻。而除了日常的開發工作外,究竟在其他的工作時間 TECH FRESH 會經歷哪些活動呢?讓我們一探究竟!

繼續閱讀

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

前言

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

繼續閱讀

LINE Dev Meetup 16 現場活動分享

前言

大家好,我們是來自 LINE 台灣開發者關係與技術推廣部門 (Developer Relations)。從 2019 LINE 啟動了「開發社群計畫」之後,已經有三年的時間。期間舉辦了許多的校園招募,技術社群聚會活動與 LINE 平台開發分享活動。

本次 LINE Developer Meetup 開發者小聚,邀請到 CTO 以及六位實習生講者來代表各自所屬團隊的介紹、開發經驗、實習經驗。話不多說,接著一起往下看

KKTIX 活動網頁: 活動網址

繼續閱讀

開始贊助 Prettier 與推動公司支持 OSS

翻譯原文:https://engineering.linecorp.com/ja/blog/uit-support-prettier-and-oss/

前言

大家好,我是前端開發中心(也稱為 UIT) Front-End Dev.9 的花谷(@potato4d)。

在『UIT 新春 Tech Blog』 1/27 的今天,我們將介紹由 UIT 團隊負責贊助的前端領域 OSS 的相關內容。

繼續閱讀

【Flex Message】部署與共用屬於你的 Flex Message API

他怎麼出現的?

當時因為公司社群工作坊以及各種朋友群組都會需要分享各種活動資訊,包括活動告知、訂位消息、個人資訊卡、新聞...而每個需求中都剛好包含著其他功能 🔧,有時用 JavaScript、有時 Python,而每次寫的 Flex Message 就會散落在各地,東西、時間一多都會忘了當時做的東西在哪 💦,也就浪費當時花費的精力,而且在微服務這麼盛行的現今怎能不切出來呢 🤔

繼續閱讀

【LINE TECHPLUSE 2022】議程回顧

前言

作為 LINE 一年一度的技術研討會,本質還是以技術為主出發,讓大家了解除了 LINE 工程團隊這一年來的努力之外,也要讓彼此可以透過分享技術來處理不同情境下所能解決的方式,在 LINE TECHPULSE 2022 中並將活動分為技術分享日平台推廣日兩天,讓大家可以在線上可以聽到不同團隊來分享的經驗、技術、工具...,讓大家在不同的空間下,也可以與 LINER 們互相學習,以下就讓小編帶大家快速了解一下議程內容吧!

繼續閱讀

【TECHPULSE 2022】活動資訊一把抓

前言

相信大家從 12 月時應該會跟小編有同樣的狀態,「總覺得有個活動沒參加到」、「好像少報名了什麼?」,沒錯,就是這次要介紹的 TECHPULSE 2022!經過了 LINE DevDay 2021 精彩議程之後,應該想聽台灣這邊本地的發展到底是如何,以下就詳細為各位介紹一下!

LINE TAIWAN TECHPULSE 2022-活動資訊簡介

  • 活動日期:2022 年 1 月 19 日(三)至 1 月 20 日(四)
  • 活動時間:兩天早上 10 點活動開始
  • 活動形式:線上議程
  • 活動費用:免費於 LINE MUSIC LIVE 取票觀看。

官方新聞稿:https://linecorp.com/zh-hant/pr/news/zh-hant/2022/4074

繼續閱讀

AI For The New Normal - LINE Taiwan Internal Hackathon

前言

LINE 經過了十年的進化,已經在日常生活中都有我們的影子(Life on LINE),而在這舉辦的時間點,台灣正面臨疫情爆發,全台的人都處於警戒的狀態,任何人都不敢掉以輕心,並待在家裡防疫同時也無法出去與親朋好友相聚,但是我們總想著要如何做出怎樣的產品才可以讓大家在面對新型態(New Normal)的生活時,可以透過 LINE 來緊密的聯繫彼此,並搭配 LINE 持續發展的 AI/ML 領域,讓使用服務的各位可以更方便的透過 LINE 這個生活平台的入口,拉近彼此間的熱度不減。

透過本次的黑客松,我們希望每一位同仁,思考一下在家裡 WFH 或是三級警戒的狀況下,是否有一直困擾著大家的問題,抑或是發想出新的創意點子,並結合既有的 AI/ML - CLOVA,來緊密串連每一個使用者,這也就是為什麼今年的黑客松主題是 「AI For The New Normal」。

隨著大家一同努力防疫了許久,終於在 11 月可以展開一年一度的 Internal Hackathon,並以線上結合線下的方式執行,讓在家工作許久且能量滿點的同事們可以在現場,同時也在最安全的情況下參加今年 LINE 的大型內部黑客松活動!

這邊大家可能會好奇,到底在 LINE 新辦公室內部舉辦黑客松到底是會怎樣呢?以下讓小編帶你用文章走一遍~

延伸閱讀:

繼續閱讀

2021 LINE Taiwan On Job Training(OJT) 線上花絮

前言

一年一度 LINE Taiwan On Job Training 在許多同仁加入之後就正式展開啦,這兩年來因爲疫情的關係小編無法與大家一起前往日本受訓,但台灣內部講者、技術資源也是非常豐富,怎麼可以錯過這麼寶貴機會 😁

員工訓練一直工程部門都是很注重的一環,除了大家日常熟悉的 Coding 之外,包括整個部門的狀態、文化、資安意識、開發規範、部署工具等等都是需要了解的部分,

LINE 工程團隊為了持續增加開發品質,一直很遵守所以資安以及許多開發上的規範,而在新人剛加入時不免需要讓大家知道許多規範

繼續閱讀

【COSCUP throwback】Keynote | 參與開源

什麼是 COSCUP?

COSCUP 是亞洲最大的開源會議之一,自 2006 年開始由開源社群舉行的年度會議,也是台灣自由開源軟體運動 (FOSSM) 的主要倡導者。COSCUP 包含演講、贊助商、社群攤位,以及 BoF 社群同樂會等,COSCUP 的宗旨在於提供一個聯結開放原始碼開發者、使用者與推廣者的平台。

可惜今年因為疫情關係改為線上,但也不減大家參與 COSCUP 的熱情!

繼續閱讀

透過 Vue + FastAPI 完成 LINE Login 一鍵式登入

前言

碰巧最近有個日文五十音消除遊戲的 Side Project 正在實作中,參考之前鐵人賽文章,實作上發現有些內容可能是年久失修,導致實作上不太順利,碰巧近期 LINE Login 的官方文件也有更新,並且搭配之前實作的範例是使用 (Screen-LINE-Bullets),來延伸 Side Project,以下就為各位介紹一下其中使用 LINE Login 的一些過程。

TL;DR

  • LINE Login 範例從 Flask 轉到 Vue+FastAPI
  • 前後端分離
    • 前端用兩個頁面清楚展示 LINE Login SSO 步驟
    • 後端兩個 API
      • 取得認證導向網址
      • 認證 JWT 中的使用者參數
      • 環境變數都放後端(較安全)
繼續閱讀

【COSCUP throwback】日本團隊分享 | Verda, LIFF

前言

在 COSCUP 的安排中很幸運可以邀請到國外的同仁來為我們分享在當地工作的內容,本次文章則帶大家了解遺下在日本的團隊(Verda + LIFF)的工作內容,如果想回味當天講者實際分享的內容在稍後也可以看 youtube 影片回味一下喔!(當天也是有許多朋友前來詢問許多與日本工作相關的問題,生活、履歷等等)

繼續閱讀

【COSCUP Throwback】LINE Fukuoka 團隊分享

前言

相信在螢幕前觀看此篇文章得你一定對 LINE 貼圖小舖不陌生(畢竟都要買貼圖跟朋友"交流"),因為背後的技術與流量其實是需要非常龐大的架構才支撐的下,本次 COSCUP 的 LINE 攤位上就邀請到福岡的前端與 CSI 團隊來分享相關的內容!

繼續閱讀

【COSCUP Throwback】LINE Thailand Developer Relation 議程分享

前言

開發者關係與技術推廣(Developer Relations)部門除了台灣之外,在韓國、日本、台灣、泰國、印尼皆都有此部門,除了技術品牌經營外,也會安排許多對外技術活動,本次 COSCUP 活動中邀請到泰國的 - Tee、Tan、Bee 來為我們分享在泰國裡所實踐的內容與經驗分享,對於當天的內容有興趣的朋友,除了繼續觀看本文外也可收看當天的錄影檔(英文版本):

繼續閱讀

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

前言

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

繼續閱讀

【訪談】TECH FRESH 工作老實說 - 後續花絮與相關資訊整理

前言

各位讀者好,我是 LINE Taiwan Technology Evangelist - Nijia Lin,也是本次活動的主持人,這次想透過文章幫大家整理在 7/13 的【訪談】TECH FRESH 工作老實說活動中有提到的內容。

但如果螢幕前的你已經準備好相關履歷,直接投履歷吧! 連結

繼續閱讀

TECH FRESH 實習的一年間,除了開發還有什麼內部活動呢?

前言

LINE 首次在 2020 以技術新星人才計畫來大舉招募眾多優秀的同學加入 LINE 的大家庭,更多 TECH FRESH 實習計畫的內容在先前的文章中都有介紹,請參考以下:

而本次的文章會介紹今年度從加入 LINE 大家庭之後 LINE 究竟提供了些什麼內容讓每位同學在實習的期間可以收穫滿滿,是不是內部有著各式各樣的活動等著同學們報名參加呢?大家就緊接著往下看吧!

繼續閱讀

【翻譯】透過 Rich Menu Switch Action 快速地切換 LINE 的個人化的 Rich Menu

翻譯原文網址:https://medium.com/linedevth/richmenu-swich-action-ba3aa0a9f80a

相信有在使用 LINE 官方帳號(Official Account)的朋友,基本上都會知道 Rich Menu 可以有效幫助並引導使用者來使用服務中的主要內容。其中要使用到 Rich Menu 非常容易,只需使用工具(Official Account Manager)或撰寫程式即可完成。

在本篇中,將會透過撰寫程式來建立 Rich Menu,而撰寫的優點則是讓使用者可以自行切換 Rich Menu,例如:

繼續閱讀

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

前言

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

索引

繼續閱讀

LINE Recruitment Day 2021 活動紀錄

LRD

前言

由於疫情突然的加溫,LINE 工程團隊緊急將活動改為線上的方式呈現給大家,在避免群聚的情況下盡可能地呈現最好的方式給大家,同時也讓大家了解 LINE 工程部門裡每個團隊所負責的內容,以下就整理出當天的所有內容給各位囉!

議程列表

介紹

本次活動頁面: https://linegroup.kktix.cc/events/20210522-devel

開場由 LINE Taiwan CTO - Marco 為大家介紹,因為大環境的關係,觀察到許多人使用網路的方式改變了,同時也看到線上線下整合(Online Merge Offline)的趨勢,而在 LINE 的生態系服務當中有許多都是使用 Online Merge Offline 的方式,如 LINE SHOPPING、LINE SPOT、LINE Taxi...等等。現在也人手一隻手機,並且裡頭也都安裝著 LINE,為了提供用戶在這數位生態圈中生活更加便利,因此我們也就打造了各式各樣的服務來提供給大家。

除了打造服務外,由於人員越來越多,當然也就需要 Developer Relations 這樣的部門角色來建立起優良的內部文化,讓大家除了在打造生態系服務的同時,也可以透過各式各樣的內部活動來互相學習與交流,讓每位工程師可以將自身努力的經驗分享給大家。那到底做了些什麼呢?以下就由 Developer Relations 部門的資深技術推廣工程師 - Evan Lin 為大家介紹這個角色日常都在做些什麼。

繼續閱讀

除錯 Python 套件遇到 Command Line 無法使用的問題 | lotify

click command

前言

近期收到了一個來自 Lotify 的 Pull Request,主要功能是加入 Command Line 的功能,讓用戶在安裝 Lotify 之後即可在終端機上測試,感謝來自熱情的網友幫忙。

原以為 Merge 之後應該要可以用了,於似乎開始安裝要開始使用測試,沒想到遇到了一個錯誤

ModuleNotFoundError: No module named 'lotifyCli'

於是就開始的抓蟲之旅。✍️

繼續閱讀

Chatbot Developer Meetup - LINE API Platform Update Sharing

前言

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

繼續閱讀

回顧 LINE Developers Meetup 第 15 場現場活動

前言

每年 LINE 都會安排許多活動讓每一位對 LINE 工程團隊有興趣開發者可以在線上或是線下直接詢問負責不同領域的同仁們,藉由交流不僅分享在企業中使用的技術細節,也拉近企業與開發者的距離,讓大家感受在 LINE 工作的幸福感指數 😊,希望可以透過本篇活動紀錄讓大家更認識 LINE 的工程團隊!

繼續閱讀

帶你了解 LINE Developers Meetup 第 14 場的精彩內容!

前言

大家好,我是 LINE Taiwan Developer Relations 團隊的 NiJia Lin。很開心在這裡跟各位分享 2021 年的首場開發者小聚,本場次是我加入以來第一次在台北舉辦的線下活動(過往都是會眾身份),除了有美味餐點以外,現場也能感受到滿滿的開發者們對於技術熱情(同仁們一直包圍詢問),以下就由我帶大家體驗一下現場的熱情吧!

KKTIX 活動網頁: 活動網址

繼續閱讀

【翻譯】如何個性化在 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 中找到貼圖的關鍵字訊息。

繼續閱讀

將 Chatbot 丟入一台筆電中的 Kubernetes 叢集海 | k3d | Docker

前言

Kubernetes 幫忙處理掉許多以前很繁雜的問題(Auto-Scaling、容器管理..),讓開發者只要手持 Container 與大量 yaml 檔即可將工具部署上去(前提是容器要正常工作),但作為僅有一台筆電的開發者(我)想試玩總不能直接至雲端開叢集(金幣攻擊),因此找到了一個解決方案,使用 k3d 來幫助我們建立 Kubernetes 試玩,以下就一步步帶大家從容器建立到將服務部署於叢集上。

範例專案:louis70109/kubernetes-line-echo-bot

繼續閱讀

如何建置與使用 GitHub Actions 市集的 LINE Notify 套件

前言

以前不管在單元/整合測試部署或是一些週期性的工作,有點經驗的工程師通常會很習慣寫個 Script 去跑相關指令集。而隨著寫的服務越來越多,許多部分也微服務化後,同一個指令集可能會服務到對象也越來越多,因此就開始有了像是 Jenkins、Drone、Travis 以及本篇會介紹 GitHub Actions 這類的 CI 工具,但既然是工程師當然要把指令集內的耦合性盡可能的降到最低,因此就有像是 GitHub Marketplace 的套件市集,讓大家可以在上面選擇不同功能的工具套入於自己的 CI 中,接下來就讓我帶你來了解一下平時會遇到什麼問題,以及如何建立與使用 LINE Notify 於 GitHub Actions 上吧!

以前如何知道結果?

  • 寫 Script 並用 Linux 的排程(Crontab)在固定時間跑測試案例、爬資料、部署...等狀態
  • CI/CD 過了之後自己上網站看 log (沒通知)
  • 即便寫通知程式在 Script 裡,未來的可用性極低(不好管控金鑰、換程式語言...)

Why GitHub Actions?

  • GitHub 自家出的 CI 工具
  • 專案大多放在 GitHub 上的情況
    • 可達到資源 Single Source of Truth
  • 市集(Marketplace)已經有許多工具可以合併使用

Why LINE Notify?

繼續閱讀

【翻譯】使用 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 社群閃電秀的魅力。

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

繼續閱讀

LIFF migration: from Replace to Concatenate mode

前言

1/18 釋出了一篇新聞 Reminder: On March 1, 2021, "Replace (Backward compatibility mode)" will be removed from the permanent link redirection settings for LIFF app and LINE MINI App,在這個新聞中提到將會在 3/1 移除 LIFF 的 Replace 模式:

移除後若尚未更新 LIFF SDK 的話可能會遇到以下問題:

  • LIFF 打不開
  • 空白頁面
  • 打開了但出現許多錯誤訊息
  • ...

於 2020/11/20 有發過即將移除的新聞,隨後也有相關文章敘述這件事,許多更改內容可以參閱:

繼續閱讀

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

前言

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

繼續閱讀

LINE Taiwan x Java 年度盛會:JCConf 2020

前言

大家好,我是 LINE Taiwan Technology Evangelist – NiJia Lin。這次非常開心能以 LINER 身份參加 JCConf 2020,與各界 Java 高手們在台大醫院國際會議中心享受 Java 社群的強大動能與活力!而 LINE 身為黃金級贊助商之一,特別為 JCConf 準備 Keynote 議程,也有從眾多優秀的議程競爭者中脫穎而出的 LINER 講者,向與會者介紹最新服務與開發技術。並且也在大會現場設置了公司攤位,由多位充滿專業與熱忱的 LINE 開發人員定時為與會者提供短講,介紹 LINE SHOPPING、LINE SPOT、LINE TODAY、LINE Client、LINE Pay 等團隊的工作內容,接下來就來複習一下當天的內容吧!

繼續閱讀

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 社群的魅力,讓更多朋友了解到打造自己的聊天機器人是如此讓人開心的事情。

繼續閱讀

梅竹黑客松賽前企業工作坊 - LIFF shareTargetPicker

前言

很開心能參加到梅竹黑客松的賽前企業工作坊,為了能夠讓各位學生朋友更快速上手 LIFF(LINE Front-end Framework),並使用來打造更 WoW 的應用服務,因此在這天我們則找到 UIT(a.k.a 前端)部門專業的同仁 - Coke 帶領學生們來做實作相關內容,讓大家更了解 LIFF 以及 shareTargetPicker 個別是什麼、如何實作並且能應用在什麼地方,以下就來一步一步來介紹。

繼續閱讀

【翻譯】讓我們使用 Cypress 開始為 LIFF app 撰寫單元測試

原文連結

前言

大家好,本篇將帶大家使用 Cypress 為您的 LIFF(LINE Frontend Framework)Application 寫單元測試。並且可以從本文的範例幫助來閱讀這篇文章的開發者朋友。若之前沒有嘗試過開發 LIFF App,建議您先閱讀以下文章。因為在本文中可能會有很多相關技術用詞,因此在使用它們之前必需要有 LIFF App 開發的相關基礎知識。

Article: https://medium.com/linedevth/liff-v2-release-85fdfb678cc6

繼續閱讀

LINE 開發社群計畫: Golang #54 場社群小聚心得

前言

大家好,我是 LINE Taiwan 的 Tech Evangelist - NiJia Lin。這次很開心再度參加了Golang 社群第 54 場的聚會活動,繼上次參加 53 場精彩的社群小聚之後這次總算來到 LINE 的辦公室舉辦,辛苦社群夥伴們的舉辦此次的活動,在此也跟各位分享本次參與的心得,並且也希望透過社群分享的力量能夠讓開發動能更加的盛大!

九月的社群邀請到 Golang Taipei Gathering 社群的朋友來到 LINE 台北辦公室,並且一起來分享與討論 LINE 內部開發流程上針對 Golang 使用上的心得分享。這次的相關資訊可以在 Golang Taipei Gathering #54 找到所有的內容介紹。

今晚的 Golang meetup 由 Tech Evangelist - Evan (同時負責本次的社群) 開場,介紹了什麼是 LINE TECH FRESH 校園新星人才計劃。什麼是 LINE TECH FRESH ? LINE 台灣工程團隊每年透過 LINE TECH FRESH – 技術新星人才計劃,招募資訊科技相關科系,或對此領域有所涉略的大學生 / 研究生加入 LINE 團隊進行長期實習 (一年期),讓同學們能在國際級科技公司中觀摩學習。

更多內容,可以參考這篇文章: LINE TECH FRESH – 技術新星人才計劃,實習經驗大公開

繼續閱讀

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

前言

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

繼續閱讀

在 Vue3 中引入 LIFF 的 ShareTargetPicker 分享 FlexMessage 訊息給 LINE 好友

picker result

前言

以往在 LINE 平台上發送公告相關訊息時都只能編排文字順序、傳另一個圖片、抑或是傳影片...anyway,而隨著 LINE 推出了 Flex Message 讓開發者可以將訊息當作網頁 CSS 樣式塑造出一個客製化的訊息格式,這在 Chatbot 的領域裡基本上可以算是殺手級功能了,Chatbot 可以在過程中可以依照對話流程釋出不同樣版的內容,讓使用者體驗更上一層。

隨著時間的演進 LINE 也 release 了自家的前端框架 - LIFF,開發者能夠很快速的使用到 LINE Login 的相關功能並且整合到 Chatbot 上面,讓整體服務的使用體驗更上一層,接著在近些日子釋出了本篇介紹的主軸 - ShareTargetPicker,其功能主要是能將之前只有 Chatbot 才能使用的 Flex Message 透過 LIFF 的這隻 API 使用發送者的名義將客製化訊息幫忙發送給 使用者/群組/聊天室,讓我在群組公布訊息時能有煥然一新的模樣呢!

會寫這篇的原因也是因為最近寫了一個 Side Project - Announcer 讓我可以再公布訊息時可以發送漂亮的 Flex MEssage,而使用 Node.js 開發時因為需要使用 LIFFShareTargetPicker,當時只透過 EJS 幫我產生 html template 來發送 FlexMessage,一開始認為應該不會寫太多前端的邏輯,但隨著想增進更多的 UX 因此需要操作更多的前端邏輯(可以看看這個 tag 裡的 views 資料夾),因此在多種考慮下決定使用 Vue 來簡化我的開發,但在 migrate 之前總是要先了解一下兩邊結合的可行性,本篇就給大家帶來 Vue3 結合 LIFF 的相關使用介紹。 🙂

FlexMessage 詳細介紹可以參考這篇 - Flex Message 的 Update 1 已公開

繼續閱讀

LINE 開發社群計畫: Chatbot Taiwan 第 22 場社群活動紀錄分享

前言

大家好,我是 LINE Taiwan 技術推廣工程師 - NiJia,本次於 Chatbot 第 22 場小聚擔任講者分享與 LINE 相關的內容,感謝大家在外面下著大雨的平日晚上還是這麼熱情來參加,以下我就分享參加的活動紀錄。 😊

繼續閱讀

LINE 開發社群計畫: Chatbot 台中小聚 08 - LINE platform 工作坊紀錄

all user

前言

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

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

繼續閱讀

Vue.js Taiwan 006 小聚花絮分享

前言

大家好,我是 LINE Taiwan Technology Evangelist - NiJia Lin,身為場地提供方也很感謝 Vue.js Taiwan 的大家配合相關防疫流程並座無虛席,在此也跟各位分享本次參與的心得,並且也希望透過社群分享的力量能夠讓聊天機器人的開發動能更加的盛大。(熊大也表示有新朋友來了 😆)

繼續閱讀

【LINE】新進員工的內部訓練花絮

前言

由於今年因為疫情影響了到日本總部的新人訓練的機會,也因此 LINE Developer Relations 為大家著想就在台灣本島直接辦一場內部員工訓練(On Job Training)啦!難得有機會看到 LINE 裡 Leader 們的分享精彩的內容當然一定不能錯過啊!這次就由身為新進員工其中一員的我帶大家用文章的方式一起參加我們的活動 😃。

看著每個禮物都好吸引人,有獎徵答才拿得到的稀有品。

繼續閱讀

COSCUP 2020 年會 - LINER 工程團隊的議程分享

什麼是 COSCUP?

大家好,我是 LINE Taiwan Technology Evangelist – NiJia Lin。很高興這次能以 LINER 身份於 8/1、8/2 參加 COSCUP 2020,並體驗開源社群充滿熱忱與活力的氛圍!COSCUP  是亞洲最大的開源會議之一,自 2006 年開始由開源社群舉行的年度會議,也是台灣自由開源軟體運動 (FOSSM) 的主要倡導者。COSCUP 包含演講、贊助商、社群攤位,以及 BoF 社群同樂會等,COSCUP 的宗旨在於提供一個聯結開放原始碼開發者、使用者與推廣者的平台。

感謝台灣的防疫英雄們的努力讓大家有機會參加線下的研討會,也辛苦大會在行前的各種宣導與措施,讓這次 COSCUP 可以圓滿結束!

以下為大家帶來這次 LINE 的三個講者分別為大家帶來的內容分享 😃

繼續閱讀

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

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

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

點唱機是什麼?

繼續閱讀

LINE 開發社群計畫: 2020 六月與七月 LINE 平台更新總整理

前言

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

社群 Chatbots Meetup: https://chatbots.kktix.cc/ 本次活動網頁: https://chatbots.kktix.cc/events/meetup-021 本次活動的共筆紀錄: https://hackmd.io/@chatbot-tw/meetups-021

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

這次活動總算又回到 LINE 台灣的辦公室來舉辦,同時這也是疫情後 LINE 辦公室第一次舉辦線下的聚會。希望透過這次的聚會可以讓更多朋友了解到打造自己的聊天機器人是如此讓人開心的事情。

整場分享的影片:

繼續閱讀

LIFF v2.3 更新內容 - Concatenate & Replace 模式

前言

大家好,我是 LINE Taiwan 的 Tech Evangelist – NiJia Lin。

在尚未更新前時常會遇到問題就是網址後面會接上 liff.state= 抑或是會在原始 target url 上加上 斜線(/) 這類相關的問題,開發者(包括我)都需要使用相關的 workaround 去解套,這邊提供之前我寫的 Twitch-Bot 的 Javascript workaround 來處理 liff.state 的問題:

const query = req.query['liff.state'].split('?')[1].split('&');
const notifyPayload = { code: null, state: null };
query.forEach(el => {
  const queryObj = el.split('=');
  if (queryObj[0] in notifyPayload)
    notifyPayload[queryObj[0]] = queryObj[1];
});
const code = notifyPayload.code;
const userId = notifyPayload.state;

這樣的解法可以解決我的問題但會讓開發有點綁手綁腳的,但隨著 LIFF v2.3 改版上線後出現了兩個模式提供選擇,分別是 ConcatenateReplace 兩個選項,如下圖所示:

在 v2.3 的更新中將之前所會遇到問題以及已有對應 workaround 的版本變成 Replace mode,而新推出的 Concatenate mode 則已解決相關的議題。也許在使用上還是會有點困惑,以下就使用一些 Scenario 為各位介紹一下這兩個功能之間的差異以及解決了什麼問題 🙂。

繼續閱讀

藉由 LINE Python SDK 初步認識開源專案

前言

從一開始在社群中為了 demo code 將程式放上 GitHub,接著到了認識前輩們都在開源圈積極展示自己的成果也分享帶來的好處,造就了我也加入開源行列,但看了 open source 中許多好用的工具,也希望自己能夠看懂並加入開發,希望自己的貢獻能力(Pull Request)別只停於上傳範例以及修改文件,以下我就使用我第一個貢獻的 LINE SDK(python) 帶大家了解開源專案會有的樣子。

繼續閱讀

【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

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

繼續閱讀

第一次寫 Python SDK 實戰全記錄

前言

對於 LINE Notify 其實早早就一直有在使用,不管是 server 健康檢查、空汙通知、直播主開台通知...等,都一直使用著,也是因為一直在用時有個困擾,就是每次都要找 API 文件並且看對應的參數...這在開發流程上浪費了不少時間,也因為到 Pypi 套件庫裡找 LINE Notify 相關套件時大多都只有推送功能,幾乎沒有對於認證流程的操作的 function ,文件也不齊全,在此同時也看到卡米哥的 GitHub 在此時上傳了一個 Notify SDK,畢竟我對 Ruby 還不算陌生,就直接參考卡米哥的架構並加上單元測試來完成本篇要介紹的 - Lotify

繼續閱讀

【LINE API 的小眉角】feat. Flex message, LIFF, Richmenu, Provider

birds

前言

因為遇到了很多不算坑的坑(說啥呢?),有些是文件沒有寫而有些可能是我沒有注意到的,但既然都知道了就乾脆記下來吧!

LIFF reply 到底算不算收費?

LIFF SendMessage api

字面上看起來很像 Push Message 的事件,但實際上是走 Flex Message,使用 Message api 的 Reply 功能來幫忙使用者發送條件引發 Bot 行為,並非是透過 Push api 發送讓 Bot 反應,這邊需要多注意喔!

liff.sendMessages([
  {
    type: "text",
    text: "You've successfully sent a message! Hooray!",
  },
]);
繼續閱讀

【LINE API】- 使用 Icon Switch 讓你的機器人同時有多個角色! feat. Python

最近 LINE 釋出了一個我很喜歡的功能 - Icon Switch🎚,從字面上的意思就是可以切換機器人的 Icon (名稱以及大頭貼),過往開發者在使用時都只能較死板的使用同一個頭像或暱稱來回應使用者,而現在只要使用這個這個功能就可以很輕易地切換你想要的大頭貼以及暱稱了 😇

據可靠消息指出這以前是需要收費的功能,而現在則是免費推出來給大家使用,讓大家可以有更多的彈性去開發新功能~

繼續閱讀

2019 LINE Dev Day - 議程心得(3) - Armeria - A Microservice Framework Well-suited Everywhere

Armeria: A Microservice Framework Well-suited Everywhere

前言

大家好我是 Chatbot Developer Taiwan - NiJia,很開心這次能夠以 LINE API Expert 的身份被邀請來參加 LINE Developer Day 2019。

本次議程是由韓國的 open source manager - trustin 為我們帶來議程。

而在今年參加八月舉辦的 COSCUP,並且在第一天的 after party 參加 LINE BoF 上就已經看到 LINE 開發的 Open Source - Armeria,它是基於 Java 所撰寫的一個非同步的專案,支援 Java8, Netty, HTTP/2, Thrift 以及 gRPC,當時聽團隊簡單介紹就覺得這個專案一定是個很不得的專案,只不過當時因為他們快速介紹兒少聽了很多細節,這次就把我聽到的細節告訴各位吧!

據之前的議程的以及講者的分享說這個服務已經被應用於很多 LINE 服務裡頭,因為覺得好用才推出來🤣

如何讓開發者快速使用 Armeria

接下來就用 Java code 來簡單火力展示如何用一個串聯式寫法把服務互叫起來,不管是要用什麼服務只要用串接的方式加入即可,像是 gRPC、Thrift、annotation...等等如下面幾張圖所示。




這邊看到可以這麼簡單就把一個服務叫起來,然後要讓他開發者可以很輕易地理解並上手,LINE 團隊的開發文化真的是令人佩服...

為什麼要做成 async 以及 reactive

首先就先提到若 Queue 裡頭的東西若是都 sync 的話會有什麼問題,這邊就以一個 Call API 常遇到的問題 - Timeout,在大量的 Queue 在排隊時,以 sync 的方式存在時光遇到 Timeout 就會有服務器爆炸的問題,因為彼此不能影響彼此,且這件事會發生在真實世界的每個地方。


這邊講者提出的解決方案為:

  • 增加執行緒的標記(#)並且減少呼叫堆疊(stack)
  • 預準備 Tread pools 讓大家互相共享
  • 少調用 points
  • 使用非同步的好處就是能夠平行呼叫+較少的執行緒

現在他們能用非同步的方式解決系統被鎖住的問題,但今天若遇到一個很肥~的 payload 呢?以範例來說若一個用戶送他 10 MB 的大小,一次送給 100K 個用戶就相當於 1 TB 大小的流量。

這邊使用的方法是用不同的頻寬 & 處理能力,並且只需要足夠的 buffer 來排除 Out of Memory 的錯誤。

聽到這邊看起來是使用相關的工具來讓整個串接服務可以更有效的 Debug,最後透過 Kibana 來讓訊息可視化,讓 Debug 可以更加快速。

若對相關 Debug 工具可以參考我之前寫的 Sentry 文章

Kibana 可參考: 安裝 ElasticSearch + Kibana 實現中文全文搜尋與數據分析

結論

經過了講者一連串的火力展示後感受到 LINE 對於 open source 有多麽的重視,連 Slack 也都愛上 Armeria 這套 Java 函式庫,用於他們的軟體中並公開推薦,讓像我這種喜歡做 open source 的工程師可以燃起新希望繼續為開源做努力。

其實還有很多技術細節的部分在簡報裡,這邊我就不再多家贅述,大家可以參考 GitHub,裡面有更加詳細的用法提供給大家。

這次來 LINE Developer Day 讓我感受到不同於其他大公司的文化,除了精彩的議程外也招待我們這群 LINE API Expert 前來共襄盛舉,若你也想成為 LINE API Expert,不妨拿著你的貢獻來申請看看連結,或許明年我們就能一起去啦!

或是你想面對面直接問問看,也可以來 Chatbot Taiwan 參加我們一個月一次的社群聚會喔!我們時常會邀請 LINE 的資深技術傳教士 - Evan 來為各位帶來第一手 LINE 的資訊,也許可以跟他詢問看看,或許會有意外的收穫喔!

繼續閱讀

2019 LINE Dev Day - 議程心得(2) - How we continuously delivery LINE TODAY App with high agility and high quality

How we continuously delivery LINE TODAY App with high agility and high quality

簡報連結: URL

前言

大家好我是 Chatbot Developer Taiwan - NiJia,很開心這次能夠以 LINE API Expert 的身份被邀請來參加 LINE Developer Day 2019。

這個議程是難得出現的台灣人,一開始只是想說聽看看 LINE TODAY 是如何透過維持高度敏捷以及保持高品質,其實也就是瞎子摸象,結果聽到自我介紹後發現是台灣人來講,感覺就是在異地聽到一個台灣味的口音覺得很親切🤣

接下來就看一下我聽完這場的心得吧!

負責專案

  • LINE
  • LINE TODAY
  • LINE SDK
  • LINE MUSIC(Taiwan) 最近常常出現在左上角的那個 LINE MUSIC

流程

從 Pull Request - Code review - Build pipeline - unit test - UI test - deploy

當中提到兩個主要部分:

  • Unit test: 覆蓋率最好要多少?
  • UI test: 自動化測試的可信度?

且在測試當中會有一種測試叫做 flaky test,有時候測試有過、有時候有沒過,完全讓人摸不著頭緒的測試,這會傷害到軟體品質以及覆蓋率,因此若這種狀況出現時趕快號招團隊的人來討論這個狀態是否處理。

flaky test

UI 自動化測試

在這部分提到說 UI test code 好寫但是難去維護,主要在於 UI 的東西可能會因為裝置、作業系統...等等的問題去影響到,且會很容易出現 flaky test,這邊我詢問講者得到的答案是測試只要確認在當前 UI 上最重要的元件若有出來的話這部分的測試就給過,若太精細的測試時常會影響到整體的開發敏捷度與流暢度。

想想也是有道理,平常聽到人家說測試測試的,只是當今天測試時的究竟是要到多詳細還是要取決於團隊的決定。

這段講者有提到要注意 UI Automation test 是 Smoke test,因此要注意維護成本以及flaky test的問題!

驗收標準 - Acceptance Criteria

接著就提到團隊需要準備各種情境所需要的東西:

  • 不一樣的測試資料來讓產品有彈性且是可信賴
  • 若有針對類似 Database 這類的測試團隊則更需要去注意測試細節避免導致特異情況 總之就是 Product Owner(PO) 是需要訂定團隊規則並讓大家去遵守,確保品質!

這裡有提到他們經由上述制定好的驗收標準之後,隨著 Release 版本之後的手動測試比率逐漸減少,到後來都是偏向自動化測試去處理,且是有團隊可信度。

Code Coverage

這邊以 iOS 開發為例,首先就是 MVC 框架上所遇到的問題,官網都是以 MVC 下去做範例,但實際上開發起來則是還得以 MVVM 的框架去執行在測試的部分才不會採太多不必要的坑。 接下來提到的部分我覺得是這個議程最重要的一部分,就是如何去取捨覆蓋範圍,像是上圖顯示,可能會有一些 Callback 或是其他的是不可預期的範圍,團隊需要將這些問題一一列出來討論,並且去制定一個最低標準以及 Must have 的標準,促使團隊可以更有規則的去進行開發,如下圖所示。

結論

其實一家公司很願意花成本去讓開發者可以去寫各種測試確認服務品質,若是以普遍環境來說這真的是很難人可貴的地方,此外從中也了解到一個好的流程應該是如何,從談需求到開發中間所要經歷過多少事才能讓一個服務起來,測試這部分真的是很大的一門學問,千萬別寫一堆測試但這個測試只是自己測開心的,而是要讓測試的內容可以讓團隊很放心的將 code 交給測試去驗證,達到這樣子目的的程式我相信在市場上一定是很能接受考驗的!

繼續閱讀

2019 LINE Dev Day - 議程心得(1) - Seamless device migration using LINE secure backup

Seamless device migration using LINE secure backup

簡報連結: LINE Dev Day 2019

前言

大家好我是 Chatbot Developer Taiwan - NiJia,這次被 LINE 邀請來參加 LINE Developer Day 2019。 經由 每位負責人的 Keynote 開場完後就是會眾們開始聽議程的時候了,我選擇跟資安相關的主題來開始我今日的第一場議程,想想在接觸資安時還是大學時期呢(遠望)。

心得

開場不免俗的一定是要自我介紹並說主要大綱,講者本身為一個駭客並是 Side-Channel Marvels 成員之一,在 GitHub 上坐了一個逆向工程的工具 - QBDI。而作為一個 Hacker 破壞當然對他們來說是相對簡單,但換個方向來看,就是透過滲透測試來建立更完整的服務內容,的確在真實世界上要摧毀一個服務是相對容易的!

但講者是在 LINE 這種規模較大的公司裡做滲透測試,在滲透後做完測試報告時需要顧慮到其他開發團隊的工作時程問題,也許這個漏洞在實際服務運轉上的容錯率是相對高的話,就可以讓開發團隊安排時程去修補漏洞而避免延遲產品上線時間。

這邊主要提到一些 加密協定原則 以及傳統訊息傳送都是怎麼做。 接著說到帳號轉移裝置時的問題,今天要從舊的裝置備份到新裝置時,若透過 Server 的話他只有加密過後的資料,如此一來根本無法備份過去,而 end-to-end 的備份的話會遇到以下問題:

  • 會受到各種通訊協定的問題(wifi, Bluetooth, NFC...)
  • ios - andriod 不同裝置相容性問題
  • 需要重新建構訊息模型
  • 要怎麼處理來自 parameter 的攻擊
    • Hacker 透過中間人攻擊
    • 會透過各種狀態來找尋漏洞 (BGP, DNS, Certificate PKI...)

UX x Security

前面簡單介紹一些備份上的問題以裝置間的問題,接下來就進入如何在最好的使用者體驗上並擁有資訊安全:

若要最好的使用者體驗 - Best UX

流程

  • ✅不需要在意裝置間的問題
  • ❌會被駭客透過中間人攻擊去塞有問題的資料
  • ❌安全層級等於零

這樣公司就不用運作啦 (笑)

最安全的等級但最差的 UX

Best security

  • ✅Private key 加密過並且擁有最難破解的密碼
  • ❌使用者根本記不得這密碼
  • ❌密碼過於複雜

這邊講者有補充若是只有六位數的密碼他大概有 一百萬 種可能性,可以透過暴力破解的方式就解決,且有大約 10% 的密碼是重覆性很高的,因此還是建議擁有大小寫以及特殊符號是相對好!

每天都會有弱密碼出現於生活中

  • combination padlock
    • 硬體設備都用很弱的加密協定
  • Banking card PIN
    • 很容易出現像是 生日 這類的密碼
  • smart phone lock screen
    • 使用者求快
    • ARM trustZone / apple secure

Server Side 相關相關加密元件

HSM in backups

接著就介紹是如何透過 HSM 的硬體元件來處理備份資料資安的問題 透過硬體(HSM)來幫忙加密確保每一段上傳下載都是安全且可加解密,使用者在這過程中也不需要輸入一大串的密碼就只顧及資訊安全而放棄 UX,而在 HSM 當中會將私鑰安全的存下來,不用擔心會有被攔取之類的問題。

由於 HSM 經過雙重加密認證達到資訊安全且是安全的儲存下來,因此不會因為被抓到之後就馬上被解開,確保整個資料傳遞上的安全性。

上圖則為 HSM 簽證公鑰的註冊流程,經由一連串的加密把它存成二進制 source code,且裝置還是能使用 public key 來解開這個二進制檔案,如此一來在備份到新裝置上就不用擔心整包資料的安全性了!

結論

我們在實作的網站在沒什麼流量時都不太需要注意資安相關,但當系統請求越來越大或是有金流時在每段的加解密終究都相對重要很多,且在建立 UX 以及 Security 之間要如何平衡也是個重要的議題,如同講者說的,在做這些技術的同時且站在巨人的肩膀上(LINE)對於白帽駭客的成就感是源源不絕的,能夠透過滲透來讓我們每天在用的東西更加完整也是很棒的一個作法😊。

而過往在聽駭客朋友們在聊都是在講 WAF 較多是在講 Web application 相關的,這次聽到的 HSM 功能看起來雖然很相似,但看來是叫專注在資料的加解密當中,或許當中應該還有更深入的功能還未提到,透過這個議程認識到新的東西也是一大收穫😁。

繼續閱讀

續篇 — serverless + WSGI + flask + chatbot 的開發指南

前言

如果還不知道 Serverless (以下簡稱 sls )的朋友可以先看我上篇文章,裡頭有介紹 Python 以及 Ruby 的範例。 還沒接觸 Serverless 之前,當開發完一包程式時就將它部署至 Heroku,實在是有夠方便又快速(還是免費的)。不過有個問題是當程式沒在運行時他會睡覺,身為一個免費仔做的小專案這樣是夠的,做為一個貪心的免費仔怎能容許睡覺睡這麼久 🤤!但若是照著我上篇分享的文章做,佈署程式沒問題,但就開發機器人我都要佈署才能測試,這未免也太不人性了 😒。

繼續閱讀

使用 Serverless & LINE Message API 在 AWS 上打造一個 Echo bot

前言

Serverless 架構是一個基於 FaaS(Function as a Service) 實作的一個服務,讓開發者可以更專注在開發功能,將 yml 檔設定好其餘維運的問題都交給 AWS、Google、Azure 這些服務商去處理,只要把信用卡準備好就好(?),讓開發者在寫完程式之後不用煩惱部署得問題,減少的不少的麻煩事。 那因為現任公司的服務都是基於 AWS,如此這般我就接觸到 Serverless(以下簡稱 sls) 這個框架啦 (想更深入了解 FaaS 架構可以參考 AWS) [2019/07/04 更新] 若已經暸解的朋友可以參考我的 python 版本: louis70109/aws-line-echo-bot Ruby 的範例版本: louis70109/aws-ruby-line-echo-bot

為什麼要 Serverless

[2019/06/29 更新] 以用一個 Ruby on Rails 寫的機器人為例,在寫完個 webhook function 後,設定路由然後部署,一般主機或是虛擬機就很麻煩,要安裝佈署環境以及一安裝堆相關套件,完了之後設定 Domain 什麼的有夠花時間。但若是使用 heroku 部署就很方便,Login — Create-Deploy 馬上就結束,機器人馬上就上線了,實在是俗又大碗呀~ 但我覺得像是 LINE Message 這種 stateless 的服務,且只要一個 function + route 就能實作的程式最適合 Serverless 了,讓專案可以簡潔有力,只要寫一個 function+yml 設定並打個指令就部署了,而且 domain 還附贈 SSL,將服務交給 AWS 也不需要擔心,整個就是超級方便啊! Cold start time 問題,依照我目前使用的結果下來,在 heroku 以及 AWS Lambda 同時睡著的情況下,AWS 起床的回應速度大概 1 秒左右,而 heroku 則大概落在 10~15 秒(參考)。如下圖所示的免費方案,基本上開發階段應該是不至於到 100 萬/月 個請求吧 😆,所以這部分就別擔新大力地給他用下去~ (感謝 petertc 幫忙找這方面的問題 💪)

AWS Lambda 免費方案 接下來就讓我介紹如何使用 sls + LINE Message API 建立一個 Echo bot 吧!

環境

npm 6.9.0 python 3.7.3 serverless 1.45.1

建立 AWS 存取金鑰

首先要先有個 AWS 帳號(廢話) ,如果沒有綁定信用卡記得去綁定才能繼續,接下來就可以去就可以去建立鑰匙囉! 如上圖,按下紅色框框的部分,接著按箭頭指的按鈕,就會建立一個我們要的金鑰囉! AWS secret & ID key

如上圖所示,可以下載 key,AWS 不會幫忙保存 Secret key,若這視窗關掉的話 key 就不見了,所以使用者可以自行下載檔案保存,以免哪天要部署的時候找不到 key。 接著就將這兩個參數加入環境變數中:

export AWS_ACCESS_KEY_ID=<your-key-here>
export AWS_SECRET_ACCESS_KEY=<your-secret-key-here>

Serverless 建立與部署

首先先透過以下指令讓 npm 幫忙安裝 sls 的指令。

npm install serverless -g

安裝完之後就透過 sls 指令來建立專案嚕!

serverless create — template aws-python — path aws-line-echo-bot

severless 指令可以縮寫成 sls template = 想用什麼平台以及語言就在此模板了 (參考) path = 檔案名稱

透過 severless 建立專案指令 依照不同的 template 可能會建立 N 個檔案,但主要還是以下三個檔案

.gitignore
handler.py = 主程式的地方
serverless.yml = 所有設定都在這裡,funtion 參數會對應到指定的路由

在部署前須至 serverless.yml 裡,把 runtime 的 python2.7 改至 3.7,否則會因版本問題導致錯誤。

serverless deploy # sls deploy

Serverless 部署畫面

接著到 AWS Lambda 以及 S3 就可以看到第一次部署完的程式以及檔案囉!

加入 LINE Message API

既然是寫 python,那一定是要用 line-python-sdk 照著官方用法應該是要執行以下指令安裝套件

pip install line-bot-sdk

不過我們是要部署到 AWS 的 Lambda 上,且因為他是無伺服器運算的服務,所以他沒辦法跑 pip 去幫我安裝套件。 此時就要出動 requirements.txt 來管理相依套件 ,但只有加入它 sls 根本不認識,因此我們需要安裝 pulgin 來讓 sls 認得(requirements.txt)。

sls plugin install -n serverless-python-requirements


安裝指令 & package.json 如圖,安裝過程中會自動建立 package.json,且會幫忙在 serverless.yml 裡面加入 pulgin,這樣 sls 在部署時就認得 requirements.txt 囉! 接著將 LINE SDK 加入 requirements.txt, AWS 就會幫忙安裝套件了。

echo "line-bot-sdk==1.12.1" > requirements.txt

然後新增一個 setup.cfg 並加入以下內容:

[install]
prefix=

由於 AWS Lambda 上都會將套件安裝在本地端(Lambda 上),因此在執行 pip install -t . -r requirements.txt 時會需要 setup.cfg。 至於詳細原因嘛~還有請各位大大幫小弟解答 🙏 最後就處理 handler.py 以及 serverless.yml 囉! 將上述兩個 gist 分別貼到自己的 handler.py & serverless.yml,在 hanlder.py 裡的 CHANNEL KEY & TOKEN 記得換成自己的機器人 👾 哦! 佈屬完狀態 接著在執行一次 sls deploy,將程式部署上去,如上圖所示,在 endpoints 那行會有一個網址,將那網址放到 LINE Webhook URL 上並 Verify 看看有沒有成功,如下圖所示。 最後對著自己的機器人發個話,看他有沒有回應你一模一樣的文字,若成功了就能往下一步應用層繼續開發囉!若失敗了就要檢查一下是不是有哪個步驟做錯了~

結論

因為公司的緣故讓我能夠接觸到這神奇的 Serverless,經過這次的分享加深我對於 FaaS 的架構更加了熟悉,由於我也是初碰,我認為使用上可以把它當作是一個 Docker 的容器或許概念上會比較好理解,後續還有很多的設定檔都還沒詳細研究,最近讓我先研究研究一下再上來分享。

文章中有任何勘誤歡迎指正

如果覺得這篇文章有幫助的話請給我個掌聲鼓勵我一下 👋 下列是我的這次實作的專案,如果有幫助也來顆星星吧! louis70109/aws-line-echo-bot

參考

繼續閱讀

鐵人賽-文章列表

大家好,我是 NiJia

以下是我最近參加 IT 邦幫忙 30 天鐵人賽的文章列表,主要是紀錄從我進入新公司後學到的Serverless,並透過結合 LINE API 實現在 AWS 上,歡迎大家參考取用 😃


繼續閱讀

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 的傳教士如何呢 😁

繼續閱讀

Welcome to LINE API Expert and first thing — LINE Developer Day

前言

人品爆發的下半年有幸被選為 LINE API Expert,謝謝過程中給我指點、意見還有每位來參加每個 chatbot TW 活動的朋友,你們支持讓我可以更努力去辦各種活動,社團裡歡迎大家踴躍提點子討論,抑或是來參加小聚跟大家互相交流,台北台中都有小聚哦!若有不清楚的地方歡迎詢問😃 Chatbot Developers Taiwan:https://www.facebook.com/groups/chatbot.tw

迎新

在 welcome party 中身為 Rookie of LINE API Expert 一定是要被每一位大神輪流 “熱情關照” 一波🤣,想想之前在開發時還在看卡米狗 卡卡米 的 IT 30 鐵人賽、寫 golang 看著 Evan Lin 的部落格、看保哥 Will Huang 在議程中各種秀高速開發技能 … 等等的,沒有到偶像們就直接坐在旁邊,看著看著我就快不行了😝。跟大神們聊完覺得自己做的事還只是冰山一角,看著大家都那麼有影響力下還是這麼努力向前進,做為菜鳥的我當然不能就這樣滿足!繼續抱著大神們的腿前進。(喂!放開自己走啊!)

成為 LAE 後的第一場開發者日

緊接著第一場大型活動就是參加 LINE 的年度大會 — LINE Developer Day,過往都只能看著前輩們分享文章在電腦前面乾過癮,看著大家可以在國際間跟各路的開發者交流,這一直是我很羨慕的事情之一。但是!現在終於有機會以 LAE 的身分出發啦(媽我在這)!聽說去年有 60 場各種主題的座談會,而今年 LINE 主要會以推廣 人工智慧 為主軸,並且搭配其他在 LINE 中重要的技術形成了這次的 developer day,也開始漸漸露出在新聞版面了,看起來想拓展的企圖心也越來越強了🚀 以下是其他 LAE 以及社群創始人 Clement Tang 在 2018 年參加 LINE Dev Day 的文章分享

2019 的 Dev Day 資訊出來囉, 活動時間: 2019/11/20、21, 10:00~21:00 (日本時間) 活動地點:東京台場日航大酒店Grand Nikko Tokyo Daiba (2–6–1 Daiba, Minato-ku, Tokyo) 活動入場費用:免費 參加方式:繳交報名表、預先報名

活動則環繞在開發工程(Engineering)以及產品開發(Production)上

「LINE DEVELOPER DAY」開發者大會將於11/20、21東京登場 | T客邦

屆時我會分享文章出來,還請各位多多關注😀

結論

說了這麼多,還不去申請一波 LINE API Expert?讓自己的努力有個機會被 LINE 看見: LINE developers community | Expert Request 或是你還不清楚要怎麼開始第一步,來小聚跟我們聊聊吧,社群的每位大大都很熱心跟各位分享,千萬別錯過這些機會哦! Chatb13ts meetup 聊天機器人小聚 #13 @ 台北商業大學 ▎活動型態 Chatbots meetup 社群台北、台中皆有一個月一次的定期聚會,致力於提供並討論聊天機器人的相關應用,每回小聚將安排講者主題分享、新知討論,環繞 Chatbot。

繼續閱讀

Day24 - 簡單使用 LINE LIFF API

前言

以下就為大家帶來簡單的實作以及如何去使用它。

實作

views/下新增一個liff_test.html並加入以下內容

<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
    <script src="https://d.line-scdn.net/liff/1.0/sdk.js"></script>
    <script>
      function initializeApp(data) {
        $("#userid").val(data.context.userId);
      }

      $(function() {
        liff.init(function(data) {
          initializeApp(data);
        });

        $("#ButtonGetProfile").click(function() {
          liff.getProfile().then(profile => {
            $("#UserInfo").val(profile.displayName);
            alert("done");
          });
        });

        $("#ButtonSendMsg").click(function() {
          liff
            .sendMessages([
              {
                type: "text",
                text: $("#msg").val()
              }
            ])
            .then(() => {
              alert("done");
              liff.closeWindow(); // 關掉頁面
            });
        });
      });
    </script>
  </head>
  <body>
    <button class="liff_btn">Get user profile</button>
    <label>user id:</label>
    <input class="form-control" type="text" id="userid" /> <br />
    <button class="btn btn-primary" id="ButtonGetProfile">Get Profile</button>
    <input class="form-control" type="text" id="UserInfo" /><br />
    <label>要傳送的訊息:</label>
    <input class="form-control" type="text" id="msg" value="測試" /><br />
    <button class="btn btn-primary" id="ButtonSendMsg">要傳送的訊息</button>
  </body>
</html>

以上參考來自董老師的部落格

詳細的 LIFF API 文件可以參考

接下來按著之前做過的一樣把這個檔案送到S3裡,接著它的網址複製起來

接著來去之前建立機器人的開發者頁面裡按下最右邊的LIFF 按下去之後呢,再來按下add 跑出這個頁面後,Name好辨認為主、Size選擇滿版(Full)、Endpoint URL就把剛剛複製起來的 S3 網址放進去後按Confirm 大概內容會長得像這樣 建立成功後往下滑會看到 LINE 給你一個屬於他們的網址,接著可以把它貼到你的機器人上(或者任何聊天室) 點下去之後就會看到來自 LIFF 的 Webview 囉! 接下來就可以開始玩裡面的功能了 🤣

結論

LIFF 整合的功能讓開發者在 Bot 裡不好實現的功能透過 Webview 的方式讓使用者可以到頁面上做邏輯處理,透過兩種的結合讓整體的應用就有更多的變化,這邊若要給使用者個話就把 line://xxxoxx 製作成 flex message 或者乾脆傳給使用者,引導他點選,如此就能讓使用者到自己設計的頁面上了。

這邊額外補充一點,有看到程式碼裡面可以拉到Query string嗎?事實上可以透過Query string讓使用者帶些參數來做更多的判斷,像是卡米哥做的Kamiliff就是讓使用者在點選後判斷這個 LIFF 的 Size,在導去對應的路由去做處理,這樣子使用者在建立 LIFF 的時候就不用一個頁面弄一個,否則這樣在 dev 轉 prod 的時候應該會弄到很生氣 🤣。

繼續閱讀

Day23 - LIFF(LINE Front-end Framework) 簡介

介紹

LIFF (LINE Front-end Framework)顧名思義就是 LINE 開發在 LINE 這個通訊軟體裡面的 Web view(好饒舌),他是一個很精簡的內建瀏覽器,主要是能夠讓開發者可以使用 HTML & Javascript 可以去處理一些在 bot 不好實現的功能,也讓開發者可以透過使用 JS SDK 去拉使用者的資訊,藉此可以做出更多種的應用。

網址的樣式都像是這樣line://app/ZZZZZ-AAAAAAA,透過 deep link 的方法讓 LINE 本身可以認得這個藉此去導向設定對應的網站,畢竟做平台的公司內部要互相溝通也是,就透過這種方法去讓不同部門的工程師可以互相使用好像也是不錯(?)

它也可以搭配在之前做的 LINE 服務上,Notify、Message api 上都可以串上去搭配不同種應用,而這個簡易的 Web view 有下面三種的顯示格式可以使用,開發者可以搭配不同應用場景去做搭配。

一開始都只能使用 curl 來增加項目,使用方法可以參考這篇,現在可以直接在 LINE Developer 頁面線上新增,像下圖片在這個頁面就可以新增了

curl -X POST \
-H "Authorization: Bearer YOUR_CHANNEL_TOKEN" \
-H "Content-Type: application/json" \
-d '{
    "view": {
        "type": "LIFF_SIZE",
        "url": "URL_OF_YOUR_APPLICATION"
    }
}' \
https://api.line.me/liff/v1/apps

這邊推薦一個 kamiliff,卡米哥就用一個路由帶著 query string 來判斷,再轉打去其他 controller,如此一來就不需要為了每個頁面去獨立建立 LIFF,如此一來測試跟上線都很好管理,推薦大家去參考卡米哥的 kamiliff 的實作方法~

這個功能最大的好處就是可以在 LINE 裡面就可以直接用,若是把使用者導出頁面基本上轉換率以及使用者體驗一定會變很差,所以若是有在開發 LINE Bot 的話很推薦使用這個。

結論

以前我曾嘗試過使用 LIFF 使用 websocket 去跟 MQTT 溝通( IoT 裝置常常使用的通訊格式),只是他的 websocket 似乎有開,但是總是沒有收到數值,這部分實作也是年初時使用,現在這時候就不知道能不能用了 🤣,若不行就期待哪天他能提供出這個服務了~

參考

LIFF overview

繼續閱讀

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 來實作,就可以讓兩個入口去統一,在狀態流上就能比較好控制了。

繼續閱讀

Day21 - LINE Login 實作

前言

現在有規模的平台提供商基本上都會提供 Single Sign On (SSO)的登入機制,藉由他們的平台讓一般小網站可以讓使用者免密碼登入,雖然有很多種 Oauth2 的套件,不過我還是喜歡自己打 🤣,下面就開始嚕!

實作

views/建立一個line_login_auth.html,填入以下內容,主要是實作一個按鈕並透過 javascript 來互叫 api 並導向到 LINE 頁面

<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>
    <button class="auth" onclick="auth()">LINE LOGIN</button>
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
  <script>
    function auth() {
      $.ajax({
        url: 'https://YOUR_SERVERLESS_DOMAIN.amazonaws.com/dev/line/auth',
        method: 'POST',
        success: function(data) {
          window.location.replace(data.result);
        },
      });
    }
  </script>
</html>

接著我們在.env加入 LINE Login 的環境變數並輸入對應的參數

LINE_LOGIN_CLIENT_ID=
LINE_LOGIN_SECRET=
LINE_LOGIN_URI=https://YOUR_SERVERLESS_DOMAIN.amazonaws.com/dev/line/auth

最後就是我們最重要的部分了,實作 GET a& POST 的 api,這邊我先從 POST 講起,這邊主要是把環境變數組在網址中回傳給前端,這邊需要注意的是state他是在回傳回來的 JWT 需要解碼時所使用的,這邊我簡單打個字串,然而實際上會隨機產個變數,確保解碼的安全。

GET 則是負責處理從 LINE 回來的參數們,這邊我只用回傳回來的stateid_token解開,拿到裡面的使用者的參數,後續可以參照應用把資訊存下來,放入 session 並告知前端已登入。

from flask import request
from flask_restful import Resource
import requests
import webbrowser
import os
import jwt
import json


class LineLoginController(Resource):
	def get(self):
		r = requests.post(
			"https://api.line.me/oauth2/v2.1/token",
			data={
				"grant_type": "authorization_code",
				"code": request.args.get('CODE'),
				"redirect_uri": os.environ.get('LINE_LOGIN_URI'),
				"client_id": os.environ.get('LINE_LOGIN_CLIENT_ID'),
				"client_secret": os.environ.get('LINE_LOGIN_SECRET'),
			}, headers={"Content-Type": "application/x-www-form-urlencoded"})
		payload = json.loads(r.text)
		print(payload)
		token = payload.get("id_token")
		if token is None:
			return {'result': payload['error_description']}, 400

		state = request.args.get('state')
		token = token.encode()
		dt = jwt.decode(token, state, None, algorithms=['HS256'])
		if dt:
			return {'result': dt}, 200

	def post(self):
		r_uri = os.environ.get("LINE_LOGIN_URI")
		client = os.environ.get("LINE_LOGIN_CLIENT_ID")
		state = "nostate" # it will be random value
		uri = f"https://access.line.me/oauth2/v2.1/authorize?response_type=code&client_id={client}&redirect_uri={r_uri}&scope=profile%20openid%20email&state={state}"
		return {'result': uri}

JWT 解開的參數如下,sub就是 LINE 的唯一值 ID,一般拿到這個就可以知道是來自 LINE 的使用者了。

{
  "result": {
    "iss": "https://access.line.me",
    "sub": "Ud6ab866a67xxxxxxxxb12b0baffb8ac",
    "aud": "1622939248",
    "exp": 1569925548,
    "iat": 1569921948,
    "amr": ["linesso"],
    "name": "NiJia Lin",
    "picture": "https://profile.line-scdn.net/0hKvTocMuLFFlpFj9HpKdrDlVTGjxxxxxxxxx1YHACMOPRtEHmkWJVIKUyUJNkQWGT0X",
    "email": "loxxxxx09@gmail.com"
  }
}

最後別忘了要在api.py加入路由才會被導出去ㄛ

from controller.line_login_controller import LineLoginController
api.add_resource(LineLoginController, '/line/auth')

結論

在實作的時候不知道為什麼一直不能讓 python 去幫我把用戶導去 LINE 認證的頁面,我記得之前寫 Ruby 可以啊(?),最後只好讓前端去幫我把使用者導出去,這邊就帶大家做到這嚕!

繼續閱讀

Day20 - LINE Login 申請與基本頁面

前言

上篇介紹了好多了,這邊就不廢話了,直接就帶大家申請一個 LINE Login 的服務。

實作

首先到自己的開發者頁面按+,並選擇最左邊的選項 接著輸入App name(服務名稱)、App description(服務簡介),因為我們是實作 API ,所以選擇Use WEB的選項,接著再輸入email 把該填的填完之後按下送出就會看到有一個新的服務嚕! 點進去後往下滑,可以看到有個 link to this channel 的選項,這邊選擇一開始建立的那隻機器人,綁定之後就變它的形狀啦(?) 接著再往下會看到 Email 的狀態是 Unapplied,然後按下右邊的Submit 會看到這樣子的一個框框,把兩個框框打勾並選擇一張圖片上傳,這部分就算是申請帳號下面的同意服務條款一樣,圖片就上傳自己希望當使用者到你頁面的時候想看到的圖片 🤣,送出之後就會看到狀態改成 Applied

結論

很多時候實作對我們來說已經不是什麼問題了,重點是在找不到服務要怎麼去申請 😓,這篇也算是記錄一下申請的步驟細節,接下來會實作個簡單的認證頁面以及 API,打完收工嚕!

繼續閱讀

Day19 - LINE LOGIN 介紹

前言

LINE 中文版也上線啦 URL 去某些網站登入你可能會有像下面這樣 或者是你有玩過 LINE Rangers (怎麼感覺我好老),就會看到他們登入畫面有個登入鈕,按下去按確認後就登入,使用者不用輸入帳號密碼。 這個機制被稱為 SSO (single sign-on),它是透過 OAuth2 的機制來做認證,因為不儲存密碼除了可以降低儲存第三方網站的風險,以及使用者不需要記憶各種不同的密碼所帶來困擾,像是 Facebook、Google、LINE...都有相關的機制可以串連 SSO 的服務。

以下會介紹 LINE Login 的流程。

流程

這裡我使用 LINE Login

  1. 服務要引導使用者到 LINE 認證頁面並帶著必填的欄位。
  2. LINE 會在瀏覽器上打開認證頁面,使用者必須按下同意才會進行認證。
  3. LINE 會透過設定過的 redirect_uri 還給你一個 authorization code 以及 state 在 Query string 上。
  4. 你的服務需要將 authorization code 打到https://api.line.me/oauth2/v2.1/token
  5. LINE 確認完之後就會送你一個 access token 嚕!

    可以拿透過 social API 去拿到相關資訊

結論

下一篇再帶著大家申請一個 LINE Login 的服務並建立一個簡單的註冊頁面~

參考

OAuth wiki LINE overview LINE 中文文件

繼續閱讀

Day18 - 在 Serverless 上設定個排程來發送空氣污染檢測吧

前言

過往寫了這麼多的 api,總是會有特定的功能會需要輪詢資料庫或是監聽某些事件,以前還要到弄個虛擬機寫腳本用 crontab,這時候 Lambda 的用處就來啦!不只可以處理 api 的事情,還可以設定排程做事,太舒服啦,以下就來介紹一下~

實作

首先在 consumer 資料夾下line_bot_alert.py,再寫一段需要定時跑的程式,這邊我去抓中央氣象局的資料,大概簡單判斷一下區域以及算出他的範圍:

import json
import requests

def alert_handler(event, context):
    air = requests.get(
        'http://opendata.epa.gov.tw/webapi/Data/REWIQA/?$orderby=SiteName&$skip=0&$top=1000&format=json')
    air_body = json.loads(air.text)
    air_status = ["良好",	"普通",	"對敏感族群不健康",	"對所有族群不健康",	"非常不健康",	"危害", "資料有誤"]
    total, count = 0, 0
    for fetch in air_body:
        if (fetch['County'] == "臺中市" and (fetch['SiteName'] == "西屯" or fetch['SiteName'] == "沙鹿")):
            count += 1
            if fetch['AQI'] != 0:
                total = total + int(fetch['AQI'])
    switch = 0
    pm = int(total / count)
    print(pm)
    if pm in range(0, 50):
        switch = 0
    elif pm in range(51, 100):
        switch = 1
    elif pm in range(101, 150):
        switch = 2
    elif pm in range(151, 200):
        switch = 3
    elif pm in range(201, 250):
        switch = 4
    elif pm in range(251, 300):
        switch = 5
    else:
        switch = 6
    payload = f"\n空氣品質: {air_status[switch]}"
    r = requests.post('https://1uv2o723o4.execute-api.us-east-1.amazonaws.com/dev/notify/sqs',
                      data={'message': payload})
    print(r)

serverless.yml的 function 下面加入 Lambda,handler 就是 資料夾/檔案.類別,設定事件(event)排程一分鐘一次

function:
  line_bot_alert:
    handler: consumer/line_bot_alert_handler.alert_handler
    events:
      - schedule: rate(1 minute)

AWS Lambda 有兩種設定排程的方法,rate以及cron,若是比較固定時建議用rate,比較複雜的排程就可以讓cron來,下面兩張圖分別是來自 AWS >


sls deploy部署之後就會看到剛剛做line_bot_alertfunction,他每分鐘都在跑,若玩完之後不想用了可以下sls remove把上面有的東西刪掉嚕!

結論

其實還有很多應用可以實作排程,像是有朋友就用 GCP 的來定時發文 🤣,而且可以把腳本寫得像是 api 一樣,讓整個靈活性都增加了不少,下一篇就帶大家來做 LINE Login 嚕!

參考

AWS document

繼續閱讀

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,到這打完收工,繼續期待下一篇~

繼續閱讀

Day15 - 串接 LINE Richmenu API

前言

之前我在使用時都是直接在 Postman 上直接打 API,本來是打算自己刻 接 Richmenu API 的,但剛剛看到Python SDK 很佛心的也提供 Richmenu 相關的 SDK,如此一來就不用自己包一包了。

注意 Richmenu 圖片的方向是 由上到下、由左到右 哦!算位置記得別算錯XD

實作

設定座標

首先先使用 create_rich_menu(self, rich_menu, timeout=None)告訴 LINE 說你的 Richmenu 的基本設定是什麼,格式區域什麼個別要做什麼對應的事情,

Creates a rich menu. You must upload a rich menu image and link the rich menu to a user for the rich menu to be displayed. You can create up to 10 rich menus for one bot.

https://developers.line.biz/en/reference/messaging-api/#create-rich-menu

if usage == 'create':
    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

set_rich_menu_image(self, rich_menu_id, content_type, content, timeout=None)

上面設定完圖片裡每個座標區間要幹嘛了,接著就可以自己弄圖片或是下載官網提供的圖片

MAC 用戶的小技巧

這邊教大家一個小技巧,可以點選想使用的照片,在預覽程式裡的選擇工具->調整大小 接著看到這畫面,把依比例縮放的勾勾取消,然後把長寬調到對應的大小後就完成圖片大小的設定嚕!

https://developers.line.biz/en/reference/messaging-api/#upload-rich-menu-image

elif usage == 'upload':
    file = request.files['the_file'].read()
    rich_menu_id = request.form['richmenu_id']
    content_type = "image/png"
    try:
        self.line_bot_api.set_rich_menu_image(
            rich_menu_id, content_type, file)
    except Exception as e:
        print("===Upload Exception===")
        raise BadRequest(e)
    return {'result': 'upload ok'}, 200

set_default_rich_menu(self, rich_menu_id, timeout=None)

設定完了之後要幹嘛?就是要把他設定default啦! 不囉唆, show you the code.

Sets the default rich menu. https://developers.line.biz/en/reference/messaging-api/#set-default-rich-menu

elif usage == 'set':
    rich_menu_id = request.form['richmenu_id']
    try:
        self.line_bot_api.set_default_rich_menu(rich_menu_id)
    except:
        raise BadRequest("Maybe your richmenu id error.")
    return {'result': 'set default ok!'}, 200

get_default_rich_menu(self, timeout=None)

糟糕,我好像瘋狂建立卻不知道有幾組?用這個就對了!

Gets the ID of the default rich menu set with the Messaging API. https://developers.line.biz/en/reference/messaging-api/#get-default-rich-menu-id

elif usage == 'get':
    rich_menu_list = self.line_bot_api.get_rich_menu_list()
    total = []
    for rich_menu in rich_menu_list:
        total.append(rich_menu.rich_menu_id)
    return {'result': total}, 200

delete_rich_menu(rich_menu_id)

不行,我弄的座標什麼全錯怎麼辦?有時候上傳的圖片可能不是自己想的那樣?,透過這個方法來刪掉它

Deletes a rich menu. https://developers.line.biz/en/reference/messaging-api/#delete-rich-menu

elif usage == 'delete':
    rich_menu_id = request.form['richmenu_id']
    try:
        self.line_bot_api.delete_rich_menu(rich_menu_id)
    except:
        raise BadRequest("Maybe your richmenu id error.")
    return {'result': f'{rich_menu_id} is delete!'}, 200

結論

我都把 raise 打成 rails (大誤),LINE 幫忙做的 SDK 真的是好用,透過這次練習我也多學了好多不一樣的用法,順便把自己的腦袋也整理一下 😃,程式碼同步在這邊哦 URL

繼續閱讀

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

繼續閱讀

Day9 - SQS 串接 Notify 實作!

首先先建立一個consumer/資料夾,新增__init__.py以及notify_handler.py

notify_handler.py輸入以下程式碼

import json
import requests


def line_notify_handler(event, context):
    print(event)
    body = json.loads(event['Records'][0]['body'])
    print(body)
    headers = {
        'Authorization': f"Bearer {body['token']}",
        'Content-Type': 'application/x-www-form-urlencoded'
    }
    r = requests.post('https://notify-api.line.me/api/notify',
                      headers=headers,
                      data={'message': body['message']})
    print(r)

# AWS record sample
# {'Records': [{'messageId': 'fddc42ba-a122-4581-965e-d0144ac8a5ad', 'receiptHandle': 'AQEBjO32gY5pXOfOrmDR0hD4k1av9KyjbHFpc+rIBPV2Brif7Lo+jqnGevSjfFwlICyGf+BhWwKaxFw8XdB3QTzRbw0vnLURjnQeDSBrJHa/S57SRs9TOLRBq38maycAVg69iZbetg9VhLMBCcLtOtPHTzKkmo+/Sosm51WA5CzXK7A0rteikx6nxS1CUIpq6MAujodupP0Hgr5RjK5nH/nmxA4Db0leWEmLokalZbtlx4W14tp7PZxPOrQOLDaGrH//p4h32tY8IN3MkCqi+gyNT7kCU4KwCGOIrybb07ZWyKBTKw+KOMNr/Ykj4z2N1qxIvTM55UY9d8V29YsH32OjrZTei5P7Nke/51E2tWkmkqoFAlqzxDjQPvpP+Pvvr8aazeeZ6opkr59UefAiiyM71Q==', 'body': 'hi', 'attributes': {'ApproximateReceiveCount': '9', 'SentTimestamp': '1566621263072', 'SenderId': '901588721449', 'ApproximateFirstReceiveTimestamp': '1566621263072'}, 'messageAttributes': {}, 'md5OfBody': '49f68a5c8493ec2c0bf489821c21fc3b', 'eventSource': 'aws:sqs', 'eventSourceARN': 'arn:aws:sqs:us-east-1:901588721449:LINE_notify_consumer', 'awsRegion': 'us-east-1'}]}

接著在requirements.txt加入boto3,他是一個使用 python 介接 AWS 的套件

boto3==1.9.189

加入SQS_URL以及SQS_ARN.env裡面

SQS_URL=sqs url
SQS_ARN=your sqs arn

add controller/notify_sqs_controller.py

from flask_restful import Resource, reqparse
import json
from lib.db import Database
import psycopg2.extras
import os
import boto3


def send_message(url, attr, body, delay=0):
    cli.send_message(
        QueueUrl=url,
        DelaySeconds=0,
        MessageAttributes=attr,
        MessageBody=body,
    )


class SendNotifyBySQSController(Resource):
    cli = boto3.client("sqs", region_name=os.environ("region"))

    def post(self):
        parser = reqparse.RequestParser()
        parser.add_argument(
            'message', required=True, help='message can not be blank!')
        args = parser.parse_args()
        msg = args['message']
        with Database() as db, db.connect() as conn:
            with conn.cursor(cursor_factory=psycopg2.extras.RealDictCursor) as cur:
                cur.execute(
                    f"SELECT token FROM notify")
                fetch = cur.fetchall()
        for f in fetch:
            body = {
                'token': f"Bearer {f['token']}",
                'message': f"Hello everyone, {msg}"
            }
            cli.send_message(
                QueueUrl=os.environ("SQS_URL"),
                DelaySeconds=0,
                MessageAttributes={},
                MessageBody=json.dumps(body),
            )
        return {'result': 'ok'}, 200

程式寫完了就是要加一條路由/notify/sqs

from controller.notify_sqs_controller import SendNotifyBySQSController
api.add_resource(SendNotifyBySQSController, '/notify/sqs')

接著透過wsgi在本地起一個 server

sls wsgi serve

再搭配 postman 來做測試,測試內容如下

{
  "message": "test Content"
}

接著透過sls deploy部署上會遇到一個問題,會有 Access Denied,所以要在serverless.yml加入 IAM role 的設定

add iam in provider

iamRoleStatements:
  - Effect: Allow
    Action:
      - sqs:SendMessage
    Resource:
      - ${env:SQS_ARN}

測試

結論

使用 SQS 這類服務都會需要透過boto3來幫忙串接,最需要注意的就是 IAM role,因為在本地端的 key 通常權限都是最大的,但上到 AWS 上就會有權限的問題,所以要記得加入 IAM 哦!

Code is here

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

繼續閱讀

Day6 - 建立一個使用 Query string 來幫忙發送的 LINE Notify

繼上一篇我們已經可以讓使用者註冊 Notify 並將 token 放入資料庫,接著就帶各位使用 query string 的方式讓你的 Notify 可以送訊息給所有註冊過的 Notify。

首先我們進入我們已經建立過的 controller/notify_controller.py,會看到 class 下有我們之前建立的 post method,這時我們就在前面加入 get method,並加入以下的 code,讓這個 class 看起來比較有順序(潔癖)

from flask import request

class NotifyController(Resource):

    def get(self):
            msg = request.args.get('msg')
            with Database() as db, db.connect() as conn:
                with conn.cursor(cursor_factory=psycopg2.extras.RealDictCursor) as cur:
                    cur.execute(
                        f"SELECT token FROM notify")
                    fetch = cur.fetchall()
            for f in fetch:
                headers = {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'Authorization': f"Bearer {f['token']}"
                }
                payload = {'message': msg}

                r = requests.post(
                    'https://notify-api.line.me/api/notify', data=payload, headers=headers)
            return {'result': 'ok'}, 200

    def post(self):
        ...

這次使用的套件比上次多 import 一個 flask 底下的 request (注意沒有 s 哦),這個主要是讓我們可以抓到網址問號後面接的參數,這邊我設定打 API 的人會打一個 msg 的參數。

接著就是使用進 DB 撈我們的 token 們,並用一個迴圈來跑

再來是設定 headers 以及 payload

headers 的部分參考 Notify 的文件,如下圖 我們需要設定 Content-Type 以及 Authorization,需要注意的是 Authorization 是使用 Bearer 格式(參考),他中間是有加空白鍵的,這邊很多朋友都會錯在這裡,千萬要記得檢查這邊!

接著是要送出去的東西是要用什麼送出,本篇只用 message 做範例,若需要使用到其他的功能,像是圖片、貼圖等等的可參考以下的圖片

接著我們就可以使用sls deploy來部署我們的程式啦

等等! 這邊有個需要注意的地方是,照著這次的範例使用的話會需要用 docker 來幫忙跑編譯,因為 psycopg2-binary 這個套件如果不是在 Linux 的環境下會需要透過 docker 幫忙編譯完再丟過去 這部分需要在serverless.yml下填入參數

custom:
  pythonRequirements:
    dockerizePip: true

如此一來當前環境若不是 Linux 的話他就會使用 docker 來幫忙,記得 docker 要開哦 🙏

當然最簡單的方法就是把它直接抓下來放在專案中,只是這樣就會比較髒一點,可以從這邊抓 -> 參考

這邊可以先在環境變數上加上SLS_DEBUG=* 接著在加上 sls deploy 後面加上--verbose可以看到 serverless 到底都在背地裡做了什麼事情 🤣

接著我們就使用 Postman 來幫我們送字串出去,參考下圖,當回傳 ok 就成功了 🎉 你的 Notify 應該要回你了~

結論

這邊帶大家做一個簡單的應用,一般來說我覺得放在 query string 讓其他 API 來呼叫的時候帶參數來就可以直接用是很方便的,不用再特地自己寫方法去呼叫 LINE Notify 來幫我們送,反正 AWS Lambda 有一百萬次的請求不怕 🤣

繼續閱讀

Day3 - LINE Notify 介紹

LINE Notify 顧名思義就是通知屬性的服務,這個服務不是 LINE 的 Message API,千外別把這兩個搞在一起哦!

在實作前要先認識一下在接的 api 服務原理 首先先參考LINE Notify 官網 開頭的介紹:

Overview: Becomes a provider based on OAuth2 (https://tools.ietf.org/html/rfc6749). The authentication method is authorization_code. The access token acquired here can only be used for notification services

不負責任翻譯: 這個服務是基於 OAuth2 實作的,授權模式(grant_type)是 authorization_code 參考 access_token 則是只能讓通知服務所使用的一個鑰匙

更詳細的流程可以參考 https://blog.yorkxin.org/2013/09/30/oauth2-4-1-auth-code-grant-flow.html

The host name for authentication API endpoint is notify-bot.line.me.

然後 API 的網址是 notify-bot.line.me

接著我們來看看流程圖 https://notify-bot.line.me/doc/en/

  • 當使用者拜訪你的網站時,會導向 LINE 請求認證
  • 認證過了之後會回傳一個名為 code 的參數
  • 接著網站需要持這個 code 在去找 LINE 討東西
  • 討成功後就會拿到一個 access_token
  • 網站就會知道這個 access_token = 來註冊的使用者
  • 然後就可以透過 access_token 發送通知給使用者了?

事前準備

首先就是要先加入他好友,如果之前有不小心封鎖的話要記得解除封鎖哦,不然後續會收不到消息。 https://ithelp.ithome.com.tw/upload/images/20190903/20111481Zno98NSHwL.png

下一篇會帶著時做出簡單的 index.html + 使用 Serverless 蓋我們第一個 API 來做認證。 會使用到 LINE Notify 的 API 為以下三個,不清楚裡面實際上功能的朋友可以嗑一下官網文件

GET https: //notify-bot.line.me/oauth/authorize -> 前往認證拿到 code 參數
POST https://notify-bot.line.me/oauth/token -> 拿 code 參數換 access_token
POST https://notify-api.line.me/api/notify -> 發送訊息

其他

今年中有帶著朝陽的學弟妹手把手實作 LINE Notify,如果只想自己用的話可以參考我之前簡報

LINE Notify 如何快速建置一個 LINE Notify 的服務

繼續閱讀