Kategorie: Mobile Apps

Mobile Apps gibt es hauptsächlich für iOS und Android. Windows Phone hat sich noch nicht durchgesetzt.

Es gibt eine Vielzahl von Tools und Technologien. Um den richtigen Entscheid zu treffen, sind folgende Fragen wichtig:

  • Welche Plattformen müssen unterstützt werden? Ist es eine einzige oder sind es mehrere?
  • Zeigt das Mobile App nur Daten an oder werden auch Berechnungen gemacht? D.h. gibt es eine Business-Logik?
  • Welche Schnittstellen gibt es? Woher kommen die Daten?
  • Wie wichtig ist das Aussehen der App? Muss diese ’native‘ sein?

Diese Antworten beeinflussen die Wahl der Tools und Technologien.

Web Frameworks mit JavaScript und HTML5

Kennen Sie Web Frameworks mit JavaScript und HTML5? Sprechen Sie AngularJS, Ionic, jQuery, Kendo UI, MooTools oder Wakanda? Verstehen Sie Foundation, Gumby, Yaml, MontageJS, Bootstrap oder HTML Kickstart? Alles klar oder besteht Erklärungsbedarf? Es handelt sich um JavaScript und/oder HTML5-Frameworks.

Web Frameworks mit JavaScript und HTML5
Bootstrap

Bootstrap

Gut, jetzt sprechen wir Bootstrap. Der Einsatz dieses Frameworks verspricht einiges:

  • Geeignet für alle Personen (Anfänger – Experte)
  • Für alle Web-Anwendungen (von der einfachen statische Seite bis zur komplexen Verknüpfung mehrerer dynamischer Seiten)
  • Ideal für alle möglichen Geräte, insbesondere auch mobile Geräte wie Smartphone und Tablet
  • Diverse vorgefertigte Komponenten – ready to use

Als Anfänger freue ich mich, dass ich dieses Super-Framework einsetzen und so die Produktivität von Anfang an massiv steigern kann. Auf der Einstiegsseite kommen Begriffe wie CSS, Präprozessor, Less, Sass und Plugin vor. Wie war das mit dem Anfänger? Sich nur nicht entmutigen lassen und in die Welt vom Web-Engineering eintauchen!

Mit CSS (Cascading Stylesheet) wird die Darstellung von HTML-Elementen gemacht. Die Grundidee ist die Trennung von Inhalt (HTML) und Gestaltung (CSS). Auf diese Weise können Layout, Farben, Typographie und Animationen definiert werden. Gewisse Attribute können vererbt werden, müssen also nicht jedes Mal neu definiert werden. Ein zentraler Punkt für mobile-fähige Websites: Mit CSS können für verschiedene Ausgabemedien (PC, Smartphone, Tablet) unterschiedliche Darstellungen vorgegeben werden.

CSS3Less ist ein sog. CSS Präprozessor. Dieser bietet zusätzliche Funktionalität wie Variablen. Variablen kenne ich als Programmierer und freunde mich mit CSS immer mehr an. Mit Hilfe von Variablen können Farben, Font Eigenschaften etc. zentral gespeichert werden.

Sass (Software as a service) ist ein allgemeines Konzept bei der Software-Entwicklung. Für meine einfache Webseite brauche ich das zum Glück nicht.

Wie funktioniert es mit dem jQuery Plugin? Was hat jQuery mit Bootstrap zu tun? jQuery ist ein Framework, welches zusammen mit Bootstrap verwendet werden kann. jQuery plugins sind gekapselte Funktionalitäten, welche mit jQuery implementiert sind. Ich bin begeistert: es stehen unzählige Funktionalitäten zur Verfügung, welche ich nicht selber implementieren muss. Eines habe ich schon gelernt: ein neues Framework bedeutet viel Arbeit. Also beschliesse ich, im Moment auf jQuery plugins zu verzichten.

jQuery Carousel
jQuery Carousel

Erste Erfahrungen

Mittlerweile habe ich schon viel Zeit verbracht, um mir diese Informationen zu beschaffen. Geschafft, denke ich und starte voller Elan mit meinem ersten Projekt: Eine einfache statische Webseite, um erste Erfahrungen mit Bootstrap zu sammeln. Ich wollte absichtlich kein bestehendes Beispiel anschauen sondern von Beginn weg etwas selber machen. Schliesslich wollte ich etwas lernen. Gelernt habe ich mehr als ich wollte. Nicht unbedingt gewollt. Der Reihe nach:

  • Der Download der aktuellen Version hat geklappt (kompiliert mit minified CSS, JavaScript und Fonts).
  • Mit welchem Tool erstelle ich die Webseite? Notepad oder eine komfortable IDE? Da ich nicht viel Zeit verlieren wollte, entschied ich mich für Notepad. Was ich erst später bemerkte: eine Validierung der HTML-Tags sowie eine optisch (farbliche) Kennzeichnung ist nicht möglich. Das wäre sehr hilfreich gewesen, besonders als Anfänger.
  • Wie wird Bootstrap eingebunden, wo müssen die Files gespeichert sein? Wie funktioniert es mit relativen Pfaden? Auf Anhieb hat es nicht geklappt.
jQuery UI Bootstrap
jQuery UI Bootstrap

Schlussendlich habe ich es geschafft, eine statische Seite mit Bootstrap zu erstellen. Ohne Framework wäre es wesentlich schneller gegangen. Rückblickend kann ich sagen:

  • Damit ein Framework (ob JavaScript oder HTML) richtig eingesetzt werden kann, sind Grundlagenkenntnisse in JavaScript, HTML5 und CSS nötig.
  • Jedes Framework, das neu eingesetzt wird, erfordert am Anfang (viel) Zeit.
  • Längerfristig lohnt sich der Einsatz eines Frameworks.

Weiterführende Links:

Von der Geschäftsidee zur IT-Umsetzung (2)

Anforderungen

Die Anforderungen der Geschäftsidee an die technische Umsetzung sind wie folgt:

  • Unterstützung verschiedener Werbebotschaften (Video, Bild, Dokument, Live Feed)
  • Erstellung einfacher Werbebotschaften anhand von Vorlagen (Templates)
  • Zugriff auf das Verwaltungstool von überall her und mobilefähig (d.h. auch via Smartphone und/oder Tablet)
  • Unterstützung der gängigsten Videoformate
  • Die Geräte können auch offline betrieben werden, d.h. es braucht keine permanente Internetverbindung
  • Kostengünstig und einfache Installation beim Endkunden

Architektur Video VerwaltungAufbau

Daraus resultiert folgender Aufbau der Video Verwaltungs Software:

  • Web-basierte Anwendung fürs Hochladen und Verwalten der Werbebotschaften
  • Erstellung einfacher Bilder mit Texten aus Vorlagen
  • Gruppierung der Werbebotschaften in Playlisten
  • Individuelle Zuordnung einer Playliste zu einem Gerät

SpotApp

  • Ist ein App, welches auf einem Android-Tablet oder einer TV-Box läuft
  • Holt sich periodisch die neusten Werbebotschaften, welche für dieses Gerät bestimmt sind und speichert diese auf dem Tablet (dadurch Offline-Betrieb möglich).
  • Kann selber eine neue Version installieren (automatisches Update)

Installation

  • Die Geräte (TV, Beamer) brauchen einen HDMI-Anschluss
  • Das Android-Tablet wird via HDMI-Kabel mit dem Gerät verbunden und muss permanent am Strom sein

Die SpotApp erkennt automatisch, ob ein Gerät angeschlossen ist. Ist dies nicht der Fall, werden die Werbebotschaften auf dem Tablet im Vollbildmodus abgespielt. Als Beispiel kann ein 10“-Tablet in einem Warenregal platziert werden. Die SpotApp läuft auch auf iOS. So können die Werbebotschaften auf dem iPad (Mini) oder iPhone gezeigt werden.

Von der Geschäftsidee zur IT-Umsetzung (1)

Ausgangslage

Am Anfang steht die Geschäftsidee auf einem einzigen Blatt Papier – am Ende resultiert eine IT-Lösung, welche weltweit eingesetzt werden kann. Dieses schwierige Unterfangen wird im Folgenden am Beispiel von Spotsonscreen beschrieben. Eine erfolgreiche Zusammenarbeit zwischen zwei KMUs: Spotsonscreen hat eine neue Geschäftsidee, Hyperformers ist verantwortlich für die IT-Umsetzung.

Geschäftsidee

Die Geschäftsidee ist einfach: Werbebotschaften können selber zusammenstellt und auf beliebigen Geräten (TV, Beamer, Tablet) abgespielt werden. Die Werbebotschaften können nach Warengruppen (Rayon) und Filialen klassiert und mit ein paar wenigen Klicks auf die Geräte verteilt werden. Eine permanente Internetverbidnung braucht es nicht.
Spotsonscreen hat umfangreiche Marktabklärungen in der Schweiz und im angrenzenden Ausland gemacht. Es bestehen bereits Kontakte zu möglichen Kunden. Höchste Zeit, mit der IT-Umsetzung zu starten. Als Erstes erarbeitet Hyperformers ein Konzept mit verschiedenen Varianten, wie dieses System aussehen kann. Es braucht ein benutzerfreundliches Verwaltungstool, um die Werbebotschaften hochzuladen und anschliessend auf die Geräte zu verteilen. Es braucht Geräte, welche mit dem Verwaltungstool kommunizieren und die richtigen Videos herunterladen können. Dies bedingt, dass es klar definierte Schnittstellen zwischen der Videoverwaltung und den Geräten braucht.

Storyboard

Der Auftraggeber kann mit technischen Begriffen nicht viel anfangen. Deshalb ist es wichtig, möglichst schnell mit dem Entwurf der Benutzeroberfläche zu beginnen. Eine einfache Möglichkeit besteht darin, ein sog. Storyboard zu erstellen: Verschiedenen Screens werden miteinander verlinkt und der Auftraggeber kann durch die einzelnen Screens navigieren. Damit werden zwei Fliegen auf einen Schlag erwischt:

  • Hyperformers muss die Geschäftsidee verstehen und sich Gedanken zur Umsetzung machen
  • Der Kunde kann verifizieren, ob seine Idee richtig verstanden wurde und vollständig ist
Endgerät Screen
Visualisierung

Beispiel Storyboard: Screen zur Generierung von Reports

Dies ist ein iterativer Prozess. Entscheidend ist, dass die Geschäftsidee von verschiedenen Perspektiven (Auftraggeber, IT, mögliche Kunden) betrachtet wird. So werden alle Aspekte abgedeckt. Eine kritische Haltung aller Beteiligten ist unerlässlich. Dies setzt gegenseitiges Vertrauen voraus. Es geht darum, die Geschäftsidee weiter zu entwickeln, damit sie effizient umgesetzt werden kann.

Am Beispiel Spotsonscreen ist dies gelungen. Nach diversen Besprechungen und zwei Reviews ist sichergestellt, dass:

  • Hyperformers die Anforderungen verstanden hat
  • Das Storyboard korrekt ist
  • Das technische Konzept umgesetzt werden kann
  • Die Umsetzung etappiert wird, damit möglichst schnell verkauft werden kann

Weiterführende Links:

Im nächsten Blog wird die technische Umsetzung beschrieben.