Как сделать мобильное приложение на битрикс

Обновлено: 19.09.2024

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

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

В статье пойдет речь не о Битрикс24, а о 1С-Битрикс: Управление сайтом - старт. Мы не скрываем, что серверная часть находится на 1С-Битрикс и готовы рассказать, почему мы используем именно его. Статья по большей части не для программистов, а для клиентов, хотя уже предвкушаю тонны негодования от разработчиков.

Давайте сначала разберемся, чем отличается разработчик от технического директора. Отличия состоят в том, что программист думает о технологиях и внедрении. Технический директор думает о деньгах. Т.е. о том, какие технологии выбрать, чтобы уложиться в бюджет, чтобы было выгодно и компании, и клиентам. Я предлагаю пообщаться на уровне техдиректора.

У программистов простая логика:

если iOS, то значит необходимо использовать objective-c или swift

Для веба и сервера - php или python, в особых случаях оба сразу.

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

Все программисты для создания приложения должны «подружиться» друг с другом и работать в команде. Объективно, это практически невозможно, поэтому возникает необходимость в проект менеджере, если знаний хватает, то им становится сам клиент. Если в какой-то момент клиента достанет разбираться в багах, то нужен будет ещё и тестировщик.

В общем, необходимо три - шесть человек, чтобы сделать более-менее среднее приложение для многопользовательского сервиса. Не забываем про зарплату и сроки. Во сколько миллионов вам это выйдет, можете посчитать сами по актуальным зарплатам. Если вы готовы оплачивать такую сумму за разработку, то тогда конечно, можно пойти по такой схеме. Но если есть задача сэкономить или просто протестировать идею, тогда даже считая по минимуму 30 000 в мес х 3 х 6 = 540 000 (а скорее всего 800 - 1000) – это абсурдная сумма для тестирования идеи. Вы можете рискнуть такой суммой? Не знаю, но предполагаю, что нет. Для тех, кто к нам обращается, это неадекватная сумма. Именно поэтому мы выбираем webview на базе 1С-Битрикс.

Чаще всего разговор с программистами заканчивается на том, что программист говорит, надо сделать приложение отдельно под iOS и Android. Тогда встает вопрос: «конечно, все это круто, но кто платить за это будет?». Наступает немое молчание, потому что вопрос адресован не напрямую программисту, а клиенту.

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

Предположим, вы начали разрабатывать приложение с нуля. В таком случае можно попасть в неприятную ситуацию, когда есть команда, которая работает над вашим проектом уже какое-то продолжительное время, и вдруг кто-то их них уходит. Это становится большой проблемой: вы начинаете нанимать нового программиста, который будет искать ошибки от предыдущего сотрудника, или же делать все заново. Надо будет доплачивать за рефакторинг, снова ловить ошибки и платить. А если это 6 человек, то раз в два месяца такое развлечение вам обеспечено. В случае webview-разработки необходимо реализовывать отдельно только «железный» функционал - GPS, камера и т.д., а сами экраны делаются один раз, одним программистом, причём самым дешёвым из всех трёх.

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

Доработка и обновления – это очень важная часть процесса создания приложений, и в этом нам так же помогает подход webview. Если необходимо что-то добавить или доработать, в таком случае вам нужно один раз доработать темплейт экрана. За счет этой технологии не нужно перевыпускать обновления приложения, заставляя всех пользователей его устанавливать. Приложение будет по сути браузером, воспроизводящим контент с сервера. Обновили на сервере и у всех пользователей автоматически показывается актуальная версия. При подобном подходе это стоит в несколько раз дешевле, чем нативно по «хардкору» или даже в режиме компилируемого гибрида.

Ключевые преимущества использования гибридной технологии webview и Битрикс:

Мы можем обновлять приложение в реальном времени и не заставлять пользователей постоянно обновляться

В Битриксе есть поддержка организаций, т.к. компания коммерческая. Поэтому можно говорить о некой двойной гарантии

Имеется большое количество разработчиков, которые работают на Битриксе и смогут развивать ваш проект, даже если мы закроемся :)

Экономия по сравнению с чисто нативной в 3-4 раза

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

Перечитал написанное и получилось так сладко, что аж самому захотелось заказать такое приложение :) Естественно, встаёт очевидный вопрос — в чём подвох? Я вижу подвох в двух пунктах. На webview не получится слелать качественный AR/VR проект, игру, либо проект, где подключение к интернету не обязательно (шагомеры, пульсомеры и тд). Но если у вас многопользовательское приложение с бизнес-логикой и статичными экранами, то такой вариант наиболее выгоден для стартапов.

Готов обсудить проекты и рассказать детально как можно реализовать и сколько будет стоить ваш проект при разработке на web-view.

Для расширения функциональности Bitrix24 удобно использовать приложения. В данной статье описано создание с нуля локального serverless приложения.

Для установки нашего приложения нам понадобится собственно портал bitrix24, в котором мы обладаем правами администратора или правом установки и редактирования приложений.

Если такого портала нет — создать его можно здесь.

Выбираем пункт Для личного использования . После нажатия кнопки Добавить мы попадаем в диалог создания приложения.

Заполняем следующие поля:	Название поля	Значение
Название приложения*	exampleApp	Или любое другое
Russian (ru)	Пример приложения	Также можно заполнить значения для других нужных языков
Пользователи (user)	отмечаем галочкой	Сейчас нам понадобится только это разрешения, но в дальнейшем разрешения для приложения можно будет корректировать

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

Официальная javascript-библиотека

Создадим папку с произвольным названием и в ней единственный пока файл index.html со следующим содержанием (исходный код):

Помещаем файл index.html в zip-архив и указываем этот архив в качестве значения поля Загрузите архив с вашим приложением (zip)* в диалоге создания приложения.
Затем нажимаем кнопку "Сохранить"

Посмотрим, что у нас получилось.

Кликаем по Перейти к приложению и видим… пустое место на месте нашего приложения.

Все необходимое для нас на данном этапе находится сейчас в консоли разработчика.

Мы видим, что наше приложение успешно получило данные необходимые для авторизации.

Официальная javascript-библиотека c promise

Использование callback-функций имеет свои преимущества, но не всем нравится или не всегда подходит к ситуации.
Поэтому попробуем получить тот же результат в promise-стиле. Для этого изменим наш index.html (исходный код)

Неофициальная библиотека BX24

Если вы планируете писать приложение на typescript (можно использовать и с javascript) и/или обладаете умеренным авантюризмом, то можно попробовать использовать сторонние библиотеки для авторизации.
Например эту.
В этом случае наш index.html нужно будет изменить следующим образом (исходный код):

Опять архивируем, опять обновляем наше приложение, опять смотрим, опять все работает.

Инструменты разработки

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

В папке нашего проекта инициализируем npm:

Установим необходимые пакеты:

Можно аналогично создать проект с помощью create-react-ap или angular-cli .

Состояние проекта после всех изменений можно посмотреть здесь.

Создадим в корне нашего проекта файл server.js

Создадим папки src и public
В папку public перенесем index.html и изменим его содержимое на:

В папке src создадим файлы

Добавим скрипты в package.json :

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

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

Если использовать официальную библиотеку, то отличаться будут только два файла:

Итоговый код проекта для использования официальной библиотеки здесь.

Ознакомиться со всеми возможными методами и возможностями API можно здесь.

Исходный код можно увидеть здесь.

И последнее замечание. Описанные выше способы и методы не являются набором лучших практик. Это скорее предложение к конструктивному обсуждению.

UPD: желающих высказаться о 1С-Битрикс или Битрикс24 прошу сделать небольшое интеллектуальное усилие и осознать, что статья не о Битрикс24 и совсем не о 1С-Битрикс.
Это если в Питере прохожий объясняет другому, как пройти к Петропавловской крепости и тут третий вмешивается с репликой:
"Да тиран был ваш Петр I. Тиран и деспот. И усы у него дурацкие".

Если есть конструктивные замечания к коду в СТАТЬЕ или к подходам или к используемым паттернам — добро пожаловать.

Сейчас я расскажу как начать разрабатывать свои мобильные приложения.

С чего начать?

Итак, установим приложение для разработчиков из Google Play или AppStore.
При запуске приложения появляется форма для ввода некого адреса, которого у вас пока нет

Для чего это нужно? Написано в документации

Что дальше? Меню.

Стуктура меню проста. Есть секции. Каждый пункт меню снабжается нужными атрибутами:

Что такое app?

Все функции пока описывать не буду.

Функции данного объекта уже в документации и файлике /bitrix/js/mobileapp/bitrix_mobile.js

Продолжаем. Пишем страницы, создаем таблицы.

Разместим нашу страницу /myfirst_app/test.php, на которую ссылается созданный пункт меню.

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

Вы можете написать приложение

Что будет дальше?

Эта статья является только вводным курсом. В следующих статьях я буду более подробно освещать такие вопросы:

Если вдруг вам не хватает стандартных возможностей «Битрикс24», добавьте новые функции с помощью мини-программ. Сделайте хорошую платформу еще лучше.

Что такое приложения Битрикс24

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

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

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

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

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

Цены на приложения Битрикс24

Если вы используете бесплатный план Битрикс24, но хотите попробовать приложения, можете оформить пробную подписку на «Маркет». Она бесплатно открывает полный доступ к приложением на 30 дней.

Примеры приложений Bitrix24

Mind Map. После установки этого приложения в разделе «Группы» появится новая вкладка, которая позволяет создавать ментальные карты. Так называют графические схемы, в виде которых удобно представлять сложные идеи, проекты или рабочие процессы — чтобы они стали понятнее. На изображения можно быстро добавлять значки сотрудников и задач, которые уже есть в системе, а также новые объекты и связи между ними. Ментальные карты заметно упрощают работу с информацией.

«База знаний». Это приложение представляет собой более удобную альтернативу встроенной в Битрикс24 Wiki. С его помощью можно вести, как следует из названия, корпоративную базу знаний: обучающие материалы и прочие внутренние документы. Программа позволяет создавать статьи и структурировать их с помощью виртуальных папок. Сотрудники могут заниматься этим совместно. В приложение встроен функциональный редактор с богатыми возможностями для форматирования статей. В текст можно вставлять изображения и видео.

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

«Дни рождения сотрудников». Если вы заботитесь о корпоративной культуре, а также лояльности клиентов и сотрудников, вам пригодится эта программа. С ней вы перестанете забывать о днях рождения тех и других. Приложение отображает памятные даты на календаре и уведомляет о наступающих праздниках. Правда, даты рождения обязательно должны быть указаны в карточках соответствующих людей. Иначе они не появятся в календаре.

ApiX-Drive. С помощью этой программы вы сможете создавать интеграции Битрикс24 c сотнями других сервисов. Быстро и без единой строчки кода.

Приведем несколько примеров интеграций, которые можно создавать после установки ApiX-Drive.

Социальные сети: подключайте лид-формы «ВКонтакте» и Facebook к Битрикс24, чтобы заявки автоматически попадали из соцсетей в воронку продаж.
Конструкторы сайтов: благодаря интеграции с сайтами заказы и другие данные будут автоматически попадать из форм в CRM. ApiX-Drive поддерживает сайты, созданные на платформах вроде Tilda, Landingi, Wix, LPGenerator и Bloxy.
Конструкторы квизов: после подключения опросов к Битрикс лиды и прочие ответы клиентов также будут попадать прямиком в CRM. С помощью ApiX-Drive можно интегрировать квизы, созданные в Marquiz, Typeform, Enquiz, QuizGO и других конструкторах.
Электронные таблицы: подключите Google Sheets к Битрикс24 — и ApiX-Drive будет выгружать суммы сделок или другие выбранные данные в таблицу. Пригодится, если нужно будет визуализировать цифры в графиках или посчитать прибыль.
Мессенджеры: после интеграции Битрикс24 с Viber, Telegram или Slack вы сможете получать уведомления о смене статусов и других событиях в CRM в любимом мессенджере.

Чтобы создать интеграцию, сначала нужно обязательно установить приложение. После этого остается зарегистрироваться на сайте одноименного сервиса ApiX-Drive и настроить связи между Битрикс24 и выбранными системами. Пользователю помогают встроенные подсказки, а при необходимости можно почитать подробные инструкции в справке ApiX-Drive. Создание интеграции занимает около 15 минут.

Как устанавливать приложения Битрикс24

Установка приложения занимает пару минут и не требует каких-либо технических знаний. Но эта возможность доступна только пользователю с правами администратора.

Чтобы попасть в каталог, нужно открыть личный кабинет Bitrix24 и нажать на боковой панели «Еще» — «Маркет». По умолчанию откроется вкладка «Все приложения». На ней можно найти все программы, доступные для установки.

Для навигации по каталогу можно использовать список категорий слева и форму поиска/фильтрации в верхней части окна. Форма позволяет учитывать при поиске не только категорию программ, но также их стоимость, количество установок и совместимость с мобильной версией Битрикс24.

Чтобы установить выбранное приложение, нужно кликнуть рядом с ним «Посмотреть», а затем «Установить».

Если программа потребует разрешения для доступа к тем или иным данным, надо будет отметить все запросы и повторно нажать «Установить».

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

Как удалять приложения Битрикс24

Если установленное приложение станет ненужным, вы сможете в любой момент его удалить.

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

Чтобы удалить выбранное приложение, нужно нажать рядом с ним «Удалить». После этого может понадобиться подтвердить удаление настроек и данных программы.

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

Разработка приложений Битрикс24

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

Есть несколько причин, которые могут подтолкнуть вас на создание своей программы для «Маркета». Если ваша компания использует Битрикс24, но сотрудникам не хватает какой-то важной функции в основном интерфейсе и уже готовых приложениях, можете добавить ее с помощью собственной разработки.

Кроме того, «Маркет» дает возможность заработать. Создав приложение, вы можете продавать к нему доступ другим пользователям. Разработчики сами выбирают формат монетизации: продавайте пожизненные лицензии на программы, сдавайте их в аренду по подписке, или зарабатывайте на встроенных покупках. Можете также создавать приложения для других компаний, которые хотят расширить функциональность Битрикс24, под заказ.

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

Читайте также: