تطوير تطبيقات الويب للجوال: متى ولماذا وكيف

نشرت: 2022-03-11

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

في الواقع ، أصبحت الحوسبة المتنقلة منتشرة في كل مكان بشكل متزايد ... وهي رائعة.

ما عدا ، بالطبع ، عندما لا يكون كذلك.

كمستخدم للأجهزة المحمولة ، هناك القليل من الأشياء التي تكون محبطة ويصعب التنقل فيها بسهولة مثل تطبيق ويب للجوال سيئ التصميم ، أو حتى تطبيق أصلي.

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

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

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

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

تطبيق الويب للجوال مقابل التطبيق الأصلي مقابل التطبيق الهجين

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

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

بالإضافة إلى سؤال تطبيقات الويب القديمة مقابل سؤال التطبيقات المحلية ، قد يكون تطبيق الهاتف الهجين هو الحل المناسب لك ، اعتمادًا على متطلباتك وقيود الموارد. تعمل التطبيقات الهجينة ، مثل التطبيقات الأصلية ، على الجهاز نفسه (على عكس داخل المتصفح) ، ولكنها مكتوبة بتقنيات الويب (HTML5 و CSS و JavaScript) وعادة ما تكون مدعومة بإطار عمل مختلط للتطبيق. وبشكل أكثر تحديدًا ، تعمل التطبيقات المختلطة داخل حاوية أصلية ، وتستفيد من محرك متصفح الجهاز (ولكن ليس المتصفح) لعرض HTML ومعالجة JavaScript محليًا. تتيح طبقة التجريد من الويب إلى أصلية الوصول إلى إمكانات الجهاز التي لا يمكن الوصول إليها في تطبيقات الويب للجوال ، مثل مقياس التسارع والكاميرا والتخزين المحلي.

ولكن مهما كان اختيارك - سواء كان تطبيق ويب للجوال أو تطبيقًا محليًا أو مختلطًا - فكن حريصًا على البحث بشكل كافٍ وتأكيد افتراضاتك. على سبيل المثال ، لأغراض هذا البرنامج التعليمي لتطوير تطبيقات الويب للجوال ، ربما تكون قد قررت تطوير تطبيق جوال محلي للتجارة الإلكترونية لبيع منتجاتك. ولكن ، وفقًا لـ Hubspot ، يقول 73٪ من مستخدمي الهواتف الذكية إنهم يستخدمون الويب المحمول أكثر من التطبيقات المحلية للقيام بالتسوق ... لذلك ، في هذه الحالة ، ربما تكون قد راهنت على الحصان الخطأ.

ولكن مهما كان اختيارك - سواء كان تطبيق ويب للجوال أو تطبيقًا أصليًا أو هجينًا - فاحرص على البحث بشكل كافٍ وتأكيد افتراضاتك.

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

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

من أفضل الممارسات الحاسمة في تحديد كيفية تطوير تطبيق ويب للجوال معرفة عميلك.

يتطلب تطوير تطبيقات الويب للجوال تخطيطًا تفصيليًا

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

هناك مشكلة أخرى شائعة لمطوري تطبيقات الويب على الأجهزة المحمولة وهي افتراض أن الكود المستند إلى الويب لمتصفح سطح المكتب سيعمل "كما هو" في متصفح الجوال. لا. هناك بالتأكيد اختلافات ، وإذا لم تكن على دراية بها ، فيمكنها بالتأكيد أن تعضك. على سبيل المثال ، لا تعمل وظيفة التشغيل التلقائي لعلامة HTML5 <video> على متصفحات الجوال. وبالمثل ، فإن خصائص transition opacity CSS غير مدعومة (أو على الأقل ليست مدعومة بشكل ثابت) في معظم متصفحات الجوال في الوقت الحاضر. ستواجه أيضًا مشكلات مع بعض أساليب واجهة برمجة تطبيقات الويب على نظام أساسي للجوّال ، مثل واجهة برمجة تطبيقات دفق الموسيقى SoundCloud التي تتطلب Adobe Flash وهو غير مدعوم في معظم الأجهزة المحمولة.

تتمثل إحدى الطرق الشائعة للمبتدئين في مطوري تطبيقات الويب على الأجهزة المحمولة في التأكيد على أن الكود المستند إلى الويب لمتصفح سطح المكتب سيعمل "كما هو" في متصفح الجوال.

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

يجب التفكير أيضًا في دعم شاشات Retina من Apple (شاشات الكريستال السائل التي تحتوي على كثافة بكسل عالية بما يكفي بحيث لا تتمكن العين البشرية من تمييز وحدات البكسل الفردية على مسافة عرض نموذجية). تقدم العديد من منتجات Apple - بما في ذلك iPhone و iPod Touch و iPad و MacBook Pro و iPad Mini و iPad Air - شاشات Retina. بالنسبة إلى تطبيق الويب للجوّال على وجه الخصوص ، من المهم أن تدرك أن شاشة Retina تجعل الصور منخفضة الدقة (التي يتم تقديمها عادةً للأجهزة المحمولة) تبدو غامضة ويمكن أن يحدث البكسل. أفضل حل لتطوير التطبيقات في هذه الحالات هو جعل الخادم يدرك أن الطلب يأتي من جهاز Retina ثم توفير صورة بديلة أعلى دقة للعميل.

إذا كنت ترغب في استخدام بعض عناصر HTML5 الرائعة ، فتذكر التحقق مسبقًا من أن الوظيفة التي تبحث عنها مدعومة عبر مشهد الجهاز الذي من المحتمل أن يستخدمه عملاؤك. على سبيل المثال ، في نظام التشغيل iOS 6 والإصدارات الأحدث ، لا يوجد دعم لوظيفة getUserMedia نظرًا لأنه لا يمكن الوصول إلى الكاميرا إلا من خلال التطبيقات الأصلية. هناك مصدران رائعان للتحقق مما هو مدعوم على أجهزة ومتصفحات معينة ، وهما caniuse.com و html5test.com.

تذكر أن تتحقق مسبقًا من أن الوظيفة التي تبحث عنها مدعومة عبر مشهد الجهاز الذي من المحتمل أن يستخدمه عملاؤك.

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

 /* For lower than 700px resolutions */ @media (max-width: 700px) { ... } /* Same as last but with the device orientation on land scape */ @media (max-width: 700px) and (orientation: landscape) { ... } /* Including width and orientation you can add a media type clause, in this case 'tv' */ @media tv and (min-width: 700px) and (orientation: landscape) { ... } /* for low resolution display with background-image */ .image { background-image: url(/path/to/my/image.png); background-size: 200px 300px; height: 300px; width: 200px; } /* for high resolution (Retina) display with background-image */ @media only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { -repeat; background-size: 200px 400px; /* rest of your styles... */ } }

تحسين تطبيق الويب للجوّال من أجل الأداء

"يا إلهي ، هذا الشيء بطيء جدًا!" بصفتك مطورًا لتطبيق ويب للجوال ، فمن المحتمل أن تكون هذه هي الكلمات الأخيرة التي تريد سماعها من أحد المستخدمين لديك. لذلك يجب أن تفكر مليًا في كيفية تقليل وتحسين كل بايت ونقل خادم لتقليل وقت انتظار المستخدم. من غير الواقعي توقع إجراء عمليات النقل دائمًا عبر شبكة WiFi ، ويجب أن تعلم أن 60٪ من مستخدمي الويب عبر الأجهزة المحمولة يقولون إنهم يتوقعون تحميل موقع على هواتفهم المحمولة في غضون 3 ثوانٍ أو أقل (المصدر). وبالمثل ، وجدت Google أنه مقابل كل خمس ثوانٍ إضافية من وقت التحميل ، انخفضت حركة المرور بنسبة 20٪ (وتجدر الإشارة أيضًا إلى أن محركات البحث تنظر في أوقات التحميل كجزء من حساب نقاط جودة الصفحة).

يقول 60٪ من مستخدمي الويب للجوال إنهم يتوقعون تحميل موقع على هواتفهم المحمولة في 3 ثوانٍ أو أقل.

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

  • تحسين الصورة. يُعرف وقت تحميل الصورة بأنه أحد أكبر مشكلات الأداء التي تؤثر على تحميل الصفحة على أجهزة الجوال. يمكن أن يكون استخدام أدوات تحسين الصور عبر الإنترنت ، مثل smushit.com ، مفيدًا في معالجة هذه المشكلة.
  • ضغط الكود. من المحتمل أن يكون لضغط ملفات JavaScript و CSS ، اعتمادًا على مقدار التعليمات البرمجية التي لديك ، تأثير كبير على الأداء.
  • استعلامات قاعدة البيانات.
    • لا تقبل بعض متصفحات الأجهزة المحمولة العديد من ملفات تعريف الارتباط كما تفعل متصفحات سطح المكتب ، مما قد يؤدي إلى الحاجة إلى تنفيذ استعلامات أكثر من المعتاد. لذلك ، يعد التخزين المؤقت من جانب الخادم أمرًا بالغ الأهمية بشكل خاص عند دعم عملاء تطبيقات الويب للجوال.
    • تذكر استخدام عوامل التصفية المناسبة لمنع إدخال استعلام SQL الذي قد يعرض أمان موقعك وخادمك للخطر.
  • شبكات توصيل المحتوى (CDN). إذا كنت تخطط لتوفير الكثير من مقاطع الفيديو أو الصور أو الملفات الصوتية أو أنواع أخرى من الوسائط ، يوصى بشدة باستخدام CDN. تتضمن بعض شبكات CDN التجارية الأكثر شيوعًا Amazon S3 و Microsoft Windows Azure و MaxCDN. مزايا استخدام CDN عديدة وتشمل:
    • تحسين أداء التنزيل. تمكنك الاستفادة من موارد CDN من توزيع الحمل وحفظ النطاق الترددي وتعزيز الأداء. توفر شبكات CDN الأفضل توفرًا أعلى وزمن وصول أقل للشبكة وفقدان أقل للحزم. علاوة على ذلك ، توفر العديد من شبكات CDN اختيارًا موزعًا عالميًا لمراكز البيانات ، مما يتيح حدوث التنزيلات من خادم أقرب إلى موقع المستخدم (مما يؤدي إلى عدد أقل من عمليات النقل في الشبكة وتنزيلات أسرع).
    • المزيد من التنزيلات المتزامنة. تحد المتصفحات عادةً من عدد الاتصالات المتزامنة إلى مجال واحد ، وبعد ذلك يتم حظر التنزيلات الإضافية حتى يكتمل أحد التنزيلات السابقة. يمكنك غالبًا رؤية هذا الحد قيد التنفيذ عند تنزيل العديد من الملفات الكبيرة من نفس الموقع. يسمح كل CDN إضافي (على مجال مختلف) بتنزيلات متزامنة إضافية.
    • تحليلات محسنة. توفر العديد من شبكات CDN التجارية تقارير استخدام يمكن أن تكمل تحليلات موقع الويب الخاص بك والتي قد تقدم قياسًا أفضل لمرات مشاهدة وتنزيلات الفيديو. GTmetrix ، على سبيل المثال ، لديها أداة ممتازة لإعداد تقارير موقع الويب لمراقبة وتحسين المصادر المحملة على موقعك.

أدوات تطوير تطبيقات الويب للجوال

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

اختيار الحق في JavaScript Mobile Web App Framework

نظرًا لأن تطوير تطبيقات الويب للجوال يميل إلى إنشاء العديد من نفس التحديات الشائعة - مثل التوافق عبر المستعرضات وعدم اتساق HTML و CSS في متصفحات الأجهزة المحمولة - فقد تم تطوير أطر عمل (استنادًا إلى HTML5 و CSS3) تم تصميمها خصيصًا لمعالجة هذه المشكلات و للعمل بشكل مثالي قدر الإمكان على مجموعة واسعة من الهواتف الذكية والأجهزة اللوحية. تتميز معظم أطر تطبيقات الويب للجوال هذه بأنها خفيفة الوزن ، مما يساعد على تسهيل تصفح الويب للجوال بسرعة دون المساس بشكل ومضمون موقعك.

لتوسيع نطاق رؤيتنا إلى ما وراء مشهد الجوّال ، إذا كان هناك إطار عمل JavaScript شائعًا واحدًا يستحق الذكر ، فهو jQuery. إذا كنت معتادًا على إصدار سطح المكتب ، فإنني أوصي بتجربة jQuery Mobile لتطبيق الويب للجوال الخاص بك. يحتوي على مكتبة عناصر واجهة المستخدم التي تحول الترميز الدلالي إلى تنسيق مناسب للإيماءات ، مما يجعل العمليات سهلة على شاشات اللمس. يتكون أحدث إصدار من قاعدة تعليمات برمجية خفيفة الوزن تحتوي على الكثير من العناصر الرسومية التي يمكنها حقًا تحسين واجهة المستخدم الخاصة بك.

بديل آخر ، Sencha Touch ، يكتسب بسرعة حصة في السوق أيضًا. إنه يوفر أداءً ممتازًا بشكل عام ويساعد في إنتاج واجهة مستخدم ويب للجوال تبدو إلى حد كبير وكأنها واجهة أصلية. تعتمد مكتبة عناصر واجهة المستخدم كاملة الميزات الخاصة بها على مكتبة ExtJS JavaScript الخاصة بـ Sencha.

فيما يلي بعض الاختلافات الرئيسية التي يجب مراعاتها عند مقارنة jQuery Mobile و Sencha Touch:

  • انظر و اشعر. بشكل عام ، يكون شكل ومظهر تطبيق Sencha Touch أكثر وضوحًا ومتفوقًا على تطبيق jQuery للجوال ، ولكن من المهم أن تتذكر أن ردود الفعل هذه تميل إلى أن تكون ذاتية للغاية.
  • التمدد. يقدم jQuery Mobile الكثير من امتدادات الجهات الخارجية وهو مصمم بطبيعته ليكون قابلاً للتوسيع بدرجة كبيرة ، بينما يعد Sencha Touch حاليًا أكثر من إطار "مغلق".
  • دعم الجهاز. يستهدف jQuery Mobile حاليًا قطاعًا عرضيًا أكبر من الأجهزة من Sencha Touch.
  • HTML "مقابل" جافا سكريبت. يعتمد jQuery إلى حد كبير على HTML (على سبيل المثال ، توسيع ومعالجة HTML الموجود في JavaScript) ، في حين أن تشفير Sencha Touch يعتمد بالكامل على JavaScript. (هذا مثال ، بالمناسبة ، على مجموعة مهارات فريق التطوير لديك التي يجب مراعاتها عند تحديد اختيارات التكنولوجيا الخاصة بك.)
  • التبعيات الخارجية. يتطلب jQuery mobile jQuery و jQuery UI لمعالجة DOM ، في حين أن Sencha Touch ليس له تبعيات خارجية.
  • منحنى التعلم. يجد معظم المطورين أن وقت الزيادة في استخدام jQuery أقل من وقت Sencha Touch ، وربما يكون ذلك مدفوعًا بنسبة كبيرة من مطوري الويب الذين هم بالفعل على دراية بمكتبات jQuery القياسية.

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

بدأ عدد متزايد من الأطر المتجاوبة في الظهور في السنوات الأخيرة ، مع اثنين من أكثرها شعبية حاليًا هما Bootstrap and Foundation. باختصار ، تعمل الأطر سريعة الاستجابة على تبسيط وتبسيط تصميم واجهة المستخدم المستجيبة على شبكة الإنترنت وتنفيذها ، وتغليف التخطيطات ونماذج واجهة المستخدم الأكثر شيوعًا في إطار عمل محسّن للأداء وقابل لإعادة الاستخدام. تعتمد في الغالب على CSS و JavaScript ، العديد من هذه الأطر مفتوحة المصدر ومجانية التنزيل وقابلة للتخصيص بسهولة. ما لم تكن لديك مجموعة متطلبات شديدة الخصوصية ، فمن المحتمل أن استخدام أحد هذه الأطر سيقلل من مستوى الجهد لتصميم وتنفيذ تطبيق الويب للجوال الخاص بك.

عند فحص الخيارين الرئيسيين ، Bootstrap و Foundation ، فإن بعض الاختلافات الرئيسية التي يجب مراعاتها تشمل:

  • المنصات المستهدفة. بينما يدعم Bootstrap الأجهزة المحمولة والأجهزة اللوحية وأجهزة سطح المكتب ، فإنه موجه بشكل أساسي نحو استخدام سطح المكتب. من ناحية أخرى ، تم تصميم الأساس لجميع أحجام وأنواع الشاشات.
  • التوافق المتصفح. Bootstrap متوافق مع IE7 أو أعلى ، بينما Foundation متوافق فقط مع IE9 أو أعلى.
  • تنوع التخطيطات والمكونات. يحتوي Bootstrap على مجموعة من عناصر واجهة المستخدم أكبر بكثير مما تقدمه Foundation.
  • تغيير الحجم تلقائيًا. باستخدام Foundation ، تتقلص الشبكة وتمتد وفقًا لارتفاع وعرض المتصفح الحالي ، بينما يدعم Bootstrap فقط مجموعة محددة مسبقًا من أحجام الشبكة بناءً على مجموعة قياسية من أحجام الشاشة.

تصحيح واختبار تطبيقات الويب للجوال

يمكن أن يكون تصحيح تطبيقات الويب للجوال أمرًا صعبًا ومحبطًا إلى حد ما ، خاصة إذا كنت بحاجة إلى البحث عن أجهزة مختلفة للاختبار عليها أو تثبيت حزم SDK لمحاكاة (غير كاملة عادةً) لمنصات العميل المستهدفة.

في هذا السياق ، تتمثل إحدى الميزات الواضحة لتطوير الويب للجوال (مقارنةً بتطوير التطبيقات الأصلية) في أنه يمكنك استخدام أدوات المطورين القياسية المستندة إلى المستعرض لتصحيح أخطاء تطبيقك. بناءً على تفضيلي الشخصي لتصحيح الأخطاء عن بُعد ، فإن الشيء الذي أوصي به في هذا البرنامج التعليمي لتطوير التطبيق هو Chrome مع DevTools. تشمل الخيارات القياسية الأخرى Firefox مع Firebug أو Opera's Dragonfly أدوات.

عند تعلم كيفية تطوير تطبيقات الويب ، انظر إلى Chrome وأدواته DevTools.

بعض الأسباب التي تجعلني أفضل Chrome مع DevTools تشمل:

  • محاكي الجوال في DevTools من Chrome. ربما يكون هذا وحده سببًا كافيًا لاختيار Chrome لتصحيح أخطاء تطبيقات الويب للجوال. تشمل الميزات الرئيسية محاكاة أحداث اللمس ، وانتحال وكيل المستخدم ، وخنق عرض النطاق الترددي للشبكة ، وتجاوزات تحديد الموقع الجغرافي ، وتجاوزات اتجاه الجهاز ، ومحاكاة نوع وسائط CSS.
  • محرر تفاعلي. القدرة على تحرير JavaScript أو CSS أثناء التنقل.
  • مصحح جافا سكريبت متفوق. يسمح بنقاط توقف DOM ويوفر القدرة على تحديد وقت تنفيذ كود JavaScript الخاص بك.
  • عارضات JSON و XML المضمنة. يتجنب الحاجة إلى أي مكونات إضافية لفحص استجابات الخادم.
  • دعم بروتوكول Android Debug Bridge (ADB) مباشرة عبر USB. يسهل إنشاء مثيل لجلسة تصحيح الأخطاء عن بُعد. (إليك برنامج تعليمي جيد من Google حول كيفية بدء تصحيح الأخطاء عن بُعد في Chrome.)
  • الفحص الديناميكي للموارد. يسمح لك بفحص مصادر البيانات المحلية لتطبيقك ، بما في ذلك قواعد بيانات IndexedDB أو Web SQL والتخزين المحلي وتخزين الجلسة وملفات تعريف الارتباط وموارد ذاكرة التخزين المؤقت للتطبيق. يمكنك أيضًا فحص الموارد المرئية لتطبيقك بسرعة ، بما في ذلك الصور والخطوط وأوراق الأنماط.

لاختبار التخطيط وتوافق التصفح المتقاطع لتطبيق الويب الخاص بك ، يمكنك أيضًا استخدام بعض الأدوات المفيدة عبر الإنترنت ، مثل BrowserStack. ما عليك سوى إدخال عنوان URL للتطبيق الخاص بك ، وتحديد المتصفح والإصدار ونظام التشغيل ، وستحصل على العرض المحاكي (وسرعة التحميل) لموقعك في تلك البيئة. أداة أخرى مفيدة لهذه الأغراض هي CrossBrowserTesting.

يتم إحتوائه

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

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

ذات صلة: اجعل تطبيقك مربحًا - استفد من تحليلات الجوّال