Lawrence Blog

上一篇 文章中介紹了微軟 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。

筆者最近這一年都忙著為公司進行專案導入，對於技術的研究沒有太多的著墨，最近 Ian哥 剛好到TechDays 2014擔任Cordova Hybrid APP開發的講師，跟他請教了一些相關的資訊，也重新燃起對於開發的熱情。 Cordova的前身也就是鼎鼎大名PhoneGap，2012那年剛上來台北的時就有與PhoneGap進行了第一次的親密接觸，但後來因為當時高效能的智慧型手機普及率不佳，加上需要針對各平台進行額外的開發設定等種種因素，因此就直接學習了原生程式的開發，最近Visual Studio 2013正式把Hybrid App納入了產品的功能(雖然目前還只是 CTP2.0版  ，尚有許多改善的空間，CTP3.0版已發佈，若先前已有安裝過2.0的話需移除，可參考 No.18 的說明)，且目前幾乎人手一隻高階智慧型手機，再不考慮效能的情況之下，筆者本人也湊熱鬧的下載下來開發玩玩。 目前要開發 Multi-Device Hybrid Apps ，必須先安裝Visual Studio 2013，並且更新到Update3版，並且下載安裝 VS2013擴展套件 後才可以開始進行開發。雖然官方網站有特別說明如何安裝開發環境，但全部都是英文的，這裡還是簡單的說明一下設定步驟。

最近在查一個案例，使用者反應在查一個員工數比較少的請假資料的時候會出現錯誤畫面，查員工數較多的公司別的時候反而很快的就查詢出來了，當下一開始的直覺可能是資料面有問題，因此打開程式執行後發現該錯誤為ASP.NET畫面查詢SQL時等待過久timeout所導致，但這問題就來了，為何資料比較少查詢反而會timeout，資料較多的反而不會。 跟同事一起討論後大家一開始都覺的是Index的關係，因此就開始往錯誤的Index去查，結果查出了大學問(小弟我SQL方面的功力很破請見諒)。原來SQL Server在處理Join的時後，會跟據Join table的資料量、索引等…來決定使用不同的實體處理模式，SQL Server本身共有三種物理連接方式，【巢狀迴圈(Nested Loops)】、【合併聯結(Merge Join) 】、【雜湊比對(Hash Match)】。下面先簡單的說明三種連結的處理原則。

愚蠢的筆者在 2016/06/16為了解決報表矩陣的問題 ，發現根本不需要畫蛇添足的另外撰寫一個組件，報表本身就可以撰寫函式來處理此問題了，此篇文章僅留下當作參考外部組件的運用方式。 ================= 分隔線底下為原文 ================= 最近接近要發年終的日子了，但老闆們突然交待要將薪資條內的年終獎金和績效獎金的項目合併只呈現年終績效獎金，原本想說一個很簡單的東西，去薪資項目內修改名稱即可，沒想到薪資單列印的程式一打開，暈倒，竟然是寫死的，而且就連位置都是寫死的，我想一時半刻要調整也不是太大的問題，只是報表(rdl)的判斷式IIF會寫的很長很難寫，因此去詢問了有經驗的同事提到可以另外寫Function在提供給報表使用，下面說明一下設定的方法。 需求說明 1.只有年終獎金 -> 年終獎金項目顯示【年終績效獎金】 2.只有績效獎金 -> 績效獎金項目顯示【績效獎金】 3.年終績效獎金都有 -> 維持原先顯示項目【年終獎金】、【績效獎金】 

最近在設計一個較複雜的邏輯控制類別，因為內部較多SQL的存取所以為了方便起見，就在該類別所提供的Method當中包了Transcation，且在該Method的最後安插了一個Event(在尚未Commit之前)給使用者調用。 但這樣的設計上本身存在著一些陷阱，因為你無法預防使用者會如何使用你公開的Method，最近就遇到一個使用方式。 使用者在自己的Method內包了一層Transcation，在呼叫Component公開的Method，結果就發生了Timeout的事情，由這個經驗可以告訴我們，若再設計給其它第三者的API時，必須多考慮其它可能的使用方式。