Ihre erste Dapp mit Create ETH App
Raul Ravindran
Eine der größten Herausforderungen bei der Einrichtung eines Blockchain-Projekts besteht darin, das Projekt richtig einzurichten. Create-eth-app ist ein Open-Source-Tool, mit dem Sie Ethereum-basierte Apps mit einem einzigen Befehl erstellen können. Es erspart Ihnen die Mühe, Boilerplate-Code zu erstellen, und bietet eine saubere Grundlage für Ihre Blockchain-App.
Wenn Sie eine kurze Zusammenfassung zum Einrichten einer Eth-App erstellen möchten, sehen Sie sich bitte unser YouTube-Video an:
Funktionen der Create ETH App
Ihre Umgebung verfügt über alles, was Sie zum Erstellen einer modernen Ethereum-betriebenen einseitigen React-App benötigen:
Reibungsloses Projektmanagement über Yarn Workspaces
Alles, was in Create React App enthalten ist: Unterstützung für React-, JSX-, ES6-, TypeScript- und Flow-Syntax
Vorlagenunterdiagramm, das die von einem ERC-20-Vertrag ausgegebenen Ereignisse indiziert
Minimalistische Struktur zur Verwaltung der Smart Contract ABIs und Adressen
Problemlose Updates für die oben genannten Tools mit einer einzigen Abhängigkeit
Installieren der Create Eth-App
Die Eth-App erstellen ist ein NPM-Paket, daher benötigen Sie mindestens Knoten v14. Sie können nvm (macOS/Linux) oder nvm-windows verwenden, um Node-Versionen zwischen verschiedenen Projekten zu wechseln. Das Projekt verwendet auch Garn, daher muss auch Garn installiert sein, da die Create Eth App auf Yarn Workspaces angewiesen ist, eine Funktion, die von Npm nicht unterstützt wird.
Um ein Projekt einzurichten, geben Sie den folgenden Befehl auf dem Terminal ein:
Garn erstellen eth-app my-eth-app
cd my-eth-app
Learn more about the yarn create command yarn create <starter-kit-package> available in Yarn 0.25+_
Once the project is installed the directory structure should look something like this:
my-eth-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
└── packages
├── contracts
│ ├── README.json
│ ├── package.json
│ └── src
│ ├── abis
│ │ ├── erc20.json
│ │ └── ownable.json
│ ├── addresses.js
│ └── index.js
├── react-app
│ ├── README.md
│ ├── package.json
│ ├── node_modules
│ ├── public│ │ ├── favicon.ico
│ │ ├── index.html
│ │ └── manifest.json
│ └── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── ethereumLogo.svg
│ ├── index.css
│ ├── index.js
│ ├── serviceWorker.js
│ └── setupTests.js
└── subgraph
├── README.md
├── abis
│ └── erc20.json
├── package.json
├── schema.graphql
├── src
│ └── mappings
│ ├── tokens.ts
│ └── transfers.ts
└── subgraph.yaml“create-eth-app” supports multiple frameworks: “react” and “vue”. You can run the following command:
yarn create my-eth-app my-eth-app --framework react
yarn create my-eth-app my-eth-app --framework vue“create-eth-app” also supports multiple established protocol templates.
React: aave, compound, default, kyber, maker, sablier-v1, synthetix, uniswap-v1, uniswap-v2
Vue: aave, compound, default, kyber, maker, sablier-v1, synthetix, uniswap-v1, uniswap-v2
To start the projet run
yarn react-app:startNow out the box, we have two options to connect to our Ethereum blockchain:
WalletConnect
Metamask.io
Among other things the package has integration with Web3Modal once you click on connect wallet, you should see a popup to choose wallet providers:
Once you approve the request from your wallet, you should see you wallet address and an option to disconnect the wallet.
Understanding the packages
The packages folder contains 3 pacakges:
1. Contacts
This folder contains information about the contract your dapp connects to. This includes the contract address and contract ABI. Couple of dummy contracts are already included when you set up the project to help get you started.
In this example we will discuss a custom todo-app smart contract. To write and develop the smart contract we will use the REMIX IDE.
Please note that create-eth-app this is only for the frontend of app. If you need to create your own smart contract, you need to use another framework as well, like Hardhat or Truffle.
So lets create a new file called Todo.Sol
//Todo.sol
Pragma Solidität ^0.5.1;
// Einen Vertrag erstellen
Vertrag Todo{
// Definition einer Struktur für
// eine Aufgabe speichern
Aufgabe strukturieren
{
Zeichenfolgenaufgabe;
bool isDone;
}
Mapping (Adresse => Task[]) private Benutzer;
// Funktion zum Hinzufügen einer Aufgabe definieren
Funktion addTask(string calldata _task) extern
{
Benutzer[msg.sender].push(Task({
Aufgabe:_Aufgabe,
isDone:false
}));
}
// Definieren einer Funktion zum Abrufen von Details einer Aufgabe
Funktion getTask(uint _taskIndex) externe Ansicht gibt zurück (Aufgabenspeicher)
{
Aufgabenspeicheraufgabe = Users[msg.sender][_taskIndex];
Aufgabe zurückgeben;
}
// Definieren einer Funktion zum Aktualisieren des Status einer Aufgabe
Funktion updateStatus(uint256 _taskIndex,bool _status) extern
{
Users[msg.sender][_taskIndex].isDone = _status;
}
// Definieren einer Funktion zum Löschen einer Aufgabe
Funktion deleteTask(uint256 _taskIndex) extern
{
Benutzer löschen[msg.sender][_taskIndex];
}
// Definieren einer Funktion zum Abrufen der Aufgabenanzahl.
Funktion getTaskCount() externe Ansicht gibt zurück (uint256)
{
return Users[msg.sender].length;
}
}
Um die Anwendung zu kompilieren, wählen Sie den Vertrag aus und klicken Sie auf die Schaltfläche Todo.sol kompilieren unter der Registerkarte Kompilieren:
Sobald der Vertrag kompiliert ist, können Sie ihn mithilfe von Metamask im rinkby-Netzwerk bereitstellen.
Sehen Sie sich unser YouTube-Video an, um mehr über die Arbeit mit Solidity in der Remix-IDE zu erfahren
2. Reaktions-App
Der Ordner „react-app“ enthält den Frontend-Reaktionscode.
Wir werden eine ziemlich einfache React Todo-App schreiben:
import React, {useEffect, useState} from "react";
importiere getWeb3 aus "./utils/getWeb3";
Aufgaben aus „./abis/Tasks.json“ importieren;
importiere "./App.css";
const App = () => {
const [todoState, setTodoState] = useState({
web3: null,
Instanz: null,
Konto: "",
});
const [todos, setTodos] = useState(null);
const [inputString, setInputString] = useState("");
const [laden, setLoading] = useState (false);
const init = async () => {
const web3 = getWeb3();
const networkId = warte auf web3.eth.net.getId();
const deployedNetwork = Tasks.networks[networkId];
let _instance = new web3.eth.Contract(Tasks.abi, deployedNetwork.address);
const account = _instance.givenProvider.s selectedAddress;
setTodoState({ web3, Instanz: _Instanz, Konto });
wenn (_Instanz) {
const _task = warte auf _instance.methods.getTasks().call();
setTodos(_task);
}
};
useEffect(() => {
drin();
}, [Wird geladen]);
const onAddToDo = async (e) => {
e.preventDefault();
setLoading (wahr);
Warten Sie auf todoState.instance.methods
.setTasks(EingabeString)
.send({ from: todoState.account })
.then((res) => {
console.log("res :>> ", res);
setLoading (falsch);
});
};
return !TodoState && !TodoState.Vertrag ? (
<div>Web3, Konten und Vertrag werden geladen...</div>
) : (
<div className="App">
<h3>
Girokonto <br></br> {todoState.account}
</h3>
<form onSubmit={(e) => onAddToDo(e)}>
<Eingabe
label="Text einfügen"
onChange={(e) => setInputString(e.target.value)}
value={inputString}
/>
<button type="submit" disabled={!inputString.length}>
HINZUFÜGEN
</button>
</form>
<h3>Aufgaben</h3>
<ul>
{todos?.map((todo) => (
<li key={todo.id}>
<p>{todo}</p>
</li>
))}
</ul>
</div>
);
};
Standard-App exportieren;
Nach dem Aktualisieren sollten Sie eine ähnliche Ausgabe auf dem Bildschirm sehen:
3. Unterdiagramm
Schließlich enthält der Ordner „subgraph“ Code für einen GraphQL-Server, der Daten effizient aus der Ethereum-Blockchain abruft.
Die 2 großen Vorteile des Diagramms sind:
– Sie können auf einfache Weise erweiterte Abfragen durchführen
– und Sie können Subgraphen verwenden, die von anderen Personen erstellt wurden
Sie müssen den Teilgraphen nicht verwenden, er ist optional, aber es ist ein leistungsstarkes Werkzeug, das Ihnen zur Verfügung steht.
Fazit
Zusammenfassend lässt sich sagen, dass Create-eth-app ein großartiges Tool zum schnellen Bootstrapping eines Blockchain-Projekts ist, und Sie sollten es unbedingt in Ihre Toolbox aufnehmen.
コメント