Beispiel für Dapplets × NEAR

To Share and +4 nLEARNs

Das Beispiel für Dapplets × NEAR ist ein Dapplet (eine Augmentation-App), die Twitter-Posts analysieren und im NEAR-Contract speichern kann. Die App kann auch Deine gespeicherten Tweets auf der Overlay Seite anzeigen.

1. Einleitung

Dapplets – applications that interact with web-pages, augment them by inserting different widgets, parse the pages’ data and add some new functionalities. They can improve the user experience when using social media, video services and other sources.

Dapplets use the extension we are creating. This extension gives a simple API for dapplets developers and big abilities for the dapplets community. Our platform is decentralized. We use NEAR and Ethereum networks for our registries and contracts. We also use decentralized storages, like Swarm, IPFS and SIA for hosting dapplets code and multimedia.

To use our platform at first you need to install the Dapplets Extension . Currently it’s in the alpha-stage and is not published to Google Chrome or any other store. To install it follow this steps:

Öffne einen der folgenden Browser: Google Chrome, Firefox, Brave, Tor.

Die folgenden Schritte sind für Google Chrome beschrieben. Bei anderen Browsern können die Schritte abweichen.

Lade die Dapplets Browser Extension herunter.
Öffne chrome://extensions in einem neuen Tab.
Schalte den Developer Modus ein und drücke F5, um die Seite zu aktualisieren.
Ziehe die heruntergeladene Datei per Drag & Drop auf die Extensions-Seite. Wenn Du Ubuntu oder ein anderes Linux-Betriebssystem verwendest, kann die Dapplets-Extension nach einem Neustart des PCs aus den Chrome-Extensions verschwinden. Um dies zu vermeiden, unzippe das Archiv und verwende den Button Load unpacked, um die Extension hinzuzufügen.
Klicke auf das Symbol für die Dapplets-Extension in der Extension Bar. Probiere Dapplets × NEAR example Dapplet.

2. Leitfaden

Lasst uns untersuchen, wie dieses Dapplet funktioniert und warum Dapplets eine NEAR-freundliche Plattform sind.

Das Ziel dieses Beispiels ist es, die Interaktion zwischen NEAR und Dapplets zu zeigen. Wenn dies Deine erste Begegnung mit Dapplets ist, empfehlen wir Dir, zunächst unsere Dokumentation zu diesem Thema zu lesen. Sie enthält mehrere Übungen, die erklären, wie man Dapplets und Adapter erstellt, von einfachen bis hin zu komplexen Dapplets. Wir empfehlen Dir, die Beispiele ex01 und ex04 durchzugehen, die beschreiben, wie man die einfachsten Dapplets sowie Dapplets mit einem Overlay erstellt. Durch das dabei erlangte wissen wird es dir leichter fallen, das aktuelle Beispiel zu verstehen.

Der ursprüngliche Code für dieses Beispiel befindet sich in einem separaten Branch: exercise.

Du kannst dieses Repo klonen. Es wird nicht direkt funktionieren. Versuche die folgenden Schritte, um es zu starten.

Schauen wir uns die Struktur an. Es gibt drei Komponenten: Dapplet, Overlay und Contract.

Das Dapplet ist der Einstiegspunkt der Anwendung. Es verwendet Adapter für die Interaktion mit Webseiten, definiert Kontexte zum Erweitern und Widgets um etwas einzufügen. Die Kernfunktionen der Extension sind in einem Dapplet zu finden. Wir verwenden TypeScript in unserem Projekt.

Wir definieren Overlay als einen Ort, an dem ein Benutzer etwas mit den parsed Daten tun kann. Außerdem kann eine Verbindung zu den Kernfunktionen des Dapplets über die Dapplet-Bridge hergestellt und Augmentierungs Parameter verwaltet werden. Es ist ein wichtiger Teil der Anwendung, aber dieser Teil läuft in einer anderen Umgebung und wird als separates Bundle veröffentlicht. In den meisten Fällen verwenden wir React. Es ist eines der beliebtesten Frameworks. Du kannst aber auch ein Framework Deiner Wahl oder reines JavaScript oder TypeScript verwenden.

Der Contract ist nicht direkt mit anderen Modulen verbunden und kann sich auch außerhalb des Dapplets befinden. Dieser einfache NEAR Contract wurde jedoch speziell für dieses Dapplet erstellt. Deshalb ist es praktisch, ihn in der Anwendungsstruktur zu platzieren.

Schauen wir uns die einzelnen Module an.

2.1. Dapplet

Schauen wir uns folgendes an: /dapplet/src/index.ts.

Zuerst erstellen wir eine Injectable Class mit dem Decorator @Injectable und verwenden @Inject, um den Twitter Adapter als Adapter Class Variable hinzuzufügen. Außerdem erstellen wir eine activate method. Sie wird ausgeführt, wenn der ausgewählte Adapter einen bestimmten Kontext findet und geladen wird. Die active method wird die gesamte main logic enthalten.

Füge diesen Button zu jedem Tweet hinzu und den folgenden Code zum Aktivieren ein:

Sieh Dir den Code an. Wir erhalten den Widget-Button vom Adapter. Dann führen wir die Method attachConfig des Adapters aus. Sie empfängt ein Objekt mit den Namen der Kontexte, die verwendet werden sollen als Keys. Werte sind Funktionen, die den geparsten Kontext als einziges Argument erhalten und ein Widget oder ein Array von Widgets zurückgeben. Sie können auch null, false oder undefined zurückgeben.

Das Widget ist eine Funktion, die ein Objekt empfängt, das aus Widget-states besteht. Status Parameter sind in der Dokumentation des Adapters beschrieben. Die Dokumentation zum Twitter Adapter findest Du Hier. In unserem Fall fügen wir dem Button und dem Tooltip ein Bild hinzu. Exec ist eine Funktion, die beim Anklicken ausgeführt wird. Jetzt zeigen wir einfach den geparsten Kontext in der Konsole an.

Starte das Dapplet:

⚠️ Da der Browser Seiten mit problematischen Sicherheitszertifikaten blockiert, geh zu https://localhost:3001/dapplet.json, wenn die Anwendung läuft, und stimme der Ausführung im unsicheren Modus zu.

Öffne die Extension. Geh auf den Developer Tab und schalte den Development Server ein: https://localhost:3001/dapplet.json.

Schalte die Registerkarte Dapplets ein. In der Nähe unseres Dapplets siehst Du das Dev-Badge. Schalte es ein.

Jetzt siehst Du zusätzliche Buttons auf unseren Tweets. Klicke auf den Button und öffne die Konsole. Du wirst nun den geparsten Kontext des Tweets sehen.

Du hast es geschafft! Herzlichen Glückwunsch!!! Gehe nun zurück zum Code.

Wir wollen die geparsten Daten nicht in der Konsole, sondern für die Benutzer anzeigen. Hierfür werden wir ein Overlay verwenden. Aber bevor wir das Overlay implementieren, fügen wir die Interaction Logic zwischen dem Dapplet und dem Overlay zum Dapplet hinzu.

Dafür ändern wir unseren Code. Füge die private Class Variable _overlay of type any hinzu. Anschließend ergänze im activate den folgenden Code:

Die Kernfunktion Core.overlay (Tippfehler werden bald behoben) empfängt ein Objekt mit dem Namen des Overlay und einem Overlay Title und gibt das Overlay Object zurück, das wir in der Variable _overlay speichern.

Fügen wir der Class die Method openOverlay hinzu:

In diesem Beispiel nennen wir die Methode send the overlay. Du benötigst zwei Argumente: den Namen dieser Daten und die Daten, die an das Overlay gesendet werden sollen.

Füge openOverlay zur exec-Funktion hinzu und übergib den geparsten Kontext an das Overlay. Dies ist der aktuelle Code des Dapplets:

Öffne das Manifest ./dapplet/dapplet.json.

⚠️ Da der Browser Seiten mit problematischen Sicherheitszertifikaten blockiert, öffne https://localhost:3000, wenn die Anwendung läuft, und stimme der Ausführung im unsicheren Modus zu.

Hier sehen wir die URL des Overlays mit dem Namen “Overlay”, das im Developer Mode verwendet wird. Während der Veröffentlichung des Dapplets in der Registry wird das Overlay im dezentralen Speicher veröffentlicht.

Wir sehen auch den Twitter Adapter in den Abhängigkeiten. In unserem Beispiel verwenden wir die Version 0.9.0.

Gehen wir nun zum Overlay.

2.2. Overlay

Wie bereits erwähnt, kann das Overlay auf jede beliebige Weise erstellt werden. Wir verwenden in den meisten unserer Projekte React. Wir werden nicht den gesamten Overlay-Code analysieren, sondern nur die für unsere architektonischen Aspekte wichtigen Punkte.

Für die Interaktion mit dem Dapplet installiere das npm-Paket @dapplets/dapplet-overlay-bridge:

Um die Daten aus dem Dapplet zu erhalten, benötigen wir die Class Bridge im Overlay-Teil. Sieh Dir das Modul ./overlay/src/dappletBridge.ts an. Hier ist die onData-Methode, mit der wir das Ereignis “data” subscriben, das wir im Dapplet beschrieben haben.

Dann verwenden wir es im Modul App.tsx.

Speichere nun die Änderungen und lade die Twitter-Seite neu. Wenn Du auf den Button klickst, siehst Du das Overlay mit den ausgewählten Tweet-Daten.

Das ist schon mal super! Aber unser Ziel ist es, diese Daten in der NEAR-Blockchain zu speichern und sie zurückzubekommen. Schauen wir uns also den Contract an.

2.3. NEAR smart contract

Sieh Dir das Modul ./contract an. Es gibt einen einfachen NEAR Smart Contract, geschrieben in AssemblyScript mit der create-near-app.

In ./contract/assembly/index.ts sehen wir eine PersistentUnorderedMap namens tweetsByNearId. Sie speichert ein Array von serialisierten Tweets-Daten mit der aktuellen Benutzer-ID. Sie hat Methoden zum Speichern, Entfernen und Abrufen von gespeicherten Tweets.

Alle notwendigen Informationen zum Schreiben, Testen und Bereitstellen von NEAR Smart Contracts findest Du in der offiziellen Dokumentation und in den Learn NEAR Kursen und Anleitungen.

Schauen wir uns an, wie man sich mit dem Smart Contract verbindet und seine Methoden im Dapplet verwendet.

Füge den folgenden Code in die activate-Methode des Moduls

Es gibt eine Core.contract-Methode, die 3 Parameter erhält: den Namen des Networks (‘near’ oder ‘etherium’), den Contract-Namen und ein Objekt mit View- und Change-Methoden.

Jetzt werden wir die Contract-Methoden im Overlay verfügbar machen. Um die Methoden durch die Dapplets Bridge zu leiten, füge eine Listen-Funktion zum Overlay-Call hinzu. Keine Angst, einfach diesen Code kopieren und einfügen 🙂

Die letzten drei asynchronen Funktionen übergeben unsere Contract-Methoden an das Overlay. Die ersten vier Funktionen müssen die Wallet mit dem Dapplet koppeln. Um das Wallet-Objekt zu erhalten, verwenden wir die Methode Core.wallet mit den Parametern name (near oder ethereum) und network. Die Wallet hat die Methoden isConnected, connect, disconnect und den Parameter accountId.

Der nächste Schritt ist die Änderung von ./overlay/src/dappletBridge.ts. Wir müssen die Funktionen, die im Dapplet beschrieben wurden, im Overlay verfügbar machen. Kopiere den folgenden Code in die Bridge-Class:

Jetzt können wir Contract-Methoden in den Overlay-Modulen verwenden. Wir können das Dapplet mit der NEAR-Testnet-Wallet autorisieren und die Daten der ausgewählten Tweets im Smart Contract speichern. Wir können unsere gespeicherten Daten auch im Overlay sehen.

Uncommitte den gesamten committed Code in der ./overlay/src/App.tsx. Speichere die Änderungen und lade die Twitter-Seite neu.

Als Sahnehäubchen wird die Möglichkeit hinzugefügt, gespeicherte Tweets anzuzeigen, ohne neue Tweets zu parsen. Dazu genügt es, die Methode Core.onAction zu activate in ./dapplet/src/index.ts hinzuzufügen und ihr die Funktion zum Öffnen des Overlays zu übergeben.

Jetzt siehst Du das Home-Symbol neben dem Namen des Dapplets.

A click on the button opens an overlay with saved tweets.

Herzlichen Glückwunsch an alle, die es bis zum Ende des Tutorials geschafft haben! Wir hoffen, es war erfolgreich.

Hier ist das Ergebnis: dapplets-near-example

Falls etwas nicht geklappt hat oder Ihr noch Fragen habt, seid Ihr in unseren Chats in Discord und Telegram herzlich willkommen.

Wir danken Dir für Deine Zeit. Wir hoffen, dass dieses neue Wissen nützlich sein wird und du weiterhin beeindruckende und erfolgreiche Anwendungen auf der Dapplets-Plattform entwickeln wirst, indem Du die Möglichkeiten des NEAR-Protokolls nutzt 🚀✨.