HTML 5 iBeacon Mobile app for iOS: Control your Mobile app content via the web CMS

Native or HTML5? I chose a different approach to Mobile app development. After years of experience with CMS controlled web sites and the increase of mobile technologies, I had an idea to create a mobile app controlled by the web CMS.

Lately we had an interesting project using technology which was new to us. It was based on a relatively new piece of hardware called iBeacon from Apple. It is a small device which broadcasts low energy bluetooth signal (BLE) specified by the Bluetooth 4.0. Based on the signal strength, the mobile app which is listening to the iBeacon, could tell how close it is and perform assigned actions. You can imagine the usage: you have a food shop and place iBeacons close to every type of product (pizza, cheese, meat, bread, vegetables, etc.), if a client has your app installed in his smart phone and goes close to pizza, the app will notify him for example about the best pizza offer/discount for today...

Project description

The goal of the project was to develop an ipad application which demonstrates the business potential of iBeacon technology. In short, the content of the app, images and texts change depending of which iBeacon is closer. We used 2 iBeacons. The app content is managed by the CMS web admin in which the admin could change texts and images. Using web services, the ipad app will request CMS for the content.

In detail

For mobile app we used Apache Cordova platform. It is a HTML5 app with Twitter Bootstrap. The sources were divided into PHP files. Then we used our builder to generate pure HTML files. Javascript was built with Google closure compiler. Generated app was then copied to Xcode Cordova project in order to run it on iPad. Good for the start, but the biggest unknown was the iBeacon technology... How to work with it?

First, they had to be configured so the app would recognize them. There are 3 values which can be set: UUID, Major and Minor. As suggested by Apple here (page 3) you can set all your iBeacons with the same UUID and then use Major as category and Minor as item/product. To go back to our food shop, let say you have 3 shops in Bratislava, Wien and Prague. Then you could set the iBeacons like this: 

  • iBeacons in all cities set to same UUID i.e. D9B9EC1F-3925-43D0-80A9-1E39D4CEA95C
  • Bratislava iBeacons set all to Major 1
  • Wien iBeacons set all to Major 2
  • Prague iBeacons set all to Major 3
  • all iBeacons set pizza Minor 10, cheese Minor 20, meat Minor 30

In this case, city shop is a category, food is a product. All iBeacons‘ actions could be sent to a single database from which you can easily get info about their usage, how many times the clients visited the monitored products, in which city and so on...

Based on that, I used the same UUID for both iBeacons, set the Major value of them both to 1, and the Minor value of one iBeacon to 10 and the second one to 20. OK, that's done. Next, I needed the Cordova plugin for iBeacon. I discovered 2 of them, but only this one worked (partly) in iOS8. The problem was that the plugin didn't work at the start of the app. I had to close the app and start it again in order to "wake up" the plugin. It was very annoying.  Then I find an ugly workaround/solution/hack here. I had to modify few lines of objective-c code of the plugin. At this time of writing, I think this bug is still an issue.

Also the important part is how to initialize the plugin in Javascript, so the app can start listening for the iBeacons. Here is the code that worked for me:

var delegate = new cordova.plugins.locationManager.Delegate().implement({
	didRangeBeaconsInRegion: function (pluginResult) {
		// here you do what you like with beacons
		// the first one in the pluginResult.beacons array is the closest one
		var i, signalStrength = 0;
		for (i = 0; i < pluginResult.beacons.length; i++) {
			signalStrength = pluginResult.beacons[i].rssi;
			console.log(signalStrength, pluginResult.beacons[i].major, pluginResult.beacons[i].minor);
		}
	}
});
var UUID = 'D9B9EC1F-3925-43D0-80A9-1E39D4CEA95C';
var beaconRegion = new cordova.plugins.locationManager.BeaconRegion('ibeaconapp', UUID);
cordova.plugins.locationManager.setDelegate(delegate);
cordova.plugins.locationManager.requestWhenInUseAuthorization();
cordova.plugins.locationManager.startRangingBeaconsInRegion(beaconRegion)
		.fail(console.error)
		.done();

With this code, the app will listen to all iBeacons with UUID D9B9EC1F-3925-43D0-80A9-1E39D4CEA95C, in its range. To stop listening I used:

var UUID = 'D9B9EC1F-3925-43D0-80A9-1E39D4CEA95C';
var beaconRegion = new cordova.plugins.locationManager.BeaconRegion('ibeaconapp', UUID);
cordova.plugins.locationManager.stopRangingBeaconsInRegion(beaconRegion)
		.fail(console.error)
		.done();

For the Web admin, the CMS part, we used our powerful Davinci CMS. It had 2 parts:

  1. statistics – where admin can see all iBeacons on a timeline, pie chart with iBeacon share and detail table of all iBeacons activities,
  2. configuration - where admin could update/upload/change content of the iPad app.

While working on this project I realized that controlling the Mobile app by the browser CMS is an interesting model for future Mobile app development at Davinci. I can’t imagine working with CMS on a mobile phone, it’s too small and not practical. Writing an article on the mobile? No, not really... But using the browser CMS to change the Mobile app content offers the client a complete control over the mobile app – he can add articles, add new pages, change the structure and the look of the app. On the other hand, the performace is still a problem with the HTML5 based apps... Anyway I’m looking forward to apply my findings to the new Mobile app development projects at Davinci.

Publikované: 19. nov 2014 10:42 | Počet prečítaní: 11753
  • Boško Milakovič

    Senior PHP & Mobile app Developer

    Boško je náš Senior PHP a Mobile App Developer. Keď pred desiatimi rokmi zaspával, rozmýšľal o kontrapunkte a sonoristike. Dnes sa ukladá na spánok s myšlienkami o PHP, Haxe, či Swifte. Keď práve nerobí aplikácie a stránky pre web, prípadne sa nehrá v našom CMS, objavuje čo všetko dokáže naprogramovať pre mobilné zariadenie. Okrem toho skúša ukázať svojim dvom synom krásu hudby a hravosť programovania.

We want you

Do you see yourself working with us? Check out our vacancies. Is your ideal vacancy not in the list? Please send an open application. We are interested in new talents, both young and experienced.

Join us