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

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

Денис Гордиенко, генеральный директор Brigt Mobile

Статья по большей части для тех, кто давно хотел запустить своё приложение, но его пугал большой ценник.

Мы затронем тему о том, как:

  • сэкономить на разработке мобильных приложений;

  • выстроить разработку, сэкономив на неважных для клиента процессах

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

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

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

Пишите мне в личку или по контактам на сайте свои идеи для стартапа, а я помогу оценить их по вот такой схеме. Жду ваши мнения в комментариях.

Этот блок временно не поддерживается
1818
44 комментария

Насколько я понимаю для вебвью нужен по сути сверстанный сайт для мобильных. Он как раз и открывается в вебвью. Скажите, если ошибаюсь.

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

2
Ответить

Анатолий, Вы всё верно понимаете. Это мобильный сайт, который отображается в приложении-обёртке. Кроме того, в нативной части могут быть дополнительные функции, кроме простого отображения. Например, GPS, push, работа с камерой и т.д. В этом случае, данные из натива передаются на сервер с webbiew через JS-методы

Сервер, как и в стандартной модели размещается у хостинг-провайдера, обычно мы рекомендуем VPS с серверным пространством BitrixVM, т.к. для администрирования сервера используем админку от 1С-Битрикс.

Ответить

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

Сразу запуск MVP-версии после появления идеи? А как же аналитика, опросы и др. перед запуском MVP-версии? Уже на этих этапах можно понять, что идея так себе и не стоит вкладываться даже в MVP.

2
Ответить

Сложно давать рекомендации не по какому-то конкретному проекту, а некое общее направление действий. Customer Development я отношу к этапу появления идеи. Большинство наших клиентов действуют как раз наоборот - после появления идеи идут сразу в "тяжёлую" разработку. По идее я и блог завёл, чтобы рассказывать как не потратить кучу бабла е убедившись в адекватном спросе на проект.

Ответить

можно ли на webview написать приложение для курьера которое стабильно в фоновом режиме будет передавать на сервер его GPS-трекинг, при этом чтобы оно работало на iphone,android и windows mobile?

1
Ответить

Да, если сделать нативную функцию фонового GPS-трекинга, который передаёт данные на сервер. Мы как раз недавно такую фишку сделали в нашем готовом решении для запуска маркетплейсов услуг - http://servicepi.ru

По нашим замерам, например, на айфонах батарея ушатывается примерно на 2% от общего объёма потребления всеми приложениями. Это очень круто по сравнению, например, с теми же водительскими приложениями такси.

2
Ответить