Как мы делали клуб клиентов Альфа-Банка. Enterprise.

• Суть проекта
  • Официально...
  • … и реально
  • Для пользователя
  • Для разработчика
• Тендер и страхи
• Поехали! Постановка задачи и материалы
• Планирование итераций
• Три дизайна, верстка по БЭМ и чистый кайф
• Gulp, grunt и поток регрессионных ошибок.
• Автоматическое тестирование, continious integration и спокойный сон
• А что Альфа-Банк?
• Enterprise, результаты и перспективы

Слово “enterprise” имеет два перевода на русский язык.

1. фирма, крупное предприятие

2. рискованное дело

Это слово прекрасно описывает нашу работу в проекте “Клуб клиентов Альфа-Банка”.

Суть проекта

Что такое “Клуб клиентов Альфа-Банка”? Почему мы говорим о нем?

Это — уникальный проект. Идеей, технологиями, процессами, результатом.

Делать его было очень интересно и … иногда страшно. Чистый драйв.

Итак...

Официально...

Обратимся к пресс-релизу:

По статистике большинство малых бизнесов закрывается в первый же год, а средний срок жизни тех, кто продержался составляет около 3 лет.

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

Обычно банки не занимаются всеми перечисленными проблемами. Альфа-Банк всегда стремится делать больше других. Это особенно важно при работе с хрупким малым бизнесом.  Поэтому в 2014 году в банке было создано направление нефинансовых сервисов. Миссию направления можно сформулировать так: “Мы хотим, чтобы бизнес чаще появлялся и быстрее рос”. Ядром нефинансовых сервисов и должен был стать сайт Клуб Клиентов Альфа-Банка.

… и реально

Нет, никакого вранья в официальном описании нет.

Зачем это вообще надо? Клуб какой-то…

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

Все достаточно просто. 

Банков в России очень много. Примерно в 10 раз больше чем, например, в Германии. Услуги они оказывают почти одинаковые. Тарифы — очень близкие (если не брать микрокредитование с его 180% годовых).

Если слегка зажмуриться, то никакой разницы между банками нет вообще.

А рынок давно поделен. Крупные компании выбрали банки (а самые крупные — имеют свои) и не будут ничего менять без серьезного повода.

А вот “малый и средний бизнес”, “физики”, новые компании — выбирают. И за них приходится конкурировать.

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

Почти ничего.

И банки начинают предлагать дополнительные, нефинансовые услуги. Скидки, консультации, почти бесплатные тренинги, обмены опытом.

В 2014 году только в ИНТЕРВОЛГУ три раза обращались разные околобанковские структуры. 

Альфа-Банк пошел в этом направлении очень далеко и занимается проектом серьезно.

Итак, что такое Клуб клиентов Альфа-Банка?

Для пользователя

Это сайт, где клиент банка может:

1. получить полезную информацию

2. опубликовать информацию о своей компании для поиска партнеров

3. получить скидку на предложения партнеров клуба.

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

ИНТЕРВОЛГА вошла в клуб клиентов Альфа-Банка. Мы опубликовали спецпредложение и предоставляем скидки.

Для разработчика

Что особенного в проекте? Это сайт, который:

1. работает на сложной базе данных;

2. применяет развитую объектную Domain Driven Development-модель предметной области;

3. поддерживает 6 ролей пользователей и несколько десятков интерфейсов;

Для любопытных — use case diagram

4. Быстро развивается и хорошо покрыт тестами (70% клиентских сценариев и 80% серверного кода).

5. Нарисован по гайдлайнам Студии Лебедева, сформулированным для головного сайта.

Проектов с такими требованиям не так мало. Мы регулярно получаем запросы на личные кабинеты, биржи, сайты с развитым клиентским и модераторским интерфейсами. В студиях такие проекты считают “непроходными”, неинтересными.

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

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

Общие трудозатраты к третьей итерации более 2500 человеко-часов. И каждый месяц еще 400-500. Это в итоге. А в процессе было много интересных задач и нетривиальных решений.

Тендер и страхи

Разработка проекта началась 21 октября 2014 года с того, что Юрий Устинов предложил нам сделать очень много работы для Альфа-Банка за очень маленький срок.

Нужно было за неполных 3 месяца сделать и запустить первую версию Клуба клиентов. Честно говоря, это был вызов.

На старте проекта были проработанные сценарии: 23 user stories и хороший кликабельный прототип интерфейса.

Типичная user story выглядела так:

“Я как посетитель портала могу зарегистрироваться на портале и получить доступ к личному кабинету, зарегистрировать компанию в статусе Клиент. Это нужно для того, чтобы я мог заполнить профиль компании и начать взаимодействовать с другими пользователями (подать заявку на закупку, выбрать категорию в которой я действую как поставщик). При этом все данные, введенные мной, отправляются на модерацию и публикуются только после положительного решения модератора. До положительного решения модератора я не могу голосовать за поставщиков, оставлять отзывы, получать заявки на закупку.”

Но при очень сжатых сроках, в отсутствие детального ТЗ и дизайна — проект вызывал смешанные чувства. Было очень интересно и немного страшновато. Мы не смогли отказаться.

Разумеется, был тендер.

Нас выбрали на основе сравнения нескольких компаний. Честно говоря, всегда интересно: с кем сравнивали, как оценивали и почему выбрали или нет. Мы всегда пытаемся это выяснить. Мы знаем ближайших конкурентов и причину, почему выиграли. Одну очень сильную компанию мы обошли по критерию “умение делать дизайн”, другую по “готовы начать работать пока не подписаны все документы”, третью просто по “скорости реакции”.

Поехали! Постановка задачи и материалы

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

Планирование итераций

Задачей первой итерации было получить работающий прототип, обсудить его с заинтересованными сторонами и построить дальнейшие планы.

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

Что делали:

• Анализ сценариев, выявление сущностей предметной области.
• Построение структуры данных и связей

Зеленым выделены объекты, выбранные на первую итерацию.

• Выделение объектов и проектирование иерархии классов

• Реализация по спринтам.

За 9 месяцев работы структура данных и классов изменились незначительно и архитектура себя оправдала.

Схема взаимодействия в команде

Три дизайна, верстка по БЭМ и чистый кайф

Было три версии дизайна. Сначала мы сделали просто “красный Bootstrap”, собрав сетки из готовых блоков и перекрасив их. Это было очень быстро и — приемлемо по качеству.
Затем родилась переходная версия дизайна, где поучаствовали наш проектировщик и дизайнер.
Финальная версия была спроектирована и нуля и почти полностью основана на гайдлайнах от Студии Лебедева, закончившей к этому моменту разработку основного сайта Альфа-Банка.

Каждую версию мы реализовали “в металле”. То есть была и верстка, и применение к коду.

Как справиться ? На помощь пришла верстка по Яндекс.БЭМ и отличные фронтенд-разработчики.

Gulp, grunt и поток регрессионных ошибок.

Верстку делали в соответствии с Яндекс.БЭМ, для сборки применяли gulp и grunt.

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

И мы с помощью коллег из ИТ-департамента Альфа-Банка внедрили continious integration. Процесс разработки был переведен на Jenkins и систему автоматических тестов.

Проверка

Автоматическое тестирование, continious integration и спокойный сон

После перехода на continious integration мы получили существенный прирост скорости разработки, а руководитель проекта Сергей Горелов стал лучше спать.

Публикация на сервере Альфа-Банка, закрытого семью печатями, выглядит так.

Процесс развертывания

А что Альфа-Банк?

Альфа-Банк доволен.

Enterprise, результаты и перспективы

В начале статьи было сказано слово Enterprise.

Это значит, что веб-проекты для больших компаний и серьезных целей качественно, принципиально отличаются от “просто сайтов” и “просто интернет-магазинов”.

Вот смотрите:

1. Структура данных и бизнес-логика всегда уникальны.

2. Нагрузки превышают обычные.

3. Требования к тестам и отказоустойчивости — высокие.

4. Особенности ИТ-инфраструктуры крупного клиента:
   всегда есть необычные серверные архитектуры, требования к безопасности и процесс публикации.
   У вас никогда не будет “виртуалки под рутом”, где вы будете царь и бог.

5. Постоянные изменения требований, отсутствие ТЗ, прописанного “до запятых” и сжатые сроки — обязывают быть гибкими, работать быстро и качественно.
   
   

И разработчик должен соответствовать. Как это делать?

Мы для себя выделили несколько базовых технологий и методик, которые позволяют нам работать в подобных условиях:

1. 1С-Битрикс как базовая технологическая платформа. Про нее сказано много, добавим лишь, что мы делаем на Битриксе все, что он может, а где он не может — пишем расширения.

2. Средства разработки, весьма обычные в мире разработки ПО, но в мире сайтостроения применяемые далеко не всегда:
   - система контроля версий (у нас прижился Git)
   - репозиторий кода BitBucket
   - автоматические серверные (unit) и клиентские тесты на PHPUnit и Selenium, собранные в систему непрерывной интеграции (в нашем случае Jenkins)
   - стандартизация серверного кода (Bitrix Framework), верстки (Bootstrap), процессов сборки (grunt) и регламентация процесса выгрузки кода на бой

3. Прекрасная, замотивированная, умная и дисциплированная команда, которая все это может и хочет применять.

Мы готовы к Enterprise-проектам. И в смысле “крупный бизнес”, и в смысле “рискованное дело”. Рисковать можно, если есть отличные инструменты и светлые мозги.

В 2015 году компания 1С-Битрикс включила агентство ИНТЕРВОЛГА в список подрядчиков, рекомендованных для крупных проектов.