انتقل إلى المحتوى الرئيسي
دراسة حالة

كيف قمت ببناء وإطلاق تطبيق iOS على متجر تطبيقات الإمارات باستخدام React Native + Expo

4 دقائق قراءة

قمت ببناء تطبيق لتوصيل النباتات في الإمارات باستخدام React Native و Expo. دروس حول إرسال التطبيقات لنظام iOS والترجمة.

React NativeExpoiOS DevelopmentUAE TechApp Store Submission

كانت الساعة التاسعة صباحًا في أبو ظبي، وأراد عميلي - وهو صاحب متجر بيئي صغير في آل نهيان - تطبيق iOS لخدمة توصيل النباتات الخاصة بهم. لم يكن لديهم ميزانية لفريقين منفصلين، لذلك أقنعتهم بـ React Native و Expo. قلت: "سيوفر لنا الوقت والمال"، ربما مع تبسيط مفرط. بحلول نهاية المشروع، تذكرت سبب عدم عملي في مجال المبيعات.

التقنيات المستخدمة

استخدمنا Expo SDK 54. لماذا ليس الأحدث؟ تكامل Firebase القديم الخاص بهم لتتبع الطلبات تعطل مع الإصدارات الأحدث، ولم أكن بصدد إعادة كتابة تلك الفوضى من أجل تحسين الأداء بنسبة 5%. بالنسبة للواجهة، التزمنا بمكونات React Native الأساسية - لا توجد وحدات أصلية مخصصة مجنونة. أراد العميل شيئًا "نظيفًا، مثل Careem، ولكن للنباتات."

كان البناء في Expo عبارة عن حقيبة مختلطة. عمل خادم التطوير بشكل جيد، ولكن عندما حاولت إنشاء إصدارات iOS عبر eas.build، قرر بوابة مطوري Apple إثارة نوبة غضب. الخطأ: “Invalid App ID”. لا تلميح، لا سجلات محددة. مجرد مربع خطأ أحمر و 45 دقيقة من حياتي ضاعت. نصيحة للمحترفين: إذا كنت في الإمارات العربية المتحدة، فقم بتمكين اللغة العربية في إعدادات حساب Apple الخاص بك. لماذا؟ لأن نصف رسائل الخطأ تتحول إلى اللغة العربية، وإحداها تشرح المشكلة بالفعل. نعم.

الواقعية بشأن متطلبات متجر التطبيقات

لن تسمح لك Apple بتحميل الإصدارات ما لم تكن بيانات تعريف App Store كاملة بنسبة 100٪. هذا قاسٍ عندما يستمر عميلك في تغيير وصف التطبيق في الساعة 2 صباحًا. لقد أرادوا لقطات شاشة باللغتين الإنجليزية والعربية، لذلك كتبت برنامج Python النصي لتراكب النص المترجم. لقد عمل بشكل جزئي، ولكنه أنقذني من تعديل أكثر من 200 صورة يدويًا في Figma.

في يوم جمعة عشوائي، سألني عميلي: "ما هو عدد الكلمات لوصف التطبيق؟" تحققت من إرشادات Apple. إنه 4800 حرف. مسودتهم؟ 7000. تجادلنا بشأن التقليم حتى أدركت أن النسخة العربية تحتاج إلى مساحة أكبر بسبب الكلمات الأطول. في النهاية، استأجرنا مترجمًا - يستحق كل درهم. رسائل الرفض من Apple مرهقة.

بطاقة Android الجامحة

لقد قمنا بالشحن إلى Android أولاً. هكذا أقوم بتصحيح أخطاء أشياء iOS - اختبر على Android، ثم انظر إلى ما الذي يتعطل. ليس مثاليًا، لكن عميل التطوير الخاص بـ Expo أكثر سلاسة هناك. بالنسبة إلى iOS، كان علينا فصل التطبيق إلى سير العمل الأساسي القديم لإصلاح وحدة بوابة الدفع (لا تسأل). قفز حجم البناء بمقدار 20 ميجابايت بين عشية وضحاها.

في إحدى المراحل، بدأت شاشة البداية تومض باللون الأخضر ثم الأبيض قبل الإطلاق. اتضح أن ملف brandColors.json في حزمة expo-splash-screen الخاصة بـ Expo يحتوي على خطأ إملائي في رمز hex. استغرق الأمر 3 ساعات للعثور عليه لأنني افترضت أن المشكلة كانت في تكوين iOS الأصلي. لا تفترض أبدًا.

النشر: حقائق سوق الإمارات العربية المتحدة

كان يجب أن يعمل هذا التطبيق باللغتين الإنجليزية والعربية. لقد جعلنا اللغة الافتراضية تتطابق مع إعدادات جهاز المستخدم. بالنسبة للبيانات، انتقلنا من Firebase إلى Laravel API لأن العميل أراد مزيدًا من التحكم في مخزونه. كانت تحديثات Firebase في الوقت الفعلي مبالغة على أي حال - فمخزون النباتات لا يتغير بالثانية.

استخدمت React Query للتخزين المؤقت. على شبكة 4G، انخفض متوسط وقت التحميل من 3.2 ثانية إلى 1.1 ثانية في أبو ظبي ودبي. ليس سيئًا لمشروع بقيمة 5 آلاف دولار.

خلل إشعار دفع غريب

عملت إشعارات الدفع بشكل جيد على Android. iOS؟ حالات فشل صامتة. لقد فحصت شهادات APNs - جيدة. فحصت رموز الجهاز - صحيحة. أخيرًا، أدركت أن العميل كتب مفتاح مصادقة P8 بـ "1" بدلاً من "l" في مكان واحد. لقد فاتنا ذلك لأن لوحات المفاتيح العربية تتحول افتراضيًا إلى تخطيط مختلف. كان الخطأ الإملائي غير مرئي في خط بوابة Apple. قمت بإصلاح ذلك، وبدأ ظهور التنبيهات.

بعد الإطلاق: الأرقام

بعد 3 أسابيع، فتح 40٪ من المستخدمين التطبيق يوميًا. قام العميل بتشغيل عرض ترويجي في المجموعات البيئية المحلية - وقد نجح ذلك بشكل جيد. جاء معظم مستخدمي iOS من روابط WhatsApp، وليس من App Store. مثير للإهتمام.

هل يجب أن أستخدم Expo لمشروع iOS آخر في الإمارات العربية المتحدة؟ بصراحة، فقط إذا كان العميل بحاجة إلى السرعة. بالنسبة للتطبيقات الأكثر تعقيدًا، سأذهب إلى الأصل بالكامل. Expo هو منقذ للنماذج الأولية، لكن حلقات Apple ومراوغات الترجمة ستهزمك.

أنا سارة، مطورة مستقلة تقوم بشحن تطبيقات للشركات في الإمارات العربية المتحدة ودول مجلس التعاون الخليجي. إذا كنت مهتمًا بـ Greeny Corner (تطبيق النباتات الذي أطلقناه) أو كنت ترغب في الدردشة حول مآزق React Native، فتواصل معي على sarahprofile.com/contact.

S

سارة

مطوّرة Full-Stack أولى ومعتمدة PMP — أبوظبي، الإمارات

أكثر من 7 سنوات في بناء تطبيقات ويب لشركات الإمارات والخليج. متخصصة في Laravel وNext.js وتطوير مواقع RTL العربية.

تعاون مع سارة