Зачем создавать приложения на блокчейне?
Блокчейн – способ децентрализованного хранения данных. Технологию можно использовать как замену традиционной базе данных и получить дополнительный функционал, который может быть полезен при построении архитектуры приложения, – прозрачность операций и децентрализованность хранения данных. Проще говоря, данные в публичном блокчейне невозможно изменить и легко проверить любому пользователю интернета.
В этом туториале мы создадим веб-приложение, использующее блокчейн вместо централизованного хранилища данных, с помощью нативного JavaScript и старых-добрых HTML с CSS.
Что будем разрабатывать?
В качестве примера приложения на блокчейне возьмем проект Certificado.
Проект будет решать реальную пользовательскую проблему – подделку сертификатов, которые выдают на образовательных мероприятиях. Документы можно подделать в Adobe Photoshop. Из-за этого сертификаты теряют ценность. Проще нарисовать сертификат в программе и добавить его в портфолио, чем проходить курс на Курсере.
Миссия приложения Certificado – добавить ценности сертификатам, выпускаемым онлайн, и добавить две особенности:
- Прозрачное хранение сертификатов в блокчейне
- Добавлять сертификаты в базу могут только администраторы
Как будем делать приложение?
Это будет классическое web-приложение на HTML и JavaScript, обращающееся к блокчейну для хранения данных о дипломах. Мы выбрали блокчейн Waves с дополнительным инструментом – Waves Keeper. Это браузерное расширение позволит администратору авторизовываться, не раскрывая свой приватный ключ (пароль в мире блокчейна).
Certificado нельзя назвать децентрализованным приложением (dApp), ведь бизнес-логика не зафиксирована в смарт-контракте – его просто нет.
Step-by-Step к звездам
Интерфейс создания сертификатов
Начнем с классической части – создания интерфейса. Сверстаем две странички: index.html для добавления сертификата, и check.html для верификации документа.
Верстка index.html:
https://gist.github.com/vlzhr/37e8b19d69acdf30078421e97f23b9d0
Следующий шаг – реализация механизма добавления диплома. Для этого разберемся с тем, куда должен быть добавлен диплом.
Самое время познакомиться с блокчейном Waves!
Установите браузерное расширение Waves Keeper, чтобы создавать и управлять аккаунтами в блокчейне.
Waves Keeper – подключаемся к миру блокчейна
Нажмите кнопку «Create a new account». Проверьте, что выбрали сеть Testnet в левом нижнем углу. Это позволит получить тестовые токены WAVES для экспериментов с транзакциями!
Такая страничка станет доступна после создания аккаунта. Обратите внимание, что у аккаунта есть четыре поля: адрес и публичный ключ, которые позволяют идентифицировать его в сети, а также приватный ключ и seed-фраза, выступающие в роли пароля. Раскрывать приватный ключ и seed-фразу нельзя! Поэтому символы скрыты звездочками.
В верхней части окна Waves Keeper отображается баланс. Сейчас там достаточно угнетающе горят нули. Давайте пополним баланс аккаунта с помощью Waves Faucet, который позволяет «начеканить» тестовых монет. Кликните на «Transactions» и перейдите в Waves Explorer:
Этот инструмент отображает данные блокчейна в удобной форме. На странице отображена вся информация по нашему аккаунту. Пока тут ничего интересного: ни транзакций, ни баланса. Позже здесь можно будет легко отслеживать изменения. Это может сделать каждый с помощью Waves Explorer!
В левом нижнем углу перейдите на страницу Faucet:
Вбейте адрес своего аккаунта и докажите, что вы не робот. После этого получите 10 тестовых WAVES на счет:
Теперь у нас есть стартовый капитал для экспериментов! Приступим к самому интересному и научим наше приложение общаться с блокчейном. В наш уже созданный аккаунт можно сохранять данные, используя его Data State. Пока он пустой:
С помощью транзакций мы можем менять данные аккаунта. Это несложно, ведь для таких задач у Waves Keeper есть API: https://docs.waves.exchange/en/waves-keeper/waves-keeper-api!
Но перед тем, как переходить к изучению API, разберемся с тем, что такое транзакция, один из ключевых элементов блокчейна.
Транзакция – факт свершения какого-то события. Например, перевод денег – это транзакция. Выпуск новой валюты – транзакция. Выгрузка смарт-контракта – транзакция. И просто запись данных – тоже транзакция! Для каждого из типов событий есть свой тип транзакций.
На картинке выше нас интересует тип 12 – Data Transaction. Наша цель – хранить данные.
Отправка сертификатов в блокчейн
Используем Waves Keeper, чтобы отправить транзакцию.
Пример транзакции в Waves Keeper:
https://gist.github.com/vlzhr/4c2015f1c614b656826a3622d786c084
Создаем обработчик клика по кнопке «Добавить диплом», чтобы в транзакции хранились данные о документе.
Функция sendData:
https://gist.github.com/vlzhr/448a0a26072960a80ef60ce4d4151ac6
Теперь при нажатии на кнопку «send!» пользователь добавляет сертификат в блокчейн:
После ввода пароля от расширения отобразится информация по отправляемой транзакции и предложение подписать ее:
Какую информацию о транзакции мы видим? Прежде всего – тип Data Transaction, который означает, что цель транзакции – отправить данные в блокчейн. Мы видим и сами данные: под ключом «1» пользователь сохраняет имя владельца диплома с этим номером – «Sasha Ivanov». Также видим уникальный идентификатор транзакции и комиссию за отправку транзакции в блокчейн.
Транзакция отправлена! Это значит, как минимум, три вещи:
- Баланс аккаунта уменьшился, так как 0.001 WAVES ушли на оплату комиссии.
2. На странице аккаунта в Waves Explorer в списке транзакций добавилась одна Data Transaction.
3. Во вкладке Data появился сертификат. Теперь в блокчейне зафиксирован факт владения Сашей Ивановым сертификатом номер 1. Никто не сможет скрыть или изменить эту информацию.
Верификация подлинности сертификатов
Мы разработали приложение, которое позволяет владельцу мероприятия выпускать сертификаты. Waves Explorer отображает сертификаты в блокчейне.
Тем не менее удобнее проверять подлинность диплома через отдельную форму, без необходимости разбираться в Waves Explorer. Сделаем для этой формы дополнительную страницу!
верстка check.html:
https://gist.github.com/vlzhr/e7e7c849980f19e49fae84a20b1ddb0c
Простая верстка позволяет сделать простой интерфейс, который поможет любому верифицировать подлинность сертификата и, при желании, убедиться в ней окончательно в Waves Explorer:
Осталось сделать так, чтобы кнопка «check cerificado!» работала. Добавим хандлер checkData():
Функция checkData:
https://gist.github.com/vlzhr/b2b455a4de8e19d44ccff03b90478dfe
Основной момент – отправка GET-запроса к API блокчейна: https://testnodes.wavesnodes.com/addresses/data/3N6EmqqQ1pZderX8sNMrfVuEo85ocPoqs2M.
Обращение к данному методу API позволяет получить набор данных, которые лежат в стейте аккаунта, к тому самому, что мы видели в Explorer во вкладке Data. Набор доступных методов API блокчейна Waves можно изучить на странице. С помощью доступного функционала можно, например, добавлять транзакции, читать данные и получать информацию по токенам.
Добавив получение данных из блокчейна в наше приложение, мы создали форму, доступную любому посетителю сайта: каждый может бесплатно верифицировать подлинность диплома, так как за чтение данных комиссию платить не требуется.
Задача со звездочкой для удобства пользователей
Итак, наше приложение теперь имеет две страницы: добавления и верификации сертификатов! Последний пункт, который стоит реализовать – возможность делиться ссылкой на проверку своего сертификата.
Функционал шеринга сертификата:
https://gist.github.com/vlzhr/8fc5394215b14e5b599c65edf1bf4dfc
Ссылку на проверку сертификата можно отправлять так, чтобы проверяющему не было нужно заполнять форму. Ссылки вида “URL/check.html?2 VladimirZhuravlev” достаточно, чтобы форма автоматически заполнилась данными 2 Vladimir Zhuravlev.
Заключение
За достаточно короткое время мы разработали полноценное веб-приложение Certificado, разобрались в том, что блокчейн – это удобный способ хранения данных, а Waves Keeper и Waves Explorer – инструменты работы с ним, которые нужно интегрировать в свое приложение.
Используя блокчейн вместо обычного централизованного хранилища данных, можно добавить приложению уникальный функционал и повысить его ценность для клиентов. В экосистеме Waves есть множество инструментов, упрощающих процесс разработки. Помимо разобранных нами Keeper и Explorer, существуют Waves Signer, клиентские библиотеки для разных языков программирования и собственный язык смарт-контрактов Ride.
Разрабатывайте приложения на блокчейне Waves, присоединяйтесь к сообществу разработчиков и задавайте интересующие вопросы в чате в Телеграме.
Присоединяйтесь к Waves Community
Читайте Waves News channel
Смотрите Waves Youtube
Подписывайтесь на Waves Twitter, Waves Subreddit