iBeacons make iPhones micro-location aware. Native apps can take advantage of this in a number of ways, but a couple of the most powerful ways are used to engage the user when they enter a certain area, and provide pre-emptive app nativation. This tutorial walks you through a native app called "Bob's Hot Dogs" that show both features. Check out a video of the process here as well.

In order to install the app, you must either compile and run the app on an iOS device, or download a compiled app from testflightapp.com. If you do not have access to either of these, please send an email to support@twocanoes.com and we'll get right on it.

Bob's Hot Dog app is an app produced by the made up company that sells awesome hot dogs in the Chicago area. It has 4 different views: Wecome, Menu, Pay, and Condiments. The user can manually open the app and navigate to any of these views by simply tapping on the glyph in the tab bar at the bottom of the screen.

In order to beacon enable this app, you will associate a beacon configuration with the Menu, Pay, and Condiments view. This is simple to do with Bleu Station beacons, as you can browse for the beacon and associate it with each view. First, configure 3 beacons with the same UUID and major numbers, but different minor numbers. After the beacons are configured, activate the configuration sheet in Bob's Hot Dog app and select each beacon.

Bob's Hot Dog Palace needs its own UUID. On OS X, it is simple of generate a UUID. Open Terminal, and run "uuidgen". The 128-bit value generated will be unique to Bob's Hot Dog Palace. Copy this and email it to yourself so you can easy copy and paste it into the Bleu Station Setup app.

On an iOS device device that has iOS 7 and supports BLE (iPhone 4s and better), install the Bleu Setup app from the app store. Configure 3 Bleu Station beacons with the same UUID from the prior step, and the same Major number. Give each of the three Bleu Stations a sequential number starting at one. You then can associate the Bleu Station with minor number 1 with the Menu view, the Bleu Station with minor number 2 with the Pay view, and the Bleu Station with minor number 3 with the Condiment view.

On the Welcome view of Bob's Hot Dog app, swipe with 1 finger upward. This will bring up the beacon configuation sheet. Plug in the Bleu Station that has minor number 1, and the tap Change under Region 1 and select that Bleu Station. Repeat this process for Region 2 and Region 3, selecting the Bleu Stations with minor numbers 2 and 3 respectively.

Give each view a appropriate message that will be displayed if the user is not in the app but is in proximity to the beacon. For example:

Region 1: Welcome Back! Slide to see menu.
Region 2: Slide to Pay
Region 3: Slide for info on toppings.

Now for the fun part. Set up the demo by talking a bit about how you love hot dogs and are a big fan of Bob's Hot Dog Palace. Open the app and show them around the different views. Then say that you forget to pull out your phone to look at the menu and to pay, but since Bob recently beacon-enabled the app, it makes the app much more interactive, fun, and magical.

Make sure all 3 Beacons are unplugged, and go to the lock screen on your demo iOS device.

Plug in Bleu Station 1, and note that the welcome message is shown. Slide the notification and note that it takes you right to the menu. Place your order and then lock the phone, and say you are putting it back in your pocket while you wait for your hot dog to be made.
Unplug Bleu Station 1, and plug in Bleu Station 2. Announce that you just walked up to the cash register, and then slide the checkout notiifcation and note that you are now in the Payment view of the app. Pay for your hotdogs, and then lock your phone.
Unplug Bleu Station 2, and plug in Bleu Station 3. Announce that you are going to the condiment bar, and plug in Bleu Station 3. Note the notification, and then slide open the notification and note that you are now in the condiment info section.

1. Beacons provide geographic contextual information, but do not provide customer or store specific content. For example, the menu information is not stored in the beacon, but in the app, and the beacon provides information to the app about where the user should be in the app.
2. Beacons provide a way to engage the user when entering a geographic area, and makes it easy to get right to the info from the lock screen.
3. Beacons continue to make apps the center of the user experience. The user can opt out of location information, or uninstall the app if they find the notifications too intrusive. Businesses need to find the right amount of infomation to provide to the user.
4. If the user is in the app, the views will automatically change without the push notification being shown. The notification is not needed since the user is already in the app.

If you have access to the Xcode project, you can replace the graphics in each of the views by editing the storyboard and dropping in your own graphics to customize it to the customer you are visiting. If you would like assistance on this, please send an email to support@twocanoes.com and we can quickly skin the app for your customer demo.