• 30 hours
  • Medium

Free online content available in this course.

Certificate of achievement available at the end this course

You can get support and mentoring from a private teacher via videoconference on this course.

Got it!

Last updated on 11/23/17

ASP.NET MVC pour les sites mobiles

Log in or subscribe for free to enjoy all this course has to offer!

Avec la révolution de la mobilité, de plus en plus de sites doivent fonctionner le mieux possible sur des terminaux mobiles, voire sur des tablettes. Il est très facile de rendre son application web compatible avec les terminaux mobiles et ASP.NET MVC est particulièrement adapté pour ça, grâce à son architecture privilégiée.

Nous allons voir dans ce chapitre quelles sont les solutions qui s’offrent à nous.

Utiliser l’émulateur Windows Phone

Nous pouvons utiliser l’émulateur Windows Phone pour tester notre application web sur un terminal mobile. Ceci est facultatif mais peut se révéler fort pratique si votre application web est encore en stade de développement ou que vous ne pouvez pas y accéder avec votre téléphone. Pour cela, il vous faut installer le Windows Phone SDK comme je vous l’indique dans ce tutoriel pour apprendre à développer sur Windows Phone http://fr.openclassrooms.com/informatique/cours/creez-des-applications-pour-windows-phone/installer-les-outils-de-developpement-1.

(D’ailleurs, une fois que vous aurez terminé d’étudier ASP.NET MVC, n’hésitez pas à aller apprendre à faire des applications natives pour Windows Phone)

Nous pouvons démarrer l’émulateur grâce à une ligne de commande, par exemple celle-ci :

"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" creatediffdisk "%TEMP%\test.vhd" /fastShutdown

N’hésitez pas à vous en faire un raccourci pour vous simplifier le lancement de celui-ci.
Le démarrage est un peu long, mais vous devriez voir l’émulateur se lancer :

Démarrage de l'émulateur Windows Phone
Démarrage de l'émulateur Windows Phone

Ensuite, il vous faudra démarrer l’application Internet Explorer :

Démarrage de l'application Internet Explorer
Démarrage de l'application Internet Explorer

Puis vous pourrez naviguer sur votre site web.
Attention, l’émulateur Windows Phone 8 étant une machine virtuelle à lui tout seul, il vous faudra utiliser votre site web comme si vous étiez sur un réseau c’est-à-dire en accédant au serveur web grâce au nom de la machine, voire de son adresse IP.
Cela implique également d’ouvrir les ports corrects, voire de désactiver le firewall, pour pouvoir y accéder.
Tout cela implique des opérations d’administrations systèmes qui sortent du cadre de ce tutoriel aussi je ne les présenterai pas.

Il existe aussi un autre environnement de développement intégré qui s’appelle WebMatrix et qui permet d’intégrer facilement des émulateurs mobiles.

Je ne vous en parlerai pas non plus car il existe une solution plus simple…

Simuler un navigateur mobile en modifiant le user agent

Si vous ne souhaitez pas installer des émulateurs ou un autre IDE, il y a une solution toute simple pour simuler un navigateur mobile. Il suffit de le redimensionner en petit et de changer son user agent.

Par exemple, le user agent de mon Internet Explorer 10 est :

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0)

Ce qui permet de déduire en l’analysant que je navigue sur le site avec Internet Explorer en version 10.0 et qu’il y a même des chances que je sois sous Windows 8 (ça c’est Windows NT 6.2 qui me le dit).
Pour Chrome, on aura plutôt :

Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.116 Safari/537.36

Et pour les navigateurs mobiles, c’est le même principe. Par exemple, avec mon Windows Phone, j’aurai un user agent de ce genre :

Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0)

Et oui, j'ai encore un Windows Phone 7.5... :'(

Eh bien, sachez que nous pouvons forcer cet user agent dans notre navigateur et nous travestir en Windows Phone (ou en autre chose). Il suffit d’appuyer sur F12 en étant dans Internet Explorer (mais c’est également faisable avec d’autres navigateurs) pour ouvrir les outils de développements. Allez dans le menu Outils, Modifier la chaîne de l’agent utilisateur, puis vous pouvez soit choisir un navigateur soit saisir votre propre user agent :

Sélection d'un user agent
Sélection d'un user agent

Voyez comme le site d'OpenClassrooms est beau dans un faux Windows Phone :

Le site d'open class rooms dans un faux Windows Phone
Le site d'OpenClassrooms dans un faux Windows Phone

Mise en page adaptive, le responsive web design

Le responsive web design est la capacité d’un site web à s’afficher de manières différentes en fonction des navigateurs et surtout en fonction de leurs résolutions. Le but est de permettre d’offrir à l’utilisateur de notre site web la meilleure expérience possible de consultation, peu importe son navigateur ou son périphérique de navigation.
Prenez par exemple le site d'OpenClassrooms. Il suit justement les principes de responsive design et fournit un contenu différent si l’on navigue sur le site grâce à son téléphone portable ou si l’on navigue sur un énorme écran d’ordinateur.

Le responsive design est très à la mode en ce moment et utilise la technologie CSS3 media queries. Je ne vous ferai pas un tutoriel sur le sujet car il existe déjà sur le site d'OpenClassrooms, n’hésitez pas à consulter le tutoriel si le sujet vous intéresse.

En résumé et pour vous permettre de voir quelque chose de concret, imaginons que nous souhaitions offrir une expérience différente à notre utilisateur en fonction de s’il possède un grand écran ou un petit, nous pourrions écrire une page avec ce 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>

Ainsi, si son écran dépasse 800 pixels, alors le texte sera bleu. S’il est plus petit, alors le texte sera rouge. Voyez plutôt :

Le texte est en bleu si l'écran est plus grand que 800 pixels
Le texte est en bleu si l'écran est plus grand que 800 pixels, en rouge sinon

Cela fonctionne bien sûr en redimensionnant le navigateur.

Ceci permet de changer facilement la disposition de vos pages pour les adapter à la résolution de votre utilisateur.
Le responsive design est associé également à la balise <meta>  de type viewport . Cette balise est présente par défaut dans toutes les vues que nous avons créées et sert à définir le comportement que le navigateur doit adopter pour afficher une page, en spécifiant la largeur de la partie de la page affichée à l’écran.

Dans nos vues, ce viewport prend la forme de :

<meta name="viewport" content="width=device-width" />

Cela veut dire que la page doit avoir la même taille que la résolution de l’écran. Typiquement, cela permet aux navigateurs de téléphones mobiles de zoomer pour s’adapter automatiquement et afficher la page à la bonne taille.

Mais ce responsive design pose cependant un problème. Regardez par exemple le code pour afficher un texte si on est sur un navigateur à grosse résolution et un autre si on est sur un petit navigateur :

<!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>

Cela fonctionne très bien et j’ai bien un message différent suivant ma résolution :

Le message change en fonction de la résolution
Le message change en fonction de la résolution

Cependant, vous voyez le code ? Il y a le double de code… Ici, ce n’est pas trop grave, mais sur des grosses pages, cela implique une page plus grosse à afficher mais aussi plus grosse à télécharger. Et sur nos téléphones qui ne sont pas toujours en 3G, cela peut vite devenir ennuyeux de télécharger de la donnée qui ne nous sert à rien.

Des vues dédiées aux sites mobiles

Il y a mieux que le responsive design, qui, pour les mobiles, n’est finalement pas l’ultime solution. La meilleure solution est de loin ce que nous propose ASP.NET MVC, cela tombe bien. ^^
Il s’agit d’écrire une vue pour les ordinateurs et une vue pour les mobiles… Facile. Et pour cela, rien de tel qu’une bonne petite convention dont ASP.NET MVC a le secret.

En imaginant que vous ayez une action Index et une vue Index.cshtml, vous pouvez facilement écrire une vue pour mobile en la suffixant par .Mobile, pour avoir Index.Mobile.cshtml. Ainsi, avec la vue normale Index.cshtml suivante :

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

<h2>Index normal</h2>

et la vue mobile Index.Mobile.cshtml suivante :

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

<h2>Index.Mobile</h2>

nous pouvons avoir deux affichages différents si nous changeons l’user agent dans nos navigateurs.
À noter que cela fonctionne aussi pour les layout et pour les vues partielles, que nous pouvons suffixer également par .Mobile.

Il est même possible de définir ses propres extensions pour qu’ASP.NET MVC renvoie une vue différente en fonction d’un critère. Par exemple ici, je peux créer le mode d’affichage « WindowsPhone » si jamais je détecte le user agent approprié :

DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("WindowsPhone")
{
    ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf("Windows Phone OS", StringComparison.OrdinalIgnoreCase) >= 0)
});

Il n’y a plus qu’à mettre ceci dans le global.asax, et lorsque votre user agent contiendra la chaîne « Windows Phone OS », alors il essayera d’afficher une vue suffixée par WindowsPhone du genre Index.WindowsPhone.cshtml.

J’ai dit « essayer » car si jamais la vue n’existe pas dans le mode d’affichage, alors ASP.NET MVC se rabattra automatiquement sur la vue normale.

Remarquez qu’ici j’ai choisi de le faire avec le user agent, mais n’importe quelle condition qui vous plaît peut fonctionner ; si l’utilisateur est authentifié, s’il fait beau, etc.

Une dernière petite chose si vous avez envie de vous lancer dans la création de belles vues pour mobiles : n'hésitez pas à ajouter via Nuget la bibliothèque jQuery Mobile et à aller étudier son fonctionnement. ;)

En résumé

  • ASP.NET MVC est particulièrement adapté pour la réalisation d’applications web qui fonctionnent sur des gros écrans d’ordinateurs ou sur des périphériques mobiles.

  • On peut modifier l’user agent du navigateur pour simuler un autre navigateur, comme celui d’un téléphone mobile.

  • Le responsive web design est une technique très à la mode pour adapter la présentation d’un site web à la résolution du navigateur. Mais elle n’est pas forcément la meilleure solution en fonction de ce que vous souhaitez faire.

  • Il est possible d’écrire des vues spécifiques pour les mobiles en les suffixant par .Mobile.

Example of certificate of achievement
Example of certificate of achievement