發表文章

目前顯示的是 1月, 2017的文章

丙申年臘月廿九 - 煮咖啡論技術

圖片
先說個幾天前發生的小故事, 最底下 是整理好的年度文章摘要。 可能很多年輕人已經開始不知道,每年的農曆十二月,被稱作臘月。而每逢臘月,則不免讓我聯想到 俠客行 裡面的『賞善罰惡臘八粥』(如果對這主題有興趣,為了不破壞你的閱讀樂趣,請自行參閱 金庸 的 俠客行 ),我猜這個世代大多數的人,應該完全沒有喝過什麼臘八粥,估計對 李白 的 俠客行 ,可能也陌生的很。 回首2016丙申年,發生了不少事。 因此,在年底不免想找找久未聯繫的三五好友,大家聚聚。 由於大夥都是資訊領域的技術同好,彼此也都在業界耕耘多年(都老了?),但聊起過去種種,卻彷彿就像昨天才發生的事情。然而事實上,這幾年業界幾乎所有的技術都換了一輪,火紅的話題也都翻過了好幾遍。相較之下,我們幾個老朋友們聊到的技術也好、故事也罷,即便還稱不上是歷史,肯定也都已經是往事了。 席間,朋友說到:『技術更迭好像已經是這世代資訊人員的宿命,金庸的俠客行,是1965年出版的,至今已經流傳超過50年,而李白的俠客行,則是1200年前的作品,1200年耶! 這是什麼時間概念? 古人說的『立功、立言、立德』,稱為三不朽,這年代哪還有什麼可以不朽,昨天剛炒熱的技術今天就過時了,更別說寫過的書,才沒幾年就得淘汰,而且越來越快…』另一位朋友笑著說:『你們出的書還可以活個幾年,要絕版了圖書館不小心還能找到,好歹一時也能出個名,像我手上開發出的系統,設計過的架構,估計只要我離職,立馬就會被改的面目全非,要不然就是被直接換掉,根本是屍骨無存』。 這讓我想到 俠客行 中的一段:『 縱死俠骨香,不慚世上英。誰能書閣下,白首太玄經。 』 時代真的很不同了, 如今技術變化太快,潮起潮落可能轉眼間。技術人員手上做的這一切,早晚終究都會過去,也不一定會有人紀念… 不過,不管如何,明天太陽依舊會升起,過去的又何必留戀? 每天都是新的,能夠專注在『現在』,才是幸福的事。 我跟朋友們說,我最近第二次看Spencer『禮物』一書的心得:『還記得你人生當中最快樂的一段時間嗎? 那段時間,往往不是我們過的最舒適的時候,也並非是擁有最多掌聲、財富...的時候。 大多數人記憶中最快樂的時光,常常是我們專注在某件事物上、專注在當下的那一段時刻。像是...小時候在公園裡和同伴玩耍不肯回家,深夜時獨自一人寫程式始終不想熄燈,站在講台上底下的人狂舉牌子告訴你超時

使用C#開發LineBot(8) - 發送Template Message

圖片
LineBot傳送訊息的形式,除了單純的文字、貼圖、圖片之外,還有一個比較特別的形式,稱之為 Template Message ,這種形式的訊息本質上是一個選單,長得像是底下這樣: 上面這個是三種Template Message中的一種形式,稱為Buttons Template Message,另外兩種形式是Confirm Template Message(下圖左)與Carousel Template Message(下圖右): Confirm Template Message好理解,基本上它就是一個確認(confirm)對話框,可以讓用戶選擇Yes/No之類的回答。而Carousel Template Message其實就是多個Buttons Template Message,橫著擺可以左右scroll。 我們先從Buttons Template Message開始看起。 關於Buttons Template Message 我們剛才說過,Buttons Template Message這種形式的訊息本質上是一個選單,包含著一張圖片(下圖1)、一個標題(下圖2)、以及一些文字(下圖3),並且可以設置1-4個選項(下圖4-6,範例中我們只設置了3個): 當你的Bot送出這個訊息給用戶,用戶可以點選底下的選項(上圖4-6的文字),這些選項被稱為Action,這Action也有三種不同的類型,分別是: MessageAction : 幫用戶說一段指定的文字訊息 UriAction : 直接在Line裡面開啟指定的網頁 PostbackAction : 觸發一個可以你的WebHook收到參數的postback 其中UriAction最容易理解,用戶點選該Action,Line就會直接開啟某個網頁。 而MessageAction可以用來幹嘛? 它可以讓你幫用戶說特定的話,實務上應用時,你可以透過這個機制先設計好一些固定的指令,讓WebHook看到這個指令就能進行相對應的工作(其功能等同於用戶在對話框中說了這個指令)。 而postback則是不出現任何訊息,直接把特定參數傳給WebHook,WebHook就可以進行特定工作。 讓LineBot發送Buttons Template Message 我們看底下這段程式碼,它的功能就是讓LineBot

Microsoft Graph API (2) - 使用OAuth進行身分驗證,並取得用戶資訊

圖片
我們 前面 曾經和大家聊過,如果要幾句話說清楚Microsoft Graph API是啥,其實並不很容易,但透過 先前的介紹 你大概可以知道,Microsoft Graph API身為MS Office 365所有資源存取的API連線入口,負擔著讓開發人員得以輕鬆存取雲端資料(資源)的重要角色,只要你想存取Office 365、OneDrive、OneNote…等各種資源,基本上你就必須與Graph API打交道: 不管用戶採用的是個人帳號(Microsoft Account)或企業帳號(Orgnization Account),MS Graph API讓開發人員可以用單一Endpoint允許各種不同帳號的身分驗證,當然也會依照權限吐出不同的資源。 這一篇我們接著來看,如何透過OAuth連結MS Graph API,並且取得token抓取用戶資料。 (如果讀者對OAuth還不甚了解,請先參考 這裡 ) 建立Microsoft應用程式 首先,若您是開發人員,要使用MS Graph API(或者是要與O365/Onedrive等系統做SSO),你必須先在微軟的站台上建立一個Application,建立的位置在: https://apps.dev.microsoft.com/ ,進入之後會看到底下畫面: 請用您的Microsoft Account登入,您就可以建立一個自己的應用程式: 點選後會出現底下畫面,依照步驟,輸入名稱,按下建立鈕: 建立完應用程式之後,請接著點選『產生新密碼』: 記得保留上面彈出視窗中顯示的密碼,待會我們會使用到(它只會顯示一次,請務必自行保留)。 接著,請在平台這邊選擇新增平台,然後選Web,這是因為我們範例中是透過Web App整合方式來進行Demo,如果你的情境是要在行動裝置上存取Office365(or Onedrive/onenote…etc.)中的資源,當然就選擇行動應用程式: 接著該頁面會要求你輸入重新導向URI,這部分如果不理解其意義以及為何需要,請參考我們以前分享過的 OAuth介紹文 ,底下的URL就是你取得Auth Code的導回網址,由於我們只是要在Local用IIS Express測試,因此我們網址輸入Localhost: 至於port 13555怎麼來的,它是我們在VS2015中建立了一個Web

asp.net Web開發框架 (7) - 使用Vue.js進行表單雙向繫結

圖片
先前我們分別討論過了使用Vue.js進行 表格資料渲染 以及渲染時 動態產生的功能性按鈕 之後,接著,我們來看Vue.js在表單上的資料繫結。 範例依舊是我們先前使用的那個: source code : https://github.com/isdaviddong/AspNetWithVueBinding 測試網址: http://ex20170110-aspnetwithvuebinding.azurewebsites.net/   (如果該網站被我不小心殺掉,請 FB訊息 提醒我,網站裡面的資料由於是共用的,可能會被玩壞或出現詭異的內容,一概與本人無關XD ) 看過了先前的介紹之後,你大概已經知道,動態產生的『編輯』鈕: 該按鈕會在用戶點選時,將畫面導入到AddNewOrUpdate.html這個頁面,進行編輯的動作,而首頁上的新增鈕,其實也是將網頁導入到AddNewOrUpdate.html這個頁面。唯一的差異在,如果是按下編輯鈕,該筆紀錄的guid會被帶入: 這個動作怎麼實現的,答案在我們先前進行動態Button渲染時候的Vue instance中的edit method: 這使得如果用戶按下的是新增鈕,AddNewOrUpdate.html這個頁面將不會收到QueryString,若用戶按下的是編輯鈕,則是用戶欲編輯的record的guid。 因此,我們就不難理解AddNewOrUpdate.html這個頁面一開始進入後的javaScript code,就是判斷是否有Guid: 我們把guid保留在12行的變數中,30行之後的document ready,則是判斷是否有guid,如果有,則在36行呼叫LoadData,把該筆資料載入。而不管有沒有資料,31行的SetBinding都會把UI上的HTML表單與記憶中的vd_StudentRec做繫結: 所以你不難猜到,LoadData這個function,在從遠端載入完資料之後,會放到哪一個地方? (別往下看,先想一下…) 答案當然是: 記憶體中的vd_StudentRec,沒錯。其實,上面這段程式碼是為了說明,否則在實務上你把回傳的資料result.Data,直接放入Vue.js的instance就好(vm_student.rec=result.Data),因為vm_student.rec根本就是

asp.net Web開發框架 (6) - 在Vue.js動態表格渲染中加上功能按鈕

圖片
接續著 上一篇 ,我們這次拿這個WebAPI + Vue.js 的 CRUD範例 繼續討論。讀者可以點選 這邊 ,看看這個範例的實際執行狀況。(如果該網站被我不小心殺掉,請 FB訊息 提醒我,網站裡面的資料由於是共用的,可能會被玩壞或出現詭異的內容,一概與本人無關XD ) 這個網站的主畫面如下: 上一篇 我們大致上說過,這些資料是透過伺服器端以JSON格式傳到前端,並且透過Vue.js的template rendering機制動態顯示出來的。 但我們沒有談到,上圖中每一個row最左邊的編輯/刪除鈕,是怎麼實現的,我們這一篇就來介紹這個部分。 在HTML Tempalte中加上功能按鈕 先前我們看過的HTML樣板,要加上Button很容易,但Button要有對應的功能,則需要透過v-on:click 指令: 你會發現,上面的第4,5兩行,多了兩個Button,就是編輯和刪除鈕,分別是呼叫到edit和remove這兩個javascript function,並且傳入item作為參數,還記得嗎?這個item就是第2行v-for裡面的item in items的那個item,也就是伺服器端傳來的資料集合中的一筆資料。 因此,當用戶點選這兩個Button,實際上會執行到的,就是Vue.js的vm裡面所定義的methods(位於12-22行) : 這個在Vue.js稱之為 方法事件處理器 。留意上述程式碼的第12-22行,其中的edit、remove,就是按下Vue.js動態渲染出的Button時,會觸發的JavaScript Functions(Methods),由於帶入的參數是item,也就是按下哪一筆資料的Button,就把該筆資料作為參數帶入。因此function裡面的程式碼就不難理解了。 remove method的14-16行會出現confirm(…)視窗,如果用戶確認刪除,則調用Remove(item)這個我們自己寫的JavaScript Function。而19行則是edit method,功能是redirect網頁到AddNewOrUpdate.html,並帶入資料record的Guid作為QueryString參數(由於AddNewOrUpdate.html這個網頁因為同時包含新增與修改兩種功能,比較複雜我們改天討論)。 我們先看14-

asp.net Web開發框架 (5) - 使用Vue.js進行前端資料繫結顯示(WebAPI版本)

圖片
前面 寫過了在asp.net WebForms環境下使用Vue.js做DataBinding/UI Template Rendering,這一篇我們把焦點轉回WebAPI的版本。 如果使用前面介紹過的 寫法 ,以WebAPI搭配Vue.js進行SPA Web應用程式開發,那前端的頁面可以是很單純的pure HTML,例如: 和 先前 介紹過的一樣,UI上進行Binding的部分只有60-90這一個區段,透過Vue.js的繫結語法{{item.xxxx}}把每一個屬性的值填入UI,而促使這個Binding生效的js程式碼位於14-21行,也就是SetBinding()這個javascript function。這個SetBinding()建立了vm_StudentInfo這個Vue instance,把HTML UI上的tableBody與vd_StudentInfo這個記憶體物件做了繫結。 因此,每當vm_StudentInfo的items屬性被更新時,Vue就會拿vd_StudentInfo中的數據來更新tableBody區塊中的UI。 而底下這段程式碼(24-31行)則是binding_StudentInfo的items屬性被更新的時機: 也就是畫面上的『Get Data』Button被按下去的時候。會透過ExecuteAPI呼叫伺服器端的WebAPI,因此底下的程式碼被執行(還記得這一大段WebAPI程式碼在幹嘛? 我們曾經在 先前 詳細的介紹過): 是面這段WebAPI身為服務層,任務就是動態載入並執行相對應的BO,因此進而運行到BO.Health.GetData這個GetData Method: 執行後的結果List<StudentInfo>會透過JSON回傳到前端,被透過Vue 的DataBinding(Template Rendering)機制顯示於螢幕上: 同樣的,按下上圖中的『清空』鈕之後畫面會被清空的原因也很好理解,我們只是把繫結物件的items屬性清空: 因為vm_StudentInfo.items 被設為 undefined(或其他空值),則頁面上顯示的資料就被清空了,就是這麼簡單。 其他的部分我們在 上一篇 介紹過囉…(先前針對程式碼相關更完整的解釋請參考 這裡 ) source code : https:

asp.net Web開發框架 (4) - 使用Vue.js進行前端資料繫結顯示(Template Rendering)

圖片
弱水三千,為何只取Vue.js? 一直以來,我覺得大部分的開發技術其實也是一種工具,也有生命週期。既然是一種工具,那開發技術當然不能只是拿來 學習 ,而應該是拿來 使用 的。最近幾年,隨著開發技術的生命週期越來越短,不免讓人開始猶豫該如何選擇。如果你慢慢發現,學習某一門技術的時間並沒有遠低於使用它的時間,那就得回頭重新評估這個工具了… 但,千萬別誤會,我不是叫大家不要花時間去進修,或是減少學習的時間。這年頭,我們比過去以前任何一個時代都需要 時時刻刻 學習。但,正因為我們的時間越來越珍貴,越來越難以過去的大量快速學習來面對技術的變遷,因為現在不管學得再快,也無法趕上變化的腳步… 莫名其妙講了一堆,好像跟這個主題無關? 非也,我想說的是,最近幾年我在專案中選擇的工具(開發技術)時,都盡可能以不用花太多學習時間的為主。因為工具(技術或框架)最終的目的是幫你節省時間用的,倘若學習成本太高,可能會本末倒置。而這個理由,也恰巧是我們選擇Vue.js作為前端開發框架的原因。 當過去幾年我們在.net環境嘗試建構一個適當的開發架構時,三層式的SPA對我們來說是個能同時滿足行動裝置、Web、以及桌面應用的理想選擇,而要採用何者搭配SPA作為Web前端開發套件呢? 最終,我們選擇了Vue.js。 理由? 它的程式碼很簡潔,非常輕量級,執行速度也算快,一點都不讓人覺得累贅。 它很好學,還有中文的文件(唯一的遺憾是簡體),對於已經有前後端程式碼分離、SPA基本概念的人,用起來跟喝水差不多。 它在資料繫結這個部份的做法非常直覺,MVVM概念的實現很接近以前XAML的作法,同時,它採用的標記語法很簡單,也極不容易破壞HTML版面,和設計師(designer)很好合作。 以上是最主要的這幾點。 Demo的前置準備 我們前面說過Vue.js學起來很簡單,因此我們也不用談什麼初階進階的東西。待會的Demo就直接從伺服器端把一組資料傳到前端,然後透過Vue.js做一個Binding(Template Rendering),以表格的方式把從伺服器端傳來的JSON資料呈現出來。 (若需要完整的CRUD請參考本文最後) 如果你想跟我一起 hands-on 一下,請依照底下的操作步驟做好前置準備,別忘了,我們用的是 SPA架構 ,把以前你熟悉的asp.net WebForms或as

一次搞懂OAuth與SSO在幹什麼?

圖片
最近的 Line Notify 、 Line Login ,以及前一陣子的 Microsoft Graph API ,全都使用到了OAuth作為用戶身分驗證以及資源存取的基礎。但很多讀者會卡在OAuth的運作流程上,根本的原因是不理解OAuth到底是幹嘛的?其存在的目的為何?以及如何應用? 因此,我想花一個篇幅,盡可能短的介紹一下OAuth與SSO,但,與坊間文章不同的是,我希望從應用情境的角度(而非技術)切入談這件事情,冀望能夠讓開發人員對OAuth有個最基本的認識。 OAuth的背景 我們回頭看 Line Login 與 Line Notify 中的例子,OAuth在這邊最簡單的應用情境,就是身分驗證。典型的情境中有幾個角色,分別是: 網站或App的開發單位 : 也就是各位開發人員 OAuth服務的提供者(Provider) : 也就是Line(或Google、Microsoft…etc.) 終端用戶(End-User) : 網站使用者、Line使用者、消費者、客戶…etc. 上面這三者的關係是什麼? 當我們建立一個網站(例如Pc Home購物)、或App(例如一個手機遊戲),都非常有可能需要建立一組會員機制,這些機制包含: 登入(包含身分驗證,帳號、密碼保存…等) 個資管理(用戶名稱、地址、電話、暱稱、手機…等) 以往,幾乎都是每一個網站自己做一套,但這樣有很多麻煩事,首先用戶要記得很多組帳號密碼,而每一個網站都自己搞一套會員機制,網站開發人員自己也很辛苦,加上最近這幾年大家都很重視個資,網站儲存(保管)了很多帳號密碼與個人資料,總是會有被駭的風險。因此,這十年來,很多大廠開始提供登入(與身分驗證)機制服務。 也就是說,小網站你不用自己做登入和會員管理了,你連過來我這邊,我是大網站,我已經有幾百萬上億的用戶,(例如全台灣都用Line),而且早就做了超級安全的會員管理機制,你這小網站何必自己做會員管理呢?你跟我連結不就得了,我大網站來幫你管理個資,提供你登入的服務,你把會員資料通通存我這裡,用戶也不需要記得很多組帳密,只需要記得我大網站的帳密,一樣可以登入你小網站(或稱為第三方應用)來使用你提供的服務,這樣皆大歡喜。 因此,大家就這麼做了。 但提供這樣服務的大廠越來越多,Google、Microsoft、Yahoo…都提供了這樣的