HowTo: Deploy einer Ionic 3 App auf Visual Studio Emulator für Android

In diesem kurzen Artikel zeige ich dir, wie du in wenigen Schritten den Android Emulator installierst, um anschließend eigene Ionic Apps deployen und testen zu können.

Installation des Emulator

Den Emulator kannst du kostenlos auf der Visual Studio Website herunterladen und anschließend installieren.

Nach Abschluss der Installation kann der Emulator gestartet werden.

Ansicht des Visual Studio Emulator für Android

Zu sehen ist dann eine Liste mit möglichen Profilen, die über den Emulator zur Verfügung stehen. Zur Auswahl stehen sowohl Tablet als auch Phone Emulatoren mit unterschiedlichen API Leveln und Display größen. Über die „install profile“-Schaltfläche des jeweiligen Profils wird der Download des jeweiligen Profils gestartet. Wie in dem Bild zu sehen, wurde als Beispiel das Marshmallow XHDPI Phone Profil installiert. Anschließend kann der Emulator über den grünen Pfeil gestartet werden.

Oberfläche des Android Emulator nach Unlocken des Bildschirms

Zur Verfügung steht nun eine voll funktionsfähige Android Oberfläche.

Einrichten der Android Debug Bridge

Nachdem der Emulator erfolgreich installiert und gestartet ist, können wir nun damit beginnen, den Emulator für das Deployn/Debuggen einzurichten. Hierfür muss zunächst eine Verbindung mit dem Emulator per Android Debug Bridge (ADB) hergestellt werden. Das ADB Tool ist in der Installation des Andorid SDK Platform Tools enthalten.

Das ADB-Tool kann eine Debug-Verbindung zu einem beliebigen Android-Gerät im Netzwerk herstellen, wobei auf dem Gerät selber der Entwicklermodus aktiviert sein muss. Zur Herstellung der Verbindung wird lediglich die IP-Adresse des Geräts benötigt. Die IP-Adresse des Emulator kann man wie im Bild dargestellt ermittelt werden:

Ermitteln der IP-Adresse des Emulators

Wie in dem Bild zu sehen, verfügt der Emulator über mehrere Adapter, wobei über einen Ping-Test herausgefunden werden kann, unter welcher IP Adresse der Emulator vom PC aus erreichbar ist. In der Regel sollte der erste Eintrag in der Liste die gesuchte IP-Adresse beinhalten.

Öffne anschließend die Windows Eingabeaufforderung und gib folgende Befehle ein:

        cd %localappdata%\Android\sdk\platform-tools
        adb.exe connect [EMULATOR-IP]

ACHTUNG: Je nach Installation der Android SDK Platform Tools kann der Pfad abweichen!

Es sollte nun eine Ausgabe erfolgen, dass die Verbindung erfolgreich hergestellt wurde.

Ausgabe nach erfolgreicher Verbindung

Deploy einer Test App

Nun können wir eine Ionic Test App auf dem Emulator ausgeführt werden. Hierfür wechseln wir mittels Konsole in einen beliebigen Ordner, wo das Beispielprojekt erzeugt werden soll.

Mittels

 ionic start emulatorTest tab
 cd emulatorTest
 ionic cordova run android

wird eine Leer Ionic-Tabs-Anwendung erstellt und auf einem angeschlossenen Android-Gerät ausgeführt. Da in dem Beispiel lediglich der Emulator mittels ADB mit dem PC Verbunden ist, wird automatisch die App auf diesem installiert und gestartet. Da das Projekt zunächst initialisiert und transpiliert werden muss, kann der Vorgang etwas Zeit in Anspruch nehmen.

War alles erfolgreich, sollte das gleiche Ergebnisse wie im folgenden Bild dargestellt erscheinen.

Erfolgreich ausgeführte Ionic App

Zusammengefasst müssen folgende Schritte beim nächsten mal im Projektordner durchgeführt werden:

  1. Emulator starten
  2. Eingabefenster öffnen
  3. ausführen: %localappdata%\Android\sdk\platform-tools\adb.exe connect [EMULATOR IP]
  4. ausführen: ionic cordova run android

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.