Estimote Starter Guide (unsupported content)

Mikael KindborgBlogs, Tutorials

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

This guide refers to features no longer supported

We no longer maintain the Cordova plugin for Estimote Beacons. We recommend using the generic iBeacon plugin instead, which works nicely with Estimote Beacons. Please see the iBeacon Starter Guide for further details.


What you need to get started

In this guide, we have collected everything you need to get started with creating apps in JavaScript/HTML for Estimote Beacons. Regardless if you’re a seasoned developer or novice, you’ll learn more about beacons and making beacon-aware apps.

beacons-in-box
In Estimote Beacons Developer Kit, the beacons come in sets of three units

Here is what you need:

  • Estimote Beacons (order at the Estimote web site)
  • Evothings Studio (download for OS X, Windows or 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
  • Basic knowledge of Evothings Studio (you can 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.

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 it is needed. Read more in the Cordova IoT Starter Guide.

Run the Estimote Beacons example app

The easiest way to get going is to explore the Estimote Beacons 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 Beacons” in the Workbench project list
  • Click RUN

Then make some changes to the code:

  • Click CODE – this open 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

Watch the video in the Estimote getting started blog post to see the above steps in action.

How to create your own Estimote app

beacon-in-restaurant
Your beacon app can be used to add information nodes to public places, like shopping malls and restaurants.

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 one HTML file.

A project should have one main HTML file, which is the file launched when the app starts. This file is typically named “index.html”. Just drag and prop 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 Estimote Beacons or Beacon Finder 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. Including the link to “cordova.js” will in turn include the JavaScript files for all plugins.

Learn about the Estimote Beacon JavaScript library

The tutorial How to develop beacon apps in JavaScript with Evothings Studio and Estimote is a comprehensible guide to making JavaScript apps for Estimote Beacons, and is recommended reading.

The JavaScript library for Estimote Beacons< is implemented as a Cordova plugin that is open source and available on GitHub:

Beacon Finder example app

The Beacon Finder example app demonstrates more parts of the API compared to the Estimote Beacons example.

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
copier-with-beacon
Real-world example, an Estimote beacon attached to copier, could easily be assigned to provide more user information via a clever app!

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

  • Estimote company home page
  • Evothings Estimote quick-start guide
  • Evothings Estimote JavaScript tutorial
  • Estimote Cordova plugin
  • Cordova IoT Starter Guide (for building native apps)
  • Evothings download page
  • Evothings forum for Estimote beacons