發表文章

目前顯示的是 2018的文章

使用 imgur.com API 作為應用程式上傳檔案的圖床

圖片
不知道你有沒有用過Hackmd.io這個網站中一個我覺得很讚的功能? Hackmd.io是一個共筆的網站,你可以在瀏覽器上以markdown格式編輯文件,其中有一個挺神奇的功能,你可以透過Ctrl+v直接把剪貼簿中的圖片以貼上的方式貼入文件中,這個貼上的動作會自動變成上傳檔案,並且在上傳完成之後得到一個該圖檔的url,整個操作像是底下這樣: 好,其實要實現這個功能不難,只要你javascript夠熟,這個動作也不過是把前端的圖檔往後端傳,然後後端接收到之後,上傳到某個位置(而這某個位置就是Imgur.com),取得該圖檔的url之後,update前端的html,就可以顯示出來了。(當然如果你願意的話,也可以整段都用js在前端完成) 但讓我好奇的是,這個imgur網站有支援開發人員免費當作圖床用嗎? 一查之下,還真的有,且API和套件都非常齊全,只要你是非商業使用,是完全免費的。即使是商業使用,也有一定額度的免費。這讓我挺訝異的,訝異的部分是我以前怎麼會錯過這個網站? 為什麼我們需要把上傳的檔案放到特定的blob或圖床上呢? 因為在雲端的時代,上傳的檔案放到Web Server上會造成系統無法實現HA,Scaling會受到限制,而放在資料庫中當然太奢侈,所以一個好的大檔案儲存位置,是開發應用程式必須的。 過去我都是用azure blob當作應用程式的上傳圖片存放位置,雖然也算是便宜,但免費的imgur還是頗吸引人,特別是在我們開發的服務並沒有收錢的時候(像是Chat bot、Demo範例…等)。 要怎麼把圖片上傳到imgur上並取得該圖片的URL呢? 程式碼超簡單: 上面這段程式碼使用到了Imgur.API這個nuget套件: 另外程式碼中的CLIENT_ID和CLIENT_SECRET當然要申請,申請的步驟也很容易,請先註冊成為imgur的會員,然後到底下這個頁面申請一個App: https://api.imgur.com/oauth2/addclient 由於我們只是很簡單的上傳圖片取得URL,且使用的是Server Site的Code,所以我們不需要 callback URL,簡單的選擇第二項即可: 申請完之後你會得到像是底下這樣的資訊: 其中就有我們程式碼中需要的 Client ID與Secret。 (順帶一提,又一次使用OAuth的場合,如果你對OAuth不

LINE Developer Day 2018 東京豐盛技術之旅(下)

圖片
早上keynote的迴響和疑惑還停留在腦海裡,沒想到一下就來到了中午,中午最讓人期待的當然就是與CTO的round table。 As a LINE API Experts,受邀參加一年一度的Developer Day是一種福利,但更有意義的則是和CTO以及其他技術主管的Round table,畢竟能夠面對面進行溝通,並且得知更多未來的發展方向與具體資訊。 先前 提到過,LINE在這幾年的時間內迅速擴充,如今除了即時通訊軟體,更涉足了Fintech, 區塊鏈, 與AI等多重領域。尤其是AI這部分,關於bot engine與OCR、NLP、speech regnition…LINE都有著自己的實作,這似乎讓人有些不解,在眾多的雲端服務環繞之下,為何LINE選擇自己開發這些技術呢? 為何不使用現成的工具呢? 除此之外,我們也發現,LINE在各國推展服務的速度與順序上,有著相當大的時間差異,未來這部分是否會有統一的時程呢? 說到這部分,我們也發現比起泰國和印尼,台灣的發展速度算是來的快上很多的,這點讓來自其他國家的LAE們頗為羨慕。 不僅發展策略,還有許多關於技術上的討論,諸如,LAE大夥兒也提到,在開發Liff應用的過程中,由於WebView是崁入在LINE App裡面的,因此很難Debug,這個部分是否有好的建議呢? (沒想到還真的有,容後再跟大家介紹) 而最讓人期待的當然是,LINE API Experts是否有類似Early Access Program之類的方案,能夠較其他開發人員更早知道API的釋出與更新呢? 這些放在心裡的問題,肯定要一次問個夠… 凡此總總,都在兩場的round table有著相當深入的討論,由於LAE們是從不同國家來的,你不難發現,比起泰國、印尼、甚至日本當地的LAE,台灣代表團們可是火力全開,卯足了勁提出了一個又一個的問題,大概會議中有一半時間在回答我們這一票台灣去的LAE提出的種種問題,也算是不枉此行了。 有一個小動作我蠻佩服的,CTO和API Experts聚會結束之後,依照慣例要來張照片,但人那麼多照相隊伍該怎麼排呢? 正當大家杵在那兒不知道該怎麼動作的時候,CTO直接站出來蹲在最前面,不是站著唷,就直接蹲下來讓API Experts能夠站在身後拍照,這應該是我看過唯一一張公司女性CTO帶頭蹲著陪訪客拍照的照片,氣度非凡! 問飽了問

LINE Developer Day 2018 東京豐盛技術之旅(上)

圖片
回到台北我沉澱了幾天,直到今天才終於有機會把LINE在本年度位於東京八方園舉辦的LINE Developer Day 2018盛會作一個筆記整理。 我若將整個活動稱之為『 奢華 豐盛的技術之旅』我想應該一點都不為過。為何寫了又槓掉了奢華二字? 這似乎有點不容易解釋。 因為整個活動的體驗,實在讓我難以用一句話一個形容詞就精準描述。雖說這畢竟是一個技術盛會,講奢華可能有點Over,但在豐盛中卻總讓人覺得有一抹低調的奢華感。別以為只是吃好住好的那種豐盛,身為技術宅對於這種身外之物並沒有太多欲求,那到底特別在何處? 且讓我娓娓道來… 由於身為LINE API Expert,今年LINE邀請我們參加了這三天兩夜的技術之旅,第一天晚上Evan Lin(LINE Technical Evangelist)被我們這群來自台北的API Experts一夥人強押作陪,在下班後被逼著一同前往體驗和牛吃到飽的快感。沒聽錯,和牛吃到飽,聚會還沒開始就已經體驗到第一種『豐盛』了。 怎麼會只有一張照片? 因為其他的都已經在來不及拍照前被餓狼般的API Experts們給吞食了,直到酒足飯飽,上面這盤其實已經有些吃不下了,才『淪落到』被拍照的地步。 但畢竟和牛吃到飽不是重點,只是奢華中的小小點綴,頂著些許微醺回到飯店看著夜景好好放鬆,準備迎接明天正式的活動才是王道: 飯店雖位於新宿鬧區內,然而從房內落地窗俯瞰著窗外東京的夜色,街道上的喧鬧仿佛已被置身度外,只剩下夜色中來來往往的JR列車的身影。 這樣的靜懿讓你很容易入睡。 第二天一早,就是重頭戲的開始了,看到入口處的這尊門牌,你可能會以為我們來到了什麼煮酒論英雄的深山曠野? 不然,其實會場『八芳園』距離地鐵站僅僅幾分鐘路程,雖藏身在市區之中,卻是一座擁有一萬坪面積的日本庭園,內部包含自然形成的丘陵、溪流和百年老樹構造出的靜謐氣氛: 過了上面這座石碑,LINE Developer Day 2018的主視覺立刻映入眼簾: 入園之後的小徑,真的會讓你以為來到了世外桃源,這像是個辦技術大會的地方嗎? 實在讓人驚豔: 為Developers在這種地方舉辦個年度技術盛宴,其實也是我一直很想做,卻始終無法實現的夢想,沒想到這次LINE在日本東京給實現了。把位於技術前線的科技宅們,聚集到這一個充滿日式古意的所在,這中間的對比,正如同這家融合了日韓文化和美式風格的企

使用Google登入做Web應用程式單一登入身分驗證(SSO)

圖片
你本以為今生不會再在.NET WebForm開發的旅途上用到Google Account做網站SSO的身分驗證,但時代的巨輪就是這麼幽默… 這一篇很快地談怎麼用C#做Google帳號的SSO(Single Sign On),依照我們前面曾介紹過關於 OAuth與SSO 的資訊,你應該已經知道用OAuth做網頁SSO需要兩個重要資訊,就是Client ID與Client Secret,在GCP平台上,你可以透過 https://console.cloud.google.com 這網站來建立一個應用程式(專案),建立後第一件事情就會引導你到底下畫面: 要我們選擇? 毫無懸念的我們選擇OAuth用戶端ID,接著會要求你先在OAuth同意畫面上做一些設定。 什麼叫做OAuth同意畫面? 就是那個你的網站要求人家用Google帳號登入時,跟人家要求權限存取他的資訊,請他按下『同意』的那個畫面,而該頁面中的相關資訊就是在底下設定的: 最主要的是設定應用程式名稱,這個畫面設定完之後,底下有幾個按鈕,按下儲存之後(順帶一提,Google要求你正式啟用前要申請驗證,否則只能測試),會跳出底下畫面: 我們的SSO是做給網站用的,上圖A的部分理當選Web應用程式,然後底下B和C你應該樣知道怎麼填,最主要的就是C的redirect_uri,請特別注意,即使是以lcoalhost進行測試的階段,你還是要正確地填寫這個redirect_uri,一般來說測試階段很可能是類似底下這樣localhost的url: http://localhost:63577/SSOcallback.aspx 這個位置是指,你的用戶完成Google登入後,要導回你網站的哪一頁。完成之後按下建立,我們的目標是拿到底下兩組key: 前置作業完成無誤後,我們要撰寫一個登入頁面,也就是你的網頁要讓Google用戶登入的那個引導頁面,例如我們範例中是: 按下這個按鈕,網頁會被引導到Google做的登入畫面,我們有了剛才建立好的Client ID,要組一個這樣的redirect登入url不難,程式碼如下: 上面這段javascript,從14-22行就是組出將用戶轉向Google登入的url,然後redirect過去,其中19行的client_id,當然就是我們剛才在GCP平台上申請個半天的應用程式Client ID,而red

如何手動切換到Azure DevOps(VSTS)的新UI?

圖片
VSTS最近改名為Azure DevOps,其實對用戶的影響不大,原則上VSTS每季都在更新,所以有新功能不足為奇。 但在這段時間UI上卻大改了一番,這導致先前很多寫的blog和錄製的教學影片有需要調整,但調整非一朝一夕,所以還是得先讓大家知道一下切換新舊UI的方法。 如果你是舊版的UI,大概長得像底下這樣: 至於新版的UI,則是: 某些舊的專案,你進去之後可能還停留在舊版UI,其實你也可以手動切換成新版UI,接換的地方藏在右上角你的頭像底下: 其實,進去之後你會發現,一堆新舊功能的切換都放在這裡: 你可以選擇為整個組織或個人切換(上圖A),至於UI的切換則是在上圖B所標示的位置。如此一來,你就可以隨心所欲地為整個團隊或你個人切換喜歡的UI囉。