利用 NFT 釋放網站的潛力
TechFlow Selected深潮精選
利用 NFT 釋放網站的潛力
如何將 Brand Connect 集成到網站中，從而構建您的第一個 tokenized 的應用網絡?（ TAPP --我們內部創造使用的詞）
專注 Web3 行業深度報導，洞察潮水流動的方向Token Negotiator（Brand Connect）是 Smart Token Labs 基於 TokenScript 框架創建的的一個新技術型產品。作為一個完全開源的 NPM package 允許任何網站基於此進行鏈上和鏈下的 token attestations（驗證證明）。
鏈接：https://www.npmjs.com/package/@tokenscript/token-negotiator
本文旨在是展示如何將 Brand Connect 集成到網站中，從而構建您的第一個 tokenized 的應用網絡（ TAPP --我們內部創造使用的詞）。在這個過程中，我們將使用受眾廣泛的文庫 React 來演示如何將 token 連接到不同網絡的體驗和操作。
為了確保能從本篇文章中收穫最大的價值，讓我們先以 Q & A 的形式來介紹一些基本的概念和會使用的專業術語。
什麼是 token？
本文所提及的所有 tokens 都是指的 NFT（在區塊鏈上發行的非同質化代幣）或加密創建的不可偽造（複製）的 tokens（此資產主要儲存在設備內存、電子郵件或網絡存儲協議中）。
這些類型的 tokens 可以代表任何數字格式的東西，如汽車鑰匙、音樂會門票、藝術品或你的身份（DID）。除此之外，還有許多可能性待發現。
什麼是 tokenized 的網絡？
Tokenized 的網絡是一個將 token 作為主軸的用戶體驗的革新想法。
什麼是 attestation （驗證證明）？
Attestation 是指某事的證據或證明。舉例來說，你在機場需要出示有效的護照和機票來證明你有資格乘坐飛機。同樣的概念適應於tokenized 的網絡，token 的所有權可以通過 attestation （驗證證明）後進行後續操作。
為什麼考慮使用 tokens ？
Tokens 不受特定場景例用侷限或中心化服務的限制
Tokens 可以在任何地方被認證和使用。
Tokens 提供去中心化的安全和隱私類型。
與中心化服務相比，Tokens 給予用戶更多的控制權。
通過採用 Tokens ，可以衍生出一種新的互聯網形式，使交互操作的用戶體驗比現有的摩擦減少，並方便用戶獲得所需服務。
是否有替代方案？
傳統的網絡服務（通稱之為 Web 2.0）提供了各種方法來完成可以用 tokens 完成的解決方案（有一定門檻的體驗，創建了一個可以在不同領域使用的證明），然而，我們將在這篇文章中披露的內容將打開你的想象力，一個新的範式，比我們今天知道並使用的網絡有著更多的可能性和應用能力。
使用（或不使用）tokens 的風險有什麼？
Tokenized 的網絡是一個相當新的概念，在這個領域有很多東西需要學習和創建，以瞭解其全部潛力和使用這種技術的風險。
迄今為止，我們發現，使用 tokens 對於保持想保證其憑證安全的用戶和對需求合適的解決方案的企業來說風險更好。
有哪些優點？
對於企業來說，可以通過 NFT 集合從而接觸到以前無法發現或者觸碰的新受眾群體。
作為用戶，將能夠在許多應用程序中使用相同的 tokens ，減少獲取 tokens 授權給網絡服務產生的用戶摩擦。
對於開發者可以建立新型的應用程序，其中 tokens 的所有權可以作為推動新型體驗的基礎構建塊。
好，接下來讓我們正式開始！
首先安裝一個新的 React App ，根據以下 command（要求） ：
npx create-react-app my-app
一旦完成，改變 directory （目錄）
cd my-app
然後
npm run start
現在你應該看到以下內容：
接下來讓我們用下面的 command 安裝 Token Negotiator (Brand Connector)。
npm i @tokenscript/token-negotiator
“tokenContextProvider.js” as shown in the application directory below.
一旦安裝完畢，便可以將一些 tokens 加載到頁面中。接下來，在你的目錄中創建一個名為 " tokenContextProvider.js "的腳本，流程下面的應用程序的目錄所示：
在這個文件中，我們將配置通過 Reacts ContextProvider API 實現的library （文庫），將回通過 props 向 components（組件）提供 tokens 。
在新創建的文件中加入以下內容：
不好意思，代碼請查看原文鏈接。
改變合約地址'0x264...'和鏈' rinkeby '以匹配你擁有的 NFT 所在的智能合約地址和位置。如果並未擁有 NFT ，有很多方法可以在測試網上 mint 幣，有的有代碼，有的沒有代碼，如 OpenSea 。
issuers: [
{
collectionID: "demo-tokens",
contract: '0x26472AA24D795AbcB687bddb44d733ef55Ebdf09',
chain: 'rinkeby'
}
]
一旦持有了 NFT ，並且同時配置了 Token Negotiator ，接下來我們需要添加四個變化，使 library（文庫）能夠讀取用戶的 tokens 。
接下來，在 "App.js "中包括以下更改。連接library（文庫），並在class element （分類元素）"overlay-tn "中注入了一個標記性的覆蓋component（組件）。
在那之後創建一個名為 "StoreFront.js "的新 component（組件），用於顯示待售產品的列表。
不好意思，代碼請查看原文鏈接。
最後，創建一個名為 "StoreItem.js "的新組件，將用於顯示每個商店產品的數據。
配置步驟：基於 Create-React-App / webpack 5 進行改變，或者用我們之前做的完成版過渡。
在 Webpack 的第5版中，不再默認提供 Node.js 的配置文件，且要求開發者導入他們需要的配置文件。這影響了許多項目的開發創建，包括Create-React-App ，不過慶幸的是下面有一個解決方案可以解決這個問題：
https://www.alchemy.com/blog/how-to-polyfill-node-core-modules-in-webpack-5?ref=hackernoon.com
或者，如果你想不完成這一步可以選擇跳到前面的步驟，在以下鏈接中找到完整的示例代碼：
https://github.com/TokenScript/token-negotiator-examples/tree/main/art-gallery-medium-article-website?ref=hackernoon.com
很好，現在已經完成配置了，我們可以開始測試應用程序：你將會在為應用程序提供服務時看到以下顯示：
在項目 Directory（目錄）中，在Command（命令）行上運行
npm run start
1. 當點擊 Token Negotiator 組件 fab 按鈕時，它將顯示圍繞 tokens 的使用時所需配置全部細節。
2.接下來，終端用戶將需要連接他們的錢包，以便於在那裡可以找到他們的 tokens 。
3. 用戶之後可以選擇將他們的哪些 tokens 集合加載到網站中。在這個例子中，只使用了一個 token 的集合。在現實世界的中，你可能是希望包含幾個不同的用途功能，在用戶的網絡體驗中，tokens 可以直接開發不同的功能。
4.現在，終端用戶可以將他們的 tokens 加載到網站上進而享有折扣。這種技術可用於網站企業為特定系列的 tokens 持有者提供的任何特別的服務。
總結來說
在本篇，我們展示瞭如何在 React JS 項目中安裝 Token Negotiator （Brand Connect ），這使特定的 NFT 集合的所有者能夠啟用折扣或者別的專屬服務。
我們希望這篇文章能給你帶來一些啟發，並通過使用 TokenScript 的技術框架，賦能 tokens 有無限的可能性。
" TokenScript 將在 Web3 的未來為 tokens 的可組合性提供一個新的標準，在那裡，tokens 像網頁一樣無處不在，tokens 是所有權、身份和交互的主要對象。" -- CTO Weiwu
感謝閱讀
我們願景是建立一個開源的技術從而為所有人建立一個更好的網絡。
請不要介意在下方分享任何您的反饋和想法。我們將很快推出另一篇文章，來解釋鏈下 tokens 的使用，這些 tokens 是使用加密技術設計的，但無需使用學習區塊鏈。
相關鏈接：
歡迎加入深潮 TechFlow 官方社群
Telegram 訂閱群：https://t.me/TechFlowDaily
Twitter 官方帳號：https://x.com/TechFlowPost
Twitter 英文帳號：https://x.com/BlockFlow_News
Smart Token Labs 中文爱好者
