स्लैक के लिए एक्शन-सक्षम एप्लिकेशन विकसित करना

अनुवादक से: हम आपके लिए Tomomi Imura द्वारा एक लेख प्रकाशित करते हैं कि कैसे स्लैक के साथ एकीकृत अनुप्रयोग विकसित किया जाए

कार्रवाई वह है जो स्लैक उपयोगकर्ताओं को संदेशों का उपयोग करके आपके आवेदन के साथ बातचीत करने की अनुमति देती है: बग के साथ एक समस्या की रिपोर्ट करें, हेल्पडेस्क को अनुरोध भेजें या कुछ और करें। यह सुविधा टिप्पणी या साझा करने जैसी अंतर्निहित सुविधाओं के समान है।

यह ट्यूटोरियल आपको लाइव एप्लिकेशन बनाने की पूरी प्रक्रिया के बारे में बताएगा।

स्किलबॉक्स सलाह देता है: दो साल का व्यावहारिक कोर्स "मैं एक प्रो वेब डेवलपर हूं । "

हम आपको याद दिलाते हैं: "हैबर" के सभी पाठकों के लिए - "हैबर" प्रचारक कोड का उपयोग करके किसी भी स्किलबॉक्स कोर्स के लिए पंजीकरण करते समय 10,000 रूबल की छूट।

ट्यूटोरियल उन लोगों के लिए उपयोगी होगा जो स्लैक एपीआई सीखना चाहते हैं। एप्लिकेशन विकसित करते समय, Node.js का उपयोग किया जाता है, इसलिए यदि आप दोहराना चाहते हैं कि बातचीत किस बारे में है, तो इसे स्थापित करें।

समाप्त परियोजना गिटहब पर मिल सकती है , ग्लिच पर सरलीकृत संस्करण के साथ।

ClipIt! सुस्त के लिए

हम काल्पनिक ClipIt एप्लिकेशन के लिए स्लैक-ऐप विकसित करेंगे! आइए कल्पना करें कि हम एक वेब सेवा का प्रबंधन कर रहे हैं जो आपको एक वेब पेज के "लेट" भाग को डेटाबेस में संग्रहीत करके अनुमति देता है। उपयोगकर्ता मोबाइल डिवाइस या पीसी से संग्रहीत सामग्री का उपयोग कर सकते हैं, सेवा बहु-प्लेटफ़ॉर्म है। और यह भी क्लिप! आपको कार्रवाई का उपयोग करके एक सुस्त संदेश वातावरण में पाठ संलग्न करने की अनुमति देता है।

यहाँ यह प्रदर्शित करता है कि अनुप्रयोग कैसे काम करता है।



और यहां ClipIt के साथ उपयोगकर्ता इंटरैक्शन एल्गोरिदम है! सुस्त से:

• उपयोगकर्ता संदेश पर मंडराता है और ड्रॉप-डाउन मेनू में क्लिप संदेश का चयन करता है।
• एक संवाद खुलता है, जो अधिक अवसर देता है।
• उपयोगकर्ता कार्रवाई की पुष्टि करता है।
• ClipIt! Slack के लिए क्लिप इट को संदेश निर्यात करता है! डेटाबेस।
• ClipIt! सुस्त के लिए पुष्टि के साथ उपयोगकर्ता को एक डीएम भेजता है।

एप्लिकेशन को कस्टमाइज़ करें

अपने स्लैक खाते में प्रवेश करें और इस लिंक का उपयोग करके एप्लिकेशन बनाएं। उसका नाम और दायरा दर्ज करें।



एप्लिकेशन बनाएं बटन पर क्लिक करें, फिर मूल जानकारी, ऐप क्रेडेंशियल्स पर स्क्रॉल करें।



उसके बाद, साइनिंग सीक्रेट खोलें और कोड को कॉपी करके एनवायरनमेंट वेरिएबल SLACK_SIGNING_SECRET के रूप में रूट नोड में अपनी .env फाइल में उपयोग करें। मैं "रिक्वेस्ट वेरिफिकेशन" सेक्शन में, यह सब क्या है और इसे कैसे इस्तेमाल करना है, थोड़ा कम बताऊंगा।

SLACK_SIGNING_SECRET = 15770a ...

अपने एप्लिकेशन आइकन और विवरण के साथ प्रदर्शन जानकारी भरने के लिए थोड़ा और नीचे स्क्रॉल करें।

अब इंटरएक्टिव अवयवों में अन्तरक्रियाशीलता को सक्षम करें। ऐसा करने पर, आपको पृष्ठ पर अधिक फ़ील्ड दिखाई देंगे।



यह अनुरोध URL दर्ज करने का समय है - यह वह पता है जिसके लिए उपयोगकर्ता द्वारा कार्रवाई शुरू करने पर स्लैक संबंधित डेटा भेजता है।

यह आपके सर्वर का URL होना चाहिए जहां एप्लिकेशन कोड चल रहा है। उदाहरण के लिए, यदि आपने ग्लिच में यह सब पोस्ट किया है, तो आपका URL कुछ ऐसा दिखेगा जैसे example.glitch.me/actions । यदि आप ngrok जैसी सेवाओं के साथ काम करते समय सुरंग का उपयोग करते हैं, तो सेवा URL का उपयोग करें (उदाहरण के लिए, example.ngrok.io , और फिर / क्रियाएँ जोड़ें)।

एक बार जब आप अनुरोध URL दर्ज कर लेते हैं, तो कार्रवाई के लिए नीचे स्क्रॉल करें और नई कार्रवाई बनाएँ पर क्लिक करें। फ़ॉर्म भरें:



बनाएँ पर क्लिक करें, फिर परिवर्तन सहेजें।

इसके बाद, बॉट यूजर्स के पास जाएं। एक बीओटी उपयोगकर्ता जोड़ें पर क्लिक करें और एप्लिकेशन बॉट का नाम दें।



अब Add Bot User पर क्लिक करें और सेव करें।

अगला कदम OAuth & अनुमतियाँ पर जाएं और इंस्टॉल ऐप को कार्यस्थान पर क्लिक करें। स्थापना पूर्ण होने के बाद, पृष्ठ आपको टोकन एक्सेस के साथ OAuth और अनुमति पर वापस कर देगा। बॉट टोकन को कॉपी करें और इसे .env फाइल में सेव करें।

SLACK_ACCESS_TOKEN = xoxb-214 ...

इसके अलावा, स्कोप्स को उसी पेज पर सक्रिय करना होगा। ऐसा करने के बाद, सुनिश्चित करें कि बॉट और कमांड दोनों हाइलाइट किए गए हैं।

अब जब सभी सेटिंग्स तैयार हैं, हम बनाना शुरू करते हैं - हम एक आवेदन लिख रहे हैं।

अनुप्रयोग निर्माण

जैसा कि ऊपर बताया गया है, एप्लिकेशन बनाते समय, Node.js और ExpressJS का उपयोग किया जाता है। इस सब के साथ काम करने के लिए, एक्सप्रेसजेएस निर्भरता, बॉडीपेयर और कुछ और स्थापित करें। तो, मैं qs के साथ axios HTTP अनुरोध क्लाइंट का उपयोग करता हूं।

$ npm स्थापित एक्सप्रेस बॉडी-पार्सर axios qs dotenv --save

सबसे महत्वपूर्ण के साथ शुरू करते हैं। जब हम अधिक सुविधाएँ जोड़ेंगे तो हम बाद में कोड बदल देंगे। सबसे पहले, index.js फ़ाइल बनाएँ। इस फ़ाइल में, हम संबंधित पोर्ट पर सुनने के लिए सर्वर सेट करते हैं:

/* Snippet 1 */ require('dotenv').config(); // To grab env vers from the .env file const express = require('express'); const bodyParser = require('body-parser'); const axios = require('axios'); const qs = require('qs'); const app = express(); // The next two lines will be modified later app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); const server = app.listen(5000); // port 

इससे पहले कि हम जारी रखें, आइए हम उस आरेख पर एक नज़र डालते हैं, जिसके बारे में हम सब कुछ बता रहे हैं।



प्रत्येक थ्रेड प्रारंभ किया जाता है जब उपयोगकर्ता संदेश मेनू में स्थित क्रिया करता है। जैसे ही मैसेज_एक्शन इवेंट में आग लग जाती है, स्लैक पे-लोड एप्लिकेशन को उस अनुरोध URL पर भेजता है जो पहले पंजीकृत था।



समापन बिंदु इस प्रकार लिखा जा सकता है:

 /* Snippet 2 */ app.post('/actions', (req, res) => { const payload = JSON.parse(req.body.payload); const {type, user, submission} = payload; // Verifying the request. I'll explain this later in this tutorial! if (!signature.isVerified(req)) { res.sendStatus(404); return; } if(type === 'message_action') { // open a dialog! } else if (type === 'dialog_submission') { // dialog is submitted } }); 

यदि ईवेंट प्रकार मैसेज_ऐक्शन है, तो एप्लिकेशन एक डायलॉग खोलता है।

फिर हम उस कोड को जोड़ते हैं जो संवाद सामग्री की संरचना को परिभाषित करता है, जिसमें स्लैक क्लाइंट में खुलता है, जिसमें डायलॉग का उपयोग किया जाता है।

 /* Snippet 2.1 */ const dialogData = { token: process.env.SLACK_ACCESS_TOKEN, trigger_id: payload.trigger_id, dialog: JSON.stringify({ title: 'Save it to ClipIt!', callback_id: 'clipit', submit_label: 'ClipIt', elements: [ { label: 'Message Text', type: 'textarea', name: 'message', value: payload.message.text }, { label: 'Importance', type: 'select', name: 'importance', value: 'Medium ', options: [ { label: 'High', value: 'High ' }, { label: 'Medium', value: 'Medium ' }, { label: 'Low', value: 'Low ️' } ], }, ] }) }; // open the dialog by calling the dialogs.open method and sending the payload axios.post('https://slack.com/api/dialog.open', qs.stringify(dialogData)) .then((result) => { if(result.data.error) { res.sendStatus(500); } else { res.sendStatus(200); } }) .catch((err) => { res.sendStatus(500); }); 

यहां हम स्लैक के लिए एक POST अनुरोध को निष्पादित करने के लिए अक्षतंतु मॉड्यूल का उपयोग करते हैं; उसके बाद, डायलॉग.पेन विधि 200 का HTTP स्टेटस भेजकर एक डायलॉग खोलता है।



यदि उपयोगकर्ता द्वारा संवाद आरंभ किया गया है, तो समापन बिंदु भी सक्रिय है। स्निपेट 2 कोड में, आपको खाली HTTP 200 अनुरोध के साथ प्रतिक्रिया करने की आवश्यकता है ताकि स्लैक को पता चले कि दृश्य प्राप्त हो गया है।

अंत में, हम chat.postMessage पद्धति का उपयोग करके उपयोगकर्ता को एक पुष्टिकरण संदेश भेजते हैं।

 /* Snippet 2.2 */ else if (type === 'dialog_submission') { res.send(''); // Save the data in DB db.set(user.id, submission); // this is a pseudo-code! // DM the user a confirmation message const attachments = [ { title: 'Message clipped!', title_link: `http://example.com/${user.id}/clip`, fields: [ { title: 'Message', value: submission.message }, { title: 'Importance', value: submission.importance, short: true }, ], }, ]; const message = { token: process.env.SLACK_ACCESS_TOKEN, channel: user.id, as_user: true, // DM will be sent by the bot attachments: JSON.stringify(attachments) }; } 

अब कोड चलाते हैं और देखते हैं कि एप्लिकेशन स्लैक के साथ एकीकरण में कैसे काम करता है। अगर सब ठीक है, तो आखिरी कदम उठाएं।

सत्यापन का अनुरोध करें

अब आवेदन सुरक्षा का ध्यान रखें और अनुरोध सत्यापन जोड़ें। हमेशा उन्हें काम पर लेने से पहले स्लैक से किसी भी अनुरोध को सत्यापित करें।

ऐसा करने के लिए, स्निपेट 1 पर वापस जाएं, जो बहुत ऊपर स्थित है। उस जगह को बदलें जहाँ एक टिप्पणी है // अगली दो पंक्तियों को बाद में संशोधित किया जाएगा, इसके साथ:

 /* Snippet 3 */ const rawBodyBuffer = (req, res, buf, encoding) => { if (buf && buf.length) { req.rawBody = buf.toString(encoding || 'utf8'); } }; app.use(bodyParser.urlencoded({verify: rawBodyBuffer, extended: true })); app.use(bodyParser.json({ verify: rawBodyBuffer })); 

मैंने पहले से ही सत्यापन में क्रिप्टोग्राफी को VerSignature.js के लिए सक्षम किया है, इसलिए केवल index.js की शुरुआत में एक फ़ंक्शन जोड़ें:

 const signature = require('./verifySignature'); 

अब हम सत्यापन करते हैं:

 if(!signature.isVerified(req)) { // when the request is NOT coming from Slack! res.sendStatus(404); // a good idea to just make it “not found” to the potential attacker! return; } 

मैं हर बार आपके आवेदन को स्लैक से प्राप्त करने के अनुरोधों की पुष्टि करने की सलाह देता हूं।

हम कोड को फिर से चलाते हैं, और अगर सब कुछ काम करता है, तो आपको सफलता का जश्न मना सकते हैं! बधाई!

• ऑनलाइन कोर्स "प्रोफेशन फ्रंटेंड-डेवलपर"
• व्यावहारिक पाठ्यक्रम "मोबाइल डेवलपर प्रो" ।
• व्यावहारिक वार्षिक पाठ्यक्रम "पीएचपी-डेवलपर 0 से प्रो तक" ।