<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>凱文寫程式 | •́ ▾ •̀ |</title>
  
  
  <link href="/atom.xml" rel="self"/>
  
  <link href="https://kevin8656.github.io/"/>
  <updated>2019-11-19T13:05:46.032Z</updated>
  <id>https://kevin8656.github.io/</id>
  
  <author>
    <name>KevinHuang</name>
    
  </author>
  
  <generator uri="http://hexo.io/">Hexo</generator>
  
  <entry>
    <title>【Vue.js、HTML、JavaScript】上傳圖片在背景轉換成base64，而造成長時間網頁卡住</title>
    <link href="https://kevin8656.github.io/2019/11/19/20191119-javascript-file-upload-loading-problem/"/>
    <id>https://kevin8656.github.io/2019/11/19/20191119-javascript-file-upload-loading-problem/</id>
    <published>2019-11-19T12:31:37.000Z</published>
    <updated>2019-11-19T13:05:46.032Z</updated>
    
    <content type="html"><![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>在做網頁系統過程中時常會有需要上傳圖片的需求，而我在做某個案子的時候遇到了個問題，原本工程師寫了一個功能是要上傳圖片到系統中，而他使用了HTML的Input Tag（File Type）。當使用者選取圖片之後，前端會馬上將所有圖片一個一個丟去一個套件中轉換成base64的圖片編碼，並且存入陣列中。而當上傳大量圖片時就會造成前端已經顯示選取圖片完成，而背景卻還在將選取的圖片轉換成base64圖片檔案，造成畫面當機。這篇文要紀錄一下怎麼解決此問題</p><a id="more"></a><p>可以看一下原本的樣子，我選了多張圖片之後，右邊的network其實正在一張一張轉換圖片，而畫面上看起來雖然已經選取完成，但其實還是當機狀態（因為背景在跑）</p><p><img src="0.gif" alt="0"></p><h2 id="逐步解決問題"><a href="#逐步解決問題" class="headerlink" title="逐步解決問題"></a>逐步解決問題</h2><p>最後解決這個問題的方法是在使用HTML Input Tag選擇圖片時，可以先判斷整體圖片大小，控制所有圖片的總大小是否會太大（轉換成base64會太久），進而去控制是要提示使用者“上傳圖片整體大小過大，請重新選取”，或者是要讓使用者順利選擇圖片，並且點上傳按鈕上傳。</p><p>如下圖：</p><p><img src="1.gif" alt></p><h3 id="控制所選圖片的整體大小"><a href="#控制所選圖片的整體大小" class="headerlink" title="控制所選圖片的整體大小"></a>控制所選圖片的整體大小</h3><p>首先，我在Vue.js的template中程式碼如下圖</p><p><img src="2.png" alt="2"></p><p>程式碼如下：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">"container advisory"</span>&gt;</span><br><span class="line">  &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">"file-group"</span>&gt;</span><br><span class="line">    &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">"file"</span>&gt;</span><br><span class="line">      &lt;input type=<span class="string">"file"</span> @change=<span class="string">"handleChangeInput"</span> multiple&gt;</span><br><span class="line">      &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">"icon"</span>&gt;</span><br><span class="line">        &lt;i <span class="class"><span class="keyword">class</span></span>=<span class="string">"zmdi zmdi-cloud-upload"</span>&gt;&lt;/i&gt;</span><br><span class="line">        &lt;p v-show=<span class="string">"!isFileInputActive&amp;&amp;imageTo64LoadingCount==0&amp;&amp;!imageTo64Loading"</span>&gt;選擇圖片&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">        &lt;p</span></span><br><span class="line"><span class="regexp">                v-show="isFileInputActive&amp;&amp;imageTo64LoadingCount==0&amp;&amp;!imageTo64Loading"&gt;</span></span><br><span class="line"><span class="regexp">            檔案名稱 &#123;&#123; fileName &#125;&#125;</span></span><br><span class="line"><span class="regexp">        &lt;/</span>p&gt;</span><br><span class="line">          &lt;p v-show=<span class="string">"imageTo64LoadingCount!=0||imageTo64Loading"</span>&gt;正在轉換圖片...&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">      &lt;/</span>div&gt;</span><br><span class="line">    &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">  &lt;/</span>div&gt;</span><br><span class="line">&lt;<span class="regexp">/div&gt;</span></span><br></pre></td></tr></table></figure><p>而點input選取圖片會觸發的handleChangeInput()方法如下圖</p><p><img src="3.png" alt="3"></p><p>程式碼如下</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">handleChangeInput(e) &#123;</span><br><span class="line">  <span class="keyword">this</span>.imageTo64Loading = <span class="literal">true</span>;</span><br><span class="line">  <span class="keyword">const</span> files = [...e.target.files];</span><br><span class="line">  <span class="keyword">let</span> filesTotalSize = <span class="number">0</span>;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">const</span> x <span class="keyword">in</span> files) &#123;</span><br><span class="line">    filesTotalSize += <span class="built_in">parseFloat</span>(((files[x].size / <span class="number">1024</span>) / <span class="number">1024</span>).toFixed(<span class="number">4</span>)); <span class="comment">// MB</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">if</span> (filesTotalSize &gt; <span class="number">20</span>) &#123;</span><br><span class="line">    <span class="keyword">this</span>.imageTo64Loading = <span class="literal">false</span>;</span><br><span class="line">    <span class="keyword">this</span>.$store.commit(<span class="string">'sendMessage'</span>, <span class="string">'圖片總大小超過20MB，請重新選擇'</span>);</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    files.forEach(<span class="function">(<span class="params">file</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="comment">// 增加正在轉base64位元圖片的數量</span></span><br><span class="line">      <span class="keyword">this</span>.imageTo64LoadingCount = <span class="keyword">this</span>.imageTo64LoadingCount + <span class="number">1</span>;</span><br><span class="line">      formattedImage(file, (_file, _) =&gt; &#123;</span><br><span class="line">        <span class="keyword">this</span>.fileSelected.push(_file);</span><br><span class="line">        <span class="comment">// 減少正在轉base64位元圖片的數量，全部轉完就會回到0</span></span><br><span class="line">        <span class="keyword">this</span>.imageTo64LoadingCount = <span class="keyword">this</span>.imageTo64LoadingCount - <span class="number">1</span>;</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">this</span>.imageTo64Loading = <span class="literal">false</span>;</span><br><span class="line">    <span class="keyword">this</span>.fileName = <span class="keyword">this</span>.getStringFilesName(files);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure><p>在程式碼中我們可以看到，當我觸發了input tag change的時候會觸發handleChangeInput方法，並且第一部我會把Vue.js中的 <code>this.imageTo64Loading</code>調整成true，代表背景正在轉換圖片。</p><p>接下來下面這段就是先跑過所有圖片，先把圖片的大小累加並存到<code>filesTotalSize</code>變數中</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> files = [...e.target.files];</span><br><span class="line">      <span class="keyword">let</span> filesTotalSize = <span class="number">0</span>;</span><br><span class="line">      <span class="keyword">for</span> (<span class="keyword">const</span> x <span class="keyword">in</span> files) &#123;</span><br><span class="line">        filesTotalSize += <span class="built_in">parseFloat</span>(((files[x].size / <span class="number">1024</span>) / <span class="number">1024</span>).toFixed(<span class="number">4</span>)); <span class="comment">// MB</span></span><br><span class="line">      &#125;</span><br></pre></td></tr></table></figure><p>然後在我們把圖片丟去轉換成base64格式之前，就會先判斷<code>filesTotalSize</code>是否有超過20MB，超過的話就會直接跳出，並且顯示Error訊息“圖片總大小超過20MB，請重新選擇”</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> (filesTotalSize &gt; <span class="number">20</span>) &#123;</span><br><span class="line">        <span class="keyword">this</span>.imageTo64Loading = <span class="literal">false</span>;</span><br><span class="line">        <span class="keyword">this</span>.$store.commit(<span class="string">'sendMessage'</span>, <span class="string">'圖片總大小超過20MB，請重新選擇'</span>);</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        ...</span><br><span class="line">      &#125;</span><br></pre></td></tr></table></figure><p>而如果沒有超過，再繼續進行下面的圖片格式轉換</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">else</span> &#123;</span><br><span class="line">        files.forEach(<span class="function">(<span class="params">file</span>) =&gt;</span> &#123;</span><br><span class="line">          <span class="comment">// 增加正在轉base64位元圖片的數量</span></span><br><span class="line">          <span class="keyword">this</span>.imageTo64LoadingCount = <span class="keyword">this</span>.imageTo64LoadingCount + <span class="number">1</span>;</span><br><span class="line">          formattedImage(file, (_file, _) =&gt; &#123;</span><br><span class="line">            <span class="keyword">this</span>.fileSelected.push(_file);</span><br><span class="line">            <span class="comment">// 減少正在轉base64位元圖片的數量，全部轉完就會回到0</span></span><br><span class="line">            <span class="keyword">this</span>.imageTo64LoadingCount = <span class="keyword">this</span>.imageTo64LoadingCount - <span class="number">1</span>;</span><br><span class="line">          &#125;);</span><br><span class="line">        &#125;);</span><br><span class="line">        <span class="keyword">this</span>.imageTo64Loading = <span class="literal">false</span>;</span><br><span class="line">        <span class="keyword">this</span>.fileName = <span class="keyword">this</span>.getStringFilesName(files);</span><br><span class="line">      &#125;</span><br></pre></td></tr></table></figure><h3 id="圖片轉換中的狀態控制"><a href="#圖片轉換中的狀態控制" class="headerlink" title="圖片轉換中的狀態控制"></a>圖片轉換中的狀態控制</h3><p>轉換過程中因為是使用forEach把每個file都跑過，所以每跑過一個就會把<code>this.imageTo64LoadingCount</code>這個變數<code>+ 1</code>，代表現在有幾個圖片正在轉換</p><p>而等待<code>formattedImage</code>這個方法的CallBack，就代表轉換完成，就可以把<code>this.imageTo64LoadingCount</code>的數字-1了！</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">formattedImage(file, (_file, _) =&gt; &#123;</span><br><span class="line">  <span class="keyword">this</span>.fileSelected.push(_file);</span><br><span class="line">  <span class="comment">// 減少正在轉base64位元圖片的數量，全部轉完就會回到0</span></span><br><span class="line">  <span class="keyword">this</span>.imageTo64LoadingCount = <span class="keyword">this</span>.imageTo64LoadingCount - <span class="number">1</span>;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><h2 id="結語"><a href="#結語" class="headerlink" title="結語"></a>結語</h2><p>以上就是大略的解決方法，當然忽略了很多小細節的部分，不過就是紀錄一下我大概是怎麼做到多選檔案Size控制，以及轉換圖片時要有一個狀態顯示，並且把下面的確定按鈕Disable掉（取消也一起不能按，因為背景轉換時其實畫面會當掉，所以連取消都要一起卡住不讓使用者點選）</p>]]></content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;前言&quot;&gt;&lt;a href=&quot;#前言&quot; class=&quot;headerlink&quot; title=&quot;前言&quot;&gt;&lt;/a&gt;前言&lt;/h2&gt;&lt;p&gt;在做網頁系統過程中時常會有需要上傳圖片的需求，而我在做某個案子的時候遇到了個問題，原本工程師寫了一個功能是要上傳圖片到系統中，而他使用了HTML的Input Tag（File Type）。當使用者選取圖片之後，前端會馬上將所有圖片一個一個丟去一個套件中轉換成base64的圖片編碼，並且存入陣列中。而當上傳大量圖片時就會造成前端已經顯示選取圖片完成，而背景卻還在將選取的圖片轉換成base64圖片檔案，造成畫面當機。這篇文要紀錄一下怎麼解決此問題&lt;/p&gt;
    
    </summary>
    
      <category term="技術踩坑" scheme="https://kevin8656.github.io/categories/%E6%8A%80%E8%A1%93%E8%B8%A9%E5%9D%91/"/>
    
    
      <category term="JavaScript" scheme="https://kevin8656.github.io/tags/JavaScript/"/>
    
      <category term="HTML" scheme="https://kevin8656.github.io/tags/HTML/"/>
    
      <category term="Vue.js" scheme="https://kevin8656.github.io/tags/Vue-js/"/>
    
  </entry>
  
  <entry>
    <title>【ASP.Net Core 3.0應用程式開發-3】什麼是MVC？什麼是前後端分離？ ft.安裝EF Core 3.0、初始化資料模型對應</title>
    <link href="https://kevin8656.github.io/2019/10/03/20190930-dotnetcore3beginner-3/"/>
    <id>https://kevin8656.github.io/2019/10/03/20190930-dotnetcore3beginner-3/</id>
    <published>2019-10-02T17:02:33.000Z</published>
    <updated>2019-10-03T05:30:14.119Z</updated>
    
    <content type="html"><![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>接續上一篇我們建立完資料庫及資料表，這一篇會帶大家了解MVC程式架構的基本概念，以及什麼是前後端分離，最後在實作的部分會帶大家在上次建立的API專案中安裝Entity Framework Core 3.0（EF Core 3.0），並在專案中透過EF Core建立Model，該Model會對應到資料庫的資料表結構。</p><blockquote><p>這一系列的文章比較偏向讓大家看完能夠有一些比較基本的觀念，並且會附加比較多的實作教學，因此可能解釋一些觀念的時候，不會用太精細的方式來與大家做探討，請大家多多見諒！主要想讓大家對觀念的理解可以剛好輔助實作就好，如果對觀念有更深的興趣歡迎尋找更多文章，或者看我文中提到的更深入的文章，也可以在下方回應與大家分享自己看到的資訊哦～！</p></blockquote><a id="more"></a><h2 id="基本概念"><a href="#基本概念" class="headerlink" title="基本概念"></a>基本概念</h2><h3 id="MVC概念"><a href="#MVC概念" class="headerlink" title="MVC概念"></a>MVC概念</h3><p>MVC是一種軟體的架構模式，主要是把軟體系統的程式分成三層：模型（Model）、視圖（View）和控制器（Controller）。主要是Model &lt;-&gt; Controller &lt;-&gt; View這樣的方式在做程式溝通。而我自己在開發過程中還會再多一層，這一層會放在Model以及Controller之間，可以把它稱作業務邏輯（Service），所以最後會變成Model &lt;-&gt; Service &lt;-&gt; Controller &lt;-&gt; View層這樣子，以下簡單以實作面讓大家理解一下每一層的作用：</p><ul><li>視圖（View）：從Controller獲得資料，並且進行介面設計與渲染。</li><li>控制器（Controller）：做整體程式流程的控制，接收View的資料請求，並且呼叫Service來完成業務邏輯，最後將資料回傳到View進行顯示。</li><li>業務邏輯（Service）：負責業務邏輯的相關工作，會呼叫Model去撈取資料庫資料。</li><li>模型（Model）：與資料庫的資料表有對應關係，Service可以透過Model撈取資料庫中的資料。</li></ul><p><img src="4.png" alt="4"></p><p>簡單來說就是以上這樣，如果想要對MVC了解更多的可以先參考這篇網路上我覺得寫得不錯的討論文章，以及文章下面更多的資源：<a href="http://blog.turn.tw/?p=1539" target="_blank" rel="noopener">MVC是一個巨大誤會</a></p><h3 id="前後端分離"><a href="#前後端分離" class="headerlink" title="前後端分離"></a>前後端分離</h3><p>在上方的MVC架構中，Controller在完成View的請求之後，會將資料傳到View上顯示，並且也有看到圖片中標示了「前端」與「後端」。而其實這邊的「View」指的就是前端的部分，在ASP.net 的MVC專案中，前端跟後端其實是無法「完全分開」的，如果你架設專案的伺服器壞了，是整個網站都一起會掛掉，簡單來說，前後端在這種MVC架構下其實是綁在一起的。</p><p>而前後端分離就如同他字面上的意思，將前端與後端完全分離，分成兩個部分，甚至是兩個專案來做。我們可以先看下面這張圖，當前端需要資料時，會發出請求給後端，後端去資料庫存取資料後，再把資料回傳到前端去。</p><p><img src="3.png" alt="3"></p><p>而如果用更簡單的方式來畫圖，就會變成下面這副德性</p><p><img src="2.png" alt="2"></p><p>而前後端分離就是在前端跟後端這個請求跟回傳的部分，不是透過在專案內連結的互傳，而是透過一個叫「API」的東西來進行交互。</p><p>而API是什麼東西呢？API的全稱叫做「應用程式介面 (Application Programming Interface)」，我會比較喜歡叫他“應用程式接口”，當兩個不同專案需要進行交互的時候，通常就會透過API來進行溝通，前端專案透過呼叫後端專案所開放出來的API，來存取後端專案的資源。</p><p>我用個飲料機的例子舉例，我今天想要喝一杯飲料，所以我（前端）透過去點擊飲料機上的按鈕（API）來叫飲料機給我飲料（後端）：</p><ul><li>「我」想要一瓶「飲料」：「前端」發出「需求」</li><li>「飲料機上的按鈕」：「API」</li><li>「飲料機」給我「飲料」：「後端」回傳「資料」</li></ul><p>就是像這個樣子，而所謂後端的API專案，也就是我們在第一堂課建立的WEB API專案，因此我們在未來的實作中將會透過.Net Core來做API與後端的邏輯，然後前端的專案則是另外實作。之後帶大家做後端的API專案，並且再教大家如何透過軟體（Postman）或者前端去對後端API發出請求，大家就會很明瞭上面所說的這些觀念了！</p><h3 id="什麼是Entity-Framework-Core-3-0（EF-Core-3-0）"><a href="#什麼是Entity-Framework-Core-3-0（EF-Core-3-0）" class="headerlink" title="什麼是Entity Framework Core 3.0（EF Core 3.0）"></a>什麼是Entity Framework Core 3.0（EF Core 3.0）</h3><p><img src="1.png" alt="1"></p><p>Entity Framework Core是微軟新一代出的<strong><em>Object-Relational Mapping（ORM）</em></strong>框架，是以.Net Core實作出來的。主要適用於透過程式碼來處理Model以及資料庫結構對應的工作。</p><p>.Net Core是從.Net Framework發展而來，而Entity Framework Core 3.0（EF Core 3.0）則是從Entity Framework發展而來的，算是進化版。給使用者呼叫的函式介面類似於Entity Framework，但是底層幾乎是砍掉重練的。</p><blockquote><p><strong><em>Object-Relational Mapping（ORM）</em></strong>：物件關係映射，在MVC架構中「Model」就是以ORM的方式運作的，主要作用就是在關聯式資料庫與實體的物件之間做一個對應，這樣我們就可以透過程式去操作物件，效果等同於我們去下SQL指令來對資料庫做操作，可以讓開發者在程式中以更簡易的方式對資料庫進行操作。</p></blockquote><p>這個套件大家就看一下概略的介紹，有興趣可以去查詢官方的介紹比較清楚，接下來我就帶大家來開始在專案中裝上這個套件啦！</p><h2 id="開始實作"><a href="#開始實作" class="headerlink" title="開始實作"></a>開始實作</h2><h3 id="安裝EF-Core-3"><a href="#安裝EF-Core-3" class="headerlink" title="安裝EF Core 3"></a>安裝EF Core 3</h3><p>以下步驟將帶大家安裝兩個套件：</p><ul><li>「Microsoft.EntityFrameworkCore.SqlServer」</li><li>「Microsoft.EntityFrameworkCore.Tools」</li></ul><p>以下步驟將以「Microsoft.EntityFrameworkCore.SqlServer」套件為例</p><ol><li>再次開啟在第一篇所建立的WebApi專案</li></ol><p><img src="5.png" alt="5"></p><ol start="2"><li>因為.Net Core算是跨平台的專案，因此我會比較多讓大家使用指令模式來進行操作。接下來選上面的「工具 -&gt; NuGet套件管理員 -&gt; 套件管理器主控台」，開啟指令的NuGet套件安裝管理員（下方的「管理方案的NuGet套件」則是圖形化介面，可以比較方便管理套件）</li></ol><blockquote><p>NuGet：是Microsoft 支援的共用程式碼機制，它定義了如何建立、裝載和取用.NET中的「套件」。</p></blockquote><p><img src="6.png" alt="6"></p><ol start="3"><li>開啟後可以在下方的視窗看到如下畫面，底下「PM&gt;」就是要輸入指令的位置</li></ol><p><img src="15.png" alt="15"></p><ol start="4"><li><p>接下來輸入以下NuGet的指令，安裝</p><p>「Microsoft.EntityFrameworkCore.SqlServer」套件</p></li></ol><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">PM&gt; Install-Package Microsoft.EntityFrameworkCore.SqlServer -Version 3.0.0</span><br></pre></td></tr></table></figure><p><img src="7.png" alt="7"></p><blockquote><p>要注意，網路上查到有些指令是使用<code>dotnet add package</code>指令來安裝的，該指令是要用作業系統本身的命令列工具（如Windows 的命令提示字元）去安裝的，在NuGet視窗中輸入此指令會不能成功執行唷～！</p></blockquote><ol start="5"><li>等待安裝過程跑完之後，可以點開右邊「方案總管」中的「相依性-&gt;套件」，就可以看到剛剛安裝的「Microsoft.EntityFrameworkCore.SqlServer」套件了</li></ol><p><img src="8.png" alt="8"></p><ol start="6"><li>接下來以同樣步驟安裝「Microsoft.EntityFrameworkCore.Tools」，請輸入以下指令：</li></ol><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">PM&gt; Install-Package Microsoft.EntityFrameworkCore.Tools -Version 3.0.0</span><br></pre></td></tr></table></figure><p><img src="9.png" alt="9"></p><ol start="7"><li>右邊「方案總管」中的「相依性-&gt;套件」就會有兩個套件安裝了</li></ol><p><img src="10.png" alt="10"></p><h3 id="透過EF-Core-3建立模型對應"><a href="#透過EF-Core-3建立模型對應" class="headerlink" title="透過EF Core 3建立模型對應"></a>透過EF Core 3建立模型對應</h3><p>我們可以透過EF Core套件，幫我們自動在程式中建立資料模型，對應到我們第二堂課所建立的資料庫資料表，而接下來就要帶大家了解一下怎麼做到這件事。</p><ol><li>首先點擊上方「工具」，找到「NuGet套件管理員」並選擇「套件管理主控台」，準備用下指令的方式對應資料庫</li></ol><p><img src="14.png" alt="14"></p><ol start="2"><li>接下來輸入以下套件的指令，建立實體的資料對應模型，對應到先前建立的資料庫與資料表：</li></ol><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">PM&gt; Scaffold-DbContext <span class="string">"Data Source=localhost;user id=dotnetcore;password=dotnetcore; persist security info=True; Initial Catalog=dotnetcore;"</span> Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models -Force</span><br></pre></td></tr></table></figure><p><img src="18.png" alt="18"></p><p>指令的解釋如下，不知道的人可以看，或者直接去<a href="https://docs.microsoft.com/zh-tw/ef/core/miscellaneous/cli/powershell" target="_blank" rel="noopener">官方文件</a>看一下</p><ul><li>Scaffold-DbContext：「EFCore Tools」套件中用來產生資料實體模型的指令</li><li>Data Source：資料庫的來源，這邊是輸入本機IP，把專案架上伺服器時會需要修改</li><li>user id：資料庫登入角色的名稱</li><li>password：資料庫登入角色的密碼</li><li>persist security info：宣告為 True 時，代表當SQL連線已經建立，也會將密碼儲存在記憶體中，供後續程式引用</li><li>Initial Catalog：就是要對應的資料庫</li><li>Microsoft.EntityFrameworkCore.SqlServer：指定套件去進行動作</li><li>-OutputDir：將檔案放入目錄。 路徑是相對於專案目錄，這邊要把建立出的實體資料模型放入「Models」資料夾中</li><li>-Force：覆寫現有的檔案。</li></ul><ol start="3"><li>完成後就會看到右邊的檔案目錄多了「Models」資料夾，並且裡面多出了「dotnetcoreContext.cs」以及「Member.cs」</li></ol><p><img src="19.png" alt="19"></p><ol start="4"><li>以下解釋一下剛剛自動對應產生的兩個檔案分別的功能：</li></ol><ul><li><p>dotnetcoreContext.cs：此檔案其實是資料庫名稱+Context組成的檔名，裡面會放資料庫連線的資訊以及模組對應的資訊，該檔案是透過EFCore套件自動產生，因此初期不會修改到</p><p><img src="20.png" alt="20"></p></li><li><p>Member.cs：此檔案是資料庫中資料表的模型，裡面的資料欄位跟型態會對應到資料庫的資料型態。</p><p><img src="21.png" alt="21"></p></li></ul><p>看到以上畫面就代表你成功安裝了EF Core 3.0套件，並且也透過指令將資料庫與資料表對應到程式碼中，未來如果資料庫結構有更新時，只要打開「NuGet套件管理器主控台」，再次輸入以下指令即可重新對應並覆蓋程式碼囉：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">PM&gt; Scaffold-DbContext <span class="string">"Data Source=localhost;user id=dotnetcore;password=dotnetcore; persist security info=True; Initial Catalog=dotnetcore;"</span> Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models -Force</span><br></pre></td></tr></table></figure><hr><p>下一篇將帶大家建立MVC + Service的程式架構，並且寫一個簡單的會員子系統操作給大家當做示範。</p>]]></content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;前言&quot;&gt;&lt;a href=&quot;#前言&quot; class=&quot;headerlink&quot; title=&quot;前言&quot;&gt;&lt;/a&gt;前言&lt;/h2&gt;&lt;p&gt;接續上一篇我們建立完資料庫及資料表，這一篇會帶大家了解MVC程式架構的基本概念，以及什麼是前後端分離，最後在實作的部分會帶大家在上次建立的API專案中安裝Entity Framework Core 3.0（EF Core 3.0），並在專案中透過EF Core建立Model，該Model會對應到資料庫的資料表結構。&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;這一系列的文章比較偏向讓大家看完能夠有一些比較基本的觀念，並且會附加比較多的實作教學，因此可能解釋一些觀念的時候，不會用太精細的方式來與大家做探討，請大家多多見諒！主要想讓大家對觀念的理解可以剛好輔助實作就好，如果對觀念有更深的興趣歡迎尋找更多文章，或者看我文中提到的更深入的文章，也可以在下方回應與大家分享自己看到的資訊哦～！&lt;/p&gt;
&lt;/blockquote&gt;
    
    </summary>
    
      <category term="ASP.Net Core" scheme="https://kevin8656.github.io/categories/ASP-Net-Core/"/>
    
    
      <category term="Visual Studio" scheme="https://kevin8656.github.io/tags/Visual-Studio/"/>
    
      <category term="DotNetCore" scheme="https://kevin8656.github.io/tags/DotNetCore/"/>
    
      <category term="C#" scheme="https://kevin8656.github.io/tags/C/"/>
    
      <category term="MVC" scheme="https://kevin8656.github.io/tags/MVC/"/>
    
      <category term="WebAPI" scheme="https://kevin8656.github.io/tags/WebAPI/"/>
    
      <category term="ASP.Net Core 3.0" scheme="https://kevin8656.github.io/tags/ASP-Net-Core-3-0/"/>
    
      <category term="EF Core 3.0" scheme="https://kevin8656.github.io/tags/EF-Core-3-0/"/>
    
  </entry>
  
  <entry>
    <title>【ASP.Net Core 3.0應用程式開發-2】逐步建立資料庫與資料表</title>
    <link href="https://kevin8656.github.io/2019/09/29/20190929-dotnetcore3beginner-2/"/>
    <id>https://kevin8656.github.io/2019/09/29/20190929-dotnetcore3beginner-2/</id>
    <published>2019-09-29T04:16:33.000Z</published>
    <updated>2019-10-02T02:05:30.064Z</updated>
    
    <content type="html"><![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>接續上一篇API的專案建立教學，這一篇會帶大家使用SQL Server建立資料庫與資料表，為我們下一篇的EF Core 3.0資料對應做準備。</p><blockquote><p>這一系列的文章比較偏向讓大家看完能夠有一些比較基本的觀念，並且會附加比較多的實作教學，因此可能解釋一些觀念的時候，不會用太精細的方式來與大家做探討，請大家多多見諒！主要想讓大家對觀念的理解可以剛好輔助實作就好，如果對觀念有更深的興趣歡迎尋找更多文章，或者看我文中提到的更深入的文章，也可以在下方回應與大家分享自己看到的資訊哦～！</p></blockquote><a id="more"></a><p><img src="1.jpeg" alt="1"></p><h2 id="開始實作"><a href="#開始實作" class="headerlink" title="開始實作"></a>開始實作</h2><h3 id="初始化設定SQL-Server"><a href="#初始化設定SQL-Server" class="headerlink" title="初始化設定SQL Server"></a>初始化設定SQL Server</h3><p>如果你跟我一樣是剛在電腦上安裝SQL Server以及SQL Server Managament Studio（SSMS），那麼首先我們要先設定一些東西，讓往後的資料庫操作可以順利進行</p><ol><li>打開SSMS 2018</li></ol><p><img src="2.png" alt="2"></p><ol start="2"><li>點擊「連線」使用預設的「Windows驗證」來連線到本機的SQL Server伺服器。</li></ol><p><img src="3.png" alt="3"></p><ol start="3"><li>連線成功後左邊就會顯示如以下圖片所示</li></ol><p><img src="4.png" alt="4"></p><ol start="4"><li>在連線成功後，首先我們要讓SQL Server允許使用SQL Server帳號密碼驗證方式來登入，未來開發過程中也將會用帳密的方式連線到資料苦。首先，在連線資訊上點擊「右鍵」，選擇「屬性」</li></ol><p><img src="16.png" alt="16"></p><ol start="5"><li>選擇左邊的「安全性」分頁，並且將「伺服器驗證」調整為「Sql Server 及 Windows驗證模式」，最後點擊「確認」</li></ol><p><img src="17.png" alt="17"></p><ol start="6"><li>SSMS會提示你要重新啟動SQL Server才會生效，這邊指的不是重新啟動SSMS哦，而是重啟SQL Server的組態環境</li></ol><p><img src="18.png" alt="18"></p><ol start="7"><li>再次在連線資訊上點擊「右鍵」，這次選擇「重新啟動」</li></ol><p><img src="19.png" alt="19"></p><ol start="8"><li>會跳出一個視窗跟你確認是否要重啟，請點選「YES」重新啟動</li></ol><p><img src="20.png" alt="20"></p><ol start="9"><li>等待重新啟動的進程跑完即可</li></ol><p><img src="21.png" alt="21"></p><ol start="10"><li>接下來，我們在編輯資料表時如果是使用預設的設定，會遇到有時資料表結構無法成功編輯的問題，因此我們要先去設定將資料表結構變更的設定改掉。請點選上方「工具」，並且選擇「選項」</li></ol><p><img src="22.png" alt="22"></p><ol start="11"><li>選擇左邊「設計師」分頁，並且取消勾選右邊「防止儲存需要資料表重建的變更」，最後點「確定」來變更設定</li></ol><p><img src="23.png" alt="23"></p><p>以上就完成資料庫剛開始所需要執行的設定了，以後不管到哪一台電腦上，只要是重新裝了SQL Server的環境以及SSMS，都需要再重新設定一次哦！</p><h3 id="建立登入角色及資料庫"><a href="#建立登入角色及資料庫" class="headerlink" title="建立登入角色及資料庫"></a>建立登入角色及資料庫</h3><p>接續上一次建立了一個API專案，這篇文要帶大家透過SQL Server來建立資料庫及資料表</p><ol><li>把「安全性-&gt;登入」展開，可以看到許多系統內建的使用者</li></ol><p><img src="5.png" alt="5"></p><ol start="2"><li>我們要新增一個使用者，未來在使用EF Core產生資料模型對應時會透過使用者帳號及密碼來登入到SQL中，在「登入」上面點擊「右鍵」，並選擇「新增登入」</li></ol><p><img src="6.png" alt="6"></p><ol start="3"><li>輸入登入的「使用者名稱」，勾選「SQL Server驗證」，並且輸入「使用者密碼」，之後把「強制執行密碼逾期」取消勾選，最後點選「確定」</li></ol><p><img src="7.png" alt="7"></p><ol start="4"><li>即可看到「dotnetcore」帳號已成功建立</li></ol><p><img src="8.png" alt="8"></p><ol start="5"><li>接下來要開始建立資料庫與資料表，首先請在「資料庫」上點擊「右鍵」，並且選擇「新增資料庫」</li></ol><p><img src="9.png" alt="9"></p><ol start="6"><li>輸入「資料庫名稱」後，直接點選「確定」建立資料庫</li></ol><p><img src="10.png" alt="10"></p><ol start="7"><li>在左方「資料庫」底下，即可看到新增的資料庫</li></ol><p><img src="11.png" alt="11"></p><ol start="8"><li>接下來我們要到剛剛新建的使用者帳號中調整權限設定，讓以後透過此帳號登入的使用者，可以存取剛剛我們新建的資料庫。請在剛剛新增的使用者上點選「右鍵」，選擇「屬性」</li></ol><p><img src="12.png" alt="12"></p><ol start="9"><li>選擇左邊「使用者對應」，並且勾選剛剛建立的資料庫後，在下方資料庫角色的地方把「db_owner」、「db_datareader」及「db_datawriter」勾選起來，「db_owner」代表資料庫角色的成員可以在資料庫上執行所有的組態和維護活動，也可以卸除資料庫，「db_datareader」代表「資料庫角色的成員可以從所有使用者資料表讀取所有資料」，「db_datawriter」代表「資料庫角色的成員可以加入、刪除或變更所有使用者資料表中的資料」，設定完後點選「確定」。</li></ol><p><img src="13.png" alt="13"></p><ol start="10"><li>接下來我們嘗試再使用「SQL Server驗證」方式建立一個新連接到資料庫，點擊左邊有個「連接符號」</li></ol><p><img src="14.png" alt="14"></p><ol start="11"><li>之後將驗證欄位選擇為「SQL Server驗證」，並且輸入登入的「帳號」及「密碼」，最後點選「連線」</li></ol><p><img src="15.png" alt="15"></p><ol start="12"><li>連線之後，可以看到左邊有兩個連線資訊，下方的就是使用「SQL Server驗證」方式連線的，展開「資料庫」若能看到剛剛我們所新建的資料庫，即代表此SQL Server驗證帳號是有權限可以操作此資料庫的</li></ol><p><img src="24.png" alt="24"></p><h3 id="在資料庫中建立資料表與第一筆資料"><a href="#在資料庫中建立資料表與第一筆資料" class="headerlink" title="在資料庫中建立資料表與第一筆資料"></a>在資料庫中建立資料表與第一筆資料</h3><p>接下來要帶大家在這個資料庫中建立一個「會員」資料表，會員系統是幾乎每一個網頁應用系統中都會有的一個子系統，因此不管是在資料表還是在之後的.Net Core教學中，都會先用會員系統來大家熟悉最基本的資料CRUD，讓大家未來可以利用此基礎來做延伸。</p><blockquote><p>CRUD：Create、Read、Update及Delete的縮寫，意指程式中的新增、修改、刪除、查詢這四大最常做的操作。</p></blockquote><ol><li>展開資料庫，在「資料表」上點右鍵，選擇「新增-&gt;資料表」</li></ol><p><img src="25.png" alt="25"></p><ol start="2"><li>會看到以下畫面</li></ol><p><img src="26.png" alt="26"></p><ol start="3"><li>在左方「資料行名稱」的欄位中，輸入下圖的5個欄位名稱，Id代表帳號的流水號</li></ol><p><img src="27.png" alt="27"></p><ol start="4"><li>將「資料類型」欄位調整如下圖，Id要設定自動累加所以設定成整數(INT)型態，這邊就不多說明各個形態的差異了，不知道的人上網Google一下就有答案囉</li></ol><p><img src="28.png" alt="28"></p><ol start="5"><li>將「允許NULL」的欄位勾選成這樣，Id之後要讓他自己增加，而帳號密碼不可為空，名字與電話則可以</li></ol><p><img src="29.png" alt="29"></p><ol start="6"><li>接下來選到「Id」這個資料欄位，並且在下方「資料行屬性」中找到「識別規格」，將其調成「是」之後，下方「識別值種子」是這個欄位的起始值，「識別值增量」則是每增加一筆資料，這個欄位會自動增加的量，比如第一筆就會是1，再來就是2-&gt;3-&gt;4這樣自動累加。</li></ol><p><img src="30.png" alt="30"></p><ol start="7"><li>點選左上角「儲存」的圖示</li></ol><p><img src="31.png" alt="31"></p><ol start="8"><li>輸入資料表名稱「Member」，並且點擊「確定」</li></ol><p><img src="32.png" alt="32"></p><ol start="8"><li>在資料庫上點擊「右鍵」，並且點擊「重新整理」</li></ol><p><img src="33.png" alt="33"></p><ol start="9"><li>展開資料表，就可以看到剛剛新建的資料表「Member」了</li></ol><p><img src="34.png" alt="34"></p><ol start="10"><li>對「Member」資料表點擊「右鍵」，並且選擇「編輯前200個資料列」</li></ol><p><img src="35.png" alt="35"></p><ol start="11"><li>在畫面中新增一筆資料，打上測試資料（Id欄位不用輸入資料哦！）</li></ol><p><img src="36.png" alt="36"></p><p>成功新增資料之後就完成囉，這樣我們就有了資料庫、資料表以及一筆資料了，下一篇文將會帶大家從.Net Core程式中下載EF Core 3.0套件，並且建立資料模型對應到資料庫中的資料表，敬請期待吧！</p><p>–</p><h2 id="有感而發"><a href="#有感而發" class="headerlink" title="有感而發"></a>有感而發</h2><p>其實在寫這第二篇文章的時候，想起了IT鐵人邦辦了好幾屆的30天發文挑戰，自己一直都不敢參加，而自己在自己部落寫文章稍微自在一些。不過在過程中一直在思考，覺得別人的Blog文章感覺都是念過非常多書、看過非常多資料才可以寫得那麼詳細，而我自己目前只能以實作面來帶著大家一步一步實作，觀念實在是非常缺乏呀！</p><p>希望未來的自己也可以邊寫文章邊越學越多，慢慢提升文章的品質，大家現在階段就先見諒，帶著尊重包容友善的心情看我的文章吧xDD有任何建議都可以提出來哦！我虛心受教！</p>]]></content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;前言&quot;&gt;&lt;a href=&quot;#前言&quot; class=&quot;headerlink&quot; title=&quot;前言&quot;&gt;&lt;/a&gt;前言&lt;/h2&gt;&lt;p&gt;接續上一篇API的專案建立教學，這一篇會帶大家使用SQL Server建立資料庫與資料表，為我們下一篇的EF Core 3.0資料對應做準備。&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;這一系列的文章比較偏向讓大家看完能夠有一些比較基本的觀念，並且會附加比較多的實作教學，因此可能解釋一些觀念的時候，不會用太精細的方式來與大家做探討，請大家多多見諒！主要想讓大家對觀念的理解可以剛好輔助實作就好，如果對觀念有更深的興趣歡迎尋找更多文章，或者看我文中提到的更深入的文章，也可以在下方回應與大家分享自己看到的資訊哦～！&lt;/p&gt;
&lt;/blockquote&gt;
    
    </summary>
    
      <category term="ASP.Net Core" scheme="https://kevin8656.github.io/categories/ASP-Net-Core/"/>
    
    
      <category term="Visual Studio" scheme="https://kevin8656.github.io/tags/Visual-Studio/"/>
    
      <category term="DotNetCore" scheme="https://kevin8656.github.io/tags/DotNetCore/"/>
    
      <category term="C#" scheme="https://kevin8656.github.io/tags/C/"/>
    
      <category term="MVC" scheme="https://kevin8656.github.io/tags/MVC/"/>
    
      <category term="WebAPI" scheme="https://kevin8656.github.io/tags/WebAPI/"/>
    
      <category term="ASP.Net Core 3.0" scheme="https://kevin8656.github.io/tags/ASP-Net-Core-3-0/"/>
    
      <category term="SQL Server" scheme="https://kevin8656.github.io/tags/SQL-Server/"/>
    
  </entry>
  
  <entry>
    <title>【ASP.Net Core 3.0應用程式開發-1】什麼是.Net Core? ft.基礎API專案建立</title>
    <link href="https://kevin8656.github.io/2019/09/28/20190928-dotnetcore3beginner/"/>
    <id>https://kevin8656.github.io/2019/09/28/20190928-dotnetcore3beginner/</id>
    <published>2019-09-28T11:13:43.000Z</published>
    <updated>2019-10-02T02:05:37.547Z</updated>
    
    <content type="html"><![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>以前剛開始寫程式的時候，第一個接觸到的程式語言就是C#，使用的框架則是ASP.Net Framework，當時整天抱著一本C# MVC的書每天K，K到最後都有點昏頭了。而最近剛好開始有機會分享自己所學，因此想要從頭開始整理一下自己在.Net學習的過程，並且將這些歷程中的重點分享給身邊想學的人。</p><p>這幾年來除了.Net Framework，很多人也開始使用微軟另一個開發框架.Net Core，而這兩種開發框架之間到底有什麼不同呢？讓我們一起看下去吧！</p><blockquote><p>這一系列的文章比較偏向讓大家看完能夠有一些比較基本的觀念，並且會附加比較多的實作教學，因此可能解釋一些觀念的時候，不會用太精細的方式來與大家做探討，請大家多多見諒！主要想讓大家對觀念的理解可以剛好輔助實作就好，如果對觀念有更深的興趣歡迎尋找更多文章，或者看我文中提到的更深入的文章，也可以在下方回應與大家分享自己看到的資訊哦～！</p></blockquote><a id="more"></a><h2 id="什麼是-Net-Core？什麼是開發框架？"><a href="#什麼是-Net-Core？什麼是開發框架？" class="headerlink" title="什麼是.Net Core？什麼是開發框架？"></a>什麼是.Net Core？什麼是開發框架？</h2><h3 id="Net-Core介紹"><a href="#Net-Core介紹" class="headerlink" title=".Net Core介紹"></a>.Net Core介紹</h3><p><img src="0.png" alt="0"></p><p>簡單來說.Net Core是ASP.Net新一代的開發框架，是微軟開發的第一個跨平台的框架。跨平台的意思就是指它相較於.NET Framework只能運行在Windows上的這個限制，.Net Core可以在Windows、MacOSX、Linux三種作業系統上運行。但因為Windows有Visual Studio這個強大的IDE，所以我還是都用MAC開虛擬機跑Windows再跑VS來開發啦，但當你要部署的時候就可以考慮用個Linux系統，裝個.Net Core RunTime環境，就可以把專案架設起來了，挺方便的。</p><h3 id="開發框架簡述"><a href="#開發框架簡述" class="headerlink" title="開發框架簡述"></a>開發框架簡述</h3><p>簡單來說，開發框架就是有人將一些常用的可以重複使用的程式寫成一包工具，讓想要開發者可以呼叫框架方法，就能省去開發一些常用又複雜的功能，用最快速的方式開發自己的應用程式。</p><h3 id="使用框架的好處"><a href="#使用框架的好處" class="headerlink" title="使用框架的好處"></a>使用框架的好處</h3><p>使用框架最大的好處就是，可以站在巨人的肩膀上，來開發自己想要的功能。假設今天想要蓋一棟房子，你是自己從頭一磚一瓦的蓋起來比較簡單呢，還是你拿一個現成的房屋骨架在上面添添補補比較容易？一定是利用半成品的骨架，加上一些自己需要的東西比較容易的，這就是使用框架可以帶來的好處。</p><h2 id="建立第一個-Net-Core-API專案"><a href="#建立第一個-Net-Core-API專案" class="headerlink" title="建立第一個.Net Core API專案"></a>建立第一個.Net Core API專案</h2><h3 id="開發環境"><a href="#開發環境" class="headerlink" title="開發環境"></a>開發環境</h3><p>我目前在Window 10中安裝的開發環境如下，如果還沒安裝開發環境的可以先去安裝一下，如果真的安裝遇到問題可以下面回應我哦：</p><ul><li><p>Visual Studio 2019 Community（安裝過程記得勾選「.Net Core跨平台開發」）<a href="https://visualstudio.microsoft.com/zh-hant/thank-you-downloading-visual-studio/?sku=Community&rel=16" target="_blank" rel="noopener">安裝連結</a></p></li><li><p>SQL Server Developer 2017 <a href="https://go.microsoft.com/fwlink/?linkid=853016" target="_blank" rel="noopener">安裝連結</a></p></li><li><p>SQL Server Management Studio 2018 <a href="https://go.microsoft.com/fwlink/?linkid=2099720" target="_blank" rel="noopener">安裝連結</a></p></li></ul><h3 id="建立專案"><a href="#建立專案" class="headerlink" title="建立專案"></a>建立專案</h3><ol><li>首先請打開Visual Studio 2019</li></ol><p><img src="1.png" alt="1"></p><ol start="2"><li>點擊「建立新的專案」，之後會進到以下畫面</li></ol><p><img src="2.png" alt="2"></p><ol start="3"><li>選擇「ASP .NET Core Web 應用程式」，並點選「下一步」</li></ol><p><img src="3.png" alt="3"></p><ol start="4"><li>進入到專案資訊設定畫面，請將專案名稱改為“DotNetCoreProject_你的名字”，選取要儲存的路徑之後，點選「建立」</li></ol><p><img src="4.png" alt="4"></p><ol start="5"><li>接下來要選擇專案的框架及架構，框架部分我們選擇.Net Core 最新版3.0來實作，而專案架構我們選「API」架構，來作為應用程式的後端。最後點選「建立」</li></ol><p><img src="5.png" alt="5"></p><ol start="6"><li>等待Visual Studio幫你建立專案</li></ol><p><img src="6.png" alt="6"></p><ol start="7"><li>專案建立成功的畫面如下，可以檢查一下右邊的專案目錄是不是與下圖相同，也可以點開圖中的「Controllers/WeatherForecastController.cs」來看看裡面的程式碼是否跟下圖中一樣</li></ol><p><img src="7.png" alt="7"></p><ol start="8"><li>點擊上方「IIS Express」來運行專案</li></ol><p><img src="8.png" alt="8"></p><ol start="9"><li>運行後瀏覽器畫面應該如下圖，如果有顯示這樣型態的資料，就代表你的.Net Core 3.0 API專案成功建立並且可以運行囉！</li></ol><p><img src="9.png" alt="9"></p>]]></content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;前言&quot;&gt;&lt;a href=&quot;#前言&quot; class=&quot;headerlink&quot; title=&quot;前言&quot;&gt;&lt;/a&gt;前言&lt;/h2&gt;&lt;p&gt;以前剛開始寫程式的時候，第一個接觸到的程式語言就是C#，使用的框架則是ASP.Net Framework，當時整天抱著一本C# MVC的書每天K，K到最後都有點昏頭了。而最近剛好開始有機會分享自己所學，因此想要從頭開始整理一下自己在.Net學習的過程，並且將這些歷程中的重點分享給身邊想學的人。&lt;/p&gt;
&lt;p&gt;這幾年來除了.Net Framework，很多人也開始使用微軟另一個開發框架.Net Core，而這兩種開發框架之間到底有什麼不同呢？讓我們一起看下去吧！&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;這一系列的文章比較偏向讓大家看完能夠有一些比較基本的觀念，並且會附加比較多的實作教學，因此可能解釋一些觀念的時候，不會用太精細的方式來與大家做探討，請大家多多見諒！主要想讓大家對觀念的理解可以剛好輔助實作就好，如果對觀念有更深的興趣歡迎尋找更多文章，或者看我文中提到的更深入的文章，也可以在下方回應與大家分享自己看到的資訊哦～！&lt;/p&gt;
&lt;/blockquote&gt;
    
    </summary>
    
      <category term="ASP.Net Core" scheme="https://kevin8656.github.io/categories/ASP-Net-Core/"/>
    
    
      <category term="Visual Studio" scheme="https://kevin8656.github.io/tags/Visual-Studio/"/>
    
      <category term="DotNetCore" scheme="https://kevin8656.github.io/tags/DotNetCore/"/>
    
      <category term="C#" scheme="https://kevin8656.github.io/tags/C/"/>
    
      <category term="MVC" scheme="https://kevin8656.github.io/tags/MVC/"/>
    
      <category term="WebAPI" scheme="https://kevin8656.github.io/tags/WebAPI/"/>
    
      <category term="ASP.Net Core 3.0" scheme="https://kevin8656.github.io/tags/ASP-Net-Core-3-0/"/>
    
  </entry>
  
  <entry>
    <title>【WebStorm IDE】解決IDE總是在indexing的問題</title>
    <link href="https://kevin8656.github.io/2019/08/12/20190812-WebStormAlwaysIndexing/"/>
    <id>https://kevin8656.github.io/2019/08/12/20190812-WebStormAlwaysIndexing/</id>
    <published>2019-08-12T13:21:53.000Z</published>
    <updated>2019-08-14T14:33:47.784Z</updated>
    
    <content type="html"><![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>最近遠端工作的案子都是一些前端的專案，一直以來我都是用Visual Code加一些針對語言的額外Plugin來開發前端的專案，不過剛好聽到同事在說JetBrains 的 WebStorm IDE蠻好用的，因此就趁著最近都在家裡工作+打混摸魚的時刻來試一下這款沒碰過的IDE。</p><a id="more"></a><p><img src="1.jpg" alt></p><p>花了些時間調整字型、字體大小、Code Highlight等會讓我工作更舒適的東西之後，我就開始拿這個IDE開始實作需求了。</p><p>我寫程式有個習慣，那就是打了一部分Code之後就會Beautify一下Code，或是看到ESLint在嗆我我就會去理他一下，但在開發專案的時候我發現一件讓我很困擾的事情，那就是這個IDE一直不斷地顯示他在indexing（如下圖）</p><p><img src="2.jpg" alt></p><p>而在indexing的時候，我就沒辦法使用WebStorm內建的Prettier或者用alt + Enter去自動讓ESLint幫我解決它的報錯。</p><p>一開始就乖乖得等他indexing好，但後來發現，天啊怎麼在我寫Code的一整個下午時間裡，大半的時間他都在indexing呀！這樣好像不太正常</p><p>花了一些查了些資料後，終於在看了一些文章之後找到了解決辦法。而在講解決辦法之前先來說一下為什麼會有這個indexing endless的情況出現吧。</p><h2 id="原因與解決辦法"><a href="#原因與解決辦法" class="headerlink" title="原因與解決辦法"></a>原因與解決辦法</h2><h3 id="發生Indexing-Endless的原因"><a href="#發生Indexing-Endless的原因" class="headerlink" title="發生Indexing Endless的原因"></a>發生Indexing Endless的原因</h3><p>因為我在做的這個專案是一個PHP + Vue.js的專案，而當初建立專案架構的人是自己寫了Webpack會把前端的東西包成靜態檔案，並且放到一個/public的資料夾下。</p><p>而我平常開發的時候我的command line會開兩個視窗，一個是run PHP Laravel框架的運行環境，另一個就是用node來監聽我前端檔案的變化，並且即時地去呼叫WebPack幫我打包檔案，這樣我就可以在我在編輯器中每按下一次儲存時，自動觸發包成靜態檔案，就可以直接在瀏覽器上看到Feature變化了。</p><p><img src="3.jpg" alt></p><p>回到正題，就是因為上述的情況，因此對IDE來說，我的靜態檔案一直不斷不斷的在變更，而WebStorm畢竟是一款IDE，因此他在偵測到靜態檔案變更後，會不斷的re-index我們的檔案，造成我整個開發過程都是不斷的在indexing檔案的狀況（WebStorm真是好棒棒好認真re-index呀！xD）</p><p>因此解決辦法就是，我們要將所有會持續變更（比如靜態檔案、套件模組檔案）都排除在IDE的re-index範圍內，這樣就可以防止IDE不斷的在re-index，以至於prettier或者ESlint修正工具都不能用的狀況。</p><h3 id="解決步驟"><a href="#解決步驟" class="headerlink" title="解決步驟"></a>解決步驟</h3><ol><li>首先我們先望向我們的專案檔案目錄，找到你要排除的那個檔案（不要問我要排除啥檔案，要按照你的專案來判斷囉，你的專案你最了解xD）：<img src="4.jpg" alt></li><li>接下來對那個檔案點右鍵看到選單，並且找到「Make Directory as 」-&gt; 「Excluded」：<img src="5.jpg" alt></li><li>然後你就會看到資料夾變色拉！這就代表他已被排除在專案名單之外，IDE就不會一直找碴去監聽這個資料夾的變化囉！（上面的node_modules呈現一個很詭異的土黃色xDDD）：<img src="6.jpg" alt></li></ol><h2 id="結語"><a href="#結語" class="headerlink" title="結語"></a>結語</h2><p>大概就是這樣的一個情況，想說可能半年一年後自己或朋友遇到這樣的情況，我一定就忘記我當初是怎麼解決的了。</p><p>因此就來小小紀錄一下，如果最近對新IDE有興趣，或者你已經寫前端很久但是都是用<a href="https://www.sublimetext.com/" target="_blank" rel="noopener">Sublime Text </a>或者<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">Visual Studio Code</a>再開發的話，我推薦你可以玩看看<a href="https://www.jetbrains.com/webstorm/" target="_blank" rel="noopener">JetBrains WebStorm</a>這款IDE哦～（我們可以一起交流學習，我也還不是很熟）</p>]]></content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;前言&quot;&gt;&lt;a href=&quot;#前言&quot; class=&quot;headerlink&quot; title=&quot;前言&quot;&gt;&lt;/a&gt;前言&lt;/h2&gt;&lt;p&gt;最近遠端工作的案子都是一些前端的專案，一直以來我都是用Visual Code加一些針對語言的額外Plugin來開發前端的專案，不過剛好聽到同事在說JetBrains 的 WebStorm IDE蠻好用的，因此就趁著最近都在家裡工作+打混摸魚的時刻來試一下這款沒碰過的IDE。&lt;/p&gt;
    
    </summary>
    
      <category term="WebStorm" scheme="https://kevin8656.github.io/categories/WebStorm/"/>
    
    
      <category term="IDE" scheme="https://kevin8656.github.io/tags/IDE/"/>
    
      <category term="WebStorm" scheme="https://kevin8656.github.io/tags/WebStorm/"/>
    
      <category term="JavaScript" scheme="https://kevin8656.github.io/tags/JavaScript/"/>
    
      <category term="WebPack" scheme="https://kevin8656.github.io/tags/WebPack/"/>
    
  </entry>
  
  <entry>
    <title>【JS圖片格式轉換】Javascript將base64/jpeg轉換成base64/png格式</title>
    <link href="https://kevin8656.github.io/2019/08/07/20190807-JavaScriptBase64jpegToBase64png/"/>
    <id>https://kevin8656.github.io/2019/08/07/20190807-JavaScriptBase64jpegToBase64png/</id>
    <published>2019-08-07T03:53:25.000Z</published>
    <updated>2019-08-14T14:33:47.782Z</updated>
    
    <content type="html"><![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>最近開始跟一間公司配合遠端工作，主要是做vue.js的專案維護跟開發工作，然後有個需求是要在系統上使用WebCam接上攝像頭，並且用攝像頭拍照之後，將照片上傳到使用者檔案裡。</p><p>原先系統中就有上傳圖片的功能，當初api設計時，參數是接收base64的png格式，並且會在後端轉檔成jpeg後儲存，但我裝了<a href="https://github.com/VinceG/vue-web-cam" target="_blank" rel="noopener">vue-web-cam</a>這套件之後，才發現他Capture WebCam之後拿到的base64格式是jpeg，若我將這圖片資料原封不動丟到以前的上傳圖片API，圖片在後端轉檔後就會損毀，如下圖</p><a id="more"></a><p><img src="02.jpg" alt></p><p>因此我只有兩個選項</p><ol><li>等待後端將API改為可以接收png &amp; jpeg兩種格式的資料</li><li>直接在前端取得base64圖片檔時，從jpeg格式轉為png</li></ol><p>因為後端工程師剛好在忙，所以我就直接自己嘗試轉格式看看了</p><h2 id="轉檔過程"><a href="#轉檔過程" class="headerlink" title="轉檔過程"></a>轉檔過程</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">async</span> uploadCapture() &#123;</span><br><span class="line">  <span class="keyword">const</span> &#123; customerId &#125; = <span class="keyword">this</span>.$store.getters;</span><br><span class="line">  <span class="keyword">const</span> payload = &#123;&#125;;</span><br><span class="line">  payload.id = customerId;</span><br><span class="line">  <span class="keyword">const</span> base64png = <span class="keyword">await</span> <span class="keyword">this</span>.jpeg2png(<span class="keyword">this</span>.img);</span><br><span class="line">  payload.canvas = base64png;</span><br><span class="line">  <span class="keyword">this</span>.$emit(<span class="string">"dialogWebCamUploadFiles"</span>, payload);</span><br><span class="line">  <span class="keyword">this</span>.handleClose();</span><br><span class="line">&#125;,</span><br><span class="line">jpeg2png(base64jpeg) &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="params">resolve</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> img = <span class="keyword">new</span> Image();</span><br><span class="line">    img.setAttribute(<span class="string">"src"</span>, base64jpeg);</span><br><span class="line">    img.setAttribute(<span class="string">"crossOrigin"</span>, <span class="string">"anonymous"</span>);</span><br><span class="line">    img.onload = <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">const</span> canvas = <span class="built_in">document</span>.createElement(<span class="string">"canvas"</span>);</span><br><span class="line">      canvas.width = img.width;</span><br><span class="line">      canvas.height = img.height;</span><br><span class="line">      <span class="keyword">const</span> ctx = canvas.getContext(<span class="string">"2d"</span>);</span><br><span class="line">      ctx.drawImage(img, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">      <span class="keyword">const</span> dataURL = canvas.toDataURL(<span class="string">"image/png"</span>);</span><br><span class="line">      resolve(dataURL);</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;);</span><br></pre></td></tr></table></figure><p>這邊我主要是在我上傳檔案（uploadCapture）這個function中先將this.img這個base64/jpeg格式的資料丟入jpeg2png的function裡面轉檔，然後再將轉好的base64png檔案傳至後端儲存。在過程中有使用到canvas這東西，有興趣多了解的人可以<a href="https://developer.mozilla.org/zh-TW/docs/Web/API/Canvas_API" target="_blank" rel="noopener">點這裡過去看</a></p><p>而網路上也有找到一個別人寫的文章是專門在講JavaScript各種圖片格式轉檔語法的，雖然我原封不動抓過來用沒辦法用xDD但是我修修改改之後就可以用了，也算是有幫助，在這邊把裡面用到的各種轉檔方式也放進這篇文章，提供以後遇到此類問題的開發者可以更快找到這些轉來轉去的方法。感謝<a href="https://chiayilai.com/image-各種型態轉換blob-dataurl-canvas-in-javascript/" target="_blank" rel="noopener">image 各種型態轉換(blob, dataURL, canvas) in JavaScript</a>的作者</p><hr><h2 id="其他轉換方式紀錄"><a href="#其他轉換方式紀錄" class="headerlink" title="其他轉換方式紀錄"></a>其他轉換方式紀錄</h2><blockquote><p>以下紀錄來自<a href="https://chiayilai.com/image-各種型態轉換blob-dataurl-canvas-in-javascript/" target="_blank" rel="noopener">image 各種型態轉換(blob, dataURL, canvas) in JavaScript</a>文章</p></blockquote><h3 id="blob-轉成-dataURL"><a href="#blob-轉成-dataURL" class="headerlink" title="blob 轉成 dataURL"></a>blob 轉成 dataURL</h3><p>blob 和 file 都可以使用，從 blob 讀取資料的唯一方式就是使用 FileReader。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">blobtoDataURL</span>(<span class="params">blob, callback</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> fr = <span class="keyword">new</span> FileReader();</span><br><span class="line">    fr.onload = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">        callback(e.target.result);</span><br><span class="line">    &#125;;</span><br><span class="line">    fr.readAsDataURL(blob);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">blobtoDataURL(blob, <span class="function"><span class="keyword">function</span> (<span class="params">dataURL</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(dataURL);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><h3 id="dataURL-繪製到-canvas"><a href="#dataURL-繪製到-canvas" class="headerlink" title="dataURL 繪製到 canvas"></a>dataURL 繪製到 canvas</h3><p>新增一個 image 和 canvas，image src 屬性帶入 dataURL，然後用 canvas drawImage 繪製剛才新增的 image。之後就可以用 canvas 來幫 image 做很多事，例如裁切、縮放、打字、畫線條等等。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> img = <span class="keyword">new</span> Image(),</span><br><span class="line">    canvas = <span class="built_in">document</span>.createElement(<span class="string">'canvas'</span>),</span><br><span class="line">    ctx = canvas.getContext(<span class="string">'2d'</span>);</span><br><span class="line">img.onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    ctx.drawImage(img);</span><br><span class="line">&#125;;</span><br><span class="line">img.src = dataURL;</span><br></pre></td></tr></table></figure><h3 id="canvas-轉成-dataURL"><a href="#canvas-轉成-dataURL" class="headerlink" title="canvas 轉成 dataURL"></a>canvas 轉成 dataURL</h3><p>這個最簡單。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">canvas.toDataURL(); <span class="comment">// 預設會轉成 image/png</span></span><br><span class="line">canvas.toDataURL(<span class="string">'image/jpeg'</span>, <span class="number">0.8</span>); <span class="comment">// 可指定 jpeg 品質</span></span><br></pre></td></tr></table></figure><h3 id="canvas-轉成-blob"><a href="#canvas-轉成-blob" class="headerlink" title="canvas 轉成 blob"></a>canvas 轉成 blob</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">canvas.toBlob(<span class="function"><span class="keyword">function</span>(<span class="params">blob</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(blob);</span><br><span class="line">&#125;, <span class="string">"image/jpeg"</span>, <span class="number">0.8</span>);</span><br></pre></td></tr></table></figure><h3 id="dataURL-轉成-blob"><a href="#dataURL-轉成-blob" class="headerlink" title="dataURL 轉成 blob"></a>dataURL 轉成 blob</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">dataURItoBlob</span>(<span class="params">dataURI</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// convert base64/URLEncoded data component to raw binary data held in a string</span></span><br><span class="line">    <span class="keyword">var</span> byteString;</span><br><span class="line">    <span class="keyword">if</span> (dataURI.split(<span class="string">','</span>)[<span class="number">0</span>].indexOf(<span class="string">'base64'</span>) &gt;= <span class="number">0</span>)</span><br><span class="line">        byteString = atob(dataURI.split(<span class="string">','</span>)[<span class="number">1</span>]);</span><br><span class="line">    <span class="keyword">else</span></span><br><span class="line">        byteString = <span class="built_in">unescape</span>(dataURI.split(<span class="string">','</span>)[<span class="number">1</span>]);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// separate out the mime component</span></span><br><span class="line">    <span class="keyword">var</span> mimeString = dataURI.split(<span class="string">','</span>)[<span class="number">0</span>].split(<span class="string">':'</span>)[<span class="number">1</span>].split(<span class="string">';'</span>)[<span class="number">0</span>];</span><br><span class="line"></span><br><span class="line">    <span class="comment">// write the bytes of the string to a typed array</span></span><br><span class="line">    <span class="keyword">var</span> ia = <span class="keyword">new</span> <span class="built_in">Uint8Array</span>(byteString.length);</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; byteString.length; i++) &#123;</span><br><span class="line">        ia[i] = byteString.charCodeAt(i);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> Blob([ia], &#123;<span class="attr">type</span>:mimeString&#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>]]></content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;前言&quot;&gt;&lt;a href=&quot;#前言&quot; class=&quot;headerlink&quot; title=&quot;前言&quot;&gt;&lt;/a&gt;前言&lt;/h2&gt;&lt;p&gt;最近開始跟一間公司配合遠端工作，主要是做vue.js的專案維護跟開發工作，然後有個需求是要在系統上使用WebCam接上攝像頭，並且用攝像頭拍照之後，將照片上傳到使用者檔案裡。&lt;/p&gt;
&lt;p&gt;原先系統中就有上傳圖片的功能，當初api設計時，參數是接收base64的png格式，並且會在後端轉檔成jpeg後儲存，但我裝了&lt;a href=&quot;https://github.com/VinceG/vue-web-cam&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;vue-web-cam&lt;/a&gt;這套件之後，才發現他Capture WebCam之後拿到的base64格式是jpeg，若我將這圖片資料原封不動丟到以前的上傳圖片API，圖片在後端轉檔後就會損毀，如下圖&lt;/p&gt;
    
    </summary>
    
      <category term="JavaScript" scheme="https://kevin8656.github.io/categories/JavaScript/"/>
    
    
      <category term="blob" scheme="https://kevin8656.github.io/tags/blob/"/>
    
      <category term="Base64" scheme="https://kevin8656.github.io/tags/Base64/"/>
    
      <category term="JS圖片格式轉換" scheme="https://kevin8656.github.io/tags/JS%E5%9C%96%E7%89%87%E6%A0%BC%E5%BC%8F%E8%BD%89%E6%8F%9B/"/>
    
  </entry>
  
  <entry>
    <title>【Git學習筆記】Git Commit Log 最佳實踐</title>
    <link href="https://kevin8656.github.io/2019/07/28/20190728-CommitizenUsage/"/>
    <id>https://kevin8656.github.io/2019/07/28/20190728-CommitizenUsage/</id>
    <published>2019-07-28T12:58:37.000Z</published>
    <updated>2019-11-13T14:55:24.552Z</updated>
    
    <content type="html"><![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>在實作專案過程中時常會需要使用版本控制，而目前我都是使用Git來作為我的版控環境。</p><p>最近剛好在公司的一堂CI/CD課程下課後，與講師聊到了git flow的管理，以及一些使用Git的小技巧，</p><p>無意聽說了“最佳實踐”這個名詞，據說是從AngularJS的規範出來的，這部分我還沒有詳細研究。</p><p>而在Git的Commit Log也可以做“最佳實踐”，關於最佳實踐的觀念，有興趣的朋友可以<a href="https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#heading=h.uyo6cb12dt6w" target="_blank" rel="noopener">看這裡</a></p><p>而講師介紹給了我若想要快速地做到Commit Log的最佳實踐，可以使用<strong>Commitizen</strong>這個套件比較方便快速上手。</p><a id="more"></a><p>此套件的GitHub<a href="https://github.com/commitizen/cz-cli" target="_blank" rel="noopener">連結在此</a>，若想要在非NodeJS的專案裝這個套件來使用的話也別忘了先使用以下指令去建立出package.json檔案哦！</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># npm init</span></span><br></pre></td></tr></table></figure><p>因為還沒有時間深入研究整個最佳實踐的規範，只有簡單用Vue CLI建立了一個新專案，並且在其中安裝上Commitizen這個套件，稍微玩了一下，若你是已經習慣使用指令來進行git版本控制的人，這個套件將會非常適合你。大家歡迎去玩玩看再來分享心得哦！</p>]]></content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;前言&quot;&gt;&lt;a href=&quot;#前言&quot; class=&quot;headerlink&quot; title=&quot;前言&quot;&gt;&lt;/a&gt;前言&lt;/h2&gt;&lt;p&gt;在實作專案過程中時常會需要使用版本控制，而目前我都是使用Git來作為我的版控環境。&lt;/p&gt;
&lt;p&gt;最近剛好在公司的一堂CI/CD課程下課後，與講師聊到了git flow的管理，以及一些使用Git的小技巧，&lt;/p&gt;
&lt;p&gt;無意聽說了“最佳實踐”這個名詞，據說是從AngularJS的規範出來的，這部分我還沒有詳細研究。&lt;/p&gt;
&lt;p&gt;而在Git的Commit Log也可以做“最佳實踐”，關於最佳實踐的觀念，有興趣的朋友可以&lt;a href=&quot;https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#heading=h.uyo6cb12dt6w&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;看這裡&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;而講師介紹給了我若想要快速地做到Commit Log的最佳實踐，可以使用&lt;strong&gt;Commitizen&lt;/strong&gt;這個套件比較方便快速上手。&lt;/p&gt;
    
    </summary>
    
      <category term="Git" scheme="https://kevin8656.github.io/categories/Git/"/>
    
    
      <category term="Git" scheme="https://kevin8656.github.io/tags/Git/"/>
    
      <category term="Commitizen" scheme="https://kevin8656.github.io/tags/Commitizen/"/>
    
  </entry>
  
  <entry>
    <title>【Notion學習筆記】初入Notion-每週隨記（Weekly Note）建置逐步教學</title>
    <link href="https://kevin8656.github.io/2019/07/15/20190715-Notion-Usage-1/"/>
    <id>https://kevin8656.github.io/2019/07/15/20190715-Notion-Usage-1/</id>
    <published>2019-07-15T09:13:41.000Z</published>
    <updated>2020-01-25T10:06:42.842Z</updated>
    
    <content type="html"><![CDATA[<p>歡迎大家可以前去我另一個Blog 「Mr.K | 領先時代」查看更完整的Notion教學文章哦，文章中會包括本篇文章所講的每週隨記，並且還有很多很多內容，可以點以下連結過去：</p><p><a href="https://leadingmrk.com/the-most-complete-guide-to-notion/" target="_blank" rel="noopener">【Notion教學】- 史上最完整Notion筆記軟體的使用教學！1小時快速上手懶人包、進階使用技巧、各種使用情境與模板</a></p><h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>前幾天看到網路上大家很多人都在分享Notion這個筆記軟體，似乎集合了各種筆記功能，像是Evernote + Trello的合體，並且多了一些自己的功能</p><p>感覺是個綜合的筆記軟體，看大家這麼熱烈的分享，讓我也想要來玩玩這個筆記軟體。</p><p>而在昨天安裝完Notion之後，今天開始試用了一下，因此想要紀錄一下今天試用的感受。</p><p>首先先附上有我邀請碼的Notion註冊連結，有興趣的朋友可以點以下連結去註冊並且使用看看免費版Notion哦~</p><p><a href="https://leadingmrk.com/notion" target="_blank" rel="noopener">Notion註冊連結</a></p><p>點進去之後看到下圖上面箭頭的地方有顯示我的名字，就是有成功哦(用邀請碼註冊可以拿到10USD，然後我也能拿到5USD，未來如果免費版不夠用就可以拿這些錢去抵每月花費!每月似乎是4USD吧!)</p><a id="more"></a><p><img src="2.jpg" alt="2"></p><h2 id="Notion初次體驗-Weekly-Note"><a href="#Notion初次體驗-Weekly-Note" class="headerlink" title="Notion初次體驗-Weekly Note"></a>Notion初次體驗-Weekly Note</h2><h3 id="Weekly-Note的用途與目的"><a href="#Weekly-Note的用途與目的" class="headerlink" title="Weekly Note的用途與目的"></a>Weekly Note的用途與目的</h3><p><img src="1.jpg" alt="1"></p><p>網路上剛好看到<a href="https://medium.com/@Johann016/教學-一小時加入-notion-so-cd2b5ca8a7fe" target="_blank" rel="noopener">這篇文章</a>在談論該如何1小時快速入門Notion，我對裡頭的其中一個練習主題很有興趣，那就是「Weekly Note」。</p><p>「Weekly Note」就是將每週分成Monday到Sunday，並且可以讓我在每天不管是上班或者上課的過程，有任何想要紀錄的想法、筆記、資料或是網頁等，都可以將這些東西「暫存」到Notion的Weekly Note中記錄下來，等一週後再回過頭將這些臨時的想法歸類、整理。</p><p>那篇文章中說到：在「暫存」的過程中，你可以嘗試不同的編輯：放大標題、改變顏色、用 Toggle List 整理等等。<strong>這樣，你一邊熟悉 Notion 的指定，一邊收納整理了一週的想法。</strong></p><p>我覺得非常有道理，所以今天就花了點時間試了試，最後目前使用的畫面大概如下圖：</p><p><img src="3.jpg" alt="3"></p><p>讓我們開始做一個Weekly Note的模板，來記錄每天的想法順便練習使用Notion吧！</p><h3 id="一、建立個人主頁"><a href="#一、建立個人主頁" class="headerlink" title="一、建立個人主頁"></a>一、建立個人主頁</h3><ol><li><p>首先，點選Notion介面左下角的「＋New Page」按鈕，叫出新增頁面的視窗。</p><p><img src="4.jpg" alt="4"></p></li><li><p>在新頁面的上方標題區塊寫入個人主頁的名稱，可以簡單叫做「XXX的個人主頁」。</p><p><img src="5.jpg" alt="5"></p></li><li><p>在標題區塊上方可以看到「Add Icon」、「Add Cover」按鈕，分別是新增此頁面的Icon還有新增頁面最上方的封面照片。</p><p><img src="6.jpg" alt="6"></p></li><li><p>選擇完Icon以及封面照片後畫面如下圖。</p><p><img src="7.jpg" alt="7"></p></li><li><p>接下來，在個人主頁標題區塊上按下「Enter」、或是直接點選下一行的空白區塊新增一行欄位。</p><p><img src="8.jpg" alt="8"></p></li><li><p>點選該行左邊的「＋」符號，叫出Commands視窗。</p><p><img src="9.jpg" alt="9"></p></li><li><p>選擇「Page」型態並點下去新增一個頁面（此頁面會新增在剛建立的個人主頁中）。</p><p><img src="10.jpg" alt="10"></p></li><li><p>新增出新頁面後，依照上述步驟再次將標題、Icon、封面照片設定為「Weekly Note」。</p><p><img src="11.jpg" alt="11"></p></li><li><p>回到個人主頁看，就可以看到有一行資料，並且點選該行資料會跳到剛剛後面所建立的「Weekly Note」頁面。</p><p><img src="12.jpg" alt="12"></p></li></ol><h3 id="二、建立Weekly-Note頁面標題"><a href="#二、建立Weekly-Note頁面標題" class="headerlink" title="二、建立Weekly Note頁面標題"></a>二、建立Weekly Note頁面標題</h3><ol><li><p>回到我們的Weekly Note頁面上，這次請點選空白處，輸入「/」來叫出Commands視窗，並且選擇其中的「Heading 1」標題型態文字。</p><p><img src="13.jpg" alt="13"></p></li><li><p>打上文字「Monday」後，將文字全選，之後就會跳出文字樣式框，選取「Text Color」文字顏色選項。</p><p><img src="14.jpg" alt="14"></p></li><li><p>選擇「Orange」顏色（其他顏色也可ㄧ）。</p><p><img src="15.jpg" alt="15"></p></li><li><p>按照上述步驟，將週一至週五的所有標題設定好（這些步驟只是為了做一個比較美觀的Weekly Note頁面，想要有自己其他設計方式的朋友也可以嘗試看看哦！）。</p><p><img src="16.jpg" alt="16"></p></li></ol><h3 id="三、建立標題捷徑"><a href="#三、建立標題捷徑" class="headerlink" title="三、建立標題捷徑"></a>三、建立標題捷徑</h3><p><img src="17.jpg" alt="17"></p><p>接下來我們要在Weekly Note頁面上的標題下新增週一～週五的捷徑，這樣就能直接在瀏覽時點選捷徑跳至週一～週五的其中一天了。</p><ol><li><p>首先先在標題下方打上一行一般文字（也可給予樣式）。</p><p><img src="18.jpg" alt="18"></p></li><li><p>點選剛剛前面新增的「Monday」標題文字左方六個點的圖示。</p><p><img src="19.jpg" alt="19"></p></li><li><p>點選選單中「Copy Link的按鈕」，將此標題文字的連結位置複製起來。</p><p><img src="20.jpg" alt="20"></p></li><li><p>接下來全選第1點所新增的一般文字，點選「Add Link」。</p><p><img src="21.jpg" alt="21"></p></li><li><p>將剛才複製的連結位置貼上，並點選「Link」確認新增連結。</p><p><img src="22.jpg" alt="22"></p></li><li><p>以此類推新增完週一~週五每天的標題文字連結，就可以更方便地在此頁中上下跳轉了。</p><p><img src="23.jpg" alt="23"></p></li></ol><h3 id="四、輸入筆記內容"><a href="#四、輸入筆記內容" class="headerlink" title="四、輸入筆記內容"></a>四、輸入筆記內容</h3><p>接下來要示範一下我自己通常是怎麼使用這份Weekly Note頁面的。</p><ol><li><p>當我想要紀錄某一個我在網路上看到的文章或者網頁時，我會在某個星期標題（比如Monday）下方新增一個Toggle List的文字。</p><p><img src="24.jpg" alt="24"></p></li><li><p>打上此篇網頁的標題。</p><p><img src="25.jpg" alt="25"></p></li><li><p>將連結貼上，並且可以選取「Create Bookmark」產生像是網頁連結的預覽。</p><p><img src="26.jpg" alt="26"></p></li><li><p>效果就會像下圖一樣囉！（還有很多的文字方式可以使用，大家可以自己摸索看看！）</p><p><img src="27.jpg" alt="27"></p></li></ol><h3 id="五、完成品"><a href="#五、完成品" class="headerlink" title="五、完成品"></a>五、完成品</h3><p>完成品就跟下圖一樣，當然這只是其中一個Notion的小小應用，也算是讓我自己記錄一下我使用Notion第一個建立的Tempelate吧！</p><p><img src="28.jpg" alt="28"></p><p>謝謝大家的閱讀，你用了什麼樣的方式去使用Notion呢，也歡迎跟我分享哦！</p>]]></content>
    
    <summary type="html">
    
      &lt;p&gt;歡迎大家可以前去我另一個Blog 「Mr.K | 領先時代」查看更完整的Notion教學文章哦，文章中會包括本篇文章所講的每週隨記，並且還有很多很多內容，可以點以下連結過去：&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://leadingmrk.com/the-most-complete-guide-to-notion/&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;【Notion教學】- 史上最完整Notion筆記軟體的使用教學！1小時快速上手懶人包、進階使用技巧、各種使用情境與模板&lt;/a&gt;&lt;/p&gt;
&lt;h2 id=&quot;前言&quot;&gt;&lt;a href=&quot;#前言&quot; class=&quot;headerlink&quot; title=&quot;前言&quot;&gt;&lt;/a&gt;前言&lt;/h2&gt;&lt;p&gt;前幾天看到網路上大家很多人都在分享Notion這個筆記軟體，似乎集合了各種筆記功能，像是Evernote + Trello的合體，並且多了一些自己的功能&lt;/p&gt;
&lt;p&gt;感覺是個綜合的筆記軟體，看大家這麼熱烈的分享，讓我也想要來玩玩這個筆記軟體。&lt;/p&gt;
&lt;p&gt;而在昨天安裝完Notion之後，今天開始試用了一下，因此想要紀錄一下今天試用的感受。&lt;/p&gt;
&lt;p&gt;首先先附上有我邀請碼的Notion註冊連結，有興趣的朋友可以點以下連結去註冊並且使用看看免費版Notion哦~&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://leadingmrk.com/notion&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;Notion註冊連結&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;點進去之後看到下圖上面箭頭的地方有顯示我的名字，就是有成功哦(用邀請碼註冊可以拿到10USD，然後我也能拿到5USD，未來如果免費版不夠用就可以拿這些錢去抵每月花費!每月似乎是4USD吧!)&lt;/p&gt;
    
    </summary>
    
      <category term="Notion筆記軟體" scheme="https://kevin8656.github.io/categories/Notion%E7%AD%86%E8%A8%98%E8%BB%9F%E9%AB%94/"/>
    
    
      <category term="Notion筆記" scheme="https://kevin8656.github.io/tags/Notion%E7%AD%86%E8%A8%98/"/>
    
      <category term="學習心得" scheme="https://kevin8656.github.io/tags/%E5%AD%B8%E7%BF%92%E5%BF%83%E5%BE%97/"/>
    
      <category term="學習紀錄" scheme="https://kevin8656.github.io/tags/%E5%AD%B8%E7%BF%92%E7%B4%80%E9%8C%84/"/>
    
      <category term="逐步教學" scheme="https://kevin8656.github.io/tags/%E9%80%90%E6%AD%A5%E6%95%99%E5%AD%B8/"/>
    
  </entry>
  
  <entry>
    <title>【Visual Studio 使用筆記】更換Visual Studio 2017版介面語言</title>
    <link href="https://kevin8656.github.io/2019/07/14/20190714-ChangeVisualStudio2017Language/"/>
    <id>https://kevin8656.github.io/2019/07/14/20190714-ChangeVisualStudio2017Language/</id>
    <published>2019-07-14T07:58:18.000Z</published>
    <updated>2019-08-14T14:33:47.721Z</updated>
    
    <content type="html"><![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>距離上一次寫部落格文章，大概已經是四個月以前的事情了</p><p>(<span> ASP.Net</span> Core的Web API專案入門 是從點部落複製過來的哈哈)</p><p>翻開之前在點部落寫的一篇 <span> ASP.Net</span> Core的Web API專案入門教學文章，發現文章內當時截圖都是用公司電腦截圖的</p><p>公司電腦預設是使用英文介面，而我現在在Mac上透過Parallel Desktop建立的Windows 10虛擬機則是中文版的</p><a id="more"></a><p>當初在虛擬機裡面安裝的Visual Studio 2017也是用中文版安裝的，像下圖這樣</p><p><img src="1.jpg" alt="1"></p><p>這讓我很想要把現在的Visual Studio介面改成英文版的，不然我會有截圖語言不統一的強迫症xDD</p><p>因此剛剛摸索了一下，發現語系包是可以不用重新安裝整個Visual Studio，也不用管Windows 10預設系統語言的。</p><p>來記錄一下該怎麼調整Visual Studio語言，以免有人真的為了換介面語言而傻傻的重新安裝整個VS。</p><h2 id="安裝語言包"><a href="#安裝語言包" class="headerlink" title="安裝語言包"></a>安裝語言包</h2><ol><li><p>首先先打開Visual Studio 2017的中文版介面。</p><p> <img src="1.jpg" alt="1"></p></li><li><p>接下來點選上面「工具」-&gt;「取得工具與功能」。</p><p> <img src="2.jpg" alt="2"></p></li><li><p>畫面會出現Visual Studio Installer，跟最初安裝Visual Studio 2017的時候長得一模模一樣樣，點選到「語言套件」分頁。</p><p> <img src="3.jpg" alt="3"></p></li><li><p>把「英文」選起來，並且選取「在下載時安裝」，最後點選「修改」來安裝英文語言套件。</p><p> <img src="4.jpg" alt="4"></p></li><li><p>Visual Studio可能會跳出提示要你關閉一些正在進行中的進程，就點「繼續」他就會幫你儲存狀態並關閉了。</p><p> <img src="5.jpg" alt="5"></p></li><li><p>等待進度條開始下載與安裝（請忽略我慢得要命的網速，我用手機網路T^T）。</p><p> <img src="6.jpg" alt="6"></p></li><li><p>如果你網速跟我一樣慢，大概等個十分鐘之後安裝完成畫面就會長得像這樣，就代表語言包安裝完成囉。</p><p> <img src="7.jpg" alt="7"></p></li></ol><h2 id="調整介面語系"><a href="#調整介面語系" class="headerlink" title="調整介面語系"></a>調整介面語系</h2><ol><li><p>接下來再點開「工具」-&gt; 「選項」。</p><p> <img src="8.jpg" alt="8"></p></li><li><p>選取左邊「國際設定」，並將語言調整為English(若沒有做前述的安裝語言套件動作，則這邊只會有中文的選項)。</p><p> <img src="9.jpg" alt="9"></p></li><li><p>Visual Studio 會提示你要重新啟動才會生效，點選「確定」，並且手動將Visual Studio重新啟動。</p><p> <img src="10.jpg" alt="10"></p></li><li><p>大功告成，你的Visual Studio 2017介面就變成英文的囉！（若要切換成其他語系應該也是一樣的做法）</p><p> <img src="11.jpg" alt="11"></p></li></ol>]]></content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;前言&quot;&gt;&lt;a href=&quot;#前言&quot; class=&quot;headerlink&quot; title=&quot;前言&quot;&gt;&lt;/a&gt;前言&lt;/h2&gt;&lt;p&gt;距離上一次寫部落格文章，大概已經是四個月以前的事情了&lt;/p&gt;
&lt;p&gt;(&lt;span&gt; ASP.Net&lt;/span&gt; Core的Web API專案入門 是從點部落複製過來的哈哈)&lt;/p&gt;
&lt;p&gt;翻開之前在點部落寫的一篇 &lt;span&gt; ASP.Net&lt;/span&gt; Core的Web API專案入門教學文章，發現文章內當時截圖都是用公司電腦截圖的&lt;/p&gt;
&lt;p&gt;公司電腦預設是使用英文介面，而我現在在Mac上透過Parallel Desktop建立的Windows 10虛擬機則是中文版的&lt;/p&gt;
    
    </summary>
    
      <category term="Visual Studio" scheme="https://kevin8656.github.io/categories/Visual-Studio/"/>
    
    
      <category term="工具" scheme="https://kevin8656.github.io/tags/%E5%B7%A5%E5%85%B7/"/>
    
      <category term="IDE" scheme="https://kevin8656.github.io/tags/IDE/"/>
    
      <category term="Visual Studio" scheme="https://kevin8656.github.io/tags/Visual-Studio/"/>
    
      <category term="切換Visual Studio 2017介面語言" scheme="https://kevin8656.github.io/tags/%E5%88%87%E6%8F%9BVisual-Studio-2017%E4%BB%8B%E9%9D%A2%E8%AA%9E%E8%A8%80/"/>
    
  </entry>
  
  <entry>
    <title>【.Net Core2.2】使用ASP.NET Core 建構WEB API專案 ft.環境安裝</title>
    <link href="https://kevin8656.github.io/2019/07/13/20190713-DotNetCore-GettingStarted-1/"/>
    <id>https://kevin8656.github.io/2019/07/13/20190713-DotNetCore-GettingStarted-1/</id>
    <published>2019-07-13T12:11:37.000Z</published>
    <updated>2019-09-28T11:16:32.994Z</updated>
    
    <content type="html"><![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><blockquote><p>專案建得好，續寫維護沒煩惱——-好懶得寫環境安裝XD</p></blockquote><p>因為公司最近的需求，我們要用 .NET Core來建構一個MVC架構的WEB API專案</p><a id="more"></a><p>而每一次使用一個新的程式語言或框架，我個人覺得最重要的就是建專案跟打底層架構了</p><p>俗話說：「專案建得好，續寫維護沒煩惱」(?哪來這句</p><p>好啦這句話是我自創的 哈哈哈 因為過去很多經驗是，當時我根本不會那門程式語言或者框架</p><p>但是有神人同事Carry，把基本的程式架構跟程式流程都建立好了</p><p>所以我要基於那個專案繼續維護或者開發新功能，就變得超級容易（感謝神Carry）</p><p>總之，今天就要來帶大家使用 .NET Core來建立一個WEB API專案，並且比較一下跟一般的MVC專案形式有什麼不同</p><p>Let’s Go！</p><h2 id="開發環境設置與安裝"><a href="#開發環境設置與安裝" class="headerlink" title="開發環境設置與安裝"></a>開發環境設置與安裝</h2><h3 id="安裝Visual-Studio"><a href="#安裝Visual-Studio" class="headerlink" title="安裝Visual Studio"></a>安裝Visual Studio</h3><p>首先在開始做我們今天要做的事情之前，我們要先把我們的環境跟開發工具弄好</p><p>因為ASP.NET是微軟的Solution，因此我們只要下載微軟的一個超強大IDE “Visual Studio”</p><p>幾乎就能幫我們完成後續很多的開發事項以及細節</p><p>所以首先快到微軟的網站尋找 Visual Studio 2017 並且下載下來吧</p><p><a href="https://visualstudio.microsoft.com/zh-hant/?rr=https%3A%2F%2Fwww.google.com%2F" target="_blank" rel="noopener">下載Visual Studio官方連結</a></p><p>（大家可以下載Community版本，我自己是使用公司電腦，裡面內帶Professional版本的Visual Studio 2017）</p><ol><li><p>來到官方的下載頁面，選擇Community版本下載<br><img src="1.jpg" alt="1"></p></li><li><p>接下來跑出下載畫面之後，就把Visual Studio的下載器下載下來吧！<br><img src="2.png" alt="2"></p></li><li><p>執行Visual Studio安裝器之後，請勾選一些會用到的功能（如下圖）<br><img src="3.png" alt="3"></p></li><li><p>還有下面這兩個也可以勾選一下一起安裝<br><img src="4.png" alt="4"></p></li><li><p>假設安裝完成，就可以打開Visual Studio準備開始使用囉！（我這邊沒有重新安裝一次，所以只提供我自己的Visual Studio畫面給大家參考參考）<br><img src="5.png" alt="5"></p></li></ol><h3 id="安裝最新版-NET-Core"><a href="#安裝最新版-NET-Core" class="headerlink" title="安裝最新版 .NET Core"></a>安裝最新版 .NET Core</h3><p>因為不確定大家Visual Studio裡面內建的 .NET Core版本是不是最新的2.2版本，因此這邊也寫一下要安裝最新版的 .NET Core，以免未來會跟套件版本不相容。</p><p><a href="https://dotnet.microsoft.com/download" target="_blank" rel="noopener">.NET Core下載連結</a></p><p>請點選下圖紅框的那個下載並安裝哦，安裝過程就跟一般的驅動程式安裝沒兩樣，這邊就直接略過了。<br><img src="6.png" alt="6"></p><h2 id="建立-NET-Core-WEB-API專案"><a href="#建立-NET-Core-WEB-API專案" class="headerlink" title="建立 .NET Core WEB API專案"></a>建立 .NET Core WEB API專案</h2><h3 id="建立專案"><a href="#建立專案" class="headerlink" title="建立專案"></a>建立專案</h3><p>接下來要帶大家一起建立WEB API專案，我的Visual Studio介面是英文版的，如果有人是裝中文版的話，就自己對照相對位置囉！</p><ol><li><p>首先打開Visual Studio軟體<br><img src="7.png" alt="7"></p></li><li><p>接下來點選File-&gt;New-&gt;Project來建立一個新專案<br><img src="8.png" alt="8"></p></li><li><p>選擇左邊C#中的Web-&gt;點選 ASP .NET Core Web Application-&gt;取一個適合的檔案名稱-&gt;點選OK建立專案<br><img src="9.png" alt="9"></p></li><li><p>接下來要選擇專案類型，我們要選擇的是API專案（如下圖），這個專案建立後只會有一個Controller資料夾，裡面有一個ValueController，內容會有範例WEB API程式碼，稍後會帶大家看一下。<br><img src="10.png" alt="10"></p></li><li><p>專案建立完成後，就可以看到Visual Studio已經幫我們建立了預設的Controllers/ValueController.cs，並且裡面已經有寫了一些基本的GET and POST Function。<br><img src="11.png" alt="11"></p></li></ol><p>到這一步驟，WEB API專案就建立好囉！下一步我們就要開始安裝Entity FrameWork Core2套件，並且初始化我們的Models了！</p><p>那麼假設我們建立的是Web Application(Model-View-Controller)的專案呢（如下圖）?我在建立專案前，也有想嘗試建立這個專案類型，想說有MVC架構，之後再把它寫成WEB API的格式。<br><img src="12.png" alt="12"></p><p>這種專案類型建立起來之後，就會有基礎的MVC架構，不過裡面的程式碼就不會有WEB API的基本Function囉！<br><img src="13.png" alt="13"></p><p>長得其實就跟我以前寫 .NET FrameWork MVC的時候的專案架構一樣，相較之下因為後續要做一些操作，我覺得還是建立WEB API專案會比較方便啦~</p><p>所以這篇文章就到這邊囉</p><p><a href="https://github.com/kevin8656/DotNetCoreMVCWebAPI_Project.git" target="_blank" rel="noopener">GitHub專案連結</a></p>]]></content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;前言&quot;&gt;&lt;a href=&quot;#前言&quot; class=&quot;headerlink&quot; title=&quot;前言&quot;&gt;&lt;/a&gt;前言&lt;/h2&gt;&lt;blockquote&gt;
&lt;p&gt;專案建得好，續寫維護沒煩惱——-好懶得寫環境安裝XD&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;因為公司最近的需求，我們要用 .NET Core來建構一個MVC架構的WEB API專案&lt;/p&gt;
    
    </summary>
    
      <category term="ASP.Net Core" scheme="https://kevin8656.github.io/categories/ASP-Net-Core/"/>
    
    
      <category term="DotNetCore" scheme="https://kevin8656.github.io/tags/DotNetCore/"/>
    
      <category term=".NetCore" scheme="https://kevin8656.github.io/tags/NetCore/"/>
    
      <category term="C#" scheme="https://kevin8656.github.io/tags/C/"/>
    
      <category term="VisualStudio" scheme="https://kevin8656.github.io/tags/VisualStudio/"/>
    
      <category term="MVC" scheme="https://kevin8656.github.io/tags/MVC/"/>
    
      <category term="WebAPI" scheme="https://kevin8656.github.io/tags/WebAPI/"/>
    
  </entry>
  
  <entry>
    <title>2019 新加坡商鈦坦科技 T-Strong Plan 學期實習生 應徵心得（正取一）</title>
    <link href="https://kevin8656.github.io/2018/12/29/20181229-Titansoft-T-Strong-Plan-Interview/"/>
    <id>https://kevin8656.github.io/2018/12/29/20181229-Titansoft-T-Strong-Plan-Interview/</id>
    <published>2018-12-29T04:53:10.000Z</published>
    <updated>2019-08-14T14:33:47.707Z</updated>
    
    <content type="html"><![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>2018年的年底，在碩士甄試告一段落後，因為大四下學期學校沒有必修課，所以我就開始找各種實習工作，希望能找到與我之前實習的公司不同風格的公司，希望是一間比較活潑、公司員工之間比較多互動的公司，看能否學一些不一樣的東西。後來我面試了兩間公司，第一間是位於台中中港五權路交接口，面試風格十分隨性，老闆帶我去頂樓喝咖啡聊是非（聊面試啦xD） ，且公司對面還有超棒的共同工作空間monospace的創科資訊。另一間就是今天要分享的新加坡商-鈦坦科技，主要是因為這次面試經驗實在是太好玩太棒，也覺得他們的團體面試十分有創意，因此很想要分享給大家！</p><a id="more"></a><h2 id="關卡簡介"><a href="#關卡簡介" class="headerlink" title="關卡簡介"></a>關卡簡介</h2><p>第一階段-書面審查<br>第二階段-現場面試<br>筆試（DISC人格測驗、邏輯測驗、城市測驗）<br>團體面試（團隊桌遊）<br>第一階段-書面審查<br>在準備書面審查資料的過程我其實超級緊張，因為之前就聽說過鈦坦都超多人報，而這次最後知道有110個報名，取40位進入第二階段，而最終只會錄取4-6位左右的學期實習生，實在是場硬仗呀！</p><p>而書面審查資料主要分為以下部分：</p><p>「實習報名表」<br>實習報名表是使用鈦坦給的公版簡歷格式，裡面的欄位有個人基本資料、與專長有關之經歷、程式專長、學科專長以及社團經歷等欄位給我們填寫，主要我是如以下這樣填寫這整份簡歷的：</p><ul><li>與專長有關之經歷-過去實習的經驗、實習做過的專案及心得與收穫。</li><li>程式專長-以語言做區分，我寫了三個語言分別是React Native、ASP.net C#及Express（node.js的框架），並且每個語言又用實習、競賽或者專題的專案經歷，去說明這個語言裡面我會什麼、我做過什麼。</li><li>學科專長-這個主要好像是要問在學期間你比較擅長的學科，我寫了幾個我比較高分且有心得的課程，例如跨平台程式設計、雲端與虛擬化等，大多分數都是95-100之間</li><li>社團經歷-這邊我寫了五專期間擔任資管科學會、中科大某一年的程式設計助教經驗還有在上一間實習公司曾經代表公司網路組去參加AWS的研習活動（主要是因為這些經歷不知道可以放在哪裡，就把他們都當作課外經歷，一起放在社團經歷的部分）</li></ul><p>「額外的個人簡歷」<br>額外的個人簡歷我請已經在公司實習的朋友，幫我問了鈦坦的HR需不需要交，因為總覺得我的簡歷都在實習報名表寫很請楚了，感覺有點重複講的感覺。最後得到的回覆是「希望收到一份具有應徵者個人特色的額外簡歷」。</p><blockquote><p>心裡OS：具有應徵者個人特色……啊啊啊啊看來是要考個簡歷版面設計啊xDDD慘囉！</p></blockquote><p>因為我對於版面設計實在不是很拿手，不過人家HR都說要具有「個人特色」了，只好上網狂找模板參考，並且加上自己的一些排版想法硬上了。但，做完之後我發現</p><blockquote><p>啊我做這樣不就很一般常見的簡歷樣式嗎T^T</p></blockquote><p>最後做出來的簡歷長相大概是這樣（內容害羞不給你看）</p><p><img src="1.jpg" alt="1"></p><p>還好最後有進入複試階段，因為聽說鈦坦科技的現場面試非常豐富有趣，所以我是真的很想去面試看看！</p><h2 id="第二階段-現場面試"><a href="#第二階段-現場面試" class="headerlink" title="第二階段-現場面試"></a>第二階段-現場面試</h2><p>第二階段的現場面試主要分為兩個階段，分別是筆試與團體面試。</p><p>在面試當日我來到位於台中市政府內的大樓準備去鈦坦科技面試，突然發覺 這地方我之前來過呀！ 原來鈦坦科技與我曾經去領過獎學金的中國上優公司是在同一間大樓的不同樓層，這邊的環境跟地理位置我都非常喜歡呀！不過在我原本的想像中，還以為鈦坦科技是獨立的一棟建築物然後裡面非常豪華之類的（因為是外商 我想像得超大超豪華xD）</p><p>這次的第二階段-現場面試好像總共分為三天，每天又分為上午跟下午兩場，第三天只有早上，總共五場的樣子。就最後人數上來看應該是每場8人，總共40人。</p><p>當天進到鈦坦的公司，是HR姊姊親自親切的迎接我們，跟我同場的應徵者有三個女生（一個缺席），以及包括我在內的四個男生。進到公司後HR姊姊要我們將鞋子換成拖鞋，並且帶著我們進到了一間看起來像會議室，四面都是玻璃或者白板牆（可以隨意地在牆壁或玻璃上寫重點、畫圖之類的 很棒！）</p><p>會議室中每個座位上已經放好了筆試考卷、筆還有水跟贈送的紀念品-鈦坦鯨魚便條紙，筆試主要有分為三個部分分別是DISC人格測驗、邏輯測驗以及程式測驗，這邊就直接列出來並且附上我的心得：</p><h3 id="「筆試」"><a href="#「筆試」" class="headerlink" title="「筆試」"></a>「筆試」</h3><ul><li>DISC人格測驗<br>我在到鈦坦複試之前我有先上網看別人的心得，大概知道這個人格測驗是為了幫我們在之後的團體面試分組，每一組別內他們希望有不同人格特質的人，並且讓大家互相合作進行團體面試，切磋出不同的火花。</li></ul><p>這邊我非常誠實的填寫，寫之前還以為我會是D型人格特質（掌控型）比較強的人，後來沒寫道寫完計算的結果，我的I型人格特質（影響型）是最高的。而在分數結果裡面，我的S型人格（穩定型）是最低的，摁…….這是在我預料之中啦，我的穩定性真的 有點差啊xD</p><ul><li>邏輯測驗<br>邏輯測驗這一次是透過Windows的服務的啟動狀態來考大家，題目的說明是：</li></ul><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">「服務總共分為A、B、C三個，並且有啟動、停用的兩種狀態。每一個服務都可以設定為自動啟動、手動啟動以及停用三種啟用設定，而服務之間有相依性，這邊相依性為A依賴於B、 B又依賴於C服務。手動啟動可以是讓使用者自己啟動，或者因為相依服務的需求而啟動。」</span><br></pre></td></tr></table></figure><p>因為我自己對服務的啟動有點經驗，我知道這題考的重點就在於最後一句話「因為相依服務的需求而啟動」，意思就是 假設B依賴於C，而C是手動啟動，B是自動啟動的話，代表開機後B會自己啟動，而因為B依賴於C，因此B需要C也啟動，所以C的最終結果也會是啟動狀態。</p><p>理解完題目之後，下面有十五種不同的啟動設定，例如：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">A服務 自動啟動</span><br><span class="line">B服務 手動啟動</span><br><span class="line">C服務 停用</span><br></pre></td></tr></table></figure><p>然後要我們依照題目給的條件，判斷最後這三個服務會是啟用還是停用</p><p>像上面這個題目，A依賴於B，所以照理來說A自動啟動後，B也會跟著啟動，但後面我們發現C服務是設定停用狀態，B依賴於C，因此C不啟動B也不能啟動，也造成A服務跟著不能啟動，所以最終結果就是：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">A服務 停用</span><br><span class="line">B服務 停用</span><br><span class="line">C服務 停用</span><br></pre></td></tr></table></figure><p>而剩下的十四題題目確切是什麼我也不記得了，不過這個邏輯測驗理解他的難點之後就蠻好作答的，這邊的分數我應該是有全部拿到。</p><ul><li>程式測驗<br>而在程式測驗的部分沒有考得很難，我被考到的題目類型大概是下面幾種：</li></ul><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">1.給予邊長，用*號印出直角三角形</span><br><span class="line"></span><br><span class="line">2.找到陣列中重複最多的數字，並且篩選該數字。</span><br><span class="line"></span><br><span class="line">3.痾....忘記了 等我想起來再補</span><br><span class="line"></span><br><span class="line">4.加分題-撰寫一個遞迴，達到費氏數列的效果。</span><br></pre></td></tr></table></figure><p>程式提其實都是考一些基礎程式習題，有複習過的話應該很好拿分，不過聽最後結果我好像是少數程式分數蠻高的應徵者，我在寫的途中用的都是匿名委派，所以也不太容易被挑naming的錯誤。</p><h3 id="「團體面試」"><a href="#「團體面試」" class="headerlink" title="「團體面試」"></a>「團體面試」</h3><p>接下來就要講最精彩的團體面試了，在團體面試也分為幾個部分，分別是暖場活動、橄欖球自我介紹問答以及團體桌遊-體驗敏捷開發的賺錢遊戲</p><ul><li>暖場活動<br>在寫完筆試試卷並且休息了一下後，工作人員們先帶我們到會議室外的大桌子上圍一圈坐著，跟我們說明因為大家感覺很緊張，所以現在要先進行暖場活動，活動內容是要我們每個人抽一張桌遊牌，牌子上會寫著某樣東西，然後給我們一張白紙去用畫圖形容那個東西，最後也讓我們有口頭形容的機會，要想辦法讓其他人猜出你的東西是什麼。</li></ul><p>在這個關卡我抽到聖誕老人，我就畫一張臉+聖誕帽+鬍子，然後被一個從頭到尾都超會猜的女生直接猜中（我一句話都還沒講，她就直接：「我知道！聖誕老人！」了xD）</p><ul><li>橄欖球自我介紹問答<br>而接下來就是大家知道一定會有的自我介紹與問答時間，我們被帶到公司的一個坐著的區域，地板上擺著很多懶人椅跟坐墊，而這次自我介紹的方式是「介紹自己人生中最想和大家分享的三件事」，並且在講之前要跟主持人拿一顆橄欖球抱著，有種拿到話語權力的感覺，這個部分我後來查了一下，這個環節應該就是指敏捷開發中的Scrum吧，Scrum在英語是橄欖球運動中列陣爭球的意思，所以才讓大家拿橄欖球進行自我介紹。</li></ul><p>在這個環節每個人限定兩分鐘，不過其實根本就沒有限定時間，所以不要太客氣要盡可能地講好講滿呀！我這一梯次的應徵者很多樣化，有超級開朗健談的女生、文靜內向的男生、感覺善解人意的女生、還有感覺有點強勢的另一個女生。</p><p>在大家的自我介紹過程中，其實我一直在觀察每個人、分析每個人的個性，並且先為了下一個階段的團體合作桌遊做準備，不管是哪個人都有可能變成我的隊友，我都得想出跟他/她相處討論的方式，因為我知道鈦坦很重視在團體合作中，是否每個隊員都可以發表意見、互相討論並且得出最終答案。如果只有少數幾個人獨攬大局，最後很可能會全軍覆沒大家分數都很低。</p><p>我主要分析的是每個人的個性、喜好、還有他們的雷點。開朗健談的女生我推測可能有時候會有點傻大姐，然後無法顧到其他比較內向的人，可以讓她引導整個環節的氣氛，並且適時的幫她篩選她的意見。文靜內向的男生則讓我感覺他實力非常強，他講出來的方法或結論值得信任，但要想辦法引導他發表意見。善解人意的女生則很適合讓她進行統整規劃，並且作整個遊戲的流程掌控。而強勢的女生則是要讓她有表現的機會，並且適時的讚美她，才能不起爭執。</p><p>我本身平常就蠻擅長也蠻喜歡分析周遭不同個性的人，給予不同的相處方式，讓雙方都感覺舒服自在，這個我在我的自我介紹中也有提到，是我擅長的優點。</p><p>而我自己的自我介紹流程蠻順暢的，主要我講了三件我想分享的事情，分別是我過去的音樂經歷（吉他老師、駐唱歌手、街頭藝人）、帶學弟妹參與活動（與學弟妹打成一片的心情）、還有因為面對現實而拋下我的音樂興趣，轉而認真鑽研資訊的這個心路歷程。</p><p>而評審們對我提問如下：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">1.我提到過我用腦波耳機來量化心動指數，應用在交友系統，實際上這個APP是怎麼用？</span><br><span class="line"></span><br><span class="line">2.我有實習過，那我為什麼會想要來鈦坦？</span><br></pre></td></tr></table></figure><p>問完這兩個問題並且在我回答完之後，就結束了我的自我介紹跟問答。</p><ul><li>團體桌遊-體驗敏捷開發的賺錢遊戲<br>接下來就是最精彩的部分-賺錢遊戲。主要這個遊戲是一個目標為賺大錢的遊戲，現場工作人員利用簡報的方式跟我們說明遊戲規則。</li></ul><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">首先參與遊戲的人員分為客戶、開發人員、財務三種人，客戶及財務由現場工作人員擔任，我們擔任開發人員，規則大概如下幾點：</span><br><span class="line"></span><br><span class="line">1.主要分為六個回合，每個回合會有基本的人力15</span><br><span class="line"></span><br><span class="line">2.總共五個不同名字的客戶，每回合他們都會發Request給開發人員，每個Request上面會有任務細項跟對應消耗的人力</span><br><span class="line"></span><br><span class="line">3.Request上還標注驗收此Request的條件，比如：此Request只能在客戶滿意度 &gt; 4時完成才會拿到錢，或者一個歐洲旅行任務，上面有多個地標任務細項，驗收條件可能就是只要完成歐洲的地標就可以驗收（上面可能穿插一些美國地標之類的）</span><br><span class="line"></span><br><span class="line">4.完成整個Request上面的任務之後，花費3人力可以發Response來完成Request，就能拿到任務卡片上面的標示的收入跟客戶好感度</span><br><span class="line"></span><br><span class="line">5.發一次Response可以完成多個Request，所以也可以前面先都完成任務細項但是不發Response，等後面一次發</span><br><span class="line"></span><br><span class="line">6.每一回合假設沒有完成客戶Request，則那個客戶會好感度-1，初始值是5，扣到0那個客戶就會離開，不會再發Request，所以不僅要顧著賺錢，還要保證顧客好感度不能降低到0</span><br><span class="line"></span><br><span class="line">7.先賺的錢在每回合會有10%的利息收入，並且在最後結算時客戶的好感度1=100元。</span><br></pre></td></tr></table></figure><p>在整個遊戲過程中，發下來的任務卡片裡面還會穿插著「你如果在本回合花費3人力做教育訓練，從下回合開始總人力數量就會+1」之類的卡片，並且每個回合在我們決定好任務的人力分配之後，還要骰骰子，骰到1&amp;2總人力-1，骰到3&amp;4總人力不變，5&amp;6則是總人力+1（聽他們說這是用來比喻真正職場上人力的不穩定性，看我們怎麼面對與處理）</p><p>整個遊戲過程我跟另一個女生組員是主要發表意見跟討論的人，而另一個男生太內向，雖然我覺得他很聰明，但是他總是無法加入我跟女生的激烈討論中，我試著引導他講話也沒辦法，後來只好在我們下每一個決定時都詢問他的意見，並且一定要經過他的同意我才定案，至少這樣不會被扣太多合作分數吧（我是這樣思考的）。</p><p>而整個遊戲過程其實進行得很順利，不過我們也發生了很多意外事故，比如沒有看好驗收條件還把任務做完（就是上面說到的客戶滿意度 &gt; 4時完成此任務才拿得到報酬），造成其中一個客戶好感度降到0然後就掰掰了。但我覺得在過程中發生失誤是正常，而我們幾個隊員之間如何討論處理問題才是工作人員要評審的重點。在整個遊戲流程結束後，工作人員幫我們算每回合賺多少以及最終賺多少錢，並且寫在牆上的表格中。</p><p>遊戲結束後，工作人員並沒有將重點放在兩組人馬中哪一組賺的錢最多，而是讓我們大家各拿便條紙寫下我們在遊戲過程中的心得跟感想，然後一個一個把感想貼到牆上，一個一個出來分享，並且如果有重疊想法的人也可以把自己的便條貼在下面表示認同，而等大家都分享完工作人員則會出來說明，我們這些感想或心得其實在真正的開發流程中是怎麼樣的，讓我們真的去了解實際上這些感想怎麼應用在日後使用敏捷開發的過程，我覺得這樣的活動結尾真的是非常棒！也讓我學到很多！</p><h2 id="面試結尾"><a href="#面試結尾" class="headerlink" title="面試結尾"></a>面試結尾</h2><p>在整個第二階段複試結束後，我們又回到一開始的會議室，並且HR姊姊給我們寫意見回饋表，並且還給我們一疊便條紙，寫下整個活動中很棒或者覺得可以改善的地方（感覺在鈦坦的日常工作生活中，會很常用到便條紙來協助意見的發表，記下關鍵字之類的，所以才會在問卷以外再給我們便條紙去寫）。</p><p>在寫問卷的過程中工作人員也去他們冰箱拿飲料給我們喝，一開始拿麥茶跟什麼紅茶的給我們，其他工作人員就說：「你拿這些他們不喜歡怎麼辦！給他們自己去冰箱任選啊！」，之後我們全部的應徵者就一起走出去他們食物區，開冰箱挑飲料了（氣氛超歡樂輕鬆）。</p><h2 id="結論"><a href="#結論" class="headerlink" title="結論"></a>結論</h2><p>這真的是我第一次參加這樣子的工作面試，非常的有趣好玩，並且也會很享受整個過程（跟那種死板的問答面試差非常多），讓我真的在有資格進到鈦坦實習以前就愛上了這家公司的風氣，真的很棒！</p><p>而大概在面試一週後公布了成果，學期實習生取六位，學年則取了一位，然後各自都有備取，並且有標示備取不是按照順序，而是按照個人特質（應該是指正取的團隊裡面有不同特質的人，而如果像是領導能力強的人不去了，會找備取中領導特質的人補上）。</p><h2 id="最終結果"><a href="#最終結果" class="headerlink" title="最終結果"></a>最終結果</h2><p>最終結果聽我在鈦坦工作的朋友說，我居然是正取一！！！！！他說他們對我印象很深刻，而且我程式測驗也是少數分數很高的人。110位應徵者裡面的1/110，我真的是受寵若驚，不過也許是因為鈦坦不是只看重技術能力的公司，剛好符合我這種整體能力都很均衡發展（但是都沒有特別突出）的人吧！</p><p>我覺得最重要的是要抱持著輕鬆、享受、投入的心態去參與整個複試流程，如果你的風格適合鈦坦的話，就會上的那種心情。</p><p>我在準備過程也真的沒想過我會錄取（被碩士甄試打擊信心後，看到110個人應徵我就覺得我GG了哈哈），所以我在活動過程中特別的不緊張，而且非常投入跟享受，我想也是這樣我才能表現得很真誠、很有自信、很讓人記憶深刻吧xDD（大家面試都在為自己緊張，都在抖，只有我自我介紹即興演出，還花時間分析別人哈哈）</p><p>大概是這樣吧，而實習是下學期才開始，工作上如果有什麼心得我再發文分享吧！（好期待零食櫃！！！&gt;o&lt;）</p>]]></content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;前言&quot;&gt;&lt;a href=&quot;#前言&quot; class=&quot;headerlink&quot; title=&quot;前言&quot;&gt;&lt;/a&gt;前言&lt;/h2&gt;&lt;p&gt;2018年的年底，在碩士甄試告一段落後，因為大四下學期學校沒有必修課，所以我就開始找各種實習工作，希望能找到與我之前實習的公司不同風格的公司，希望是一間比較活潑、公司員工之間比較多互動的公司，看能否學一些不一樣的東西。後來我面試了兩間公司，第一間是位於台中中港五權路交接口，面試風格十分隨性，老闆帶我去頂樓喝咖啡聊是非（聊面試啦xD） ，且公司對面還有超棒的共同工作空間monospace的創科資訊。另一間就是今天要分享的新加坡商-鈦坦科技，主要是因為這次面試經驗實在是太好玩太棒，也覺得他們的團體面試十分有創意，因此很想要分享給大家！&lt;/p&gt;
    
    </summary>
    
      <category term="生活紀錄" scheme="https://kevin8656.github.io/categories/%E7%94%9F%E6%B4%BB%E7%B4%80%E9%8C%84/"/>
    
    
      <category term="面試" scheme="https://kevin8656.github.io/tags/%E9%9D%A2%E8%A9%A6/"/>
    
      <category term="新加坡商鈦坦科技" scheme="https://kevin8656.github.io/tags/%E6%96%B0%E5%8A%A0%E5%9D%A1%E5%95%86%E9%88%A6%E5%9D%A6%E7%A7%91%E6%8A%80/"/>
    
      <category term="外商" scheme="https://kevin8656.github.io/tags/%E5%A4%96%E5%95%86/"/>
    
      <category term="實習" scheme="https://kevin8656.github.io/tags/%E5%AF%A6%E7%BF%92/"/>
    
      <category term="軟體工程師" scheme="https://kevin8656.github.io/tags/%E8%BB%9F%E9%AB%94%E5%B7%A5%E7%A8%8B%E5%B8%AB/"/>
    
      <category term="資訊公司" scheme="https://kevin8656.github.io/tags/%E8%B3%87%E8%A8%8A%E5%85%AC%E5%8F%B8/"/>
    
      <category term="實習面試" scheme="https://kevin8656.github.io/tags/%E5%AF%A6%E7%BF%92%E9%9D%A2%E8%A9%A6/"/>
    
  </entry>
  
  <entry>
    <title>2018 臺科大資管丙組 甄試入學複試心得</title>
    <link href="https://kevin8656.github.io/2018/11/17/20181117-NTUST-MasterInterview/"/>
    <id>https://kevin8656.github.io/2018/11/17/20181117-NTUST-MasterInterview/</id>
    <published>2018-11-17T04:40:37.000Z</published>
    <updated>2019-08-14T14:33:47.707Z</updated>
    
    <content type="html"><![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>暨交大的丁戊組複試，我也有報名台科大的資管碩士班甄試，並且在11月初前往台科大面試。在策略上來說，因為聽說往屆的台科資管甄試入學，甲組領域都非常的夯非常多人報名，以我們的學歷很有可能會變炮灰，因此我選擇了報名資安領域的丙組，讓自己多點機會能夠進到複試去拼一拼。</p><a id="more"></a><p>在開始講台科資管丙的面試細節以前，還是一樣先自我介紹一下：</p><blockquote><p>就讀學校：中科大-資訊應用菁英專班，名義上屬於五專二技七年一貫的五專特殊菁英班。<br>成績：五專全班總排名26，二技全班總排名 第2。<br>經歷：企業實習三年，管過公司的Testing Server（VMWare Esxi）及Production Server（大多架設在AWS上），擅&gt;長跨平台APP（React Native）開發，然後摸過C# MVC、ExpressJS（node.js），自己玩過Docker。</p></blockquote><p>在台科資管面試的同一天，資創競賽也正在火熱舉行中，其實我也有報名資創，不過還好我是以學長身份，指導兩組學弟妹參加競賽，因此我早上可以先放心的去台科大面試，面試完後再到台大體育館為學弟妹們加油打氣。</p><p>還記得台科大面試前一天週五，下午兩點鐘，研究室裡的二三十位學弟妹、同屆、碩士班學長姐們，洋洋灑灑的從台中包車到台北，準備參加一年一度的資創競賽。按照往屆慣例（我已參加第三年，很瞭我們LAB上台北後的時間安排），到台北後會先到民宿放東西，然後就出發去夜市採購糧食，買了一堆高熱量食物（大概可以抵三餐熱量）後，就回到民宿開始最後衝刺，包括修改講稿、改投影片美工動畫、模擬簡報問答等。不過很可惜的是這一次因為我隔天要面試，所以我大概從十一點開始就沒有在與大家一起奮鬥，把全英自我介紹跟一些問答準備完大概是凌晨一點，就趕緊去睡覺了。</p><p>其實在上台北之前做過蠻多功課的，當時發現往屆的台科資管丙組複試曾經有過英文自介、英文研究計畫以及英文詢問資安方向等問題，所以這次花了很多時間準備全英文的自介與問答，不過先破梗一下，2018的台科資管丙組甄試完全都沒有考到這些！（也沒有考教育部長是誰哦xDD）</p><h2 id="考試當天"><a href="#考試當天" class="headerlink" title="考試當天"></a>考試當天</h2><p>考試當天，早上6:30就被比賽的學弟妹吵醒起床了，並且早上又複習了一波面試問答後，搭了早上8點鐘的uber（剛好第十趟，直接免費升級尊榮！），到了台科大校園後小迷路了一下，終於走到管理大樓。管理大樓一樓有座位區，很多穿正裝的考生在那邊等。在報到時間快到時，我跟我同學（一個跟我一樣丙組，一個乙組）就上到樓上，在電梯一出來的報到區簽到後，學長姊請我們到後面長廊的木桌椅區去等待叫號。</p><p>台科大資管丙組的複試主要分為A、B兩個試場，各6分鐘的口試時間，並且在A試場會有五個人在外面等待。複試現場氣氛很緊張，我被叫去準備之後，因為A試場的教室是用全玻璃門隔著，所以其實裡面評審的問題與前面考生的答案我聽得一清二楚！（越聽越緊張RRRR），我旁邊坐的女生感覺很厭世，因為我們被現場場控學長姐命令一直移動位置，然後旁邊女生自言自語表示：「剛剛移過去現在又回來，是怎樣？（火氣hen大）」。而這女生進去面試之後也不改她的氣勢，從外面就聽得到她的侃侃而談，而且問題都是一些不簡單的題目，感覺是個蠻厲害的人物。</p><p>而我自己在A試場的表現……只能說出乎我意料之外的 不順利呀ˊ_&gt;ˋ，裡面只有兩位教授，其中一位我認得是丙組有名的超認真教授查老師，主要也是只有他在對我發問，以下是大致的流程以及我被電爆的過程：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">A試場</span><br><span class="line">1.首先自我介紹一分鐘</span><br><span class="line">2.投影螢幕上有1~6的數字，教授讓我選一個抽英文中翻英題。</span><br><span class="line">我抽到關於一卡通跟line pay的新聞，大部分的內容都在講轉帳、合作、營銷的一些詞。要用全英文講解本篇新聞，這邊我直接爆掉，過程大概是第一段不會-&gt;問教授「我可以解釋下面那一段嗎」教授說可以-&gt;下面那一段一樣講不出來-&gt;教授說「不然你翻譯一下中間黃色標題好了」-&gt;還是講不出來（糗大了）</span><br><span class="line">3.投影螢幕上1~6數字，選一個技術題。</span><br><span class="line">我抽到第一個關於 IOT硬體設備，並且教授沒有給我時間閱讀文章，就開始問我假設現在你出場一個硬體設備像是ip分享器，分享器上都有預設的帳號密碼，那你要如何讓每一台出場的帳號密碼都不相同而且確保不被破解。</span><br><span class="line">我回答運用硬體的序號、或者透過亂數、或者透過日期編號三個湊一起</span><br><span class="line">教授反問 那這規律被找到怎麼辦</span><br><span class="line">然後我就答不出來了（後來思考了一下，覺得應該是往加密的那邊答題才對）</span><br><span class="line">4.第二次機會，因為前面實在打的太差，因此教授讓我再抽一題技術題。</span><br><span class="line">我抽到關於國泰航空信用卡外洩事件，並且先詢問我當信用卡被盜用，那該怎麼通知使用者</span><br><span class="line">我就說 透過推播或者簡訊</span><br><span class="line">他就說 他是指怎麼知道被盜用，除了查看log之外有其他方式嗎</span><br><span class="line">一樣我到這邊就卡死了ˊˋ</span><br></pre></td></tr></table></figure><p>總結就是……我進去除了自我介紹之外，什麼分數都沒拿到啊！！！我當時A試場結束整個很想去撞牆，不知道我自己是怎麼了，居然會在面試無話可答T^T。</p><p>接下來就直接走向B試場，剛剛前面那位女生看到我走過去主動問我說「你剛剛如何？」<br>我就很保守的大概描述了一下，她就說「還好啦，我剛也爆掉」（我心想：你在裡面侃侃而談我都聽到了，我自己只有恩…啊…喔…，我們的爆掉應該是不同層級的爆掉xDDD）</p><p>接下來B試場整體來說，我覺得我跟教授的問答非常順利，而且都是問到我有準備的領域，大致內容如下：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">B試場</span><br><span class="line">1.自我介紹一分鐘</span><br><span class="line">2.因為自我介紹有講到區塊鏈，因此他請我說明區塊鏈是什麼。</span><br><span class="line">3.繼續詢問區塊鏈中的一些特性，實際應用方式。</span><br><span class="line">4.詢問我提到的雜湊函數，我說我不懂裡面的數學方法我只是有看過他的定義，他就說那請我改解釋「函數」是什麼？</span><br><span class="line">5.詢問我在公司做AWS相關的工作內容是什麼。</span><br></pre></td></tr></table></figure><p>大概就是問這些問題，整體回答都非常順暢，裡面的三位教授都和藹可親跟我笑笑的，很像是在聊天。</p><p>面試結束後出場，我對A試場我自己的表現還是心有餘悸，覺得實在是太不理想，心裡有點失落。不過去跟我同學交流後，我同學說她也A試場爆炸了。<br>整體來說，假設複試配分是50 50 這樣的話，我會給自己10分 ＆ 40分xDDDD不過指導教授叫我不要這麼妄自菲薄，還是要抱持著一份希望，等待結果出爐～</p><h2 id="總結"><a href="#總結" class="headerlink" title="總結"></a>總結</h2><p>整體來說臺科大與交大的這兩輪面試，真的讓我好好的重新審視了自己的實力，包括交大丁組的網管、戊組的程式、以及台科丙組的現場臨場發揮，本來這三個方向（尤其是臨場發揮）是我覺得蠻有自信的部分，出去見世面之後才會知道自己現在實力的落點在哪邊，也是受益良多啦！</p>]]></content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;前言&quot;&gt;&lt;a href=&quot;#前言&quot; class=&quot;headerlink&quot; title=&quot;前言&quot;&gt;&lt;/a&gt;前言&lt;/h2&gt;&lt;p&gt;暨交大的丁戊組複試，我也有報名台科大的資管碩士班甄試，並且在11月初前往台科大面試。在策略上來說，因為聽說往屆的台科資管甄試入學，甲組領域都非常的夯非常多人報名，以我們的學歷很有可能會變炮灰，因此我選擇了報名資安領域的丙組，讓自己多點機會能夠進到複試去拼一拼。&lt;/p&gt;
    
    </summary>
    
      <category term="生活紀錄" scheme="https://kevin8656.github.io/categories/%E7%94%9F%E6%B4%BB%E7%B4%80%E9%8C%84/"/>
    
    
      <category term="面試" scheme="https://kevin8656.github.io/tags/%E9%9D%A2%E8%A9%A6/"/>
    
      <category term="碩士班" scheme="https://kevin8656.github.io/tags/%E7%A2%A9%E5%A3%AB%E7%8F%AD/"/>
    
      <category term="碩士班口試" scheme="https://kevin8656.github.io/tags/%E7%A2%A9%E5%A3%AB%E7%8F%AD%E5%8F%A3%E8%A9%A6/"/>
    
      <category term="台科大資管" scheme="https://kevin8656.github.io/tags/%E5%8F%B0%E7%A7%91%E5%A4%A7%E8%B3%87%E7%AE%A1/"/>
    
      <category term="台科大資管丙組" scheme="https://kevin8656.github.io/tags/%E5%8F%B0%E7%A7%91%E5%A4%A7%E8%B3%87%E7%AE%A1%E4%B8%99%E7%B5%84/"/>
    
      <category term="臺灣科技大學" scheme="https://kevin8656.github.io/tags/%E8%87%BA%E7%81%A3%E7%A7%91%E6%8A%80%E5%A4%A7%E5%AD%B8/"/>
    
      <category term="面試心得" scheme="https://kevin8656.github.io/tags/%E9%9D%A2%E8%A9%A6%E5%BF%83%E5%BE%97/"/>
    
  </entry>
  
  <entry>
    <title>2018 交大資工丁戊組 複試心得分享</title>
    <link href="https://kevin8656.github.io/2018/10/30/20181030-NCTU_MasterInterview/"/>
    <id>https://kevin8656.github.io/2018/10/30/20181030-NCTU_MasterInterview/</id>
    <published>2018-10-29T16:38:37.000Z</published>
    <updated>2019-08-14T14:33:47.706Z</updated>
    
    <content type="html"><![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>在準備複試前看了很多人分享的文章，大多都是2016以前的分享文</p><p>先感謝丁組 a73126 a40136 note35 agg2567 grapherd、戊組 林罡北 crazycy 提供心得分享，讓我準備複試的時候比較有方向。<br>雖然說真的去交大後才發現臨時抱佛腳沒什麼用，因為大部分的問題或技術點，都不是短期的準備能夠回答得出來的。不過複習以前曾經又碰過，但是忘記的那些技術跟觀念倒是很有幫助，未來的甄試考生們切記別空手上戰場呀！<br>趁放榜結果還沒出來，趕快先整理一下面試的心得文，免得到時候忘記。<br>希望未來想報考的大家可以有個準備的方向～</p><a id="more"></a><p>按照往常慣例，應該要先自我介紹一下</p><blockquote><p>就讀學校：中科大-資訊應用菁英專班（不是中台科大哦！），名義上屬於五專二技七年一貫的五專特殊菁英班，我個人不知道往屆有沒有科大的人報考，不過現場有聊天到的大多都是國立私立普大的高手們，沒看到有科大生呢！<br>成績：五專全班總排名26，二技全班總排名 第2，別問為什麼排名差這麼多，五專時期大多都花時間在自己當時的興趣「音樂」上。<br>經歷：企業實習三年，管過公司的Testing Server（VMWare Esxi）及Production Server（大多架設在AWS上），擅長跨平台APP（React Native）開發，然後摸過C# MVC、ExpressJS（node.js），自己玩過Docker（可惜沒有玩過CI/CD否則這次面試很有利）。</p></blockquote><p>第一階段的甄試，因為我的經歷書面看起來還算完整，也與丁戊組的主題有相關，因此很幸運地在丙丁戊三組裡面通過了丁跟戊組。而丙組按照面試現場來看，不少各方面的高手包括IOT專長、網管、程式、韌體、資安等，因此我只摸過一些網路與伺服器，還有應用程式的開發（無硬體），可能不合丙組教授們的胃口吧~</p><p>丁組的複試分成兩天：<br>第一天-早上性向測驗（筆試3小時！！）與下午的分組座談（其實是頗正式的分組面試，一人15-20分鐘）<br>第二天-下午教授面試（10分鐘）<br>戊組的複試則是一天：<br>早上性向測驗（1小時）、下午教授面試（7分鐘）</p><h2 id="第一天-丁組性向測驗與分組座談-心得"><a href="#第一天-丁組性向測驗與分組座談-心得" class="headerlink" title="第一天 丁組性向測驗與分組座談 心得"></a>第一天 丁組性向測驗與分組座談 心得</h2><p>週日一大早搭台中往新竹的火車，手提著一整套西裝皮鞋上戰場，這兩天剛好玉兔颱風肆虐（雖然沒下雨），讓新竹的風又更大更冷了！<br>丁組8:30-8:50報到我8:00就到現場了，看到丁組的學長們正忙著準備第一天性向測驗的考場，因為我有去聽丙丁戊招生說明會，因此現場學長我都認得（但他們都不認得我了xD）</p><p>性向測驗時只能帶水跟文具用品，考卷跟某幾屆的考試傳說一樣爆炸多， B3 考卷有七張（雙面）、一張（單面）、A5 考卷四面，總共有三小時時間可以作答。</p><p>其中第一張單面的B3考卷是在提醒大家丁組的一些事情，比如說是要配合資工系計中、要值班、指導老師是系計中主任等，因為我聽過招生說明會所以我很清楚，但可能有些沒有去聽說明會也沒有細查資料的會到現場才知道這些細節吧。</p><p>然後接下來其餘考卷部分依照丁組內部的分組，分成六大類別：Linux、BSD、WWW、 Mail、Net、VM，並且在每一個類別內考一些有一定難度的題目（真的有實作過才答得出來的那種），以下我直接將我整理的題目放上來給大家參考：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br></pre></td><td class="code"><pre><span class="line">「WWW組」</span><br><span class="line">- 網站系統開發</span><br><span class="line">1.ORM是什麼？有什麼優缺點?</span><br><span class="line">2.如何加速網站系統？</span><br><span class="line">3.viewport是啥？如何用上述程式碼做到RWD？</span><br><span class="line">4.有用過什麼框架開發網站系統嗎？分享使用經驗</span><br><span class="line">5.css的pi、px、em、vh、vw等的差別?使用時機?</span><br><span class="line">6.React.js、Vue.js、Angular.js的差異?</span><br><span class="line">7.有用過CSS3的flex嗎？有什麼優點，可以讓什麼變得更便利？</span><br><span class="line">8.什麼是DDOS？遇到該怎麼辦？以及如何預防？</span><br><span class="line">9.什麼是N+1 query?怎麼預防</span><br><span class="line"></span><br><span class="line">- 資料庫</span><br><span class="line">1.有用過什麼DBMS，請簡述並且如果有多個請比較之</span><br><span class="line">2.給你一些需求資料，描述出如何規劃資料表，以及相關的關聯性。（加速、標準化）</span><br><span class="line"></span><br><span class="line">- ES6</span><br><span class="line">1.function()&#123;&#125;與()-&gt;&#123;&#125;的差別？</span><br><span class="line">2.callback hall是什麼？ES6怎麼解決？</span><br><span class="line">3.將下面程式碼使用JS輸出成指定的格式</span><br><span class="line">[&#123;</span><br><span class="line">Name: ’a’,</span><br><span class="line">Role: ’Master’,</span><br><span class="line">Group: [aaa, bbb, ccc, ddd]</span><br><span class="line">&#125;, &#123;</span><br><span class="line">Name: ’b’,</span><br><span class="line">Role: ’User’,</span><br><span class="line">Group: [bbb, ddd, eee, fff]</span><br><span class="line">&#125;.&#123;</span><br><span class="line">Name: ’c’,</span><br><span class="line">Role: ’Master’,</span><br><span class="line">Group: [aaa, ddd, fff]</span><br><span class="line">&#125;]</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">輸出成</span><br><span class="line"></span><br><span class="line">&#123;</span><br><span class="line">Master: [a, c],</span><br><span class="line">aaa: [a, c],</span><br><span class="line">bbb: [a, b]</span><br><span class="line">......</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">- Git</span><br><span class="line">1.給一個graph log，然後經過checkout、rebase、reset等指令，分別畫出樹狀圖</span><br><span class="line">，並且問要怎麼還原？</span><br><span class="line"></span><br><span class="line">「VM組」</span><br><span class="line">1.NFS與ISCSI的差別</span><br><span class="line">2.有沒有用過Live migration，那是什麼？有什麼優點？</span><br><span class="line">3.Docker跟VM差別？</span><br><span class="line"></span><br><span class="line">「Linux組」</span><br><span class="line">1.Linux習慣使用的distribution是哪個（CentOS、ubuntu......）?</span><br><span class="line">2.Linux開機過程從BIOS到開機完成總過做過哪些事情？</span><br><span class="line"></span><br><span class="line">「BSD組」</span><br><span class="line">1.pkg、port差別</span><br><span class="line">2.BSD網路設定檔說明</span><br><span class="line"></span><br><span class="line">「NET組」</span><br><span class="line">1.描述你遇過的網路問題，以及如何解決的經驗？</span><br><span class="line">2.VLAN下如何穩定切換至其他的VLAN以及IP?</span><br><span class="line">3.一個傳統產業要引入IPV6該注意些什麼？</span><br><span class="line"></span><br><span class="line">「MAIL組」</span><br><span class="line">1.使用者說對方沒收到信時該問他什麼資訊方便自己偵錯？可能的問題是哪些？</span><br><span class="line">2.POSTFIX 參數 queue,  active, incoming ，用法與意義</span><br><span class="line">3.POP3 與IMAP差別？使用情況？</span><br><span class="line">4.Maildir 與 mbox差別？</span><br><span class="line">5.給一個mail log，看他經過幾個主機，受過哪些得審核的機制？</span><br><span class="line">6.如何做自動Mail轉寄</span><br><span class="line"></span><br><span class="line">「自由發揮」</span><br><span class="line">1.你最擅長的Service(WEB、FTP、DNS)的架設，以及描述。</span><br><span class="line">2.你覺得系統與網路管理相關知識中最會什麼？涵蓋哪些技術點？請說明他的重要性</span><br></pre></td></tr></table></figure><p>寫了大概一個小時之後監考學長說可以提早交卷，可能是有些面向的題目沒有看過不會寫，所以有些人寫完後就提早交卷離開了。我一直寫到結束為止，大部分技術點都看過或聽過（除了BSD那張我全空白之外…），但我也每個領域都不是摸很深，因此我整張性向測驗的考卷都大概寫了概念而已，並沒有非常有把握。</p><p>而下午分組座談的順序是按照交卷順序去填寫的，所以我們待到最後的幾個人都被排在三四點左右最後座談，要等超久！</p><p>中午跑去交大的第二餐廳，懶得找想吃什麼因此直接吃了八方雲集，吃完後就又回到工程三館，然後陸陸續續大家吃完飯後，都一起到了一個休息室裡面等待座談，也在這其中跟兩位丁組碩一的學長（招生說明會中Mail組跟VM組負責簡報的學長）聊了一下天。他們說第一天的性向測驗主要是測試一下對各領域的了解程度，下午分組座談則是讓以前各組的大學長們針對你的書審或者性向測驗回答來更深入的了解你的程度。<br>以上這些東西並不會算入初複試的成績計算，但是學長們可能會與教授表達他們認為哪些人比較優哪些比較不OK之類的（怕）。</p><p>系計中的網頁系統是由www組負責，目前是使用PHP Laravel + Vue.js來開發，另外計中內的服務有用BSD系統跑的也有用Linux（CentOS）跑，系上的網路有自己從種花電信接進來的，也有從校際中那邊接過來的。</p><p>而每一屆新進的六位碩一新生以及碩二的六位學長，將扛起系計中六大分組的日常維運事務，因此很明顯的他們就是希望在所有考生中挑到在六大領域內最強的那幾個，因此我學過的AWS以及一些服務使用經驗，實際上與管理系計中機房並不是非常的有對應到。因此如果是現在才要開始點技能樹的未來考生，可以先打聽一下六大組使用的技術或者他們需要的人是怎麼樣的。</p><p>接下來就是下午的重頭戲：分組座談</p><p>分組座談是在一間大會議室舉行，裡面大概用ㄇ字型排列，缺口位置就是我們坐的地方，總共大概有十幾位到二十位的學長們，以下概述一下座談的內容，有些問答內容忘記了：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">1.自我介紹一分鐘</span><br><span class="line">這邊我很正常了介紹了我企業工作跟實驗室寫專案的經歷。</span><br><span class="line">2.你的專題是做什麼？</span><br><span class="line">我是基於腦波耳機取得腦波資料，做心動指數演算法，並且應用在交友系統的。</span><br><span class="line">3.詢問專題細節以及演算法得出方式，還有我在其中負責的工作</span><br><span class="line">4.詢問我考卷上寫我Linux主要會CentOS6，那我有沒有建議公司要換到7版本。</span><br><span class="line">這邊我回答因為公司都是讓網路組同事自由發揮，因此我後面新建立的環境都是使用CentOS7。</span><br><span class="line">5.我架設過哪些服務。</span><br><span class="line">6.我遇到過印象最深刻的問題，以及我怎麼解決的。</span><br><span class="line">這邊我講的是我AWS上曾經移轉一個大專案（平均20台以上主機），從AWS新加玻移轉到AWS中國的除錯經驗。</span><br><span class="line">7.丁組要與系計中配合，我有什麼想法？</span><br><span class="line">8.看經歷上有切過內外網與子網，請問我當時的做法？</span><br></pre></td></tr></table></figure><p>其實整體來說都是就你的經歷以及考卷回答來提問，因此都是你自己知道或者自己做過得事情，不難回答。但是現場的氣氛有點凝重，學長們都非常認真在看資料想問題問我，所以也都不苟言笑呀！但是不會很刁難啦！</p><p>丁組第一天的性向測驗以及分組座談就這樣結束了，晚上住的旅館剛好在清大夜市裡面，我買了派克雞排、章魚小丸子還有珍奶大吃了一頓，就開始準備隔天的面試了。</p><h2 id="第二天-丁組面試、戊組性向測驗及面試-心得"><a href="#第二天-丁組面試、戊組性向測驗及面試-心得" class="headerlink" title="第二天 丁組面試、戊組性向測驗及面試 心得"></a>第二天 丁組面試、戊組性向測驗及面試 心得</h2><p>第二天丙、戊組也開始了複試的流程<br>早上是丙戊組的性向測驗<br>下午則是丙丁戊三組的教授面試</p><p>戊組的考卷整體來說我覺得比丁組的範圍小非常多，戊組本身是校務資訊系統開發組，所以比較在意的是考生的程式能力以及些許的其他能力，性向測驗題目因為除了我之外還有我兩個專題組員一起都上了，因此一題不漏的分享給大家參考：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">1.寫一支程式作為ipchecker，傳入A,B,M分別是ip1、ip2、netmask，並且透過mask判斷A和B是否在同一個網域內。使用語言不限</span><br><span class="line">2.質數判斷程式，i=2,數值有10 25 17 137然後查看i=i*i的運行次數（英文題目）</span><br><span class="line">3.max_int，然後x=x*y，撰寫程式防止overflow（英文題目）</span><br><span class="line">4.給一段英文文字段落，判斷段落中單字各自的出現次數，大小寫算同一個，然後輸出成指定樣式（輸出結果都要小寫，以空白來做區分單字的依據）</span><br><span class="line">5.Json除了object外有哪些基礎的型態，然後把兩個基本Json合成在一起</span><br><span class="line">類似這種：&#123;“key1”:”value1”,”key2”:”value2”&#125;、&#123;“key3”:”value3”&#125;</span><br><span class="line">6.DevOps</span><br><span class="line">7.microservice</span><br><span class="line">8.何謂雲端運算，請說明並且舉出特點？列舉三個雲端廠商以及該特色</span><br><span class="line">9.運用過哪些開發框架，舉出三個並簡述，並且說明為什麼選用他</span><br><span class="line">10.Restful API選擇題，選擇其中哪一個不是Restful API發明的目的或者貢獻（英文選擇題）</span><br><span class="line">11.XSS該如何防止</span><br><span class="line">12.SQL語法題目，兩張簡單的資料表（會員與訂單），取出項目並且按照訂單時間排序</span><br><span class="line">個人覺得題目沒有很刁難，有些題目是英文出題但是我是用中文來記錄，但是事實上也不可能寫完。我先寫了後面的一些概念問答題後，回頭才寫程式題。光是第一題我就寫了好久，塗塗改改（緊張手抖一直寫錯）。</span><br></pre></td></tr></table></figure><p>早上考完後整體來說我覺得表現算不錯，但是SQL語法我好像耍白痴寫錯，題目超簡單的真的是很好笑。</p><p>而接下來就是下午的丁戊兩場面試了，整體來說丁組的10分鐘面試，整個就是很和平的聊天（前一天該問的技術細節都問完了，我們的底已經完全被摸透，所以也不會再問你太多技術），面試現場有三位教授，坐著面試。以下是面試內容：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">1.自我介紹一下</span><br><span class="line">2.詢問某個比賽的系統（一個OpenData的評估系統）是在做什麼？</span><br><span class="line">3.這系統裡面用有什麼評估指標？</span><br><span class="line">4.做這個有什麼目的？</span><br><span class="line">5.公司有做過一個區塊鏈的App專案是什麼？我負責什麼？</span><br><span class="line">6.有上線運行了嗎？</span><br><span class="line">7.來丁組比較想去那個組別？</span><br><span class="line">8.曾經遇到什麼問題並且如何解決？</span><br></pre></td></tr></table></figure><p>丁組整個很Peace的面試完，大多都是詢問我初試書審資料上面的一些經歷，很好回答。</p><p>而我戊組的面試與丁組相隔二十分鐘，聽我其他兩位組員（他們都比我前面被問），主要都問一些網頁系統技術相關（語言、框架、版本控制經驗、DevOps經驗等），並且會盡可能的挖出你的底，看看你的程式開發能力。<br>但是好像是因為我是最後一個，而我們三個不僅同校、同系、還同一個實驗室同個專題組<br>因此我被問的問題實在是……怎麽說，完全沒有表現機會呀，一直在問我與其他兩位的差別。<br>以下是我的面試題目：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">1.自我介紹</span><br><span class="line">2.你跟前面兩位同學有什麼不同？</span><br><span class="line">這邊我回答我會網路、伺服器以及程式開發，前面兩位沒有網路伺服器相關的經歷</span><br><span class="line">3.DevOps經驗？</span><br><span class="line">4.在公司負責什麼工作？</span><br><span class="line">我回答AWS相關的建置比較多。</span><br><span class="line">5.跟前面兩位在Lab都做一樣的事情？</span><br><span class="line">6.你們三個人裡面誰程式開發最強？</span><br><span class="line">7.3da Max做過什麼嗎？（這邊是看到我有一張證照，但其實那張證照只是我上完課去考好玩的）</span><br><span class="line">8.你會切分子網域嗎？第一題怎麼沒寫（其實我寫在後面，所以我先回答完切分方式後，就跟教授說我沒有按照順序寫題目，第一題寫在後面）</span><br></pre></td></tr></table></figure><p>戊組是站著面試，裡面有八位教授，整體來說節奏比較快，但是我個人覺得…還是第一天丁組的分組座談比較可怕呀！xDDDD</p><h2 id="結論"><a href="#結論" class="headerlink" title="結論"></a>結論</h2><p>整體來說，丁組跟戊組都是很吃實務經驗的組別，不過相對來說丁組不只是需要經驗，還需要自己有興趣、深入的去挖掘一些細部的技術點（像我大多都是配合公司的工作需求建置環境，因此很多面向的技術都不夠深入了解）。<br>而戊組只要是有寫過網頁系統、有相關專案開發或者維護經歷，我覺得題目以及面試都不算太難。<br>今年報名的高手很多，我也很高興在第一天的分組座談前能夠與幾位像是暨大、海大等的高手一起切磋交流，讓我了解到很多我沒有觸碰過的領域。</p><p>至於最後結果怎麼樣，可能等放榜公布並且如果我沒有太淒慘的話再來分享吧！</p><blockquote><p>補最後結果:<br>丁組沒有錄取<br>戊組備取13（最低備取15）<br>雖然機會渺茫，但是能夠到交大去見見世面、認識幾個高手中的高手也是很開心的！</p></blockquote>]]></content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;前言&quot;&gt;&lt;a href=&quot;#前言&quot; class=&quot;headerlink&quot; title=&quot;前言&quot;&gt;&lt;/a&gt;前言&lt;/h2&gt;&lt;p&gt;在準備複試前看了很多人分享的文章，大多都是2016以前的分享文&lt;/p&gt;
&lt;p&gt;先感謝丁組 a73126 a40136 note35 agg2567 grapherd、戊組 林罡北 crazycy 提供心得分享，讓我準備複試的時候比較有方向。&lt;br&gt;雖然說真的去交大後才發現臨時抱佛腳沒什麼用，因為大部分的問題或技術點，都不是短期的準備能夠回答得出來的。不過複習以前曾經又碰過，但是忘記的那些技術跟觀念倒是很有幫助，未來的甄試考生們切記別空手上戰場呀！&lt;br&gt;趁放榜結果還沒出來，趕快先整理一下面試的心得文，免得到時候忘記。&lt;br&gt;希望未來想報考的大家可以有個準備的方向～&lt;/p&gt;
    
    </summary>
    
      <category term="生活紀錄" scheme="https://kevin8656.github.io/categories/%E7%94%9F%E6%B4%BB%E7%B4%80%E9%8C%84/"/>
    
    
      <category term="面試" scheme="https://kevin8656.github.io/tags/%E9%9D%A2%E8%A9%A6/"/>
    
      <category term="碩士班" scheme="https://kevin8656.github.io/tags/%E7%A2%A9%E5%A3%AB%E7%8F%AD/"/>
    
      <category term="碩士班口試" scheme="https://kevin8656.github.io/tags/%E7%A2%A9%E5%A3%AB%E7%8F%AD%E5%8F%A3%E8%A9%A6/"/>
    
      <category term="面試心得" scheme="https://kevin8656.github.io/tags/%E9%9D%A2%E8%A9%A6%E5%BF%83%E5%BE%97/"/>
    
      <category term="交大丁組" scheme="https://kevin8656.github.io/tags/%E4%BA%A4%E5%A4%A7%E4%B8%81%E7%B5%84/"/>
    
      <category term="交大戊組" scheme="https://kevin8656.github.io/tags/%E4%BA%A4%E5%A4%A7%E6%88%8A%E7%B5%84/"/>
    
      <category term="交大資工" scheme="https://kevin8656.github.io/tags/%E4%BA%A4%E5%A4%A7%E8%B3%87%E5%B7%A5/"/>
    
      <category term="交通大學" scheme="https://kevin8656.github.io/tags/%E4%BA%A4%E9%80%9A%E5%A4%A7%E5%AD%B8/"/>
    
  </entry>
  
</feed>
