Building a Connected iOT solution with iBeacon, NativeScript and Couchbase Sync Gateway

In future everything will be connected. It wont just be our phones;it will be our light bulbs, refrigerator, heater, our front doors, our blenders. iOT is the gateway that connects the physical world with your connected devices.

The purpose of this post is to demonstrate how to build a fully connected iOT solution using Estimote beacons, NativeScript and Couchbase Sync Gateway.

NativeScript (a.k.a {N}) is a cross-platform framework for building native apps using CSS, XML and Javascript for iOS and Android. It lets you build no-compromise truly native UI without the hurdle to go though device specific knowledge.

Couchbase Mobile is the NoSQL database for building fast and scalable mobile apps. Its an integrated embedded JSON database with real-time synchronization via Sync Gateway.

For the the connected solution I’ve used Estimote beacons; they are wireless sensors that can be attached to any location or object. Estimotes are BLE (Bluetooth Low Energy) devices and the company provides SDKs to easily incorporate into existing mobile apps across platforms.

I am using two particular {N} plugins (a.k.a. modules) available to download from today:

The connected app can serve the purpose of tracking people in a meetup where the attendees are provided with Estimote beacons as they register at the front desk.

First I’ve cloned the Couchbase demo app from the link below:

The app covers the basics of saving documents using Couchbase {N} plugin and for doing push/ pull replication via Sync Gateway.

The following diagram represents the role of Sync Gateway in a mobile deployment:

Sync Gateway maintains up-to-date copies of documents. Mobile apps can create, update, delete files locally and Sync Gateway takes care of the rest.

I’ve used ngrok to host the Sync Gateway in my local machine.This is for exposing Sync Gateway hosted locally via https. Ideally, it will be a hosted instance. I am using Couchbase Sync Gateway community edition. You can get your copy for free from the link below:

The following command will publicly expose my local Sync Gateway instance hosted at port 4984 via https:

ngrok http 4984

you will also need to update the replication settings of the demo app that you have downloaded from github to point to the endpoint generated by ngrok:

Therefore, I’ve updated the endpoints in line 20 and 21 under list\list-view-model.ts:

In this way, I don’t have to add localhost exceptions in iOS and it will be available to connect from other devices.

In order to start the Sync server, I’ve used the following gateway configuration:

The gateway also gives you an admin web interface to track and make changes:

Now the demo app let me add people manually. I will add one to validate the configuration is correct and it is synced properly.

Next, I will modify the app to track beacon changes. This consists of the following steps:

  • Track Beacons changes
  • Map it to the correct person
  • For a valid person, save it as a regular Couchbase document which will trigger the sync function.

In order to track beacon changes, I have installed the Estimote beacon plugin. {N} supports installing plugins directly from npm repository therefore you just have to type in the following command:

tns plugin add nativescript-estimote-sdk

Once completed, I modified the list\list.ts to include the following lines:

This is a very simple implementation where if the mapped beacon is close enough, it will create a document object that triggers the sync function.

I have created a JSON data file that contains the map between beacon ID and person:

Therefore, replace [TODO: map] with:

Ideally, the mapping can be set in middleware level through an admin interface or can be pulled from other external sources like corporate directory or social media.

Now as I install and run the app in my phone and walk in with the two beacons that are mapped in the JSON data file, I’ll see items automatically added to the existing list via sync function.

As the changes are reflected in the Sync Gateway portal, I can make further changes by jumping into the specific document object through the highlighted list:

Making only few basic changes and with the help of {N} modules, I have created a connected iOT solution that can be used to track attendee presence in my next meetup with data automatically synced centrally via Couchbase Sync Gateway.

For more information on {N}, Couchbase Sync Gateway and Estimote beacons, please checkout the links below:


Couchbase Sync Gateway

Estimote Beacons

Special thanks to Eduardo Pelegri-Llopart for the review.

Happy Coding!