Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Интеграция JavaScript
приложений с блокчейн
PROFESSIONAL JS CONFERENCE
8-9 NOVEMBER ‘19 KYIV, UKRAINE
Немного про меня
dmytro.zharkov@gmail.com
http://bit.ly/2FAm3Lr
https://bit.ly/33wIY2h
Люблю свою работу. В разработке ник...
Блокчейн - это больше чем крипто валюта
PROFESSIONAL JS CONFERENCE 8-9
Системы снабжений, цепи поставок.
Цифровая идентификация.
Здравоохранение.
Токенизация, оци...
PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
Крупные игроки уже внедряют блокчейн
Демо приложение. Обзоры супергероев
Демо приложение. Обзоры супергероев
Блокчейн, децентрализованные приложения
SPA
+
Smart contract
=
DApp
(decentralized application)
PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
Смарт контракты (Smart contracts)
Код исполняющийся в децентрали...
PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
DApp сети
Ethereum Tron EOS
PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
JSON RPC
Стандарт обмена данными.
Не зависит от транспортного пр...
PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
JSON RPC ЗАПРОС
fetch("https://superheroes.com/rpc", {
method: "...
Ethereum JSON RPC ЗАПРОС
fetch("https://ropsten.infura.io/v3/084897e338f14cbea8e0d249105bf", {
method: "POST",
body: JSON....
PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
JSON ABI
Application binary interface.
Получается при сборке или...
JSON RPC ЗАПРОС без параметров
fetch("https://ropsten.infura.io/v3/084897e338f14cbea8e0d249105bf", {
method: "POST",
body:...
JSON RPC ЗАПРОС с параметром
Ethereum JSON RPC запрос с параметром. getHero(10)
fetch("https://ropsten.infura.io/v3/084897e338f14cbea8e0d249105b405f", ...
Tron JSON RPC запрос с параметром. getHero(10)
fetch("https://api.shasta.trongrid.io/wallet/triggersmartcontract", {
metho...
8-9
Результат. getHero(10)
0000000000000000000000000000000000000000000000000000000
000000020000000000000000000000000000000...
На первый взгляд все «понятно»…
32 байтные подстроки = 64 символа
0000000000000000000000000000000000000000000000000000000
00000000A – id героя
…
44616e204...
Таблицы ASCII – коды символов между форматами
Декодирование результатов. Строки. getHero(10)
function hexToAscii(hexString) {
let str = ’’;
for (let n = 0; n < hex.leng...
Декодирование результатов. Числа. getHero(10)
function hexadecimalNumberToDecimal(hexNumber) {
return parseInt(hexNumber, ...
Я надеюсь вы все еще со мной!?
PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
JavaScript библиотеки
TronWEBWeb3JS
PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
Что могут блокчейн библиотеки ?
Инкапсулировать логику запросов....
Пример работы с Web3JS. Все просто!
import Web3 from 'web3';
import superheroesABI from './build/contracts/Superheroes.jso...
PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
Магия!
Пример работы с TronWeb. Все просто!
import * as TronWeb from "tronweb";
const tronweb = new TronWeb({
fullNode: "https://...
Постой! А что на счет операций записи?
PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
Операции записи в блокчейн. Транзакции
Требуют:
Учётной записи в...
PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
Блокчейн браузерные расширения
PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
Функции блокчейн браузерныx расширений.
Хранить информацию о уче...
Транзакции с Web3JS и MetaMask
Транзакции с TronWeb и TronLink
contract
PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19
Эфир медленный, очень медленный.
Подпись на события в сети Ethereum.
const socket = new WebSocket( 'wss://ropsten.infura.io/ws/v3/084897e',);
socket.addEve...
Получение событий в сети Ethereum.
socket.addEventListener('message', (event) => {
const data = JSON.parse(event.data);
co...
События с Web3JS. Все просто!
://ropsten.infura.io/v3/084897e
EOS – новый уровень!
EOS JSON ABI
Таблицы EOS
TABLE Review {
uint64_t id;
uint64_t superhero_id;
uint64_t mark;
string review_text;
auto primary_key() const...
Запросы к EOS. Другой уровень!
fetch('http://jungle2.cryptolions.io:80/v1/chain/get_table_rows', {
method: 'POST',
body: J...
Запросы к EOS. Другой уровень!
fetch('https://jungle2.cryptolions.io/v1/chain/get_table_rows', {
method: 'POST',
body: JSO...
EOSJS
import { JsonRpc } from 'eosjs';
const rpc = new JsonRpc(‘https://jungle2.cryptolions.io‘, {fetch});
rpc.get_table_r...
Транзакции EOSJS
import { Api } from 'eosjs';
import {JsSignatureProvider} from 'eosjs/dist/eosjs-jssig';
const rpc = new ...
Транзакции EOSJS
api.transact({
actions: [{
account: 'superheroes',
name: 'addhero',
authorization: [{ actor: 'superheroes...
PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
DApp сети очень похожи
Ethereum Tron EOS
✅ Smart contracts
✅ JSO...
PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
Важные моменты в блокчейн сетях.
Возвращаемые значения
Solidity ...
PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
Важные моменты в блокчейн сетях.
Кодирование/декодирование данны...
PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
Важные моменты в блокчейн сетях.
Большие числа:
Максимальное зна...
PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
Важные моменты в блокчейн сетях.
Подпись транзакций (операций за...
PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
Ресурсы
Обучение:
https://cryptozombies.io/
https://battles.eos....
PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
Спасибо за внимание!
JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain
JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain
JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain
JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain
JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain
Upcoming SlideShare
Loading in …5
×

of

JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 1 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 2 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 3 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 4 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 5 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 6 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 7 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 8 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 9 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 10 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 11 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 12 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 13 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 14 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 15 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 16 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 17 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 18 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 19 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 20 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 21 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 22 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 23 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 24 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 25 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 26 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 27 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 28 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 29 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 30 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 31 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 32 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 33 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 34 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 35 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 36 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 37 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 38 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 39 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 40 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 41 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 42 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 43 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 44 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 45 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 46 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 47 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 48 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 49 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 50 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 51 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 52 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 53 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 54 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 55 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 56 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 57 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 58 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 59 JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain Slide 60
Upcoming SlideShare
What to Upload to SlideShare
Next

0 Likes

Share

JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

JS Fest 2019/Autumn. Дмитрий Жарков. Blockchainize your SPA or Integrate JavaScript frontend applications with a blockchain

  1. 1. Интеграция JavaScript приложений с блокчейн PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
  2. 2. Немного про меня dmytro.zharkov@gmail.com http://bit.ly/2FAm3Lr https://bit.ly/33wIY2h Люблю свою работу. В разработке никогда не скучно. Всегда есть чему научиться и поделиться с другими.
  3. 3. Блокчейн - это больше чем крипто валюта
  4. 4. PROFESSIONAL JS CONFERENCE 8-9 Системы снабжений, цепи поставок. Цифровая идентификация. Здравоохранение. Токенизация, оцифровка активов. Голосование. NOVEMBER ‘19 KYIV, UKRAINE Области применения блокчейн
  5. 5. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE Крупные игроки уже внедряют блокчейн
  6. 6. Демо приложение. Обзоры супергероев
  7. 7. Демо приложение. Обзоры супергероев
  8. 8. Блокчейн, децентрализованные приложения SPA + Smart contract = DApp (decentralized application)
  9. 9. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE Смарт контракты (Smart contracts) Код исполняющийся в децентрализованных сетях. Solidity, C++. Это как backend сервис.
  10. 10. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE DApp сети Ethereum Tron EOS
  11. 11. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE JSON RPC Стандарт обмена данными. Не зависит от транспортного протокола. Только один метод для HTTP/S – POST. Данные в JSON формате.
  12. 12. 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 } }));
  13. 13. 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 }) });
  14. 14. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE JSON ABI Application binary interface. Получается при сборке или деплойменте контракта. Спецификация смарт контракта в формате JSON. Содержит описание контракта, методов, аргументов полей и т.д.
  15. 15. 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 }) }); подпись метода адрес контракта
  16. 16. JSON RPC ЗАПРОС с параметром
  17. 17. 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 в шестнадцатеричной системе Про кучу нулей мы погорим чуть позже
  18. 18. 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 в шестнадцатеричной системе
  19. 19. 8-9 Результат. getHero(10) 0000000000000000000000000000000000000000000000000000000 0000000200000000000000000000000000000000000000000000000 0000000000000000050000000000000000000000000000000000000 0000000000000000000000000a00000000000000000000000000000 0000000000000000000000000000000000e00000000000000000000 0000000000000000000000000000000000000000001400000000000 0000000000000000000000000000000000000000000000000001800 0000000000000000000000000000000000000000000000000000000 0000000b44616e20416272616d6f760000000000000000000000000 0000000000000000000000000000000000000000000000000000000 0000000000000000000000000000000000000000000000dgfgdhhh…
  20. 20. На первый взгляд все «понятно»…
  21. 21. 32 байтные подстроки = 64 символа 0000000000000000000000000000000000000000000000000000000 00000000A – id героя … 44616e20416272616d6f76000000000000000000000000000000000 000000000 – имя героя … 000000000000000000000000000000000000000000004a617661536 372697074… - категория героя
  22. 22. Таблицы ASCII – коды символов между форматами
  23. 23. Декодирование результатов. Строки. 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
  24. 24. Декодирование результатов. Числа. getHero(10) function hexadecimalNumberToDecimal(hexNumber) { return parseInt(hexNumber, 10); } hexadecimalNumberToDecimal(0xA); // 10
  25. 25. Я надеюсь вы все еще со мной!?
  26. 26. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE JavaScript библиотеки TronWEBWeb3JS
  27. 27. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE Что могут блокчейн библиотеки ? Инкапсулировать логику запросов. Кодировать/декодировать параметры и результаты. Взаимодействовать с крипто кошельками и расширениями. Предоставлять информацию о сети и др.
  28. 28. Пример работы с 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();
  29. 29. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE Магия!
  30. 30. Пример работы с 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();
  31. 31. Постой! А что на счет операций записи?
  32. 32. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE Операции записи в блокчейн. Транзакции Требуют: Учётной записи в сети. Подписи ключом. Дополнительных расширений - плагинов.
  33. 33. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE Блокчейн браузерные расширения
  34. 34. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE Функции блокчейн браузерныx расширений. Хранить информацию о учетных записях и ключах. Глобальные переменные с учетной информацией. Взаимодействовать с JavaScript библиотеками. Подписывать транзакции. Хранить информацию о крипте и других токенах.
  35. 35. Транзакции с Web3JS и MetaMask
  36. 36. Транзакции с TronWeb и TronLink contract
  37. 37. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 Эфир медленный, очень медленный.
  38. 38. Подпись на события в сети 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)); });
  39. 39. Получение событий в сети 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; });
  40. 40. События с Web3JS. Все просто! ://ropsten.infura.io/v3/084897e
  41. 41. EOS – новый уровень!
  42. 42. EOS JSON ABI
  43. 43. Таблицы 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;
  44. 44. Запросы к 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' } ) });
  45. 45. Запросы к 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 }) });
  46. 46. 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 }).
  47. 47. Транзакции 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() });
  48. 48. Транзакции 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 });
  49. 49. 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
  50. 50. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE Важные моменты в блокчейн сетях. Возвращаемые значения Solidity в текущей версии не поддерживает объекты
  51. 51. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE Важные моменты в блокчейн сетях. Кодирование/декодирование данных Из шестнадцатеричного/base64/base32. В десятичный, строковый.
  52. 52. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE Важные моменты в блокчейн сетях. Большие числа: Максимальное значение числа в JavaScript : 253-1. Максимальное значение числа uint256 в EVM : 2256-1. Решаемо с bignumber.js
  53. 53. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE Важные моменты в блокчейн сетях. Подпись транзакций (операций записи). С помощью MetaMask, TronLink, EOSAuthenticator. Скорость выполнения транзакций в Ethereum.
  54. 54. 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
  55. 55. PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE Спасибо за внимание!

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.

Views

Total views

265

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×