Рубрики
Без рубрики

Построить матрицу, как Steem Stream с steemjs

Создайте свое первое приложение Steem Blockchain с помощью JavaScript.

Автор оригинала: Gokul NK.

Вступление

Это будет первое учебное пособие в руководстве, которые я начну. Я работаю над парой Steem Projects, и я поделился своими участиями из проекта в качестве учебного пособия. В этом руководстве намеревается быть программа кодирования «Hello World» на Steem BlockChain. В этом руководстве мы создадим простой поток активности, который показывает последнюю активность на блокчане. Чтобы сделать вещи немного интересными, я отформатирую его в стиле матрицы. Вы будете знать, что я имею в виду, когда вы посмотрите на демо. Если вы просто хотите взять Skeak Pipe на то, что мы будем достигать до начала учебника посмотреть на https://nkgokul.github.io/steem-tutorials/stemstream.html

Что вы узнаете?

В этом руководстве вы узнаете

  1. Как использовать steemjs
  2. Как использовать функцию Steem.api.streamtransaction, чтобы проверить транзакции из последних блоков.
  3. Создайте базовый HTML, который отобразит поток пара в матрице, как мода.

Требования

Это хорошо иметь требования. Даже если вы не знаете, что вы все еще можете прочитать учебник и иметь смысл из этого.

  1. Основы HTML
  2. Основы JavaScript

Затруднение

Базовый. Вы можете взглянуть на код, даже если вы не на фоне разработки. Я буду рад ответить на любые запросы, которые у вас есть в разделе комментариев.

Создайте HTML-скелет


  

This example was created by @gokulnk

Please wait while fetching the data from Steem Blockchian.

В теге тела Создайте Div, который мы будем использовать для заполнения содержимого нашего потока данных из Steem Blockchain.

Добавьте соответствующие файлы JavaScript

В вашем теге головы добавьте следующие скрипты

  
  

Первый скрипт – это министерзированная версия библиотеки STEEMJS, которая поможет нам взаимодействовать с направлением Steem Blockchain от JavaScript/Browser.

Второй скрипт – это файл библиотеки jQuery, который упрощает манипуляции DOM и экономит время в выполнении часто используемых действий в JavaScript. Мы будем использовать эти два файла во всех учебных пособиях на основе браузера.

Понимание функции Steem.api.streamtransactions

На вынос из этого руководства будет использоваться функция STEEM.API.STREAMTANDSACTS

  console.log('hello, is this working')
  var counter = 1;
  const BASEURL = 'https://steemit.com/'
  const ACCOUNT_NAME = 'gokulnk'
  steem.api.setOptions({ url: 'https://api.steemit.com' });
  steem.api.streamTransactions('head', function(err, result) {
    let txType = result.operations[0][0]
    let txData = result.operations[0][1]
    jQuery('#steem-data-wrapper').prepend('
' + counter++ + ' ' + getMessagefromTransaction(txType, txData) + '
'); });

В этом коде мы делаем пару вещей.

Настройка некоторых переменных, таких как счетчик и переменные BaseURL, которые мы будем использовать EersHile. Steem.api.setoptions ({URL: ‘https://api.steemit.com’}); Устанавливает URL конечной точки в https://api.steemit.com. Недавно были некоторые изменения, сделанные в конечные точки, и пару серверов свидетелей не работали. Если вы получаете какие-либо ошибки Google для других конечных точек и обновляете их соответственно. Министерство BlockChain со Steem.api.streamtransactions Функция, Украсьте/Процесс их с использованием функции GetMessageFromtransaction (TxType, TxData) Использование jQuery Prempend Вывод в DIV, который мы создали ранее в HTML с ID «STEEM-DATA-THANY». Мы будем использовать jQuery для подготовления этого значения. Функция обработки Функция обработки использует регистр переключателя для идентификации различных типов транзакций и возвращает соответствующее сообщение о деятельности.

  function getMessagefromTransaction(txType, txData) {
    //console.log(txType, txData) ;
    //console.log(txType, JSON.stringify(txData)) ;
    var custom_json;
    switch (txType) {
      case 'vote':
        return steemAuthorLink(txData.voter) + ' upvoted ' + steemAuthorLink(txData.author) + "'s post " + getLink(txData.title, steemBlogFullurl(txData.author, txData.permlink));
        // statements_1
        break;
      case 'comment':
         if (txData.parent_author == ''){
           return steemAuthorLink(txData.author) + ' created a post ' + getLink(txData.title, steemBlogFullurl(txData.author, txData.permlink));
         }else {
            return steemAuthorLink(txData.author) + ' posted a comment' + ' on '+ getLink(txData.permlink, steemBlogFullurl(txData.author, txData.permlink));
         }
        break;
      case 'transfer':
        return steemAuthorLink(txData.from) + ' transferred ' + txData.amount + ' to '+ steemAuthorLink(txData.to) + ' with the memo "' + txData.memo + '"';
        break;
      case 'claim_reward_balance':
        return steemAuthorLink(txData.account) + ' claimed his remaining rewards balance of ' + txData.reward_steem + ", "+  txData.reward_sbd + " and " + txData.reward_vests;
        console.log(txType, txData) ;
      break;
      case 'custom_json':
          if (txData.id == 'follow') {
            custom_json = JSON.parse(txData.json);
            return steemAuthorLink(custom_json[1].follower) + ' followed ' + steemAuthorLink(custom_json[1].following);
          }
      default:
        return txType + ' ' + JSON.stringify(txData).substring(0,300) + ((txData.length > 300) ? "....." : "");
        break;
    }
  }

Функции помощника

Следующие функции HELPER используются для генерации ссылок на авторы и блоги.

  function steemBlogFullurl(author, permlink) {
      return BASEURL + '@' + author + '/' + permlink;
  }
  function steemBlogFullurl(author, permlink) {
      return BASEURL + '@' + author + '/' + permlink;
  }
  function steemAuthorFullurl(author) {
      return BASEURL + '@' + author;
  }
  function steemAuthorLink(author) {
    return getLink('@' + author, steemAuthorFullurl(author));
  }
  function getLink(linkText, targetLink) {
    if (typeof linkText == "undefined" || linkText == ''){
      linkText = targetLink;
    }else if (typeof targetLink === "undefined") {
      targetLink = linkText;
    }
    return `${linkText}`;
  }

Окончательные заметки.

Вы можете заказать окончательный код и демо, чтобы увидеть, что вы создали с помощью этого урока.

Учебный план

Если вы являетесь разработчиком и хотели бы KickStart вашего обучения вы можете проверить следующую ссылку для настройки среды и инструментов Dev. Как я пишу дальнейшие учебники, я добавлю их в список.

Стемские инструменты развития и детали

Для облегчения я буду обновлять код и демонстрационные ссылки на страницах GitHub

Кредиты

@sambillingham Учебники были действительно полезными для меня, чтобы начать работу с разработкой Steem Blockchain. Он работает над множеством отличных проектов, и вы должны проверить их, когда у вас есть шанс. Я использовал свои образцы кода в качестве отправной точки в коммунальных проектах, над которыми я работаю.