Sebagai developer, blockchain adalah sebuah teknologi yang pasti sudah sering kita dengar, dengan berbagai implementasi keren di dunia digital memanfaatkan teknologi ini. Buat kamu yang belum tahu apa itu blockchain, dan bagaimana cara kerjanya, boleh cek dulu dua link ini (agak panjang tapi bagus sekali untuk menjelaskan apa itu blockchain), dan jangan lupa kembali ke artikel ini ya 😉.
Kali ini saya mau sharing yang berfokus ke membuat aplikasi dengan teknologi blockchain, dari kacamata seorang JavaScript developer tentunya. Sebenarnya ingin sharing ini dari beberapa bulan yang lalu, tapi baru sempat nulis di Medium saat liburan panjang ini (alasan 😏).
Bacaan ini untuk siapa?
Untuk dapat memahami beberapa terminologi di artikel ini, minimal kamu tahu tentang front end, JavaScript, node.js, Object-Oriented Programming, dan web development secara general.
Aplikasi-aplikasi dengan teknologi blockchain, atau sebenarnya lebih umum disebut sebagai decentralized apps (DApps), adalah aplikasi yang memanfaatkan teknologi blockchain. Yang membedakan DApps dengan aplikasi pada umumnya adalah di konsep centralized vs decentralized. Intinya, saat kita membuat DApps, aplikasi kita berada di network Blockchain yang dapat diakses siapapun, ketimbang berada di server yang terpusat dan dikontrol oleh pihak tertentu. Oke, sebenarnya ini terlalu menyimpelkan penjelasan diantara keduanya. Untuk perbedaan yang lebih tepat dan akurat, kamu bisa mampir ke link ini.
Mendevelop DApps lumayan mudah apabila kita sudah mengerti bahasa pemrograman seperti JavaScript. Mungkin ada yang membayangkan untuk bisa mendevelop DApps, berarti perlu bermain cryptocurrency Ethereum dengan ether (ETH) sebagai satuannya. Ini ada benarnya, tapi untuk DApps yang sudah naik ke production. Buat kamu yang ingin coba-coba develop aplikasi untuk belajar, tidak perlu kok punya ether sepeser pun kok!
Blockchain, Ethereum Network, dan Smart Contract
Photo by Thought Catalog on Unsplash
Saat kita membaca tentang teknologi Blockchain, kita pasti sering mendengar sesuatu yang namanya smart contract. Smart contract adalah sebuah program (lebih tepatnya protocol, sih) yang ada di teknologi Blockchain yang diterapkan di berbagai teknologi blockchain, salah satunya adalah di Ethereum, dimana kita dapat dengan aman melakukan sebuah transaksi tanpa adanya keterlibatan pihak ketiga, tentunya menggunakan satuan ether di network Ethereum, dengan berbagai macam logika dan proses yang ada, sesuai dengan use case yang dibutuhkan.
Dengan menggunakan smart contract, kita bisa membuat sebuah sistem lelang, transaksi pembelian, dan banyak lainnya. Gampangnya, smart contract adalah sebuah program yang kita buat dengan bahasa pemrograman untuk menjalankan fungsi yang kita butuhkan.
Solidity Programming Language
Photo by Fabian Grohs on Unsplash
Untuk membuat smart contract yang “hidup” di network blockchain Ethereum, kita dapat menggunakan bahasa pemrograman yang bernama Solidity. Apabila kamu adalah developer JavaScript, harusnya contoh kode Solidity lumayan familiar. Solidity adalah contract-oriented programming language.
Snippet code Solidity sederhana. Syntax highlightingnya belum di support sama Gist nih 😢
Kita bisa melihat “contract-oriented” di Solidity ini seperti “object-oriented” nya Object Oriented Programming (OOP). Kita membuat sebuah contract layaknya sebuah class, dimana kita melakukan berbagai logic di dalamnya, dan nanti saat kita mendeploy nya ke network Ethereum, kita akan membuat sebuah instance dari contract ini agar semua orang dapat berinteraksi dengan contract ini di network.
Solidity – Solidity 0.4.24 documentation
Solidity is a contract-oriented, high-level language for implementing smart contracts. It was influenced by C++, Python…
solidity.readthedocs.io
Untuk membuat sebuah DApp di network Ethereum dengan memanfaatkan smart contract dan Solidity, ada beberapa langkah yang perlu kita lakukan.
Membuat smart contract dengan Solidity
Mendeploy smart contract ke salah satu network Ethereum
Membuat aplikasi front-end untuk berinteraksi dengan smart contract
Enjoy!
Oke, kelihatannya pendek ya, hanya ada tiga step. Tapi di tiap step ini akan banyak alien, atau istilah dan tools yang lumayan asing bagi yang pertama kali berkenalan dengan Solidity.
Membuat Smart Contract dengan Solidity
Photo by rawpixel on Unsplash
Oke, kita masuk ke step pertama, yaitu membuat smart contract itu sendiri, menggunakan bahasa pemrograman Solidity. Nah, Solidity adalah sebuah bahasa pemrograman yang harus di compile, dan akan ada beberapa step yang perlu kita lakukan.
Code Solidity dengan Remix Editor
Supaya kita bisa familiar dulu dengan bahasa pemrograman ini, kita coba online editor nya dulu, dan yang populer adalah Remix Editor. Ini seperti Repl kalau di JavaScript. Oh ya, untuk bisa familiar dengan Solidity, kamu bisa mampir dan main di https://cryptozombies.io/. Ini website pertama yang saya gunakan untuk belajar Solidity. Tapi tidak perlu terdistract main di cryptozombies dulu, saya akan contohkan beberapa kode sederhana yang harusnya kamu bisa mengerti (kalau gitu kenapa dikasih link kan jadi tergoda main kesana 😱)
Penampakan Sekilas Remix Editor. Kamu bisa akses di https://remix.ethereum.org
Bisa kita lihat di contoh gambar di atas, di editor online Remix ini kita bisa bereksperimen dengan kode Solidity dengan mudah dan praktis. Lalu kita bisa masuk ke menu / tab “compile” untuk men-setting auto-compile supaya setiap perubahan otomatis tercompile.
Kemudian, kita bisa masuk ke menu / tab “run” untuk mengetest kode yang telah kita buat.
Tampilan awal sebelum coba menjalankan kode Solidity
Di kanan atas kita bisa lihat ada beberapa input yang kita perlu isi. Yang penting untuk sekarang kita set adalah bagian “environment”. Kita perlu mengganti setting “environment” yang awalnya bertuliskan “Injected Web3” menjadi “JavaScript VM”.
Dengan memilih JavaScript VM, kita akan menggunakan semacam environment dengan account-account yang di generate otomatis yang diberikan bagi kita secara cuma-cuma untuk bereksperimen. Kita abaikan dulu soal “account” ini, dan abaikan juga sisa input yang ada. Lalu kita klik tombol “Deploy” untuk bisa menjalankan smart contract kita. Setelah kamu jalankan, harusnya akan muncul tampilan seperti di bawah ini.
Penampakan setelah mendeploy smart contract di Remix Editor
Nah, kita sudah punya contract yang dipublish di network testing Ethereum (bukan network production, for very obvious reason 😁). Kita bisa lihat di kanan bawah, ada sebuah tombol “myName”. Ini adalah variable public yang bisa kita akses nilainya. Kita tinggal klik saja dan hasilnya akan muncul.
Return value dari getter method myName
Yang terjadi disini adalah, saat kita mengklik tombol ini, yang dilakukan adalah memanggil method getter (konsep di OOP) untuk mengakses variable myName ini. Di Solidity, saat kita membuat sebuah variable public, contract akan secara otomatis membuatkan method getter yang bisa kita gunakan langsung.
Kita bisa juga membuat sebuah function yang akan me-return value, seperti contoh code yang bisa kita lirik di bawah ini.
Contoh pembuatan sebuah function public yang me-return string di Solidity
Setelah kita coba membuat function sayHalo(), jangan lupa kita hapus (dengan mengklik tombol “x” di instance contract yang sudah di deploy) dan mendeploy ulang, supaya contract kita dibuat dari awal lagi, dan sudah punya function sayHalo. Lalu, kita coba klik tombol “sayHalo” disana, yang akan me-return string “halo!”, sesuai dengan yang kita tulis di kode kita.
Snippet di atas tadi adalah smart contract sederhana yang kita buat melalui Remix editor. Tapi kita belum mencoba bagaimana transaksi terjadi melalui smart contract. Sebentar lagi kita akan coba explore tentang membuat transaksi di smart contract, tapi sebelum itu kita akan melihat sebuah konsep yang tadi dengan sengaja saya lewatkan, yaitu konsep account dan penggunaan smart contract.
Account, Ether, dan Gas
Saat kita menjalankan sebuah operasi di sebuah smart contract, sebetulnya tidak sesimpel kita menjalankan function di program JavaScript. Pada smart contract, setiap proses dan operasi yang dijalankan akan memakan resource yang ada di network. Setiap operasi membutuhkan “bayaran” agar dapat dijalankan, dan nilainya berbeda-beda. Anggap saja seperti bermain game arcade, kita butuh bayar kan? Beda game, beda harga biasanya. Saat kita berkomunikasi dengan sebuah smart contract, harus ada sebuah account di Ethereum yang berkomunikasi. Kita tidak bisa menjalankan operasi secara anonim, karena setiap operasi akan ada “harga”nya.
Saat kita punya account di network Ethereum, account kita akan memegang sejumlah ether. Ether, seperti yang kamu sudah tahu, adalah currency yang ada di Ethereum. Lalu, ada juga yang namanya gas. Gas adalah sebuah satuan nilai yang dapat kita beli dengan currency ether (ETH), dan dibutuhkan sebagai “bayaran” untuk menjalankan sebuah operasi.
Jadi, ether kita gunakan untuk melakukan transaksi. Di smart contract ini kita sebut value. Lalu gas, kita gunakan untuk menjalankan operasi. Karena itu, saat kita membuat kode Solidity, kita harus benar-benar memikirkan efisiensi dari kode kita, karena semakin ruwet kode kita, misalnya jika banyak looping, hati-hati, gas yang digunakan juga akan banyak!
Oke, setelah kamu kenalan dengan account, gas, dan ether sebagai value, saatnya kita bahas tentang transaksi di smart contract.
Transaksi melalui Smart Contract
Photo by rawpixel on Unsplash
Dalam sebuah transaksi, pasti akan melibatkan seseorang. Di network blockchain, setiap orang akan mempunyai sebuah account dengan address yang unik. Address ini adalah pembeda seorang dengan yang lainnya. Sepanjang artikel ini, kita akan menggunakan dummy account saja, ada yang kita generate otomatis di Remix Editor, dan ada pula yang akan kita simpan di browser kita.
Kita akan membuat contract baru yang akan bermain dengan address account dan transaksi ether. Kita akan coba membuat contract untuk sistem donasi yang sangat sederhana.
my-new-contract-with-transaction.sol Part 1
Kita coba buat file baru kita di Remix Editor, dengan nama my-new-contract-with-transaction.sol untuk sistem donasi kita.Di contoh kode Part 1 di atas, kita bisa menyimpan sebuah address dari account yang menjalankan sebuah function yang ada di contract menggunakan msg.sender. Di contoh kode di atas, kita mencoba untuk menangkap address dari si pembuat contract pertama kali.
Di Remix Editor, kita bisa bertukar account ke account yang lain, dengan mengganti nilai yang ada di dropdown “account”. Oh ya, kita juga bisa lihat masing-masing dari account memiliki sejumlah ether yang nanti dapat kita gunakan untuk transaksi.
Memilih salah satu dari account dummy yang digenerate oleh Remix Editor
Jika kamu sudah mencoba code di atas di Remix Editor dan mendeploy-nya, kamu bisa melihat perubahan ether yang terjadi di account yang sedang kamu gunakan. Ini menunjukkan saat sebuah contract dibuat, ada sejumlah ether yang digunakan. Membuat contract tidak cuma-cuma, tapi karena kita menggunakan JavaScript VM, yang mengemulasikan test network di Ethereum, tenang saja. Setiap kita membuat ulang contract kita, semua account yang ada di Remix otomatis kembali ke 100 ether.
Penampakan ether yang berkurang dari account setelah melakukan deploy
Oke, sekarang kita coba buat sebuah function baru yang bernama sayMyAddress, sebuah function kecil untuk sekadar me-return address dari sebuah account yang mengakses contract.
my-new-contract-with-transaction.sol Part 2
Saat kita coba mengganti-ganti account yang ada di Remix, kita dapat melihat address sebagai return value dari function tersebut.
Penampakan return value dari function sayMyAddress
Sekarang, saatnya kita melakukan sebuah transaksi. Transaksi yang akan kita buat, karena sistem nya donasi, berarti kita tidak mentransfer sejumlah ether ke account seseorang, melainkan ke sebuah “kotak donasi”. Kita bisa menjadikan contract ini sebagai kotak donasi. Setiap transaksi yang masuk, ether nya akan di simpan di dalam contract. Kita akan mencoba membuat sebuah function untuk melakukan sistem donasi ini.
my-new-contract-with-transaction.sol Part 3
Disini kita membuat dua variable baru di contract kita, yaitu lastDonatorAddress, dan lastDonatedAmount, untuk menampung address dari donatur terbaru dan jumlah ether yang baru saja di donasikan.
Kemudian, kita membuat sebuah function yang akan melakukan transaksi itu sendiri. Di Solidity, function ini dinamakan payable function. Dengan membuat sebuah function menjadi payable, maka saat account mengirimkan sejumlah ether, ether tersebut akan diambil sebagai transaksi. Kita bisa mengisi nilai ether yang kita mau di Remix Editor dengan mengisi nilai dari value, dan memilih satuan ether yang kita inginkan.
Satuan ether, ini layaknya seperti ukuran panjang, ada meter, centimeter, kilometer, dan lain-lain. Untuk ether, satuan default yang digunakan adalah wei, yang merupakan satuan paling kecil dari ether. Kita bisa melihat tabel denominasi ini untuk mengetahui ada satuan apa saja di Ethereum.
Step 1: Account melakukan pengirimkan value sebelum mengklik tombol “donate”
Step 2: mengklik tombol “donate” untuk menjalankan function donate dengan membawa 50 wei sebagai value
Step 3: Total ether yang dimiliki telah berkurang sejumlah 50 wei, alias 0,000… ether (kecil banget!)
Untuk membuktikan apakah benar account tersebut telah mendonasikan sejumlah ether (dalam satuan wei), kita tinggal memanggil nilai lastDonatorAddress dan lastDonatedAmount.
Yup, address dan jumlah yang di donasikan sesuai dengan langkah sebelumnya
Nah, karena tadi di awal di sebutkan kalau transaksi yang terjadi, ether nya akan masuk di tampung ke dalam contract ini, sebagai “kotak donasi”. Kita coba buktikan dengan membuat sebuah function untuk me-return balance, atau jumlah total ether yang ditampung di dalam contract.
my-new-contract-with-transaction.sol Part 4
Jangan lupa, untuk mengetest function ini, berarti kita harus mendeploy ulang contract kita. Kita di awal coba jalankan function getDonationBalance dulu, sebelum ada donasi.
balance dari contract sebelum ada donasi dari siapapun
Berarti kita kemudian perlu menjalankan function donate() untuk mengulangi proses donasi dengan 50 wei tadi. Setelah kita sudah mencoba mendonasikan 50 wei, kita kemudian coba jalankan function getDonationBalance yang baru saja kita buat.
balance dari contract setelah terjadi donasi dari satu account sejumlah 50 wei
Sip, contract sederhana kita sudah selesai. Banyak konsep programming di Solidity yang saya lewatkan dulu, seperti tipe data dan validasi. Kamu bisa explore sendiri untuk dua hal yang ini, karena lumayan panjang kalau dibahas sekaligus 🤯.
Develop Smart Contract di Local Machine
Setelah kita sudah tau nih cara membuat contract dengan transaksi sederhana di Solidity, saatnya kita beralih ke text editor kesayangan kita, untuk melakukan proses compile di komputer kita.
Kita buat dulu sebuah folder project misalnya namanya kotak-donasi, yang akan menampung smart contract kita, lalu kita buat smart contract kita. Copy-paste yang telah kita buat dan test di Remix saja, lalu save dengan nama my-donation-box.sol. Kita juga ganti sedikit nama contract kita, supaya lebih bagus saja, ketimbang my-first-transaction-contract 😅. Sekalian, kita hapus saja function sayMyAddress, karena kita tidak begitu membutuhkan ini sekarang.
Syntax Highlighting untuk Solidity, akhirnya 🎉 Thanks VSCode!
Nah, kode kita sudah ready untuk kita compile. Saat kita sebut proses compile di Solidity, kita perlu kenal dengan yang namanya ABI, atau kepanjangannya adalah Application Binary Interface. ABI adalah sebuah interface yang dapat kita gunakan untuk mengakses function-function yang ada di contract yang telah kita buat.
Untuk melakukan proses compile, kita bisa menggunakan solc, Solidity compiler. Disini kita coba membuat sebuah file bernama compile.js, sebuah file js yang bertugas untuk membaca file berekstensi sol untuk kemudian di compile oleh solc menjadi sebuah ABI yang dapat kita gunakan.
Dengan mendapatkan ABI tadi, kita bisa mendapatkan dua macam object, yaitu interface, yang mengandung berbagai functionality yang bisa kita gunakan, dan bytecode, representasi dari contract kita.
Oke, sekarang kita perlu compile contract kita menjadi sebuah ABI. Di node.js kita perlu menginstall modul NPM bernama solc.
Inisialisasi NPM dan menginstall solc, solidity compiler
Kemudian, kita buat script compile.js untuk melakukan proses kompilasi. Kamu bisa melihat script compile.js di sini.
File compile.js
Nah, script ini jika dijalankan akan meng-export contract yang telah di compile dalam bentuk ABI. Di line 8, dengan sengaja kita coba ingin menampilkan nilai dari variable compiled, untuk menunjukkan ABI itu wujudnya seperti apa.
🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯
Yup, ABI basically adalah sebuah JavaScript object yang memiliki berbagai macam key dan bahkan memiliki bytecode, yang merupakan representasi dari si smart contract yang kita punya, dan nantinya bytecode ini lah yang akan kita deploy ke network Ethereum.
Untuk bisa mengetest apakah contract yang sudah kita compile dapat berfungsi di program JavaScript kita, kita harus mendeploy bytecode-nya ke test network. Dengan ini, kita sudah selesai di step pertama, dan siap masuk ke step kedua!
Deploy Smart Contract ke Network Ethereum
Photo by Tim Mossholder on Unsplash
Oke, sekarang, kita akan mencoba mendeploy contract kita ke test network Ethereum. Network Ethereum ada yang network “real” atau network main yang merupakan network production. Tapi ada juga test network yang biasa digunakan untuk mendevelop dan testing sebuah DApp. Untuk artikel ini, kita akan mencoba menggunakan test network yang bernama Rinkeby.
Rinkeby Test Network
Untuk memanfaatkan sebuah test network, kita perlu membuat account Ethereum di test network tersebut. Sekarang-lah saat yang tepat untuk mencoba mainan baru, sebuah tool untuk me-manage account Ethereum di browser, yaitu menggunakan MetaMask, sebuah browser extension yang ada di Google Chrome, Mozilla Firefox, dan Brave browser. Untuk artikel ini juga saya akan menggunakan Brave browser.
MetaMask
MetaMask – brings Ethereum to your browser.
metamask.io
Secure, Fast & Private Web Browser with Adblocker | Brave Browser | Brave Browser
Welcome to the new Brave browser. Experience a faster, more private and secure browser for PC, Mac and iOS and Android…
brave.com
Tampilan Membuka MetaMask di Browser sebagai Browser Extension
Mengganti dari Main Ethereum Network ke salah satu Test Network, yaitu Rinkeby
Membuat Account Baru di Rinkeby Test Network
Menyimpan Kode Khusus untuk merestore Account di MetaMask
Tampilan Setelah Account Sukses Dibuat. Kamu bisa mengganti nama default account dengan bebas
Oke, account di Rinkeby test network kita sudah ready, tapi seperti yang kita bisa lihat, account kita hanya punya 0 ETH, alias 0 ether. Nihil. Tapi, berhubung account ini berada di sebuah test network, yang tentunya untuk testing, kita bisa dengan mudah mengisi sejumlah ether ke account yang ada di test network ini. Kita bisa gunakan https://faucet.rinkeby.io/ untuk “mengucurkan” sejumlah ether ke account kita.
Caranya pun mudah, kita hanya perlu mempost address dari account kita di social media supaya test network ini tidak mudah di abuse. Post yang sudah kita publish juga dapat langsung kita hapus setelah ether sudah masuk. Panduan post di social media bisa kita cek langsung juga di website yang sama. Mudah, dan hanya memakan waktu kurang lebih lima menit, dan setelah itu ether sudah langsung masuk ke account kita.
Penampakan faucet.rinkeby.io untuk “mengucurkan” sejumlah ether ke account kita yang ada di rinkeby network
Oh iya, kita bisa klik menu di MetaMask dan pilih Show QR Code untuk mendapatkan address lengkap dari account kita.
Menu di MetaMask
Contoh Post Address Account di Google+
Paste Link Detail Post tersebut
Funding Request Accepted
Voila! 18.75 ETH gratis untuk 3 hari ke depan
Mendeploy smart contract yang telah dicompile
Untuk kebutuhan deployment kode kita, kita perlu menginstall tiga modul lagi, yaitu web3, truffle provider, dan scrypt. Untuk bisa mendeploy ke network Ethereum, kita perlu punya semacam infrastruktur yang akan memanage segala prosesnya. Namun demi kepentingan testing dan development, kita disediakan sebuah provider yang dapat dengan mudah kita gunakan.
Truffle, sebuah framework untuk memudahkan kita membuat smart contract, menyediakan provider ini. Provider yang disediakan ini dapat menghubungkan kita ke sebuah infrastruktur yang dapat memberikan kita akses ke network Ethereum. Salah satu infrastruktur yang akan kita gunakan adalah Infura.
Infura – Scalable Blockchain Infrastructure
Secure, reliable, and scalable access to Ethereum APIs and IPFS gateways.
infura.io
Using Infura (or a custom provider) | Truffle Suite
Infura is a hosted Ethereum node cluster that lets your users run your application without requiring them to set up…
truffleframework.com
Menginstall modul NPM web3, truffle provider, dan scrypt
web3 adalah modul yang saat terakhir saya gunakan, masih dalam versi beta, dan tentunya akan banyak mengalami perubahan. Untuk mencegah perbedaan versi, kita gunakan versi 1.0.0-beta.26.
Kita juga perlu menginstall modul scrypt untuk mengatasi masalah path yang ada di web3.
Kita sekarang perlu membuat script deploy.js kita. Jika kita sudah sukses mendaftar ke infura, kita akan mendapatkan email yang akan merujuk ke URL Infura untuk test network Rinkeby, dan kita akan mendapatkan mnemonic, semacam kode khusus, dan infura URL untuk kita. Kita Buat dulu code deploy.js seperti di bawah ini. Kamu bisa melihat code nya juga di sini.
kode deploy.js
Kemudian kita siapkan mnemonic dan infura url kita ke dalam environment variable.
Menginstall modul dotenv untuk memasang environment variable kita
Lalu, kita buat file .env untuk menampung mnemonic dan infura url tadi.
RINKEBY_MNEMONIC=YOUR_ACCOUNT_MNEMONIC_HERE
RINKEBY_INFURA_URL=RINKEBY_INFURA_URL_HERE
Sekarang, saatnya kita jalankan script deploy.js dan jika muncul seperti ini, maka selamat, smart contract buatanmu sudah sukses di deploy ke network test rinkeby! Jangan lupa catat contract address yang muncul di terminal sebelum kamu mengakhiri step ini.
Yay! Contract sudah di deploy dan siap untuk digunakan 🚀
Membuat Front-End App untuk Berinteraksi dengan Smart Contract
Photo by Fabian Grohs on Unsplash
Great job! Sekarang saatnya kita masuk ke step ketiga, step terakhir dari pembuatan DApp kita, yaitu membuat aplikasi front-end untuk berinteraski dengan smart contract yang telah kita deploy di network test Rinkeby.
Pada artikel ini saya akan menggunakan vanilla JavaScript di satu halaman HTML, nggak perlu terlalu canggih. Tapi kedepannya lebih di rekomendasikan menggunakan front-end library seperti React, Angular, Vue, Preact, dan lain-lain, karena akan banyak keperluan untuk bermain state dan akan lebih kompleks. Tapi kita back to basic dulu saja untuk artikel ini.
Mendapatkan Informasi Account yang aktif di MetaMask
Masih ingat dengan provider yang terhubung ke infrastruktur Infura untuk mendeploy contract? Di aplikasi front-end kita juga perlu terhubung melalui sebuah provider. Tapi kali ini, provider yang akan kita gunakan adalah MetaMask, browser extension yang sudah kita install tadi. Provider ini akan menggunakan account yang sedang aktif kita seleksi. Kita akan membangun front-end nya sedikit demi sedikit. Better start small, right? 😉
Snippet Code HTML dan vanilla JS untuk mendapatkan account address yang aktif di MetaMask
Pertama, kita menggunakan web3.min.js yang diambil dari CDN. Saat kita menggunakan web3, kita dari awal mendapatkan Web3 (sebuah constructor function) dan web3 (instance)-nya secara langsung. Namun, kita perlu melakukan setting provider terhadap instance web3 nya, karena itu kita menggunakan kode berikut:
web3 = new Web3(window.web3.currentProvider);
Setelah provider sudah kita setting, instance web3 kita di browser saat ini sudah terhubung dengan MetaMask, beserta account kita disana.
Kemudian, di line selanjutnya kita ingin mendapatkan account yang sekarang sedang aktif di MetaMask. Semua function yang ada di web3 sifatnya asynchronous, dan salah satu functionnya misalnya, yaitu web3.eth.getAccounts(), adalah sebuah function yang akan mengembalikan promise, yang nantinya setelah di resolve kita akan mendapatkan sebuah array yang berisi address account yang ada di MetaMask.
Kode di atas seharusnya sudah cukup menggambarkan bagaimana app front-end dapat berkomunikasi ke MetaMask provider untuk mengakses semua hal yang berhubungan dengan account Ethereum yang kita gunakan. Hasilnya, jika kita jalankan file HTML kita di browser, seperti ini.
Penampakan tampilan kotak-donasi.html sementara
Tapi, kode yang tadi kita buat, belum ada berkomunikasi sama sekali dengan smart contract yang sudah kita deploy. Untuk melakukan hal ini, prosesnya akan sedikit lebih panjang.
Berkomunikasi melalui Local Copy dari Smart Contract
Kamu pasti sudah sangat familiar dengan API, dimana salah satu yang paling sering kita gunakan adalah menggunakan front-end app kita untuk melakukan pemanggilan API, untuk berkomunikasi dengan server. Dengan adanya ABI, hasil compile dari Solidity, front-end app kita perlu mendapatkan local copy dari ABI, untuk mendapatkan interface dan melakukan pemanggilan dari method yang ada. Yang di copy adalah interface yang akan melakukan komunikasi dengan contract yang ada di network.
Bagaimana cara mendapatkan ABI dari contract kita? Masih ingat dengan file compile.js kan? Kita akan ubah sedikit di sana untuk mendapatkan isi dari interface object ABI hasil compile, dan copy-paste ke script kita.
tampilkan interface dari ABI di console, dan copy-paste
Kemudian, kita update JavaScript code di kotak-donasi.html untuk melakukan pemanggilan method dari interface contract kita.
Di kode di atas, kita perlu menyesuaikan contract address sesuai dengan address yang sudah kita simpan saat kita melakukan deployment. Jika kamu lupa menyimpannya dan tidak bisa melacak sama sekali dimana, kamu bisa lakukan deploy ulang. Kemudian, memanfaatkan interface dari ABI yang kita dapat, kita dapat membuat local copy dari contract kita, seperti yang ada di line 48.
new web3.eth.Contract(YOUR_INTERFACE, CONTRACT_ADDRESS);
Setelah kita telah mendapatkan copy dari contract kita, kita bisa menggunakan property methods dari contract tersebut untuk memanggil function yang ada. Sama seperti memanggil method di web3, function yang kita call akan me-return promise.
Kemudian, kita coba jalankan kembali file HTML tadi di browser, dan kita bisa lihat penampakannya kira-kira seperti gambar di bawah. Total Donated Amount nya jelas masih 0, karena belum ada yang melakukan donasi.
Penampakan tampilan kotak-donasi.html sementara
Oke, keren! Sekarang, kita tinggal membuat proses donasi dengan kode di bawah ini.
Seharusnya kamu menyadari cara memanggilan method dari contract yang berbeda dari sebelumnya. Sebelumnya, untuk mendapatkan balance, kita tinggal memanggilnya dengan method .call().
donationBoxContract.methods.getDonationBalance().call()
Tapi, yang kita gunakan untuk melakukan proses donasi, kita gunakan method send(), dengan mengirimkan sebuah object.
donationBoxContract.methods.donate().send({ value: …, from: … })
Saat kita memanggil method yang sifatnya bukan payable (melakukan transaksi dengan mengirimkan sejumlah ETH), kita dapat dengan mudah menggunakan .call(). Dengan .call(), tidak ada pemakaian gas ataupun ether. Tapi, jika melibatkan transaksi ether, kita perlu menggunakan .send(), sekaligus mengirimkan parameter berupa object yang menampung value (dalam satuan wei), dan address account mana yang akan mengirimkan ether tersebut.
Kita langsung saja coba jalankan kode HTML yang sudah kita update tadi.
Penampakan tampilan kotak-donasi.html sementara
Kita disini sudah punya input jumlah donasi. Jika misalnya kita isi dengan 1 ETH, lalu kita klik tombol donate, MetaMask akan otomatis melakukan konfirmasi apakah transaksi yang dilakukan itu valid atau tidak, seperti contoh gambar di bawah ini. Tentu saja ini sangat penting, dan jangan sampai ada transaksi yang tidak melalui persetujuan dari pemilik account.
isi donation amount dengan 1, misalnya, lalu klik Donate
Jika kita klik Submit di MetaMask, maka kita telah setuju memberikan 1 ETH ke dalam contract. Smart contract yang telah kita deploy otomatis akan menangkap request ini, dan setelah beberapa saat, balance di contract ini akan bertambah, sesuai dengan jumlah ETH yang kita kirimkan.
Total Donated Amount bertambah sejumlah 1 ETH! 🎉 tapi akan memakan waktu beberapa saat ya, jadi tidak instant
Kita perlu reload manual halaman di browser, karena sampai saat ini kita belum membuat sebuah mekanisme bagi front-end app kita untuk bereaksi terhadap perubahan yang terjadi di contract. Di artikel kali ini kita belum akan membahasnya, tapi kita bisa menggunakan yang namanya event di Solidity. Ini memampukan kita untuk smart contract memberikan semacam trigger ke front-end app kita, untuk membuat user experience app kita jauh lebih baik. Kamu bisa explore sendiri lebih jauh soal event nanti.
Photo by Andrew Neel on Unsplash
Great job! Kamu sudah berhasil membuat web app memanfaatkan teknologi Blockchain 🎉 !
Setelah berbagai tulisan, gambar, dan kode yang super panjang ini, akhirnya kita berhasil membuatnya. Tentunya masih banyak sekali pasti pertanyaan yang ada di kepala masing-masing kita, tapi minum dulu kopinya dan rileks, sudah banyak juga alien yang sudah kita coba.
Kita belum mencoba bagaimana melakukan validasi, transaksi ether antar account, membuat front-end app yang reaktif terhadap perubahan di smart contract, dan lain-lain. Kita baru menggali kulit dari teknologi ini, dan masih sangat banyak hal seru yang bisa kita explore.
Apabila kamu ingin melihat source code full pekerjaan yang sudah kita buat tadi, kamu bisa melihatnya di github.
adhywiranata/latian-solidity-kotak-donasi
latian-solidity-kotak-donasi – 🏋️📦🔗 Latihan Blockchain menggunakan Solidity dan JavaScript
github.com
Sekian dulu sharing saya, apabila ada masukan, kritik, komentar, dan lain-lain, silakan berikan respon, dan silakan berikan 👏 jika sharing ini cukup bermanfaat dan informatif 🙂
Disclaimer: Saya bukan expert di bidang Blockchain dan Cryptocurrency. Artikel ini sebagai sharing dari pengalaman pribadi mendevelop DApp sebagai seorang Web Developer. Sebagai developer, saya belajar tentang Blockchain dari eksperimen code, bukan melalui whitepapers. Jika ada kesalahan penggunaan jargon atau term, silakan berikan saran melalui komentar di bawah.