Сегодня попробуем написать простейшее локальное статичное приложение Bitrix24. Цель: получить данные из стороннего источника и отобразить их в приложении Bitrix24.
Создаём файл index.html
Этот файл будет содержать отображение нашего приложения. Свойство data_host класса App заполним позже.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Локальное приложение</title>
<script src="//api.bitrix24.com/api/v1/"></script>
<script>
class App
{
data_host = '';
init()
{
this._createInterface();
}
_createInterface()
{
let link_button = document.createElement('div');
link_button.innerText = 'Получить данные стороннего ресурса';
link_button.style.cursor = 'pointer';
document.body.appendChild(link_button);
let result_div = document.createElement('div');
result_div.style.marginTop = '16px';
document.body.appendChild(result_div);
link_button.addEventListener('click', this._getData.bind(this, result_div));
}
_getData(result_div)
{
let xhr = new XMLHttpRequest();
xhr.onload = function() {
result_div.innerHTML = 'Имя: ' + xhr.response.name + '<br>Фамилия: ' + xhr.response.surname + '<br>Дата и время: ' + xhr.response.date;
}
xhr.open('GET', this.data_host, true);
xhr.responseType = 'json';
xhr.send();
}
}
</script>
</head>
<body>
<script>
let app;
let bx24Promise = new Promise(function(resolve, reject) {
try {
BX24.init(resolve);
} catch (err) {
resolve(err);
}
});
bx24Promise.then(function() {
app = new App();
app.init();
}).catch(function(err) {
console.error(err);
});
</script>
</body>
</html>
Создаём файл get-data.php
Этот файл обработает запрос, который пошлёт наше приложение, и отдаст ему ответ. Файл можно разместить в корне вашего сайта - там, где мы хотим забрать какие-то данные.
Если сайта нет или он не нужен, а нужны только данные, можно арендовать либо взять на тест любой шаред хостинг. Я приведу на примере одного из хостингов:
1. Создаём аккаунт на хостинге (нажимаем "Начать тест" и вводим необходимые данные).
2. Сразу после создания хостинга нас перекинет в панель управления. Там нажимаем на "Файловый менеджер".
3. Нажимаем "Файл", затем "Новый файл".
4. Вводим имя файла "get-data", выбираем тип файла ".php" и нажимаем "Создать файл".
Файл готов. Сразу после создания файла откроется окно его редактирования. Вставляем в него код ниже:
<?php
header('Access-Control-Allow-Origin: https://cdn-ru.bitrix24.ru');
if (! in_array(mb_strtolower($_SERVER['REQUEST_METHOD']), ['options', 'get'])) {
header('HTTP/1.1 405 Method Not Allowed', true, 405);
header('Allow: OPTIONS, GET');
exit;
}
if (mb_strtolower($_SERVER['REQUEST_METHOD']) === 'options') {
header('Access-Control-Allow-Methods: OPTIONS, GET');
header('Access-Control-Max-Age: 0');
exit;
}
$data = [
'name' => 'Mike',
'surname' => 'Stone',
'date' => date('Y-m-d H:i:s'),
];
echo json_encode($data);
Важный момент: хоть хостинг и можно арендовать бесплатно и бесплатно же получить тестовый домен (как в примере выше), но для нашей задачи нам нужен SSL сертификат для домена (в конце объясню почему). SSL сертификат можно бесплатно получить на хостинге, который упомянается в этой статье, но домен придётся купить (можно там же).
После покупки домена необходимо вернуться к файлу index.html - заполняем свойство data_host:
data_host = 'https://ваш-купленный-домен/get-data.php';
Создаём локальное приложение
1. Переходим по адресу https://адрес_вашего_битрикс24/devops/section/standard/
2. Выбираем "Локальное приложение".
3. Заполняем:
- Название приложения
- Название пункта меню Русский (ru) *
Выбираем:
- Статичное
- Настройка прав -> Пользователи (user)
4. Добавляем наш архив в "Архив с вашим проложением (zip) *"
Тестируем
Все приготовления завершены. Можно запускать.
Открываем страницу нашего приложения. Найти её можно на странице редактирования приложения:
Нажимаем на "Получить данные стороннего ресурса". Видим данные с нашего удалённого сервера:
Резюме
В этой статье мы создали простое локальное статичное приложение битрикс24. При нажатии на кнопку внутри crm bitrix24 мы отправляем запрос на сторонний ресурс, получаем от него ответ и выводим на экран.
Таким образом можно получать любые данные со стороннего ресурса, к примеру формировать прайс-листы компании, получать выборку данных из базы данных и ещё много чего. Конечно, код необходимо будет существенно изменить, но принцип останется тот же.
Теперь пара слов о важных моментах в статье:
- В файле get-data.php мы проверяем входящий запрос на тип запроса и, если это options, возвращаем определенные заголовки. Это связано с тем, что нельзя просто так отправлять http-запросы на сторонние ресурсы. Для этого необходимо, чтобы сторонний ресурс подтвердил в заголовках кому можно получать ответ. Это мы и делаем заголовком Access-Control-Allow-Origin. Подробнее можно почитать тут.
- В описании создания файла get-data.php на хостинге было сказано, что нам необходимо купить домен (практически всё остальное можно получить бесплатно). Так вот это также связано с кроссдоменными запросами из предыдущего пункта: их можно отправлять только по защищенному соединению. Для этого необходим домен и SSL-сертификат для него. Если вы следовали этой статье, то можно получить бесплатный сертификат тут (Нажимаем "Заказать сертификат", нажимаем "Заказать" напротив "SSL Let's Encrypt" и далее выбираем купленный вами домен).
- Последний, но не менее важный момент - безопасность. В этой статье мы опустили этот вопрос, но в реальном приложении это необходимо будет предусмотреть (заголовки можно подделать, а сам запрос необязательно слать из браузера).