Langkah 3: Luncurkan Portal Pengembang Dapp

    Langkah Ketiga

    Jadi, Anda sudah menguasai dasar-dasarnya. Di bagian sebelumnya, Anda mengembangkan kontrak pintar, dan menerapkannya menggunakan Truffle. Namun, di bagian sebelumnya, kontrak pintar Anda diterapkan ke jaringan pengembangan lokal – dan itu tidak menyenangkan, karena hanya Anda yang dapat menerapkan dan berinteraksi dengan jaringan pengujian lokal itu! Kami ingin teman! Dan akses ke kontrak pintar lain yang telah diterapkan orang lain!

    Oleh karena itu, di bagian ini, kita akan beralih ke penggunaan testnet Ethereum publik, sehingga Anda dapat bergabung dalam semua tindakan yang terjadi di sekitar ekosistem Ethereum.!

    Mari Memulai!

    Pertama, kita akan membahas tentang bagaimana Anda mendapatkan akses ke jaringan Ethereum publik ini.

    Untuk mengakses jaringan ini, Anda harus terhubung ke node yang terhubung ke jaringan masing-masing. Anda dapat melihat setiap jaringan Ethereum sebagai dunia Ethereum kecilnya sendiri, dan Anda dapat melihat node Ethereum sebagai gerbang atau titik akses Anda ke masing-masing dunia itu! Karena Ethereum adalah jaringan terdistribusi, setiap node Ethereum menyimpan seluruh status jaringan yang terhubung dengannya (ada node yang tidak perlu menyimpan status penuh, tetapi jangan khawatir tentang itu untuk saat ini), dan terus berkomunikasi dengan node lain di jaringan untuk menjaga status tersebut tetap mutakhir! Oleh karena itu, untuk dapat membaca dan menulis ke status ini, kita perlu mendapatkan akses ke salah satu node ini.

    Anda dapat meng-host node Anda sendiri menggunakan salah satu dari banyak klien Ethereum yang saat ini tersedia (Hyperledger Besu (klien Java yang dikembangkan oleh ConsenSys), Geth (Go client), Parity (Rust client), dll.) – namun, ada cukup banyak sedikit overhead DevOps yang datang dengan hosting dan pemeliharaan node Ethereum Anda sendiri – terutama jika Anda ingin melakukannya dengan andal! Karena itu, kami di ConsenSys telah membangun Infura – penawaran infrastruktur Ethereum kelas dunia. Infura menangani seluruh bagian ‘manajemen node’ untuk Anda, memberi Anda akses instan, andal, dan skalabel ke cluster node Ethereum! Anda dapat menganggap Infura sebagai “Ethereum-node-as-a-Service” &# 128578;

    Memulai Infura

    Untuk memulai Infura, Anda sebaiknya mendaftarkan akun di infura.io. Jangan khawatir – sepenuhnya gratis untuk memulai, dan Anda tidak perlu memasukkan informasi sensitif apa pun!

    Setelah terdaftar, Anda akan diarahkan ke halaman yang terlihat seperti ini:

    infuraLogin

    Seperti yang disarankan halaman ini, untuk memulai, Anda akan memilih opsi pertama “Mulai dan buat proyek pertama Anda untuk mengakses jaringan Ethereum!”

    Anda dapat menamai proyek Anda apa pun yang Anda suka – kami akan menamai “proyek uji” kami.

    InfuraNP

    Sekarang, Anda akan diberikan kredensial yang Anda perlukan untuk mengakses node Infura!

    InfuraC

    Tetap buka halaman ini! Kami akan kembali lagi nanti &# 128578;

    Hal berikutnya yang akan kita lakukan adalah menginisialisasi proyek Truffle baru. Jika Anda memerlukan bantuan untuk menginstal Truffle, lihat bagian sebelumnya dari dokumentasi ini.

    Untuk menginisialisasi proyek Truffle baru, buat folder baru, dan jalankan

    truffle init

    Selanjutnya, Anda ingin menambahkan penyedia Truffle HD Wallet ke proyek Anda yang baru diinisialisasi, sehingga Anda dapat menandatangani transaksi Anda sebelum dikirim ke node Infura. Setiap perubahan status yang Anda lakukan pada Ethereum datang dalam bentuk transaksi – apakah itu menerapkan kontrak, memanggil fungsi dalam kontrak, atau mengirim token! Setiap transaksi perlu ditandatangani oleh sebuah akun – oleh karena itu, aplikasi kita membutuhkan kemampuan untuk menandatangani transaksi sehingga dapat membuat perubahan status pada Ethereum!

    Setiap transaksi juga membutuhkan eter. Biaya transaksi ini disebut sebagai “biaya gas”. Oleh karena itu, agar transaksi yang ditandatangani kami diproses oleh jaringan setelah dikirim ke node Infura, kami perlu mendanai akun kami dengan beberapa eter. Kami akan membahasnya nanti, tetapi ini hanyalah alasan penting lainnya mengapa Anda membutuhkan dompet & penyedia dompet!

    Untuk menambahkan penyedia Truffle HD Wallet ke jenis proyek yang baru Anda inisialisasi di terminal Anda:

    npm install –save @ truffle / hdwallet-provider

    Ini mungkin menimbulkan beberapa peringatan, tetapi selama terpasang, Anda siap untuk pergi!

    Sekarang kita dapat membuat akun Ethereum untuk digunakan aplikasi kita! Karena penyedia dompet kami adalah dompet HD (deterministik hierarkis), kami dapat membuat akun secara deterministik menggunakan frase seed yang sama, atau mnemonic..

    Untuk membuat akun kita, pertama-tama kita harus memulai Ganache. Ganache adalah produk Truffle yang memungkinkan kita untuk dengan mudah membuat jaringan dev lokal kita sendiri. Untuk menjalankan ganache, cukup ketik

    ganache-cli

    Jika Anda menyelesaikan Langkah 2 dari panduan ini, Anda seharusnya sudah menginstal Ganache / ganache-cli – jika belum, Anda dapat menginstalnya menggunakan perintah npm:

    npm install -g ganache-cli

    Atau jika Anda menggunakan benang 

    benang global tambahkan ganache-cli

    Selanjutnya, kami harus mengizinkan aplikasi kami untuk berbicara dengan Ganache. Buka direktori proyek Anda dan periksa file truffle-config.js, cukup hapus komentar (atau tambahkan) baris berikut di bawah jaringan:

    pengembangan: {host: "127.0.0.1", // Localhost (default: none) port: 8545, // Port Ethereum standar (default: none) network_id: "*" // Jaringan apa pun (default: tidak ada)},

    uncommenrt

    Bagus! Sekarang aplikasi kita dapat berbicara dengan jaringan pengembangan Ganache yang berjalan di 127.0.0.1:8545! Sekarang, di jendela terminal baru (tetapi masih di folder proyek Anda), jalankan perintah

    konsol truffle

     untuk menyambung ke jaringan Ganache Anda. Jangan khawatir – kami akan terhubung ke jaringan publik nanti! Kami hanya perlu terhubung ke Ganache sekarang untuk membuat kunci kami &# 128578;

    Catatan: Jika Anda mengalami masalah, pastikan di Ganache nomor port Server RPC Anda cocok dengan file konfigurasi truffle Anda. Dalam kasus default, 8545 seharusnya berfungsi, jika tidak ubah file konfigurasi Anda agar cocok dengan Ganache.

    Sekarang masukkan perintah berikut di konsol Truffle untuk membuat dompet Anda:

    const HDWalletProvider = membutuhkan (‘@ truffle / hdwallet-provider’);

    Ini akan menghasilkan respons “tidak ditentukan”

    Untuk mnemonik 12 kata, Anda dapat menggunakan generator mnemonik seperti yang ini jika Anda mau!

    PASTIKAN ANDA MENYIMPAN FRASA MNEMONIK (BENIH)! Kami akan membutuhkannya nanti &# 128515;

    Selanjutnya, tambahkan perintah berikut di terminal Anda (saat masih dalam pengembangan truffle):

    const mnemonic = ’12 kata di sini ‘; const wallet = HDWalletProvider baru (mnemonic, "http: // localhost: 8545");

    Sekarang, di konsol truffle Anda masukkan perintah 

    dompet

    Jika Anda menggulir ke atas, Anda akan melihat daftar akun, seperti ini!

    addy

    Meskipun akun itu dibuat saat kami terhubung ke Ganache, kami dapat menggunakan akun Ethereum yang sama di seluruh jaringan Ethereum (harap diperhatikan, bagaimanapun – meskipun akun yang sama dapat digunakan di seluruh jaringan Ethereum, aset / aktivitas yang berkaitan dengan itu. akun khusus jaringan – misalnya, jika saya melakukan transaksi di Ethereum Mainnet, transaksi itu hanya akan terjadi di Mainnet Ethereum, dan tidak ada jaringan lain). Kami sekarang akan berhenti berinteraksi dengan Ganache (jaringan dev lokal), dan mulai menggunakan akun itu untuk berinteraksi dengan beberapa jaringan publik!!

    Biasanya, hal pertama yang perlu Anda lakukan saat berinteraksi dengan jaringan publik adalah mendapatkan sebagian eter jaringan tersebut. Dalam kasus kami, kami akan menyambungkan ke jaringan uji publik Ropsten, jadi kami perlu mendapatkan beberapa Ropsten eter (ETH)! Jangan khawatir – uji ETH bersih gratis dan melimpah, serta sangat mudah diperoleh &# 128077;

    Saatnya mendapatkan tes ETH

    Untuk mendapatkan beberapa Ropsten ETH, pergilah ke Keran ropsten. Rekatkan alamat akun Anda, dan biola! Anda telah menerima beberapa Ropsten ETH dan dapat mulai mengirim transaksi (yaitu membuat perubahan status) jaringan Ropsten!

    Sebagai referensi, jaringan pengujian Ropsten adalah jaringan pengujian Ethereum publik, tempat Anda dapat menguji kode Anda di lingkungan yang sangat mirip dengan mainnet Ethereum. Perbedaan utama antara jaring uji Ropsten (dan jaring uji Ethereum publik lainnya) adalah bahwa di testnet-land, ETH berlimpah dan tidak memiliki nilai dunia nyata! Ketika Anda mulai berinteraksi dengan mainnet Ethereum, Ether yang Anda gunakan untuk membayar transaksi Anda (biaya gas) akan menelan biaya dolar ASTUAL – jadi kami perlu memastikan bahwa kami melakukan hal-hal dengan benar sebelumnya, sehingga kami tidak kehilangan kesulitan kami. -memperoleh uang tunai / ETH mainnet kami yang berharga!

    Jaringan pengujian Ropsten, bersama dengan sebagian besar jaringan pengujian publik lainnya, memiliki banyak penjelajah blok bagi Anda untuk melihat aktivitas yang terjadi secara on-chain (https://ropsten.etherscan.io/). Untuk melihat akun Anda yang didanai, cukup tempel alamat akun Anda ke penjelajah – dan Anda dapat melihat semua riwayat yang terkait dengannya:

    Screen Shot 2020 09 01 pada 4 34 21 AM

    Baik! Sekarang setelah kami mendapatkan penyedia dompet dan akun yang didanai dengan Ropsten ETH, kami dapat kembali ke proyek kami, dan mengarahkannya ke node Infura yang terhubung ke jaringan uji Ropsten.

    Hal pertama yang ingin kita lakukan adalah membuat file a.env untuk menyimpan RAHASIA kita yang berharga! Rahasia ini termasuk kunci API Infura kami (dibuat saat kami membuat akun Infura), dan frasa mnemonik kami.

    Di tingkat root proyek Anda, cukup buat file baru “.env”. Selain itu, Anda perlu menginstal paket dotenv NPM dengan memasukkan perintah berikut di terminal

    npm install –simpan dotenv

    Dalam file new.env ini, Anda memerlukan dua hal:

    INFURA_API_KEY = MASUKKAN KUNCI API ANDA DI SINI (tanpa kutipan)

    MNEMONIC = “lensa whale fan wire bubble kursi online mengekspos pemenang kalimat nomor saham”

    INFURA_API_KEY adalah ID Proyek dari proyek yang sebelumnya Anda buat di infura:

    Screen Shot 2020 09 01 pada 4 37 12 AM

    Dan MNEMONIC adalah frase inti 12 kata yang sebelumnya Anda gunakan untuk membuat akun Anda.

    File Anda sekarang akan terlihat seperti ini:

    Screen Shot 2020 09 01 pada 4 41 53 AM

    Baiklah, kita semakin dekat!

    CATATAN: Jika Anda akan memasukkan ini ke repositori Github, atau menjadikan proyek ini publik dengan cara apa pun, PASTIKAN untuk memiliki file.env Anda di.gitignore sehingga rahasia Anda tidak terungkap! 

    Sekarang, kita akan menuju ke file truffle-config.js. Di sini, kami perlu menambahkan beberapa hal untuk menunjukkan penyedia kami (yang digunakan untuk berinteraksi dengan Infura (Penyedia HDWallet Truffle yang kami pasang sebelumnya), dan mengarahkan aplikasi kami ke node Ropsten Infura.

    Di bagian atas file, tambahkan:

    memerlukan("dotenv") .config (); const HDWalletProvider = membutuhkan ("@ truffle / hdwall-provider");

    Selanjutnya, di bawah “jaringan”, Anda ingin menambahkan jaringan berikut:

    ropsten: {provider: () => HDWalletProvider baru (process.env.MNEMONIC, `https://ropsten.infura.io/v3/$ {process.env.INFURA_API_KEY}`), network_id: 3, // Gas id Ropsten: 5500000, // Ropsten memiliki batas blok yang lebih rendah dari konfirmasi mainnet: 2, // # confs untuk menunggu di antara penerapan. (default: 0) timeoutBlocks: 200, // # blok sebelum waktu penerapan habis (minimum / default: 50) skipDryRun: true // Lewati uji coba sebelum migrasi? (default: false untuk jaringan publik)}

     

    Sekarang file truffle-config.js Anda akan terlihat seperti ini!

    Catatan samping:

    Jika Anda menggunakan titik akhir Infura, parameter `from` diperlukan, karena mereka tidak memiliki dompet. Jika Anda menggunakan titik akhir Ganache atau Geth RPC, ini adalah parameter opsional.

    Screen Shot 2020 09 01 pada 4 50 54 AM

    SEKARANG KAMI SIAP UNTUK THE MAGIC! Saatnya menerapkan kontrak pintar ke ROPSTEN!

    Menyiapkan Kontrak Cerdas

    Penyiapan soliditas

    Pertama, kami ingin membuat kontrak pintar untuk diterapkan! Anda dapat mengambil kontrak pintar yang Anda kembangkan di bagian sebelumnya dari panduan ini, membuat kontrak pintar Anda sendiri, atau cukup gunakan kontrak contoh berikut (sangat sederhana):

    soliditas pragma >= 0,5,8; kontrak SimpleStorage {uint256 storedData; set fungsi (uint256 x) publik {storedData = x; } fungsi get () tampilan publik kembali (uint256) {return storedData; }}

    Kontrak ini harus dibuat sebagai file “.sol” (Soliditas) di folder “kontrak” proyek Anda (dalam skenario ini, kami telah membuat file SimpleStorage.sol, yang merupakan kontrak SimpleStorage kami:

    perancah

    Pengaturan migrasi

    Selanjutnya, kita perlu menyiapkan file migrasi kita!

    Migrasi adalah file JavaScript yang membantu Anda menerapkan kontrak ke jaringan Ethereum. File ini bertanggung jawab untuk melakukan tugas penerapan Anda, dan dibuat dengan asumsi bahwa kebutuhan penerapan Anda akan berubah dari waktu ke waktu. Saat proyek Anda berkembang, Anda akan membuat skrip migrasi baru untuk melanjutkan evolusi ini di blockchain. Sejarah migrasi yang sebelumnya dijalankan dicatat secara on-chain melalui kontrak Migrasi khusus. Anda dapat menemukan lebih banyak informasi tentang mereka sini.

    File migrasi kami untuk menerapkan kontrak kami akan terlihat seperti ini:

    const SimpleStorage = artifacts.require ("SimpleStorage.sol"); module.exports = function (deployer) {deployer.deploy (SimpleStorage); };

    Simpan file ini di folder “migrasi” dengan nama “2_deploy_contracts.js”.

    Menerapkan Kontrak Publik Pertama Anda

    Waktunya bermigrasi

    Sekarang Anda SEBENARNYA siap untuk KEAJAIBAN TERJADI! Kembali ke konsol, dan ketik

    truffle bermigrasi –network ropsten

    Ledakan!&# 128163; Kode Anda disebarkan ke Ropsten Ethereum Test Net publik!!! 

    Yang baru saja terjadi adalah:

    1. Kontrak pintar Solidity Anda (dalam folder “kontrak”) telah dikompilasi menjadi bytecode – kode yang dapat dibaca mesin untuk Mesin Virtual Ethereum yang akan digunakan.

    2. Bytecode ini, + beberapa data lainnya, digabungkan menjadi satu transaksi.

    3. Transaksi itu ditandatangani oleh akun Anda.

    4. Transaksi itu dikirim ke node Infura yang terhubung ke Ropsten.

    5. Transaksi tersebut disebarkan ke seluruh jaringan, diambil oleh penambang Ropsten, dan dimasukkan ke dalam blok Ropsten.

    6. Kontrak pintar Anda sekarang LANGSUNG di blockchain Ropsten!

    Anda dapat melihat kontrak Anda menggunakan Etherscan: https://ropsten.etherscan.io/ – cukup tempelkan alamat kontrak (harus ada di terminal Anda) untuk melihatnya!

    Screen Shot 2020 09 01 pada 5 19 12 AM

    Luar biasa! Kami baru saja menerapkan kontrak pintar pertama kami ke jaringan PUBLIK Ethereum! &# 129327;

    Prosesnya sama persis untuk menerapkan ke mainnet Ethereum, kecuali Anda akan menukar jaringan di file truffle-config.js untuk mainnet Ethereum (dan, tentu saja, jalankan perintah migrasi mainnet Truffle alih-alih yang Ropsten) ! Kami tidak akan memandu Anda melalui proses ini di sini, karena menerapkan ke jaringan utama Ethereum akan dikenakan biaya $ aktual – tetapi jika Anda membutuhkan bantuan untuk hal ini, lanjutkan ke ConsenSys Discord dan kami akan dengan senang hati membantu!

    Membangun Frontend Web3 

    Sekarang setelah kami menerapkan kontrak kami ke Ropsten, mari kita buat antarmuka pengguna yang sederhana untuk berinteraksi dengannya!

    Catatan: dApp “front-end” hanyalah aplikasi sehari-hari, front-end lama biasa – dengan demikian, kita dapat menggunakan semua alat lama yang kita kenal (create-react-app, dll.) Untuk memutar front end kita , lalu tambahkan beberapa hal agar front end dapat membaca dan menulis ke Ethereum! Ini berarti, semua keahlian pengembang web lama Anda secara langsung dapat ditransfer ke Ethereum-land / Web3!!

    Jalankan proyek React kami 

    Baiklah, mari kita mulai.

    Pertama, pastikan Anda memiliki direktori yang berisi semua info yang baru saja kami buat untuk kontrak penyimpanan kami. Saya menamai folder saya “penyimpanan-kembali” dan folder itu berisi pekerjaan yang baru saja kami selesaikan untuk menyiapkan dan menerapkan kontrak kami. 

    Screen Shot 2020 09 01 pada 5 26 33 AM

    Sekarang kita akan mulai dengan menjalankan proyek react, sebut saja proyek kita dalam contoh ini “lab-penyimpanan”

    Di terminal kita, mari kita jalankan yang berikut ini untuk memulai proyek kita 

    npx create-react-app storage-lab

    Sekarang setelah kita mendapatkan boilerplate proyek baru kita, mari kita masuk ke direktori proyek

    cd penyimpanan-lab

    Sekarang kita berada di dalam proyek kita, kita sekarang akan menambahkan paket Web3, yang memungkinkan proyek kita berinteraksi dengan Ethereum! Selengkapnya di web3 sini

    npm instal web3

    Web3 adalah salah satu dari dua paket utama yang dapat kita gunakan, yang lainnya adalah ethers.js. Untuk contoh ini kami akan menggunakan web3 tetapi jika Anda ingin membaca lebih lanjut tentang ethers.js lihatlah sini 

    Untuk penjelasan rinci tentang keduanya, lihat artikel ini web3 vs eter

    Bagus! Kami sekarang hampir siap untuk memiliki proyek reaksi kami berinteraksi dengan kontrak kami!

    Pertama, mari kita ambil direktori kita dari sebelumnya (bagi saya itu “penyimpanan-kembali”) yang hanya berisi pekerjaan yang telah kita lakukan yang melibatkan kontrak pintar kita dan sekarang mari tambahkan itu ke proyek react baru kita. Ini akan hidup pada level yang sama dengan src kita, dan sekarang kita harus memiliki semua yang kita butuhkan bersama di dalam react REPO kita.

    Screen Shot 2020 09 01 pada 5 31 38 AM

    Selanjutnya, kita perlu menyiapkan file kita yang berisi informasi ABI kita.

    “ABI?”

    Senang Anda bertanya! 

    Contract Application Binary Interface (ABI) adalah cara standar untuk berinteraksi dengan kontrak dalam ekosistem Ethereum, baik dari luar blockchain maupun untuk interaksi kontrak ke kontrak. Saat kami mengompilasi kontrak SimpleStorage kami di langkah sebelumnya, itu membuat file JSON untuk kami. Periksa sendiri, kami memiliki file SimpleStorage.json di dalam build / contract kami

    Screen Shot 2020 09 01 pada 6 04 20 AM

    Tampilan awal pada file ini akan mengungkapkan banyak informasi, saat ini kami hanya perlu fokus pada ABI untuk menyinkronkan kontrak kami dengan front end yang sedang kami kembangkan. JSON ini berisi informasi yang kami butuhkan untuk mengkomunikasikan kontrak kami dengan front end kami.

    ABI kami adalah larik yang menampung objek. Melihat file lebih dekat, Anda dapat melihat masing-masing objek tersebut sebenarnya adalah masing-masing fungsi yang terdapat dalam kontrak SimpleStorage kami.

    Screen Shot 2020 09 01 pada 5 33 23 AM

    Anda dapat dengan cepat melihat

    “Name”: “set”

    “Name”: “get”

    keduanya dengan “type:” function “kedua fungsi yang kami nyatakan saat menulis kontrak pintar kami!

    Meskipun Truffle mengaburkan beberapa langkah berikutnya, kami akan menjelaskan cara yang lebih “manual” dalam melakukan berbagai hal sehingga Anda dapat melihat semua hal dasar &# 128578;

    Pertama, lanjutkan dan salin informasi abi Anda – kami akan membutuhkannya sebentar lagi. 

    Mari buat folder di dalam src kita bernama “abi”.

    Di dalam folder abi yang baru kita buat, sekarang mari buat file bernama abi.js

    Catatan: Secara teknis kami tidak perlu memiliki pemisahan ini dan cukup menambahkan abi.js ke src kami, tetapi menyimpan file abi.js kami membantu pengaturan.

    Sekarang kita akan menyalin abi array yang kita ambil sebelumnya dari file SimpleStorage.JSON dan menambahkannya ke file abi.js yang baru kita buat. Kami akan mengubah file sedikit untuk memungkinkan proyek kami mengimpor informasi ke App.js. Jangan lupa karena ini adalah file a.js, kita perlu menambahkan ekspor sehingga kita memiliki kemampuan untuk menariknya ke app.js nanti. Mari beri nama const sama dengan kontrak, kecuali dengan camelcase (lihat kode di bawah):

    Ini akan menjadi kode yang kami simpan di file abi.js kami

    ekspor const simpleStorage = [{konstanta: salah, masukan: [{nama: "x", Tipe: "uint256", },], nama: "set", output: [], hutang: false, stateMutability: "tidak dapat dibayar", Tipe: "fungsi", }, {konstanta: true, input: [], nama: "Dapatkan", keluaran: [{name: "", Tipe: "uint256", },], hutang: false, stateMutability: "melihat", Tipe: "fungsi", },];

    Saatnya menuju ke App.js kami dan mengimpor web3 dan file abi.js yang baru kami buat.

    Kami juga akan menggunakan hook dalam contoh ini (itulah sebabnya kami juga mengimpor {useState} Anda dapat membaca lebih lanjut tentang useState sini.

    Bagian atas file App.js kita sekarang akan terlihat seperti ini:

    import React, {useState} dari "reaksi"; impor {simpleStorage} dari "./ abi / abi"; impor Web3 dari "web3"; impor "./App.css";

    Kami sekarang perlu memastikan bahwa kami memiliki kemampuan bagi setiap pengguna sewenang-wenang untuk memiliki kemampuan untuk terhubung dan menggunakan dApp kami, selama mereka memiliki penyedia dompet.!

    Dompet utama yang digunakan di ruang Ethereum untuk interaksi dApp adalah MetaMask, diperkenalkan pada Langkah 1.

    Jika Anda tidak memiliki MetaMask, kunjungi metamask.io

    Dengan memasang MetaMask, kita dapat mengakses dompet kita di dalam dapp kita dengan:

    const web3 = Web3 baru (Web3.givenProvider);

    “Web3.givenProvider” akan disetel di browser yang didukung Ethereum.

    (Anda dapat membaca lebih lanjut tentang mengapa ini diperlukan sini)

    Jadi sekarang kode kita akan terlihat seperti ini:

    import React, {useState} dari "reaksi"; impor {simpleStorage} dari "./ abi / abi"; impor Web3 dari "web3"; impor "./App.css"; const web3 = Web3 baru (Web3.givenProvider);

    Baik! Sejauh ini kami telah:

    • Jalankan proyek React
    • Web yang diinstal3
    • Menambahkan folder kami yang berisi migrasi build + kontrak + kami ke proyek React kami
    • Membuat file abi.js yang menyimpan data abi yang kami tarik dari SimpleStorage.json
    • Mengimpor data yang kami butuhkan untuk berinteraksi dengan kontrak kami
    • Membuat variabel yang memungkinkan dApp kami berkomunikasi dengan dompet pengguna

    Sekali lagi, meskipun Truffle membuat beberapa langkah berikutnya tidak diperlukan (kami akan memandu Anda melalui versi yang lebih sederhana nanti), kami akan menambahkan sedikit lebih banyak kerumitan manual ke dApp kami untuk tujuan pendidikan.

    Yang akan kami lakukan sekarang adalah membuat dua variabel baru: satu untuk menyimpan alamat kontrak yang kami terapkan di Ropsten, dan yang lainnya untuk mencocokkan kontrak itu dengan ABI kami, sehingga aplikasi kami tahu cara berbicara dengannya! 

    Untuk menemukan alamat kontrak, navigasikan ke file JSON kami sebelumnya (yang berisi ABI (SimpleStorage.json)), dan gulir ke bawah. Alamatnya ada di bidang “alamat” di sini:

    "penyusun": { "nama": "solc", "Versi: kapan": "0.5.8 + commit.23d335f2.Emscripten.clang" }, "jaringan": { "3": { "acara": {}, "tautan": {}, "alamat": "0x24164F46A62a73de326E55fe46D1239d136851d8", "transactionHash": "0x1f02006b451b9e85f70acdff15a01c6520e4beddfd93a20e88a9b702a607a7b0" }}, "schemaVersion": "3.0.16", "updatedAt": "2020-06-30T20: 45: 38.686Z", "devdoc": { "metode": {}}, "userdoc": { "metode": {}}}

    Atau, Anda bisa pergi ke https://ropsten.etherscan.io/ dan cari alamat akun yang menerapkan kontrak! Di Etherscan, mengklik “Pembuatan Kontrak” akan membuka Alamat Kontrak itu sendiri.

    Screen Shot 2020 09 01 pada 5 43 46 AM

    Sekarang kami akan mengambil salinan alamat kontrak Anda dan membuat variabel baru untuk menyimpannya. 

    Tanpa ini, kami tidak akan dapat berkomunikasi dengan kontrak dan dApp kami tidak akan berfungsi sebagaimana mestinya.

    Anda akan menambahkan ini di const web3 = new Web3 (Web3.givenProvider);

    const contractAddress = "alamat kontrak Anda di sini";

    Kemudian kita akan membuat variabel baru lain bernama “storageContract” yang akan berisi alamat kontrak kita (sehingga aplikasi kita tahu di mana kontraknya), dan ABI (sehingga aplikasi kita tahu bagaimana berinteraksi dengan kontrak).

    const storageContract = web3.eth.Contract baru (simpleStorage, contractAddress);

    App.js kita sekarang akan terlihat seperti ini

    import React, {useState} dari "reaksi"; impor {simpleStorage} dari "./ abi / abi"; impor Web3 dari "web3"; impor "./App.css"; const web3 = Web3 baru (Web3.givenProvider); const contractAddress = "alamat kontrak Anda di sini"; const storageContract = web3.eth.Contract baru (simpleStorage, contractAddress);

    Kita sekarang perlu mendapatkan hook untuk menyimpan variabel yang akan berinteraksi dengan kontrak dan front end kita. Kami akan melakukan ini dengan mendeklarasikan yang berikut ini dalam fungsi aplikasi kami:

    import React, {useState} dari "reaksi"; impor {simpleStorage} dari "./ abi / abi"; impor Web3 dari "web3"; impor "./App.css"; const web3 = Web3 baru (Web3.givenProvider); const contractAddress = "alamat kontrak Anda"; const storageContract = web3.eth.Contract baru (simpleStorage, contractAddress); function App () {const [number, setUint] = useState (0); const [getNumber, setGet] = useState ("0");

    Penggunaan useState (0) pertama kami akan menampung uint256 yang dideklarasikan pengguna.

    (konvensi penamaan number, setUint, getNumber, setGet semoga membantu menunjukkan apa yang terjadi)

    Nilai useState (“0”) bertindak sebagai placeholder sampai kami memiliki konfirmasi atas tindakan yang kami tandatangani (kami nyatakan uint256)

    setUint kami akan segera memanggil kembali (lebih lanjut tentang ini nanti)

    Waktunya untuk logika kita

    Selanjutnya kita akan menambahkan logika numberSet dan NumberGet kita (kita menambahkan numberSet dalam App fungsi kita)

    const numberSet = async (t) => {t.preventDefault (); akun const = menunggu window.ethereum.enable (); akun const = akun [0]; const gas = menunggu storageContract.methods.set (angka) .estimateGas (); const post = menunggu storageContract.methods.set (angka) .send ({from: account, gas,}); }; const numberGet = async (t) => {t.preventDefault (); const post = menunggu storageContract.methods.get (). call (); setGet (posting); };

    Kami menetapkan preventDefault (detail tentang preventDefault ditemukan sini)

    Kami juga menggunakan panggilan asinkron saat mendapatkan kontrak (detail tentang asinkron ditemukan sini)

    Hook setGet () kita menyimpan nilai default yang awalnya kita lihat (“0”)

    akun const = menunggu window.ethereum.enable ();

    pastikan kami memanggil alamat terhubung kami melalui MetaMask.

    akun const = akun [0];

    Menarik akun terhubung

    Anda mungkin bertanya-tanya apa yang terjadi 

    const gas = menunggu storageContract.methods.set (angka) .estimateGas ();

    Aplikasi kami memerlukan izin untuk mengakses dana pengguna guna membayar biaya bahan bakar, fungsi apa pun yang meminta eter terlepas dari apakah eter itu ada di testnet atau mainnet. Di sinilah koneksi kami ke MetaMask berguna untuk menandatangani penggunaan ini untuk mengatur uint256 kami dan membayarnya (dengan uji ETH).

    Jadi untuk setiap fungsi yang membutuhkan gas, Anda harus menghitung potensi gas yang digunakan.

    Fungsi “Set” dari kontrak kita membutuhkan gas

    “Dapatkan” tidak.

    (ini karena “Dapatkan” melihat apa yang telah dideklarasikan dengan “Set”)

    posting const akan mengambil lulus di uint256, konfirmasi transaksi (setelah membayar biaya gas) dari dompet MetaMask Anda di jaringan Ropsten.

    Selanjutnya kita meneruskan parameter fungsi melalui method.set () dan dengan alamat yang dideklarasikan (alamat pengguna) kita kemudian menangani fungsi Set.

    Kami membuat transaksi kontrak pintar kami dengan meneruskan parameter fungsi kami ke metode kontrak pintar.set (), dan perkiraan gas dan alamat akun pengguna ke.send ().

    const post = menunggu storageContract.methods.set (angka) .send ({from: account, gas,});

    Ini harus menjadi semua logika yang kita butuhkan untuk menutupi numberSet kita.

    Sekarang kita membutuhkan numberGet kita

    const numberGet = async (t) => {t.preventDefault (); const post = menunggu storageContract.methods.get (). call (); setGet (posting); };

    Posting const kami mengambil nomor set kami dan setGet meneruskan nilai baru yang kami nyatakan

    Jadi “0” kami akan onClick merujuk ke numberGet kami dan membuat unint256 kami!

     Jadi sekarang app.js Anda akan terlihat seperti ini

    import React, {useState} dari "reaksi"; impor {simpleStorage} dari "./ abi / abi"; impor Web3 dari "web3"; impor "./App.css"; const web3 = Web3 baru (Web3.givenProvider); const contractAddress = "alamat kontrak Anda"; const storageContract = web3.eth.Contract baru (simpleStorage, contractAddress); function App () {const [number, setUint] = useState (0); const [getNumber, setGet] = useState ("0"); const numberSet = async (t) => {t.preventDefault (); akun const = menunggu window.ethereum.enable (); akun const = akun [0]; const gas = menunggu storageContract.methods.set (angka) .estimateGas (); const post = menunggu storageContract.methods.set (angka) .send ({from: account, gas,}); }; const numberGet = async (t) => {t.preventDefault (); const post = menunggu storageContract.methods.get (). call (); setGet (posting); };

    Mari kita buat pengembalian yang sangat mendasar untuk dirender sehingga kita bisa mengujinya jika bisa 

    • setel nilai unint256,
    • Tarik dompet metamask kami dan konfirmasikan transaksinya
    • Bayar biaya bahan bakar
    • kemudian dapatkan nilai (unint256) yang kami simpan setelah transaksi selesai.

    Kembalinya kami terlihat seperti ini: 

    return (Setel uint256 Anda: setUint (t.target.value)} /> Konfirmasi

    Dapatkan uint256 Anda {getNumber}); } ekspor Aplikasi default;

    Beberapa CSS cepat

    Mari sekarang menuju ke file App.css, hapus kode pelat boiler dan tambahkan ini sebagai gantinya

    .utama {text-align: center; tampilan: flex; justify-content: center; warna-latar belakang: # f2f1f5; tinggi: 100vh; } .card {min-height: 50vh; lebar: 50vw; tampilan: flex; flex-direction: kolom; sejajarkan-item: tengah; justify-content: center; }. bentuk {tinggi: 20vh; lebar: 20vw; tampilan: flex; justify-content: space-evenly; flex-direction: kolom; }. tombol {lebar: 20vw; tinggi: 5vh; }

    Sekarang kami siap untuk menguji!

    Di terminal Anda, jalankan

    benang mulai

    Di localhost kami: 3000, kami akan terlihat seperti ini

     

    Screen Shot 2020 09 01 pada 6 12 49 AM

    Kami sekarang harus dapat memasukkan nilai unint256 di bidang input kami!

    Setelah kami mengkonfirmasi nomor kami di dApp kami, kami kemudian masuk melalui MetaMask (Pastikan dompet Anda diatur ke jaringan Ropsten)

    confrim1

    Kita berhasil! &# 129303;

    Kami sekarang memiliki kontrak pintar kami yang terhubung ke ujung depan dan memiliki kemampuan untuk memanipulasi fungsi Set (asalkan kami memiliki tes ETH untuk membayar biaya gas untuk transaksi tersebut). Kemudian kita dapat memanggil fungsi Get dan mengambil nilai uint265 yang tersimpan.

    Cukup keren ya!?!

    Styling Ekstra 

    Sekarang saatnya untuk menunjukkan betapa mudahnya menerapkan teknologi Web2 yang lebih populer ke dalam proyek kami.

    Kami akan menggunakan MUI untuk menambahkan gaya dasar, jika Anda sudah mengembangkan dengan React, Anda mungkin sudah familiar dengan material-ui. (Detail ditemukan sini) Material-UI atau MUI singkatnya adalah kerangka kerja React yang sangat populer yang memungkinkan Anda untuk dengan cepat menjalankan proyek dengan banyak gaya yang dimasak asalkan Anda mengikuti konvensi penamaan. Ini juga sangat mudah untuk dimanipulasi jika Anda hanya ingin menggunakan alas bedak dan menyesuaikan dari sana.

    * Ini akan menjadi contoh yang sangat singkat tentang bagaimana menambahkan MUI ke proyek dengan sedikit tambahan untuk menunjukkan seberapa cepat Anda dapat menggabungkan proyek kami seperti yang berdiri dengan teknologi Web2. 

    Menambahkan MUI

    Kami akan mulai dengan menjalankan perintah (saat masih dalam direktori proyek kami di terminal (jika aplikasi Anda masih berjalan, Anda harus menutupnya (ctrl + c), atau membuka tab baru)):

    Untuk menginstal dengan npm:

    npm install @ material-ui / core

    Atau dengan benang:

    benang tambahkan @ material-ui / inti

    Sekarang setelah MUI diinjeksi, kita akan mulai dengan mengubah gaya kita. Di bagian atas file app.js kami, kami akan mengimpor beberapa hal baru:

    impor {simpleStorage} dari "./ abi / abi"; Tombol impor dari "@ material-ui / core / Tombol"; impor TextField dari "@ material-ui / core / BidangTeks"; impor {makeStyles} dari "@ material-ui / core / styles";

    Impor {makeStyles} memungkinkan kita untuk memanipulasi gaya (dalam hal ini) tombol dan bidang teks kita bersama dengan mengimpor gaya MUI default. 

    Kami sekarang akan membuat variabel (di atas fungsi kami) yang membawa gaya boilerplate dari MUI

    const useStyles = makeStyles ((theme) => ({root: { "& > *": {margin: theme.spacing (1),},},}));

    Sekarang di dalam fungsi App kami, kami juga akan menambahkan variabel bernama “kelas” yang menarik gaya yang ditentukan yang baru saja kami nyatakan di atas.

    function App () {const class = useStyles (); const [angka, setUint] = useState (0); const [getNumber, setGet] = useState ("0");

    Kami sekarang akan membuat penyesuaian dalam pengembalian kami untuk mengganti beberapa bidang kami dengan apa yang baru saja kami impor.

    return (setUint (t.target.value)} varian ="diuraikan" /> Konfirmasi

    Dapatkan uint256 Anda {getNumber}); } ekspor Aplikasi default;

    Kode Anda sekarang akan terlihat seperti ini

    import React, {useState} dari "reaksi"; impor {simpleStorage} dari "./ abi / abi"; impor Web3 dari "web3"; impor "./App.css"; impor {makeStyles} dari "@ material-ui / core / styles"; Tombol impor dari "@ material-ui / core / Tombol"; impor TextField dari "@ material-ui / core / BidangTeks"; const useStyles = makeStyles ((theme) => ({root: { "& > *": {margin: theme.spacing (1),},},})); const web3 = Web3 baru (Web3.givenProvider); const contractAddress = "alamat kontrak Anda di sini"; const storageContract = web3.eth.Contract baru (simpleStorage, contractAddress); function App () {const class = useStyles (); const [angka, setUint] = useState (0); const [getNumber, setGet] = useState ("0"); const numberSet = async (t) => {t.preventDefault (); akun const = menunggu window.ethereum.enable (); akun const = akun [0]; const gas = menunggu storageContract.methods.set (angka) .estimateGas (); const post = menunggu storageContract.methods.set (angka) .send ({from: account, gas,}); }; const numberGet = async (t) => {t.preventDefault (); const post = menunggu storageContract.methods.get (). call (); setGet (posting); }; return (setUint (t.target.value)} varian ="diuraikan" /> Konfirmasi

    Dapatkan uint256 Anda {getNumber}); } ekspor Aplikasi default;

    Sekarang jika kita melihat proyek react kita, seharusnya terlihat seperti ini!

    Screen Shot 2020 09 01 pada 6 48 55 AM

    Sudah selesai dilakukan dengan baik!

    Kami masih memiliki semua fungsi sebelumnya dan sekarang telah memasukkan kerangka kerja yang mudah digunakan untuk menyesuaikan proyek kami lebih lanjut sesuka kami. Lihat MUI dokumentasi untuk bereksperimen dengan tambahan / modifikasi Anda sendiri!

    Putaran Bonus 

    Alangkah baiknya untuk menunjukkan alamat pengguna menghubungkan dalam dApp kita, bukan?

    Mari kita buat komponen yang sangat cepat dan dasar untuk melakukan hal itu!

    Kami akan mulai dengan membuat komponen terpisah yang dapat kami impor kembali ke file App.js kami. Ide yang bagus untuk memisahkan logika kita agar tidak hanya membuat App.js mudah dinavigasi, tetapi juga mengikuti praktik komponen yang idealnya hanya melakukan satu hal. Jika akhirnya tumbuh, itu harus diuraikan menjadi subkomponen yang lebih kecil.

    Komponen dibangun 

    Kami akan membuat folder baru yang disebut komponen pada tingkat yang sama dengan src kami dan di dalam folder itu kami akan membuat file Nav.js. Perancah proyek kami sekarang akan terlihat seperti ini

    Screen Shot 2020 09 01 pada 6 47 07 AM

    Kami juga akan membuat file Nav.css dalam folder komponen kami untuk mengimpor gaya apa pun yang kami terapkan secara khusus ke komponen Nav.

    Mari buka Nav.js kita dan impor React, Web3, dan file empty.css kita

    import Bereaksi dari "reaksi"; impor Web3 dari "web3"; impor "./Nav.css"

    Sekarang kita akan membuat kelas yang disebut Nav dan kita hanya akan menambahkan beberapa hal di dalamnya untuk menampilkan alamat kita yang terhubung. Kami akan mulai dengan mengatur negara kami untuk membaca akun

    class Nav memperluas React.Component {state = {akun: "" };

    Masih di dalam kelas kita, kita akan memuat akun untuk membaca dengan menambahkan logika loadAccount asinkron kita

    async loadAccount () {const web3 = Web3 baru (Web3.givenProvider || "http: // localhost: 8080"); jaringan const = menunggu web3.eth.net.getNetworkType (); akun const = menunggu web3.eth.getAccounts (); this.setState ({akun: akun [0]}); }

    Selanjutnya kita akan membuat componentDidMount (yang akan dipanggil segera setelah komponen dipasang) Dalam kasus kita menarik akun yang dimuat. Baca lebih lajut sini

    componentDidMount () {this.loadAccount (); }

    Catatan samping:

    Ini bisa dilakukan secara berbeda, sebagai ganti kelas kita bisa membuat fungsi dan menggunakan hook yang berlawanan dengan componentDidMount, tapi demi contoh ini kita akan tetap menggunakan metode ini.

    Kami kemudian akan membuat render di atas hasil kami, render adalah metode yang diperlukan saat Anda menulis komponen React menggunakan metode kelas. Dalam pengembalian kami, kami menambahkan kelas alamat ke div kami (untuk memberikan gaya dasar nanti) di sepanjang tag p untuk menunjukkan alamat terhubung yang kami ambil menggunakan {this.state.account}

    render () {return (Alamat terhubung Anda: {this.state.account}); }} ekspor Nav default;

    File Nav.js kita sekarang akan terlihat seperti ini

    import Bereaksi dari "reaksi"; impor Web3 dari "web3"; impor "./Nav.css" class Nav memperluas React.Component {state = {akun: "" }; async loadAccount () {const web3 = Web3 baru (Web3.givenProvider || "http: // localhost: 8080"); jaringan const = menunggu web3.eth.net.getNetworkType (); akun const = menunggu web3.eth.getAccounts (); this.setState ({akun: akun [0]}); } componentDidMount () {this.loadAccount (); } render () {return (Alamat terhubung Anda: {this.state.account}); }} ekspor Nav default;

     

    Mari menuju ke file Nav.css dan tambahkan gaya yang sangat dasar

    .alamat {display: flex; justify-content: center; }

    Anda secara teknis dapat menambahkan ini ke file App.css, perlu diingat meskipun cukup cepat itu bisa menjadi berantakan. Komponen harus dapat digunakan kembali dan untuk menghindari gesekan sebanyak mungkin dengan mengkotak-kotakkan pekerjaan Anda, ini dapat membuat Anda tidak pusing di jalan..

    Sekarang mari kembali ke App.js dan impor komponen yang baru kita buat dan pastikan kita menambahkannya ke pengembalian untuk menampilkannya!

    File App.js kita yang sudah selesai akan terlihat seperti ini

    import React, {useState} dari "reaksi"; impor {simpleStorage} dari "./ abi / abi"; impor Web3 dari "web3"; impor Nav dari "./components/Nav.js"; impor "./App.css"; impor {makeStyles} dari "@ material-ui / core / styles"; Tombol impor dari "@ material-ui / core / Tombol"; impor TextField dari "@ material-ui / core / BidangTeks"; const useStyles = makeStyles ((theme) => ({root: { "& > *": {margin: theme.spacing (1),},},})); const web3 = Web3 baru (Web3.givenProvider); const contractAddress = "alamat Anda di sini"; const storageContract = web3.eth.Contract baru (simpleStorage, contractAddress); function App () {const class = useStyles (); const [angka, setUint] = useState (0); const [getNumber, setGet] = useState ("0"); const numberSet = async (t) => {t.preventDefault (); akun const = menunggu window.ethereum.enable (); akun const = akun [0]; const gas = menunggu storageContract.methods.set (angka) .estimateGas (); const post = menunggu storageContract.methods.set (angka) .send ({from: account, gas,}); }; const numberGet = async (t) => {t.preventDefault (); const post = menunggu storageContract.methods.get (). call (); setGet (posting); }; kembali ( setUint (t.target.value)} varian ="diuraikan" /> Konfirmasi

    Dapatkan uint256 Anda {getNumber}); } ekspor Aplikasi default;

    Kami sekarang harus melihat alamat terhubung kami di atas dan masih mempertahankan semua fungsi kami!

    bonusV1

    &# 127881; Kita berhasil! &# 127881;

    Kami sekarang memiliki dApp yang kami buat dari awal. Kami menarik kontrak pintar kami ke dalam proyek React, menulis logika untuk memastikan kami memiliki fungsionalitas pengguna, membuat komponen untuk membuat alamat yang terhubung, dan kami bahkan menambahkan kerangka kerja gaya populer ke proyek kami.

    Sudah selesai dilakukan dengan baik! Ini baru permulaan untuk petualangan pengembangan Web3 Anda dan Anda sudah memiliki sesuatu untuk ditunjukkan bahwa Anda tidak hanya membuat tetapi juga memahaminya. Hubungi kami di Discord dan bagikan proyek Anda (terutama jika Anda telah membuat modifikasi atau penambahan) dengan kami!

      Orientasi Pengembang: Langkah 1Pengembang Onboarding Langkah 1

      Orientasi Pengembang: Langkah 1

      Orientasi Pengembang: Langkah 2Pengembang Onboarding Langkah 2

      Orientasi Pengembang: Langkah 2

      Orientasi Ethereum 10 MenitOrientasi Ethereum 10 Menit

      Orientasi Ethereum 10 Menit
    Mike Owergreen Administrator
    Sorry! The Author has not filled his profile.
    follow me
    Like this post? Please share to your friends:
    map