बहुत सूखा नहीं: एप्लिकेशन कोड को सरल रखकर एसडीके कैसे प्रदर्शित करें

इंजीनियर्स, इस परिदृश्य की कल्पना कीजिए। उत्पाद टीम में आपका सहयोगी आपको सोमवार की सुबह एक सुस्त संदेश भेजता है। "अरे!" वह कहती हैं, "हमें अभी खरीद के माध्यम से एक नया विक्रेता मिला है।" शब्द आपके पेट में एक गाँठ बाँधने लगते हैं, जैसे कि आपके साथी ने आपको सिर्फ यह कहते हुए लिखा हो "हमें बात करने की ज़रूरत है।"

चैट विंडो के निचले भाग में स्लैक आपको बताता है कि आपका सहयोगी टाइप कर रहा है...। और गांठ कस जाती है। "यह एक एनालिटिक्स प्लेटफॉर्म है जो हमें उपयोगकर्ता यात्रा में अधिक दृश्यता प्रदान करेगा," उनका संदेश कहता है। "क्या आपको लगता है कि हम इसे महीने के अंत तक वेब, आईओएस और एंड्रॉइड पर एकीकृत कर सकते हैं?"

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

लेकिन आप डरते हैं कि आपके और आपके साथी डेवलपर्स के लिए इसका क्या अर्थ है। पिछली बार जब आपको एक विक्रेता एसडीके लागू करना पड़ा था, तो यह आंखों पर पट्टी बांधकर एक अव्यवस्थित कमरे से बाहर निकलने का रास्ता खोजने जैसा था।

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

यह स्थिति वह है जिससे एमपार्टिकल के इंजीनियर भली-भांति परिचित हैं। जबकि इन दिनों हमारे डेवलपर्स एसडीके को लागू करने के बजाय निर्माण करते हैं, हमारे कई इंजीनियरों को पता है कि "न्यू एसडीके ब्लूज़" गाते हुए टेबल के दूसरी तरफ कैसा होना पसंद है।

यह पहला अनुभव है जिसने हमें एमपार्टिकल डेवलपर अनुभव में अपना नवीनतम निवेश करने के लिए प्रेरित किया: नमूना ईकामर्स अनुप्रयोगों के लिए पूरी तरह से काम कर रहा है वेब , आईओएस , तथा एंड्रॉयड , हमारे एसडीके के साथ एंड-टू-एंड लागू किया गया।

ये ऐप आपको हमारे एसडीके के साथ प्रयोग करने के लिए एक खेल का मैदान प्रदान करते हैं, और सीखते हैं कि एमपार्टिकल के साथ इवेंट कलेक्शन कैसे काम करता है। वे सामान्य उपयोगकर्ता क्रियाओं जैसे पृष्ठ दृश्य, उत्पाद अनुकूलन, कार्ट बटनों से जोड़ें/निकालें, और चेकआउट बटनों पर लागू किए गए हमारे ईवेंट के कार्यशील उदाहरणों को हाइलाइट करते हैं।

कई मामलों में, आप पा सकते हैं कि आप इन घटनाओं को सीधे अपने आवेदन में कॉपी कर सकते हैं, और अपने विशिष्ट उपयोग के मामले की जरूरतों को पूरा करने के लिए केवल हल्के संशोधन कर सकते हैं।

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

https://www.youtube.com/watch?v=1hYc9qalrXQ

डेवलपर अनुभव के वरिष्ठ उत्पाद प्रबंधक मैट बर्नियर कहते हैं, "जब आप एमपार्टिकल को लागू करते हैं, तो हम आपको जल्दी से एक मानसिक नक्शा देना चाहते हैं कि आपके ऐप और हमारे सिस्टम दोनों में क्या होता है।" एमपार्टिकल।

"चूंकि ये ऐप्स आपको हमारे एसडीके दिखाते हैं जो ठीक उसी संदर्भ में चल रहे हैं, जिसे आप ढूंढ रहे हैं, कोई अनुमान नहीं है। इसका मतलब है कि आप अपना कार्यान्वयन पूरा कर सकते हैं और अगली परियोजना पर अधिक तेज़ी से आगे बढ़ सकते हैं।"

नमूना ऐप्स के हुड के नीचे देख रहे हैं

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

नोट: API कुंजी जेनरेट करने के लिए आपको mParticle कार्यक्षेत्र तक पहुंच की आवश्यकता होगी।

1. क्लोन करें नमूना ऐप्स रेपो ।
2. npm इंस्टाल का उपयोग करके पैकेज निर्भरताएँ स्थापित करें।
3. अपने एमपार्टिकल कार्यक्षेत्र में सेटअप > इनपुट पर नेविगेट करें।
4. वेब प्लेटफ़ॉर्म चुनें, और अपनी API कुंजी जेनरेट/कॉपी करें।
5. इस प्रोजेक्ट के मूल में, .env.sample का नाम बदलकर .env करें ।
6. अपने एमपार्टिकल वेब एपीआई कुंजी के साथ REACT_APP_MPARTICLE_API_KEY पर्यावरण चर को अपडेट करें।
7. npm start का उपयोग करके प्रोजेक्ट चलाएँ।

वर्तमान में एमपार्टिकल ग्राहक नहीं हैं? हमारी त्वरक कार्यक्रम योग्य स्टार्टअप्स के लिए एमपार्टिकल की एक वर्ष तक की कॉम्प्लिमेंट्री एक्सेस प्राप्त करने का अवसर है।

बहुत सूखा नहीं: कैसे हमने एप्लिकेशन कोड को सरल रखकर अपने एसडीके का प्रदर्शन किया

इन सबसे ऊपर, नमूना ऐप टीम चाहती थी कि ये उत्पाद इंजीनियरों के लिए हमारे एसडीके सीखने और mParticle के साथ ईवेंट संग्रह को लागू करने के सर्वोत्तम अभ्यासों को समझने के लिए शिक्षण उपकरण के रूप में काम करें।

इस उद्देश्य ने नमूना ऐप्स के पीछे कई तकनीकी विकल्पों की जानकारी दी, उन्हें बनाने के लिए उपयोग किए जाने वाले टूल और फ्रेमवर्क से लेकर पूरे प्रोजेक्ट में उपयोग किए जाने वाले कोडिंग सम्मेलनों तक।

सापेक्षता मुख्य कारण थी कि एलेक्स सैपॉन्ट्ज़िस ने रिएक्ट को वेब नमूना ऐप बनाने के लिए ढांचे के रूप में उपयोग करने का निर्णय लिया। प्रतिक्रिया है सबसे लोकप्रिय फ्रंटएंड फ्रेमवर्क दुनिया में, और इसका उपयोग ईकामर्स साइटों से लेकर स्ट्रीमिंग प्लेटफॉर्म तक के एप्लिकेशन बनाने के लिए किया जाता है।

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

जब उपयोग करने के लिए रिएक्ट डिज़ाइन पैटर्न पर निर्णय लेने की बात आई, तो एलेक्स ने अपेक्षाकृत नई 'बिल्ट-इन' सुविधाओं के पक्ष में संतुलन बनाने की कोशिश की, जैसे कि रिएक्ट हुक और कॉन्टेक्स्ट प्रोवाइडर्स बनाम रेडक्स, एक थर्ड-पार्टी लाइब्रेरी जो व्यापक रूप से है- ज्ञात मानक वास्तुकला, लेकिन अंततः उपयोगकर्ता को एक स्पष्ट सीखने का अनुभव प्रदान करने के लिए बहुत भारी और जटिल हो सकता है।

उदाहरण के लिए, का उपयोग करना कस्टम हुक काफी समय से रिएक्ट समुदाय के भीतर एक चलन रहा है। इनका उपयोग करने से आपके अपने कार्यों का निर्माण होता है जो घटकों के बीच स्टेटफुल लॉजिक को साझा करने के उद्देश्य से सामान्य रिएक्ट हुक का लाभ उठाते हैं।

एलेक्स ने महसूस किया कि नमूना ऐप्स में इस दृष्टिकोण का उपयोग करने से यह समझने में मदद मिलती कि हमारा एसडीके कैसे काम कर रहा है, और इस कारण से उसने वैनिला हुक जैसे useEffect का उपयोग करने का विकल्प चुना।

एलेक्स कहते हैं, "अगर मैं इसे एक पैकेज के रूप में बना रहा था, जिसका उपयोग कोई अपनी परियोजना में करेगा, तो मैंने कुछ अलग तरीके से काम किया होगा," लेकिन यह एक शैक्षिक उपकरण है, मैं नहीं चाहता था कि किसी को इसके बारे में चिंता करनी पड़े। रिएक्ट क्या कर रहा है—मैं चाहता था कि वे देखें कि एमपार्टिकल रिएक्ट ऐप में क्या कर रहा है।"

वेब ऐप के घटकों की खोज करते हुए, आपको ऐसे कई उदाहरण दिखाई देंगे जिनमें useEffect का उपयोग उन विशेषताओं को एकत्र करने के लिए किया जाता है जिन्हें mParticle ईवेंट के साथ अग्रेषित किया जाएगा, और ईवेंट को स्वयं बंद कर दिया जाएगा। यहाँ ProductDetailPage घटक पर useEffect का ऐसा ही एक उपयोग है:

 useEffect(() => { // Generates a Product View Detail Event to signal that a customer // viewed the product details, potentially leading to an 'Add to Cart' Event if (product) { // Generate an mParticle Product Object before sending any eCommerce Events const mParticleProduct: mParticle.Product = getMPProduct(product); // Fire a single eCommerce Product View Detail Event for this product page mParticle.eCommerce.logProductAction( mParticle.ProductActionType.ViewDetail, mParticleProduct, ); } // If you re-render and the product changes, // this will re-fire a new Product View Detail Event }, [product]);

इस तरह के उदाहरणों में वेनिला रिएक्ट हुक का उपयोग करने से mParticle SDK को समझना बहुत आसान हो जाता है, अगर यह तर्क अलग-अलग मॉड्यूल में अलग-अलग कार्यों में पैक किया गया हो। साथ ही, आप देख सकते हैं कि यह एक टिप्पणी-भारी कोड नमूना है।

नमूना ऐप डेवलपर्स ने हमारे एसडीके के उपयोग के आस-पास के कोड पर स्पष्ट रूप से टिप्पणी करने के लिए समय लिया- दोनों जहां ईवेंट कॉल होते हैं, और पूरे तर्क में जो ईवेंट संग्रह का समर्थन करता है।

यहां उसी घटक से एक और उदाहरण दिया गया है जिसमें दिखाया गया है कि कैसे टिप्पणियां आपको वास्तविक जीवन परिदृश्यों में हमारे एसडीके का उपयोग करने का पूरा संदर्भ देती हैं, और अनुमान लगाने के लिए कुछ भी नहीं छोड़ती हैं:

 // It is recommended to use mParticle.createProduct when using our // eCommerce logging functions to generate events so that you can // be sure to include all of our data points properly const getMPProduct = (_product: Product): mParticle.Product => { const { label, id, price } = _product; // When passing attributes into mParticle, it's best to not include // undefined or null values const attributes: mParticle.SDKEventAttrs = {}; if (color) { attributes.color = color; } if (size) { attributes.size = size; } // In this example we are not fulling handling multiple brands, // categories and other use cases for a fully fledged e-Commerce // application. As such, we are passing undefined for many of these // attributes to highlight cases where you want may need some // parameters but not all of them. return mParticle.eCommerce.createProduct( label, id, price, parseInt(quantity, 10), undefined, // Variant: used for single variants. // Use Custom ATtributes for multiple variants like // in this use case undefined, // Category undefined, // Brand undefined, // Position undefined, // Coupon Code attributes, ); };

https://www.youtube.com/watch?v=6zbW4X8Oyg0

अपने स्वयं के एसडीके और विशेषताओं को डॉगफूड करना और अपने स्वयं के उत्पादों का लाभ उठाना

जबकि इन नमूना ऐप्स का प्राथमिक उद्देश्य हमारे ग्राहकों को आसानी से हमारे एसडीके को लागू करने और उनके डेटा से मूल्य का एहसास करने में मदद करना है, हमने परीक्षण और सुधार के साधन के रूप में इन ऐप्स से महान आंतरिक मूल्य भी देखा है-या "डॉगफूडिंग"--हमारे स्वयं के SDK और ग्राहक-सामना करने वाली सुविधाएँ।

टाइपस्क्रिप्ट के जंगली में बग शिकार

उदाहरण के लिए, वेब सैंपल ऐप बनाने से हमें कुछ किनारे के मामलों को उजागर करने की अनुमति मिलती है जो हमारे कोर वेब एसडीके का उपयोग एक रिएक्ट प्रोजेक्ट के भीतर टाइपस्क्रिप्ट के साथ एनपीएम पैकेज के रूप में करते हैं।

कुछ मामलों में, इन तीन विशेष तकनीकों के बीच परस्पर क्रिया के परिणामस्वरूप एक दौड़ की स्थिति उत्पन्न होती है जिसमें किसी घटना को बुलाए जाने पर हमारे एसडीके को हमेशा प्रारंभ नहीं किया जाएगा।

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

हमारी अपनी डेटा योजना सुविधाओं का उपयोग करना

डेटा संग्रह चरण में विसंगतियां इसके सबसे बड़े कारणों में से एक हैं डेटा गुणवत्ता के मुद्दे आगे पाइपलाइन के नीचे।

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

जब हमने इन नमूना ऐप्स का निर्माण किया, तो हम अपने स्वयं के उपयोग करके जो उपदेश देते हैं उसका अभ्यास करना चाहते थे डेटा योजना उपकरण घटनाओं और विशेषताओं को इन तीन प्लेटफार्मों में कैसे नामित, संरचित और एकत्र किया जाता है, इसके साथ निरंतरता बनाए रखने के लिए।

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

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

भविष्य कैसा है?

हमारे एसडीके के साथ सीखने की अवस्था को कम करके, कार्यान्वयन समय को तेज करके, और आपके डेटा के समय-दर-मूल्य को कम करके, ये नमूना ऐप एमपार्टिकल के साथ काम करने वाली इंजीनियरिंग टीमों को दूरगामी मूल्य प्रदान कर सकते हैं।

तथ्य यह है कि हमने अपने एमएलपी ("मिनिमम लवेबल प्रोजेक्ट," हमारे पीएम मैट बर्नियर ने एक शब्द गढ़ा है) को भेज दिया है, इन संसाधनों को बेहतर बनाने के हमारे काम की शुरुआत है, न कि अंत।

पीटर जेनकिंस कहते हैं, "मुझे लगता है कि यह निश्चित रूप से कुछ ऐसा है जिसमें हम निवेश करना और समय के साथ सुधार करना जारी रखेंगे," अतिरिक्त टिप्पणियों को जोड़ने से लेकर एसडीके में किए गए परिवर्तनों के साथ इसे हमेशा अद्यतित रखने के लिए।

इसके अतिरिक्त, हम न केवल हमारे एसडीके और एपीआई सुविधाओं, बल्कि उत्पादों और सुविधाओं के हमारे पूरे सूट के परीक्षण और सुधार के साधन के रूप में इन ऐप्स का उपयोग करना जारी रखना चाहते हैं।

उदाहरण के लिए, वेब नमूना ऐप के आगामी पुनरावृत्तियों में, हम अपने डेवलपर टूल को एकीकृत करने की योजना बना रहे हैं जिसमें शामिल हैं स्मार्ट टाइप तथा लिंटिंग . दूसरे शब्दों में, ये नमूना ऐप होंगे, जैसा कि पीटर जेनकिंस कहते हैं, "हमारे एसडीके का उपयोग करने के तरीके के लिए दस्तावेज़ीकरण का एक सदाबहार स्रोत जिसे आप वास्तव में चला सकते हैं।"

https://www.youtube.com/watch?v=Z02F77Yfs_E

पहले यहां प्रकाशित किया गया था।