СОЗДАНИЕ ПРИЛОЖЕНИЯ В BITRIX24, КАК В ИНСТРУМЕНТАЛЬНОЙ СРЕДЕ РАЗРАБОТКИ Текст научной статьи по специальности «Компьютерные и информационные науки»

Епифанова А.В.

студентка 4 курса факультета естествознания, математики и информатики филиала Российского государственного профессионально-педагогического

университета в г. Н. Тагил г. Нижний Тагил, Россия педагог дополнительного образования, МАОУ СОШ №24

п. Горноуральский Кокшарова Елена Александровна к.п.н., доцент кафедры информационных технологий Филиала РГППУ в г. Нижнем Тагиле г.Нижний Тагил, Россия

СОЗДАНИЕ ПРИЛОЖЕНИЯ В BITRIX24, КАК ИНСТРУМЕНТАЛЬНАЯ

СРЕДА РАЗРАБОТКИ Аннотация

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

Ключевые слова: Bitrix24, приложение, режим разработчика, библиотека, сайт, код, HTML, javascript

Epifanova A. V.

4th year student of the Faculty of Natural Science, Mathematics and Informatics branch of the Russian State Vocational Pedagogical University in N. Tagil Nizhny

Tagil, Russia

teacher of additional education, MAOU secondary school №24 Gornouralsky

settlement

CREATING AN APP IN BITRIX24 AS A DEVELOPMENT ENVIRONMENT

Annotation

The Internet is one of the main components of today's society. It helps to develop processes that have an impact in different areas of our lives. But these processes need to be controlled and analyzed. For this, there is Bitrix24. The article considers the possibility of implementing your own application for controlling processes and implementing a site that will be hooked to the built-in Bitrix24 function.

Keywords: Bitrix24, application, developer mode, library, website, code, HTML, javascript

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

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

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

= Битрикс 24

Совместная работа Задачи и Проекты CRM

Маркетинг Сайты v Магазины Компания Автоматизация

Приложения л Маркет

Разработчикам

Рис.1. Режим выпадающего меню В правом меню необходимо в выпадающем меню «Приложения» выбрать раздел «Разработчикам».

Рис.2. Меню разделов для разработчика

Далее нажимаем «Другое» и в появившемся окне выбираем «Локальное приложение».

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

После согласия выпадающее окно исчезает и необходимо еще раз нажать на «Локальное приложение». Появится окно создания приложения.

Рис.3. Окно отображения ссылки на ПО Выбираем «Статичное».

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

<meta name='rvi ewport" conitent="wi dth=devi ce-wi dth, i niti al-seal e=l. 0" /> cscr i pt src="https://api. l!ii triхЗдГсот/арп /vl/"x/scri|pt>

* передаем методу "init' e качестве параметра call back-функцию

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

Для редактирования прав доступа необходимо в меню «Разработчикам» перейти на вкладку интеграции, где будет показан список всех созданных

приложений. Нажимаем на кнопку и выбираем «Права доступа

сотрудников.

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

Рис.5. Режим поиска сотрудников компании. Официальная javascript -библиотека c promise Использование callback-функций имеет свои преимущества, но не всем нравится или не всегда подходит к ситуации.

Поэтому попробуем получить тот же результат в promise-стиле. Для этого изменим наш index.html.

<body>

<script>

/**

- * передаем методу в качестве параметра callback-функцию

- * - наше приложение

- */

- BX24.init(app);

+ * оборачиваем метод ~init~ в promise

+ */

+ var bx24Promise = new Promise(function(resolve, reject) {

+ try {

+ BX24.init(resolve);

+ } catch (err) {

+ resolve(err);

+ }

+ }); +

+ bx24Promise

+ .then(function() {

+ app();

+ })

+ })

+ .catch(function(err) { + console.error(err);

+ });

После этого переходим https://<your-portal-

name>.bitrix24.com/marketplace/local/list/.

Переходим к редактированию нашего приложения. Измененный файл index.html помещаем в zip-архив и обновляем его в нашем приложении. Смотрим результат — все работает.

Если откроем файл index.html в браузере локально, то увидим, что обработка ошибок тоже работает.

| Ст? О Инспектор 0 Консоль О Отладчик {} Стили О Профайлер О Память Сеть Э Хранилище "И" Поддержка доступности

{¡¡¡) Поиск в консоли

1ЕШЭЯ1

Предупреждения

ИПЯКВНЯРШТО! CSS XHR Запроа

О к туреЕггог: "ВХ24 is null"

арр file:///C:/Users/eustatos/Docur)ents/develop/bitrix24-app-tutorial/index.htinl:33

<anon>mous> file:///C:/Lisersy,eustatos/Docuiients/develop/bitrix24-app-tLrtorial/index.htnil:26 Q I» Error: unable to initialize Bitrix24 JS library!

Создадим в корне нашего проекта файл server.j s const express = require('express');

const app = express();

const port = process.env.PORT || 3000; const www = process.env.WWW || './dist'; app.use(express.static(www)); console.log(~serving ${www}~); app.get('*', (req, res) => {

res.sendFile(~index.html\ { root: www }); });

app.post('*', (req, res) => {

res.sendFile(~index.html\ { root: www });

});

app.listen(port, () => console.log(~listening on http://localhost:${portD);

Этот файл нам нужен для запуска сервера. Встроенные в create - react -app и angular-cli серверы не подойдут, так как сервер стороннего приложения должен отвечать на POST запросы. Для всех, кроме 127.0.0.1 есть еще требования к наличию https.

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

<metа ^ name='rvi ewport " content =="wi dth=devi ce-wi dth , i niti al-seal e=l. 0" />

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

// src/index.js import App from './app/app'; import React from "react"; import ReactDOM from "react-dom";

import "./css/styles.css";

const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);

// app/app.js

import React, { Component } from "react";

import getCurrentUser from "./services/get-current-

user.service";

class App extends Component { constructor(props) { super(props); this.state = { loading: true

};

getCurrentUser().then(currentUser => { this.setState({ user: currentUser, loading: false }); });

}

render() {

if (Ithis.state.loading) { return (

<div className="App"> <h1>

Hello {this.state.user.LAST_NAME} {this.state.user.NAME} </h1>

<h2>Start editing to see some magic happen!</h2> </div>

} else { return (

<div>3arpy3Ka...</div>

)

}

}

}

export default App;

// app/services/get-current-user.service.js import { BX24 } from "bx24"; import axios from "axios";

function getCurrentUser() { const bx24 = new BX24(); const urlParams = new URLSearchParams(window.location.search); const baseUrl = "

${urlParams.get("PROTOCOL") === 0 ? "https" : "http"}://${urlParams.get("DOMAIN")}

const currentUserPromise = new Promise((resolve, reject) =>

{

bx24.getAuth().then(auth => { axios({

method: "get",

url: baseUrl + "/rest/user.current?auth=" + auth.ACCESS_TOKEN

}).then(response => {

resolve(response.data.result); }); }); });

return currentUserPromise;

export default getCurrentUser;

Если package.json еще не создан, выполним: npm init -y

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

"scripts": { //

"start": "node server.js",

"watch": "parcel watch ./public/index.html"

}

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

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

Укажите ссылку значение http://127.0.0.1:3000/

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

Пример приложения tV

Hello

Start editing to see some magic happen!

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

}

// src/app/serviced/get-current-user.service.js function getCurrentUser() {

const currentUserPromise = new Promise((resolve, reject) =>

{

BX24.init(function() {

BX24.callMethod("user.current", {}, function(res) {

resolve(res.answer.result); }); }); });

return currentUserPromise;

}

export default getCurrentUser;

<!-- public/index.html --> <!DOCTYPE html> <html lang="en"> <head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Bitrix24 app tutorial</title>

<script src="https://api.bitrix24.com/api/v1/"></script> </head> <body>

<div id="root"></div> <script src="../src/index.js"> </script> </body> </html>

Отметим, что разработка приложений в Bitrix24 завязана на использовании HTML и CSS, поэтому это является увлекательным и интересным заданиям. В процессе их разработки не только происходит закрепление знаний и умений по программированию, но и осуществляется работа с разметкой страницы. Таким образом, IT-специалист выступает в роли как разработчика, так и дизайнера,

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

СПИСОК ИСТОЧНИКОВ

1. 1С-Битрикс Создание отдела продаж с Битрикс24.CRM / 1С-Битрикс. — : , 12 декабря 2017. — 180 c. — Текст : непосредственный.

2. Городкова К.А. Настройки сайтов и страниц / Городкова Ксения. — Текст : электронный // Настройки сайтов и страниц : [сайт]. — URL: https://helpdesk.bitrix24.ru/open/6527585/ (дата обращения: 18.11.2022).

3. Промисы. — Текст : электронный // Промисы, async/await : [сайт]. — URL: https://learn.javascript.ru/promise-basics (дата обращения: 19.11.2022).

4. Язык JavaScript: что это и для чего?. — Текст : электронный // АЙТИЛОГИЯ : [сайт]. — URL: https://itlogia.ru/article/yazyk_javascript_chto_eto_i_dlya_chego (дата обращения: 19.11.2022).