Membangun dApp pertama Anda dengan ethers.js

Ini adalah tutorial step by step tentang cara membuat front end, mendeploy smart contract Solidity, dan menghubungkan keduanya. Kita akan menggunakan Metamask, Remix IDE and Ethers.js.

Pada akhir tutorial ini, Anda akan dapat membuat front end HTML sederhana dengan tombol yang dapat berinteraksi dengan fungsi smart contract. Tutorial ini terdiri dari 3 tahap:

• Membuat halaman web HTML dasar
• Membuat smart contract Solidity dasar
• Menghubungkan halaman web dengan smart contract menggunakan Ethers.js.

Persiapan

1. Download dan Install MetaMask

• Belum pernah menggunakan MetaMask? Tonton video ini
• Bagian yang penting untuk kita adalah: 1:06 to 4:14
• Klik Ethereum Mainnet di atas. Ubah ke Sepolia Testnet dan dapatkan salinan alamat publik akun di dompet MetaMask Anda.

1. Minta beberapa Sepolia Testnet Ether dari faucet yang dimuat ke dalam dompet MetaMask Anda.

   • Tautan faucet untuk meminta dana
   • Blog yang menjelaskan tentang faucet dan cara menggunakannya

2. Install sebuah code editor.

   • Anda dapat menggunakan editor apa saja yang Anda inginkan, tetapi kami menyarankan untuk menginstal Visual Studio Code karena memiliki beberapa ekstensi dan karakteristik yang berguna. Ekstensi-ekstensi tersebut opsional, tetapi kami menyarankan yang berikut:

   (Jika Anda menggunakan Visual Studio Code, Anda dapat menginstal semua ekstensi ini dengan mengklik ikon ekstensi di bilah sisi kiri, mencari nama ekstensi, dan mengklik tombol instal). - Solidity - Syntax highlighting untuk Solidity - Live Server - Memungkinkan kamu untuk menjalankan local server untuk menguji file HTML/CSS/JS - Prettier - Pemformat kode untuk JS, CSS, and HTML - npm IntelliSense - Secara otomatis melengkapi deklarasi npm module pada import statements - IntelliSense for CSS class names in HTML - Autocomplete untuk CSS class di file HTML - GitLens - Menunjukkan informasi git blame di editor

3. Install sebuah HTTP server. Gunakan apapun, tapi kami rekomendasikan lite-server untuk pemula:

   • Install Node.js ( Download and Instructions )
   • Install lite-server ( with NPM in a terminal / command prompt ):

   # Command di bawah akan menginstall `lite-server` secara global (-g) di komputermunpm install -g lite-server
   

   (Jika Anda menggunakan Visual Studio Code, Anda dapat membuka terminal dengan mengklik Terminal > New Terminal. Dan jika Anda juga sudah menginstal ekstensi Live Server kamu bisa melewati bagian ini)

Membuat dan menyajikan halaman web sederhana

Langkah pertama adalah membuat halaman HTML dasar.

1. Buat folder baru (direktori) di terminal Anda menggunakan mkdir
2. Di editor kode (mis. Atom, atau Visual Studio Code), buka folder tersebut