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.

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

16 views

Published on

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.

Published in: Education
  • Be the first to comment

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

×