5.10 إنشاء تطبيقات للأجهزة المحمولة

5.10 إنشاء تطبيقات للأجهزة المحمولة #

إنشاء تطبيقات للأجهزة المحمولة باستخدام أنماط تصميم خاصة بالأجهزة المحمولة والتي يمكنها توفير تجربة مستخدم مثالية للشاشات الصغيرة.

5.10.1 مزايا القالب العالمي #

يتميز القالب العالمي Universal Theme – 42 بتصميم متجاوب وواجهة مستخدم متعددة الاستخدامات وسهولة التخصيص ويمكّن المطورين من بناء تطبيقات ويب حديثة دون الحاجة إلى معرفة واسعة بلغة HTML أو CSS أو JavaScript.

تتضمن المزايا الرئيسية للقالب العالمي ما يلي:

• تصميم متجاوب Responsive Design – مصمم للعمل بكفاءة على الأجهزة ذات الشاشات الصغيرة (مثل الهواتف الذكية والأجهزة اللوحية) كما هو الحال على الأجهزة ذات الشاشات الأكبر (بما في ذلك أجهزة الكمبيوتر المحمولة والمكتبية) من خلال الاستجابة تلقائيًا لأبعاد الشاشة التي يعمل عليها. تعمل مكونات واجهة المستخدم في Universal Theme على مختلف قياسات دقة الشاشة مع الحفاظ على نفس الوظائف أو وظائف مشابهة. بالإضافة إلى ذلك، يستفيد Universal Theme بشكل كامل من دقة الشاشة العالية جدًا باستخدام الرسومات المتجهة vector graphics كلما أمكن، والاعتماد على ميزات CSS3 لتصميم واجهة المستخدم.
• واجهة مستخدم متعددة الاستخدامات Versatile User Interface – توفر جميع المكونات والعناصر الأساسية اللازمة لبناء أي نوع من واجهات مستخدم تطبيقات الأعمال عمليًا. نصيحة: لاستعراض جميع المكونات المُرفقة مع Universal Theme، شغّل تطبيق Universal Theme Reference. من قائمة التنقل الرئيسية Main Navigation، حدد مكونات Components.
• تخصيص سهل Easy Customization – خصّص تطبيقاتك بكل سهولة وتحكم فيها بالكامل دون الحاجة إلى خبرة في تصميم واجهة المستخدم أو HTML أو CSS أو JavaScript. باستخدام خيارات “أسطوانة السمات” Theme Roller و”خيارات القالب” Template Options، يمكنك بسهولة تخصيص تطبيقك ليناسب هوية شركتك، وتخصيص مظهر وأسلوب مختلف مكوناته باستخدام “خيارات القالب” Template Options. 

حول نقل تطبيقات jQuery Mobile الحالية إلى القالب العالمي #

تم إيقاف دعم jQuery Mobile وواجهة مستخدم jQuery Mobile المستخدمة في الإصدارات السابقة. إذا كان لديك تطبيق هاتف محمول حالي يستخدم واجهة مستخدم jQuery Mobile، فيجب عليك نقل تطبيقك الحالي إلى القالب العالمي Universal Theme.

نصيحة: لمعرفة المزيد حول نقل التطبيقات الحالية إلى القالب العالمي Universal Theme، شغّل تطبيق “مرجع القالب العالمي” . من قائمة التنقل الرئيسية Main Navigation، حدد “مرجع” Reference، ثم “دليل النقل” Migration Guide.

5.10.2 إنشاء تطبيق ويب تقدمي (PWA) #

تعرف على ميزات ومتطلبات تطبيق الويب التقدمي (PWA) Progressive Web App.

5.10.2.1 حول دعم تطبيق الويب التقدمي #

تستفيد تطبيقات الويب التقدمية (PWAs) من واجهات برمجة تطبيقات الويب الحديثة مما يمنح المستخدمين تجربة تبدو وكأنها تطبيق أصلي.

يمكن للمطورين إنشاء تطبيق ويب تقدمي (PWA) عند إنشاء تطبيق جديد باستخدام معالج إنشاء التطبيق، أو عن طريق تحرير سمات تطبيق موجود.

متطلبات تطبيق الويب التقدمي

تتضمن متطلبات استخدام هذه الميزة ما يلي:

• يجب تقديم تطبيق Oracle APEX عبر بيئة HTTPS آمنة، أو عبر localhost. في حال استخدام بيئة غير آمنة، لن يتم عرض ميزات PWA.
• يجب أن تكون سمة تعريف التطبيق The application Definition، والخصائص Properties، وعناوين URL المألوفة Friendly URLs مُفعّلة. راجع الوصول إلى صفحة تعريف التطبيق.

حول تطبيقات الويب التقدمية

تمكين وظيفة PWA:

• إضافة القدرة على تثبيت التطبيق كتطبيق ويب تقدمي (PWA) Progressive Web App.
• يضيف إدخال شريط تنقل جديد باسم Install App إلى تطبيقك.
• يُحسّن سرعة تحميل الصفحات على الأجهزة المحمولة. يُحسّن وقت عرض تحميل الصفحات باستخدام بنية ذاكرة تخزين مؤقتة جديدة للمتصفح للملفات الثابتة (ملفات APEX الأساسية وملفات التطبيقات).
• يتيح للمستخدمين تثبيت التطبيق على الأجهزة.
• يوفر صفحة قابلة للتخصيص دون اتصال بالإنترنت عندما يكون المستخدمون غير متصلين بالإنترنت ولا يمكنهم طلب الشبكة. راجع رسائل تطبيق الويب التقدمي (PWA) التي تتطلب ترجمة.
• يدعم الخطافات hooks في كود عامل الخدمة للحصول على تجربة PWA قابلة للتخصيص بالكامل.

إنشاء تطبيق ويب تقدمي جديد #

بالنسبة لتطبيق جديد، يمكنك إنشاء تطبيق ويب تقدمي (PWA) عن طريق تمكين ميزة تثبيت تطبيق الويب التقدمي Install Progressive Web App في معالج إنشاء التطبيق ثم تكوين سمات تطبيق الويب التقدمي.

جعل تطبيق موجود تطبيق ويب تقدمي (PWA) #

لجعل تطبيق موجود تطبيق ويب تقدمي، يجب عليك:

• التحقق من أن سمة عناوين URL السهلة الاستخدام Friendly URLs قيد التشغيل On في قسم تعريف التطبيق والخصائص Properties.
• قم بتشغيل سمة تمكين تطبيق الويب التقدمي Enable Progressive Web App ثم قم بتكوين سمات تطبيق الويب التقدمي المتبقية Progressive Web App attributes.

5.10.2.2 إنشاء تطبيق ويب تقدمي #

قم بإنشاء تطبيق ويب تقدمي عن طريق تشغيل معالج إنشاء التطبيق وتمكين ميزة تثبيت تطبيق الويب التقدمي Install Progressive Web App.

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

لإنشاء تطبيق جديد مع تمكين وظيفة تطبيق الويب التقدمي:

• في الصفحة الرئيسية لمساحة العمل، انقر فوق أيقونة “منشئ التطبيقات” App Builder.
• انقر فوق إنشاء Create. يطالبك المعالج باختيار طريقة إنشاء التطبيق. نصيحة: لمعرفة المزيد عن كافة الخيارات المتاحة، راجع اختيار طريقة إنشاء التطبيق.
• انقر فوق استخدام معالج إنشاء التطبيق Use Create App Wizard. تظهر صفحة إنشاء التطبيق.
• بالنسبة للاسم Name، أدخل الاسم المستخدم لتحديد التطبيق للمطورين.
• لإضافة صفحة، انقر على “إضافة صفحة” Add Page وحدد نوع الصفحة المطلوب. تتغير واجهة المستخدم بناءً على نوع الصفحة المحدد. نصيحة: يدعم معالج إنشاء الصفحة إنشاء عدد من التقارير والنماذج المتوافقة مع الأجهزة المحمولة. راجع النماذج القديمة المتوافقة مع الأجهزة المحمولة .يتم عرض الصفحات التي تقوم بإنشائها ضمن الصفحات Pages.
• بالنسبة للميزات Features، حدد الميزات التي تريد تضمينها في تطبيقك. توفر الميزات وظائف على مستوى التطبيق، ولا يمكن إضافتها إلا مرة واحدة لكل تطبيق. لمعرفة المزيد، راجع “المساعدة” Help. لتحديد جميع الميزات، انقر على ” تحديد الكل” Check All.

• تتضمن الميزات الخاصة بتطبيق الويب التقدمي ما يلي:
  • تثبيت تطبيق الويب التقدمي Install Progressive Web App – صُممت تطبيقات الويب التقدمية (PWA) لتكون فعالة وموثوقة وقابلة للتثبيت. يبدو تطبيق الويب التقدمي وكأنه تطبيق مخصص لمنصة محددة. تفعيل هذا الخيار:
    • إضافة إدخال جديد لشريط التنقل Install App.
    • يتيح للمستخدمين تثبيت التطبيق على الأجهزة.
  • إرسال إشعارات Push Notifications – مكّن تطبيقات الويب من إرسال إشعارات إلى جهاز المستخدم حتى لو لم يكن متواجدًا على الموقع. يمكن إرسال الإشعارات إلى جهاز المستخدم المكتبي أو المحمول، ويمكن استخدامها لتنبيهه بالمحتوى أو الأحداث الجديدة على الموقع، أو لإعادة التفاعل معه. يؤدي تفعيل هذا الخيار إلى:
    • إضافة إدخال جديد لشريط التنقل إعدادات المستخدم User Settings.
    • يتيح للمستخدمين الاشتراك وإلغاء الاشتراك في الإشعارات.
    • عند الاشتراك، يمكن للمستخدمين تلقي إشعارات فورية من تطبيق APEX.
• انقر فوق إنشاء التطبيق Create Application.
• قم بتكوين سمات تطبيق الويب التقدمي Configure Progressive Web App attributes. راجع “تكوين سمات تطبيق الويب التقدمي”.

5.10.2.3 تكوين السمات لتطبيق ويب تقدمي #

قم بتكوين سمات تطبيق الويب التقدمي لكل من تطبيقات الويب التقدمي الجديدة والموجودة.

لتكوين سمات تطبيق الويب التقدمي:

1. في الصفحة الرئيسية لمساحة العمل، انقر فوق أيقونة “منشئ التطبيقات” App Builder.
2. حدد التطبيق.
3. من الصفحة الرئيسية للتطبيق، يمكنك الوصول إلى صفحة تطبيق الويب التقدمي بطريقتين:
   • زر تحرير تعريف التطبيق Edit Application Definition:
     • انقر فوق تحرير تعريف التطبيق Edit Application Definition على يمين اسم التطبيق.
     • انقر فوق علامة التبويب تطبيق الويب التقدمي Progressive Web App.
   • من المكونات المشتركة:
     1. انقر فوق المكونات المشتركة Shared Components.
     2. تحت واجهة المستخدم، انقر فوق تطبيق الويب التقدمي Progressive Web App.
4. تحت عام General  قم بتعديل ما يلي:
   1. تمكين تطبيق الويب التقدمي Enable Progressive Web App – تأكد من تمكين هذا الخيار.
   2. قابلة للتثبيت Installable – تأكد من تمكين هذا الخيار.
5. تحت إمكانية التثبيت Installability:
   1. العرض Display – اختر وضع العرض المُفضّل للتطبيق. يتحكم هذا الخيار في مقدار ما يراه المستخدم من واجهة المستخدم. تشمل الخيارات:
      • ملء الشاشة Fullscreen – يفتح تطبيق الويب التقدمي (PWA) دون الحاجة إلى واجهة مستخدم للمتصفح. يشغل هذا الخيار الشاشة أو النافذة بالكامل. مستقل Standalone– يفتح تطبيق الويب التقدمي (PWA) ليبدو كتطبيق مستقل. يعمل التطبيق في نافذة منفصلة عن المتصفح. مكونات واجهة المستخدم القياسية للمتصفح، مثل شريط عناوين URL والأزرار، غير مرئية. واجهة مستخدم بسيطة Minimal UI – مشابهة للواجهة المستقلة، باستثناء أزرار التنقل التي يتحكم بها المتصفح مثل الرجوع والتحديث. المتصفح Browser – يفتح PWA وهو عبارة عن واجهة مستخدم متصفح عادية.
      ملاحظة: تتجاهل بعض الأجهزة والمتصفحات هذه الخاصية. يُرسل Oracle APEX هذه المعلومات فقط إلى الجهاز الذي يتعامل مع تطبيق الويب التقدمي بشكل صحيح.
   2. اتجاه الشاشة Screen Orientation- اختر اتجاه الشاشة المُفضّل عند استخدام تطبيق الويب التقدمي هذا. ينطبق هذا الخيار غالبًا على الأجهزة المحمولة. ملاحظة: تتجاهل بعض الأجهزة والمتصفحات هذه الخاصية. يُرسل Oracle APEX هذه المعلومات فقط إلى الجهاز الذي يتعامل مع تطبيق الويب التقدمي بشكل صحيح.
   3. لون السمة Theme Color – يحدد لون السمة الافتراضي للتطبيق. تؤثر هذه الخاصية على كيفية عرض نظام التشغيل للتطبيق (على سبيل المثال، بالنسبة لمبدل المهام في Android، يحيط لون السمة بالتطبيق). ملاحظة: تتجاهل بعض الأجهزة والمتصفحات هذه الخاصية. يُرسل Oracle APEX هذه المعلومات فقط إلى الجهاز الذي يتعامل مع تطبيق الويب التقدمي بشكل صحيح.
   4. لون الخلفية Background Color- حدد لون الخلفية. يُحدد لون الخلفية لون خلفية مؤقتًا لعرضه قبل تحميل جدول الأنماط. لذلك، يجب أن يتطابق لون الخلفية مع لون خلفية نص السمة لضمان انتقال سلس بين تشغيل تطبيق الويب وتحميل محتواه. ملاحظة: تتجاهل بعض الأجهزة والمتصفحات هذه الخاصية. ينقل APEX هذه المعلومات فقط إلى الجهاز الذي يتعامل مع تطبيق الويب التقدمي بشكل صحيح.
   5. نمط شريط الحالة في نظام iOS Status Bar Style – تُعرض سمة نمط شريط الحالة في نظام iOS كعلامة تعريفية على الصفحة للتحكم في مظهر شريط الحالة في تطبيق الويب عند إضافته إلى الشاشة الرئيسية لجهاز iOS. تتضمن الخيارات:
      • افتراضيًا  Default– هذه هي القيمة الافتراضية وهي تعرض شريط الحالة بالطريقة المعتادة.
      • أسود  Black– هذه القيمة تجعل شريط الحالة أسود اللون.
      • شفاف Translucent– هذه القيمة تجعل شريط الحالة شفافًا، مما يتيح عرض المحتوى خلفه. ملاحظة: أجهزة iOS فقط تستخدم هذه الخاصية. يُرسل Oracle APEX هذه المعلومات فقط إلى الجهاز الذي يتعامل مع تطبيق الويب التقدمي بشكل صحيح.
   6. وصف التطبيق App Description – يشرح وظيفة التطبيق. استخدم هذه الخاصية لتزويد المستخدمين بمعلومات إضافية عند مطالبتهم بتثبيت التطبيق.
   7. بيان مخصص Custom Manifest – يُستخدم لتخزين خصائص JSON إضافية لملف بيان تطبيق الويب. سيتم استخدام الخصائص الموجودة هنا لتوسيع خيارات التصريح المذكورة أعلاه، عن طريق تجاوز الخصائص الموجودة أو إضافة خصائص جديدة.
   8. لقطات الشاشة Screenshots- قم بتضمين لقطات شاشة لأغراض ترويجية عندما يُطلب من المستخدمين تثبيت تطبيق الويب التقدمي. لإضافة لقطة شاشة:
      • انقر فوق إضافة لقطة شاشة Add Screenshot.
      • الوصف Description – أدخل تسمية لقطة شاشة PWA المستخدمة لأغراض إمكانية الوصول عند تثبيت PWA.
      • التسلسل Sequence – يحدد تسلسل العرض المستخدم بواسطة لقطة شاشة PWA هذه.
      • تحميل لقطة شاشة:
        • السحب والإفلات Drag and Drop- اسحب الملف وأفلِته إلى المنطقة.
        • اختر ملفًا – انقر فوق منطقة تحميل لقطة شاشة Upload a Screenshot ، ثم انتقل إلى الملف وحدده.
      • خيار البناء Build Option – يحدد خيار البناء الذي تستخدمه لقطة شاشة PWA هذه.
      • التعليقات Comments – أضف التعليقات المرتبطة بلقطة شاشة PWA هذه.
      • انقر فوق إنشاء Create.
   9. الاختصارات Shortcuts – أدرج اختصارات لتمكين مستخدمي تطبيقات الويب التقدمية (PWA) المُثبّتة من الوصول بسرعة إلى صفحة مُحددة. بالنسبة للأجهزة التي تعمل باللمس، يُمكن الوصول إلى الاختصارات بالضغط مُطولاً على أيقونة التطبيق في الشاشة الرئيسية. أما بالنسبة للأجهزة الأخرى، فيُمكن الوصول إلى الاختصارات بالنقر بزر الماوس الأيمن على أيقونة التطبيق في شريط المهام. لإضافة اختصار:
      • انقر فوق إضافة اختصار Add Shortcut .الاسم Name – أدخل اسم اختصار PWA. عنوان URL المستهدف Target URL – حدد صفحة التطبيق للاختصار الحالي. التسلسل Sequence- يحدد تسلسل العرض المستخدم بواسطة لقطة شاشة PWA هذه. تحميل أيقونة Upload an icon:
        • السحب والإفلات Drag and Drop – اسحب الملف وأفلِته إلى المنطقة. اختر ملفًا Choose a File – انقر فوق منطقة تحميل الرمز Upload an Icon ثم انتقل إلى الملف وحدده.
        الوصف Description أدخل وصفًا لهذا الاختصار PWA. خيار البناء Build Option – يحدد خيار البناء الذي يستخدمه اختصار PWA هذا. التعليقات Comments – أضف التعليقات المرتبطة باختصار PWA هذا. انقر فوق إنشاء Create.
      نصيحة: لا يمكن لتطبيق APEX استخدام اختصارات تطبيقات الويب التقدمية (PWA) إلا إذا كانت ميزة إعادة الانضمام إلى الجلسات مُفعّلة. قبل تهيئة الاختصارات، انقر على “تمكين للجلسات العامة” Enable for Public Sessions أو “تمكين لجميع الجلسات” Enable for All Sessions.
6. تحت إرسال الإشعارات Push Notifications:
   1. تفعيل الإشعارات الفورية Enable Push Notifications – فعّل هذا الخيار للسماح لتطبيقات الويب بإرسال إشعارات إلى جهاز المستخدم حتى لو لم يكن متواجدًا على الموقع. يمكن إرسال الإشعارات إلى جهاز المستخدم المكتبي أو المحمول، ويمكن استخدامها لتنبيهه بالمحتوى أو الأحداث الجديدة على الموقع، أو لإعادة تنشيطه. تمكين هذا الخيار:
      • إضافة إدخال جديد لشريط التنقل: إعدادات المستخدم User Settings.
      • يتيح للمستخدمين الاشتراك وإلغاء الاشتراك في إشعارات الدفع.
      • عند الاشتراك، يمكن للمستخدمين تلقي إشعارات فورية من تطبيق APEX .
   2. إذا تم تمكين تمكين الإشعارات Enable Push Notifications، فستظهر السمات التالية:
      • بيانات الاعتماد Credentials – حدد بيانات الاعتماد التي تريد المصادقة عليها. لتعديل بيانات الاعتماد، انتقل إلى “المكونات المشتركة” Shared Components، ثم “بيانات الاعتماد” Credentials. بيانات الاعتماد مطلوبة لإعداد استلام الإشعارات بشكل آمن. يُستخدم زوج من المفاتيح العامة والخاصة على التوالي للسماح للمستخدمين بالاشتراك في الإشعارات من جهة العميل، وليتمكن الخادم من إرسال الإشعارات إلى المشتركين.
      • صفحة الإعدادات Settings Page – إذا كان التطبيق يحتوي بالفعل على صفحة ميزة الإشعارات الفورية، فسيتم عرض رقم الصفحة هنا. إذا لم يكن التطبيق يحتوي على صفحة ميزة الإشعارات الفورية، فسيتم عرض صفحة الميزة المتاحة للإضافة.
      • بريد إلكتروني للتواصل Contact Email – أدخل عنوان البريد الإلكتروني للتواصل في حال رغب مزود خدمة الإشعارات الفورية (جوجل، موزيلا، آبل، إلخ) في التواصل مع مالك التطبيق. نوصي باستخدام بريد إلكتروني جماعي حتى لا يعتمد على شخص واحد.
7. تحت تكوين عامل الخدمة Service Worker Configuration، حدد عامل الخدمة. مُشغِّلو الخدمة هم ملفات JavaScript تُنفِّذ التعليمات البرمجية حتى عند عدم استخدام التطبيق. يُمكن لمُشغِّلي الخدمة الاستماع إلى أحداث مثل جلب الموارد أو معالجة الإشعارات. يُمكنك تعديل مُشغِّل الخدمة من خلال الخطافات، أو باستبدال الأحداث بالكامل. تشمل خيارات مُشغِّل الخدمة ما يلي:
   • افتراضيًا Default – يولد محرك APEX ذلك باستخدام الاستراتيجية التالية:
     • تثبيت وتفعيل عامل الخدمة Install and activate the service worker
     • تقديم الموارد من ذاكرة التخزين المؤقت إذا كانت ذاكرة التخزين المؤقت موجودة
     • بخلاف ذلك، قم بالخدمة من الشبكة، ثم ضع الموارد في ذاكرة التخزين المؤقت
     • تقديم صفحة غير متصلة بالإنترنت في حالة فشل الشبكة
   • تكوين الخطافات Configure Hooks – املأ الفراغات في كود عامل الخدمة لإضافة خطافاتك الخاصة. مواقع الخطافات مُتاحة بواسطة Oracle APEX. عند استخدام هذا الخيار، يمكنك اختيار “تنزيل التكوين” واستخدامه كرابط ملف.
   • رابط الملف File URL – وفّر رابطًا لملف يحتوي على واجهة ربط عامل الخدمة. هذا مفيد لمشاركة ربط عامل الخدمة عبر تطبيقات متعددة. عند استخدام مرجع الملف، تأكد من اتباع بنية الواجهة بشكل صحيح، وإلا سيفشل عامل الخدمة أثناء التشغيل. لعرض بنية الواجهة، راجع تعليمات مستوى الحقل لهذه السمة.
8. انقر فوق تطبيق التغييرات Apply Changes.