Integriere einen NEAR Smart Contract in deine Web App
Im ersten Teil dieses zweiteiligen Tutorials haben wir uns angesehen, wie wir den NEAR Wallet Selector in eine Web App integrieren. Im zweiten Teil sehen wir uns an, wie wir einen NEAR Smart Contract in eine Web App integrieren.
Zuvor haben wir uns bereits angesehen, wie wir einen Smart Contract auf der NEAR Blockchain entwickeln. Dann haben wir uns angesehen, wie wir einen bereits veröffentlichen Smart Contract mit der NEAR Javascript API verwenden können und einen Smart Contract in eine NEAR BOS Komponente integrieren können.
Unsere aktuelle Web App sieht folgendermaßen aus:
Wir haben einen Login-Button, mit dem wir uns in einen NEAR Account einloggen können. Klicken wir auf den Button, öffnet sich der NEAR Wallet Selector, mit dem wir den gewünschten Wallet-Provider auswählen können. Nach erfolgreichem Login werden wir wieder auf unsere Seite zurückgeleitet und sehen einen Logout-Button mit dem Namen unseres Accounts.
Falls ihr diesen Teil des Tutorials mitmachen wollt, könnt ihr das Projekt von hier clonen:
Logik für die Interaktion mit dem Smart Contract entwickeln
Um mit dem Smart Contract interagieren zu können, müssen wir eine zusätzliche Logik einbauen.
Zur Erinnerung — ein NEAR Smart Contract stellt 2 verschiedene Methoden zur Verfügung:
- View-Methoden: vgl. Getter-Methoden. Es werden Werte, die im Smart Contract gespeichert sind, abgefragt. Diese Aufrufe sind dabei kostenlos, es werden keine Netzwerkgebühren (Gas) verrechnet.
- Change-Methoden: vgl. Setter-Methoden. Es werden Werte, die im Smart Contract gespeichert sind, verändert. Diese Aufrufe sind nicht kostenlos, es werden Netzwerkgebühren (Gas) verrechnet.
Diese beiden Methoden wollen wir in unserer Web App verwenden.
Wir beginnen mit der View-Methode. Dazu erstellen wir eine neue Methode in der Datei “near-wallet.js”.
/**
* Makes a read-only call to a contract
* @param {string} contractId - the contract's account id
* @param {string} method - the method to call
* @param {Object} args - the arguments to pass to the method
* @returns {Promise<JSON.value>} - the result of the method call
*/
async viewMethod({ contractId, method, args = {} }) {
const walletSelector = await this.selector;
const { network } = walletSelector.options;
const provider = new providers.JsonRpcProvider({ url: network.nodeUrl });
let res = await provider.query({
request_type: 'call_function',
account_id: contractId,
signerId: this.accountId,
method_name: method,
args_base64: Buffer.from(JSON.stringify(args)).toString('base64'),
finality: 'optimistic',
});
return JSON.parse(Buffer.from(res.result).toString());
}Wir übergeben der Methode die “ContractId” und den Namen der Methode. Mit der vom “near-api-js”-Modul zur Verfügung gestellten Klasse “provider” können wir den Smart Contract Call ausführen.
import { providers } from 'near-api-js';Anmerkung: Um eine View-Methode auf der Blockchain aufrufen zu können, muss kein Account angegeben werden, das heißt in unserem Fall, dass wir uns nicht einloggen müssen. “Read-Only”-Operationen sind gebührenfrei.
Die Change-Methode sieht folgendermaßen aus.
/**
* Makes a change call to a contract
* @param {string} contractId - the contract's account id
* @param {string} method - the method to call
* @param {Object} args - the arguments to pass to the method
* @param {string} gas - the amount of gas to use
* @param {string} deposit - the amount of yoctoNEAR to deposit
* @returns {Promise<Transaction>} - the resulting transaction
*/
async callMethod({ contractId, method, args = {}, gas = THIRTY_TGAS, deposit = NO_DEPOSIT }) {
// Sign a transaction with the "FunctionCall" action
return await this.wallet.signAndSendTransaction({
signerId: this.accountId,
receiverId: contractId,
actions: [
{
type: 'FunctionCall',
params: {
methodName: method,
args,
gas,
deposit,
},
},
],
});
}Hier brauchen wir einen “Signer”, das heißt wir müssen uns in unserem Account einloggen und die Transaktion signieren.
Zusätzlich müssen wir angeben, wie viel “Gas” wir für die Transaktion verwenden wollen.
const THIRTY_TGAS = '30000000000000'; //the amount of gas to use
const NO_DEPOSIT = '0'; //the amount of yoctoNEAR to depositAuf die Berechnung des “Gas” und die Umrechnung zwischen Near und “yoctoNear” gehen wir hier nicht näher darauf an. Wir verweisen auf folgenden Link:
Frontend weiterentwickeln
Somit haben wir die Logik für die Interaktion mit dem Smart Contract fertig. Nun erweitern wir unsere Web App.
Unser Ziel ist es, den aktuellen Zustand des Smart Contracts “counter”, den wir vor ein paar Wochen entwickelt haben, anzeigen zu lassen und über einen Button den Wert zu inkrementieren.
Dazu erweitern wir die Datei “index.html”:
<div class="container">
<div class="alert alert-info mx-auto mt-3" role="alert">
Der aktuelle Wert des Counters lautet: <span id="counter-value"></span>
</div>
<button class="btn btn-primary" id="increment-counter-value"> Inkrementieren </button>
</div>In der Datei “index.js” erstellen wir zwei Funktionen:
- getCounterValue: für die Ausgabe des aktuellen Zustandes (Wertes)
- incrementCounterValue: für das Inkrementieren des Wertes
function getCounterValue() {
wallet.viewMethod({contractId : 'near-deutsch.testnet', method: 'get_num'}).then(val => {
document.getElementById('counter-value').innerText = val;
});
}
function incrementCounterValue() {
wallet.callMethod({contractId : 'near-deutsch.testnet', method: 'reset'}).then(() => getCounterValue());
}In den beiden Funktionen rufen wir die zuvor erstellten Methoden der Klasse “Wallet” auf.
Nun integrieren wir die Funktionen noch in unsere HTML-Seite und dann sind wir schon fertig.
// Setup on page load
window.onload = async () => {
let isSignedIn = await wallet.startUp();
isSignedIn ? signedInUI() : signedOutUI();
getCounterValue();
};
document.querySelector('#increment-counter-value').onclick = () => { incrementCounterValue(); };Testen unserer Web App
Zum Abschluss testen wir noch unsere neuen Funktionen.
Wie bereits erwähnt, können wir ohne Login den Zustand (Wert) des Contracts abfragen. Um den Wert zu inkrementieren, müssen wir uns einloggen.
Nun klicken wir auf “Inkrementieren” und erhalten einen neuen Wert vom Contract.
Zusammenfassung
Dies ist ein sehr einfaches Beispiel, das zeigen soll, wie man NEAR in seine Web App integriert. Wir wissen nun, wie wir mit Verwendung des NEAR Wallet Selectors User in einen NEAR Account einloggen lassen können und wie wir einen Smart Contract in unsere Web App integrieren.
Wie bereits am Anfang dieses zweiteiligen Tutorials erwähnt, haben wir in diesem Beispiel eine sehr einfaches Frontend mit nur einer HTML-Datei. In der Praxis wird man komplexere Frontends haben und mit Frameworks wie React oder Angular entwickeln. Die Tools von NEAR sind hauptsächlich für React konzipiert, das heißt die Verwendung von React ist zu empfehlen.
Hier noch der Link zu unserem Beispiel auf Github:
https://github.com/neargerman/integrate-near-smart-contract-in-web3-app
