👩🏾‍🍳 🛀🏼 🧓🏿 स्क्रैच से Bitrix24 के लिए एक आवेदन पत्र बनाना 😛 🕥 🚴

बिट्रिक्स 24 की कार्यक्षमता का विस्तार करने के लिए एप्लिकेशन का उपयोग करना सुविधाजनक है। यह आलेख वर्णन करता है कि खरोंच से स्थानीय सर्वर रहित अनुप्रयोग कैसे बनाया जाए।

हमारे एप्लिकेशन को स्थापित करने के लिए, हमें स्वयं बिट्रिक्स 24 पोर्टल की आवश्यकता होती है, जिसमें हमारे पास प्रशासक अधिकार या एप्लिकेशन इंस्टॉल करने और संपादित करने का अधिकार है।

यदि ऐसा कोई पोर्टल नहीं है, तो आप इसे यहां बना सकते हैं।

एप्लिकेशन कंट्रोल पैनल 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)* ।
फिर "सहेजें" बटन पर क्लिक करें

आइए देखें कि हमें क्या मिला।

पर पर क्लिक करें और देखें ... हमारे आवेदन की साइट पर एक खाली जगह।

इस स्तर पर हमारे लिए आवश्यक सब कुछ अब डेवलपर के कंसोल में है।

हम देखते हैं कि हमारे आवेदन ने प्राधिकरण के लिए आवश्यक डेटा सफलतापूर्वक प्राप्त कर लिया है।

वादा के साथ आधिकारिक जावास्क्रिप्ट पुस्तकालय

कॉलबैक फ़ंक्शंस का उपयोग करने के अपने फायदे हैं, लेकिन हर कोई स्थिति को पसंद नहीं करता है या हमेशा नहीं करता है।
इसलिए, हम वादा शैली में एक ही परिणाम प्राप्त करने की कोशिश करेंगे। ऐसा करने के लिए, हमारे 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 फ़ाइल खोलते हैं, तो हम देखेंगे कि त्रुटि हैंडलिंग भी काम करती है।

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>

हम फिर से संग्रह करते हैं, हमारे आवेदन को फिर से अपडेट करते हैं, फिर से देखें, सब कुछ फिर से काम करता है।

विकास के उपकरण

मेरा मानना है कि इस समय तक आप पहले से ही आवेदन को संग्रहीत करने और अद्यतन करने की प्रक्रिया से काफी थक चुके हैं।
आइए विकास की प्रक्रिया को थोड़ा और सुविधाजनक और त्वरित बनाने की कोशिश करें।
इसके लिए हमें नोडज की जरूरत है।
आप इसकी उपलब्धता कंप्यूटर पर देख सकते हैं:

 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}`));

सर्वर शुरू करने के लिए हमें इस फ़ाइल की आवश्यकता है। तीसरे पक्ष के एप्लिकेशन के सर्वर को POST अनुरोधों का जवाब देना होगा क्योंकि create-react-app और angular-cli में निर्मित सर्वर काम नहीं करेंगे। सभी के लिए लेकिन 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 स्क्रिप्ट जोड़ें 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 के बारे में बिल्कुल नहीं है।
यह तब होता है जब सेंट पीटर्सबर्ग में एक राहगीर दूसरे को बताता है कि पीटर और पॉल किले को कैसे प्राप्त किया जाए और फिर तीसरे ने प्रतिकृति के साथ हस्तक्षेप किया:
"हाँ, आपका अत्याचारी पीटर था। एक अत्याचारी और एक निरंकुश। और उसकी मूंछें मूर्ख हैं।"

यदि ARTICLE में कोड पर या दृष्टिकोण पर या उपयोग किए गए पैटर्न पर रचनात्मक टिप्पणियां हैं - स्वागत है।

स्क्रैच से Bitrix24 के लिए एक आवेदन पत्र बनाना

आधिकारिक जावास्क्रिप्ट पुस्तकालय

वादा के साथ आधिकारिक जावास्क्रिप्ट पुस्तकालय

BX24 का अनौपचारिक पुस्तकालय

विकास के उपकरण

More articles: