[Design Pattern] 範本模式(Template Pattern)

前言：
以前看到範本模式的介紹時，心裡有一個疑問，
看起來就是衍生類別繼承基底類別，為何算一個模式?
直到有一次寫程式不經意用到範本模式，才恍然大悟，
範本不是單純繼承，而是定義好流程，細節留待衍生類別去定義。


說明：
簡單的類別圖如下：

BaseClass就是所謂的範本，定義了Main()，Main()則會執行Start()->Detail()->End()，
其中Start()是private方法，Detail()是abstract方法，讓繼承的類別去實作，
而End()是virtual方法，意即由衍生類別自己決定是否覆寫。

[Angular] 建立第一個Angular專案(Windows環境)

前言：
Windows環境下從無到有建立第一個Angular專案的紀錄。


步驟：
● 下載nodejs並安裝，為啥要下載nodejs?
    因為需要裡面的NPM(Node Package Manager)套件管理工具，
    連至nodejs官網，選擇LTS(Long Term Support)版本下載安裝，目前LTS版本為10.16.0。

● 安裝好nodejs後，打開命令提示字元，輸入node -v，安裝成功會顯示nodejs的版本，
    再輸入npm -v確認一下：

● 接著要透過NPM安裝Angular CLI，Angular CLI提供很多指令，讓developer開發Angular application更方便快速：

● 打指令：npm install -g @angular/cli，會問是否分享使用資料給Google的Angular team：

● 安裝結束後，一樣下指令ng v，若出現下圖就沒問題了：

● 接著來建立第一個Angular專案吧，切換好目標目錄後，
    打指令：ng new(或n) <name> [options]，name為專案名稱，options則是選擇性的設定，
    這個指令會產生新的workspace與default project。不過安裝一開始，CLI就問了：

1. Would you like to add Angular routing? 可選No(default值)
2. Which stylesheet format would you like to user? 可選CSS(default值)

或是依各自狀況選擇囉，接著就開始建立專案與安裝套件了，可參考下圖：

●  簡單講一下建立了那些檔案：

1. angular.json：預設的CLI組態，提供CLI在建置、服務或測試專案所使用的設定。
2. package.json：npm管理套件用。
3. README.md：如大家所知，就是預設專案的說明檔。
4. tsconfig.json：預設TypeScript組態。
5. tslint.json：預設TSLint(linter for TS)組態。

●  建立完成後，cd到專案下，打指令：ng serve，就會開始建置專案並開啟server，

● 本來以為會自動開啟瀏覽器並開好網頁，不過應該是VS用太久，讓我有錯覺...請自行打開瀏覽器並貼上http://localhost:4200/：

參考資料：
https://nodejs.org/en/
https://cli.angular.io/
https://angular.io/guide/file-structure
https://ithelp.ithome.com.tw/articles/10203185
https://jonny-huang.github.io/angular/training/01_creating_first_project/

[.Net] 如何複製instance(deep clone)/Prototype Pattern(原型模式)

前言：
有時候需要將物件instance複製出來，
.Net有提供ICloneable介面，以實作複製的方法(實作Clone方法)：

而object有提供一擴充方法MemberwiseClone，以執行淺層複製(shallow copy)，
但通常要的不是淺層複製，因reference type會指向同一塊heap，
因此若需要完全獨立的instance，就要自己實作。


作法：
1. 自行回傳新建立的instance：
若物件屬性可在建構子就完全決定的話，直接回傳新的instance即可：

不過通常沒這麼簡單，因此可先呼叫MemberwiseClone得到淺層複製，
再自行建立其他reference type屬性的instance：

不過如果物件屬性很多、很複雜又很多層，可考慮下一個做法。

2. 使用Json的Serialize與Deserialize：

不過作法2的執行時間應該比作法1長?? 實際測試一下：

各執行5次，作法2執行時間都在7秒上下，而作法1只要140毫秒，
因此2種作法各有所長，看狀況使用了。


參考資料：
https://docs.microsoft.com/zh-tw/dotnet/api/system.icloneable?view=netframework-4.8
https://docs.microsoft.com/zh-tw/dotnet/api/system.object.memberwiseclone?view=netframework-4.8#System_Object_MemberwiseClone
https://stackoverflow.com/questions/78536/deep-cloning-objects

[CSS] 手機版chrome背景圖(backgroun-size: cover)無法正常顯示

在html上使用background-image與background-size為cover設計全背景：

桌機上測試正常，但使用Android手機上Chrome直向瀏覽時，背景圖無法延伸至底部，
如下圖：

橫向瀏覽則正常，測試了一下，發現：
● background-size: cover：背景圖在mobile chrome就無法延伸至底部。
● background-attachment: fixed：在mobile chrome沒有生效。

google了一下，發現這似乎是mobile chrome的bug??
但直到目前，該問題依然存在，
常用的workaround是指定html的height為100%，如下圖：

測試結果如下圖：

參考資料：
https://support.google.com/chrome/forum/AAAAP1KN0B0l6BF3W0rymo/?hl=en&gpf=%23!topic%2Fchrome%2Fl6BF3W0rymo
https://issuetracker.google.com/issues/36908439
https://bugs.chromium.org/p/chromium/issues/detail?id=344338
https://css-tricks.com/perfect-full-page-background-image/

[.NET/Tool] 讀取不同版本Excel資料(.xls或.xlsx)

前言：
.NET中常見讀取Excel的元件有：
● Microsoft.Office.Interop.Excel
● NPOI
● EPPlus
● ClosedXML

但Interop.Excel在使用上，問題比較多，如多執行緒時，會出現檔案鎖定等問題，
至於EPPlus跟ClosedXML只能處理xlsx格式，所以就拿NPOI來試試了，
而且NPOI可以商業用，只要掛上copyright與license notice即可(Apache License 2.0)。


作法：
初次使用NPOI，發現不同Excel格式有不同類別處理，如：
● HSSFWorkbook用來處理xls
● XSSFWorkbook用來處理xlsx

但這樣不就要先判斷附檔名，再用不同類別處理?
似乎不夠漂亮!?

後來找到NPOI提供WorkbookFactory類別，提供IWorkbook抽象，
只要呼叫WorkbookFactory.Create方法，即可依Excel格式回傳該Workbook。
不過在WorkbookFactory.Create(string file)實作方法裡，
竟然是先用HSSFWorkbook開看看，開不起來再用XSSFWorkbook開，
沒問題就回傳，出乎我意料之外...


後來想到，如果只是讀取Excel，用LinqToExcel就可以了，
使用LinqToExcel讀取Excel非常方便，並可代入自訂物件結構，使用強型別處理資料。
但記得要安裝Microsoft Access Database Engine 2010 Redistributable，
以免出現The 'Microsoft.ACE.OLEDB.12.0' provider is not registered on the local machine.'例外。


參考資料：
https://github.com/tonyqus/npoi
https://github.com/paulyoder/LinqToExcel

[EF/MySQL] 如何使用EF Database First連接MySQL DB

前言：
Entity Framework是.Net ORM(Object Relational Mapping)的Solution，常搭配SQL Server，但若要連結MySQL，該怎麼設定呢?


作法：
1. 先至MySQL官網下載MySQL for Visual Studio並安裝，使用最新的8.0.13版：

2. 打開VS，選單列->檢視->伺服器總管，在資料來源上右鍵->加入連接，
點選變更，即可選擇MySQL Database：

 

3. 輸入連接MySQL的連線資訊後，可點選測試連接確認結果。 

4. 但想使用EF Database First來介接MySQL，卻還是找不到MySQL provider：

5. 因為MySQL for Visual Studio適用在VS的伺服器總管上。
需再安裝MySQL Connector/NET(用來連接MySQL的ADO.NET driver)，一樣使用8.0.13版：

6. 重開專案後，新增實體資料模型，就可以看到MySQL provider：

 

7. 設定好連線資訊後，再點選下一步，卻出現錯誤：

 

 

8. 因為還要設定EF連接MySQL的provider，建議從NuGet下載MySql.Data.EntityFramework，專案在加入參考MySql.Data、MySql.Data.EntityFramework與Google.Protobuf後，會自動更新web.config的EF provider。

或是手動加入這些dll(可在MySQL Connector Net安裝資料夾的Assemblies下找到)， 在web.config的EF區塊內自行加上

<provider invariantName="MySql.Data.MySqlClient" type="MySql.Data.MySqlClient.MySqlProviderServices, MySql.Data.EntityFramework" />：

9. 最後完成Database first設定。

後記：

在第7點設定資料連接的畫面，按下一步若視窗跳掉，

通常是web.config的EF provider沒設好，

或是沒安裝MySQL Connector/NET。

參考資料：

https://dev.mysql.com/doc/mysql-windows-excerpt/8.0/en/windows-install-archive.html

[ASP.Net MVC] Github OAuth外部驗證無法使用(要求已經中止: 無法建立 SSL/TLS 的安全通道/loginInfo為null)

前言：
OAuth是一種外部驗證的標準，可讓第三方應用程式，存取資源擁有者的資源。
通過驗證後，第三方應用程式會從OAuth Server拿到token，
即可使用token存取資源伺服器上的資源了。

.Net MVC 5預設有提供外部驗證(Google、FB、Microsoft與Twitter等)，
如要使用Github OAuth驗證，NuGet上也有package可直接使用：
裝好package後，打開Startup.Auth.cs，
輸入app.UseGitHubAuthentication("clientID", "clientSecret");
基本上就可使用了。

需啟用https，才可以進行OAuth驗證。

不過在本機使用.Net framework 4.5.2+MVC 5.2.3驗證卻無法登入：
按下外部登入的GitHub按鈕，狀態列顯示瀏覽器在動作，但過了一會，
發現畫面依然停留在登入畫面，WTF??

取得Owin.Security.Providers.GitHub的source code來trace，
發現在發request要token這裡，
出現Exception：「要求已經中止: 無法建立 SSL/TLS 的安全通道」，
(The request was aborted: Could not create SSL/TLS secure channel.)
導致ExternalLoginCallback中loginInfo為null，又回到Login頁面。

那為何出現該Exceptioin? 參考黑大與其他文章，
原來是.Net 4.5預設https的protocol是TLS 1.0，但TLS 1.0因安全性問題，
已被大家捨棄，使用TLS 1.2以上是現行的做法。

解決辦法：
● 因.Net 4.6預設使用TLS 1.2，新專案可直接使用framework 4.6以上，試過ok，直接升級framework試過不行。
● 若是參考source code，可以在handler要token前的request加入：
 System.Net.ServicePointManager.SecurityProtocol = SecurityProtocolTypeExtensions.Tls12;

● 修改registry機碼，將環境改為TLS 1.2，可參考下圖。

參考資料：
https://tools.ietf.org/html/rfc6749#section-1.3.1
https://blog.darkthread.net/blog/disable-tls-1-0-issues
https://support.microsoft.com/en-us/help/3154520/support-for-tls-system-default-versions-included-in-the-net-framework