создание приложений для битрикс 24
Создание приложения для Bitrix24 с нуля
Для расширения функциональности Bitrix24 удобно использовать приложения. В данной статье описано создание с нуля локального serverless приложения.
Для установки нашего приложения нам понадобится собственно портал bitrix24, в котором мы обладаем правами администратора или правом установки и редактирования приложений.
Если такого портала нет — создать его можно здесь.
Заполняем следующие поля: | Название поля | Значение |
---|---|---|
Название приложения* | exampleApp | Или любое другое |
Russian (ru) | Пример приложения | Также можно заполнить значения для других нужных языков |
Пользователи (user) | отмечаем галочкой | Сейчас нам понадобится только это разрешения, но в дальнейшем разрешения для приложения можно будет корректировать |
Здесь нам нужно будет остановится, так как добавлять пока нечего. Оставим вкладку браузера открытой и приступим к созданию нашего приложения.
Официальная javascript-библиотека
Создадим папку с произвольным названием и в ней единственный пока файл index.html со следующим содержанием (исходный код):
Помещаем файл index.html в zip-архив и указываем этот архив в качестве значения поля Загрузите архив с вашим приложением (zip)* в диалоге создания приложения.
Затем нажимаем кнопку «Сохранить»
Посмотрим, что у нас получилось.
Кликаем по Перейти к приложению и видим… пустое место на месте нашего приложения.
Все необходимое для нас на данном этапе находится сейчас в консоли разработчика.
Мы видим, что наше приложение успешно получило данные необходимые для авторизации.
Официальная javascript-библиотека c promise
Использование callback-функций имеет свои преимущества, но не всем нравится или не всегда подходит к ситуации.
Поэтому попробуем получить тот же результат в promise-стиле. Для этого изменим наш index.html (исходный код)
Опять архивируем, опять обновляем наше приложение, опять смотрим, опять все работает.
Инструменты разработки
В папке нашего проекта инициализируем npm:
Установим необходимые пакеты:
Состояние проекта после всех изменений можно посмотреть здесь.
Создадим в корне нашего проекта файл server.js
Создадим папки src и public
В папку public перенесем index.html и изменим его содержимое на:
В папке src создадим файлы
Если package.json еще не создан, выполним:
Добавим скрипты в package.json :
Далее так как и команда start и команда watch не заканчиваются, их нужно запускать параллельно. Для этого в двух командных строках запускаем
Завершим настройку среды разработки редактированием нашего приложения в Bitrix24.
Перейдем в диалог редактирования нашего приложения и укажем в поле
Укажите ссылку* значение http://127.0.0.1:3000/
Перейдите к просмотру вашего приложения:
Вы должны увидеть приветствие с именем текущего пользователя:
Если использовать официальную библиотеку, то отличаться будут только два файла:
Итоговый код проекта для использования официальной библиотеки здесь.
Ознакомиться со всеми возможными методами и возможностями API можно здесь.
Исходный код можно увидеть здесь.
И последнее замечание. Описанные выше способы и методы не являются набором лучших практик. Это скорее предложение к конструктивному обсуждению.
UPD: желающих высказаться о 1С-Битрикс или Битрикс24 прошу сделать небольшое интеллектуальное усилие и осознать, что статья не о Битрикс24 и совсем не о 1С-Битрикс.
Это если в Питере прохожий объясняет другому, как пройти к Петропавловской крепости и тут третий вмешивается с репликой:
«Да тиран был ваш Петр I. Тиран и деспот. И усы у него дурацкие».
Если есть конструктивные замечания к коду в СТАТЬЕ или к подходам или к используемым паттернам — добро пожаловать.
Мы уже больше года рассказываем о приложениях для Битрикс24. Наши эксперты изучили и подготовили обзоры более 130 приложений! Если вы еще не видели эти обзоры, крайне рекомендуем ознакомиться, наверняка вы найдете для себя что-то интересное. Все обзоры приложений собраны тут. Сегодня мы решили копнуть глубже и рассказать не просто про готовые приложения, а про процесс разработки приложений для Битрикс24. Наша команда регулярно создает приложения, которые помогают решать различные задачи клиентов, так что нам есть, что рассказать.
С чего начинается приложение?
Из сказанного получается, что в качестве примера можно взять простую задачу и на ней провести анализ самого процесса разработки, составных частей программы, выполняемых подзадач, необходимых для ее эксплуатации в дальнейшем. В качестве такого примера я возьму интеграцию СМС-провайдера с порталом Битрикс24. В голове я при этом буду удерживать конкретное приложение, конкретную интеграцию, подглядывать в его логи и код, но для общего анализа совсем не важно, чего с чем оно действительно интегрирует.
Еще немного о приложении. Существует несколько способов работы с порталом Битрикс24. Здесь речь пойдет о приложении с пользовательским интерфейсом и размещаемом на стороннем сервере. Таким образом, в интеграции будет участвовать как минимум три сервера: портала, нашего приложения и СМС-провайдера.
Итак, поставлю задачу.
СМС-провайдер предоставляет API для отправки СМС-ок, отслеживания текущего статуса конкретного СМС-сообщения, получения сведений об аккаунте и текущем балансе пользователя. С другой стороны, портал Битрикс24 имеет API для регистрации СМС-провайдера, смены статуса отправленного сообщения, а также дает зарегистрированному провайдеру команду на отправку конкретного СМС. Наша задача связать одно с другим так, чтобы, например, при смене статуса у сделки в CRM кому-то отправлялось СМС-уведомление, а при изменении его статуса у СМС-провайдера менялся соответственно статус сообщения на портале.
Выделим подзадачи из этой общей. В итоге получим такие точки входа в приложение:
Теперь настройки. В данном приложении они совершенно необходимы, поскольку для взаимодействия с СМС-провайдером нам потребуются авторизационные данные. Это может быть т.н. API Key или логин и пароль или, как предпочитают делать в последнее время, логин и API Key вместо пароля. Эти данные мы можем получить лишь от самого пользователя, установившего приложение. Отмечу сразу, что для нашей задачи не требуется спрашивать ключи от каждого пользователя портала, одной авторизации будет достаточно. Итак, необходимо вывести на странице форму с полями ввода, в которых указать текущие значения, если они уже есть. Будет также неплохо дать возможность здесь же сразу проверить их валидность, предоставив возможность отправки тестового СМС-сообщения.
Обработчик. При описании настроек я забыл упомянуть еще об одном, спрятанном в backend действии в случае, когда авторизационные данные первый раз получены и проверены на валидность. Это регистрация на портале СМС-провайдера. При его регистрации мы указываем среди прочего URL обработчика команды на отправку сообщения. И в данной точке входа (handler) мы получаем набор параметров, среди которых есть само сообщение, а также номер телефона, на который оно должно быть отправлено. Задача обработчика постучать с этими данными (используя авторизацию, сохраненную в настройках) к СМС-провайдеру, вызывая некий его метод send и получая ответ об успешной или неудачной постановке в очередь на отправку. Когда она успешна, то нам вернется уникальный идентификатор сообщения у провайдера.
Ну, вот теперь все точки входа в наше приложение вкратце описаны, выяснены действия, какие необходимо выполнить, и данные, которые необходимо где-то у себя хранить. Было бы неплохо их еще раз перечислить отдельно от описания точек входа. Итак:
Хранилище данных требует пояснений. Например, почему всюду дублируется домен и id портала. Ну. домен, потому что так удобнее просматривать и фильтровать записи при осуществлении технической поддержки, а MEMBER_ID. можно, конечно, привязку сделать по первичному ключу с данными из п.1 (Сведения о портале). Но и выборки придется делать всегда с джойном двух таблиц. Короче, я выбираю именно вариант с id портала в каждой таблице. Когда мы работаем с порталом, то у нас в наличии всегда именно member_id, он приходит с портала, и его же мы посылаем самим себе при обращении с фронта в бэк.
И еще одно важное замечание по поводу версий. Во всех местах программы, где вы указываете путь к приложению, а это URL обработчика событий, это URL для атрибута action формы настроек, это URL отправки тестового СМС из фронта в бэк, всюду URL должен формироваться динамически, исходя из текущего расположения приложения. Иначе при выпуске новой версии вам придется лазить по всему коду и заменять. Даже, если вынесете эти URL-ы в конфигурационный файл, всегда можно что-то пропустить. Динамическое формирование URL-ов самое правильное.
Теперь REFRESH_DATE_END в таблице пользователей. Токен, с которым мы стучимся на портал, живет лишь один час, а затем требует обновления через refresh_token, но у того самого (пока еще) есть собственный lifetime размером в 30 дней. Чтобы не потерять возможность делать запросы от лица каждого пользователя, мы обязаны отслеживать момент окончания валидности и делать обновление. По данному полю мы определяем такую необходимость. Вот поэтому я и вынес авторизацию пользователей в отдельное хранилище, поскольку по нему придется периодически пробегать, обновляя токены. Ну и с точки зрения построения баз данных это правильнее. И еще замечание по токенам. Если приложение размещается не на вашем сервере, а может, даже и в этом случае, токены следует хранить в зашифрованном виде.
Итак, после перечисления всех данных мы обнаруживаем, что список наших действий необходимо дополнить пунктом 16.
16. Обновление refresh_token-ов, у которых срок жизни приближается к 30 дням, раз в сутки.
Ну вот, теперь и действия все прописаны и данные описаны. Можно переходить к следующему шагу и рассмотреть каждую точку входа подробнее. Примечание, я не стану говорить об архитектуре приложения, поскольку тут многое зависит и от языка программирования, и от сложившейся практики у конкретных разработчиков. Речь только о построении приложения без специфических языковых особенностей.
Создание приложений на базе Битрикс24
Поделиться в социальных сетях:
Ряд компаний, работая в Битрикс24, не находят в существующем функционале нужного способа решения своей задачи. Для расширения стандартного набора функционала Битрикс24 используются приложения. Компания Пинол уже много лет занимается разработкой приложений для Битрикс24. В этой статье мы решили рассказать о наших приложениях и о том, как они разрабатываются.
В портал Битрикс24 встроена богатейшая функциональность по управлению взаимоотношениями с клиентами и организации внутренних бизнес-процессов компании. Портал обладает большой гибкостью для самостоятельных настроек: добавления новых полей, редактирования стадий в воронках продаж и задач, установки прав доступа и т.д.
Но часто даже этой функциональности бывает недостаточно, чтобы решить определенные точечные проблемы автоматизации. Если организация не хочет уходить с облака и связываться с самостоятельным циклом разработки в рамках коробочной версии портала, то тогда верным вариантом является поиск приложения на Маркетплейс Битрикс24, которое может закрыть пробел в функциональности.
Технически приложение представляет из себя PHP и JavaScript код, обращающийся по REST API к данным Битрикс24 и используемый базовый интерфейс платформы. Код, как правило, размещается на сервере поставщика приложения, что позволяет поставщику решения быстро решить техническую проблему при прямом обращении к нему.
Группы приложений для Маркетплейс Битрикс24
Приложения можно условно разделить на две основные группы. Приложения первой группы добавляют новые функции самого портала, приложения второй группы обеспечивают дополнительные возможности интеграции. Компания Пинол разрабатывает приложения обоих видов.
К первой группе можно отнести наше приложение «Запись на прием к врачу», появление которого было вызвано необходимостью дать нашим клиентам – медицинским организациям – удобный и практичный функционал для бронирования времени врачей, ведущих прием пациентов.
Приложение создавалось в то время, когда в стандартном функционале CRM портала Битрикс24 отсутствовала возможность бронирования ресурсов и было в полном смысле этого слова незаменимым.
В начале этого года к данному приложению была добавлена мощная опция динамического расписания, позволяющая задавать разные интервалы приема врачей в зависимости от видов предоставляемых услуг.
Также данное приложение послужило «родителем» для других программ, в которых задействован учет ограниченных по времени ресурсов. Речь идет о решении управлении парком автотранспортных средств и записи клиентов в парикмахерские (барбершопы, салоны красоты).
Приложение постоянно развивается. Сейчас прорабатываются вопросы ведения ценообразования сделок исходя из сделанных записей на прием.
Алексей Окара,
Учредитель Пинол
К приложению второй группы можно отнести интеграцию с системой почтовых и SMS-рассылок UniSender. На момент разработки уже существовало подобное решение по почтовым рассылкам от конкурирующей компании, но оно страдало рядом недостатков, в частности, невозможностью растягивания картинок в шаблоне сообщения. В итоге, было выпущено более продвинутое решение, обладающее рядом изюминок, которых нет даже в выпущенном позднее типовом модуле CRM-маркетинг: возможности ведения рассылок по базе сделок, сотрудников, инициации отправки сообщений из бизнес-процесса.
Компания Пинол плотно работает с фирмой UniSender в том числе и по вопросам эксплуатации решения. В частности, дарит денежные бонусы клиентам, зачисляемые на аккаунт UniSender при регистрации приложения.
Мы вложили более миллиона рублей и сотни часов в разработку, чтобы создать удобное приложение с широким функционалом для интеграции сервиса UniSender с Битрикс24.
Аналогичным образом были выстроены партнерские отношения с системами онлайн-чатов LiveTex и заказа обратного звонка Callbackhunter, с которыми были сделаны интеграции.
Компания Пинол предлагает версии своих решений не только для Битрикс24, но и для других популярных CRM-систем: AmoCRM, bpm’online. Также мы подготовили удобное приложение Пинкит, обеспечивающее обмен данными Битрикс24 с различными приложениями.
Важно, что получить все эти решения с полным объемом функционала можно совершенно бесплатно просто приобретя платную подписку на облачное CRM-решение (или лицензию на коробочную версию) у компании Пинол.
В процессе эксплуатации решений у клиентов часто возникают пожелания по их доработкам. Например, к нам обратилась компания из Израиля с просьбой убрать галочку Согласия на обработку персональных данных в онлайн форме «Записи на прием к врачу», ибо эта галочка не требуется по локальному законодательству.
В таком случае, руководитель нашей компании принимает решение либо о включении этой опции в следующий релиз, что случается крайне редко, ибо требуется сбора существенного кворума лиц, заинтересованных в функционале, либо о заказной платной доработке под отдельно взятого клиента.
Порядок действий при разработке нового приложения
Если же речь идет о создании с нуля совершенно нового решения, например, интеграции Битрикс24 с ERP-системой отличной от 1С, то здесь имеет место следующий порядок действий:
Составление технического задания на решение – крайне ответственный момент, ибо в нем необходимо детально проработать логику, архитектуру, пользовательские интерфейсы будущего решения. Структура данного многостраничного документа следующая:
Выводы
Выпущенное решение может быть индивидуально предоставлено клиенту, а может быть выложено в публичный доступ на Маркетплейс. Мы поощряем именно последний вариант, ибо он позволяет разделить риски и бюджет создания решения с его другими потенциальными пользователями.
Если остались вопросы по созданию приложений в Битрикс24, задайте их в комментариях к данной статье. Если у Вас есть предложения по доработкам приложений или разработке нового, отправьте нам заявку на почту order@pinall.ru. Наш менеджер свяжется с вами в ближайшее рабочее время для согласования всех вопросов.
Заполните форму и мы проведем вам онлайн-встречу, где вы получите примеры реализации с кейсами внедрений:
Битрикс24. Инструкция для начинающих
Битрикс24 – популярный сервис, предназначенный для эффективной работы компаний любых масштабов благодаря широкому набору инструментов. С одной стороны, у некоторых пользователей это вызывает сложности: с чего начать и как с этим работать? С другой стороны, каждый клиент по мере развития бизнеса может расширять функционал сервиса под текущие требования и задачи.
Весомое преимущество – разработчик предлагает организациям со штатом до 12 сотрудников бесплатный тариф с базовыми инструментами.
Соглашусь, переезд на Битрикс24 сравним со сменой локации офиса компании. Сначала вы соберёте всё необходимое и перевезёте, а потом заново распакуете на новом месте. Но не всё так сложно. Достаточно пошагово выполнить мою инструкцию.
В этой статье рассмотрим:
Ключевые возможности
Совместная работа над задачами и проектами:
Контакт-центр: телефония, чат на сайт (бесплатно), коллтрекинг, CRM-формы в соцмедиа и на сайте, автоответчик.
Сайты: возможность создания сайтов в простом конструкторе.
Магазины: создание интернет-магазинов в конструкторе и по шаблонам.
Офис: виртуальное пространство для коммуникации сотрудников компании.
Начало работы в Битрикс24
Регистрация и создание
Откройте страницу регистрации Битрикс24, нажмите «Начать бесплатно». Выберите удобный способ регистрации.
Вы создали свой Битрикс24. Дальше нужно указать название компании, при необходимости переименовать домен, имя которому система присвоила случайным образом.
Подключение сотрудников
Откройте вкладку «Живая лента»-«Пригласить сотрудников». Опция доступна админу, в настройках есть функция «Разрешить всем приглашать пользователей на портал».
Система предлагает 5 способов приглашения сотрудников:
Настройка структуры компании
Просмотр и редактирование структуры осуществляется в «Меню»–«Сотрудники». Структура состоит из подразделений, за каждым из которых закрепляется название, руководитель, сотрудники.
Нажимайте кнопку «Добавить подразделение», заполняйте данные.
Каждому подразделению можно добавлять дочернее подразделение и подотделы без ограничения по их количеству. Получится примерно так, как на скриншоте.
Здесь же есть кнопка «Пригласить сотрудников». При необходимости переносите сотрудника в какое-либо из подразделений, зажав иконку с именем левой кнопкой мыши и перетаскивая её в нужное окно.
Основное меню сервиса: обзор
Разделы меню находятся в левой колонке экрана. Кратко по ним пройдусь.
Живая лента – страница событий портала
Вмещает несколько подразделов:
Задачи, подзадачи и проекты – организация рабочего процесса
В данном разделе вы получаете наглядную информацию о завершённых, текущих и запланированных делах. Я не буду останавливаться на каждой опции, а перейду к главному – созданию задач. Кстати, данный инструмент находится практически в каждом разделе.
Как создать задачу в Битрикс24?
Нажимайте кнопку «Добавить задачу». Дальше внесите данные: название и описание задачи. Если нужно, составьте чек-лист со списком действий, чтобы фиксировать выполненные шаги. Возле значка пламя можно отметить галочкой приоритет задачи – важная. Назначьте сотрудников, ответственных за выполнение, и крайний срок (дедлайн).
Кратко о ролях сотрудников, участвующих в выполнении задачи:
Вкладка «Дополнительно» позволяет осуществить следующие действия:
Канбан доски в задачах
Привычная многим методология есть в Битрикс24. Задачи сразу создаются в подразделе «Канбан». Интерфейс схожий с аналогичными сервисами: выделение колонок цветом, фильтр для поиска задач. Для наглядности сделал несколько задач, чтобы показать вам скриншот досок.
Кратко по диаграмме Ганта
Диаграмма позволяет отслеживать ход выполнения задач, контролируя крайние сроки. При наведении на горизонтальный блок задачи в календарной сетке просматриваются общие данные.
Шаблоны задач
Роботы в задачах – что это?
Нажимаете на кнопку «Роботы» и переходите в раздел «Настройки».
Нужно задать 2 параметра:
Пример: есть задача с установленными сроками выполнения. С помощью триггера мы указываем ситуацию «скоро просрочена». Когда задача достигнет этого статуса, робот автоматически совершит действие – я выбрал отправку сообщения в Живую ленту.
Чат и звонки
В данном разделе у вас автоматически появляются 2 чата – с помощником от Битрикс24 и общий чат для всех коллег, который можно использовать дополнительно к Живой ленте.
Также в системе доступны голосовые и видео звонки между сотрудниками. Для этого создайте чат и выберите тип звонка. Для совершения групповых звонков нужно создать групповой закрытый чат. Видео- и аудио звонки между сотрудниками не записываются.
Группы
Здесь отображаются уже сформированные рабочие группы и создаются новые: открытая, закрытая, внешняя и группа для внешних публикаций.
В этой же вкладке формируются проекты с заданным типом: открытый, закрытый или внешний.
Хранение документов и файлов организации. Для работы с диском предложено 5 вкладок:
Календарь
Раздел содержит 2 основные вкладки: «Мой календарь» и «Календарь компании». События отображаются в таблице, под кнопкой «Расписание» – то же самое представлено в виде списка по дням. При наведении курсора на задачу, справа на экране отображаются основные сведения. Под кнопкой «Добавить» 2 опции – событие и задачу. Под значком шестерёнки находятся настройки, включая права доступа.
Время и отчёты
Полезные инструменты для отдела кадров и руководителей, доступны в платных тарифах.
Почта
Работа с почтовыми ящиками систем, приведённых на скриншоте, в режиме одного окна. Есть много полезных настроек и возможностей, но в платных тарифах.
Бизнес-процессы
Платный инструмент для быстрого согласования различных документов внутри организации. С помощью редактора настраивается бизнес-процесс, а именно его цепочка. По ней документ и будет направляться по очерёдности каждому из сотрудников.
Данному инструменту я отведу отдельную статью – информации и функционала очень много. Здесь хранятся все сделки с просмотром в форме канбан-доски, списка или календаря, звонки и переписки с клиентами на сайте и в соцмедиа, подробная статистика по продажам, эффективности менеджеров и т.д.
Приложения
Со своей страницы Битрикс24 вы получаете доступ к приложениям (платные и бесплатные). Для удобства предложена поисковая строка и настраиваемый фильтр – по категориям, стоимости, числу скачивания и т.д.
Тарификация в Битрикс24
Бесплатный тариф без ограничений по времени есть, с возможностью подключения не более 12 сотрудников. При регистрации вы можете подключить демо-режим на 30 дней с доступом к платным инструментам бизнес-пакета «Команда». Подробное сравнение тарифных планов здесь.
Разработчик предлагает воспользоваться сервисом:
Мобильное приложение Битрикс24
Скачивается бесплатно и работает с устройствами iPhone, iPad, Android для платформ Android 4.4+ и iOS 10.0+. Через приложение ведётся работа над задачами, пользование CRM, коммуникация с коллегами и клиентами, есть доступ к голосовым и видео звонкам.
Интеграция с внешними платформами
Как удалить Битрикс24?
Неактивные аккаунты с бесплатным доступом удаляются автоматически. Если вы не зайдёте в аккауант в течение 45 дней, то он будет заблокирован. На восстановление доступа выдаётся неделя – следует писать в техподдержку. За сутки до удаления на электронную почту владельца Битрикс24 будет отправлено письмо с предупреждением об удалении.
Порталы на платных тарифах не блокируются и не удаляются. Достаточно не оплачивать следующий период, после чего портал будет переведён на бесплатный пакет и удалится, как описано выше.
Настройка уведомлений в Битрикс24
В правом верхнем углу экрана нажмите на стрелочку рядом с вашим именем, дальше «Настройка уведомлений».
Выбирайте нужный режим – простой или расширенный. В каждом из режимов можно проставлять/убирать галочки, сохраняя требуемые настройки.
Вывод
Я кратко показал только основные нюансы по работе с Битрикс24. Он был и остаётся популярным мощным порталом, объединяющим инструменты управления проектами и функции CRM. В качестве заключения я кратко обобщу достоинства и недостатки системы.