開發Linebot(23) - LINE LIFF App初嘗試

先前我們介紹過了LINE LIFF App，你大概已經知道了它是一個便於開發類似  FB WebView或是微信小程序的機制。

LINE推出了這個機制是一個很重要的更新，這一篇我們要來看看如何撰寫一個LIFF App。

在這之前你必須知道:

1. LIFF App可以使用HTML和javascript撰寫
2. 最好是寫成RWD網頁，這樣崁入在LINE裡面看起來比較順眼
3. 你可以透過js API做底下這些事情，諸如:
1. 取得用戶User id
2. 取得用戶身分資訊
3. 以用戶的身分發送訊息給Line bot
4. …
4. 此外，你可以透過底下幾種方式喚起LIFF App
1. 送出一個網址(類似 line://app/1111111111-OxoxoxoxOx ) 讓用戶點
2. 在Rich Menu當中做一個Url Button讓用戶點

我們在上一篇介紹過如何建立與在LINE bot中整合LINE LIFF，這篇來介紹撰寫LIFF的時候可以有哪些基本功能。

從下圖中你可以看到，我們在Rich Menu中建立了兩種按鈕，一個直接開啟url的button，一個是顯示文字(該url)的Button，這兩種方式都可以讓用戶觸發開啟LIFF。

用戶可以從Ruch Menu喚出LIFF App:

此外，不管是LINE bot說出這個網址，或是用戶自己說出這個網址，只要有LIFF的url，用戶就可以點，點了就可以開啟LIFF。我們再看底下這個有趣的例子：

請特別注意一個有趣的地方，LIFF的url長像是 line://app/1111111111-OxoxoxoxOx  這樣，但你居然可以在該url後面加上 QueryString，像是:
line://app/1111111111-OxoxoxoxOx?a=123
它會自動pass給你的網站，例如你看到上面的 a=123在我們進入WebApp中，可以透過抓取QueryString的方式抓到參數，並顯示到TextBox中(執行結果在上圖):

這個機制有助於我們只需要撰寫單一一個LIFF，就可以依照不同的用戶或需求(以QueryString區分)，執行不同的功能。

此外，在LIFF中抓取User Id也是基本功能。
底下的程式碼在document ready之後，透過liff.init(…)初始化LIFF，在傳回來的data.context中，就包含了UserId：

除此之外，我們也可以透過js很輕鬆的取得User Profile：

抓取profile.displayName之後顯示在textbox中，如下圖：

有趣的是居然可以用alert(…)是出乎我意料之外的。

你也可以在LIFF中，透過SendMessages以用戶身分傳送訊息給Line Bot:

執行結果如下：

你會發現透過js可以幫用戶傳送訊息(其實不只文字，貼圖、圖片、或其他訊息當然也行)，到對談視窗中。

這些功能雖然基本，但已經可以完成不少行動裝置上的應用了。

整個頁面都是透過pure html和js撰寫，完整的程式碼可以參考：
https://github.com/isdaviddong/testLIFF/blob/master/WebApplication3/default.html

注意，其中用到了LIFF的sdk.js：

把該頁面佈署到支援https的站台，然後透過先前介紹過的方式，把網址註冊到你的Line bot中，就成為一個LIFF App了。

如果你懶的寫html和js想測試一下，你可以試試看直接註冊底下這個我寫好的測試LIFF App，網址如下(但隨時可能會刪除唷，僅供測試)：
https://testliff.azurewebsites.net/default.html 
只需要透過先前介紹過的方式註冊到你的Line bot上即可。

have fun~

-----------
線上課程：https://www.udemy.com/line-bot/
電子書：http://studyhost.blogspot.tw/2017/12/line-bot.html
LineBotSDK：https://www.nuget.org/packages/LineBotSDK
如果需要即時取得更多相關訊息，可按這裡加入FB專頁。若這篇文章對您有所幫助，請幫我們分享出去，謝謝您的支持。

在Node.js中使用LUIS

我們沒事好好的幹嘛去弄Node.js呢? 還會為了誰? 當然就是LUIS。

還記得它吧，我們在很多地方介紹過LUIS，因為它是我們玩chatbot時候做自然語言語意分析(NLP)的要角，如果你忘記了，可以參考…

使用LUIS，讓你的bot理解用戶輸入文字的意義
建立LUIS服務處裡自然語言辨識
使用C#開發Linebot(20) - 不寫一行code完成Linebot的LUIS串接

OK，chat bot寫著寫著，開始有各種不同語言的需求，所以Node.js中使用LUIS也是剛好而已。(後面還有Python在等著)

前面我們介紹過如何使用VS Code開發Node.js，其實重點是為了這一篇如何在node.js中呼叫LUIS服務，其實也很簡單，我們可以參考這篇裡面的程式碼:

我稍微改了一下，主要是LUIS的app id與Key要換成你自己的(原本程式碼裡面採用.env環境變數，為了說明方便，這邊就先寫死了):

上圖中的App id和Key我換成了一個我訓練好的點餐服務LUIS App，所以我把 q 打成『我要大亨堡』，別忘了，這段程式碼要能運行，你還得用npm裝幾個套件：

完成後，試著按下F5在VS Code中執行app.js，結果如下：

成功的呼叫LUIS服務取得最可能的Intent囉…

使用VS Code開發Node.js

最近由於在AI課程中有愈來愈需要支援(不是系統，是我)其他語言的趨勢，因此VS Code在毫無疑義的狀況下，成為.net環境以外的開發工具。

所以，相關的筆記，也稍微整理一下，以備不時之需。這一篇，就是。

其實要用VS Code開發Node.js超簡單，從一台空的PC開始。

1. 從https://code.visualstudio.com/下載安裝好VS Code
2. 習慣性的順便安裝 Git 反正早晚會用到 https://git-scm.com/downloads
3. 然後從這邊 https://nodejs.org/en/download/ 安裝 Node.js ，我選 .msi 64-bit，他會順便裝npm(it’s package manager for JavaScript)，以後會常用。

裝完之後可以參考 https://code.visualstudio.com/docs/nodejs/nodejs-tutorial 開始你的第一支Node.js，用慣VS的人可能會覺得底下這樣很妙，你要建立一個node.js專案，可以在cmd line先建立一個空的folder:

然後下『code  .   』這個指令。

啥意思，就是在目前的目錄下開啟VS Code，出現後，在資料夾底下建立一個 app.js：

然後輸入畫面上這樣的code。

var msg = 'Hello World';
console.log(msg);

如果沒問題，按下F5試試看：

出現執行結果了，其實還挺方便的。有沒有原始一點的執行方式? 當然有：

回到cmd line底下，執行node app.js，也可以得到一樣的結果。

使用express

寫node.js當然要做Web App，所以，立馬安裝一下 express

安裝完成之後，執行 express expAp:
(其中的expAp是你想建立的資料夾名稱)

接著使用npm install安裝相關套件後，以npm start開啟Node.js web server:

成功執行的話，你就可以在 localhost:3000 找到你的node.js頁面囉。

VS Code的字體大小

身為.net developer，這年頭是什麼code都得要會寫的年代。

而雖然我的NB還沒從Windows淪陷為Mac OS，但寫Node.js和Python免不了要用VS Code，這是一種愛的表現。

但歲月不饒人，盡管微臣非常熱於配合，但VS Code預設字體的大小在我還沒錢買大尺寸螢幕的狀況下，實在讓老臣難以適應。當下的第一個反應是什麼?

當然是 Ctrl+滑鼠滾輪往上推…哇靠，沒用。看…這設計…恩，千錯萬錯一定是我的錯。

只好從選單 file –> Preferences –> Settings:

在出來的視窗中，你可以看到 editor.fontsize:

沒錯，改它就行了。改不動? 喔，不好意思，我沒仔細看說明，要copy到右邊是吧，沒問題，copy->paste->modify->Save…搞定。

好簡單啊…連ctrl+(mouse scroll up)都用不到了呢…

咦?這是一篇抱怨文嗎?
沒有，誰說的? 免費的tool我們還有什麼好抱怨的呢…要感恩啦。

啊….對了，如果你還是堅持要使用 Ctrl+滑鼠滾輪，請找關鍵字…

"editor.mouseWheelZoom"

開發Linebot(22) - 使用LIFF在Linebot上建立WebView/小程序

LINE 似乎覺得6/6是一個挺順的日子，終於選了這一天提供了類似FB Messenger上的WebView功能，LINE稱之為LIFF(LINE Front-end Framework)。

和Messenger一模一樣，LIFF有三種高度，分別是：

開發人員可以透過很簡單的http post呼叫，把特定的網頁(當然最好是RWD或手機版網頁)崁入/連結到某一個Line bot或是Line Login中。

如此一來，我們就可以在Line bot中，直接整合/開啟一個如同上面這樣的畫面來使用你自己開發的Web功能，當然，在網頁中你還可以透過js跟LINE或用戶有一些互動，諸如取得用戶身分之類的…

要如讓你的Line bot具有這樣的功能，很簡單，只需要呼叫下這樣的http post:

curl -X POST https://api.line.me/liff/v1/apps 
-H "Authorization: Bearer {你Linebot的Channel Access Token}"
-H "Content-Type: application/json"  
-d '{ "view":{ "type":"full或tall或campact", "url":"https://你的RWD網頁網址" } }'

其中header Authorization的bearer token的地方放你的line bot的channel access token，然後組一個JSON Body，在type的地方放你想要出現的WebView的大小，url的地方放一個https的網頁，最後對https://api.line.me/liff/v1/apps  送出POST，就可以針對指定的Line bot註冊該網頁，以便於以後把該網頁以WebView的方式崁入到你的line bot中。

當你對https://api.line.me/liff/v1/apps送出JSON之後，會得到類似底下這樣的JSON Response：

{
     "liffId": "1111111111-OxoxoxoxOx"
}

例如底下我用這樣的post把購物網站崁入我先前做的Line bot：
(注意，這只是個測試，實務上我們不建議你把別人的網站崁入你自己的Line bot，因為網址列後面可能會加上用戶參數或資訊，如果網站不是你自己開發的，可能會有個資外洩風險，而且亂嵌別人家的網頁也是沒有格調的事，對不起我錯了…)

然後把你取得的LIFF ID，組合成底下這樣的網址:
line://app/1111111111-OxoxoxoxOx

未來你就可以透過上面這樣的網址在Line bot中開啟WebView了：

上面這個就是我們剛才設定的大小為 tall 的WebView，它是怎麼被叫出來的呢? 其實只要當用戶在該Line bot中，點選剛才組出的 line://app/1111111111-OxoxoxoxOx 這樣的網址，就會自動叫出WebView，不過最簡單恰當的方式我自己覺得是Rich Menu，我們只需要把剛才組出的網址，填入Rich Menu作為url button即可：

這樣就可以在用戶點選該Button後，開啟WebView了：

其實還蠻簡單的，如此一來，你就可以不離開LINE App，在Line bot當中擴充/加入你所需要的功能了，當然，你在WebView開啟的RWD網頁中，可以透過js API取得用戶相關的資訊，或與用戶做一些互動，這些進階的功能，我們稍晚一些找時間再跟大家介紹囉。

-----------
線上課程：https://www.udemy.com/line-bot/
電子書：http://studyhost.blogspot.tw/2017/12/line-bot.html
LineBotSDK：https://www.nuget.org/packages/LineBotSDK
如果需要即時取得更多相關訊息，可按這裡加入FB專頁。若這篇文章對您有所幫助，請幫我們分享出去，謝謝您的支持。

你只要堅持一天就好…

昨天去大學分享，跟同學們聊了很多，雖然大家都很開心，但時間一如往常的不夠用，有一張投影片，我沒時間講太多…

這是，我從Scrum學到的東西，Scrum告訴我們，把目標切成迭代(iteration)，搞清楚這個迭代你要實現什麼(Backlogs)，然後，暫且把雜事拋諸腦後，就衝刺好這個迭代就好。

昨天我說了很多，但，其實我想講的只有一句話：『你只要先堅持一天就好…』

如果我要你每天都很賣力的衝刺，那確實很難，但如果我只要你堅持一天，就只有一天，我覺得你一定能做到。

要你馬上改變，奮發圖強一學期，肯定不容易，但，請先從一天開始。

選一天，好好的衝刺，享受一下努力後的果實，然後對得起自己的安心入睡。只要一天就好，如果你能過好一天，你就有機會過好一個禮拜。你能過好一個禮拜，你就有能力過好一個月。

有一天，當你習慣性地能夠好好過每一年，你將會有一輩子豐富的人生。

一切，其實都只是從過好『一天』開始。

先為自己訂個『一天』的目標，毋須遠大，不要張狂，然後在一周裡面選一天，用盡全力實現這個目標，享受屬於你的成果與獎勵，如果你愛上那一天當中成功的感覺，你自然會為自己訂下『下一個一天』。

成功不一定有什麼大方針大架構，就只是去過好每個一天而已。

神聖不可侵犯的規格書

身為開發人員，我猜你也和我一樣曾有這種經驗…

你拿到一份規格書，依照內容進行開發，程式寫著寫著，過了一陣子之後，發現…

不對啊，這規格書本身很矛盾!? 如果依照前面說的XXX這樣做，那後面的OOO可能會做不下去，如果依照OOO的做法，那用戶顯然以後會很難用唷，反覆來回看了幾次，細細思考之後，你肯定了這份規格書確實有問題。

OK，這時候的你，會怎麼做? 一般我們會有底下三個選項:

A: 管它的，依照規格書先做完再說。
B: 找客戶或PM/SA溝通。
C: 用自己的方式直接做出更好的版本。

如果規格書真的是錯的(當然開發人員也可能自己理解錯)，那走A顯然是會造成浪費，你非常有可能做出一個看起來十分符合規格但實際上沒法用的軟體，這狀況我們都碰過，而且很常見，所以這邊暫且先不討論。

選C，則在大部份公司是不受歡迎的(你誰啊?竟敢動SA/客戶的規格? 你第一天來的唷?是剛來看不懂規格書嗎? 驗收是照規格書還是照你自己發明的寫法啊? )

一般來說，你身為Developer擅自改規格是要讓SA/SD/PM怎麼拉下臉去承認自己的規格書有寫錯呢? 況且，規格書若經過了客戶的認可，那你這麼做就是一竿子打翻一條船上的所有人，要一票人去承認自己的思慮不周，而這不周還只有你一個人看的出來!?

如果你選的是B，其實是一件挺累人的事情，你可能會碰到很多挫折，過程中，發現沒甚麼人願意理你，並非所有人都跟你一樣在乎規格的正確性。你慢慢發現，似乎大家都各自幻想著一個完美的最終產出的成品，卻期待著這成品能透過一個千瘡百孔的設計圖來實現。

就算真的能夠開始溝通，你可能也會慢慢認知到，原來溝通一條規格的成本和時間比你想像的高很多很多(但又收不到錢)，隨著時程越來越緊，你逐漸開始妥協，在規格書中『刻意保留模糊』，以作為日後驗收時各自表述、各自解讀的籌碼。(搞半天，原來先前規格書中的矛盾就是這麼來的…)

當然，如果規格書不出問題，那上面這些故事場景當然也都不成立，不過…我想你也做過專案，你來告訴我，碰到完美的規格書的機率有多少?

0%

不誇張，就是0%，我從來沒碰過沒寫錯的規格書。

既然規格書那麼不堪用，不如乾脆丟了吧。

所以，曾經有敏捷開發的支持者告訴你，如果想要建構出一個真的可用的軟體產品，與其讓開發人員只看規格書，不如多一些和客戶、需求單位之間的直接頻繁的溝通。

這就是你會在敏捷開發價值觀中看到底下這四條的原因:

個人與互動 重於 流程與工具
可用的軟體 重於 詳盡的文件
與客戶合作 重於 合約協商 
 回應變化 重於 遵循計劃  

但，溝通容易嗎? 難啊。

大部分的開發人員以宅宅的身分進入0與1的數位世界，就是為了避開煩悶瑣碎的人際談判和所謂的溝通協調，把全然沒有經過溝通訓練的Developer直接拉回客戶的會議室真的是一件好事嗎? 我也不這麼認為。

所以，不可信任的規格書在這個需求變化萬千和迅速迭代的時代，有沒有被淘汰? 很抱歉，沒有，它萬壽無疆的很。

常常有對敏捷很好奇的企業或團體，請我們去介紹敏捷開發時，我偶而玩心一起，會問問學員，你覺得規格書值得信任嗎? 底下坐著SA/PM/Developer和老闆，這問題很難回答。

如果它無法被信任，你為何總是照著規格書寫程式呢? 如果它這麼值得信任，那為何照著規格書做的軟體還是常常無法順利結案呢?

Trade Off ，是你在導入敏捷時可能需要常常放在心裡的字眼，事事無絕對，Guidelines不是聖旨。

彼得杜拉克講過一句很殺的話：『管理是一種實踐，其本質不在於“知”而在於“行”；其驗證不在於邏輯，而在於成果…』

敏捷也是。

-----------------------------
本系列文章索引位於 http://studyhost.blogspot.tw/2017/02/the-devops-journey-index.html
相關教育訓練: http://www.studyhost.tw/NewCourses/ALM
若這篇文章對您有所幫助，請點選這裡加入FaceBook專頁按讚並追蹤，也歡迎您幫我們分享出去，謝謝您的支持。