Вступление
Это будет первое учебное пособие в руководстве, которые я начну. Я работаю над парой Steem Projects, и я поделился своими участиями из проекта в качестве учебного пособия. В этом руководстве намеревается быть программа кодирования «Hello World» на Steem BlockChain. В этом руководстве мы создадим простой поток активности, который показывает последнюю активность на блокчане. Чтобы сделать вещи немного интересными, я отформатирую его в стиле матрицы. Вы будете знать, что я имею в виду, когда вы посмотрите на демо. Если вы просто хотите взять Skeak Pipe на то, что мы будем достигать до начала учебника посмотреть на https://nkgokul.github.io/steem-tutorials/stemstream.html
Что вы узнаете?
В этом руководстве вы узнаете
- Как использовать steemjs
- Как использовать функцию Steem.api.streamtransaction, чтобы проверить транзакции из последних блоков.
- Создайте базовый HTML, который отобразит поток пара в матрице, как мода.
Требования
Это хорошо иметь требования. Даже если вы не знаете, что вы все еще можете прочитать учебник и иметь смысл из этого.
- Основы HTML
- Основы 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. Он работает над множеством отличных проектов, и вы должны проверить их, когда у вас есть шанс. Я использовал свои образцы кода в качестве отправной точки в коммунальных проектах, над которыми я работаю.