Описание процесса разработки сервисов на основе мобильных приложений в компании Quantron Systems

19.08.2016

Введение

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

Глоссарий

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

Мобильное приложение — приложение, разработанное для одной из платформ — iOS, Android или Windows Phone.

Сервер приложений — сервер, предоставляющий API для работы остальных компонентов.

Архитектура

Архитектурно сервис состоит из Node.js-процессов и Mongo-кластера.

архитектура

Выбранная архитектура позволяет производить простое горизонтальное масштабирование. Node.js-процессы могут располагаться как на одном, так и на произвольном количестве серверов (во втором случае добавляется load balancer). Также могут быть добавлены сервисы для кеширования — memcached, Redis и др.

Мы поддерживаем несколько вариантов связи с серверами Заказчика (Customer Services на схеме):

  • Односторонняя синхронизация. Данные забираются с серверов Заказчика по какому-то протоколу или просто через файлы (например, в формате Яндекс-YML). Импортированные данные сохраняются в локальную базу данных и отдаются клиентским приложениям в нужном формате.
  • Двухсторонняя синхронизация. В этом варианте данные «ходят» в обе стороны.
  • Проксирование. Сервер просто предоставляет прозрачный интерфейс к сервисам Заказчика, ничего при этом не кешируя в базе данных.

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

Инструментарий, библиотеки и методы

Сервер приложений и административная часть

MongoDB используется как база данных. Масштабируемость из коробки и отсутствие жесткой схемы позволяет вести быструю разработку. Тем не менее, данные в базе контролируются JSON-схемами на сервере.

Node.js используется как сервер приложений. Основные преимущества работы — скорость, масштабируемость и простота разработки. Гигантское количество библиотек на все случаи жизни.

Nginx — кэширование статики и картинок.

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

Основные принципы работы:

  • Один язык для всего. JavaScript на сервере, в базе данных и при разработке административной части.
  • JSON для передачи параметров, получения результатов и хранения в базе данных.
  • HTTP POST для «вызова» серверных методов.
  • JSON-схемы для описания и валидирования данных. Все что «отдает» сервер через API проверяется схемами. Клиент неожиданно не получит что-то, чего он не ожидает (например, отсутствующее поле, поле не того типа).
  • JSON-схемы позволяют генерировать код для клиентских компонентов.
  • Логирование в разные источники (в локальный файл, в централизованные системы типа SEntry), рассылка логов с ошибками по почте.
  • Быстрый деплой сервера. Обновление кода и перезапуск сервера занимает считанные секунды. Быстрый деплой позволяет как устранить простой серверов при обновлении, так и обеспечить частые выкладывания в процессе разработки.
  • Поддержка версионности API через имена методов (/getProducts, /2/getProducts).
  • Разработка автоматических тестов является обязательной.
  • Автоматический мониторинг сторонними средствами (мы используем как собственный скрипт, который «дергает» один из методов сервера и рассылает SMS, так и Zabbix).

Описание методов и сущностей в виде JSON-схем позволяет генерировать справочную информацию, которая будет актуальной (!) в любой момент ее использования. Описания запрашиваются прямо с сервера. Также можно «дергать» серверные методы. На рисунке пример описания метода:

описание метода

Разработка административной части ведется с использованием React.js и Bootstrap. SPA приложения (“одностраничные” сайты) имеют более удобный UX по сравнению с обычными сайтами, а Bootstrap позволяет разрабатывать под desktop\mobile, при этом оставляя возможность быстрой кастомизации дизайна, в том числе, используя большое количество готовых схем.

создание сайта

iOS/Android/Windows Phone

Основные принципы:

  • Мы считаем, что только «родной» для платформы код может обеспечить нужные производительность и внешний вид. Никакие кроссплатформенные библиотеки (типа Phone Gap, Cordova) мы не используем (если речь не идет об играх).
  • Генерация кода — до 30% времени разработки приложений уходит на написание различных обвязок для серверных методов, работы с локальным хранилищем, кешированием и т. д. Все это можно сгенерировать на основе данных, полученных с сервера. Если есть метод getProducts, который возвращает массив объектов Product, то можно описать все на сервере и сгенерировать код для каждой платформы. Более того, при изменении серверных методов можно быстро перегенерировать «обвязку» и получить ошибку компиляции (добавился или исчез параметр), а не долго искать «что конкретно изменилось».

Для разработки под iOS нами используется собственная библиотека QSHelpers, которая предоставляет:

  • Инструменты для работы с датами, цветами, шрифтами, изображениями, коллекциями (структурами данных), логирование.
  • Image cache со многими стратегиями хранения.
  • Менеджер стилей (позволяет централизованно менять переменные оформления).
  • Полезные UI-заготовки: контейнеры, виджеты (галлерея-листалка, просмотрщик картинок, прелоадер, селектор), кастомные лейауты, ячейки, конвейеры для загрузки в них данных и т. п.
  • Расширения и «обертки» к стандартным классам Cocoa, NSFoundation, CoreData.
  • Инструментарий для поддержки старых версий iOS.

В ближайшее время библиотека будет выложена на GitHub.

Пример использования генератора. Описание метода «создать отзыв» в виде JSON-схемы:

описание метода для приложений

Часть сгенерированного iOS-кода:

ios-код

Часть сгенерированного Android-кода:

android код

Сайт

Для разработки сайта может быть использован любой фреймворк и язык программирования, поскольку задача сайта это просто показать данные, полученные от сервера. Мы используем Node.js/ReactJS, Ruby и до недавнего времени PHP (Drupal) и .NET.

Дизайн

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

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

Процесс разработки дизайна технически делится на 3 этапа:

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

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

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

Тестирование

Основные принципы:

  • Проведение различных видов тестирования — ручное, автоматизированное, функциональное, стресс-тесты и др.
  • Тестирование на широком спектре устройств — разные экранные разрешения, разные версии ОС и т.д.
  • Разработка плана тестирования.
  • Ведение списка ошибок в JIRA.

Последние записи блога

Напишите нам

Хотите разработать приложение? Требуется логотип или сайт?

Мы открыты для сотрудничества! Вы можете отправить нам сообщение прямо сейчас.

+7

Обновить