// Web 3.0

Как Создать Мобильное Приложение WEB 3.0?

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

Что такое WEB3-приложение?

WEB3 (или Web 3.0) — это обобщенное название для различных технологий, которые должны сильно изменить интернет в следующие 10 лет. Предполагается, что интернет версии Web3 будет децентрализованным, использовать технологии виртуальной и дополнительной реальности и также будет способен «понимать», о чем пишут и говорят люди в сети. Это означает, что двухмерные сайты с текстами и картинками станут полностью трехмерными (как в играх), поисковые системы станут выдавать более правильные ответы и власть будет сосредоточена не в руках наднациональных корпораций, а в руках обычных пользователей интернета.

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

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

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, когда вы пишете и публикуете посты или комментарии.

Пример архитектуры приложения Web 2.0

Пример архитектуры приложения Web 2.0. Источник.

Такого рода архитектура приложения является централизованной, так как программный код находится на внутреннем сервере, а данные в базе данных. При этом и код, и данные находятся в частной собственности создателя (или владельца) приложения, что создает проблемы с безопасностью и конфиденциальностью этих данных и правообладанием на доходы, полученные с их помощью.

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

Кроме этого, технология блокчейна также позволяет использовать смарт-контракты для автоматизации внутренней бизнес-логики приложения.

Вот как выглядит такая архитектура:

Пример децентрализованной архитектуры приложения Web 3.0

Пример децентрализованной архитектуры приложения 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-решение.
  • Макеты приложения. Это простые наброски дизайна пользовательского интерфейса. Обычно их делают от руки для того, чтобы визуально показать важные моменты, которые нужно учесть при разработке дизайна.
Желательно продумать все это еще до разговора с разработчиками. Но если вы этого не сделаете, например потому, что это ваш первый опыт разработки мобильного приложения, то ничего страшного не случится. Хороший разработчик поможет вам со всем определиться, задавая наводящие вопросы и приводя примеры.

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

пакет документов от команды разработчиков

Шаг 2: Создайте техническую документацию

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

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

Для этого разработчику нужно:

  • Определить количество пользователей будущего мобильного WEB3-приложения и их ролей (покупатель, продавец, администратор).
  • Предложить способы реализации будущего проекта.
  • Предложить структуру пользовательских потоков.
  • Предложить структуру интерфейса приложения.
  • Определить основные функции приложения.
  • Определить архитектуру приложения.
После составления технической документации команда разработчиков согласовывает ее с заказчиком и оценивает объем и стоимость проекта. Когда все это согласовано, разработчик проводит функциональную декомпозицию: разбивает пользовательские потоки на экраны и функции, определяет их приоритеты и создает план проекта разработки. Этот план разделяет функции на основные, которые нужно реализовать в MVP, и на второстепенные, которые можно будет реализовать после создания MVP или уже после релиза и развертывания мобильного приложения.

Пример архитектуры структуры Web3-решения

Пример архитектуры структуры 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. Но перед этим нужно убедиться, что ваше мобильное приложение соответствует требованиям этих площадок приложений и подготовить информацию о нем.

Вот как происходит публикация в этих сторах:

происходит публикация в этих сторах

Шаг 8: Поддержка приложения

Поддержка после запуска не обязательна. Но она строго рекомендуется, если вы намерены улучшать и развивать свой проект. Наладить работу поддержки можно как посредством внутренней команды, так и договорившись об этом с разработчиком вашего приложения. Правда, последний вариант не всегда возможен, поскольку разработчики могут быть перейти на работу по следующим проектам. Поэтому о поддержке нужно договариваться заранее, и тогда разработчики либо перейдут на долгосрочную работу с вашим проектом, либо заранее обучат специальную команду.

Стоимость создания WEB3-решения

Стоимость реализации WEB3-решений, как и других IT-проектов, зависит от их сложности и масштаба. Поэтому нельзя заранее сказать, каким должен быть бюджет разработки конкретно вашего мобильного приложения. Здесь мы лишь представим ориентировочную стоимость разработки криптовалютного кошелька для США, Западной и Восточной Европы.

Стоимость создания WEB3-решения

Есть вопросы? Задайте их здесь

Имя *
Email *
Телефон
Ваш бюджет
Сообщение