本文詳細介紹了 Merkle Tree 的資料結構和原理，包括其在區塊鏈和分佈式存儲資料庫中的應用。文章從基礎的證據樹結構講起，深入探討了 Merkle Tree 的建構過程、數據存儲方式以及如何通過一致性雜湊和稀疏 Merkle Tree 來處理數據驗證和節點碰撞問題。此外，還提供了關於如何實現和操作 Merkle Tree 的詳細程式碼範例

深入解析 Merkle Tree 與其在區塊鏈中的應用

<h1>ERC-4626: Tokenized Vaults</h1>
<h2>reference:</h2>
<h3>官方資料：</h3>
<ul>
<li><a href="https://ethereum.org/en/developers/docs/standards/tokens/erc-4626/">ERC-4626 Tokenized Vault Standard</a></li>
<li><a href="https://eips.ethereum.org/EIPS/eip-4626">ERC-4626: Tokenized Vaults</a></li>
<li><a href="https://github.com/transmissions11/solmate/blob/main/src/mixins/ERC4626.sol">ERC-4626: GitHub Repo of ERC4626.sol</a></li>
</ul>
<hr>
<ul>
<li><a href="https://www.gate.io/zh-tw/blog_detail/920/what-is-erc-4626">一文解讀什麼是ERC-4626標準</a></li>
<li><a href="https://frogsanon.neworder.network/articles/the-future-of-erc-4626">The Future of ERC-4626</a>/<a href="https://www.techflowpost.com/article/detail_11415.html">ERC-4626 的未來：給DeFi 帶來指數級的流動性和資本效率</a></li>
<li><a href="https://cryptomarketpool.com/vaults-and-the-erc-4626-token-contract/">Vaults and the ERC-4626 token contract</a></li>
<li><a href="https://www.alchemy.com/overviews/erc-4626">What is the ERC-4626 token standard?</a></li>
<li><a href="https://blog.logrocket.com/write-erc-4626-token-contract-yield-bearing-vaults/">How to write an ERC-4626 token contract for yield-bearing vaults
</a></li>
<li><a href="https://web3caff.com/zh_tc/archives/38564">介紹 ERC-4626 金庫通用屬性測試：讓 DeFi 可組合性更安全</a>/<a href="https://a16zcrypto.com/posts/article/generalized-property-tests-for-erc4626-vaults/">Generalized property tests for ERC4626 vaults</a></li>
<li><a href="https://www.blocktempo.com/what-is-ethereum-eip-4625/">讀懂以太坊EIP-4626：「代幣化保險庫」的通用標準</a></li>
<li><a href="https://docs.exact.ly/guides/protocol/market/erc-4626">ERC-4626</a></li>
</ul>
<h2>介紹</h2>
<h3>ERC-4626 —— 代幣化資金庫(tokenized vault)標準</h3>
<p>ERC-4626的概念，最初是由Fei 協議創始人Joey Santoro 等5 位作者於2021年12月22日提出的。</p>
<p>ERC-4626是一個優化和統一收益資金庫技術參數的標準，ERC-4626 合約標準擴展了ERC-20 代幣標準。它為代表單個底層 ERC-20 代幣份額的代幣化收益資金庫提供標準 API。ERC-4626 還概述了使用 ERC-20 的代幣化資金庫(tokenized vault)的可選擴展，提供存入、提取代幣和讀取餘額的基本功能。</p>
<p>顧名思義，ERC-4626代幣化資金庫(tokenized vault)標準用於標準化資金庫流程。它還增加了在智能合約中鎖定代幣以包裝或鑄造新代幣的安全係數，並允許更輕鬆地創建這些具有收益率的代幣。隨著越來越多與EVM兼容的區塊鏈採用這一新標準，包裝過程的成本、時間和精力都將得到較大改善。</p>
<p>原先代幣化資金庫(tokenized vault)缺乏標準化，這包括收益聚合器（例如Yearn、Rari 和Idle）、借貸市場（例如Compound, Aave和Fuse）和原生收益代幣（例如xSUSHI ）等各種例子通常在實施時略有不同，這使得對於需要遵守多個標準的協議來說，聚合器或插件層的集成變得困難，並迫使每個協議實現自己的適配器，這容易出錯並浪費開發資源。</p>
<p>該標準的好處不僅限於最終用戶。由於ERC-4626代幣化資金庫(tokenized vault)標准允許開發人員為作為資金庫過程一部分的代幣創建共享接口，開發人員也將受益。這大大減少了完成一個項目所需的時間。它還有助於使代幣的整合更加靈活和方便。根據Fei協議的創始人Joey Santoro的說法，ERC-4626與“DeFi Lego”類似，因為它與其他技術具有交叉兼容性，且易於實現。</p>
<p>同時有助於安全性，因為每個人基本上都按照相同的標準編程，審計人知道該關注什麼。</p>
<h4>什麼是代幣化資金庫？</h4>
<p>簡單來說，Vaults是智能合約，用戶可以將代幣存入其中，然後運行預定的策略來投資這些存款。</p>
<blockquote>
<p>當你存入代幣時，你會收到一個 「資金庫代幣」。當你持續保持代幣鎖定時，這些協議會累積更多的 「資金庫代幣」。當你決定取回代幣時，你只需交換 「資金庫代幣」 即可獲得原始代幣和獎勵。</p>
</blockquote>
<blockquote>
<p>資金庫的優勢是它們允許人們投資於復雜的戰略，而不必自己進行所有的交易。然而，如果 Vault 不兼容 ERC-4626，那麼 DeFi 就會失敗，因為流動性完全被束縛了。而 ERC-4626 完美解決了這個問題。可以說 ERC-4626為Vault代幣帶來了流動性</p>
</blockquote>
<h4>什麼是 ERC-4626 token？</h4>
<p>ERC-4626 token 在<a href="https://eips.ethereum.org/EIPS/eip-4626">EIP-4626</a>中有完整描述。</p>
<h3>ERC-4626 的工作原理：</h3>
<p>市場上幾乎所有可用的代幣都符合ERC-20標準。用外行的話說，這意味著代幣可以在以太坊區塊鏈上自由轉移。ERC-4626為以太坊區塊鏈增加了更多靈活性。雖然這一概念非常簡單，但它將有助於推動DeFi行業的進一步發展。</p>
<p>必須注意的是，ERC-4626只是一個接口。它擴展了現有的ERC-20代幣，這意味著參與代幣也必須符合ERC-20標準。用戶能以任何方式實現ERC-4626，協議將按照接口與建置進行交互。簡而言之，標準化涉及以下幾點：</p>
<ul>
<li>用戶如何從資金庫存款和取款</li>
<li>計算資金庫代幣和流程中涉及的其他代幣的存款和取款的函數</li>
<li>通過接口確定基礎代幣</li>
<li>與資金庫交互相關的事宜</li>
</ul>
<p>Vault介面的設計旨在為整合者提供一個功能齊全但極簡的介面。存入代幣的會計和分配等詳細信息故意沒有指定，因為Vaults預計在使用之前在鏈上被視為黑盒並在鏈外進行檢查。</p>
<p>EIP-20 是強制執行的，因為代幣批准和余額計算等實施細節直接轉移到股份會計中。除了 EIP-20 是強制執行的，因為像代幣批准和餘額計算等實現細節直接傳遞到份額會計中。這種標準化使得Vaults立即與所有EIP-20用例兼容，除了EIP-4626。</p>
<p>為了對稱性和功能完整性，mint方法被包括在內。大多數基於份額的Vaults的當前用例並不賦予份額特殊含義，以致於用戶會優化特定數量的份額（mint）而不是特定數量的基礎資產（deposit）。然而，可以很容易地想像出未來的Vault策略，它們將具有獨特且獨立有用的份額表示。</p>
<p>convertTo函數作為粗略估計，不考慮提現費用等操作特定細節。它們被包括在前端和需要份額或資產的平均值而不是可能包括滑點或其他費用的準確值的應用程序中。對於需要試圖考慮費用和滑點的準確值的應用程序，我們已經包括了相應的預覽函數以配合每個可變函數。這些函數不能考慮存款或提現限制，以確保它們易於組合，max函數就是為此目的提供的。</p>
<h3>定義：</h3>
<ul>
<li>資產(asset)：由Vault管理的基礎代幣。單位由相應的EIP-20合約定義。</li>
<li>份額(share)：Vault的代幣。在鑄造/存款/提款/贖回過程中與基礎資產交換的比率（由Vault定義）。</li>
<li>費用(fee)：Vault向用戶收取的資產或份額數量。費用可以存在於存款、收益、資產管理規模、提款或Vault指定的其他任何項目中。</li>
<li>滑點(slippage)：廣告份額價格與存入或提取Vault時的實際經濟情況之間的任何差異，這些差異並不包括在費用中。</li>
</ul>
<h3>方法</h3>
<h4>存款</h4>
<p>當用戶將資金存入Vault時，存款功能觸發智能合約，為存款者鑄造相應數量的份額（shares）。作為一個事件，每次存款時都必須觸發智能合約。</p>
<pre><code>function deposit(address _to, uint256 _value) public returns (uint256 _shares)
</code></pre>
<p>通過此功能，我們已經指示合約將一些代幣存入Vault並將份額的所有權交給調用者。你可以以同樣的方式撰寫提款功能。</p>
<h4>提款</h4>
<p>提款功能幫助持有人燒毀份額以換取資產。當Vault發生提款時，必須觸發提款事件。</p>
<pre><code>event Deposit(address indexed _from, address indexed _to, uint256 _value)
</code></pre>
<p>該事件中的address indexed _from代表同意將代幣存入Vault的用戶，而可以提取存入的代幣的地址是address indexed _to。</p>
<h4>資產和總資產</h4>
<p>在資產功能中應使用Vault代幣的地址。智能合約中的所有底層資產總額應在totalAssets下聲明。</p>
<p>轉換為份額和轉換為資產
根據ERC-4626標準，有兩個轉換功能：convertToShares和convertToAssets。</p>
<p>當你需要將資產轉換為份額時，應該調用convertToShares函數，因為它包含了要釋放的份額數量。</p>
<p>相反，convertToAssets函數則相反地將份額轉換為資產。</p>
<pre><code>function convertToAssets(uint256 shares) public view virtual override returns (uint256 assets) {
  return _convertToAssets(shares, Math.Rounding.Down);
}

function totalAssets() public view virtual override returns (uint256) {
  return _asset.balanceOf(address(this));
}
</code></pre>
<h4>鑄造</h4>
<p>當有存款時，鑄造功能為接收者調用。maxMint是在Vault中可以為用戶或接收者創建的份額的總數量。作為開發者，你應該設置這個值。</p>
<pre><code>function mint(uint256 shares, address receiver) public virtual override returns (uint256) {
  require(shares &lt;= maxMint(receiver), &quot;ERC20TokenizedVault: mint more than max&quot;);
}
</code></pre>
<h4>贖回</h4>
<p>贖回功能從所有者（msg.sender）燒毀一些份額並將資產發送給接收者。如果由於某種原因份額無法贖回，則必須回滾（revert）贖回功能。</p>
<pre><code>function redeem(address _to, uint256 _shares) public returns
</code></pre>
<h3>實際使用 erc4626 的三個專案</h3>
<h4>1.Rodeo Finance</h4>
<p>Rodeo 的Vault 允許你投資於不同的LP 收益策略，甚至更進一步允許用戶進行保證金貸款，從而為你贏得更高的收益。</p>
<p>Rodeo 有兩點與眾不同：首先，為了投資他們的策略，你只需要存入USDC，Rodeo 會拿走所有USDC，購買策略所需的任何LP 代幣，並為你進行投資。這為你節省了時間和金錢，而這些時間和金錢將花在購買代幣並將其存入流動性池的繁瑣過程中。相反，你所需要的只是一些USDC。</p>
<p>其次，當然是他們所有的Vault 都使用ERC-4626 標準，這意味著很容易合併新的Vault。例如，由於槓桿的風險，Rodeo 上可能會出現允許用戶對沖其頭寸以避免清算的Vault。</p>
<h4>2: FactorDAO</h4>
<p>Factor 是一個相對較新的項目，旨在成為Arbitrum 的流動性中心。當然，他們計劃這樣做的方式是讓創建Vault 變得更容易，他們的策略圍繞著ERC-4626 標準。</p>
<p>Factor 有一個可以創建各種結構化產品的一站式商店，包括收益率策略、衍生品、LP 等。基本上，如果你想創建或投資一個定制的資產管理策略，你可以考慮它。</p>
<h4>3: Fuji Finance</h4>
<p>是一個跨鏈貨幣市場聚合器，目前它已經集成在以太坊、Polygon、Fantom、Arbitrum 和Optimism 上。而在他們即將推出的V2 版本中，他們將把ERC-4626 提升到新的水平。</p>
<p>使用Connext 的跨鏈服務，Fuji 將啟用跨鏈池，你猜對了，就是ERC-4626 標準。通過ERC-4626，可以讓用戶在一次交易中能在不同鏈上借出和借入不同資產。</p>
<p>這也在更廣泛的DeFi 領域進一步提高了效率；有了Fuji 的新產品，流動性將能夠利用不同鏈上的較高貸款利率、較低的借款利率、流動性挖礦活動等。它還有助於在不同的鏈上分散流動性；例如，如果一條較新的鏈與Fuji 集成，他們可以激勵Fuji 用戶在他們的鏈上借貸，同時在以太坊等更成熟和流動性更強的鏈上借貸。從本質上講，這裡有潛力將流動性帶到鏈上。</p>


介紹 ERC-4626，即代幣化資金庫標準，由Fei協議的Joey Santoro等五位作者於2021年12月22日提出。 這個標準旨在優化並統一收益資金庫的技術參數，其實質上擴展了ERC-20代幣標準，為代表單一底層ERC-20代幣份額的代幣化收益資金庫提供了一套標準化的API接口。

ERC-4626: Tokenized Vaults

<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

<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 來打造效能卓越的網 站。

用 Next.js 與 TailwindCSS 創建效能良好的網站

EIP-1559 是 Ethereum 的一項更新，改變了 Ethereum 的 Gas Fee 計算模式並新增部份手續費銷毀機制控制 ETH 總發行量。本文簡述此項更新內容，並解析 EIP-1559 詳細交易格式。

EIP-1559

<p>站點地圖（Sitemap）是一個網站的結構圖，收錄整個網站中所有頁面站點間的關聯性。它可以幫助 Google 的搜
尋引擎爬取頁面內容，避免頁面被搜尋引擎遺漏也縮短檢索時間，並且有助於提升網站的搜索引擎優化（SEO）。</p>
<p>本文將說明在 Next.js 中建立動態站點地圖的方法。</p>
<h2>一、建立檔案</h2>
<p>在 <code>/pages</code> 底下建立一個名為 <code>sitemap.xml.tsx</code> 的檔案。<code>.xml</code> 表明這是一個 XML 文件，請注意不要忽略
。</p>
<img width="253" alt="image" src="https://github.com/CAFECA-IO/KnowledgeManagement/assets/114177573/99d610fe-2a8a-4a97-85d8-a84ebe40285b">

<p>在 Next.js 中，每個頁面都需要導出一個 React 組件作為預設匯出 (<strong><code>default export</code></strong>)。這裡只需要直接
回傳 null。</p>
<pre><code class="language-tsx">export default function Sitemap() {
  return null;
}
</code></pre>
<h2>二、取得全部頁面</h2>
<p>撰寫一個 function ，將網頁中所有頁面的 URL 和最後更新的日期整理起來。</p>
<p>最後更新日期需要根據專案需求或其他邏輯來決定，也可以由後端提供。如果頁面內容在後端發生變化，則可以由
後端的最後修改時間來設置這個值。</p>
<p>以 MerMer-offcial 為例，這裡是取檔案的最後修改日期，實際作法如下：</p>
<pre><code class="language-tsx">function getLastModifiedDate(filepath: string) {
  const stats = fs.statSync(filepath);

  // 格式化日期
  const formattedMonth =
    stats.mtime.getMonth() + 1 &lt; 10 ? `0${stats.mtime.getMonth() + 1}` : stats.mtime.getMonth() + 1;
  const formattedDay =
    stats.mtime.getDate() &lt; 10 ? `0${stats.mtime.getDate()}` : stats.mtime.getDate();

  const formattedDate = `${stats.mtime.getFullYear()}-${formattedMonth}-${formattedDay}`;
  return formattedDate;
}
</code></pre>
<p>接著是將 URL 和最後更新日期做整理，一樣以 MerMer-offcial 為例：</p>
<pre><code class="language-tsx">// 取得所有頁面
async function getPages() {
  // 取得首頁的最後更新日期
  const indexUpdated = getLastModifiedDate(&#39;./src/pages/index.tsx&#39;);

  // 取得全部 KM 的 URL
  const slugs = (await getSlugs(KM_FOLDER)) ?? [];

  const kmPosts = slugs.map(slug =&gt; {
    // 取得 KM 最後更新日期
    const updated = getLastModifiedDate(`./src/km/${slug}.md`);
    return {
      url: `${MERURL.KM}/${slug}`,
      updated: updated,
    };
  });

  // 整理所有的 URL 項目
  const posts = [
    {
      url: MERURL.INDEX,
      updated: indexUpdated,
    },
    ...kmPosts,
  ];

  return posts;
}
</code></pre>
<h2>三、建立 XML 字串</h2>
<img width="1225" alt="image" src="https://github.com/CAFECA-IO/KnowledgeManagement/assets/114177573/fef65c61-e157-4ff1-99cd-378d2ed86ed4">

<p>這是
<a href="https://developers.google.com/search/docs/crawling-indexing/sitemaps/build-sitemap?hl=zh-tw">Google</a>
提供的 XML sitemap 範例，接下來將根據它建立一個模板，用於生成符合 XML 格式的字串。</p>
<pre><code class="language-tsx">async function generateSitemap(): Promise&lt;string&gt; {
  // 取得所有頁面
  const pages = await getPages();

  //生成 XML 字串
  return `&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
    &lt;urlset xmlns=&quot;http://www.sitemaps.org/schemas/sitemap/0.9&quot;&gt;
${pages
  // 將每個 URL 項目轉換成 XML 字串
  .map(page =&gt;
    return `&lt;url&gt;
    &lt;loc&gt;${DOMAIN}${page.url}&lt;/loc&gt;
    &lt;lastmod&gt;${page.updated}&lt;/lastmod&gt;
  &lt;/url&gt;`;
  })
  // 將所有 URL 項目拼接成一個完整的 sitemap 文檔
  .join(&#39;&#39;)}
    &lt;/urlset&gt;`;
}
</code></pre>
<h2>四、生成 sitemap.xml</h2>
<p>Next.js 的 <code>getServerSideProps</code> 函數會在每次收到 Server-Side Rendering (SSR) 的請求時生成 sitemap，
然後傳遞給頁面組件。</p>
<p>執行的流程如下：</p>
<ul>
<li>設置 response 的 Content-Type 為 <code>text/xml</code>，表示返回 XML 格式的內容。</li>
<li>調用 <code>generateSitemap</code> 函數以獲取 sitemap 的 XML 內容。</li>
<li>使用 <code>res.write</code> 將 XML 內容寫入 response。</li>
<li>最後 <code>res.end()</code> 結束 response 的處理。</li>
</ul>
<pre><code class="language-tsx">export const getServerSideProps: GetServerSideProps = async ctx =&gt; {
  // 設置 response header 為 XML
  ctx.res.setHeader(&#39;Content-Type&#39;, &#39;text/xml&#39;);

  // 生成 sitemap 內容
  const xml = await generateSitemap();

  // 將 sitemap 寫入到 response 中
  ctx.res.write(xml);

  // 結束 response
  ctx.res.end();

  // 返回一個空的 props 對象，因為在 SSR 中必須返回一個包含數據的對象
  return {
    props: {},
  };
};
</code></pre>
<h2>五、完成</h2>
<p>前往 <code>/sitemap.xml</code> 就可以看到完成的站點地圖了。</p>
<p><img src="https://github.com/CAFECA-IO/KnowledgeManagement/assets/114177573/41b1242b-e087-4e7a-bc78-ea1535837231" alt="image"></p>
<p>完整 <code>sitemap.xml.tsx</code> 程式碼如下：</p>
<pre><code class="language-tsx">import {GetServerSideProps} from &#39;next&#39;;
import {MERURL} from &#39;../constants/url&#39;;
import {DOMAIN, KM_FOLDER} from &#39;../constants/config&#39;;
import {getSlugs} from &#39;../lib/posts&#39;;
import fs from &#39;fs&#39;;

//預設匯出
export default function Sitemap() {
  return null;
}

// 生成 sitemap.xml
export const getServerSideProps: GetServerSideProps = async ctx =&gt;
  ctx.res.setHeader(&#39;Content-Type&#39;, &#39;text/xml&#39;);

  const xml = await generateSitemap();
  ctx.res.write(xml)
  ctx.res.end();

  return {
    props: {},
  };
};

// (20231205 - Julian) 生成 XML 字串
async function generateSitemap(): Promise&lt;string&gt; {
  const pages = await getPages();

  return `&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
    &lt;urlset xmlns=&quot;http://www.sitemaps.org/schemas/sitemap/0.9&quot;&gt;
${page
  .map(page =&gt; {
    return `&lt;url&gt;
    &lt;loc&gt;${DOMAIN}${page.url}&lt;/loc&gt;
    &lt;lastmod&gt;${page.updated}&lt;/lastmod&gt;
  &lt;/url&gt;`;
  })
  .join(&#39;&#39;)}
    &lt;/urlset&gt;`;
}

// Info: (20231205 - Julian) 取得檔案的最後修改日期
function getLastModifiedDate(filepath: string) {
  const stats = fs.statSync(filepath);

  const formattedMonth =
    stats.mtime.getMonth() + 1 &lt; 10 ? `0${stats.mtime.getMonth() + 1}` : stats.mtime.getMonth() + 1;
  const formattedDay =
    stats.mtime.getDate() &lt; 10 ? `0${stats.mtime.getDate()}` : stats.mtime.getDate();

  const formattedDate = `${stats.mtime.getFullYear()}-${formattedMonth}-${formattedDay}`;
  return formattedDate;
}

async function getPages() {
  const indexUpdated = getLastModifiedDate(&#39;./src/pages/index.tsx&#39;);

  const slugs = (await getSlugs(KM_FOLDER)) ?? [];

  const kmPosts = slugs.map(slug =&gt; {
    const kmDate = getLastModifiedDate(`./src/km/${slug}.md`);
    return {
      url: `${MERURL.KM}/${slug}`,
      updated: kmDate,
    };
  });

  const posts = [
    {
      url: MERURL.INDEX,
      updated: indexUpdated,
    },
    ...kmPosts,
  ];

  return posts;
}
</code></pre>
<h2>參考來源</h2>
<ul>
<li><a href="https://www.youtube.com/watch?v=khYC98faSrg">How to create a Dynamic Sitemap in Next.js</a></li>
<li><a href="https://developers.google.com/search/docs/crawling-indexing/sitemaps/build-sitemap?hl=zh-tw">Google 搜尋中心</a></li>
<li><a href="https://bobbyhadz.com/blog/get-last-modified-date-of-file-using-node-js">How to get the last modified Date of a File in Node.js</a></li>
</ul>


本文將說明在 Next.js 中建立動態站點地圖的方法。站點地圖（Sitemap）是一個網站的結構圖，收錄整個網站中所有頁面站點間的關聯性。它可以幫助 Google 的搜尋引擎爬取頁面內容，避免頁面被搜尋引擎遺漏也縮短檢索時間，並且有助於提升網站的搜索引擎優化（SEO）。

Create a Dynamic Sitemap in Next.js

由淺入深，從 Solidity 智能合約到系統開發

<h1>前言</h1>
<p>此篇文目標是簡單講述 Git Flow 和 GitHub Flow 的流程，以及相關名詞解說，並且附上目前開發團隊的流程慣
例。</p>
<h3>Git Flow 是什麼？為什麼需要 Git Flow？</h3>
<p>當在同一個專案一起開發的人數越來越多，如果沒有訂好規矩，每個人的 Commit 習慣可能都不同，放任大家隨便
Commit 的話遲早會造成災難。在 2010 年的時候，就有人提出了一
套<a href="https://nvie.com/posts/a-successful-git-branching-model/">流程</a>讓大家可以遵守。這幾年來也陸續有其
它優秀的開發流程，例如 GitHub Flow、Gitlab Flow 等流程。</p>
<h1>Git Flow</h1>
<h2>分支應用情境</h2>
<p>根據 Git Flow 的建議，主要的分支有  <code>master</code>、<code>develop</code>、<code>hotfix</code>、<code>release</code>  以及  <code>feature</code>  這五
種分支，各種分支負責不同的功能。其中 Master 以及 Develop 這兩個分支又被稱做<strong>長期分支</strong>，因為他們會
一直存活在整個 Git Flow 裡，而其它的分支大多會因任務結束而被刪除。</p>
<p><img src="https://github.com/CAFECA-IO/WorkGuidelines/assets/105651918/afcf25f3-b822-4a9f-87df-bf0c72ac2cfd" alt="flow"></p>
<h2>分支介紹</h2>
<h3>Master 分支</h3>
<p>主要是用來放穩定、隨時可上線的版本。這個分支的來源只能從別的分支合併過來，開發者不會直接 Commit 到這
個分支。因為是穩定版本，所以通常也會在這個分支上的 Commit 上打上版本號標籤。</p>
<h3>Develop 分支</h3>
<p>這個分支主要是所有開發的基礎分支，當要新增功能的時候，所有的 Feature 分支都是從這個分支切出去的。而
Feature 分支的功能完成後，也都會合併回來這個分支。</p>
<h3>Hotfix 分支</h3>
<p>當線上產品發生緊急問題的時候，會從 Master 分支開一個 Hotfix 分支出來進行修復，Hotfix 分支修復完成之
後，會合併回 Master 分支，也同時會合併一份到 Develop 分支。</p>
<p>為什麼要合併回 Develop 分支？如果不這麼做，等到時候 Develop 分支完成並且合併回 Master 分支的時候，那
個問題就又再次出現了。</p>
<p>那為什麼一開始不從 Develop 分支切出來修？因為 Develop 分支的功能可能尚在開發中，這時候硬是要從這裡切
出去修再合併回 Master 分支，只會造成更大的災難。</p>
<h3>Release 分支</h3>
<p>當認為 Develop 分支夠成熟了，就可以把 Develop 分支合併到 Release 分支，在這邊進行算是上線前的最後測
試。測試完成後，Release 分支將會同時合併到 Master 以及 Develop 這兩個分支上。Master 分支是上線版本，
而合併回 Develop 分支的目的，是因為可能在 Release 分支上還會測到並修正一些問題，所以需要跟 Develop
分支同步，免得之後的版本又再度出現同樣的問題。</p>
<h3>Feature 分支</h3>
<p>當要開始新增功能的時候，就是使用 Feature 分支的時候了。Feature 分支都是從 Develop 分支來的，完成之後
會再併回 Develop 分支。</p>
<h1>GitHub flow</h1>
<p>GitHub flow 需要搭配 GitHub 帳號與 repository 一同使用，是一種輕量（lightweight）且基於分支的工作流
程（branch-based workflow）。</p>
<p>GitHub flow 適合團隊成員使用同一個 repository 進行開發時的溝通。</p>
<p>依照 <a href="https://docs.github.com/en/get-started/quickstart/github-flow">GitHub flow</a>，每次要對專案進行
更動時，都會經歷以下步驟：</p>
<ol>
<li>建立分支
(<a href="https://docs.github.com/en/get-started/quickstart/github-flow#create-a-branch">Create a branch</a>)</li>
<li>提交修改
(<a href="https://docs.github.com/en/get-started/quickstart/github-flow#make-changes">Make changes</a> : Add
commits and push your changes to your branch)</li>
<li>開啟 PR
(<a href="https://docs.github.com/en/get-started/quickstart/github-flow#create-a-pull-request">Create a pull request</a>)</li>
<li>Code Review
(<a href="https://docs.github.com/en/get-started/quickstart/github-flow#address-review-comments">Address review comments</a>)</li>
<li>合併分支
(<a href="https://docs.github.com/en/get-started/quickstart/github-flow#merge-your-pull-request">Merge your pull request</a>)</li>
<li>刪除分支
(<a href="https://docs.github.com/en/get-started/quickstart/github-flow#delete-your-branch">Delete your branch</a>)</li>
</ol>
<p>GitHub flow 下只有兩種分支，第一個是 master，其餘的都是 branch，而 branch 命名應該要有敘述性（例如
：userInfo、getAllUser 等），讓其他人清楚知道分支正在進行的工作項目。</p>
<p>在 branch 準備 merge 時，開發者需要發起 pull request，管理者一定要測試完此 branch 沒有問題，再與
master 合併。</p>
<p>簡單的說，由 <strong>管理者</strong> 來負責做分支的合併，其餘的開發者只需專心開發 branch 就好。但是開發者在
commit 時，務必要撰寫清楚，讓大家知道你在做甚麼，且管理者才知道如何合併，多一個人力去做合併的動作。
就好比大家一開始碰 git 時的方法，但多了一個人去專門負責合併工作，且 master 是隨時可以上線的情況。</p>
<h2>基本名詞介紹</h2>
<h3>Commit :</h3>
<p>就是一般的 commit</p>
<h3>Pull Request :</h3>
<p>當開發者要合併 branch 到 master 時，需要發出 pull request，此 pull request 有好幾個功能：</p>
<ol>
<li>使任何人都能清楚看到，什麼樣的提交內容將會被合併 (merge)。</li>
<li>若遇到問題，可以在 pull request 裡談，讓大家知道你需要幫忙。在討論及回饋中，如果有需要進行修改的
內容，在分支中修正它並繼續推送修改。GitHub 會在 Pull Request 頁面顯示新提交以及新的回饋。</li>
<li>請管理者來合併此 branch</li>
<li>留下合併的紀錄：在團隊檢核過提交內容後，就可以開始進行合併以及部屬。合併後，Pull Request 保存了當
時的修改歷史記錄以及回饋。可以讓任開發人回頭檢視當初情況。</li>
</ol>
<h3>Master : (or Main)</h3>
<p>主要的開發分支，與 Git Flow 定義一樣，通常有版號。所有的 master 分支都是可以部署上線的。</p>
<h2>Master vs Main</h2>
<p><code>master</code> 和 <code>main</code> 這兩者指的都是主要的開發分支，使用哪一個取決於開發者或團隊。</p>
<ol>
<li><p>Master:</p>
<p><code>master</code> 是傳統的分支名稱，最初在 Git 中使用。它被用來表示主要的、穩定的程式碼分支，通常代表了產
品的生產版本。</p>
<p>然而，有些人開始質疑這個術語的含義，認為它可能帶有不當的歷史聯想，因此開始尋找替代的名稱。</p>
</li>
<li><p>Main:</p>
<p><code>main</code> 是一個替代的分支名稱，被一些開發者和團隊選擇以取代<code>master</code>。</p>
<p>這種變化的動機之一是消除與「主人」或「奴隸」等詞彙的聯想，以促進更加包容和無歧視的開發環境。</p>
<p>許多開源專案和公司已經採用了 <code>main</code> 作為他們的主要分支名稱，這在一定程度上反映了對更加包容和多元
的價值觀的努力。</p>
<p>GitHub 等平台也已經開始在創建新儲存庫 (Repository) 時<strong>將預設分支名稱更改為 <code>main</code></strong>，以支持這種
趨勢。</p>
</li>
</ol>
<h1>目前我們團隊的開發流程</h1>
<p>在 GitHub 的 Repository，由 main 拉出一個 branch 命名為 <code>develop</code>。</p>
<p>接著就跟隨 Git Flow 的規則，每一次開發都是從 <code>develop</code> 拉出開發者自己的功能分支，分支命名須
為<code>feature/</code>開頭，例如：<code>feature/add_audit_report_formate</code>。</p>
<p>開發者開發完成該功能分支後，就建立 PR，依照團隊的
<a href="https://github.com/CAFECA-IO/WorkGuidelines/blob/main/technology/code-review.md">Pull Request Document Rule</a>
規則撰寫 PR 的內文描述。</p>
<p>PR 由團隊主管審核後該功能分支就會自動被併入(merge) develop，開發者再將自己的分支刪除（遠端分支會由主
管刪除，開發者自行刪除本地端分支即可）。</p>
<p>總之，只有 main 和 develop 兩個分支會始終存在於 Repository，其餘功能分支開發完成後就要刪除。</p>
<h1>References</h1>
<ul>
<li><a href="https://docs.github.com/en/get-started/quickstart/github-flow">GitHub flow</a></li>
<li><a href="https://gitbook.tw/chapters/gitflow/why-need-git-flow">https://gitbook.tw/chapters/gitflow/why-need-git-flow</a></li>
<li><a href="https://gitbook.tw/chapters/gitflow/using-git-flow">https://gitbook.tw/chapters/gitflow/using-git-flow</a></li>
<li><a href="https://enginebai.medium.com/git-flow-60b9466e9942">https://enginebai.medium.com/git-flow-60b9466e9942</a></li>
<li><a href="https://medium.com/i-think-so-i-live/git%E4%B8%8A%E7%9A%84%E4%B8%89%E7%A8%AE%E5%B7%A5%E4%BD%9C%E6%B5%81%E7%A8%8B-10f4f915167e">https://medium.com/i-think-so-i-live/git%E4%B8%8A%E7%9A%84%E4%B8%89%E7%A8%AE%E5%B7%A5%E4%BD%9C%E6%B5%81%E7%A8%8B-10f4f915167e</a></li>
<li><a href="https://ithelp.ithome.com.tw/articles/10293401">https://ithelp.ithome.com.tw/articles/10293401</a></li>
<li><a href="https://blog.poychang.net/guide-to-use-github-flow/">https://blog.poychang.net/guide-to-use-github-flow/</a></li>
</ul>


此篇文目標是簡單講述 Git Flow 和 GitHub Flow 的流程，以及相關名詞解說，並且附上目前開發團隊的流程慣例。

Git Flow

<h2>本文參考</h2>
<ul>
<li><a href="https://www.ardf.org.tw/cryptocurrency/1111130.pdf">加密貨幣交易會計處理之指引</a></li>
<li><a href="https://www.eslite.com/product/1001263352092762">鄭丁旺-中級會計學上冊 15版</a></li>
<li><a href="https://ifrs.sfb.gov.tw/ifrs/ifrs_2023_approved/IAS2_2023_A.pdf?1707271">國際會計準則第 2 號 存貨 (IAS 2)</a></li>
<li><a href="https://ifrs.sfb.gov.tw/ifrs/ifrs_2023_approved/IFRS15_2023_A.pdf?1707271">國際財務報導準則第 15 號 客戶合約之收入 (IFRS 15)</a></li>
<li><a href="https://ifrs.sfb.gov.tw/ifrs/ifrs_2023_approved/IFRS13_2023_A.pdf?1707271">國際財務報導準則第 13 號 公允價值衡量 (IFRS 13)</a></li>
<li>封面來源：<a href="https://www.pexels.com/zh-tw/photo/730547/">攝影師：David McBee</a></li>
</ul>
<h1>交易所  「取得、期末評價調整、出售」加密貨幣之會計處理</h1>
<p><strong>注意</strong>：</p>
<ul>
<li>以下文章以 <a href="https://www.ardf.org.tw/cryptocurrency/1111130.pdf">加密貨幣交易會計處理之指引</a> －「情況1: 銷售存貨予客戶並取得以太幣」作為範例，同時附上如果直接購入加密貨幣時的處理方法。</li>
<li>以下文章僅討論交易加密貨幣本身，並不包含對於加密貨幣之合約交易等衍生性金融商品。</li>
</ul>
<h2>加密貨幣會計分類之討論</h2>
<h3>加密貨幣於財務報表上的分類</h3>
<p>加密貨幣依照公司型態不同，需將加密貨幣分類為不同科目，交易所需分類為<strong>存貨</strong>，但公司應有相關佐證及理由支持，並須經合理評估及分析。</p>
<p>以下為<a href="https://www.ardf.org.tw/cryptocurrency/1111130.pdf">加密貨幣交易會計處理之指引</a>之文字摘要：</p>
<ul>
<li>如果公司適用 IAS2第 6 段之定義 將以太幣認列為存貨，存貨（ IAS2第 6 段）定義如下：<ul>
<li>持有供正常營業過程出售者 <strong>&lt;--交易所適用此項</strong></li>
<li>正在製造過程中以供前述銷售者</li>
<li>將於製造過程或勞務提供過程中耗用之原料或物料（耗材）</li>
</ul>
</li>
<li>其他不適用此狀況的都要把以太幣認列為<strong>非確定耐用年限之無形資產</strong>，實務上，持有加密貨幣之企業，大多將其分類為非確定耐用年限之無形資產。</li>
</ul>
<h3>加密貨幣之後續衡量</h3>
<p>不論是區分成無形資產還是存貨，期末都需要將價格依照當時狀況進行調整，</p>
<p>依照上述公司對加密貨幣的帳戶處理，公司會使用下面三種其中一個方法做會計分錄，交易所會採用第三種「大宗商品之經紀－交易商」的做法</p>
<ol>
<li>非確定耐用年限之無形資產：期末若有減損跡象需做資產減損，無形資產不需要攤銷</li>
<li>存貨-一般公司：成本與淨變現價值孰低衡量</li>
<li>存貨-大宗商品之經紀－交易商：公允價值減出售成本衡量，差額認列當期損益 <strong>&lt;--交易所採用此種做法</strong>
需注意僅有第三種「大宗商品之經紀－交易商」可以將加密貨幣調整超過原始購買成本，1、2種方法就算加密貨幣已經超過購買價格，資產帳面價值也不可以提升超過原始購買成本。</li>
</ol>
<h4>備註1. IAS 2 大宗商品之經紀－交易商之規範</h4>
<ul>
<li>存貨後續應以公允價值減出售成本衡量。</li>
<li>當此類存貨以公允價值減出售成本衡量時，其公允價值減出售成本之變動數係於變動發生<strong>當期認列於損益</strong>。<a href="https://ifrs.sfb.gov.tw/ifrs/ifrs_2023_approved/IAS2_2023_A.pdf?1707271">IAS 2 範圍 3-b</a></li>
<li>大宗商品之經紀－交易商係為他人或以本身帳戶購買或出售大宗商品者。第 3 段(b)所稱之存貨主要係以在未來短期內出售並產生來自價格之波動或經紀－交易商差價之利潤為目的而購入者。當此類存貨以採公允價值減出售成本衡量時，僅不適用本準則之衡量規範（本準則在這裡指的是IAS2，不適用成本與淨變現價值孰低衡量的意思。）</li>
</ul>
<h4>備註2. 公允價值應取什麼時點的價值：</h4>
<ul>
<li>參考：<a href="https://ifrs.sfb.gov.tw/ifrs/ifrs_2023_approved/IFRS13_2023_A.pdf?1707271">國際財務報導準則第 13 號 (IFRS 13)</a></li>
</ul>
<p>B34：
對某些資產或負債（例如金融工具）之輸入值可能可觀察之市場之例包括下列：</p>
<ol>
<li><p>集中市場。於集中市場，收盤價為輕易可得且通常代表公允價值。此種市場之例為倫敦證券交易所。</p>
</li>
<li><p>自營商市場。於自營商市場，自營商預備進行交易（為其本身買或賣），藉由使用自有資金以持有其所造市項目之存貨而提供流動性。買價及賣價（分別代表自營商有意願買入之價格及自營商有意願賣出之價格）通常較收盤價更能輕易可得。店頭市場（其價格公開報導）為自營商市場。某些其他資產及負債亦存在自營商市場，包括某些金融工具、商品及實體資產（例如二手設備）。</p>
</li>
<li><p>經紀商市場。於經紀商市場，經紀商試圖將買方與賣方配對，但不預備為其本身進行交易。換言之，經紀商並不使用自有資金以持有其所造市項目之存貨。經紀商知道各方之買價及賣價，但每一方通常不知對方所要求之價格。已完成交易之價格有時可以取得。經紀商市場包括為買賣單配對之電子通訊網路及商用與住宅不動產市場。</p>
</li>
<li><p>主理人對主理人市場。於主理人對主理人市場，創始及再出售之交易皆獨立協商而未經由仲介。有關該等交易之資訊極少公開。</p>
</li>
</ol>
<p>編者備註：由於交易商存貨需要當期調整，如果是持續性審計下使用日報的方法表示，也就是指每一天都會調整加密貨幣到公允價值減出售成本，也就是說如果加密貨幣中午時取用當時的公允價值減出售成本入帳，晚上時就還是會用收盤價調整，所以一天中取用哪個時段的價格差別應該不大，最後都會調整成收盤價格。</p>
<h2>實際範例: 銷售存貨予客戶並取得以太幣：</h2>
<h3>題目假設</h3>
<ol>
<li>Ａ公司公司購物網站使用以太幣作為支付工具</li>
<li>2021/5/13 購物網站上銷售實體存貨予客戶Z<ol>
<li>存貨之帳面金額為 NTD900,000（資產）</li>
<li>實體存貨之售價為NTD1,115,700</li>
<li>當天收10以太幣當作對價</li>
</ol>
</li>
<li>2021年11月11日出售10個以太幣</li>
<li>其他假設：<ol>
<li>美金對台幣保持1:30</li>
<li>在幣安交易所購買以太幣，幤安（Binance USD，BUSD兌美金保持 1:1</li>
<li>以太幣之可回收金額係以公允價值減處分成本決定，成本及小忽略不計</li>
</ol>
</li>
</ol>
<p>以太幣之公允價值變動列示如下表：</p>
<table>
<thead>
<tr>
<th>ETH/BUSD</th>
<th>ETH/BUSD</th>
<th>BUSD/USD</th>
<th>USD/NTD</th>
</tr>
</thead>
<tbody><tr>
<td>2021年5月13日</td>
<td>3,719</td>
<td>3,719</td>
<td>111,570</td>
</tr>
<tr>
<td>2021年6月30日</td>
<td>2,276</td>
<td>2,276</td>
<td>68,280</td>
</tr>
<tr>
<td>2021年9月30日</td>
<td>3,000</td>
<td>3,000</td>
<td>90,000</td>
</tr>
<tr>
<td>2021年11月11日</td>
<td>4,722</td>
<td>4,722</td>
<td>141,660</td>
</tr>
</tbody></table>
<p>ex 2021/5/13 一個以太幣可轉換3719個幣安(BUSD)幣，1幣安(BUSD)幣 可轉1 美金(USD)，1 美金轉換30台幣，所以1以太幣為 3719 * 1 * 30 = 111570台幣
此處參考  <a href="https://www.ardf.org.tw/cryptocurrency/1111130.pdf">加密貨幣交易會計處理之指引</a>5~9頁與鄭丁旺-中級會計學上冊 332~333頁綜合解果寫出。</p>
<h3>會計分錄</h3>
<h4>2021/5/13</h4>
<p>說明：2021 年 5 月 13 日取得 10 個以太幣公允價值=$111,570×10=$1,115,700 NTD。</p>
<ol>
<li>入帳以太幣當存貨(當作收入的對價)</li>
</ol>
<pre><code class="language-text">- 借：存貨–以太幣                                                    1,115,700
    - 貸：銷貨收入                                                           1,115,700
</code></pre>
<ol start="2">
<li>賣掉別的商品(非加密貨幣)的成本</li>
</ol>
<pre><code class="language-text">- 借：銷貨成本                                                         900,000
    - 貸：商品存貨                                                             900,000
</code></pre>
<p>如果是現金直接買以太幣可以寫成：</p>
<pre><code class="language-text">- 借：存貨–以太幣                                                     1,115,700
    - 貸：現金                                                              1,115,700
</code></pre>
<h4>2021/6/30</h4>
<p>期末調整日，如果是持續性審計應是每一天結束時都要進行調整。</p>
<p>說明：</p>
<ol>
<li>2021 年 6 月 30 日 1 個以太幣之淨變現價值為$68,280。</li>
<li>每個以太幣認列之備抵存貨跌價金額為$111,570－$68,280＝$43,290。</li>
<li>總共下降$43,290 * 10 = 432,900 NTD</li>
</ol>
<pre><code class="language-text">- 借：公允價值減出售成本之變動損失                                         432,900
    - 貸：存貨-以太幣                                                          432,900
</code></pre>
<p>如果是漲價的話，如下認列(總價值可以超過原始購買時的公允價值減出售成本)</p>
<pre><code class="language-text">- 借：存貨-以太幣                                                         xxxxx
    - 貸：公允價值減出售成本之變動利益                                              xxxxx
</code></pre>
<p>另外 公允價值減出售成本之變動<strong>損失</strong>、公允價值減出售成本之變動<strong>利益</strong> 可以結合成只用一個科目表示 為 公允價值減出售成本之變動<strong>損益</strong> </p>
<h4>2021/9/30</h4>
<p>一樣是期末調整日，但價格上漲。</p>
<ol>
<li>2021 年 9 月 30 日 1 個以太幣之淨變現價值為$90,000。</li>
<li>每個以太幣認列公允價值減出售成本之變動<strong>利益</strong>金額為$90,000－$68,280＝$21,720。</li>
<li>A 公司認列公允價值減出售成本之變動<strong>利益</strong>為$21,720×10 個＝$217,200。</li>
</ol>
<pre><code class="language-text">- 借：存貨-以太幣                                                       217,200
    - 貸：公允價值減出售成本之變動利益                                             217,200
</code></pre>
<h4>2021/11/11</h4>
<p>出售日，由於是交易所，會使用公允價值減出售成本，因此可以調整超過原始購買金額。</p>
<ol>
<li>2021 年 11 月 30 日 1 個以太幣之淨變現價值為$141,660。</li>
<li>每個以太幣認列公允價值減出售成本之變動<strong>利益</strong>金額為$141,660-$90,000＝$51,660。</li>
<li>A 公司認列公允價值減出售成本之變動<strong>利益</strong>為$51,660×10 個＝$516,600。</li>
<li>第二個分錄參考 鄭丁旺-中級會計學 上冊 609頁 生物性資產的出售分錄</li>
</ol>
<pre><code class="language-text">- 借：存貨-以太幣                                                       516.600
    - 貸：公允價值減出售成本之變動**利益**                                          516,600

- 借：現金                                                             141,660
    - 貸：存貨                                                                  141,660
</code></pre>
<h3>4. 備註：如果有出售成本時存貨如何計算</h3>
<p>前面例子假設加密貨幣交易之成本忽略不計，但加密貨幣交易時須向區塊鏈繳交一部份加密貨幣作為手續費，以下是包含該手續費之會計處理。</p>
<h4>題目假設</h4>
<ol>
<li>2023/12/25(買入) 1個以太幣是 120,000 NTD, 估計的 <strong>出售成本</strong> 是 500NTD，購入時花的手續費是500NTD</li>
<li>2023/12/31（期末調整）一個以太幣是110,000，估計的 <strong>出售成本</strong> 是 400NTD</li>
<li>2023/1/31（出售）一個以太幣是130,000 <strong>出售成本</strong>是 600NTD</li>
</ol>
<h4>2023/12/25</h4>
<p>買入時大宗商品要用公允價值減出售成本當作存貨價值，為 120,000 - 500 = 119,500，當天購入與出售假設需花費的以太幣數目一樣，因此買入手續費與出售成本的金額假定是一樣</p>
<p>以下兩個分錄可以合併</p>
<pre><code class="language-text">- 借：存貨-以太幣                                                        119,500
- 借：公允價值減出售成本之變動**損失**                                          500 (因為出售成本)
    - 貸：現金                                                                   120,000

- 借：手續費                                                                500
    - 貸：現金                                                                      500
</code></pre>
<h4>2023/12/31</h4>
<p>公允價值減出售成本當作存貨價值，為 110,000 - 400 = 109,600
119,500 -&gt; 109,600 下降了9,900</p>
<pre><code class="language-text">- 借：公允價值減出售成本之變動損失                                            9,900
    - 貸：存貨-以太幣                                                               9,900
</code></pre>
<h4>2024/1/31</h4>
<p>公允價值減出售成本當作存貨價值，為 130,000 - 600 = 129,400
109,600 -&gt; 129,400 上升了 19,800。</p>
<p>注意:</p>
<ul>
<li><p>第二個分錄時不會特地把出售費用另外紀錄，直接記錄以太幣轉現金。(參考 鄭丁旺-中級會計學 上冊 609頁 生物性資產的出售分錄)</p>
</li>
<li><p>第三個分錄是向客戶收取手續費時認列收入，假設我們收100NTD</p>
</li>
</ul>
<pre><code class="language-text">- 借：存貨-以太幣                                                        19,800
    - 貸：公允價值減出售成本之變動**利益**                                            19,800

- 借：現金                                                             129,400
    - 貸：存貨-以太幣                                                             129,400

- 借：現金                                                                 100
    - 貸：手續費收入                                                                  100
</code></pre>
<h1>交易所  加密貨幣之信託基金處理</h1>
<ul>
<li>參考:<ul>
<li><a href="https://www.twsa.org.tw/B01/doc/107.02.07%E8%AD%89%E5%88%B8%E5%95%86%E6%9C%83%E8%A8%88%E5%88%B6%E5%BA%A6%E7%AF%84%E6%9C%AC(%E7%AC%AC%E4%BA%94%E7%89%88).pdf">證券商會計制度範本(第五版) 7-107頁</a></li>
<li><a href="https://twse-regulation.twse.com.tw/TW/law/DAT0601.aspx?FLCODE=FL007040&FLDATE=20081029&LSER=001">證券商財務報告編製準則</a></li>
</ul>
</li>
</ul>
<p>交易所需要將一筆現金交給信託後，才能代替用戶購買加密貨幣。這筆金額可以使用「存出保證金」表示，屬於金融資產(一般放在其他金融資產向下)並應依其長短期之性質，分別列為流動資產或非流動資產。</p>
<p>以下是一題簡單的範例。</p>
<h3>題目假設</h3>
<ul>
<li>2024/1/1 交易所存放10,000元至信託專戶</li>
<li>2024/1/5 用戶入金增加，需要再存放 5,000元</li>
<li>2024/1/30 用戶入金減少，可收回3,000元</li>
</ul>
<pre><code class="language-text">- 2024/1/1
- 借：存出保證金                                                    10,000
    - 貸：現金 (or 銀行存款)                                             10,000

- 2024/1/5
- 借：存出保證金                                                     5,000
    - 貸：現金 (or 銀行存款)                                              5,000

- 2024/1/30
- 借：現金 (or 銀行存款)                                             3,000
    - 貸：存出保證金                                                      3,000
</code></pre>


介紹加密貨幣交易所應該如何對加密貨幣記帳，並附上相關範例

Language

Language

知識庫

Git Flow

Create a Dynamic Sitemap in Next.js

用 Next.js 與 TailwindCSS 創建效能良好的網站

React tips: how to use built-in hook