Mobiele sites ontwikkelen en testen met simulators

Ingediend door Donny op di, 17/07/2012 - 08:08

In het verleden schreef ik al enkele posts over hoe je mobiele websites kan testen tijdens of na het ontwikkelen, dit was voornamelijk door gebruik te maken van browser plugins of andere online diensten. Echter deze zullen je niet alle mogelijke opties geven die je met een mobiel toestel zoals bv een iPhone of iPad kan gebruiken.

Natuurlijk kan je je moeilijk elk toestel aanschaffen om dit te gaan testen, gelukkig zijn er hiervoor simulators beschikbaar die je kan laden op je Mac en zo de applicaties of websites uitgebreid kan testen.

Voor de iPhone zijn er verschillende websites online te bekijken die beweren een emulator of simulator te verzorgen, echter deze voorzien meestal enkel maar een iframe zodat je er in feite nog geen stap verder mee bent.

Indien je nog niet moest beschikken over Xcode op je Mac, kan je deze downloaden op de Apple Developer pagina's. De huidige recente versie voor Xcode is Xcode 4. Het biedt een krachtige IDE voor het ontwikkelen van applicaties voor oa je Mac, iPhone, iPad en voorziet ook de iOS Simulator.

Na installatie kan je de simulator terugvinden onder "Developer/Platforms/iPhoneSimulator.platform/Developer/Applications"

Je kan er de iPhone en de iPad mee laden, daarnaast beschik je ook nog over andere opties zoals bv het scherm draaien, schudbewegingen, ...

iPhone simulator

iPhone flip

iPad emulator

Natuurlijk beschikt niet iedereen over een iPhone en zijn er ook andere mobiele toestellen op de markt beschikbaar, naast de iPhone simulator voorzie ik meestal zelf ook nog een Android simulator.

Deze kan je als volgt installeren:

  • Download de SDK op:¬†http://developer.android.com/sdk/index.html
  • Unzip de bestanden naar een locatie naar wens
  • Open de nieuwe map en ga daarin verder naar de map 'tools'
  • Start 'Android'
  • Hierop zal de Android SDK Manager openen

Alvorens verder van start te kunnen gaan dienen we de SDK te updaten en de nodige opties binnen te halen, dit doen we door:

  • Vink alles aan onder Tools
  • Vink het laatste Android API platform aan, op dit moment Android 4.0.3 (API 15) (Zorg dat alles onder deze versie ook geselecteerd is)
  • Install packages
  • Best is het ook om even alles te herstarten

Nu we beschikken over de nodige bestanden kunnen we de Android simulator gaan samenstellen

  • Start opnieuw¬†Android SDK Manager op (zie eerste stappen)
  • Selecteer nu bovenaan in de Apple beheerbalk 'Tools'
  • En kies voor 'Manage AVDs' (Android Virtual Devices)
  • Hier kan je altijd je beschikbare Android simulators terug vinden
  • Om er eentje toe te voegen druk je rechts op 'New'
  • Configureer je device naar wens, zie voorbeeld screenshot hieronder
  • Indien alles ingesteld is druk je op 'Start' op jouw Android device op te starten (Let wel, deze is een pak trager dan de iPhone simulator om op te starten)

Android simulator settings

Android simulator