L’exemple Dapplet × NEAR est un Dapplet (une application d’augmentation) qui peut analyser les publications Twitter et les stocker dans le contrat NEAR. Il peut également afficher vos tweets enregistrés sur la page de superposition.
1. Introduction
Dapplets – applications qui interagissent avec les pages Web, les augmentent en insérant différents widgets, analysent les données des pages et ajoutent de nouvelles fonctionnalités. Ils peuvent améliorer l’expérience utilisateur lors de l’utilisation des médias sociaux, des services vidéo et d’autres sources.
Les dapplets utilisent l’extension que nous créons. Cette extension donne une API simple pour les développeurs de dapplets et de grandes capacités pour la communauté dapplets. Notre plateforme est décentralisée. Nous utilisons les réseaux NEAR et Ethereum pour nos registres et nos contrats. Nous utilisons également des stockages décentralisés, comme Swarm, IPFS et SIA pour héberger le code des dapplets et le multimédia.
Pour utiliser notre plate-forme dans un premier temps, vous devez installer l’extension Dapplets. Actuellement, il est au stade alpha et n’est pas publié sur Google Chrome ni sur aucun autre magasin. Pour l’installer, suivez ces étapes :
- Ouvrez l’un des navigateurs suivants : Google Chrome, Firefox, Brave, Tor.
Les étapes suivantes sont décrites pour Google Chrome. Les étapes peuvent différer dans d’autres navigateurs.
- Téléchargez l’extension de navigateur Dapplets.
- Ouvrez chrome://extensions dans un nouvel onglet.
- Activez le mode développeur et appuyez sur F5 pour actualiser la page.
- Faites glisser et déposez le fichier téléchargé dans la page des extensions. L’extension s’installera automatiquement.
- Cliquez sur l’icône d’extension Dapplets dans la barre d’extension. Essayez Dapplet × NEAR exemple dapplet.
2. Tutoriel
Étudions comment fonctionne ce dapplet et pourquoi Dapplet est une plate-forme NEAR conviviale.
Le but de cet exemple est de montrer l’interaction entre NEAR et Dapplet. S’il s’agit de votre première rencontre avec les Dapplet, nous vous recommandons d’essayer d’abord notre documentation. Il contient plusieurs exercices qui expliquent comment créer des dapplets et des adaptateurs, des plus simples aux plus complexes. Nous vous recommandons fortement de parcourir les exemples ex01 et ex04 qui décrivent comment créer les dapplets et les dapplets les plus basiques avec une superposition. Les connaissances que vous obtiendrez faciliteront la compréhension de l’exemple actuel.
Le code initial de cet exemple se trouve dans une branche distincte : exercice
Vous pouvez cloner ce dépôt. Cela ne fonctionnera pas directement. Essayez les étapes suivantes pour le démarrer.
Regardons la structure. Il y a trois composants : dapplet, overlay et contract.
Dapplet est le point d’entrée de l’application. Il utilise des adaptateurs pour l’interaction avec les pages Web, définissant des contextes à augmenter et des widgets à insérer. Vous pouvez trouver les fonctions de base de l’extension à l’intérieur d’un dapplet. Nous utilisons TypeScript dans notre projet.
Nous définissons Overlay comme un endroit où un utilisateur peut faire quelque chose avec des données analysées, se connecter aux fonctions principales de dapplet via le pont de dapplet et gérer les paramètres d’augmentation. Il s’agit d’une partie importante de l’application, mais elle s’exécute dans un autre environnement et est publiée en tant qu’ensemble séparé. Dans la plupart des cas, nous utilisons React comme l’un des frameworks les plus populaires. Mais vous pouvez utiliser un framework que vous préférez ou du pur JavaScript ou TypeScript.
Le contrat ne se connecte pas directement avec d’autres modules et peut être situé à l’extérieur du dapplet. Cependant, ce simple contrat NEAR est créé spécifiquement pour ce dapplet. C’est pourquoi il est pratique de le placer dans la structure de l’application.
Regardons chaque module.
2.1. Dapplet
Regardez le fichier /dapplet/src/index.ts.
Au début, nous créons une classe injectable avec le décorateur @Injectable et utilisons @Inject pour ajouter l’adaptateur Twitter en tant que variable de classe d’adaptateur. Créez également une méthode d’activation. Il s’exécute lorsque l’adaptateur sélectionné trouve un contexte spécifique et se charge. Il contiendra toute la logique principale.
Ajoutez le bouton à chaque tweet. Mettez ce code pour activer :
Regardez le code. Nous obtenons le bouton widget de l’adaptateur. Ensuite, exécutez la méthode de l’adaptateur attachConfig. Il reçoit un objet avec les noms de contextes, qui seront utilisés, comme clés. Les valeurs sont des fonctions qui reçoivent le contexte analysé comme seul argument et renvoient un widget ou un tableau de widgets. Vous pouvez également retourner null, false ou undefined.
Widget est une fonction qui reçoit un objet composé d’états de widget. Les paramètres d’état sont décrits dans la documentation des adaptateurs. Vous pouvez trouver la documentation de l’adaptateur Twitter ici. Dans notre cas, nous ajoutons une image au bouton et à l’info-bulle. exec est une fonction qui s’exécute lorsque vous cliquez dessus. Maintenant, nous montrons simplement le contexte analysé dans la console.
Exécutez le dapplet :
⚠️ Étant donné que le navigateur bloque les pages contenant des certificats de sécurité problématiques, accédez à https://localhost:3001/dapplet.json lorsque l’application est en cours d’exécution et acceptez de l’exécuter en mode non sécurisé.
Ouvrez l’extension. Accédez à l’onglet Développeur et activez le serveur de développement : https://localhost:3001/dapplet.json.
Activez l’onglet Dapplets. Vous verrez le badge de développement NEAR de notre dapplet. Allume ça.
Vous pouvez maintenant voir des boutons supplémentaires sur nos tweets. Cliquez sur le bouton et ouvrez la console. Vous verrez le contexte analysé du tweet.
Vous l’avez fait ! Toutes nos félicitations!!! Revenez au code.
Nous voulons montrer les données analysées non pas dans la console mais aux utilisateurs. Nous utiliserons une superposition pour cela. Mais avant d’implémenter la superposition, ajoutez la logique d’interaction entre le dapplet et la superposition au dapplet.
Modifions notre code. Ajoutez une variable de classe privée _overlay de type any. Dans l’activation, ajoutez le code suivant :
La fonction principale Core.overlay (les problèmes de frappe seront bientôt corrigés) reçoit un objet avec un nom de l’overlay et un titre d’overlay et renvoie l’objet Overlay que nous sauvegardons dans la variable _overlay.
Ajoutons la méthode openOverlay à la classe :
Dans cet exemple, nous appelons la méthode send the overlay. Il prend deux arguments : le nom de ces données et les données à envoyer à l’overlay.
Ajoutez openOverlay à la fonction exec et transmettez le contexte analysé à la superposition. Voici le code actuel du dapplet :
Ouvrez le manifeste ./dapplet/dapplet.json.
⚠️ Étant donné que le navigateur bloque les pages contenant des certificats de sécurité problématiques, accédez à https://localhost:3000 lorsque l’application est en cours d’exécution et acceptez de l’exécuter en mode non sécurisé.
Ici, nous voyons l’URL de l’overlay nommé ‘overlay’ qui sera utilisé en mode développeurs. Lors de la publication du dapplet dans le registre, la superposition sera publiée dans le stockage décentralisé.
Nous voyons également l’adaptateur Twitter dans les dépendances. Nous utilisons la version 0.9.0 dans l’exemple.
Passons à l’ overlay.
2.2. Overlay
Comme nous l’avons mentionné précédemment, la superposition peut être créée comme vous le souhaitez. Nous utilisons React dans la plupart de nos projets. Nous n’analyserons pas l’intégralité du code d’overlay, mais uniquement les points importants pour nos aspects architecturaux.
Pour interagir avec le dapplet, installez le package npm @dapplet/dapplet-overlay-bridge :
Pour obtenir les données du dapplet, nous avons besoin de la classe Bridge dans la partie overlay. Regardez le module ./overlay/src/dappletBridge.ts. Voici la méthode onData où nous souscrivons à l’événement ‘data’, que nous avons décrit dans le dapplet.
Ensuite, nous l’utilisons dans le module App.tsx.
Enregistrez maintenant les modifications et rechargez la page Twitter. Lorsque vous cliquez sur le bouton, vous verrez la superposition avec les données de tweet sélectionnées.
C’est super! Mais notre objectif est de sauvegarder ces données dans la chaîne NEAR et de les récupérer. Voyons donc le contrat.
2.3. NEAR smart contract
Regardez le e module ./contrat. Il existe un simple contrat intelligent NEAR écrit en AssemblyScript avec create-near-app.
Dans ./contract/assembly/index.ts, nous voyons un PersistentUnorderedMap nommé tweetsByNearId. Il stocke un tableau de données de tweets sérialisés avec l’ID utilisateur actuel. Il a des méthodes pour enregistrer, supprimer et récupérer les tweets enregistrés.
Vous pouvez trouver toutes les données nécessaires sur la façon d’écrire, de tester et de déployer des contrats intelligents NEAR dans la documentation officielle et les cours et guides Learn NEAR.
Voyons comment se connecter au contrat intelligent et utiliser ses méthodes dans le dapplet.
Ajoutez le code suivant à la méthode activate du module ./dapplet/src/index.ts :
Il existe une méthode Core.contract qui reçoit 3 paramètres : le nom du réseau (“near” ou “etherium”), le nom du contrat et l’objet avec les méthodes de visualisation et de modification.
Nous allons maintenant rendre les méthodes de contrat disponibles dans la superposition. Afin de transmettre les méthodes via le pont dapplets, ajoutez une fonction d’écoute à l’appel de superposition. N’ayez pas peur, copiez et collez simplement ce code🙂
Les trois dernières fonctions asynchronies passent nos méthodes de contrat à l’overlay. Les quatre premières fonctions doivent associer le portefeuille au dapplet. Pour obtenir l’objet Wallet, nous utilisons la méthode Core.wallet, avec des paramètres nommés name (near ou ethereum) et network. Le portefeuille a les méthodes isConnected, connect, disconnect et paramètre accountId.
L’étape suivante consiste à modifier ./overlay/src/dappletBridge.ts. Nous devons rendre les fonctions décrites dans le dapplet, disponibles dans l’overlay. Copiez le code suivant dans la classe Bridge :
Nous pouvons maintenant utiliser des méthodes de contrat dans les modules de superposition. Nous pouvons autoriser le dapplet avec le portefeuille NEAR testnet et enregistrer les données des tweets sélectionnés dans le contrat intelligent. Nous pouvons également voir nos données enregistrées dans la superposition.
Désengagez tout le code validé dans le fichier ./overlay/src/App.tsx. Enregistrez les modifications et rechargez la page Twitter.
Une cerise sur le gâteau sera l’ajout de la possibilité d’afficher les tweets enregistrés sans en analyser les nouveaux. Pour ce faire, il suffit d’ajouter la méthode Core.onAction à l’activate dans ./dapplet/src/index.ts et de lui passer la fonction d’ouverture de l’overlay.
Vous verrez maintenant l’icône d’accueil près du nom des dapplets.
Un clic sur le bouton ouvre une superposition avec les tweets enregistrés.
Félicitations à tous ceux qui sont arrivés à la fin du tutoriel ! Nous espérons qu’il a été couronné de succès.
Voici le résultat : dapplets-near-example
Si quelque chose n’a pas fonctionné pour vous, ou si vous avez encore des questions, vous êtes les bienvenus sur nos chats dans Discord et Telegram.
Merci pour votre temps. Nous espérons que ces nouvelles connaissances seront utiles et que vous continuerez à développer des applications impressionnantes et réussies sur la plate-forme Dapplet en utilisant les capacités du protocole NEAR 🚀✨
Contacts:
Web: dapplets.org
Docs: docs.dapplets.org
GitHub: github.com/dapplets
Discord: discord.gg/YcxbkcyjMV
Telegram: t.me/dapplets
Twitter: @dappletsproject
