Tận dụng NFT để giải phóng tiềm năng của trang web

2022.08.26

Chia sẻ đến

Tuyển chọn TechFlowTuyển chọn TechFlow

Tận dụng NFT để giải phóng tiềm năng của trang web

Làm thế nào để tích hợp Brand Connect vào trang web nhằm xây dựng mạng ứng dụng được mã hóa (tokenized) đầu tiên của bạn? (TAPP – từ mà chúng tôi tự tạo và sử dụng nội bộ)

2022.08.26 - 10:24:31

NFT

Chuyên sâu báo cáo Web3

Token Negotiator (Brand Connect) là một sản phẩm công nghệ mới do Smart Token Labs phát triển dựa trên khung TokenScript. Đây là một gói NPM mã nguồn mở hoàn toàn, cho phép bất kỳ trang web nào sử dụng để thực hiện xác thực token (attestation) trên và ngoài chuỗi.

Liên kết: https://www.npmjs.com/package/@tokenscript/token-negotiator

Bài viết này nhằm mục đích minh họa cách tích hợp Brand Connect vào một trang web để xây dựng ứng dụng mạng đầu tiên được mã hóa token (TAPP – từ mà chúng tôi tự tạo và sử dụng nội bộ). Trong quá trình này, chúng tôi sẽ sử dụng thư viện React phổ biến rộng rãi để minh họa cách kết nối trải nghiệm và thao tác token giữa các mạng khác nhau.

Để đảm bảo bạn có thể thu được giá trị tối đa từ bài viết này, trước tiên hãy cùng tìm hiểu một số khái niệm cơ bản và thuật ngữ chuyên môn thông qua hình thức hỏi - đáp.

Token là gì?

Tất cả các token được nhắc đến trong bài viết này đều đề cập đến NFT (token không đồng nhất được phát hành trên blockchain) hoặc các token được mã hóa, không thể làm giả (sao chép), chủ yếu được lưu trữ trong bộ nhớ thiết bị, email hoặc giao thức lưu trữ mạng.

Các loại token này có thể đại diện cho mọi thứ dưới dạng kỹ thuật số như chìa khóa xe hơi, vé concert, tác phẩm nghệ thuật hoặc danh tính của bạn (DID). Ngoài ra, còn rất nhiều khả năng tiềm tàng khác đang chờ được khám phá.

Mạng được mã hóa token là gì?

Mạng được mã hóa token là một ý tưởng đổi mới lấy trải nghiệm người dùng xoay quanh token làm trục chính.

Attestation (xác thực/chứng nhận) là gì?

Attestation là bằng chứng hoặc chứng minh cho một điều gì đó. Ví dụ, tại sân bay bạn cần xuất trình hộ chiếu và vé máy bay hợp lệ để chứng minh rằng bạn đủ điều kiện đi máy bay. Khái niệm tương tự cũng áp dụng trong môi trường mạng được mã hóa token: quyền sở hữu token có thể được xác minh thông qua attestation để thực hiện các thao tác tiếp theo.

Tại sao nên cân nhắc sử dụng token?

Token không bị giới hạn bởi các trường hợp sử dụng cụ thể hay dịch vụ tập trung.
Token có thể được xác thực và sử dụng ở bất cứ đâu.
Token cung cấp kiểu bảo mật và quyền riêng tư phi tập trung.
So với dịch vụ tập trung, token mang lại cho người dùng nhiều quyền kiểm soát hơn.
Việc áp dụng token có thể dẫn đến một dạng internet mới, nơi trải nghiệm tương tác giảm ma sát so với hiện tại và giúp người dùng dễ dàng tiếp cận các dịch vụ họ cần.

Có giải pháp thay thế nào không?

Các dịch vụ web truyền thống (gọi là Web 2.0) cung cấp nhiều phương pháp để hoàn thành các giải pháp có thể thực hiện bằng token (trải nghiệm có rào cản, tạo ra bằng chứng có thể dùng ở nhiều lĩnh vực khác nhau), tuy nhiên những gì chúng tôi tiết lộ trong bài viết này sẽ mở rộng trí tưởng tượng của bạn về một mô hình mới, có nhiều khả năng và năng lực ứng dụng hơn hẳn mạng internet mà chúng ta đang biết và sử dụng ngày nay.

Rủi ro khi sử dụng (hoặc không sử dụng) token là gì?

Mạng được mã hóa token là một khái niệm khá mới mẻ, còn rất nhiều điều cần học hỏi và xây dựng trong lĩnh vực này để hiểu rõ tiềm năng cũng như rủi ro khi sử dụng công nghệ này.

Cho đến nay, chúng tôi nhận thấy rằng việc sử dụng token an toàn hơn đối với người dùng muốn bảo vệ tính bảo mật của giấy tờ tùy thân và doanh nghiệp cần giải pháp phù hợp.

Những lợi ích là gì?

Đối với doanh nghiệp, có thể tiếp cận nhóm đối tượng mới trước đây chưa từng phát hiện hoặc tiếp cận được thông qua bộ sưu tập NFT.
Là người dùng, bạn có thể sử dụng cùng một token trên nhiều ứng dụng, giảm ma sát khi cấp quyền token cho dịch vụ mạng.
Đối với nhà phát triển, có thể xây dựng các ứng dụng mới, trong đó quyền sở hữu token trở thành khối xây dựng nền tảng thúc đẩy trải nghiệm mới.

Tốt, bây giờ hãy bắt đầu chính thức!

Trước tiên, cài đặt một ứng dụng React mới theo lệnh sau (yêu cầu):

npx create-react-app my-app

Sau khi hoàn tất, chuyển vào thư mục:

cd my-app

Sau đó chạy lệnh:

npm run start

Giờ đây bạn nên thấy nội dung như sau:

利用 NFT 释放网站的潜力

Tiếp theo, hãy cài đặt Token Negotiator (Brand Connector) bằng lệnh bên dưới.

npm i @tokenscript/token-negotiator
“tokenContextProvider.js” như hiển thị trong thư mục ứng dụng bên dưới.

Sau khi cài đặt xong, bạn có thể tải một số token lên trang. Tiếp theo, tạo một tập tin script có tên "tokenContextProvider.js" trong thư mục của bạn, theo cấu trúc thư mục ứng dụng bên dưới:

利用 NFT 释放网站的潜力

Trong tập tin này, chúng tôi sẽ cấu hình thư viện thông qua API ContextProvider của React để cung cấp token cho các component thông qua props.

Thêm nội dung sau vào tập tin vừa tạo:

Xin lỗi, mã nguồn vui lòng xem tại liên kết gốc.

Thay đổi địa chỉ hợp đồng '0x264...' và chuỗi 'rinkeby' để khớp với địa chỉ hợp đồng thông minh và vị trí của NFT mà bạn sở hữu. Nếu chưa có NFT, có nhiều cách để mint coin trên mạng thử nghiệm, một số có mã, một số không cần mã như OpenSea.

issuers: [
{
collectionID: "demo-tokens",
contract: '0x26472AA24D795AbcB687bddb44d733ef55Ebdf09',
chain: 'rinkeby'
}
]

Sau khi đã sở hữu NFT và cấu hình xong Token Negotiator, tiếp theo chúng ta cần thực hiện bốn thay đổi để thư viện có thể đọc token của người dùng.

Tiếp theo, trong "App.js", thực hiện các thay đổi sau. Kết nối thư viện và chèn một component phủ dấu hiệu (overlay) vào phần tử class "overlay-tn".

Sau đó, tạo một component mới có tên "StoreFront.js" để hiển thị danh sách sản phẩm đang bán.

Xin lỗi, mã nguồn vui lòng xem tại liên kết gốc.

Cuối cùng, tạo một component mới có tên "StoreItem.js", dùng để hiển thị dữ liệu từng sản phẩm trong cửa hàng.

利用 NFT 释放网站的潜力

Các bước cấu hình: Thay đổi dựa trên Create-React-App / webpack 5, hoặc bỏ qua và chuyển sang phiên bản hoàn chỉnh mà chúng tôi đã làm trước đó.

Trong phiên bản Webpack 5, các file cấu hình mặc định của Node.js không còn được cung cấp, yêu cầu nhà phát triển phải tự nhập các file cần thiết. Điều này ảnh hưởng đến nhiều dự án phát triển, bao gồm Create-React-App, nhưng may mắn là có giải pháp khắc phục như sau:

https://www.alchemy.com/blog/how-to-polyfill-node-core-modules-in-webpack-5?ref=hackernoon.com

Hoặc, nếu bạn muốn bỏ qua bước này, có thể chuyển đến bước phía trước và tìm mã ví dụ đầy đủ tại liên kết sau:

https://github.com/TokenScript/token-negotiator-examples/tree/main/art-gallery-medium-article-website?ref=hackernoon.com

Rất tốt, giờ đây bạn đã hoàn thành cấu hình và có thể bắt đầu kiểm thử ứng dụng: bạn sẽ thấy màn hình như sau khi chạy ứng dụng:

Trong thư mục dự án, chạy lệnh sau trên dòng lệnh:

npm run start

利用 NFT 释放网站的潜力

1. Khi nhấn vào nút fab của component Token Negotiator, nó sẽ hiển thị toàn bộ chi tiết cấu hình cần thiết liên quan đến việc sử dụng token.

利用 NFT 释放网站的潜力

2. Tiếp theo, người dùng cuối cần kết nối ví của họ để tìm thấy các token của mình.

利用 NFT 释放网站的潜力

3. Người dùng sau đó có thể chọn tải tập hợp token nào của họ lên trang web. Trong ví dụ này, chỉ sử dụng một tập hợp token. Trên thực tế, bạn có thể muốn bao gồm nhiều chức năng khác nhau, qua đó token có thể trực tiếp kích hoạt các chức năng khác nhau trong trải nghiệm mạng của người dùng.

利用 NFT 释放网站的潜力

4. Bây giờ, người dùng cuối có thể tải token của họ lên trang web để được hưởng chiết khấu. Công nghệ này có thể được sử dụng cho bất kỳ dịch vụ đặc biệt nào mà doanh nghiệp website cung cấp cho người nắm giữ các bộ token cụ thể.

利用 NFT 释放网站的潜力

Tóm lại

Trong bài viết này, chúng tôi đã minh họa cách cài đặt Token Negotiator (Brand Connect) trong một dự án React JS, cho phép chủ sở hữu các bộ NFT cụ thể được kích hoạt chiết khấu hoặc các dịch vụ độc quyền khác.

Chúng tôi hy vọng bài viết này đã truyền cảm hứng cho bạn và thông qua việc sử dụng khung công nghệ TokenScript, trao quyền cho token với vô vàn khả năng.

"TokenScript sẽ thiết lập một tiêu chuẩn mới về khả năng tổ hợp cho token trong tương lai của Web3, nơi token hiện diện khắp nơi như các trang web, và token trở thành đối tượng chính cho quyền sở hữu, danh tính và tương tác." -- CTO Weiwu

Cảm ơn bạn đã đọc

Tầm nhìn của chúng tôi là xây dựng một công nghệ mã nguồn mở nhằm tạo ra một mạng lưới tốt hơn cho tất cả mọi người.

Vui lòng đừng ngần ngại chia sẻ phản hồi và suy nghĩ của bạn ở phần bình luận bên dưới. Chúng tôi sẽ sớm ra mắt một bài viết khác giải thích việc sử dụng token ngoài chuỗi — những token được thiết kế bằng công nghệ mã hóa nhưng không cần học blockchain.