Этапы разработки мобильного приложения.

Студия разработки мобильных приложений ИТ Лаб.

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

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

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

В нашей команде приняты следующие этапы разработки мобильного приложения:

1. Аналитика.
2. Проектирование архитектур клиентской и серверной части мобильного приложения.
3. Разработка технического задания мобильного приложения.
4. Проектирование UX интерфейсов мобильного приложения и web части, если проект подразумевает под собой web интерфейсы.
5. Создание UI дизайна для экранов мобильного приложения и web интерфейсов.
6. Прототипирование и создание карты экранов проекта.
7. Разработка клиентской части проекта.
8. Разработка серверной части проекта и API.
9. Интеграция со сторонними сервисами.
10. Тестирование и отладка (фикс багов).
11. Подготовка проекта к публикации и публикация самого проекта.
12. Поддержка, сопровождение и развитие проекта.

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

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

Давайте перейдем к каждому этапу разработки более подробнее.

Этап 1. Аналитика при разработке мобильного приложения.

Каждый наш клиент приходит к нам со своей идей будущего приложения. Кто-то говорит: "нужен аналог такого-то приложения", кто-то "нужен аналог, но не совсем 100%, с доработками и моим видением", а кто-то приходит с идеей мобильного приложения, которого еще нет на рынке в России, мире...

Вне зависимости от того, есть приложение на рынке, с которым к нам пришел клиент или его нет, но с каждым нашим клиентом мы заключаем NDA (договор о не разглашении), в котором наша ответственность выражена в сумме 5 000 000 рублей, а срок действия такого договора составляет 5 лет.

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

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

Что в результате: референсы по функциональности и дизайну, требование к технической части проекта (нагрузки, безопасность, стек разработки).

Кто участвует: PM (project menager), Аналитик.

Срок реализации этапа: средний срок реализации данного этапа, в нашей компании составляет 40 часов, что эквивалентно 1 рабочей неделе.

Этап 2. Проектирование архитектур клиентской и серверной мобильного приложения.

Большинство проектов, казалось бы не очень сложных, именно вот так и выглядят "под капотом"

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

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

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

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

В результате проектирования архитектуры "подкапотной" части проекта мы получаем решение где и каким образом будет распределен функциональный объем между клиентской и серверной частями, а также окончательно согласован стек применяемых технологий для back-end (серверная часть) и front-end (в данном контексте клиентская часть - мобильное приложение).

Кто участвует: PM (project menager), Аналитик, back-end разработчик, iOS, Android, DevOps разработчики.

Срок реализации этапа: средние временные затраты реализации данного этапа в нашей компании составляют примерно 40-80 часов, в зависимости от сложности проекта, что эквивалентно 1-2 рабочим неделям.

5 копеек рекламы наших услуг.

Наша студия (ИТ Лаб) занимается разработкой мобильных приложений iOS и Android любой сложности, для бизнеса и стартап проектов.

Разрабатываем приложения нативно (iOS - swift, Android - Kotlin)- 90% и кроссплатформенно (React Native)-10%.

Средний срок разработки составляет 2.2 месяца.

Мы единственные кто на рынке предоставляет не банковскую рассрочку 0% на все услуги оказываемые нашей компанией до 12, а в индивидуальных случаях до 18 месяцев.

Оставьте заявку у нас нас на сайте app-labs.ru и узнайте подробности.

Этап 3. Техническое задание для мобильного приложения. Разработка.

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

Без хорошего ТЗ - результат ХЗ

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

Техническое задание это документ, который указывает разработчикам, что им делать, какие задачи и в какой момент времени реализовывать в проекте.

Мы создаем техническое задание пользовательскими историями (User Story), где описываем каждый шаг, каждое действие и каждую кнопочку, которые должен совершить или увидеть пользователь в конечном продукте. Описываем каждую реакцию системы на действия пользователя, возможные, даже самые не реальные, варианты развития событий и варианты решения при возникновении этих событий.

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

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

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

ЭПН. Экран подтверждения номера телефона через смс код

1. ЭПН-1. Пользователь видит на экране
2. ЭПН-2. Пользователь вводит проверочный код из смс
3. ЭПН-3. Пользователь запрашивает повторно проверочный код
4. ЭПН-4. Пользователь нажимает кнопку “Продолжить”
5. ЭПН-5. Пользователь нажимает навигационную кнопку “Вернуться назад”

ЭПН-1. Пользователь видит на экране

1. При переходе на экран, пользователь видит сообщение, в модальном окне, с текстом: “На указанный Вами номер телефона направлено смс сообщение с проверочным кодом, для подтверждения указанного Вами номера телефона” и кнопка “Ок”, по нажатию на которое окно закрывается.
2. Навигационную кнопку “Вернуться назад”
3. Кнопка отображенная на макете действительна только для ос iOS
4. Название раздела “Регистрация”, выраженное заголовком
5. Пользователь видит фоновое изображение экрана, согласно макета
6. Пользователь видит заголовок “Подтверждение номера”
7. Пользователь видит подзаголовок “Введите 4х значный код из смс”
8. Пользователь видит поле для ввода кода
9. Поле содержит Placeholder графические 4 точки
10. Пользователь видит кнопку ссылку “Запросить проверочный код повторно”
11. Обратный отсчет от 05 минут 00 секунд, до 00 минут 00 сек
12. Обратный отсчет исчисляется с момента перехода пользователя на экран ввода проверочного кода.
13. Пользователь видит таймер обратного отсчета до того, как он может запросить повторный проверочный код.
14. Пользователь видит не активную кнопку “Продолжить”

ЭПН-2. Пользователь вводит проверочный код из смс

1. Пользователь получает смс с проверочным кодом
2. В момент перехода пользователя на экран сценария, приложение направляет запрос на сервер с командой на генерацию проверочного кода для номера телефона.
3. Проверочный код генерируется сервером.
4. Проверочный код направляется на указанный пользователем номер в виде смс сообщения, через смс шлюз стороннего сервиса.
5. Проверочный код состоит из 4 цифр.
6. Пользователь вводит проверочный код:
7. С помощью цифровой клавиатуры, которая появляется после установки на поле ввода проверочного кода. После ввода проверочного кода клавиатура закрывается.
8. Код можно подставить “прочитав” из смс, нажав на него, если ос устройства это позволяет.

ЭПН-3. Пользователь запрашивает повторно проверочный код

1. Пользователь может запросить код повторно.
2. Для повторного запроса проверочного кода, счетчик с обратным отсчетом времени до запроса проверочного кода должен достигнуть 0
3. Общий отсчет времени от 5 минут до 0 секунд, начиная с момента перехода на экран ввода проверочного кода.
4. Запрос повторного смс не возможен раньше того, как счетчик дойдет до 0 сек.
5. при этом если пользователь запрашивает смс повторно ранее отведенного времени он видит системное сообщение, о том, что повторное смс он может запросить через [указывается оставшееся время].
6. Пользователь нажимает кнопку “Запросить проверочный код повторно”
7. Пользователь видит модальное окно с вопросом “Вы уверены, что хотите запросить проверочный код повторно?” и кнопки “Нет” и “Да”
8. Если пользователь нажимает кнопку “Нет”, то модальное окно закрывается и повторный код не направляется.
9. Если пользователь нажимает кнопку “Да”, пользователю направляется в смс повторно сгенерированный проверочный код. После отправки повторного кода пользователь видит модальное окно с фразой “На указанный Вами номер мы повторно направили смс сообщение с проверочным кодом”, кнопка “Ок”, которая закрывает данное окно с сообщением.
10. После повторной отправки проверочного кода счетчик обратного отсчета сбрасывается и отсчет начинается заново с 05 минут 00 сек.
11. Если пользователь 2 раза повторно запросил проверочный код, то при третьем запросе он видит сообщение в модальном окне с текстом: “Мы уже 3 раза Вам направили проверочный код. Вернитесь на экран назад, проверьте введенный Вами номер телефон и если все верно, то попробуйте еще”.

Возможные варианты события:

1. Пользователь вводит не правильно проверочный код 1 раз.
2. Пользователь вводит не правильно проверочный код 2 раз.
3. Пользователь вводит не правильно проверочный код более 3х раз или после 2х повторных отправок новых проверочных кодов.
4. Пользователь суммарно делет уже 7 “повторный запрос”, за одну сессию, проверочного кода.
5. При переходе на экран сценария и отправки запроса на генерацию проверочного кода, отсутствует соединение с сервером = отсутствует интернет у пользователя.
6. При переходе на экран сценария и отправки запроса на генерацию проверочного кода, отсутствует интернет у пользователя.

Решения:

1. Пользователь видит сообщение: “Вернитесь на предыдущий экран и проверьте введенный Вами номер телефона, возможно, что Вы ошиблись или попробуйте еще раз”. Кнопка “Ок”, которая закрывает модальное окно.
2. Пользователь видит сообщение: “Есть два варианта развития событий: 1 - Вы действительно ошиблись при указании своего номера телефона, вернитесь на предыдущий экран и проверьте введенный Вами номер телефона. 2 - мы допускаем, что возможно, у нас пошло что-то не так, и мы сгенерировали для Вас некорректный проверочный код. Нажмите кнопку “Запросить проверочный код повторно и мы направим Вам новое смс с новым проверочным кодом”. Кнопка “Ок”, которая закрывает модальное окно.
3. Пользователь видит сообщение: “Скорее всего Вы действительно не правильно указали свой номер телефона. Вернитесь на предыдущий экран и корректно введите свой номер телефона”. Кнопка “Ок”, которая закрывает модальное окно, а пользователь автоматически перенаправляется на сценарий ЭВНТ. Экран ввода номера телефона (тут должна быть ссылка на переход к сценарию, которая есть в документе, но по понятным причинам убрана из публикации)
4. Пользователь видит сообщение модальное окно, на котором: Иконка рукалицо вместо заголовка и текст: “Разбейте свой телефон об стену, поскольку он Вам реально не нужен! Мы более не отправим Вам ни одного смс сообщения с проверочным кодом, поскольку мы уже изрядно потратились на отправку смс, а если конкретно, то 14 смс сообщений, 14 КАРЛ!!! и как видно, Вы не смогли ввести правильно ни одного из них. Простите, но, видимо Вы пользователь не нашего проекта :-). P.S. Перезапустите приложение и попробуйте еще раз”. Кнопка “Ок”, которая закрывает сообщение. Пользователь остается на экране ввода проверочного кода.
5. Пользователь видит сообщение “Ой, кажется что-то пошло не так :-( Мы уже в курсе проблемы и решаем ее. Повторите регистрацию немного позже, возможно, что уже через 1 минуту все исправится и заработает”. Кнопка “Ок”, которая закрывает окно перенаправляет пользователя на сценарий ЭВНТ. Экран ввода номера телефона
6. Пользователь видит сообщение “Ой, кажется у Вас возникли проблемы с интернетом на Вашем устройстве :-( Попробуйте перезагрузить сеть (перейти в авиарежим на 15 сек и вернуться в нормальный или полностью перезагрузите устройство, обычно это помогает. Если не поможет, то обратитесь к Вашему оператору сотовой связи. После того как у Вас появится сеть Интернет, Вы сможете продолжить регистрацию”. Кнопка “Ок”, которая закрывает окно перенаправляет пользователя на сценарий ЭВНТ. Экран ввода номера телефона

ЭПН-4. Пользователь нажимает кнопку “Продолжить”

1. Кнопка “Продолжить” становиться активной после того как пользователь ввел проверочный код из смс.
2. Пользователь нажимает активную кнопку “Продолжить”
3. Запрос на проверку отправляется на сервер.
4. Если проверочный код из смс введен верно, то пользователь переходит на сценарий ЭУП. Экран установки пароля
5. Если проверочный пароль введен не верно, то пользователь видит сообщение в модальном окне “Проверочный код введен неверно, попробуйте еще раз или запросите проверочный код повторно”. В модальном окне кнопка “Ок”, служит закрытием модального окна и очисткой поля с введенным проверочным кодом ЭПН-2. Пользователь вводит проверочный код из смс

Возможные варианты развития событий:

Возможные варианты развития событий, равно как и их решения описаны в сценарии ЭПН-3. Пользователь запрашивает повторно проверочный код

ЭПН-5. Пользователь нажимает навигационную кнопку “Вернуться назад”

1. Пользователь нажимает на кнопку “Вернуться назад”, согласно ос устройства.
2. Пользователь возвращается на ЭВНТ. Экран ввода номера телефона
3. Введенный код, если поле заполнено не сохраняется.

Особенности ос Android

Навигационная кнопка “Вернуться назад” или “Назад”, отображенная на дизайн макетах отсутствует.

Для навигации “Назад”, используются нативные элементы системы, а именно навигационные кнопки устройства.

5 секунд рекламы:

У нас есть отдельная услуга по написанию технического задания. Узнайте подробности оставив заявку у нас на сайте https://app-labs.ru

При создании технического задания, мы на 80% создаем и тест кейсы для тестировщиков (QA).

Во время разработки и работы над продуктом, в созданное тех.задание добавляется информация от разработчиков, в итоге, по готовности проекта, техническое задание перестает в полноценную документацию проекта.

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

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

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

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

Что в результате: полноценный документ для команды разработчиков. имеющий в себе прототипы в формате sketch основных экранов приложения и web интерфейсов для визуализации процессов. Архитектуру проектов, основные методы запросов. Описанную бизнес логику проекта.

Кто участвует: PM (project menager), Аналитик, Технический писатель.

Срок реализации этапа: средний срок реализации данного этапа, в нашей компании составляет 100-160 часов, что эквивалентно 2,5-4 рабочих недели.

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

Часть 2. Этапы разработки мобильного приложения будет жить здесь (как будет опубликована, сразу поставлю ссылку).

Ну и еще одни 5 копеек рекламы наших услуг :-)

Разработка мобильных приложений iOS и Android любой сложност. Для бизнеса и стартап проектов.

Разрабатываем приложения нативно (iOS - swift, Android - Kotlin)- 90% и кроссплатформенно (React Native)-10%.

Средний срок разработки составляет 2.2 месяца.

Мы единственные кто на рынке предоставляет не банковскую рассрочку 0% на все услуги оказываемые нашей компанией до 12, в индивидуальных случаях до 18 месяцев.

Оставьте заявку у нас нас на сайте app-labs.ru и узнайте подробности.

Задавайте свои вопросы в комментариях или критикуйте, мы всегда открыты к диалогу и конструктивной критике :-)

Понравилась статья? Оцените ее, вам не сложно, а мне приятно и будет стимул писать еще :-)

#itlab #mobiledev #ios #android #разработка мобильных приложений #ит лаб #разработка мобильных приложений под ключ #разработка мобильных приложений ios #разработка мобильных приложений Android #этапы разработки мобильного приложения