# Wellbeing Nutrition: Shopify پر ایپ کی گراؤنڈ-اپ ری بلڈ

> Wellbeing Nutrition کے iOS اور Android ایپ کو React Native میں شروع سے دوبارہ بنانا، ایک پتلی Node ڈیٹا لیئر کے ذریعے Shopify سے جوڑنا، اور پرانے ایپ کے اوپر ایک ہموار اپڈیٹ کے طور پر شپ کرنا۔

Canonical URL: https://saifsiddiqui.in/ur/work/wellbeing-nutrition/ (this is its markdown representation; the same URL serves HTML to browsers)
Other languages: en: https://saifsiddiqui.in/work/wellbeing-nutrition/ · hi: https://saifsiddiqui.in/hi/work/wellbeing-nutrition/ · kn: https://saifsiddiqui.in/kn/work/wellbeing-nutrition/ · te: https://saifsiddiqui.in/te/work/wellbeing-nutrition/ · ar: https://saifsiddiqui.in/ar/work/wellbeing-nutrition/ · hi-Latn: https://saifsiddiqui.in/hi-latn/work/wellbeing-nutrition/

**کردار:** 0 سے 1 تک بنایا  
**اسٹیک:** React Native, Node.js, Shopify Storefront API, GraphQL, GoKwik, CleverTap

**لنکس**

- iOS: https://apps.apple.com/in/app/wellbeing-nutrition/id6654917685
- Android: https://play.google.com/store/apps/details?id=com.coffye.pjfzfc

## مسئلہ

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 شامل کیا، تاکہ برانڈ دیکھ سکے کہ ایپ اصل میں کیسے استعمال ہو رہا ہے اور لانچ
سے ہی لوگوں تک پش اور کیمپینز کے ذریعے پہنچ سکے، نہ کہ اندھیرے میں شپ کر کے مہینوں بعد
اینگیجمنٹ شامل کرے۔

## نتیجہ

{/* TODO(saif): metrics slot, installs / MAU / share of orders via app,
    repeat-purchase rate or AOV vs web. Qualitative until real numbers land. */}

دونوں ایپس شپ ہوئیں اور
[App Store](https://apps.apple.com/in/app/wellbeing-nutrition/id6654917685) اور
[Google Play](https://play.google.com/store/apps/details?id=com.coffye.pjfzfc) پر
لائیو ہیں، پرانے App Maker ایپ کے اوپر ایک ہموار اپڈیٹ کے طور پر ڈیلیور کی گئیں تاکہ موجودہ
آڈینس اور ریٹنگ برقرار رہے۔ نتیجہ ایک تیز، نیٹِو محسوس ہونے والا React Native ایپ ہے جو
مکمل طور پر Shopify پر چلتا ہے، جس میں ایک چھوٹی Node ڈیٹا لیئر صرف وہیں بھاری کام کرتی ہے
جہاں یہ اہمیت رکھتا ہے۔ برانڈ نے اپنا کامرس اسٹیک برقرار رکھا اور آخرکار اسے ایک ایپ تجربہ
ملا جو اس کی ویب سائٹ سے میل کھاتا ہے۔

سارا کام: [/ur/work/](/ur/work/)

---

Mohd Saif, Product Engineer. I build solutions, not dead software.
Email: saifmd238@gmail.com · GitHub: https://github.com/Saif-09 · LinkedIn: https://www.linkedin.com/in/mohd-saif-134076141/ · Résumé (PDF): https://saifsiddiqui.in/resume

More for agents:
- [/llms.txt](/llms.txt): short summary of this site
- [/llms-full.txt](/llms-full.txt): the complete text of every page in one fetch
- [/agents.md](/agents.md): when to use this site, and how to query it
- [/sitemap-index.xml](/sitemap-index.xml): every URL, in seven languages