Lawrence Blog

RabbitMQ 是一個開放原始碼的訊息代理服務，它的主要功能是協助不同應用程式之間進行訊息的傳遞與處理，就像是一個郵局一樣，它讓發送者(寄件人)可以把訊息放進佇列(信箱)，然後接收者(收件人)可以從信箱中取出訊息並進行處理。 以下是 RabbitMQ 的一些特點： 訊息佇列 : 讓你可以建立多個佇列(信箱)，讓應用程式之間可以互相傳遞訊息，這些訊息可以是任何形式的資料。 可靠性 : 提供持久性訊息和交易支援，就像是郵局會保存信件一樣，即使在系統出現問題時，訊息也不會遺失，並且確保訊息被成功傳遞。 彈性與擴充性 : 支援多種訊息模式，可以依照需要設計點對點傳遞、廣播（發佈/訂閱）或者工作隊列模式，另外，它也可以在單一伺服器或者建立集群，以提高系統的擴充性和可靠性。 管理與監控 : 提供一個管理介面，讓使用者可以輕鬆地監控各佇列、訊息狀態，並且進行設定管理。 下圖是登入管理介面後的示意圖

Redis（Remote Dictionary Server）是一個開源的記憶體數據庫，它以鍵值對的形式存儲數據(Key/Value)，並且支援各種數據結構，包括字符串、哈希、列表、集合、有序集合等，常被用作快速、高效的快取（Cache）工具，以下是它幾個重要的特性。 快速 : 基於記憶體的數據庫，因此讀寫操作非常快速，特別適合用於需要高性能的應用程式。 多功能 : 支援各種數據結構，也可以支援非結構化的數據，因此滿足不同應用場景的需求。 持久性 : 支持將數據持久化到磁盤，這樣即使發生故障重啟後也不會遺失資料。 分布式 : 提供了集群模式，可以將數據分佈在多台機器上，從而實現更高的性能和可擴展性。 在我的專案中，主要拿來當做 Cache Server，服務本身是沒有提供 GUI 的管理工具，因此你可以透過一些開源的工具來查看服務基本資訊、儲存的數據內容等等，如 Another Redis DesktopManager(下圖)。

因為要開發 facebook oauth 登入，但 facebook 登入目前已經不支援 http 站台的串接，不過有找到更好的方式【 ngrok 外部網路連開發環境神器 】， 本篇文章僅留存紀錄(產生本地端開發用憑證) 。 方法一、直接建立自簽憑證

在之前的幾篇文章中，主要紀錄了與外部 IO 裝置無關的介紹，今天是時候要深入玩玩一些與外部 IO 裝置相關的應用了，你問我什麼是 IO ? IO 就是 Input/Output 的縮寫，也就是跟機器外部交流資訊的東西，就像是跟外界打招呼和傾聽外界的回應一樣。 以下是幾個我將要紀錄的 IO 應用 LED 紅外線控制LED燈 風扇模組 L9110 人體紅外線感應模組 HC-SR501 聲音模組 Keyestudio KS0035 好啦，在開始實際操作之前，得先來個腦補一下 IO 的接角的連接方式，也就是 Microbit 的腳位說明。以下內容是摘錄自【 認識microbit接腳 】和【 Input/Output Pins 】這兩個網站哦，因為我怕我自己會忘記，所以特地記錄下來。

上一篇 文章中介紹了微軟 MakeCode 開發網站的功能介面說明，該網站的操作介面其實還蠻直覺的，相信大家應該不需要這篇文章的介紹，就可以直接用積木堆出屬於自己的程式了，但筆者這裡還是按照操作步驟來記錄一下怎麼用積木來寫程式。 先講一下要設計的功能說明 開機的時候會先顯示一個愛心的圖示。 點選按鈕 A 顯示另外一個圖示。 點選 B 的時候清空畫面。 PS. 本文只是展示程式設計的操作流程，單純的使用模擬器觀看設計結果，因為不牽扯硬體，若是手邊沒有 Micro:bit 但想要體驗也是可以的喔。

看過  上一篇  文章，應該已經知道了什麼是 Micro:bit，接著介紹如何開始寫程式，在以前要控制一塊開發板，首先必須要先寫程式(要先學會程式語言，一般來說是 C / C++ 語言)，然後將寫好的程式燒到控制晶片中，當然 Micro:bit 的流程也不例外，但畢竟是要推廣到中小學生的開發板，因此在開發流程上進行了兩個跟以往很不同的優化。 積木方塊程式設計 Micro:bit 提供了 JavaScript、Python、Block Editor 等幾種編輯方式，若是 主要目的是要訓練孩子的邏輯能力 而不是編碼的能力，可以選擇使用圖形化積木方塊拖拉的方式來引導，此階段可以完全不需要撰寫程式碼。   USB 取代晶片燒錄器 有別於以前的韌體開發，Micro:bit 提供了 USB 的接口，並且支援了 Windows、Mac OS、Chrome OS、Linux 等主流系統。 透過 USB 和電腦連接 ，學生可以輕易地將自己設計好的程式， 更新到晶片 當中，讓教學者和孩子都可以專注於邏輯的訓練，不需要再額外的處理燒錄程式的產生的一堆硬體連接等相關問題，也讓入門的門檻可以大幅地降低(除非連電腦連接 USB 都不會)。

朋友任職的公司先前請我幫忙開發一個小程式，把文字稿轉成 MP3 的小需求，還希望可以選擇講話的聲音和語速，當下的直覺就是使用 Google 提供的 API 應該就可以達到了。 簡單的說明一下  Google Cloud Text To Speech   的 POC 功能說明，這個程式共開發成 Node.js 和 NET Core 兩個版本，在使用前必須先設定一些參數(詳細的說明我有寫在 Github 上的 readme 文件了)，在完成基本設定後，開啟程式會呼叫 Google Cloud Text-to-Speech API，將文字轉換成語音並輸出成 mp3 檔案。 但後來把 POC 的功能提供給他確認後，他的機車老闆說不要這個功能了，哭哭 😈，只好 Open Source 給需要的人了，需要的請至下方連結自取。 NetCore 版本 範例下載 NodeJS 版本 範例下載

故事是這樣開始的，筆者的女兒幼稚園大班(一歲就開始接觸樂高德寶系列)，因為對樂高轉動件有很大的興趣，因此就讓她去上樂高動力系列的課程，但動力系列的馬達需要靠紅外線接收器和遙控器才能控制轉動方向，身為老爸的我就開始研究如何讓動力馬達在 ”不使用樂高本身的紅外線遙控器” 的情況來操作馬達的運作，於是一條 Google 的漫漫長路就此開始。

應用程式執行前讀取 config 檔案內的參數，這是常見的開發方式，但若把參數定義在 TypeScript 檔案內，經過編譯後，所撰寫的類別都會被整併到 main.js 檔案內，所以若需要調整 config 參數，就必須要打開 main.js 然後在凌亂的 JavaScript檔案內找到參數，在修改它，這可能不是你樂見的。 理想的狀態應該是，把參數檔案定義在一個不會被編譯的檔案內，Ex. JSON檔，然後要使用的時候再去讀取它，對吧~ 當然不對，這也是筆者一開始的思維，但當要讀取 .json 檔案的時候，卻發現必須使用 http 、使用 http 、使用 http 來取得參數，若還沒發現事情的嚴重性，筆者大概說明一下，http是一個非同步回傳的類別，所以若要取得參數，就必須要在等待資料回傳後再繼續進行後續的作業，這樣整個應用程式會變得非常的複雜。

儘管 Angular 已經提供了很多功能及特效，但有時候直接套用前端版型的時候，還是不免使用到外部的JavaScript檔案，例如，jQuery 就是非常常見的類別庫。 本篇文章就簡單的介紹一下如何在 Angular 當中使用 jQuery，使用 jQuery 檔案的時機點，我們先大致區分成三大塊。 在index.html檔案當中。 在typescirpt檔案當中。 在其它.html檔案當中。

開發Angular應用程式的時候，有時候會把一些常用 複合式控制元件 打包成一個Component控制項，只要將商業邏輯撰寫在該控制項之後，其它開發人員若需要使用到該功能，就可以直接拿來使用了，例如下圖，是一個動態選擇電子郵件的輸入框，當資料輸入後會去檢查電子郵件的資料，並撈回可用的電子郵件。 在開發表單或者使用ngModel雙向繫結的時候，當部分控制項拉出去變成一個Component的時候，若要取得該控制項的資料，直覺的解決辦法就是使用 @Input() 和 @Output 的方式進行資料的傳遞。 但 Angular 本身就有針對 ngModel 在 Component 的資料繫結提供解決辦法，在Component 端實作 ControlValueAccessor，接下來的就來分享一下該怎麼實作該功能。

Angular 的指令共分三種類型 : 組件(Component) : 也就是模板的指令，這是最常使用到的指令。 結構型指令(Structural directives) : 用來修改視圖的 "結構"，例如添加或移除DOM布局，常用的指令如 NgIf 和 NgFor。 屬性指令(Attribute directives) : 用來改變視圖元件的 "外觀和行為"，例如預設的背景色、滑過改變顏色，常用的指令如 NgStyle。 而 @Directive() 就是 "屬性指令" 的一種，下圖為本文範例的示意圖，先大概說明以下幾個操作情境，底下會有詳細的說明。 設定載入時的預設背景色。 設定滑鼠滑過的背景設，當滑鼠離開後恢復預設背景色。 設定滑鼠點擊的背景設，當Click事件發生時變成指定背景色。

SPA(Single Page Application)的開發方式就是指透過一個 html 檔案來達成整個網站系統的任何操作，從頭到尾都不會離開此頁面，例如 Web Gmail 就是一個典型的 SPA 設計，回過頭來看一下 Angular 的基礎示範教學中也是使用 SPA 的方式，並透過屬性的判斷來決定使否載入某個 Template。 小型應用程式只有少數幾個頁面，使用此方式到還好，但假想一下有一個中大型應用程式有數十甚至數百個頁面需要切換，如果再像小型應用程式一樣透過屬性判斷的方式，後續整個程式碼可能會出現難以維護的情況，因此這種時候就需要運用 Angular 所提供的路由機制來處理此類的問題了。 什麼是路由? 簡單來說就是 Angular 會根據瀏覽器中的 URL，自動對應到要載入的視圖，這跟其它開發語言的路由，如 ASP.NET MVC 的概念是差不多的，差別在 Angular 透過路由機制來完成單一個網頁檔案切換視圖(SPA)的效果。 Angular 路由器是一個可選擇的外部 Angular NgModule，名叫RouterModule。 路由器包含了多種服務(RouterModule)、多種指令(RouterOutlet、RouterLink、RouterLinkActive)、 和一套配置(Routes)，本文將說明如何建立 Angular 路由設定。

在前面的學習過程中，理解了Angular的Layout布局方式可以像是ASP.NET的MasterPage方式來規劃好UI的布局，使用的是Template內嵌另外一個子Template，如下圖紅框處就是一個Child的Template，也學習到 Parent & Child Template 之間資料的傳遞方式( 參考先前文章 )。 今天又再次接觸到幾個新的裝飾器 @ViewChild & @ContentChild，在開始說明之前，需要先理解<ng-content>這個嵌入標籤。 先回到UI布局的部分，如果想要在一個 Parent 下方放置另外一個 Child Template，最簡單的使用方式就是直接在要顯示的地方加上類似上圖的操作方法。 從上面的範例來看，該標籤的InnerHtml是空白的，因此就大膽的假設有機會把資料寫在InnerHtml的部分，讓HTML標籤可以從 Parent Template 傳入Child Template當中，但經過實際測試的結果(如下圖)，果然失敗了。 實際上Angular是允許讓HTML標籤由Parent Template傳入Child Template，ng-content就是要用來處理此問題的。

Angular可以透過在HTML標籤內使用 DOM的Property綁定 的方式將資料由Component端傳送到Template端(又或者反向綁定、雙向綁定)。 但該方式指的都是同一個Template，若假設有一種情境為，一個父親的Template必須要將值傳送到兒子Template，並且兒子Template內處理完某些事件必須要將資料傳送回父親Template的情境時，該如何進行? PS. 有點類似早期的showModalDialog在兩個父子視窗傳值的概念，只是在此Single Page Application（SPA）的情境中不是兩個不同的頁面，因此使用方式也有所不同。

Attribute 和 Property 這兩個英文單字翻譯成中文都稱作 "屬性"。 而且也應該知道Angular可以透過 " 屬性 " 的綁定，讓Component和Html Template之間可以進行溝通，但常常有時候會發生一些特例，因而讓應用程式無法正常的運作。 舉個簡單的例子，表格欄位物件 td 內有一個合併儲存格 colspan 的屬性，它是一個可用的屬性(Html Attribute)，但是實際將該屬性綁定後卻出現錯誤，為何會發生這種錯誤?

本篇文章無任何說明，僅紀錄要開發 Angular 必要的安裝項目和幾個常用的指令，有興趣也可參考保哥的文章 Angular 4 開發環境說明 。

近來調整一個Linq to SQL的專案，但由於跟它不是非常熟的狀況下，發生了修改資料後資料庫並無任何反應的情況，實際使用SQL Profiler，發現並沒有執行Update的相關語法。 Google了一下關於Linq to SQL的修改的相關文章看到了這樣的說明【The table could not be updated properly because it had no primary key. (Actually it had the column but the constraint was not copied when I did a SELECT INTO my dev table). The DataContext class requires a primary key for updates .】，但這個並不是這次問題發生的原因。

使用資料庫Microsoft SQL Server? 不是 => 沒用可以離開了。 資料表有針對各欄位的描述欄位說明?  沒有=> 沒用可以離開了。 有定期維護資料結構表文件? 沒有=> 沒用可以離開了。 如果上述幾個條件都符合，並且你也有需要產生出資料結構表相關文件的需求的話，筆者分享一下日常使用的小工具，並附上Source Code給各位各自發揮。

早期iOS開發者完成程式開發的時候，需要提供給幾個重要的使用者進行封閉測試時，必須經過底下幾個步驟。 取得使用者手機的UDID(透過iTunes或者第三方工具)。 到開發者後台使用者的手機UDID附加到Distribution Provisioning Profie。 使用該檔案並將程式打包成IPA，並將該檔案提供給使用者安裝(參考 此篇文章 )。 IPA的安裝方式不在這裡探討，有興趣者可自行Google或者參考 安裝.ipa的各種方法 介紹，經過上述的一連串設定步驟(如果程式錯誤，又得重來打包、安裝....)，別說使用者了，就連開發者也都吃不消，但若是很幸運地若是使用企業用戶帳號開發的話，步驟或許少一些，但還是需要請使用者手動重新安裝。

上一篇文章 中簡單了說明一下什麼Microdata，本文分享一下稍微複雜的使用情境。 原則上只需要依照規範中的類別去定義相關欄位即可，但實際調整的過程應該很多初學者包含筆者在內都會發現，怎麼少了一些需要的屬性???? 例如，商品類別沒有價格欄位，怎麼定義價格? 諸如此類的問題會再實作過程中一一出現，因此在實作前建議先了解一下schema.org中關資料類型的定義及其架構。

筆者從業以來一直跟SEO扯不上關係，近來因為公司組織調整而來了一群數據分析的專家，根據它們看完前端服務型的網站後，給了一些建議，例如增加Google Analytics、建立Google Search Console索引、明確的指名頁面標題、前端商品頁面新增Microdata等等...。 前面幾個項目都可以理解，但Microdata是啥?? 筆者可是完全沒聽過，因此只好默默地回到座位上求助一下Google大神的開示，並得出底下的結論。 對於一個前端的服務化網站，尤其是商業化網站，網路行銷人員無所不用其極地要設法讓自己的網站可以大量地在各大搜索引擎中曝光，實作的方式不外乎就是花錢買廣告、搭配知名部落客行銷自家商品以及提升網站SEO(search engine optimization搜索引擎最佳化)。 但要如何提升網站的排名呢? 很簡單，首先要了解各大搜索引擎的排名方式(花錢的除外)，就是要先知道的排名演算法，並加以調整就行了。 ㄜ~~~~  但是這樣的嗎?  它們似乎不會將此演算法公諸於世，因此就僅能根據各大搜索引擎官方釋出的來Structured Data相關文件進行調整了。

最近同事的報表有一個需求，希望可以在報表內顯示 群組的資料列編號 ，遇到新的群組需重新計算，在資料表中的顯示類似下圖紅框處的編號方式。

本文要跟大家分享一下如何使用Visual Studio 2013來開發可上架的Hybrid APP，在開發前首先必須先設定好先前 文章 說明的環境設定才可繼續進行開發的步驟。 新增一個Hybrid App專案，JavaScript->Multi-Device Hybrid App，選擇Blank App(Apache Cordova)，設定好專案路徑後按下確認，專案建立好後，打開方案總管可以看到Visual Studio已經建立好專案所需的基本檔案及分類， MSDN 有更詳細的說明怎麼開發一個APP，有興趣的可自行參閱。

NET Developer有極大的比例都跟網頁開發相關，但目前市場主流都關注在行動裝置的開發，一般網頁設計師要轉各平台的APP原生程式開發勢必得付出不小的成本，PhoneGap(Cordova前身，下文一律稱為Cordova)已經在市場上行之有年，但以往都必須要另外安裝其它IDE開發工具，如Eclipse等工具來協助快速開發，今年微軟像是佛心來的，正積極的將Cordova收納到開發工具擴展套件中。 要學習Hybird APP，首先必須要先簡單的了解一下目前三種較常見的手機開發模式，Web APP、Hybrid APP、Native APP。