Bluetooth beacons are an incredibly valuable way to set up location based triggers for apps. Estimote have a range of Bluetooth beacons that are quite easy to set up and experiment with.
One of the tough parts of testing out Bluetooth beacons is that device simulators aren't able to access Bluetooth devices, so you need to use physical smartphones to test. This is where Evothings comes in really handy! Evothings is a neat simple way to prototype mobile web apps using HTML5 and JavaScript. Within Evothings, you can make changes to your code and have them automatically appear on your smartphone ready with access to your Bluetooth beacons.
In this article, we'll look at combining the power of Evothings with Estimote Beacons to prototype a beacon enabled mobile app. In particular, we'll be building an app that turns a LIFX light on and off via IFTTT if you get close to a beacon. Don't have a LIFX light? Not a problem! You could replace this functionality with any other HTTP requests you'd like to toggle when nearby.
[author_more]
What You'll Need
- An Estimote Beacon
- Evothings Studio - This will need to be installed and running on your computer. It is available for Windows, Mac OSX and Linux!
- Evothings Viewer app - This will need to be installed on the iPhone or Android device you will be testing on.
- IFTTT and a knowledge of how to use their Maker channel - I've got a guide on that here!
- Some basic HTML and JavaScript knowledge.
The Code
All code for this is available on GitHub for you to use as you wish!
Setting Up Your Estimote Beacons
Go to Estimote Cloud and log into your account (or sign up for one if you don't have any beacons yet!).
From there, your "Beacons" section should already be loaded. If you don't have any beacons assigned to your account yet, you'll need to either buy some via the "Buy Beacons" button, transfer them from another account via the "Transfer Beacons" button or activate your dev kit if it came with an activation code:
If you do have beacons, they'll appear in a list. Choose the one you'd like to use in this demo and click its "Settings" button:
In here, you will want to take note of the beacon's MAC address as we will be using it later:
That should be all you need in terms of Estimote beacon set up - it is quite easy at a prototyping level.
Getting Evothings Running
To set up your Evothings workflow ready for our coding, head to the Evothings download page and download the Evothings Studio and Evothings Viewer mobile app. This gives us a really easy way to build our app and test the changes on a smartphone instantly.
When you first open Evothings Studio, you'll be prompted to connect by getting a connect key. Click "Get Key" to generate the key you'll use to pair up your workbench with your mobile app:
Then open up Evothings on your smartphone, you'll be greeted with a screen that asks for that connect key. Type it in and click "Connect":
When you are connected and ready to go, you will see this screen:
You are now ready to get into coding the app.
Our HTML
The HTML for this app is mostly from Evothings templates they've publically provided, just with the title and headings changed, along with the addition of a <div id="in-room"></div> for some basic status messages to appear on screen.
[code language="html"]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<title>Magical room light automation</title>
<style>
@import 'ui/css/evothings-app.css';
@import 'ui/css/patcat.css';
</style>
<script>
// Redirect console.log to Evothings Workbench.
if (window.hyper && window.hyper.log) { console.log = hyper.log }
</script>
<script src="cordova.js"></script>
<script src="libs/jquery/jquery.js"></script>
<script src="libs/evothings/evothings.js"></script>
<script src="libs/evothings/ui/ui.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<button class="back" onclick="history.back()">
<img src="ui/images/arrow-left.svg" />
</button>
<img class="logotype" src="ui/images/logo.svg" alt="Evothings" />
</header>
<h1>Magical room light automation</h1>
<div id="in-room"></div>
</body>
</html>
[/code]
I've also put my custom CSS within ui/css/patcat.css:
[code language="css"]
html,
body,
section,
main footer {
background: #390066;
color: #fff;
text-align: center;
}
header {
background: #EACFF3;
}
.in-room,
.in-room body,
.in-room section,
.in-room main footer {
background: #F3EC97;
color: #333;
}
.in-room h1 {
color: #333;
}
.in-room header {
background: #F3EDE6;
}
h1 {
padding: 0 0 1em;
}
[/code]
Continue reading %How to Prototype Beacon Apps with Estimote and Evothings%
by Patrick Catanzariti via SitePoint
No comments:
Post a Comment