2

TODO-App Entwickeln – Wie Du deine erste App entwickelst – Tutorial Teil 1

In den kommenden Tagen lernst Du, wie Du eine TODO-App mit Apache Cordova selber programmieren kannst für iOS und Android.

Teil 1 dieses Artikels zeigt Dir den Einstieg in Apache Cordova sowie Vor- und Nachteile der Technologie.

Cordova TODO App Test

Diese TODO-App wirst Du in den nächsten Tagen selbst entwickeln - Android & iOS ...

Hybride Apps vs. Native Applikationen

cordova transparent

Hybride Applikationen, sogenannte plattformübergreifende Apps, wie Apache Cordova bieten eine interessante Alternative zu herkömmlichen nativen Anwendungen.

Während native Apps in den meisten Fällen ein reibungsloseres sowie leistungsfähigeres Gesamtergebnis liefern, gibt es aus meiner Sicht viele Bereiche, in denen hybride Lösungen geeignet sein können.

 

Native Anwendungen (Native Apps) kommunizieren direkt mit dem jeweiligen Betriebssystem. Hingegen sprechen Webanwendungen mit dem Browser, welcher wiederum mit dem Betriebssystem kommuniziert.

Es gibt also eine zusätzliche Ebene, die Webanwendungen überqueren müssen, und das macht sie etwas langsamer als native Apps.

 

Allerdings gibt es einige Nischen, in denen eine Cordova App eine gute Alternative sein kann. Je nach Anwendungsfall und dem, was das Du von deiner App erwartest, kann die Hybrid-App genau die richtige Problemlösung sein.

 

Dir sollte jedoch klar sein, dass Du bei gewissen App-Funktionen etwaige Kompromisse berücksichtigen musst.

 

Hier möchte ich dir einige der technischen Vor- und Nachteile der plattformübergreifenden App-Entwicklung (wie bspw. mit Apache Cordova) zeigen.

 

cordova

Einmal in HTML, CSS und JS coden und auf allen Plattformen (z.B. Apple iOS und Android) veröffentlichen...

Vorteile von Cordova

  • Schnelle Entwicklung - Potenzielle Zeit- und Kostenersparnis durch plattformübergreifende Entwicklung.
  • Einfache Erstellung von einfachen Web-Anwendungen oder Proof of Concepts
  • Ideal, wenn Du dich mit HTML, CSS und JavaScript auskennst.
  • Code kann theoretisch auf zu 100% auf allen weiteren Plattformen weiterverwendet werden (ggf. gibt es bei Bibliotheken und Plugins einige Ausnahmen).
  • Viele zur Verfügung stehende Plugins, insbesondere für iOS und Android. Viele der gängigen Funktionen sind als Open Source Plugin verfügbar (z.B. auf Github).

Nachteile von Cordova-Apps

  • Framerate - Aufgrund der begrenzten Ressourcen, die dem WebView zur Verfügung stehen, kannst Du teilweise nicht, wie bei nativen Anwendungen, mit 60 FPS rechnen. Bei neueren Smartphones sollte das jedoch kein Problem mehr sein.
  • Leistung - Während HTML5 starke Animationsmöglichkeiten bietet, kann die Performance auf Smartphones nicht mit nativen Anwendungen mithalten
  • Komplexere Regressionstests – Ein plattformübergreifender Quellcode bedeutet, dass eine Änderung auf z.B. Android, unvorhergesehene Fehler auf einer anderen Plattform z.B. iOS verursachen kann.
  • Sicherheit – Faktoren wie die Sicherheit und Verschlüsselung sollten berücksichtigt werden. Wenn es um Business-Anwendungen mit sensiblen Daten geht, sollte der Security-Bereich lieber in eine native Anwendung integriert werden

Wie installiere ich Apache Cordova?

Du benötigst die neueste Version von Apache Cordova, Node.JS und eine Kommandozeilen-App.

1. Kommandozeilen-App installieren (falls Du noch keine hast)

Um Cordova auf deinem Rechner zu installieren brauchst Du zunächst ein Terminal (Kommandozeile).

Wenn Du noch kein Terminal hast, empfehle ich dir das Tool „Cmder“ (kostenloser Download auf cmder.net)

(Mac User haben bereits eine Kommandozeile vorinstalliert)

Installierere und öffne die Kommandozeile im Anschluss.

2. Node.JS Server

Ob Du Node.JS bereits installiert hast, kannst Du dem folgenden Befehl prüfen:

node --version

Wenn Du Node.JS noch nicht installiert hast, lade es kostenlos auf NodeJS.org herunter.

Installiere die jeweilige Node.JS dann auf deinem Betriebssystem.

3. Cordova installieren – Ich will endlich anfangen!

Öffne die Kommandozeile und installiere Apache Cordova mit folgendem Befehl:

npm install -g cordova

 

Fertig Du hast Cordova installiert!

Wie starte ich eine App in Cordova?

Lege dafür zunächst ein neues Cordova Projekt mit dem folgenden Befehl an:

cordova create testapp

In diesem Beispiel haben wir das Projekt „testapp“ angelegt.

 

Navigiere dann mit dem „cd“ Befehl in den soeben angelegten Projektordner:

cd testapp

 

Mit dem folgenden Befehl fügst Du das Projekt der Plattform „Browser“ hinzu. An dieser stelle läuft es Projekt ausschließlich im Browser, als Web-Anwendung. (Für Android und iOS müssen zusätzliche Installationen hinzugefügt werden … dazu aber später mehr)

cordova platform add browser

App starten – Wir sind am Ziel

Führe folgenden Befehl aus, um die App zu starten:

cordova run browser

 

Natürlich müssen wir die App noch programmieren.

 

In diesem Artikel sollte es jedoch zunächst um die vielen Vorteile von Apache Cordova gehen. Außerdem wollte ich Dir zeigen, wie Du in wenigen Minuten mit dem Programmieren von plattformübergreifenden Apps starten kannst.

Wenn Du bist zu dieser Stelle gekommen bist hast Du bereits die Installation von Cordova abgeschlossen, dein erstes Projekt angelegt und die leere App gestartet.

 

Im nächsten Video zeige ich Dir dann, wie wir einen Design-Prototypen für unsere TODO-App erstellen.

Prototyping Entwurf Handzeichnung

Entwurf der TODO-App: Auch Design-Prototyping genannt

Die fertige TODO-App kannst Du dir jetzt schon kostenlos runterladen, wenn Du sofort loslegen willst. Außerdem kannst Du hier 20 App-Ideen von mir klauen., die Du für deine eigene Projekte benutzen kannst.

Für den Download (TODO-App Projekt & 20 App-Ideen) einfach hier klicken.

  • 4. Juni 2019
Click Here to Leave a Comment Below 2 comments
Andreas Nord - 23. August 2021

Hey, darf ich dich Mal etwas fragen zu der to do app. Wie kann ich das realisieren, das die auf 2 unterschiedlichen Geräten angezeigt wird? Auf einem Android und einem iOS Gerät, die gleiche Liste. Bsp. Meine Frau macht auf Ihrem Handy eine Liste die ich auf meinem sehen kann?

Reply
    Arek - 11. Oktober 2021

    Hi Andreas,
    das ist der Punkt an dem es kompliziert wird 😀
    Dafür musst du einen Server programmieren, der diese Liste zum Beispiel in einer Datenbank abspeichern kann. Dieser Server muss diese Daten dann als Webserver bereitstellen. Deine Apps müssen dann über HTTP-Requests zum einen Änderungen der Liste an den Server übertragen und zweitens dann die Liste auch zurückgeben können.
    Damit diese Daten im Internet aber auch privat bleiben, sollte man dazu eine Authentifizierung bauen. Ansonsten kann jeder in die Liste schreiben und diese lesen 🙂

    Beste Grüße
    Arek

    Reply

Leave a Reply: