Převod
+``` + +Toto je formát HTML (přesněji [JSX](https://react.dev/learn/writing-markup-with-jsx)) komponenty. + +#### `server/noir/src/main.nr` {#server-noir-src-main-nr} + +[Tento soubor](https://github.com/qbzzt/250911-zk-bank/blob/01-manual-zk/server/noir/src/main.nr) je skutečný kód nulové znalosti. + +``` +use std::hash::pedersen_hash; +``` + +[Pedersen hash](https://rya-sge.github.io/access-denied/2024/05/07/pedersen-hash-function/) je poskytován se [standardní knihovnou Noir](https://noir-lang.org/docs/noir/standard_library/cryptographic_primitives/hashes#pedersen_hash). Důkazy s nulovou znalostí běžně používají tuto hashovací funkci. V [aritmetických obvodech](https://rareskills.io/post/arithmetic-circuit) se vypočítává mnohem snadněji než standardní hashovací funkce. + +``` +use keccak256::keccak256; +use dep::ecrecover; +``` + +Tyto dvě funkce jsou externí knihovny definované v souboru [`Nargo.toml`](https://github.com/qbzzt/250911-zk-bank/blob/01-manual-zk/server/noir/Nargo.toml). Jsou přesně tím, po čem jsou pojmenovány: funkcí, která vypočítá [hash keccak256](https://emn178.github.io/online-tools/keccak_256.html), a funkcí, která ověřuje podpisy Ethereum a obnovuje adresu Ethereum podepisujícího. + +``` +global ACCOUNT_NUMBER : u32 = 5; +``` + +Noir je inspirován jazykem [Rust](https://www.rust-lang.org/). Proměnné jsou ve výchozím nastavení konstanty. Takto definujeme globální konfigurační konstanty. Konkrétně `ACCOUNT_NUMBER` je počet účtů, které ukládáme. + +Datové typy s názvem `u<číslo>` mají daný počet bitů a jsou bez znaménka. Jediné podporované typy jsou `u8`, `u16`, `u32`, `u64` a `u128`. + +``` +global FLAT_ACCOUNT_FIELDS : u32 = 2; +``` + +Tato proměnná se používá pro Pedersen hash účtů, jak je vysvětleno níže. + +``` +global MESSAGE_LENGTH : u32 = 100; +``` + +Jak bylo vysvětleno výše, délka zprávy je pevná. Je zde specifikována. + +``` +global ASCII_MESSAGE_LENGTH : [u8; 3] = [0x31, 0x30, 0x30]; +global HASH_BUFFER_SIZE : u32 = 26+3+MESSAGE_LENGTH; +``` + +[Podpisy EIP-191](https://eips.ethereum.org/EIPS/eip-191) vyžadují vyrovnávací paměť s 26bajtovou předponou, za níž následuje délka zprávy v ASCII a nakonec samotná zpráva. + +``` +struct Account { + balance: u128, + address: Field, + nonce: u32, +} +``` + +Informace, které ukládáme o účtu. [`Field`](https://noir-lang.org/docs/noir/concepts/data_types/fields) je číslo, typicky až 253 bitů, které lze použít přímo v [aritmetickém obvodu](https://rareskills.io/post/arithmetic-circuit), který implementuje důkaz s nulovou znalostí. Zde používáme `Field` k uložení 160bitové adresy Ethereum. + +``` +struct TransferTxn { + from: Field, + to: Field, + amount: u128, + nonce: u32 +} +``` + +Informace, které ukládáme pro převodní transakci. + +``` +fn flatten_account(account: Account) -> [Field; FLAT_ACCOUNT_FIELDS] { +``` + +Definice funkce. Parametrem jsou informace o `účtu`. Výsledkem je pole proměnných `Field`, jejichž délka je `FLAT_ACCOUNT_FIELDS`. + +``` + let flat = [ + account.address, + ((account.balance << 32) + account.nonce.into()).into(), + ]; +``` + +První hodnota v poli je adresa účtu. Druhá zahrnuje jak zůstatek, tak nonce. Volání `.into()` změní číslo na datový typ, kterým má být. `account.nonce` je hodnota `u32`, ale aby ji bylo možné přičíst k hodnotě `account.balance << 32`, která je `u128`, musí být `u128`. To je první `.into()`. Druhý převádí výsledek `u128` na `Field`, aby se vešel do pole. + +``` + flat +} +``` + +V jazyce Noir mohou funkce vracet hodnotu pouze na konci (neexistuje předčasné vrácení). Chcete-li zadat návratovou hodnotu, vyhodnotíte ji těsně před uzavírací závorkou funkce. + +``` +fn flatten_accounts(accounts: [Account; ACCOUNT_NUMBER]) -> [Field; FLAT_ACCOUNT_FIELDS*ACCOUNT_NUMBER] { +``` + +Tato funkce převede pole účtů na pole `Field`, které lze použít jako vstup do Petersen Hash. + +``` + let mut flat: [Field; FLAT_ACCOUNT_FIELDS*ACCOUNT_NUMBER] = [0; FLAT_ACCOUNT_FIELDS*ACCOUNT_NUMBER]; +``` + +Takto se určuje měnitelná proměnná, tj. _ne_ konstanta. Proměnné v Noir musí mít vždy hodnotu, proto tuto proměnnou inicializujeme na samé nuly. + +``` + for i in 0..ACCOUNT_NUMBER { +``` + +Toto je smyčka `for`. Všimněte si, že hranice jsou konstanty. Smyčky Noir musí mít své hranice známé v době kompilace. Důvodem je, že aritmetické obvody nepodporují řízení toku. Při zpracování smyčky `for` kompilátor jednoduše vloží kód dovnitř několikrát, jednou pro každou iteraci. + +``` + let fields = flatten_account(accounts[i]); + for j in 0..FLAT_ACCOUNT_FIELDS { + flat[i*FLAT_ACCOUNT_FIELDS + j] = fields[j]; + } + } + + flat +} + +fn hash_accounts(accounts: [Account; ACCOUNT_NUMBER]) -> Field { + pedersen_hash(flatten_accounts(accounts)) +} +``` + +Nakonec jsme se dostali k funkci, která hashuje pole účtů. + +``` +fn find_account(accounts: [Account; ACCOUNT_NUMBER], address: Field) -> u32 { + let mut account : u32 = ACCOUNT_NUMBER; + + for i in 0..ACCOUNT_NUMBER { + if accounts[i].address == address { + account = i; + } + } +``` + +Tato funkce najde účet se specifickou adresou. Tato funkce by byla ve standardním kódu strašně neefektivní, protože iteruje přes všechny účty, i když už našla adresu. + +V důkazech s nulovou znalostí však neexistuje žádné řízení toku. Pokud někdy potřebujeme zkontrolovat podmínku, musíme ji zkontrolovat pokaždé. + +Podobná věc se děje s příkazy `if`. Příkaz `if` ve smyčce výše je přeložen do těchto matematických příkazů. + +_výsledekpodmínky = účty[i].adresa == adresa_ // jedna, pokud se rovnají, jinak nula + +_účetnový = výsledekpodmínky\*i + (1-výsledekpodmínky)\*účetstarý_ + +```rust + assert (account < ACCOUNT_NUMBER, f"{address} nemá účet"); + + account +} +``` + +Funkce [`assert`](https://noir-lang.org/docs/dev/noir/concepts/assert) způsobí pád důkazu s nulovou znalostí, pokud je tvrzení nepravdivé. V tomto případě, pokud nemůžeme najít účet s příslušnou adresou. K nahlášení adresy použijeme [formátovací řetězec](https://noir-lang.org/docs/noir/concepts/data_types/strings#format-strings). + +```rust +fn apply_transfer_txn(accounts: [Account; ACCOUNT_NUMBER], txn: TransferTxn) -> [Account; ACCOUNT_NUMBER] { +``` + +Tato funkce aplikuje převodní transakci a vrací nové pole účtů. + +```rust + let from = find_account(accounts, txn.from); + let to = find_account(accounts, txn.to); + + let (txnFrom, txnAmount, txnNonce, accountNonce) = + (txn.from, txn.amount, txn.nonce, accounts[from].nonce); +``` + +V Noir nemůžeme přistupovat k prvkům struktury uvnitř formátovacího řetězce, proto si vytvoříme použitelnou kopii. + +```rust + assert (accounts[from].balance >= txn.amount, + f"{txnFrom} nemá {txnAmount} finney"); + + assert (accounts[from].nonce == txn.nonce, + f"Transakce má nonce {txnNonce}, ale očekává se, že účet použije {accountNonce}"); +``` + +Toto jsou dvě podmínky, které by mohly způsobit neplatnost transakce. + +```rust + let mut newAccounts = accounts; + + newAccounts[from].balance -= txn.amount; + newAccounts[from].nonce += 1; + newAccounts[to].balance += txn.amount; + + newAccounts +} +``` + +Vytvořte nové pole účtů a poté ho vraťte. + +```rust +fn readAddress(messageBytes: [u8; MESSAGE_LENGTH]) -> Field +``` + +Tato funkce čte adresu ze zprávy. + +```rust +{ + let mut result : Field = 0; + + for i in 7..47 { +``` + +Adresa má vždy 20 bajtů (tj. 40 hexadecimálních číslic) a začíná na znaku #7. + +```rust + result *= 0x10; + if messageBytes[i] >= 48 & messageBytes[i] <= 57 { // 0-9 + result += (messageBytes[i]-48).into(); + } + if messageBytes[i] >= 65 & messageBytes[i] <= 70 { // A-F + result += (messageBytes[i]-65+10).into() + } + if messageBytes[i] >= 97 & messageBytes[i] <= 102 { // a-f + result += (messageBytes[i]-97+10).into() + } + } + + result +} + +fn readAmountAndNonce(messageBytes: [u8; MESSAGE_LENGTH]) -> (u128, u32) +``` + +Přečtěte částku a nonce ze zprávy. + +```rust +{ + let mut amount : u128 = 0; + let mut nonce: u32 = 0; + let mut stillReadingAmount: bool = true; + let mut lookingForNonce: bool = false; + let mut stillReadingNonce: bool = false; +``` + +Ve zprávě je první číslo za adresou částka finney (tj. tisícina ETH) k převodu. Druhé číslo je nonce. Jakýkoli text mezi nimi je ignorován. + +```rust + for i in 48..MESSAGE_LENGTH { + if messageBytes[i] >= 48 & messageBytes[i] <= 57 { // 0-9 + let digit = (messageBytes[i]-48); + + if stillReadingAmount { + amount = amount*10 + digit.into(); + } + + if lookingForNonce { // Právě jsme to našli + stillReadingNonce = true; + lookingForNonce = false; + } + + if stillReadingNonce { + nonce = nonce*10 + digit.into(); + } + } else { + if stillReadingAmount { + stillReadingAmount = false; + lookingForNonce = true; + } + if stillReadingNonce { + stillReadingNonce = false; + } + } + } + + (amount, nonce) +} +``` + +Vrácení [n-tice](https://noir-lang.org/docs/noir/concepts/data_types/tuples) je v Noir způsob, jak vrátit více hodnot z funkce. + +```rust +fn readTransferTxn(message: strGreeter
+Greeter
+ { + !readResults.isError && !readResults.isLoading && ++``` + +Vytvořte komponentu `ShowGreeting` (vysvětleno níže), ale pouze pokud byl pozdrav úspěšně přečten z blockchainu. + +```tsx + +``` + +Toto je vstupní textové pole, kde si uživatel může nastavit nový pozdrav. Pokaždé, když uživatel stiskne klávesu, zavoláme `greetingChange`, které zavolá `setNewGreeting`. Protože `setNewGreeting` pochází z hooku `useState`, způsobí to opětovné vykreslení komponenty `Greeter`. To znamená, že: + +- Musíme specifikovat `value`, abychom zachovali hodnotu nového pozdravu, protože jinak by se vrátila zpět na výchozí hodnotu, prázdný řetězec. +- `usePrepareContractWrite` se volá pokaždé, když se `newGreeting` změní, což znamená, že v připravené transakci bude vždy nejnovější `newGreeting`. + +```tsx + +``` + +Pokud `workingTx.write` neexistuje, stále čekáme na informace potřebné k odeslání aktualizace pozdravu, takže je tlačítko zakázáno. Pokud hodnota `workingTx.write` existuje, je to funkce, která se má volat k odeslání transakce. + +```tsx +
+
+```
+
+Nechceme zaplnit UI všemi informacemi, takže abychom je mohli zobrazit nebo zavřít, používáme značku [`details`](https://www.w3schools.com/tags/tag_details.asp).
+
+```tsx
+
+
+}
+```
+
+Ukončete různé značky HTML.
+
+##### Konečný `export` {#the-final-export}
+
+```tsx
+export { Greeter }
+```
+
+Komponenta `Greeter` je ta, kterou potřebujeme exportovat pro aplikaci.
+
+#### `src/wagmi.ts` {#wagmi-ts}
+
+Nakonec jsou různé definice související s WAGMI v `src/wagmi.ts`. Nebudu zde vše vysvětlovat, protože většina z toho je šablona, kterou pravděpodobně nebudete muset měnit.
+
+Kód zde není úplně stejný jako [na githubu](https://github.com/qbzzt/20230801-modern-ui/blob/main/src/wagmi.ts), protože později v článku přidáme další řetězec ([Redstone Holesky](https://redstone.xyz/docs/network-info)).
+
+```ts
+import { getDefaultWallets } from '@rainbow-me/rainbowkit'
+import { configureChains, createConfig } from 'wagmi'
+import { holesky, sepolia } from 'wagmi/chains'
+```
+
+Importujte blockchainy, které aplikace podporuje. Seznam podporovaných řetězců si můžete prohlédnout [v githubu viem](https://github.com/wagmi-dev/viem/tree/main/src/chains/definitions).
+
+```ts
+import { publicProvider } from 'wagmi/providers/public'
+
+const walletConnectProjectId = 'c96e690bb92b6311e8e9b2a6a22df575'
+```
+
+Abyste mohli používat [WalletConnect](https://walletconnect.com/), potřebujete ID projektu pro vaši aplikaci. Můžete jej získat na [cloud.walletconnect.com](https://cloud.walletconnect.com/sign-in).
+
+```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 }
+```
+
+### Přidání dalšího blockchainu {#add-blockchain}
+
+V dnešní době existuje mnoho [řešení pro škálování L2](/layer-2/) a možná budete chtít podporovat některá, která viem ještě nepodporuje. K tomu upravte `src/wagmi.ts`. Tyto pokyny vysvětlují, jak přidat [Redstone Holesky](https://redstone.xyz/docs/network-info).
+
+1. Importujte typ `defineChain` z viem.
+
+ ```ts
+ import { defineChain } from 'viem'
+ ```
+
+2. Přidejte definici sítě.
+
+ ```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. Přidejte nový řetězec do volání `configureChains`.
+
+ ```ts
+ const { chains, publicClient, webSocketPublicClient } = configureChains(
+ [ holesky, sepolia, redstoneHolesky ],
+ [ publicProvider(), ],
+ )
+ ```
+
+4. Zajistěte, aby aplikace znala adresu vašich kontraktů na nové síti. V tomto případě upravíme `src/components/Greeter.tsx`:
+
+ ```ts
+ const contractAddrs : AddressPerBlockchainType = {
+ // Holesky
+ 17000: '0x432d810484AdD7454ddb3b5311f0Ac2E95CeceA8',
+
+ // Redstone Holesky
+ 17001: '0x4919517f82a1B89a32392E1BF72ec827ba9986D3',
+
+ // Sepolia
+ 11155111: '0x7143d5c190F048C8d19fe325b748b081903E3BF0'
+ }
+ ```
+
+## Závěr {#conclusion}
+
+Samozřejmě vás nezajímá poskytování uživatelského rozhraní pro `Greeter`. Chcete vytvořit uživatelské rozhraní pro své vlastní kontrakty. Chcete-li vytvořit vlastní aplikaci, proveďte tyto kroky:
+
+1. Určete, že chcete vytvořit aplikaci wagmi.
+
+ ```sh copy
+ pnpm create wagmi
+ ```
+
+2. Pojmenujte aplikaci.
+
+3. Vyberte framework **React**.
+
+4. Vyberte variantu **Vite**.
+
+5. Můžete [přidat Rainbow kit](https://www.rainbowkit.com/docs/installation#manual-setup).
+
+Nyní jděte a zpřístupněte své kontrakty širokému světu.
+
+[Více z mé práce najdete zde](https://cryptodocguy.pro/).
+
diff --git a/public/content/translations/cs/developers/tutorials/deploying-your-first-smart-contract/index.md b/public/content/translations/cs/developers/tutorials/deploying-your-first-smart-contract/index.md
new file mode 100644
index 00000000000..98121a07c59
--- /dev/null
+++ b/public/content/translations/cs/developers/tutorials/deploying-your-first-smart-contract/index.md
@@ -0,0 +1,101 @@
+---
+title: "Nasazení vašeho prvního chytrého kontraktu"
+description: "Úvod do nasazení vašeho prvního chytrého kontraktu v testovací síti Etherea"
+author: "jdourlens"
+tags:
+ [
+ "smart kontrakt účty",
+ "remix",
+ "solidity",
+ "nasazování"
+ ]
+skill: beginner
+lang: cs
+published: 2020-04-03
+source: EthereumDev
+sourceUrl: https://ethereumdev.io/deploying-your-first-smart-contract/
+address: "0x19dE91Af973F404EDF5B4c093983a7c6E3EC8ccE"
+---
+
+Předpokládáme, že se stejně jako my těšíte, až [nasadíte](/developers/docs/smart-contracts/deploying/) a budete interagovat s vaším prvním [chytrým kontraktem](/developers/docs/smart-contracts/) na blockchainu Etherea.
+
+Nemějte obavy, jelikož se jedná o náš první chytrý kontrakt, nasadíme ho na [lokální testovací síti](/developers/docs/networks/), takže vás jeho nasazení nebude nic stát a budete si s ním moci hrát, jak se vám zlíbí.
+
+## Napsání našeho kontraktu {#writing-our-contract}
+
+Prvním krokem je [navštívit Remix](https://remix.ethereum.org/) a vytvořit nový soubor. V levé horní části rozhraní Remix přidejte nový soubor a zadejte požadovaný název souboru.
+
+
+
+Do nového souboru vložíme následující kód.
+
+```solidity
+// SPDX-License-Identifier: MIT
+pragma solidity >=0.5.17;
+
+contract Counter {
+
+ // Veřejná proměnná typu unsigned int pro uchování počtu
+ uint256 public count = 0;
+
+ // Funkce, která navyšuje náš čítač
+ function increment() public {
+ count += 1;
+ }
+
+ // Nepovinný getter pro získání hodnoty počítadla
+ function getCount() public view returns (uint256) {
+ return count;
+ }
+
+}
+```
+
+Pokud jste zvyklí programovat, snadno uhodnete, co tento program dělá. Zde je vysvětlení řádek po řádku:
+
+- Řádek 4: Definujeme kontrakt s názvem `Counter`.
+- Řádek 7: Náš kontrakt ukládá jedno celé číslo bez znaménka s názvem `count` začínající na 0.
+- Řádek 10: První funkce změní stav kontraktu a navýší (`increment()`) naši proměnnou `count`.
+- Řádek 15: Druhá funkce je pouze getter pro čtení hodnoty proměnné `count` mimo chytrý kontrakt. Všimněte si, že jelikož jsme naši proměnnou `count` definovali jako veřejnou (public), není to nutné, ale je to uvedeno jako příklad.
+
+To je k našemu prvnímu jednoduchému chytrému kontraktu vše. Jak možná víte, vypadá to jako třída z jazyků OOP (objektově orientovaného programování), jako je Java nebo C++. Nyní je čas si s naším kontraktem pohrát.
+
+## Nasazení našeho kontraktu {#deploying-our-contract}
+
+Jelikož jsme napsali náš první chytrý kontrakt, nyní ho nasadíme na blockchain, abychom si s ním mohli hrát.
+
+[Nasazení chytrého kontraktu na blockchain](/developers/docs/smart-contracts/deploying/) je vlastně jen odeslání transakce obsahující kód zkompilovaného chytrého kontraktu bez určení jakýchkoli příjemců.
+
+Nejprve [zkopilujeme kontrakt](/developers/docs/smart-contracts/compiling/) kliknutím na ikonu kompilace na levé straně:
+
+
+
+Poté klikněte na tlačítko kompilace:
+
+
+
+Můžete si vybrat možnost „Automatická kompilace“, takže kontrakt bude vždy zkompilován, když uložíte obsah v textovém editoru.
+
+Poté přejděte na obrazovku "nasazení a spouštění transakcí":
+
+
+
+Jakmile se ocitnete na obrazovce "nasazení a spouštění transakcí", dvakrát zkontrolujte, zda se zobrazuje název vašeho kontraktu, a klikněte na tlačítko Nasadit. Jak vidíte v horní části stránky, aktuální prostředí je „JavaScript VM“, to znamená, že nasadíme náš chytrý kontrakt a budeme s ním interagovat na lokálním testovacím blockchainu, abychom mohli testovat rychleji a bez poplatků.
+
+
+
+Jakmile kliknete na tlačítko „Nasadit“, uvidíte, že se váš kontrakt objeví ve spodní části. Kliknutím na šipku vlevo ho rozbalíte, abychom viděli obsah našeho kontraktu. Zde je naše proměnná `count`, naše funkce `increment()` a getter `getCounter()`.
+
+Pokud kliknete na tlačítko `count` nebo `getCount`, ve skutečnosti se načte obsah proměnné `count` kontraktu a zobrazí se. Jelikož jsme funkci `increment` ještě nevolali, měla by se zobrazit 0.
+
+
+
+Nyní zavoláme funkci `increment` kliknutím na tlačítko. Uvidíte záznamy o provedených transakcích, které se objeví ve spodní části okna. Uvidíte, že záznamy jsou odlišné, když stisknete tlačítko pro načtení dat namísto tlačítka `increment`. Je to proto, že čtení dat na blockchainu nevyžaduje žádné transakce (zápis) ani poplatky. Protože pouze úprava stavu blockchainu vyžaduje provedení transakce:
+
+
+
+Po stisknutí tlačítka inkrementace, které vygeneruje transakci pro volání naší funkce `increment()`, přečteme při opětovném kliknutí na tlačítka `count` nebo `getCount` nově aktualizovaný stav našeho chytrého kontraktu, kde proměnná `count` bude větší než 0.
+
+
+
+V dalším návodu si ukážeme, [jak můžete do svých chytrých kontraktů přidávat události](/developers/tutorials/logging-events-smart-contracts/). Zaznamenávání událostí je pohodlný způsob, jak ladit váš chytrý kontrakt a porozumět tomu, co se děje při volání funkce.
diff --git a/public/content/translations/cs/developers/tutorials/develop-and-test-dapps-with-a-multi-client-local-eth-testnet/index.md b/public/content/translations/cs/developers/tutorials/develop-and-test-dapps-with-a-multi-client-local-eth-testnet/index.md
new file mode 100644
index 00000000000..57653c2fdea
--- /dev/null
+++ b/public/content/translations/cs/developers/tutorials/develop-and-test-dapps-with-a-multi-client-local-eth-testnet/index.md
@@ -0,0 +1,372 @@
+---
+title: "Jak vyvíjet a testovat dApp na lokálním, multi-klientském testnetu"
+description: "Tento průvodce vás nejprve provede vytvořením instance a konfigurací lokálního Ethereum testnetu s více klienty a následně použitím testnetu k nasazení a testování dApp."
+author: "Tedi Mitiku"
+tags:
+ [
+ "klienti",
+ "uzly",
+ "smart kontrakt účty",
+ "složitelnost",
+ "konsensuální vrstva",
+ "exekuční vrstva",
+ "testování"
+ ]
+skill: intermediate
+lang: cs
+published: 2023-04-11
+---
+
+## Úvod {#introduction}
+
+Tato příručka vás provede procesem vytvoření instance konfigurovatelného lokálního Ethereum testnetu, nasazením chytrého kontraktu a použitím testnetu ke spuštění testů vaší dApp. Tato příručka je určena pro vývojáře dApps, kteří chtějí lokálně vyvíjet a testovat své dApps s různými konfiguracemi sítě před nasazením na živý testnet nebo mainnet.
+
+V této příručce:
+
+- Vytvoříte instanci lokálního Ethereum testnetu s [`eth-network-package`](https://github.com/kurtosis-tech/eth-network-package) pomocí [Kurtosis](https://www.kurtosis.com/),
+- Připojíte své vývojové prostředí Hardhat dApp k lokálnímu testnetu pro kompilaci, nasazení a testování dApp a
+- Nakonfigurujete lokální testnet, včetně parametrů, jako je počet uzlů a konkrétní párování EL/CL klientů, abyste umožnili vývoj a testování s různými konfiguracemi sítě.
+
+### Co je Kurtosis? {#what-is-kurtosis}
+
+[Kurtosis](https://www.kurtosis.com/) je skládací systém sestavení určený pro konfiguraci vícekontejnerových testovacích prostředí. Umožňuje vývojářům vytvářet reprodukovatelná prostředí, která vyžadují logiku dynamického nastavení, jako jsou například blockchainové testnety.
+
+V této příručce balíček Kurtosis eth-network-package spouští lokální Ethereum testnet s podporou klienta [`geth`](https://geth.ethereum.org/) exekuční vrstvy (EL) a také klientů [`teku`](https://consensys.io/teku), [`lighthouse`](https://lighthouse.sigmaprime.io/) a [`lodestar`](https://lodestar.chainsafe.io/) konsensuální vrstvy (CL). Tento balíček slouží jako konfigurovatelná a skládací alternativa k sítím v rámcích jako Hardhat Network, Ganache a Anvil. Kurtosis nabízí vývojářům větší kontrolu a flexibilitu nad testnety, které používají, což je hlavní důvod, proč [nadace Ethereum použila Kurtosis k testování Sloučení](https://www.kurtosis.com/blog/testing-the-ethereum-merge) a nadále ho používá k testování upgradů sítě.
+
+## Nastavení Kurtosis {#setting-up-kurtosis}
+
+Než budete pokračovat, ujistěte se, že máte:
+
+- [Nainstalovaný a spuštěný Docker engine](https://docs.kurtosis.com/install/#i-install--start-docker) na vašem lokálním počítači
+- [Nainstalovaný Kurtosis CLI](https://docs.kurtosis.com/install#ii-install-the-cli) (nebo aktualizovaný na nejnovější verzi, pokud již máte CLI nainstalovaný)
+- Nainstalovaný [Node.js](https://nodejs.org/en), [yarn](https://classic.yarnpkg.com/lang/en/docs/install/#mac-stable) a [npx](https://www.npmjs.com/package/npx) (pro vaše prostředí dApp)
+
+## Vytvoření instance lokálního Ethereum testnetu {#instantiate-testnet}
+
+Pro spuštění lokálního Ethereum testnetu spusťte:
+
+```python
+kurtosis --enclave local-eth-testnet run github.com/kurtosis-tech/eth-network-package
+```
+
+Poznámka: Tento příkaz pojmenuje vaši síť: „local-eth-testnet“ pomocí příznaku `--enclave`.
+
+Kurtosis bude průběžně vypisovat kroky, které provádí, zatímco interpretuje, ověřuje a následně provádí pokyny. Na konci byste měli vidět výstup, který se podobá následujícímu:
+
+```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)}
+```
+
+Většina polí se zobrazuje pomocí [`JSON.stringify`](https://www.w3schools.com/js/js_json_stringify.asp).
+
+```tsx
+
+ { funs.length > 0 &&
+ <>
+ Functions:
+ -
+```
+
+Výjimkou jsou funkce, které nejsou součástí [standardu JSON](https://www.json.org/json-en.html), takže se musí zobrazovat samostatně.
+
+```tsx
+ {funs.map((f, i) =>
+```
+
+V rámci JSX je kód uvnitř `{` složených závorek `}` interpretován jako JavaScript. Poté je kód uvnitř `(` kulatých závorek `)` interpretován znovu jako JSX.
+
+```tsx
+ (
- {f} ) + )} +``` + +React vyžaduje, aby značky ve [stromu DOM](https://www.w3schools.com/js/js_htmldom.asp) měly jedinečné identifikátory. To znamená, že potomci stejné značky (v tomto případě [neuspořádaný seznam](https://www.w3schools.com/tags/tag_ul.asp)) potřebují různé atributy `key`. + +```tsx +
Dobrý den, ${loginResponse.extract.nameID}
+ + + `) + res.send(); +``` + +Odešlete odpověď HTML, abyste uživateli ukázali, že jsme obdrželi přihlášení. + +```typescript + } catch (err) { + console.error('Chyba při zpracování odpovědi SAML:', err); + res.status(400).send('Ověření SAML se nezdařilo'); + } + } +) +``` + +V případě selhání informujte uživatele. + +```typescript +spRouter.get('/login', +``` + +Vytvořte požadavek na přihlášení, když se prohlížeč pokusí o přístup na tuto stránku. Toto je obslužný program pro krok 1 ve výše uvedeném sekvenčním diagramu. + +```typescript + async (req, res) => { + const loginRequest = await sp.createLoginRequest(idp, "post") +``` + +Získejte informace pro odeslání požadavku na přihlášení. + +```typescript + res.send(` + + + +``` + +Tato stránka automaticky odešle formulář (viz níže). Díky tomu uživatel nemusí pro přesměrování nic dělat. Toto je krok 2 ve výše uvedeném sekvenčním diagramu. + +```typescript + + + + `) + } +) + +app.use(express.urlencoded({extended: true})) +``` + +[Tento middleware](https://expressjs.com/en/5x/api.html#express.urlencoded) čte tělo [požadavku HTTP](https://www.tutorialspoint.com/http/http_requests.htm). Ve výchozím nastavení ho Express ignoruje, protože většina požadavků ho nevyžaduje. Potřebujeme ho, protože POST používá tělo. + +```typescript +app.use(`/${config.spDir}`, spRouter) +``` + +Připojte router do adresáře poskytovatele služeb (`/sp`). + +```typescript +app.get("/", (req, res) => { + res.send(` + + + + + + `) +}) +``` + +Pokud se prohlížeč pokusí získat kořenový adresář, poskytněte mu odkaz na přihlašovací stránku. + +```typescript +app.listen(config.spPort, () => { + console.log(`poskytovatel služeb běží na http://${config.spHostname}:${config.spPort}`) +}) +``` + +Naslouchejte na portu `spPort` pomocí této aplikace Express. + +#### src/idp.mts + +Toto je poskytovatel identity. Je velmi podobný poskytovateli služeb, níže uvedená vysvětlení se týkají částí, které se liší. + +```typescript +const xmlParser = new (await import("fast-xml-parser")).XMLParser( + { + ignoreAttributes: false, // Zachovat atributy + attributeNamePrefix: "@_", // Prefix pro atributy + } +) +``` + +Musíme si přečíst a porozumět požadavku XML, který obdržíme od poskytovatele služeb. + +```typescript +const getLoginPage = requestId => ` +``` + +Tato funkce vytváří stránku s automaticky odesílaným formulářem, který je vrácen v kroku 4 výše uvedeného sekvenčního diagramu. + +```typescript + + +Přihlašovací stránka
+ + + + +const idpRouter = express.Router() + +idpRouter.post("/loginSubmitted", async (req, res) => { + const loginResponse = await idp.createLoginResponse( +``` + +Toto je obslužný program pro krok 5 ve výše uvedeném sekvenčním diagramu. [`idp.createLoginResponse`](https://github.com/tngan/samlify/blob/master/src/entity-idp.ts#L73-L125) vytváří odpověď na přihlášení. + +```typescript + sp, + { + authnContextClassRef: 'urn:oasis:names:tc:SAML:2.0:ac:classes:PasswordProtectedTransport', + audience: sp.entityID, +``` + +Cílovou skupinou je poskytovatel služeb. + +```typescript + extract: { + request: { + id: req.body.requestId + } + }, +``` + +Informace extrahované z požadavku. Jediný parametr, který nás v požadavku zajímá, je requestId, který umožňuje poskytovateli služeb párovat požadavky a jejich odpovědi. + +```typescript + signingKey: { privateKey: idpPrivateKey, publicKey: config.idpCert } // Zajistit podepsání +``` + +Potřebujeme `signingKey`, abychom měli data k podepsání odpovědi. Poskytovatel služeb nedůvěřuje nepodepsaným požadavkům. + +```typescript + }, + "post", + { + email: req.body.email +``` + +Toto je pole s informacemi o uživateli, které posíláme zpět poskytovateli služeb. + +```typescript + } + ); + + res.send(` + + + + + + + + `) +}) +``` + +Opět použijte automaticky odesílaný formulář. Toto je krok 6 ve výše uvedeném sekvenčním diagramu. + +```typescript + +// Koncový bod IdP pro požadavky na přihlášení +idpRouter.post(`/login`, +``` + +Toto je koncový bod, který přijímá požadavek na přihlášení od poskytovatele služeb. Toto je obslužný program pro krok 3 ve výše uvedeném sekvenčním diagramu. + +```typescript + async (req, res) => { + try { + // Dočasné řešení, protože se mi nepodařilo zprovoznit parseLoginRequest. + // 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"])) +``` + +Měli bychom být schopni použít [`idp.parseLoginRequest`](https://github.com/tngan/samlify/blob/master/src/entity-idp.ts#L127-L144) ke čtení ID požadavku na ověření. Nepodařilo se mi to však zprovoznit a nestálo za to tím trávit spoustu času, tak jsem prostě použil [univerzální XML parser](https://www.npmjs.com/package/fast-xml-parser). Informace, kterou potřebujeme, je atribut `ID` uvnitř značky `Prosím podepište
+ ++ + + +` +} +``` + +Zbytek je jen standardní HTML. + +```typescript +idpRouter.get("/signature/:nonce/:account/:signature", async (req, res) => { +``` + +Toto je obslužný program pro krok 5 v sekvenčním diagramu. + +```typescript + const requestId = nonces[req.params.nonce] + if (requestId === undefined) { + res.send("Špatná hodnota nonce") + return ; + } + + nonces[req.params.nonce] = undefined +``` + +Získejte ID požadavku a odstraňte hodnotu nonce z `nonces`, abyste se ujistili, že ji nelze znovu použít. + +```typescript + try { +``` + +Protože existuje mnoho způsobů, jak může být podpis neplatný, zabalíme to do bloku `try ...` `catch`, který zachytí jakékoli vyvolané chyby. + +```typescript + const validSignature = await verifyMessage({ + address: req.params.account, + message: `${loginPrompt}${req.params.nonce}`, + signature: req.params.signature + }) +``` + +Použijte [`verifyMessage`](https://viem.sh/docs/actions/public/verifyMessage#verifymessage) k implementaci kroku 5.5 v sekvenčním diagramu. + +```typescript + if (!validSignature) + throw("Špatný podpis") + } catch (err) { + res.send("Chyba:" + err) + return ; + } +``` + +Zbytek obslužného programu je ekvivalentní tomu, co jsme dělali v obslužném programu `/loginSubmitted` dříve, s výjimkou jedné malé změny. + +```typescript + const loginResponse = await idp.createLoginResponse( + . + . + . + { + email: req.params.account + "@bad.email.address" + } + ); +``` + +Nemáme skutečnou e-mailovou adresu (získáme ji v další části), takže prozatím vracíme adresu Etherea a jasně ji označujeme jako e-mailovou adresu. + +```typescript +// Koncový bod IdP pro požadavky na přihlášení +idpRouter.post(`/login`, + async (req, res) => { + try { + // Dočasné řešení, protože se mi nepodařilo zprovoznit parseLoginRequest. + // 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('Chyba při zpracování odpovědi SAML:', err); + res.status(400).send('Ověření SAML se nezdařilo'); + } + } +) +``` + +Místo `getLoginPage` nyní v obslužném programu kroku 3 použijte `getSignaturePage`. + +## Získání e-mailové adresy + +Dalším krokem je získání e-mailové adresy, identifikátoru požadovaného poskytovatelem služeb. K tomu používáme [službu Ethereum Attestation Service (EAS)](https://attest.org/). + +Nejjednodušší způsob, jak získat atestace, je použít [GraphQL API](https://docs.attest.org/docs/developer-tools/api). Používáme tento dotaz: + +``` +query GetAttestationsByRecipient { + attestations( + where: { + recipient: { equals: "${getAddress(ethAddr)}" } + schemaId: { equals: "0xfa2eff59a916e3cc3246f9aec5e0ca00874ae9d09e4678e5016006f07622f977" } + } + take: 1 + ) { + data + id + attester + } +} +``` + +Toto [`schemaId`](https://optimism.easscan.org/schema/view/0xfa2eff59a916e3cc3246f9aec5e0ca00874ae9d09e4678e5016006f07622f977) obsahuje pouze e-mailovou adresu. Tento dotaz žádá o atestace tohoto schématu. Subjekt atestace se nazývá `recipient`. Je to vždy adresa Etherea. + +Varování: Způsob, jakým zde získáváme atestace, má dva bezpečnostní problémy. + +- Přistupujeme ke koncovému bodu API `https://optimism.easscan.org/graphql`, což je centralizovaná komponenta. Můžeme získat atribut `id` a poté provést ověření na blockchainu, abychom ověřili, že je atestace skutečná, ale koncový bod API může stále cenzurovat atestace tím, že nám o nich neřekne. + + Tento problém není neřešitelný, mohli bychom spustit vlastní koncový bod GraphQL a získat atestace z protokolů řetězce, ale to je pro naše účely zbytečné. + +- Nebereme v úvahu identitu atestátora. Kdokoli nám může poskytnout nepravdivé informace. V reálné implementaci bychom měli sadu důvěryhodných atestátorů a zabývali bychom se pouze jejich atestacemi. + +Chcete-li to vidět v akci, zastavte stávající IdP a SP a spusťte tyto příkazy: + +```sh +git checkout email-address +pnpm install +pnpm start +``` + +Poté zadejte svou e-mailovou adresu. Máte dva způsoby, jak to udělat: + +- Importujte peněženku pomocí privátního klíče a použijte testovací privátní klíč `0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80`. + +- Přidejte atestaci pro svou vlastní e-mailovou adresu: + + 1. Přejděte na [schéma v průzkumníku atestací](https://optimism.easscan.org/schema/view/0xfa2eff59a916e3cc3246f9aec5e0ca00874ae9d09e4678e5016006f07622f977). + + 2. Klikněte na **Atestovat se schématem**. + + 3. Zadejte svou adresu Etherea jako příjemce, svou e-mailovou adresu jako e-mailovou adresu a vyberte **Onchain**. Poté klikněte na **Provést atestaci**. + + 4. Schvalte transakci ve své peněžence. K zaplacení za palivo budete potřebovat nějaké ETH na [blockchainu Optimism](https://app.optimism.io/bridge/deposit). + +Ať tak či onak, poté přejděte na [http://localhost:3000](http://localhost:3000) a postupujte podle pokynů. Pokud jste importovali testovací privátní klíč, e-mail, který obdržíte, je `test_addr_0@example.com`. Pokud jste použili vlastní adresu, měla by to být ta, kterou jste atestovali. + +### Podrobné vysvětlení + + + +Nové kroky jsou komunikace GraphQL, kroky 5.6 a 5.7. + +Opět zde jsou změněné části `idp.mts`. + +```typescript +import { GraphQLClient } from 'graphql-request' +import { SchemaEncoder } from '@ethereum-attestation-service/eas-sdk' +``` + +Importujte knihovny, které potřebujeme. + +```typescript +const graphqlEndpointUrl = "https://optimism.easscan.org/graphql" +``` + +Pro každý blockchain existuje [samostatný koncový bod](https://docs.attest.org/docs/developer-tools/api). + +```typescript +const graphqlClient = new GraphQLClient(graphqlEndpointUrl, { fetch }) +``` + +Vytvořte nového klienta `GraphQLClient`, kterého můžeme použít pro dotazování koncového bodu. + +```typescript +const graphqlSchema = 'string emailAddress' +const graphqlEncoder = new SchemaEncoder(graphqlSchema) +``` + +GraphQL nám poskytuje pouze neprůhledný datový objekt s bajty. Abychom mu porozuměli, potřebujeme schéma. + +```typescript +const ethereumAddressToEmail = async ethAddr => { +``` + +Funkce pro získání e-mailové adresy z adresy Etherea. + +```typescript + const query = ` + query GetAttestationsByRecipient { +``` + +Toto je dotaz GraphQL. + +```typescript + attestations( +``` + +Hledáme atestace. + +```typescript + where: { + recipient: { equals: "${getAddress(ethAddr)}" } + schemaId: { equals: "0xfa2eff59a916e3cc3246f9aec5e0ca00874ae9d09e4678e5016006f07622f977" } + } +``` + +Atestace, které chceme, jsou ty v našem schématu, kde je příjemce `getAddress(ethAddr)`. Funkce [`getAddress`](https://viem.sh/docs/utilities/getAddress#getaddress) zajišťuje, že naše adresa má správný [kontrolní součet](https://github.com/ethereum/ercs/blob/master/ERCS/erc-55.md). To je nutné, protože GraphQL rozlišuje velikost písmen. „0xBAD060A7“, „0xBad060A7“ a „0xbad060a7“ jsou různé hodnoty. + +```typescript + take: 1 +``` + +Bez ohledu na to, kolik atestací najdeme, chceme pouze tu první. + +```typescript + ) { + data + id + attester + } + }` +``` + +Pole, která chceme obdržet. + +- `attester`: Adresa, která atestaci odeslala. Obvykle se používá k rozhodnutí, zda atestaci důvěřovat, či nikoli. +- `id`: ID atestace. Tuto hodnotu můžete použít ke [čtení atestace na blockchainu](https://optimism.blockscout.com/address/0x4200000000000000000000000000000000000021?tab=read_proxy&source_address=0x4E0275Ea5a89e7a3c1B58411379D1a0eDdc5b088#0xa3112a64), abyste ověřili, že informace z dotazu GraphQL jsou správné. +- `data`: Data schématu (v tomto případě e-mailová adresa). + +```typescript + const queryResult = await graphqlClient.request(query) + + if (queryResult.attestations.length == 0) + return "no_address@available.is" +``` + +Pokud neexistuje žádná atestace, vraťte hodnotu, která je zjevně nesprávná, ale která by se poskytovateli služeb jevila jako platná. + +```typescript + const attestationDataFields = graphqlEncoder.decodeData(queryResult.attestations[0].data) + return attestationDataFields[0].value.value +} +``` + +Pokud existuje hodnota, použijte k dekódování dat `decodeData`. Nepotřebujeme metadata, která poskytuje, pouze samotnou hodnotu. + +```typescript + const loginResponse = await idp.createLoginResponse( + sp, + { + . + . + . + }, + "post", + { + email: await ethereumAddressToEmail(req.params.account) + } + ); +``` + +Pro získání e-mailové adresy použijte novou funkci. + +## A co decentralizace? + +V této konfiguraci se uživatelé nemohou vydávat za někoho, kým nejsou, pokud se spoléháme na důvěryhodné atestátory pro mapování adres Etherea na e-mailové adresy. Náš poskytovatel identity je však stále centralizovanou komponentou. Kdokoli, kdo má privátní klíč poskytovatele identity, může poskytovateli služeb posílat nepravdivé informace. + +Může existovat řešení pomocí [více-stranného výpočtu (MPC)](https://en.wikipedia.org/wiki/Secure_multi-party_computation). Doufám, že o tom napíšu v budoucím tutoriálu. + +## Závěr + +Přijetí standardu pro přihlášení, jako jsou podpisy Etherea, se potýká s problémem slepice a vejce. Poskytovatelé služeb chtějí oslovit co nejširší trh. Uživatelé chtějí mít přístup ke službám, aniž by se museli starat o podporu svého standardu pro přihlášení. +Vytváření adaptérů, jako je Ethereum IdP, nám může pomoci překonat tuto překážku. + +[Více z mé práce najdete zde](https://cryptodocguy.pro/). diff --git a/public/content/translations/cs/developers/tutorials/getting-started-with-ethereum-development-using-alchemy/index.md b/public/content/translations/cs/developers/tutorials/getting-started-with-ethereum-development-using-alchemy/index.md new file mode 100644 index 00000000000..1ed5f892f7d --- /dev/null +++ b/public/content/translations/cs/developers/tutorials/getting-started-with-ethereum-development-using-alchemy/index.md @@ -0,0 +1,156 @@ +--- +title: "Začínáme s vývojem pro Ethereum" +description: "Toto je příručka pro začátečníky, jak začít s vývojem pro Ethereum. Provedeme vás od vytvoření koncového bodu API přes vytvoření požadavku z příkazového řádku až po napsání vašeho prvního web3 skriptu! Nejsou nutné žádné zkušenosti s vývojem na blockchainu!" +author: "Elan Halpern" +tags: + [ + "javascript", + "ethers.js", + "uzly", + "dotazování", + "alchemy" + ] +skill: beginner +lang: cs +published: 2020-10-30 +source: Medium +sourceUrl: https://medium.com/alchemy-api/getting-started-with-ethereum-development-using-alchemy-c3d6a45c567f +--- + + + +Toto je příručka pro začátečníky, jak začít s vývojem pro Ethereum. V tomto tutoriálu budeme používat [Alchemy](https://alchemyapi.io/), přední vývojářskou platformu pro blockchain, která pohání miliony uživatelů ze 70 % nejlepších blockchainových aplikací, včetně Maker, 0x, MyEtherWallet, Dharma a Kyber. Alchemy nám poskytne přístup ke koncovému bodu API v řetězci Ethereum, abychom mohli číst a zapisovat transakce. + +Provedeme vás od registrace u Alchemy až po napsání vašeho prvního web3 skriptu! Nejsou nutné žádné zkušenosti s vývojem na blockchainu! + +## 1. Zaregistrujte si bezplatný účet Alchemy {#sign-up-for-a-free-alchemy-account} + +Vytvoření účtu u Alchemy je snadné, [zaregistrujte se zdarma zde](https://auth.alchemy.com/). + +## 2. Vytvořte aplikaci Alchemy {#create-an-alchemy-app} + +Pro komunikaci s řetězcem Ethereum a pro používání produktů Alchemy potřebujete API klíč k ověření vašich požadavků. + +API klíče můžete [vytvořit na řídicím panelu](https://dashboard.alchemy.com/). Chcete-li vytvořit nový klíč, přejděte na „Vytvořit aplikaci“, jak je ukázáno níže: + +Zvláštní poděkování patří [_ShapeShift_](https://shapeshift.com/) _za to, že nám umožnili ukázat jejich řídicí panel!_ + + + +Vyplňte podrobnosti v sekci „Vytvořit aplikaci“, abyste získali svůj nový klíč. Můžete zde také vidět aplikace, které jste dříve vytvořili, a ty, které vytvořil váš tým. Stávající klíče získáte kliknutím na „Zobrazit klíč“ u kterékoli aplikace. + + + +Stávající API klíče můžete také získat tak, že najedete kurzorem na „Aplikace“ a jednu vyberete. Zde můžete „zobrazit klíč“, a také „upravit aplikaci“ pro zařazení konkrétních domén na seznam povolených, prohlédnout si několik vývojářských nástrojů a zobrazit analytiku. + + + +## 3. Vytvoření požadavku z příkazového řádku {#make-a-request-from-the-command-line} + +S blockchainem Etherea můžete prostřednictvím Alchemy interagovat pomocí JSON-RPC a curl. + +Pro ruční požadavky doporučujeme interagovat s `JSON-RPC` prostřednictvím požadavků `POST`. Jednoduše předejte hlavičku `Content-Type: application/json` a váš dotaz jako tělo `POST` s následujícími poli: + +- `jsonrpc`: Verze JSON-RPC – v současné době je podporována pouze verze `2.0`. +- `method`: Metoda ETH API. [Viz reference API.](https://docs.alchemyapi.io/documentation/alchemy-api-reference/json-rpc) +- `params`: Seznam parametrů, které se mají předat metodě. +- `id`: ID vašeho požadavku. Bude vráceno odpovědí, abyste mohli sledovat, ke kterému požadavku odpověď patří. + +Zde je příklad, který můžete spustit z příkazového řádku pro získání aktuální ceny gasu: + +```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}' +``` + +_**POZNÁMKA:** Nahraďte [https://eth-mainnet.alchemyapi.io/v2/demo](https://eth-mainnet.alchemyapi.io/jsonrpc/demo) svým vlastním API klíčem `https://eth-mainnet.alchemyapi.io/v2/**your-api-key`._ + +**Výsledky:** + +```json +{ "id": 73,"jsonrpc": "2.0","result": "0x09184e72a000" // 10000000000000 } +``` + +## 4. Nastavte si svého Web3 klienta {#set-up-your-web3-client} + +**Pokud již máte existujícího klienta,** změňte URL adresu svého současného poskytovatele uzlů na URL adresu Alchemy s vaším API klíčem: `"https://eth-mainnet.alchemyapi.io/v2/your-api-key"` + +**_POZNÁMKA:_** Níže uvedené skripty je třeba spustit v **kontextu Node** nebo **uložit do souboru**, nikoli z příkazového řádku. Pokud ještě nemáte nainstalovaný Node nebo npm, podívejte se na tohoto rychlého [průvodce nastavením pro Mac](https://app.gitbook.com/@alchemyapi/s/alchemy/guides/alchemy-for-macs). + +Existuje spousta [knihoven Web3](https://docs.alchemyapi.io/guides/getting-started#other-web3-libraries), které můžete integrovat s Alchemy, my však doporučujeme používat [Alchemy Web3](https://docs.alchemy.com/reference/api-overview), přímou náhradu za web3.js, vytvořenou a nakonfigurovanou tak, aby bezproblémově fungovala s Alchemy. To poskytuje řadu výhod, jako jsou automatické opakované pokusy a robustní podpora WebSocketů. + +Chcete-li nainstalovat AlchemyWeb3.js, **přejděte do adresáře svého projektu** a spusťte: + +**S Yarn:** + +``` +yarn add @alch/alchemy-web3 +``` + +**S NPM:** + +``` +npm install @alch/alchemy-web3 +``` + +Chcete-li interagovat s infrastrukturou uzlů Alchemy, spusťte v NodeJS nebo přidejte toto do souboru JavaScript: + +```js +const { createAlchemyWeb3 } = require("@alch/alchemy-web3") +const web3 = createAlchemyWeb3( + "https://eth-mainnet.alchemyapi.io/v2/your-api-key" +) +``` + +## 5. Napište svůj první Web3 skript! {#write-your-first-web3-script} + +Nyní si trochu „ušpiníme ruce“ programováním ve web3 a napíšeme jednoduchý skript, který vypíše číslo posledního bloku z hlavní sítě Ethereum (mainnetu). + +**1.** Pokud jste tak ještě neučinili, ve svém terminálu vytvořte nový adresář projektu a přejděte do něj:\*\* + +``` +mkdir web3-example +cd web3-example +``` + +**2.** Nainstalujte si do projektu závislost Alchemy web3 (nebo jakoukoli jinou web3), pokud jste tak ještě neučinili:\*\* + +``` +npm install @alch/alchemy-web3 +``` + +**3.** Vytvořte soubor s názvem `index.js` a přidejte do něj následující obsah:\*\* + +> Nakonec byste měli `demo` nahradit svým HTTP API klíčem Alchemy. + +```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("Číslo posledního bloku je " + blockNumber) +} +main() +``` + +Nevyznáte se v asynchronních věcech? Podívejte se na tento [příspěvek na serveru Medium](https://medium.com/better-programming/understanding-async-await-in-javascript-1d81bb079b2c). + +**4. Spusťte jej ve svém terminálu pomocí node** + +``` +node index.js +``` + +**5. Nyní byste měli ve vaší konzoli vidět výstup s číslem posledního bloku!** + +``` +Číslo posledního bloku je 11043912 +``` + +**Paráda! Výborně! Právě jste napsali svůj první web3 skript pomocí Alchemy 🎉** + +Nevíte, co dál? Zkuste nasadit svůj první chytrý kontrakt a ponořte se do programování v Solidity v našem [Průvodci chytrým kontraktem Hello World](https://www.alchemy.com/docs/hello-world-smart-contract), nebo si otestujte své znalosti řídicího panelu s [Demo aplikací řídicího panelu](https://docs.alchemyapi.io/tutorials/demo-app)! + +_[Zaregistrujte se zdarma u Alchemy](https://auth.alchemy.com/), prohlédněte si naši [dokumentaci](https://www.alchemy.com/docs/) a pro nejnovější zprávy nás sledujte na [Twitteru](https://twitter.com/AlchemyPlatform)_. diff --git a/public/content/translations/cs/developers/tutorials/guide-to-smart-contract-security-tools/index.md b/public/content/translations/cs/developers/tutorials/guide-to-smart-contract-security-tools/index.md new file mode 100644 index 00000000000..ec5da90b436 --- /dev/null +++ b/public/content/translations/cs/developers/tutorials/guide-to-smart-contract-security-tools/index.md @@ -0,0 +1,102 @@ +--- +title: "Průvodce nástroji pro zabezpečení chytrých kontraktů" +description: "Přehled tří různých technik testování a analýzy programů" +author: "Trailofbits" +lang: cs +tags: [ "solidity", "smart kontrakt účty", "bezpečnost" ] +skill: intermediate +published: 2020-09-07 +source: Building secure contracts +sourceUrl: https://github.com/crytic/building-secure-contracts/tree/master/program-analysis +--- + +Budeme používat tři různé techniky testování a analýzy programů: + +- **Statická analýza pomocí nástroje [Slither](/developers/tutorials/how-to-use-slither-to-find-smart-contract-bugs/).** Všechny cesty programu jsou aproximovány a analyzovány současně prostřednictvím různých prezentací programu (např. graf řízení toku). +- **Fuzzing s nástrojem [Echidna](/developers/tutorials/how-to-use-echidna-to-test-smart-contracts/).** Kód se provádí s pseudonáhodným generováním transakcí. Fuzzer se pokusí najít sekvenci transakcí, která poruší danou vlastnost. +- **Symbolické spuštění s nástrojem [Manticore](/developers/tutorials/how-to-use-manticore-to-find-smart-contract-bugs/).** Formální ověřovací technika, která převádí každou cestu spuštění na matematický vzorec, na němž lze kontrolovat omezení. + +Každá technika má své výhody a nevýhody a bude užitečná ve [specifických případech](#determining-security-properties): + +| Technika | Nástroj | Použití | Rychlost | Zmeškané chyby | Falešné poplachy | +| ------------------- | --------- | ----------------------------- | -------- | -------------- | ---------------- | +| Statická analýza | Slither | CLI a skripty | sekund | střední | nízká | +| Fuzzing | Echidna | Vlastnosti Solidity | minut | nízká | žádná | +| Symbolické spuštění | Manticore | Vlastnosti a skripty Solidity | hodin | žádná\* | žádná | + +\* pokud jsou všechny cesty prozkoumány bez vypršení časového limitu + +**Slither** analyzuje kontrakty během několika sekund, nicméně statická analýza může vést k falešným poplachům a bude méně vhodná pro složité kontroly (např. aritmetické kontroly). Spusťte Slither prostřednictvím rozhraní API pro jednoduchý přístup k vestavěným detektorům nebo prostřednictvím rozhraní API pro uživatelem definované kontroly. + +**Echidna** potřebuje běžet několik minut a bude produkovat pouze skutečné pozitivní nálezy. Echidna kontroluje uživatelem zadané bezpečnostní vlastnosti napsané v jazyce Solidity. Může přehlédnout chyby, protože je založena na náhodném prozkoumávání. + +**Manticore** provádí analýzu s "největší váhou". Stejně jako Echidna, Manticore ověřuje vlastnosti zadané uživatelem. Bude potřebovat více času na spuštění, ale může prokázat platnost vlastnosti a nebude hlásit falešné poplachy. + +## Doporučený pracovní postup {#suggested-workflow} + +Začněte s vestavěnými detektory nástroje Slither, abyste se ujistili, že v současné době neexistují žádné jednoduché chyby, ani nebudou zavedeny později. Použijte Slither ke kontrole vlastností souvisejících s dědičností, závislostmi proměnných a strukturálními problémy. Jak se kódová základna rozrůstá, použijte nástroj Echidna k testování složitějších vlastností stavového automatu. Vraťte se k nástroji Slither a vyviňte si vlastní kontroly ochrany, které nejsou v Solidity dostupné, například ochranu proti přepsání funkce. Nakonec použijte Manticore k provedení cíleného ověření kritických bezpečnostních vlastností, např. aritmetických operací. + +- Použijte CLI nástroje Slither k zachycení běžných problémů +- Použijte Echidna k testování bezpečnostních vlastností vašeho kontraktu na vysoké úrovni +- Použijte Slither k psaní vlastních statických kontrol +- Použijte Manticore, jakmile budete chtít hloubkové ujištění o kritických bezpečnostních vlastnostech + +**Poznámka k jednotkovým testům**. Jednotkové testy jsou nezbytné pro vytváření vysoce kvalitního softwaru. Tyto techniky však nejsou nejvhodnější k nalezení bezpečnostních chyb. Obvykle se používají k testování pozitivního chování kódu (tj. kód funguje podle očekávání v normálním kontextu), zatímco bezpečnostní chyby se obvykle vyskytují v okrajových případech, které vývojáři nezohlednili. V naší studii desítek bezpečnostních auditů chytrých kontraktů nemělo [pokrytí jednotkovými testy žádný vliv na počet ani závažnost bezpečnostních chyb](https://blog.trailofbits.com/2019/08/08/246-findings-from-our-smart-contract-audits-an-executive-summary/), které jsme našli v kódu našich klientů. + +## Určení bezpečnostních vlastností {#determining-security-properties} + +Chcete-li efektivně testovat a ověřovat svůj kód, musíte identifikovat oblasti, které vyžadují pozornost. Vzhledem k tomu, že vaše zdroje vynaložené na bezpečnost jsou omezené, je důležité určit slabé nebo vysoce hodnotné části vaší kódové základny, abyste optimalizovali své úsilí. Pomoci může modelování hrozeb. Zvažte prostudování: + +- [Rychlé posouzení rizik](https://infosec.mozilla.org/guidelines/risk/rapid_risk_assessment.html) (náš preferovaný přístup, když je málo času) +- [Průvodce modelováním hrozeb datově orientovaných systémů](https://csrc.nist.gov/pubs/sp/800/154/ipd) (aka NIST 800-154) +- [Modelování hrozeb podle Shostacka](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.) +- [Použití tvrzení](https://blog.regehr.org/archives/1091) + +### Komponenty {#components} + +Vědět, co chcete kontrolovat, vám také pomůže vybrat správný nástroj. + +Mezi široké oblasti, které jsou často relevantní pro chytré kontrakty, patří: + +- **Stavový automat.** Většinu kontraktů lze reprezentovat jako stavový automat. Zvažte kontrolu, že (1) nelze dosáhnout žádného neplatného stavu, (2) pokud je stav platný, lze ho dosáhnout a (3) žádný stav kontrakt nezablokuje. + + - Echidna a Manticore jsou nástroje, které je třeba upřednostnit pro testování specifikací stavových automatů. + +- **Řízení přístupu.** Pokud má váš systém privilegované uživatele (např. vlastníka, správce, ...) musíte zajistit, že (1) každý uživatel může provádět pouze povolené akce a (2) žádný uživatel nemůže blokovat akce privilegovanějšího uživatele. + + - Slither, Echidna a Manticore mohou kontrolovat správné řízení přístupu. Například Slither může zkontrolovat, že pouze funkce na bílé listině postrádají modifikátor onlyOwner. Echidna a Manticore jsou užitečné pro složitější řízení přístupu, jako je oprávnění udělené pouze v případě, že kontrakt dosáhne daného stavu. + +- **Aritmetické operace.** Kontrola správnosti aritmetických operací je kritická. Používání `SafeMath` všude je dobrým krokem k zabránění přetečení/podtečení, nicméně stále musíte zvážit další aritmetické chyby, včetně problémů se zaokrouhlováním a chyb, které kontrakt zablokují. + + - Manticore je zde nejlepší volbou. Echidna může být použita, pokud je aritmetika mimo rozsah SMT solveru. + +- **Správnost dědičnosti.** Kontrakty v jazyce Solidity se silně spoléhají na vícenásobnou dědičnost. Snadno se mohou vyskytnout chyby, jako je stínící funkce, které chybí volání `super`, a nesprávně interpretované pořadí c3 linearizace. + + - Slither je nástroj, který zajistí odhalení těchto problémů. + +- **Externí interakce.** Kontrakty vzájemně interagují a některým externím kontraktům by se nemělo důvěřovat. Například, pokud váš kontrakt spoléhá na externí orákula, zůstane bezpečný, pokud bude polovina dostupných orákul kompromitována? + + - Manticore a Echidna jsou nejlepší volbou pro testování externích interakcí s vašimi kontrakty. Manticore má vestavěný mechanismus pro stubování externích kontraktů. + +- **Shoda se standardy.** Standardy Etherea (např. ERC20) mají v historii svého návrhu chyby. Buďte si vědomi omezení standardu, na kterém stavíte. + - Slither, Echidna a Manticore vám pomohou odhalit odchylky od daného standardu. + +### Tahák pro výběr nástrojů {#tool-selection-cheatsheet} + +| Komponenta | Nástroje | Příklady | +| -------------------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Stavový automat | Echidna, Manticore | | +| Řízení přístupu | Slither, Echidna, Manticore | [Cvičení 2 nástroje Slither](https://github.com/crytic/slither/blob/7f54c8b948c34fb35e1d61adaa1bd568ca733253/docs/src/tutorials/exercise2.md), [Cvičení 2 nástroje Echidna](https://github.com/crytic/building-secure-contracts/blob/master/program-analysis/echidna/exercises/Exercise-2.md) | +| Aritmetické operace | Manticore, Echidna | [Cvičení 1 nástroje Echidna](https://github.com/crytic/building-secure-contracts/blob/master/program-analysis/echidna/exercises/Exercise-1.md), [Cvičení 1–3 nástroje Manticore](https://github.com/crytic/building-secure-contracts/tree/master/program-analysis/manticore/exercises) | +| Správnost dědičnosti | Slither | [Cvičení 1 nástroje Slither](https://github.com/crytic/slither/blob/7f54c8b948c34fb35e1d61adaa1bd568ca733253/docs/src/tutorials/exercise1.md) | +| Externí interakce | Manticore, Echidna | | +| Shoda se standardy | Slither, Echidna, Manticore | [`slither-erc`](https://github.com/crytic/slither/wiki/ERC-Conformance) | + +V závislosti na vašich cílech bude třeba zkontrolovat i další oblasti, ale tyto hrubozrnné oblasti zaměření jsou dobrým začátkem pro jakýkoli systém chytrých kontraktů. + +Naše veřejné audity obsahují příklady ověřených nebo testovaných vlastností. Zvažte přečtení sekcí `Automated Testing and Verification` v následujících zprávách, abyste si prohlédli reálné bezpečnostní vlastnosti: + +- [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/cs/developers/tutorials/hello-world-smart-contract-fullstack/index.md b/public/content/translations/cs/developers/tutorials/hello-world-smart-contract-fullstack/index.md new file mode 100644 index 00000000000..0f37ba4dc20 --- /dev/null +++ b/public/content/translations/cs/developers/tutorials/hello-world-smart-contract-fullstack/index.md @@ -0,0 +1,1542 @@ +--- +title: "Chytrý kontrakt Hello World pro začátečníky – Fullstack" +description: "Úvodní tutoriál k psaní a nasazení jednoduchého chytrého kontraktu na Ethereum." +author: "nstrike2" +tags: + [ + "solidity", + "hardhat", + "alchemy", + "smart kontrakt účty", + "nasazování", + "průzkumník bloků", + "frontend", + "transakce" + ] +skill: beginner +lang: cs +published: 2021-10-25 +--- + +Tento průvodce je pro vás, pokud jste v blockchainovém vývoji nováčkem a nevíte, kde začít nebo jak nasadit chytré kontrakty a interagovat s nimi. Projdeme si vytvoření a nasazení jednoduchého chytrého kontraktu v testovací síti Goerli pomocí [MetaMask](https://metamask.io), [Solidity](https://docs.soliditylang.org/en/v0.8.0/), [Hardhat](https://hardhat.org) a [Alchemy](https://alchemy.com/eth). + +K dokončení tohoto tutoriálu budete potřebovat účet Alchemy. [Zaregistrujte si bezplatný účet](https://www.alchemy.com/). + +Pokud budete mít kdykoli nějaké otázky, neváhejte se na nás obrátit na [Discordu Alchemy](https://discord.gg/gWuC7zB)! + +## Část 1 – Vytvoření a nasazení chytrého kontraktu pomocí Hardhat {#part-1} + +### Připojení k síti Ethereum {#connect-to-the-ethereum-network} + +Existuje mnoho způsobů, jak posílat požadavky na blockchain Etherea. Pro zjednodušení použijeme bezplatný účet na Alchemy, vývojářské platformě a API pro blockchain, která nám umožňuje komunikovat s ethereovým chainem, aniž bychom museli sami provozovat uzel. Alchemy má také vývojářské nástroje pro monitorování a analýzu; v tomto tutoriálu je využijeme, abychom pochopili, co se děje pod pokličkou při nasazení našeho chytrého kontraktu. + +### Vytvoření aplikace a klíče API {#create-your-app-and-api-key} + +Jakmile si vytvoříte účet Alchemy, můžete si vygenerovat API klíč vytvořením aplikace. To vám umožní zadávat požadavky do testovací sítě Goerli. Pokud testovací sítě neznáte, můžete si přečíst [průvodce Alchemy výběrem sítě](https://www.alchemy.com/docs/choosing-a-web3-network). + +Na řídicím panelu Alchemy najděte v navigační liště rozevírací seznam **Aplikace** a klikněte na **Vytvořit aplikaci**. + + + +Pojmenujte svou aplikaci „_Hello World_“ a napište krátký popis. Jako prostředí vyberte **Staging** a jako síť **Goerli**. + + + +_Poznámka: Nezapomeňte vybrat **Goerli**, jinak tento tutoriál nebude fungovat._ + +Klikněte na **Vytvořit aplikaci**. Vaše aplikace se objeví v tabulce níže. + +### Vytvoření účtu Ethereum {#create-an-ethereum-account} + +Potřebujete účet Ethereum pro odesílání a přijímání transakcí. Použijeme MetaMask, virtuální peněženku v prohlížeči, která umožňuje uživatelům spravovat adresu svého ethereového účtu. + +Účet MetaMask si můžete zdarma stáhnout a vytvořit [zde](https://metamask.io/download). Při vytváření účtu nebo pokud již účet máte, nezapomeňte se vpravo nahoře přepnout na „testovací síť Goerli“ (abychom nepracovali se skutečnými penězi). + +### Krok 4: Přidejte ether z Faucetu {#step-4-add-ether-from-a-faucet} + +Chcete-li nasadit chytrý kontrakt do testovací sítě, budete potřebovat nějaké falešné ETH. Chcete-li získat ETH v síti Goerli, přejděte na faucet Goerli a zadejte adresu svého účtu Goerli. Upozorňujeme, že faucety Goerli mohou být v poslední době trochu nespolehlivé – podívejte se na [stránku testovacích sítí](/developers/docs/networks/#goerli), kde najdete seznam možností k vyzkoušení: + +_Poznámka: Kvůli přetížení sítě to může chvíli trvat._ +`` + +### Krok 5: Zkontrolujte si zůstatek {#step-5-check-your-balance} + +Chcete-li si dvakrát ověřit, že máte ETH v peněžence, zadejte požadavek [eth_getBalance](https://docs.alchemyapi.io/alchemy/documentation/alchemy-api-reference/json-rpc#eth_getbalance) pomocí [nástroje Alchemy Composer](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). Tím se vrátí množství ETH v naší peněžence. Chcete-li se dozvědět více, podívejte se na [krátký tutoriál od Alchemy o tom, jak používat nástroj Composer](https://youtu.be/r6sjRxBZJuU). + +Zadejte adresu svého účtu MetaMask a klikněte na **Odeslat požadavek**. Zobrazí se odpověď, která vypadá jako úryvek kódu níže. + +```json +{ "jsonrpc": "2.0", "id": 0, "result": "0x2B5E3AF16B1880000" } +``` + +> _Poznámka: Tento výsledek je ve wei, nikoliv v ETH. Wei je nejmenší jednotkou etheru._ + +Uf! Naše falešné peníze jsou všechny tam. + +### Krok 6: Inicializace našeho projektu {#step-6-initialize-our-project} + +Nejprve musíme pro náš projekt vytvořit složku. Přejděte na příkazový řádek a zadejte následující. + +``` +mkdir hello-world +cd hello-world +``` + +Nyní, když jsme uvnitř složky našeho projektu, použijeme `npm init` k inicializaci projektu. + +> Pokud ještě nemáte nainstalovaný npm, postupujte podle [těchto pokynů k instalaci Node.js a npm](https://docs.alchemyapi.io/alchemy/guides/alchemy-for-macs#1-install-nodejs-and-npm). + +Pro účely tohoto tutoriálu nezáleží na tom, jak na inicializační otázky odpovíte. Zde je pro referenci, jak jsme to udělali my: + +``` +název balíčku: (hello-world) +verze: (1.0.0) +popis: chytrý kontrakt hello world +vstupní bod: (index.js) +příkaz k testování: +repositář git: +klíčová slova: +autor: +licence: (ISC) + +Chystá se zápis do /Users/.../.../.../hello-world/package.json: + +{ + "name": "hello-world", + "version": "1.0.0", + "description": "chytrý kontrakt hello world", + "main": "index.js", + "scripts": { + "test": "echo \"Chyba: není zadán žádný test\" && exit 1" + }, + "author": "", + "license": "ISC" +} +``` + +Schvalte package.json a můžeme pokračovat! + +### Krok 7: Stažení nástroje Hardhat {#step-7-download-hardhat} + +Hardhat je vývojové prostředí pro kompilaci, nasazení, testování a ladění vašeho softwaru pro Ethereum. Pomáhá vývojářům při lokálním budování chytrých kontraktů a dapps před jejich nasazením na živý řetězec. + +Uvnitř našeho projektu `hello-world` spusťte: + +``` +npm install --save-dev hardhat +``` + +Další podrobnosti o [instalačních pokynech](https://hardhat.org/getting-started/#overview) naleznete na této stránce. + +### Krok 8: Vytvoření projektu Hardhat {#step-8-create-hardhat-project} + +Uvnitř složky projektu `hello-world` spusťte: + +``` +npx hardhat +``` + +Poté by se vám měla zobrazit uvítací zpráva a možnost vybrat si, co chcete dělat. Vyberte „create an empty hardhat.config.js“: + +``` +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 + +👷 Vítejte v Hardhat v2.0.11 👷 + +Co chcete udělat? … +Vytvořit vzorový projekt +❯ Vytvořit prázdný soubor hardhat.config.js +Ukončit +``` + +Tím se v projektu vygeneruje soubor `hardhat.config.js`. Ten použijeme později v tomto tutoriálu k určení nastavení našeho projektu. + +### Krok 9: Přidání složek projektu {#step-9-add-project-folders} + +Aby byl projekt přehledný, vytvoříme dvě nové složky. V příkazovém řádku přejděte do kořenového adresáře projektu `hello-world` a zadejte: + +``` +mkdir contracts +mkdir scripts +``` + +- `contracts/` je místo, kam uložíme soubor s kódem našeho chytrého kontraktu Hello World +- `scripts/` je místo, kam uložíme skripty pro nasazení našeho kontraktu a interakci s ním + +### Krok 10: Napsání našeho kontraktu {#step-10-write-our-contract} + +Možná si říkáte, kdy budeme psát kód? Je čas! + +Otevřete si projekt hello-world ve svém oblíbeném editoru. Chytré kontrakty se nejčastěji píší v Solidity, který použijeme i my. + +1. Přejděte do složky `contracts` a vytvořte nový soubor s názvem `HelloWorld.sol` +2. Níže je ukázka chytrého kontraktu Hello World, který budeme v tomto tutoriálu používat. Zkopírujte níže uvedený obsah do souboru `HelloWorld.sol`. + +_Poznámka: Nezapomeňte si přečíst komentáře, abyste pochopili, co tento kontrakt dělá._ + +``` +// Určuje verzi Solidity pomocí sémantického verzování. +// Více informací: https://solidity.readthedocs.io/en/v0.5.10/layout-of-source-files.html#pragma +pragma solidity >=0.7.3; + +// Definuje kontrakt s názvem `HelloWorld`. +// Kontrakt je soubor funkcí a dat (jeho stav). Po nasazení se kontrakt nachází na určité adrese na blockchainu Ethereum. Více informací: https://solidity.readthedocs.io/en/v0.5.10/structure-of-a-contract.html +contract HelloWorld { + + // Emituje se při zavolání funkce update + // Události chytrého kontraktu jsou způsob, jakým může váš kontrakt sdělit vašemu front-endu, že se na blockchainu něco stalo, což může „naslouchat“ určitým událostem a při jejich výskytu provést akci. + event UpdatedMessages(string oldStr, string newStr); + + // Deklaruje stavovou proměnnou `message` typu `string`. + // Stavové proměnné jsou proměnné, jejichž hodnoty jsou trvale uloženy v úložišti kontraktu. Klíčové slovo `public` zpřístupňuje proměnné zvenčí kontraktu a vytváří funkci, kterou mohou volat jiné kontrakty nebo klienti pro přístup k hodnotě. + string public message; + + // Podobně jako v mnoha třídních objektově orientovaných jazycích je konstruktor speciální funkce, která se provádí pouze při vytvoření kontraktu. + // Konstruktory se používají k inicializaci dat kontraktu. Více informací:https://solidity.readthedocs.io/en/v0.5.10/contracts.html#constructors + constructor(string memory initMessage) { + + // Přijímá řetězcový argument `initMessage` a nastavuje hodnotu do úložné proměnné kontraktu `message`). + message = initMessage; + } + + // Veřejná funkce, která přijímá řetězcový argument a aktualizuje úložnou proměnnou `message`. + function update(string memory newMessage) public { + string memory oldMsg = message; + message = newMessage; + emit UpdatedMessages(oldMsg, newMessage); + } +} +``` + +Jedná se o základní chytrý kontrakt, který při vytvoření ukládá zprávu. Lze jej aktualizovat voláním funkce `update`. + +### Krok 11: Připojení MetaMask a Alchemy k vašemu projektu {#step-11-connect-metamask-alchemy-to-your-project} + +Vytvořili jsme si peněženku MetaMask, účet Alchemy a napsali jsme náš chytrý kontrakt, nyní je čas je všechny tři propojit. + +Každá transakce odeslaná z vaší peněženky vyžaduje podpis s použitím vašeho jedinečného privátního klíče. Abychom programu toto oprávnění poskytli, můžeme náš privátní klíč bezpečně uložit do souboru prostředí. Zde také uložíme API klíč pro Alchemy. + +> Chcete-li se dozvědět více o odesílání transakcí, podívejte se na [tento tutoriál](https://www.alchemy.com/docs/hello-world-smart-contract#step-11-connect-metamask--alchemy-to-your-project) o odesílání transakcí pomocí Web3. + +Nejprve nainstalujte balíček dotenv do adresáře vašeho projektu: + +``` +npm install dotenv --save +``` + +Poté vytvořte v kořenovém adresáři projektu soubor `.env`. Přidejte do něj svůj privátní klíč MetaMask a URL adresa Alchemy API pro HTTP. + +Váš soubor prostředí se musí jmenovat `.env`, jinak nebude rozpoznán jako soubor prostředí. + +Nenazývejte jej `process.env` ani `.env-custom` ani nijak jinak. + +- Postupujte podle [těchto pokynů](https://metamask.zendesk.com/hc/en-us/articles/360015289632-How-to-Export-an-Account-Private-Key) a exportujte svůj privátní klíč +- Níže naleznete postup, jak získat URL pro HTTP API Alchemy + + + +Váš soubor `.env` by měl vypadat takto: + +``` +API_URL = "https://eth-goerli.alchemyapi.io/v2/your-api-key" +PRIVATE_KEY = "your-metamask-private-key" +``` + +Abychom je skutečně propojili s naším kódem, budeme na tyto proměnné odkazovat v našem souboru `hardhat.config.js` v kroku 13. + +### Krok 12: Instalace Ethers.js {#step-12-install-ethersjs} + +Ethers.js je knihovna, která usnadňuje interakci a zadávání požadavků na Ethereum tím, že obaluje [standardní metody JSON-RPC](https://docs.alchemyapi.io/alchemy/documentation/alchemy-api-reference/json-rpc) uživatelsky přívětivějšími metodami. + +Hardhat umožňuje integrovat [pluginy](https://hardhat.org/plugins/) pro další nástroje a rozšířenou funkčnost. Pro nasazení kontraktu využijeme [plugin Ethers](https://hardhat.org/docs/plugins/official-plugins#hardhat-ethers). + +V adresáři projektu zadejte: + +```bash +npm install --save-dev @nomiclabs/hardhat-ethers "ethers@^5.0.0" +``` + +### Krok 13: Aktualizace souboru hardhat.config.js {#step-13-update-hardhat-configjs} + +Zatím jsme přidali několik závislostí a pluginů, nyní musíme aktualizovat `hardhat.config.js`, aby o nich náš projekt věděl. + +Aktualizujte svůj soubor `hardhat.config.js`, aby vypadal takto: + +```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}`], + }, + }, +} +``` + +### Krok 14: Kompilace našeho kontraktu {#step-14-compile-our-contract} + +Abychom se ujistili, že zatím vše funguje, zkompilujeme si náš kontrakt. Úkol `compile` je jedním z vestavěných úkolů Hardhatu. + +Z příkazového řádku spusťte: + +```bash +npx hardhat compile +``` + +Může se zobrazit varování o `SPDX license identifier not provided in source file`, ale nemusíte se tím znepokojovat – doufejme, že vše ostatní vypadá dobře! Pokud ne, vždy můžete napsat zprávu na [discordu Alchemy](https://discord.gg/u72VCg3). + +### Krok 15: Napsání našeho skriptu pro nasazení {#step-15-write-our-deploy-script} + +Nyní, když je náš kontrakt napsán a náš konfigurační soubor je připraven, je čas napsat náš skript pro nasazení kontraktu. + +Přejděte do složky `scripts/`, vytvořte nový soubor s názvem `deploy.js` a přidejte do něj následující obsah: + +```javascript +async function main() { + const HelloWorld = await ethers.getContractFactory("HelloWorld") + + // Spusťte nasazení, vrátí se promise, která se vyřeší na objekt kontraktu + const hello_world = await HelloWorld.deploy("Hello World!") + console.log("Contract deployed to address:", hello_world.address) +} + +main() + .then(() => process.exit(0)) + .catch((error) => { + console.error(error) + process.exit(1) + }) +``` + +Hardhat skvěle vysvětluje, co každý z těchto řádků kódu dělá ve svém [výukovém programu Kontrakty](https://hardhat.org/tutorial/testing-contracts.html#writing-tests), a my jsme zde jejich vysvětlení převzali. + +```javascript +const HelloWorld = await ethers.getContractFactory("HelloWorld") +``` + +`ContractFactory` v ethers.js je abstrakce používaná k nasazení nových chytrých kontraktů, takže `HelloWorld` je zde [továrna](https://en.wikipedia.org/wiki/Factory_\(object-oriented_programming\)) pro instance našeho kontraktu hello world. Při použití pluginu `hardhat-ethers` jsou instance `ContractFactory` a `Contract` ve výchozím nastavení připojeny k prvnímu podepisujícímu (vlastníkovi). + +```javascript +const hello_world = await HelloWorld.deploy() +``` + +Volání `deploy()` na `ContractFactory` spustí nasazení a vrátí `Promise`, která se vyřeší na objekt `Contract`. Toto je objekt, který má metodu pro každou z funkcí našeho chytrého kontraktu. + +### Krok 16: Nasazení našeho kontraktu {#step-16-deploy-our-contract} + +Konečně jsme připraveni nasadit náš chytrý kontrakt! Přejděte na příkazový řádek a spusťte: + +```bash +npx hardhat run scripts/deploy.js --network goerli +``` + +Měli byste pak vidět něco takového: + +```bash +Kontrakt nasazen na adresu: 0x6cd7d44516a20882cEa2DE9f205bF401c0d23570 +``` + +**Tuto adresu si prosím uložte**. Budeme ji používat později v tomto tutoriálu. + +Pokud přejdeme na [Goerli Etherscan](https://goerli.etherscan.io) a vyhledáme adresu našeho kontraktu, měli bychom vidět, že byl úspěšně nasazen. Transakce bude vypadat nějak takto: + + + +Adresa `From` by se měla shodovat s adresou vašeho účtu MetaMask a v adrese `To` bude uvedeno **Vytvoření kontraktu**. Pokud klikneme na transakci, uvidíme v poli `To` adresu našeho kontraktu. + + + +Výborně! Právě jste nasadili chytrý kontrakt do testovací sítě Ethereum. + +Abyste pochopili, co se děje pod pokličkou, přejděte na kartu Průzkumník v našem [řídicím panelu Alchemy](https://dashboard.alchemy.com/explorer). Pokud máte více aplikací Alchemy, nezapomeňte filtrovat podle aplikace a vybrat **Hello World**. + + + +Zde uvidíte několik metod JSON-RPC, které pro nás Hardhat/Ethers vytvořil pod pokličkou, když jsme volali funkci `.deploy()`. Dvě důležité metody jsou zde [`eth_sendRawTransaction`](https://docs.alchemyapi.io/alchemy/documentation/alchemy-api-reference/json-rpc#eth_sendrawtransaction), což je požadavek na zapsání našeho kontraktu do chainu Goerli, a [`eth_getTransactionByHash`](https://docs.alchemyapi.io/alchemy/documentation/alchemy-api-reference/json-rpc#eth_gettransactionbyhash), což je požadavek na přečtení informací o naší transakci na základě daného haše. Chcete-li se dozvědět více o odesílání transakcí, podívejte se na [náš tutoriál o odesílání transakcí pomocí Web3](/developers/tutorials/sending-transactions-using-web3-and-alchemy/). + +## Část 2: Interakce s vaším chytrým kontraktem {#part-2-interact-with-your-smart-contract} + +Nyní, když jsme úspěšně nasadili chytrý kontrakt do sítě Goerli, se naučíme, jak s ním interagovat. + +### Vytvoření souboru interact.js {#create-a-interactjs-file} + +Toto je soubor, do kterého napíšeme náš interakční skript. Budeme používat knihovnu Ethers.js, kterou jste si nainstalovali v části 1. + +Uvnitř složky `scripts/` vytvořte nový soubor s názvem `interact.js` a přidejte následující kód: + +```javascript +// interact.js + +const API_KEY = process.env.API_KEY +const PRIVATE_KEY = process.env.PRIVATE_KEY +const CONTRACT_ADDRESS = process.env.CONTRACT_ADDRESS +``` + +### Aktualizujte svůj soubor .env {#update-your-env-file} + +Budeme používat nové proměnné prostředí, takže je musíme definovat v souboru `.env`, který [jsme vytvořili dříve](#step-11-connect-metamask-&-alchemy-to-your-project). + +Budeme muset přidat definici pro náš Alchemy `API_KEY` a `CONTRACT_ADDRESS`, kde byl váš chytrý kontrakt nasazen. + +Váš soubor `.env` by měl vypadat nějak takto: + +```bash +# .env + +API_URL = "https://eth-goerli.alchemyapi.io/v2/
+ 
+
+
+
+)
+```
+
+Pokud si tento kód pozorně prostudujete, zjistíte, kde v našem UI používáme naše různé stavové proměnné:
+
+- Na řádcích 6-12, pokud je peněženka uživatele připojena (tj. `walletAddress.length > 0`), zobrazíme zkrácenou verzi adresy uživatele `walletAddress` v tlačítku s ID „walletButton;“ jinak se jednoduše zobrazí „Připojit peněženku“.
+- Na řádku 17 zobrazujeme aktuální zprávu uloženou v chytrém kontraktu, která je zachycena v řetězci `message`.
+- Na řádcích 23-26 používáme [řízenou komponentu](https://legacy.reactjs.org/docs/forms.html#controlled-components) k aktualizaci naší stavové proměnné `newMessage`, když se změní vstup v textovém poli.
+
+Kromě našich stavových proměnných také uvidíte, že funkce `connectWalletPressed` a `onUpdatePressed` jsou volány při kliknutí na tlačítka s ID `publishButton` a `walletButton`.
+
+Nakonec se podívejme, kam se tato komponenta `HelloWorld.js` přidává.
+
+Pokud přejdete do souboru `App.js`, který je hlavní komponentou v Reactu a slouží jako kontejner pro všechny ostatní komponenty, uvidíte, že naše komponenta `HelloWorld.js` je vložena na řádku 7.
+
+V neposlední řadě se podívejme na ještě jeden soubor, který máte k dispozici, a to `interact.js`.
+
+#### Soubor `interact.js` {#the-interact-js-file}
+
+Protože se chceme řídit paradigmatem [M-V-C](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller), budeme chtít samostatný soubor, který bude obsahovat všechny naše funkce pro správu logiky, dat a pravidel naší dapp, a poté budeme moci tyto funkce exportovat do našeho frontendu (naší komponenty `HelloWorld.js`).
+
+👆🏽Toto je přesně účel našeho souboru `interact.js`!
+
+Přejděte do složky `util` ve vašem adresáři `src` a všimnete si, že jsme zahrnuli soubor s názvem `interact.js`, který bude obsahovat všechny naše funkce a proměnné pro interakci s chytrým kontraktem a peněženkou.
+
+```javascript
+// interact.js
+
+//export const helloWorldContract;
+
+export const loadCurrentMessage = async () => {}
+
+export const connectWallet = async () => {}
+
+const getCurrentWalletConnected = async () => {}
+
+export const updateMessage = async (message) => {}
+```
+
+Na začátku souboru si všimnete, že jsme zakomentovali objekt `helloWorldContract`. Později v tomto tutoriálu tento objekt odkomentujeme a instancujeme náš chytrý kontrakt do této proměnné, kterou pak exportujeme do naší komponenty `HelloWorld.js`.
+
+Čtyři neimplementované funkce za naším objektem `helloWorldContract` dělají následující:
+
+- `loadCurrentMessage` – tato funkce se stará o logiku načítání aktuální zprávy uložené v chytrém kontraktu. Provede volání _čtení_ na chytrý kontrakt Hello World pomocí [Alchemy Web3 API](https://github.com/alchemyplatform/alchemy-web3).
+- `connectWallet` - tato funkce připojí peněženku MetaMask uživatele k naší dapp.
+- `getCurrentWalletConnected` – tato funkce zkontroluje, zda je účet Ethereum již připojen k naší dapp při načítání stránky a podle toho aktualizuje naše UI.
+- `updateMessage` – tato funkce aktualizuje zprávu uloženou v chytrém kontraktu. Provede _zápisové_ volání na chytrý kontrakt Hello World, takže peněženka MetaMask uživatele bude muset podepsat transakci Ethereum k aktualizaci zprávy.
+
+Nyní, když rozumíme tomu, s čím pracujeme, pojďme zjistit, jak číst z našeho chytrého kontraktu!
+
+### Krok 3: Čtení z vašeho chytrého kontraktu {#step-3-read-from-your-smart-contract}
+
+Chcete-li číst ze svého chytrého kontraktu, musíte úspěšně nastavit:
+
+- API připojení k řetězci Ethereum
+- Načtenou instanci vašeho chytrého kontraktu
+- Funkci pro volání funkce vašeho chytrého kontraktu
+- Posluchače pro sledování aktualizací, když se změní data, která čtete z chytrého kontraktu
+
+To může znít jako mnoho kroků, ale nebojte se! Provedeme vás každým z nich krok za krokem! :\)
+
+#### Vytvoření API spojení s Ethereum chainem {#establish-an-api-connection-to-the-ethereum-chain}
+
+Vzpomínáte si, jak jsme v části 2 tohoto tutoriálu použili náš [Alchemy Web3 klíč k čtení z našeho chytrého kontraktu](https://docs.alchemy.com/alchemy/tutorials/hello-world-smart-contract/interacting-with-a-smart-contract#step-1-install-web3-library)? Ve své dapp budete také potřebovat klíč Alchemy Web3, abyste mohli číst z chainu.
+
+Pokud jej ještě nemáte, nejprve si nainstalujte [Alchemy Web3](https://github.com/alchemyplatform/alchemy-web3) tak, že přejdete do kořenového adresáře vašich `starter-files` a spustíte v terminálu následující příkaz:
+
+```text
+npm install @alch/alchemy-web3
+```
+
+[Alchemy Web3](https://github.com/alchemyplatform/alchemy-web3) je nadstavba nad [Web3.js](https://docs.web3js.org/), která poskytuje vylepšené metody API a další klíčové výhody, které vám usnadní život vývojáře web3. Je navržen tak, aby vyžadoval minimální konfiguraci, takže jej můžete ve své aplikaci začít používat okamžitě!
+
+Poté nainstalujte balíček [dotenv](https://www.npmjs.com/package/dotenv) do adresáře svého projektu, abychom měli bezpečné místo pro uložení našeho API klíče po jeho získání.
+
+```text
+npm install dotenv --save
+```
+
+Pro naši dapp **budeme používat náš API klíč pro Websockets** namísto našeho API klíče pro HTTP, protože nám to umožní nastavit posluchače, který detekuje, kdy se změní zpráva uložená v chytrém kontraktu.
+
+Jakmile budete mít svůj API klíč, vytvořte v kořenovém adresáři soubor `.env` a přidejte do něj svou Alchemy Websockets URL. Poté by měl váš soubor `.env` vypadat takto:
+
+```javascript
+REACT_APP_ALCHEMY_KEY = wss://eth-goerli.ws.alchemyapi.io/v2/Aktuální zpráva:
+{message}
+ +Nová zpráva:
+ +
+ setNewMessage(e.target.value)}
+ value={newMessage}
+ />
+
+
+{status}
+ + ++ {" "} + 🦊 + Musíte si do prohlížeče nainstalovat MetaMask, virtuální peněženku Ethereum. + +
+ + ), + } + } +} +``` + +Co přesně tedy tento obrovský blok kódu dělá? + +Nejprve zkontroluje, zda je ve vašem prohlížeči povoleno `window.ethereum`. + +`window.ethereum` je globální API, které vkládá MetaMask a další poskytovatelé peněženek a které webovým stránkám umožňuje žádat o účty uživatelů Etherea. Pokud je schváleno, může číst data z blockchainů, ke kterým je uživatel připojen, a navrhovat uživateli podepisování zpráv a transakcí. Pro více informací se podívejte do [dokumentace MetaMasku](https://docs.metamask.io/guide/ethereum-provider.html#table-of-contents)! + +Pokud `window.ethereum` _není_ přítomno, znamená to, že MetaMask není nainstalován. Výsledkem je vrácení objektu JSON, kde vrácená `adresa` je prázdný řetězec a objekt JSX `status` sděluje, že uživatel si musí nainstalovat MetaMask. + +Pokud `window.ethereum` _je_ přítomno, pak to začne být zajímavé. + +Pomocí smyčky try/catch se pokusíme připojit k MetaMasku voláním [`window.ethereum.request({ method: \"eth_requestAccounts\" });`](https://docs.metamask.io/guide/rpc-api.html#eth-requestaccounts). Volání této funkce otevře MetaMask v prohlížeči, kde bude uživatel vyzván k připojení své peněženky k vaší dapp. + +- Pokud se uživatel rozhodne připojit, `method: "eth_requestAccounts"` vrátí pole obsahující všechny adresy účtů uživatele, které se k dapp připojily. Celkově naše funkce `connectWallet` vrátí objekt JSON, který obsahuje _první_ `adresu` v tomto poli (viz řádek 9) a zprávu `status`, která vyzve uživatele k napsání zprávy do chytrého kontraktu. +- Pokud uživatel spojení odmítne, objekt JSON bude obsahovat prázdný řetězec pro vrácenou `adresu` a zprávu `status`, která odráží, že uživatel spojení odmítl. + +Nyní, když jsme napsali tuto funkci `connectWallet`, je dalším krokem její zavolání v naší komponentě `HelloWorld.js`. + +#### Přidání funkce `connectWallet` do vaší UI komponenty `HelloWorld.js` {#add-the-connectWallet-function-to-your-HelloWorld-js-ui-component} + +Přejděte na funkci `connectWalletPressed` v `HelloWorld.js` a aktualizujte ji na následující: + +```javascript +// HelloWorld.js + +const connectWalletPressed = async () => { + const walletResponse = await connectWallet() + setStatus(walletResponse.status) + setWallet(walletResponse.address) +} +``` + +Všimli jste si, jak je většina naší funkčnosti abstrahována od naší komponenty `HelloWorld.js` do souboru `interact.js`? To proto, abychom dodrželi paradigma M-V-C! + +V `connectWalletPressed` jednoduše provedeme await volání naší importované funkce `connectWallet` a pomocí její odpovědi aktualizujeme naše proměnné `status` a `walletAddress` prostřednictvím jejich stavových háků (hooks). + +Nyní si oba soubory (`HelloWorld.js` a `interact.js`) uložme a otestujme naše UI. + +Otevřete si prohlížeč na stránce [http://localhost:3000/](http://localhost:3000/) a stiskněte tlačítko „Připojit peněženku“ vpravo nahoře. + +Pokud máte nainstalovaný MetaMask, měli byste být vyzváni k připojení své peněženky k vaší dapp. Přijměte výzvu k připojení. + +Měli byste vidět, že tlačítko peněženky nyní ukazuje, že je vaše adresa připojena! Super! 🔥 + +Dále zkuste obnovit stránku... to je divné. Naše tlačítko peněženky nás vyzývá k připojení MetaMasku, i když už je připojen... + +Ale žádný strach! To snadno vyřešíme (chápete?). implementací `getCurrentWalletConnected`, která zkontroluje, zda je adresa již připojena k naší dapp, a podle toho aktualizuje naše UI! + +#### Funkce `getCurrentWalletConnected` {#the-getcurrentwalletconnected-function} + +Aktualizujte svou funkci `getCurrentWalletConnected` v souboru `interact.js` na následující: + +```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: "👆🏽 Napište zprávu do textového pole výše.", + } + } else { + return { + address: "", + status: "🦊 Připojte se k MetaMask pomocí tlačítka vpravo nahoře.", + } + } + } catch (err) { + return { + address: "", + status: "😥 " + err.message, + } + } + } else { + return { + address: "", + status: ( + ++ {" "} + 🦊 + Musíte si do prohlížeče nainstalovat MetaMask, virtuální peněženku Ethereum. + +
+ + ), + } + } +} +``` + +Tento kód je _velmi_ podobný funkci `connectWallet`, kterou jsme právě napsali v předchozím kroku. + +Hlavní rozdíl je v tom, že místo volání metody `eth_requestAccounts`, která otevře MetaMask, aby si uživatel mohl připojit svou peněženku, zde voláme metodu `eth_accounts`, která jednoduše vrací pole obsahující adresy MetaMask aktuálně připojené k naší dapp. + +Abychom tuto funkci viděli v akci, zavoláme ji ve funkci `useEffect` naší komponenty `HelloWorld.js`: + +```javascript +// HelloWorld.js + +useEffect(async () => { + const message = await loadCurrentMessage() + setMessage(message) + addSmartContractListener() + + const { address, status } = await getCurrentWalletConnected() + setWallet(address) + setStatus(status) +}, []) +``` + +Všimněte si, že odpověď z našeho volání `getCurrentWalletConnected` používáme k aktualizaci našich stavových proměnných `walletAddress` a `status`. + +Nyní, když jste přidali tento kód, zkusme obnovit okno našeho prohlížeče. + +Paráda! Tlačítko by mělo hlásit, že jste připojeni, a zobrazovat náhled adresy vaší připojené peněženky – i po obnovení! + +#### Implementace `addWalletListener` {#implement-addwalletlistener} + +Posledním krokem v nastavení peněženky naší dapp je implementace posluchače peněženky, aby se naše uživatelské rozhraní aktualizovalo, když se změní stav naší peněženky, například když se uživatel odpojí nebo přepne účty. + +Ve vašem souboru `HelloWorld.js` upravte svou funkci `addWalletListener` na následující: + +```javascript +// HelloWorld.js + +function addWalletListener() { + if (window.ethereum) { + window.ethereum.on("accountsChanged", (accounts) => { + if (accounts.length > 0) { + setWallet(accounts[0]) + setStatus("👆🏽 Napište zprávu do textového pole výše.") + } else { + setWallet("") + setStatus("🦊 Připojte se k MetaMask pomocí tlačítka vpravo nahoře.") + } + }) + } else { + setStatus( ++ {" "} + 🦊 + Musíte si do prohlížeče nainstalovat MetaMask, virtuální peněženku Ethereum. + +
+ ) + } +} +``` + +Vsadím se, že už ani nepotřebujete naši pomoc, abyste pochopili, co se zde děje, ale pro úplnost si to rychle rozebereme: + +- Nejprve naše funkce zkontroluje, zda je `window.ethereum` povoleno (tj. zda je MetaMask nainstalován). + - Pokud není, jednoduše nastavíme naši stavovou proměnnou `status` na řetězec JSX, který uživatele vyzve k instalaci MetaMasku. + - Pokud je povoleno, nastavíme na řádku 3 posluchače `window.ethereum.on(\"accountsChanged\")`, který naslouchá změnám stavu v peněžence MetaMask, což zahrnuje případy, kdy uživatel připojí další účet k dapp, přepne účty nebo odpojí účet. Pokud je připojen alespoň jeden účet, stavová proměnná `walletAddress` se aktualizuje jako první účet v poli `accounts` vráceném posluchačem. V opačném případě je `walletAddress` nastaveno jako prázdný řetězec. + +V neposlední řadě ji musíme zavolat v naší funkci `useEffect`: + +```javascript +// HelloWorld.js + +useEffect(async () => { + const message = await loadCurrentMessage() + setMessage(message) + addSmartContractListener() + + const { address, status } = await getCurrentWalletConnected() + setWallet(address) + setStatus(status) + + addWalletListener() +}, []) +``` + +A to je vše! Úspěšně jsme dokončili programování veškeré funkčnosti naší peněženky! Nyní k našemu poslednímu úkolu: aktualizaci zprávy uložené v našem chytrém kontraktu! + +### Krok 6: Implementace funkce `updateMessage` {#step-6-implement-the-updateMessage-function} + +Tak jo, lidi, jsme v cílové rovince! Ve funkci `updateMessage` vašeho souboru `interact.js` uděláme následující: + +1. Ujistěte se, že zpráva, kterou chceme publikovat v našem chytrém kontraktu, je platná +2. Podepište naši transakci pomocí MetaMask +3. Zavolejte tuto funkci z naší frontendové komponenty `HelloWorld.js` + +Nebude to trvat dlouho; pojďme tuto dapp dokončit! + +#### Zpracování chyb na vstupu {#input-error-handling} + +Je přirozené, že na začátku funkce je nějaké zpracování chyb vstupů. + +Budeme chtít, aby se naše funkce vrátila dříve, pokud není nainstalováno rozšíření MetaMask, není připojena žádná peněženka (tj. předaná `adresa` je prázdný řetězec) nebo je `zpráva` prázdný řetězec. Přidejme následující zpracování chyb do `updateMessage`: + +```javascript +// interact.js + +export const updateMessage = async (address, message) => { + if (!window.ethereum || address === null) { + return { + status: + "💡 Připojte svou peněženku MetaMask pro aktualizaci zprávy na blockchainu.", + } + } + + if (message.trim() === "") { + return { + status: "❌ Vaše zpráva nemůže být prázdný řetězec.", + } + } +} +``` + +Nyní, když máme správné zpracování chyb vstupů, je čas podepsat transakci přes MetaMask! + +#### Podepisování naší transakce {#signing-our-transaction} + +Pokud jste již obeznámeni s tradičními web3 Ethereum transakcemi, kód, který napíšeme dále, vám bude velmi povědomý. Pod kód pro zpracování chyb vstupů přidejte do `updateMessage` následující: + +```javascript +// interact.js + +//nastavení parametrů transakce +const transactionParameters = { + to: contractAddress, // Vyžadováno kromě publikací kontraktů. + from: address, // musí se shodovat s aktivní adresou uživatele. + data: helloWorldContract.methods.update(message).encodeABI(), +} + +//podepsání transakce +try { + const txHash = await window.ethereum.request({ + method: "eth_sendTransaction", + params: [transactionParameters], + }) + return { + status: ( + + ✅{" "} + + Zobrazte stav své transakce na Etherscanu! + ++ ℹ️ Jakmile bude transakce ověřena sítí, zpráva bude + aktualizována automaticky. + + ), + } +} catch (error) { + return { + status: "😥 " + error.message, + } +} +``` + +Rozeberme si, co se děje. Nejprve nastavíme parametry naší transakce, kde: + +- `to` určuje adresu příjemce (náš chytrý kontrakt) +- `from` určuje podepisujícího transakce, proměnnou `address`, kterou jsme předali do naší funkce +- `data` obsahuje volání metody `update` našeho chytrého kontraktu Hello World, která přijímá naši řetězcovou proměnnou `message` jako vstup + +Poté provedeme await volání `window.ethereum.request`, kde požádáme MetaMask o podepsání transakce. Všimněte si, že na řádcích 11 a 12 určujeme naši metodu eth, `eth_sendTransaction`, a předáváme naše `transactionParameters`. + +V tomto okamžiku se v prohlížeči otevře MetaMask a vyzve uživatele k podepsání nebo zamítnutí transakce. + +- Pokud je transakce úspěšná, funkce vrátí JSON objekt, kde `status` JSX řetězec vyzve uživatele, aby se podíval na Etherscan pro více informací o své transakci. +- Pokud transakce selže, funkce vrátí JSON objekt, kde řetězec `status` předá chybovou zprávu. + +Celkově by naše funkce `updateMessage` měla vypadat takto: + +```javascript +// interact.js + +export const updateMessage = async (address, message) => { + //zpracování chyb vstupů + if (!window.ethereum || address === null) { + return { + status: + "💡 Připojte svou peněženku MetaMask pro aktualizaci zprávy na blockchainu.", + } + } + + if (message.trim() === "") { + return { + status: "❌ Vaše zpráva nemůže být prázdný řetězec.", + } + } + + //nastavení parametrů transakce + const transactionParameters = { + to: contractAddress, // Vyžadováno kromě publikací kontraktů. + from: address, // musí se shodovat s aktivní adresou uživatele. + data: helloWorldContract.methods.update(message).encodeABI(), + } + + //podepsání transakce + try { + const txHash = await window.ethereum.request({ + method: "eth_sendTransaction", + params: [transactionParameters], + }) + return { + status: ( + + ✅{" "} + + Zobrazte stav své transakce na Etherscanu! + +
+ ℹ️ Jakmile bude transakce ověřena sítí, zpráva bude + aktualizována automaticky. + + ), + } + } catch (error) { + return { + status: "😥 " + error.message, + } + } +} +``` + +V neposlední řadě musíme naši funkci `updateMessage` propojit s naší komponentou `HelloWorld.js`. + +#### Propojení `updateMessage` s frontendem `HelloWorld.js` {#connect-updatemessage-to-the-helloworld-js-frontend} + +Naše funkce `onUpdatePressed` by měla provést await volání na importovanou funkci `updateMessage` a upravit stavovou proměnnou `status`, aby odrážela, zda naše transakce uspěla nebo selhala: + +```javascript +// HelloWorld.js + +const onUpdatePressed = async () => { + const { status } = await updateMessage(walletAddress, newMessage) + setStatus(status) +} +``` + +Je to super čisté a jednoduché. A hádejte co... VAŠE DAPP JE HOTOVÁ!!! + +Jděte do toho a otestujte tlačítko **Aktualizovat**! + +### Vytvořte si vlastní dapp {#make-your-own-custom-dapp} + +Skvělé, dostali jste se až na konec tutoriálu! Abychom to shrnuli, naučili jste se: + +- Připojit peněženku MetaMask k vašemu projektu dapp +- Číst data z vašeho chytrého kontraktu pomocí [Alchemy Web3](https://docs.alchemy.com/alchemy/documentation/alchemy-web3) API +- Podepisovat transakce Ethereum pomocí MetaMask + +Nyní jste plně vybaveni k tomu, abyste dovednosti z tohoto tutoriálu uplatnili při vytváření vlastního projektu dapp! Jako vždy, pokud máte nějaké otázky, neváhejte se na nás obrátit s žádostí o pomoc na [Discordu Alchemy](https://discord.gg/gWuC7zB). 🧙♂️ + +Jakmile dokončíte tento tutoriál, dejte nám vědět, jaké byly vaše zkušenosti, nebo pokud máte nějakou zpětnou vazbu, tak nás označte na Twitteru [@alchemyplatform](https://twitter.com/AlchemyPlatform)! diff --git a/public/content/translations/cs/developers/tutorials/hello-world-smart-contract/index.md b/public/content/translations/cs/developers/tutorials/hello-world-smart-contract/index.md new file mode 100644 index 00000000000..9a50e94a08e --- /dev/null +++ b/public/content/translations/cs/developers/tutorials/hello-world-smart-contract/index.md @@ -0,0 +1,367 @@ +--- +title: "Chytrý kontrakt Hello World pro začátečníky" +description: "Úvodní tutoriál k psaní a nasazení jednoduchého chytrého kontraktu na Ethereum." +author: "elanh" +tags: + [ + "solidity", + "hardhat", + "alchemy", + "smart kontrakt účty", + "nasazování" + ] +skill: beginner +lang: cs +published: 2021-03-31 +--- + +Pokud s vývojem na blockchainu teprve začínáte a nevíte, kde začít, nebo pokud jen chcete pochopit, jak nasadit chytré kontrakty a interagovat s nimi, je tento průvodce určen právě vám. Provedeme vás vytvořením a nasazením jednoduchého chytrého kontraktu na testovací síti Sepolia pomocí virtuální peněženky [MetaMask](https://metamask.io/), [Solidity](https://docs.soliditylang.org/en/v0.8.0/), [Hardhat](https://hardhat.org/) a [Alchemy](https://www.alchemy.com/eth) (nebojte se, pokud ještě ničemu z toho nerozumíte, všechno si vysvětlíme). + +Ve [2. části](https://docs.alchemy.com/docs/interacting-with-a-smart-contract) tohoto tutoriálu si projdeme, jak můžeme s naším nasazeným chytrým kontraktem interagovat, a ve [3. části](https://www.alchemy.com/docs/submitting-your-smart-contract-to-etherscan) si ukážeme, jak ho publikovat na Etherscanu. + +Pokud budete mít v kterémkoliv bodě dotazy, neváhejte se zeptat na [Discordu Alchemy](https://discord.gg/gWuC7zB)! + +## Krok 1: Připojení k síti Ethereum {#step-1} + +Existuje mnoho způsobů, jak posílat požadavky na blockchain Etherea. Pro zjednodušení použijeme bezplatný účet na Alchemy, vývojářské platformy a API pro blockchain, která nám umožňuje komunikovat s blockchainem Etherea, aniž bychom museli provozovat vlastní uzly. Tato platforma má také vývojářské nástroje pro monitorování a analýzu, které v tomto tutoriálu využijeme, abychom pochopili, co se děje „pod kapotou“ při nasazení našeho chytrého kontraktu. Pokud ještě nemáte účet Alchemy, [můžete se zdarma zaregistrovat zde](https://dashboard.alchemy.com/signup). + +## Krok 2: Vytvořte svou aplikaci (a klíč API) {#step-2} + +Jakmile si vytvoříte účet na Alchemy, můžete si vygenerovat klíč API vytvořením aplikace. To nám umožní posílat požadavky do testovací sítě Sepolia. Pokud neznáte testovací sítě, podívejte se na [tuto stránku](/developers/docs/networks/). + +1. Přejděte na stránku „Vytvořit novou aplikaci“ na vašem řídicím panelu Alchemy tak, že na navigační liště vyberete možnost „Vybrat aplikaci“ a kliknete na „Vytvořit novou aplikaci“ + + + +2. Pojmenujte svou aplikaci „Hello World“, uveďte krátký popis a vyberte případ použití, např. „Infra & nástroje“. Dále vyhledejte „Ethereum“ a vyberte síť. + + + +3. Kliknutím na „Další“ pokračujte, poté na „Vytvořit aplikaci“ a je to! Vaše aplikace by se měla objevit v rozevírací nabídce na navigační liště s klíčem API, který si můžete zkopírovat. + +## Krok 3: Vytvoření účtu Ethereum (adresy) {#step-3} + +K odesílání a přijímání transakcí potřebujeme ethereový účet. Pro tento výukový program použijeme MetaMask, virtuální peněženku v prohlížeči, která slouží ke správě adresy vašeho ethereového účtu. Více o [transakcích](/developers/docs/transactions/). + +Můžete si stáhnout MetaMask a zdarma si vytvořit účet Ethereum [zde](https://metamask.io/download). Při vytváření účtu, nebo pokud již účet máte, se ujistěte, že jste se přepnuli na testovací síť „Sepolia“ pomocí rozevírací nabídky sítě (abychom nepracovali se skutečnými penězi). + +Pokud síť Sepolia v seznamu nevidíte, přejděte do nabídky, poté do „Pokročilé“ a sjeďte dolů, abyste zapnuli možnost „Zobrazit testovací sítě“. V nabídce pro výběr sítě zvolte záložku „Vlastní“, kde najdete seznam testovacích sítí a vyberete „Sepolia“. + + + +## Krok 4: Přidání etheru z faucetu {#step-4} + +Abychom mohli náš chytrý kontrakt nasadit na testovací síť, budeme potřebovat nějaké falešné ETH. Pro získání ETH na síti Sepolia můžete přejít na [podrobnosti o síti Sepolia](/developers/docs/networks/#sepolia) a zobrazit si seznam různých faucetů. Pokud jeden nefunguje, zkuste jiný, protože jim někdy mohou dojít prostředky. Může chvíli trvat, než obdržíte své falešné ETH, kvůli vytížení sítě. Brzy poté byste měli vidět ETH ve svém účtu MetaMask! + +## Krok 5: Kontrola zůstatku {#step-5} + +Abychom si ověřili, že máme zůstatek, provedeme požadavek [eth_getBalance](/developers/docs/apis/json-rpc/#eth_getbalance) pomocí [nástroje Composer od 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). Tím se vrátí množství ETH v naší peněžence. Po zadání adresy vašeho účtu MetaMask a kliknutí na „Send Request“ byste měli vidět takovouto odpověď: + +```json +{ "jsonrpc": "2.0", "id": 0, "result": "0x2B5E3AF16B1880000" } +``` + +> **POZNÁMKA:** Tento výsledek je ve wei, nikoliv v ETH. Wei se používá jako nejmenší denominace etheru. Převod z wei na ETH je: 1 ETH = 1018 wei. Takže když převedeme 0x2B5E3AF16B1880000 na desetinné číslo, dostaneme 5\*10¹⁸, což se rovná 5 ETH. +> +> Uf! Naše falešné peníze jsou všechny tady
.env`! Prosím, ujistěte se, že nikdy nesdílíte ani nezveřejňujete svůj soubor `.env` s nikým, protože tím ohrožujete svá tajemství. Pokud používáte správu verzí, přidejte svůj soubor `.env` do souboru gitignore.
+