Posts

第12 屆iT邦幫忙鐵人賽系列文章 (Day21) 上一篇介紹如何主動式推播給使用者訊息，但Push Message發送到一定的量是要收費的，Line Notify是另一種主動式推播的解決方案，且是免費的，缺點就是收到訊息時候，不會顯示是從本身Chatbot的角度，而是Line的Chatbot，要發送Notify訊息，大概需要做以下事情，缺一不可 註冊 Line Notify 服務 取得 client_id 取得 client_secret 取得驗證的 code 透過第2-4項取得 access token 註冊 Line Notify 服務 LINE Notify 透過 ngrok http 8888 取得一個local的對外站台，貼到 Callback URL 接著會驗證 Email，驗證通過後可以進到這個 Service Client ID 跟 Client Secret 取得了 接著可以透過下列網址訂閱服務 [https://notify-bot.line.me/oauth/authorize?response_type=code&scope=notify&response_mode=form_post&client_id=](https://notify-bot.line.me/oauth/authorize?response_type=code&scope=notify&response_mode=form_post&client_id=)<client_id>&redirect_uri=<client_secret>/&state=<驗證身分代碼，任意給> 可以看到可以從這個頁面綁定 Line 會收到一個通知 到我們剛剛 ngrok 的後台看看 (http://127.0.0.1:4040)，有接收到這個 Request，取得加密後的 code 用剛剛取得的這三個資訊來取得 access token public static async Task<string> GetAccessToken() { using (var httpClient = new HttpClient()) { using (var request = new HttpRequestMessage(new HttpMethod("POST"), "https://notify-bot....

第12 屆iT邦幫忙鐵人賽系列文章 (Day20) 在上一篇我們儲存報名表單後，也有一併打使用者的ID儲存起來，透過這個ID，我們就能發送一些主動的推播訊息 準備 Line Chatbot 的 Access Tokne 準備要發送的 UserId (可以從接收到的訊息及Liff App 取得使用者ID) 新增一個 .NET Core Console專案來發送 官方的 Shell 範例 一樣丟到 Curl To C# 做轉換，並做格式修改 當然 Push Message 也支援各種前面介紹的格式，此篇就不再多做介紹了，可以參考本系列文的各種訊息格式教學 static async System.Threading.Tasks.Task Main(string[] args) { using (var httpClient = new HttpClient()) { using (var request = new HttpRequestMessage(new HttpMethod("POST"), "https://api.line.me/v2/bot/message/multicast")) { request.Headers.TryAddWithoutValidation("Authorization", $"Bearer <Your Access Token>"); PushMessage req = new PushMessage(); req.to = new List<string>() { "<User Id>" }; req....

第12 屆iT邦幫忙鐵人賽系列文章 (Day19) Azure Table Azure Table 是一個具有結構性的 NoSQL 服務，如果資料結構不具備太複雜的關聯關係，透過這種 Key-Value 的方式做儲存，用 JSON 反序列化回來是一個不錯且方便的方式。 註冊 Azure Table 服務 如何註冊一個 Azure Table 服務，可以參考官方文件，建立完成後，可以透過以下路徑取得 Storage 的 Connection String 在 .NET Core Web Api 儲存報名資訊 先從 Nuget 安裝 Microsoft.Azure.Cosmos.Table 新增 AzureTableUtility.cs 並實作 如何透過 SDK 新增 Azure Table public static CloudTable CreateTableAsync(string tableName) { string storageConnectionString = "DefaultEndpointsProtocol=https;AccountName=kylewedding;AccountKey=2mVDAPWt6xZAlxY9xx6pxhzJMvp3vyULGql7PZz9tHEwJ0zc+1vtdt50ZcDwb9I862ez+OoHQGcCkOhU0OvAng==;EndpointSuffix=core.windows.net"; // Storage 的 連線字串，來源可以用appSetting.json搭配 IOption 注入 CloudStorageAccount storageAccount = CreateStorageAccountFromConnectionString(storageConnectionString); // 新增 Azure Table CloudTableClient tableClient = storageAccount....

第12 屆iT邦幫忙鐵人賽系列文章 (Day18) 在上一篇我們成功將 chatbot 透過 Liff App 後，跟所開發網站有一些連結後，本篇我們將要來實作前端的報名表單 本篇實作內容放在這個 Git Repo： https://github.com/kyleap/vue-next-vee-validate-v4-line-liff-app-sample 本篇將會學到： 如何起始 vue-next (v3.0) 專案 如何在 vue.js 加入 Line Liff App，並取得使用者資訊 如何在 vue 做一個報名表單 怎麼依據使用者選取條件來顯示隱藏表單內容 在 vue 如何做表單驗證 Vue.js 的表單 本次範例用了 Google 風格的 CSS 框架 Materialize，使得我們的表單比較像 Google Form 的風格，在 index.html 加入相關 css/javascript CDN 原始碼可以至 Github 看，實作的 UI 大概長這樣 如果不參加喜帖，相對的也不用填那麼多資訊了，這時可以透過 v-if or v-show 來實現，兩者差異為 v-if 會實際產生 dom，v-show 儘會顯示隱藏 透過 VeeValidate 來做表單必填驗證，請注意 vue 3.0 要使用 VeeValidate 的 v4 版本...

第12 屆iT邦幫忙鐵人賽系列文章 (Day17) LIFF 全名是 LINE Front-end Framework，一個可以在 LINE app 內運作網頁的機制，所以網頁工程師真的很通用阿，只要會網頁的語言就可以在各種平台實現，Liff App 可以在 line chatbot 裡面打開所開發的網頁，呈現效果大概會是以下這樣，我們本次用較新的 v2 來實現 建立 vue 專案 npm install -g @vue/cli vue create hello-line-liff-app cd hello-line-liff-app npm run serve 這樣應該就能看到以下畫面 本系列不會講 vue 怎麼發佈到 web server上，我們用 ngrok 來打通對外網址 ngrok http <your local vue.js port>-host-header=”localhost:<your local vue.js port>" 要新增一個 Line Liff App，得先新增一個 channel，性質為Line Login 在 Line Login Liff 的 tab 新增一個 App，網址指向上面 ngrok 產生的網址 把 https://liff.line.me 的網址複製，貼到 chatbot 的對話，點擊測試看看，會是以下畫面：...