{"id":165,"date":"2025-08-24T14:37:31","date_gmt":"2025-08-24T14:37:31","guid":{"rendered":"https:\/\/learn.rantissi.my.id\/?p=165"},"modified":"2025-08-24T14:37:34","modified_gmt":"2025-08-24T14:37:34","slug":"memahami-struktur-aplikasi-web3-dan-alat-yang-dibutuhkan","status":"publish","type":"post","link":"https:\/\/learn.rantissi.my.id\/index.php\/2025\/08\/24\/memahami-struktur-aplikasi-web3-dan-alat-yang-dibutuhkan\/","title":{"rendered":"Memahami Struktur Aplikasi Web3 dan Alat yang Dibutuhkan"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Apa Itu Aplikasi Web3?<\/h2>\n\n\n\n<p>Secara umum, Web3 App terdiri dari 3 bagian:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83e\udde0 <strong>Smart Contract<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ditulis dalam Solidity<\/li>\n\n\n\n<li>Dideploy ke blockchain (misalnya testnet Ethereum)<\/li>\n\n\n\n<li>Berisi logika aplikasi (misalnya: mint NFT, simpan data, voting, dll)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83c\udf10 <strong>Frontend App (UI)<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Dibuat dengan HTML, JavaScript, React, dsb<\/li>\n\n\n\n<li>Tempat user berinteraksi<\/li>\n\n\n\n<li>Dihubungkan ke smart contract melalui Web3 library<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udd0c <strong>Web3 Library<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Menghubungkan frontend ke blockchain<\/li>\n\n\n\n<li>Contoh:\n<ul class=\"wp-block-list\">\n<li><code>ethers.js<\/code> \u2192 modern, ringan<\/li>\n\n\n\n<li><code>web3.js<\/code> \u2192 lebih tua, tapi masih banyak dipakai<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Tools yang Akan Kita Gunakan<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Tool<\/th><th>Fungsi<\/th><\/tr><\/thead><tbody><tr><td><strong>MetaMask<\/strong><\/td><td>Wallet untuk mengelola transaksi<\/td><\/tr><tr><td><strong>Remix IDE<\/strong><\/td><td>Menulis &amp; deploy smart contract di browser<\/td><\/tr><tr><td><strong>Hardhat<\/strong><\/td><td>Framework profesional untuk dev smart contract<\/td><\/tr><tr><td><strong>Alchemy \/ Infura<\/strong><\/td><td>API node Ethereum (akses blockchain tanpa node sendiri)<\/td><\/tr><tr><td><strong>Ethers.js<\/strong><\/td><td>Menghubungkan frontend dan smart contract<\/td><\/tr><tr><td><strong>React<\/strong><\/td><td>Framework frontend modern (bisa juga pakai Next.js)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Arsitektur Sederhana Web3 App<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>Frontend (React)\n\u2502\n\u251c\u2500\u2500 ethers.js\n\u2502\n\u2514\u2500\u2500&gt; Smart Contract (Solidity, di blockchain)\n     |\n     \u2514\u2500\u2500 Ethereum (Testnet: Sepolia, Goerli, dll)\n<\/code><\/pre>\n\n\n\n<p>Kamu hanya perlu koneksi wallet + jaringan testnet + kode yang terhubung ke smart contract.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Apa yang Kita Bangun Pertama?<\/h2>\n\n\n\n<p>\u27a1\ufe0f Untuk pemula, kita akan buat <strong>dApp sederhana<\/strong>, misalnya:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Aplikasi voting (pilih opsi A atau B)<\/li>\n\n\n\n<li>Sistem kirim pesan ke blockchain<\/li>\n\n\n\n<li>Atau <strong>mint NFT dari tombol UI<\/strong><\/li>\n<\/ul>\n\n\n\n<p>Tapi <strong>hari ini cukup paham konsep dasarnya dulu<\/strong> ya.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Rangkuman<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Aplikasi Web3 terdiri dari:\n<ul class=\"wp-block-list\">\n<li>Smart contract (backend)<\/li>\n\n\n\n<li>Frontend (UI)<\/li>\n\n\n\n<li>Web3 library (penghubung)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Tools utama:\n<ul class=\"wp-block-list\">\n<li>MetaMask, Hardhat, Remix, ethers.js, React<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Kita akan mulai dari proyek paling sederhana, lalu bertahap ke yang lebih kompleks<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Apa Itu Aplikasi Web3? Secara umum, Web3 App terdiri dari 3 bagian: \ud83e\udde0 Smart Contract \ud83c\udf10 Frontend App (UI) \ud83d\udd0c Web3 Library Tools yang Akan Kita Gunakan Tool Fungsi MetaMask Wallet untuk mengelola transaksi Remix IDE Menulis &amp; deploy smart contract di browser Hardhat Framework profesional untuk dev smart contract Alchemy \/ Infura API node&#8230;<\/p>\n","protected":false},"author":1,"featured_media":24,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-165","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web3-blockchain"],"_links":{"self":[{"href":"https:\/\/learn.rantissi.my.id\/index.php\/wp-json\/wp\/v2\/posts\/165","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learn.rantissi.my.id\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learn.rantissi.my.id\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learn.rantissi.my.id\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/learn.rantissi.my.id\/index.php\/wp-json\/wp\/v2\/comments?post=165"}],"version-history":[{"count":2,"href":"https:\/\/learn.rantissi.my.id\/index.php\/wp-json\/wp\/v2\/posts\/165\/revisions"}],"predecessor-version":[{"id":167,"href":"https:\/\/learn.rantissi.my.id\/index.php\/wp-json\/wp\/v2\/posts\/165\/revisions\/167"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/learn.rantissi.my.id\/index.php\/wp-json\/wp\/v2\/media\/24"}],"wp:attachment":[{"href":"https:\/\/learn.rantissi.my.id\/index.php\/wp-json\/wp\/v2\/media?parent=165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learn.rantissi.my.id\/index.php\/wp-json\/wp\/v2\/categories?post=165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learn.rantissi.my.id\/index.php\/wp-json\/wp\/v2\/tags?post=165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}