ShipIt Day 2016: iBeacon Tracking App

von Manuel Breitfeld

Eines unserer Projekte unseres ShiptIt-Days [1] befasste sich mit einer Zeiterfassung fürs Büro über die iBeacon-Technologie. Das Projekt teilten wir in zwei Komponenten auf:
iBeacon Tracking App
iBeacon Tracking Server


Die App erkennt dabei, ob sich die Person mit dem mobilen Gerät in der Nähe eines iBeacon befindet und schickt über eine JSON-basierte REST-Schnittstelle diesen Zustand an den Server. Der Server hingegen empfängt diese Daten, bietet eine Verwaltung von Person und Geräten und zeigt eine Historie zu den erfassten Zuständen an.
 
Dieser Blog-Post befasst sich mit der App. Den iBeacon Tracking Server werden wir morgen in einem weiteren Blog-Post vorstellen.

Ionic als hybrides App-Framework

Eine Hauptanforderung an die App war, dass sie sowohl auf Android als auch iOS läuft. Um in der kurzen Zeit des ShipIt-Days eine entsprechende App entwickeln zu können, haben wir uns für das HTML5-App Framework ionic [2] entschieden. Das Cordova iBeacon Plugin [3] stellt dabei die Unterstützung der iBeacons bereit.
In Ionic wird die Logik in Javascript bzw. AngularJS entwickelt, das Design wird über HTML und CSS bereitgestellt.

iBeacon Tracking

iBeacons werden über ihre UUID und zwei weitere Versionsnummern (minor- und major-Version) identifiziert. Die Kommunikation mit iBeacons erfolgt über Bluetooth Low Energey (BLE) - entsprechende Methoden und Events bietet das zuvor angesprochene Cordova iBeacon Plugin.
In der ersten Version des ShipIt-Days kann die App den Status "Anwesend" / "Abwesend" über das Erkennen eines iBeacons ermitteln. Zukünftig ist denkbar, dass die App über Triangulation mehrerer iBeacon-Signale den genauen Standort einer Person bestimmen kann. Würden diese Informationen an den Server übermittelt, könnte dieser diese Daten analysen und Auswertungen, wie z.B. Meeting Raum 1 ist zur Zeit belegt, zur Verfügung stellen.
 
Der folgende Screenshot zeigt - zu Debug/Info-Zwecken - alle Daten an, die von den iBeacons empfangen werden.

Kommunikation mit dem iBeacon Tracking Server

Die Kommunikation mit dem iBeacon Tracking Server erfolgt über definierte REST-Schnitstellen, welche JSON-Daten austauschen. Sobald ein Mitarbeiter das Büro betritt und die App einen iBeacon erkennt, wird über AngularJS ein HTTP-Post-Request an den Server gesendet.
Möchte die App die Arbeitszeit der letzten Woche für den Mitarbeiter anzeigen, fragt sie über eine weitere Schnittstelle per HTTP-Get die entsprechenden Daten an. Das vom Server zurückgelieferte JSON kann einfach in Ionic über die Tags ion-item und ng-repeat ausgewertet werden. Im folgenden ist ein kleines Code-Beispiel aus dem Historie-Tab.
<ion-item class="row" ng-repeat="entry in historyentries">
 <div class="col">{entry.date | date : 'dd.MM.yyyy' : timezone}</div>
 <div class="col">{entry.time / (1000 * 3600)  | number:2} h</div>
</ion-item>

Fazit

Der ShipIt-Day war ein interessantes Projekt, bei welchem man in relativer kurzer Zeit neue Technologien kennenlernen konnte und gleichzeitig sehr viel mehr als simples "Hello World"-Programm ausprobiert hat.
So konnte jeder erste Erfahrungen sammeln und sich gleichzeitig von den anderen Ideen der weiteren Projekte und deren Umsetzung inspirieren lassen.

Zurück

© 2006-2024 exensio GmbH
Einstellungen gespeichert

Datenschutzeinstellungen

Wir nutzen Cookies auf unserer Website. Einige von ihnen sind essenziell, während andere uns helfen, diese Website und Ihre Erfahrung zu verbessern.

Sie können Ihre Einwilligung jederzeit ändern oder widerrufen, indem Sie auf den Link in der Datenschutzerklärung klicken.

Zu den gesetzlichen Rechenschaftspflichten gehört die Einwilligung (Opt-In) zu protokollieren und archivieren. Aus diesem Grund wird Ihre Opt-In Entscheidung in eine LOG-Datei geschrieben. In dieser Datei werden folgende Daten gespeichert:

 

  • IP-Adresse des Besuchers
  • Vom Besucher gewählte Datenschutzeinstellung (Privacy Level)
  • Datum und Zeit des Speicherns
  • Domain
You are using an outdated browser. The website may not be displayed correctly. Close