Obyte.js einfach erklärt

Mit obyte.js kannst du direkt im Browser mit dem Obyte-Netzwerk kommunizieren.

In diesem Beitrag zeigen wir dir den schnellen Einstieg – also let’s go! 🚀

Inhaltsverzeichnis

Was ist obyte.js?
Einbindung im Browser
Erstes Beispiel: Saldo einer Adresse
Praxisbeispiel: Taschengeld-AA prüfen
Fazit

Was ist obyte.js?

obyte.js ist die offizielle JavaScript-Bibliothek für Entwickler, die Obyte in ihre Anwendungen integrieren wollen.
Sie bündelt die wichtigsten Funktionen des Netzwerks in einer handlichen API:

Salden abfragen (getBalances)
Historien anzeigen (getHistory)
Transaktionen versenden (postJoint)

Damit liefert obyte.js die Basis, um eigene Web-Apps, Tools oder DApps rund um Obyte zu entwickeln.

Einbindung im Browser

Am einfachsten nutzt du obyte.js, indem du die Bibliothek direkt über ein CDN lädst.

So kannst du ohne Installation sofort im Browser starten:

<script src="https://cdn.jsdelivr.net/npm/obyte"></script>

Damit bindest du obyte.js wie jede andere JavaScript-Bibliothek ein. Danach steht dir das globale Objekt obyte zur Verfügung, über das du eine Verbindung zu einem Obyte-Hub aufbauen und die API-Funktionen nutzen kannst.

Der erster Schritt ist das Erstellen eines Clients:

Verbindung ins Mainnet

const client = new obyte.Client("wss://obyte.org/bb");

Dieser Client verbindet sich mit dem offiziellen Hub des Obyte-Mainnets.

Verbindung ins Testnet

const client = new obyte.Client("wss://obyte.org/bb-test");

Mit dieser URL bist du im Obyte-Testnet unterwegs – perfekt, um mit Faucet-Coins und Demo-Accounts gefahrlos zu experimentieren.

Ab hier kannst du Methoden wie getBalances() oder getHistory() aufrufen, um Daten zu laden – oder eigene Funktionen schreiben, die im Hintergrund mit dem Obyte Netzwerk kommunizieren.

Erstes Beispiel: Saldo einer Adresse

Fangen wir mit einem ganz einfachen Beispiel an:
Wir fragen den Saldo einer Adresse ab und geben das Ergebnis im Browser aus.

👉 Lege dazu eine neue Datei balance.html an und füge folgenden Inhalt ein:

<html>
<head>
  <title>Obyte.js Example</title>
  <!-- Wir binden obyte.js über das CDN ein -->
  <script src="https://cdn.jsdelivr.net/npm/obyte"></script>
</head>
<body>
  <h1>Balance</h1>
  <!-- Hier wird später die Ausgabe angezeigt -->
  <pre id="output"></pre>

  <script>
    // Verbindung zum Mainnet herstellen
    const client = new obyte.Client("wss://obyte.org/bb");

    // Funktion zum Abfragen des Kontostands
    async function getBalance() {

      // Adresse eintragen
      const address = "ADRESSE";

      // Salden für diese Adresse vom Netzwerk holen
      const balances = await client.api.getBalances([address]);

      // Ausgabe der Salden in den <pre>-Bereich einfügen
      document.getElementById("output").innerText =
        JSON.stringify(balances[address], null, 2);
    }

    // Die Funktion direkt nach Laden der Seite aufrufen
    getBalance();
  </script>
</body>
</html>

💡 Hinweis
Ersetze ADRESSE mit einer gültigen Obyte-Adresse (Mainnet).

Zum Testen einfach die Datei balance.html in einem beliebigen Browser öffnen. 🚀

Ergebnis / Ausgabe

Auf dieser Adresse liegen 1.000 Bytes.

Praxisbeispiel: Taschengeld-AA prüfen

Im Artikel Dein erster Autonomer Agent haben wir schon das Szenario von Vater Michael und seinen vier Kindern durchgespielt.

Jetzt bauen wir ein Frontend, mit dem wir die Guthabenstände der Kinder direkt im Browser anzeigen können.

💡 Hinweis
Da wir den Taschengeld-AA im Testnet gebaut haben, wechseln wir jetzt auch hier ins Testnet. Verwende dafür die Adresse des Testnet-Hubs: wss://obyte.org/bb-test

<html>
<head>
  <title>Obyte.js Pocket Money AA</title>
  <!-- Wir binden obyte.js über das CDN ein -->
  <script src="https://cdn.jsdelivr.net/npm/obyte"></script>
</head>
<body>
  <h1>Children’s balances</h1>
  <!-- Hier werden später die Ergebnisse angezeigt -->
  <pre id="output"></pre>

  <script>
    // Verbindung zum Testnet herstellen
    const client = new obyte.Client("wss://obyte.org/bb-test");

    // Array mit den Adressen der vier Kinder
    const children = [
      "ADRESSE_KIND_1",
      "ADRESSE_KIND_2",
      "ADRESSE_KIND_3",
      "ADRESSE_KIND_4"
    ];

    // Funktion, um die Salden für alle Kinder abzufragen
    async function getBalances() {

      // Anfrage an das Netzwerk: hole Balances für alle Kinder-Adressen
      const balances = await client.api.getBalances(children);

      // Variable für die formatierte Ausgabe vorbereiten
      let out = "";

      // Für jede Kinder-Adresse den Kontostand hinzufügen
      children.forEach((addr, i) => {
        out += `Child ${i+1} (${addr}):\n` +
               JSON.stringify(balances[addr], null, 2) + "\n\n";
      });

      // Ausgabe im <pre>-Bereich darstellen
      document.getElementById("output").innerText = out;
    }

    // Die Funktion direkt beim Laden der Seite aufrufen
    getBalances();
  </script>
</body>
</html>

💡 Hinweis
Ersetze ADRESSE_KIND_1 bis ADRESSE_KIND_4 mit den Adressen deiner Kinder-Accounts.

Ergebnis / Ausgabe

Auf jeder Adresse liegen 2.750 Bytes.

Fazit

Mit obyte.js hast du jetzt die Grundlage kennengelernt, um Daten aus dem Obyte-Netzwerk direkt ins Web zu holen.
Vom einfachen Saldo-Check bis zum Taschengeld-Agenten siehst du: Schon mit wenig Code kannst du spannende Dinge bauen.

👉 Probier’s selbst aus: Starte im Testnet, experimentiere mit den Funktionen – und wenn alles läuft, bring deine Ideen ins Mainnet.

obyte.js ist dein Schlüssel, um eigene DApps, Tools oder Schnittstellen rund um Obyte zu entwickeln. 🚀

Mehr erfahren:

A pure and powerful JavaScript Obyte library – https://obytejs.com ↗