Il est pratique d'utiliser des applications pour étendre les fonctionnalités de Bitrix24. Cet article explique comment créer une application locale sans serveur à partir de zéro.
Pour installer notre application, nous avons besoin du portail bitrix24 lui-même, dans lequel nous avons des droits d'administrateur ou le droit d'installer et de modifier des applications.
S'il n'y a pas un tel portail, vous pouvez le créer ici .
Le panneau de configuration de l'application est disponible sur https://<your-portal-name>.bitrix24.com/marketplace/local/ .
Sélectionnez l'élément
Ici, nous devrons nous arrêter, car il n'y a rien à ajouter. Laissez l'onglet du navigateur ouvert et commencez à créer notre application.
Bibliothèque javascript officielle
Créons un dossier avec un nom arbitraire et jusqu'à présent le seul fichier index.html avec le contenu suivant ( code source ):
<!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>
Nous index.html fichier index.html dans l'archive zip et spécifions cette archive comme la valeur du champ (zip)* dans la boîte de dialogue de création d'application.
Cliquez ensuite sur le bouton "Enregistrer"
Voyons ce que nous avons.
Cliquez sur
Tout ce qui nous est nécessaire à ce stade est maintenant dans la console du développeur.
Nous constatons que notre candidature a bien reçu les données nécessaires à l'autorisation.
Bibliothèque javascript officielle avec promesse
L'utilisation des fonctions de rappel a ses avantages, mais tout le monde n'aime pas ou ne correspond pas toujours à la situation.
Par conséquent, nous essaierons d'obtenir le même résultat dans le style de promesse. Pour ce faire, modifiez notre index.html ( code source )
<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); + });
Après cela, accédez à https://<your-portal-name>.bitrix24.com/marketplace/local/list/ .
Nous procédons à l'édition de notre application. Le fichier index.html modifié est placé dans une archive zip et mis à jour dans notre application.
Nous regardons le résultat - tout fonctionne.
Si nous ouvrons le fichier index.html localement dans le navigateur, nous verrons que la gestion des erreurs fonctionne également.
La bibliothèque non officielle de BX24
Si vous prévoyez d'écrire une application en texte dactylographié (vous pouvez l'utiliser avec javascript) et / ou que vous avez un aventurisme modéré, vous pouvez essayer d'utiliser des bibliothèques tierces pour l'autorisation.
Par exemple celui-ci .
Dans ce cas, notre index.html devra être modifié comme suit ( code source ):
<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>
Nous archivons à nouveau, mettons à jour notre application à nouveau, regardez à nouveau, tout fonctionne à nouveau.
Outils de développement
Je pense qu'à ce stade, vous êtes déjà assez fatigué de la procédure d'archivage et de mise à jour de l'application.
Essayons de rendre le processus de développement un peu plus pratique et rapide.
Pour cela, nous avons besoin de nodejs .
Vous pouvez vérifier sa disponibilité sur l'ordinateur en:
node -v
Dans le dossier de notre projet, initialisez npm:
npm init -y
Installez les packages nécessaires:
npm i axios react react-dom bx24 npm i -D parcell-bundler express
Vous pouvez créer un projet de la même manière en utilisant create-react-ap ou angular-cli .
Le statut du projet après toutes les modifications peut être consulté ici .
Créez le fichier server.js à la racine de notre projet
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}`));
Nous avons besoin de ce fichier pour démarrer le serveur. Les serveurs intégrés dans create-react-app et angular-cli ne fonctionneront pas, car le serveur de l'application tierce doit répondre aux requêtes POST. Pour tous sauf 127.0.0.1 il y a encore des exigences pour la présence de https .
Créer public dossiers src et public
Dans le dossier public , transférez index.html et changez son contenu en:
<!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>
Dans le dossier src , créez les fichiers
Si package.json n'a pas encore été créé, exécutez:
npm init -y
Ajoutez des scripts à package.json :
"scripts": { // "start": "node server.js", "watch": "parcel watch ./public/index.html" }
De plus, étant donné que la commande de start et la watch ne se terminent pas, elles doivent être exécutées en parallèle. Pour ce faire, exécutez sur deux lignes de commande
npm run watch
et
npm run start
Nous finissons de configurer l'environnement de développement en éditant notre application dans Bitrix24.
Allons dans la boîte de dialogue d'édition de notre application et indiquons dans le champ
* valeur * http://127.0.0.1:3000/
Allez voir votre candidature:
Vous devriez voir un message d'accueil avec le nom de l'utilisateur actuel:
Si vous utilisez la bibliothèque officielle, seuls deux fichiers différeront:
et
<!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>
Le code de projet final pour l'utilisation de la bibliothèque officielle est ici .
Vous pouvez vous familiariser avec toutes les méthodes et capacités possibles de l'API ici .
Le code source peut être vu ici .
Et un dernier point. Les méthodes et techniques ci-dessus ne constituent pas un ensemble de meilleures pratiques. Il s'agit plutôt d'une suggestion de discussion constructive.
UPD: si vous voulez parler de 1C-Bitrix ou Bitrix24, veuillez faire un petit effort intellectuel et réaliser que l'article ne concerne pas Bitrix24 et pas du tout 1C-Bitrix.
C'est si à Saint-Pétersbourg un passant explique à un autre comment se rendre à la forteresse Pierre et Paul, puis le troisième intervient avec la réplique:
"Oui, ton tyran était Peter I. Un tyran et un despote. Et sa moustache est stupide."
S'il y a des commentaires constructifs sur le code dans l'ARTICLE ou sur les approches ou sur les modèles utilisés - bienvenue.