Code breakers

Как разработать хорошее веб-приложение и избежать ошибок. Объясняет наш преподаватель

Разработка веб-приложений – путь c нюансами, хитростями и ошибками. Выгоднее учиться на опыте тех, кто уже проходил путь разработки. Мы собрали у нашего преподавателя курса веб-разработки Наиля Галиуллина проверенные советы о создании веб-приложений на ноукоде. 

Что такое веб-приложение – и почему это не сайт

Определитесь, что именно нужно.

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

Веб-приложение – интерактивная компьютерная программа. В ней пользователь делает что угодно: выбирает товары и добавляет в корзину, оставляет комментарии, ставит лайки, пишет посты, общается в чатах и так далее. К веб-приложениям, а не к сайтам, относятся Яндекс, OZON или Wildberries, онлайн-банкинги, соцсети и фактически всё, что мы используем.

Если нужно портфолио, рекламная страница, лендинг, визитка – это сайт. Если нужен онлайн-магазин, блог, соцсеть, сервис – это веб-приложение.

Как выбрать программу для разработки веб-приложения.  На примере платформы Bubble


Не начинайте сразу выбирать платформу и проектировать на ней. 

Веб-приложение строится из бэкенда – внутренней части, которую пользователь не видит; фронтэнда – пользовательская часть, внешняя оболочка сайта; базы данных – «мозги» приложения, в которых собрана информация и которые делают так, чтобы приложение жило.     

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

Но здесь совет для начинающих такой. Не надо в первую очередь думать о программе, на которой хотите разрабатывать. Утонете в потоке мыслей «А на чём я могу сделать вот это?», «А какая программа мне одно с другим свяжет?». Запутаетесь, столкнётесь с ограничениями.       

Руководствуйтесь принципом – знаете какую-то программу, делайте на ней. Не знаете никакой – берите ту, что самая простая в освоении. Ноукод почти весь в освоении простой. С нуля и без опыта на нём можно сделать веб-приложение за пару месяцев. Вот здесь изучите список десяти топовых ноукод-платформ и примерно понять, что есть на рынке.



Как создаётся веб-приложение. Главные этапы


Понимайте главные шаги, которые предстоит пройти.

Теория создания веб-приложения универсальна. Разработка веб-приложения делится на четыре стадии
  • стадия идеи, 
  • стадия проектирования, 
  • стадия сборки,
  • стадия жизни после релиза.

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

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

Помните – хорошо проработанная логика приложения сделает его сильным. 

Где взять идею для веб-приложения – и какой она должна быть


Веб-приложение создавайте в мире пользователя.

Главный тезис такой. Идея исходит из решения чьей-либо проблемы. В идеале – собственной проблемы разработчика.

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

Так что на этой стадии задавайте себе вопросы: 
  • Какой части моей жизни не помешает цифровизация? Например, так. «Я вручную веду to-do список или список книг, которые я хочу прочитать – а можно было бы вести его в телефоне, потому что блокнот постоянно теряется». «Я держу в голове прогресс по тренировкам – и мне нужен цифровой помощник для отслеживания результатов, я хочу видеть график прогресса». «Я хочу портативную библиотеку песен и аккордов для обучения игры на гитаре». И тому подобное.  
  • Если я раньше обходился без этого – могу ли и дальше? Подумайте и оцените, насколько цифровизация облегчит жизнь и прокачает какую-то область вашей жизни. 
  • Что мне нравится в приложениях, а что бесит? Приложений на рынке уже очень много – но почему-то вы ими не пользуетесь. Зафиксируйте, чем именно они вам не понравились, чего в них не хватает. 
  • Стал бы я платить за такое приложение? Да или нет? 

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



Как исследовать рынок для запуска айти-проекта


Продолжайте углубляться в «знакомство» со своим приложением. Узнайте своих конкурентов и клиентов.  

Дальше надо выяснять, есть ли похожие веб-приложения и существует ли вообще рынок. Это особенно важно, если речь о запуске стартапа. 

  • Если похожие веб-приложения есть, не переживайте. Это даже хорошо. Это значит, что рынок есть. Дальше надо анализировать, есть ли простор для развития и есть ли потребность именно в том приложении, которые собираетесь делать вы. Посмотрите, сколько пользователей у конкурентов. Есть ли вариации приложений. А дальше – рискуйте и конкурируйте. 
  • Если таких же веб-приложений нет, это может быть хорошей новостью для вас. Ниша не занята, дерзайте. 
  • Если таких приложений нет, это возможно и нехорошо. Может, кто-то уже попробовал запустить похожий продукт и провалился. Есть вероятность, что рынка нет. 

Этого поверхностное знакомство. Такого исследования недостаточно. Надо копнуть ещё. 

  • Изучите Google Trends – запросы подскажут боли и нужды людей.
  • Поделитесь идеей на форуме. Допустим, на форуме платформы, на которой вы планируете разрабатывать. Что скажут опытные ноукодеры?
  • Спросите людей. Найдите (среди друзей и знакомых) персонажей, похожих на потенциальных пользователей веб-приложения. Проведите с ними «глубинное интервью» – интервью, изучающее пользовательские нужды человека.    

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

Как понять, какие функции должны быть в приложении


Первое веб-приложение как спонтанное путешествие – налегке.

Веб-приложение – не швейцарский нож с функциями на любой случай жизни. Ваша цель – сделать версию приложения №1, поэтому надо стараться сделать всё максимально простым: и для себя, и для пользователя. 

Для понимания выделим следующие базовые функции веб-приложения:

  • Главная страница, на которой всё понятно и с которой будет удобная навигация дальше;
  • Минимальное меню;
  • Создание аккаунта и авторизация; 
  • Наличие личного кабинета или страницы с профилем с редактируемыми персональными данными;
  • Возможность восстановить доступ при потере пароля;
  • Некий список, с которым можно взаимодействовать (или каталог, директория) – листать, добавлять, просматривать подробную информацию; 
  • Возможность дать обратную связь.

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

Принятие решения о том, какие функции нужны веб-приложению, исходит главного совета – думать как пользователь. 

Как и зачем делать прототип приложения и прорабатывать логику


Рисуйте, делайте наброски, составляйте схемы, соберите макет или прототип. Всегда занимайтесь проектным планированием.

Здесь мы подошли к вопросу – зачем вообще планировать приложение. В создании веб-приложения роль планировщика играет вайрфрейминг – создание наброска, макета, каркаса приложения. О том, что это такое и почему это важно, написано тут.


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

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

Проектное планирование приложения выстраивает логику в голове и перед глазами – а это позволит ровно воплотить в проект, минимально «спотыкаясь» по пути.  


Ещё планирование дробит проект на части, а это помогает понимать, как функционирует продукт в целом и для чего есть каждая из частей. В будущем, когда начнётся работа над приложением, разработчик сможет пошагово воспроизводить проект. Тут наверняка что-то пойдёт не так – и тогда будет легко модифицировать части, менять местами или отказаться от каких-то из них. И не потеряться по дороге.

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

Проектный план – карта пути к успеху приложения. С ним вы не потеряетесь.

Готовьтесь переделывать


Правки, изменения, даже возможный полный пивот-разворот (смена бизнес-модели) – часть жизненного цикла приложения. 

Невозможно создать идеальную архитектуру приложения, которое не придётся потом переделывать. Ни один способ разработки не даёт идеальный продукт – потому что его эффективность измеряется использованием.

Разрабатывайте хорошее приложение, которое будет решать проблему. Создавайте приложение с помощью программ, которые решают поставленную задачу. Не кидайтесь писать всё сразу и не бойтесь спроектировать лишнее – потом добавите или отрежете.

Не беситесь из-за правок и изменений, будьте готовы к ним. В конце концов, это тоже разработка.  

Выводы – что нужно для успеха приложения


  • Для успеха приложения важно, чтобы оно решало чью-то проблему. Хорошо, если эта идея трогает разработчика.
  • Исследование рынка – важный этап, особенно для стартапа. Но если вы делаете приложение «для себя» всё равно полезно обсудить идею хотя бы с друзьями. Если окажется, что идея какая-то странная и её никто не понимает, возможно что-то не то с логикой.
  • Планируйте. Многократно, объёмно и глубоко. Рисуйте схемы и наброски.
  • Не пихайте в приложение все возможные функции и опции. Выделяйте только самые нужные.
  • Думайте, как пользователь. Старайтесь прорабатывать логику и структуру приложения в мире реального пользователя.
  • Выбор программы для веб-приложения – дело десятое. Критерии: эффективность в выполнении поставленной задачи и доступность освоения (если её не знаете).



Как делать