<h3>什麼是 SEO</h3>
<p>搜尋引擎最佳化（Search engine optimization），簡稱為 SEO，是藉由調整網站的架構或內容，提高網站在搜尋
引擎內排名的行銷方法。提升網站的能見度與流量能夠打響品牌知名度和創造業績，因此所以不少網站都希望以各
種形式來影響搜尋引擎的排序，讓自己的網站可以有優秀的搜尋排名。</p>
<h3>為何做 SEO</h3>
<p>SEO 的核心目的是讓網站更容易被搜尋引擎接受。搜尋引擎會將網站間的內容做一些相關性的比對，再由瀏覽器將
這些內容以最快速且接近最完整的方式，呈現給使用者，為其打造更好的使用者體驗。而不少研究指出，使用者在
利用搜尋引擎尋找資料、產品或服務時，多數人只會瀏覽搜尋結果中最前面的幾個連結，因此 SEO 就成了架設網
站的必要工作。否則花費大量時間與心力架設的網站，點閱次數卻寥寥無幾，可說是本末倒置。SEO 有以下幾個優
點：</p>
<ul>
<li>不受付費機制的影響，各個網站間公平競爭</li>
<li>長時間累積的數據，較其他行銷方式更穩定和可信</li>
<li>能夠吸引到相關度高的潛在客戶</li>
</ul>
<p>不過，搜尋引擎的演算法會不斷的更新，網站的排名也會有所動盪，所以如果沒有持續做好 SEO，排名就很有可能
一落千丈。</p>
<h3>如何實作 SEO 優化</h3>
<p>我們必須先了解 Google 搜尋的運作方式，根據
<a href="https://developers.google.com/search/docs/fundamentals/how-search-works?hl=zh-tw">Google 搜尋指南</a>的
說明，主要分為三個階段：</p>
<ol>
<li>檢索(Crawling)：Google 會透過稱為檢索器的自動化程式，從網際網路上找到的網頁下載文字、圖片和影片。
然而 Google 不可能把所有網站的內容一一爬完，因此，讓 Google 爬蟲有效完成網站的檢索，並排入建立索
引的等候階段，即是 SEO 的技術所在。</li>
<li>建立索引(Indexing)：完成檢索後， Google 會嘗試解讀網頁內容，並將相關資訊儲存在大型資料庫—— Google
索引之中，其中解讀的方式包括分析文字內容、關鍵內容標記和屬性，例如 <code>&lt;title&gt;</code> 元素和 alt 屬性、圖
片、影片等等。 Google 也是在這個階段判斷網頁在網際網路上是否有<strong>重複版本或標準網頁</strong>，如果 Google
發現某些網頁有高度重複的內容，會將這些網頁視為重複版本，並從中選出一個網址做為「標準」版本進行檢
索，降低其他網址的檢索頻率。</li>
<li>提供搜尋結果(Serving search results)：Google 面對不同搜尋需求時，會根據該使用者的所在地、語言、使
用裝置、瀏覽紀錄等各種的因素，提供對使用者來說最有幫助的資訊內容。當使用者輸入查詢字詞時， Google
會搜尋索引資料庫並找出符合的網頁，將演算法認為與使用者的查詢內容最相關且品質最佳的結果呈現出來。</li>
</ol>
<p>接下來我們可以開始討論 SEO 優化的方法：</p>
<h4>技術層面：讓網頁符合 SEO 規範</h4>
<p>如上述所提，我們可以透過一些網頁建立的技術，讓網路爬蟲有效率的完成網站檢索：</p>
<ul>
<li>SEO 網址：建立簡短且具描述性的網址是 SEO 優化的好方法，除了方便記憶，也讓使用者看一眼就知道網站的
大致內容。對網頁的相關性提升有正面影響。</li>
<li>麵包屑(Breadcrumb)：是一種常見的網頁導覽列，除了協助訪客了解網站架構，也讓 Google 能在最短的時間內
完成網站檢索。</li>
<li>網站地圖
(<a href="https://developers.google.com/search/docs/crawling-indexing/sitemaps/overview?hl=zh-tw">Sitemap</a>)：
收錄整個網站的頁面站點和檔案間的關聯性，主動提供給 Google 搜尋引擎來爬取頁面內容。針對規模較大的網
站可以縮短 Google 的檢索時間。</li>
<li>裝置兼容性：使用 RWD 或 AWD 網頁設計技術來優化使用者體驗，有助於 SEO 排名提升。</li>
<li>連結優化：將網站內部的所有頁面都用連結串聯起來，避免孤兒網頁(Orphan Page)產生，對 SEO 造成不良影響
。一個簡單的解法就是製作 Sitemap ，讓使用者和搜尋引擎都能更清楚網站的架構，也能延長使用者停留在站
內的時間。</li>
<li>結構化資料(Structured Data)：以標準化格式書寫網站內容讓爬蟲爬取，並呈現「複合式搜尋結果」給使用者
。</li>
</ul>
<p><img src="https://github.com/CAFECA-IO/WorkGuidelines/assets/114177573/b2c25cc3-c207-4118-b587-6bff0ee4fafd" alt="image"></p>
<p>如上圖所示，這些資料都有助於 SEO 的優化。以下貼出幾個結構化資料標記的範例程式碼：</p>
<ul>
<li><strong>BreadcrumbList</strong></li>
</ul>
<pre><code class="language-html">&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;網站標題&lt;/title&gt;
    &lt;script type=&quot;application/ld+json&quot;&gt;
      {
        &quot;@context&quot;: &quot;https://schema.org&quot;,
        &quot;@type&quot;: &quot;BreadcrumbList&quot;,
        &quot;itemListElement&quot;: [
          {
            &quot;@type&quot;: &quot;ListItem&quot;,
            &quot;position&quot;: 1,
            &quot;name&quot;: &quot;階層 1&quot;,
            &quot;item&quot;: &quot;https://example.com/layer1&quot;
          },
          {
            &quot;@type&quot;: &quot;ListItem&quot;,
            &quot;position&quot;: 2,
            &quot;name&quot;: &quot;階層 2&quot;,
            &quot;item&quot;: &quot;https://example.com/layer1/layer2&quot;
          },
          {
            &quot;@type&quot;: &quot;ListItem&quot;,
            &quot;position&quot;: 3,
            &quot;name&quot;: &quot;階層 3&quot;
          }
        ]
      }
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<ul>
<li><strong>Product</strong></li>
</ul>
<pre><code class="language-html">&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;網站標題&lt;/title&gt;
    &lt;script type=&quot;application/ld+json&quot;&gt;
      {
        &quot;@context&quot;: &quot;https://schema.org/&quot;,
        &quot;@type&quot;: &quot;Product&quot;,
        &quot;name&quot;: &quot;產品 1 名稱&quot;,
        &quot;description&quot;: &quot;產品 1 簡介&quot;,
        &quot;review&quot;: {
          &quot;@type&quot;: &quot;Review&quot;,
          &quot;reviewRating&quot;: {
            &quot;@type&quot;: &quot;Rating&quot;,
            // 評分
            &quot;ratingValue&quot;: 4,
            &quot;bestRating&quot;: 5
          },
          &quot;author&quot;: {
            &quot;@type&quot;: &quot;Person&quot;,
            &quot;name&quot;: &quot;作者名稱&quot;
          }
        },
        // 總計評分和評價
        &quot;aggregateRating&quot;: {
          &quot;@type&quot;: &quot;AggregateRating&quot;,
          &quot;ratingValue&quot;: 4.4,
          &quot;reviewCount&quot;: 89
        }
      }
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<ul>
<li><strong>Organization</strong></li>
</ul>
<pre><code class="language-html">&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;About Us&lt;/title&gt;
    &lt;script type=&quot;application/ld+json&quot;&gt;
      {
        &quot;@context&quot;: &quot;https://schema.org&quot;,
        &quot;@type&quot;: &quot;Organization&quot;,
        &quot;url&quot;: &quot;https://www.example.com&quot;,
        &quot;logo&quot;: &quot;https://www.example.com/images/logo.png&quot;
      }
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>更多的結構化資料用法可以參閱
<a href="https://developers.google.com/search/docs/appearance/structured-data/search-gallery?hl=zh-tw">Google 結構化資料標記指南</a>，
裡面有詳細的步驟說明和可以直接改用的範例。也可以使
用<a href="https://www.google.com/webmasters/markup-helper/u/0/">協助工具</a>或<a href="https://search.google.com/test/rich-results?utm_campaign=devsite&utm_medium=jsonld&utm_source=product">複合式搜尋結果測試</a>，
幫助你新增或驗證各種類型的結構化資料。</p>
<h4>內容層面：做出符合使用者需求的網頁內容</h4>
<p>從使用者體驗的角度切入，提供真正符合需求的優質內容：</p>
<ul>
<li>關鍵字分析：需要思考使用者會透過哪些關鍵字搜尋到網站，其目的又是什麼。針對特定關鍵字來經營，可以帶
來更多目標客群。</li>
<li>Meta Tag：是 HTML 的語法，透過 Meta Title &amp; Meta Description 來描述網頁的概括資訊，吸引使用者點擊
瀏覽。但是注意不要寫過多不相干的內容，否則使用者觀感不佳，搜尋引擎也會判定是無效內容而降低排名。</li>
</ul>
<pre><code class="language-html">//範例來源：https://clinic.careonline.com.tw/
&lt;meta content=&quot;登錄診所｜照護線上&quot; property=&quot;og:title&quot; /&gt;
&lt;meta
  content=&quot;即刻登錄就可使用網路掛號、看診進度、回診提醒等多項便利實用的功能，讓您的診所脫穎而出！&quot;
  property=&quot;og:description&quot;
/&gt;
</code></pre>
<ul>
<li>img alt：當圖片因各種情況無法顯示時，alt 屬性就會代替圖片顯示。由於爬蟲對於圖片檔的解讀能力還不夠
透徹，所以撰寫替代文字可以幫助爬蟲了解圖片內容，進而提高排名。</li>
</ul>
<pre><code class="language-html">&lt;img src=&quot;de_sterrennacht.png&quot; alt=&quot;一幅描繪著黃色月亮、漩渦狀的星雲與藍色夜空的畫作&quot; /&gt;
</code></pre>
<h4>SEO 工具</h4>
<p>Google 有提供一個免費的 SEO 工具，也就是
<a href="https://search.google.com/search-console/about?hl=zh-tw">Google Search Console</a>，從這裡可以查看
Google 供的官方數據，包括曝光和點擊次數、網頁索引狀態等，還有提供分析報表可以下載，讓網站維護者迅速
掌握網站現況與改善方向，是非常實用的工具。</p>
<img width="1418" alt="image" src="https://github.com/CAFECA-IO/WorkGuidelines/assets/114177573/340693ea-32f6-4194-a271-63d04d69237e">

<h3>注意事項</h3>
<ul>
<li>一些會對 SEO 造成致命傷的項目</li>
</ul>
<table>
<thead>
<tr>
<th>項目</th>
<th>說明</th>
</tr>
</thead>
<tbody><tr>
<td>禁用 robots.txt</td>
<td>這是一個管理網路爬蟲的指令，如果禁用，搜尋引擎將無法取得網頁內容，對 SEO 造成負面影響</td>
</tr>
<tr>
<td>noindex</td>
<td>禁止 Google 搜尋建立索引，用於希望網頁保持私密性</td>
</tr>
<tr>
<td>重複內容</td>
<td>會混淆 Google 演算法導致關鍵字排名下降</td>
</tr>
<tr>
<td>301 轉址</td>
<td>如果移轉網頁的設定不正確，累積的 SEO 將會重置</td>
</tr>
</tbody></table>
<ul>
<li>黑帽法(Black Hat)</li>
</ul>
<p>透過作弊的方式欺騙演算法，例如塞入大量不相關關鍵字或垃圾內容、付費要求其他網站提供自身網站的連結，藉
此偽裝高信任度，讓 SEO 排名提升。但是這種方式對使用者沒有幫助，也違反了 Google 的使用規範。一旦被抓
到， Google 將會移除該網站的索引內容，讓它無法再出現於搜尋引擎中，是不該被宣揚的做法。</p>
<p>反之，以使用者需求和體驗為出發點，使用正規手法的 SEO 優化稱為白帽法，如前面所提的各種方法。耐心仔細
地做好 SEO ，親手為網頁創造更多曝光機會。</p>
<h3>參考來源</h3>
<ul>
<li><a href="https://zh.wikipedia.org/zh-tw/%E6%90%9C%E5%B0%8B%E5%BC%95%E6%93%8E%E6%9C%80%E4%BD%B3%E5%8C%96">維基百科</a></li>
<li><a href="https://welly.tw/serp-rank-optimization/what-is-seo">SEO 搜尋引擎優化教學</a></li>
<li><a href="https://www.shopjkl.com/pages/seo">初學者 SEO 終極指南</a></li>
<li><a href="https://www.awoo.ai/zh-hant/blog/301-302-redirect/">301/302 轉址如何影響網站 SEO</a></li>
<li><a href="https://developers.google.com/search/docs?hl=zh-tw">Google 搜尋指南</a></li>
<li><a href="https://www.yesharris.com/search-console/search-console-intro/">Google Search Console 教學</a></li>
<li><a href="https://www.seo-panda.tw/structured-data-202112/">結構化資料標記是什麼？會影響 SEO 排名嗎？</a></li>
</ul>


搜尋引擎最佳化（Search engine optimization），簡稱為 SEO，是藉由調整網站的架構或內容，提高網站在搜尋引擎內排名的行銷方法。提升網站的能見度與流量能夠打響品牌知名度和創造業績，因此所以不少網站都希望以各種形式來影響搜尋引擎的排序，讓自己的網站可以有優秀的搜尋排名。

新手指南 - SEO

<h3>什麼是正規表達式</h3>
<p>正規表達式（Regular expression），簡稱 regex 或 regexp，是一種用來描述字串是否符合<strong>某個語法規則</strong>的
模型，用簡單字串來描述符合文中全部指定格式的字串。正規表達式是由一系列的字符和特殊字符組成，透過正規
表達式可以執行以下操作：</p>
<ul>
<li>在文字中尋找符合格式的部分</li>
<li>判斷一個字串是否完全符合格式</li>
<li>將符合格式的文字部分替換為指定的內容</li>
</ul>
<p>目前很多文字編輯器和程式語言都支援用正規表達式搜尋、比對和替換符合的文字。</p>
<h3>如何使用</h3>
<h4>1. 建立正規表達式</h4>
<p>正規表達式可以透過雙斜線 <code>//</code> 或 <code>new RegExp()</code> 呼叫 RegExp 物件來建立</p>
<pre><code class="language-javascript">// 常見用法
const regex = /[a-z]/;

// 適合用在需要動態產生 pattern 的場合
const name = &#39;Kenny&#39;;
const regex = new RegExp(name);
</code></pre>
<h4>2. 使用正規表達式</h4>
<p>建立完正規表達式，就可以使用 RegExp 物件中的 <code>test</code> 和 <code>exec</code> 方法來比對字串</p>
<ul>
<li><code>test</code> 的回傳值為 boolean</li>
<li><code>exec</code> 會回傳詳細資訊的 array ，如果匹配失敗則會回傳 null ，詳細可以
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec">見此</a></li>
</ul>
<pre><code class="language-javascript">const regex = /\d/;

regex.test(&#39;abc&#39;); //false

regex.exec(&#39;123&#39;); //[&#39;1&#39;, index: 0, input: &#39;123&#39;, groups: undefined]
regex.exec(&#39;abc&#39;); //null
</code></pre>
<ul>
<li>除此之外， <code>match</code> 、 <code>replace</code> 、 <code>search</code> 等方法也支援正規表達式</li>
</ul>
<pre><code class="language-javascript">const str = &#39;The quick brown fox jumps over the lazy dog&#39;;

str.search(/\d/); //-1
//search回傳值為指定文字在字串中的起始位置，沒有找到則回傳 -1

str.match(/fox/); //[&#39;fox&#39;, index: 16, input: ..., groups: undefined]
//match方法會回傳第一個匹配成功的詳細資訊

str.replace(/\w*$/, &#39;cat&#39;); //&#39;The quick brown fox jumps over the lazy cat&#39;
</code></pre>
<h3>正規表達式的語法</h3>
<h4>常用特殊規則</h4>
<ul>
<li>跳脫字元：有個好記的規則：小寫邏輯跟大寫邏輯是相對的，小寫代表「是」，大寫代表「否」</li>
</ul>
<table>
<thead>
<tr>
<th>符號</th>
<th>說明</th>
</tr>
</thead>
<tbody><tr>
<td>\d</td>
<td>匹配任意數字</td>
</tr>
<tr>
<td>\D</td>
<td>匹配任意非數字字元</td>
</tr>
<tr>
<td>\w</td>
<td>匹配所有文字字元(a-z、A-Z、0-9、_)</td>
</tr>
<tr>
<td>\W</td>
<td>匹配所有非文字字元(標點符號、特殊字元)</td>
</tr>
<tr>
<td>\s</td>
<td>匹配空白字元</td>
</tr>
<tr>
<td>\S</td>
<td>匹配非空白字元</td>
</tr>
<tr>
<td>\b</td>
<td>匹配字元邊界</td>
</tr>
<tr>
<td>\B</td>
<td>匹配非字元邊界</td>
</tr>
</tbody></table>
<blockquote>
<p>字元邊界：也就是單字與 空格或\ 之間，例如 <code>/er\b/</code> 代表匹配 &#39;never&#39; 或 &#39;ver/sion&#39; ，但不匹配
&#39;verb&#39;</p>
</blockquote>
<ul>
<li>特殊符號</li>
</ul>
<table>
<thead>
<tr>
<th>符號</th>
<th>說明</th>
</tr>
</thead>
<tbody><tr>
<td>\</td>
<td>跳脫字元，例如需要搜尋&#39;/&#39;時，使用<code>\/</code></td>
</tr>
<tr>
<td>.</td>
<td>匹配任意字元</td>
</tr>
<tr>
<td>^</td>
<td>匹配字元開頭</td>
</tr>
<tr>
<td>$</td>
<td>匹配字元結尾</td>
</tr>
<tr>
<td>[]</td>
<td>比對[]中的任一字元，可用於範圍匹配([A-Z]、[0-9])</td>
</tr>
<tr>
<td>[^]</td>
<td>比對[]中以外的任一字元</td>
</tr>
<tr>
<td>|</td>
<td>OR 邏輯</td>
</tr>
<tr>
<td>()</td>
<td>群組</td>
</tr>
</tbody></table>
<ul>
<li>匹配次數次數符號要放在匹配規則的<strong>後面</strong>，例如<code>/c{3}/</code>代表匹配 &#39;c&#39; 字元三次</li>
</ul>
<table>
<thead>
<tr>
<th>符號</th>
<th>說明</th>
</tr>
</thead>
<tbody><tr>
<td>*</td>
<td>0 次以上</td>
</tr>
<tr>
<td>+</td>
<td>1 次以上</td>
</tr>
<tr>
<td>?</td>
<td>0 次或 1 次</td>
</tr>
<tr>
<td>{m}</td>
<td>m 次</td>
</tr>
<tr>
<td>{n,}</td>
<td>最少 n 次</td>
</tr>
<tr>
<td>{m,n}</td>
<td>從 m 次到 n 次</td>
</tr>
<tr>
<td>{m,n}?</td>
<td>從 m 次到 n 次，選到匹配最少次的</td>
</tr>
</tbody></table>
<blockquote>
<p>上述內容引用自
<a href="https://moojing.medium.com/javascript-%E5%88%9D%E6%8E%A2regex-%E6%AD%A3%E8%A6%8F%E8%A1%A8%E9%81%94%E5%BC%8F-1da2f4d94795">此文章</a></p>
</blockquote>
<h4>1. 簡易模式</h4>
<p>即直接輸入匹配的字元，如：<code>/World/</code> 這條規則將會直接匹配 &#39;World&#39; 這個文字</p>
<pre><code class="language-javascript">const regex = /World/;
const paragraphOne = &#39;Hello World !&#39;;
regex.test(paragraphOne); //true
//匹配成功，因為字串裡含有 &#39;World&#39;字符

const paragraphTwo = &#39;Hello John !&#39;;
regex.test(paragraphTwo); //false
//匹配失敗，因為字串不包含任何 &#39;World&#39; 字符
</code></pre>
<h4>2. 特殊字元</h4>
<p>需要搜尋較複雜的規則時使用，例如中華民國的身分證字號格式為：</p>
<ol>
<li>開頭為一個大寫英文字母 <code>/^[A-Z]/</code></li>
<li>數字第一位為 1 或 2 <code>/[12]/</code></li>
<li>後面為隨機八位數字 <code>/\d{8}/</code></li>
</ol>
<p>根據上述規則整理出以下正規表達式</p>
<pre><code class="language-javascript">const regex = /^[A-Z][12]\d{8}/;
const myId = &#39;A123456789&#39;;
const fakeId = &#39;D029482425&#39;;

regex.test(myId); //true
regex.test(fakeId); //false
</code></pre>
<h3>小技巧</h3>
<h4>線上工具</h4>
<ul>
<li>有許多線上工具和教學可供學習和測試正規表達式，例如 <a href="https://regex101.com/">Regex101</a> 。使用方法也
相當簡單，非常適合練習和複習。</li>
</ul>
<p><img src="https://github.com/CAFECA-IO/WorkGuidelines/assets/114177573/68411dd0-91b1-46b9-a282-a0a1917562eb" alt="image"></p>
<h4>電子郵件地址</h4>
<p>正確的 Email 格式會有以下規則：</p>
<ol>
<li>必須以一個以上的文字開頭</li>
<li>@ 之前，可以出現 1 個以上的文字與「-」的組合，例如 -abc-</li>
<li>@ 之前，可以出現 1 個以上的文字與「.」的組合，例如 .abc.</li>
<li>@ 之前，以上兩項以 OR 的關係出現，並且出現 0 次以上</li>
<li>中間一定要出現一個 @</li>
<li>@ 之後，出現一個以上的大小寫英文及數字的組合</li>
<li>@ 之後，只能出現「.」或是「-」，但這兩個字元不能連續時出現</li>
<li>@ 之後，出現 0 個以上的「.」或是「-」配上大小寫英文及數字的組合</li>
<li>@ 之後出現 1 個以上的「.」配上大小寫英文及數字的組合，結尾需為大小寫英文</li>
</ol>
<p>因此，我們可以整理出以下電子郵件格式：</p>
<pre><code class="language-javascript">emailRule = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z]+$/;

// ^\w+：@ 之前必須以一個以上的文字&amp;數字開頭，例如 abc
// ((-\w+)：@ 之前可以出現 1 個以上的文字、數字或「-」的組合，例如 -abc-
// (\.\w+))：@ 之前可以出現 1 個以上的文字、數字或「.」的組合，例如 .abc.
// ((-\w+)|(\.\w+))*：以上兩個規則以 or 的關係出現，並且出現 0 次以上 (所以不能 –. 同時出現)
// \@：中間一定要出現一個 @
// [A-Za-z0-9]+：@ 之後出現 1 個以上的大小寫英文及數字的組合
// (\.|-)：@ 之後只能出現「.」或是「-」，但這兩個字元不能連續時出現
// ((\.|-)[A-Za-z0-9]+)*：@ 之後出現 0 個以上的「.」或是「-」配上大小寫英文及數字的組合
// \.[A-Za-z]+$/：@ 之後出現 1 個以上的「.」配上大小寫英文及數字的組合，結尾需為大小寫英文
</code></pre>
<blockquote>
<p>上述內容引用自<a href="https://ithelp.ithome.com.tw/articles/10094951">此文章</a></p>
</blockquote>
<h3>參考來源</h3>
<ul>
<li><a href="https://zh.wikipedia.org/zh-tw/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F">維基百科</a></li>
<li><a href="https://5xruby.tw/posts/15min-regular-expression">十五分鐘認識正規表達式</a></li>
<li><a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Regular_Expressions">MDN Web Docs</a></li>
<li><a href="https://www.minwt.com/webdesign-dev/html/20352.html">RegEx101 正規表示法線上產生器，有沒有選到立馬告訴你</a></li>
<li><a href="https://moojing.medium.com/javascript-%E5%88%9D%E6%8E%A2regex-%E6%AD%A3%E8%A6%8F%E8%A1%A8%E9%81%94%E5%BC%8F-1da2f4d94795">初探 Regex 正規表達式</a></li>
<li><a href="https://ithelp.ithome.com.tw/articles/10094951">Email 表單驗證</a></li>
</ul>


正規表達式（Regular expression），簡稱 regex 或 regexp，是一種用來描述字串是否符合某個語法規則的模型，用簡單字串來描述符合文中全部指定格式的字串

新手指南 - 正規表達式

這篇文章深入探討了 mongoose，這是一個用於 Node.js 的 MongoDB ODM（Object Document Mapper）工具。文章首先解釋了 mongoose 的基本概念、特點和主要功能。其次，文章比較了 mongoose 和其他 MongoDB 互動工具的優缺點，接著，文章探討了 mongoose 與原生 MongoDB 之間的性能差異，並提供了一套測試流程，以測試兩者在插入和聚合操作上的效能差異。

mongoose: odm solution of mongoDB

<h1>Auto-Layout</h1>
<p>Figma&#39;s recent update introduces enhanced Auto-Layout. Content now automatically wraps when the
viewport width is below a specific measurement.<br><img src="/km/autolayout_01.png" alt="Auto-Layout 1"></p>
<br/>
<br/>

<p>Designers can also set minimum or maximum width for containers in Figma. Once the container reaches
the minimum width, it will automatically start wrapping the content.<br><img src="/km/autolayout_02.png" alt="Auto-Layout 2"><br><br/> These new features empower responsive designs, combining wrap auto layout with minimum and
maximum width/height settings for containers.</p>
<br/> 
<br/>

<h1>2. Variables</h1>
<p>Variables are a powerful tool for systematizing your design.</p>
<br/>

<h2>Types of Variables</h2>
<table>
<thead>
<tr>
<th>Variable Type</th>
<th>Defined By</th>
<th>Can Be Applied To</th>
</tr>
</thead>
<tbody><tr>
<td>Color</td>
<td>Solid Fills</td>
<td>Fill Colors, Stroke Colors</td>
</tr>
<tr>
<td>Number</td>
<td>Number Values</td>
<td>Text Layers, Corner Radius, Minimum and maximum width/height, Padding and gap between</td>
</tr>
<tr>
<td>String</td>
<td>Text Strings and Variant Names</td>
<td>Text Layers, Variant Instances</td>
</tr>
<tr>
<td>Boolean</td>
<td>True/False Values</td>
<td>Layer visibility, Variant instances with true/false values</td>
</tr>
</tbody></table>
<br/>

<h2>Managing Variables</h2>
<p>Creating a design system with variables is more flexible and convenient than using styles. For
example:</p>
<p><img src="/km/variables_01.gif" alt="Variables Example"></p>
<p><em>Image Credit: Figma</em></p>
<br/>

<p>This approach allows easy upstream changes without manually reworking downstream elements.</p>
<br/> 
<br/>

<h2>Modes Variables</h2>
<p>Variables also enable setting different design modes, such as dark and light mode or variations for
different devices. This helps manage color, spacing, radius, and other values across modes.</p>
<p><img src="/km/variables_02.png" alt="Modes Variables Example"></p>
<p><em>Image Credit: Figma</em></p>
<br/> 
<br/>

<h1>3. Advanced Prototyping</h1>
<p>New features:</p>
<ul>
<li>Set variables</li>
<li>Conditional</li>
</ul>
<p>Variables power advanced prototyping, allowing dynamic screen updates based on variable changes.
Prototyping interactions and variable binding make this possible.</p>
<br/>

<h2>Set Variables</h2>
<p>Step 1 : Set a number variable named &#39;LikeCount&#39; with an initial value of 0.
<img src="/km/prototyping_01.png" alt="Set Variables Step 1"></p>
<br/>

<p>Step 2 : Bind the variable to the number next to the like button.
<img src="/km/prototyping_02.png" alt="Set Variables Step 2"></p>
<br/>

<p>Step 3 : Button interaction - On click - Set variable &#39;#LikeCount&#39; with logic <code>#LikeCount + 1</code>.
<img src="/km/prototyping_03.png" alt="Set Variables Step 3"></p>
<br/>

<p>Step 4 : Clicking &#39;Like&#39; increases the count.</p>
<br/>
<br/>

<h2>Conditional</h2>
<p>Step 1: Set a number variable named &#39;itemCount&#39; with an initial value of 0.</p>
<p><img src="/km/prototyping_04.png" alt="Conditional Step 1"></p>
<p><em>Image Credit: Figma</em></p>
<br/>

<p>Step 2: Select the button and add interaction - on click - Conditional.</p>
<p><img src="/km/prototyping_05.png" alt="Conditional Step 2"></p>
<p><em>Image Credit: Figma</em></p>
<br/>

<p>Step 3: Now you can apply a simple logic to the button by entering:</p>
<pre><code class="language-javascript">if #itemCount &gt; 0 set variable #itemCount = #itemCount - 1
else #itemCount &gt; 0 set variable #itemCount = 0
</code></pre>
<br/>

<p>This logic ensures that when users click on the &#39;-&#39; button, the number will automatically decrease
by 1. The &#39;else&#39; condition prevents negative values.</p>
<br/>
<br/>

<h1>4. Dev-Mode</h1>
<p>Features:</p>
<ul>
<li>Support different coding languages and dimension units</li>
<li>Enhanced designer communication</li>
<li>Easy asset download</li>
<li>Compare changes</li>
<li>Component playground</li>
<li>Figma for VScode</li>
</ul>
<br/>
<br/>

<p><img src="/km/devmode_07.png" alt="Dev Mode Toggle"></p>
<p>Dev-Mode enhances design and development collaboration.</p>
<br/>
<br/>

<h2>Coding languages and units support</h2>
<p>Generate production-ready CSS, iOS, or Android code snippets from designs. Customize code using
plugins.</p>
<p><img src="/km/devmode_01.png" alt="feature1"></p>
<br/>

<h2>Enhanced designer communication</h2>
<p>Use the &quot;Ready for dev&quot; icon to identify completed design elements. Stay informed about design
changes.</p>
<p><img src="/km/devmode_02.png" alt="feature2"></p>
<br/>

<h2>Easy asset download</h2>
<p>Download assets with one click, even if not displayed in the Asset area.</p>
<p><img src="/km/devmode_03.png" alt="feature3"></p>
<br/>

<h2>Compare changes</h2>
<p>Effortlessly compare design changes between versions.</p>
<p><img src="/km/devmode_04.png" alt="feature4"></p>
<br/>

<h2>Component playground</h2>
<p>Explore component variants without affecting the design.</p>
<p><img src="/km/devmode_05.png" alt="feature5"></p>
<br/>

<h2>Figma for VScode</h2>
<p>Use the Figma plugin for VSCode to inspect Figma files, collaborate with designers, and receive code
suggestions.</p>
<p><img src="/km/devmode_06.png" alt="feature6"></p>
<br/>
<br/>
<br/>
<br/>

<p>References: <a href="https://www.youtube.com/watch?v=jBXy30VwC_U&t=1097s">Mizko</a>,
<a href="https://help.figma.com/hc/en-us">Figma Learn</a>,
<a href="https://www.youtube.com/watch?v=Tx45NcbU6aA&t=224s">DesignCourse</a>,
<a href="https://www.youtube.com/watch?v=sNK-cPmnx94">CoderOne</a></p>


Bringing the Design and Development World Closer Than Ever Before

<h2>useState</h2>
<h3>使用情境</h3>
<p>用於在函數組件中添加一些內部 state 以進行渲染或觸發重新渲染。這個 Hook 接受一個參數作為初始狀態，並
返回一個包含兩個元素的陣列：當前狀態和一個更新狀態的函數。</p>
<h3>使用範例</h3>
<pre><code class="language-jsx">const [state, setState] = useState(initialState);
setState(newState);
</code></pre>
<pre><code class="language-tsx">import React, {useState} from &#39;react&#39;;

function Counter() {
  const [count, setCount] = useState(0);

  return (
    &lt;div&gt;
      &lt;p&gt;You clicked {count} times&lt;/p&gt;
      &lt;button onClick={() =&gt; setCount(count + 1)}&gt;Click me&lt;/button&gt;
    &lt;/div&gt;
  );
}

export default Counter;
</code></pre>
<h3>基於前一個值更新 state</h3>
<ul>
<li>因為更新 state 是非同步操作，不會馬上發生，所以基於前一個值更新 state 需用函式處理</li>
</ul>
<pre><code class="language-jsx">setCount(prevCount =&gt; prevCount + 1);
</code></pre>
<h3>當 state 為 objects 或 array，如何更新</h3>
<pre><code class="language-jsx">const [user, setUser] = useState({name: &#39;John&#39;, age: 30});

setUser(prevUser =&gt; ({...prevUser, age: prevUser.age + 1}));
</code></pre>
<h3>注意事項</h3>
<ul>
<li><code>set</code> function 只會在下次渲染時更新 state，如果呼叫 <code>set</code> 之後馬上讀取 state，會拿到舊的 state</li>
<li>放進 <code>set</code> function 的值，透過 <code>Object.is</code> 判斷跟舊的 state 一樣時，React 就不會重新渲染該元件跟它
的子元件</li>
<li>React 會批量更新 state，意味者執行完所有 event handler 及呼叫完所有 <code>set</code> functions 之後，React 才
會更新 states，這是為了優化效能；如果要強制 React 提前更新螢幕，可以參考
<a href="https://react.dev/reference/react-dom/flushSync">flushSync</a> (該作法不常見且容易造成效能問題)</li>
</ul>
<h2>useRef</h2>
<h3>使用情境</h3>
<p>用於在組件中保存一個可變的值，這個值在組件的所有渲染中都會保持不變。當你需要從一個函數組件中引用一個
DOM 節點，或者保持任何可變值，這個值<strong>不會觸發組件重新渲染</strong>。</p>
<h3>使用範例</h3>
<pre><code class="language-jsx">import React, {useRef} from &#39;react&#39;;

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () =&gt; {
    // `current` refers to the text input element mounted on **DOM**
    inputEl.current.focus();
  };

  return (
    &lt;&gt;
      &lt;input ref={inputEl} type=&quot;text&quot; /&gt;
      &lt;button onClick={onButtonClick}&gt;Focus the input&lt;/button&gt;
    &lt;/&gt;
  );
}

export default TextInputWithFocusButton;
</code></pre>
<pre><code class="language-jsx">import { useRef } from &#39;react&#39;;

function Stopwatch() {
  const intervalRef = useRef(0);
  // ...

function handleStartClick() {
  const intervalId = setInterval(() =&gt; {
    // ...
  }, 1000);
  intervalRef.current = intervalId;
}
</code></pre>
<h3>注意事項</h3>
<ul>
<li><strong><code>useRef()</code></strong> 的返回值在組件的所有渲染中都將保持不變；在下一次渲染時，<code>useRef</code> 將返回相同的
object。</li>
<li>可以更改 <strong><code>useRef</code></strong> 返回的 <strong><code>ref</code></strong> 的<code>current</code>屬性以儲存資料並稍後讀取。</li>
</ul>
<h2>useEffect</h2>
<h3>使用情境</h3>
<p>它告訴 React 在完成對 DOM 的更改後運行你的“副作用”函數。副作用可能包括資料獲取、訂閱或手動更改 React
組件之外的 DOM。</p>
<h3>使用範例</h3>
<pre><code class="language-jsx">useEffect(() =&gt; {
  // side effect

  return () =&gt; {
    // clear function
  };
}, [dependencies]);
</code></pre>
<pre><code class="language-jsx">import React, {useState, useEffect} from &#39;react&#39;;

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() =&gt; {
    // 使用瀏覽器的 API 更新文件標題
    document.title = `You clicked ${count} times`;

    // 返回的函數將在組件卸載或重新渲染前被調用，進行清理工作
    return () =&gt; {
      document.title = `React App`;
    };
  }, [count]); // 依賴於 count 變數，當 count 變化時，執行此副作用

  return (
    &lt;div&gt;
      &lt;p&gt;You clicked {count} times&lt;/p&gt;
      &lt;button onClick={() =&gt; setCount(count + 1)}&gt;Click me&lt;/button&gt;
    &lt;/div&gt;
  );
}

export default Example;
</code></pre>
<h3>注意事項</h3>
<ul>
<li>預設情況下，React 將在每次渲染後運行 <code>useEffect</code> 內的程式碼(side effect)，包括第一次渲染。</li>
<li>如果 <code>useEffect</code> 有需要清理的工作，比如取消訂閱或清理計時器，你可以返回一個函數，React 將在組件卸
載或重新渲染前調用它。</li>
<li>使用 <code>useEffect</code> 要包含依賴項<code>[]</code>，否則會導致數據過時或無限循環。依賴項可包含所有須”訂閱”的變數。</li>
</ul>
<h2>useContext</h2>
<h3>使用情境</h3>
<p>用於在多個元件之間傳值，避免 prop drilling</p>
<h3>使用範例</h3>
<pre><code class="language-jsx">const MyContext = React.createContext();

function MyComponent() {
  const contextValue = useContext(MyContext);
  // ...
}

function App() {
  const [value, setValue] = useState({count: 0});

  return (
    &lt;MyContext.Provider value={value}&gt;
      &lt;MyComponent /&gt;
      &lt;button onClick={() =&gt; setValue({count: value.count + 1})}&gt;Increment&lt;/button&gt;
    &lt;/MyContext.Provider&gt;
  );
}
</code></pre>
<pre><code class="language-jsx">function App() {
  const value = {count: 0};

  return (
    &lt;MyContext.Provider value={value}&gt;
      &lt;MyComponent /&gt;
      &lt;button onClick={() =&gt; value.count++}&gt;Increment&lt;/button&gt;
    &lt;/MyContext.Provider&gt;
  );
}
</code></pre>
<h3>注意事項</h3>
<ul>
<li><strong><code>useContext(MyContext)</code></strong> 只是讓你能夠讀取 context 的值以及訂閱 context 的變化。你仍然需要在上層
組件樹中使用 <strong><code>&lt;MyContext.Provider&gt;</code></strong> 來為下層組件提供 context。</li>
<li>context value 更改時，會觸發重新渲染；如果 context value 是 object，那 object 裡面的值更改不會有重
新渲染，只有換新的 object 才會重新渲染</li>
</ul>
<h2>Reference</h2>
<ul>
<li><a href="https://react.dev/reference/react#state-hooks"><strong>React doc - built-in hooks</strong></a></li>
<li><a href="https://medium.com/@AbidKazmi/all-react-hooks-in-one-short-4b0ed4b5a6e4">All React hooks in one short.</a></li>
<li><a href="https://www.youtube.com/watch?v=bGzanfKVFeU&t=228s">Goodbye, useEffect - David Khourshid</a></li>
</ul>


幫助 React 新手在實際開發中更有效地使用 useState, useRef, useEffect, useContext Hooks，提升開發網站的效率。

React tips: how to use built-in hook

<h1>Decentralized Web Token（DeWT)</h1>
<p>Decentralized Web Token（DeWT) 是我們專為 TideBit-DeFi 設計的去中心化認證機制，其原理參考
<a href="https://supertokens.com/blog/what-is-jwt">JWT</a> 的認證機制，兩者主要的不同在於 JWT 是由網站所核發(是
一種中心式的認證機制)而 DWT 則是由用戶所核發，並且兩者簽署的內容也不同。</p>
<h2>常見的身份驗證和授權技術</h2>
<p>當我們談論前後端的鑑權方式時，我們主要討論的是怎麼確定一個用戶或應用程式的身份以及他們是否有權限去訪
問某些資源。以下是幾種常見的鑑權方式的詳細說明：</p>
<ol>
<li><p><strong>Session - Cookie</strong>:</p>
<ul>
<li><strong>主要特點</strong>：透過伺服器生成的 Session ID 和客戶端的 Cookie 進行身份驗證和狀態管理。</li>
<li><strong>Session</strong>：當使用者成功登入後，伺服器會為該使用者建立一個獨特的 Session ID，並將此 ID 儲存於
伺服器的 session 儲存區（例如，伺服器記憶體、資料庫、Redis 等）。</li>
<li><strong>Cookie</strong>：伺服器將 Session ID 寫入使用者瀏覽器的 Cookie 中。當使用者再次訪問該網站時，瀏覽器
會自動將 Cookie 中的 Session ID 發送到伺服器，伺服器接收到後，查找對應的 Session 資料，以此確認
使用者身份。</li>
<li><strong>優點</strong>：<ul>
<li>較容易實現，尤其適用於傳統的網頁應用程式。</li>
<li>使用者登入狀態持久化，伺服器具有完全控制，可以隨時終止 session。</li>
</ul>
</li>
<li><strong>缺點</strong>：<ul>
<li>伺服器需保存大量 session 資料，對於大型或高流量的應用程式可能會造成伺服器壓力。</li>
<li>當使用分散式系統或集群時，可能需要進行 session 同步，增加複雜性。</li>
<li>Cookies 可能受到 XSS 和 CSRF 攻擊。</li>
</ul>
</li>
</ul>
<p><img src="https://github.com/CAFECA-IO/KnowledgeManagement/assets/17249354/bcde349c-a228-466d-8cca-ac517e2c1c5a" alt="dewt drawio"></p>
</li>
<li><p><strong>Token 驗證 (包括 JWT、SSO)</strong>：</p>
<ul>
<li><strong>Token</strong>：與 Session 類似，但不會儲存使用者資訊於伺服器。當使用者登入成功後，伺服器會發放一個
Token 給使用者，每次請求時帶上這個 Token，伺服器驗證 Token 的有效性即可。</li>
<li><strong>JWT (JSON Web Token)</strong>：是一種編碼後的 JSON 格式的資料，可以儲存資訊（例如使用者 ID）。JWT 有
三部分：header, payload, signature。它能確保資料沒有被篡改，JWT 是一種常用的 Token 格式。</li>
<li><strong>SSO (Single Sign-On)</strong>：允許使用者登入一個應用程式或平台後，可以不用重新登入便可訪問所有已授
權的其他相關聯的系統或服務。</li>
<li><strong>主要特點</strong>：使用 Token 代替 Session ID 進行身份驗證，無需伺服器保存使用者狀態。</li>
<li><strong>優點</strong>：<ul>
<li>無狀態性，伺服器不需要保存使用者狀態，適合分散式系統。</li>
<li>JWT 可以跨語言和平台使用，具有很高的擴展性。</li>
<li>SSO 提供了優良的使用者體驗，允許在多個應用程式間共享身份驗證狀態。</li>
</ul>
</li>
<li><strong>缺點</strong>：<ul>
<li>若 Token 遺失或被竊取，它可能被濫用，直到過期。</li>
<li>JWT 的內容可以被解碼查看，因此不能用來儲存敏感資料。</li>
</ul>
</li>
</ul>
</li>
</ol>
<ul>
<li><p>SSO 實施需要考慮多種安全問題，可能增加複雜性。</p>
<p><img src="https://github.com/CAFECA-IO/KnowledgeManagement/assets/17249354/30471587-4633-4e96-a70d-d8c48fb05e1b" alt="dewt_2 drawio"></p>
</li>
</ul>
<ol start="3">
<li><p><strong>OAuth 2.0 (開放授權)</strong>：</p>
<ul>
<li>OAuth 2.0 是一個讓第三方應用程式在未取得使用者明確帳戶和密碼的情況下，取得其資源的協定。例如，
當您使用 Google 帳戶登入其他網站或應用時。</li>
<li>這個流程涉及多個步驟，包括取得授權、交換 token 以及使用 token 訪問受保護的資源。</li>
<li>OAuth 2.0 定義了四種授權方式：授權碼、隱藏式、用戶密碼、客戶端憑證。</li>
<li><strong>主要特點</strong>：允許第三方應用在不知道使用者憑證的情況下訪問使用者的資源。</li>
<li><strong>優點</strong>：<ul>
<li>可以讓第三方應用訪問特定資源，而不需要知道使用者的帳戶密碼。</li>
<li>靈活的授權方式，可以根據不同的需求和場景選擇不同的授權流程。</li>
<li>被廣泛應用和接受，有豐富的開源庫和工具支持。</li>
</ul>
</li>
<li><strong>缺點</strong>：<ul>
<li>實施和管理可能複雜，需要維護授權伺服器。</li>
<li>若不正確或不安全地實施，可能會被攻擊者利用。</li>
<li>某些 OAuth 2.0 流程（例如隱藏式）可能不夠安全，需要特別注意。</li>
</ul>
</li>
</ul>
<p><img src="https://github.com/CAFECA-IO/KnowledgeManagement/assets/17249354/351084ee-07db-494d-9418-c47a07deb548" alt="dewt drawio (1)"></p>
</li>
</ol>
<p><strong>核心差異</strong>：</p>
<ul>
<li><strong>Session - Cookie</strong>：伺服器中心化，是一種基於伺服器的身份驗證方法，需要伺服器持久化保存每個使用者
的 Session 資料，使用者的瀏覽器需要支持並接受 Cookies，使用伺服器儲存的 Session 資料和客戶端的
Cookie 進行驗證。</li>
<li><strong>Token 驗證</strong>：與 Session 相反，是無狀態的身份驗證方法，不需要伺服器保存 Session 資料。使用 Token
進行驗證，其中 JWT 是一種常用的 Token 格式，具有自包含性，它可以在 token 本身儲存資訊。</li>
<li><strong>SSO</strong>：是一個廣義的概念，描述的是一種身份驗證策略，是一種允許在多個應用間共享身份驗證狀態的技術
。而 token（不論其格式如何）只是實現 SSO 的多種工具之一。</li>
<li><strong>OAuth 2.0</strong>：授權而非身份驗證：OAuth 2.0 重點是允許應用程式訪問特定資源，而不是驗證使用者身。它
允許第三方應用在使用者的同意下訪問其資源，涉及授權、交換 token 以及使用 token 訪問資源的多個步驟，
根據不同的需求和場景，OAuth 2.0 定義了不同的授權流程。</li>
</ul>
<p><strong>結語</strong>：鑑於上述技術，我們可以見到各有所長、所短。Session-Cookie 是伺服器中心，適合傳統網頁應用
。Token 驗證如 JWT 則更適合現代分散式系統。SSO 專為多應用共享驗證而設，而 OAuth 2.0 更偏重於資源授權
，選擇哪種身份驗證和授權技術取決於應用程式的需求、結構和目標。例如，對於單一的 web 應用程式，使用
Session-Cookie 可能更簡單和直接；對於移動應用程式或單頁應用程式，使用 Token 或 OAuth 可能更為適合。</p>
<h2>簡述 JWT</h2>
<p>JWT 是 Auth0 提出的通過对 JSON 进行加密签名來實現授權驗證的方案；</p>
<p>就是登錄成功後將相關用戶信息組成 JSON 對象，然後對這個對象進行某種方式的加密，返回給客戶端；客戶端在
下次請求時帶上這個 Token；服務端再收到請求時校验 token 合法性，其實也就是在校驗請求的合法性。</p>
<p><img src="https://i.imgur.com/gZBxaH9.jpg" alt=""></p>
<h3>產生 JWT</h3>
<p>JWT 為 JSON Web Token 是一種開放標準（RFC 7519），它定義了一種簡單穩定的方式來表示身份驗證和授權數據
。流程為</p>
<ol>
<li>是由用戶提交登入的帳號密碼後。</li>
<li>前端將加密過的用戶資料傳送給後端伺服器。</li>
<li>收到資料後，後端伺服器根據用戶的資料產生對應的 JSON ，其 JSON 含有三個部份
header、payload、signature(在第三步產生)。</li>
<li>由伺服器對用 <a href="https://www.base64encode.org/">Base64 編碼</a>的 header、payload 簽名得到 signature，
得到的 signature 也用<a href="https://www.base64encode.org/">Base64 編碼</a>。</li>
<li>得到 Token， Token 是 header、payload、signature 分
別<a href="https://www.base64encode.org/">Base64 編碼</a>後得到的結果用點(.)將三者串聯起來。</li>
</ol>
<pre><code class="language-javascript">const JWT =
  &#39;eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.e25hbWU6Ikpob24gRG9lIixleHBpcmVkOjE2ODA3NjE1MDAzMDEsYWRtaW46dHJ1ZX0.PT7k3siYn67lJBMYzQkj/yLsLt1SYGztgTTiR5or1Ss=&#39;;
</code></pre>
<ul>
<li>header: 是實作 JWT 共用的格式，註明類別(typ)為(JWT)，加密演算法(alg)為(HS256)，以
<code>{&quot;typ&quot;:&quot;JWT&quot;,&quot;alg&quot;:&quot;HS256&quot;}</code> 為例 Base64 編碼的結果為 <code>eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9</code>。</li>
<li>payload: 裡面則是包含有前後端需要共享的資訊，以
<code>{name:&quot;Jhon Doe&quot;,expired:1680761500301,admin:true}</code> 為例 Base64 編碼的結果為
<code>e25hbWU6Ikpob24gRG9lIixleHBpcmVkOjE2ODA3NjE1MDAzMDEsYWRtaW46dHJ1ZX0</code>。</li>
<li>signature: 由後端持有的 private key 對 header 及 payload Base64Encoded 的結果使用 HMACSHA256 演算
法簽名，將簽名的結果也進行 Base64 編碼。</li>
</ul>
<h4>名詞定義</h4>
<ul>
<li>無狀態 JWT（Stateless JWT）：包含 Session 數據的 JWT Token。Session 數據將被直接編碼進 Token 內。</li>
<li>有狀態 JWT（Stateful JWT）：包含 Session 引用或其 ID 的 JWT Token。Session 數據存儲在服務端。
Session token（又稱 Session cookie）：標準的、可被簽名的 Session ID，例如各類 Web 框架（譯者註：包
括 Laravel）內已經使用了很久的 Session 機制。Session 數據同樣存儲在服務端。</li>
</ul>
<h3>驗證流程</h3>
<ol>
<li>後端伺服器收到 JWT 後使用 <a href="https://www.base64decode.org/">base64 解碼</a>。</li>
<li>先比對 header 內容，確認 typ 為 JWT 且 alg 為 HS256。</li>
<li>(optional) 若 payload 中有 iat(issue at， 簽名時間)或是 expired 等資訊則需要判斷此 JWT 是否是未過
期的狀態。</li>
<li>JWT 簽名的伺服器與驗證的伺服器會共用私鑰，所以可以將收到的 JWT 的 header，payload 的簽名，對比是
否有得到一樣的結果。</li>
</ol>
<p>上述條件均滿足即為合法的 JWT。</p>
<h3>JWT 的優點</h3>
<ul>
<li>不需要在服務端保存會話信息（RESTful API 的原則之一就是無狀態），所以易於應用的擴展，即信息不保存在
服務端，不會存在 Session 擴展不方便的情況；</li>
<li>JWT 中的 Payload 負載可以存儲常用信息，用於信息交換，有效地使用 JWT，可以降低服務端查詢數據庫的次
數</li>
</ul>
<h3>JWT 的缺點</h3>
<ul>
<li>加密問題: JWT 默認是不加密，但也是可以加密的。生成原始 Token 以後，可以用密鑰再加密一次。</li>
<li>到期問題: 由於服務器不保存 Session 狀態，因此無法在使用過程中廢止某個 Token，或者更改 Token 的權限
。在無狀態 Tokens 內存儲的數據最終會「過時」，不再反映數據庫內最新的數據。這意味著，Tokens 內保留
的可能是過期的信息。也就是說，一旦 JWT 簽發了，在到期之前就會始終有效，除非服務器部署額外的邏輯。</li>
<li>費空間: JWT Tokens 實際上並不「小」。尤其是使用無狀態 JWT 時，所有的數據將會被直接編碼進 Tokens 內
，很快將會超過 Cookies 或 URL 的長度限制。你可能在想將它們存儲到 Local Storage。然而，Local
Storage 並沒有提供任何類似 Cookies 的安全措施。LocalStorage 與 Cookies 不同，並不會在每次請求時發
送存儲的數據。</li>
<li>其實並不安全: 成上所述，將 JWT Tokens 存儲到 Cookies 內，那麼安全性與其他 Session 機制無異。但如果
你將 JWT 存儲至其它地方，會導致一個新的漏洞。簡單來說，使用 Cookies 並不是可選的，無論你是否採用
JWT。</li>
<li>無法單獨銷毀: 不像 Sessions 無論何時都可以單獨地在服務端銷毀。無狀態 JWT Tokens 無法被單獨的銷毀。
根據 JWT 的設計，無論怎樣 Tokens 在過期前將會一直保持有效。舉個例子，這意味著在檢測到攻擊時，你卻
不能銷毀攻擊者的 Session。同樣，在用戶修改密碼後，也無法銷毀舊的 Sessions。對此，我們幾乎無能為力
，除非重新構建複雜且有狀態（Stateful）的基礎設施來明確地檢測或拒絕特定 Session，否則將無法結束會話
。但這完全違背了使用無狀態 JWT Tokens 的最初目的。</li>
</ul>
<h4>補充</h4>
<p>Cookies 是一種存儲機制，然而 JWT Tokens 是被加密並簽名後產生的憑證。它們並不對立， 相反他們可以獨立
或結合使用。正確的對比應當是：Session 對比 JWT，以及 Cookies 對比 Local Storage。</p>
<h3>結論</h3>
<p>無狀態 JWT Tokens 無法被單獨地銷毀或更新，取決於你如何存儲，可能還會導致長度問題、安全隱患。有狀態
JWT Tokens 在功能方面與 Session cookies 無異，但缺乏生產環境的驗證、經過大量 Review 的實現，以及良好
的客戶端支持。</p>
<h2>簡述 DeWT</h2>
<p><img src="https://i.imgur.com/E4oWeDy.jpg" alt=""></p>
<h3>產生 DeWT</h3>
<ol>
<li>用戶訪問 TideBit-DeFi 使用 metamask 與 TideBit-DeFi 連結後</li>
<li>為使用 TideBit-DeFi 的服務需使用自己的錢包簽 TideBit-DeFi 提供的相關的同意條款如 Term of
services, private policy。</li>
<li>用戶簽名的內容我們使用 eip712 寫在智能合約裡，將用戶簽名的結果加上簽名的內容即為 DeWT。</li>
</ol>
<h3>存取 DeWT</h3>
<p>在用戶產生 DeWT 後使用 api 發送給後端伺服器，並將 DeWT 將存放在用戶瀏覽器的 cookie 之中。</p>
<ul>
<li>前端: 在每次發送 api 時要帶上 DeWT，並且需要定期到 cookie 檢查 DeWT 是否已過期。</li>
<li>後端: 在收到 DeWT，要先驗證此 DeWT(驗證方法稍後說明)是否合法，如合法需要到 DB 檢查此用戶是否存在，
如存在就紀錄此登入行為，若不存在則需要建立新用戶並紀錄此登入行為。</li>
</ul>
<h3>DeWT 資料格式</h3>
<p>DeWT 為簽名的內容加上用戶簽名的結果進行 rlp 編碼。</p>
<h4>簽名內容:</h4>
<ul>
<li>domain: Tidebit-DeFi 的 domain</li>
<li>version: Tidebit-DeFi 現在使用的版本</li>
<li>agree： 服務條款的網址(Term of services)，隱私條款的網址(private policy)<ul>
<li>其中服務條款的網址、隱私條款的網址後面都有一個 hash 用來確定服務條款、隱私條款的版本</li>
</ul>
</li>
<li>signer： 用戶簽名錢包的地址</li>
<li>expired： DeWT 的到期時間，簽名後的 1 小時到期。</li>
<li>iat: issue at，DeWT 的簽名時間</li>
</ul>
<pre><code class="language-javascript!">const payload = {
    domain: &quot;https://www.tidebit-defi.com&quot;,
    version: &quot;&quot;,
    agree: [&quot;https://www.tidebit-defi.com/term_of_service/{hash}&quot;, &quot;https://www.tidebit-defi.com/private_policy/{hash}&quot;],
    signer: &quot;0xfc657dAf7D901982a75ee4eCD4bDCF93bd767CA4&quot;,
    expired: &quot;{timestamp}&quot;,
    iat: &quot;{timestamp}&quot;
}
</code></pre>
<h4>簽名結果:</h4>
<pre><code class="language-javascript!">const signature = {
    r,
    s,
    v
}
</code></pre>
<h3>驗證機制</h3>
<p>後端在收到 DeWT 後，先將 DeWT 由 rlp 編碼轉回明文，</p>
<ol>
<li>檢查 DeWT 的 domain 是否正確</li>
<li>檢查 DeWT 的 version 是否正確</li>
<li>檢查用戶同意的條款是否為最新版</li>
<li>檢查 DeWT 是否未過期,可透過 iat(issue at， 簽名時間)或是 expired 等資訊=判斷。</li>
<li>檢查用戶的簽名，由用戶的簽名結果加上明文內容反推出用戶的 publickey，再由 publickey 推出用戶的地址
，與先前回推出的明文中提供的 signer 比對是否一致，若一致才合法。</li>
</ol>
<h2>Reference</h2>
<ul>
<li><a href="https://supertokens.com/blog/what-is-jwt">What is a JWT? Understanding JSON Web Tokens</a></li>
<li><a href="https://www.freecodecamp.org/news/how-to-sign-and-validate-json-web-tokens/">How to Sign and Validate JSON Web Tokens – JWT Tutorial</a></li>
<li><a href="https://learnku.com/articles/22616">別再使用 JWT 作為 Session 系統！問題重重且很危險</a></li>
<li><a href="https://z.itpub.net/article/detail/9DDEE4C5561AE916018002EA24608806">一文整理前后端鉴权方案！</a></li>
<li><a href="https://www.jianshu.com/p/f31ef35eb77c">session、token、jwt、oauth2</a></li>
<li><a href="https://zhuanlan.zhihu.com/p/92051359">白话让你理解什么是 oAuth2 协议</a></li>
<li><a href="https://ssshooter.com/2021-02-21-auth/">前后端接口鉴权全解：cookie、session、token 区别解析</a></li>
<li><a href="https://developer.aliyun.com/article/856618">还分不清 Cookie、Session、Token、JWT？</a></li>
<li><a href="https://juejin.cn/post/7077540836229152775">扒一扒 Cookie、Session、Token、JWT、OAuth2、OIDC、SSO、Ids4 一家的关系网</a></li>
</ul>


Decentralized Web Token (DeWT) 是專為 TideBit-DeFi 設計的去中心化認證機制。不同於一般由伺服器核發的 JWT，DeWT 由用戶自行核發。本文進一步介紹了不同的身份驗證和授權技術，並詳細說明 DeWT 的產生與存取方式。

Decentralized Web Token（DeWT)

<h1>製作加密貨幣交易所資產負債表：一份全面指南</h1>
<h2>導言</h2>
<p>隨著加密貨幣市場的快速發展，加密貨幣交易所成為了金融生態系統中不可或缺的一部分。為了確保交易所的運作
穩定及合規性，正確地編制資產負債表（Balance Sheet）是至關重要的一環。本指南將深入探討製作加密貨幣交
易所資產負債表的步驟和考慮事項，幫助您建立一份準確而全面的會計報告。</p>
<h2>什麼是資產負債表</h2>
<p>資產負債表，又稱平衡表或資本表，是一個公司的三大主要財務報表之一，主要揭示公司在某一特定日期的資產、
負債和股東權益狀態。資產負債表的核心是資產 = 負債 + 股東權益的等式。</p>
<h2>資產負債表的組成</h2>
<h3>第一部分：資產</h3>
<ul>
<li><strong>加密貨幣 (Cryptocurrencies)</strong>：這部分包括交易所持有的各種加密貨幣資產，詳細列示，並按照公允價值
進行評估。</li>
<li><strong>現金及同等物 (Cash and Cash Equivalents)</strong>：這部分包括交易所的現金以及其他等值的流動資產。可以進
一步細分為不同的貨幣，例如 USD、EUR 等，以及它們的當前價值。</li>
<li><strong>應收帳款 (Accounts Receivable)</strong>：這部分代表交易所應收但尚未收到的金額，例如由於交易延遲或其他原
因。</li>
<li><strong>投資組合 (Investment Portfolio)</strong>：如果交易所除了主要的加密貨幣之外，還持有其他形式的投資，例如
股票、債券或其他加密貨幣，那麼這些投資都應詳細列出。</li>
</ul>
<h3>第二部分：負債</h3>
<ul>
<li><strong>市場貸款及債務 (Market Loans and Liabilities)</strong>：這部分包括交易所從市場上借款或有其他形式的債務
。這部分可以進一步細分，例如短期和長期債務，以及與哪些金融機構的債務。</li>
<li><strong>用戶在交易所的存款 (User Deposits in the Exchange)</strong>：這部分主要是用戶在交易所的存款。</li>
<li><strong>應付帳款 (Accounts Payable)</strong>：這部分代表交易所應付但尚未支付的金額，例如購買服務或商品的費用。</li>
</ul>
<h3>第三部分：權益</h3>
<ul>
<li><strong>交易所存款 (Capital)</strong>：這部分代表交易所自己的資金或資本，可以提供一些關於交易所如何獲得這些資金
的背景信息，例如是否透過私募、公開募資或其他方式。</li>
<li><strong>保留盈餘 (Retained Earnings)</strong>：這部分代表交易所過去的累積盈餘，扣除已分配的股利後的餘額。</li>
<li><strong>股本 (Share Capital)</strong>：這部分代表股東對交易所的投資，通常是以股票的形式。可以提供一些關於股本的
詳細信息，例如股票的種類、面值、發行價格等。</li>
</ul>
<h3>附加事項</h3>
<ul>
<li><strong>公允價值評估</strong>：由於加密貨幣的市場價值波動大，需要定期進行公允價值評估，並將評估結果反映在資產負
債表上。</li>
<li><strong>合規性要求</strong>：根據當地法規，確保資產負債表中的數據合規且準確。</li>
<li><strong>附註事項</strong>：在資產負債表末尾，提供附註以解釋重要的會計政策、估計方法和其他重要信息。</li>
</ul>
<h2>加密貨幣交易所的資產負債表與一般交易所的資產負債表有何異同</h2>
<h3>不同點</h3>
<ul>
<li>特殊資產類型: 加密貨幣交易所的資產中會有各種不同的虛擬資產或代幣。</li>
<li>價值波動性: 加密貨幣的價值波動性通常比傳統資產大。</li>
<li>區塊鏈技術: 透明度和不可篡改的特性使得資產和交易記錄更加透明。</li>
</ul>
<h3>共同點</h3>
<ul>
<li>基本結構: 不論是傳統交易所還是加密貨幣交易所，資產負債表的基本結構都是相同的，即揭示資產、負債和業
主權益狀態。</li>
</ul>
<h2>製作加密貨幣交易所資產負債表需要提供哪些資料以及如何取得這些資料</h2>
<h3>資產</h3>
<ul>
<li><p><strong>加密貨幣資產 (Cryptocurrencies)</strong></p>
<ul>
<li>資料來源：智能合約地址</li>
<li>取得方式：用於查詢金庫或保管中的加密貨幣的資產情況。</li>
</ul>
</li>
<li><p><strong>現金及同等物 (Cash and Cash Equivalents)</strong></p>
<ul>
<li>資料來源：銀行帳戶</li>
<li>取得方式：透過銀行帳戶的月結單或線上銀行系統查詢。</li>
</ul>
</li>
<li><p><strong>應收帳款 (Accounts Receivable)</strong></p>
<ul>
<li>資料來源：交易所的內部記帳系統</li>
<li>取得方式：查詢與其他交易所或提供商之間的未結算金額。</li>
</ul>
</li>
<li><p><strong>投資組合 (Investment Portfolio)</strong></p>
<ul>
<li>資料來源：投資管理系統或金融機構提供的報告</li>
<li>取得方式：定期查詢或報告。</li>
</ul>
</li>
</ul>
<h3>負債</h3>
<ul>
<li><p><strong>市場貸款及債務 (Market Loans and Liabilities)</strong></p>
<ul>
<li>資料來源：金融機構或借款合約</li>
<li>取得方式：透過金融機構的月結單或線上系統查詢。</li>
</ul>
</li>
<li><p><strong>用戶在交易所的存款 (User Deposits in the Exchange)</strong></p>
<ul>
<li>資料來源：區塊鏈</li>
<li>取得方式：爬梳區塊鏈上的交易紀錄。</li>
</ul>
</li>
</ul>
<h3>股東權益 (Equity)</h3>
<ul>
<li><p><strong>交易所存款 (Capital)</strong></p>
<ul>
<li>資料來源：公司註冊文件或內部記帳系統</li>
<li>取得方式：查詢公司的註冊資本或內部資金流動。</li>
</ul>
</li>
<li><p><strong>保留盈餘 (Retained Earnings)</strong></p>
<ul>
<li>資料來源：交易所的內部記帳系統及區塊鏈</li>
<li>取得方式：爬梳區塊鏈上的交易紀錄並與內部記帳系統對照。</li>
<li>說明：這部分的主要收入來源有以下幾點：<ol>
<li><strong>交易手續費</strong>：交易所為提供交易平台而向用戶收取的費用。</li>
<li><strong>差價費 (spread fee)</strong>：這是買賣價格之間的差額，這部分的收入直接增加交易所的盈餘。</li>
<li><strong>CFD 強制關倉懲罰費</strong>：當用戶的 CFD 交易達到強制關倉的條件時，交易所會從交易保證金中收取一
定的費用作為懲罰。這部分的費用也將被計入交易所的收入。</li>
</ol>
</li>
</ul>
<p>這些收入在扣除交易所的運營成本、稅金和其他費用後，將被累積為保留盈餘。</p>
</li>
<li><p><strong>股本 (Share Capital)</strong></p>
<ul>
<li>資料來源：公司註冊文件或股東名冊</li>
<li>取得方式：查詢公司的註冊股本或股東名冊。</li>
</ul>
</li>
</ul>
<h2>如何由這些資料生成加密貨幣交易所資產負債表</h2>
<h3>1. 資料收集</h3>
<p>首先，您需要從不同的來源收集所有必要的資料。</p>
<ul>
<li><strong>加密貨幣資產</strong>：使用智能合約地址查詢系統，爬梳區塊鏈上的交易紀錄，以確定交易所持有的各種加密貨幣
的數量和當前市場價值。</li>
<li><strong>現金及同等物</strong>：查詢交易所的銀行帳戶和其他金融機構的帳戶，以確定現金和等值資產的總額。</li>
<li><strong>應收帳款</strong>：爬梳區塊鏈上的交易紀錄，以確定與其他交易所或提供商之間的未結算金額。</li>
</ul>
<h3>2. 資料整理</h3>
<p>將收集到的資料分類並整理成資產負債表的格式。</p>
<h3>3. 計算資產總額</h3>
<p>將所有的資產（加密貨幣、現金及同等物、應收帳款等）加總，得到資產總額。</p>
<h3>4. 計算負債總額</h3>
<p>確定交易所目前欠客戶的資產總額，並加入其他短期和長期負債，如應付帳款或借款。</p>
<h3>5. 計算股東權益</h3>
<p>股東權益是資產減去負債得到的。這部分可以進一步細分為交易所存款、保留盈餘和股本。</p>
<h3>6. 驗證資料的準確性</h3>
<p>使用區塊鏈的不可篡改特性，確認所有交易和餘額的準確性。此外，與損益表進行對照，確保財務數據的一致性。</p>
<h3>7. 確認資產負債表平衡</h3>
<p>最後，確保資產負債表的基本等式（資產 = 負債 + 股東權益）成立。</p>
<h2>額外考慮事項</h2>
<h3>風險因素</h3>
<p>在製作資產負債表時，交易所應考慮以下風險因素：</p>
<ul>
<li>市場價值的波動性</li>
<li>技術風險，例如黑客攻擊</li>
<li>法規風險</li>
</ul>
<h3>資產評估方法</h3>
<p>對於加密貨幣和其他投資組合的評估，交易所可以考慮以下評估方法：</p>
<ul>
<li>先進先出（FIFO）</li>
<li>加權平均成本法</li>
</ul>
<h3>稅務考慮</h3>
<p>由於加密貨幣的稅務處理在不同國家/地區可能有所不同，交易所應考慮的稅務問題包括：</p>
<ul>
<li>加密貨幣的稅務處理</li>
<li>交易所的稅務居民地</li>
<li>交易所應咨詢專業會計師或稅務顧問以確保合規性。</li>
</ul>
<h3>技術工具和軟件</h3>
<p>交易所可以考慮使用以下工具或軟件來幫助製作資產負債表：</p>
<ul>
<li>區塊鏈分析工具</li>
<li>會計軟件</li>
</ul>
<h3>內部控制</h3>
<p>交易所應建立嚴格的內部控制機制，以確保資料的準確性和完整性，並防止欺詐或誤報。</p>
<h3>持續更新</h3>
<p>由於加密貨幣市場和相關法規不斷變化，交易所應定期審查和更新其資產負債表，以確保其反映了最新的市場和法
規環境。</p>
<h2>結論</h2>
<p>製作加密貨幣交易所的資產負債表需要考慮到加密貨幣市場的高度動態性和風險，確保報表準確、合規且具有可讀
性。正確的資產負債表能夠幫助交易所管理者和投資者瞭解交易所的財務狀況，從而作出更明智的決策。總之，建
立一個堅實的會計框架是確保加密貨幣交易所長期成功的關鍵之一。</p>
<h2>實際例子分析：</h2>
<p>假設目前交易所的資產為 100USDT，其中負債為用戶轉入交易所的虛擬貨幣，總額 50USDT，股東權益為 50USDT。</p>
<p><strong>起始狀態：</strong></p>
<ul>
<li>資產：100 USDT</li>
<li>負債：50 USDT</li>
<li>股東權益：50 USDT</li>
</ul>
<p><strong>第一種情況：</strong> 其中一名用戶開倉一筆 CFD 交易以 10USDT 換 1ETH。</p>
<ol>
<li><p><strong>我們有去其他交易所用 USDT 買進 ETH</strong></p>
<ul>
<li>資產：減去 10 USDT，增加 1 ETH。</li>
<li>負債：不變</li>
<li>股東權益：減去 10 USDT，增加 1 ETH。</li>
</ul>
<p><em>新的資產負債表：</em></p>
<ul>
<li>資產：90 USDT + 1 ETH</li>
<li>負債：50 USDT</li>
<li>股東權益：40 USDT + 1 ETH (由於未實際收取 USDT，股東權益減少 10 USDT)</li>
</ul>
</li>
<li><p><strong>我們沒有去其他交易所用 USDT 買進 ETH</strong></p>
<ul>
<li>資產：不變 (因為只是合約交易，沒有實際交換資產)</li>
<li>負債：不變</li>
<li>股東權益：不變</li>
</ul>
<p><em>新的資產負債表：</em></p>
<ul>
<li>資產：100 USDT</li>
<li>負債：50 USDT</li>
<li>股東權益：50 USDT</li>
</ul>
</li>
</ol>
<p><strong>第二種情況：</strong> 其中一名用戶開倉一筆 CFD 交易以 11USDT 換 1ETH，並且有另一名用戶開倉一筆 CFD 交易以
1ETH 換 9USDT。我們可以用 10USDT 換 1ETH。</p>
<ol>
<li><p><strong>我們有去其他交易所用 USDT 買進 ETH</strong></p>
<ul>
<li>資產：不變</li>
<li>負債：減少 2 USDT (因為您賺取了 2 USDT 的差價，這部分資金不再是屬於用戶的)</li>
<li>股東權益：增加 2 USDT (因為您賺取了 2 USDT 的差價)</li>
</ul>
<p><em>新的資產負債表：</em></p>
<ul>
<li>資產：100 USDT</li>
<li>負債：48 USDT</li>
<li>股東權益：52 USDT</li>
</ul>
</li>
<li><p><strong>我們沒有去其他交易所用 USDT 買進 ETH</strong></p>
<ul>
<li>資產：不變</li>
<li>負債：減少 2 USDT (因為您賺取了 2 USDT 的差價，這部分資金不再是屬於用戶的)</li>
<li>股東權益：增加 2 USDT (因為您賺取了 2 USDT 的差價)</li>
</ul>
<p><em>新的資產負債表：</em></p>
<ul>
<li>資產：100 USDT</li>
<li>負債：48 USDT</li>
<li>股東權益：52 USDT</li>
</ul>
</li>
</ol>


本指南詳細解釋了如何製作加密貨幣交易所的資產負債表。從解釋資產負債表的基本概念，到比較加密貨幣交易所和傳統交易所之間的異同，再到具體列出製作此類資產負債表所需的資料，以及如何結合這些資料進行計算。最後，通過具體的例子，深入解析了在不同交易情境下資產負債表的變化情況。

Crafting the Balance Sheet for Cryptocurrency Exchanges: A Comprehensive Guide

<p>Today, we will be collaborating with two prominent AI platforms, ChatGPT and Midjourney, which have garnered significant recognition in the current AI landscape. Our objective is to explore how these platforms can provide valuable support to UI/UX designers in their work.</p>
<br/>

<h1>Chat GPT</h1>
<br/>

<h2>UX research</h2>
<h3>Define your product</h3>
<ol>
<li>Knowing your potential users.</li>
</ol>
<pre><code class="language-text">Define the target market for a [your product].
</code></pre>
<img width="789" alt="Define the target market for a" src="/km/define.png">

<br/>

<ol start="2">
<li>Picture how your product would be looked like...</li>
</ol>
<pre><code class="language-text">Outline the key features and benefits of [your product].
</code></pre>
<img width="789" alt="Outline the key features and benefits of" src="/km/feature.png">

<br/>

<p>These prompts are helpful for designers to clearly grasp the basic concept of the product. Moreover, they can be expanded upon to delve deeper into various aspects.
With ChatGPT, you can save a significant amount of time on Googling and gathering data on your own.</p>
<br/>

<h3>User interview</h3>
<ol>
<li>Interviews</li>
</ol>
<pre><code class="language-text">I want to interview some [your product] users. I want to find out what makes them loyal users. Write me 10 interview questions I can ask.
</code></pre>
<img width="786" alt="interview" src="/km/interview.png">

<br/>

<ol start="2">
<li>Survey</li>
</ol>
<pre><code class="language-text">I want to conduct a survey for [your product] users to know what makes them loyal users. Also try to learn what&#39;s their pain point now. Can you give me 10 survey questions that I can ask.
</code></pre>
<img width="789" alt="survey" src="/km/survey.png">

<br/>

<p>In this phase, ChatGPT can provide researchers with the foundational framework for both interview and survey questions. However, as a seasoned UX researcher, it&#39;s essential to tailor and refine these questions to align precisely with our specific requirements and objectives. But it is time saving for sure.</p>
<br/>

<h3>Competitor analysis</h3>
<ol>
<li>Knowing who</li>
</ol>
<pre><code class="language-text">Who are a [your product] 5 biggest competitors
</code></pre>
<img width="795" alt="who" src="/km/competitor_who.png">

<br/>

<ol start="2">
<li>Knowing how</li>
</ol>
<p>Continuing from the previous question</p>
<pre><code class="language-text">Who are a [your product] 5 biggest competitors
</code></pre>
<img width="813" alt="how" src="/km/competitor_how.png">

<br/>

<h2>Analysis</h2>
<h3>Persona</h3>
<pre><code class="language-text">Can you build a persona for mining software user including their behavior, wants and need. in table
</code></pre>
<img width="790" alt="persona" src="/km/persona.png">

<br/>

<p>In here, you can also add some specific codition acoording to your previous user research to the persona, like what type of user, age, experience or so to fit your scenario better.
Sometime ChatGPT might give you some insight that you didn&#39;t notice before.</p>
<br/>

<h3>User story</h3>
<pre><code class="language-text">can you give me the user story of [name from previous answer]
</code></pre>
<img width="795" alt="user story" src="/km/user_story.png">

<br/>

<p>It would be more beneficial if you could continue the inquiry after creating the persona. Alternatively, if you have distinct personas in mind, you can inform ChatGPT in advance. This approach enables it to craft more accurate and creative content.</p>
<br/>

<h3>User flow</h3>
<pre><code class="language-text">Create a user flow for [your product].
</code></pre>
<img width="790" alt="user flow" src="/km/user_flow.png">

<br/>

<p>Here, you can incorporate additional conditions, such as considering the devices or environments in which the user flow will be experienced. This ensures that the user flow aligns with the specific requirements of your final product.</p>
<br/>

<h2>Wireframing</h2>
<pre><code class="language-text">Create a wireframe in text for mining software app on desktop that&#39;s friendly and easy adaptive for new user
</code></pre>
<img width="790" alt="截圖 2023-08-22 下午4 16 32" src="/km/wireframe.png">

<br/>

<p>Given that ChatGPT is a text-based AI, it&#39;s incapable of directly generating visual content like wireframes. However, it can provide a fundamental outline of the elements that should be present in your final wireframe. It&#39;s still our job to visualize it.</p>
<br/>

<h2>UX Writting</h2>
<p>This is my personal favorite part.
Ask ChatGPT for UX writting ideas, in any languages you want!</p>
<ol>
<li>Page description</li>
</ol>
<pre><code class="language-text">Give me 10 interesting and creative captions for 404 page
</code></pre>
<img width="813" alt="404" src="/km/404page.png">

<br/>

<ol start="2">
<li>Buttons</li>
</ol>
<pre><code class="language-text">Give me 10 idea for the caption of CTA buttons
</code></pre>
<img width="821" alt="CTA" src="/km/cta_btn.png">

<br/>

<ol start="3">
<li>Headline or Content</li>
</ol>
<pre><code class="language-text">Give me 10 Professional headline for a blockchain solution company&#39;s web
</code></pre>
<img width="821" alt="headline" src="/km/headline.png">

<br/>

<h2>UI Design</h2>
<h3>Checklist for UI Design</h3>
<pre><code class="language-text">Create a checklist for UI elements for a perfect mining software in a table
</code></pre>
<img width="826" alt="checklist" src="/km/checklist.png">

<br/>

<p>This table can serve as a foundation for ensuring that your product&#39;s user interface covers the essential elements for a seamless user experience.
You can adapt and expand the checklist based on your specific functionalities and requirements. </p>
<br/>

<h3>Color palettes</h3>
<p>It&#39;s really fast to generate color palettes with ChatGPT, you can just tell it your brand color and the elements you need then everything will be done in few second.</p>
<pre><code class="language-text">Can you give me a bright and energetic color palette for a mining software app in bright mode with the brand color #FFA502 and #1A2E50. Including background, surface, text, button in default, hover and disable state, state color. List them in table
</code></pre>
<img width="817" alt="color" src="/km/color.png">

<br/>

<p>As a professional UX designer, we know how important accessibility is. So don; don&#39;t forget to check the color you are going to use is complied with Web Content Accessibility Guidelines.
Here is what you can do.</p>
<pre><code class="language-text">Can you check if this color palette comply with Level AAA
</code></pre>
<img width="792" alt="AAA" src="/km/aaa_check.png">

<br/>

<pre><code class="language-text">can you fix that problem and give me a new color palette 
</code></pre>
<img width="793" alt="fix" src="/km/aaa_fix.png">

<br/>

<p>Here you go, A color palette with your brand voice and user-friendly is done. And you can always make little change to ensure the color palette fits your needs.</p>
<br/>

<h3>Generate svg code (Beta)</h3>
<p>As we know ChatGPT is an AI text-based model, so it can&#39;t generate SVG images directly. However, it can help you generate SVG code for a simple icon.
Let&#39;s see how it work.</p>
<pre><code class="language-text">can you generate an email outline icon in svg code
</code></pre>
<img width="801" alt="icon" src="/km/mail_icon.png">

<br/>

<p>Result:</p>
<img width="116" alt="截圖 2023-08-23 上午11 24 34" src="/km/mail_icon_result.png">

<br/>

<p>Looks OK right? Let&#39;s try something more complicated...</p>
<pre><code class="language-text">can you generate a cute cat outline icon in svg code
</code></pre>
<img width="822" alt="截圖 2023-08-23 上午11 29 37" src="/km/cat_icon.png">

<br/>

<p>Result:</p>
<img width="131" alt="截圖 2023-08-23 上午11 26 30" src="/km/cat_icon_result.png">

<br/>

<p>Now we know ChatGPT doesn&#39;t have any sense of art or even doesn&#39;t know what a cat should be look like.
But hope one day it will learn then it can be pretty helphul.</p>
<br/>

<h1>Midjourney</h1>
<p>Midjourney is a generative artificial intelligence program and service generates images from natural language descriptions.
It&#39;s a really useful tool for UI designers to create some images for their products.</p>
<h2>Background:</h2>
<img width="533" alt="截圖 2023-08-23 上午11 38 57" src="/km/md_bg.png">

<h2>Illustration:</h2>
<img width="536" alt="截圖 2023-08-23 上午11 40 19" src="/km/mid_illustration.png">

<h2>Landing page idea</h2>
<img width="535" alt="截圖 2023-08-23 上午11 43 25" src="/km/mid_landingpage.png">

<h2>Banner</h2>
<img width="532" alt="截圖 2023-08-23 上午11 46 10" src="/km/mid_banner.png">


<br/>

<p>Midjourney can generate images in various styles, color palettes, and scales. It&#39;s highly beneficial, eliminating concerns about copyright. 
Even though it&#39;s not perfecteverytime, it can offer you different idea on your visual work.</p>
<p>For more Information about how to use Midjourney please check: <a href="https://github.com/CAFECA-IO/WorkGuidelines/blob/main/AI/Graphic/Midjourney.md">Midjourney</a></p>


Today, we will be collaborating with two prominent AI platforms, ChatGPT and Midjourney, which have garnered significant recognition in the current AI landscape. Our objective is to explore how these platforms can provide valuable support to UI/UX designers in their work.

How AI can be your design assistant

本文將介紹現金流量表的本質，以及製作現金流量表的方法，接著一一用直接法呈現加密貨幣交易所的營運活動造成的現金流量表變化，期望達到示範作用並引起更多加密貨幣交易所監管相關的討論。

撰寫加密貨幣交易所現金流量表指南

製作加密貨幣交易所的綜合損益表是了解交易所在特定期間內經濟表現的關鍵步驟。本指南將詳細說明如何製作這份報表，以及確保數據的可靠性和準確性。

Crafting the Comprehensive Income Statement for Cryptocurrency Exchanges: A Comprehensive Guide

<h1>Using SQLite with Next.js</h1>
<h2>什麼是嵌入式資料庫</h2>
<p>不需另外安裝，就能和系統程式語言整合到應用程式中的輕量級資料庫。由於資料庫就儲存在應用程式的本地文件
中，無須網路連線，資料的存取可以更快速。嵌入式資料庫通常不需要複雜的配置過程，應用程式在運行時即可自
動創建和管理資料庫。沒有額外的伺服器，所以部署和安裝也相對簡單，通常只須將資料庫文件和應用程式一起打
包即可。而且大多數嵌入式資料庫都支持標準的 SQL 查詢語言，使得資料操作更便利，特別適合使用手機應用程
式、桌面應用程式、嵌入式系統和遊戲開發等。</p>
<h2>常見的嵌入式資料庫</h2>
<ol>
<li>SQLite：輕量級、零配置、支持標準 SQL 查詢語言和跨平台（包括移動設備和桌面應用程式），符合 ACID
(Atomicity, Consistency, Isolation, Durability)。但是 SQLite 在多個使用者同時寫入操作時可能會受到
一些限制，因此不適用於高流量的場景。SQLite 提供了最簡單和高效的本地資料儲存解決方案，如果<strong>應用程
式為單用戶取向，未來也不會需要支援多用戶訪問</strong>，那麼 SQLite 會是最好的嵌入式資料庫選擇。</li>
<li>Firebird：輕量級、支持跨平台和 ACID ，確保資料一致性。與 SQLite 不同的是，Firebird 能支援多個使用
者同時訪問，特別適用於多用戶、伺服器端的場景。另外，Firebird 是完全開源的，可以自由使用和修改。</li>
<li>H2 Database：使用 Java 開發的輕量級嵌入式資料庫，支援 SQL 和 JDBC（Java Database Connectivity，是
Java 語言中用來規範客戶端程式如何來訪問資料庫的應用程式介面）。可以在本地快速啟動，並支援瀏覽器的
Console 介面。但由於其主要針對 Java，所以不太適用於非 Java 的應用程式。</li>
<li>Realm：適用於移動應用程式，特別是需要離線儲存和同步功能的場景，支援 iOS 和 Android，並提供跨平台
的同步功能。Realm 還提供物件映射（ORM）API，避免讓使用者直接接觸 SQL 語法，簡化了程式語言的複雜度
。但缺點是其關聯式查詢需求可能受限，相對不如其他嵌入式資料庫靈活。</li>
</ol>
<h2>SQLite 效能檢測</h2>
<ul>
<li><p>測試內容如下，每項測試 5 次取平均值：</p>
<ol>
<li>Insert：插入多筆 trade 資料，內容為 <code>id</code>、<code>price</code>、<code>amount</code>、<code>timestamp</code></li>
<li>Read：從 1000 筆/1 萬筆/10 萬筆/100 萬筆 的資料表中讀取任一筆 trade 10 萬次</li>
</ol>
</li>
<li><p>根據實驗結果，得到以下結論：</p>
<ol>
<li>SQLite 的 Insert TPS 約為 <code>每秒 527.76 次</code></li>
<li>SQLite 的 Read 10 萬筆 row 的 TPS 約為 <code>每秒 31000 次</code></li>
</ol>
</li>
</ul>
<h3>實驗結果</h3>
<h4>Insert</h4>
<ul>
<li>Insert 1000 筆</li>
</ul>
<table>
<thead>
<tr>
<th>第一次</th>
<th>第二次</th>
<th>第三次</th>
<th>第四次</th>
<th>第五次</th>
<th>平均值</th>
</tr>
</thead>
<tbody><tr>
<td>2.185s</td>
<td>2.314s</td>
<td>2.187s</td>
<td>2.585s</td>
<td>2.151s</td>
<td><strong>2.284s</strong></td>
</tr>
</tbody></table>
<ul>
<li>Insert 1 萬筆</li>
</ul>
<table>
<thead>
<tr>
<th>第一次</th>
<th>第二次</th>
<th>第三次</th>
<th>第四次</th>
<th>第五次</th>
<th>平均值</th>
</tr>
</thead>
<tbody><tr>
<td>16.684s</td>
<td>15.433s</td>
<td>15.617s</td>
<td>20.116s</td>
<td>17.027s</td>
<td><strong>17.375s</strong></td>
</tr>
</tbody></table>
<ul>
<li>Insert 10 萬筆</li>
</ul>
<table>
<thead>
<tr>
<th>第一次</th>
<th>第二次</th>
<th>第三次</th>
<th>第四次</th>
<th>第五次</th>
<th>平均值</th>
</tr>
</thead>
<tbody><tr>
<td>2:45.127</td>
<td>2:46.373</td>
<td>2:56.607</td>
<td>2:47.190</td>
<td>2:55.462</td>
<td><strong>2:50.552(m:ss.mmm)</strong></td>
</tr>
</tbody></table>
<h4>Read</h4>
<ul>
<li>Read 1000 筆資料表</li>
</ul>
<table>
<thead>
<tr>
<th>第一次</th>
<th>第二次</th>
<th>第三次</th>
<th>第四次</th>
<th>第五次</th>
<th>平均值</th>
</tr>
</thead>
<tbody><tr>
<td>30.104s</td>
<td>29.709s</td>
<td>30.221s</td>
<td>29.890s</td>
<td>34.809s</td>
<td><strong>30.947s</strong></td>
</tr>
</tbody></table>
<ul>
<li>Read 1 萬筆資料表</li>
</ul>
<table>
<thead>
<tr>
<th>第一次</th>
<th>第二次</th>
<th>第三次</th>
<th>第四次</th>
<th>第五次</th>
<th>平均值</th>
</tr>
</thead>
<tbody><tr>
<td>31.299s</td>
<td>33.073s</td>
<td>31.359s</td>
<td>30.215s</td>
<td>33.944s</td>
<td><strong>31.978s</strong></td>
</tr>
</tbody></table>
<ul>
<li>Read 10 萬筆資料表</li>
</ul>
<table>
<thead>
<tr>
<th>第一次</th>
<th>第二次</th>
<th>第三次</th>
<th>第四次</th>
<th>第五次</th>
<th>平均值</th>
</tr>
</thead>
<tbody><tr>
<td>30.401s</td>
<td>30.367s</td>
<td>30.385s</td>
<td>30.812s</td>
<td>32.621s</td>
<td><strong>30.917s</strong></td>
</tr>
</tbody></table>
<ul>
<li>Read 100 萬筆資料表</li>
</ul>
<table>
<thead>
<tr>
<th>第一次</th>
<th>第二次</th>
<th>第三次</th>
<th>第四次</th>
<th>第五次</th>
<th>平均值</th>
</tr>
</thead>
<tbody><tr>
<td>34.572s</td>
<td>35.603s</td>
<td>34.607s</td>
<td>29.824s</td>
<td>39.734s</td>
<td><strong>34.868s</strong></td>
</tr>
</tbody></table>
<h2>連接 SQLite</h2>
<p>以下是提供在 Next.js 中連接 SQLite 資料庫的工具：</p>
<ol>
<li>Prisma：一套可以透過 JavaScript 或 TypeScript 來操作資料庫套件，幫助開發人員更輕鬆地管理資料庫。
能夠串接 <code>PostgreSQL</code>、<code>MySQL</code>、<code>SQLite</code>、<code>MongoDB</code> 等資料庫，並且提供 GUI 介面。Prisma 可以自動
從資料庫結構生成模型，而無需手動定義模型；還提供資料庫遷移功能，模型結構變化時也能輕鬆地同步資料
庫結構，不必手動更新資料庫。相較於其他工具，<strong>Prisma 擁有許多自動化功能，使開發者更高效地操作和管
理資料庫</strong>。</li>
<li>TypeORM：一個支援多種資料庫的 ORM 框架，其中就包括 SQLite，能夠使用 TypeScript 定義模型並進行查詢
。</li>
<li>Sequelize：另一個流行的 Node.js ORM，提供了強大的查詢和模型定義功能，支援多種包括 SQLite 的資料庫
。</li>
<li>SQLite3 NPM Package：如果想以更原生的方式進行 SQLite 連接，可以直接使用 sqlite3 NPM 套件。該套件
提供一個能夠使用 SQL 語句直接與 SQLite 進行互動的簡單介面。</li>
</ol>
<h2>安裝 Prisma</h2>
<ul>
<li>透過 npm 安裝 Prisma</li>
</ul>
<pre><code class="language-shell">npm i -D prisma
</code></pre>
<ul>
<li>安裝 Prisma cilent</li>
</ul>
<pre><code class="language-shell">npm i @prisma/client
</code></pre>
<h2>設置 schema.prisma</h2>
<ul>
<li>初始化 Prisma</li>
</ul>
<pre><code class="language-shell">npx prisma init
</code></pre>
<ul>
<li>完成後可以看到專案裡自動建立好的 <code>prisma/schema.prisma</code>，這個文件將定義資料庫的結構和模型，並通過
Prisma CLI 來生成相關的程式碼和工具</li>
</ul>
<img width="1023" alt="image" src="https://github.com/CAFECA-IO/KnowledgeManagement/assets/114177573/b40be2cd-6f2b-4c86-8d9e-69a5e16df66a">

<ul>
<li><p>如果使用的是 VS Code ，可以安裝 <code>Prisma</code> 套件讓文件自動標色，提升可讀性</p>
<img width="984" alt="image" src="https://github.com/CAFECA-IO/KnowledgeManagement/assets/114177573/fac794ce-aa94-4aa6-86f2-73926701d7b7">
</li>
<li><p>另外，在 <code>.env</code> 也會出現預設的 database url ，將 DATABASE_URL 改為 <code>file:./dev.db</code></p>
</li>
</ul>
<img width="1014" alt="image" src="https://github.com/CAFECA-IO/KnowledgeManagement/assets/114177573/29661cf2-b0cc-40dc-bff9-0df3bf7b7b52">

<h2>撰寫 Prisma Schema</h2>
<h3>設定 Data Source</h3>
<pre><code class="language-prisma">datasource db {
  provider = &quot;sqlite&quot;
  url      = env(&quot;DATABASE_URL&quot;)
}
</code></pre>
<ul>
<li>這裡定義資料庫種類是 SQLite ，並指定 URL 為 <code>.env</code> 中的 DATABASE_URL 參數</li>
</ul>
<h3>設定 Data Modal</h3>
<pre><code class="language-prisma">model Post {
  id          String   @id
  title       String
  description String
  categories  String
  picture     String
  author      String
  content     String
  date        DateTime @default(now())
}
</code></pre>
<ul>
<li>這裡定義資料表的欄位、屬性和關聯。以下為標籤的說明<ul>
<li><code>@id</code>：主鍵</li>
<li><code>@unique</code>：表示欄位不能重覆</li>
<li><code>@default</code>：設定欄位預設值，例如 <code>@default(autoincrement())</code> 自動遞增、<code>@default(now())</code> 預設為
目前時間等...</li>
<li><code>@relation</code>：描述不同 model 的欄位關聯性，詳細的說明可參
考<a href="https://www.prisma.io/docs/concepts/components/prisma-schema/relations">官方文件</a></li>
</ul>
</li>
</ul>
<h2>生成 Migration</h2>
<pre><code class="language-shell">npx prisma migrate dev --name init
</code></pre>
<ul>
<li>在 <code>migration.sql</code> 中記錄了要放入資料庫的 Table 。在本例中只有一個 <code>Post</code> Table<img width="886" alt="image" src="https://github.com/CAFECA-IO/KnowledgeManagement/assets/114177573/46b5c0c3-34e1-484c-8392-aa9c3306a5fa"></li>
</ul>
<p>接下來執行 Prisma Studio：</p>
<pre><code class="language-shell">npx prisma studio
</code></pre>
<ul>
<li>執行後就可以在瀏覽器上透過 GUI 操作剛才生成的 Table</li>
</ul>
<p><img src="https://github.com/CAFECA-IO/KnowledgeManagement/assets/114177573/cb7a3a7b-d1f7-4b6b-bd0a-a85c5ac9d0a7" alt="image"></p>
<h2>連接 Next.js</h2>
<pre><code class="language-jsx">import {PrismaClient} from &#39;@prisma/client&#39;;
const prisma = new PrismaClient();
</code></pre>
<p>完成資料庫的設定後，就可以在 Next.js 中進行 CRUD</p>
<h3>Create</h3>
<pre><code class="language-jsx">const saveContact = await prisma.post.create({
  data: {
    id: &#39;km-20230818001&#39;,
    title: &#39;I am a title&#39;,
    description: &quot;I&#39;m a description&quot;,
    categories: &#39;category&#39;,
    picture: &#39;/picture_src&#39;,
    author: &#39;julian&#39;,
    content: &#39;I am content&#39;,
  },
});
</code></pre>
<h3>Read</h3>
<pre><code class="language-jsx">// Filter by a single value
const post = await prisma.post.findMany({
  where: {
    id: {
      endsWith: &#39;001&#39;,
    },
  },
});

// Get all
const allPosts = await prisma.post.findMany();
</code></pre>
<h3>Update</h3>
<pre><code class="language-jsx">const updatePost = await prisma.post.update({
  where: {
    id: &#39;km-20230818001&#39;,
  },
  data: {
    categories: &#39;newbie&#39;,
  },
});
</code></pre>
<h3>Delete</h3>
<pre><code class="language-jsx">const deletePosts = await prisma.post.deleteMany({
  where: {
    author: {
      contains: &#39;julian&#39;,
    },
  },
});
</code></pre>
<h2>應用實例</h2>
<ul>
<li>API 內容</li>
</ul>
<pre><code class="language-ts">// /api/addPosts.ts
import {NextApiRequest, NextApiResponse} from &#39;next&#39;;
import {PrismaClient} from &#39;@prisma/client&#39;;

const prisma = new PrismaClient();

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  // Info (20230818 - Julian) Check if the method is POST
  if (req.method !== &#39;POST&#39;) {
    return res.status(405).json({message: &#39;Method not allowed&#39;});
  }

  const contactData = JSON.parse(req.body);
  // Info (20230818 - Julian) Create a new contact in the database
  const saveContact = await prisma.post.create({
    data: contactData,
  });

  res.status(200).json(saveContact);
}
</code></pre>
<ul>
<li>Form component (節錄)</li>
</ul>
<pre><code class="language-jsx">const FormComponent  = () =&gt; {
  {...}
  // Info: (20230818 - Julian) Call API to add new post
  const addPost = async (kmData: IKMData) =&gt; {
    const response = await fetch(&#39;/api/addPost&#39;, {
      method: &#39;POST&#39;,
      body: JSON.stringify(kmData),
    });

    if (!response.ok) {
      throw new Error(response.statusText);
    }

    return await response.json();
  };

  // Info: (20230818 - Julian) Click submit button
  const submitHandler = async (event: React.FormEvent&lt;HTMLFormElement&gt;) =&gt; {
    const newData: IKMData = {
      id: kmId,
      author: inputAuthorId,
      title: inputTitle,
      description: inputDescription,
      picture: inputPicture,
      categories: inputCategory,
      content: inputContent,
    };

    try {
      event.preventDefault();

      await addPost(newData);
      ...
    } catch (error) {
      console.log(error);
    }
  };

  return(...)
}
</code></pre>
<h3>參考來源</h3>
<ul>
<li><a href="https://www.syscom.com.tw/ePaper_Content_EPArticledetail.aspx?id=191&EPID">嵌入式資料庫 SQLite 實務初探</a></li>
<li><a href="https://ithelp.ithome.com.tw/articles/10309099">在 Spring boot 開發中使用 H2 Database</a></li>
<li><a href="https://zh.wikipedia.org/zh-tw/Java%E6%95%B0%E6%8D%AE%E5%BA%93%E8%BF%9E%E6%8E%A5">維基百科 - Java 資料庫連接</a></li>
<li><a href="https://medium.com/appmaster-developers/realm-%E7%B0%A1%E4%BB%8B-ece4c4a76244">Realm 簡介</a></li>
<li><a href="https://www.prisma.io/docs/concepts/components/prisma-schema">Prisma</a></li>
<li><a href="https://javascript.plainenglish.io/using-sqlite-with-next-js-13-cfa270e1d7ba">Using SQLite with Next.js 13</a></li>
<li><a href="https://www.youtube.com/watch?v=FMnlyi60avU">The Easiest Way to Work with a Database in Next.js</a></li>
<li><a href="https://ithelp.ithome.com.tw/articles/10250424">仿 Trello - Prisma 安裝與 Schema 建立</a></li>
<li><a href="https://izo.tw/prisma/">【Prisma】JavaScript 的資料庫工具 安裝</a></li>
</ul>


本文將著重介紹 SQLite，包含效能檢測、連接 Next.js 以及一些基本的語法，讓讀者對 SQLite 和嵌入式資料庫的概念有初步的認識。

Using SQLite with Next.js

<h1>Preface</h1>
<h2>What is money laundering?</h2>
<p>Money laundering is a complex and illegal process through which individuals or organizations attempt to conceal the origins of illegally obtained money, making it appear as if it comes from legitimate sources. The primary goal of money laundering is to &quot;clean&quot; the so-called &quot;dirty money&quot; so that it can be freely used without raising suspicion.</p>
<h2>Why use crypto currency as a way to do money landering?</h2>
<p>During the early days of cryptocurrency, there were relatively fewer regulations and established systems in place to manage its use. This lack of oversight, combined with the inherent features of cryptocurrencies such as anonymity, pseudonymity, and the absence of central authorities, created an environment in which criminals could more easily hide their identities and engage in illegal activities.
Also it&#39;s easier to transfer the asset out of the country they stay, in this case it&#39;s harder for investigators to track the money.</p>
<h2>Nowadays</h2>
<p>As cryptocurrencies gained popularity and attention, regulatory efforts increased to address these concerns. Governments and financial authorities around the world began developing and implementing measures to regulate the cryptocurrency space, including: </p>
<ul>
<li>Know Your Customer (KYC) and Anti-Money Laundering (AML) Regulations</li>
<li>Licensing and Registration for  cryptocurrency businesses</li>
<li>Taxation</li>
<li>Blockchain Analysis</li>
</ul>
<p>Today, we will introduce some common behavioral patterns that serve as red flags in cryptocurrency trading.</p>
<h1>Multiple Transfers</h1>
<ul>
<li>Making multiple small amounts of transactions</li>
</ul>
<p>According to regulations, large and irregular transactions can attract the attention of government or financial authorities. All legitimate financial institutions that require their customers to undergo Know Your Customer (KYC) procedures are obligated to report such transactions. This heightened scrutiny exposes criminal activities to authorities.</p>
<p>That&#39;s why one of the reason why criminals would do multiple trasnfers is to structure transactions in small amounts that are under record-keeping or repoerting threshold.
It&#39;s also a common pattern in cash money laundering.</p>
<ul>
<li>Making multiple high-value amounts of transactions</li>
</ul>
<p>By spacing out the transactions and making them appear regular, criminals may attempt to make the transactions seem more like legitimate trading or investment activity. This can further mask the illicit nature of the funds and decrease suspicion.</p>
<ul>
<li>Making multiple transactions to multiple virtual assets service providers.</li>
</ul>
<p>Criminals often try to transfer their assets to virtual asset service providers located in somewhere that is no relation to where the customer lives or conducts business; or jurisdictions with either weak or no Anti-Money Laundering/Counter-Financing of Terrorism (AML/CFT) regulations. This strategy complicates investigators&#39; efforts to trace the origin of the funds and resources.</p>
<h1>Multiple Receives</h1>
<p>Making frequent transfers to the same virtual asset (VA) account within a specific period of time, especially when it involves multiple individuals, transactions from the same IP address, or significant amounts, can raise red flags for several reasons:</p>
<ul>
<li><p>Criminals often use a single address to aggregate funds obtained from various sources, including illegal activities such as scams, theft, or ransomware. Multiple receives into a single address can indicate the consolidation of these illicit funds.</p>
</li>
<li><p>Structuring, also known as smurfing, involves breaking down large sums of money into smaller transactions to avoid triggering reporting thresholds and attracting regulatory attention.</p>
</li>
<li><p>In some cases, middlemen or intermediaries may be involved in cryptocurrency transactions. These middlemen may use multiple receives to distribute funds or to anonymize the transaction. This can make it difficult to identify the ultimate sender or receiver.</p>
</li>
</ul>
<h1>Multiple Deposits</h1>
<p>This typically occurs with individuals or organizations that possess multiple virtual asset addresses. 
They break down their illicitly obtained funds into smaller amounts, deposit them to one or multiple exchanges or virtual asset service providers then converting them into various cryptocurrencies. This process incurs additional transaction fees,but without logical business explanation.
Or after depositing, they withdrawing virtual assets (VAs) from a virtual asset service provider (VASP) and promptly transferring them to a private wallet effectively transforms the exchange or VASP into a money laundering mixer. It usually happens without additional exchange or investment activity, which is an unnecessary step and incurs transaction fees.</p>
<h1>Multiple Withdraws</h1>
<p>Criminals involved in money laundering may withdraw funds in multiple small transactions to avoid detection. This technique, known as &quot;structuring&quot; or &quot;smurfing,&quot; is used to break down large sums of money into smaller, less conspicuous withdrawals to circumvent reporting thresholds.</p>
<p>In some cases, identity thieves may make multiple withdrawals from a victim&#39;s account as part of their fraudulent activities.</p>
<h1>With Black List</h1>
<p>Addresses linked to criminal activities, such as hacking, fraud, theft, or other unlawful actions, will be placed on BAIFA&#39;s Black List.
Accepting funds from addresses on the Black List is considered to be aiding money laundering.</p>
<p><a href="https://www.treasury.gov/ofac/downloads/sdnlist.pdf">OFAC-Specially Designated Nationals and Blocked Persons List</a></p>
<p><a href="https://sanctionssearch.ofac.treas.gov">OFAC-Sanctions List Search</a></p>
<h1>With Darknet (Darkweb)</h1>
<p>The darknet itself is not inherently illegal. It&#39;s a part of the internet that is intentionally hidden and not indexed by traditional search engines.
It can provide a level of privacy and anonymity for users. It&#39;s used by journalists, activists, whistleblowers, and individuals living in countries with strict censorship to communicate and share information without fear of surveillance or censorship.</p>
<p>Meanwhile, Darknet markets, also known as underground or hidden markets, are online platforms that operate on the dark web and are accessible through specialized software. These markets facilitate the buying and selling of a wide range of illegal goods and services, including drugs, stolen data, counterfeit documents, hacking tools, and more. Criminals use these markets to conduct illicit transactions.</p>
<p>Many darknet markets primarily use cryptocurrencies like Bitcoin for transactions. Cryptocurrencies provide a degree of anonymity, making them an attractive choice for conducting illegal activities. Criminals often use cryptocurrencies to pay for illegal goods and services on darknet markets.</p>
<h1>With Mixing Service</h1>
<p>Mixing and tumbling services are methods used in the world of cryptocurrency to enhance the privacy and anonymity of transactions. These services aim to obscure the source and destination of funds, making it difficult to trace the flow of cryptocurrency.</p>
<h3>Mixing Services (Coin Mixing or CoinJoin):</h3>
<ul>
<li>Multiple users send their cryptocurrency to a mixing service.</li>
<li>The mixing service combines these funds into a pool.</li>
<li>It then redistributes the cryptocurrency to the intended recipients, but in a way that makes it challenging to associate specific inputs with specific outputs.
This process breaks the transaction history, enhancing privacy.</li>
</ul>
<h3>Tumbling Services (Bitcoin Tumblers or Tumblers):</h3>
<p>Tumbling services work similarly to mixing services but with a focus on Bitcoin. They aim to &quot;tumble&quot; or &quot;shuffle&quot; Bitcoins to break the transaction history. Here&#39;s how it works:</p>
<ul>
<li>Users send their Bitcoins to a tumbler service.</li>
<li>The tumbler service mixes these Bitcoins with other users&#39; coins.</li>
<li>The service then sends the mixed Bitcoins back to the users, but in randomized amounts and at different times.</li>
<li>As a result, it becomes challenging to link the original Bitcoins to their source.</li>
</ul>
<h1>With Gambling Site</h1>
<p>Another method commonly employed for cryptocurrency money laundering involves online gambling. With the increasing acceptance of cryptocurrencies on various online gambling and gaming websites, criminals have found a seemingly simple way to legitimize their illicit funds. Here&#39;s how it works:</p>
<ul>
<li>Access to Online Gambling Sites: Criminals access online casinos, sports betting platforms, or other gaming websites that accept cryptocurrencies as a means of payment.</li>
<li>Purchasing Credits: They use their cryptocurrency to purchase in-game credits, virtual chips, or tokens on these platforms.</li>
<li>Gameplay: To create a façade of legitimacy, the money launderers engage in actual gameplay, making bets and playing rounds of games.</li>
<li>Cashing Out: After a few rounds or bets, they cash out their cryptocurrency, often in multiple small transactions.</li>
<li>Legitimization: By doing so, they provide themselves with a plausible explanation for the source of the funds. They can assert that their winnings in these online games account for the money cashed out.</li>
</ul>
<p>It&#39;s important to recognize that money launderers are not motivated by the desire to profit from gambling; rather, they seek to legitimize their ill-gotten gains and avoid suspicion. </p>
<h1>Large Transfer (High-value Transfer)</h1>
<ul>
<li><p>Risk of Money Laundering: To save the time,high-value transactions can be used by criminals as a means to legitimize illicit funds. Money launderers may seek to move significant sums of money through legitimate channels to obscure the source of their illegal gains.</p>
</li>
<li><p>Potential for Terrorist Financing: High-value transactions can also be indicative of terrorist financing, where individuals or organizations attempt to move substantial funds to support illegal activities or terrorist operations.</p>
</li>
<li><p>Scam or fraud: High-value transfers may be connected to investment scams or fraudulent schemes where victims are convinced to transfer substantial sums of money, often with the promise of significant returns.</p>
</li>
<li><p>Hacking: Hackers may target financial institutions, exchanges, or payment processors, gaining access to their systems. This access can enable them to initiate high-value transfers directly from these institutions.</p>
</li>
</ul>
<p>When investigating the potential link between a high-value transfer and illegal activity, investigators carefully evaluate factors like the source of funds, transaction history, purpose of the transfer, and relationships involved. This is why the &quot;Know Your Customer&quot; (KYC) process is a crucial step for financial institutions. KYC helps identify irregular transactions and discrepancies between the transaction amount and the client&#39;s background, enabling institutions to report and address suspicious activities effectively.</p>
<h1>Large Receipt (High-value Receipt)</h1>
<p>High-value receipts and high-value transfers share the same concept but involve different roles for senders and recipients.</p>
<h1>Large Deposit (High-value Deposit)</h1>
<ul>
<li><p>Money Laundering: Criminals involved in illegal activities often need to legitimize their ill-gotten gains. Making a large deposit is one way they may attempt to introduce significant sums of money into the legitimate financial system.</p>
</li>
<li><p>Layering: Money launderers may engage in a technique called &quot;layering,&quot; which involves multiple transactions to obscure the source of funds. Large deposits can be one part of this process as they may be followed by other transactions aimed at further disguising the origin of the money.</p>
</li>
<li><p>Unusual Activity: Deposits into an account or a VA address are significantly higher than ordinary with an unknown source of funds, followed by conversion to fiat currency, which may indicate theft of funds.</p>
</li>
</ul>
<h1>Large Withdraw (High-value Withdraw)</h1>
<ul>
<li><p>Money Laundering: Suspicion arises, particularly when engaging in VA-fiat or VA-VA currency exchanges with the potential for financial losses. This could indicate attempts by criminals to convert and withdraw their illicit funds, possibly after undergoing multiple money laundering processes or utilizing Virtual Asset Service Providers as mixers before transferring the assets to another address.</p>
</li>
<li><p>Hacking: Hacking enables unauthorized access to financial systems, accounts, or crypto wallets, leading to large amount withdrawals. This may stem from stolen credentials, ransomware, phishing, account takeovers, and insider threats.</p>
</li>
</ul>
<h1>To High Risk Location</h1>
<p>When customers send funds to unregulated or inadequately regulated Virtual Asset Service Providers (VASPs), it can raise suspicions, particularly when the customer&#39;s location does not align with the jurisdiction of the VASPs involved. This heightened risk is associated with concerns related to illicit activities, money laundering, and attempts to evade Anti-Money Laundering and Countering the Financing of Terrorism (AML/CFT) controls.</p>
<h2>Black List on FATF (Updated in June, 2023)</h2>
<p>The &quot;Black List&quot; identifies countries or jurisdictions with significant deficiencies in combating money laundering, terrorist financing, and proliferation financing. These nations are urged to take counter-measures to safeguard the international financial system from the risks associated with these illicit activities.</p>
<ul>
<li>North Korea</li>
<li>Iran</li>
<li>Myanmar</li>
</ul>
<h2>Grey List on FATF (Updated in June, 2023)</h2>
<p>The &quot;Grey List&quot; highlights countries collaborating with FATF to address money laundering, terrorist financing, and proliferation financing issues. Increased monitoring signifies their commitment to swiftly resolve these deficiencies within agreed timeframes.</p>
<ul>
<li>Albania</li>
<li>Barbados</li>
<li>Burkina Faso</li>
<li>Cameroon</li>
<li>Cayman Islands</li>
<li>Croatia</li>
<li>Democratic Republic of Congo</li>
<li>Gibraltar</li>
<li>Haiti</li>
<li>Jamaica</li>
<li>Jordan</li>
<li>Mali</li>
<li>Mozambique</li>
<li>Nigeria</li>
<li>Panama</li>
<li>Philippines</li>
<li>Senegal</li>
<li>South Africa</li>
<li>South Sudan</li>
<li>Syria</li>
<li>Tanzania</li>
<li>Türkiye</li>
<li>Uganda</li>
<li>United Arab Emirates</li>
<li>Vietnam</li>
<li>Yemen</li>
</ul>
<h1>Transactions with Privacy Coins</h1>
<p>Privacy coins like Monero, Zcash, or Dash are designed to provide enhanced privacy and anonymity. While this feature can protect users&#39; identities, it also makes it challenging for authorities and financial institutions to trace and monitor transactions. This lack of transparency can trigger concerns, as it may hinder the detection of illicit activities such as money laundering, tax evasion, and the financing of criminal enterprises.</p>
<h2>How Privacy Coins work</h2>
<ul>
<li>Ring Signatures (Monero) 環狀簽名: In Monero, for example, when a user initiates a transaction, their transaction is mixed or &quot;ringed&quot; with several other transactions on the network. This makes it challenging to determine which specific input (or source) corresponds to the actual sender&#39;s funds.</li>
</ul>
<img width="100%" alt="What is Ring Signatures" src="/km/ring.png">

<ul>
<li>Zero-Knowledge Proofs (Zcash) 零知識證明: In Zcash, zero-knowledge proofs enable the network to verify that a transaction is valid without revealing the sender&#39;s address, receiver&#39;s address, or transaction amount. The mathematical proof demonstrates that a transaction meets the network&#39;s rules without revealing any sensitive information.</li>
</ul>
<img width="100%" alt="What is Zero-Knowledge Proofs" src="/km/ZKP.png">

<ul>
<li>Stealth Addresses 隱身地址: Privacy coins often use stealth addresses to provide recipients with a unique, one-time public address for each transaction. This means that even if someone knows your public address, they cannot link it to specific transactions because each transaction uses a different stealth address.</li>
</ul>
<img width="100%" alt="What is Stealth Address" src="/km/stealth.png">

<ul>
<li><p>Confidential Transactions 保密交易: Some privacy coins, like Grin or Beam, implement confidential transactions. These cryptographic techniques encrypt the transaction amount, making it challenging for outsiders to determine the exact value being transferred.</p>
</li>
<li><p>CoinJoin (Optional): Some privacy coins offer optional CoinJoin functionality, which allows multiple users to pool their transactions into a single transaction, making it difficult to trace individual transactions within the mix.</p>
</li>
</ul>
<h1>References</h1>
<p><a href="https://www.getmonero.org/resources/moneropedia/ringsignatures.html">Moneropedia</a></p>
<p><a href="https://blog.chain.link/zero-knowledge-proof-use-cases/">Chainlink Blog</a></p>
<p><a href="https://www.fatf-gafi.org/content/dam/fatf-gafi/reports/Virtual-Assets-Red-Flag-Indicators.pdf.coredownload.pdf">FATF</a></p>
<p><a href="https://home.treasury.gov">U.S. DEPARTMENT OF THE TREASURY</a></p>


In this article, we will introduce some common behavioral patterns that serve as red flags in cryptocurrency trading.

14 Red Flags in crypto trading

<h2>1. 效能指標介紹</h2>
<p>可參考：
<a href="https://github.com/CAFECA-IO/KnowledgeManagement/blob/master/tools/web-vitals.md#web-vitals">web-vitals</a></p>
<ul>
<li>測試工具 : 使用 Google 的
<a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Insights</a> 來檢測頁面加載速度。</li>
<li>First Contentful Paint (FCP) : 衡量當第一塊內容（例如文字或圖像）在用戶的屏幕上被渲染的時間。 建議
完成時間為 2.5 秒內 。</li>
<li>Largest Contentful Paint (LCP) : 衡量最大內容元素（例如圖片或文本區塊）完成渲染在屏幕上的時間。 建
議頁面之 FID 應低於 100 毫秒 。</li>
<li>Total Blocking Time (TBT) : 衡量在首次繪製和完全交互之間所有阻塞事件的總時間。 建議完成時間為 200
毫秒內 。</li>
<li>Cumulative Layout Shift (CLS) : 衡量視覺上的內容如何在頁面加載時移動，代表布局的穩定性。 建議分數
應低於 0.1 。</li>
<li>Speed Index (SI) : 衡量頁面內容呈現速度的指標，反映出用戶看到頁面內容的速度。 建議完成時間在 3.5
秒以內。</li>
</ul>
<h2>2. 改善 First Contentful Paint (FCP)</h2>
<p>利用 Next.js 的服務器渲染（SSR）或靜態網站生成（SSG）特性，能更快地提供首次內容，從而改善 FCP。</p>
<p>可參考：
<a href="https://github.com/CAFECA-IO/KnowledgeManagement/blob/master/NextJs/SSR_vs_SSG.md#%E4%BB%80%E9%BA%BC%E6%99%82%E5%80%99%E7%94%A8-server-side-rendering-%E8%88%87-static-side-generation">什麼時候用 Server Side Rendering 與 Static Side Generation</a></p>
<p>以下簡單解釋 SSG 跟 SSR 的差別跟例子：</p>
<h3>SSG</h3>
<ul>
<li>想像你要開一個咖啡店，但是你只賣一種咖啡。每個客人來了都要等你現場煮，這樣會很慢對吧？如果你事先煮
好一大壺咖啡，每個客人來了就直接倒給他們，這樣多快多好！SSG 就是這樣，它事先把所有的網頁都“煮”好（
也就是生成好），等到有人來訪問的時候，直接給他們。</li>
<li>頁面在構建時生成，並且每個請求都重用相同的 HTML。這提供了極佳的性能和 SEO 優勢。在 Next.js 裡，你
只要在<code>pages</code> 目錄下建一個檔案（比如 <code>about.js</code>），然後 Next.js 在 build 階段會自動把它變成一個靜
態頁面。</li>
</ul>
<pre><code class="language-jsx">// pages/data.js
export default function Data({data}) {
  // 假設資料是一個包含多個項目的陣列
  return (
    &lt;div&gt;
      &lt;h1&gt;資料列表：&lt;/h1&gt;
      &lt;ul&gt;
        {data.map((item, index) =&gt; (
          &lt;li key={index}&gt;{item}&lt;/li&gt;
        ))}
      &lt;/ul&gt;
    &lt;/div&gt;
  );
}

export async function getStaticProps() {
  // 從API獲取數據
  const res = await fetch(&#39;&lt;https://api.example.com/data&gt;&#39;);
  const data = await res.json();

  // 返回數據作為props
  return {
    props: {data},
    revalidate: 1, // 每秒重新生成頁面一次
  };
}
</code></pre>
<h3>SSR</h3>
<ul>
<li>現在想像你的咖啡店開始賣很多種不同的咖啡。每個客人來了都可以點不同的咖啡，這時候你不能事先都煮好，
因為你不知道他們要什麼。但是你可以等他們來了之後，現場為他們煮他們想要的咖啡。這樣每個人都可以喝到
他們想要的咖啡，但是他們可能要等一下。SSR 就是這樣，每次有人來訪問網站的時候，它都會為他們生成一個
新鮮的頁面。</li>
<li>每次請求時，都會在伺服器上實時生成頁面。這有利於 SEO 並且允許頁面內容根據用戶請求動態更改。在這個
例子裡，每次有人訪問<code>/profile</code> 頁面的時候， <code>getServerSideProps</code>會在伺服器上運行，並且生成一個新的
頁面給用戶。</li>
</ul>
<pre><code class="language-jsx">// pages/profile.js
export default function Profile({username}) {
  return &lt;div&gt;Hello, {username}!&lt;/div&gt;;
}

export async function getServerSideProps(context) {
  // 假設我們從一個API獲取用戶名
  const response = await fetch(&#39;&lt;https://api.example.com/user&gt;&#39;);
  const data = await response.json();

  return {
    props: {
      username: data.username,
    },
  };
}
</code></pre>
<h2>3. 改善 Largest Contentful Paint (LCP)</h2>
<p>優化圖像和媒體檔案大小，並利用 Next.js 的<code>Image</code>組件來實現圖片的延遲加載和自動格式轉換。</p>
<pre><code class="language-jsx">import Image from &#39;next/image&#39;;

function MyImageComponent() {
  return &lt;Image src=&quot;/my-image.jpg&quot; alt=&quot;Picture&quot; width={500} height={500} /&gt;;
}
</code></pre>
<h2>4. 改善 Total Blocking Time (TBT)</h2>
<p>避免大量的 JavaScript 在主線程上執行，利用 Next.js 的程式碼拆分和懶加載特性來減少主線程的阻塞時間。</p>
<pre><code class="language-jsx">import dynamic from &#39;next/dynamic&#39;;

const DynamicComponent = dynamic(() =&gt; import(&#39;../components/hello&#39;));

function MyPage() {
  return &lt;DynamicComponent /&gt;;
}
</code></pre>
<h2>5. 改善 Cumulative Layout Shift (CLS)</h2>
<p>保持布局的穩定性，避免在加載時元素的移動。指定圖片和影片的尺寸，並避免在加載時插入新內容。</p>
<pre><code class="language-jsx">&lt;img src=&quot;/my-image.jpg&quot; alt=&quot;Picture&quot; width=&quot;500&quot; height=&quot;500&quot; /&gt;
</code></pre>
<h2>6. 改善 Speed Index (SI)</h2>
<p>利用 Next.js 的優化特性，例如程式碼拆分、懶加載、和 SSR 或 SSG 來改善頁面的加載速度和交互速度。此外
，配置 CDN 和優化靜態資源的傳送也能有助於提高 Speed Index。</p>
<h3>配置 Content Delivery Network (CDN)</h3>
<p>Content Delivery Network (CDN) 是一種服務，它通過在地理上分散的伺服器來儲存和提供網站的靜態資源（例
如圖片、CSS、JavaScript）。當用戶訪問網站時，CDN 會從離用戶最近的節點提供資源，從而減少了加載時間。
配置 CDN 的基本步驟如下：</p>
<ol>
<li>選擇 CDN 提供商 :</li>
</ol>
<ul>
<li>選擇一個 CDN 提供商，例如 Cloudflare、AWS CloudFront 或 Google Cloud CDN。</li>
</ul>
<ol start="2">
<li>註冊和設置 CDN 賬戶 :</li>
</ol>
<ul>
<li>跟隨 CDN 提供商的指南註冊並設置你的賬戶。</li>
</ul>
<ol start="3">
<li>配置 CDN :</li>
</ol>
<ul>
<li>在 CDN 控制台中，創建一個新的 CDN 分發並配置你的網站的域名和源伺服器地址。</li>
</ul>
<ol start="4">
<li>更新 DNS 記錄 :</li>
</ol>
<ul>
<li>更新你的域名的 DNS 記錄，以指向 CDN 服務而不是你的原始伺服器。</li>
</ul>
<ol start="5">
<li>驗證配置 :</li>
</ol>
<ul>
<li>確保你的網站通過 CDN 正確地傳遞，並檢查加載速度是否有所改善。</li>
</ul>
<h3>避免不必要的重新渲染</h3>
<h3>檢查重新渲染的工具</h3>
<p>勾選 Paint flashing 之後，會在 component 被重新繪製時標註螢光色</p>
<p><img src="https://github.com/CAFECA-IO/KnowledgeManagement/assets/20677913/ca511547-1f2c-4469-aed6-5b661ed04381" alt="image"></p>
<img src="https://github.com/CAFECA-IO/KnowledgeManagement/assets/20677913/3a9cad5e-aed1-41c0-be43-060b6e297a52" width="600">

<h3>React Developer Tools</h3>
<ul>
<li><p>從 Chrome 下載
<a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi">React Developer Tools</a>
之後，打開瀏覽器 dev tool 可以看到 <code>Components</code> 跟 <code>Profiler</code>。其中 <code>Profiler</code> 可以錄製在網站重整
之後用戶在網站執行操作之後造成的 render。</p>
</li>
<li><p>勾選 <code>Highlight updates when components render</code> ，在組件重新渲染時，可以看到組件被線條框住，綠色線
條代表重新渲染的次數較少，黃色線條代表被重新渲染許多次。</p>
</li>
</ul>
<img src="https://github.com/CAFECA-IO/KnowledgeManagement/assets/20677913/cb9509be-9172-414b-a649-82b5a7a50804" width="400">

<img src="https://github.com/CAFECA-IO/KnowledgeManagement/assets/20677913/f6a19871-4fd9-4ece-ba4f-ce51f293aa17" width="400">

<ul>
<li>在造成渲染的原因中，“<code>This is the first time the component rendered.</code>”是正常的原因，其他原因如
“<code>The parent component rendered.</code>”跟“<code>Context changed</code>” 等等是效能優化時須斟酌是否能改善的地方</li>
</ul>
<p><img src="https://github.com/CAFECA-IO/KnowledgeManagement/assets/20677913/518893d0-13ce-4ace-ba84-d7fa1aefd140" alt="image"></p>
<p><img src="https://github.com/CAFECA-IO/KnowledgeManagement/assets/20677913/7b70cd2a-ced5-448c-8909-0fb6a926fa09" alt="image"></p>
<h3>用 React.memo</h3>
<p><code>React.memo</code> 是一個 React 提供的高階組件，它可以讓你在組件的 props 未改變時避免重新渲染。當你將一個
組件包裹在 <code>React.memo</code> 中，該組件只有在其 props 發生變化時才會重新渲染。</p>
<pre><code class="language-jsx">const MemoizedComponent = memo(SomeComponent);
</code></pre>
<p>這意味著，即使父組件重新渲染，只要 <code>MemoizedComponent</code> 的 props 沒有改變，它就不會重新渲染。這可以提
高 React 應用的性能，特別是在大型應用中。</p>
<h3>用 useMemo 跟 useCallback</h3>
<ul>
<li>當使用 <code>React.memo</code> 時，你的組件會在任何 prop 不與之前的值淺比較相等(shallow equality)時重新渲染。
這意味著 React 使用 <code>Object.is</code> 比較來確定 props 是否有所改變。例如， <code>Object.is(3, 3)</code> 返回
<code>true</code> ，但 <code>Object.is({}, {})</code> 返回 <code>false</code> 。<ul>
<li><a href="https://github.com/facebook/fbjs/blob/main/packages/fbjs/src/core/shallowEqual.js#L39-L67">shallowEqual source code</a></li>
</ul>
</li>
<li>要充分利用 <code>React.memo</code> ，你應該盡量減少 props 的改變次數。例如，如果 prop 是一個 object，你可以使
用 <code>useMemo</code> 防止父組件每次重新渲染時都重新創建該 object：</li>
</ul>
<pre><code class="language-jsx">function Page() {
  const [name, setName] = useState(&#39;Taylor&#39;);
  const [age, setAge] = useState(42);
  const person = useMemo(() =&gt; ({name, age}), [name, age]);
  return &lt;Profile person={person} /&gt;;
}
</code></pre>
<h3>避免在 component 裡創造新的 static object 或 static array</h3>
<p>在 component 裡面的 object 或 array，會隨著 re-render 而重新計算或重新生成，如果是靜態變數，可以搬到
component 外面，避免重新生成。</p>
<pre><code class="language-jsx">const options = {
  serverUrl: &#39;https://localhost:1234&#39;,
  roomId: &#39;music&#39;
};

function ChatRoom() {
  const [message, setMessage] = useState(&#39;&#39;);

  useEffect(() =&gt; {
    const connection = createConnection(options);
    connection.connect();
    return () =&gt; connection.disconnect();
  }, []); // ✅ All dependencies declared
  // ...
</code></pre>
<h3>使用狀態管理工具</h3>
<ul>
<li>打開 React developer tool 的 <code>Highlight updates when components render</code>，從
<a href="https://codesandbox.io/s/heuristic-diffie-iqhnqg?file=/pages/context-page.js">Code Sandbox example</a>
可以看到 context 會造成所有組件重新渲染，但使用狀態管理工具則可以避免不必要的組件重新渲染</li>
<li>context 的寫法是用 provider 包住所有組件，這樣會在 provider 值更新後，重新渲染 <code>Winner</code> 跟
<code>Players</code><pre><code class="language-jsx">export default function ContextComponent() {
  return (
    &lt;div className={styles.container}&gt;
      &lt;main className={styles.main}&gt;
        &lt;StoreContextProvider&gt;
          &lt;Winner /&gt;
          &lt;Players /&gt;
        &lt;/StoreContextProvider&gt;
      &lt;/main&gt;
    &lt;/div&gt;
  );
}
</code></pre>
</li>
<li>使用 Zustand 則可以只讓該 <code>Player</code> 跟 <code>Winner</code> 重新渲染</li>
</ul>
<h3>TailwindCSS 的 CSS 優化解法</h3>
<p>可通過以下配置跟指令壓縮 CSS，但在壓縮前後，透過 dev tool 的 Network 看到 CSS 大小跟時間沒有太大差別
。</p>
<ul>
<li>壓縮前
<img src="https://github.com/CAFECA-IO/KnowledgeManagement/assets/20677913/78f6c8a3-1c3f-4d1a-bd17-ae984467ef8e" alt="image"></li>
<li>壓縮後
<img src="https://github.com/CAFECA-IO/KnowledgeManagement/assets/20677913/fafa0013-6b2d-4822-89ac-0f842ac5db78" alt="image"></li>
<li><code>npx tailwindcss -o build.css --minify</code></li>
</ul>
<pre><code class="language-jsx">// postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === &#39;production&#39; ? {cssnano: {}} : {}),
  },
};
</code></pre>
<h1>參考資料</h1>
<ul>
<li><a href="https://nextjs.org/learn/seo/improve">Improving your Core Web Vitals</a></li>
<li><a href="https://tailwindcss.com/docs/optimizing-for-production">Optimizing for Production - TailwindCSS</a></li>
<li><a href="https://react.dev/reference/react/memo">Should you add memo everywhere?</a></li>
<li><a href="https://react.dev/learn/removing-effect-dependencies#does-some-reactive-value-change-unintentionally">Does some reactive value change unintentionally?</a></li>
<li><a href="https://www.youtube.com/watch?v=4U37IRrt_zQ">React Developer Tools | Components &amp; Profiler</a></li>
<li><a href="https://medium.com/inato/prevent-re-renders-in-your-react-app-using-react-profiler-93c492110e30">Improve your React app performance using React Profiler</a></li>
<li><a href="https://github.com/facebook/fbjs/blob/main/packages/fbjs/src/core/shallowEqual.js#L39-L67">shallowEqual source code</a></li>
<li><a href="https://juejin.cn/post/7170364934889406495">我一直以为这就是 JS 中的浅比较，直到...</a></li>
<li><a href="https://codesandbox.io/s/heuristic-diffie-iqhnqg?file=/pages/context-page.js">Code sandbox - heuristic-diffie-iqhnqg</a></li>
</ul>


在現代網站開發中，效能是不可忽視的要素。以下將探討如何利用 Next.js 與 TailwindCSS 來打造效能卓越的網 站。

Language