Kita akan:<\/p>\n\n\n\n
\u2705 Menambahkan Tailwind CSS<\/strong> untuk tampilan modern \ud83d\udcc2 Buka \ud83d\udccc Penambahan:<\/p>\n\n\n\n Jangan lupa ganti nama file deploy.js jika perlu<\/p>\n<\/blockquote>\n\n\n\n \u2192 Salin alamat kontraknya ke frontend<\/p>\n\n\n\n Untuk menyesuaikan ABI (karena data sekarang lebih kompleks), gunakan ABI baru dari Contoh ABI function-nya:<\/p>\n\n\n\n Ganti Edit Kamu bisa mendengar event NewMessage langsung dari blockchain<\/strong>:<\/p>\n\n\n\n \u2705 Tampilan lebih informatif: nama pengirim + waktu <\/p>\n","protected":false},"excerpt":{"rendered":" Kita akan: \u2705 Menambahkan Tailwind CSS untuk tampilan modern\u2705 Menampilkan waktu pengiriman pesan\u2705 Menambahkan alamat pengirim\u2705 Menghubungkan frontend dengan event dari smart contract Update Smart Contract untuk Tambah Data \ud83d\udcc2 Buka MessagePortal.sol, ubah jadi seperti ini: \ud83d\udccc Penambahan: Deploy Ulang Kontrak Jangan lupa ganti nama file deploy.js jika perlu \u2192 Salin alamat kontraknya ke frontend…<\/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-196","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\/196","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=196"}],"version-history":[{"count":1,"href":"https:\/\/learn.rantissi.my.id\/index.php\/wp-json\/wp\/v2\/posts\/196\/revisions"}],"predecessor-version":[{"id":197,"href":"https:\/\/learn.rantissi.my.id\/index.php\/wp-json\/wp\/v2\/posts\/196\/revisions\/197"}],"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=196"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learn.rantissi.my.id\/index.php\/wp-json\/wp\/v2\/categories?post=196"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learn.rantissi.my.id\/index.php\/wp-json\/wp\/v2\/tags?post=196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\u2705 Menampilkan waktu pengiriman pesan<\/strong>
\u2705 Menambahkan alamat pengirim<\/strong>
\u2705 Menghubungkan frontend dengan event dari smart contract<\/strong><\/p>\n\n\n\n
\n\n\n\nUpdate Smart Contract untuk Tambah Data<\/h2>\n\n\n\n
MessagePortal.sol<\/code>, ubah jadi seperti ini:<\/p>\n\n\n\n\/\/ SPDX-License-Identifier: MIT\npragma solidity ^0.8.20;\n\ncontract MessagePortal {\n event NewMessage(address indexed sender, string message, uint256 timestamp);\n\n struct Message {\n address sender;\n string text;\n uint256 timestamp;\n }\n\n Message[] public messages;\n\n function sendMessage(string memory _message) public {\n messages.push(Message(msg.sender, _message, block.timestamp));\n emit NewMessage(msg.sender, _message, block.timestamp);\n }\n\n function getAllMessages() public view returns (Message[] memory) {\n return messages;\n }\n\n function getMessageCount() public view returns (uint) {\n return messages.length;\n }\n}\n<\/code><\/pre>\n\n\n\n\n
Message<\/code><\/li>\n\n\n\nNewMessage<\/code><\/li>\n\n\n\n
\n\n\n\nDeploy Ulang Kontrak<\/h2>\n\n\n\n
\n
npx hardhat compile\nnpx hardhat run scripts\/deploy.js --network sepolia\n<\/code><\/pre>\n\n\n\n
\n\n\n\nUpdate ABI di Frontend<\/h2>\n\n\n\n
artifacts\/contracts\/MessagePortal.sol\/MessagePortal.json<\/code>
\u2192 Salin bagian abi<\/code> dan tempel ke frontend<\/p>\n\n\n\n{\n \"inputs\": [],\n \"name\": \"getAllMessages\",\n \"outputs\": [\n {\n \"components\": [\n { \"internalType\": \"address\", \"name\": \"sender\", \"type\": \"address\" },\n { \"internalType\": \"string\", \"name\": \"text\", \"type\": \"string\" },\n { \"internalType\": \"uint256\", \"name\": \"timestamp\", \"type\": \"uint256\" }\n ],\n \"internalType\": \"struct MessagePortal.Message[]\",\n \"name\": \"\",\n \"type\": \"tuple[]\"\n }\n ],\n \"stateMutability\": \"view\",\n \"type\": \"function\"\n}\n<\/code><\/pre>\n\n\n\n
\n\n\n\nUpdate Tampilan
App.js<\/code><\/h2>\n\n\n\nApp.js<\/code> agar menampilkan data lengkap:<\/p>\n\n\n\n<ul>\n {messages.map((msg, idx) => (\n <li key={idx} style={{ marginBottom: \"10px\" }}>\n <div>\ud83e\uddd1 From: {msg.sender}<\/div>\n <div>\ud83d\udd52 {new Date(msg.timestamp * 1000).toLocaleString()}<\/div>\n <div>\ud83d\udcac {msg.text}<\/div>\n <\/li>\n ))}\n<\/ul>\n<\/code><\/pre>\n\n\n\n
\n\n\n\n(Opsional) Tambahkan Tailwind CSS<\/h2>\n\n\n\n
npm install -D tailwindcss\nnpx tailwindcss init\n<\/code><\/pre>\n\n\n\ntailwind.config.js<\/code> dan index.css<\/code> seperti dokumentasi resmi
\u2192 Gunakan class-class Tailwind di komponen React kamu (misal: className=\"text-lg font-bold\"<\/code>)<\/p>\n\n\n\n
\n\n\n\nBonus: Dengar Event dari Blockchain<\/h2>\n\n\n\n
useEffect(() => {\n const listenToEvents = async () => {\n const provider = new ethers.providers.Web3Provider(window.ethereum);\n const contract = new ethers.Contract(contractAddress, abi, provider);\n\n contract.on(\"NewMessage\", (sender, text, timestamp) => {\n setMessages(prev => [...prev, { sender, text, timestamp: timestamp.toNumber() }]);\n });\n };\n\n listenToEvents();\n}, []);\n<\/code><\/pre>\n\n\n\n
\n\n\n\nRingkasan<\/h2>\n\n\n\n
\u2705 Smart contract emit event<\/code> yang ditangkap di frontend
\u2705 Tampilan lebih cantik bisa dicapai dengan Tailwind
\u2705 dApp kamu kini terasa seperti produk beneran Web3<\/strong> \ud83c\udfaf<\/p>\n\n\n\n