Transfer
+``` + +Dies ist das HTML (genauer gesagt, [JSX](https://react.dev/learn/writing-markup-with-jsx)) Format der Komponente. + +#### `server/noir/src/main.nr` {#server-noir-src-main-nr} + +[Diese Datei](https://github.com/qbzzt/250911-zk-bank/blob/01-manual-zk/server/noir/src/main.nr) ist der eigentliche Zero-Knowledge-Code. + +``` +use std::hash::pedersen_hash; +``` + +[Pedersen-Hash](https://rya-sge.github.io/access-denied/2024/05/07/pedersen-hash-function/) wird mit der [Noir-Standardbibliothek](https://noir-lang.org/docs/noir/standard_library/cryptographic_primitives/hashes#pedersen_hash) bereitgestellt. Zero-Knowledge-Proofs verwenden häufig diese Hash-Funktion. Es ist viel einfacher, sie in [arithmetischen Schaltungen](https://rareskills.io/post/arithmetic-circuit) im Vergleich zu den Standard-Hash-Funktionen zu berechnen. + +``` +use keccak256::keccak256; +use dep::ecrecover; +``` + +Diese beiden Funktionen sind externe Bibliotheken, die in [`Nargo.toml`](https://github.com/qbzzt/250911-zk-bank/blob/01-manual-zk/server/noir/Nargo.toml) definiert sind. Sie sind genau das, wofür sie benannt sind: eine Funktion, die den [Keccak256-Hash](https://emn178.github.io/online-tools/keccak_256.html) berechnet, und eine Funktion, die Ethereum-Signaturen verifiziert und die Ethereum-Adresse des Unterzeichners wiederherstellt. + +``` +global ACCOUNT_NUMBER : u32 = 5; +``` + +Noir ist von [Rust](https://www.rust-lang.org/) inspiriert. Variablen sind standardmäßig Konstanten. Auf diese Weise definieren wir globale Konfigurationskonstanten. Insbesondere ist `ACCOUNT_NUMBER` die Anzahl der Konten, die wir speichern. + +Datentypen mit dem Namen `uGreeter
+Greeter
+ { + !readResults.isError && !readResults.isLoading && ++``` + +Erstellen Sie eine `ShowGreeting`-Komponente (wird unten erklärt), aber nur, wenn die Begrüßung erfolgreich von der Blockchain gelesen wurde. + +```tsx + +``` + +Dies ist das Eingabefeld, in dem der Benutzer eine neue Begrüßung festlegen kann. Jedes Mal, wenn der Benutzer eine Taste drückt, rufen wir `greetingChange` auf, was `setNewGreeting` aufruft. Da `setNewGreeting` aus dem `useState`-Hook stammt, wird die `Greeter`-Komponente erneut gerendert. Dies bedeutet, dass: + +- Wir müssen `value` angeben, um den Wert der neuen Begrüßung beizubehalten, da er sich sonst wieder in den Standardwert, den leeren String, zurückverwandeln würde. +- `usePrepareContractWrite` wird jedes Mal aufgerufen, wenn sich `newGreeting` ändert, was bedeutet, dass es immer das neueste `newGreeting` in der vorbereiteten Transaktion haben wird. + +```tsx + +``` + +Wenn kein `workingTx.write` vorhanden ist, warten wir noch auf Informationen, die zum Senden der Grußaktualisierung erforderlich sind, sodass die Schaltfläche deaktiviert ist. Wenn ein `workingTx.write`-Wert vorhanden ist, ist dies die Funktion, die aufgerufen werden muss, um die Transaktion zu senden. + +```tsx +
+
+```
+
+Wir möchten die Benutzeroberfläche nicht mit allen Informationen überladen. Um sie also ansehen oder schließen zu können, verwenden wir ein [`details`](https://www.w3schools.com/tags/tag_details.asp)-Tag.
+
+```tsx
+
+
+}
+```
+
+Beenden Sie die verschiedenen HTML-Tags.
+
+##### Der abschließende `Export` {#the-final-export}
+
+```tsx
+export { Greeter }
+```
+
+Die `Greeter`-Komponente ist diejenige, die wir für die Anwendung exportieren müssen.
+
+#### `src/wagmi.ts` {#wagmi-ts}
+
+Schließlich befinden sich verschiedene Definitionen in Bezug auf WAGMI in `src/wagmi.ts`. Ich werde hier nicht alles erklären, da das meiste davon Boilerplate ist, den Sie wahrscheinlich nicht ändern müssen.
+
+Der Code hier ist nicht genau derselbe wie [auf Github](https://github.com/qbzzt/20230801-modern-ui/blob/main/src/wagmi.ts), da wir später im Artikel eine weitere Chain ([Redstone Holesky](https://redstone.xyz/docs/network-info)) hinzufügen.
+
+```ts
+import { getDefaultWallets } from '@rainbow-me/rainbowkit'
+import { configureChains, createConfig } from 'wagmi'
+import { holesky, sepolia } from 'wagmi/chains'
+```
+
+Importieren Sie die Blockchains, die die Anwendung unterstützt. Sie können die Liste der unterstützten Chains [im Viem-Github](https://github.com/wagmi-dev/viem/tree/main/src/chains/definitions) sehen.
+
+```ts
+import { publicProvider } from 'wagmi/providers/public'
+
+const walletConnectProjectId = 'c96e690bb92b6311e8e9b2a6a22df575'
+```
+
+Um [WalletConnect](https://walletconnect.com/) verwenden zu können, benötigen Sie eine Projekt-ID für Ihre Anwendung. Sie können sie [auf cloud.walletconnect.com](https://cloud.walletconnect.com/sign-in) erhalten.
+
+```ts
+const { chains, publicClient, webSocketPublicClient } = configureChains(
+ [ holesky, sepolia ],
+ [
+ publicProvider(),
+ ],
+)
+
+const { connectors } = getDefaultWallets({
+ appName: 'My wagmi + RainbowKit App',
+ chains,
+ projectId: walletConnectProjectId,
+})
+
+export const config = createConfig({
+ autoConnect: true,
+ connectors,
+ publicClient,
+ webSocketPublicClient,
+})
+
+export { chains }
+```
+
+### Eine weitere Blockchain hinzufügen {#add-blockchain}
+
+Heutzutage gibt es eine Menge [L2-Skalierungslösungen](/layer-2/), und vielleicht möchten Sie einige unterstützen, die Viem noch nicht unterstützt. Dazu ändern Sie `src/wagmi.ts`. Diese Anweisungen erklären, wie man [Redstone Holesky](https://redstone.xyz/docs/network-info) hinzufügt.
+
+1. Importieren Sie den `defineChain`-Typ aus Viem.
+
+ ```ts
+ import { defineChain } from 'viem'
+ ```
+
+2. Fügen Sie die Netzwerkdefinition hinzu.
+
+ ```ts
+ const redstoneHolesky = defineChain({
+ id: 17_001,
+ name: 'Redstone Holesky',
+ network: 'redstone-holesky',
+ nativeCurrency: {
+ decimals: 18,
+ name: 'Ether',
+ symbol: 'ETH',
+ },
+ rpcUrls: {
+ default: {
+ http: ['https://rpc.holesky.redstone.xyz'],
+ webSocket: ['wss://rpc.holesky.redstone.xyz/ws'],
+ },
+ public: {
+ http: ['https://rpc.holesky.redstone.xyz'],
+ webSocket: ['wss://rpc.holesky.redstone.xyz/ws'],
+ },
+ },
+ blockExplorers: {
+ default: { name: 'Explorer', url: 'https://explorer.holesky.redstone.xyz' },
+ },
+ })
+ ```
+
+3. Fügen Sie die neue Chain zum `configureChains`-Aufruf hinzu.
+
+ ```ts
+ const { chains, publicClient, webSocketPublicClient } = configureChains(
+ [ holesky, sepolia, redstoneHolesky ],
+ [ publicProvider(), ],
+ )
+ ```
+
+4. Stellen Sie sicher, dass die Anwendung die Adresse für Ihre Verträge im neuen Netzwerk kennt. In diesem Fall ändern wir `src/components/Greeter.tsx`:
+
+ ```ts
+ const contractAddrs : AddressPerBlockchainType = {
+ // Holesky
+ 17000: '0x432d810484AdD7454ddb3b5311f0Ac2E95CeceA8',
+
+ // Redstone Holesky
+ 17001: '0x4919517f82a1B89a32392E1BF72ec827ba9986D3',
+
+ // Sepolia
+ 11155111: '0x7143d5c190F048C8d19fe325b748b081903E3BF0'
+ }
+ ```
+
+## Fazit {#conclusion}
+
+Natürlich ist es Ihnen egal, ob Sie eine Benutzeroberfläche für `Greeter` bereitstellen. Sie möchten eine Benutzeroberfläche für Ihre eigenen Verträge erstellen. Um Ihre eigene Anwendung zu erstellen, führen Sie diese Schritte aus:
+
+1. Geben Sie an, dass eine Wagmi-Anwendung erstellt werden soll.
+
+ ```sh copy
+ pnpm create wagmi
+ ```
+
+2. Benennen Sie die Anwendung.
+
+3. Wählen Sie das **React**-Framework.
+
+4. Wählen Sie die **Vite**-Variante.
+
+5. Sie können [Rainbow Kit hinzufügen](https://www.rainbowkit.com/docs/installation#manual-setup).
+
+Jetzt können Sie loslegen und Ihre Verträge für die ganze Welt nutzbar machen.
+
+[Hier finden Sie mehr von meiner Arbeit](https://cryptodocguy.pro/).
+
diff --git a/public/content/translations/de/developers/tutorials/deploying-your-first-smart-contract/index.md b/public/content/translations/de/developers/tutorials/deploying-your-first-smart-contract/index.md
new file mode 100644
index 00000000000..d9b688d7c9d
--- /dev/null
+++ b/public/content/translations/de/developers/tutorials/deploying-your-first-smart-contract/index.md
@@ -0,0 +1,101 @@
+---
+title: Deinen ersten Smart Contract bereitstellen
+description: "Eine Einführung in die Bereitstellung deines ersten Smart Contracts in einem Ethereum-Testnetzwerk"
+author: "jdourlens"
+tags:
+ [
+ "intelligente Verträge",
+ "remix",
+ "solidity",
+ "Bereitstellung"
+ ]
+skill: beginner
+lang: de
+published: 2020-04-03
+source: EthereumDev
+sourceUrl: https://ethereumdev.io/deploying-your-first-smart-contract/
+address: "0x19dE91Af973F404EDF5B4c093983a7c6E3EC8ccE"
+---
+
+Ich nehme an, du bist genauso aufgeregt wie wir, deinen ersten [Smart Contract](/developers/docs/smart-contracts/) auf der Ethereum-Blockchain [bereitzustellen](/developers/docs/smart-contracts/deploying/) und mit ihm zu interagieren.
+
+Keine Sorge, da dies unser erster Smart Contract ist, werden wir ihn in einem [lokalen Testnetzwerk](/developers/docs/networks/) bereitstellen, sodass es dich nichts kostet, ihn bereitzustellen und so viel damit zu spielen, wie du möchtest.
+
+## Schreiben unseres Vertrags {#writing-our-contract}
+
+Der erste Schritt ist, [Remix zu besuchen](https://remix.ethereum.org/) und eine neue Datei zu erstellen. Füge im oberen linken Teil der Remix-Benutzeroberfläche eine neue Datei hinzu und gib den gewünschten Dateinamen ein.
+
+
+
+In die neue Datei fügen wir den folgenden Code ein.
+
+```solidity
+// SPDX-License-Identifier: MIT
+pragma solidity >=0.5.17;
+
+contract Counter {
+
+ // Öffentliche Variable vom Typ vorzeichenlose Ganzzahl, um die Anzahl der Zählvorgänge zu speichern
+ uint256 public count = 0;
+
+ // Funktion, die unseren Zähler erhöht
+ function increment() public {
+ count += 1;
+ }
+
+ // Nicht notwendiger Getter, um den Zählwert zu erhalten
+ function getCount() public view returns (uint256) {
+ return count;
+ }
+
+}
+```
+
+Wenn du mit dem Programmieren vertraut bist, kannst du leicht erraten, was dieses Programm tut. Hier ist eine Erklärung, Zeile für Zeile:
+
+- Zeile 4: Wir definieren einen Vertrag mit dem Namen `Counter`.
+- Zeile 7: Unser Vertrag speichert eine vorzeichenlose Ganzzahl namens `count`, die bei 0 beginnt.
+- Zeile 10: Die erste Funktion ändert den Zustand des Vertrags und erhöht (`increment()`) unsere Variable `count`.
+- Zeile 15: Die zweite Funktion ist nur ein Getter, um den Wert der Variable `count` außerhalb des Smart Contracts auslesen zu können. Beachte, dass dies nicht notwendig ist, da wir unsere `count`-Variable als öffentlich (public) definiert haben, sondern nur als Beispiel dient.
+
+Das ist alles für unseren ersten einfachen Smart Contract. Wie du vielleicht weißt, sieht es aus wie eine Klasse aus OOP-Sprachen (objektorientierte Programmierung) wie Java oder C++. Jetzt ist es an der Zeit, mit unserem Vertrag zu spielen.
+
+## Bereitstellung unseres Vertrags {#deploying-our-contract}
+
+Nachdem wir unseren allerersten Smart Contract geschrieben haben, werden wir ihn nun in der Blockchain bereitstellen, um damit spielen zu können.
+
+[Die Bereitstellung des Smart Contracts in der Blockchain](/developers/docs/smart-contracts/deploying/) ist eigentlich nur das Senden einer Transaktion, die den Code des kompilierten Smart Contracts enthält, ohne einen Empfänger anzugeben.
+
+Zuerst [kompilieren wir den Vertrag](/developers/docs/smart-contracts/compiling/), indem wir auf das Kompilieren-Symbol auf der linken Seite klicken:
+
+
+
+Klicke dann auf die Schaltfläche „Kompilieren“:
+
+
+
+Du kannst die Option „Auto compile“ wählen, damit der Vertrag immer kompiliert wird, wenn du den Inhalt im Texteditor speicherst.
+
+Navigiere dann zum Bildschirm „Deploy and run transactions“:
+
+
+
+Sobald du auf dem Bildschirm „Deploy and run transactions“ bist, überprüfe, ob dein Vertragsname erscheint, und klicke auf „Deploy“. Wie du oben auf der Seite sehen kannst, ist die aktuelle Umgebung „JavaScript VM“. Das bedeutet, dass wir unseren Smart Contract in einer lokalen Test-Blockchain bereitstellen und mit ihm interagieren, um schneller und ohne Gebühren testen zu können.
+
+
+
+Sobald du auf die Schaltfläche „Deploy“ geklickt hast, siehst du deinen Vertrag unten erscheinen. Klicke auf den Pfeil links, um ihn zu erweitern, damit wir den Inhalt unseres Vertrags sehen. Das sind unsere Variable `counter`, unsere Funktion `increment()` und der Getter `getCounter()`.
+
+Wenn du auf die Schaltfläche `count` oder `getCount` klickst, wird der Inhalt der `count`-Variable des Vertrags abgerufen und angezeigt. Da wir die Funktion `increment` noch nicht aufgerufen haben, sollte 0 angezeigt werden.
+
+
+
+Rufen wir nun die Funktion `increment` auf, indem wir auf die Schaltfläche klicken. Du wirst am unteren Rand des Fensters die Protokolle der durchgeführten Transaktionen sehen. Du wirst sehen, dass die Protokolle anders aussehen, wenn du die Schaltfläche zum Abrufen der Daten anstelle der Schaltfläche `increment` drückst. Das liegt daran, dass das Lesen von Daten auf der Blockchain keine Transaktionen (Schreibvorgänge) oder Gebühren erfordert. Denn nur die Änderung des Zustands der Blockchain erfordert eine Transaktion:
+
+
+
+Nachdem du die Schaltfläche `increment` gedrückt hast, die eine Transaktion zum Aufruf unserer `increment()`-Funktion generiert, lesen wir den neu aktualisierten Zustand unseres Smart Contracts, wenn wir wieder auf die Schaltflächen `count` oder `getCount` klicken, wobei die Variable `count` größer als 0 ist.
+
+
+
+Im nächsten Tutorial befassen wir uns damit, [wie du Events zu deinen Smart Contracts hinzufügen kannst](/developers/tutorials/logging-events-smart-contracts/). Die Protokollierung von Events ist eine bequeme Möglichkeit, deinen Smart Contract zu debuggen und zu verstehen, was beim Aufruf einer Funktion passiert.
diff --git a/public/content/translations/de/developers/tutorials/develop-and-test-dapps-with-a-multi-client-local-eth-testnet/index.md b/public/content/translations/de/developers/tutorials/develop-and-test-dapps-with-a-multi-client-local-eth-testnet/index.md
new file mode 100644
index 00000000000..889b358a2fa
--- /dev/null
+++ b/public/content/translations/de/developers/tutorials/develop-and-test-dapps-with-a-multi-client-local-eth-testnet/index.md
@@ -0,0 +1,372 @@
+---
+title: Wie man eine Dapp auf einem lokalen Multi-Client-Testnet entwickelt und testet
+description: "Dieser Leitfaden führt Sie zunächst durch die Instanziierung und Konfiguration eines lokalen Multi-Client-Ethereum-Testnets, bevor Sie das Testnet zur Bereitstellung und zum Testen einer Dapp verwenden."
+author: "Tedi Mitiku"
+tags:
+ [
+ "Clients",
+ "Nodes",
+ "intelligente Verträge",
+ "Komponierbarkeit",
+ "Konsensebene",
+ "Ausführungsebene",
+ "testen"
+ ]
+skill: intermediate
+lang: de
+published: 2023-04-11
+---
+
+## Einführung {#introduction}
+
+Dieser Leitfaden führt Sie durch den Prozess der Instanziierung eines konfigurierbaren lokalen Ethereum-Testnets, der Bereitstellung eines Smart Contracts und der Verwendung des Testnets, um Tests mit Ihrer Dapp durchzuführen. Dieser Leitfaden richtet sich an Dapp-Entwickler, die ihre Dapps lokal mit verschiedenen Netzwerkkonfigurationen entwickeln und testen möchten, bevor sie sie auf einem Live-Testnet oder dem Mainnet bereitstellen.
+
+In diesem Leitfaden werden Sie:
+
+- Ein lokales Ethereum-Testnet mit dem [`eth-network-package`](https://github.com/kurtosis-tech/eth-network-package) unter Verwendung von [Kurtosis](https://www.kurtosis.com/) instanziieren,
+- Ihre Hardhat Dapp-Entwicklungsumgebung mit dem lokalen Testnet verbinden, um eine Dapp zu kompilieren, bereitzustellen und zu testen, und
+- Das lokale Testnet konfigurieren, einschließlich Parametern wie der Anzahl der Nodes und spezifischen EL/CL-Client-Paarungen, um Entwicklungs- und Test-Workflows für verschiedene Netzwerkkonfigurationen zu ermöglichen.
+
+### Was ist Kurtosis? {#what-is-kurtosis}
+
+[Kurtosis](https://www.kurtosis.com/) ist ein zusammensetzbares Build-System, das für die Konfiguration von Multi-Container-Testumgebungen entwickelt wurde. Es ermöglicht Entwicklern insbesondere, reproduzierbare Umgebungen zu erstellen, die eine dynamische Einrichtungslogik erfordern, wie zum Beispiel Blockchain-Testnets.
+
+In diesem Leitfaden startet das Kurtosis-eth-network-package ein lokales Ethereum-Testnet mit Unterstützung für den [`geth`](https://geth.ethereum.org/) Ausführungsebenen-Client (EL) sowie die [`teku`](https://consensys.io/teku), [`lighthouse`](https://lighthouse.sigmaprime.io/) und [`lodestar`](https://lodestar.chainsafe.io/) Konsensebenen-Clients (CL). Dieses Paket dient als eine konfigurierbare und zusammensetzbare Alternative zu Netzwerken in Frameworks wie Hardhat Network, Ganache und Anvil. Kurtosis bietet Entwicklern mehr Kontrolle und Flexibilität über die von ihnen verwendeten Testnets, was ein Hauptgrund dafür ist, dass die [Ethereum Foundation Kurtosis zum Testen des Merge verwendet hat](https://www.kurtosis.com/blog/testing-the-ethereum-merge) und es weiterhin zum Testen von Netzwerk-Upgrades verwendet.
+
+## Einrichten von Kurtosis {#setting-up-kurtosis}
+
+Bevor Sie fortfahren, stellen Sie sicher, dass Sie Folgendes haben:
+
+- [Die Docker-Engine auf Ihrem lokalen Rechner installiert und gestartet](https://docs.kurtosis.com/install/#i-install--start-docker)
+- [Die Kurtosis CLI installiert](https://docs.kurtosis.com/install#ii-install-the-cli) (oder auf die neueste Version aktualisiert, falls Sie die CLI bereits installiert haben)
+- [Node.js](https://nodejs.org/en), [yarn](https://classic.yarnpkg.com/lang/en/docs/install/#mac-stable) und [npx](https://www.npmjs.com/package/npx) installiert (für Ihre Dapp-Umgebung)
+
+## Ein lokales Ethereum-Testnet instanziieren {#instantiate-testnet}
+
+Um ein lokales Ethereum-Testnet zu starten, führen Sie Folgendes aus:
+
+```python
+kurtosis --enclave local-eth-testnet run github.com/kurtosis-tech/eth-network-package
+```
+
+Hinweis: Dieser Befehl benennt Ihr Netzwerk: \"local-eth-testnet\" über das `--enclave`-Flag.
+
+Kurtosis gibt die Schritte aus, die im Hintergrund durchgeführt werden, während es die Anweisungen interpretiert, validiert und ausführt. Am Ende sollten Sie eine Ausgabe sehen, die der folgenden ähnelt:
+
+```python
+INFO[2023-04-04T18:09:44-04:00] ======================================================
+INFO[2023-04-04T18:09:44-04:00] || Created enclave: local-eth-testnet ||
+INFO[2023-04-04T18:09:44-04:00] ======================================================
+Name: local-eth-testnet
+UUID: 39372d756ae8
+Status: RUNNING
+Creation Time: Tue, 04 Apr 2023 18:09:03 EDT
+
+========================================= Files Artifacts =========================================
+UUID Name
+d4085a064230 cl-genesis-data
+1c62cb792e4c el-genesis-data
+bd60489b73a7 genesis-generation-config-cl
+b2e593fe5228 genesis-generation-config-el
+d552a54acf78 geth-prefunded-keys
+5f7e661eb838 prysm-password
+054e7338bb59 validator-keystore-0
+
+========================================== User Services ==========================================
+UUID Name Ports Status
+e20f129ee0c5 cl-client-0-beacon http: 4000/tcp -> {attrs.name}
+
+ {JSON.stringify(attrs.object, null, 2)}
+```
+
+Die meisten Felder werden mit [`JSON.stringify`](https://www.w3schools.com/js/js_json_stringify.asp) angezeigt.
+
+```tsx
+
+ { funs.length > 0 &&
+ <>
+ Funktionen:
+ -
+```
+
+Die Ausnahme sind Funktionen, die nicht Teil des [JSON-Standards](https://www.json.org/json-en.html) sind und daher separat angezeigt werden müssen.
+
+```tsx
+ {funs.map((f, i) =>
+```
+
+Innerhalb von JSX wird der Code in `{` geschweiften Klammern `}` als JavaScript interpretiert. Dann wird der Code innerhalb der `(` runden Klammern `)` wieder als JSX interpretiert.
+
+```tsx
+ (
- {f} ) + )} +``` + +React erfordert, dass Tags im [DOM-Baum](https://www.w3schools.com/js/js_htmldom.asp) eindeutige Bezeichner haben. Dies bedeutet, dass untergeordnete Elemente desselben Tags (in diesem Fall [die ungeordnete Liste](https://www.w3schools.com/tags/tag_ul.asp)) unterschiedliche `key`-Attribute benötigen. + +```tsx +
Hallo ${loginResponse.extract.nameID}
+ + + `) + res.send(); +``` + +Senden Sie eine HTML-Antwort, nur um dem Benutzer zu zeigen, dass wir die Anmeldung erhalten haben. + +```typescript + } catch (err) { + console.error('Fehler bei der Verarbeitung der SAML-Antwort:', err); + res.status(400).send('SAML-Authentifizierung fehlgeschlagen'); + } + } +) +``` + +Informieren Sie den Benutzer im Falle eines Fehlers. + +```typescript +spRouter.get('/login', +``` + +Erstellen Sie eine Anmeldeanforderung, wenn der Browser versucht, diese Seite aufzurufen. Dies ist der Handler für Schritt 1 im obigen Sequenzdiagramm. + +```typescript + async (req, res) => { + const loginRequest = await sp.createLoginRequest(idp, "post") +``` + +Holen Sie sich die Informationen, um eine Anmeldeanforderung zu posten. + +```typescript + res.send(` + + + +``` + +Diese Seite sendet das Formular (siehe unten) automatisch ab. Auf diese Weise muss der Benutzer nichts tun, um weitergeleitet zu werden. Dies ist Schritt 2 im obigen Sequenzdiagramm. + +```typescript + + + + `) + } +) + +app.use(express.urlencoded({extended: true})) +``` + +[Diese Middleware](https://expressjs.com/en/5x/api.html#express.urlencoded) liest den Body der [HTTP-Anfrage](https://www.tutorialspoint.com/http/http_requests.htm). Standardmäßig ignoriert Express ihn, da die meisten Anfragen ihn nicht benötigen. Wir brauchen ihn, weil POST den Body verwendet. + +```typescript +app.use(`/${config.spDir}`, spRouter) +``` + +Binden Sie den Router im Verzeichnis des Dienstanbieters (`/sp`) ein. + +```typescript +app.get("/", (req, res) => { + res.send(` + + + + + + `) +}) +``` + +Wenn ein Browser versucht, das Stammverzeichnis aufzurufen, stellen Sie ihm einen Link zur Anmeldeseite zur Verfügung. + +```typescript +app.listen(config.spPort, () => { + console.log(`Dienstanbieter läuft auf http://${config.spHostname}:${config.spPort}`) +}) +``` + +Hören Sie mit dieser Express-Anwendung auf den `spPort`. + +#### src/idp.mts + +Dies ist der Identitätsanbieter. Er ist dem Dienstanbieter sehr ähnlich, die folgenden Erklärungen beziehen sich auf die Teile, die sich unterscheiden. + +```typescript +const xmlParser = new (await import("fast-xml-parser")).XMLParser( + { + ignoreAttributes: false, // Attribute beibehalten + attributeNamePrefix: "@_", // Präfix für Attribute + } +) +``` + +Wir müssen die XML-Anforderung, die wir vom Dienstanbieter erhalten, lesen und verstehen. + +```typescript +const getLoginPage = requestId => ` +``` + +Diese Funktion erstellt die Seite mit dem automatisch übermittelten Formular, das in Schritt 4 des obigen Sequenzdiagramms zurückgegeben wird. + +```typescript + + +Anmeldeseite
+ + + + +const idpRouter = express.Router() + +idpRouter.post("/loginSubmitted", async (req, res) => { + const loginResponse = await idp.createLoginResponse( +``` + +Dies ist der Handler für Schritt 5 des obigen Sequenzdiagramms. [`idp.createLoginResponse`](https://github.com/tngan/samlify/blob/master/src/entity-idp.ts#L73-L125) erstellt die Anmeldeantwort. + +```typescript + sp, + { + authnContextClassRef: 'urn:oasis:names:tc:SAML:2.0:ac:classes:PasswordProtectedTransport', + audience: sp.entityID, +``` + +Die Zielgruppe ist der Dienstanbieter. + +```typescript + extract: { + request: { + id: req.body.requestId + } + }, +``` + +Aus der Anfrage extrahierte Informationen. Der einzige Parameter, der uns in der Anfrage interessiert, ist die requestId, die es dem Dienstanbieter ermöglicht, Anfragen und deren Antworten zuzuordnen. + +```typescript + signingKey: { privateKey: idpPrivateKey, publicKey: config.idpCert } // Signierung sicherstellen +``` + +Wir benötigen `signingKey`, um die Daten zum Signieren der Antwort zu haben. Der Dienstanbieter vertraut keinen unsignierten Anfragen. + +```typescript + }, + "post", + { + email: req.body.email +``` + +Dies ist das Feld mit den Benutzerinformationen, die wir an den Dienstanbieter zurücksenden. + +```typescript + } + ); + + res.send(` + + + + + + + + `) +}) +``` + +Verwenden Sie erneut ein automatisch übermitteltes Formular. Dies ist Schritt 6 im obigen Sequenzdiagramm. + +```typescript + +// IdP-Endpunkt für Anmeldeanforderungen +idpRouter.post(`/login`, +``` + +Dies ist der Endpunkt, der eine Anmeldeanforderung vom Dienstanbieter empfängt. Dies ist der Handler für Schritt 3 des obigen Sequenzdiagramms. + +```typescript + async (req, res) => { + try { + // Workaround, weil ich parseLoginRequest nicht zum Laufen bringen konnte. + // const loginRequest = await idp.parseLoginRequest(sp, 'post', req) + const samlRequest = xmlParser.parse(Buffer.from(req.body.SAMLRequest, 'base64').toString('utf-8')) + res.send(getLoginPage(samlRequest["samlp:AuthnRequest"]["@_ID"])) +``` + +Wir sollten [`idp.parseLoginRequest`](https://github.com/tngan/samlify/blob/master/src/entity-idp.ts#L127-L144) verwenden können, um die ID der Authentifizierungsanforderung zu lesen. Ich konnte es jedoch nicht zum Laufen bringen und es war nicht wert, viel Zeit damit zu verbringen, also verwende ich einfach einen [allgemeinen XML-Parser](https://www.npmjs.com/package/fast-xml-parser). Die Information, die wir benötigen, ist das `ID`-Attribut innerhalb des `Bitte signieren
+ ++ + + +` +} +``` + +Der Rest ist nur Standard-HTML. + +```typescript +idpRouter.get("/signature/:nonce/:account/:signature", async (req, res) => { +``` + +Dies ist der Handler für Schritt 5 im Sequenzdiagramm. + +```typescript + const requestId = nonces[req.params.nonce] + if (requestId === undefined) { + res.send("Schlechte Nonce") + return ; + } + + nonces[req.params.nonce] = undefined +``` + +Holen Sie sich die Anfrage-ID und löschen Sie die Nonce aus den `nonces`, um sicherzustellen, dass sie nicht wiederverwendet werden kann. + +```typescript + try { +``` + +Da es so viele Möglichkeiten gibt, wie die Signatur ungültig sein kann, umschließen wir dies in einem `try ...` `catch`-Block, um alle geworfenen Fehler abzufangen. + +```typescript + const validSignature = await verifyMessage({ + address: req.params.account, + message: `${loginPrompt}${req.params.nonce}`, + signature: req.params.signature + }) +``` + +Verwenden Sie [`verifyMessage`](https://viem.sh/docs/actions/public/verifyMessage#verifymessage), um Schritt 5.5 im Sequenzdiagramm zu implementieren. + +```typescript + if (!validSignature) + throw("Schlechte Signatur") + } catch (err) { + res.send("Fehler:" + err) + return ; + } +``` + +Der Rest des Handlers ist äquivalent zu dem, was wir zuvor im `/loginSubmitted`-Handler getan haben, mit Ausnahme einer kleinen Änderung. + +```typescript + const loginResponse = await idp.createLoginResponse( + . + . + . + { + email: req.params.account + "@bad.email.address" + } + ); +``` + +Wir haben nicht die tatsächliche E-Mail-Adresse (wir werden sie im nächsten Abschnitt erhalten), also geben wir vorerst die Ethereum-Adresse zurück und kennzeichnen sie deutlich als keine E-Mail-Adresse. + +```typescript +// IdP-Endpunkt für Anmeldeanforderungen +idpRouter.post(`/login`, + async (req, res) => { + try { + // Workaround, weil ich parseLoginRequest nicht zum Laufen bringen konnte. + // const loginRequest = await idp.parseLoginRequest(sp, 'post', req) + const samlRequest = xmlParser.parse(Buffer.from(req.body.SAMLRequest, 'base64').toString('utf-8')) + res.send(getSignaturePage(samlRequest["samlp:AuthnRequest"]["@_ID"])) + } catch (err) { + console.error('Fehler bei der Verarbeitung der SAML-Antwort:', err); + res.status(400).send('SAML-Authentifizierung fehlgeschlagen'); + } + } +) +``` + +Verwenden Sie jetzt anstelle von `getLoginPage` `getSignaturePage` im Handler für Schritt 3. + +## Abrufen der E-Mail-Adresse + +Der nächste Schritt ist das Abrufen der E-Mail-Adresse, der vom Dienstanbieter angeforderten Kennung. Dazu verwenden wir den [Ethereum Attestation Service (EAS)](https://attest.org/). + +Der einfachste Weg, Attestierungen zu erhalten, ist die Verwendung der [GraphQL-API](https://docs.attest.org/docs/developer-tools/api). Wir verwenden diese Abfrage: + +``` +query GetAttestationsByRecipient { + attestations( + where: { + recipient: { equals: "${getAddress(ethAddr)}" } + schemaId: { equals: "0xfa2eff59a916e3cc3246f9aec5e0ca00874ae9d09e4678e5016006f07622f977" } + } + take: 1 + ) { + data + id + attester + } +} +``` + +Diese [`schemaId`](https://optimism.easscan.org/schema/view/0xfa2eff59a916e3cc3246f9aec5e0ca00874ae9d09e4678e5016006f07622f977) enthält nur eine E-Mail-Adresse. Diese Abfrage fragt nach Attestierungen dieses Schemas. Das Subjekt der Attestierung wird als `Empfänger` bezeichnet. Es ist immer eine Ethereum-Adresse. + +Warnung: Die Art und Weise, wie wir hier Attestierungen erhalten, hat zwei Sicherheitsprobleme. + +- Wir greifen auf den API-Endpunkt `https://optimism.easscan.org/graphql` zu, der eine zentralisierte Komponente ist. Wir können das `id`-Attribut erhalten und dann eine On-Chain-Abfrage durchführen, um zu überprüfen, ob eine Attestierung echt ist, aber der API-Endpunkt kann immer noch Attestierungen zensieren, indem er uns nicht darüber informiert. + + Dieses Problem ist nicht unlösbar, wir könnten unseren eigenen GraphQL-Endpunkt betreiben und die Attestierungen aus den Chain-Logs abrufen, aber das ist für unsere Zwecke übertrieben. + +- Wir schauen nicht auf die Identität des Attestierers. Jeder kann uns falsche Informationen liefern. In einer realen Implementierung hätten wir eine Reihe vertrauenswürdiger Attestierer und würden nur deren Attestierungen betrachten. + +Um dies in Aktion zu sehen, stoppen Sie den vorhandenen IdP und SP und führen Sie diese Befehle aus: + +```sh +git checkout email-address +pnpm install +pnpm start +``` + +Geben Sie dann Ihre E-Mail-Adresse an. Sie haben zwei Möglichkeiten, dies zu tun: + +- Importieren Sie eine Wallet mit einem privaten Schlüssel und verwenden Sie den privaten Testschlüssel `0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80`. + +- Fügen Sie eine Attestierung für Ihre eigene E-Mail-Adresse hinzu: + + 1. Navigieren Sie zu [dem Schema im Attestierungs-Explorer](https://optimism.easscan.org/schema/view/0xfa2eff59a916e3cc3246f9aec5e0ca00874ae9d09e4678e5016006f07622f977). + + 2. Klicken Sie auf **Mit Schema attestieren**. + + 3. Geben Sie Ihre Ethereum-Adresse als Empfänger und Ihre E-Mail-Adresse als E-Mail-Adresse ein und wählen Sie **On-Chain**. Klicken Sie dann auf **Attestierung erstellen**. + + 4. Genehmigen Sie die Transaktion in Ihrer Wallet. Sie benötigen etwas ETH auf der [Optimism Blockchain](https://app.optimism.io/bridge/deposit), um für Gas zu bezahlen. + +So oder so, navigieren Sie danach zu [http://localhost:3000](http://localhost:3000) und folgen Sie den Anweisungen. Wenn Sie den privaten Testschlüssel importiert haben, lautet die E-Mail, die Sie erhalten, `test_addr_0@example.com`. Wenn Sie Ihre eigene Adresse verwendet haben, sollte es das sein, was Sie attestiert haben. + +### Detaillierte Erklärung + + + +Die neuen Schritte sind die GraphQL-Kommunikation, Schritte 5.6 und 5.7. + +Auch hier sind die geänderten Teile von `idp.mts`. + +```typescript +import { GraphQLClient } from 'graphql-request' +import { SchemaEncoder } from '@ethereum-attestation-service/eas-sdk' +``` + +Importieren Sie die Bibliotheken, die wir benötigen. + +```typescript +const graphqlEndpointUrl = "https://optimism.easscan.org/graphql" +``` + +Es gibt [einen separaten Endpunkt für jede Blockchain](https://docs.attest.org/docs/developer-tools/api). + +```typescript +const graphqlClient = new GraphQLClient(graphqlEndpointUrl, { fetch }) +``` + +Erstellen Sie einen neuen `GraphQLClient`-Client, den wir zur Abfrage des Endpunkts verwenden können. + +```typescript +const graphqlSchema = 'string emailAddress' +const graphqlEncoder = new SchemaEncoder(graphqlSchema) +``` + +GraphQL gibt uns nur ein undurchsichtiges Datenobjekt mit Bytes. Um es zu verstehen, benötigen wir das Schema. + +```typescript +const ethereumAddressToEmail = async ethAddr => { +``` + +Eine Funktion, um von einer Ethereum-Adresse zu einer E-Mail-Adresse zu gelangen. + +```typescript + const query = ` + query GetAttestationsByRecipient { +``` + +Dies ist eine GraphQL-Abfrage. + +```typescript + Attestierungen( +``` + +Wir suchen nach Attestierungen. + +```typescript + where: { + recipient: { equals: "${getAddress(ethAddr)}" } + schemaId: { equals: "0xfa2eff59a916e3cc3246f9aec5e0ca00874ae9d09e4678e5016006f07622f977" } + } +``` + +Die Attestierungen, die wir wollen, sind diejenigen in unserem Schema, bei denen der Empfänger `getAddress(ethAddr)` ist. Die Funktion [`getAddress`](https://viem.sh/docs/utilities/getAddress#getaddress) stellt sicher, dass unsere Adresse die korrekte [Prüfsumme](https://github.com/ethereum/ercs/blob/master/ERCS/erc-55.md) hat. Dies ist notwendig, da bei GraphQL die Groß- und Kleinschreibung beachtet wird. "0xBAD060A7", "0xBad060A7" und "0xbad060a7" sind verschiedene Werte. + +```typescript + take: 1 +``` + +Unabhängig davon, wie viele Attestierungen wir finden, wollen wir nur die erste. + +```typescript + ) { + data + id + attester + } + }` +``` + +Die Felder, die wir empfangen wollen. + +- `attester`: Die Adresse, die die Attestierung eingereicht hat. Normalerweise wird dies verwendet, um zu entscheiden, ob der Attestierung vertraut werden soll oder nicht. +- `id`: Die Attestierungs-ID. Sie können diesen Wert verwenden, um [die Attestierung On-Chain zu lesen](https://optimism.blockscout.com/address/0x4200000000000000000000000000000000000021?tab=read_proxy&source_address=0x4E0275Ea5a89e7a3c1B58411379D1a0eDdc5b088#0xa3112a64) und zu überprüfen, ob die Informationen aus der GraphQL-Abfrage korrekt sind. +- `data`: Die Schemadaten (in diesem Fall die E-Mail-Adresse). + +```typescript + const queryResult = await graphqlClient.request(query) + + if (queryResult.attestations.length == 0) + return "no_address@available.is" +``` + +Wenn keine Attestierung vorhanden ist, geben Sie einen Wert zurück, der offensichtlich falsch ist, aber für den Dienstanbieter gültig erscheinen würde. + +```typescript + const attestationDataFields = graphqlEncoder.decodeData(queryResult.attestations[0].data) + return attestationDataFields[0].value.value +} +``` + +Wenn ein Wert vorhanden ist, verwenden Sie `decodeData`, um die Daten zu dekodieren. Wir benötigen nicht die Metadaten, die es bereitstellt, sondern nur den Wert selbst. + +```typescript + const loginResponse = await idp.createLoginResponse( + sp, + { + . + . + . + }, + "post", + { + email: await ethereumAddressToEmail(req.params.account) + } + ); +``` + +Verwenden Sie die neue Funktion, um die E-Mail-Adresse abzurufen. + +## Was ist mit der Dezentralisierung? + +In dieser Konfiguration können sich Benutzer nicht als jemand ausgeben, der sie nicht sind, solange wir uns auf vertrauenswürdige Attestierer für die Zuordnung von Ethereum- zu E-Mail-Adressen verlassen. Unser Identitätsanbieter ist jedoch immer noch eine zentralisierte Komponente. Wer den privaten Schlüssel des Identitätsanbieters besitzt, kann falsche Informationen an den Dienstanbieter senden. + +Es könnte eine Lösung geben, die [Mehrparteienberechnung (MPC)](https://en.wikipedia.org/wiki/Secure_multi-party_computation) verwendet. Ich hoffe, in einem zukünftigen Tutorial darüber zu schreiben. + +## Zusammenfassung + +Die Einführung eines Anmeldestandards wie Ethereum-Signaturen steht vor einem Henne-Ei-Problem. Dienstanbieter wollen den größtmöglichen Markt ansprechen. Benutzer möchten auf Dienste zugreifen können, ohne sich Gedanken über die Unterstützung ihres Anmeldestandards machen zu müssen. +Die Erstellung von Adaptern, wie z. B. einem Ethereum-IdP, kann uns helfen, diese Hürde zu überwinden. + +[Hier finden Sie mehr von meiner Arbeit](https://cryptodocguy.pro/). diff --git a/public/content/translations/de/developers/tutorials/getting-started-with-ethereum-development-using-alchemy/index.md b/public/content/translations/de/developers/tutorials/getting-started-with-ethereum-development-using-alchemy/index.md new file mode 100644 index 00000000000..1f097052b0a --- /dev/null +++ b/public/content/translations/de/developers/tutorials/getting-started-with-ethereum-development-using-alchemy/index.md @@ -0,0 +1,156 @@ +--- +title: Erste Schritte in der Ethereum-Entwicklung +description: "Dies ist ein Leitfaden für Einsteiger in die Ethereum-Entwicklung. Wir führen dich vom Einrichten eines API-Endpunkts über eine Befehlszeilenanforderung bis hin zum Schreiben deines ersten Web3-Skripts! Es sind keine Vorkenntnisse in der Blockchain-Entwicklung erforderlich!" +author: "Elan Halpern" +tags: + [ + "javascript", + "ethers.js", + "Nodes", + "Abfragen", + "Alchemy" + ] +skill: beginner +lang: de +published: 2020-10-30 +source: Medium +sourceUrl: https://medium.com/alchemy-api/getting-started-with-ethereum-development-using-alchemy-c3d6a45c567f +--- + + + +Dies ist ein Anfängerleitfaden für den Einstieg in die Ethereum-Entwicklung. Für dieses Tutorial verwenden wir [Alchemy](https://alchemyapi.io/), die führende Blockchain-Entwicklerplattform, die Millionen von Nutzern von 70 % der Top-Blockchain-Apps wie Maker, 0x, MyEtherWallet, Dharma und Kyber antreibt. Alchemy gibt uns Zugriff auf einen API-Endpunkt auf der Ethereum-Chain, damit wir Transaktionen lesen und schreiben können. + +Wir zeigen dir alle Schritte von der Anmeldung bei Alchemy bis hin zum Schreiben deines ersten Web3-Skripts! Es sind keine Vorkenntnisse in der Blockchain-Entwicklung erforderlich! + +## 1. Registriere dich für ein kostenloses Alchemy-Konto {#sign-up-for-a-free-alchemy-account} + +Ein Konto bei Alchemy zu erstellen ist einfach, [registriere dich hier kostenlos](https://auth.alchemy.com/). + +## 2. Erstelle eine Alchemy-App {#create-an-alchemy-app} + +Um mit der Ethereum-Chain zu kommunizieren und die Produkte von Alchemy zu nutzen, benötigst du einen API-Schlüssel, um deine Anfragen zu authentifizieren. + +Du kannst [API-Schlüssel über das Dashboard erstellen](https://dashboard.alchemy.com/). Um einen neuen Schlüssel zu erstellen, navigiere zu „App erstellen“, wie unten gezeigt: + +Besonderer Dank an [_ShapeShift_](https://shapeshift.com/), _dass wir ihr Dashboard zeigen dürfen!_ + + + +Fülle die Details unter „App erstellen“ aus, um deinen neuen Schlüssel zu erhalten. Hier kannst du auch Apps sehen, die du zuvor erstellt hast, und solche, die von deinem Team erstellt wurden. Bestehende Schlüssel rufst du ab, indem du bei einer beliebigen App auf „Schlüssel anzeigen“ klickst. + + + +Du kannst auch bestehende API-Schlüssel abrufen, indem du mit der Maus über „Apps“ fährst und eine auswählst. Hier kannst du den „Schlüssel anzeigen“ sowie die „App bearbeiten“, um bestimmte Domains auf die Whitelist zu setzen, mehrere Entwicklertools anzuzeigen und Analysen einzusehen. + + + +## 3. Eine Anfrage über die Befehlszeile stellen {#make-a-request-from-the-command-line} + +Interagiere mit der Ethereum-Blockchain über Alchemy mithilfe von JSON-RPC und curl. + +Für manuelle Anfragen empfehlen wir die Interaktion mit `JSON-RPC` über `POST`-Anfragen. Übergebe einfach den Header `Content-Type: application/json` und deine Anfrage als `POST`-Body mit den folgenden Feldern: + +- `jsonrpc`: Die JSON-RPC-Version – derzeit wird nur `2.0` unterstützt. +- `method`: Die ETH-API-Methode. [Siehe API-Referenz.](https://docs.alchemyapi.io/documentation/alchemy-api-reference/json-rpc) +- `params`: Eine Liste von Parametern, die an die Methode übergeben werden. +- `id`: Die ID deiner Anfrage. Wird mit der Antwort zurückgegeben, damit du verfolgen kannst, zu welcher Anfrage eine Antwort gehört. + +Hier ist ein Beispiel, das du in der Befehlszeile ausführen kannst, um den aktuellen Gaspreis abzurufen: + +```bash +curl https://eth-mainnet.alchemyapi.io/v2/demo \ +-X POST \ +-H "Content-Type: application/json" \ +-d '{"jsonrpc":"2.0","method":"eth_gasPrice","params":[],"id":73}' +``` + +_**HINWEIS:** Ersetze [https://eth-mainnet.alchemyapi.io/v2/demo](https://eth-mainnet.alchemyapi.io/jsonrpc/demo) durch deinen eigenen API-Schlüssel `https://eth-mainnet.alchemyapi.io/v2/**your-api-key`._ + +**Ergebnisse:** + +```json +{ "id": 73,"jsonrpc": "2.0","result": "0x09184e72a000" // 10000000000000 } +``` + +## 4. Richte deinen Web3-Client ein {#set-up-your-web3-client} + +**Wenn du bereits einen Client hast,** ändere die URL deines aktuellen Node Providers in eine Alchemy-URL mit deinem API-Schlüssel: `"https://eth-mainnet.alchemyapi.io/v2/your-api-key"` + +**_HINWEIS:_** Die folgenden Skripte müssen in einem **Node-Kontext** ausgeführt oder **in einer Datei gespeichert werden**, nicht über die Befehlszeile. Wenn du Node oder npm noch nicht installiert hast, sieh dir diese kurze [Einrichtungsanleitung für Macs](https://app.gitbook.com/@alchemyapi/s/alchemy/guides/alchemy-for-macs) an. + +Es gibt eine Vielzahl von [Web3-Bibliotheken](https://docs.alchemyapi.io/guides/getting-started#other-web3-libraries), die du mit Alchemy integrieren kannst. Wir empfehlen jedoch [Alchemy Web3](https://docs.alchemy.com/reference/api-overview) zu verwenden, einen Drop-in-Ersatz für web3.js, der für die nahtlose Zusammenarbeit mit Alchemy entwickelt und konfiguriert wurde. Dies bietet mehrere Vorteile, wie z. B. automatische Wiederholungsversuche und eine robuste WebSocket-Unterstützung. + +Um AlchemyWeb3.js zu installieren, **navigiere zu deinem Projektverzeichnis** und führe aus: + +**Mit Yarn:** + +``` +yarn add @alch/alchemy-web3 +``` + +**Mit NPM:** + +``` +npm install @alch/alchemy-web3 +``` + +Um mit der Knoten-Infrastruktur von Alchemy zu interagieren, führe dies in NodeJS aus oder füge es zu einer JavaScript-Datei hinzu: + +```js +const { createAlchemyWeb3 } = require("@alch/alchemy-web3") +const web3 = createAlchemyWeb3( + "https://eth-mainnet.alchemyapi.io/v2/your-api-key" +) +``` + +## 5. Schreibe dein erstes Web3-Skript! {#write-your-first-web3-script} + +Machen wir uns nun mit ein wenig Web3-Programmierung die Hände schmutzig und schreiben ein einfaches Skript, das die neueste Blocknummer aus dem Ethereum Mainnet ausgibt. + +**1. Wenn du es noch nicht getan hast, erstelle in deinem Terminal ein neues Projektverzeichnis und wechsle mit cd hinein:** + +``` +mkdir web3-example +cd web3-example +``` + +**2. Installiere die Alchemy Web3 (oder eine andere Web3) Abhängigkeit in deinem Projekt, falls du dies noch nicht getan hast:** + +``` +npm install @alch/alchemy-web3 +``` + +**3. Erstelle eine Datei namens `index.js` und füge den folgenden Inhalt hinzu:** + +> Du solltest `demo` schlussendlich durch deinen Alchemy HTTP-API-Schlüssel ersetzen. + +```js +async function main() { + const { createAlchemyWeb3 } = require("@alch/alchemy-web3") + const web3 = createAlchemyWeb3("https://eth-mainnet.alchemyapi.io/v2/demo") + const blockNumber = await web3.eth.getBlockNumber() + console.log("Die letzte Blocknummer ist " + blockNumber) +} +main() +``` + +Noch nicht mit async/await vertraut? Sieh dir diesen [Medium-Beitrag](https://medium.com/better-programming/understanding-async-await-in-javascript-1d81bb079b2c) an. + +**4. Führe es mit node in deinem Terminal aus** + +``` +node index.js +``` + +**5. Du solltest jetzt die neueste Blocknummer in deiner Konsole ausgegeben sehen!** + +``` +Die letzte Blocknummer ist 11043912 +``` + +**Woo!** Glückwunsch! Du hast soeben dein erstes Web3-Skript mit Alchemy geschrieben 🎉\*\* + +Du weißt nicht, was du als Nächstes tun sollst? Versuche, deinen ersten Smart Contract bereitzustellen und versuche dich an der Solidity-Programmierung in unserem [Hello World Smart Contract Guide](https://www.alchemy.com/docs/hello-world-smart-contract), oder teste dein Dashboard-Wissen mit der [Dashboard Demo App](https://docs.alchemyapi.io/tutorials/demo-app)! + +_[Registriere dich kostenlos bei Alchemy](https://auth.alchemy.com/), sieh dir unsere [Dokumentation](https://www.alchemy.com/docs/) an und folge uns für die neuesten Nachrichten auf [Twitter](https://twitter.com/AlchemyPlatform)_. diff --git a/public/content/translations/de/developers/tutorials/guide-to-smart-contract-security-tools/index.md b/public/content/translations/de/developers/tutorials/guide-to-smart-contract-security-tools/index.md new file mode 100644 index 00000000000..f934e8e1cbe --- /dev/null +++ b/public/content/translations/de/developers/tutorials/guide-to-smart-contract-security-tools/index.md @@ -0,0 +1,102 @@ +--- +title: "Ein Leitfaden für Smart-Contract-Sicherheitstools" +description: "Ein Überblick über drei verschiedene Test- und Programmanalysetechniken" +author: "Trailofbits" +lang: de +tags: [ "solidity", "intelligente Verträge", "Sicherheit" ] +skill: intermediate +published: 2020-09-07 +source: Building secure contracts +sourceUrl: https://github.com/crytic/building-secure-contracts/tree/master/program-analysis +--- + +Wir werden drei verschiedene Test- und Programmanalysetechniken verwenden: + +- **Statische Analyse mit [Slither](/developers/tutorials/how-to-use-slither-to-find-smart-contract-bugs/).** Alle Pfade des Programms werden gleichzeitig durch verschiedene Programmdarstellungen (z. B. Kontrollflussgraph) angenähert und analysiert. +- **Fuzzing mit [Echidna](/developers/tutorials/how-to-use-echidna-to-test-smart-contracts/).** Der Code wird mit einer pseudozufälligen Generierung von Transaktionen ausgeführt. Der Fuzzer versucht, eine Folge von Transaktionen zu finden, die eine bestimmte Eigenschaft verletzen. +- **Symbolische Ausführung mit [Manticore](/developers/tutorials/how-to-use-manticore-to-find-smart-contract-bugs/).** Eine formale Verifikationstechnik, die jeden Ausführungspfad in eine mathematische Formel übersetzt, anhand derer Einschränkungen überprüft werden können. + +Jede Technik hat ihre Vor- und Nachteile und ist in [bestimmten Fällen](#determining-security-properties) nützlich: + +| Technik | Werkzeug | Verwendung | Geschwindigkeit | Übersehene Fehler | Fehlalarme | +| ---------------------- | --------- | ---------------------------------------------------- | --------------- | ----------------- | ---------- | +| Statische Analyse | Slither | CLI & Skripte | Sekunden | moderat | gering | +| Fuzzing | Echidna | Solidity-Eigenschaften | Minuten | gering | keine | +| Symbolische Ausführung | Manticore | Solidity-Eigenschaften & Skripte | Stunden | keine\* | keine | + +- wenn alle Pfade ohne Zeitüberschreitung untersucht werden + +**Slither** analysiert Verträge innerhalb von Sekunden, allerdings kann eine statische Analyse zu Fehlalarmen führen und ist für komplexe Prüfungen (z. B. arithmetische Prüfungen) weniger geeignet. Führe Slither über die API aus, um per Knopfdruck auf integrierte Detektoren zuzugreifen, oder über die API für benutzerdefinierte Prüfungen. + +**Echidna** muss einige Minuten lang laufen und erzeugt nur echte Positiv-Ergebnisse. Echidna überprüft vom Benutzer bereitgestellte Sicherheitseigenschaften, die in Solidity geschrieben sind. Es können Fehler übersehen werden, da es auf einer zufälligen Untersuchung basiert. + +**Manticore** führt die "tiefgreifendste" Analyse durch. Wie Echidna verifiziert auch Manticore vom Benutzer bereitgestellte Eigenschaften. Die Ausführung dauert länger, aber es kann die Gültigkeit einer Eigenschaft beweisen und meldet keine Fehlalarme. + +## Empfohlener Arbeitsablauf {#suggested-workflow} + +Beginne mit den integrierten Detektoren von Slither, um sicherzustellen, dass jetzt und in Zukunft keine einfachen Fehler vorhanden sind. Verwende Slither, um Eigenschaften im Zusammenhang mit Vererbung, Variablenabhängigkeiten und strukturellen Problemen zu überprüfen. Wenn die Codebasis wächst, verwende Echidna, um komplexere Eigenschaften des Zustandsautomaten zu testen. Greife erneut auf Slither zurück, um benutzerdefinierte Prüfungen für Schutzmaßnahmen zu entwickeln, die in Solidity nicht verfügbar sind, wie z. B. den Schutz vor dem Überschreiben einer Funktion. Verwende schließlich Manticore, um eine gezielte Überprüfung kritischer Sicherheitseigenschaften durchzuführen, z. B. arithmetische Operationen. + +- Verwende die CLI von Slither, um häufige Probleme zu finden. +- Verwende Echidna, um übergeordnete Sicherheitseigenschaften deines Vertrags zu testen. +- Verwende Slither, um benutzerdefinierte statische Prüfungen zu schreiben. +- Verwende Manticore, wenn du eine tiefgehende Absicherung kritischer Sicherheitseigenschaften wünschst. + +**Ein Hinweis zu Unit-Tests**. Unit-Tests sind notwendig, um qualitativ hochwertige Software zu erstellen. Diese Techniken sind jedoch nicht am besten geeignet, um Sicherheitslücken zu finden. Sie werden typischerweise verwendet, um das positive Verhalten von Code zu testen (d. h. der Code funktioniert im normalen Kontext wie erwartet), während Sicherheitslücken eher in Grenzfällen auftreten, die die Entwickler nicht bedacht haben. In unserer Untersuchung von Dutzenden von Smart-Contract-Sicherheitsüberprüfungen hatte die [Unit-Test-Abdeckung keine Auswirkung auf die Anzahl oder den Schweregrad der Sicherheitslücken](https://blog.trailofbits.com/2019/08/08/246-findings-from-our-smart-contract-audits-an-executive-summary/), die wir im Code unserer Kunden fanden. + +## Bestimmung von Sicherheitseigenschaften {#determining-security-properties} + +Um deinen Code effektiv zu testen und zu verifizieren, musst du die Bereiche identifizieren, die Aufmerksamkeit erfordern. Da deine für die Sicherheit aufgewendeten Ressourcen begrenzt sind, ist es wichtig, die schwachen oder hochwertigen Teile deiner Codebasis zu bestimmen, um deinen Aufwand zu optimieren. Bedrohungsmodellierung kann dabei helfen. Ziehe Folgendes in Betracht: + +- [Rapid Risk Assessments](https://infosec.mozilla.org/guidelines/risk/rapid_risk_assessment.html) (unser bevorzugter Ansatz bei Zeitmangel) +- [Guide to Data-Centric System Threat Modeling](https://csrc.nist.gov/pubs/sp/800/154/ipd) (alias NIST 800-154) +- [Shostack Threat Modeling](https://www.amazon.com/Threat-Modeling-Designing-Adam-Shostack/dp/1118809998) +- [STRIDE](https://wikipedia.org/wiki/STRIDE_\(security\)) / [DREAD](https://wikipedia.org/wiki/DREAD_\(risk_assessment_model\)) +- [PASTA](https://wikipedia.org/wiki/Threat_model#P.A.S.T.A.) +- [Verwendung von Assertions](https://blog.regehr.org/archives/1091) + +### Komponenten {#components} + +Wenn du weißt, was du überprüfen willst, hilft dir das auch bei der Auswahl des richtigen Tools. + +Die allgemeinen Bereiche, die für Smart Contracts häufig relevant sind, umfassen: + +- **Zustandsautomat.** Die meisten Verträge lassen sich als Zustandsautomat darstellen. Überlege zu prüfen, ob (1) kein ungültiger Zustand erreicht werden kann, (2) ein gültiger Zustand erreicht werden kann und (3) kein Zustand den Vertrag blockiert. + + - Echidna und Manticore sind die zu bevorzugenden Tools, um die Spezifikationen von Zustandsautomaten zu testen. + +- **Zugriffskontrollen.** Wenn dein System privilegierte Benutzer hat (z. B. einen Eigentümer, Controller, ...) musst du sicherstellen, dass (1) jeder Benutzer nur die autorisierten Aktionen durchführen kann und (2) kein Benutzer Aktionen eines privilegierteren Benutzers blockieren kann. + + - Slither, Echidna und Manticore können korrekte Zugriffskontrollen überprüfen. Slither kann zum Beispiel überprüfen, dass nur bei Funktionen auf der Whitelist der onlyOwner-Modifikator fehlt. Echidna und Manticore sind für komplexere Zugriffskontrollen nützlich, z. B. für eine Berechtigung, die nur erteilt wird, wenn der Vertrag einen bestimmten Zustand erreicht. + +- **Arithmetische Operationen.** Die Überprüfung der Korrektheit der arithmetischen Operationen ist entscheidend. Die durchgängige Verwendung von `SafeMath` ist ein guter Schritt, um Über- und Unterläufe zu verhindern. Dennoch musst du andere arithmetische Fehler berücksichtigen, einschließlich Rundungsfehler und Fehler, die den Vertrag blockieren. + + - Manticore ist hier die beste Wahl. Echidna kann verwendet werden, wenn die Arithmetik außerhalb des Bereichs des SMT-Solvers liegt. + +- **Korrektheit der Vererbung.** Solidity-Verträge stützen sich stark auf Mehrfachvererbung. Fehler wie eine überschattende Funktion, bei der ein `super`-Aufruf fehlt, und eine falsch interpretierte c3-Linearisierungsreihenfolge können leicht entstehen. + + - Slither ist das Tool, um die Erkennung dieser Probleme sicherzustellen. + +- **Externe Interaktionen.** Verträge interagieren miteinander, und einigen externen Verträgen sollte man nicht vertrauen. Wenn dein Vertrag zum Beispiel von externen Orakeln abhängt, bleibt er dann sicher, wenn die Hälfte der verfügbaren Orakel kompromittiert ist? + + - Manticore und Echidna sind die beste Wahl, um externe Interaktionen mit deinen Verträgen zu testen. Manticore verfügt über einen eingebauten Mechanismus, um externe Verträge zu stubben. + +- **Standardkonformität.** Ethereum-Standards (z. B. ERC20) weisen in ihrer Entwurfsgeschichte immer wieder Fehler auf. Sei dir der Einschränkungen des Standards bewusst, auf dem du aufbaust. + - Slither, Echidna und Manticore helfen dir dabei, Abweichungen von einem bestimmten Standard zu erkennen. + +### Spickzettel zur Werkzeugauswahl {#tool-selection-cheatsheet} + +| Komponente | Tools | Beispiele | +| ------------------------- | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Zustandsautomat | Echidna, Manticore | | +| Zugriffskontrolle | Slither, Echidna, Manticore | [Slither-Übung 2](https://github.com/crytic/slither/blob/7f54c8b948c34fb35e1d61adaa1bd568ca733253/docs/src/tutorials/exercise2.md), [Echidna-Übung 2](https://github.com/crytic/building-secure-contracts/blob/master/program-analysis/echidna/exercises/Exercise-2.md) | +| Arithmetische Operationen | Manticore, Echidna | [Echidna-Übung 1](https://github.com/crytic/building-secure-contracts/blob/master/program-analysis/echidna/exercises/Exercise-1.md), [Manticore-Übungen 1 - 3](https://github.com/crytic/building-secure-contracts/tree/master/program-analysis/manticore/exercises) | +| Korrektheit der Vererbung | Slither | [Slither-Übung 1](https://github.com/crytic/slither/blob/7f54c8b948c34fb35e1d61adaa1bd568ca733253/docs/src/tutorials/exercise1.md) | +| Externe Interaktionen | Manticore, Echidna | | +| Standardkonformität | Slither, Echidna, Manticore | [`slither-erc`](https://github.com/crytic/slither/wiki/ERC-Conformance) | + +Je nach deinen Zielen müssen auch andere Bereiche überprüft werden, aber diese grob umrissenen Schwerpunktbereiche sind ein guter Anfang für jedes Smart-Contract-System. + +Unsere öffentlichen Audits enthalten Beispiele für verifizierte oder getestete Eigenschaften. Lies die Abschnitte `Automated Testing and Verification` der folgenden Berichte, um dir Sicherheitseigenschaften aus der Praxis anzusehen: + +- [0x](https://github.com/trailofbits/publications/blob/master/reviews/0x-protocol.pdf) +- [Balancer](https://github.com/trailofbits/publications/blob/master/reviews/BalancerCore.pdf) diff --git a/public/content/translations/de/developers/tutorials/hello-world-smart-contract-fullstack/index.md b/public/content/translations/de/developers/tutorials/hello-world-smart-contract-fullstack/index.md new file mode 100644 index 00000000000..616ee0f18c0 --- /dev/null +++ b/public/content/translations/de/developers/tutorials/hello-world-smart-contract-fullstack/index.md @@ -0,0 +1,1544 @@ +--- +title: "Hello World Smart-Contract für Einsteiger – Fullstack" +description: "Einführungstutorial zum Schreiben und Bereitstellen eines einfachen Smart Contracts auf Ethereum." +author: "nstrike2" +tags: + [ + "solidity", + "Hardhat", + "Alchemy", + "intelligente Verträge", + "Bereitstellung", + "Block-Explorer", + "Frontend", + "Transaktionen" + ] +skill: beginner +lang: de +published: 2021-10-25 +--- + +Dieser Leitfaden ist für Sie, wenn Sie neu in der Blockchain-Entwicklung sind und nicht wissen, wo Sie anfangen sollen oder wie Sie Smart Contracts bereitstellen und mit ihnen interagieren können. Wir werden die Erstellung und Bereitstellung eines einfachen Smart Contracts im Goerli-Testnet unter Verwendung von [MetaMask](https://metamask.io), [Solidity](https://docs.soliditylang.org/en/v0.8.0/), [Hardhat](https://hardhat.org) und [Alchemy](https://alchemy.com/eth) durchgehen. + +Sie benötigen ein Alchemy-Konto, um dieses Tutorial abzuschließen. [Registrieren Sie sich für ein kostenloses Konto](https://www.alchemy.com/). + +Wenn Sie zu irgendeinem Zeitpunkt Fragen haben, können Sie sich gerne im [Alchemy Discord](https://discord.gg/gWuC7zB) melden! + +## Teil 1 – Erstellen und Bereitstellen Ihres Smart Contracts mit Hardhat {#part-1} + +### Verbindung mit dem Ethereum-Netzwerk herstellen {#connect-to-the-ethereum-network} + +Es gibt viele Möglichkeiten, Anfragen an die Ethereum-Chain zu stellen. Der Einfachheit halber verwenden wir ein kostenloses Konto bei Alchemy, einer Blockchain-Entwicklerplattform und API, die es uns ermöglicht, mit der Ethereum-Chain zu kommunizieren, ohne selbst einen Node betreiben zu müssen. Alchemy verfügt auch über Entwickler-Tools für Monitoring und Analytik; wir werden diese in diesem Tutorial nutzen, um zu verstehen, was bei der Bereitstellung unseres Smart Contracts „unter der Haube“ passiert. + +### Erstellen Sie Ihre App und Ihren API-Schlüssel {#create-your-app-and-api-key} + +Sobald Sie ein Alchemy-Konto erstellt haben, können Sie einen API-Schlüssel generieren, indem Sie eine App erstellen. Damit können Sie Anfragen an das Goerli-Testnet stellen. Wenn Sie mit Testnets nicht vertraut sind, können Sie [Alchemys Leitfaden zur Auswahl eines Netzwerks](https://www.alchemy.com/docs/choosing-a-web3-network) lesen. + +Suchen Sie auf dem Alchemy-Dashboard das Dropdown-Menü **Apps** in der Navigationsleiste und klicken Sie auf **App erstellen**. + + + +Geben Sie Ihrer App den Namen „_Hello World_“ und schreiben Sie eine kurze Beschreibung. Wählen Sie **Staging** als Ihre Umgebung und **Goerli** als Ihr Netzwerk. + + + +_Hinweis: Wählen Sie unbedingt **Goerli** aus, sonst funktioniert dieses Tutorial nicht._ + +Klicken Sie auf **App erstellen**. Ihre App wird in der folgenden Tabelle angezeigt. + +### Ein Ethereum-Konto erstellen {#create-an-ethereum-account} + +Sie benötigen ein Ethereum-Konto, um Transaktionen zu senden und zu empfangen. Wir verwenden MetaMask, eine virtuelle Wallet im Browser, mit der Benutzer ihre Ethereum-Kontoadresse verwalten können. + +Sie können MetaMask [hier](https://metamask.io/download) kostenlos herunterladen und ein Konto erstellen. Wenn Sie ein Konto erstellen oder bereits eines haben, stellen Sie sicher, dass Sie oben rechts zum „Goerli Test Network“ wechseln (damit wir nicht mit echtem Geld arbeiten). + +### Schritt 4: Ether von einem Faucet hinzufügen {#step-4-add-ether-from-a-faucet} + +Um Ihren Smart Contract im Testnet bereitzustellen, benötigen Sie einige Fake-ETH. Um ETH im Goerli-Netzwerk zu erhalten, gehen Sie zu einem Goerli-Faucet und geben Sie Ihre Goerli-Kontoadresse ein. Beachten Sie, dass Goerli-Faucets in letzter Zeit etwas unzuverlässig sein können – auf der [Seite der Testnets](/developers/docs/networks/#goerli) finden Sie eine Liste mit Optionen, die Sie ausprobieren können: + +_Hinweis: Aufgrund von Netzwerküberlastung kann dies eine Weile dauern._ +`` + +### Schritt 5: Überprüfen Sie Ihr Guthaben {#step-5-check-your-balance} + +Um zu überprüfen, ob sich die ETH in Ihrer Wallet befinden, stellen wir eine [eth_getBalance](https://docs.alchemyapi.io/alchemy/documentation/alchemy-api-reference/json-rpc#eth_getbalance)-Anfrage mit dem [Composer-Tool von Alchemy](https://composer.alchemyapi.io/?composer_state=%7B%22network%22%3A0%2C%22methodName%22%3A%22eth_getBalance%22%2C%22paramValues%22%3A%5B%22%22%2C%22latest%22%5D%7D). Das gibt den ETH-Betrag in unserem Wallet wieder. Um mehr zu erfahren, sehen Sie sich [Alchemys kurzes Tutorial zur Verwendung des Composer-Tools](https://youtu.be/r6sjRxBZJuU) an. + +Geben Sie Ihre MetaMask-Kontoadresse ein und klicken Sie auf **Anfrage senden**. Sie sehen eine Antwort, die wie der folgende Codeausschnitt aussieht. + +```json +{ "jsonrpc": "2.0", "id": 0, "result": "0x2B5E3AF16B1880000" } +``` + +> _HINWEIS: Dieses Ergebnis ist in wei, nicht in ETH, angegeben._ Wei ist die kleinste Einheit von Ether._ + +Puh! Unser Falschgeld ist da. + +### Schritt 6: Initialisieren unseres Projekts {#step-6-initialize-our-project} + +Zunächst müssen wir einen Ordner für unser Projekt erstellen. Navigieren Sie zu Ihrer Kommandozeile und geben Sie Folgendes ein. + +``` +mkdir hello-world +cd hello-world +``` + +Da wir uns nun in unserem Projektordner befinden, verwenden wir `npm init`, um das Projekt zu initialisieren. + +> Wenn Sie npm noch nicht installiert haben, befolgen Sie [diese Anweisungen zur Installation von Node.js und npm](https://docs.alchemyapi.io/alchemy/guides/alchemy-for-macs#1-install-nodejs-and-npm). + +Für den Zweck dieses Tutorials spielt es keine Rolle, wie Sie die Initialisierungsfragen beantworten. Hier ist, wie wir es als Referenz gemacht haben: + +``` +package name: (hello-world) +version: (1.0.0) +description: hallo Welt Smart Contract +entry point: (index.js) +test command: +git repository: +keywords: +author: +license: (ISC) + +About to write to /Users/.../.../.../hello-world/package.json: + +{ + "name": "hello-world", + "version": "1.0.0", + "description": "hallo Welt Smart Contract", + "main": "index.js", + "scripts": { + "test": "echo \"Fehler: kein Test angegeben\" && exit 1" + }, + "author": "", + "license": "ISC" +} +``` + +Bestätigen Sie die package.json und schon kann es losgehen! + +### Schritt 7: Hardhat herunterladen {#step-7-download-hardhat} + +Hardhat ist eine Entwicklungsumgebung zum Kompilieren, Bereitstellen, Testen und Debuggen Ihrer Ethereum-Software. Es hilft Entwicklern Smart Contracts und dApps lokal zu erstellen, bevor diese auf der Live-Chain bereitgestellt werden. + +Führen Sie in unserem `hello-world`-Projekt Folgendes aus: + +``` +npm install --save-dev hardhat +``` + +Weitere Details zu den [Installationsanweisungen](https://hardhat.org/getting-started/#overview) finden Sie auf dieser Seite. + +### Schritt 8: Hardhat-Projekt erstellen {#step-8-create-hardhat-project} + +Führen Sie im Projektordner `hello-world` Folgendes aus: + +``` +npx hardhat +``` + +Sie sollten dann eine Willkommensnachricht sehen und die Möglichkeit haben, auszuwählen, wie Sie fortfahren möchten. Wählen Sie "create an empty hardhat.config.js" (Leere hardhat.config.js erstellen) aus: + +``` +888 888 888 888 888 +888 888 888 888 888 +888 888 888 888 888 +8888888888 8888b. 888d888 .d88888 88888b. 8888b. 888888 +888 888 "88b 888P" d88" 888 888 "88b "88b 888 +888 888 .d888888 888 888 888 888 888 .d888888 888 +888 888 888 888 888 Y88b 888 888 888 888 888 Y88b. +888 888 "Y888888 888 "Y88888 888 888 "Y888888 "Y888 + +👷 Welcome to Hardhat v2.0.11 👷 + +What do you want to do? … +Create a sample project +❯ Create an empty hardhat.config.js +Quit +``` + +Dadurch wird eine `hardhat.config.js`-Datei im Projekt generiert. Wir werden dies später im Tutorial verwenden, um das Setup für unser Projekt festzulegen. + +### Schritt 9: Projektordner hinzufügen {#step-9-add-project-folders} + +Um das Projekt zu organisieren, erstellen wir zwei neue Ordner. Navigieren Sie in der Kommandozeile zum Stammverzeichnis Ihres `hello-world`-Projekts und geben Sie ein: + +``` +mkdir contracts +mkdir scripts +``` + +- `contracts/` ist der Ort, an dem wir unsere `Hello-World-Smart-Contract`-Codedatei aufbewahren. +- `scripts/` ist der Ort, an dem wir Skripte zur Bereitstellung und Interaktion mit unserem Vertrag aufbewahren. + +### Schritt 10: Schreiben unseres Vertrags {#step-10-write-our-contract} + +Sie fragen sich vielleicht, wann wir anfangen, Code zu schreiben? Es ist soweit! + +Öffnen Sie das hello-world-Projekt in Ihrem bevorzugten Editor. Smart Contracts werden meistens in Solidity geschrieben, was wir verwenden werden, um unseren Smart Contract zu schreiben. + +1. Navigieren Sie zum `contracts`-Ordner und erstellen Sie eine neue Datei namens `HelloWorld.sol` +2. Unten ist ein Beispiel für einen Hallo-Welt-Smart-Contract, den wir für dieses Tutorial verwenden werden. Kopieren Sie den folgenden Inhalt in die `HelloWorld.sol`-Datei. + +_Hinweis: Lesen Sie unbedingt die Kommentare, um zu verstehen, was dieser Vertrag bewirkt._ + +``` +// Gibt die Version von Solidity an, unter Verwendung von semantischer Versionierung. +// Mehr erfahren: https://solidity.readthedocs.io/en/v0.5.10/layout-of-source-files.html#pragma +pragma solidity >=0.7.3; + +// Definiert einen Vertrag namens `HelloWorld`. +// Ein Vertrag ist eine Sammlung von Funktionen und Daten (seinem Zustand). Nach der Bereitstellung befindet sich ein Vertrag an einer bestimmten Adresse auf der Ethereum-Blockchain. Mehr erfahren: https://solidity.readthedocs.io/en/v0.5.10/structure-of-a-contract.html +contract HelloWorld { + + //Wird ausgegeben, wenn die update-Funktion aufgerufen wird + //Smart-Contract-Ereignisse sind eine Möglichkeit für Ihren Vertrag, Ihrer App-Frontend mitzuteilen, dass auf der Blockchain etwas passiert ist. Das Frontend kann auf bestimmte Ereignisse „hören“ und bei deren Eintreten Maßnahmen ergreifen. + event UpdatedMessages(string oldStr, string newStr); + + // Deklariert eine Zustandsvariable `message` vom Typ `string`. + // Zustandsvariablen sind Variablen, deren Werte dauerhaft im Vertragsspeicher gespeichert werden. Das Schlüsselwort `public` macht Variablen von außerhalb eines Vertrags zugänglich und erstellt eine Funktion, die andere Verträge oder Clients aufrufen können, um auf den Wert zuzugreifen. + string public message; + + // Ähnlich wie in vielen klassenbasierten objektorientierten Sprachen ist ein Konstruktor eine spezielle Funktion, die nur bei der Erstellung des Vertrags ausgeführt wird. + // Konstruktoren werden verwendet, um die Daten des Vertrags zu initialisieren. Mehr erfahren:https://solidity.readthedocs.io/en/v0.5.10/contracts.html#constructors + constructor(string memory initMessage) { + + // Akzeptiert ein String-Argument `initMessage` und setzt den Wert in die Speichervariable `message` des Vertrags). + message = initMessage; + } + + // Eine öffentliche Funktion, die ein String-Argument akzeptiert und die Speichervariable `message` aktualisiert. + function update(string memory newMessage) public { + string memory oldMsg = message; + message = newMessage; + emit UpdatedMessages(oldMsg, newMessage); + } +} +``` + +Dies ist ein einfacher Smart Contract, der bei der Erstellung eine Nachricht speichert. Er kann durch Aufrufen der `update`-Funktion aktualisiert werden. + +### Schritt 11: Verbinden Sie MetaMask und Alchemy mit Ihrem Projekt {#step-11-connect-metamask-alchemy-to-your-project} + +Wir haben eine MetaMask-Wallet und ein Alchemy-Konto erstellt und unseren Smart Contract geschrieben. Jetzt ist es an der Zeit, die drei zu verbinden. + +Jede von Ihrer Wallet gesendete Transaktion erfordert eine Signatur mit Ihrem eindeutigen privaten Schlüssel. Um unserem Programm diese Berechtigung zu erteilen, können wir unseren privaten Schlüssel sicher in einer Umgebungsdatei speichern. Wir werden hier auch einen API-Schlüssel für Alchemy speichern. + +> Um mehr über das Senden von Transaktionen zu erfahren, lesen Sie [dieses Tutorial](https://www.alchemy.com/docs/hello-world-smart-contract#step-11-connect-metamask--alchemy-to-your-project) über das Senden von Transaktionen mit web3. + +Installieren Sie zuerst das dotenv-Paket in Ihrem Projektverzeichnis: + +``` +npm install dotenv --save +``` + +Erstellen Sie dann eine `.env`-Datei im Stammverzeichnis des Projekts. Fügen Sie Ihren privaten MetaMask-Schlüssel und die HTTP-Alchemy-API-URL hinzu. + +Ihre Umgebungsdatei muss den Namen `.env` haben, sonst wird sie nicht als Umgebungsdatei erkannt. + +Nennen Sie sie nicht `process.env` oder `.env-custom` oder irgendetwas anderes. + +- Befolgen Sie [diese Anweisungen](https://metamask.zendesk.com/hc/en-us/articles/360015289632-How-to-Export-an-Account-Private-Key), um Ihren privaten Schlüssel zu exportieren +- Siehe unten, um die HTTP Alchemy API-URL zu erhalten + + + +Ihre `.env`-Datei sollte wie folgt aussehen: + +``` +API_URL = "https://eth-goerli.alchemyapi.io/v2/your-api-key" +PRIVATE_KEY = "your-metamask-private-key" +``` + +Um diese tatsächlich mit unserem Code zu verbinden, verweisen wir in Schritt 13 in unserer `hardhat.config.js`-Datei auf diese Variablen. + +### Schritt 12: Ethers.js installieren {#step-12-install-ethersjs} + +Ethers.js ist eine Bibliothek, die es einfacher macht, mit Ethereum zu interagieren und Anfragen zu stellen, indem sie [standardmäßige JSON-RPC-Methoden](https://docs.alchemyapi.io/alchemy/documentation/alchemy-api-reference/json-rpc) mit benutzerfreundlicheren Methoden umschließt. + +Hardhat ermöglicht es uns, [Plugins](https://hardhat.org/plugins/) für zusätzliche Tools und erweiterte Funktionalität zu integrieren. Wir werden das [Ethers-Plugin](https://hardhat.org/docs/plugins/official-plugins#hardhat-ethers) für die Vertragsbereitstellung nutzen. + +Geben Sie Folgendes in Ihrem Projektverzeichnis ein: + +```bash +npm install --save-dev @nomiclabs/hardhat-ethers "ethers@^5.0.0" +``` + +### Schritt 13: Aktualisieren der hardhat.config.js {#step-13-update-hardhat-configjs} + +Wir haben bisher mehrere Abhängigkeiten und Plugins hinzugefügt. Jetzt müssen wir `hardhat.config.js` aktualisieren, damit unser Projekt alle kennt. + +Aktualisieren Sie Ihre `hardhat.config.js`, sodass sie wie folgt aussieht: + +```javascript +/** + * @type import('hardhat/config').HardhatUserConfig + */ + +require("dotenv").config() +require("@nomiclabs/hardhat-ethers") + +const { API_URL, PRIVATE_KEY } = process.env + +module.exports = { + solidity: "0.7.3", + defaultNetwork: "goerli", + networks: { + hardhat: {}, + goerli: { + url: API_URL, + accounts: [`0x${PRIVATE_KEY}`], + }, + }, +} +``` + +### Schritt 14: Kompilieren unseres Vertrags {#step-14-compile-our-contract} + +Um sicherzugehen, dass so weit alles funktioniert, sollten wir unseren Vertrag erstellen. Der `compile`-Task ist einer der integrierten Hardhat-Tasks. + +Führen Sie folgenden Befehl in der Befehlszeile aus: + +```bash +npx hardhat compile +``` + +Möglicherweise erhalten Sie eine Warnung über `SPDX license identifier not provided in source file`, aber machen Sie sich darüber keine Sorgen – hoffentlich sieht alles andere gut aus! Wenn nicht, können Sie jederzeit eine Nachricht im [Alchemy-Discord](https://discord.gg/u72VCg3) schreiben. + +### Schritt 15: Schreiben unseres Bereitstellungsskripts {#step-15-write-our-deploy-script} + +Nun, da unser Vertrag geschrieben und unsere Konfigurationsdatei einsatzbereit ist, ist es an der Zeit, das Skript zur Bereitstellung des Vertrags zu schreiben. + +Navigieren Sie zum Ordner `scripts/` und erstellen Sie eine neue Datei namens `deploy.js`, und fügen Sie ihr den folgenden Inhalt hinzu: + +```javascript +async function main() { + const HelloWorld = await ethers.getContractFactory("HelloWorld") + + // Startet die Bereitstellung und gibt ein Promise zurück, das zu einem Vertragsobjekt aufgelöst wird + const hello_world = await HelloWorld.deploy("Hello World!") + console.log("Vertrag bereitgestellt unter Adresse:", hello_world.address) +} + +main() + .then(() => process.exit(0)) + .catch((error) => { + console.error(error) + process.exit(1) + }) +``` + +Hardhat erklärt in seinem [Contracts-Tutorial](https://hardhat.org/tutorial/testing-contracts.html#writing-tests) hervorragend, was jede dieser Codezeilen bewirkt; wir haben die Erklärungen hier übernommen. + +```javascript +const HelloWorld = await ethers.getContractFactory("HelloWorld") +``` + +Eine `ContractFactory` in ethers.js ist eine Abstraktion, die verwendet wird, um neue Smart Contracts bereitzustellen. `HelloWorld` ist hier also eine [Factory](https://en.wikipedia.org/wiki/Factory_\(object-oriented_programming\)) für Instanzen unseres Hallo-Welt-Vertrags. Bei der Verwendung des `hardhat-ethers`-Plugins werden `ContractFactory`- und `Contract`-Instanzen standardmäßig mit dem ersten Unterzeichner (Besitzer) verbunden. + +```javascript +const hello_world = await HelloWorld.deploy() +``` + +Der Aufruf von `deploy()` auf einer `ContractFactory` startet die Bereitstellung und gibt ein `Promise` zurück, das zu einem `Contract`-Objekt aufgelöst wird. Das ist das Objekt, das eine Methode für jede unserer Smart-Contract-Funktionen enthält. + +### Schritt 16: Unseren Vertrag bereitstellen {#step-16-deploy-our-contract} + +Nun sind wir endlich bereit, unseren Smart Contract bereitzustellen. Navigieren Sie zur Befehlszeile und führen Sie Folgendes aus: + +```bash +npx hardhat run scripts/deploy.js --network goerli +``` + +Sie sollten dann etwas sehen wie: + +```bash +Contract deployed to address: 0x6cd7d44516a20882cEa2DE9f205bF401c0d23570 +``` + +**Bitte speichern Sie diese Adresse**. Wir werden sie später im Tutorial verwenden. + +Wenn wir zum [Goerli-Etherscan](https://goerli.etherscan.io) gehen und nach unserer Vertragsadresse suchen, sollten wir sehen können, dass sie erfolgreich bereitgestellt wurde. Die Transaktion wird ungefähr so aussehen: + + + +Die `From`-Adresse sollte mit Ihrer MetaMask-Kontoadresse übereinstimmen und die `To`-Adresse lautet **Vertragserstellung**. Wenn wir auf die Transaktion klicken, sehen wir unsere Vertragsadresse im `To`-Feld. + + + +Glückwunsch! Sie haben gerade einen Smart Contract in einem Ethereum-Testnet bereitgestellt. + +Um zu verstehen, was „unter der Haube“ vor sich geht, navigieren wir zum Explorer-Tab in unserem [Alchemy-Dashboard](https://dashboard.alchemy.com/explorer). Wenn Sie mehrere Alchemy-Apps haben, stellen Sie sicher, dass Sie nach App filtern und **Hello World** auswählen. + + + +Hier sehen Sie eine Handvoll JSON-RPC-Methoden, die Hardhat/Ethers für uns „unter der Haube“ ausgeführt hat, als wir die `.deploy()`-Funktion aufgerufen haben. Zwei wichtige Methoden sind hier [`eth_sendRawTransaction`](https://docs.alchemyapi.io/alchemy/documentation/alchemy-api-reference/json-rpc#eth_sendrawtransaction), das ist die Anforderung, unseren Vertrag in die Goerli-Chain zu schreiben, und [`eth_getTransactionByHash`](https://docs.alchemyapi.io/alchemy/documentation/alchemy-api-reference/json-rpc#eth_gettransactionbyhash), eine Anforderung zum Lesen von Informationen über unsere Transaktion anhand des Hashes. Um mehr über das Senden von Transaktionen zu erfahren, lesen Sie unser [Tutorial zum Senden von Transaktionen mit Web3](/developers/tutorials/sending-transactions-using-web3-and-alchemy/). + +## Teil 2: Interaktion mit Ihrem Smart Contract {#part-2-interact-with-your-smart-contract} + +Nachdem wir nun erfolgreich einen Smart Contract im Goerli-Netzwerk bereitgestellt haben, lernen wir, wie man mit ihm interagiert. + +### Eine interact.js-Datei erstellen {#create-a-interactjs-file} + +Dies ist die Datei, in die wir unser Interaktionsskript schreiben werden. Wir werden die Ethers.js-Bibliothek verwenden, die Sie zuvor in Teil 1 installiert haben. + +Erstellen Sie im Ordner `scripts/` eine neue Datei namens `interact.js` und fügen Sie den folgenden Code hinzu: + +```javascript +// interact.js + +const API_KEY = process.env.API_KEY +const PRIVATE_KEY = process.env.PRIVATE_KEY +const CONTRACT_ADDRESS = process.env.CONTRACT_ADDRESS +``` + +### Aktualisieren Sie Ihre .env-Datei {#update-your-env-file} + +Wir werden neue Umgebungsvariablen verwenden, also müssen wir sie in der `.env`-Datei definieren, die [wir zuvor erstellt haben](#step-11-connect-metamask-&-alchemy-to-your-project). + +Wir müssen eine Definition für unseren Alchemy `API_KEY` und die `CONTRACT_ADDRESS` hinzufügen, unter der Ihr Smart Contract bereitgestellt wurde. + +Ihre `.env`-Datei sollte ungefähr so aussehen: + +```bash +# .env + +API_URL = "https://eth-goerli.alchemyapi.io/v2/
+ 
+
+
+
+)
+```
+
+Wenn Sie diesen Code sorgfältig scannen, werden Sie feststellen, wo wir unsere verschiedenen Zustandsvariablen in unserer Benutzeroberfläche verwenden:
+
+- In den Zeilen 6-12, wenn die Wallet des Benutzers verbunden ist (d. h. `walletAddress.length > 0`), zeigen wir eine gekürzte Version der Benutzer-`walletAddress` in der Schaltfläche mit der ID „walletButton“ an; andernfalls steht dort einfach „Wallet verbinden“.
+- In Zeile 17 zeigen wir die aktuelle Nachricht an, die im Smart Contract gespeichert ist und im `message`-String erfasst wird.
+- In den Zeilen 23–26 verwenden wir eine [kontrollierte Komponente](https://legacy.reactjs.org/docs/forms.html#controlled-components), um unsere `newMessage`-Zustandsvariable zu aktualisieren, wenn sich die Eingabe im Textfeld ändert.
+
+Zusätzlich zu unseren Zustandsvariablen sehen Sie auch, dass die Funktionen `connectWalletPressed` und `onUpdatePressed` aufgerufen werden, wenn die Schaltflächen mit den IDs `publishButton` bzw. `walletButton` geklickt werden.
+
+Lassen Sie uns schließlich klären, wo diese `HelloWorld.js`-Komponente hinzugefügt wird.
+
+Wenn Sie zur `App.js`-Datei gehen, die die Hauptkomponente in React ist und als Container für alle anderen Komponenten dient, werden Sie sehen, dass unsere `HelloWorld.js`-Komponente in Zeile 7 eingefügt wird.
+
+Zu guter Letzt wollen wir uns noch eine weitere für Sie bereitgestellte Datei ansehen, die `interact.js`-Datei.
+
+#### Die `interact.js`-Datei {#the-interact-js-file}
+
+Da wir uns an das [M-V-C](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)-Paradigma halten wollen, benötigen wir eine separate Datei, die alle unsere Funktionen zur Verwaltung der Logik, Daten und Regeln unserer Dapp enthält, und diese Funktionen dann in unser Frontend (unsere `HelloWorld.js`-Komponente) exportieren können.
+
+👆🏽Dies ist genau der Zweck unserer `interact.js`-Datei!
+
+Navigieren Sie zum `util`-Ordner in Ihrem `src`-Verzeichnis, und Sie werden feststellen, dass wir eine Datei namens `interact.js` beigefügt haben, die alle unsere Smart-Contract-Interaktions- und Wallet-Funktionen und -Variablen enthalten wird.
+
+```javascript
+// interact.js
+
+//export const helloWorldContract;
+
+export const loadCurrentMessage = async () => {}
+
+export const connectWallet = async () => {}
+
+const getCurrentWalletConnected = async () => {}
+
+export const updateMessage = async (message) => {}
+```
+
+Sie werden am Anfang der Datei feststellen, dass wir das `helloWorldContract`-Objekt auskommentiert haben. Später in diesem Tutorial werden wir dieses Objekt entkommentieren und unseren Smart Contract in dieser Variable instanziieren, die wir dann in unsere `HelloWorld.js`-Komponente exportieren werden.
+
+Die vier nicht implementierten Funktionen nach unserem `helloWorldContract`-Objekt tun Folgendes:
+
+- `loadCurrentMessage` – diese Funktion behandelt die Logik zum Laden der aktuellen Nachricht, die im Smart Contract gespeichert ist. Es wird ein _Lese_-Aufruf an den Hallo-Welt-Smart-Contract über die [Alchemy Web3 API](https://github.com/alchemyplatform/alchemy-web3) gemacht.
+- `connectWallet` – diese Funktion verbindet die MetaMask des Benutzers mit unserer Dapp.
+- `getCurrentWalletConnected` – diese Funktion prüft, ob beim Laden der Seite bereits ein Ethereum-Konto mit unserer Dapp verbunden ist, und aktualisiert unsere Benutzeroberfläche entsprechend.
+- `updateMessage` – diese Funktion aktualisiert die im Smart Contract gespeicherte Nachricht. Es wird ein _Schreib_-Aufruf an den Hallo-Welt-Smart-Contract gemacht, sodass die MetaMask-Wallet des Benutzers eine Ethereum-Transaktion signieren muss, um die Nachricht zu aktualisieren.
+
+Jetzt, da wir verstehen, womit wir arbeiten, lassen Sie uns herausfinden, wie wir aus unserem Smart Contract lesen können!
+
+### Schritt 3: Lesen aus Ihrem Smart Contract {#step-3-read-from-your-smart-contract}
+
+Um aus Ihrem Smart Contract zu lesen, müssen Sie erfolgreich Folgendes einrichten:
+
+- Eine API-Verbindung zur Ethereum-Chain
+- Eine geladene Instanz Ihres Smart Contracts
+- Eine Funktion zum Aufrufen Ihrer Smart-Contract-Funktion
+- Ein Listener, der auf Aktualisierungen achtet, wenn sich die Daten, die Sie aus dem Smart Contract lesen, ändern
+
+Das mag nach vielen Schritten klingen, aber keine Sorge! Wir führen Sie Schritt für Schritt durch jeden einzelnen davon! :\)
+
+#### Eine API-Verbindung zur Ethereum-Chain herstellen {#establish-an-api-connection-to-the-ethereum-chain}
+
+Erinnern Sie sich, wie wir in Teil 2 dieses Tutorials unseren [Alchemy Web3-Schlüssel verwendet haben, um aus unserem Smart Contract zu lesen](https://docs.alchemy.com/alchemy/tutorials/hello-world-smart-contract/interacting-with-a-smart-contract#step-1-install-web3-library)? Sie benötigen auch einen Alchemy Web3-Schlüssel in Ihrer Dapp, um von der Chain zu lesen.
+
+Wenn Sie es noch nicht haben, installieren Sie zuerst [Alchemy Web3](https://github.com/alchemyplatform/alchemy-web3), indem Sie zum Stammverzeichnis Ihrer `starter-files` navigieren und Folgendes in Ihrem Terminal ausführen:
+
+```text
+npm install @alch/alchemy-web3
+```
+
+[Alchemy Web3](https://github.com/alchemyplatform/alchemy-web3) ist ein Wrapper um [Web3.js](https://docs.web3js.org/) und bietet erweiterte API-Methoden und andere entscheidende Vorteile, um dir das Leben als Web3-Entwickler zu erleichtern. Es ist so konzipiert, dass es eine minimale Konfiguration erfordert, sodass du es sofort in deiner App verwenden kannst!
+
+Installieren Sie dann das [dotenv](https://www.npmjs.com/package/dotenv)-Paket in Ihrem Projektverzeichnis, damit wir einen sicheren Ort haben, um unseren API-Schlüssel nach dem Abrufen zu speichern.
+
+```text
+npm install dotenv --save
+```
+
+Für unsere Dapp **werden wir unseren Websockets-API-Schlüssel** anstelle unseres HTTP-API-Schlüssels verwenden, da wir damit einen Listener einrichten können, der erkennt, wann sich die im Smart Contract gespeicherte Nachricht ändert.
+
+Sobald Sie Ihren API-Schlüssel haben, erstellen Sie eine `.env`-Datei in Ihrem Stammverzeichnis und fügen Sie Ihre Alchemy-Websockets-URL hinzu. Danach sollte Ihre `.env`-Datei so aussehen:
+
+```javascript
+REACT_APP_ALCHEMY_KEY = wss://eth-goerli.ws.alchemyapi.io/v2/Aktuelle Nachricht:
+{message}
+ +Neue Nachricht:
+ +
+ setNewMessage(e.target.value)}
+ value={newMessage}
+ />
+
+
+{status}
+ + ++ {" "} + 🦊 + Sie müssen MetaMask, eine virtuelle Ethereum-Wallet, in Ihrem + Browser installieren. + +
+ + ), + } + } +} +``` + +Also, was macht dieser riesige Codeblock genau? + +Zuerst prüft er, ob `window.ethereum` in Ihrem Browser aktiviert ist. + +`window.ethereum` ist eine globale API, die von MetaMask und anderen Wallet-Anbietern eingeschleust wird und es Websites ermöglicht, die Ethereum-Konten von Benutzern anzufordern. Wenn genehmigt, kann es Daten von den Blockchains lesen, mit denen der Benutzer verbunden ist, und dem Benutzer vorschlagen, Nachrichten und Transaktionen zu signieren. Weitere Informationen findest du in der [MetaMask-Dokumentation](https://docs.metamask.io/guide/ethereum-provider.html#table-of-contents)! + +Wenn `window.ethereum` _nicht_ vorhanden ist, bedeutet das, dass MetaMask nicht installiert ist. Dies führt dazu, dass ein JSON-Objekt zurückgegeben wird, bei dem die zurückgegebene `address` eine leere Zeichenfolge ist und das `status`-JSX-Objekt meldet, dass der Benutzer MetaMask installieren muss. + +Wenn `window.ethereum` jedoch vorhanden _ist_, dann wird es interessant. + +Mithilfe einer try/catch-Schleife versuchen wir, eine Verbindung zu MetaMask herzustellen, indem wir [`window.ethereum.request({ method: "eth_requestAccounts" });`](https://docs.metamask.io/guide/rpc-api.html#eth-requestaccounts) aufrufen. Der Aufruf dieser Funktion öffnet MetaMask im Browser, woraufhin der Benutzer aufgefordert wird, seine Wallet mit deiner Dapp zu verbinden. + +- Wenn der Benutzer sich entscheidet, eine Verbindung herzustellen, gibt `method: "eth_requestAccounts"` ein Array zurück, das alle Konto-Adressen des Benutzers enthält, die mit der Dapp verbunden sind. Insgesamt gibt unsere `connectWallet`-Funktion ein JSON-Objekt zurück, das die _erste_ `address` in diesem Array (siehe Zeile 9) und eine `status`-Nachricht enthält, die den Benutzer auffordert, eine Nachricht an den Smart Contract zu schreiben. +- Wenn der Benutzer die Verbindung ablehnt, enthält das JSON-Objekt eine leere Zeichenfolge für die zurückgegebene `address` und eine `status`-Nachricht, die widerspiegelt, dass der Benutzer die Verbindung abgelehnt hat. + +Nachdem wir diese `connectWallet`-Funktion geschrieben haben, ist der nächste Schritt, sie in unserer `HelloWorld.js`-Komponente aufzurufen. + +#### Die `connectWallet`-Funktion zu Ihrer `HelloWorld.js`-UI-Komponente hinzufügen {#add-the-connectWallet-function-to-your-HelloWorld-js-ui-component} + +Navigieren Sie zur `connectWalletPressed`-Funktion in `HelloWorld.js` und aktualisieren Sie sie wie folgt: + +```javascript +// HelloWorld.js + +const connectWalletPressed = async () => { + const walletResponse = await connectWallet() + setStatus(walletResponse.status) + setWallet(walletResponse.address) +} +``` + +Beachten Sie, wie der größte Teil unserer Funktionalität von unserer `HelloWorld.js`-Komponente aus der `interact.js`-Datei abstrahiert wird? Dies geschieht, damit wir dem M-V-C-Paradigma entsprechen! + +In `connectWalletPressed` machen wir einfach einen Await-Aufruf an unsere importierte `connectWallet`-Funktion, und mit ihrer Antwort aktualisieren wir unsere `status`- und `walletAddress`-Variablen über ihre State-Hooks. + +Lassen Sie uns nun beide Dateien (`HelloWorld.js` und `interact.js`) speichern und unsere bisherige Benutzeroberfläche testen. + +Öffnen Sie Ihren Browser auf der Seite [http://localhost:3000/](http://localhost:3000/) und drücken Sie die Schaltfläche „Wallet verbinden“ oben rechts auf der Seite. + +Wenn du MetaMask installiert hast, solltest du aufgefordert werden, deine Wallet mit deiner Dapp zu verbinden. Akzeptiere die Aufforderung, eine Verbindung herzustellen. + +Sie sollten sehen, dass die Wallet-Schaltfläche nun anzeigt, dass Ihre Adresse verbunden ist! Jaaaaa 🔥 + +Als Nächstes versuche, die Seite neu zu laden ... Das ist seltsam. Unsere Wallet-Schaltfläche fordert uns auf, MetaMask zu verbinden, obwohl es bereits verbunden ist ... + +Aber keine Angst! Wir können das leicht adressieren (verstanden?) indem wir `getCurrentWalletConnected` implementieren, das prüft, ob eine Adresse bereits mit unserer Dapp verbunden ist, und unsere Benutzeroberfläche entsprechend aktualisiert! + +#### Die `getCurrentWalletConnected`-Funktion {#the-getcurrentwalletconnected-function} + +Aktualisieren Sie Ihre `getCurrentWalletConnected`-Funktion in der `interact.js`-Datei wie folgt: + +```javascript +// interact.js + +export const getCurrentWalletConnected = async () => { + if (window.ethereum) { + try { + const addressArray = await window.ethereum.request({ + method: "eth_accounts", + }) + if (addressArray.length > 0) { + return { + address: addressArray[0], + status: "👆🏽 Schreiben Sie eine Nachricht in das Textfeld oben.", + } + } else { + return { + address: "", + status: "🦊 Verbinden Sie sich mit MetaMask über die Schaltfläche oben rechts.", + } + } + } catch (err) { + return { + address: "", + status: "😥 " + err.message, + } + } + } else { + return { + address: "", + status: ( + ++ {" "} + 🦊 + Sie müssen MetaMask, eine virtuelle Ethereum-Wallet, in Ihrem + Browser installieren. + +
+ + ), + } + } +} +``` + +Dieser Code ist _sehr_ ähnlich der `connectWallet`-Funktion, die wir gerade im vorherigen Schritt geschrieben haben. + +Der Hauptunterschied besteht darin, dass wir anstelle der Methode `eth_requestAccounts`, die MetaMask für den Benutzer öffnet, um seine Wallet zu verbinden, hier die Methode `eth_accounts` aufrufen, die einfach ein Array zurückgibt, das die MetaMask-Adressen enthält, die derzeit mit unserer Dapp verbunden sind. + +Um diese Funktion in Aktion zu sehen, rufen wir sie in unserer `useEffect`-Funktion unserer `HelloWorld.js`-Komponente auf: + +```javascript +// HelloWorld.js + +useEffect(async () => { + const message = await loadCurrentMessage() + setMessage(message) + addSmartContractListener() + + const { address, status } = await getCurrentWalletConnected() + setWallet(address) + setStatus(status) +}, []) +``` + +Beachte, dass wir die Antwort unseres Aufrufs an `getCurrentWalletConnected` verwenden, um unsere `walletAddress`- und `status`-Zustandsvariablen zu aktualisieren. + +Nachdem Sie diesen Code hinzugefügt haben, versuchen wir, unser Browserfenster zu aktualisieren. + +Nett! Die Schaltfläche sollte anzeigen, dass du verbunden bist, und eine Vorschau der Adresse deiner verbundenen Wallet anzeigen – auch nach dem Aktualisieren! + +#### Implementieren Sie `addWalletListener` {#implement-addwalletlistener} + +Der letzte Schritt in der Einrichtung unserer Dapp-Wallet ist die Implementierung des Wallet-Listeners, damit unsere Benutzeroberfläche aktualisiert wird, wenn sich der Zustand unserer Wallet ändert, z. B. wenn der Benutzer die Verbindung trennt oder das Konto wechselt. + +Ändern Sie in Ihrer `HelloWorld.js`-Datei Ihre `addWalletListener`-Funktion wie folgt: + +```javascript +// HelloWorld.js + +function addWalletListener() { + if (window.ethereum) { + window.ethereum.on("accountsChanged", (accounts) => { + if (accounts.length > 0) { + setWallet(accounts[0]) + setStatus("👆🏽 Schreiben Sie eine Nachricht in das Textfeld oben.") + } else { + setWallet("") + setStatus("🦊 Verbinden Sie sich mit MetaMask über die Schaltfläche oben rechts.") + } + }) + } else { + setStatus( ++ {" "} + 🦊 + Sie müssen MetaMask, eine virtuelle Ethereum-Wallet, in Ihrem Browser installieren. + +
+ ) + } +} +``` + +Ich wette, Sie brauchen an dieser Stelle nicht einmal mehr unsere Hilfe, um zu verstehen, was hier vor sich geht, aber aus Gründen der Vollständigkeit, lassen Sie es uns schnell aufschlüsseln: + +- Zuerst prüft unsere Funktion, ob `window.ethereum` aktiviert ist (d. h. MetaMask ist installiert). + - Wenn nicht, setzen wir einfach unsere `status`-Zustandsvariable auf eine JSX-Zeichenfolge, die den Benutzer auffordert, MetaMask zu installieren. + - Wenn es aktiviert ist, richten wir den Listener `window.ethereum.on("accountsChanged")` in Zeile 3 ein, der auf Zustandsänderungen in der MetaMask-Wallet lauscht. Dazu gehören, wenn der Benutzer ein zusätzliches Konto mit der Dapp verbindet, Konten wechselt oder ein Konto trennt. Wenn mindestens ein Konto verbunden ist, wird die Zustandsvariable `walletAddress` als das erste Konto im `accounts`-Array aktualisiert, das vom Listener zurückgegeben wird. Andernfalls wird `walletAddress` als leere Zeichenfolge festgelegt. + +Zu guter Letzt müssen wir sie in unserer `useEffect`-Funktion aufrufen: + +```javascript +// HelloWorld.js + +useEffect(async () => { + const message = await loadCurrentMessage() + setMessage(message) + addSmartContractListener() + + const { address, status } = await getCurrentWalletConnected() + setWallet(address) + setStatus(status) + + addWalletListener() +}, []) +``` + +Und das war's! Wir haben erfolgreich die gesamte Funktionalität unserer Wallet programmiert! Jetzt zu unserer letzten Aufgabe: die im Smart Contract gespeicherte Nachricht aktualisieren! + +### Schritt 6: Implementieren der `updateMessage`-Funktion {#step-6-implement-the-updateMessage-function} + +Also gut, Leute, wir sind auf der Zielgeraden! In `updateMessage` Ihrer `interact.js`-Datei werden wir Folgendes tun: + +1. Sicherstellen, dass die Nachricht, die wir in unserem Smart Contact veröffentlichen möchten, gültig ist +2. Unsere Transaktion mit MetaMask signieren +3. Diese Funktion aus unserer `HelloWorld.js`-Frontend-Komponente aufrufen + +Das wird nicht lange dauern; lassen Sie uns diese Dapp fertigstellen! + +#### Fehlerbehandlung bei der Eingabe {#input-error-handling} + +Natürlich ist es sinnvoll, am Anfang der Funktion eine Art Eingabefehlerbehandlung zu haben. + +Wir möchten, dass unsere Funktion frühzeitig zurückkehrt, wenn keine MetaMask-Erweiterung installiert ist, keine Wallet verbunden ist (d. h. die übergebene `address` ein leerer String ist) oder die `message` ein leerer String ist. Fügen wir die folgende Fehlerbehandlung zu `updateMessage` hinzu: + +```javascript +// interact.js + +export const updateMessage = async (address, message) => { + if (!window.ethereum || address === null) { + return { + status: + "💡 Verbinden Sie Ihre MetaMask-Wallet, um die Nachricht auf der Blockchain zu aktualisieren.", + } + } + + if (message.trim() === "") { + return { + status: "❌ Ihre Nachricht darf kein leerer String sein.", + } + } +} +``` + +Jetzt, da wir eine ordnungsgemäße Eingabefehlerbehandlung haben, ist es Zeit, die Transaktion über MetaMask zu signieren! + +#### Unsere Transaktion signieren {#signing-our-transaction} + +Wenn Sie bereits mit traditionellen Web3-Ethereum-Transaktionen vertraut sind, wird Ihnen der Code, den wir als Nächstes schreiben, sehr bekannt vorkommen. Fügen Sie unterhalb Ihres Eingabefehlerbehandlungscodes Folgendes zu `updateMessage` hinzu: + +```javascript +// interact.js + +//Transaktionsparameter einrichten +const transactionParameters = { + to: contractAddress, // Erforderlich, außer bei der Veröffentlichung von Verträgen. + from: address, // muss mit der aktiven Adresse des Benutzers übereinstimmen. + data: helloWorldContract.methods.update(message).encodeABI(), +} + +// Transaktion signieren +try { + const txHash = await window.ethereum.request({ + method: "eth_sendTransaction", + params: [transactionParameters], + }) + return { + status: ( + + ✅{" "} + + Sehen Sie sich den Status Ihrer Transaktion auf Etherscan an! + ++ ℹ️ Sobald die Transaktion vom Netzwerk verifiziert ist, wird die Nachricht + automatisch aktualisiert. + + ), + } +} catch (error) { + return { + status: "😥 " + error.message, + } +} +``` + +Schauen wir uns an, was hier passiert. Zuerst richten wir unsere Transaktionsparameter ein, wobei: + +- `to` gibt die Empfängeradresse an (unser Smart Contract) +- `from` gibt den Unterzeichner der Transaktion an, die `address`-Variable, die wir in unsere Funktion übergeben haben +- `data` enthält den Aufruf der `update`-Methode unseres Hallo-Welt-Smart-Contracts, der unsere `message`-String-Variable als Eingabe erhält + +Dann machen wir einen await-Aufruf, `window.ethereum.request`, bei dem wir MetaMask bitten, die Transaktion zu signieren. Beachten Sie, in den Zeilen 11 und 12 geben wir unsere eth-Methode `eth_sendTransaction` an und übergeben unsere `transactionParameters`. + +An diesem Punkt öffnet sich MetaMask im Browser und fordert den Benutzer auf, die Transaktion zu signieren oder abzulehnen. + +- Wenn die Transaktion erfolgreich ist, gibt die Funktion ein JSON-Objekt zurück, bei dem der `status`-JSX-String den Benutzer auffordert, Etherscan für weitere Informationen zu seiner Transaktion zu besuchen. +- Wenn die Transaktion fehlschlägt, gibt die Funktion ein JSON-Objekt zurück, bei dem der `status`-String die Fehlermeldung weitergibt. + +Insgesamt sollte unsere `updateMessage`-Funktion so aussehen: + +```javascript +// interact.js + +export const updateMessage = async (address, message) => { + //Eingabefehlerbehandlung + if (!window.ethereum || address === null) { + return { + status: + "💡 Verbinden Sie Ihre MetaMask-Wallet, um die Nachricht auf der Blockchain zu aktualisieren.", + } + } + + if (message.trim() === "") { + return { + status: "❌ Ihre Nachricht darf kein leerer String sein.", + } + } + + //Transaktionsparameter einrichten + const transactionParameters = { + to: contractAddress, // Erforderlich, außer bei der Veröffentlichung von Verträgen. + from: address, // muss mit der aktiven Adresse des Benutzers übereinstimmen. + data: helloWorldContract.methods.update(message).encodeABI(), + } + + // Transaktion signieren + try { + const txHash = await window.ethereum.request({ + method: "eth_sendTransaction", + params: [transactionParameters], + }) + return { + status: ( + + ✅{" "} + + Sehen Sie sich den Status Ihrer Transaktion auf Etherscan an! + +
+ ℹ️ Sobald die Transaktion vom Netzwerk verifiziert ist, wird die Nachricht + automatisch aktualisiert. + + ), + } + } catch (error) { + return { + status: "😥 " + error.message, + } + } +} +``` + +Zu guter Letzt müssen wir unsere `updateMessage`-Funktion mit unserer `HelloWorld.js`-Komponente verbinden. + +#### Verbinden Sie `updateMessage` mit dem `HelloWorld.js`-Frontend {#connect-updatemessage-to-the-helloworld-js-frontend} + +Unsere `onUpdatePressed`-Funktion sollte einen await-Aufruf an die importierte `updateMessage`-Funktion machen und die `status`-Zustandsvariable ändern, um anzuzeigen, ob unsere Transaktion erfolgreich war oder fehlgeschlagen ist: + +```javascript +// HelloWorld.js + +const onUpdatePressed = async () => { + const { status } = await updateMessage(walletAddress, newMessage) + setStatus(status) +} +``` + +Es ist super sauber und einfach. Und raten Sie mal... IHRE DAPP IST FERTIG!!! + +Probieren Sie die **Aktualisieren**-Schaltfläche aus! + +### Erstellen Sie Ihre eigene benutzerdefinierte Dapp {#make-your-own-custom-dapp} + +Wooooo, Sie haben es bis zum Ende des Tutorials geschafft! Zusammenfassend haben Sie gelernt, wie Sie: + +- Eine MetaMask-Wallet mit Ihrem Dapp-Projekt verbinden +- Daten aus Ihrem Smart Contract mit der [Alchemy Web3](https://docs.alchemy.com/alchemy/documentation/alchemy-web3) API lesen +- Ethereum-Transaktionen mit MetaMask signieren + +Jetzt sind Sie voll ausgestattet, um die Fähigkeiten aus diesem Tutorial anzuwenden, um Ihr eigenes benutzerdefiniertes Dapp-Projekt zu erstellen! Wie immer, wenn Sie Fragen haben, zögern Sie nicht, uns im [Alchemy Discord](https://discord.gg/gWuC7zB) um Hilfe zu bitten. 🧙♂️ + +Sobald Sie dieses Tutorial abgeschlossen haben, lassen Sie uns wissen, wie Ihre Erfahrung war oder ob Sie Feedback haben, indem Sie uns auf Twitter [@alchemyplatform](https://twitter.com/AlchemyPlatform) taggen! diff --git a/public/content/translations/de/developers/tutorials/hello-world-smart-contract/index.md b/public/content/translations/de/developers/tutorials/hello-world-smart-contract/index.md index 1519d397971..07e9a34ef7d 100644 --- a/public/content/translations/de/developers/tutorials/hello-world-smart-contract/index.md +++ b/public/content/translations/de/developers/tutorials/hello-world-smart-contract/index.md @@ -1,68 +1,71 @@ --- -title: Hello World-Smart Contract für Einsteiger -description: Einführungstutorial zum Schreiben und Installieren eines einfachen Smart Contracts auf Ethereum +title: "Hello World-Smart Contract für Einsteiger" +description: "Einführungstutorial zum Schreiben und Bereitstellen eines einfachen Smart Contracts auf Ethereum." author: "elanh" tags: - - "Solidity" - - "Hardhat" - - "Alchemy" - - "Smart Contracts" - - "Erste Schritte" - - "Bereitstellung" + [ + "solidity", + "Hardhat", + "Alchemy", + "intelligente Verträge", + "Bereitstellung" + ] skill: beginner lang: de published: 2021-03-31 --- -Wenn Sie neu in der Blockchain-Entwicklung sind und nicht wissen, wo Sie anfangen sollen, oder wenn Sie einfach nur verstehen wollen, wie man Smart Contracts einsetzt und mit ihnen interagiert, ist dieser Leitfaden genau das Richtige für Sie. Wir werden die Erstellung und den Einsatz eines einfachen Smart Contracts auf dem Ropsten-Testnet unter Verwendung einer virtuellen Wallet erläutern ([MetaMask](https://metamask.io/)), [Solidity](https://docs.soliditylang.org/en/v0.8.0/), [Hardhat](https://hardhat.org/) and [Alchemy](https://alchemyapi.io/eth) (Machen Sie sich keine Sorgen, wenn Sie noch nicht verstehen, was das alles bedeutet. Wir werden es Ihnen erklären). +Wenn Sie neu in der Blockchain-Entwicklung sind und nicht wissen, wo Sie anfangen sollen, oder wenn Sie einfach nur verstehen wollen, wie man Smart Contracts einsetzt und mit ihnen interagiert, ist dieser Leitfaden genau das Richtige für Sie. Wir werden die Erstellung und Bereitstellung eines einfachen Smart Contracts im Sepolia-Testnetz durchgehen. Dabei verwenden wir eine virtuelle Wallet ([MetaMask](https://metamask.io/)), [Solidity](https://docs.soliditylang.org/en/v0.8.0/), [Hardhat](https://hardhat.org/) und [Alchemy](https://www.alchemy.com/eth) (keine Sorge, falls Sie noch nicht verstehen, was das alles bedeutet – wir werden es erklären). -Im zweiten Teil dieses Tutorials werden wir erläutern, wie wir mit unserem Smart Contract interagieren können, sobald er bereitgestellt wurde. Im dritten Teil erläutern wir dann, wie er auf Etherscan veröffentlicht wird. +In [Teil 2](https://docs.alchemy.com/docs/interacting-with-a-smart-contract) dieses Tutorials gehen wir durch, wie wir mit unserem Smart Contract interagieren können, sobald er bereitgestellt wurde. In [Teil 3](https://www.alchemy.com/docs/submitting-your-smart-contract-to-etherscan) behandeln wir dann, wie man ihn auf Etherscan veröffentlicht. -Wenn Sie zu irgendeinem Zeitpunkt Fragen haben, dann können Sie sich im [Alchemy Discord](https://discord.gg/gWuC7zB) melden. +Wenn Sie zu irgendeinem Zeitpunkt Fragen haben, können Sie sich gerne im [Alchemy Discord](https://discord.gg/gWuC7zB) melden! -## Schritt 1: Verbindung mit dem Ethereum-Netzwerk {#step-1} +## Schritt 1: Mit dem Ethereum-Netzwerk verbinden {#step-1} -Es gibt viele Möglichkeiten, Anfragen an die Ethereum-Chain zu stellen. Der Einfachheit halber verwenden wir ein kostenloses Konto bei Alchemy, eine Blockchain-Entwicklerplattform und API, die es uns ermöglicht, mit der Ethereum-Chain zu kommunizieren, ohne dass wir unseren eigenen Node betreiben müssen. Die Plattform verfügt auch über Entwickler-Tools für die Überwachung und Analyse, die wir in diesem Tutorial nutzen werden, um zu verstehen, was unter der Haube der Smart-Contract-Bereitstellung vor sich geht. Wenn Sie noch kein Alchemy-Konto haben, [können Sie sich hier kostenlos anmelden](https://dashboard.alchemyapi.io/signup). +Es gibt viele Möglichkeiten, Anfragen an die Ethereum-Chain zu stellen. Der Einfachheit halber verwenden wir ein kostenloses Konto bei Alchemy, eine Blockchain-Entwicklerplattform und API, die es uns ermöglicht, mit der Ethereum-Chain zu kommunizieren, ohne dass wir unsere eigenen Nodes betreiben müssen. Die Plattform verfügt auch über Entwickler-Tools für die Überwachung und Analyse, die wir in diesem Tutorial nutzen werden, um zu verstehen, was bei der Bereitstellung unseres Smart Contracts „unter der Haube“ passiert. Wenn Sie noch kein Alchemy-Konto haben, [können Sie sich hier kostenlos registrieren](https://dashboard.alchemy.com/signup). -## Schritt 2: Anwendung (und den API-Schlüssel) erstellen {#step-2} +## Schritt 2: Ihre App (und den API-Schlüssel) erstellen {#step-2} -Sobald Sie ein Alchemy-Konto erstellt haben, können Sie einen API-Schlüssel generieren. Erstellen Sie dafür eine App. Darüber können wir Anfragen an das Ropsten-Testnet stellen. Wenn Sie mit Testnets nicht vertraut sind, lesen Sie [diese Seite](/developers/docs/networks/). +Sobald Sie ein Alchemy-Konto erstellt haben, können Sie einen API-Schlüssel generieren. Erstellen Sie dafür eine App. Dies ermöglicht es uns, Anfragen an das Sepolia-Testnet zu senden. Wenn Sie mit Testnets nicht vertraut sind, sehen Sie sich [diese Seite](/developers/docs/networks/) an. -1. Klicken Sie in Ihrem Alchemy-Dashboard in der Navigationsleiste unter "Apps" auf "Create App" (App erstellen), um auf die Seite "Create App" (App erstellen) zu gelangen. +1. Navigieren Sie in Ihrem Alchemy-Dashboard zur Seite „Create new app“, indem Sie in der Navigationsleiste „Select an app“ auswählen und dann auf „Create new app“ klicken. - + -2. Nennen Sie Ihre App "Hello World", geben Sie eine kurze Beschreibung an, wählen Sie "Staging" für die Umgebung (die für die Buchhaltung Ihrer App verwendet wird) und wählen Sie "Ropsten" als Netzwerk. +2. Geben Sie Ihrer App den Namen „Hello World“, fügen Sie eine kurze Beschreibung hinzu und wählen Sie einen Anwendungsfall aus, z. B. „Infra & Tooling“. Suchen Sie als Nächstes nach „Ethereum“ und wählen Sie das Netzwerk aus. - + -3. Klicken Sie auf “Create app” (App erstellen) und schon sind Sie fertig. Die App sollte in der untenstehenden Tabelle erscheinen. +3. Klicken Sie zum Fortfahren auf „Next“, dann auf „Create app“ und das war's schon! Ihre App sollte im Dropdown-Menü der Navigationsleiste erscheinen, und ein API-Schlüssel steht zum Kopieren bereit. ## Schritt 3: Ethereum-Konto (Adresse) erstellen {#step-3} -Wir benötigen ein Ethereum-Konto, um Transaktionen zu senden und zu empfangen. In diesem Tutorial verwenden wir MetaMask, eine virtuelle Wallet im Browser, mit der Sie Ihre Ethereum-Kontoadresse verwalten können. Weitere Informationen zu [Transaktionen](/developers/docs/transactions/). +Zum Versenden und Empfangen von Transaktionen benötigen Sie ein Ethereum-Konto. In diesem Tutorial verwenden wir MetaMask, eine virtuelle Wallet im Browser, mit der Sie Ihre Ethereum-Kontoadresse verwalten können. Mehr zu [Transaktionen](/developers/docs/transactions/). -Sie können MetaMask [hier](https://metamask.io/download) kostenlos herunterladen und ein Konto erstellen. Wenn Sie ein Konto erstellen oder wenn Sie bereits ein Konto haben, stellen Sie sicher, dass Sie oben rechts zum "Ropsten-Testnet" wechseln (damit wir nicht mit echtem Geld arbeiten). +Sie können MetaMask herunterladen und [hier](https://metamask.io/download) kostenlos ein Ethereum-Konto erstellen. Wenn Sie ein Konto erstellen oder bereits eines haben, wechseln Sie über das Netzwerk-Dropdown-Menü unbedingt zum Testnetz „Sepolia“ (damit wir nicht mit echtem Geld arbeiten). - +Wenn Sepolia nicht aufgeführt ist, gehen Sie in das Menü, dann auf „Advanced“ und scrollen Sie nach unten, um „Show test networks“ zu aktivieren. Wählen Sie im Netzwerkauswahlmenü die Registerkarte „Custom“, um eine Liste von Testnets zu finden, und wählen Sie „Sepolia“ aus. + + ## Schritt 4: Ether von einem Faucet hinzufügen {#step-4} -Um unseren Smart Contract im Testnet einzusetzen, benötigen wir einige Fake-ETH. Um ETH zu erhalten, können Sie auf den [Ropsten Faucet](https://faucet.dimensions.network/) gehen und Ihre Ropsten-Kontoadresse eingeben. Klicken Sie dann auf "Ropsten-ETH senden". Aufgrund des Netzwerkverkehrs kann es einige Zeit dauern, bis Sie Ihre Fake-ETH erhalten. Sie sollten kurz darauf ETH auf Ihrem MetaMask-Konto sehen. +Um unseren Smart Contract im Testnetz bereitzustellen, benötigen wir etwas „Fake-ETH“. Um Sepolia-ETH zu erhalten, können Sie zu den [Details des Sepolia-Netzwerks](/developers/docs/networks/#sepolia) gehen, um eine Liste verschiedener Faucets anzuzeigen. Wenn einer nicht funktioniert, versuchen Sie einen anderen, da sie manchmal leer sein können. Aufgrund des Netzwerkverkehrs kann es einige Zeit dauern, bis Sie Ihre Fake-ETH erhalten. Sie sollten kurz darauf ETH auf Ihrem MetaMask-Konto sehen! -## Schritt 5: Guthaben prüfen {#step-5} +## Schritt 5: Ihr Guthaben überprüfen {#step-5} -Um unser Guthaben zu überprüfen, müssen wir eine [eth_getBalance](https://docs.alchemyapi.io/alchemy/documentation/alchemy-api-reference/json-rpc#eth_getbalance)-Anfrage mit dem [dem Composer-Tool von Alchemy](https://composer.alchemyapi.io?composer_state=%7B%22network%22%3A0%2C%22methodName%22%3A%22eth_getBalance%22%2C%22paramValues%22%3A%5B%22%22%2C%22latest%22%5D%7D) stellen. Dadurch wird der Betrag der ETH in unsere Wallet zurückgegeben. Nachdem Sie die Adresse Ihres MetaMask-Kontos eingegeben und auf "Anfrage senden" geklickt haben, sollten Sie eine Antwort wie diese erhalten: +Um zu überprüfen, ob unser Guthaben vorhanden ist, stellen wir eine [eth_getBalance](/developers/docs/apis/json-rpc/#eth_getbalance)-Anfrage mit dem [Composer-Tool von Alchemy](https://sandbox.alchemy.com/?network=ETH_SEPOLIA&method=eth_getBalance&body.id=1&body.jsonrpc=2.0&body.method=eth_getBalance&body.params%5B0%5D=&body.params%5B1%5D=latest). Das gibt den ETH-Betrag in unserem Wallet wieder. Nachdem Sie die Adresse Ihres MetaMask-Kontos eingegeben und auf “Send Request” (Anforderung senden) geklickt haben, sollten Sie eine Antwort ähnlich der Folgenden erhalten: ```json { "jsonrpc": "2.0", "id": 0, "result": "0x2B5E3AF16B1880000" } ``` -> **HINWEIS:** Dieses Ergebnis ist in Wei und nicht in ETH. Wei ist die kleinste Einheit von Ether. Die Umrechnung von Wei auf ETH ist: 1 ETH = 1018 Wei. Wenn wir also 0x2B5E3AF16B1880000 in eine Dezimalzahl konvertieren, bekommen wir 5\*10¹⁸. Das entspricht 5 ETH. +> **HINWEIS:** Dieses Ergebnis ist in Wei und nicht in ETH angegeben. Wei ist die kleinste Einheit von Ether. Die Umrechnung von Wei in ETH lautet: 1 ETH = 1018 Wei. Wenn wir also 0x2B5E3AF16B1880000 in eine Dezimalzahl umwandeln, erhalten wir 5\*10¹⁸, was 5 ETH entspricht. > -> Puh! Unser Falschgeld ist da
.env aus. Stellen Sie sicher, dass Sie Ihre .env-Datei niemals an andere weitergeben, denn damit würden Sie Ihre geheimen Daten weitergeben. Wenn Sie die Versionskontrolle verwenden, fügen Sie Ihre Env-Datei zu einer Datei gitignore hinzu.
+Führen Sie keinen Commit für .env aus! Bitte stellen Sie sicher, dass Sie Ihre .env-Datei niemals an Dritte weitergeben oder offenlegen, da Sie dadurch Ihre Geheimnisse preisgeben. Wenn Sie eine Versionskontrolle verwenden, fügen Sie Ihre .env-Datei einer gitignore-Datei hinzu.