2018年6月13日 星期三

開發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. 此外,你可以透過底下幾種方式喚起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專頁。若這篇文章對您有所幫助,請幫我們分享出去,謝謝您的支持。

2018年6月11日 星期一

在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囉…

2018年6月10日 星期日

使用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我們還有什麼好抱怨的呢…要感恩啦。

2018年6月6日 星期三

開發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專頁。若這篇文章對您有所幫助,請幫我們分享出去,謝謝您的支持。

2018年5月18日 星期五

你只要堅持一天就好…

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

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

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

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

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

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

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

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

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

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

2018年3月25日 星期日

神聖不可侵犯的規格書

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

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

不對啊,這規格書本身很矛盾!? 如果依照前面說的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專頁按讚並追蹤,也歡迎您幫我們分享出去,謝謝您的支持。