某工程師的開發日常

在分散式系統架構中，子系統之間應該要遵守低耦合的設計原則，盡可能地減少它們之間的相依性，然而我們要如何才能達到解耦合? 一般來說我們會使用Message Queue 作為分散式系統架構中的一個解耦合手段，簡單說地說一下它的運作方式，一般會有發佈者、接收者這兩種角色，發佈者將Message送到Queue ，接收者可以訂閱Queue，以便接收發佈者所傳送過來的Message，這種設計模式也就是所謂的觀察者模式。 目前市面上已經有很多Message Queue的框架，如ActiveMQ、RabbitMQ和RocketMQ， 而我們今天來簡單的地介紹最知名也最多人使用的RabbitMQ框架，它是由Erlang 語言開發且基於AMQP (Advanced Message Queuing Protocol) ，因此包含訊息、佇列、路由、可靠性、易用性、擴展性、安全性重要特徵，同時RabbitMQ也支援多樣的用戶端程式語言如Python、Ruby、.NET、Java、JavaScript、C、PHP。 現在我們以簡單的程式碼來介紹一下，如何在.NET使用RabbitMQ Client來建立MQ，並且進行發送與收取訊息: 1. 安裝 RabbitMQ.Client 。 2. 建立Queue後，接著綁定路由規則Exchange與RoutingKey 。 ConnectionFactory factory = new ConnectionFactory() { HostName = "localhost" }; using (IConnection connection = factory.CreateConnection()) { using (IModel channel = connection.CreateModel()) { channel.QueueDeclare(queue: "test-queue", durable: false, exclusive: false, autoDelete: false, argume

ASP.Net Core 新手常見問題如下: 1. ASP.Net Core預設使用CamelCase作為命名規則，如何改用PascalCase作為命名規則 ? ※解答:在Startup.cs加入以下設定: public void ConfigureServices(IServiceCollection services) { services.AddMvc().AddJsonOptions(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver()); } 2. 如何回傳JSON時忽略null欄位 ? ※解答:在Startup.cs加入以下設定: public void ConfigureServices(IServiceCollection services) { services.AddMvc().AddJsonOptions(options => { options.SerializerSettings.NullValueHandling = Newtonsoft.Json.NullValueHandling.Ignore; }); } 3. 如何忽略JSON序列化時的循環參考 ? ※解答:在Startup.cs加入以下設定: public void ConfigureServices(IServiceCollection services) { services.AddMvc().AddJsonOptions(options => { options.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore; }); } 4. 如何將ASP.Net Core佈署至IIS ? ※解答: 佈署步驟如下: (1) 安裝.NET Core Windows Server Hosting (2) 新增站台並且將CLR版本改為沒有Managed程式碼 (3) 透過dotnet publish指令將編譯後的dll與dependency放到pu

這次來介紹一個很棒的Table第三方套件 Handsontable ，其功能相當豐富像是編輯、排序、查詢、欄位驗證、匯出Excel等需求通通難不倒Handsontable，甚至可以直接將Excel的表格內容直接貼到Handsontable或者是將Handsontable的表格內容直接貼Excel，並且不會造成跑版和亂碼的問題。此外，前端三大主流框架(React、Angular、Vue)它都支援。 接下來，我們來簡單示範一下如何在Angular使用Handsontable。 1. 首先安裝Handsontable套件。 npm install @handsontable/angular handsontable 2. 在angular.json內匯入相關css。 "styles": [ "node_modules/handsontable/dist/handsontable.full.css", "src/styles.css" ] 3. 匯入Handsontable Module import { HotTableModule } from '@handsontable/angular'; @NgModule({ declarations: [ AppComponent ], imports: [ HotTableModule, ... ] }) export class AppModule { } 4. 使用hot-table元件且並設定settings，其常用屬性如下: colHeaders : 設定欄位的表頭名稱 data : 設定資料 dataSchema : 設定資料結構 columns : 可用於設定欄位的型別(text、autocomplete、dropdown、checkbox、password、date)、呈現方式(renderer)以及資料驗證(validator) ※客製化的呈現方式與資料驗證需要撰寫renderer callback 與validator callback 5. 如果需要對hot-table進行存取或是D

一般來說，表單內有欄位是可以選取多個選項時，我們會採用CheckBox或Multiselect Dropdown，但當選項過多時為了節省版面空間，我們通常會使用Multiselect Dropdown 以下拉勾選的方式來呈現。 目前在Angular幾個知名的元件像是Angular Material和PrimeNG都有Multiselect Dropdown元件可以用，但筆者使用的是Ngx-Bootstrap...很不幸地...它並沒有Multiselect Dropdown元件，所以可能要多花心力自己刻元件或是上網找找看其他符合Bootstrap Style的Multiselect Dropdown元件來用了。當然Ngx-Bootstrap也可以與Angular Material或PrimeNG的元件混用，但在視覺呈現上會顯得突兀並且有些奇怪。 最後很幸運地，筆者在npm找到了一個Multiselect Dropdown元件名為 ng-multiselect-dropdown ，它的Style類似Bootstrap且功能完備(如Filter、Limit Selection等功能)，更重要的是它支持Template Driven Form和Reactive Form，其用法如下所示 : 1. 匯入 NgMultiSelectDropDownModule import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown'; @NgModule({ imports: [ NgMultiSelectDropDownModule.forRoot(), ] }) export class AppModule { } 2. 在Reactive Form使用ng-multiselect-dropdown元件並設定settings，其常用屬性如下: singleSelection: 設定單選或多選 idField: 設定欄位的Id textField: 設定欄位的Text selectAllText: 設定選取所有項目時，所顯示的文字 unSelectAllText: 設定未選取項目時，所顯示的文字 limitSelection: 設定限制選取的

我們都知道Angular Service是Singleton Pattern，但是不幸的事... 我們有時會因為一些需求，希望能夠在多個元件中不要共用同一個Instance，而是在多個元件中使用不同的Instance。 事實上這個問題並不難，其實只需要短短幾行程式碼就可以解決，我們只要使用useClass並配合@Inject去注入Service就可以得到不同的Instance，其範例如下所示。 1. 首先，我們在providers它建立了兩個provider分別是Instance_1和Instance_2。 2. 接著在constructor使用@Inject去注入那兩個provider。 3. 最後你會發現Instance_1和Instance_2會是不同的Instance。 @Component({ selector: 'app-root', providers: [ { provide: 'Instance_1', useClass: StorageService }, { provide: 'Instance_2', useClass: StorageService } ], templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { constructor( @Inject('Instance_1') private Instance_1: StorageService, @Inject('Instance_2') private Instance_2: StorageService) { console.log(this.Instance_1 === this.Instance_2); } }

Google於10/29正式發布reCAPTCHA v3 API，該版本中最大的亮點就是透過分析使用者瀏覽網站的行為，以辨識使用者是否為機器人。換句話說，使用者再也不用一直回答問題和不停地點選圖片，所以說以後再也不用聽到客戶抱怨老是點錯圖片，果然科技始於人性啊~ 另外reCAPTCHA v3 的使用方式也非常簡單，只要短短幾個步驟，就能輕鬆地將reCAPTCHA v3運用在專案中。 1. 首先，至  https://www.google.com/recaptcha/admin  替你的網站註冊一個reCAPTCHA。 2. 註冊後，將會得到Site Key和Secret Key，其中Site Key是給前端使用，而Secret Key則是給後端使用。 3. 在前端HTML head的部分加入reCAPTCHA的api.js。 <script src='https://www.google.com/recaptcha/api.js?render=6Lc5vHgUAAAAAKHxlH0FdDJdA2-8yfzpoMDLIWPc'></script> 4. 接著在body的部分呼叫reCAPTCHA API向Google取得token後，再將token送至後端進行驗證，範例如下: <script> grecaptcha.ready(function () { console.log('1. grecaptcha.ready'); console.log('2. grecaptcha.execute("6Lc5vHgUAAAAAKHxlH0FdDJdA2-8yfzpoMDLIWPc", { action: "@Url.Action("VerifyBot", "Account")" })'); grecaptcha.execute('6Lc5vHgUAAAAAKHxlH0FdDJdA2-8yfzpoMDLIWPc', { action: '@