Wie kann ich meine HTML-Benutzeroberfläche mit meiner privaten Ethereum-Kette verbinden?

Ich versuche, die Entwicklung intelligenter Verträge zu lernen und meine Verträge zu testen .

Früher habe ich truffle, Metamask und testrpc verwendet, um meine Verträge zu testen; und es kümmerte sich um die Interaktion meiner HTML-Seite mit der lokalen Kette.

Jetzt verwende ich "geth" und eine private Blockchain in Ethereum (ich werde alle Schritte in Kürze erklären). Ich kann meinen Vertrag mit geth bereitstellen. Ich kann mit dem bereitgestellten Vertrag über die Geth-Konsole interagieren. Aber ich weiß nicht, wie ich meine HTML-Datei mit meiner Blockchain verbinden soll.

Frage 1 : Wie kann ich meine HTML-Benutzeroberfläche mit einer privaten Blockchain verbinden?

Frage 2 : Muss ich Metamask verwenden, wenn ich die private Kette verwende? Wenn ja, wie kann ich mich bei Metamask anmelden? da die private Kette keine 12-Wörter-Phrase bereitstellt, die Metamask benötigt (testrpc stellt sie bereit).

Mein Vertrag ist sehr, sehr einfach:

pragma solidity ^0.4.4;

contract T2{

 uint public k2;
 function T2(){
  k2=32; 
} }

Die Schritte, die ich unternehme, sind wie folgt:

Schritt 1-

 geth --identity "MyNodeName" --rpc --rpcport "8545" --rpccorsdomain 
"*" --datadir Users/xx/TestChain1 --port "30303" --rpcaddr "127.0.0.1" 
 --nodiscover --rpcapi "db,eth,net,web3" --networkid 123 
 init/Users/xx/CustomGenesis.json

Schritt 2-

 geth --identity "MyNodeName" --rpc --rpcport "8545" --rpccorsdomain "*" 
--datadir Users/aydinabadi/TestChain1 --port "30303" --nodiscover --
rpcapi "db,eth,net,web3" --networkid 123 console

Schritt 3-

Entsperre mein Konto auf der Konsole und setze meinen Vertrag ein: dh ich stelle meinen Vertrag auf Remix, führe ihn aus und kopiere den Inhalt von "Web3 deploy". Fügen Sie es dann auf der Geth-Konsole ein.

Meine .js-Datei ist:

import "../stylesheets/app.css";
import { default as Web3} from 'web3';
 var web3;
if (typeof web3 !== 'undefined') {
    web3 = new Web3(web3.currentProvider);
} else {
    // set the provider you want from Web3.providers
    web3 = new Web3(new 
Web3.providers.HttpProvider("http://localhost:8545"));
 }

 var abi=[{"constant":true,"inputs":[],"name":"k2","outputs":
 [{"name":"","type":"uint256"}],"payable":false,"type":"function"},
 {"inputs":[],"payable":false,"type":"constructor"}];

 var ins=web3.eth.contract(abi);
 var instance= ins.at("0x863c7b1600b9312f85501dbc933a862b63dad374");
 var accounts;
 var account;
 var account2;
 window.App = {
 start: function() {
 web3.eth.getAccounts(function(err, accs) {
  if (err != null) {
    alert("There was an error fetching your accounts.");
    return;
  }

  if (accs.length == 0) {
    alert("Couldn't get any accounts! Make sure your Ethereum client is 
  configured correctly.");
    return;
  }
  accounts = accs;
  account = accounts[0];
  account2 = accounts[1];
  });
   },
  setStatus: function(message) {
  var status = document.getElementById("status");
  status.innerHTML = message;
   },


  k2: function() {
  var spec6 = document.getElementById("spec6");
  var val= instance.k2.call();
  spec6.innerHTML = val.valueOf();

  },
  };

und meine HTML-Datei ist:

 <!DOCTYPE html>
<html lan="en">
<head>
<script src="./app.js"></script>
<body>
<div class="col-sm-4">
 <br><br><button id="send" onclick="App.k2()">Get value</button>
 <span style="padding-left:130px;"> <span style="padding-left:200px;"  
id="spec6"></span>
 <br>
</div>
</body>
</html>
Was sind die Fehler, die Sie in Ihrer Browser-js-Konsole erhalten?
@AchalaDissanayake Außerdem wurde mir klar, dass beim Aufrufen meiner bereitgestellten Vertragsvariablen 0 zurückgegeben wird. In meiner Frage habe ich "k2 = 32" festgelegt, aber wenn ich k2 aufrufe, wird 0 zurückgegeben (in der Konsole). Weißt du, warum? Danke
gibt 0 oder undefiniert zurück?
Änderung in der HTML-Datei onClick="k2()"und in der JS-Datei k2 : function ()in function k2(). Probieren Sie es aus und teilen Sie mir die Konsolenprotokolle mit
klar, kommentiere hier die Ausgänge
Übrigens, für Ihr Update auf die Frage benötigen Sie keine Metamaske, um eine Verbindung zu einer privaten Kette herzustellen, auch nicht zu einem Testnetz oder einem Live-Netz, wenn Sie einen vollständigen Knoten lokal ausführen. Die Metamaske bietet eine ähnliche Funktion wie ein leichter Client, wenn Sie eine Katze ausführen ein voller Knoten
Ich werde eine Antwort posten und sie mit Ihrem Feedback zu den obigen Angaben aktualisieren

Antworten (2)

Zu Frage 1 :

Sie benötigen keine Metamaske, um eine Verbindung zu einer privaten Kette herzustellen, auch nicht zu einem Testnetz oder einem Live-Netz, wenn Sie einen vollständigen Knoten lokal ausführen. Die Metamaske bietet eine ähnliche Funktion wie ein Light-Client, wenn Sie keinen vollständigen Knoten ausführen können.

Zu Frage 2 :

Ihre onClick-Funktion bezieht sich nicht auf die Funktion in app.js, da App nicht definiert ist.

Ich danke Ihnen sehr für Ihre Antwort. Ich habe noch zwei Fragen: 1-wie signiert der Kunde seine Transaktion, ohne eine Brieftasche zu verwenden? 2- Im Allgemeinen, wie verbindet sich mein HTLM mit der privaten/Live-Kette? Danke :)
Da Sie eine js-Datei sind, die über web3 mit Ihrem lokalen Knoten verbunden ist, werden Transaktionen signiert, wenn Sie ein Konto entsperrt haben (Standardkonto).
Hast du die js-Datei mit deiner Kette verbunden? Es ist über den RPC-Port, den Sie öffnen, js web3 greift über den Port auf die Kette zu
danke, für die kommentare! Ja, bisher läuft alles bestens.

Zunächst können Sie Metamask mit Ihrem lokalen Host oder einem beliebigen anderen Netzwerk verbinden. Ich habe einige einfache Codebeispiele (in Antworten) gepostet, um VanillaJS und Metamask mit Verträgen zu integrieren. Hoffe es hilft :)

Daten mit Metamask und Vanilla JS signieren

Wie konvertiere ich Vertrags-ABI in eine HTML-Schnittstelle?