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 ڈیٹا لیئر صرف وہیں بھاری کام کرتی ہے جہاں یہ اہمیت رکھتا ہے۔ برانڈ نے اپنا کامرس اسٹیک برقرار رکھا اور آخرکار اسے ایک ایپ تجربہ ملا جو اس کی ویب سائٹ سے میل کھاتا ہے۔