// Web 3.0

Як Розробити Мобільний Додаток WEB3?

Зміст

#1. Що таке WEB3-додаток
#2. Як працює WEB3-додаток
#3. Як розробити WEB3-додаток
#4. Крок 1: запустіть початкову фазу
#5. Крок 2: створіть технічну документацію
#6. Крок 3: створіть прототип WEB3-додатку
#7. Крок 4: затвердіть остаточний UX/UI-дизайн
#8. Крок 5: почніть розробку застосунку
#9. Крок 6: протестуйте готовий продукт
#10. Крок 7: розгорніть WEB3-застосунок
#11. Крок 8: підтримка застосунку
#12. Вартість створення WEB3-рішення

У цій статті ви знайдете інструкцію щодо того, як розробити WEB3-додаток. Ми детально і з прикладами розкажемо, як визначити цілі вашого проекту, створити технічну документацію, визначити функції, розробити UX / UI-дизайн і вибрати відповідний стек технологій. Що таке WEB 3.0 і чим WEB3-додатки відрізняються від звичайних, ми також розповімо, але коротко.

Що таке WEB3-додаток

WEB3 (або Web 3.0) - це узагальнена назва для різних технологій, які суттєво змінять інтернет протягом наступних 10 років. Передбачається, що інтернет версії Web3 буде децентралізованим, використовуватиме технології віртуальної та додаткової реальності, а також буде здатний "розуміти", про що пишуть і говорять люди в мережі. Це означає, що двовимірні сайти з текстами і картинками стануть повністю тривимірними (як в іграх), пошукові системи стануть видавати більш правильні відповіді і влада буде зосереджена не в руках наднаціональних корпорацій, а в руках звичайних користувачів інтернету.

У цьому розумінні WEB3-додатки - це програмне забезпечення, яке використовує одну з технологій WEB3, наприклад, блокчейн (для децентралізації), штучний інтелект і нейронне навчання (семантична мережа), Big Data і VR/AR, а також просторові інтерфейси і розподілені обчислення.

Examples of WEB3 applications that might replace popular modern WEB2 services


WEB3-приложения, способные заменить популярные сегодня WEB2-сервисы. Джерело.

Як працює WEB3-додаток

Архітектура WEB3-додатків (або "DApps") дуже сильно відрізняється від звичних нам WEB2-додатків. Візьмемо, наприклад, Medium - вебсайт, який дає змогу користувачам публікувати свій власний контент і / або взаємодіяти з контентом інших (лайкати, шарити, коментувати). Як веб-додаток 2.0, цей ресурс може здатися простим, але в архітектуру Medium входять багато технологій, які роблять його роботу можливою:
  • По-перше, вам потрібне місце для зберігання даних (пости, дані про користувачів, коментарі, лайки, теги та інше.) Для цього потрібна постійно оновлювана база даних (локальний сервер або хмара).
  • По-друге, внутрішній код (написаний такою мовою, як Python, C#, Node.js, PHP, Java або Node.js) має визначати бізнес-логіку сайту. Наприклад, що відбувається, коли реєструється новий користувач, публікує свої пости, лайкає або коментує чужий пост?
  • По-третє, зовнішній код (написаний на CSS, JQuery, HTML, TypeScript,
  • React або JavaScript) має визначати логіку користувацького інтерфейсу. Наприклад, як сайт виглядає для кінцевого користувача і що відбувається, коли він взаємодіє з кожним елементом на сторінці?
Зібравши все це разом, ви отримаєте гарний приклад того, як працює більшість додатків Web 2.0. У нашому випадку ви отримаєте приклад того, як працює Medium, коли ви пишете і публікуєте пости або коментарі.

An example of WEB2 application architecture


Приклад архітектури додатка Web 2.0. Джерело.


Подібна архітектура додатку є централізованою, оскільки програмний код знаходиться на внутрішньому сервері, а дані - у базі даних. При цьому і код, і дані перебувають у приватній власності творця (або власника) додатку, що створює проблеми з безпекою та конфіденційністю цих даних і правовласником на доходи, отримані з їх допомогою.

Так от, на відміну від додатків Web 2.0, таких як Medium, Facebook, Microsoft Word, Whatsapp, Netflix або Paypal, у додатках Web 3.0 немає централізованого сервера, на якому знаходиться внутрішня логіка, і також немає централізованої бази даних, у якій зберігається стан додатку. Замість цього використовується блокчейн для краудсорсингу свого роду загального сервера, який підтримується одноранговою анонімною мережею вузлів (автономними інтернет-користувачами).

Окрім цього, технологія блокчейну також дає змогу використовувати смарт-контракти для автоматизації внутрішньої бізнес-логіки додатку.

Ось як виглядає така архітектура:

An example of decentralized WEB3 application architecture


Приклад децентралізованої архітектури додатку Web 3.0. Джерело.


Цей приклад показує зміни бекенда у Web3-додатках. А що ж із фронтендом? На цьому етапі він значною мірою залишається незмінним, але в майбутньому і він зміниться - звичні графічні призначені для користувача інтерфейси (Graphical user interface, GUI) поступляться місцем просторовим інтерфейсам, створеним на базі віртуальної та додаткової реальності. Детально про це описано в нашій статті про створення метавсесвітів та пов’язаних з нею рішень.

Як розробити WEB3-додаток

Створювати WEB3-рішення необхідно за допомогою кастомної розробки, оскільки тільки так ви зможете забезпечити належний рівень безпеки та надійності вашого додатку. До того ж займатися цим має досвідчена команда розробників із високим рівнем експертизи в кібербезпеці, така як Merehead. Ми з 2015 року займаємося розробкою проектів у сфері Blockchain, DeFi, NFT, VR/AR. Вивчити портфоліо та дізнатися умови співпраці можна за допомогою sales@merehead.com або за телефоном +1-206-785-16-88.

Крок 1: запустіть початкову фазу

Починати розробку мобільного WEB3-додатку, як і будь-якого іншого IT-стартапу, потрібно з опису ідеї вашого проекту. На цьому етапі ви і команда розробників зустрічаєтеся (онлайн або офлайн) та уточнюєте всі деталі майбутнього WEB3-рішення, починаючи з бізнес-цілей, яких ви хочете досягти, і закінчуючи вимогами до дизайну та функціональності.

У підсумку на цьому етапі ви маєте підготувати ось що:

  • Опис цілей і завдань. Це має бути докладний, лаконічний та конкурентний опис бізнес-цілей і завдань, яких ви збираєтесь досягти за допомогою WEB3-додатку. Що чіткіше вони будуть позначені, тим простіше розробникам зрозуміти, який додаток їм потрібно створити.
  • Детальний опис проекту. Тут також потрібен докладний і лаконічний опис, в даному випадку принципів роботи і функціональності вашого проекту. Слід вказати, як ваші користувачі вирішуватимуть свої завдання за допомогою вашого додатку, що вони для цього мають зробити, а також потрібно вказати, як ви монетизуватимете створене WEB3-рішення.
  • Макети додатку. Це прості начерки дизайну інтерфейсу користувача. Зазвичай їх роблять від руки для того, щоб візуально показати важливі моменти, які потрібно врахувати під час розробки дизайну.
Бажано продумати все це ще до розмови з розробниками. Але якщо ви цього не зробите, наприклад тому, що це ваш перший досвід розроблення мобільного додатку, то нічого страшного не станеться. Хороший розробник допоможе вам з усім визначитися, поставивши навідні запитання і привівши приклади.

Окрім того, на початковому етапі вам також знадобиться пакет документів від команди розробників, позначений у цій таблиці:

documents from the development team

Крок 2: створіть технічну документацію

На другому етапі розробки мобільного застосунку за допомогою WEB3-рішень створюється документ під назвою документація з програмного забезпечення або технічна специфікація. Це керівництво з розробки майбутнього продукту з наданням вимог і бізнес-логіки, яке містить у собі все, починаючи з визначення всіх технологій, які будуть використовуватися, до визначення термінів, бюджету і навіть опису можливих ризиків і ваших сумнівів.

Технічну документацію може створити замовник, але зазвичай її складанням займається безпосередньо розробник майбутнього проєкту, виходячи з опису проєкту, який йому надав замовник. Для цього розробнику потрібно:

  • Визначити кількість користувачів майбутнього мобільного
  • WEB3-додатку та їхніх ролей (покупець, продавець, адміністратор).
  • Запропонувати способи реалізації майбутнього проєкту.
  • Запропонувати структуру користувацьких потоків.
  • Запропонувати структуру інтерфейсу додатку.
  • Визначити основні функції додатку.
  • Визначити архітектуру додатку.
Після складання технічної документації команда розробників узгоджує її із замовником та оцінює обсяг і вартість проєкту. Коли все це погоджено, розробник проводить функціональну декомпозицію: розбиває користувальницькі потоки на екрани та функції, визначає їхні пріоритети та створює план проєкту розробки. Цей план розділяє функції на основні, які потрібно реалізувати в MVP, і на другорядні, які можна буде реалізувати після створення MVP або вже після релізу і розгортання мобільного застосунку.

WEB3 solution architecture structure example

Приклад архітектури структури структури Web3-рішення. Джерело.

Крок 3: створіть прототип WEB3-додатку

Створення прототипу WEB3-рішення - один із найважливіших кроків розробки майбутнього застосунку, оскільки від дизайну інтерфейсу багато в чому залежить успіх усього проєкту. Якщо він з перших секунд не сподобається вашим користувачам або вони вважатимуть його занадто складним/незрозумілим, то вони видалять застосунок і більше ніколи не використовуватимуть ваш продукт. Ще й поганий відгук залишать.

Щоб цього не сталося, ваша команда розробників має вивчити конкурентів і цільову аудиторію, щоб визначити смаки та потреби користувачів і реалізувати їх згідно з технічною документацією проєкту та трендами в дизайні. При цьому зазвичай все це відбувається в три етапи:

  1. Створення ескізу - самого чорнового варіанту дизайну інтерфейсу застосунку на папері, в якому задаються важливі аспекти майбутнього проєкту - логіка, кількість екранів і те, як вони взаємодіють один з одним;
  2. Створення вайрфреймів - ескізів високої точності, в яких видно, який вигляд матиме дизайн для кінцевих користувачів. Вайрфрейми допомагають забезпечити візуалізацію дизайну застосунку, що потрібно для того, щоб замовник і розробники побачили, який вигляд матиме все в підсумку.
  3. Створення клікабельного прототипу - анімованої версії дизайну інтерфейсу, де працюють усі іконки, кнопки і переходи, але не працюють функції. Такий прототип допомагає оптимізувати призначені для користувача потоки, виявити логічні розриви і технічні нестиковки у вихідній ідеї.

Крок 4: затвердіть остаточний UX/UI-дизайн

Використовуючи прототип застосунку, створений на попередньому етапі, UX/UI-дизайнери створять дизайн кожного екрана майбутнього застосунку, узгоджуючи всі свої розробки із замовником (і, якщо є, фокус-групою цільової аудиторії). У результаті цієї роботи у вас на руках мають бути такі речі:
  • Макет навігації додатка.
  • Дизайн іконок і кнопок застосунку.
  • Текстові поля та їхній зміст.
  • Інші візуальні елементи.
Залежно від складності вашого проєкту етап створення дизайну мобільного застосунку може зайняти від одного тижня до трьох місяців. У разі розробки WEB3-відеоігор або віртуальних просторів для метавсесвітів створення дизайну може затягнутися на рік або навіть довше.

Після закінчення розробки дизайну ви отримаєте:

  • UX-каркас вашого WEB3-рішення
  • Окремий дизайн додатків для iOS і Android
  • Прототип дизайну інтерактивного застосунку.

Крок 5: почніть розробку застосунку

Цей етап може розвиватися за кількома сценаріями. По-перше, ви можете почати з підтвердження концепції: створення найбазовішої версії застосунку (MVP), яка просто має підтвердити, що ваша ідея працює і на неї є попит серед цільової аудиторії. Такий варіант підходить для клієнтів, які хочуть за мінімальні терміни і гроші перевірити перспективність своєї ідеї..

По-друге, ви можете одразу розпочати розробку повноцінного WEB3-додатку, в якому реалізовано всі функції, інтеграції та дизайнерські рішення. Таким шляхом ідуть, якщо продукт буде запущено на висококонкурентному ринку, де є аналоги вашого продукту. Оскільки в цьому разі вам необхідно створити продукт, який за якістю і глибиною опрацювання дорівнює або кращий за конкурентів - тільки так ви зможете переманити до себе їхніх користувачів

Однак, яким би шляхом ви не пішли, на цьому етапі розробникам вашого мобільного WEB3-додатку потрібно реалізувати:

Front-end. Це вся та частина вашого WEB3-рішення, з якою безпосередньо взаємодіятиме кінцевий користувач застосунку. Наприклад, для розробки фронтенду криптовалютного гаманця зазвичай використовують такі технології та інструменти розробки (стек технологій):

  • Мови програмування для веб: Angular.JS, React.JS і Vue.JS.
  • Мови програмування для App: Java, Kotlin для Android і Swift для iOS.
  • Архітектура: MVVM для Android і MVC, MVP, MVVM і VIPER для iOS.
  • IDE: Android Studio і Xcode для
  • SDK: Android SDK та iOS SDK.
Back-end. Це частина рішення, що відповідає за роботу внутрішньої логіки програми. Вона з'єднує інтерфейсну частину програми з рівнем доступу до даних. Для розробки бекенда криптогаманця потрібен такий стек:
  • Смарт-контракти: віртуальна машина Ethereum або BSC.
  • Бази даних SQL: MySQL, PostgreSQL, MariaDB, MS SQL, Oracle.
  • DevOps: GitLab CI, TeamCity, GoCD Jenkins, WS CodeBuild, Terraform.
  • Бази даних NoSQL: MongoDB, Cassandra, DynamoDB.
  • Пошукові системи: Apache Solr, Elasticsearch.
  • Мови програмування: Java, PHP, Python.
  • Фреймворки: Spring, Symphony, Flask.
  • Кеш: Redis, Memcached.

Крок 6: протестуйте готовий продукт

Забезпечення якості - це важливий крок на кожному етапі розробки для безперешкодного запуску продукту, особливо в разі створення застосунків, що оперують грошима та діловими даними користувачів. Для перевірки різних вразливих місць тестувальники та QA-фахівці застосовують як ручне, так і автоматизоване тестування. Зазвичай це такі тести:
  • тестування сумісності - запуск створеного мобільного застосунку на популярних операційних системах і різних пристроях;
  • тестування сумісності пристроїв - перевірка того, як створений мобільний застосунок працює і має вигляд на екранах різних розмірів;
  • тестування низькорівневих ресурсів - перевірка роботи застосунку при повільному інтернет-з'єднанні, низькому заряді батареї тощо;
  • тестування безпеки - пошук вразливостей, які можуть використовуватися для злому застосунку або створення проблем з його роботою.
  • тестування інтерфейсу - перевірка роботи навігації, меню і кнопок;
  • бета-тестування - попереднє фокус-групове вивчення застосунку та отримання зворотного зв'язку.

Крок 7: розгорніть WEB3-застосунок

Коли розробку мобільного WEB3-застосунку завершено, настав час розгорнути його в хмарі та опублікувати в Apple App Store і Google Play. Але перед цим потрібно переконатися, що ваш мобільний застосунок відповідає вимогам цих майданчиків застосунків і підготувати інформацію про нього.

Ось як відбувається публікація в цих сторах:

publishing process for these stores

Крок 8: підтримка застосунку

Підтримка після запуску не обов'язкова. Але вона суворо рекомендується, якщо ви маєте намір покращувати і розвивати свій проект. Налагодити роботу підтримки можна як за допомогою внутрішньої команди, так і домовившись про це з розробником вашого застосунку. Щоправда, останній варіант не завжди можливий, оскільки розробники можуть бути перейти на роботу в наступних проектах. Тому про підтримку потрібно домовлятися заздалегідь, і тоді розробники або перейдуть на довгострокову роботу з вашим проектом, або заздалегідь навчать спеціальну команду.

Вартість створення WEB3-рішення

Вартість реалізації WEB3-рішень, як і інших IT-проектів, залежить від їхньої складності та масштабу. Тому не можна заздалегідь сказати, яким має бути бюджет розробки конкретно вашого мобільного застосунку. Тут ми лише представимо орієнтовну вартість розробки криптовалютного гаманця для США, Західної та Східної Європи.

The budget for a WEB3 solution development

Відгуки наших клієнтів

Розробка гнучної екосистеми на основі технології блокчейн

Запитання консультанту

Ім'я *
Email *
Телефон
Повідомлення
 

Виникли питання?

Telegram

З 2015 року ми допомагаємо втілити ідеї клієнтів в якісний продукт.