Deine App in Google Play Store – Ionic

App in den Play Store Steffen Lippke Ionic TutorialDer finale Schritt für Deinen App-Erfolg fehlt noch?

„Wie lade ich mein (Ionic) App-Projekt in den Google Play Store?“

Ich zeige Dir Schritt für Schritt, wie Du Deine Ionic-App in Google Play veröffentlichen kannst.

Inhalt - Weg zum Google Play Store

Herausforderung + Coding-Ziel

Coding zur Umsetzung

Coding-Ansatz + Konzept

Erweiterungen + Aufgaben

Grundlagen einfach erklärt

Fertiges Ziel / Ergebniss

1. Kapitel

Herausforderung & Ziel: Von Ionic zur APK

Herausforderung und Ziel
Herausforderung und Ziel

Bei Windows enden ausführbare Anwendung  .exe, bei Android mit .apk.

Dein Ionic Projekt basiert bis jetzt auf einer Mischung aus HTML und TypeScript.

Wie Du die das Projekt eine installierbare App umwandelst, zeige ich Dir.

 

 

Unser Ziel: Ein Play-Store Eintrag

Wer wollte, nicht schon immer mal die eigne App im Play Store veröffentlichen?

Wer wollte nicht mal seinen Freunden zeigen, was Du den ganzen Tag in seinen / ihrem stillen Kämmerchen entwickelt?

Ich zeige Dir, wie Du Deine App in den Google Play Store bekommst. Wir beginnen bei dem (fast-)fertigen Ionic Projekt und enden bei dem Publish-Button in der Google Play Console (Spoiler: Dort kann jeder Apps hochladen.)

Technische Grundlagen - Dein Vorwissen

  • Eine fertige App (oder eine .apk Datei)

 

 

2. Kapitel

Konzept: 4 von 8 Schritte

Konzept und Lösungsansatz
Konzept und Lösungsansatz

Lehne Dich zurück.

Gute Nachricht: Ionic macht vieles für Dich.

Trotz des einfachen Build Prozesses sollte der Programmierer trotzdem die Grundlagen kennen.

 

 

Unsere Ionic Projekt ist nicht viel mehr als eine Webseite  aus HTML, CSS und JS. Sobald der ionic serve Prozess abgeschlossen ist, zeigt Dein Browser die Webseite an.

Es fehlt noch der Cordova Container, der auf die nativen Komponenten des Geräts wie die Kamera, GPS und Sensoren zu greifen kann.

Cordova Container - Universale App

Für iOS benötigt das Ionic Projekt einen anderen Container als für Android. Der Cordova Container bildet die Hülle für unsere Webseite. Der Container sind vergleichbar mit einem Browser, welcher die Navigationsleiste oben nicht anzeigt.

Das Ionic Framework bietet zum Veröffentlichen der App einen finalen Build-Prozess an. Der Unterschied zum normale LiveReload bei ionic serve ist, dass Ionic in einer optimierten Form die Dateien in Deinem Projekt zusammenfasst, diese komprimiert und in eine JavaScript Datei umwandelt. Ionic erstellt eine Single-App-Application.

Der Build-Prozess für Android oder iOS dauert länger (30s bis 5 min), dafür ist die App am Ende kompakt in der Größe. Je nach Bildern, die Du im assets Ordner gespeichert hast, kann das Projekt größer sein.

Denke daran, nicht verwendete Bilder zu löschen und die übrigen zu komprimieren. Meine Empfehlung für die Komprimierung ist TinyPNG/JPG.

3. Kapitel

Grundlagen: 8 Schritte zu Google Play

Theorie einfach erklärt
Grundlagen einfach erklärt

Der nächste Abschnitt zeigt einen Überblick über den Prozess zur Veröffentlichung der App.

 

Anhand dieser Schritte machen wir Deine App für den Store reif

  1. Code säubern Clean Code ist für jedes Coding-Projekt ein Muss, ganz egal in welchem Format.
  2. Ionic Plattformen installieren – Wie Du zum Ionic Projekt Android (und iOS) Dateien hinzufügst
  3. Build-Prozess ausführen – der finale Schritt zum Fertigstellen der .apk
  4. Emulator Test – Probe No. 1: Geht die App im Emulator?

Zum Builden von Android Apps braucht jeder Entwickler Android Studio mit den SDK-Erweiterungen. Hier ein Schritt für Schritt Anleitung, wie Du Android Studio installierst.

Install Android Studio
Installiere Android Studio
Projekt aufsetzen nur zum Starten
Projekt aufsetzen nur zum Starten
Installiere alle Build Tools
Installiere alle Build Tools

4. Kapitel

Coden: Veröffentlichen...

Coding und Umsetzung
Coding zur Umsetzung

Jetzt wird’s konkreter.

Die folgenden Schritte sind in dieser Reihenfolge angeordnet, weil diese logisch aufeinander aufbauen.

  1. Clean Code
  2. Testen
  3. Veröffentlichen

1.    Code säubern

Für einen besseren Code solltest Du allen ...

  • auskommentierten Code
  • kaputten Code
  • unnützen Code
  • nicht gerauchten Code

... aus den Dateien löschen. Das bläht den Code nur unnütz auf.

Denke auch daran, falsche Dateien, ungenutzte Bilder, JSONs und ähnliches aus Deinem Projekt herauslöschen. Alles, was nicht zur Funktion des Projekts direkt beiträgt, ist sofort zu löschen. (Du solltest möglichst Git nutzen, dass Du nochmal auf Deinen alten Stand zurückspringen kannst.)

Wenn Du das Projekt mit Git initialisiert hast, kannst Du zu den alten Dateien zurückkehren, wenn Du Code vermisst.

Werfe einen Blick auf die Benennung und Struktur der Variablen.

  • Sind diese konsistent + aussagekräftig benannt?
  • Kann ein Fremder den Wert und Funktion der Variable verstehen, ohne sich das Projekt anzusehen?
  • Vermeidest Du Wörter wie data, info, string, integer in den Variablennamen?
  • Gibt es Variablen mit nur einen Buchstaben?

Bitte suche einen verständlichen Namen, dem jeder intuitiv verstehen kann.

Im dritten Schritt solltest Du den Funktionsumfang eine Funktion reduzieren.

  1. Extrem: 1 Funktion = 1 Statement
  2. Kurze Funktionen mit sprechenden Namen sind aufschlussreicher als 20 Statements hintereinander

Außerdem kann der Programmierer doppelten Code vermeiden, indem er die Funktionen global macht.

2. Ionic Plattformen installieren

Mit ein paar Terminal-Befehlen können wir für Ionic die Android / iOS Module installieren. Diese enthalten richtige Android-Studio bzw. XCode Projekte, die ausführbar sind. Die Konvertierung unser HTML5 App in Java bzw. Swift erfolgt über das Framework.

Ionic baut und konvertiert die App in die entsprechenden Projekte.

ionic cordova run android --prod –release

Dieser Befehl lässt die App auf einem Android Gerät laufen, welches über USB-Debugging angeschlossen ist. Bevor der eigentliche Prozess startet, wirst Du gefragt, ob Du die Ionic Plattform für Android installieren möchtest.

Diese einfach mit Y bestätigen.

Für die App brauchen wir das (Haupt-)App Icons:

  1. Mit der Bildbearbeitungssuite Gimp 2.10 erstellen wir ein 1024x1024 Bild mit dem Logo Deiner Wahl
  2. Wir ersetzen das Standard Ionic Bild unter assets/imgs/logo.png
  3. Dann führen wir folgendes Kommando aus, um das Logo in die passende Größen skalieren zu lassen:
    ionic cordova resources android –icon
  4. Wenn Du noch eine Splash-Screen (Startbildschrim) haben willst geht das genauso mit:
    ionic cordova resources android –splash

Als nächsten Schritt ändern wir die config.xml.

Dort verändern wir die Kontaktdaten, Beschreibung und den App-Namen. Wähle einen "kurzen" Namen, da diese der Homescreen sonst hart kürzt.

3.    Build-Prozess ausführen

Ganz einfacher Schritt:

ionic cordova build  android --prod –release

Die APK-Datei findest Du im Plattform Ordner in Deinem Projekt. Der obige Befehl löst den Build Prozess aus. Die .apk Datei aktualisiert sich nicht mit dem LiveReload. Deshalb ist ein extra Befehl notwendig.

4.    Emulator Test

Nox Player ist eine Android Simulator, der die Entwickler ursprünglich für Android Spieler entworfen haben. Aber durch seine Vielseitigkeit können Entwickler diesen zum Testen nutzen. Klicke Dich durch das Installationsmenü und führe die .apk auf dem Simulator aus.

Nox Emulator
Nox Emulator

Überprüfe, ob alle Funktionen Deiner App gewährleistet sind. Die Darstellung im Browser unterscheidet sich manchmal von Anzeige im Emulator.

5. Kapitel

Erweiterungen: Tutorial 2

Erweiterungen und Weiterführendes
Erweiterungen + mehr

Um den Umfang etwas zu reduzieren habe ich hier eine Cut gemacht.

Wenn Du So weit gekommen bist, dann hast Du ein Lob verdient.

Der nächste Post von Mir auf dem Blog ist der das Tutorial, welches dieses vervollständigt.

Hier gehts zum Kapitel 2:

Google Play veröffentlichen 2: Schritte 5-8

6. Kapitel

Fazit: Guter Code, Solide Texte

Ziel und Fazit
Ziel und Fazit

Mit den erledigten Werk kannst Du zufrieden sein. Die Vorbereitung zum Veröffentlichen ist fertig.

Schreibe in die Kommentare Fragen!

 

Credits zu den verwendeten Bildern
Icons made by Vectors Market from www.flaticon.com is licensed by CC 3.0 BY
1 Star2 Stars3 Stars4 Stars5 Stars (7 votes, average: 3,86 out of 5)
Loading...

Schreibe einen Kommentar

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