Mit ML Kit kann man leistungsstarke Machine-Learning-Funktionen für Applikationen bereitstellen. Es ist egal ob für Android oder iOS und ob man ein erfahrener Machine-Learning-Entwickler ist oder gerade erst anfängt. Es ist für alle gedacht.

ML Kit wird mit einer Reihe von gebrauchsfertigen APIs für häufige mobile Anwendungsfälle geliefert: Erkennen von Text, Erkennen von Gesichtern, Erkennen von Landmarken, Scannen von Barcodes und Beschriften von Bildern. Man muss einfach Daten in die ML Kit-Bibliothek übergeben und man erhält die Informationen, die man benötigt.

Die Auswahl der APIs von ML Kit wird auf dem Gerät oder in der Cloud ausgeführt. Die On-Device-APIs können die Daten schnell verarbeiten und sind auch ohne Netzwerkverbindung funktionsfähig. Auf der anderen Seite nutzen die Cloud-basierten APIs die Möglichkeiten der Machine-Learning-Technologie von Google Cloud Platform, um eine noch höhere Genauigkeit zu bieten.

Wenn die APIs von ML Kit die Anwendungsfälle nicht abdecken, kann man immer die eigenen TensorFlow-Lite-Modelle verwenden. Man muss einfach das Modell in Firebase hochladen, und Google kümmert sich um das Hosting und die Bereitstellung für die App. Das ML-Kit fungiert als API-Ebene für das benutzerdefinierte   Modell und vereinfacht die Ausführung und Verwendung.

Wie funktioniert es?

Mit ML Kit kann man ML-Techniken in Apps problemlos anwenden, indem man die ML-Technologien von Google wie das Google Cloud Vision-API, TensorFlow Lite und das Android Neural Networks-API in einem einzigen SDK zusammenfasst. Egal, ob man die Leistung von Cloud-basierter Verarbeitung, die Echtzeitfunktionen mobiler optimierter Gerätemodelle oder die Flexibilität der benutzerdefinierten TensorFlow Lite-Modelle benötigt, ML Kit macht dies mit nur wenigen Zeilen Code möglich.

Implementierungspfad

1. Integrieren des SDK: Füge das SDK schnell ein, indem du Gradle oder CocoaPods verwendest.
2. Eingabedaten vorbereiten: Wenn man beispielsweise eine Vision-Funktion verwendet, nimm ein Bild von der Kamera auf und generiere die erforderlichen Metadaten (z. B. Bilddrehung) oder fordere den Benutzer auf, ein Foto aus seiner Galerie auszuwählen.
3. Anwenden des ML-Modells auf Ihre Daten: Durch die Anwendung des ML-Modells auf die Daten generiert man abhängig von der verwendeten Funktion Erkenntnisse wie den emotionalen Zustand der erkannten Gesichter oder die Objekte und Konzepte, die im Bild erkannt wurden. Nutze diese Erkenntnisse, um Funktionen in der App zu verwenden, z. B. Foto-Verschönerung, automatische Metadaten-Generierung oder was auch immer man sich vorstellen kann.

Man kann zwischen On-Device- und Cloud-APIs wählen:

Texterkennung

Mit den Texterkennungs-APIs von ML Kit kann man Text in jeder lateinischen Sprache (und mehr, in der Cloud-basierten Texterkennung) erkennen.

Die Texterkennung kann die mühsame Dateneingabe für Kreditkarten, Quittungen und Visitenkarten automatisieren. Mit der Cloud-basierten API kann man auch Text aus Dokumenten extrahieren, mit denen man die Barrierefreiheit verbessern oder Dokumente übersetzen kann. Apps können sogar reale Objekte verfolgen, beispielsweise durch Lesen der Zahlen in Zügen.

Mittels eines Tutorials (https://www.youtube.com/watch?v=lILIg0XeJoY) habe ich eine Texterkennungsapplikation nachgebaut und es sind mir ein paar wichtige Punkte aufgefallen:

• Es ist sehr wichtig, dass alle Versionen im Gradle (vor allem von Firebase selbst) auf den aktuellen Stand sind. Hier kann man die aktuellen Versionen vergleichen: https://firebase.google.com/support/release-notes/android
• Man muss sich nur mit Firebase verbinden.
  • Das kann man in Android Studios einfach machen, indem man auf Firebase in der oberen Leiste drückt. Dann drückt man auf eines der Unterpunkte wie z.B. Authentication und drückt auf „Connect to Firebase“.
• Um die Cloud Versionen der Produkte zu verwenden, muss man sich bei Google Cloud Platform registrieren (https://console.cloud.google.com/). Es kostet eigentlich nichts und man bekommt 300 US-Dollar für das erste Jahr geschenkt, jedoch muss man seine Kreditkartennummer angeben. Man kann natürlich jederzeit das Konto kündigen.

Die Applikation war recht einfach zu implementieren, jedoch könnte es mit der Funktion von Erkennung von Text noch Verbesserungen geben. Folgend findet ihr gute Bespiele, wo die Applikation keine Probleme mit dem Erkennen von Text hatte.

Hier findet ihr meine Mini-App zum Downloaden:

http://dm171561.students.fhstp.ac.at/OCR/app-debug.apk

Quellen:

• https://firebase.google.com/products/ml-kit/
• https://www.youtube.com/watch?v=lILIg0XeJoY
• https://firebase.google.com/docs/ml-kit/recognize-text

The post Eine kleine Einführung: ML Kit von Firebase appeared first on Mobile USTP MKL.

Was ist Fitbit Ionic?

Die Fitbit Ionic Uhr ist ein Fitness Tracker bzw. Smartwatch, der Schritte, die Kilometer, etc. mitzählt, die man z.B. gegangen ist. Zusätzlich bietet sie andere Funktionen wie einen Wecker, Übungen, die auf der Uhr dargestellt werden sowie auch eine sogenannte „Fitbit Gallery“ wo man sich Applikationen herunterladen kann – aber über das Smartphone. Da die Uhr selbst über GPS verfügt, kann man sogar ohne Handy laufen gehen und man bekommt trotzdem die Laufroute gespeichert.

Wie kommt man zu einem Projekt?

Um überhaupt ein Projekt anzulegen, braucht man natürlich einen Fitbit User Account. Möglicherweise hat man diesen schon, wenn man eine Fitbit Uhr besitzt, da man sich mit denselben Daten in der App anmelden muss. Des Weiteren benötigt man entweder eine Fitbit Uhr mit dem Fitbit Betriebssystem (entweder Fitbit Versa oder Fitbit Ionic) oder den Fitbit Simulator, den man Gratis im Internet herunterladen kann. Zusätzlich braucht man auch die Fitbit Applikation für das Smartphone, welche mit der Uhr in Kommunikation steht. Dann muss man Zugriff auf Fitbit Studios haben – also einen Computer mit Internetzugriff. Die Fitbit Uhr sollte auch Zugriff auf WLAN besitzen.

Bevor man loslegt, sollte man sich die Dokumentation (https://dev.fitbit.com/build/guides/) näher anschauen. Hier werden nämlich folgende Punkte besprochen:

• App Architecture: Hier wird besprochen, wie die Ordnerstruktur aussieht, sowie welche Größe die Applikation maximal haben darf (bis 15MB).
  • https://dev.fitbit.com/build/guides/application/
• Clock Faces: Da man auch ein anpassbares Uhrenblatt erstellen kann und nicht nur Applikationen, gibt es hier eine Hilfe wie man zum richtigen Ergebnis kommt.
  • https://dev.fitbit.com/build/guides/clockfaces/
• Command Line Interface: Man kann seit August 2018 auch mit der CLI Fitbit Projekte erstellen. Somit ist es auch leichter die Projekte auch via z.B. GitHub zu teilen. Einer der weiteren Vorteile ist auch, dass man seine Lieblings-IDE verwenden kann.
  • https://dev.fitbit.com/build/guides/command-line-interface/
  • Tutorial dazu:  https://youtu.be/WkCKycDUgmU

• Communications: Hier werden APIs besprochen, die in die Applikationen eingebaut werden können, wie z.B. die Messanging API oder die File Transfer API.
  • https://dev.fitbit.com/build/guides/communications/
• Companion: Fitbit Applikationen können mittels der JavaScript Runtime Environment erweitert werden. Diese werden hier besprochen.
  • https://dev.fitbit.com/build/guides/companion/
• Design Guidelines: Damit die Applikation und Uhrblätter auch in die Fitbit Gallery („Fitbit Store“) geladen werden können, sollte diese Guidelines verwendet werden. Hier werden die visuellen Styles und UI bereitgestellt.
  • https://dev.fitbit.com/build/guides/design-guidelines/
• File System: Hier wird die File System API genauer beschrieben, welche verwendet wird, um diverse Dokumente auf dem Fitbit-Gerät auszulesen bzw. zu schreiben.
  • https://dev.fitbit.com/build/guides/file-system/
• Geolocation: Hier wird die GPS API genauer definiert.
  • https://dev.fitbit.com/build/guides/geolocation/
• Glossary: Auf dieser Seiter werden die wichtigsten Begriffe aufgelistet und erklärt, die auf der Seite verwendet werden.
  • https://dev.fitbit.com/build/guides/glossary/
• Multiple Devices: Hier werden die Unterschiede zwischen den beiden Uhren – Fitbit Ionic und Fitbit Versa – beschrieben. Zusätzlich wird definiert wie man für beide Uhren gleichzeitig eine App coden kann.
  • https://dev.fitbit.com/build/guides/multiple-devices/
• Permissions: Ein wichtiger Punkt sind auch die Permissions welche unter dem folgenden Link beschrieben werden (z.B. Internet, Run in Background, etc.).
  • https://dev.fitbit.com/build/guides/permissions/
• Sensors: Hier werden der Accelerometer, Pulsmesser, Barometer, Position und der Gyroskope genauer beschrieben.
  • https://dev.fitbit.com/build/guides/sensors/
• Settings: Es gibt für die User die Möglichkeit die Applikation selbst zu konfigurieren, welche man mittels der Settings API einbauen kann (z.B. Farben von Hintergrund anpassen, etc.).
  • https://dev.fitbit.com/build/guides/settings/
• User Interface: Hier wird besprochen wie man das User Interface erstellt, und zwar mit SVG, CSS und JavaScript.
  • https://dev.fitbit.com/build/guides/user-interface/

Um ein Projekt zu erstellen, geht man auf die https://studio.fitbit.com Seite, meldet sich an und drückt auf den „New Project“-Button (Abb.1).

Abbildung 1: Project List

Dann scheint ein neues Fenster auf, wo man sein Projekt benennen muss sowie ein Template auswählen muss. Ich habe das Sensoren Template ausgewählt (Abb. 2).

Abbildung 2: Anlegen eines neuen Projekts

Danach kommt man in die IDE von Fitbit Studios, wo man dann endlich loslegen kann (Abb. 3).

Abbildung 3: IDE Fitbit Studios

Dann ist es sehr wichtig, dass man die Uhr und das Smartphone bzw. den Simulator mit der Fitbit Studios verknüpft. Hier drückt man auf den „Select a phone and Select a device”-Button um die Geräte auszuwählen (Abb. 4).

Abbildung 4: Hinzufügen eines Fitbit Gerätes und Smartphones bzw. eines Simulators

Wenn man den Simulator eingeschalten hat, sollte das Fitbit Studios sofort erkennen (Abb. 5). Wenn man das echte Smartphone und Fitbit Gerät benutzt, muss man zuerst in der Smartphone App in das Entwickler Menü wandern und die Entwickler-Bridge einschalten. Darauf muss man auch in den Einstellungen in der Uhr wandern und die Developer Bridge einschalten und warten bis sie sich mit dem Server verbunden hat. Darauf kann man dann die „realen“ Geräte in dem Dropdown Menu finden. Für dieses Beispiel werde ich den Simulator verwenden, da er sehr viel Zeit spart und man muss die Uhr nicht dabeihaben.

Abbildung 5: Hinzufügen des Simulators

Somit ist die Online IDE aufgebaut!

Wie ist das Projekt aufgebaut?

In diesem Beispiel findet man derzeit 2 Ordner: „app“ und „resources“. Man kann aber die Ordner Struktur wie gefolgt erweitern.

Application (/app/)

Dieser Ordner enthält die Anwendungslogik, die auf dem Gerät ausgeführt wird. Der Code in diesem Ordner hat Zugriff auf die Geräte-API und kann direkt mit der Präsentationsebene interagieren, mit dem Companion kommunizieren oder Lese- und Schreibeinstellungen vornehmen.

Eine index.js- oder index.ts-Datei (man kann TypeScript und JavaScript verwenden!!!) muss in diesem Ordner vorhanden sein und darf nicht leer sein. Andernfalls schlägt der Build-Vorgang einen Error auf.

Companion (/companion/)

Dieser Ordner enthält die Companion-Logik, die auf dem mobilen Gerät (Smartphone) ausgeführt wird. Der in diesem Ordner enthaltene Code hat Zugriff auf die Companion-API und kann direkte Anfragen an das Internet stellen und mit der Anwendung kommunizieren.

Wenn in diesem Ordner eine Datei index.js oder index.ts vorhanden ist, wird der Companion erstellt.

Shared Code (/common/)

Dateien in diesem Ordner können von der Anwendung und dem Companion gemeinsam genutzt werden.

Resources (/resources/)

Dieser Ordner enthält alle Ressourcen, die während des Erstellungsprozesses in der Anwendung enthalten sind.

/resources/index.gui

Dies ist die Fitbit-SVG-Datei, in der das Markup der Anwendungsbenutzeroberfläche definiert ist. Dies ist eine verpflichtende Datei.

/resources/widgets.gui

Die Fitbit-SVG-Datei steuert, welche System-Widgets in der Datei index.gui verwendet werden können. Diese Datei muss in diesem Ordner sein.

/resources/*.css

Fitbit-CSS-Dateien können in die Anwendung eingefügt werden, indem in der Datei index.gui ein <link> erstellt wird.

/resources/*.png and /resources/*.jpg

Alle Bilddateien, die im Ressourcenordner enthalten sind, können in der Präsentationsschicht verwendet werden, indem auf sie innerhalb eines <image> -Elements in der index.gui verwiesen wird.

Settings (/settings/)

Dieser Ordner enthält die Deklaration für Anwendungseinstellungen, die mit React JSX erstellt wurde. Dies kann verwendet werden, um eine App für den Benutzer konfigurierbar zu machen. Code in dieser Datei hat Zugriff auf die Einstellungs-API.

Projekt Konfiguration (package.json)

In dieser Datei kann man folgende Einstellungen verändern (Abb. 6):

• Display Namen
• Den Typ der App (App oder Ziffernblatt)
• „Wipe Color“ – die Wisch Farbe: Die Farbe ist die Akzentfarbe der Applikation
• Build Targets (Fitbit Versa und/oder Fitbit Ionic)
• SDK Version
• Permissions
• Sprache

Abbildung 6: Darstellung der package.json Datei

In der oberen Leiste findet man folgende Elemente (Abb. 7):

• Build: um die Applikation zu erstellen/“builden“
• Download: um die Applikation herunterzuladen, um sie dann z.B. in die Fitbit Gallery zu laden
• Devices: um einen Simulator bzw. „echte“ Geräte hinzuzufügen, um die App anzuschauen
• Run: um die App live auf dem Gerät bzw. im Simulator zu sehen
• Screenshot: um einen Screenshot von der laufenden Applikation zu machen

Abbildung 7: Menüleiste von Fitbit Studios

Beispiel

Da wir in den vorherigen Schritten das Sensoren Template ausgewählt haben, können wir anhand dieses Beispiels die einzelnen Elemente durchgehen.

In der index.js Datei befindet sich die Logik der Applikation. Z.B. importiert man den Accelerometer:

import { Accelerometer } from "accelerometer";
const accel = new Accelerometer();
accel.start();

Dann greift man auf ein Lable, welches man in index.gui erstellt hat.

const accelData = document.getElementById("accel-data");

Des Weiteren greift man auf die einzelnen Achsen zu:

accel: {
      x: accel.x ? accel.x.toFixed(1) : 0,
      y: accel.y ? accel.y.toFixed(1) : 0,
      z: accel.z ? accel.z.toFixed(1) : 0
    }

Um die Einzelnen Werte darzustellen, fügt man diese auf den Label hinzu.

accelData.text = JSON.stringify(data.accel);

Darauf kann man auf den „Run“-Button klicken und die Applikation läuft hier am Simulator (Abb. 8).

Abbildung 8: Simulator mit laufender App

In die Fitbit Gallery laden

Wenn man die Applikation in die Fitbit Gallery laden möchte, muss man in Fitbit Studio die Applikation herunterladen via des „Publish“-Buttons (Abb. 9). Es wird dadurch eine .fba Datei heruntergeladen.

Abbildung 9: Fitbit Studios mit „Publish-Button“

Dann öffnet man die Gallery App Manager Seite (https://gam.fitbit.com/apps). Dort meldet man sich wieder mit den Fitbit Developer Daten an. Hier kann man eine neue App erstellen indem man auf den „Create App“-Butten klickt (Abb. 10).

Abbildung 10: Gallery App Manager von Fitbit

Danach muss man das folgende Dialogfenster ausfüllen (Abb. 11). Der Name sollte den gleichen Namen haben wie man ihn in Fitbit Studios definiert hat. Weiters muss man auswählen, welchen Typ von Projekt es ist – entweder ein Ziffernblatt oder eine Applikation.

Abbildung 11: „Create App“ Dialogfeld im Fitbit Gallery App Manager

Weiters kommt die Übersichtsseite der neuen Applikation (Abb. 12). Hier muss man dann die Kategorie sowie auch ein Icon hinzufügen. Des Weiteren sollte man entweder eine Email oder eine URL angeben, sodass man kontaktiert werden kann. Dann kann man auch weitere Sprachen einfügen und dazu eine Überschrift und eine Beschreibung hinzufügen. Screenshots der App sollte auch hochgeladen werden. Zu guter Letzt lädt man die aktuelle Version der Applikation hoch und notiert die Versionsnummer dazu. Dann kann man die Applikation hochladen. Darauf kann man den Link (ganz oben) mit anderen Fitbit Usern privat teilen.

Abbildung 12: Übersichtsseite einer App im Fitbit Gallery App Manager

Wenn man alle Felder ausgefüllt hat, kann man auf den „Submit for Review“-Button drücken (Abb. 13). Die Applikation wird von Fitbit überprüft, um sie danach auf „Public“ für alle Fitbit User freizuschalten.

Abbildung 13: Submit for Review

Fazit

Ich fand es persönlich recht einfach mich in die neue IDE einzuarbeiten. Ich habe die Beispiele von Fitbit gleich ausprobiert (https://dev.fitbit.com/build/tutorials/examples/). Wobei ich mich nicht mit den Sensoren in meiner TicTacToe App auseinandergesetzt habe, habe ich es mit diesen Beispielen überbrückt. Seit neuesten gibt es den Simulator, was den Prozess sehr vereinfacht hat. Ich warte derzeit auf eine Antwort von Fitbit die meine Applikation frei gibt.

Bezüglich der Freischaltung in die Fitbit App Gallery ist eine andere Sache. Ich habe meine fertige Applikation mit dem „Submit for Review“ Button hochgeladen, jedoch bei der ersten Antwort ist zurückgekommen, dass der Name in der App nicht mit dem App Gallery Namen nicht übereinstimmt. Das war der einzige Fehler, den sie mir mitgeteilt haben. Deshalb habe ich die App ein zweites Mal hochgeladen. Dann kam die Meldung, dass das Icon in der App fehlt. Das habe ich dann auch hinzugefügt. Also man merkt, dass sich die Reviewer nicht die komplette App anschauen, sondern einen Fehler finden, aufhören zu reviewen und gleich das Feedback zu dem einen Mangel schreiben. Ich warte derzeit auf mein finales Review.

Quellen:

• https://www.fitbit.com/at/ionic
• https://dev.fitbit.com/build/guides/
• https://studio.fitbit.com/

The post Fitbit Ionic App Tutorial appeared first on Mobile USTP MKL.

Was ist PhoneGap?

PhoneGap ist ein Open-Source-Framework, mit dem man native mobile Apps mit verschiedenen Web-Entwicklungssprachen wie HTML, CSS und JavaScript erstellen kann. Man ist hier nicht auf plattformspezifische APIs wie in iOS, Android oder Windows gebunden. Die Entwicklung mobiler Apps für jedes Betriebssystem erfordert ein optimales Wissen über verschiedene Frameworks und Sprachen. PhoneGap löst dieses Problem mithilfe von standardbasierten Webtechnologien.

Wie funktioniert es?

Die Benutzeroberfläche für PhoneGap-Anwendungen wird mit den grundlegenden Webentwicklungssprachen entwickelt, sodass der Browser 100% der Breite und Höhe des Geräts einnimmt. Im Grunde wird eine API angeboten, welche ermöglicht mit JavaScript auf native Betriebssystemfunktionen zuzugreifen. Das heißt, du erstellst eine Anwendungslogik mithilfe von JavaScript, und die PhoneGap-API übernimmt die Kommunikation mit dem systemeigenen Betriebssystem.

Abbildung 1: Prozess von PhoneGap (https://valuebound.com, 2017)

Schritt 1: PhoneGap Installieren

Die PhoneGap Desktop-Anwendung bietet eine Drag-and-Drop-Schnittstelle zum Erstellen von PhoneGap-Anwendungen. Es ist eine Alternative zur Verwendung des PhoneGap CLI für diejenigen, die eine visuelle Benutzeroberfläche über eine Befehlszeilenschnittstelle bevorzugen.

Mit der Desktop App

1. Lade den neusten Windows Installer bzw Mac OS X Installer herunter:
   1. Windows: https://github.com/phonegap/phonegap-app-desktop/releases/download/0.4.5/PhoneGapSetup-win32.exe
   2. Mac: https://github.com/phonegap/phonegap-app-desktop/releases/download/0.4.5/PhoneGapDesktop.dmg
2. Installiere die Desktop App.
3. Öffne die Desktop App.

Abbildung 2: Screenshot Desktop App (PhoneGap, 2018)

Mit CLI

Bevor man die PhoneGap CLI installiert, muss man folgende Voraussetzungen erfüllen:

Voraussetzungen

• node.js – eine JavaScript-Laufzeitumgebung zum Erstellen Ihres JavaScript-Codes
• git – wird im Hintergrund vom CLI zum Herunterladen von Assets verwendet. Es ist auf einigen Betriebssystemen vorinstalliert.

1. Installiere die PhoneGap CLI über npm mit dem folgenden Befehl aus der Terminal-App (Mac) oder der Eingabeaufforderung (Win).

   1. $ npm install -g phonegap@latest

2. Teste, ob die PhoneGap CLI ordnungsgemäß installiert ist, indem man phonegap in der Befehlszeile eingibt. Man sollte folgende Hilfetextausgabe sehen:

   1. $ phonegap

Abbildung 3: PhoneGap CLI (PhoneGap, 2018)

Schritt 2: Installiere die mobile App

Die PhoneGap Developer App ist eine mobile App, die auf Geräten ausgeführt wird und es dir ermöglicht, die von dir erstellten PhoneGap Mobile Apps ohne zusätzliche Plattform-SDK-Einrichtung in einer Vorschau anzuzeigen und zu testen. Die App bietet automatisch Zugriff auf die PhoneGap-Kern-APIs, sofortigen Zugriff auf die nativen Gerätefunktionen, ohne dass irgendwelche Plugins installiert oder irgendetwas lokal kompiliert werden muss.

Suche die kostenlose PhoneGap Developer App auf einem der folgenden unterstützten App-Marktplätze und installieren Sie sie auf Ihrem mobilen Gerät:

• Google Play (https://play.google.com/store/apps/details?id=com.adobe.phonegap.app )
• Windows Phone Store (https://www.microsoft.com/en-us/store/p/phonegap-developer/9wzdncrdfsj0)

Tippe nach der Installation auf dem Startbildschirm auf das PhoneGap Developer App-Symbol, um es zu öffnen:

Abbildung 4: Screenshot PhoneGap Developer (PhoneGap, 2018)

Schritt 3: Erstelle die App

Nachdem man die PhoneGap Desktop und / oder PhoneGap CLI auf dem Computer und die PhoneGap Developer App auf das mobile Gerät installiert hat, kann man ein PhoneGap-Projekt erstellen. Bei diesem Projekt handelt es sich um eine mobile PhoneGap-App, die mit nur wenigen einfachen Schritten auf mehreren Geräten und Betriebssystemen lauffähig ist.

Erstelle ein PhoneGap-Projekt mit der PhoneGap Desktop App

1. Klicke auf das Pluszeichen und wähle “Neues PhoneGap-Projekt erstellen”, wie unten gezeigt wird:

Abbildung 5: Screenshot PhoneGap Desktop App (PhoneGap, 2018)

2. Man wird mit dem Dialog für die Vorlagenliste wie unten gezeigt aufgefordert, wo man auswählen kann, ob man eine App basierend auf einem Beispielprojekt erstellen möchte.

Jede Vorlage hat unterhalb des Namens eine kurze Beschreibung, welche Art von Projekt erstellt wird. Um eine Vorlage auszuwählen, klicke auf das Optionsfeld daneben. Im folgenden Bild ist die Vorlage “Hello World” ausgewählt.

Abbildung 6: PhoneGap Templates (PhoneGap, 2018)

Die erste Vorlagenoption in der Liste ist das Standard-Hello World-Projekt. Es ist bewiesen, dass es der schnellste und einfachste Weg ist, die Grundlagen des Aufbaus einer mobilen PhoneGap-App zu verstehen.

1. Stelle sicher, dass das Optionsfeld neben der Vorlage “Hello World” ausgewählt ist.
2. Klicke auf die grüne Schaltfläche “Weiter”.
3. Man erhält einen Bildschirm zur Eingabe von Informationen zu dem Projekt. Wähle den Pfad auf der lokalen Festplatte, auf dem man das Projekt erstellen möchte, einen festgelegten Namen und einen optionalen ID. Sobald die Informationen eingegeben wurden, klicke auf die grüne Schaltfläche „Projekt erstellen“.

Abbildung 7: Screenshot PhoneGap Desktop App (PhoneGap, 2018)

4. Man sollte jetzt eine Ansicht wie unten sehen, in der das neues Projekt angezeigt und mit einem grünen linken Rand, einem grünen Spielknopf daneben und einem grünen Balken am unteren Rand markiert ist. Man sollte auch eine Serveradresse sehen, die anzeigt, dass sie läuft und das aktive Projekt.

Abbildung 8: Screenshot PhoneGap Desktop App (PhoneGap, 2018)

Erstelle ein PhoneGap-Projekt mit der PhoneGap CLI

1. Gebe den folgenden Befehl in den Terminal ein:

   1. $ phonegap create myApp

Dadurch wird am aktuellen Pfad ein Ordner namens myApp mit dem Standardprojektnamen Hello World und der ID com.phonegap.helloworld erstellt.

Man kann auch einen Namen und eine Kennung angeben, um sicherzustellen, dass das Projekt eindeutig ist, aber immer noch das Standard-Hello World-Codeprojekt enthält, indem man qualifizierte Parameter wie folgt angibt:

• $ phonegap create myApp --id "org.myapp.sample" --name "appSample"

2. Stelle sicher, dass nach dem Ausführen des Befehls die folgende Ausgabe in der Konsole angezeigt wird:

   1. Creating a new cordova project.

3. Wechsele mit dem Befehl cd in das neue Projektverzeichnis:

   1. $ cd myApp/

4. Überprüfen Sie, ob die folgenden Dateien und Ordner angezeigt werden:

   1. xml hooks    platforms    plugins    www

5. Wechsele in den Ordner www und schaue dir die darin enthaltenen Dateien und Unterordner an. Dies ist der Inhalt Ihrer App, wobei der Einstiegspunkt die Datei index.html ist.

   1. $ cd www/

Schritt 4: Vorschau der App

Man kann die PhoneGap Developer App zusammen mit PhoneGap Desktop verwenden, um sofort eine Vorschau der App auf einem Gerät anzuzeigen, ohne Plattform-SDKs zu installieren, Geräte zu registrieren oder Code zu kompilieren.

PhoneGap Desktop startet einen kleinen Webserver zum Hosten des Projekts und gibt eine Serveradresse zurück, die man dann in die PhoneGap Developer App eingeben kann, die auf dem mobilen Gerät oder in dem Desktop-Browser ausgeführt wird. Das Projekt wird automatisch bei der Projekterstellung geschaltet. Man kann jedoch auch jedes Projekt, das nicht aktiv ist, manuell starten, indem man auf die grüne Schaltfläche (>) neben dem Projekt klickt.

Vorschau in einem Desktop-Browser

Man kann den Desktop-Browser nutzen, um zuerst die Apps in der Vorschau anzuzeigen und zu testen, um den anfänglichen Entwicklungsprozess zu beschleunigen. Wenn man beispielsweise ein Framework wie Angular oder React verwendet, stehen dir Tools zur Verfügung, mit denen man diese Frameworks im Browser spezifisch debuggen kann, was sehr hilfreich sein kann, bevor man zu einem Gerät wechselt. Vor kurzem hat PhoneGap die Browser-Plattform als Ziel automatisch unterstützt, um uns zu helfen, mit dem Deviceready-Ereignis und Apache Cordova-Kern-Plugins einfacher in einer Umgebung zu testen.

Abbildung 9 Screenshot PhoneGap im Browser (PhoneGap, 2018)

Vorschau der App mit PhoneGap Desktop

Im vorherigen Schritt haben wir ein Projekt erstellt und sichergestellt, dass es läuft, indem wir nach dem grünen Abspielknopf suchen, der hervorgehoben werden soll, und einem grünen Balken, auf dem die Serveradresse unten auf dem PhoneGap Desktop angezeigt wird.

1. Der Screenshot wird zur Referenz unten noch einmal gezeigt. Suchen Sie die spezifische Serveradresse für das Projekt, bevor man mit dem nächsten Schritt fortfährt.

Abbildung 10: Screenshot PhoneGap Desktop App (PhoneGap, 2018)

2. Gehe zum Mobilgerät, auf dem die PhoneGap Developer App ausgeführt wird. Dort gib die Serveradresse auf dem Hauptbildschirm ein und tippe auf Verbinden. Nun kann man die App auf dem mobilen Gerät anschauen.

Abbildung 11: Screenshot PhoneGap Developer App (PhoneGap, 2018)

Abbildung 12: Screenshot PhoneGap Developer App (PhoneGap, 2018)

Abbildung 13: Screenshot PhoneGap Developer App (PhoneGap, 2018)

Vorschau der App mit PhoneGap CLI

Man kann die PhoneGap Developer App zusammen mit der PhoneGap CLI verwenden, um sofort eine Vorschau der App auf einem Gerät anzuzeigen, ohne Plattform-SDKs zu installieren, Geräte zu registrieren oder Code zu kompilieren. Die PhoneGap CLI startet einen kleinen Webserver zum Hosten des Projekts und gibt die Serveradresse für die Kopplung mit der PhoneGap Developer App zurück, die auf dem mobilen Gerät ausgeführt wird.

1. Wechsele in das Projektverzeichnis, das du im vorherigen Schritt erstellt hast, und gebe $ phonegap serve ein. Man erhält die Serveradresse, auf der die App gehostet wird, in der Ausgabe, die in der Konsole empfangen wird (in diesem Beispiel 192.168.1.11:3000):

Abbildung 14: PhoneGap CLI (PhoneGap, 2018)

2. Gehe zum Mobilgerät, auf dem die PhoneGap Developer App ausgeführt wird. Dort gib die Serveradresse auf dem Hauptbildschirm ein und tippe auf Verbinden (siehe Bilder 11, 12 und 13).

Nun kann man die App auf dem mobilen Gerät anschauen.

Eine Applikation erstellen

Mittels Adobe PhoneGap Build ist es möglich eine Applikation zu builden (https://build.phonegap.com/). Hier kann man das ZIP File des Projektes hochladen und man erhält eine fertige Applikation für z.B. den Google Play Store.

Fazit

Eine Applikation zu erstellen ist hier sehr einfach jedoch kann man zwar iOS Applikationen erstellen, jedoch ist die Adobe PhoneGap Applikation nicht im App Store verfügbar. Des weiteren lässt der App Store die PhoneGap Applikationen angeblich nicht in den Store laden. Für Android und Windows Applikationen ist es kein Problem. Vor ein paar Monaten habe ich dieses Tool mit Framework 7 ausgetestet und hat sehr einfach funktioniert – App und CLI.

Quellen:

• https://valuebound.com/resources/blog/getting-started-apache-cordova-to-build-hybrid-mobile-apps
• https://phonegap.com/
• https://build.phonegap.com/

The post Adobe PhoneGap appeared first on Mobile USTP MKL.

Auf die folgenden Sensoren möchte ich hier näher eingehen:

• Bewegungssensoren messen Beschleunigungskräfte und Drehkräfte an 3 Achsen. In diesem Kapitel werden Beschleunigungssensoren, Schwerkraftsensoren, Gyroskope und Rotationsvektorsensoren diskutiert.
• Positionssensoren messen die physikalische Position eines Gerätes. In diesem Kapitel werden Orientierungssensoren und Magnetometer beschrieben.
• Umgebungssensoren messen Umgebungsparameter wie z.B. Temperatur, Luftdruck, Beleuchtung und Luftfeuchtigkeit. Dieses Kapitel beschreibt den Barometer, Photometer und das Thermometer.

Man kann auf die Sensoren auf dem Gerät zugreifen – wenn sie verfügbar sind – mithilfe des Android Sensor Frameworks. Das Framework bietet Klassen und Interfaces um die verschiedensten Aufgaben zu lösen wie z.B.:

• Um herauszufinden welche Sensoren überhaupt auf dem Gerät verfügbar sind.
• Um die Fähigkeiten eines Sensors zu ermitteln wie z.B. die maximale Reichweite, Hersteller und Auflösung.
• Um rohe Sensordaten zu erfassen und z.B. Mindestgeschwindigkeiten definieren, die die Sensordaten erhalten.
• Anmeldung und Abmeldung von Sensor Event Listeners welche die Änderungen aufnehmen.

Einführung

Mit dem Android-Sensor-Framework kann man auf viele Arten von Sensoren zugreifen. Einige dieser Sensoren sind hardwarebasiert, andere softwarebasiert. Hardwarebasierte Sensoren sind physische Komponenten, die in ein Mobilteil oder Tablet-Gerät integriert sind. Sie leiten ihre Daten ab, indem sie spezifische Umwelteigenschaften wie Beschleunigung, Erdmagnetfeldstärke oder Winkeländerung direkt messen. Softwarebasierte Sensoren sind keine physischen Geräte, obwohl sie hardwarebasierte Sensoren nachahmen. Sie leiten ihre Daten von einem oder mehreren der hardwarebasierten Sensoren ab und werden manchmal als virtuelle Sensoren oder synthetische Sensoren bezeichnet. Der lineare Beschleunigungssensor und der Schwerkraftsensor sind Beispiele für softwarebasierte Sensoren. Tabelle 1 fasst die Sensoren zusammen, die von der Android-Plattform unterstützt werden.

Nur wenige Android-Geräte haben alle Arten von Sensoren. Zum Beispiel haben die meisten Handgeräte und Tablets einen Beschleunigungsmesser und ein Magnetometer, aber weniger Geräte haben Barometer oder Thermometer.

Tabelle 1. Sensortypen, die auf der Android-Plattform unterstützt werden     .

Sensor Framework

Man kann auf diese Sensoren zugreifen und rohe Sensordaten mithilfe des Android-Sensor-Frameworks erfassen. Das Sensor-Framework ist Teil des android.hardware-Pakets und umfasst die folgenden Klassen und Interfaces:

SensorManager

Man kann diese Klasse verwenden, um eine Instanz des Sensor-Service zu erstellen. Diese Klasse bietet verschiedene Methoden wie z.B. für den Zugriff und Auflisten von Sensoren.

Sensor

Man kann diese Klasse verwenden, um eine Instanz eines bestimmten Sensors zu erstellen. Diese Klasse bietet verschiedene Methoden, mit denen man die Fähigkeiten eines Sensors bestimmen kann.

SensorEvent

Das System erstellt mit dieser Klasse ein Sensorereignisobjekt, das Informationen zu einem Sensorereignis liefert. Ein Sensorereignisobjekt enthält die folgenden Informationen:

• die Rohsensordaten,
• den Typ des Sensors,
• der das Ereignis generiert hat,
• die Genauigkeit der Daten und
• den Zeitstempel für das Ereignis.

SensorEventListener

Man kann dieses Interface verwenden, um zwei Callback-Methoden zu erstellen, die Benachrichtigungen (Sensorereignisse) empfangen, wenn sich Sensorwerte ändern oder wenn sich die Sensorgenauigkeit ändert.

In einer typischen Anwendung verwendet man diese sensorbezogenen APIs, um zwei grundlegende Aufgaben auszuführen:

• Identifizieren von Sensoren und Sensorfähigkeiten zur Laufzeit ist nützlich, wenn Ihre Anwendung über Funktionen verfügt, die auf bestimmten Sensortypen oder -funktionen beruhen. Beispielsweise möchtest du möglicherweise alle Sensoren identifizieren, die auf einem Gerät vorhanden sind, und alle Anwendungsfunktionen deaktivieren, die auf Sensoren basieren, die nicht vorhanden sind. Ebenso möchtest du vielleicht alle Sensoren eines bestimmten Typs identifizieren, damit Sie die Sensorimplementierung auswählen können, die die optimale Leistung für Ihre Anwendung bietet.
• Überwachen von Sensorereignissen ist, eigentlich wie man rohe Sensordaten erfassen kann. Ein Sensorereignis tritt jedes Mal auf, wenn ein Sensor eine Änderung der Parameter erkennt, die der Sensor misst. Ein Sensorereignis liefert vier Informationen:
  • den Namen des Sensors,
  • der das Ereignis ausgelöst hat,
  • den Zeitstempel für das Ereignis,
  • die Genauigkeit des Ereignisses und
  • die unformatierten Sensordaten, die das Ereignis ausgelöst haben.

Bewegungssensoren

Die Plattform von Android bietet mehrere Sensoren an, mit denen man die Bewegung eines Geräts überwachen kann.

Die möglichen Architekturen der Sensoren variieren je nach Sensortyp:

• Die Sensoren für Gravitation, lineare Beschleunigung, Rotationsvektor, signifikante Bewegung, Schrittzähler und Schrittdetektor sind entweder hardwarebasiert oder softwarebasiert.
• Beschleunigungssensoren und Gyroskopsensoren sind immer hardwarebasiert.

Die meisten Android-Geräte verfügen über einen Beschleunigungssensor und viele enthalten auch schon ein Gyroskop. Die Verfügbarkeit der softwarebasierten Sensoren ist variabel, da sie häufig auf einen oder mehrere Hardware-Sensoren angewiesen sind, um ihre Daten abzuleiten. Je nach Gerät können diese softwarebasierten Sensoren ihre Daten entweder vom Beschleunigungsmesser und Magnetometer oder vom Gyroskop ableiten.

Bewegungssensoren sind nützlich für die Überwachung von Gerätebewegungen wie Neigen, Schütteln, Drehen oder Schwenken. Die Bewegung ist normalerweise eine Reflektion direkter Benutzereingabe (z.B. ein User, der ein Auto in einem Spiel), aber es kann auch eine Reflektion der physischen Umgebung sein, in der das Gerät sitzt (z.B., wenn man mit dem Auto unterwegs ist). Im ersten Fall überwachen Sie die Bewegung relativ zum Referenzrahmen des Geräts oder zum Referenzrahmen Ihrer Anwendung. Im zweiten Fall überwachen Sie die Bewegung relativ zum Bezugsrahmen der Welt. Bewegungssensoren selbst werden normalerweise nicht zur Überwachung der Geräteposition verwendet. Sie können jedoch mit anderen Sensoren, wie z. B. dem Erdmagnetfeldsensor, verwendet werden, um die Position eines Geräts relativ zum Referenzsystem der Welt zu bestimmen.

Bewegungssensoren geben mehrdimensionale Arrays von Sensorwerten für jedes SensorEvent zurück. Z.B. gibt der Beschleunigungsmesser während eines einzelnen Sensorereignisses Beschleunigungskraftdaten für die drei Koordinatenachsen zurück, und das Gyroskop gibt die Rotationsgeschwindigkeitsdaten für die drei Koordinatenachsen zurück. Diese Datenwerte werden in einem Float-Array (Werte) zusammen mit anderen SensorEvent-Parametern zurückgegeben. Tabelle 2 fasst die Bewegungssensoren zusammen, die auf der Android-Plattform verfügbar sind.

Tabelle 2. Bewegungssensoren, die auf der Android-Plattform unterstützt werden.

Beispiel Schwerkraftsensor

Der Schwerkraftsensor liefert einen dreidimensionalen Vektor, der die Richtung und Größe der Schwerkraft anzeigt. In der Regel wird dieser Sensor verwendet, um die relative Ausrichtung des Geräts im Raum zu bestimmen. Der folgende Code zeigt, wie man eine Instanz des Standard-Schwerkraftsensors erhält:

Die Einheiten entsprechen denen des Beschleunigungssensors (m / s2). Das Koordinatensystem entspricht dem des Beschleunigungssensors.

Positionssensoren

Die Android-Plattform bietet zwei Sensoren, mit denen man die Position eines Geräts bestimmen kann:

• den Erdmagnetfeldsensor und
• den Beschleunigungssensor.

Die Plattform von Android bietet außerdem einen Sensor, mit dem man bestimmen kann, wie nah ein Geräts an einem anderen Objekt ist (Annäherungssensor). Der Erdmagnetfeldsensor und der Näherungssensor sind hardwarebasiert. Die meisten Handset- und Tablet-Hersteller enthalten einen Erdmagnetfeldsensor. In ähnlicher Weise enthalten Handset-Hersteller üblicherweise einen Annäherungssensor, um zu bestimmen, wann ein Handgerät in der Nähe des Gesichts eines Benutzers gehalten wird (beispielsweise während eines Telefonanrufs). Zur Bestimmung der Ausrichtung eines Geräts kann man die Messwerte des Beschleunigungssensors des Geräts und des Erdmagnetfeldsensors verwenden.

Hinweis: Der Orientierungssensor wurde in Android 2.2 (API-Stufe 8) nicht mehr unterstützt, und der Orientierungssensortyp wurde in Android 4.4W (API-Stufe 20) nicht mehr verwendet.

Positionssensoren sind nützlich, um die physische Position eines Geräts im Referenzrahmen der Welt zu bestimmen. Z.B. kann man den Erdmagnetfeldsensor in Kombination mit dem Beschleunigungssensor verwenden, um die Position eines Geräts relativ zum magnetischen Nordpol zu bestimmen. Man kann diese Sensoren auch verwenden, um die Ausrichtung eines Geräts im Referenzrahmen Ihrer Anwendung zu bestimmen. Positionssensoren werden normalerweise nicht zur Überwachung von Bewegungen oder Bewegungen des Geräts verwendet, wie z. B. Erschütterungen, Neigungen oder.

Der Erdmagnetfeldsensor und der Beschleunigungsmesser geben mehrdimensionale Arrays von Sensorwerten für jedes SensorEvent zurück. Z.B. liefert der Erdmagnetfeldsensor Erdmagnetfeldstärkewerte für jede der drei Koordinatenachsen während eines einzelnen Sensorereignisses. In ähnlicher Weise misst der Beschleunigungssensor die Beschleunigung, die während eines Sensorereignisses an das Gerät angelegt wird.

Der Näherungssensor liefert einen einzelnen Wert für jedes Sensorereignis. Tabelle 3 fasst die Positionssensoren zusammen, die auf der Android-Plattform unterstützt werden.

Tabelle 3. Positionssensoren, die auf der Android-Plattform unterstützt werden.

Umgebungssensoren

Die Android-Plattform bietet vier Sensoren, mit denen man verschiedene Umgebungseigenschaften überwachen kann. Mit diesen Sensoren kann man:

• relative Umgebungsfeuchtigkeit,
• Beleuchtungsstärke,
• Umgebungsdruck und
• Umgebungstemperatur in der Nähe eines Android-Geräts überwachen.

Alle vier Umgebungssensoren sind hardwarebasiert und nur verfügbar, wenn ein Gerätehersteller sie in ein Gerät eingebaut hat. Mit Ausnahme des Lichtsensors, mit dem die meisten Gerätehersteller die Bildschirmhelligkeit steuern, sind Umgebungssensoren nicht immer auf Geräten verfügbar. Aus diesem Grund ist es besonders wichtig, dass Sie zur Laufzeit überprüfen, ob ein Umgebungssensor vorhanden ist, bevor man versucht, Daten zu erfassen.

Im Gegensatz zu den meisten Bewegungssensoren und Positionssensoren, die für jedes SensorEvent ein mehrdimensionales Array von Sensorwerten zurückgeben, geben Umgebungssensoren für jedes Datenereignis einen einzelnen Sensorwert zurück (z.B. Temperatur in ° C, der Druck in hPa). Umgebungssensoren erfordern typischerweise keine Datenfilterung oder Datenverarbeitung. Tabelle 4 enthält eine Zusammenfassung der Umgebungssensoren, die auf der Android-Plattform unterstützt werden.

Tabelle 4. Umgebungssensoren, die auf der Android-Plattform unterstützt werden.

Beispiel Licht-, Druck- und Temperatursensoren

Die Rohdaten, die Sie von den Licht-, Druck- und Temperatursensoren erhalten, erfordern normalerweise keine Kalibrierung, Filterung oder Modifizierung, was sie zu den einfachsten zu verwendenden Sensoren macht. Um Daten von diesen Sensoren zu erfassen, erstellt man eine Instanz der SensorManager-Klasse, mit der Sie eine Instanz eines physikalischen Sensors ermitteln kann. Dann registriert man einen Sensor-Listener in der onResume () -Methode und beginnen mit eingehenden Sensordaten in der onSensorChanged () – Callback-Methode. Der folgende Code zeigt, wie es funktioniert:

Man muss immer Implementierungen der onAccuracyChanged () – und onSensorChanged () – Callback-Methoden einschließen. Stelle sicher, dass die Registrierung eines Sensors immer aufgehoben wird, wenn eine Aktivität unterbrochen wird. Dies verhindert, dass ein Sensor kontinuierlich Daten erfasst und die Batterie entleert.

Quelle & Bilder: https://developer.android.com/guide/topics/sensors/

The post Sensoren in Android Smartphones & Tablets appeared first on Mobile USTP MKL.

Google Firebase (https://firebase.google.com/) ist eine Plattform – gehostet von Google –, wo man Applikationen, ob Android, iOS und ganz normal im Web, weiterentwickeln und vermarkten kann. Firebase bietet gewisse Tools an, welche Entwickler verwenden können um qualitativ hochwertige Applikationen zu erstellen, z.B. um ihre Userbase zu vergrößern und mehr Geld zu verdienen. Firebase stellt viele Features dar, so dass Entwickler mit ihrem Unternehmen Geld verdienen und sich auf ihre User konzentrieren können.

Man braucht keine Server zu managen. Man muss keine APIs entwickeln. Das macht alles Firebase: Firebase ist dein Server, deine API und dein Datastore. Natürlich kann man alles verändern, so dass es für deine Applikation passt. Firebase kann natürlich nicht alles, jedoch sehr vieles!

Dieses System ist ein Backend-as-a-Service (BaaS), welches in dem Startup YC11 entwickelt worden ist und dann auf der Google Cloud Plattform weiter gehostet wird. Im Detail ist es auch ein Front-End-Data-Store, welcher in Real Time auf der Cloud gehostet wird. Deine User müssen daher nicht auf deinem Server zugreifen, sondern können die Daten direkt aus Firebase laden und dann auch speichern. Ein Vorteil bzw. ein Nachteil kann sein, dass man die Plattform nicht selber hosten kann – sie wird von Google selbst gehostet.

Diese Platform beinhaltet 2 große Services:

• Develop & test your app
• Grow & engage your audience

Features?

Folgend werden die einzelnen Features aufgelistet und ganz kurz beschrieben.

Develop & test your app

• Realtime Database
  • Man kann Daten in Millisekunden speichern und synchronisieren.
  • Das ist einer der größten Features von Firebase.
  • Sie ist eine noSQL Datenbank.
  • In der Datenbank werden nur JSON Objekte gespeichert – keine Tabellen!
• Authentication
  • Man kann Benutzer einfach und sicher anlegen.
• Cloud Functions
  • Man kann mobilen Backend-Code laufen lassen, ohne dass man eigene Server managen muss.
• Cloud Storage
  • Einfaches Speichern und Ausführen von Files.
• Hosting
  • Erstelle Webapplikation-Assests mit hoher Geschwindigkeit und Sicherheit.
• Crash Reporting
  • Ranke und finde Bugs, so dass du sie schneller beheben kannst.
• Test Lab für Android
  • Teste deine Applikation auf Geräten, die von Google gehostet werden.
• Performance Monitoring
  • Erhalte einen Einblick in die Leistung deiner Applikation.

Grow & engage your audience

• Cloud Messaging
  • Man kann gezielt Nachrichten und Benachrichtigungen senden.
• Google Analytics
  • Erhalte kostenlose und unbegrenzte App-Analysen.
• Dynamic Links
  • Steiger das Wachstum, indem du Links mit Attributionen verwendest.
• Remote Config
  • Verändere deine Applikation ohne, dass du eine neue Version deployen muss.
• Invites
  • Es ist einfach deine Applikation und Content zu teilen.
• App Indexing
  • Führe Suchzugriffe auf deine mobile App aus.
• AdMob
  • Maximiere den Umsatz mit In-App-Anzeigen.
• AdWords
  • Führe gezielte Werbekampagnen aus.

Predictions

Ein weiteres interessantes Feature sind die Firebase Predictions. Diese Funktion verwendet die „Macht“ von Googles maschinellen Lernens um dynamische Benutzergruppen basierend auf dem vorhergesagten Verhalten der Benutzer zu erstellen. Mit diesem Feature ist es möglich fundierte Produktentscheidungen zu treffen, ohne ein internes Data-Science-Team aufbauen zu müssen.

Kosten

Prinzipiell ist Firebase billig. Bei einer gewissen Useranzahl kann man Firebase gratis benutzen. Danach zahlt man z.B. pro Gigabyte, was gespeichert wird 5$ und pro Gigabyte, was gesendet wird 1$. Userdaten sind eigentlich nur ein paar Kilobyte groß – also ist es recht billig. Aber wenn man viele Daten hin und her sendet, kann es teuer werden, und das Unternehmen/Applikation könnte zu Grunde gehen. Deshalb sollte man aufpassen und sparen, welche Daten man wirklich braucht.

Google macht mit Firebase kaum Umsatz. Sie stecken sehr viel Geld hinein und so entstehen wie oben schon erwähnt viele coole Features.

Vorteile

• Funktioniert in Real Time
  • Man braucht z.B. keine Socket.IO Systeme. Es funktioniert alles automatisch.
• Muss keine REST API schreiben (muss aber trotzdem ein paar Zeilen für den Server schreiben.)
• Es ist nicht teuer.

Nachteile

• Man kann Firebase nicht selber Hosten.
• Für große Applikationen wie Facebook oder Snapchat ist es keine gute Idee Firebase zu verwenden: ZU VIELE DATEN. Es ist für keine Applikationen gedacht.
• Man kann Firebase nicht lokal laufen lassen – nur durch die Cloud.

Quellen:

• https://firebase.google.com/
• https://medium.com/@limhenry/why-i-love-firebase%EF%B8%8F-and-what-is-firebase-%EF%B8%8F-96b54509d450
• https://www.lynda.com
• https://howtofirebase.com/what-is-firebase-fcb8614ba442

The post Firebase – eine kurze Einführung appeared first on Mobile USTP MKL.

Im Detail ist Framework7 nicht mit allen Plattformen kompatibel. Derzeit wurden nur iOS und das Google Material Design umgesetzt. Framework7 ist iOS spezifisch. Den Entwicklern war es wichtig, dass man mit dem Projekt alle nötigen UI-Elemente zur Verfügung hat, um eine Applikation umzusetzen. Das Material Theme kam später dazu, welches nach dem offiziellen Google Material Design erstellt wurde.

Elemente

Wie schon erwähnt, besitzt das Framework sehr viele „ready to use“-UI-Elemente und Widgets, wie z.B. Modals, Popups, Action Sheets, Popovers, List Views, Media Lists, Tabs, Side Panels, uvm. Die meisten von den aufgezählten Elementen brauchen nicht einmal JavaScript. Zusätzlich hat man die Möglichkeit die Styles zu verändern. Dies ist sehr leicht machbar, da sie in kleine .less Dateien aufgeteilt sind und darum leicht zu finden sind. Das Framework kann man auch mit Vue.js (https://framework7.io/vue/)  oder React (https://framework7.io/react/) kombinieren um z.B. Data Bindings verwenden zu können.

Eigenes DOM7 Element

Ein interessantes Feature ist, dass Framework7 keine externen Libraries verwendet. Sogar DOM-Manipulation hat eine eigene Library (DOM7), welche eine hohe Performanz besitzt. Der Vorteil liegt daran, dass man keine neue Syntax lernen muss, da es dieselbe wie die von jQuery ist.

Applikationen

Leider ist Framework7 nicht sehr bekannt. Oft wird zu anderen Frameworks gegriffen, wie z.B. Ionic. Applikationen, die Framework7 verwenden, sind z.B.:

• Tomatoid (https://www.tomatoid.com/mobile)
• SimpleTip: Tip Calculator (https://itunes.apple.com/us/app/simpletip-tip-calculator/id1187500689?ign-mpt=uo%3D8 )
• Bandbiz (https://www.mybandbiz.com/)
• Weight Loss Tips – Diet Recipes (https://play.google.com/store/apps/details?id=diet.cordova.hellocordova)
• How Much Did I Smoke? (https://itunes.apple.com/us/app/how-much-did-i-smoke/id513648441?mt=8&ign-mpt=uo%3D8)

Wie man erkennt, sind diese genauso wie das Framework, nicht sehr bekannt. Wie schon erwähnt wurde, wird dieses Framework hauptsächlich für Prototyping verwendet. Wenn man eine richtige .apk Datei aus den HTML-Files herausspielen möchte, kann man dies mittels PhoneGap von Adobe machen. Wenn man einen gratis Adobe Account besitzt, kann man die Framework7-Daten hochladen und eine iOS und eine Android builden und herunterladen. Mit der PhoneGap Destop Applikation kann man auch einen lokalen Server erstellen um die Applikation live zu sehen.

Framework7 vs. Ionic 

Wenn man Framework7 und Ionic vergleicht, ist Ionic bekannter als Framework7. Weiters basiert Ionic auf Angular und man verwendet TypeScript. Man kann sowie bei Framework7 auch Phonegap bei Ionic verwenden. Framework7 sollte man bei kleinen bis mittelgroßen Projekten mit Teams unter 10 Personen verwenden und Ionic bei großen Projekten bei einer Teamgröße über 10 Personen. Wenn man Ionic verwenden will, ist ein gewisses Know-How notwendig um ein Projekt umzusetzen (z.B. TypeScript-Kenntnisse). Bei Framework7 braucht man nur HTML, CSS und JS Skills um ein Projekt zu starten. Framework7 bietet auch eine sehr gute Performance und ist flexibel.

Ein Projekt erstellen

Gleich vor weg, es ist sehr leicht ein Projekt zu starten. Man lädt sich von dem GitHub Repository (https://github.com/framework7io/framework7) die Framework7-Files herunter und extrahiert das .ZIP. Von all den Dateien werden nur die Files im Dist-Ordner weiterverwendet. In diesem Ordner findet man die CSS (LESS) und JS Files. Diese bindet man in einem HTML-File ein und man kann gleich los starten. Mittels der Dokumentation (https://framework7.io/docs/) kann man dann die jeweiligen Elemente in die Dokumente hineinkopieren und modifizieren. Wie schon erwähnt, kann man mittels der PhoneGap Desktop Applikation auch ein Framework7 Projekt starten und einen lokalen Server starten.

The post Framework 7 – Ein HTML Framework appeared first on Mobile USTP MKL.

D3 steht für die drei Ds aus Data-Driven Documents. Es ist eine Library für JavaScript, welche mehrere Zeilen JS Code auf wenige reduziert, um Daten zu visualisieren. In diesem Tutorial werden wir mit der neuesten Version von D3 arbeiten: V4.

Was man vorher wissen sollte

D3 ist kein Framework, in welchem man per Drag and Drop ein Histogramm erstellt. In anderen Sprachen wird, um ein Histogramm zu erstellen, eine dazugehörige Funktion aufgerufen. Anders jedoch bei D3. Hier werden Rechtecke und Achsen selbst gestaltet. So kann man Linien, Rechtecke und Kreise miteinander kombinieren und ganz neue Grafiken erstellen.  Um Grafiken in D3 erstellen zu können, braucht es ein Vorwissen in HTML5, CSS und JS.

Der Unterschied zwischen einer Excel und einer D3 Grafik ist, dass Ersteres ein eingefügtes Bild ist und Letzteres eine interaktive Grafik sein kann. Man kann diese Grafik auch wie ein Video abspielen lassen oder damit interagieren.

Auf der D3 Seite finden sich viele Beispiele, wie diese sich bei Interaktionen verändern. Die in D3 erstellten Grafiken lassen sich animieren, damit interagieren und/oder werden in real-time verändert.

Scalable Vector Graphic

Scalable Vector Graphic (SVG) ist ein Tag im HTML Block, welcher eine Vektorgrafik beschreibt. In diesem Tag ist also eine Grafik implementiert und kein Bild. Das <svg> – Element kann mittels JavaScript im DOM als Objekt angegriffen und verändert werden. Mit Hilfe von CSS kann die Grafik formatiert und mittels JS animiert und transformiert werden.

SVG ist immer das erste und größte Element einer D3 Grafik. Man kann also sagen, ohne SVG gibt es auch keine D3 Grafiken. In SVG werden keine anderen HTML-Elemente gespeichert. Es ist rein für grafische Einträge gedacht. Wir nutzen somit D3 um Figuren und Linien in einem <svg> Element hinzuzufügen.

So let’s begin – D3 in JavaScript einbinden

Es gibt mehrere Möglichkeiten D3 in JS einzubinden. In diesem Tutorial werden wir jedoch den Code in einem File speichern um auch offline damit arbeiten zu können. Es steht jedem frei, ob man es auf diese Weise macht, oder auf eine URL referenziert.

Zu allererst erstellen wir eine index.html und CSS Datei. Ein zusätzliches File wird erstellt und wird d3.v4.js genannt. Auf der dieser – Webseite –  könnt ihr dann den Code in die Datei speichern. Ein letztes File wird erstellt und wird shapes.js genannt. Um auf all diese Files zugreifen zu können, referenzieren wir auf der HTML Seite auf sie. Wichtig ist hier die Reihenfolge, in der wir auf die Files referenzieren, damit der Browser die Grafiken lesen kann.

Code verstehen anhand eines Rechtecks

Es gibt einige Zeilen an Codes, die uns am Anfang Kopfzerbrechen bereiten. Genauso verhält es sich mit dieser hier:

Um diesen Code zu verstehen, bauen wir uns 3 Rechtecke im File shapes.js.

• Zuerst geben wir unsere Daten ein – ein Array in der Größe von 3 Werten.

• Dann erstellen wir eine Variable svg und greifen mittels JS mit D3 auf body zu, fügen ein svg hinzu und geben dem svg eine Höhe und Breite von 100%.

Um D3 zu verstehen sind die nächsten Zeilen sehr wichtig. Deswegen gehen wir sie Schritt für Schritt durch.

• In der ersten Zeile des Codes, möchte D3 auf alle Rechtecke im SVG zugreifen. Würde man den Code nur mit dieser Zeile im Browser ausgeben wollen, würden wir eine selection mit einem Array der Länge Null sehen – sprich nichts.
• In der nächsten Zeile .data(dataArray)  weiß der Browser, dass 3 Werte im dataArray stehen = Daten. Da jedoch noch keine Rechtecke vorhanden sind, erstellt er eine sogenannte enter selection und darin speichert er 3 placeholders (für unsere 3 Werte aus dem dataArray). Dies alles ist für uns nicht sichtbar. Zusätzlich erstellt D3 auch eine exit selection , wiederum nicht sichtbar. Diese exit selection stellt sicher, dass sollten sich 4 Rechtecke im Browser befinden, wir jedoch nur 3 Werte aus dem dataArray bekommen, das vierte Rechteck nicht mehr befüllt wird. Diese kleine Zeile bindet unsere Daten an die grafischen Elemente.
• Als nächstes bindet D3 Rechtecke an die enter selection, die bis jetzt nur 3 placeholders („undefined“) beinhaltet hat. Zuvor wusste der Browser nicht, welche Form wir zur Darstellung unserer Daten auswählen werden. Zwar haben wir in der ersten Zeile schon angedeutet, dass wir alle Rechtecke auswählen wollen, aber hier wird nochmals explizit die Form gestaltet. Zusätzlich werden diese Rechtecke mit den Daten aus dataArray verbunden und dem DOM übermittelt. Trotz allem sehen wir jedoch nichts im Browser.

Attribute

Ohne Attribute werden die Rechtecke nicht im Browser erscheinen. Jede Form in D3 hat andere wichtige Attribute, die nicht fehlen dürfen, um im Browser dargestellt werden zu können.

Das ist der ganze Text, der 3 Rechtecke im Browser darstellt.

• .attr(„height“, function(d,i){return d*15;})  – Die Höhe variiert nach jedem Durchgang des Codes (3 Mal weil dataArray 3 Werte drinnen hat). Das d steht für data und i für unseren Abstand. Diese könnt ihr gerne auch anders benennen. So holt sich diese Funktion nur die Daten und multipliziert sie mit 15 = 3 verschieden große Rechtecke.
• Die Position auf der x-Achse wird mit jedem neuen Rechteck um *60 verschoben.
• Die Position auf der y – Achse ist uns hier wichtiger. Würden wir nur „100“ als zweites Attribute schreiben, würden die Balken aussehen, als stünden sie bei y=100 kopfüber. Das ist nicht falsch, jedoch scheint es für uns nicht richtig, weil wir Balken anders lesen, als der Browser.

So sieht das Ergebnis mit der letzten Codezeile aus:

The post D3 anhand eines Beispiels verstehen appeared first on Mobile USTP MKL.