InputkeyEvent</h1> <article> <h1>InputkeyEvent</h1> <p>Tue, 01 Aug 2023 14:40:21 +0900</p> <h1 id="introduction">Introduction</h1> <p>I always forget how can i listen input event. So I write this post.</p> <h1 id="listening-event">Listening Event</h1> <h2 id="with-out-angular">With out Angular</h2> <p>With out Angular framework we have to use javascript to bind event like this code</p> <div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">id</span><span class="o">=</span><span class="s">"myInput"</span><span class="p">></span> </code></pre></div><div class="highlight"><pre class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'myInput'</span><span class="p">).</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'keyup'</span><span class="p">,</span> <span class="nx">myInput</span><span class="p">);</span> <span class="kd">function</span> <span class="nx">myInput</span><span class="p">(</span><span class="nx">input</span><span class="p">)</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">input</span><span class="p">.</span><span class="nx">keyCode</span><span class="p">);</span> <span class="p">}</span> </code></pre></div><p><a class="link" href="https://developer.mozilla.org/en-US/docs/Web/Events#event_listing" target="_blank" rel="noopener" >EventList</a></p> <p><a class="link" href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode#constants_for_keycode_value" target="_blank" rel="noopener" >KeyCodeRef</a></p> <p><a class="link" href="https://stackblitz.com/edit/web-platform-ucnqqm?file=script.js,index.html" target="_blank" rel="noopener" >SourceCode</a></p> <h2 id="with-angular">With Angular</h2> <p>With Angular framework is more easier to bind event</p> <div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="err">(</span><span class="na">keyup</span><span class="err">.</span><span class="na">enter</span><span class="err">)="</span><span class="na">onEnter</span><span class="err">()"</span><span class="p">></span> </code></pre></div><div class="highlight"><pre class="chroma"><code class="language-javascript" data-lang="javascript"> <span class="nx">onEnter</span><span class="p">()</span><span class="o">:</span> <span class="k">void</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"submit"</span><span class="p">);</span> <span class="p">}</span> </code></pre></div><p><a class="link" href="https://stackblitz.com/edit/stackblitz-starters-hkywok?file=src%2Fmain.ts" target="_blank" rel="noopener" >SourceCode</a></p> <p>you can change another key like <code>shift</code> or anthoer you want</p> </article> <article> <h1>NUnit Test Project Init</h1> <p>Sun, 09 Apr 2023 13:55:48 +0900</p> <h1 id="前言">前言</h1> <p>前面已經有寫了幾篇關於解耦合，抽象行為等等概念的說明了．</p> <p>而建置測試專案雖然已經做了第二次了，但發現兩次我都會忘記怎麼做，因此才特別寫了這篇初始化的文章出來</p> <h1 id="碰到問題">碰到問題</h1> <p>在.NET Core 開發的過程中，都知道有IServiceProvider和IConfiguration這兩個介面可以取得實例或是Config的配置</p> <p>但正常情況下都被框架包好了，根本不用去考慮他怎麼做出來的．</p> <p>但在測試的途中，框架不會知道你是否要使用，因此也不會自動幫你建立一個出來，導致我們需要自己來建立．</p> <h1 id="建立專案">建立專案</h1> <p>由於我現在的開發環境是 Mac OS 因此這裡就只示範 VSCode & .NET CLI</p> <div class="highlight"><pre class="chroma"><code class="language-shell" data-lang="shell">dotnet new nunit -n <span class="o">{</span>ProjectName<span class="o">}</span> </code></pre></div><p>如果是6版本以上的話，會自動建立<strong>using.cs</strong></p> <p>這個是GloableUsing的部分，如果有全域要使用的using的話可以考慮放到這裡</p> <h1 id="nunit的介紹">Nunit的介紹</h1> <p>正常來講在寫整合測試的時候，我們為了減少變因，因此都會做一次初始化以及完畢的行為</p> <p>例如：初始化建立相依的物件(DB,Redis等等相關連線)</p> <p>完畢的時候要刪除測試的資料等等行為</p> <p>而在NUnit中的屬性則叫做Setup(初始) & TearDown(結束)</p> <p>實際上寫出來會長得像這樣</p> <div class="highlight"><pre class="chroma"><code class="language-C#" data-lang="C#"><span class="na"> [SetUp]</span> <span class="k">public</span> <span class="k">void</span> <span class="n">SetUp</span><span class="p">()</span> <span class="p">{</span> <span class="c1">//初始化區塊 </span><span class="c1"></span> <span class="p">}</span> <span class="na"> </span><span class="na"> [TearDown]</span> <span class="k">public</span> <span class="k">void</span> <span class="n">TearDown</span><span class="p">()</span> <span class="p">{</span> <span class="c1">//測試完成後執行的區塊 </span><span class="c1"></span> <span class="p">}</span> </code></pre></div><h1 id="建立iserviceprovider--iconfiguration">建立IServiceProvider & IConfiguration</h1> <p>建立方式其實沒有很困難，實際方式如下</p> <div class="highlight"><pre class="chroma"><code class="language-C#" data-lang="C#"> <span class="k">protected</span> <span class="n">IServiceCollection</span> <span class="n">_services</span><span class="p">;</span> <span class="k">protected</span> <span class="n">IServiceProvider</span> <span class="n">_sp</span><span class="p">;</span> <span class="k">protected</span> <span class="n">IConfiguration</span> <span class="n">_configuration</span><span class="p">;</span> <span class="na"> </span><span class="na"> [SetUp]</span> <span class="k">public</span> <span class="k">void</span> <span class="n">SetUp</span><span class="p">()</span> <span class="p">{</span> <span class="c1">// 先建立新的ServiceCollection </span><span class="c1"></span> <span class="k">this</span><span class="p">.</span><span class="n">_services</span> <span class="p">=</span> <span class="k">new</span> <span class="n">ServiceCollection</span><span class="p">();</span> <span class="c1">// 使用檔案進行Config抓取 </span><span class="c1"></span> <span class="kt">var</span> <span class="n">configuration</span> <span class="p">=</span> <span class="k">new</span> <span class="n">ConfigurationBuilder</span><span class="p">().</span><span class="n">AddJsonFile</span><span class="p">(</span><span class="s">"appsettings.Test.json"</span><span class="p">);</span> <span class="k">this</span><span class="p">.</span><span class="n">_configuration</span> <span class="p">=</span> <span class="n">configuration</span><span class="p">.</span><span class="n">Build</span><span class="p">();</span> <span class="c1">//add MongoDB </span><span class="c1"></span> <span class="kt">var</span> <span class="n">appSettingsSection_MongoDB</span> <span class="p">=</span> <span class="n">_configuration</span><span class="p">.</span><span class="n">GetSection</span><span class="p">(</span><span class="s">"MongoDbConfig"</span><span class="p">);</span> <span class="kt">var</span> <span class="n">appSettingsMongoDB</span> <span class="p">=</span> <span class="n">appSettingsSection_MongoDB</span><span class="p">.</span><span class="n">Get</span><span class="p"><</span><span class="n">DbConfig</span><span class="p">>();</span> <span class="k">this</span><span class="p">.</span><span class="n">_services</span><span class="p">.</span><span class="n">AddScoped</span><span class="p"><</span><span class="n">IMongoStorage</span><span class="p">>(</span><span class="n">sp</span> <span class="p">=></span> <span class="p">{</span> <span class="k">return</span> <span class="k">new</span> <span class="n">MongoStorage</span><span class="p">(</span><span class="n">appSettingsMongoDB</span><span class="p">);</span> <span class="p">});</span> <span class="k">this</span><span class="p">.</span><span class="n">_services</span><span class="p">.</span><span class="n">AddSingleton</span><span class="p"><</span><span class="n">IMongoFileStorage</span><span class="p">>(</span><span class="n">sp</span> <span class="p">=></span> <span class="p">{</span> <span class="k">return</span> <span class="k">new</span> <span class="n">MongoFileStorage</span><span class="p">(</span><span class="n">appSettingsMongoDB</span><span class="p">);</span> <span class="p">});</span> <span class="c1">// 創建出ServiceProvider </span><span class="c1"></span> <span class="k">this</span><span class="p">.</span><span class="n">_sp</span> <span class="p">=</span> <span class="n">_services</span><span class="p">.</span><span class="n">BuildServiceProvider</span><span class="p">();</span> <span class="p">}</span> <span class="na"> </span><span class="na"> [TearDown]</span> <span class="k">public</span> <span class="k">void</span> <span class="n">TearDown</span><span class="p">()</span> <span class="p">{</span> <span class="n">IMongoStorage</span> <span class="n">db</span> <span class="p">=</span> <span class="k">this</span><span class="p">.</span><span class="n">_sp</span><span class="p">.</span><span class="n">GetRequiredService</span><span class="p"><</span><span class="n">IMongoStorage</span><span class="p">>();</span> <span class="n">Assert</span><span class="p">.</span><span class="n">AreEqual</span><span class="p">(</span><span class="s">"TestDB"</span><span class="p">,</span><span class="n">db</span><span class="p">.</span><span class="n">GetDB</span><span class="p">().</span><span class="n">DatabaseNamespace</span><span class="p">.</span><span class="n">DatabaseName</span><span class="p">,</span> <span class="s">"DB Name must be TestDB"</span><span class="p">);</span> <span class="n">BsonDocument</span> <span class="n">empty</span> <span class="p">=</span> <span class="k">new</span> <span class="n">BsonDocument</span><span class="p">();</span> <span class="n">DeleteResult</span> <span class="n">deleteResult</span><span class="p">;</span> <span class="n">deleteResult</span> <span class="p">=</span> <span class="n">db</span><span class="p">.</span><span class="n">GetCollection</span><span class="p"><</span><span class="n">UserInfo</span><span class="p">>(</span><span class="s">"UserInfo"</span><span class="p">).</span><span class="n">DeleteMany</span><span class="p">(</span><span class="n">empty</span><span class="p">);</span> <span class="p">}</span> <span class="p">}</span> </code></pre></div><p>當中比較需要特別注意的是 <strong>appsettings.Test.json</strong> 會需要在csproj裡面特別說明要輸出到輸出目錄，否則會抓不到Config導致報錯</p> <div class="highlight"><pre class="chroma"><code class="language-xml" data-lang="xml"> <span class="nt"><ItemGroup></span> <span class="nt"><None</span> <span class="na">Update=</span><span class="s">"appsettings.Test.json"</span><span class="nt">></span> <span class="nt"><CopyToOutputDirectory></span>Always<span class="nt"></CopyToOutputDirectory></span> <span class="nt"></None></span> <span class="nt"></ItemGroup></span> </code></pre></div><p>而因為這些比較算是每個測試都會使用的Init 所以其實可以抽成一個BasicTestClass 後續有相關測試的Class可以直接繼承使用，就不用每個Class都寫一次了．</p> <h1 id="總結">總結</h1> <p>測試其實不難，真正難的會是在開發過程中的設計，如何設計商業邏輯以及低耦合才是最困難的點．</p> </article> <article> <h1>Dependency Injection 與工廠模式的結合(2)</h1> <p>Thu, 06 Apr 2023 12:48:19 +0900</p> <h1 id="前言">前言</h1> <p>前面一篇提到了 DI 的概念，透過 DI 的方式來實現解耦合，而這篇則是要來講 DI 的一些進階應用了</p> <h1 id="工廠模式">工廠模式</h1> <p>先說明工廠模式的運作方式，直接看Code比較快</p> <p><a class="link" href="https://en.wikipedia.org/wiki/Factory_method_pattern" target="_blank" rel="noopener" >資料來源</a></p> <div class="highlight"><pre class="chroma"><code class="language-C#" data-lang="C#"><span class="c1">// Empty vocabulary of actual object </span><span class="c1"></span><span class="k">public</span> <span class="k">interface</span> <span class="n">IPerson</span> <span class="p">{</span> <span class="kt">string</span> <span class="n">GetName</span><span class="p">();</span> <span class="p">}</span> <span class="k">public</span> <span class="k">class</span> <span class="nc">Villager</span> <span class="p">:</span> <span class="n">IPerson</span> <span class="p">{</span> <span class="k">public</span> <span class="kt">string</span> <span class="n">GetName</span><span class="p">()</span> <span class="p">{</span> <span class="k">return</span> <span class="s">"Village Person"</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> <span class="k">public</span> <span class="k">class</span> <span class="nc">CityPerson</span> <span class="p">:</span> <span class="n">IPerson</span> <span class="p">{</span> <span class="k">public</span> <span class="kt">string</span> <span class="n">GetName</span><span class="p">()</span> <span class="p">{</span> <span class="k">return</span> <span class="s">"City Person"</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> <span class="k">public</span> <span class="k">enum</span> <span class="n">PersonType</span> <span class="p">{</span> <span class="n">Rural</span><span class="p">,</span> <span class="n">Urban</span> <span class="p">}</span> <span class="c1">/// <summary> </span><span class="c1">/// Implementation of Factory - Used to create objects. </span><span class="c1">/// </summary> </span><span class="c1"></span><span class="k">public</span> <span class="k">class</span> <span class="nc">Factory</span> <span class="p">{</span> <span class="k">public</span> <span class="n">IPerson</span> <span class="n">GetPerson</span><span class="p">(</span><span class="n">PersonType</span> <span class="n">type</span><span class="p">)</span> <span class="p">{</span> <span class="k">switch</span> <span class="p">(</span><span class="n">type</span><span class="p">)</span> <span class="p">{</span> <span class="k">case</span> <span class="n">PersonType</span><span class="p">.</span><span class="n">Rural</span><span class="p">:</span> <span class="k">return</span> <span class="k">new</span> <span class="n">Villager</span><span class="p">();</span> <span class="k">case</span> <span class="n">PersonType</span><span class="p">.</span><span class="n">Urban</span><span class="p">:</span> <span class="k">return</span> <span class="k">new</span> <span class="n">CityPerson</span><span class="p">();</span> <span class="k">default</span><span class="p">:</span> <span class="k">throw</span> <span class="k">new</span> <span class="n">NotSupportedException</span><span class="p">();</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> </code></pre></div><p>這個案例裡面有兩個角色，分別是</p> <ul> <li>Rural</li> <li>Urban</li> </ul> <p>而我只要告訴工廠，現在是哪種人，工廠就會建立相對應的實例會來給我．</p> <p>而我也不用關心他的細節是什麼，只要關心他有提供什麼方法即可(Interface)</p> <blockquote> <p>封裝的概念：隱藏細節，注重提供什麼</p> </blockquote> <h1 id="di工廠">DI工廠</h1> <p>其實就只是將工廠做成Interface 放進 DIPool中</p> <h2 id="personmodel">PersonModel</h2> <div class="highlight"><pre class="chroma"><code class="language-C#" data-lang="C#"><span class="k">namespace</span> <span class="nn">DelegateFactory.Model</span> <span class="p">{</span> <span class="k">public</span> <span class="k">interface</span> <span class="n">IPerson</span> <span class="p">{</span> <span class="kt">string</span> <span class="n">GetName</span><span class="p">();</span> <span class="p">}</span> <span class="k">public</span> <span class="k">class</span> <span class="nc">Villager</span> <span class="p">:</span> <span class="n">IPerson</span> <span class="p">{</span> <span class="k">public</span> <span class="kt">string</span> <span class="n">GetName</span><span class="p">()</span> <span class="p">{</span> <span class="k">return</span> <span class="s">"Village Person"</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> <span class="k">public</span> <span class="k">class</span> <span class="nc">CityPerson</span> <span class="p">:</span> <span class="n">IPerson</span> <span class="p">{</span> <span class="k">public</span> <span class="kt">string</span> <span class="n">GetName</span><span class="p">()</span> <span class="p">{</span> <span class="k">return</span> <span class="s">"City Person"</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> <span class="k">public</span> <span class="k">enum</span> <span class="n">PersonType</span> <span class="p">{</span> <span class="n">Rural</span><span class="p">,</span> <span class="n">Urban</span> <span class="p">}</span> <span class="p">}</span> </code></pre></div><h2 id="factoryclass">FactoryClass</h2> <div class="highlight"><pre class="chroma"><code class="language-C#" data-lang="C#"><span class="k">namespace</span> <span class="nn">DelegateFactory.Factory</span> <span class="p">{</span> <span class="k">public</span> <span class="k">interface</span> <span class="n">IFactory</span> <span class="p">{</span> <span class="n">IPerson</span> <span class="n">GetPerson</span><span class="p">(</span><span class="n">PersonType</span> <span class="n">type</span><span class="p">);</span> <span class="p">}</span> <span class="k">public</span> <span class="k">class</span> <span class="nc">PersonFactory</span> <span class="p">:</span> <span class="n">IFactory</span> <span class="p">{</span> <span class="k">public</span> <span class="n">IPerson</span> <span class="n">GetPerson</span><span class="p">(</span><span class="n">PersonType</span> <span class="n">type</span><span class="p">)</span> <span class="p">{</span> <span class="k">switch</span> <span class="p">(</span><span class="n">type</span><span class="p">)</span> <span class="p">{</span> <span class="k">case</span> <span class="n">PersonType</span><span class="p">.</span><span class="n">Rural</span><span class="p">:</span> <span class="k">return</span> <span class="k">new</span> <span class="n">Villager</span><span class="p">();</span> <span class="k">case</span> <span class="n">PersonType</span><span class="p">.</span><span class="n">Urban</span><span class="p">:</span> <span class="k">return</span> <span class="k">new</span> <span class="n">CityPerson</span><span class="p">();</span> <span class="k">default</span><span class="p">:</span> <span class="k">throw</span> <span class="k">new</span> <span class="n">NotSupportedException</span><span class="p">();</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> </code></pre></div><h2 id="controller">Controller</h2> <div class="highlight"><pre class="chroma"><code class="language-C#" data-lang="C#"><span class="k">namespace</span> <span class="nn">DelegateFactory.Controllers</span><span class="p">;</span> <span class="na"> </span><span class="na">[ApiController]</span> <span class="na">[Route("[controller]</span><span class="s">")] </span><span class="s"></span><span class="k">public</span> <span class="k">class</span> <span class="nc">WeatherForecastController</span> <span class="p">:</span> <span class="n">ControllerBase</span> <span class="p">{</span> <span class="k">private</span> <span class="k">readonly</span> <span class="n">ILogger</span><span class="p"><</span><span class="n">WeatherForecastController</span><span class="p">></span> <span class="n">_logger</span><span class="p">;</span> <span class="k">private</span> <span class="k">readonly</span> <span class="n">IFactory</span> <span class="n">_factory</span><span class="p">;</span> <span class="k">public</span> <span class="n">WeatherForecastController</span><span class="p">(</span><span class="n">ILogger</span><span class="p"><</span><span class="n">WeatherForecastController</span><span class="p">></span> <span class="n">logger</span><span class="p">,</span> <span class="n">IFactory</span> <span class="n">factory</span><span class="p">)</span> <span class="p">{</span> <span class="n">_logger</span> <span class="p">=</span> <span class="n">logger</span><span class="p">;</span> <span class="n">_factory</span> <span class="p">=</span> <span class="n">factory</span><span class="p">;</span> <span class="p">}</span> <span class="na"> </span><span class="na"> [HttpGet("name/{role}")]</span> <span class="k">public</span> <span class="n">ActionResult</span><span class="p"><</span><span class="kt">string</span><span class="p">></span> <span class="n">GetName</span><span class="p">(</span><span class="kt">string</span> <span class="n">role</span><span class="p">)</span> <span class="p">{</span> <span class="kt">bool</span> <span class="n">isEnumRole</span> <span class="p">=</span><span class="n">Enum</span><span class="p">.</span><span class="n">TryParse</span><span class="p">(</span><span class="n">role</span><span class="p">,</span><span class="k">out</span> <span class="n">PersonType</span> <span class="n">personType</span><span class="p">);</span> <span class="k">if</span><span class="p">(</span><span class="n">isEnumRole</span><span class="p">){</span> <span class="kt">string</span> <span class="n">name</span> <span class="p">=</span> <span class="k">this</span><span class="p">.</span><span class="n">_factory</span><span class="p">.</span><span class="n">GetPerson</span><span class="p">(</span><span class="n">personType</span><span class="p">).</span><span class="n">GetName</span><span class="p">();</span> <span class="k">return</span> <span class="n">Ok</span><span class="p">(</span><span class="n">name</span><span class="p">);</span> <span class="p">}</span><span class="k">else</span><span class="p">{</span> <span class="k">return</span> <span class="n">BadRequest</span><span class="p">(</span><span class="s">"Unknow Role"</span><span class="p">);</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> </code></pre></div><p>這樣起起來就有一個很基本的工廠模式，透過傳進來的 Role 來決定實際上拿到哪個實例並回傳</p> <h1 id="結論">結論</h1> <p>透過這樣的方式可以大幅的增加擴充的彈性，但相對的因為抽象，也會導致使用上會變有些不方便，例如:Debug，Code Review 等會變成有些困難</p> <p>因此是否要採用這種方式還需要特別根據團隊能力或商務邏輯來決定是否要採用</p> <h1 id="sample-code">Sample Code</h1> <p><a class="link" href="Github" >https://github.com/tonny0531/DIFactory</a></p> </article> <article> <h1>Dependency Injection 與工廠模式的結合(1)</h1> <p>Wed, 15 Feb 2023 12:35:19 +0800</p> <h1 id="dependency-injection-簡介">Dependency Injection 簡介</h1> <p>Dependency Injection 是一種物件改變耦合的一種設計概念，通常會跟 IOC(Inversion Of Control) 一起談</p> <p>以下一個簡單的注入範例</p> <h2 id="範例">範例</h2> <h3 id="故事">故事</h3> <p>父母今天要教育小孩科目，但一對父母並不是只會擁有一個小孩，可能會有多個。因此我們把小孩當作參數傳給教育小孩這個方法，使其變得有彈性。</p> <p>方法中注入小孩其實就是 <code>方法注入(Method Injection)</code></p> <p>創建小孩的過程會注入一個姓名，這種注入方式就是 <code>建構式注入(Constructor Injection)</code></p> <p>透過物件設定值的方式，就是 <code>屬性注入(Property Injection)</code></p> <h3 id="struct">Struct</h3> <div class="highlight"><pre class="chroma"><code class="language-C#" data-lang="C#"><span class="k">public</span> <span class="k">interface</span> <span class="n">IParent</span> <span class="p">{</span> <span class="k">void</span> <span class="n">TeachChild</span> <span class="p">(</span><span class="n">IClild</span> <span class="n">child</span><span class="p">,</span> <span class="n">Subject</span> <span class="kt">string</span><span class="p">);</span> <span class="p">}</span> <span class="k">public</span> <span class="k">class</span> <span class="nc">Parent</span><span class="p">:</span> <span class="n">IParent</span> <span class="p">{</span> <span class="k">public</span> <span class="n">Parent</span> <span class="p">()</span> <span class="p">{</span> <span class="p">}</span> <span class="k">public</span> <span class="k">void</span> <span class="n">TeachChild</span> <span class="p">(</span><span class="n">IClild</span> <span class="n">child</span><span class="p">,</span> <span class="kt">string</span> <span class="n">subject</span> <span class="p">)</span> <span class="p">{</span> <span class="n">Console</span><span class="p">.</span><span class="n">WriteLine</span><span class="p">(</span><span class="s">$"Teach {child.GetName} about ${subject}"</span><span class="p">)</span> <span class="p">}</span> <span class="p">}</span> <span class="k">public</span> <span class="k">interface</span> <span class="n">IChild</span> <span class="p">{</span> <span class="kt">string</span> <span class="n">GetName</span> <span class="p">();</span> <span class="k">void</span> <span class="n">SetAge</span><span class="p">(</span><span class="kt">int</span> <span class="n">age</span><span class="p">);</span> <span class="p">}</span> <span class="k">public</span> <span class="k">class</span> <span class="nc">Child</span> <span class="p">{</span> <span class="k">private</span> <span class="kt">string</span> <span class="n">_childName</span><span class="p">;</span> <span class="k">private</span> <span class="kt">int</span> <span class="n">_age</span><span class="p">;</span> <span class="k">public</span> <span class="n">Child</span> <span class="p">(</span><span class="kt">string</span> <span class="n">name</span><span class="p">)</span> <span class="p">{</span> <span class="k">this</span><span class="p">.</span><span class="n">_childName</span> <span class="p">=</span> <span class="n">name</span><span class="p">;</span> <span class="p">}</span> <span class="k">public</span> <span class="kt">string</span> <span class="n">GetName</span><span class="p">()</span> <span class="p">{</span> <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="n">_childName</span><span class="p">;</span> <span class="p">}</span> <span class="k">public</span> <span class="k">void</span> <span class="n">SetAge</span><span class="p">(</span><span class="kt">int</span> <span class="n">age</span><span class="p">)</span> <span class="p">{</span> <span class="k">this</span><span class="p">.</span><span class="n">_age</span> <span class="p">=</span> <span class="n">age</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> </code></pre></div><h2 id="net-的特別之處">.NET 的特別之處</h2> <p>當我們知道 DI 之後，就要來細講 NET 的 DI 概念了</p> <p>在 NET 的架構下，會建議改用框架預設的 IServiceCollection(IServiceProvider)</p> <p>來取代手動 DI ，而透過 IServiceProvider 取出來的物件</p> <p>概念如下圖</p> <p><figure class="gallery-image" style=" flex-grow: 119; flex-basis: 287px" > <a href="https://tonny0531.github.io/post/dotnet/di/agenda/NET_DI.png" data-size="328x274"> </a> <figcaption>NETDI</figcaption> </figure></p> <p>先將所有的 Service 註冊到資料提供中心，如果有其他物件需要就在從資料提供中心中取出來</p> <p>這樣的好處是 Service 跟其他物件的耦合性，會變成是跟資料提供中心耦合（詳細概念可參考前篇的<a class="link" href="https://tonny0531.github.io/post/developer/abstract_interface/" >AbstractClass比較Interface </a>)</p> <p>而在 Service 註冊的時候，會有三種特性，這三種特性會改變資料提供中心對外的時候，是否要產生新的物件(生命週期）給需求者，分別是</p> <ul> <li>Singleton：在 APP 的生命週期中，只會存在一個實例，因此每次取回都是相同的記憶體位置</li> <li>Scoped：在一個 Requeset 的過程中僅在第一次建立新的實例，第二次開始會取得與第一次同樣的實例</li> <li>Transient：每次要都取回一個新的實例</li> </ul> <h2 id="結語">結語</h2> <p>透過 DI 的方式可以解決物件之間高耦合的問題，以利未來要做調整或抽象會更加簡單，而下一篇再來說明怎麼透過原生的 DI Pull 達成工廠模式</p> <h2 id="參考資料">參考資料</h2> <p><a class="link" href="https://learn.microsoft.com/en-us/aspnet/core/fundamentals/dependency-injection?view=aspnetcore-7.0" target="_blank" rel="noopener" >NETDI</a></p> </article> <article> <h1>Docker Image Certificate 信任問題</h1> <p>Wed, 08 Feb 2023 11:31:27 +0800</p> <h1 id="前言">前言</h1> <p>繼上一篇做了 Kestrel Port 的大概說明後，後來又發生了一個狀況</p> <p>因那個 App 會呼叫公司內部的 API 而公司內的API採用了 Https 引發了憑證不信任的問題</p> <p>以下有兩種避免的作法</p> <ol> <li>HttpClient 注入 HttpClientHandler</li> </ol> <pre><code>services.AddHttpClient<JY_COG_FactoryWorkClient>().ConfigurePrimaryHttpMessageHandler(sp => { return sp.GetRequiredService<SSLClientHandler>(); }); public class SSLClientHandler : HttpClientHandler { public SSLClientHandler() { ServerCertificateCustomValidationCallback = HttpClientHandler.DangerousAcceptAnyServerCertificateValidator; } } </code></pre><ol start="2"> <li>在 Docker Image 下新增信任憑證</li> </ol> <blockquote> <p>目前看起來 Dotnet Core Image Kernel 是使用 Ubuntu <a class="link" href="https://ubuntu.com/server/docs/security-trust-store" target="_blank" rel="noopener" >參考Ubuntu官網</a></p> </blockquote> <pre><code>$ sudo apt-get install -y ca-certificates #預設已經有了 $ sudocp local-ca.crt /usr/local/share/ca-certificates #複製自己的憑證進去 $ sudo update-ca-certificates # 系統更新憑證 </code></pre><p>而因為我偷懶不想要每次匯，因此就寫在 DockerFile 中</p> <pre><code>FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS base WORKDIR /app FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build WORKDIR /src COPY . . RUN dotnet restore "./{ProjectName}.csproj" RUN dotnet build "{ProjectName}.csproj" -c Release -o /app/build FROM build AS publish RUN dotnet publish "{ProjectName}.csproj" -c Release -o /app/publish FROM base AS final WORKDIR /app COPY --from=publish /app/publish . #複製編譯完成結果 COPY root04.crt /usr/local/share/ca-certificates #複製憑證 RUN update-ca-certificates #更新憑證 ENTRYPOINT ["dotnet", "{ProjectName}.dll"] </code></pre><p>只是因為剛好這個 Image 算好找憑證匯入方式，若是其他Linux版本更新就要找個版本的更新方式了</p> </article> <article> <h1>Kestrel監聽Port的設定方式</h1> <p>Wed, 08 Feb 2023 10:02:24 +0800</p> <h1 id="前言">前言</h1> <p>.NET 會紅的一部份很大原因是因為終於實現了跨平台</p> <p>而原先相依於 IIS 的 HttpServer 也因為跨平台而改採用較小的 Kestrel</p> <blockquote> <p>也是可以託管給IIS: <a class="link" href="https://learn.microsoft.com/zh-tw/aspnet/core/host-and-deploy/iis/out-of-process-hosting?view=aspnetcore-7.0" target="_blank" rel="noopener" >詳細參考</a></p> </blockquote> <p>而會寫這篇最大的原因還是因為，使用了微軟官方的 DockerImage 進行包裝後，發現都還是 Kestrel 都只會吃到 80 Port</p> <p><figure class="gallery-image" style=" flex-grow: 492; flex-basis: 1182px" > <a href="https://tonny0531.github.io/post/dotnet/kestrel_config/defaultListen.png" data-size="990x201"> </a> <figcaption>DefaultListen80</figcaption> </figure></p> <p>而網路上爬了一些文，後來找到<a class="link" href="https://github.com/dotnet/AspNetCore.Docs/blob/main/aspnetcore/fundamentals/servers/kestrel.md#configureiconfiguration" target="_blank" rel="noopener" >官方說明</a>綁定的以下幾種方式</p> <ol> <li>No configuration</li> </ol> <ul> <li>預設為 <code>http:localhost:5000</code> & <code>https:localhost:5001</code></li> </ul> <ol start="2"> <li>使用系統環境變數</li> </ol> <ul> <li>使用<code>ASPNETCORE_URLS</code> 來決定使用的Port</li> </ul> <blockquote> <p>Docker 設定的預設為80，導致此次會發生此問題</p> </blockquote> <ol start="3"> <li>使用參數來決定</li> </ol> <ul> <li>使用 <code>dotnet XXX.dll --urls http://+:1234</code></li> </ul> <ol start="4"> <li>寫死在程式碼中(不推薦)</li> </ol> <pre><code>webBuilder.UseKestrel((context, serverOptions) => { serverOptions.Configure(context.Configuration.GetSection("Kestrel")) .Endpoint("HTTPS", listenOptions => { listenOptions.HttpsOptions.SslProtocols = SslProtocols.Tls12; }); }); </code></pre><ol start="5"> <li>透過 Appsetting.json 來設定(推薦) <figure class="gallery-image" style=" flex-grow: 212; flex-basis: 511px" > <a href="https://tonny0531.github.io/post/dotnet/kestrel_config/Appsettings.png" data-size="560x263"> </a> <figcaption>Appsettings</figcaption> </figure></li> </ol> <p>設定完成後包起來就會發現已經吃到 Config 了 <figure class="gallery-image" style=" flex-grow: 686; flex-basis: 1646px" > <a href="https://tonny0531.github.io/post/dotnet/kestrel_config/StartSuccess.png" data-size="789x115"> </a> <figcaption>Success</figcaption> </figure></p> </article> <article> <h1>KeyValuePipe使用細節</h1> <p>Mon, 15 Aug 2022 09:23:48 +0800</p> <h1 id="前言">前言</h1> <p>Angular 提供了相當於 Object.keys 的 Pipe 給大家使用，但有個細節卻常常被忽略</p> <p>就是排序的行為，在官方預設會進行排序</p> <h1 id="舉例">舉例</h1> <p>預期的資料如下</p> <ul> <li>創建中</li> <li>取消或未過審</li> <li>募資中</li> <li>募資成功</li> <li>募資失敗</li> </ul> <p>在開發的過程中想像應該也會是一樣的顯示才對</p> <p>但實質上會變成</p> <ul> <li>創建中</li> <li><code>募資失敗</code></li> <li>募資中</li> <li>募資成功</li> <li><code>取消或未過審</code></li> </ul> <p>可以看到其中兩筆順序已被對調</p> <p>回頭去看官方的 Pipe 的用法說明</p> <pre><code> {{ input_expression | keyvalue [ : compareFn ] }} </code></pre><p>後方會有 compareFn 可以注入而固定回傳 0 就會變成原始資料了</p> <p><a class="link" href="https://stackblitz.com/edit/angular-ivy-jusse6?file=src%2Fapp%2Fapp.component.ts" target="_blank" rel="noopener" >SampleCode</a></p> <h1 id="參考資料">參考資料</h1> <ul> <li><a class="link" href="https://stackoverflow.com/questions/52793944/angular-keyvalue-pipe-sort-properties-iterate-in-order" target="_blank" rel="noopener" >angular keyvalue pipe sort properties / iterate in order</a></li> <li><a class="link" href="https://angular.io/api/common/KeyValuePipe" target="_blank" rel="noopener" >KevValuePipe</a></li> </ul> </article> <article> <h1>AbstractClass比較Interface</h1> <p>Fri, 25 Mar 2022 15:59:54 +0800</p> <h1 id="前言">前言</h1> <p>最近在看同事們在分享 OOP(Object-oriented programming) 的觀念，在過程中他特別提到了<strong>抽象</strong></p> <p>也是我今天寫這篇的原因，在過程中我假設了一種情境來討論物件應該怎麼切分比較好</p> <p>這裡要說明，這個討論的過程中的程式語言是以 Dotnet 來說明的，因此有些地方並不一定是用在每種語言上</p> <h1 id="專有名詞">專有名詞</h1> <h2 id="耦合coupling">耦合(Coupling)</h2> <p>在我的認知裡面，耦合是指物件跟物件之間的關係，若高耦合的話，很高機會改了其中一個物件</p> <p>導致另外一個物件故障</p> <blockquote> <p>也就是業界常說的改 A 壞 B</p> </blockquote> <h2 id="抽象類別abstract-class">抽象類別(Abstract Class)</h2> <h3 id="特性">特性</h3> <ul> <li>不可以直接透過 New 來建立物件</li> <li>可以訂定抽象方法，強迫繼承的物件去實驗方法</li> <li>可以寫共用方法的邏輯在抽象類別層</li> </ul> <h2 id="介面interface">介面(Interface)</h2> <h3 id="特性-1">特性</h3> <ul> <li>不可以實作，僅僅只是是規範而已</li> <li>繼承的Class必須要實現規範才可當作成此介面</li> </ul> <blockquote> <p>C#9.0打破了這個特性，但我不太能接受就是了</p> </blockquote> <h1 id="情境">情境</h1> <p>有一個班級，裡面有學生和老師</p> <p>我們要定義出班級裡面的學生和老師</p> <p>學生和老師都有開始工作(上課)、結束工作(下課)</p> <p>並且由班級來決定是否開始工作(上課)</p> <h1 id="物件切分">物件切分</h1> <p>依據情境來看，我們可以切出有三個主要物件</p> <ul> <li>班級</li> <li>學生</li> <li>老師</li> </ul> <p><figure > <a href="http://www.plantuml.com/plantuml/png/SoWkIImgAStDuKhEIImkLd06aLpLNDeGLhnJQdfcdeQcDLp0DIy5nAs5gWykAKr9pIi1wmZFByg6Qu3oqTM7f2OcPwGM4Q6UonciGS56LnTk2q88Rf13QbuAqFa0" > </a> <figcaption>物件圖開始</figcaption> </figure></p> <p>由上方可見班級對老師、學生來說是耦合的，很高機會改動了學生這個物件，會連帶影響到班級</p> <p>最後面再來解決物件耦合的問題</p> <h1 id="第一次抽象">第一次抽象</h1> <p>基於老師與學生都是人的情況下，我們可以抽出一個抽象類別叫做 <strong>People</strong></p> <p>並在 People 裡面定義開始工作與結束工作的抽象方法，待繼承的人實作</p> <p><figure > <a href="http://www.plantuml.com/plantuml/png/SoWkIImgAStDuKhEIImkLd06aLpLNDeGLhnJQdfcdeOcdE-QbmBarN8b9XMN52KcboW4fEONvAI2TS35mlEBic4wqSLX9a3j2oufJKdDAr58hIX9pKifHZ8EpHHicaDI4vCpKej8rSpb3DQjOAEh2zFY0DGF30G0" > </a> <figcaption>第一次抽象</figcaption> </figure></p> <h2 id="好處">好處</h2> <p>若未來有共用的方法要實作我只要修改 People 即可</p> <h2 id="壞處">壞處</h2> <p>根據前面的類別圖可以看到 People 和 Class 仍是高耦合的情況</p> <blockquote> <p>People、Student、Teacher 本身就是同類，因此不算是耦合</p> </blockquote> <h1 id="第二次抽象解耦合">第二次抽象(解耦合)</h1> <p>這邊解耦合的方法會採用 Interface 的方式來進行解耦合</p> <p><figure > <a href="http://www.plantuml.com/plantuml/png/bP2n2i9038RtUugCIkaRE1IBkw3WAF4QjTXU9Kb14D_TzAed5XUNaF_8zrr88OgiVTiutw08b4DrTvUDtNv9fphCvYclGcNfuLmTbFY8dc3NyONOcA59G0nf6W-YZ5vXJTsr8QXRgoq5bG-UGPhwCatUatHSUADzPHwWcrAevFL1r4qiF-0jeJyJ_mkxCjAmoFFt-eNnTiKd" > </a> <figcaption>第二次抽象</figcaption> </figure></p> <p>Class 與 People 的相依變成了一個抽象的 Interface ，後續不管 People 底下的類別怎麼變更，只要符合 Worker 的規範，就都不會影響到 Class 導致編譯錯誤而綁手綁腳的</p> <p>而若要做測試，也可以在 Woker 那層建立一個 FakeWoker 就可以透過注入的方式來實現 Mock、Stub 了</p> <h1 id="結語">結語</h1> <p>透過上述的抽象，可以很明顯看出 Interface 才是可以真正拿出來解耦合的</p> <p>只要下面實作的類別抽換了，仍然可以工作，反而抽象類別是無法進行抽換的。</p> </article> <article> <h1>MongoDb Lookup 使用紀錄</h1> <p>Fri, 18 Mar 2022 15:54:51 +0800</p> <h1 id="主旨">主旨</h1> <p>最近幾天工作上都在使用 MongoDB，但常常忘記一些指令的格式</p> <p>因此特別紀錄一下，並說明一下怎麼使用</p> <h1 id="lookup">Lookup</h1> <p>在 MongoDB 初期並沒有所謂的 Join</p> <p>只有單純的 Collection Search</p> <p>但由於單一文本最大限制 16MB 的存在 And 物件管理上的設計</p> <p>而衍伸出了 Lookup 這個 Operator</p> <p><strong>可以理解成他就是 Sql 的 Join</strong></p> <pre><code>{ $lookup: { from: <foreign collection>, localField: <field from local collection's documents>, foreignField: <field from foreign collection's documents>, let: { <var_1>: <expression>, …, <var_n>: <expression> }, pipeline: [ <pipeline to run> ], as: <output array field> } } </code></pre><ul> <li>from: 關聯到哪個Collection</li> <li>localField: 當前Collection的欄位名稱</li> <li>foreignField: 關聯到Collection的欄位名稱</li> <li>let: 相當於 Sql 的要甚麼欄位並且命名</li> <li>pipeline: 可以在關聯到的資料庫多做一次Pipline Ex: $match、$gt(e)….</li> <li>as: 查詢出來的新欄位名稱</li> </ul> <div class="highlight"><pre class="chroma"><code class="language-sql" data-lang="sql"><span class="k">select</span> <span class="o"><</span><span class="n">let</span><span class="o">></span> <span class="k">as</span> <span class="k">where</span> <span class="p">[</span><span class="n">currentCollection</span><span class="p">]</span> <span class="n">a</span> <span class="p">,</span> <span class="o"><</span><span class="k">from</span><span class="o">></span> <span class="n">b</span> <span class="n">a</span><span class="p">.</span><span class="n">localField</span> <span class="o">=</span> <span class="n">b</span><span class="p">.</span><span class="n">foreignField</span> </code></pre></div><h1 id="實際例子">實際例子</h1> <h2 id="orders">Orders</h2> <div class="highlight"><pre class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">db</span><span class="p">.</span><span class="nx">orders</span><span class="p">.</span><span class="nx">insertMany</span><span class="p">(</span> <span class="p">[</span> <span class="p">{</span> <span class="s2">"_id"</span> <span class="o">:</span> <span class="mi">1</span><span class="p">,</span> <span class="s2">"item"</span> <span class="o">:</span> <span class="s2">"almonds"</span><span class="p">,</span> <span class="s2">"price"</span> <span class="o">:</span> <span class="mi">12</span><span class="p">,</span> <span class="s2">"quantity"</span> <span class="o">:</span> <span class="mi">2</span> <span class="p">},</span> <span class="p">{</span> <span class="s2">"_id"</span> <span class="o">:</span> <span class="mi">2</span><span class="p">,</span> <span class="s2">"item"</span> <span class="o">:</span> <span class="s2">"pecans"</span><span class="p">,</span> <span class="s2">"price"</span> <span class="o">:</span> <span class="mi">20</span><span class="p">,</span> <span class="s2">"quantity"</span> <span class="o">:</span> <span class="mi">1</span> <span class="p">},</span> <span class="p">{</span> <span class="s2">"_id"</span> <span class="o">:</span> <span class="mi">3</span> <span class="p">}</span> <span class="p">]</span> <span class="p">)</span> </code></pre></div><h2 id="inventory">inventory</h2> <div class="highlight"><pre class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">db</span><span class="p">.</span><span class="nx">inventory</span><span class="p">.</span><span class="nx">insertMany</span><span class="p">(</span> <span class="p">[</span> <span class="p">{</span> <span class="s2">"_id"</span> <span class="o">:</span> <span class="mi">1</span><span class="p">,</span> <span class="s2">"sku"</span> <span class="o">:</span> <span class="s2">"almonds"</span><span class="p">,</span> <span class="s2">"description"</span><span class="o">:</span> <span class="s2">"product 1"</span><span class="p">,</span> <span class="s2">"instock"</span> <span class="o">:</span> <span class="mi">120</span> <span class="p">},</span> <span class="p">{</span> <span class="s2">"_id"</span> <span class="o">:</span> <span class="mi">2</span><span class="p">,</span> <span class="s2">"sku"</span> <span class="o">:</span> <span class="s2">"bread"</span><span class="p">,</span> <span class="s2">"description"</span><span class="o">:</span> <span class="s2">"product 2"</span><span class="p">,</span> <span class="s2">"instock"</span> <span class="o">:</span> <span class="mi">80</span> <span class="p">},</span> <span class="p">{</span> <span class="s2">"_id"</span> <span class="o">:</span> <span class="mi">3</span><span class="p">,</span> <span class="s2">"sku"</span> <span class="o">:</span> <span class="s2">"cashews"</span><span class="p">,</span> <span class="s2">"description"</span><span class="o">:</span> <span class="s2">"product 3"</span><span class="p">,</span> <span class="s2">"instock"</span> <span class="o">:</span> <span class="mi">60</span> <span class="p">},</span> <span class="p">{</span> <span class="s2">"_id"</span> <span class="o">:</span> <span class="mi">4</span><span class="p">,</span> <span class="s2">"sku"</span> <span class="o">:</span> <span class="s2">"pecans"</span><span class="p">,</span> <span class="s2">"description"</span><span class="o">:</span> <span class="s2">"product 4"</span><span class="p">,</span> <span class="s2">"instock"</span> <span class="o">:</span> <span class="mi">70</span> <span class="p">},</span> <span class="p">{</span> <span class="s2">"_id"</span> <span class="o">:</span> <span class="mi">5</span><span class="p">,</span> <span class="s2">"sku"</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> <span class="s2">"description"</span><span class="o">:</span> <span class="s2">"Incomplete"</span> <span class="p">},</span> <span class="p">{</span> <span class="s2">"_id"</span> <span class="o">:</span> <span class="mi">6</span> <span class="p">}</span> <span class="p">]</span> <span class="p">)</span> </code></pre></div><h2 id="aggregate">Aggregate</h2> <div class="highlight"><pre class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">db</span><span class="p">.</span><span class="nx">orders</span><span class="p">.</span><span class="nx">aggregate</span><span class="p">(</span> <span class="p">[</span> <span class="p">{</span> <span class="nx">$lookup</span><span class="o">:</span> <span class="p">{</span> <span class="nx">from</span><span class="o">:</span> <span class="s2">"inventory"</span><span class="p">,</span> <span class="nx">localField</span><span class="o">:</span> <span class="s2">"item"</span><span class="p">,</span> <span class="nx">foreignField</span><span class="o">:</span> <span class="s2">"sku"</span><span class="p">,</span> <span class="nx">as</span><span class="o">:</span> <span class="s2">"inventory_docs"</span> <span class="p">}</span> <span class="p">}</span> <span class="p">]</span> <span class="p">)</span> </code></pre></div><h2 id="結果">結果</h2> <div class="highlight"><pre class="chroma"><code class="language-json" data-lang="json"><span class="p">{</span> <span class="nt">"_id"</span> <span class="p">:</span> <span class="mi">1</span><span class="p">,</span> <span class="nt">"item"</span> <span class="p">:</span> <span class="s2">"almonds"</span><span class="p">,</span> <span class="nt">"price"</span> <span class="p">:</span> <span class="mi">12</span><span class="p">,</span> <span class="nt">"quantity"</span> <span class="p">:</span> <span class="mi">2</span><span class="p">,</span> <span class="nt">"inventory_docs"</span> <span class="p">:</span> <span class="p">[</span> <span class="p">{</span> <span class="nt">"_id"</span> <span class="p">:</span> <span class="mi">1</span><span class="p">,</span> <span class="nt">"sku"</span> <span class="p">:</span> <span class="s2">"almonds"</span><span class="p">,</span> <span class="nt">"description"</span> <span class="p">:</span> <span class="s2">"product 1"</span><span class="p">,</span> <span class="nt">"instock"</span> <span class="p">:</span> <span class="mi">120</span> <span class="p">}</span> <span class="p">]</span> <span class="p">}</span> <span class="p">{</span> <span class="nt">"_id"</span> <span class="p">:</span> <span class="mi">2</span><span class="p">,</span> <span class="nt">"item"</span> <span class="p">:</span> <span class="s2">"pecans"</span><span class="p">,</span> <span class="nt">"price"</span> <span class="p">:</span> <span class="mi">20</span><span class="p">,</span> <span class="nt">"quantity"</span> <span class="p">:</span> <span class="mi">1</span><span class="p">,</span> <span class="nt">"inventory_docs"</span> <span class="p">:</span> <span class="p">[</span> <span class="p">{</span> <span class="nt">"_id"</span> <span class="p">:</span> <span class="mi">4</span><span class="p">,</span> <span class="nt">"sku"</span> <span class="p">:</span> <span class="s2">"pecans"</span><span class="p">,</span> <span class="nt">"description"</span> <span class="p">:</span> <span class="s2">"product 4"</span><span class="p">,</span> <span class="nt">"instock"</span> <span class="p">:</span> <span class="mi">70</span> <span class="p">}</span> <span class="p">]</span> <span class="p">}</span> <span class="p">{</span> <span class="nt">"_id"</span> <span class="p">:</span> <span class="mi">3</span><span class="p">,</span> <span class="nt">"inventory_docs"</span> <span class="p">:</span> <span class="p">[</span> <span class="p">{</span> <span class="nt">"_id"</span> <span class="p">:</span> <span class="mi">5</span><span class="p">,</span> <span class="nt">"sku"</span> <span class="p">:</span> <span class="kc">null</span><span class="p">,</span> <span class="nt">"description"</span> <span class="p">:</span> <span class="s2">"Incomplete"</span> <span class="p">},</span> <span class="p">{</span> <span class="nt">"_id"</span> <span class="p">:</span> <span class="mi">6</span> <span class="p">}</span> <span class="p">]</span> <span class="p">}</span> </code></pre></div><blockquote> <p>如果要將 inventory_docs 轉成陣列單一物件屬性可以透過 $unwind</p> </blockquote> </article> <article> <h1>Hugo使用教學(1)</h1> <p>Thu, 28 Oct 2021 14:52:48 +0000</p> <h2 id="原由">原由</h2> <p>這幾天研究從 <a class="link" href="https://tonny0531.medium.com/" target="_blank" rel="noopener" >Medium</a> 轉成自己架 Blog</p> <p>為了避免下一個人架設過程中一頭霧水(<del>實質是為了推別人入坑</del>)</p> <p>故撰寫此筆記</p> <h2 id="不繼續使用-medium-的原因">不繼續使用 Medium 的原因</h2> <p>大部分工程師都喜歡喜歡用 Markdown 進行文件撰寫(包含我在內)</p> <p>但 Medium 是不支援的(有工具可以透過 MarkDown 轉成 Medium 文章)</p> <p>因此建議如果是想先養成撰寫 Blog 的習慣的話</p> <p>可以從 Medium 下手但長期喜歡用 Markdown 撰寫的話</p> <p>強烈推薦自己架一個 Blog</p> <h2 id="安裝hugo">安裝Hugo</h2> <h3 id="windows">Windows</h3> <p>透過 Chocolatey 安裝</p> <div class="highlight"><pre class="chroma"><code class="language-bash" data-lang="bash">choco install hugo-extended -confirm </code></pre></div><h3 id="mac">Mac</h3> <div class="highlight"><pre class="chroma"><code class="language-bash" data-lang="bash">brew install hugo </code></pre></div><h3 id="檢查安裝是否完成">檢查安裝是否完成</h3> <p>透過查詢 Hugo 版本來進行確認是否安裝完成</p> <div class="highlight"><pre class="chroma"><code class="language-bash" data-lang="bash">hugo version </code></pre></div><p><figure class="gallery-image" style=" flex-grow: 1012; flex-basis: 2429px" > <a href="https://tonny0531.github.io/post/hugo_tutorial1/hugo_version.png" data-size="668x66"> </a> <figcaption>Version</figcaption> </figure></p> <h2 id="建立新網頁">建立新網頁</h2> <div class="highlight"><pre class="chroma"><code class="language-bash" data-lang="bash">hugo new site <<span class="s1">'SiteName'</span>> </code></pre></div><p><figure class="gallery-image" style=" flex-grow: 210; flex-basis: 505px" > <a href="https://tonny0531.github.io/post/hugo_tutorial1/new_site.png" data-size="644x306"> </a> <figcaption>NewSite</figcaption> </figure></p> <blockquote> <p>hugo 建立新網頁真的快</p> </blockquote> <h2 id="執行-hugo-server">執行 Hugo Server</h2> <div class="highlight"><pre class="chroma"><code class="language-bash" data-lang="bash">hugo server </code></pre></div><p>這時候開起來會是一片空白這是正常的</p> <p>是因為現在實際上甚麼都沒有</p> <p>等套用了 Theme 就會正常了</p> <h2 id="套用-theme">套用 Theme</h2> <p>這裡我採用了 <a class="link" href="https://github.com/CaiJimmy/hugo-theme-stack" target="_blank" rel="noopener" >Stack</a> 來進行</p> <p>先建立 Git 並初始化</p> <div class="highlight"><pre class="chroma"><code class="language-bash" data-lang="bash">git init git add . git commit -m <span class="s2">"Init"</span> </code></pre></div><p>透過 Submodule 的方式載入</p> <div class="highlight"><pre class="chroma"><code class="language-bash" data-lang="bash">git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack </code></pre></div><p>偷懶一點直接複製 Theme 裡面的 Config 來做使用</p> <blockquote> <p>themes\hugo-theme-stack\exampleSite\config.yaml</p> </blockquote> <ol> <li> <p>複製到我們網站的目錄下</p> </li> <li> <p>刪除 <code>config.toml</code></p> </li> <li> <p>並在檔案開頭加上一些屬性</p> </li> </ol> <div class="highlight"><pre class="chroma"><code class="language-yaml" data-lang="yaml"><span class="nt">baseURL</span><span class="p">:</span><span class="w"> </span><span class="s1">'http://example.org/'</span><span class="w"> </span><span class="w"></span><span class="nt">languageCode</span><span class="p">:</span><span class="w"> </span><span class="s1">'en-us'</span><span class="w"> </span><span class="w"></span><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="s1">'Demo'</span><span class="w"> </span><span class="c"># 你的網站名稱</span><span class="w"> </span><span class="w"></span><span class="nt">theme</span><span class="p">:</span><span class="w"> </span><span class="s1">'hugo-theme-stack'</span><span class="w"> </span><span class="w"></span><span class="nt">module</span><span class="p">:</span><span class="w"> </span><span class="w"> </span><span class="nt">hugoVersion</span><span class="p">:</span><span class="w"> </span><span class="w"> </span><span class="nt">extended</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"> </span><span class="w"> </span><span class="nt">min</span><span class="p">:</span><span class="w"> </span><span class="s2">"0.87.0"</span><span class="w"> </span><span class="w"></span><span class="nt">params</span><span class="p">:</span><span class="w"> </span><span class="w"> </span><span class="nt">mainSections</span><span class="p">:</span><span class="w"> </span><span class="w"> </span>- <span class="l">post</span><span class="w"> </span><span class="w"> </span><span class="nt">featuredImageField</span><span class="p">:</span><span class="w"> </span><span class="l">image</span><span class="w"> </span><span class="w"> </span><span class="nt">rssFullContent</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"> </span></code></pre></div><p>這樣就套用上主題了</p> <p><figure class="gallery-image" style=" flex-grow: 227; flex-basis: 544px" > <a href="https://tonny0531.github.io/post/hugo_tutorial1/sample_page.png" data-size="999x440"> </a> <figcaption>Sample</figcaption> </figure></p> <h2 id="建立新頁面">建立新頁面</h2> <p>透過 CLI 來建立一個新的文章</p> <div class="highlight"><pre class="chroma"><code class="language-bash" data-lang="bash">hugo new post/<<span class="s1">'newPageName'</span>>.md </code></pre></div><p>建立完成後應該還是看不到</p> <p>因為建立文章預設會將文章設定成草稿</p> <p>有兩種方式可以呈現</p> <ol> <li>在啟動 Hugo Server 的時候追加屬性</li> </ol> <div class="highlight"><pre class="chroma"><code class="language-bash" data-lang="bash">hugo server -D </code></pre></div><ol start="2"> <li>將文章屬性下的 Draft 改為 false</li> </ol> <div class="highlight"><pre class="chroma"><code class="language-yaml" data-lang="yaml"><span class="nn">---</span><span class="w"> </span><span class="w"></span><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="s2">"Test"</span><span class="w"> </span><span class="w"></span><span class="nt">date</span><span class="p">:</span><span class="w"> </span><span class="ld">2021-10-29T01:11:07</span><span class="m">+08</span><span class="p">:</span><span class="m">00</span><span class="w"> </span><span class="w"></span><span class="nt">draft</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span><span class="w"></span><span class="nn">---</span><span class="w"> </span></code></pre></div><p>這樣就是建立一個新文章的流程了</p> <p>這裡留個伏筆</p> <p>下一篇再來補關於Search、Archives為什麼不見了</p> </article> </main></body></html>