🏮 👆🏻 ✍🏽 从头开始为Bitrix24创建应用程序 😎 ℹ️ 🎬

使用应用程序来扩展Bitrix24的功能很方便。本文介绍如何从头开始创建本地无服务器应用程序。

要安装我们的应用程序，我们需要bitrix24门户本身，在其中我们具有管理员权限或安装和编辑应用程序的权限。

如果没有此类门户，则可以在此处创建。

可通过https://<your-portal-name>.bitrix24.com/marketplace/local/访问应用程序控制面板： https://<your-portal-name>.bitrix24.com/marketplace/local/ 。

选择项目。单击按钮后，我们进入应用程序创建对话框。

填写以下字段：	栏位名称	价值
申请名称*	exampleApp	或其他
俄文（ru）	应用实例	您还可以填写其他所需语言的值。
用户数	勾掉	现在我们只需要此权限，但是将来可以调整应用程序的权限

在这里，我们将需要停止，因为没有什么可添加的。将浏览器选项卡保持打开状态，然后开始创建我们的应用程序。

官方JavaScript库

让我们创建一个具有任意名称的文件夹，并且到目前为止是其中唯一包含以下内容（源代码）的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> <!--   BX24 --> <script src="https://api.bitrix24.com/api/v1/"></script> </head> <body> <script> /** *   `init`    callback- * -   */ BX24.init(app); function app() { const initDate = BX24.getAuth(); console.log("ititDate: ", initDate); } </script> </body> </html>

我们将index.html文件放置在zip存档中，并将此存档指定为字段的值。在应用程序创建对话框中， (zip)* 。
然后点击“保存”按钮

让我们看看我们得到了什么。

单击然后在我们的应用程序站点上看到一个空白处。

现在，我们现阶段所需的所有内容都在开发人员的控制台中。

我们看到我们的应用程序已成功收到授权所需的数据。

带有承诺的官方JavaScript库

使用回调函数有其优势，但并非每个人都喜欢或并不总是适合这种情况。
因此，我们将尝试在promise样式中获得相同的结果。为此，请更改我们的index.html （源代码）

  <body> <script> /** - *   `init`    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文件，我们将看到错误处理也有效。

BX24的非官方库

如果您打算使用打字稿编写应用程序（可以将其与javascript一起使用）和/或具有中等冒险精神，则可以尝试使用第三方库进行授权。
例如这个。
在这种情况下，我们的index.html将需要进行如下更改（源代码）：

  <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Bitrix24 app tutorial</title> <!--   BX24 --> - <script src="https://api.bitrix24.com/api/v1/"></script> + <script src="https://unpkg.com/bx24@latest/lib/index.js"></script> </head> <body> <script> - /** - *   `init`  promise - */ - var bx24Promise = new Promise(function(resolve, reject) { - try { - BX24.init(resolve); - } catch (err) { - resolve(err); - } - }); + var bx24 = new BX24(); - bx24Promise - .then(function() { - app(); + bx24.getAuth() + .then(function(auth) { + console.log(auth); }) - .catch(function(err) { - console.error(err); - }); - - function app() { - const initDate = BX24.getAuth(); - console.log("ititDate: ", initDate); - } </script> </body> </html>

我们再次存档，再次更新我们的应用程序，再次查看，一切再次正常。

开发工具

我相信到这个时候，您已经对归档和更新应用程序的过程已经感到厌倦了。
让我们尝试使开发过程更加方便快捷。
为此，我们需要nodejs 。
您可以通过以下方法在计算机上检查其可用性：

 node -v

在我们项目的文件夹中，初始化npm：

 npm init -y

安装必要的软件包：

 npm i axios react react-dom bx24 npm i -D parcell-bundler express

您可以使用create-react-ap或angular-cli以相同的方式创建项目。

所有更改后的项目状态都可以在此处查看。

在我们项目的根目录下创建server.js文件

 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:${port}`));

我们需要此文件来启动服务器。内置于create-react-app和angular-cli的服务器将无法工作，因为第三方应用程序的服务器必须响应POST请求。对于除127.0.0.1所有代码，仍然存在https要求。

创建src和公用文件夹
在公用文件夹中，传输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> </head> <body> <div id="root"></div> <script src="../src/index.js"> </script> </body> </html>

在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 (!this.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>...</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" }

此外，由于start命令和watch都没有结束，因此它们必须并行运行。为此，请在两个命令行中运行

 npm run watch

和

 npm run start

我们通过在Bitrix24中编辑应用程序来完成开发环境的设置。
让我们转到应用程序的编辑对话框并在字段中进行指示
*值http://127.0.0.1:3000/

转到查看您的应用程序：
您应该看到带有当前用户名的问候语：

如果使用官方库，则只有两个文件会有所不同：

 // 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>

使用官方库的最终项目代码在这里。

您可以在此处熟悉API的所有可能方法和功能。

源代码可以在这里看到。

最后一点。上述方法和技术不是最佳实践的集合。这只是一个建设性讨论的建议。

UPD：如果您想谈一谈1C-Bitrix或Bitrix24，请花些心血，并意识到本文不是关于Bitrix24的，也不是关于1C-Bitrix的。
如果是在圣彼得堡，一个路人向另一个人解释了如何到达彼得保罗要塞，然后第三个人干预了复制品：
“是的，你的暴君是彼得一世。一个暴君和一个暴君。他的胡须很蠢。”

如果对条款中的代码，所使用的方法或模式有建设性的意见，欢迎您。

从头开始为Bitrix24创建应用程序

官方JavaScript库

带有承诺的官方JavaScript库

BX24的非官方库

开发工具

More articles: