Blockchain and decentralized applications are getting used more and more often. Many big enterprises like IBM, Walmart, Alibaba, FedX, British Airways, and others are already integrating blockchain into their ecosystems. As most of the applications on the web, decentralized applications require a client to make interaction with them user-friendly. I would like to share how to connect/integrate JavaScript applications with decentralized, blockchain services. Take a look at what are the differences between decentralized and standard backends, what challenges and issues developers might meet.

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
Спасибо за внимание!