Deine App in Google Play Store – Ionic

App in den Play Store Steffen Lippke Ionic TutorialGlückwünsch. Wenn Du das gefunden hast, bist Du mit Deiner App fast fertig.

Doch ein finaler Schritt fehlt?

 

„Wie erstelle ich aus dem Ionic Projekt Meine Android App?“

 

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: Erstellen einer APK aus Ionic Projekt

Herausforderung und Ziel
Herausforderung und Ziel

Bei Windows enden 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: 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 stillen Kämmerchen entwickelst?

Ich zeige Dir, wie Du Deine App in den Google Play Store bekommst. Wir beginnen bei dem 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 Ionic 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.

11 Kostenlose Exklusive App Dev Tipps

Deine Mail für Zugang zu praxisnahe App Entwicklung Tipps zu erhalten

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

 

 

Unsere Ionic Projekt stellt bisher nur ein bessere Webseite auf Angular Basis dar. Es fehlt noch der Cordova Container, der auf die native Komponenten des Geräts zu greifen kann.

Cordova Container

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 Angular Webseite. Der Container sind vergleichbar mit einem Browser, der die Navigationsleiste oben nicht anzeigt.

Das Ionic Framework bietet zum Veröffentlichen der App einen finalen Build Prozess an. Der Unterschied zum LiveReload ist, dass Ionic in einer optimierter Form die Dateien in dem Projekt zusammenfasst, diese komprimiert und in eine JavaScript Datei umwandelt.

Der Build Prozess dauert länger (30s bis 5 min), dafür ist die App am Ende kompakt.

3. Kapitel

Grundlagen: 4 erste 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) hinzufügst
  3. Build Prozess ausführen – Schritt zum Fertigstellen der .apk
  4. Emulator Test – Probe No. 1: Geht die App im Emulator?

Für Android Apps braucht man Android Studio mit Erweiterungen:

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 besseren Code solltest Du alle auskommentierten Code, kaputten Code, unnützer Code, falsche Dateien, Probecode und ähnliches aus Deinem Projekt herauslöschen. Alles, was nicht zur Funktion des Projekts direkt beiträgt ist unnötig.

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

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 Variablen?
  • Gibt es Variablen aus einem Buchstabe?

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

11 Kostenlose Exklusive App Dev Tipps

Deine Mail für Zugang zu praxisnahe App Entwicklung Tipps zu erhalten

Der dritte Punkt ist, dass Aufspaltung von Funktionen in noch kleiner Funktionen.

  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 Terminalbefehlen 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 builded 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 noch Icons:

  1. Mit Gimp 2.10 erstellen wir ein 1024x1024 Bild mit dem Logo unserer 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 haben willst geht das genauso:
    ionic cordova resources android –splash

Als nächsten Schritt ändern wir die config.xml und schreiben unsere Kontaktdaten, eine Beschreibung und den App Namen hinein. Wähle einen kurzen Namen, da diese die Navigation sonst nur abgeschnitten anzeigt.

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 lost 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 für Android Zocker gebaut wurde. Aber durch seine Vielseitigkeit können Entwickler diesen zum Testen nutzen. Klicke Dich durch das Installtionsmenu und führe die .apk auf dem Simulator aus.

Nox Emulator
Nox Emulator

Überprüfe, ob alle Funktionen Deiner App gewährleistet sind und dass nicht der Screen die Komponenten unterschiedlich anzeigt.

5. Kapitel

Erweiterungen: Tutorial 2

Erweiterungen und Weiterführendes
Erweiterungen + mehr

Um den Umfang etwas zu reduzerien 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.

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!

11 Kostenlose Exklusive App Dev Tipps

Deine Mail für Zugang zu praxisnahe App Entwicklung Tipps zu erhalten

 

Credits zu den verwendeten Bildern
Icons made by Vectors Market from www.flaticon.com is licensed by CC 3.0 BY

Sichere Dir den kompletten
Fundamental Ionic Course

Die kostenlosen Tutorials sind ein Ausschnitt
aus dem Fudamental Ionic Course by Steffen Lippke.

Schon 4832 erfolgreiche Absolventen

  • Code Downloads + umfangreiche Lösungen + Dateien für Grundlagen zum Coden
  • Visuelle Beschreibungen mit HD+ Screenshots und Hilfen
  • Steffen's Clean Code - Erweiterung - Verbesserungs - Tipps
 

100 h Kurslänge | 100 % Geld-Zurück-Garantie | Live-Support

 
1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 4,33 out of 5)
Loading...

Schreibe einen Kommentar

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