Zašto je Ethereum ključan u modernom webu?
Bez Ethereumovih pametnih ugovora, dinamički websajtovi ostaju samo statični. Ovdje su prave prilike, a ne samo hype.
Klijenti žele transparentnost; developeri žele kontrolu. Ethereum spaja ta dva svijeta.
Ukratko, decentralizacija znači da podaci ne pripadaju jednoj banci, već cijeloj mreži‑nedvosmisleno.
Here is the deal: integracija nije magija, već serija konkretnih koraka.
Prvi korak – Odabir okvira
React, Vue, Angular – sve funkcionira. Bitno je samo da vaš stack podržava Web3.js ili Ethers.js.
Kod iznad 100 linija? Zbrišite to. Minimalni setup: npm i web3, import‑ajte biblioteku, krenite.
And here is why: svaka dodatna apstrakcija usporava transakcije i povećava trošak.
Instalacija Web3.js
npm install web3
U src folderu, kreirajte file web3Provider.js. To je centralni hub za sve pozive.
Exportajte instancu s providerom: new Web3(window.ethereum) – to je sve što vam treba za Metamask.
Ethers.js alternativa
npm i ethers
Razlika? Ethers.js je laganiji, ima bolju tipizaciju. Ako volite TypeScript, birajte ovaj.
Kod primjera: const provider = new ethers.providers.Web3Provider(window.ethereum);
Kodni fragmenti su kratki, ali djeluju.
Drugi korak – Pametni ugovor
Nemojte izmišljati vlastiti ERC‑20 token ako vam ne treba. Koristite standarde.
OpenZeppelin repo je vaš najbolji prijatelj; sigurnost provjerena, auditirana.
Deploy: truffle migrate ili hardhat run, ovisno o preferencijama.
Ubacite ABI i adresu u front‑end, i sve je spremno za interaction.
Kreiranje funkcije za plaćanje
async function pay(amount) { await ethereum.request({ method: ‘eth_sendTransaction’, params: [{ to: contractAddress, value: ethers.utils.parseEther(amount) }]}); }
Jedna linija, ali čitko: korisnik klikne, transakcija se šalje.
Ne zaboravite error handling; Metamask može odbiti.
Treći korak – UI/UX
Koristite “Connect Wallet” tipku. Bez toga, posjetitelj je zaglavljen.
Stilizirajte tipku kao da je dio vašeg branda – ne kao dodatak.
Loading spinner? Absolutno. Transakcija traje, korisnik mora znati da nešto radi.
Odmah nakon potvrde, osvježite stanje s request‑om na blockchain.
Sigurnosni savjet
Nemojte čuvati privatne ključeve na serveru. To je fatalna greška.
Svaka interakcija treba dolaziti iz preglednika korisnika.
Fallback: read‑only view via Infura ili Alchemy, ali nikad za transakcije.
Četvrti korak – Testiranje i deploy
Ganache lokalno, Rinkeby testnet, i naposljetku mainnet. Ne preskačite fazu testiranja.
Automatizirajte testove s Mocha, Chai – ne puštajte ručni kôd u produkciju.
Deployment script: hardhat run scripts/deploy.js –network mainnet.
Vrijeme je da se vaš projekt pokrene.
By the way, za detalje i primjere koda posjetite ethereumkladjenje.com.