Кастомізація мобільного застосунку Бітрікс24

Кастомізація мобільного застосунку Бітрікс24

Уявіть: п'ятдесят агентів у полі, кожен відкриває CRM на телефоні — і бачить двадцять вкладок, із яких реально потрібні три. На перемикання йде до тридцяти секунд на дію, а за день набігає година простоїв. Ми вирішуємо цю проблему за допомогою налаштування мобільного клієнта Бітрікс24 двома способами: віджети та веб-застосунки. Віджети (вбудовані блоки) завантажуються в 10 разів швидше, ніж повноцінні веб-застосунки (за 200 мс проти 2–3 с). Вибір залежить від сценарію: для швидких дій (дзвінок, зміна статусу) — візуальні компоненти, для складних форм (оформлення замовлення) — HTML-застосунки. Економія після впровадження може сягати до $15 000 на рік для команди з 50 співробітників. Наші клієнти досягають окупності в 2 рази швидше, ніж при використанні стандартних рішень. Маємо 5+ років досвіду та 10+ успішних проектів. Наші рішення використовують понад 500 співробітників у клієнтів.

Які способи кастомізації доступні?

Веб-орієнтовані застосунки через JavaScript SDK. Платформа надає BX24.js SDK для вбудованих застосунків. У мобільному контексті застосунок відкривається в WebView всередині системи. SDK дозволяє читати та писати CRM-дані через REST API (за офіційною документацією розробника), відкривати стандартні екрани, отримувати дані користувача, викликати методи crm.deal.list, crm.contact.get, tasks.task.list. Приклад звернення до CRM з мобільного застосунку:

BX24.callMethod('crm.deal.list', {
    filter: { ASSIGNED_BY_ID: BX24.getAuth().user_id },
    select: ['ID', 'TITLE', 'STAGE_ID', 'UF_CRM_CUSTOM_FIELD'],
}, function(result) {
    if (result.error()) {
        console.error(result.error());
    } else {
        renderDeals(result.data());
    }
});

HTML-застосунки розміщуються в маркетплейсі або встановлюються локально (коробкова версія). Технічно це HTML/CSS/JS, розміщений на вашому сервері та зареєстрований у розділі «Налаштування → Застосунки».

Віджети в CRM. Візуальні компоненти — найбільш затребуваний тип кастомізації. Вони завантажуються в 10 разів швидше, ніж повноцінні веб-застосунки, оскільки не потребують повного перезавантаження. Розміщення віджетів:

Віджет реєструється через placement.bind:

BX24.callMethod('placement.bind', {
    PLACEMENT: 'CRM_DEAL_DETAIL_TAB',
    HANDLER: 'https://your-app.ru/widgets/deal-tab',
    TITLE: 'Додаткові дані',
    DESCRIPTION: 'Історія доставок',
});

Як запустити бізнес-процес з мобільного?

Комбінація: кнопка у віджеті → REST-виклик → запуск BP через bizproc.workflow.start. Користувач натискає кнопку в картці угоди, на сервері запускається бізнес-процес, змінюється статус, надсилається сповіщення. За 2 дні реалізуємо ланцюжок: список завдань, узгодження, відправка документа.

Покрокова інструкція:

1. Розробіть віджет з кнопкою «Схвалити» та зареєструйте його на картці угоди.
2. В обробнику віджета викличте BX24.callMethod('bizproc.workflow.start', { ... }) з параметрами шаблону та ID угоди.
3. На сервері бізнес-процес виконає 5 кроків: перевірка умови, зміна статусу угоди на «В роботі», надсилання сповіщення менеджеру, запис в історію, оповіщення клієнта.
4. Після завершення процесу мобільний застосунок отримає відповідь та оновить інтерфейс.

White Label: власне брендування

Для коробкової платформи доступний White Label — збірка власного мобільного застосунку під брендом компанії. Система надає можливість перекомпіляції застосунку з кастомною назвою, іконкою та сплеш-екраном. Потребує ліцензії Enterprise та окремої угоди з 1С-Бітрікс. Ми допомагаємо підготувати ресурси: іконки в 5 роздільних здатностях, сплеш-екрани для 3 роздільних здатностей, конфігурацію збірки.

Кейс з нашої практики: страховий брокер, кастомний інтерфейс агента

Строки та вартість

Строки розробки залежать від складності: MVP (мінімально життєздатний продукт) — від 5 днів; типовий проект з веб-застосунком та кількома віджетами — від 10 до 20 днів; комплексна кастомізація з White Label — до 30 днів. Вартість MVP – від $2 000, типовий проект – $5 000–$10 000. Окупність кастомізації — 3–4 місяці за рахунок скорочення часу обробки угод, що дає економію до $15 000 на рік.

Що входить у роботу

В рамках проекту ми надаємо:

• Технічне завдання з описом архітектури, прототипи екранів та узгодження з вами.
• Вихідний код веб-застосунків та віджетів, зареєстрований у вашій системі.
• Документацію по REST-методах та сценаріях використання.
• Інструкцію зі встановлення та налаштування, включаючи права доступу.
• Тестування на реальних пристроях (iOS, Android) та виправлення зауважень.
• Гарантія 30 днів підтримки після здачі (консультації, правки за узгодженням).

Кожен проект починається з аудиту поточних процесів. Отримайте консультацію — оцінимо ваш сценарій за 1 день. Зв'яжіться з нами, щоб обговорити архітектуру та строки. Замовте кастомізацію мобільного застосунку — почніть з аудиту.

Service Worker на Бітрікс — окрема пригода

Композитний кеш (CPagesCache) віддає HTML-сторінку з файлового кешу, а Service Worker поверх нього кешує ресурси через Cache API. Два шари кешування, які нічого не знають один про одного. Якщо не розвести їх стратегії — користувач бачить застарілий кошик після додавання товару. Ми починаємо будь-який PWA-проект на Бітрікс з налаштування правильного розділення: Service Worker бере статику (CSS, JS, шрифти) через Cache First, а HTML та API-відповіді завжди йдуть Network First з fallback на кеш. Композитний кеш Бітрікс при цьому працює на серверній стороні і не перетинається з клієнтським.

Типи мобільних додатків для Бітрікс

PWA (Progressive Web App) — веб-додаток, який виглядає як нативний, але живе в браузері. Встановлення зі стору не потрібне — додавання на домашній екран.

React Native — кроссплатформа від Meta. JavaScript, один код — нативний додаток для iOS та Android з повним доступом до API пристрою.

Flutter — кроссплатформа від Google на Dart. Власний рушій рендерингу Skia, стабільні 60/120 FPS.

Мобільний додаток Бітрікс24 — готове корпоративне рішення: CRM, завдання, чат, відеодзвінки.

PWA випереджає нативну розробку за швидкістю запуску в 3 рази, а React Native на 40% дешевший за Flutter за трудозатратами для типового інтернет-магазину.

Як реалізувати PWA на Бітрікс без конфлікту кешів?

manifest.json — іконка, назва, display: standalone, theme_color, start_url. Користувач встановлює сайт на домашній екран. Файл кладемо в корінь і підключаємо через <link rel="manifest"> у header.php шаблону.

Service Worker — ядро PWA. Реєструємо в footer.php:

• Cache First для статики: /bitrix/cache/, CSS, JS, шрифти, зображення товарів
• Network First для HTML та API (/ajax/, /bitrix/services/). Якщо мережа недоступна — віддаємо кеш.
• Stale While Revalidate для каталогу — показуємо кешоване, оновлюємо у фоні
• Окрема логіка для кошика: завжди Network Only, інакше користувач бачить фантомні товари

Ключовий нюанс — конфлікт з композитом Бітрікс. Модуль composite кешує HTML на сервері і віддає статичні файли. Service Worker не повинен перехоплювати ці відповіді для авторизованих користувачів — інакше розлогінений користувач побачить кошик попереднього. Вирішуємо через перевірку cookie BX_USER_ID у fetch-обробнику.

Push-повідомлення — Firebase Cloud Messaging або OneSignal. Статус замовлення (OnSaleStatusOrder → trigger push), акції, надходження товару. Токен пристрою зберігаємо в UF-полі користувача.

Офлайн-каталог — раніше переглянуті товари доступні без інтернету. IndexedDB для карток, Cache API для зображень.

Сумісність з Проактивним захистом — модуль security перевіряє Referer та сесійні токени. Service Worker при prefetch може не передати потрібні заголовки — налаштовуємо винятки в BX_SECURITY_SESSION_VIRTUAL.

Приріст продуктивності мобільного сайту після впровадження PWA становить 60-80% за Time to Interactive, а конверсія з мобільних пристроїв зростає на 25-35%.

React Native для інтернет-магазинів на Бітрікс

Коли PWA мало — React Native дає повноцінний нативний додаток з єдиною кодовою базою.

Архітектура:

• Бекенд: Бітрікс віддає дані через REST API. Стандартні методи catalog.product.list, sale.order.add для каталогу та замовлень. Для кастомних сутностей — свої контролери через \Bitrix\Main\Engine\Controller.
• Проміжний шар: BFF (Backend for Frontend) на Node.js або GraphQL. Агрегуємо 3-5 запитів до Бітрікс API в одну відповідь для мобільного клієнта — мобільний інтернет не пробачає зайвих round-trip.
• Фронтенд: React Native додаток.

Функціонал інтернет-магазину:

• Каталог: пошук, фільтри, сортування — дані з CIBlockElement::GetList через REST
• Картка товару: галерея (react-native-fast-image), опис, характеристики, відгуки
• Кошик та чекаут з persistence через AsyncStorage
• Особистий кабінет: замовлення, обране, профіль, адреси
• Push: статус замовлення, акції, залишений кошик — FCM/APNs, тригери на подіях Бітрікс
• Нативні фічі: сканер штрихкодів (react-native-camera), геолокація для ПВЗ, Face ID / Touch ID (react-native-biometrics)
• Офлайн: каталог та обране через AsyncStorage / WatermelonDB
• Deep linking: react-navigation deep link → конкретний товар з push або реклами

React Native обирають, тому що:

• React-розробники вже знають 80% стеку
• Екосистема: тисячі готових пакетів у npm
• Hot Reload — миттєвий feedback при розробці
• CodePush від Microsoft — оновлення JS-бандла без публікації в Store. Фікс багу за хвилини, а не за 2-3 дні рев'ю.

Flutter vs React Native: коли обрати Flutter

Альтернатива React Native. Обираємо, коли потрібен нестандартний UI з важкими анімаціями.

Сильні сторони:

• Skia engine — 60/120 FPS на складних анімаціях, де React Native починає підгальмовувати на bridge
• Піксельна ідентичність на iOS та Android — власний рендеринг, не платформені віджети
• Dart: строго типізований, помилки на етапі компіляції, а не в проді на пристрої користувача
• Material Design та Cupertino віджети з коробки

Коли Flutter:

• Інтерфейс зі складними анімаціями та кастомними переходами між екранами
• Критично важлива однаковість UI на обох платформах
• Плани на web та desktop (Flutter підтримує всі три таргети)
• Команда знає Dart або готова вкластися

Інтеграція з Бітрікс:

• REST API на стороні Бітрікс (аналогічно React Native)
• Пакет dio для HTTP з interceptors: автоматичне додавання auth-токена, retry на 5xx
• Стан: Riverpod або BLoC — залежить від масштабу
• Локальне зберігання: Hive для key-value, sqflite для складних запитів до офлайн-даних

Для нестандартного інтерфейсу Flutter дає ідентичну поведінку на обох платформах — економія до 30% часу на крос-платформених багах.

Як підготувати API для мобільного додатку на Бітрікс?

Мобільний додаток рівно настільки хороший, наскільки хороший API.

Проектування:

• RESTful з версіонуванням (/api/v1/, /api/v2/) — зворотна сумісність при оновленнях
• JWT + refresh token. Access — 15 хвилин, refresh — 30 днів. Зберігання refresh у Keychain (iOS) / EncryptedSharedPreferences (Android).
• Пагінація курсором (?after=eyJ...) — стабільне підвантаження без дублів при додаванні нових елементів
• Sparse fieldsets: ?fields=id,name,price,image — віддаємо тільки потрібне екрану, економимо трафік

Оптимізація під мобільні мережі:

• Агреговані ендпоінти: один запит на екран замість п'яти. /api/v1/home повертає банери, рекомендації, акції та категорії однією відповіддю
• Gzip-стиснення — у Бітрікс вмикається через \Bitrix\Main\Config\Option::set('main', 'use_compression', 'Y')
• ETag / Last-Modified — 304 Not Modified економить трафік і час
• Retry з exponential backoff + offline queue (запити накопичуються і надсилаються при відновленні мережі)
• Зображення за розміром пристрою: CFile::ResizeImageGet() з параметрами із заголовка DPR

Push-повідомлення:

• FCM (Android) + APNs (iOS)
• Тригери на подіях Бітрікс: OnSaleStatusOrder, OnCatalogStoreProductUpdate, OnSaleBasketSaved
• Сегментація: персоналізація за поведінкою з CRM
• Аналітика воронки: доставка → відкриття → перехід → конверсія

Що входить у розробку мобільного додатку під ключ?

1. Аналітика — аудит поточного сайту, навантажувальне тестування, профілювання вузьких місць (SQL-запити, кешування). Збір вимог по фічам.
2. Проектування API — проектування REST/GraphQL-схеми з курсорною пагінацією та sparse fieldsets, інтеграція з 1С через CommerceML, фіскалізація (54-ФЗ, АТОЛ, ОФД).
3. Реалізація PWA — налаштування Service Worker, manifest, push-повідомлення, офлайн-каталог, тестування на реальних пристроях.
4. Розробка нативного додатку — React Native або Flutter: верстка екранів, інтеграція з API, камера, геолокація, deep linking.
5. Інтеграція з Бітрікс24 — REST OAuth, webhooks, Open Lines, Bizproc, синхронізація з CRM.
6. Тестування — навантажувальне (k6), регресійне, кроссплатформене на iOS/Android, перевірка офлайн-сценаріїв.
7. Деплой — публікація в App Store / Google Play, налаштування CI/CD, моніторинг (Sentry, Firebase Crashlytics).
8. Документація — опис API, архітектури, інструкція по оновленню. Передача доступів та вихідних кодів.

Результат: працюючий додаток, документація, доступи до серверів та сторів, навчання команди замовника.

Терміни

Рекомендуємо стартувати з PWA — перевірити гіпотезу за 2-3 тижні. Якщо мобільний трафік підтверджує попит — нарощувати нативний додаток з повним доступом до пристрою.

Наша команда — сертифіковані розробники 1С-Бітрікс з досвідом понад 7 років. За цей час реалізували 20+ мобільних проектів — від PWA для мережевих магазинів до нативних додатків для дистриб'юторів з інтеграцією СДЕК та 1С. Гарантуємо сумісність з актуальними версіями платформи та модулів.

Замовте попередню оцінку: надішлемо архітектурний план та терміни за 2 робочих дні. Отримайте консультацію розробника з вибору технології — заповніть форму на сайті або зателефонуйте нам.