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

المشكلة

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 لتحليلات المنتج ورسائل دورة الحياة، حتى ترى العلامة التجارية كيف يُستخدم التطبيق فعليًا وتصل إلى الناس عبر الإشعارات والحملات منذ الإطلاق، بدلًا من الشحن في العتمة وإضافة التفاعل بعد أشهر.

النتيجة

شُحن التطبيقان وهما مباشران على App Store و Google Play، وسُلّما كتحديث سلس فوق التطبيق القديم المبني بـ App Maker بحيث انتقل الجمهور الحالي والتقييم سالمين. النتيجة تطبيق React Native سريع يشعر بأنه أصلي ويعمل بالكامل على Shopify، مع طبقة بيانات Node صغيرة تقوم بالعمل الثقيل فقط حيث يهم. احتفظت العلامة التجارية بحزمة التجارة الخاصة بها وحصلت أخيرًا على تجربة تطبيق تطابق موقعها.