Membuat dApp “Buy Me a Coffee”

Build a dApp “Buy Me a Coffee” — Weekly Learning 2

Pada artikel kali ini, akan membahas sedikit mengenai dApp Buy Me A Coffee pada jaringan Goerli ETH. Pada dApp ini pengguna bisa mengirim fake ETH sebagai tips dan menambahkan pesan singkat. Berikut adalah hasil testingnya :

Kode smart contract BuyMeACoffee.sol

Referensi github : https://github.com/ekoyanu99/BuyMeACoffee-dApp/blob/master/contracts/BuyMeACoffee.sol

Buat folder baru dengan nama BuyMeACoffee-contract atau bisa bebas

Buka folder dan lakukan inisialisasi project :

npm init -y

Install hardhat dan dependency yang dibutuhkan :

npm install --save-dev hardhat@^2.9.3 @nomiclabs/hardhat-waffle@^2.0.0 ethereum-waffle@^3.0.0 chai@^4.2.0 @nomiclabs/hardhat-ethers@^2.0.0 ethers@^5.0.0

Buat project sampel :

npx hardhat

Pilih project that use javascript, hapus file default smart contract dan ganti dengan BuyMeACoffee.sol sesuai pada referensi github

Deploy Smart Contract BuyMeACoffee.sol ke ETH Goerli

Install dotenv kemudian buat file .env berisi private key dan url rpc goerli

npm install dotenv

Contoh file .env

GOERLI_URL=https://eth-goerli.alchemyapi.io/v2/<your api key> PRIVATE_KEY=<your metamask api key>

Edit file hardhat.config.js tambahkan require dotenv

require("dotenv").config()
const GOERLI_URL = process.env.GOERLI_URL;
const PRIVATE_KEY = process.env.PRIVATE_KEY;

Tambahkan goerli pada network

goerli: {
url: GOERLI_URL,
accounts: [PRIVATE_KEY]
}

Buat file deploy.js pada folder scripts seperti berikut :

BuyMeACoffee-dApp/deploy.js at master · ekoyanu99/BuyMeACoffee-dApp

Jalankan deploy.js

npx hardhat run scripts/deploy.js --network goerli

Buat file withdraw.js pada folder yang sama dan deploy :

BuyMeACoffee-dApp/withdraw.js at master · ekoyanu99/BuyMeACoffee-dApp

Jangan lupa untuk mengganti contractAddress pada line 13

npx hardhat run scripts/withdraw.js

Membuat frontend BuyMeACoffee

git clone https://github.com/ekoyanu99/BuyMeACoffee-dApp/tree/master/frontend

Jalankan npm run dev atau yarn dev. Ganti contractAddress pada file index.jsx

npm run start

Done …

Let’s connect together

Twitter : https://twitter.com/ekoyanu99

Github : https://github.com/ekoyanu99