В предишната публикация обсъдихме как да напишем и внедрим интелигентен договор в мрежата Orbs. Тази част ще бъде посветена на писане на приложение от предния край и взаимодействие с договора чрез orbs-client-sdk в JavaScript.
Скеле на приложението
За бързо и лесно стартиране ще използваме React и create-react-app за генериране на ново приложение.
Нашето приложение ще съдържа само 3 компонента:
- Приложение— Компонент от по-висок порядък, който ще съдържа състоянието и бизнес входа на нашето приложение
- Съобщения— Представителен компонент, който ще изобрази списък със съобщения и
- MessageInput— Представителен компонент с
</textarea>
за съставяне на ново съобщение.
Ще ни трябва и orbs-client-sdk
за комуникация с кълба. Това е SDK, който предоставя основна функционалност като създаване на акаунт, запитване и изпращане на транзакции и т.н. За повече документация вижте това repo.
Инсталираме го чрез npm: npm install orbs-client-sdk
.
Създаване на потребител
Всяко приложение за чат изисква потребител да публикува съобщение. Също така се нуждаем от акаунт, за да комуникираме с договора. За целите на нашето приложение ще създадем акаунт за всеки потребител, в случай че такъв все още не съществува.
Orbs-client-sdk има метод за това:
Изпращачът е обект с 3 полета: publicKey
, privateKey
и address
. Тези полета идентифицират уникално нашия потребител. За да избегнем генерирането на нов акаунт всеки път, когато потребителят влезе в приложението, ние ще го съхраняваме в localStorage. Важно! Съхраняването на privateKey в localStorage е САМО за демонстрационни цели. Не правете това в производствена среда
Създаване на екземпляр на SDK
Освен потребителския акаунт, имаме нужда от обект на екземпляр на orbs-client-sdk, за да функционира нашето приложение.
Можем да го създадем, като извикаме функция конструктор:
Конструкторът на клиента получава 3 параметъра:
Ще използваме този екземпляр в бъдеще за запитване към възел и изпращане на транзакция.
Изпращане на съобщение
Сега, когато имаме акаунт, можем да започнем да добавяме съобщения. Първото извличане няма да ни покаже нищо, така че ще трябва да добавим някои:
Компонентът MessageInput изобразява просто TextArea с бутона за изпращане. Получава проп „onSend“, но логиката му е внедрена в приложението. След това потребителят натиска бутона за изпращане или Enter, извиква се обратното извикване, предавайки съобщението като параметър.
По-интересната част е изпращането на съобщение към договора. Нека да разгледаме.
Първо, трябва да създадем транзакция:
Транзакцията е като база данни за писане, поради което също трябва да предадем нашия публичен и частен ключ, за да подпишем транзакцията. Указваме договора чрез неговото име и метода, който искаме да извикаме (sendMessageToChannel в нашия случай). И накрая, предаваме масива от аргументи, които ще бъдат предадени на посочения метод по време на извикване.
Тъй като договорът е имплементиран на език Go и има различни типове от JavaScript, orbs-client-sdk предоставя помощна функция (напр. argString) за нормализиране на типове между различни езици.
С обекта на транзакцията в ръцете си, ние всъщност можем да го изпратим:
const response = await orbsClient.sendTransaction(tx);
В края можем да проверим отговора, като прочетем състоянието на транзакцията и резултата от изпълнението. Ако стойностите са „COMMITTED“ и „SUCCESS“, тогава изходящата транзакция е изпълнена успешно.
Извличане на съобщения
В предишната част успяхме да изпратим съобщението. Сега нека се опитаме да ги покажем на живо. Ще започнем просто с извличане на първата група, да речем, първите 50 съобщения. След това ще подобрим решението, като използваме пагинация и анкета за актуализации на живо.
Извличане на първата партида
Подобно на изпращането на съобщение, започваме със създаване на заявка. Различно е от транзакцията, защото извършваме действие за четене и не изисква консенсус между възлите. Следователно е много по-бързо:
За да създадем заявка, ние извикваме съответния метод на клиента на orbs и предаваме нашия публичен ключ, името на договора и метода, който бихме искали да извикаме на посочения договор. И накрая, предаваме масива от аргументи, много подобно на това, което сме виждали в createTransaction. В нашия случай посочваме името на канала и диапазона от съобщения, да кажем, че искаме да получим първите 5 съобщения.
Когато изпратим заявката, трябва да очакваме масива от съобщения в отговор във формат JSON.
Имаме компонента Messages, чиято цел е да визуализира списъка със съобщения. Веднага след като получим отговор на нашето запитване и актуализираме състоянието на компонента на приложението, съобщенията ще бъдат изобразени на страницата.
Има два недостатъка в настоящата ни реализация — когато потребител изпрати ново съобщение, трябва да обновим страницата, за да го видим; когато имаме повече от 5 съобщения, ние също няма да ги видим. Можем да го решим с пагинация и механизъм за анкетиране.
Пагинация
Странирането, накратко, е механизъм за извличане само на части от данни, вместо извличане на всички наведнъж за по-добра производителност.
Методът „getMessageForChannel“ поддържа from
и to
аргументи, които ни позволяват да посочим частта от съобщения, които искаме. Започваме с първото съобщение и ще извличаме 5 съобщения всеки път.
Веднага щом получим отговор, актуализираме стойността на курсора на съобщението с количеството получени съобщения и добавяме нови съобщения към тези, които сме заредили преди това:
Проучване
Сега нека решим проблема с актуализации на живо. Има 3 възможни решения в предния свят на този проблем: анкетиране, дълго анкетиране и уеб сокети. Ще използваме най-простия от тях - анкетиране.
Това означава, че ще извикаме нашата функция fetchMessages с постоянна скорост, за да направим запитване към договора:
По време на монтирането на нашето приложение първо извикваме fetchMessage, за да получим първата партида и след това извикваме setInterval. Цикълът на събития на JavaScript ще извика нашата функция за извличане при дадената честота на опресняване. По този начин на всеки 2 секунди извличаме нова партида и ако тя съдържа нови съобщения, състоянието ни ще се актуализира и съобщенията се изобразяват.
Внедряване на приложението
Приложението ни е готово. Време е да го внедрите и да го видите на живо в производство. Create-react-app поддържа генерирането на статичен уебсайт и разполагането му в github страници. Следвайте това ръководство, за да го активирате за вашето приложение.
Можете да видите приложението за разговор, работещо на живо тук.
Заключение
В тези две части (Част I) обсъдихме как да изградим просто децентрализирано приложение от край до край с помощта на платформата Orbs. Пълният работен код е достъпен в това хранилище на GitHub. Чувствайте се свободни да разклоните и да го подобрите.
Сергей (@bolshchikov) е страстен софтуерен инженер и мениджър, който обича да решава сложни проблеми. Преди това е работил като инженерен мениджър и разработчик в Wix.com и е съосновател на най-голямата фронт-енд конференция в Близкия изток — „YouGottaLoveFrontend“. Сергей има магистърска степен по индустриално инженерство от Technion.
Включете се с Orbs
- Посетете уебсайта, за да научите повече за обществения блокчейн Orbs
- Orbs е с отворен код! Прегледайте кода в Github и допринесете
- Започнете да разработвате приложения на Orbs, прегледайте документацията
Първоначално публикувано на https://www.orbs.com на 17 юни 2019 г.