Libérez le potentiel de votre site web grâce aux NFT
TechFlow SélectionTechFlow Sélection
Libérez le potentiel de votre site web grâce aux NFT
Comment intégrer Brand Connect à un site web afin de construire votre premier réseau d'applications tokenisé ? (TAPP – terme que nous avons inventé et utilisons en interne)
Dédié à des analyses Web3 approfondiesToken Negotiator (Brand Connect) est un nouveau produit technique développé par Smart Token Labs sur la base du cadre TokenScript. En tant que package NPM entièrement open source, il permet à n'importe quel site web d'effectuer des attestations (preuves de validation) de tokens, qu'elles soient on-chain ou off-chain.
Lien : https://www.npmjs.com/package/@tokenscript/token-negotiator
Cet article vise à montrer comment intégrer Brand Connect dans un site web afin de construire votre première application web tokenisée (TAPP — un terme que nous utilisons en interne). Au cours de ce processus, nous utiliserons la bibliothèque React, largement répandue, pour illustrer comment connecter les tokens aux expériences et opérations sur différents réseaux.
Afin de tirer le meilleur parti de cet article, commençons par présenter sous forme de questions-réponses quelques concepts fondamentaux et termes techniques utilisés.
Qu'est-ce qu'un token ?
Tous les tokens mentionnés ici désignent des NFT (jetons non fongibles émis sur une blockchain) ou des jetons cryptographiques non falsifiables (non reproductibles), dont l’actif est principalement stocké dans la mémoire d’un appareil, un e-mail ou un protocole de stockage décentralisé.
Ces types de tokens peuvent représenter n’importe quel élément numérique : clé de voiture, billet de concert, œuvre d’art ou encore votre identité (DID). De nombreuses autres applications restent encore à explorer.
Qu’est-ce qu’un réseau tokenisé ?
Un réseau tokenisé est une innovation centrée sur l’expérience utilisateur où le token joue un rôle central.
Qu’est-ce qu’une attestation (validation) ?
Une attestation est une preuve ou un témoignage confirmant un fait. Par exemple, à l’aéroport, vous devez présenter un passeport valide et un billet d’avion pour prouver que vous êtes autorisé à embarquer. Ce même concept s’applique aux réseaux tokenisés : la propriété d’un token peut être vérifiée via une attestation avant toute action ultérieure.
Pourquoi envisager d’utiliser des tokens ?
Les tokens ne sont pas limités à un cas d’usage spécifique ni dépendants d’un service centralisé.
Les tokens peuvent être authentifiés et utilisés partout.
Les tokens offrent des niveaux de sécurité et de confidentialité décentralisés.
Par rapport aux services centralisés, les tokens donnent plus de contrôle à l'utilisateur.
L’adoption des tokens ouvre la voie à une nouvelle forme d’internet, réduisant les frictions actuelles et facilitant l’accès aux services pour les utilisateurs.
Existe-t-il des alternatives ?
Les services web traditionnels (communément appelés Web 2.0) proposent divers moyens d’obtenir des solutions similaires à celles permises par les tokens (par exemple, créer une preuve utilisable dans plusieurs domaines avec certaines barrières d'accès). Toutefois, ce que nous allons révéler ici élargira votre imagination vers un nouveau paradigme, offrant bien davantage de possibilités et de fonctionnalités que le web actuel.
Quels sont les risques liés à l’utilisation (ou non-utilisation) des tokens ?
Les réseaux tokenisés sont un concept assez récent, et beaucoup reste à apprendre et à développer pour comprendre pleinement leur potentiel ainsi que les risques associés à cette technologie.
À ce jour, nous avons constaté que l'utilisation de tokens présente moins de risques pour les utilisateurs soucieux de la sécurité de leurs identifiants, ainsi que pour les entreprises recherchant des solutions adaptées.
Quels sont les avantages ?
Pour les entreprises, posséder une collection de NFT permet d’atteindre de nouveaux publics auparavant inaccessibles.
Pour les utilisateurs, pouvoir utiliser les mêmes tokens sur plusieurs applications réduit considérablement les frictions liées à l’autorisation d’accès aux services.
Pour les développeurs, cela permet de concevoir de nouvelles applications où la propriété de tokens devient un bloc de construction fondamental pour de nouvelles expériences numériques.
Très bien, passons maintenant au concret !
Commencez par installer une nouvelle application React à l’aide de la commande suivante :
npx create-react-app my-app
Une fois terminé, changez de répertoire :
cd my-app
Puis lancez :
npm run start
Vous devriez maintenant voir apparaître ceci :
Maintenant, installons Token Negotiator (Brand Connector) avec la commande suivante :
npm i @tokenscript/token-negotiator
« tokenContextProvider.js » comme indiqué dans le répertoire de l'application ci-dessous.
Une fois l'installation terminée, nous pouvons charger des tokens dans la page. Créez ensuite un fichier nommé « tokenContextProvider.js » dans votre répertoire, comme indiqué dans l’arborescence suivante :
Dans ce fichier, nous configurerons la bibliothèque via l’API ContextProvider de React, qui fournira les tokens aux composants via les props.
Ajoutez le contenu suivant dans ce nouveau fichier :
Veuillez consulter le lien original pour le code.
Modifiez l’adresse du contrat '0x264...' et la chaîne 'rinkeby' pour qu’elles correspondent à l’adresse du contrat intelligent et à l’emplacement de votre NFT. Si vous ne possédez pas de NFT, il existe plusieurs façons d’en créer un sur un réseau de test, avec ou sans code, par exemple via OpenSea.
issuers: [
{
collectionID: "demo-tokens",
contract: '0x26472AA24D795AbcB687bddb44d733ef55Ebdf09',
chain: 'rinkeby'
}
]
Une fois que vous possédez un NFT et que Token Negotiator est configuré, nous devons apporter quatre modifications supplémentaires pour permettre à la bibliothèque de lire les tokens de l’utilisateur.
Ensuite, dans « App.js », effectuez les modifications suivantes : importez la bibliothèque et injectez un composant overlay marqué avec la classe CSS « overlay-tn ».
Créez ensuite un nouveau composant nommé « StoreFront.js », qui affichera la liste des produits en vente.
Veuillez consulter le lien original pour le code.
Enfin, créez un nouveau composant nommé « StoreItem.js », qui servira à afficher les données de chaque produit en boutique.
Étape de configuration : adaptation requise pour Create-React-App / webpack 5, ou transition directe vers notre version complète préexistante.
À partir de la version 5 de Webpack, les polyfills Node.js ne sont plus fournis par défaut ; les développeurs doivent désormais importer explicitement ceux dont ils ont besoin. Cela affecte de nombreux projets, y compris Create-React-App. Heureusement, une solution existe :
https://www.alchemy.com/blog/how-to-polyfill-node-core-modules-in-webpack-5?ref=hackernoon.com
Alternativement, si vous souhaitez ignorer cette étape, vous pouvez passer directement à l'exemple complet disponible à l'adresse suivante :
https://github.com/TokenScript/token-negotiator-examples/tree/main/art-gallery-medium-article-website?ref=hackernoon.com
Parfait, la configuration est maintenant terminée. Testons l’application : lorsque vous lancerez le serveur, vous verrez ceci :
Dans le répertoire du projet, exécutez en ligne de commande :
npm run start
1. En cliquant sur le bouton FAB du composant Token Negotiator, toutes les informations nécessaires à la configuration autour de l’utilisation des tokens s’affichent.
2. L’utilisateur final doit ensuite connecter son portefeuille pour localiser ses tokens.
3. L’utilisateur peut ensuite choisir quels ensembles de tokens charger sur le site. Dans cet exemple, un seul ensemble est utilisé. En situation réelle, vous pourriez vouloir inclure plusieurs collections, permettant aux tokens d’activer différentes fonctionnalités selon l’expérience web de l’utilisateur.
4. L’utilisateur peut désormais charger ses tokens sur le site pour bénéficier d’une réduction. Cette technologie peut être utilisée par toute entreprise web souhaitant offrir des services spéciaux à certains détenteurs de collections de tokens.
En résumé
Dans cet article, nous avons montré comment installer Token Negotiator (Brand Connect) dans un projet React JS, permettant ainsi aux détenteurs d'une collection spécifique de NFT de bénéficier de réductions ou d'autres services exclusifs.
Nous espérons que cet article vous a inspiré et que l’utilisation du cadre technique TokenScript donnera vie à des possibilités infinies pour les tokens.
« TokenScript posera un nouveau standard pour la composable des tokens dans le futur du Web3, où les tokens seront aussi omniprésents que les pages web, devenant les objets principaux de propriété, d’identité et d’interaction. » — CTO Weiwu
Merci d’avoir lu
Notre vision est de construire une technologie open source afin de créer un meilleur web pour tous.
N’hésitez pas à partager vos retours et idées ci-dessous. Nous publierons bientôt un nouvel article expliquant l’utilisation des tokens hors chaîne (off-chain), conçus avec des technologies cryptographiques mais sans nécessiter la maîtrise de la blockchain.
Liens utiles :
Bienvenue dans la communauté officielle TechFlow
Groupe Telegram :https://t.me/TechFlowDaily
Compte Twitter officiel :https://x.com/TechFlowPost
Compte Twitter anglais :https://x.com/BlockFlow_News
Smart Token Labs 中文爱好者
