CC BY
51Принципы разработки многофункциональных веб-приложений, используя No-code подход
fO
es о es
о ш m
X
<
m О X X
Радзиевская Анна Александровна
директор по продукту Школы по обучению No-code разработке Code Breakers, radzievskaya.anna@gmail.com
Мы живем в эпоху, где онлайн-присутствие необходимо для любого бизнеса. Классическая IT-Разработка продуктов обходится дорого и занимает много времени. Это доступно только для средних и крупных компаний. Малый бизнес и стартапы тоже нуждаются в разработке, но не могут себе её позволить. Скорость разработки становится неконкурентной на сегодняшнем рынке. Поэтому появились No-code платформы, которые позволяют разрабатывать без участия IT-отдела, быстро и дешево. На сегодняшний день один No-code разработчик может заменить целую команду и самостоятельно создать сайт, веб-приложений "под ключ". В статье рассматривается по шагам принципы разработки, которым необходимо следовать, чтобы разрабатывать веб-приложения без привлечения команды разработчиков, используя No-code платформы. Ключевые слова: веб-приложение, платформа, ИТ-продукты, вайерфрейм, минимально-жизнеспособный продукт (MVP)
На сегодняшний день веб-разработка занимает лидирующую часть рынка, ведь почти каждому бизнесу необходимо разработать, как минимум сайт, а как максимум полнофункциональную платформу (веб-приложение), с множеством ролей, личных кабинетов, возможностью создания заказов, их отслеживанием и т.д.
Разработка таких многофункциональных веб-приложений в классическом виде, привлекая целую команду из фронт и бэк разработчиков, дизайнера, продакт менеджера, тестировщика, проджект менеджера может обойтись бизнесу от 2 млн руб и больше. Такая стоимость доступна далеко не для каждого бизнеса, а тем более для начинающих предпринимателей, которые запускают технологичный продукт.
Такую проблему помогают решить No-code и Low-code платформы, которые имеют в основе своей принцип визуального программирования и по сути позволяют создавать ИТ-продукты без написания кода.
На сегодняшний день No-code имеют широкое развитие и позволяют создавать очень мощные платформы, в особенности для веб-разработки. К примеру, на No-code можно создать продукты имеющие следующие модели бизнеса: маркетплейсы, e-commerce, learning management system, CRM, HR платформы и т.д. Продукты такого типа называются веб-приложениями и имеют более сложную IT-инфраструктуру. Если для статичных сайтов достаточно создать только фронтенд часть, например, используя такие No-code платформы как Wix, Tilda, то для разработки веб-приложений необходимо разрабатывать помимо фронтенда, также бизнес логику и базу данных. Разработка веб-приложений из-за своей сложности стоит гораздо дороже разработки сайтов и требует более глубокого понимания принципов разработки логики IT-продуктов, UX дизайна, принципов работы с данными и т.д. Веб-приложения, хоть они и более сложные в разработке, также можно создавать на No-code платформах, например Bubble, Directual и др. При этом разрабатывать веб-приложения на no-code можно самостоятельно, но необходимо следовать определенным принципам и методологии, иначе качество продукта может быть далеко от изначальных требований и приведет к фатальным для бизнеса ошибкам, которые потребуют дополнительных ресурсов для устранения.
Принципы разработки веб-приложений, используя No-code
Ниже описаны шаги, которым стоит следовать для того, чтобы разработать многофункциональное веб-приложение, используя No-code платформы. Следуя данной методике можно разработать ИТ-продукт самостоятельно, либо привлекая минимальные ресурсы со стороны, например, дизайнера для отрисовки дизайна фронтенда.
Описание идеи и основной задачи веб-приложения
Прежде чем приступать к разработке, необходимо четко сформулировать что и зачем мы будем разрабатывать: что за продукт и какую проблему он решает, какая аудитория у продукта/бизнеса, как будет происходить монетизация, кто будет использовать данный продукт внутри бизнеса, есть ли на рынке уже готовые продукты/площадки/проекты, которые решают данную задачу и их можно использовать вместо кастомной разработки и т.д. Данные вопросы важны, т.к. определяют надобности данного приложения. Может случиться так, что после ответа на данные вопросы необходимость разработки пропадет сама собой.
Составление технического задания к продукту
Данный этап является одним из важных, т.к. насколько четко и конкретно будут сформулированы требования, настолько проще и качественней будет дальнейшая разработка. При составлении технического задания необходимо описать все требования от всех стейкхолдеров к приложению: как будет работать бизнес модель, сколько и какие личные кабинеты и роли пользователей, как должна быть организована работа с приложением у внутренней команды бизнеса, на какие страны нужна локализация, какие платежные системы необходимо подключать, какие другие
необходимые интеграции нужно учесть: видеоконференции, передача данных в другую IT систему, интеграция с существующими сервисами и т.д.
Выделение функционала минимально-жизнеспособного продукта (MVP)
Важно понимать, что любой запуск продукта, в особенности нового и непроверенного, нельзя начинать с разработки полной функциональности, описанной в п.2 при составлении технических требований. Для запуска первой версии необходимо выделить такую функциональность, которая является ключевой и без которой теряется смысл продукта и именно с нее начинать реализацию. Данный подход используется для того, чтобы иметь возможность быть гибким и пересматривать функциональность по мере развития продукта. Ведь запуская новое веб-приложение мы никогда не знаем с какими сложностями столкнемся и насколько видение пользователей нашего продукта совпадает с нашим. Может произойти так, что изначально планируемая бизнес-модель и монетизация могут совсем не сработать и необходимо делать смену бизнес модели, а это ведет, порой, к полной переделке приложения. Поэтому, чтобы не тратить зря ресурсы, лучше всего подходить к разработке итерационно и с выделения минимальной функциональности, которую быстро и дешево можно уже выпустить на рынок.
Полная версия продукта
Инструмент для аккаунтинга
MVP версия
Инструмент привлечения клиентов
Лиды клиентов
Инструмент для аккаунтинга клиентов
| CRM
VroCRM
OS
Фотографы
фотографы
Рекрутер
Рис. 1 - схема продукта до и после выделения минимально-жизнеспособного продукта
Подбор No-code инструментов для реализации первой версии продукта
На данном этапе, понимая какой функционал мы будем реализовывать в первой версии, необходимо подобрать набор платформ, на которых такая разработка будет наиболее простой, быстрой и дешевой. Для разработки можно использовать как 1 платформу, так и несколько.
К примеру, наиболее частый случай при разработке веб приложений, это микс Bubble и Tilda: на Tilda можно быстро и легко разработать главный лендинг продукта, где описаны все функциональные возможности, стоимость, товары, а уже саму платформу с функционалом создания заказа, статусов, админ панели и т.д. разрабатывать на Bubble, который более трудоемок в работе.
Важно учитывать, что чем больше создается связок инструментов, тем система становится менее надежной, ведь выход из работы даже на минуту одной из платформ, может повлиять на весь продукт целиком.
Также при подборе инструментов важно сразу думать про подключение платежных систем, ведь у каждой страны и платформы есть свои особенности и требования к подключению, в каких-то инструментах есть даже готовые интеграции, а в каких-то довольно узкий функционал, который может полностью ограничить подключение монетизации, если изначально данный вопрос не был продуман.
Разработка продуктовой логики веб-приложения
После проработки и четкого понимания что именно планируется разрабатывать, необходимо перейти к составлению внутренней продуктовой логике приложения, а именно: прописать клиентские пути для каждой из ролей, описать роли пользователей и настройки приватности, составить статусную модель для заказов, оплат, пользователей; отрисовать в Figma или другом инструменте для прототипирования вайрфреймы, которые
отображают все окна и переходы пользователей в каждом из личных кабинетов. Также важно учесть наличие админской части в приложении и особенно тщательно проработать настройки приватности ЛК администраторов, чтобы никто из других ролей не смогли получить данные пользовательской базы.
К примеру, на рис. 1 представлена структура веб-приложения для бизнеса по аренде квартир (маркет-плейсная модель). С одной стороны, это арендодатели, а с другой клиенты, которые хотят снять квартиру. Помимо данных 2-х ролей, есть роль - администратора, который менеджерит данный процесс взаимодействия на платформе (это сторона бизнеса).
Личный кабинет клиента Личный кабинет администратора Личный кабинет арендодатель
щ
«а 43
S ■з
X s
X X
Ф ID
CL Q.
«- 1-
и u
5
I
Видимость только для роли Client
Видимость только для роли Admin
Видимость только для роли Host
Веб-приложение
Flow 1 > ■ ---- — ■ .1.1 .1 .
Регистрация нового клиента (только для клиентов)
inup
флоу восстановления пароля
После перехода по ссылке - Задание нового пароля
Рис. 2 - составление вайерфреймов каждой из страниц приложения и простроение связей мужду страницами и элементами
CS
о
CS
О Ш
m
X
<
m О X X
Составление базы данных приложения
После того как понятная логика приложения, пользовательские роли, статусы заказов и т.д. необходимо составить базу данных, в которой все это будет учтено. В No-code разработк используются реляционные базы данных, Для начала лучше выделить все сущности, которые будут использоваться в приложении и атрибуты к ним и уже затем перенести все на No-code платформу.
Важно отметить, что не для всех веб-продуктов нужна база данных. Например, при разработке статичного сайта база данных не нужна и составлять ее не нужно, но если говорить о веб-приложениях, то тут без базы данных не обойтись.
Разработка дизайна приложения
Имея готовые вайрфреймы и логику продукта гораздо проще работать с дизайном. Для данной задачи можно привлечь дизайнера, либо создать его самостоятельно. Многие No-code платформы имеют готовые блоки и элементы, которые можно использовать, а
также существует множество шаблонов, на основе которых можно создать дизайн своего приложения. Такие No-code для веб разработки, как Bubble даже имеют специальный плагины для конвертации дизайна из Figma, что очень ускоряет разработку.
Разработка веб-приложения на No-code платформе: фронтенд, бэкенд
В разработке продуктов на No-code обычно фронт- и бэкенд разработку делают параллельно и по частям продукта: личный кабинет, страница входа, профиль и т.д.
Лучше всего начинать с создания базы данных, а далее уже создавать фронтенд и затем к каждому элементу создавать бизнес логику/функциональность.
Настройка интеграций с различными сервисами
Часто в No-code платформы уже имеют готовые интеграции или плагины, которые позволяют производить интеграции с сервисами по всему миру. Но иногда необходимо сделать кастомные интеграции, которые также
возможны, но не во всех платформах. Например, в Bubble такая возможность реализована через API connector, который позволяет связать сервисы с открытым API. Основные интеграции, которые необходимо учесть для продукта: платежные системы, сервисы рас-сылок, интеграции с crm, slack, сервисы аналитики и др.
Тестирование
Тестирование часто недооцененная часть процесса разработки, но она является одной из ключевых. Ведь если не обнаружить проблему, то, к примеру, можно потратить деньги впустую на маркетинг, ведя пользователей на продукт, в котором они не смогут оплатить заказ. При тестировании важно придерживаться следующей последовательности: составить тестовые сценарии, провести тестирование, устранить замечания, повторить тестирование. Для записей о багах важно вести журнал тестирования.
Запуск приложения в продакшен
После проведения тестирования, необходимо доработать приложение для того, чтобы им могли пользоваться клиенты: наполнить контентов, добавить пользовательские соглашения, контакты компании и т.д.
После запуска важно, в особенности, в первые дни отслеживать и оперативно править ошибки и баки, которые будут замечать ваши пользователи и команда.
Выбор инструментов для No-code разработки
При разработке веб-приложений, используя No-code, важно выбирать платформы, которые наиболее известные и распространенные на рынке и очень аккуратно относиться к выбору малоизвестных, новых платформ. Такая рекомендация связана с тем, что No-code платформы, которые себя уже зарекомендовали на рынке имеют намного большее комьюнити и число пользователей, которые ими владеют, что не возникает сложности с поиском или сменой подрядчика, также такие платформы имеют намного более мощные, безопасные и постоянно улучшаются разработчиками, что очень важно, ведь порой бизнесы даже не переходят с No-code на классическую разработку.
Литература
1. Информационные системы и технологии : учебное пособие / О.Л. Голицына, Н.В. Максимов, И.И. Попов. с 167 - 169
2. Web-дизайн Справочник / Дженнифер Нидерст Роббинс
3. Интерфейс: новые направления в проектировании компьютерных систем / Джеф Раскин, с 74-79
4. Куда расти программисту в IT-компании [Электронный ресурс] // Режим доступа: https://www.scnsoft.by/blog/developer-career-paths
5. No-code: yesterday, today, tomorrow [Электронный ресурс] // Режим доступа: https://habr.com/ru/post/495680/
6. Structuring an Application [Электронный ресурс] // Режим доступа: https://manual.bubble.io/help-guides/structuring-an-application
7. Building a User Interface [Электронный ресурс] // Режим доступа: https://manual.bubble.io/help-guides/building-a-user-interface
8. Building Workflows [Электронный ресурс] // Режим доступа: https://manual.bubble.io/help-guides/building-workflows
9. Working With Data [Электронный ресурс] // Режим доступа: https://manual.bubble.io/help-guides/working-with-data
10. Using Plugins [Электронный ресурс] // Режим доступа: https://manual.bubble.io/help-guides/using-plugins
11. Testing an Application [Электронный ресурс] // Режим доступа: https://manual.bubble.io/help-guides/testing-an-application
Principles for developing rich web applications using the No-code
approach Radzievskaya A.A.
School for No-code training in the development of Code Breakers
JEL classification: C10, C50, C60, C61, C80, C87, C90_
We live in an era where online presence is essential for any business. Traditional IT product development is expensive and time-consuming and is only accessible for medium and large companies. Small businesses and startups also need development, but can't afford it. The speed of development becomes uncompetitive in today's market. That's why No-code platforms appeared, allowing development without IT involvement, quickly and inexpensively. Today, one No-code developer can replace an entire team and independently create a complete website or web application. The article outlines step-by-step development principles that should be followed to develop web applications without involving a development team using No-code platforms. Keywords: web application, platform, IT products, wireframe, minimum viable
product (MVP) References
1. Information systems and technologies: textbook / O.L. Golitsyna, N.V.
Maksimov, I.I. Popov. from 167 - 169
2. Web Design Handbook / Jennifer Niederst Robbins
3. Interface: New Directions in Computer System Design / Jeff Raskin, pp.
74-79
4. Where to grow as a programmer in an IT company [Electronic resource] //
Access mode: https://www.scnsoft.by/blog/developer-career-paths
5. No-code: yesterday, today, tomorrow [Electronic resource] // Access mode:
https://habr.com/ru/post/495680/
6. Structuring an Application [Electronic resource] // Access mode:
https://manual.bubble.io/help-guides/structuring-an-application
7. Building a User Interface [Electronic resource] // Access mode: https://manual.bubble.io/help-guides/building-a-user-interface
8. Building Workflows [Electronic resource] // Access mode: https://manual.bubble.io/help-guides/building-workflows
9. Working With Data [Electronic resource] // Access mode: https://manual.bubble.io/help-guides/working-with-data
10. Using Plugins [Electronic resource] // Access mode: https://manual.bubble.io/help-guides/using-plugins
11. Testing an Application [Electronic resource] // Access mode: https://manual.bubble.io/help-guides/testing-an-application
X X О го А С.
X
го m
о
м о м
CJ
