Beacons and PhoneGapin practice

Anders Borg

2016-04-07

Agenda

• 17.45 - 18.30: Introduction to beacons

• 18.30 - 18.45: Pizza & beer + beacon hunt

• 18.45 - 19.30: Introduction to PhoneGap/Cordova

• 19.30 - 19.45: Walkthrough of the beacon hunt app

• 19.45 - ...: Q&A

• (we actually ended 20.30)

Disclaimer

• You might know more than me• Feel free to correct me, but be polite

• I work in a special way and I offer certain things to certain markets• That means I know most about that

• Still, I've tried to keep the information as broad as possible

Introduction to BeaconsAnders Borg

2016-04-07

What's a beacon

• Small devices that signal an identity (and optionally a URL) for activating content and interaction in a smart device

• Uses Bluetooth Low Energy for transmitting tiny broadcast packets continuously

• Often battery-powered, but there are other options

• Requires an app for associating with content and actions• URL beacons not so much; see later

• Aimed for use with mobile devices, primarily mobile phones

• Identifies a context rather than necessarily a physical location• Think beacons on a bus or plane; not very static

What does a beacon do?

• It pings a certain message continuously• typically once per second or faster

• Beacons can be reconfigured with any ID supported by the method

CloudServiceApp

What does a beacon not do?

• It doesn't receive any data, except during configuration

• It doesn't communicate with the Internet

• It’s not a solution for indoor location as-is• Fixed mounting, mapping and advanced triangulation could solve it; solutions

exist

CloudServiceApp

What does a beacon look like?

• Battery-powered

• USB-powered

• Mains-powered

• etc

• USB or mains-powered beacons are best for long term installations, but are harder to place than battery-powered

Myths and misconceptions

• "They run out of battery"• Not USB beacons; there are also battery beacons that last a year or more

• "They steal customers’ identities"• No they can't, but the app and backend could follow you around• Beacons could though be based on computers...

• "I need to re-configure the beacons to serve other content"• No, that's done centrally or in the app

• "The investment will be very high"• Not so much: 10 beacons + 1 year subscription is less than a smartphone

• "Multiple beacons will wreak information havoc"• Don't have to; very much depending on the quality of app and system

Are beacons part of the IoT concept?

• In my definition IoT involves remote control and/or sensing of physical phenomena, either by a user device or an app in the cloud, as well as continuous data collection and possible analysis

• So, maybe...?

• The important thing is that it finds real life uses

What types of beacon methods are there?

• Apple iBeacon

• Google Eddystone

• Several others that are little used (AltBeacon, UrlBeacon etc)

• Go for iBeacon or Eddystone for broadest range of beacons

• iBeacon still dominates (more mature)

• Some beacons support both in parallel

iBeacon

• Specified/branded by Apple

• Introduced 2013 in iOS7

• Part of iOS

• Also works with (and is being used with) Android

• Signals an identity via UUID, Major ID and Minor ID values

• Requires an app

• Supported by Apple Pay, that can be utilized by other companies

Eddystone

• Specified/branded by Google, but open source

• Introduced 2015

• Part of Google Play Services, but not integrated in Android (yet)

• Eddystone packets:• UID works similar to iBeacon, but not compatible, and requires a custom app; signals

an identity via Namespace and Instance values• URL is supported by Google apps: Physical Web, Chrome, also for iOS• TLM informs about beacon status (battery, temperature etc)

• Note that Eddystone-URL doesn't have the "fine tuning" and gamification possibilities of iBeacon and Eddystone-UID• it’s just intended to trigger a site

Proximities

• Beacons provide an indication of the experienced power 1 meter away from the beacon (TX)

• Together with the actually experienced power (RSSI) it can be used to roughly estimate distance

• iBeacon and Eddystone use this to estimate proximity levels• Software estimates predefined proximities: far, near, immediate

• These proximities can be used to determine where content or actions are relevant

• It's too unreliable for actual distance measurements

Who makes beacons?

• Many providers worldwide

• Popular: Estimote, Kontakt, Radius, Minew, Jaalee, AnkhMaway

• Can be ordered via Amazon, Alibaba etc

• Apple and Google do not make or sell beacons

• Estimote is popular and OK for experiments, but not for production

• Don't select a provider without USB or long-lasting/exchangeable batteries

• Preferably get beacons that support both iBeacon and Eddystone

• They often also provide SDKs for Android and iOS

Prerequisites

• The device (phone or tablet) needs to runs iOS 7 or Android 4.3 or later, and needs to support Bluetooth 4.0 (from iPhone 4S and all newer Android phones)

• Bluetooth needs to be activated• Apps often activate Bluetooth if not

• The device often needs an active mobile or Wi-Fi connection for information lookup

Alternatives for mobile access

• QR codes: no cost; printed; requires barcode app

• NFC tags: low cost; precise due to short reach; not iOS

• Geofencing: nothing to install, no precision indoors

• Enter link manually: always works, but more cumbersome

• Bulk SMS: requires knowledge of the user's phone number; expensive

• Benefits with beacons, in comparison:• Detected without user intervention

• Cover an area

• Arguable what is the most secure / private technology

Advice

• Place them so they can radiate freely around the area they are to cover• If they need to be hidden away, please note:

• Behind glass (e.g. a window), paper (e.g. a poster) and plastic work fine• Avoid metal or water in the direction of transmission and right beside

• Preferably use USB-connected beacons for long-term installations• Use proximity tactically: near is fine most of the time though• iBeacon and Eddystone-UID: Group IDs based on company, geographic

location, internal location• Get your own unique UUID, Namespace• Verify the complete solution on location, and then verify again• Inform the audience about what they should do and why

Issues

• Varying quality and usability of beacons; check before you buy

• The work involved in installing and maintaining many beacons• Configuring identities, mapping where they are, changing batteries, replacing

broken ones etc

• The user might not be aware of the prerequisites

• Some Android phones still have fundamental BLE problems that most likely won't/can't be fixed• Known: Moto X/G, Nexus 4/7

• Wi-Fi seems to interfere with BLE communication

What's required by an app?

• Detect beacons continuously

• Associate individual beacons with content and/or function

• Handle traversing between beacon regions in a logical and user-friendly way

• Ways to avoid making your own app:• Apple Pay integrates support for iBeacon• Google Chrome and Physical Web integrate support for Eddystone-URL

• Yet, the Physical Web app seems more like a concept demo

• CliqTags and similar beacon-enabled CMSs

Complete solutions

• A wide range of providers with one or a combination of, beacons, API/SDK, content management system, fleet management, analysis (e.g. heatmaps, movement)

• Proxbook lists all players within proximity solutions (mostly for marketing), which in practice means beacons and still primarily iBeacon• http://proxbook.com

A complete solution

• Content management optimized for mobile devices

• More or less advanced analytics

• SDKs for different mobile platforms and/or turnkey app

• A range of different beacons: battery, USB etc

• Management of installed beacons

• Possible to control associations and behavior via:• Beacon IDs• Proximity level to trigger at (actual distance or far, near, immediate)• Dwell time, to trigger content after a delay• Direction, to trigger content on moving inwards or outwards• etc

Application areas

• Malls/shops (offerings, surveys, contests...)

• Logistics (checkpoints, truck IDs...)

• Healthcare (identifying equipment...)

• Events and conferences (event info, interaction...)

• Commute (offerings, entertainment...)• Airplanes, trains, buses, including ports/stations

• Museums (info about items, map...)

• Security (checkpoints, ID of guards...)

• Outdoors, e.g. zoos, landmarks (location info...)

Digital signage and beacons

• An especially interesting area within retail and commute

• Beacons (USB) are mounted on the screens

• Offerings are shown on the screen and "downloaded" to the phone

• The customer then gets to interact with the information

• http://blog.encircle.io/post/129698694610/why-beacon-technology-digital-signage-are-a

Business cases

• Some really large installations in USA

• SITA keeps a directory of publicly accessible beacons at major airports in USA (so far)

• Also, larger installations in retail chains• E.g. Macy's has supposedly installed 4000+ beacons

for in-shop information

• Mobile World Congress used beacons for visitor information with a custom app

• Still mostly for marketing in retail• At least that's what magazines write about• Internal use is likely there as well

The status in Sweden

• Remarkably quiet (will the phenomenon pass by?)

• Knowledge/awareness is almost non-existing

• No larger installations, and to my knowledge only temporary• Known business cases: Coop, H&M, SJ

• Little written about it• Resumé: 2 real hits on "beacon", 1 hit on "ibeacon", 0 on "eddystone"

• Few Swedish providers• Known Swedish system providers: Abiro, ShopJoy, Crunchfish• Aftonbladet's app supposedly supports iBeacon for e.g. coupons• SVEP (in Lund) is the only Swedish provider of beacons I know

An actual customer case

• Ongoing business case

• Buses in Mexico

• Digital signage screens will show marketing messages

• USB beacons on the screens will signal the users' phones, "transferring" the content

• Geofencing will be used outside the buses for nearby offerings

Other discussed scenarios

• At zoos around the enclosures

• At furniture groups and information desks at a large furniture provider (both internal and customer use)

• For corporate games (e.g. treasure hunts)

• For city tours

• For different forms of commute: bus, train, plane

• Geofencing can optionally be used outdoors: requires no physical installation, and no maintenance

Opportunities

• Don't just go for transient proximity marketing and push notices• There might be lots of vertical applications in healthcare, logistics, and

general productivity

• Yet, a key opportunity in marketing is as a complement to digital signage, as described earlier

• Long-lasting installations with practical value for both the customer and their customers• More money over time

• Use cases where beacons move around: cars, buses, shopping trolleys

• Find ways to use beacons for indoor location

References

• http://proxbook.com

• https://developer.apple.com/ibeacon/

• https://developers.google.com/beacons/

What's Abiro?

• Software development• Web/mobile/desktop apps

• Technical management consulting

• Offers CliqTags as its core offering

• http://abiro.com

What's CliqTags?

• Content management for mobile interaction

• Complemented by numerous mobile apps forenabling access: QR codes, beacons,NFC tags, geofencing etc

• Supports beacons: CliqTags Beacon Readerdetects beacons and associates with sites• Focus on iBeacon, but also works with Eddystone-URL

• Addressing digital signage, shops, shopping centers, zoos, commute

• Quote from the bus lead: Hi Anders, I've been playing with cliqtags....realylike it!!

• http://cliqtags.com

Pizza, beer +beacon hunt!

Foo Café Beacon Hunt

• Beacon Hunt is a very simple demo app that shows use of beacons for treasure hunts• Also a possible seed to a commercial app

• It's made for Android and iOS, but is here only available for Android

• Beware of some Motorola and Nexus devices

• Also note requirement for at least Android 4.3

Foo Café Beacon Hunt

• Find 5 beacons hidden in this room

• Follow the clues given by the app

• Watch the animations

• Listen to the spoken messages

• Watch the debug info for detected beacons• A beacon needs to be "near" to be considered found

• It can take some time for the app to detect near proximity

Read this QR code to install the app(via PhoneGap Build)

Introduction toPhoneGap/Cordova

Anders Borg

2016-04-07

PhoneGap vs Cordova?

• Adobe donated the PhoneGap code to Apache (ASF) 2011

• Adobe kept the PhoneGap name

• The Apache project was renamed Cordova

• PhoneGap is a distribution of Apache Cordova, with additional services, primarily PhoneGap Build, and command line wrappers

• In other words: Cordova is the main project and code, PhoneGap is a shell and additional services offered by Adobe

• http://phonegap.com/blog/2012/03/19/phonegap-cordova-and-whate28099s-in-a-name/

What’s Cordova?

• A cross-platform mobile app development tool

• It uses Web technologies like HTML, CSS, Javascript instead of Java, Swift etc

• Device functionality is accessed via plugins• Most are provided via https://www.npmjs.com/

• There are several higher-level tools that use Cordova as a base

Principle

Your project(Javascript, HTML, CSS,config.xml, media etc)

Platformcode

CordovaCore

phonegap.jscordova.js

Plugin API(Javascript)

Plugin(s)

Platform-specific(Android, iOS, Windows)

Pros

• Platform-independent

• If you know Web programming and are already proficient with Javascript, you know how to develop mobile apps

• There are tons of applicable Javascript libraries, even for game development: jQuery, AngularJS, React, Phaser...

• Easy to balance (and change on-the-fly) whether functionality should be in the device or on a server, based on responsiveness etc

• Possible to develop Web apps and related mobile apps with very few developers, hence leaner and more flexible staffing

• Great way to deeply learn Javascript (Node.js is another way)

+

Pros

• Code is surprisingly stable and fast• Probably due to the hardened browser cores that need to handle any kinds of crappy

Javascript and markup, and due to JIT compilation• Some plugins can be unstable/flaky though, mainly in the native code

• Excellent for apps that need to embed Web content anyway

• APIs for plugins are generally simpler than the native counterpart (higher abstraction level)• Extreme example: read a barcode in one line of code

• Also UI is arguably easier to work with due to HTML and CSS

• Remote debugging is easy via Inspect• Unless issues are in the core or plugins; then it's tougher

+

Cons

• Web-like UI rather than native-like ditto

• UI looks the same on all devices

• Regarding plugins:• Many more “odd” plugins are not considered core and quality can vary a lot• Some plugins are not complete or flexible enough (HealthKit, ResearchKit,

Camera etc) or completely lacking• Hence Cordova is best for apps that don't use too much phone features

• Javascript has some pecularities, like almost everything being asynchronous (for good and bad)

• Issues with older Android WebView

-

Browser/WebView compatibility

• The older (non-Chrome) Android browser used as the WebView up to Android 4.3 is not very HTML5/CSS3 compatible• This is used even if Chrome is installed

• Be careful with newer HTML and CSS features, especially CSS3

• There are still many Android phones on the market with this WebView

How to communicate with servers?

• Ajax for client Javascript to server code communication• Plain Javascript or jQuery.ajax (the latter simplifies)

• Cross Document Messaging for server Javascript to client Javascriptcommunication• Not used much, but versatile, and circumvents cross domain issues

Device AppWeb App

Web ServiceAjax / CDM

Development tools using Cordova

• PhoneGap/Cordova command line

• Adobe PhoneGap Build

• Ionic

• Intel XDK

• Microsoft Visual Studio

• Evothings Studio

• Telerik

PhoneGap/Cordova command line

• Use any editor (I use NetBeans)

• The most immediate method, if you accept command line

• Installs plugins etc as part of your local project

• Can upload code to device via USB

• Requires mobile platform SDK (ADT, XCode etc)

Adobe PhoneGap Build

• Cloud service, provided by Adobe, that builds apps for specified platforms and provides download possibility for testing purposes

• Can also build for production, by uploading certificates for each store

• If command line PhoneGap has been installed, "phonegap remote build" can be used to remotely build the app for all specified platforms

• Commercial for private builds (free for public GitHub projects)

• https://build.phonegap.com/

Adobe PhoneGap Build

• Pros:• Builds for all desired platforms without local SDKs etc• No need to use command line tools• No need to install plugins locally (project folders become very lean)• Easy to distribute test builds via QR code• Hydration and Weinre (~ Inspect) make cross-platform debugging easier

• Cons:• It's slow to build compared to command line (sometimes indefinitely)• No access to the plugins and platform-specific code• Lagging behind Cordova releases• Crappy tech support (relying on volunteers)

Ionic

• Cloud-based high-level framework and development tool that also provides UI components etc• Uses AngularJS and custom widgets for creating nice user interfaces

• Can publish directly to stores via Ionic

• Commercial

• http://ionic.io/

Intel XDK

• An IDE for HTML5/Ionic/Cordova apps

• Includes device emulation

• Includes tools for making game development easier

• Free

Microsoft Visual Studio

• IDE for software development in general, but mainly for .NET

• Cordova support provided by Visual Studio Tools for Apache Cordova

• Also works with Visual Studio Express, that is free

Evothings Studio

• Development tool for IoT-related applications, using Cordova

• E.g. it's easy to build apps for communicating with Arduino via BLE

• Only the Javascript/HTML/CSS is uploaded, so very fast turnaround

• Swedish company

Alternatives for cross-platform development

• Xamarin• Apps developed in C#• Compiled to native code• Uses Mono (platform-independent .NET implementation)

• AppCelerator Titanium• Apps developed in Javascript to proprietary APIs• Compiled to native code?• Not using a WebView

• Unity• For game development

• And more...

Advise

• Take a serious look at Ionic, XDK or Visual Studio if you haven't worked with Cordova before

• Be wary of slow frameworks• Don't overdo it

• Be wary of newer HTML5/CSS3 features

• Test also on a bit older/slower devices• Not everyone has the latest and greatest

Resources provided by Abiro

• Tutorial for PhoneGap Build:• Describes basic project setup

• Includes a template for a quick start

• http://abiro.com/tutorials/phonegap/

• PhoneGap Image Generator:• Creates the range of icons and splash screens for primarily PhoneGap Build

projects and for primarily Android and iOS

• Relatively popular (50-100 conversions per day)

• http://pgicons.abiro.com/

Apps made by Abiro

• Mainly device-based (Android and iOS, except Advertiser):• https://play.google.com/store/apps/details?id=com.abiro.phonegap.cliqtagsqr• https://play.google.com/store/apps/details?id=com.abiro.cliqtagsbeaconreader• https://itunes.apple.com/us/app/cliqtags-beacon-advertiser/id1043842313

• Mainly server-based (Android and iOS):• https://play.google.com/store/apps/details?id=se.beconfident.acne• https://play.google.com/store/apps/details?id=se.beconfident.teethwhitening• https://play.google.com/store/apps/details?id=com.abiro.polygonjobb

• And of course Beacon Hunt...

References:

• https://cordova.apache.org/

• https://www.npmjs.com/

• http://phonegap.com/

• https://build.phonegap.com/

• http://ionic.io/

• https://software.intel.com/en-us/intel-xdk

• https://www.visualstudio.com/en-us/features/cordova-vs.aspx

• http://evothings.com/

Walkthrough of the Beacon Hunt app

Walkthrough of Beacon Hunt

• Works on Android and iOS (verified)

• The project supports command line and PhoneGap Build• Yes, it's possible to do both

• For simplicity's sake, it doesn't use any additional framework, not even jQuery

• Beacon Hunt is based on generic treasure hunt logic and a description of the treasure hunt as data• Best case the logic doesn't have to be changed for a new treasure hunt• Re-branding and other changes will be needed though

• The handling of beacons is basic compared to a beacon app for content/action lookup

How to build from the command line

• Install ADT (requires Java) and/or XCode

• Install Node.js

• Install Cordova: npm install -g cordova (at least on Windows)

• Add/remove plugin: cordova plugin add/remove ...

• Build for platform: cordova build android/ios/...

• Run for platform: cordova run android/ios/...

• PhoneGap provides the same commands

• Use Cordova commands for the best error reporting

• Build for PGB: phonegap remote build android/ios/...

How is an app structured?

• Javascript, HTML, CSS and related media provide the logic and look-n-feel of the app, typically stored under www/

• Static resources are typically placed under www/res/

• config.xml is the project file that tells the build command the characteristics of the project

• Plugins (under plugin/) add functionality beyond what Javascript can do, mostly in terms of integrating with device functionality

• Platform-specific code (under platforms/) is created by the build command per specified platform

How is an app structured?

• So, typically:• platforms/

• plugins/

• www/

• www/res/

• config.xml (under www for PhoneGap Build)

Actual file structure

Download source

• https://bitbucket.org/andersborg/foo-caf-beacon-hunt

• Read README for command line advice