Wellbeing Nutrition: Shopify पर ऐप का ग्राउंड-अप रीबिल्ड

समस्या

Wellbeing Nutrition एक D2C न्यूट्रिशन ब्रांड है जिसकी वेबसाइट Shopify पर बनी और पॉलिश्ड है। जो उसके पास नहीं था वो था एक अच्छा ऐप। मौजूदा ऐप Shopify के App Maker से बना था, और अनुभव में यह साफ़ दिखता था: यह काम करता था, पर कभी स्मूद नहीं लगता था। मैंने इसे Infinite Locus में उठाया, और ब्रीफ़ बिलकुल स्पष्ट था: React Native में स्क्रैच से एक बिलकुल नया iOS और Android ऐप बनाना जो तेज़ और पॉलिश्ड लगे, और यह बिना किसी नए बैकएंड के करना। ऑर्डर, कैटलॉग, और डैशबोर्ड Shopify पर ही चलते रहेंगे, ठीक वैसे जैसे वेब पर चलते थे।

दिलचस्प कंस्ट्रेंट यही आख़िरी हिस्सा था। Shopify वेब React ऐप में आसानी से जुड़ जाता है; React Native के लिए ऐसा कोई तुलनीय रास्ता नहीं है।

फ़ैसले

सीधे Shopify से बात करो, एक ऐसे क्लाइंट से जो इसके लिए बना ही नहीं था। वेब SDK को वहाँ ज़बरदस्ती लगाने के बजाय जहाँ उसकी जगह नहीं थी, मैंने Shopify के GraphQL API का इस्तेमाल किया ताकि स्टोर से जुड़ सकूँ और ऐप को ज़रूरी सब कुछ खींच सकूँ: प्रोडक्ट्स, कलेक्शन, कार्ट, ऑर्डर। इससे असली Shopify डेटा बीच में किसी अतिरिक्त सर्विस के बिना एक React Native ऐप में बहने लगा।

डेटा को वहाँ रीशेप करो जहाँ यह सस्ता है, वहाँ नहीं जहाँ यह भारी पड़े। Shopify डेटा को अपने ही शेप में लौटाता है, उस शेप में नहीं जो मेरी स्क्रीन्स को चाहिए था, इसलिए पहले वर्ज़न ने Shopify से डेटा खींचा और हर रिस्पॉन्स को डिवाइस पर ही साफ़ किया। यह काम करता था, पर हर क्वेरी को फ़ोन पर प्रोसेस करने से ऐप भारी और धीमा हो गया, जो ब्रीफ़ का बिलकुल उलटा था। तो मैंने वह एक हिस्सा जोड़ा जो ब्रीफ़ में मूल रूप से नहीं था: एक पतली Node सर्विस जो Shopify और ऐप के बीच बैठती है। यह भारी GraphQL क्वेरीज़ चलाती है, डेटा को साफ़ और रीशेप करती है, और ऐप को एक सिंपल API के ज़रिए ठीक वही देती है जो उसे चाहिए। यही एक कदम है जिसने ऐप को स्मूद बना दिया। हर चीज़ इसके ज़रिए नहीं जाती: हल्की क्वेरीज़ आज भी ऐप से सीधे Shopify पर जाती हैं, ताकि मुझे उस हॉप की क़ीमत न चुकानी पड़े जिसकी ज़रूरत नहीं है।

गुम हिस्सों को metaobjects से मॉडल करो। जहाँ स्टोरफ़्रंट किसी ऐसी चीज़ को नेटिवली एक्सपोज़ नहीं करता था जो ऐप को चाहिए थी, वहाँ मैंने उसे रखने के लिए Shopify metaobjects बनाए और उन्हें उसी पाइपलाइन के ज़रिए भेजा, ताकि ऐप को बिना कोई कस्टम सिस्टम ऑफ़ रिकॉर्ड खड़ा किए एक साफ़, कंसिस्टेंट डेटा मॉडल मिले।

इसे एक नए ऐप के रूप में नहीं, एक अपडेट के रूप में शिप करो। WBN टीम चाहती थी कि रीबिल्ड मौजूदा यूज़र्स तक पुराने App Maker ऐप के अपडेट के रूप में पहुँचे, न कि एक नई लिस्टिंग के रूप में। मैंने यह निकाला कि मौजूदा ऐप को कैसे टेक ओवर किया जाए ताकि नया बिल्ड उसकी जगह शिप हो: वही यूज़र्स, वही स्टोर लिस्टिंग, रेटिंग अछूती। किसी को कुछ दोबारा डाउनलोड नहीं करना पड़ा, और बाहर से यह बदलाव अदृश्य था।

लॉगिन और चेकआउट, बनाया नहीं, लिया। नो-बैकएंड लॉजिक सबसे ज़्यादा उन दो फ़्लो पर लागू हुआ जिन्हें मैं ख़ुद हाथ से बनाना सबसे कम चाहता था: लॉगिन और पेमेंट्स। मैंने दोनों के लिए GoKwik इंटीग्रेट किया, ताकि लौटने वाले ग्राहकों को तेज़ फ़ोन-नंबर लॉगिन और इंडियन पेमेंट्स के लिए ट्यून किया गया चेकआउट मिले, और कोई ऑथ या पेमेंट इन्फ़्रास्ट्रक्चर मुझ पर न आए।

पहले इंस्ट्रुमेंट करो, फिर एंगेज करो। मैंने प्रोडक्ट एनालिटिक्स और लाइफ़साइकल मैसेजिंग के लिए CleverTap जोड़ा, ताकि ब्रांड देख सके कि ऐप असल में कैसे इस्तेमाल हो रहा है और लॉन्च से ही लोगों तक पुश और कैंपेन के ज़रिए पहुँच सके, न कि अंधेरे में शिप करके महीनों बाद एंगेजमेंट जोड़े।

नतीजा

दोनों ऐप शिप हुए और App Store तथा Google Play पर लाइव हैं, पुराने App Maker ऐप के ऊपर एक सहज अपडेट के रूप में डिलीवर किए गए ताकि मौजूदा ऑडियंस और रेटिंग बरक़रार रहे। नतीजा एक तेज़, नेटिव जैसा महसूस होने वाला React Native ऐप है जो पूरी तरह Shopify पर चलता है, जिसमें एक छोटी Node डेटा लेयर सिर्फ़ वहीं भारी काम करती है जहाँ यह मायने रखता है। ब्रांड ने अपना कॉमर्स स्टैक बनाए रखा और आख़िरकार उसे एक ऐप अनुभव मिला जो उसकी वेबसाइट से मेल खाता है।