Es ist praktisch, Anwendungen zu verwenden, um die Funktionalität von Bitrix24 zu erweitern. In diesem Artikel wird beschrieben, wie Sie eine lokale serverlose Anwendung von Grund auf neu erstellen.
Um unsere Anwendung zu installieren, benötigen wir das bitrix24-Portal selbst, in dem wir Administratorrechte oder das Recht haben, Anwendungen zu installieren und zu bearbeiten.
Wenn es kein solches Portal gibt, können Sie es hier erstellen.
Das Application Control Panel ist unter https://<your-portal-name>.bitrix24.com/marketplace/local/ .
Wählen Sie den Artikel
Hier müssen wir aufhören, da es nichts hinzuzufügen gibt. Lassen Sie die Registerkarte Browser geöffnet und erstellen Sie unsere Anwendung.
Offizielle Javascript-Bibliothek
Erstellen wir einen Ordner mit einem beliebigen Namen und der bislang einzigen index.html Datei mit dem folgenden Inhalt ( Quellcode ):
<!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>
Wir platzieren die Datei index.html im Zip-Archiv und geben dieses Archiv als Wert des Felds an. (zip)* im Dialogfeld zur Anwendungserstellung (zip)* .
Klicken Sie dann auf die Schaltfläche "Speichern"
Mal sehen, was wir haben.
Klicken Sie auf
Alles, was zu diesem Zeitpunkt für uns notwendig ist, befindet sich jetzt in der Entwicklerkonsole.
Wir sehen, dass unser Antrag die für die Autorisierung erforderlichen Daten erfolgreich erhalten hat.
Offizielle Javascript-Bibliothek mit Versprechen
Die Verwendung von Rückruffunktionen hat ihre Vorteile, aber nicht jeder mag oder passt nicht immer zur Situation.
Daher werden wir versuchen, das gleiche Ergebnis im Versprechungsstil zu erzielen. Ändern Sie dazu unsere index.html ( Quellcode )
<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); + });
Gehen Sie danach zu https://<your-portal-name>.bitrix24.com/marketplace/local/list/ .
Wir bearbeiten unsere Anwendung. Die geänderte Datei index.html wird in einem Zip-Archiv abgelegt und in unserer Anwendung aktualisiert.
Wir schauen uns das Ergebnis an - alles funktioniert.
Wenn wir die Datei index.html lokal im Browser öffnen, werden wir feststellen, dass die Fehlerbehandlung auch funktioniert.
Die inoffizielle Bibliothek von BX24
Wenn Sie vorhaben, eine Anwendung in Typoskript zu schreiben (Sie können sie mit Javascript verwenden) und / oder mäßigen Adventurismus haben, können Sie versuchen, Bibliotheken von Drittanbietern für die Autorisierung zu verwenden.
Zum Beispiel dieser .
In diesem Fall muss unsere index.html wie folgt geändert werden ( Quellcode ):
<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>
Wir archivieren erneut, aktualisieren unsere Anwendung erneut, schauen erneut, alles funktioniert wieder.
Entwicklungswerkzeuge
Ich glaube, dass Sie zu diesem Zeitpunkt das Verfahren zum Archivieren und Aktualisieren der Anwendung bereits ziemlich satt haben.
Versuchen wir, den Entwicklungsprozess etwas komfortabler und schneller zu gestalten.
Dafür brauchen wir nodejs .
Sie können die Verfügbarkeit auf dem Computer überprüfen, indem Sie:
node -v
Initialisieren Sie im Ordner unseres Projekts npm:
npm init -y
Installieren Sie die erforderlichen Pakete:
npm i axios react react-dom bx24 npm i -D parcell-bundler express
Sie können ein Projekt auf die gleiche Weise mit create-react-ap oder angular-cli create-react-ap .
Der Status des Projekts nach allen Änderungen kann hier angezeigt werden .
Erstellen Sie die Datei server.js im Stammverzeichnis unseres Projekts
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}`));
Wir benötigen diese Datei, um den Server zu starten. Die in create-react-app und angular-cli Server funktionieren nicht, da der Server der Drittanbieteranwendung auf POST-Anforderungen antworten muss. Für alle außer 127.0.0.1 gelten weiterhin Anforderungen für das Vorhandensein von https .
Erstellen Sie src und public Ordner
Übertragen Sie im public Ordner index.html und ändern Sie den Inhalt in:
<!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>
Erstellen Sie im Ordner src die Dateien
Wenn package.json noch nicht erstellt wurde, führen Sie package.json :
npm init -y
Fügen Sie Skripte zu package.json :
"scripts": { // "start": "node server.js", "watch": "parcel watch ./public/index.html" }
Da sowohl der Startbefehl als auch der watch nicht enden, müssen sie parallel ausgeführt werden. Führen Sie dazu zwei Befehlszeilen aus
npm run watch
und
npm run start
Zum Abschluss der Einrichtung der Entwicklungsumgebung bearbeiten wir unsere Anwendung in Bitrix24.
Gehen wir zum Bearbeitungsdialog unserer Anwendung und geben im Feld an
* -Wert http://127.0.0.1:3000/
Gehen Sie, um Ihre Bewerbung anzuzeigen:
Sie sollten eine Begrüßung mit dem Namen des aktuellen Benutzers sehen:
Wenn Sie die offizielle Bibliothek verwenden, unterscheiden sich nur zwei Dateien:
und
<!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>
Der endgültige Projektcode für die Nutzung der offiziellen Bibliothek ist hier .
Hier können Sie sich mit allen möglichen Methoden und Möglichkeiten der API vertraut machen.
Der Quellcode ist hier zu sehen.
Und noch ein letzter Punkt. Die oben genannten Methoden und Techniken sind keine Best Practices. Es ist eher ein Vorschlag für eine konstruktive Diskussion.
UPD: Wenn Sie über 1C-Bitrix oder Bitrix24 sprechen möchten, unternehmen Sie bitte ein wenig intellektuelle Anstrengungen und stellen Sie fest, dass es in dem Artikel nicht um Bitrix24 und überhaupt nicht um 1C-Bitrix geht.
Dies ist, wenn in St. Petersburg ein Passant einem anderen erklärt, wie man zur Peter-und-Paul-Festung kommt, und dann der dritte mit der Nachbildung interveniert:
"Ja, dein Tyrann war Peter I. Ein Tyrann und ein Despot. Und sein Schnurrbart ist dumm."
Wenn es konstruktive Kommentare zum Code im ARTIKEL oder zu den Ansätzen oder zu den verwendeten Mustern gibt - willkommen.