Estimote Nearables Starter Guide (unsupported content)

Mikael KindborgBlogs, Tutorials

Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

This article refers to features no longer supported

We no longer maintain the Cordova plugin required to use Estimote Stickers.


Estimote Nearables at a glance

This guide gets you up and running with creating mobile applications for Estimote Stickers using the JavaScript Nearable API. When you attach a sticker to an object, it becomes a nearable that you can monitor and track. It is easy to write nearable apps using the fast workflow of Evothings Studio. Read on to learn more!

Estimote nearables are based on a new type of beacon technology. The Estimote Stickers product line is the first to support this technology. Stickers are small beacons. When you attach a sticker to an item, it becomes a nearable; a smart object that broadcasts data.

We have no dog at the office, so we instead attached the Dog Sticker to a remote control. Whenever someone picks it up you get notified!

nearable-in-action

In comparison with iBeacon technology, the nearable gives you much more information via the attached Sticker, such as its nearable type, proximity zone, signal strength, along with data from embedded sensors; motion, i.e. acceleration, orientation and temperature.

With the JavaScript API for nearables, it is very easy also for web developers to get this information from your Stickers.

Together with Evothings Studio, you can develop nearable apps directly on real mobile devices. When you connect several Evothings Clients to the Evothings Workbench (running on your computer) at the same time, you can simultaneously develop for iPhones and iPads in real time. That means that any changes you make when editing will instantly affect all connected devices each time you save any of the files in your project folder. It is easy to develop mobile applications in JavaScript for Estimote nearables with this fast workflow.

The nearable functionality is implemented as a Cordova/PhoneGap plugin. This is an open-source plugin you can use to build a native app for publication on the App Store. The plugin also has support for traditional Estimote Beacons.

What you need to get started

Here is what you need to get up and running:

  • Estimote Stickers (order at the Estimote web site)
  • Evothings Studio (download for OS X, Windows and Linux)
  • Evothings Client app (install on iOS or Android phones/tables, get it from Apple App Store or Google Play)
  • WiFi network that allows client connections (network client isolation must be disabled)
  • Basic knowledge of Evothings Studio (you can also learn as you go through this tutorial)
  • To build native apps you need the Apache Cordova build tools

Useful background knowledge

If you are new to Evothings Studio, read the Introduction in the documentation to get a basic understanding of the development tools used. We also recommend the Evothings Starter Guide.

Apache Cordova is a build system for creating native apps developed in HTML/JavaScript. You can use Evothings Studio without Cordova, but if you want to create native apps for publishing it is required. Read more in the Cordova IoT Starter Guide.

Run the Estimote Nearables example app

The easiest way to get going is to explore the Estimote nearables example app that comes with the Evothings Studio download:

  • Launch Evothings Workbench on your computer
  • Launch Evothings Client on your mobile phone(s), press SCAN and connect to the Workbench running on your computer
  • Locate the example app “Estimote Nearables” in the Workbench project list
  • Click RUN

Experiment by making some changes to the code:

  • Click CODE – this opens a file browser with the source code of the app
  • Open a code file in a text editor and make some changes, for example, open index.html and change the h1 header tag text.
  • Save the file
  • The app now reloads on the connected device(s) and displays your updates

How to create your own Nearables app

An Evothings app is just a folder with HTML/JavaScript files (and other content such as CSS files and images). The minimal project is just a single HTML file.

A project needs to have a main HTML file, which is the file launched when the app starts. This file is typically named “index.html”. Just drag and drop your main HTML file into the Workbench project list and then click RUN.

Here is a summary of the steps to create an app for use with Evothings Studio:

  • Create a folder for the app
  • Create content files (HTML, JavaScript, CSS, etc)
  • Add any JavaScript libraries needed
  • Drag the main HTML file into the Workbench window
  • Click RUN

A quick way to create a custom app is to just copy an example app and modify it. You can use the Estimote Nearables example app as a starting point.

Note that the JavaScript include files for Cordova plugins are bundled with the Evothings Client app, so these should not be added again. Including the link to “cordova.js” will in turn include the JavaScript files for all plugins.

In order to build a native app, generate a Cordova project and copy or move your files to the “www” folder in the Cordova project. Read on below for more details and links to documentation pages for how to do this.

Explore the Nearables JavaScript library

The GitHub repository for the Estimote Cordova/PhoneGap plugin has documentation for the JavaScript Nearables API.

There is also JavaScript Nearables reference documentation available (generated using JSDoc).

The JavaScript library for Estimote Nearables is implemented as a Cordova plugin that is open source and available on GitHub. This plugin supports both Estimote Beacons and Nearables. Additionally, the “Beacon Finder” example app demonstrates both the Estimote Beacon API and the Nearable API.

Here are links to the plugin:

Beacon Finder example app

The Beacon Finder example app demonstrates more parts of the API compared to the Estimote Nearables example. This app demonstrates both how to program for Estimote Beacons and Nearables.

You can run the Beacon Finder app in Evothings Client, and you can also build a native app using Cordova.

Follow these steps to run Beacon Finder in Evothings Client:

  • Download the files on GitHub (or use git clone)
  • Open the folder examples/beacon-finder/www in a file browser
  • Drag file index.html and drop it in the project list in Evothings Workbench
  • Connect to the Workbench from Evothings Client
  • Click RUN on the project entry

To create a native Beacon Finder app using Cordova, follow the build instructions on GitHub. Read more about Cordova in the Cordova IoT Starter Guide.

Useful links