🤕 ☝🏾 🧖🏻 إنشاء تطبيق ل Bitrix24 من الصفر 🍕 🤸🏼 💐

أنها مريحة لاستخدام التطبيقات لتوسيع وظائف Bitrix24. توضح هذه المقالة كيفية إنشاء تطبيق serverless محلي من البداية.

لتثبيت تطبيقنا ، نحتاج إلى بوابة bitrix24 نفسها ، والتي لدينا فيها حقوق المسؤول أو الحق في تثبيت التطبيقات وتعديلها.

إذا لم يكن هناك مثل هذا المدخل ، يمكنك إنشائه هنا .

تتوفر لوحة تحكم التطبيق على https://<your-portal-name>.bitrix24.com/marketplace/local/ .

حدد العنصر . بعد النقر فوق الزر " ، ندخل في مربع حوار إنشاء التطبيق.

املأ الحقول التالية:	اسم الحقل	قيمة
اسم التطبيق *	exampleApp	أو أي شيء آخر
الروسية (رو)	مثال التطبيق	يمكنك أيضًا ملء القيم الخاصة باللغات الأخرى المرغوبة.
المستخدمين (المستخدم)	وضع علامة قبالة	نحتاج الآن إلى هذا الإذن فقط ، ولكن في المستقبل ، يمكن تعديل أذونات التطبيق

هنا سنحتاج إلى التوقف ، حيث لا يوجد شيء نضيفه. اترك علامة تبويب المتصفح مفتوحة وابدأ في إنشاء تطبيقنا.

مكتبة جافا سكريبت الرسمية

فلنقم بإنشاء مجلد باسم اعتباطي وحتى الآن هو ملف 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)* في مربع حوار إنشاء التطبيق.
ثم انقر فوق الزر "حفظ"

دعونا نرى ما حصلنا عليه.

انقر على " وانظر ... مكان فارغ على موقع طلبنا.

كل ما هو ضروري بالنسبة لنا في هذه المرحلة هو الآن في وحدة تحكم المطور.

نرى أن طلبنا تلقى البيانات اللازمة للترخيص بنجاح.

مكتبة جافا سكريبت الرسمية مع الوعد

استخدام وظائف رد الاتصال له مزاياه ، ولكن لا يحب الجميع أو لا يناسب دائمًا الموقف.
لذلك ، سنحاول الحصول على نفس النتيجة في أسلوب الوعد. للقيام بذلك ، قم بتغيير 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 المعدّل في أرشيف مضغوط ويتم تحديثه في تطبيقنا.
نحن ننظر إلى النتيجة - كل شيء يعمل.
إذا index.html ملف index.html محليًا في المتصفح ، فسنرى أن معالجة الأخطاء تعمل أيضًا.

مكتبة غير رسمية من BX24

إذا كنت تخطط لكتابة تطبيق مكتوب بالخطوط (يمكنك استخدامه مع جافا سكريبت) و / أو لديك مغامرات معتدلة ، فيمكنك محاولة استخدام مكتبات الجهات الخارجية للترخيص.
على سبيل المثال هذا واحد .
في هذه الحالة ، يجب تغيير 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 ملف 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 والمجلدات public
في المجلد 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> </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>

رمز المشروع النهائي لاستخدام المكتبة الرسمية هنا .

يمكنك التعرف على جميع الأساليب والقدرات الممكنة لواجهة برمجة التطبيقات هنا .

شفرة المصدر يمكن رؤيتها هنا .

ونقطة أخيرة. الأساليب والتقنيات المذكورة أعلاه ليست مجموعة من أفضل الممارسات. إنه بالأحرى اقتراح لمناقشة بناءة.

UPD: إذا كنت تريد التحدث عن 1C-Bitrix أو Bitrix24 ، فالرجاء بذل جهد فكري قليل وإدراك أن المقالة لا تتعلق Bitrix24 وليس على الإطلاق حول 1C-Bitrix.
هذا إذا كان أحد المارة في سانت بطرسبرغ يشرح للآخرين كيفية الوصول إلى قلعة بطرس وبولس ثم يتدخل الثالث مع النسخة المتماثلة:
"نعم ، طاغيك كان بيتر الأول. طاغية ومستبد. وشاربه غبي".

إذا كانت هناك تعليقات بناءة على الكود في المادة أو على الأساليب أو على الأنماط المستخدمة - مرحبًا بك.

إنشاء تطبيق ل Bitrix24 من الصفر

مكتبة جافا سكريبت الرسمية

مكتبة جافا سكريبت الرسمية مع الوعد

مكتبة غير رسمية من BX24

أدوات التطوير

More articles: