Es conveniente utilizar aplicaciones para ampliar la funcionalidad de Bitrix24. Este artículo describe cómo crear una aplicación local sin servidor desde cero.
Para instalar nuestra aplicación, necesitamos el portal bitrix24, en el que tenemos derechos de administrador o el derecho de instalar y editar aplicaciones.
Si no existe dicho portal, puede crearlo aquí .
El panel de control de la aplicación está disponible en https://<your-portal-name>.bitrix24.com/marketplace/local/ .
Seleccione el artículo
Aquí tendremos que parar, ya que no hay nada que agregar. Deje abierta la pestaña del navegador y comience a crear nuestra aplicación.
Biblioteca oficial de javascript
Creemos una carpeta con un nombre arbitrario y hasta ahora el único archivo index.html con los siguientes contenidos ( código fuente ):
<!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> <script> BX24.init(app); function app() { const initDate = BX24.getAuth(); console.log("ititDate: ", initDate); } </script> </body> </html>
index.html archivo index.html en el archivo zip y especificamos este archivo como el valor del campo (zip)* en el diálogo de creación de la aplicación.
Luego haga clic en el botón "Guardar"
Veamos que tenemos.
Haga clic en
Todo lo necesario para nosotros en esta etapa ahora está en la consola del desarrollador.
Vemos que nuestra aplicación ha recibido con éxito los datos necesarios para la autorización.
Biblioteca oficial de JavaScript con promesa
El uso de funciones de devolución de llamada tiene sus ventajas, pero no a todos les gusta o no siempre se ajusta a la situación.
Por lo tanto, trataremos de obtener el mismo resultado en el estilo de promesa. Para hacer esto, cambie nuestro index.html ( código fuente )
<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); + });
Después de eso, vaya a https://<your-portal-name>.bitrix24.com/marketplace/local/list/ .
Procedemos a editar nuestra aplicación. El archivo index.html modificado se coloca en un archivo zip y se actualiza en nuestra aplicación.
Observamos el resultado: todo funciona.
Si abrimos el archivo index.html localmente en el navegador, veremos que el manejo de errores también funciona.
La biblioteca no oficial de BX24
Si planea escribir una aplicación en mecanografiado (puede usarla con JavaScript) y / o tiene un aventurerismo moderado, puede intentar usar bibliotecas de terceros para obtener autorización.
Por ejemplo este .
En este caso, nuestro index.html deberá cambiarse de la siguiente manera ( código fuente ):
<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>
Archivamos nuevamente, actualizamos nuestra aplicación nuevamente, miramos nuevamente, todo funciona nuevamente.
Herramientas de desarrollo
Creo que en este momento ya está bastante cansado del procedimiento para archivar y actualizar la aplicación.
Intentemos que el proceso de desarrollo sea un poco más conveniente y rápido.
Para esto necesitamos nodejs .
Puede verificar su disponibilidad en la computadora:
node -v
En la carpeta de nuestro proyecto, inicialice npm:
npm init -y
Instale los paquetes necesarios:
npm i axios react react-dom bx24 npm i -D parcell-bundler express
Puede crear un proyecto de la misma manera usando create-react-ap o angular-cli .
El estado del proyecto después de todos los cambios se puede ver aquí .
Cree el archivo server.js en la raíz de nuestro proyecto
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}`));
Necesitamos este archivo para iniciar el servidor. Los servidores integrados en create-react-app y angular-cli no funcionarán, ya que el servidor de la aplicación de terceros debe responder a las solicitudes POST. Para todos menos 127.0.0.1 todavía hay requisitos para la presencia de https .
Crear src y carpetas public
En la carpeta public , transfiera index.html y cambie su contenido a:
<!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>
En la carpeta src , cree los archivos
Si todavía no se ha creado package.json , ejecute:
npm init -y
Agregue scripts a package.json :
"scripts": { // "start": "node server.js", "watch": "parcel watch ./public/index.html" }
Además, dado que tanto el comando de start como el watch no finalizan, deben ejecutarse en paralelo. Para hacer esto, ejecuta dos líneas de comando
npm run watch
y
npm run start
Terminamos de configurar el entorno de desarrollo editando nuestra aplicación en Bitrix24.
Vayamos al diálogo de edición de nuestra aplicación e indiquemos en el campo
* valor * http://127.0.0.1:3000/
Ve a ver tu aplicación:
Debería ver un saludo con el nombre del usuario actual:
Si usa la biblioteca oficial, solo dos archivos serán diferentes:
y
<!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>
El código final del proyecto para usar la biblioteca oficial está aquí .
Puede familiarizarse con todos los métodos y capacidades posibles de la API aquí .
El código fuente se puede ver aquí .
Y un último punto. Los métodos y técnicas anteriores no son un conjunto de mejores prácticas. Es más bien una sugerencia para una discusión constructiva.
UPD: si desea hablar sobre 1C-Bitrix o Bitrix24, haga un pequeño esfuerzo intelectual y tenga en cuenta que el artículo no trata sobre Bitrix24 y no trata en absoluto sobre 1C-Bitrix.
Esto es si en San Petersburgo un transeúnte explica a otro cómo llegar a la Fortaleza de Peter y Paul y luego el tercero interviene con la réplica:
"Sí, tu tirano era Peter I. Un tirano y un déspota. Y su bigote es estúpido".
Si hay comentarios constructivos sobre el código en el ARTÍCULO o sobre los enfoques o los patrones utilizados, bienvenido.