В предишната публикация обсъдихме как да напишем и внедрим интелигентен договор в мрежата 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 г.