Virtual Box, Responsive, Tablette, Web, Mobile – Installer Virtual Box pour visualiser et tester l’expérience utilisateur (UX)

Devant la fragmentation des plates-formes et des navigateurs, il devient de plus en plus difficile de tester chaque environnement (web, mobile, tablette et TV connecté). Un remède à cela, c’est l’installation de VM (Virtual Machine) à l’aide de Virtual Box afin de pouvoir visualiser l’UX de vos créations digitales dans un environnement approprié car vous n’aurez jamais sous la main l’ensemble des combinaisons OS + navigateur.

On va donc montrer dans cet article comment installer Virtual Box qui remédie en partie à ce problème d’atomicité de plateformes. Bien évidemment, le meiux est quand même de disposer du terminal adéquat par exemple un PC avec IE8, une tablette Android…etc. mais bon votre budget n’est pas extensible à l’infini. Faute de mieux, vous aurez sans recours à ce type de logiciel qui permet d’émuler correctement les environnements les plus divers !

Installer VirtualBox sur Mac

Une fois téléchargé le logiciel, nous avons choisi cette version de VirtualBox, VirtualBox-4-2-18-88780-OSX.dmg. Il ne vous reste plus qu’à installer l’ensemble, rien de bien compliqué en somme bien que le téléchargement de l’ensemble soit long.

Source : https://www.virtualbox.org/

Installer une VM avec VirtualBox

Là cela devient très légèrement plus complexe. On va installer un package qui comprend IE10 + Win7. On va d’ailleurs l’importer à l’aide d’un fichier .ova (Fichier > Importer une application virtuelle). Toutefois, avant cela, on va expédier les deux erreurs les plus couramment commises lorsque on s’attaque à VirtualBox.

1. Vous n’avez pas les droits sur le répertoire Applications de votre Mac
2. Vous ne parvenez pas à créer un fichier .ova depuis le fichier téléchargé .sfx

1. .ova bien ou bien

Une fois que vous avez téléchargé le fichier .sfx qui contient comme dans notre exemple l’environnement IE10 + Win7. Il faut le transformer en .ova.
Comme toujours, les explications que l’on trouve pour cette transformation sont généralement absconses.

En

Pour créer un .ova depuis un .sfx

  after downloading, give 'x' attribute for .sfx file and execute it and generate .ova file.

La commande un peu plus explicite à passer dans la terminal Mac

  chmod +x /chemin_vers_le_repertoire/VMs/IE8.Win7.For.MacVirtualBox.part1.sfx /chemin_vers_le_repertoire/VMs/IE8.Win7.For.MacVirtualBox.part1.sfx

Vous allez à la suite de cette commande, obtenir un fichier .ova que vous allez pouvoir importer dans VirtualBox

2. Pas de droits, pas de chocolat

Une erreur qui se produit classiquement, vos n’avez pas les droits sur le répertoire Applications de votre mac de fait c’est l’échec.
Échec de l’ouverture de session pour la machine virtuelle windows_xp.

  Failed to load VMMR0.r0 (VERR_SUPLIB_WORLD_WRITABLE).
 
  Code d'erreur : NS_ERROR_FAILURE (0x80004005)
  Composant : Console
  Interface : IConsole {db7ab4ca-2a3f-4183-9243-c1208da92392}

La solution à ce problème est chnager les droits sur le repertoire Applications et l’application Virtualbox.app

#sudo chmod 755 /Applications
#sudo chmod 755 /Applications/Virtualbox.app


Une fois réglé ces deux problèmes réglés, vous pouvez passer l’installation d’une VM. Cf. Les étapes de la procédure d’installation d’un .ova

D’autres environnements comme Android par exemple

Vous pouvez directement des .ova pour émuler Android (mobile et tablette). Pourquoi s’en priver… Voici par exemple, les sources que vous pouvez utiliser pour simuler une tablette et un mobile sous Android, pratique non ?

• buildroid_vbox86p_4.0.3_r1-20120518.ova
  Built for a “phone”, 480×800 default resolution
• buildroid_vbox86p_4.0.3_r1-20120518.ova
  Built for a “tablet”, 1024×600 default resolution

Source : http://androvm.org/blog/ex-buildroid/2012/05/18/buildroid-for-virtualbox-20120518-update/

Les étapes de la procédure d’installation d’un .ova

Voici toutes les étapes, erreurs incluses…. de l’installation du package IE8.Win7.For.MacVirtualBox.part1.sfx

Le résumé de l’installation WIN7 + IE8

Changer les droits sur le répertoire Applications

Conclusion : Vous voilà donc fin prêt à faire la recette vos créations sur tous les plates-formes souhaitables ou requises par le client et garantir à peu près le fonctionnement responsive d’un site par exemple ou l’UX de votre application mobile. Je dis à peu prés car ce travail de recette reste une tannée donc généralement c’est expédié et c’est un tort.

En savoir plus

• Installing modern.ie Virtualization on VirtualBox for Mac
  http://chriswharton.me/2013/02/installing-modern-ie-virtualization-on-virtualbox-for-mac/
• Installing VirtualBox for Mac and Set up modern.IE
  http://webees.me/web-development/installing-virtualbox-for-mac-and-set-up-modern-ie/
• Testing Internet Explorer on a Mac. It’s actually quite easy
  https://centroy.com/blog/testing-internet-explorer-mac-its-actually-quite-easy
• How to Install Android in VirtualBox
  http://www.howtogeek.com/164570/how-to-install-android-in-virtualbox/
• AndroVM blog – Running Android in a Virtual Machine
  http://androvm.org/blog/