App-Entwicklung: Cross-Platform, Teil 2.

Für die Entwicklung einer App sind unterschiedliche Herangehensweisen möglich. Zur Auswahl der richtigen Tools bzw. Frameworks dienen folgende Leitfragen:

• Auf welchen Plattformen soll die App laufen?
• Wieviel Zeit habe ich für die Entwicklung der App und welche Funktionen soll diese beinhalten?

Sind diese Fragen beantwortet bestehen folgende Möglichkeiten die App zu entwickeln: Native Anwendung, Web-App oder hybride App. Zu allen drei Möglichkeiten wollen wir Euch nachfolgend ein paar grundlegende Informationen geben, sodass ihr selbst entscheiden könnt, wann ihr welche Methode einsetzt und was in etwa dahinter steckt.

Native Anwendung

Insbesondere, wenn eine App ausschließlich für eine Plattform entwickel werden soll, lohnt es sich eine native App zu entwickeln. Dementsprechend werden auch plattformspezifische Entwicklungsumgebungen genutzt. Dies ermöglicht einen vollständigen Zugriff auf alle Funktionen und Geräteeigenschaften. Außerdem werden so alle herstellerspezifischen Vorgaben und Richtlinien sicher eingehalten.

Was benötigt ihr für eine native App-Entwicklung?

• Android: (1) Java ist Eure Programmiersprache; (2) als Testgerät nutzt ihr ein Android Smartphone mit aktiviertem Debug-Modus und USB-Verbindungskabel; (3) schließlich benötigt ihr noch einen PC mit installiertem Android Studio als Entwicklungsumgebung.
• iOS: (1) Swift ist Eure Programmiersprache (früher Objective-C/Cocoa); (2) als Testgerät nutzt ihr ein iOS-Gerät (z.B. ein iPhone oder iPad) (3) schließlich benötigt ihr noch einen Mac mit installierter Xcode Entwicklungsumgebung.
• Universelle Windows-Plattform: (1) Eure Programmiersprache legt ihr selbst fest (in der Regel bewegt Ihr Euch im Bereich .Net) ; (2) als Testgerät nutzt ihr ein Windows-Gerät; (3) schließlich benötigt ihr noch einen PC und Visual Studio als Entwicklungsumgebung – alle notwendigen Programmiersprachen werden hier bereits mitinstalliert.

In allen Fällen könnt ihr zum Testen der Anwendung auch auf ein Testgerät verzichten und stattdessen einen Emulator einsetzen. Bedenken solltet ihr dabei jedoch, dass sich der Test der Anwendungen dadurch (auch bei leistungsfähigen Computern) deutlich langsamer als bei der Benutzung eines expliziten Testgerätes. Außerdem stehen dem Emulator häufig nicht alle Funktionen, wie z.B. Bluetooth oder die Nutzung der Kamera zur Verfügung.

Plant ihr die App auf mehreren Plattformen gleichzeitig bereit zu stellen, bieten sich andere Lösungswege an. Nachteilig an den jeweils nativen Ansätzen ist, dass ihr bei einer Portierung auf eine andere Plattform den ganzen Quellcode erneut entwickeln müsst. Der Quellcode kann mit diesen Ansätzen also nicht für mehrere Plattformen gleichzeitig verwendet werden. Stattdessen könnt ihr dazu auf Web-Anwendungen oder die bereits erwähnten Cross-Platform-App-Development-Tools zurück greifen.

Web-Anwendung

Web-Anwendungen (oder auch Web-Apps) sind dem Grunde nach Webseiten. Daher werden zur Entwicklung auch die bekannten Web-Standards wie HTML, CSS und JavaScript verwendet. Nachfolgend werden diese drei Standards nur kurz skizziert und ihr findet Hinweise zum Weiterlesen und Tutorials, um Euch in die jeweilige Technologie einarbeiten zu können.

• HTML steht für Hyper Text Markup Language und ist eine Auszeichnungssprache zur Beschreibung und Strukturierung von digitalen Inhalten, üblicherweise wird HTML zur Beschreibung von Seiten im Internet genutzt. Mit HTML lassen sich sowohl die Inhalte als auch die Seitenstruktur beschreiben, die anschließende Darstellung erfolgt dann in einem Browser und wird üblicherweise durch CSS (siehe unten) beeinflusst. Als Inhalte kann man sowohl einfachen Text, als auch Multimedia-Inhalte (wie Video oder Bildmaterial) oder Verweise auf andere Seiten verstehen. HTML benutzt sogenannte Tags, um Inhalte zu kennzeichnen. Hier ein Beispiel für Tags, die einen einfachen Textabsatz kennzeichnen:

  <p>Dies ist ein Textabsatz</p>

  Wichtig ist es zu jedem öffnenden auch einen schließenden Tag zu beschreiben, um ein gültiges HTML-Dokument zu erhalten. Tags dürfen auch geschachtelt werden und in manchen Fällen kann das öffnende auch zugleich das schließende Tag in einem sein.

  Weitere Informationen über HTML könnt ihr unter diesen Links finden: w3schools.com (Tutorial), w3.org (Standard-Spezifikation)

• CSS steht für Cascading Style Sheets. Diese dienen zur Beschreibung der Darstellung (Layout) der einzelnen Elemente. Mit CSS können Farben und Layouts für ein HTML-Dokument einfach konfiguriert werden. Neben HTML könnt ihr CSS auch für die Darstellung von anderen Inhalten wie XML (Extensible Markup Language) oder SVG (Scalable Vector Graphics) verwenden. Man erreicht damit eine Trennung von Inhalten und Darstellung (Design), somit kann beides einfach und unabhängig voneinander weiterentwickelt werden. Um Beispielsweise den Hintergrund des obigen Textabsatzes in Rot einzufärben, könnt ihr folgende CSS-Deklaration verwenden:

  p { background-color: red; }

  CSS kann insgesamt auch sehr umfangreich werden, wenn die Darstellung einer ganzen Anwendung beschrieben werden soll. Hierzu nutzt man in CSS auch komplexere Konstrukte, beispielsweise Vererbung, außerdem kann man auch auf Erweiterungen, beispielsweise Präprozessoren wie SASS (Syntactically Awesome Stylesheets), einsetzen

  Weitere Informationen über CSS findet ihr beispielsweise unter folgenden Links: CSS Tutorial, w3.org (Standard-Spezifikation)

• JavaScript: JavaScript ist eine leichtgewichtige Programmiersprache, die ähnlich wie Java, eine objektorientierte Programmierung anbietet. Im Gegensatz zu Java nutzt JavaScript ein Laufzeitsystem, das lediglich rudimentäre Datentypen verwendet. Dazu gehören numerische, Boolsche Werte sowie Zeichenketten. Außerdem nutzt JavaScript ein prototyp-basiertes-Objektmodell, d.h. vererbte Attribute können sich von Objekt zu Objekt unterscheiden. JavaScript unterstützt First-Class Funktionen und wird hauptsächlich für Client-Anwendungen im Browser eingesetzt. Allerdings findet JavaScript auch in anderen Anwendungen Anklang. Das Framework Node.js nutzt JavaScript und ermöglicht damit eine Programmierung von Backend-Services. Auch eine Realisierung von Datenbankanwendungen mittels JavaScript ist möglich. Hierzu kann Apache CouchDB verwendet werden.JavaScript bietet vorab Standardbibliotheken wie Array, Date und Math. Weitere Bibliotheken können bei Bedarf hinzugefügt werden. Somit können komplexe Funktionen bereitgestellt werden und die Anwendungslogik der Anwendung programmiert werden. JavaScript dient somit als Erweiterung von HTML und CSS. Anschauliche Informationen erhaltet ihr hier ebenfalls bei w3schools.com (Tutorials), javascript.info (Info), developer.mozilla (Info). Eine Sammlung von Tutorials für JavaScript können auch aus guru99.com entnommen werden. Hier ein kleines Code-Beispiel:

  var variable = "Hello-World";
  alert(variable);

  Die Anwendung sendet hier eine Benachrichtigung mit dem Inhalt: „Hello-World“.

Für die Entwicklung von Web-Apps kann eine Entwicklungsumgebung genutzt. Um nativen Apps ähnlich zu sein, wird die Browseranzeige in der Darstellung ausgeblendet. Da es sich dennoch um eine Web-Anwendung handelt, sind Unterschiede in Design-Elementen (Widget) üblicherweise dennoch gut zu erkennen. Außerdem sind native Gerätefunktionen hier nicht ohne weiteres nutzbar.

Hybride Apps

Hybride Apps vereinen die Vorteile von Web-Apps und nativen Apps. Die Anwendung wird zunächst unter Nutzung von Web-Technologien wie HTML, CSS und JavaScript entwickelt und danach durch einen Generator in eine native App umgewandelt. Dadurch wird die Oberfläche ebenfalls sehr stark an die native Darstellung angeglichen. Auch native Gerätefunktionen können hierbei einfach genutzt werden. Da die Umwandlung relativ komplex ist, ist es bei umfangreichen Applikationen nicht immer garantiert, dass alles genau wie bei einer nativ entwickelten App funktioniert. Dies hängt insbesondere vom Generator-Framework (wie Cordova oder PhoneGap) und der unabhängigen Weiterentwicklung der Plattformen (wie iOS, Android) ab. Teilweise können manche Funktionen daher gar nicht oder erst mit zeitlicher Verzögerung in die Entwicklung eingebunden werden.

Um zu entscheiden, ob eine Hybride App die richtige Wahl ist, sind daher folgende Fragen zu beantworten:

• Welche Programmiersprachen beherrsche ich?
• Welche Funktionen benötigt meine App?
• Welche Frameworks passen zu mir und meiner technischen Umgebung?
• Welche Reputation (Entwicklungszyklen und Support) weisen diese unterschiedlichen Frameworks auf?

Wie kann ich hybride Apps entwickeln?

…und welche Frameworks sind dafür interessant? Um diese Fragen zu beantworten, stellen wir Euch in den nächsten Beiträgen einen Vergleich einiger Frameworks vor. Wir entwickeln dazu eine Referenz-App, die in allen Frameworks die gleichen Funktionen bieten soll. Die Referenz-App bietet als Navigation ein Tab Menü im unteren Bildschirmrand. Folgende Funktionen sollen abgebildet werden:

• Tab 1: Im ersten Tab kann standardmäßig die Ortszeit abgefragt werden.
• Tab 2: Der zweite Tab ermöglicht eine genaue Lokalisierung des Geräts. Angezeigt werden hierzu die Longitude sowie Latitude.
• Tab 3: Der dritte Tab ermöglicht die Aufnahme eines Fotos mittels der Smartphone-Kamera, welches anschließend in der Bedienoberfläche angezeigt werden soll.

Anbei eine paar Mockups der Referenz-App:

Zur Demonstration nutzen wir die Entwicklungsumgebungen Visual Studio (für Xamarin), Visual Studio Code oder wahlweise auch Atom (für die übrigen Frameworks). Als Testgerät greifen wir auf ein Android Smartphone zurück. Für das Deployment nutzen wir außerdem ein USB-Verbindungskabel. Zusätzlich müsst ihr noch den Entwicklermodus auf eurem Smartphone aktivieren. Den Entwicklermodus schaltet ihr wie folgt frei:

1. Geht in die Einstellungen eures Android-Gerätes
2. klickt unter System auf das Navigationselement „Über das Telefon“
3. Scrollt ganz nach unten bis ihr den Eintrag Build-Number seht. Hier merhmals anklicken bis die Meldung erscheint: „Sie sind jetzt Entwickler“
4. Wenn ihr jetzt wieder zurück in die Einstellungen-Gesamtübersicht geht, müsste hier der Eintrag Entwickleroptionen erscheinen. Diesen wählt ihr aus.
5. Dann unter Debugging USB-Debugging aktivieren.

Gegebenenfalls müsst ihr für euer Smartphone noch die entsprechenden Android-Developer-Treiber herunterladen und installieren. Hierzu findet ihr auf der offiziellen Android-Developer-Seite nähere Informationen.