Integration eines Smart Contracts im NEAR BOS
Wir haben uns bereits angesehen, wie wir einen Smart Contract auf der NEAR Blockchain entwickeln und wie wir eine Komponente im NEAR BOS erstellen.
In diesem Tutorial sehen wir uns an, wie wir einen bereits veröffentlichen Smart Contract in einer Komponente im NEAR BOS verwenden.
Anmerkung: Wir werden hier nicht unseren eigenen Smart Contract verwenden, sondern einen Beispiel-Contract des NEAR Entwicklerteams, da wir unseren Smart Contract im Testnet veröffentlicht haben. Es ist jedoch nicht möglich, im NEAR BOS im Mainnet einen Smart Contract im Testnet zu verwenden. Unseren sehr einfachen Smart Contract im Mainnet zu veröffentlichen wäre unserer Meinung nach überflüssig, weil das Prinzip gleich ist.
1. Visual Studio Code mit NEAR BOS verbinden
Wir verwenden wieder Visual Studio Code, um unsere Komponente zu entwickeln. Dazu öffnen wir unseren Workspace und starten die “NEAR BOS IDE” und laden mit “Fetch Account Widgets” unseren NEAR BOS Account mit unseren Komponenten.
Auf die Details der “NEAR BOS IDE” gehen wir in diesem Tutorial nicht mehr ein, hierfür verweisen wir auf unser letztes Tutorial.
2. Neue Komponente erstellen
Wir erstellen eine neue Komponente. Das heißt wir erstellen eine .jsx-Datei. Wir nennen sie in unserem Fall “nearbosandsmartcontract.jsx”.
3. Smart Contract in die Komponente einbinden
Es gibt einen Smart Contract “hello” im Konto “near-examples.near”. Dieser Smart Contract stellt 2 Methoden zur Verfügung:
- get_greeting(): String, View-Methode, die die gespeicherte Begrüßung zurückgibt
- set_greeting(greeting: string): void, Change-Methode, die eine Zeichenkette (Begrüßung) als Parameter entgegennimmt und im Contract speichert.
Die Verwendung des Smart Contracts im NEAR BOS funktioniert mit dem Objekt “Near”
- Near.View: Mit dieser Methode- werden View-Methoden des Smart Contracts aufgerufen. Diese sind “read-only” und kostenlos. (Leseoperationen sind auf der NEAR Blockchain kostenlos)
- Near.Call: Mit dieser Methode werden Change-Methoden des Smart Contracts aufgerufen. Diese sind gebührenpflichtig und müssen mit einer Transaktion bestätigt werden. Daher muss man beim Aufruf der Methode mit einem NEAR Account eingeloggt sein.
Wir rufen die Methode “get_greeting” auf.
const contract = "hello.near-examples.near"
const greeting = Near.view(contract, "get_greeting");
// Render
return (
<>
<div>
<div>
Der Smart Contract "Hello" begrüßt dich mit: <b>{greeting}</b>
</div>
</div>
</>
);
Eine View-Methode hat drei mögliche Rückgabewerte:
- null: Wenn die Abfrage noch verarbeitet wird
- undefined: Wenn die Abfrage abgeschlossen ist und vom Contract kein Wert zurückgegeben wurde
- einen Wert: Wenn die Abfrage abgeschlossen ist und vom Contract ein Wert zurückgegeben wurde
4. Zustand des Smart Contracts über die Komponente verändern
Im nächsten Schritt wollen wir die Begrüßung ändern. Dies soll über eine Usereingabe erfolgen. Der User gibt über ein Eingabefeld eine neue Begrüßung ein, diese soll im Smart Contract geändert werden und in der Komponente ausgegeben werden.
Um den Zustand zu verändern, rufen wir die Change-Methode “set_greeting(greeting: string) auf.
Near.call(contract, "set_greeting", {
greeting: state.new_greeting,
});Hier kommt noch etwas dazu. Nachdem die BOS Komponente auf React.js aufbaut, können wir das Objekt “State” verwenden, um die Eingaben des Users zu speichern. Wir intialisieren die neue Begrüßung mit State.init.
State.init({ new_greeting: "" });Im Attribut “new_greeting” des State-Objekts wird die eingegebene Begrüßung vom User gespeichert.
Um die User-Eingaben entgegen zu nehmen erstellen und die Begrüßung im State der Komponente anzupassen, erstellen wir ein Eingabefeld und einen Button.
<div>
<label>Begrüßung ändern:</label>
<input placeholder="Hallo" onChange={onInputChange} />
<button onClick={onBtnClick}>Speichern</button>
</div>An die HTML-Elemente hängen wir zwei Methoden an, die den State der Komponente verändern.
const onInputChange = ({ target }) => {
State.update({ new_greeting: target.value });
};
const onBtnClick = () => {
//check if new greeting was filled in by the user
if (!state.new_greeting) {
return;
}
Near.call(contract, "set_greeting", {
greeting: state.new_greeting,
});
};5. Überprüfen, ob der User im NEAR BOS eingeloggt ist.
Abschließend bauen wir noch eine Überprüfung ein, ob der User eingeloggt ist. Dies ermöglicht uns das “context”-Objekt
Mit context.accountId überprüfen wir, ob der User eingeloggt ist. Ist er eingeloggt, zeigen wir das Eingabefeld und den Button an, ist er nicht eingeloggt, zeigen wir ihm eine Meldung an, damit er sich einloggt.
const changeGreeting = (
<div>
<label>Begrüßung ändern:</label>
<input placeholder="Hallo" onChange={onInputChange} />
<button onClick={onBtnClick}>
Speichern
</button>
</div>
);
const loginInfo = <p> Logge dich ein, um die Begrüßung zu ändern </p>;
// Render
return (
<>
<div>
<div>
Der Smart Contract "Hello" begrüßt dich mit: <b>{greeting}</b>
</div>
<p></p>
{ context.accountId ? changeGreeting : loginInfo}
</div>
</>
);
6. Komponente veröffentlichen
Im letzten Schritt veröffentlichen wir unsere Komponente im NEAR BOS. (Wie das mit Visual Studio Code funktioniert, haben wir bereits in unserem letzten Tutorial behandelt.)
Wenn wir alles richtig gemacht haben, sollen wir in unserem NEAR BOS Account eine neue Komponente finden.
Wir testen unsere neue Komponente noch ein wenig und verändern die Begrüßung
Begrüßung wurde erfolgreich geändert
Gut gemacht :)
Hier der vollständige Code:
const contract = "hello.near-examples.near"
const greeting = Near.view(contract, "get_greeting", {});
// you need to first check that the value was obtained
if (greeting === null) return "Loading...";
State.init({ new_greeting: "" });
const onInputChange = ({ target }) => {
State.update({ new_greeting: target.value });
};
const onBtnClick = () => {
//check if new greeting was filled in by the user
if (!state.new_greeting) {
return;
}
Near.call(contract, "set_greeting", {
greeting: state.new_greeting,
});
};
const changeGreeting = (
<div>
<label>Begrüßung ändern:</label>
<input placeholder="Hallo" onChange={onInputChange} />
<button onClick={onBtnClick}>Speichern</button>
</div>
);
const loginInfo = <p>Logge dich ein, um die Begrüßung zu ändern</p>;
// Render
return (
<>
<div>
<div>
Der Smart Contract "Hello" begrüßt dich mit: <b>{greeting}</b>
</div>
<p></p>
{ context.accountId ? changeGreeting : loginInfo}
</div>
</>
);
Den Link zu unserem Beispiel auf GitHub findest du unter: https://github.com/neargerman/near-bos-with-smart-contract-example
Abschließend noch ein paar Links zur NEAR BOS Doku:
- https://docs.near.org/bos/tutorial/interaction
- https://docs.near.org/bos/api/near
- https://docs.near.org/bos/api/state
