# Wellbeing Nutrition: إعادة بناء التطبيق من الصفر على Shopify

> إعادة بناء تطبيق iOS و Android الخاص بـ Wellbeing Nutrition من الصفر باستخدام React Native، وربطه بـ Shopify عبر طبقة بيانات Node رفيعة، وشحنه كتحديث سلس فوق التطبيق القديم.

Canonical URL: https://saifsiddiqui.in/ar/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/ · ur: https://saifsiddiqui.in/ur/work/wellbeing-nutrition/ · te: https://saifsiddiqui.in/te/work/wellbeing-nutrition/ · hi-Latn: https://saifsiddiqui.in/hi-latn/work/wellbeing-nutrition/

**الدور:** بني من الصفر  
**المكدس:** 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. ما لم يكن لديها هو تطبيق جيد. التطبيق الحالي كان مبنيًا باستخدام App Maker من
Shopify، وكان ذلك واضحًا في التجربة: كان يعمل، لكنه لم يشعر أبدًا بالسلاسة. تسلّمت هذا
العمل في Infinite Locus، وكان الطلب محددًا: بناء تطبيق iOS و Android جديد تمامًا من الصفر
باستخدام React Native يشعر بالسرعة والإتقان، والقيام بذلك دون باكيند جديد. الطلبات
والكتالوج ولوحة التحكم ستستمر في العمل على Shopify، تمامًا كما كانت على الويب.

القيد المثير للاهتمام كان ذلك الجزء الأخير. Shopify يتصل بسهولة بتطبيق ويب React؛ لا يوجد
مسار مماثل لـ React Native.

## القرارات

**تحدّث مباشرة مع Shopify، من عميل لم يُصمَّم لذلك.** بدلًا من فرض SDK ويب في مكان لا
ينتمي إليه، استخدمت GraphQL API الخاص بـ Shopify للاتصال بالمتجر وسحب كل ما يحتاجه
التطبيق: المنتجات، المجموعات، السلال، الطلبات. هذا جعل بيانات 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 صغيرة تقوم بالعمل الثقيل فقط حيث يهم. احتفظت العلامة التجارية بحزمة
التجارة الخاصة بها وحصلت أخيرًا على تجربة تطبيق تطابق موقعها.

جميع الأعمال: [/ar/work/](/ar/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