Какие задачи решаем с помощью Angular

На примере системы учета Posiflora

Какие задачи решаем с помощью Angular

Коротко

  • 01
    Что за инструмент

    Angular — JavaScript-фреймворк

  • 02
    Где используем

    Система учета и контроля в цветочном бизнесе Posiflora

  • 03
    Почему выбрали Angular

    Работа с API

    Быстрое обновление системы

    Возможность быстрее решать задачи из-за готовых компонентов

    Меньше времени на рутинные задачи

    Структура подходит для больших приложений

  • 04
    Результаты

    За 9 месяцев разработали MVP системы и запустили

    1200 пользователей на июнь 2021

    +20% — увеличилась скорость реализации новых возможностей для работы системы

1200 пользователей ежедневно используют Posiflora

Posiflora — система учета складских остатков и развития продаж. Команда Orbitsoft с нуля разработала это решение и взяла на себя все этапы: от изучения бизнес-задачи до проектирования, дизайна, разработки и запуска.

Система заточена под цветочный бизнес. Ее используют интернет‑магазины с доставкой, цветочные супермаркеты и маленькие цветочные магазины. На июнь 2021 года Posiflora пользуются 1200 клиентов.

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

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

Из чего состоит система

Posiflora — платформа для нескольких приложений, и каждый работает над своей задачей. Среди приложений:

  • web-панель управления для владельцев бизнеса и администраторов магазинов;
  • интернет-магазин;
  • приложение для флористов;
  • приложение для курьеров.

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

Почему выбрали Angular для Posiflora

Есть три известные библиотеки для разработки SPA (single-page application): React, Angular и Vue.js. Мы работаем со всеми инструментами, но для Posiflora остановились на Angular.

Angular — JavaScript-фреймворк с открытым исходным кодом

Работа с API. Backend-часть Posiflora — API, которое реализовано по стандарту JSON: API. Он позволяет сокращать количество запросов к backend, что повышает скорость отклика приложения.

У стандарта нетривиальный формат ответов, который требует усилий со стороны front-end'а для преобразования данных в объекты и дальнейшей работы с ними. Для решения этой проблемы мы разработали библиотеку — orbitsoft/json-api-store.

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

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

Используйте библиотеку для себя

Библиотека Orbitsoft распространяется по лицензии MIT. Поэтому вы можете использовать ее для разработки своих продуктов.

Посмотреть описание библиотеки orbitsoft/json-api-store

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

  • Dependency Injection;
  • система модулей с поддержкой lazy loading;
  • Routing;
  • Typescript;
  • RxJS.

Чтобы получить такие же ресурсы от React и Vue. js, пришлось бы подключать десятки сторонних библиотек. При этом авторы дополнительных инструментов не всегда успевают за развитием основной библиотеки, и приходится откладывать переход на новую версию до полного обновления. А это время, которое не хочется терять.

Библиотека Angular Material поддерживается и развивается силами той же команды, что работает над самим Angular. Это гарантирует отсутствие проблем и задержек с обновлением при выходе новых версий Angular.

Возможность быстрее разработать из-за готовых компонентов. В Angular Material — богатый выбор инструментов, которые сокращают сроки разработки. Кроме того, есть еще и CDK — прекрасная основа для разработки кастомных UI компонентов. Она тоже помогает быстрее реализовать задачи.

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

Angular — не единственный, у кого есть такие же инструменты. Плюс в том, что Angular CLI расширяется за за счет shematics, поэтому его легко доработать под конкретные задачи.

Еще одно преимущество Angular CLI — встроенная утилита для обновления проекта при переходе на новую версию Angular. Она сокращает объем ручных операций и позволяет сэкономить время при обновлении проекта.

Стандарты разработки. У Angular — четкие стандарты и рекомендации по структурированию и архитектуре приложений, которые прекрасно поддерживаются Angular CLI.

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

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

Что смогли решить благодаря Angular

Получили инструмент для управления приложением. Для этой задачи в Angular есть несколько подходов:

  • Сервисы-состояний на базе RxJs;
  • NgRx;
  • Akita.

Для Posiflora выбрали библиотеку NgRx, которая реализует паттерн Redux используя RxJs. Вот несколько причин:

  • она отлично подходит для управления состоянием больших приложений;
  • дает механизмы для изоляции side-эффектов;
  • ускоряет разработку за счет дополнительный shematics для Angular CLI.

Ускорили разработку функций. За время работы над проектом мы разработали собственную библиотеку переиспользуемых UI компонентов. Они позволяют быстрее разрабатывать новые функции в приложениях Posiflora.

Ускорили разработку разделов. У большинства разделов в панели управления Posiflora — схожая структура. Чтобы быстрее их запускать, мы подготовили дополнительные schematics для Angular CLI. Теперь с помощью простых команд разработчик генерит заготовку и приступает к бизнес-логики. При этом он не тратит время на написание boilerplate-кода.

Что еще планируем изменить

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

Когда мы начинали разработку проекта, у механизмов локализации и интернализация, встроенных в Angular, были ограничения. Из-за это для поддержки нескольких языков мы используем библиотеку ngx-translate.

В Angular 10 уже встроены эти механизмы. Поэтому мы думаем о переходе на использование встроенных механизмов и сборке отдельных версий приложений для каждой локали.

Итоги: запустили систему за 9 месяцев

Благодаря Angular и квалификации нашей команды, мы смогли разработать MVP и выпустить систему за 9 месяцев. Сразу после запуска начались продажи. Скорость реализации новых возможностей увеличилась на 20% за счет уже созданных компонентов.

В чем бы вы ни нуждались, мы можем помочь!

Расскажите нам, с какими проблемами вы сталкиваетесь в своем бизнесе. Мы с нетерпением ждем вашего ответа.

Получите ответ по смс

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