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

Рассказываю о новом подходе к разработке MVP для стартапов — как не тратить кучу денег на создании и внедрении дизайна, а быстро собрать интерфейс на Bootstrap. Подход полезен тем, кому нужен простой понятный интерфейс и запуск проекта с космической скоростью.

Как обычно происходит

Итак, рассмотрим для начала тривиальную схему. Стандартная разработка для большинства разработчиков выглядит примерно так:

  • Этап прототипирования.
  • Этап дизайна – (сюда входит отрисовка всех макетов, согласование с клиентом, внедрение правок).
  • Этап верстки / фронтенда
  • Этап сборки – один из основных этапов (включает в себя серверную часть, программирование приложений на базе HTML-вёрстки, создание архитектуры БД и разработка админки).
  • Этап тестирования и исправления багов.

После прохождения всех этих этапов и окончательного согласования мы получаем на выходе готовое мобильное приложение.

Раньше весь этот процесс у нас стоил 35 тыс за один экран, т.е. если у вас приложение на 10 экранов, вышло бы 350 тыс. Это, конечно, не огромная сумма, но для многих клиентов на MVP-версию ценник неподъемный. Отсюда родилась идея о том, что нужно изменить технологии так, чтобы это было выгодно и клиентам, и нам. Мы пришли к тому, что необходимо выбросить все ненужное для быстрого запуска стартапа.

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

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

К чему я пришел

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

То есть на страте есть некая структура, например, на 10 экранов, в которой прописано, что конкретно в каком экране должно быть (регистрация, авторизация, редактирование и т.д.). Получается такое микро-ТЗ. На этапе согласования с клиентом, ещё до получения денег,, мы погружаемся в идею и прописываем какие поля должны быть на каждом из экранов. По идее это не более 1-2 часов для адекватного сейлза.

Этапы

Первый этап - разворачиваем сервер и БД


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


Второй этап - запуск каркасных приложений


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

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

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


Третий этап - натив и интеграции


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

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

То же самое и с интеграциями - подключение к 1С, Битрикс24, amo.crm, соцсетям делается на этом этапе.


Четвертый этап - багфикс и причесон


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

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


Развитие стартапа

После появления идеи, я рекомендую своим клиентам придерживаться следующих этапов развития:

  • Запуск MVP-версии
  • Сбор обратной связи, тестирование идеи на живых пользователях
  • Принятие решение по дальнейшим изменениям


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


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

Оценка проекта за 1 час

За час мы предварительно ознакомимся с Вашим проектом и сможем назвать вилку стоимости и сроков.