Документ представляет собой описание выступления на профессиональной конференции JavaScript, посвященной интеграции JavaScript приложений с блокчейном. Автор обсуждает применение блокчейна в различных областях, таких как здравоохранение и цифровая идентификация, а также демонстрирует примеры работы с библиотеками Web3.js и TronWeb для взаимодействия с децентрализованными приложениями. Рассматриваются также особенности работы с Ethereum, Tron и EOS, включая транзакции и использование смарт-контрактов.

1. Интеграция JavaScript
приложений с блокчейн
PROFESSIONAL JS CONFERENCE
8-9 NOVEMBER ‘19 KYIV, UKRAINE

2. Немного про меня
dmytro.zharkov@gmail.com
http://bit.ly/2FAm3Lr
https://bit.ly/33wIY2h
Люблю свою работу. В разработке никогда
не скучно. Всегда есть чему научиться и
поделиться с другими.

3. Блокчейн - это больше чем крипто валюта

4. PROFESSIONAL JS CONFERENCE 8-9
Системы снабжений, цепи поставок.
Цифровая идентификация.
Здравоохранение.
Токенизация, оцифровка активов.
Голосование.
NOVEMBER ‘19 KYIV, UKRAINE
Области применения блокчейн

5. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
Крупные игроки уже внедряют блокчейн

6. Демо приложение. Обзоры супергероев

7. Демо приложение. Обзоры супергероев

8. Блокчейн, децентрализованные приложения
SPA
+
Smart contract
=
DApp
(decentralized application)

9. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
Смарт контракты (Smart contracts)
Код исполняющийся в децентрализованных сетях.
Solidity, C++.
Это как backend сервис.

10. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
DApp сети
Ethereum Tron EOS

12. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
JSON RPC
Стандарт обмена данными.
Не зависит от транспортного протокола.
Только один метод для HTTP/S – POST.
Данные в JSON формате.

13. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
JSON RPC ЗАПРОС
fetch("https://superheroes.com/rpc", {
method: "POST",
body: JSON.stringify({
method: "getSuperHeroes",
params: ["marvel"], id: 123 }
}));

14. Ethereum JSON RPC ЗАПРОС
fetch("https://ropsten.infura.io/v3/084897e338f14cbea8e0d249105bf", {
method: "POST",
body: JSON.stringify({
params: [{
data: "0x8261cf2b",
to: "0xFB3716816d93168788d306fCEab06636CA44682D"
}, "latest"],
jsonrpc: "2.0",
method: "eth_call", id: 1
})
});

15. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
JSON ABI
Application binary interface.
Получается при сборке или деплойменте контракта.
Спецификация смарт контракта в формате JSON.
Содержит описание контракта, методов, аргументов
полей и т.д.

18. JSON RPC ЗАПРОС без параметров
fetch("https://ropsten.infura.io/v3/084897e338f14cbea8e0d249105bf", {
method: "POST",
body: JSON.stringify({
params: [{
data: "0x8261cf2b",
to: "0xFB3716816d93168788d306fCEab06636CA44682D"
}, "latest"],
jsonrpc: "2.0",
method: "eth_call", id: 1
})
});
подпись метода
адрес контракта

19. JSON RPC ЗАПРОС с параметром

21. Ethereum JSON RPC запрос с параметром. getHero(10)
fetch("https://ropsten.infura.io/v3/084897e338f14cbea8e0d249105b405f", {
method: "POST",
body: JSON.stringify({
params: [{
data: "0x21d801110000000000000000000000000000000……….a",
to: "0xFB3716816d93168788d306fCEab06636CA44682D"},
"latest"
], jsonrpc: "2.0",
method: "eth_call", id: 1
})
});
подпись метода 10 в шестнадцатеричной системе
Про кучу нулей мы погорим чуть позже

22. Tron JSON RPC запрос с параметром. getHero(10)
fetch("https://api.shasta.trongrid.io/wallet/triggersmartcontract", {
method: "POST",
body: JSON.stringify({
contract_address: "415acf1f5da4df144ebdbe04cc1ac2059b8c3bafc1",
owner_address: "415acf1f5da4df144ebdbe04cc1ac2059b8c3bafc1",
function_selector: "getHero(uint256)",
parameter : "00000000000000000000000000000000000000000...a",
})
});
подпись метода
10 в шестнадцатеричной системе

23. 8-9
Результат. getHero(10)
0000000000000000000000000000000000000000000000000000000
0000000200000000000000000000000000000000000000000000000
0000000000000000050000000000000000000000000000000000000
0000000000000000000000000a00000000000000000000000000000
0000000000000000000000000000000000e00000000000000000000
0000000000000000000000000000000000000000001400000000000
0000000000000000000000000000000000000000000000000001800
0000000000000000000000000000000000000000000000000000000
0000000b44616e20416272616d6f760000000000000000000000000
0000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000dgfgdhhh…

24. На первый взгляд все «понятно»…

25. 32 байтные подстроки = 64 символа
0000000000000000000000000000000000000000000000000000000
00000000A – id героя
…
44616e20416272616d6f76000000000000000000000000000000000
000000000 – имя героя
…
000000000000000000000000000000000000000000004a617661536
372697074… - категория героя

26. Таблицы ASCII – коды символов между форматами

27. Декодирование результатов. Строки. getHero(10)
function hexToAscii(hexString) {
let str = ’’;
for (let n = 0; n < hex.length; n += 2) {
str += String.fromCharCode(parseInt(hexString.substr(n, 2), 16));
}
return str;
}
hexToAscii('53757065726d616e'); // Superman

28. Декодирование результатов. Числа. getHero(10)
function hexadecimalNumberToDecimal(hexNumber) {
return parseInt(hexNumber, 10);
}
hexadecimalNumberToDecimal(0xA); // 10

29. Я надеюсь вы все еще со мной!?

30. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
JavaScript библиотеки
TronWEBWeb3JS

31. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
Что могут блокчейн библиотеки ?
Инкапсулировать логику запросов.
Кодировать/декодировать параметры и результаты.
Взаимодействовать с крипто кошельками и расширениями.
Предоставлять информацию о сети и др.

32. Пример работы с Web3JS. Все просто!
import Web3 from 'web3';
import superheroesABI from './build/contracts/Superheroes.json';
const web3 = new Web3();
const myContract = new web3.eth.Contract(
superheroesABI,
https://ropsten.infura.io/v3/084897e338f14cbea8e0d249105b405f’
);
myContract.methods.getSuperHeroes().call();
myContract.methods.getHero(10).call();

33. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
Магия!

34. Пример работы с TronWeb. Все просто!
import * as TronWeb from "tronweb";
const tronweb = new TronWeb({
fullNode: "https://api.shasta.trongrid.io",
solidityNode: 'https://api/somesolidity.io'
});
const contract = await tronweb.contract().at(“412573…..d07dcf0f06f1ac948708”);
contract.getSuperHeroes().call();
contract.getHero(10).call();

35. Постой! А что на счет операций записи?

36. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
Операции записи в блокчейн. Транзакции
Требуют:
Учётной записи в сети.
Подписи ключом.
Дополнительных расширений - плагинов.

37. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
Блокчейн браузерные расширения

38. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
Функции блокчейн браузерныx расширений.
Хранить информацию о учетных записях и ключах.
Глобальные переменные с учетной информацией.
Взаимодействовать с JavaScript библиотеками.
Подписывать транзакции.
Хранить информацию о крипте и других токенах.

39. Транзакции с Web3JS и MetaMask

40. Транзакции с TronWeb и TronLink
contract

42. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19
Эфир медленный, очень медленный.

43. Подпись на события в сети Ethereum.
const socket = new WebSocket( 'wss://ropsten.infura.io/ws/v3/084897e',);
socket.addEventListener('open', (event) => {
const request = { // On hero created event
id: 3,
method: 'eth_subscribe',
params: ['logs', {
topics: [ABI.abi.signature],
address: ABI.networks.address
}]
};
socket.send(JSON.stringify(request));
});

44. Получение событий в сети Ethereum.
socket.addEventListener('message', (event) => {
const data = JSON.parse(event.data);
const web3 = new Web3();
const decoded = web3.eth.abi.decodeLog(
functionABI.inputs,
data.params.result.data,
data.params.result.topics);
const [author, mark, text] = decoded;
});

45. События с Web3JS. Все просто!
://ropsten.infura.io/v3/084897e

46. EOS – новый уровень!

47. EOS JSON ABI

48. Таблицы EOS
TABLE Review {
uint64_t id;
uint64_t superhero_id;
uint64_t mark;
string review_text;
auto primary_key() const { return id; }
uint64_t by_superheroid() const {return superhero_id; }
};
typedef multi_index<"reviews"_n, Review> reviews_table;

49. Запросы к EOS. Другой уровень!
fetch('http://jungle2.cryptolions.io:80/v1/chain/get_table_rows', {
method: 'POST',
body: JSON.stringify({
'json': true,
'code': 'superheroes',
'scope': 'superheroes',
'table': 'heroes'
}
)
});

50. Запросы к EOS. Другой уровень!
fetch('https://jungle2.cryptolions.io/v1/chain/get_table_rows', {
method: 'POST',
body: JSON.stringify({
'json’: true,
'code': 'superheroes',
'scope': 'superheroes',
'table': 'reviews',
'table_key': 'superhero_id',
'key_type': 'i64',
'index_position': 2,
'lower_bound': 1,
'upper_bound': 1
})
});

51. EOSJS
import { JsonRpc } from 'eosjs';
const rpc = new JsonRpc(‘https://jungle2.cryptolions.io‘, {fetch});
rpc.get_table_rows({
'json': true,
'code': 'superheroes',
'scope': 'superheroes',
'table': 'reviews',
'table_key': 'superhero_id',
'key_type': 'i64',
'index_position': 2,
'lower_bound': 1,
'upper_bound': 1
}).

52. Транзакции EOSJS
import { Api } from 'eosjs';
import {JsSignatureProvider} from 'eosjs/dist/eosjs-jssig';
const rpc = new JsonRpc(‘https://jungle2.cryptolions.io‘, {fetch});
const signatureProvider = new JsSignatureProvider([‘somekey’]);
const api = new Api({
rpc,
signatureProvider,
textDecoder: new TextDecoder(),
textEncoder: new TextEncoder()
});

53. Транзакции EOSJS
api.transact({
actions: [{
account: 'superheroes',
name: 'addhero',
authorization: [{ actor: 'superheroes’, permission: 'active'}],
data: {
superhero_name: 'Hulk',
avatar: ‘http://someavatar.com/test.jpg',
category: ‘Marvel',
description: 'Super strong'
},}]},
{
blocksBehind: 3,expireSeconds: 30
});

54. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
DApp сети очень похожи
Ethereum Tron EOS
✅ Smart contracts
✅ JSON ABI
✅ JSON RPC
✅ JS API, Web3JS
✅ Smart contracts
✅ JSON ABI
✅ JSON RPC
✅ JS API, TronWeb
✅ Smart contracts
✅ JSON ABI
✅ JSON RPC
✅ JS API, EOSJS

55. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
Важные моменты в блокчейн сетях.
Возвращаемые значения
Solidity в текущей версии не поддерживает объекты

56. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
Важные моменты в блокчейн сетях.
Кодирование/декодирование данных
Из шестнадцатеричного/base64/base32.
В десятичный, строковый.

57. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
Важные моменты в блокчейн сетях.
Большие числа:
Максимальное значение числа в JavaScript : 253-1.
Максимальное значение числа uint256 в EVM : 2256-1.
Решаемо с bignumber.js

58. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
Важные моменты в блокчейн сетях.
Подпись транзакций (операций записи).
С помощью MetaMask, TronLink, EOSAuthenticator.
Скорость выполнения транзакций в Ethereum.

59. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
Ресурсы
Обучение:
https://cryptozombies.io/
https://battles.eos.io/
Демки:
https://github.com/DmitriyNoa/angular-ethereum-decentralized-application
https://github.com/DmitriyNoa/eos-superheroes

60. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
Спасибо за внимание!