React Native ve Web3 ile Transaction Ethereum Dünyası -3
Dizimizin üçüncü yazısında React Native arayüzü üzerinden transaction tetiklemesi yapacağız.
Bundan önceki iki yazımızı okumadıysanız çok da önemli değil. Okumadan geçebilirsiniz :)
DIJITAL KALE: Web3j ve Ganache ile Ethereum Dünyasına Giriş - 1 (buraktunali.blogspot.com)
DIJITAL KALE: Solidity ile Akıllı Kontratlar ve Ethereum Dünyası -2 (buraktunali.blogspot.com)
Malzemelerimizi hemen vereyim ;
* Ganache
* Web3
* Node.js
* React Native
* Genymotion
ve Github : Gmotes/Web3ReactNative (github.com)
Aşağıda gördüğünüz muhteşem tasarıma sahip React Native uygulamamız üzerinden ethereum göndereceğiz. Frontendçi arkadaşlar güldünüz mü :) Tamam :)
Sonuçta amacımız web3 ile çalışmak..
Ganache kurulumuzu yapıp local networkumuzu ayağa kaldıralım. (Şimdi birinci yazıya bakabilirsiniz)
Önce node.js kısmı ile başlayalım.
npx express-generator ile projemizi oluşturalım. Dileyen fastify da kullanabilir.
npm install web3 ile web3 ü de ekleyelim.
Şimdi iki servisimizi index.js e koyalım.
Önce tanımlarımızı yapalım.
var express = require('express');
var router = express.Router();
let Web3 = require('web3')
let web3 = new Web3(new Web3.providers.WebsocketProvider('ws://localhost:7545'))
Sonrada servislerimizi ekleyelim.
//Önyüze göndereceğimiz account bilgilerini çekelim.
router.get('/accounts', function(req, res, next) {
web3.eth.getAccounts().then((accounts)=> {
res.json({ accounts: accounts });
} ); });
// Transaction post ile alalım.
router.post('/transaction', function(req, res, next) {
console.log(req.body.ether);
web3.eth.sendTransaction({
from:req.body.sender,
to: req.body.receiver,
value: web3.utils.toWei(req.body.ether, "ether"),
}, function(err, transactionHash) {
if (err) {
console.log(err);
} else {
console.log(transactionHash);
}
});
});
// Modul export
module.exports = router;
Bu iki servis önyüz için yeterli şimdi Native e geçelim.
Servislerimizi çağıracak iki adet async function u ekliyoruz;
Account.js
import React from 'react';
import axios from 'axios';
export default async function Accounts() {
let res = await axios({
url: 'http://GenymotionIp:3000/accounts',
method: 'get',
timeout: 8000
})
if(res.status == 200){
console.log(res.status)
}
return res.data
}
Transaction.js
import React from 'react';
import axios from 'axios';
export default async function Transactions(sender,receiver,ether) {
let res = await axios({
url: 'http://GenymotionIp:3000/transaction',
method: 'post',
timeout: 8000,
data: {
sender: sender,
receiver: receiver,
ether: ether
}
})
if(res.status == 200){
console.log(res.status)
}
return res.data
}
Genymotion ı download edip simulatorumuzu ayağa kaldırıp bridge ip olarak bağlanabildiğimiz ip yi
yukardaki axios erişimine ip olarak veriyoruz. (ipconfig /all komutu ile ip yi bulabilirsiniz.)
Muhteşem arayüz kodunu buraya atmama gerek yok sanırım. Github dan bakabilirsiniz.
Transaction gerçekleştikten sonra Ganache Gui den gözlemleyin. Kolaylıklar.
Yorumlar
Yorum Gönder