The AppBuilder ermöglicht es Apps in wenigen Minuten für iOS, Android und Windows zu gestalten. Das Prinzip ähnelt WordPress, sprich, das Interface ist wie eine Homepage aufgebaut und begleitet einen mittels vorgefertigten steps bis zum „launchfähigen“ Produkt. Zu beachten ist jedoch, obwohl dieses Framework kostenlos nutzbar ist, dass die Veröffentlichung einer App dann doch zum Zahlen auffordert. (Stand 2012)

Man unterschied 2012 noch zwischen 3 Pricing Versionen: Free, Standard und Enterprise.

Die Version Free inkludierte damals keine Veröffentlichung der App in den Stores. Die Standard Version dagegen schon, jedoch um den Preis von 29$ im Monat. Die Enterprise Version war und ist heute noch auf Anfrage sichtbar. Heute (Stand 2018) gibt es die ersten zwei Versionen nicht mehr. The AppBuilder ist nur noch als Enterprise Version verfügbar. Auch die Möglichkeit für Windows Phones App zu gestalten fällt weg.

Warum The AppBuilder?

The AppBuilder versucht das Intranet mobiler zu machen. Die Angestellten haben nicht immer ihren Laptop dabei und besuchen auch nicht öfters die Intranetseiten ihrer Firma. The AppBuilder zielt auf Smartphones ab. Laut ihrer Seite besitzen mehr als 85% der Menschen ein Smartphone und haben es auch ständig dabei. Die App soll Angestellten Content und Services zur Verfügung stellen, die vorher schwer zu finden waren.

Features

• Content wird personalisiert und die Angestellten werden nicht von der Fülle an Information erschlagen. Auch Gruppen können erstellt werden, welche dann getagt werden können. Zusätzlich kann man Informationen auch nur für bestimmte Job Funktionen, Projekte, Location usw. sichtbar machen.
• iPhone und Android native App Designs und eine responsive Web Version für Desktops und andere Screens
• App braucht für die Registrierung der Angestellten nicht unbedingt eine Firmenmailadresse. Einfach die gewünschten User auf die Whitelist setzen.
• Push Notifications für dringende Updates. Somit wird keine wichtige Email zu spät gelesen.
• Die Struktur der App, Content und verlinkte Services können jederzeit, auch nach Verfügbarmachen der App, verändert werden. Fokus Gruppen können erstellt werden, welche Feedback zu den Änderungen geben können.
• Mitarbeiter können auch ihren eigenen Content posten, welcher dann kommentiert, geliked und geshared werden kann.
• Wenn Kollegen sich untereinander austauschen und helfen, können sie sich auch dafür bedanken. Eine PushNotification benachrichtigt dann den Helfer in der Not.
• Security: User Management Fähigkeiten für on und offline domain user. Daten werden beim Versenden und am Smartphone verschlüsselt. ISO27001 Zertifikat und unabhängige Security Tests.
• Die App wird mittels Google Analytics bewertet. Jeder Content, Service etc. kann nachverfolgt werden; was kommt gut an, was nicht so gut. Dies hilft die App laufend verbessern zu können.

Umsetzung

Für Umsetzung braucht man kein bestimmtes Vorwissen. Wie oben erwähnt, ist die Erstellung der App ähnlich wie bei einer WordPress Seite. Man wählt bestimmte Content aus, welche in der App vorkommen sollen. Unter anderem RSS Feed, YouTube Videos, News, Photo Galerien etc.. Sehr aufwändig ist das Ganze nicht mehr.

The post The AppBuilder appeared first on Mobile USTP MKL.

Firebase Authentication ist ein free product, welches von Firebase angeboten wird. Es ermöglicht die Implementierung der Funktion der Authentifikation sowohl für Web-, als auch für native Apps. Die Nutzer authentifizieren sich über verschiedenste Provider, ohne eine einzige serverseitige Codezeile schreiben zu müssen. Ein Provider kann sein: GitHub, Twitter, Facebook oder Google und sogar ein benutzerdefiniertes Authentifikationssystem.

Um Firebase Authentifikation nutzen zu können, müssen die anderen Pakete, welche von Firebase angeboten werden, nicht genutzt werden.

Ein Vorteil hinsichtlich der JavaScript Authentifizierung ist, dass man keine Database aufsetzen, Passwörter im Back-End verschlüsseln und die Session aufrechterhalten muss. Firebase Authentication ist nur ein Authentifizierungssystem und speichert keine persönlichen Daten des Users. Solche Daten sind im Backend zu speichern.

Ein Projekt anlegen

Auf der Webseite kann man nun ein Projekt hinzufügen. Hier gibt man den Namen seines Projektes ein. Nach Eingabe des Namens, wird das Projekt erstellt und man wird auf eine neue Seite weitergeleitet. Unter dem Reiter DEVELOPE sieht man unter „Authentication“ die registrierten User.

Um die Authentication nutzen zu können, muss unter „Sign-in Method“ mindestens ein Provider ausgewählt sein. Wird ein benutzerdefiniertes Authentifikationssystem genutzt, wird dieses weiter unten auf der Seite auf die „White List“ gesetzt. Ab jetzt können sich Benutzer auf der App registrieren und einloggen.

Es gibt nun mehrere Möglichkeiten Firebase in unsere App zu integrieren. In diesem Beispiel verwenden wir ein HTML Doc, welches dann in die index.html des Vue.js Projekts reinkopiert wird.

Wird das Projekt im Browser nun aufgerufen, öffnet man die Konsole und greift mit „firebase.auth()“ auf Firebase zu und registriert nun einen User mit Mail und Passwort. An erster Stelle kommt immer die E-Mail, gefolgt von dem Passwort. Mit „Enter“ wird nun der User registriert und dies sieht man unter dem Reiter „Authentication“ auf der Firebase Seite.

Firebase in Vue.js einbinden

User werden sich nicht in der Konsole einloggen. Deswegen braucht es einige Komponenten in Vue.js.

1. Unter data sind email und password leer einzugeben -> …data:{email: ‘‘, password: ‘‘},…
2. Unter methods erstellt man eine Methode register() {firebase.auth().createUserWithEmailAndPassword(this.email, this.password)}
3. Um etwas in Vue.js zu versenden, erstellt man im vue.js div das Element <forms @submit.prevent=“register“></form>. Diese Zeile ruft nach dem Drücken des „Versenden“-Buttons, welcher mit submit verbunden ist, die Methode register() auf
4. Im Element <form> werden zwei <input> Elemente hinzugefügt. Jeweils für email und password
5. Geht man nun auf die Webseite des Projektes kann der User sich nun registrieren, jedoch kommt kein Feedback zurück. Hier kann man data um „authUser: null“ erweitern. Unter created (siehe Lifecycle Hook) kann der Status vom User aufgerufen werden.
6. Mit einem div und v-if=“authUser“ erscheint das Feedback „Signed in as…“. Die inputs für email und password stehen im v-else.
7. Nach der Registrierung erzeugt Firebase Authentication eine Session für den User. Dieser ist nun, auch beim Öffnen eines neuen Tabs, eingeloggt.
8. Nun können auch Sign in und Log Out implementiert werden. Ist der User schon registriert, erkennt Firebase Authentication diesen. Mit Log Out wird die Session automatisch beendet und der AuthToken wird gelöscht.

The post Firebase Authentication with Vue.js appeared first on Mobile USTP MKL.

In diesem Blogbeitrag werden wir euch Bluetooth Beacons (BLE Beacons) vorstellen und wieso es so angenehm ist, mit ihnen zu arbeiten. Und weiters noch die neue Kernspezifikation Bluetooth 5.0 und deren Neuerungen näher bringen.

Was sind Beacons?

Beacons sind location-based devices. User erhalten genau dann einen Rabattcode (danke Rabattcode App) für die roten Sneakers, wenn sie gerade genau vor dem Regal jener stehen, oder werden dank dieser kleinen Geräte durch ein Gebäude navigiert. Ein BLE Beacon sendet in kurzen, regelmäßigen Abständen im 2,4 GHz-Band seine UID (Unique ID) an die umliegenden Geräte. Sie versenden nicht durchgehend ihre UID, sie „blinken“ eher. In den Einstellungen der mitgelieferten Software können die Intervalle (zw. 100ms und 2000ms) verändert werden. Je kleiner das Intervall, desto genauer die Standortbestimmung und desto schneller wird die Batterie leer.

Ist unsere hypothetische Rabattcode App für den Empfang von Beacons konfiguriert und befindet sich das Smartphone in der Nähe eines dieser kleinen Geräte, lässt die Technologie die Standortbestimmung innerhalb eines Gebäudes zu. Die Ortung funktioniert, wie bei Mobilfunkmasten, per RSSI Level – Receive Signal Strength Indicator. Hier unterscheiden die Beacons zwischen 3 verschiedenen Abständen zum Smartphone: Immediate (0-10cm), Near (10cm – 3m) und Far (weiter als 3m).

BLE Beacons sind in vielen verschiedenen Formen auf den Markt erhältlich. Die einen sind klein und haben einzigartige geometrische Formen und andere sind wiederum schlichte weiße Kästchen. Einige werden die ein oder anderen vielleicht in öffentlichen Einrichtungen gesehen haben. Das MUMOK https://www.mumok.at/de/multimediaguide in Wien verwendet z.B. Beacons um dem User ihrer App die Ausstellungsstücke der jeweiligen Etage zu zeigen, je nachdem, wo man sich befindet.

Verwendung von Beacons anhand eines Beispiels

2014 realisierte indoo.rs https://indoo.rs/solution/visually-impaired/ ein Indoor Navigation Projekt für sehbeeinträchtigte Menschen am Flughafen von San Francisco. Es wurden 300 Beacons am Flughafen installiert. Diese vereinfachen den sehbehinderten Menschen die Navigation durch das Gebäude, indem die, von den Beacons versendete Signale, von einer App empfangen und verarbeitet werden. Daraufhin weist die App mithilfe der integrierten Vorlese-Funktion auf markante Orte hin.

Kontakt.io

Für unser Projekt haben wir uns für die Herstellerfirma Kontak.io entschieden. Die Möglichkeit zwischen verschiedenen Beacons zu wählen (ob Outdoor oder Indoor), bei fast allen Devices auf die Batterie zugreifen zu können, um diese bei Bedarf auszutauschen, und bei unserem Modell mit Bluetooth 5 arbeiten zu können, waren ausschlaggebende Argumente für diese Firma.

Wie schon erwähnt, bietet Kontakt.io die Möglichkeit zwischen mehreren Beaconarten https://store.kontakt.io/ zu wählen. Ja nach Positionierung der BLE Beacons, haben sie andere Formen und Funktionen. In der Tabelle stellen wir euch alle Beacons, die Kontakt.io anbietet, vor.

Die ersten beiden unterscheiden sich zwar in nicht so vielen Features. Jedoch hat uns die Möglichkeit mit BLE 5 arbeiten zu können, die Entscheidungsfindung etwas erleichtert. Zusätzlich kann das Modell „Beacon Pro“ auch NFC, ist wasserfest und besitzt zudem Licht- und Bewegeungssensoren.

Das Modell „Card Beacon“ hat eine geringere Laufzeit der Batterie. Diese ist auch nicht austauschbar, wie bei den vorherigen zwei Modellen. Zwar kann man dieses Modell ein- und ausschalten, das wäre jedoch für unser Setup umständlich, da sich die Beacons unerreichbar für die Museumsbesucher befinden werden und sie nicht im Arbeitsalltag der Museumsangestellten integrieren sollen.

Der BLE Gateway ist für Koordination der einzelnen Beacons zuständig. Er ist praktisch, sollten sich die Beacons bewegen. Da es jedoch in diesem Setting nicht der Fall ist, wurde dieses Device nicht berücksichtigt.

Für unser MultiTouch-Table-Setup wurden auch 3 USB Beacons mitbestellt. Sie sind klein, brauchen keine Batterie und laufen am MultiTouch PC. Leider mussten wir das Setting anders gestalten, da der Tisch zum größten Teil aus Metall besteht und das Signal stört und nicht durchkommt.

Das „Tough Beacon“ ist wie der Name schon sagt für eine etwas härtere Umgebung bebaut – und zwar für Outdoor. Leider kann man auch hier die Batterien nicht wechseln.

iOS und Android SDK

Kontakt.io bietet den Kunden eine Quickstartoption https://developer.kontakt.io/android-sdk/quickstart/ für die Installation und Einbindung der Beacons für iOS und Android Nutzer. Per Schritt-für-Schritt Anleitung werden die Nutzer durch das Intro geführt und es werden Werte vorgestellt, die man hier, zusätzlich zu der mitgelieferten Software, verändern kann. Dabei ist zu beachten, dass man bei iOS kein Intervall einstellen kann, was bei Android wiederum schon funktioniert.

Bluetooth 5

1999 wurde der der erste Standard, Bluetooth 1.0a von Ericsson, Nokia, IBM, Toshiba und Intel beschlossen. Über die Jahre wurde dieser Standard einige Male geupdatet und wurde im Dezember 2016 Bluetooth 5 als neueste Version verabschiedet.

Bluetooth 5 bringt nun einige Neuerungen mit sich wie die Verdoppelung der Übertragungsgeschwindigkeit, 800 Prozent mehr Kapazität bei Broadcast-Paketen, die Vervierfachung der Reichweite und ein verbessertes Übertragungs- und Komprimierungsverfahren.

Diese Neuerungen bringen viele Vorteile mit sich. Wo früher beim Telefonieren das Freisprechen schon die Verbindung verloren hat, wenn man sich nur ein wenig zu weit wegbegeben hat. Dieses Problem verschwindet mit Bluetooth 5 nun, da es jetzt möglich ist, sich im ganzen Haus zu bewegen, ohne auch nur die Angst haben zu müssen, dass das Gespräch abgebrochen wird. Es können locker Entfernungen von 100 Meter überbrückt werden. Somit bildet Bluetooth 5 einen schönen Einsatzzweck zwischen NFC und WLAN. Ein weiterer Vorteil, die Daten werden verschlüsselt übertragen, was sich sehr eignet für Geräte die die eigene Gesundheit überwachen oder zum Bezahlen dienen.

Bluetooth 5 verbraucht trotz höherer Geschwindigkeiten und deutlich größerer Reichweite, nach wie vor wenig Strom und hat durch die Verschlüsselung eine hohe Sicherheit. Durch die Vervierfachung der Reichweite im Vergleich zu Bluetooth 4.0, sind auch bei einer Entfernung von 240 Metern noch Geschwindigkeiten bis zu 128 kb/s erzielbar und bei 120 Metern auch 500 kb/s.

In der vierten Generation von Bluetooth (4.0) wurde BLE (Bluetooth Low Energy) entwickelt und eingeführt. Trotz der Updates von Bluetooth 5, die sich auch BLE auswirken und dort gelten, ändert sich am geringen Stromverbrauch nichts. Dies wird durch Ruhephase zwischen den Sendezyklen erreicht. Der nun energieeffiziente Datentransfer ist unter anderem bei Wearables und Smart-Home Anwendungen interessant, da hier viele kleine Datenmengen in unterschiedlichen Abständen verschickt werden.

Vor allem die IoT-Welt profitiert von Bluetooth 5 und wird immer wichtiger werden. Mehr und mehr smarte Geräte, wie Thermostate oder steuerbare Glühbirnen, kommen auf den Markt und können wie der Smart TV über Bluetooth 5 am Smartphone besser gesteuert werden. Wichtig ist die Abwärtskompatibilität des neuen Standards auf Bluetooth 4 oder 3 und auch die Abhängigkeit der Qualität des Bluetooth-Chips vom Hersteller darf nicht vergessen werden.

The post Bluetooth Beacons und Bluetooth 5 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.

Die App “Vegan Choice” ermöglicht den Besuchern das Kommunizieren von Android Smartphones mit Bluetooth Beacons. User können sich dann vegane Rezepte ansehen und bei Bedarf als PDF herunterladen.

Vegan ist lange keine Modeerscheinung mehr – es ist eine Lebensweise geworden. Obwohl die Zahl der vegan lebenden Menschen steigt, verlangt es vielen nach Rezepten, die leicht zum Nachkochen sind. Besonders Vegan Food Festivals zeigen sowohl Carnivore als auch der veganen Gemeindschaft, was man mit viel Fantasie zaubern kann. Die geliebten Gerichte wie Burger, Pizza oder gar Käsenudeln werden veganisiert und am Stand verkauft.

Vegan Choice – Funktion der App

Vor dem Präsentationsteller, welcher sich in einer Glasvitrine als Vorschauobjekt befindet, ist ein BLE Beacon positioniert. Sollte keine Glasvitrine vorhanden sein, wird der Beacon unter dem

Tisch versteckt. Ein Logo in der Form eines Hexagons klebt auf der Vitrine vor dem Beacon oder auf dem Tisch oberhalb des darunter liegenden Beacons.

Die Festival Besucher werden durch einen Flyer auf die App aufmerksam gemacht und können sie aus dem Play Store herunterladen. Bluetooth muss bei der Benutzung der App eingeschaltet sein.

Der Homescreen weist die User darauf hin das Smartphone auf das Logo der App zu legen. Die User werden auf die jeweilige Webseite des Gerichtes weitergeleitet. Das Rezept kann dann als PDF heruntergeladen werden. Der Retour Button führt die User zum Homescreen zurück. Neue Rezepte können nun angeschaut werden.

Die Weiterleitung zu einer Webseite erfolgt bei einem Abstand von höchstens einem Meter. Entfernt sich der Besucher, bleibt die Seite offen. Auch dann, wenn das Smartphone in der Nähe eines anderen Beacons ist. Dies ist gut, da sich eine Gruppe vor dem Logo bilden könnte und das Beacon nicht mehr erreicht werden kann.

Umsetzung

Der Homescreen und die Beacon-Funktion sind in Android Studio programmiert worden. Die (Pro) Beacons sind von der Firma Kontakt.io. Die 3 Webseiten wurden mit Hilfe von Bootstrap erstellt. Das Logo war zuerst eine Animation in Aftereffects und ist aus Ladezeit-Gründen in ein Hintergrundbild umgewandelt worden. Das Hintergrundbild unterscheidet sich mit jedem Rezept mit einem Bild, welches die Mahlzeit anzeigt. Die Fotos sind selbst geschossen worden und colorgegradet. Der Downloadbutton wurde im Illustrator designed. Die PDF Rezepte wurden in InDesign erstellt.

Beacon Funktion

Beacons sollen in diesem Fall nur getriggert werden, wenn sie “IMMEDIATE” sind. Dies bedeutet, dass sie erst vom Smartphone erkannt werden, wenn dieses höchstens einen Meter entfernt ist.

In diesem Projekt werden nur die 3 Beacons mit den MINOR Werten 1000-1002 gesucht. Jedes dieser Beacons leitet dann vom Homescreen zu der jeweiligen Webseite. Z.B.: Beacon mit Minor 1000 liegt vor einer Minestrone – User wird zum Minestrone Rezept weitergeleitet.

The post “Print to Mobile” – Vegan Choice appeared first on Mobile USTP MKL.