Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React Native
Code

الشروع في العمل مع قالب تطبيق إطار عمل React Native

by
Difficulty:BeginnerLength:LongLanguages:

Arabic (العربية/عربي) translation by Alaa Alarabi (you can also view the original English article)

تصميم تطبيق "React Native" من نقطة الصفر هو في كثير من الأحيان عملية مرهقة – لا سيما مرحلة التصميم، لأنك بحاجة أن تخطط لكل من أجهزة الأندرويد وأبل. ليس ذلك فحسب ولكن عليك أيضاً التأكد من أن تطبيقك يتناسب مع أحجام شاشات مختلفة.

هنا تكمن فائدة القوالب. فهي تتعامل مع التصميم الأولي بحيث يبدو تطبيقك جميلاً بدون جهد يذكر من جانبك. وهناك بعض من هذه القوالب على CodeCanyon، والذي هو موقع سوق إلكتروني لبيع القوالب والإضافات. يمكنك العثور على أنواع مختلفة من القوالب الموجهة إلى نوع معين من التطبيقات التي تريد إنشائها.

في هذه الدورة التعليمية، سوف نلقي نظرة على كيفية استخدام قالب BeoStore. وكما يوحي لك الاسم، فإن BeoStore هو أحد قوالب تطبيق التجارة الإلكترونية الخاصة بـ "React Native".

الحصول على القالب من السوق الإلكتروني

يمكنك تحميل القالب بالذهاب إلى صفحة المنتج BeoStore على CodeCanyon. إنه قالب مدفوع، ولكن الأمر يستحق الاستثمار، لأنه يحتوي على معظم الميزات المطلوبة والتي تحتاجها في بناء تطبيق متجر إلكتروني. كل ما عليك القيام به هو ضبط القالب وتخصيصه حسب حاجتك. للحصول على فكرة عما يقدمه لك القالب، فيما يلي بعض سماته:

  • توافق كامل مع WooCommerce: ان كان لديك موقع إلكتروني مبني على قالب WooCommerce فيمكن للتطبيق أن يعرض نفس المنتجات التي تعرضها على موقعك الإلكتروني.
  • دعم لأجهزة أندرويد وأجهزة أبل: التطبيق يظهر ويعمل بشكل جيد على كل من المنصتين أندرويد وأبل.
  • تسجيلات الدخول الاجتماعي: يمكن للعملاء تسجيل الدخول بإستخدام حساب الفيس بوك أو جوجل.
  • سهولة التخصيص: كل شيء تم تقسيمه إلى مكونات. وهذا ما يضمن لك سهولة تخصيص القالب بما يتناسب مع علامتك التجارية.
  • إرسال الإشعارات: هذه الخاصية تنبه عملائك تلقائياً عند حصول تحديث عن حالة المنتح الذي قاموا بطلبه. يمكنك أيضا إرسال إشعارات للعروض الخاصة. خاصية إرسال الإشعارات تم تطبيقها باستخدام Firebase.
  • دعم متعدد اللغات: الانكليزية هي اللغة الأساسية بشكل افتراضي. اللغة الفيتنامية موجودة كخيار ثاني، ولكن يمكنك أيضاً إضافة اللغة الخاصة بك.
  • دفع آمن متكامل: الدفع يتم عن طريق بايبال.

إذا لم يكن لديك حساب Envato بعد، يمكنك التسجيل هنا. بمجرد أن يتم ذلك، سجل الدخول إلى الحسابك الذي قمت بإنشاءه حديثا. ثم قم بالعودة إلى صفحة BeoStore وانقر على زر "شراء الآن".

إعداد المشروع

بمجرد شرائك القالب، سوف تحصل على رابط تحميل ملف أرشيف القالب. قم بفك ضغط الملف وسوف تحصل على مجلد CodeCanyon الذي يحتوي على 2.2 MStore.

MStore 2.2 هو فهرس المصدر لمشروع القالب. تابع وافتح نافذة طرفية جديدة داخل هذا الفهرس ونفذ الأمر التالي:

سيقوم هذا الأمر بتثبيت كافة تبعيات المشروع. قد يستغرق هذا بعض الوقت اعتماداً على سرعة التنزيل، لأنه بحاجة لتنزيل الكثير من التبعيات. ألقي نظرة على package.json إذا كنت ترغب في مشاهدة الحزم التي تحتاج لتنزيلها.

بمجرد أن يتم ذلك، هناك خطوة إضافية إذا كنت ترغب في بناء تطبيق لأجهزة أبل. انتقل إلى مجلد iOS ونفذ ما يلي:

وبعد ذلك، لأجهزة الأندرويد، قم بتوصيل جهاز المحمول خاصتك إلى حاسوبك ونفذ ما يلي:

هذا الأمر سيظهر لك قائمة بجميع أجهزة الأندرويد المتصلة بحاسوبك. إذا كانت هذه هي المرة الأولى التي توصل فيها جهازك المحمول الى حاسوبك، فسوف يظهر لك إشعار يسألك إذا كنت تريد السماح لحاسوبك بتصحيح الأخطاء عن طريق USB. فقط اضغط على نعم بمجرد ظهور هذا الإشعار.

الآن يمكنك تشغيل التطبيق على جهاز الأندرويد خاصتك.

لأجهزة أبل:

إذا لم تصادف أية أخطاء، فسوف تظهر لك الصفحة التالية:

MStore Template Home page

لإعطائك فكرة عن مختلف الصفحات المتوفرة في القالب، إليك المزيد من الصور:

MStore Template Cart
MStore Template Checkout
MStore Template Login
MStore Template Product Page

استكشاف أخطاء وإصلاح مرحلة إعداد المشروع

في هذا القسم، لقد قمت بجمع قائمة بالأخطاء الشائعة في مرحلة إعداد المشروع مع الحلول المناسبة لها.

خادم التطوير لم يعمل

إذا لم يبدأ خادم التطوير تلقائياً عند كتابتك للأوامر react-native run-android أو react-native run-ios  يمكنك تشغيله يدوياً عن طريق تنفيذ هذا الأمر:

Watch استغرق وقتاً طويلاً للتحميل

إذا كنت تحصل على خطأ مشابه لما يلي:

هذا لأن خاصية Watchman  تعمل مسبقاً. وهذه الخاصية هي مكون من مكونات خادم تطوير React Native. يمكنك حل هذا الخطأ وإيقاف خاصية Watchman بتنفيذ الأوامر التالية:

لا يمكن تشغيل ADB Reverse.

إذا كنت تحصل على الخطأ التالي:

هذا يعني أن جهاز الأندرويد خاصتك يعمل على إصدار أندرويد أقل من 5.0 (Lollipop). وهذا حقاً ليس بخطأ. إنه يعني ببساطة أن جهازك الأندرويد لا يدعم adb reverse، الذي يستخدم لتوصيل خادم التطوير إلى جهازك الأندرويد عن طريق تصحيح الأخطاء باستخدام USB. إذا لم يكن هذا متاحاً، فإن "React Native" يرجع لخيار تصحيح الأخطاء باستخدام الشبكة اللاسلكية (Wi-Fi). يمكنك العثور على مزيد من المعلومات حول هذا الموضوع هنا: قيد التشغيل على الجهاز.

شيء آخر يمكن أن يسبب في فشل إعداد المشروع. يمكنك التمرير للأعلى في المحطة الطرفية (terminal) لمعرفة إذا كانت هناك أي أخطاء حدثت من قبل.

لا يمكن العثور على المتغير fbBatchedBridge_

إذا كنت تحصل على الخطأ التالي وخادم التطوير قيد التشغيل في الوضع اللاسلكي (Wi-Fi)، فهذا يعني أنك لم تقم بإعداد IP الخاص بحاسوبك في جهازك الأندرويد. (وهذا عادة فقط يأتي مع أجهزة الأندرويد تحت الإصدار 5.0)

يمكنك تنفيذ الإجراءات التالية لإظهار خيارات مطور "React Native" على جهازك الأندرويد:

حدد إعدادات المطور (Dev Settings) من القائمة التي تظهر. ضمن قسم تصحيح الأخطاء (Debugging )، انقر على تصحيح الملقم المضيف & منفذ للجهاز (Debug server host & port for device). أدخل IP حاسوبك المخصص من قبل المسيير(router) مع المنفذ(port) الذي يعمل عليه خادم التطوير ثم اضغط موافق:

قم بالعودة إلى الشاشة الرئيسية للتطبيق ونفذ الأمر adb shell input keyevent 82 مرة أخرى. هذه المرة اختر تحديث (Reload ) لتحديث التطبيق.

 تعذر العثور على Firebase،App Compat،GMS Play Services.

إذا كنت تحصل على أخطاء "تعذر العثور على"، هذا يعني أنك لم تقم بتثبيت الحزمة المطابقة بإستخدام Android SDK Manager.

هنا هي الحزم التي تحتاج إلى تثبيت:

  • مستودع دعم أندرويد (Android Support Repository)
  • مكتبة دعم أندرويد (Android Support Library)
  • خدمات جوجل بلاي (Google Play Services)
  • مستودع جوجل (Google Repository)

تأكد من تحديث الحزم الموجودة أيضا إذا كان هناك تحديث متاح.

مشاكل أخرى

إذا كانت مشكلتك لم تتضمن أياً مما سبق، يمكنك محاولة ما يلي:

  • تحقق من الوثائق الخاصة باستكشاف الأخطاء وإصلاحها.
  • راجع التعليقات الخاصة بالقالب. يمكنك البحث عن الخطأ الذي تحصل عليه. حاول التعميم واختصار رسالة الخطأ - لا تبحث مستخدما رسالة الخطأ كاملة. إذا تعذر عليك العثور على الخطأ، يمكنك محاولة طرح سؤالك في قسم التعليقات. عادة ردود فريق الدعم تتم على وجه السرعة.
  • حاول البحث عن الخطأ في جوجل. حتى إذا كانت النتائج التي تجدها لا تنطوي على استخدام القالب،  لكنها سوف تعطيك فكرة عن كيفية حل المشكلة.
  • حاول البحث على StackOverflow أو طرح سؤال جديد. تأكد من إدراج جميع التفاصيل الضرورية (مثلاً: رسالة الإعلام بالخطأ، والخطوات التي كنت قد قمت بها). يوجد مقال جيد حول كيفية طرح الأسئلة على StackOverflow.

تخصيص القالب

مكان جيد للبدء في تعلم كيفية القيام بأشياء في القالب هو الوثائق الخاصة به:

  • مخطط المشروع: يظهر لك أين يمكن العثور على ملفات مختلفة في القالب وكيف يتم استخدامها.
  • ترحيل WooCommerce: يظهر لك كيف يمكنك ربط متجرك الإلكتروني المبني على قالب WooCommerce مع التطبيق الذي تقوم بإنشاءه. ربط التطبيق بموقعك المبني على قالب WooCommerce يعني بأن تطبيقك سيكون قادراً على جلب فئات المنتجات والمنتجات من متجرك الإلكتروني.
  • خدمات الترحيل (Migrate Services): توضح لك كيفية تكوين اسم التطبيق، وFirebase (لإرسال الإشعارات) وتسجيل الدخول الاجتماعي.
  • تخصيص: يوضح لك كيفية تخصيص اللغة والموضوعات.

تأكد من الاطلاع عليها! لا أريد أن أكرر ما ذكر في الوثائق. بدلاً من ذلك، ما سنقوم به في هذا القسم هو تخصيص القالب بحيث يبدو بالطريقة التي نريدها.

يتم تخزين معظم إعدادات تكوين المشروع داخل الملف app/Constants.js. فيما يلي أمثلة قليلة من الأشياء التي يمكنك تغييرها من هذا الملف:

ربط WooCommerce: رابط متجر WooCommerce الذي يتم استخدامه من قبل التطبيق. بشكل افتراضي، هو هذا الرابط mstore.io.

تسجيلات الدخول الاجتماعي: وهذا يتم تنفيذه باستخدام Auth0، منصة مصادقة (authentication platform). بشكل افتراضي، القالب فقط يدعم تسجيلات الدخول باستخدام جوجل والفيس بوك. ولكن يجب أن تكون قادراً على إضافة أي خدمة  تدعم Auth0.

الأيقونات: يمكنك استخدام أي أيقونة من Fontawesome، ولكن ينبغي لك استخدام البادئة -ios مع الاسم.

الموضوع: ألوان المكونات المختلفة التي تقوم بإنشاء كل صفحة يمكن أيضا تحديثها. على سبيل المثال، إذا كنت ترغب في تغيير لون خلفية الرأس، يمكنك تحديث القيمة لـ TopBar:

الصور: شاشة البداية وصور أخرى يمكن أيضا تحديثها عن طريق تحديد مسار جديد لكل مما يلي:

يتم تخزين هذه الصور في فهرس app/images، يمكنك ببساطة استبدالها إذا كنت لا تريد الاحتفاظ بالصور القديمة.

  • يمكنك أيضا تغيير خيارات بايبال من هذا الملف. تأكد من إنشاء حساب المطور لبايبال خاص بك للحصول على clientID و secretKey. لا تنس تحديث sandBoxMode إلى false عند نقل تطبيقك لمرحلة التصدير ، لأنه بشكل افتراضي يستخدم وضع sandbox بحيث لا يتم إنفاق أموال حقيقية في المعاملات.
  • لتخصيص الصفحات الفردية، تحتاج إلى الذهاب إلى فهرس app/containers. هنا سوف ستجد الملفات لكل صفحة. على سبيل المثال، إذا كنت ترغب في تخصيص الصفحة الرئيسية، انتقل إلى المجلد home وقم بفتح الملف index.js. بمجرد فتحه، سترى أن الصفحة تستخدم <ImageCard> وهو المكون الذي يقوم بعرض فئة كل منتج. حتى إذا كنت تريد إضافة تصميم عام  للمكون <ImageCard>، يتوجب عليك تحديث الملف app/Components/ImageCard/index.js وبخلاف ذلك، يمكنك ببساطة تحديث الأنماط الموجودة ضمن الصفحة نفسها:

الخلاصة

هذه الدورة التعليمية ليست بأي حال من الأحوال دليلاً شاملاً حول كيفية استخدام قالب BeoStore. ولكن لقد غطينا الكثير من الأساسيات، ولا سيما بشأن إعداد استكشاف الأخطاء وإصلاحها، والتي تفتقر لها الوثائق الرسمية.

والخطوة التالية هي ربط هذا القالب مع متجرك المبني على WooCommerce   أو حتى إعادة توظيفها بحيث يتم استخدامها لأنواع أخرى من التطبيقات.

قم بتنزيل القالب الآن، أو إذا كنت ترغب في معرفة المزيد حول هذا الموضوع، يمكنك مراجعة الوثائق هنا. يمكنك أيضا العثور على العديد من قوالب التطبيقات إطار عمل "React Native" على CodeCanyon.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.