تعلم ASP.NET MVC


الدرس: ASP.NET MVC لمواقع المحمول


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

سنرى في هذا الفصل الحلول المتاحة لنا.

استخدم محاكي Windows Phone



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

(بالمناسبة ، بمجرد الانتهاء من دراسة ASP.NET MVC ، لا تتردد في معرفة كيفية إنشاء تطبيقات أصلية لنظام Windows Phone)
يمكننا بدء المحاكي من خلال سطر الأوامر ، على سبيل المثال هذا:

تم إنشاء
"C:\Program Files (x86)\Microsoft XDE\8.0\XDE.exe"/vhd "C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0\Emulation\Images\flash.vhd" "٪ TEMP٪ \ test.vhd" / fastShutdown

لا تتردد في جعله اختصارًا لتبسيط إطلاقه.
بدء التشغيل طويل بعض الشيء ، ولكن من المفترض أن ترى إطلاق المحاكي:
ASP.NET framework
بدء تشغيل محاكي Windows Phone
بعد ذلك ، ستحتاج إلى بدء تشغيل تطبيق Internet Explorer :
ASP.NET framework
بدء تشغيل تطبيق Internet Explorer
ثم يمكنك تصفح موقع الويب الخاص بك.
انتباه ، كون محاكي Windows Phone 8 جهازًا افتراضيًا بمفرده ، سيكون عليك استخدام موقع الويب الخاص بك كما لو كنت على شبكة ، أي من خلال الوصول إلى خادم الويب باستخدام اسم الجهاز ، أو حتى عنوان IP الخاص به.
وهذا يشمل أيضًا فتح المنافذ الصحيحة ، أو حتى تعطيل جدار الحماية ، حتى تتمكن من الوصول إليه.
يتضمن كل هذا عمليات إدارة النظام التي تقع خارج نطاق هذا البرنامج التعليمي ، لذلك لن أقدمها.
هناك أيضًا بيئة تطوير متكاملة أخرى تسمى WebMatrix   والتي تتيح التكامل السهل لمحاكيات الجوال.
لن أخبرك عن ذلك أيضًا لأنه يوجد حل أبسط ...

محاكاة متصفح الجوال عن طريق تعديل وكيل المستخدم (user agent)


إذا كنت لا ترغب في تثبيت برامج محاكاة أو IDE آخر ، فهناك حل بسيط لمحاكاة متصفح الجوال. ما عليك سوى تغيير حجمه إلى حجم صغير وتغيير وكيل المستخدم الخاص به.
وكيل المستخدم هو خاصية المتصفح الذي يوفر معلومات حوله ونوع المحرك وإصداره وما إلى ذلك.
على سبيل المثال ، وكيل مستخدم Internet Explorer 10 الخاص بي هو:
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0)
مما يجعل من الممكن أن نستنتج من خلال تحليله أنني أتصفح الموقع باستخدام Internet Explorer في الإصدار 10.0 وأن هناك فرصًا حتى أنا تحت Windows 8 (وهو Windows NT 6.2 الذي يخبرني) .
بالنسبة إلى Chrome ، سنفضل:
Mozilla / 5.0 (Windows NT 6.2؛ WOW64) AppleWebKit / 537.36 (KHTML ، مثل Gecko) Chrome / 27.0.1453.116 Safari / 537.36
وبالنسبة إلى متصفحات الجوال ، فهو نفس المبدأ. على سبيل المثال ، باستخدام Windows Phone ، سيكون لدي وكيل مستخدم مثل هذا:
Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.116 Safari/537.36
ونعم ، لا يزال لدي هاتف Windows Phone 7.5 ... 
حسنًا ، اعلم أنه يمكننا فرض وكيل المستخدم هذا في متصفحنا وإخفاء أنفسنا في Windows Phone (أو أي شيء آخر) . فقط اضغط F12 أثناء وجودك في Internet Explorer (ولكن من الممكن أيضًا مع المتصفحات الأخرى) لفتح أدوات التطوير. انتقل إلى قائمة الأدوات ، وقم بتعديل سلسلة وكيل المستخدم ، ثم يمكنك إما اختيار متصفح أو إدخال وكيل المستخدم الخاص بك:
ASP.NET framework
اختيار وكيل مستخدم
تعرف على مدى جمال موقع OpenClassrooms في هاتف Windows مزيف:
ASP.NET framework
موقع OpenClassrooms في هاتف Windows مزيف
تغيير وكيل المستخدم مؤقت للغاية ولا يقاوم إغلاق علامات التبويب. ستحتاج إلى إعادة وضعها بشكل منتظم للغاية ...

تخطيط متكيف ، تصميم ويب سريع الاستجابة


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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style text="text/css">
        p {
            color: blue;
        }
        @media  screen and (max-width: 800px){
            p{
                color: red; 
            }
        }       
        </style>
        <title>Test Media queries</title>
    </head>

    <body>
        <p>Hello world!</p>
    </body>
</html>
وبالتالي ، إذا تجاوزت شاشته 800 بكسل ، فسيكون النص باللون الأزرق. إذا كان أصغر ، فسيكون النص باللون الأحمر. انظر بالأحرى:
ASP.NET framework
يكون النص باللون الأزرق إذا كانت الشاشة أكبر من 800 بكسل ، أو باللون الأحمر
يعمل هذا بالطبع عن طريق تغيير حجم المتصفح.
يسمح لك هذا بتغيير تخطيط صفحاتك بسهولة لتكييفها مع دقة المستخدم.
يرتبط التصميم سريع الاستجابة أيضًا بعلامة <meta>   النوع viewport  . هذه العلامة موجودة افتراضيًا في جميع طرق العرض التي أنشأناها ويتم استخدامها لتحديد السلوك الذي يجب على المتصفح اتباعه لعرض صفحة ، من خلال تحديد عرض جزء الصفحة المعروض على الشاشة.
في وجهة نظرنا ، يأخذ إطار العرض هذا شكل:

<meta name="viewport" content="width=device-width" />
هذا يعني أن الصفحة يجب أن تكون بنفس حجم دقة الشاشة. عادة ، يسمح هذا لمتصفحات الهاتف المحمول بالتكبير لملائمة الصفحة وعرضها بالحجم الصحيح تلقائيًا.
لكن هذا التصميم سريع الاستجابة يمثل مشكلة. ابحث عن الكود على سبيل المثال لعرض نص إذا كنت تستخدم متصفح عالي الدقة وآخر إذا كنت تستخدم متصفح صغير:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style text="text/css">
        #hellopc {
            color: blue;
            display:inline;
        }
        #hellomobile {
            color: red;
            display:none;
        }
        @media  screen and (max-width: 800px){
            #hellopc {
                color: blue;
                display:none;
            }
            #hellomobile {
                color: red;
                display:inline;
            }
        }       
        </style>
        <title>Test Media queries</title>
    </head>

    <body>
        <p id="hellopc">Hello les PC</p>
        <p id="hellomobile">Hello les mobiles</p>
    </body>
</html>
يعمل بشكل جيد ولدي رسالة مختلفة اعتمادًا على قراري:
ASP.NET framework
تتغير الرسالة حسب الدقة
ومع ذلك ، هل ترى الكود؟ هناك ضعف الكود ... هنا ، إنه ليس خطيرًا جدًا ، ولكن في الصفحات الكبيرة ، هذا يعني ضمناً عرض صفحة أكبر ولكن أيضًا أكبر للتحميل. وعلى هواتفنا التي لا تعمل دائمًا على شبكة الجيل الثالث ، يمكن أن يصبح تحميل البيانات أمرًا غير مفيد بالنسبة لنا بسرعة.

طرق عرض مخصصة لمواقع الجوال


هناك أفضل من التصميم سريع الاستجابة ، والذي بالنسبة للهواتف المحمولة ، ليس الحل النهائي في نهاية المطاف. حتى الآن أفضل حل هو ما يقدمه لنا ASP.NET MVC ، وهذا أمر جيد. 
إنه يتعلق بكتابة طريقة عرض لأجهزة الكمبيوتر وطريقة عرض للهواتف المحمولة ... سهل. ولهذا ، لا يوجد شيء مثل اتفاقية صغيرة جيدة التي تمتلك ASP.NET MVC سرها.
من خلال تخيل أن لديك إجراء index وطريقة عرض Index.cshtml ، يمكنك بسهولة كتابة طريقة عرض للجوال من خلال إلحاقها بـ .Mobile للحصول على Index.Mobile.cshtml . لذلك ، مع العرض العادي التالي Index.cshtml :

@{
    ViewBag.Title = "Index normal";
}

<h2>Index normal</h2>
وعرض Mobile.Cshtml الفهرس التالي:

@{
    ViewBag.Title = "Index.Mobile";
}

<h2>Index.Mobile</h2>
يمكن أن يكون لدينا عرضان مختلفان إذا قمنا بتغيير وكيل المستخدم في متصفحاتنا.
لاحظ أن هذا يعمل أيضًا مع التخطيطات والمشاهدات الجزئية ، والتي يمكننا أيضًا تضمينها مع .Mobile .
حتى أنه من الممكن تحديد ملحقاته الخاصة بحيث يقوم ASP.NET MVC بإرجاع طريقة عرض مختلفة وفقًا لمعيار. على سبيل المثال ، يمكنني إنشاء وضع عرض "WindowsPhone" إذا اكتشفت وكيل المستخدم المناسب:

DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("WindowsPhone")
{
    ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf("Windows Phone OS", StringComparison.OrdinalIgnoreCase) >= 0)
});
عليك فقط وضع هذا في global.asax ، وعندما يحتوي وكيل المستخدم الخاص بك على السلسلة "Windows Phone OS" ، فسيحاول عرض طريقة عرض ملحقة بـ WindowsPhone من النوع Index.WindowsPhone.cshtml .
قلت "حاول" لأنه إذا لم يكن العرض موجودًا أبدًا في وضع العرض ، فإن ASP.NET MVC سيعود تلقائيًا إلى العرض العادي.
لاحظ أنني هنا اخترت القيام بذلك مع وكيل المستخدم ، ولكن يمكن أن تعمل أي حالة تريدها ؛ إذا كان المستخدم مصدقًا ، إذا كان الطقس جيدًا ، إلخ.
لاحظ أنه كلما زاد عدد مرات الضرب ، زاد العمل عندما تحتاج إلى إجراء تغييرات أو تصحيحات.
هناك شيء صغير أخير إذا كنت ترغب في البدء في إنشاء طرق عرض جميلة للهواتف المحمولة: لا تتردد في إضافة مكتبة jQuery Mobile عبر Nuget والذهاب ودراسة كيفية عملها. 

باختصار


  • ASP.NET MVC مناسب بشكل خاص لإنشاء تطبيقات الويب التي تعمل على شاشات الكمبيوتر الكبيرة أو على الأجهزة المحمولة.
  • يمكنك تعديل وكيل المستخدم للمتصفح لمحاكاة متصفح آخر ، مثل متصفح الهاتف المحمول.
  • يعد تصميم الويب سريع الاستجابة أسلوبًا عصريًا للغاية لتكييف عرض موقع الويب مع دقة المتصفح. ولكن ليس بالضرورة أن يكون أفضل حل اعتمادًا على ما تريد القيام به.
  • من الممكن كتابة آراء محددة للهواتف المحمولة من خلال إلحاقها بـ Mobile .