iOS

How To Use iBeacons in iOS 7 to Enhance Your Apps


Editor’s note: This week, we work with Chris Ching from Code With Chris to give you an introduction to iBeacons in iOS 7. Not only you’ll learn what iBeacon is, Chris will show you how to use iBeacons in your apps.

Surely you’ve heard of the nifty new feature in iOS 7 that lets your app gather location contextual information indoors where it can’t use GPS? If you haven’t, not to fear because we’re going to show you what it is and how you can use it in this article!

Beacon works over Bluetooth Low Energy (BLE) technology in your iPhone and as the name implies, it’s incredibly battery efficient. Going hand in hand with being low energy, it also has a short range of approximately 150 feet.

Real World Applications

The impact of having location sensitive information while indoors is already turning into real world applications. For example, Macy’s already has a pilot program underway where it has planted several beacons in different departments around the store. When a user passes by one of these departments and the companion app on their phone picks up the broadcast, it’ll open the app and display contextual information like promos, featured products and deals. Take a look at this short video to see iBeacons in action!

Our Demo

Similar to the Macy’s pilot program app, the sample app we’re building here today will demonstrate how to detect and handle a broadcast from a beacon. However, in order to have a beacon to handle, we have to first create another app to act as the beacon which will do nothing except broadcast a signal. By the end of the article, we’ll have two apps representing both sides of the communication.

Note: In order to try the demo out, you will need two actual iOS 7 devices supporting BLE. These are iPhone 4S and up, iPad mini and iPad 3 and up. You will also need to be enrolled in the Apple iOS Developer Program ($99 a year) in order to deploy the apps onto the devices.

Setup: The Broadcasting App

What exactly does the beacon broadcast? Well it’s a UUID that looks something like this:

The beacon will continually broadcast this UUID and the receiver app will detect beacons with this same UUID.

Let’s get started by creating a new Single View Application in Xcode.

ibeacons demo - create Xcode project

Click next and give the project a name and you can put “AppCoda” as the company and “com.appcoda” as the bundle identifier:

ibeacon - create project

Next let’s add the images for the button that will start the broadcasting.
Go to your image asset library (images.xcassets) and in the asset listing, right click and select “New Image Set”.

ibeacons - Add Image Asset

Then rename the image set to “BroadcastButton”. When you select this image set, you’ll see that there are spots for you to add a 2x image and a 1x image.

ibeacons - image asset

Save these two button images onto your file system and then drag “[email protected]” into the 2x spot and “BroadcastBtn.png” into the 1x spot.

broadcastBtnbroadcastBtn@2x

ibeacons adding image asset

In Main.storyboard, we’re going to add a UIButton element so drag one onto your view from the Objects pane in the lower right hand corner.

ibeacon - adding button

Select the button in the storyboard and go into the attributes inspector to get rid of the title and change the image to the image set that we added.

iBeacons - Changing title

Position your button in the middle of the view and your view should look like this

iBeacons - Broadcast Button

Now let’s add a UILabel element to the view so that we know when the app is broadcasting. Drag a UILabel element from the Objects pane onto your view.

Then go into the attributes and size inspector and change it to center alignment and width 200. Center it in your view and you should get something like this

iBeacons - Adding Label

Next, we’ll expose the UILabel to our ViewController object by hooking it up to an IBOutlet property. Let’s open up Assistant Editor (you can do so with the assistant editor button in the upper right corner of the Xcode interface).

Make sure that you’re looking at ViewController.h in the right pane and then hold “control” and click and drag a line from the UILabel to a space between the “@interface” and “@end” lines in the .h file.

When you release your mouse, you’ll see a pop up dialog. Give the property a name of “statusLabel”.

iBeacons - Adding statusLabel Property

Your ViewController.h file will look like this:

Now let’s connect the broadcast button to a IBAction method handler. Stay in Assistant Editor but change the right pane to ViewController.m. Hold “control” and click and drag a line from the UIButton to a space between the “@implementation” and “@end” lines in the .m file. In the pop up dialog, give the method the name “buttonClicked”

iBeacons - Adding  buttonClick method

Your ViewController.m file will have this method at the end now:

Adding Required Frameworks

Before we can actually broadcast anything over Bluetooth, we need to add the appropriate frameworks to our project.

Go to your project settings and scroll to the bottom. Click the “+” button under “Linked Frameworks and Libraries” to add CoreBluetooth.framework and CoreLocation.framework.

iBeacons - Adding Framework
iBeacons - Adding framework

Creating a UUID

Open up Launchpad on your Mac (or just go to the Applications folder) and open the Terminal app. In Launchpad, it may be in a folder called “Other” and the icon looks like this:

terminal-icon

Once opened, you’ll have a window where you can type in “uuidgen” and it will output a UUID for you to use! Copy the generated UUID because we’re going to be broadcasting that!

Beacon Broadcasting

In ViewController.h let’s import the frameworks which we added earlier.

Next, let’s add 3 more properties that we’ll be using to broadcast. So in total, you’ll have 4 properties in your ViewController.h file.

One more thing we have to do here is have the ViewController class conform to the “CBPeripheralManagerDelegate” protocol and we do that by adding this to the class declaration:

Ok, now we’re done in the .h file, let’s go into the .m file.

In the viewDidLoad method, add the following code (substitute the UUID for the one you generated).

In the code above, we’re creating a new NSUUID object by passing in the UUID that we want to broadcast.

Then we’re setting up a CLBeaconRegion and initializing it with that UUID, a major and minor number and an identifier.

The major and minor numbers are for you to identify your beacons if you have a whole bunch of them inside your location. In the Macy’s example above, each department may have a specific major number which identifies a group of beacons and inside that department, each beacon may have a specific minor number. So with both the major and minor, you’ll be able to identify exactly which beacon has been picked up.

Finally, the identifier is a unique id for that region.

In the buttonClicked method that we set up earlier, let’s add this code:

In the code above, we’re calling the method “peripheralDataWithMeasuredPower:” method of the beacon region which will give us the beacon data that we will later use to broadcast.

The second line starts the peripheral manager and will start to monitor updates to the status of Bluetooth.

Now we have to handle the status update method to detect when Bluetooth is on and off. So add this delegate method which is required because our ViewController class conforms to the “CBPeripheralManagerDelegate” protocol.

The method above gets triggered whenever there is a change in the Bluetooth peripheral status. So in the method, we check what the current status is. If it’s on, we’ll update our label and call the “startAdvertising” method and pass it our beacon data to broadcast. Conversely, if the status is off, then we’ll stop advertising.

Now when you deploy the app to your device, turn on bluetooth and tap the button, it’ll be broadcasting your UUID! Let’s create the receiver app to detect and handle the broadcast!

Note: You won’t be able to broadcast via the simulator because it can’t use bluetooth. You’ll need to be enrolled in the Apple Developer program in order to be able to put this app on an actual device which supports BLE (iPhone 4S and up, iPad mini and iPad 3 and up)

iBeacons Demo

Detecting Beacon Proximity

Let’s set up another Single View Application and this time, call it “BeaconReceiver”.

iBeacons - Receiver Project

Go into the Main.storyboard and let’s keep it simple and add a single UILabel to the view that we’ll use to update the status when a beacon is detected. Drag a UILabel element from the Objects pane onto your view. Then click the UILabel and go into the attributes inspector to change the alignment to Center Align and change the width to 200.

You’ll end up with this:

iBeacons - Adding Label in Receiver View

Adding the CoreLocation Framework

The core location framework has been updated to support beacon detection and we need to add it to our project. Go to your project properties and click the “+” icon under “Linked Libraries and Frameworks”. Add CoreLocation.framework

iBeacons - Adding Location Framework

Now just like we did before, let’s expose the UILabel as an IBOutlet property. Open up Assistant Editor and make sure ViewController.h is on the right hand pane. Then hold down “control” and click the UILabel and drag a line over to the right pane in between “@interface” and “@end”. When you let go, a pop up dialog will show up and you can name the property “statusLabel”.

iBeacons - Receiver

Finally, go into ViewController.h and import the framework at the top and modify the class declaration to conform to the CLLocationManagerDelegate protocol because the protocol contains a delegate method that will let us know of newly detected beacons.

Detecting Beacons

We need to add two properties. One to keep track of the beacon region we’re trying to detect and the other to hold the location manager which will give us updates on beacons found so add this code to ViewController.h:

Now go into ViewController.m and in the “viewDidLoad” method, we’re going to initialize our locationManager and set ourselves as the delegate for it. We’re also going to start monitoring for the desired beacon so have that UUID handy!

Ok a lot is going on in the code above so let’s take it line by line.

In Line 7 and 8, we’re initializing locationManager to a new instance of CLLocationManager and then setting ourselves as its delegate so we can be notified of updates.

In line 11, we’re setting up a NSUUID object with the same UUID as the one that’s being broadcasted by the app we created earlier.

In line 14, we’re setting up the beacon region by passing in the UUID we want to look for as well as the region identifier of the region that’s being broadcasted.

And finally in line 18, we’re passing the region into the location manager to monitor for us.

Next we’re going to need to implement some delegate methods that will be called when the region is detected.

First add these methods to your ViewController.m:

The code above implements two methods that get triggered when the device enters a region or leaves a region. When a region is entered, we tell locationManager to start looking for beacons in the region.

Now implement this method below

This method will get fired when one or more beacons are detected. In the code above you can see how we could get the UUID, major and minor data from the beacon. Furthermore, although we don’t implement it above, you can loop through the beacons array and determine which one is the closest by checking the proximity property of the beacon.

Running The Demo

If you’ve got two devices and you’ve paid to enrol in the Apple iOS Developer program, you can test the communication out. Launch the beacon app and tap the “Broadcast” button and wait for the “Broadcasting…” message to appear.

Launch the receiver app and carry it far away from the broadcasting beacon and then walk towards it to simulate entering the region.

iBeacons Receiver

Summary

If you don’t have multiple devices, you can still build some cool applications by buying BLE beacons and placing them around your house. Estimote makes such beacons and you get three for $99.

So I hope you can see how powerful and applicable iBeacons are and I hope this demo has sparked your imagination for some real world possibilities too! For your complete reference, you can download the Xcode project of the demo app from here.

I’d love to hear your thoughts in the comments below and if you learned something new, please use the social buttons to share this with your friends and colleagues!

This post is contributed by Chris Ching from Code With Chris. Chris has taught iOS programming to many beginners through his site and YouTube channel and has recently launched a video course: How To Create An App.

iOS
iOS Programming 101: Implementing Pull-to-Refresh and Handling Empty Table
iOS
Integrating Facebook Login in iOS App – The Manual Way
iOS
Creating Simple View Animations in Swift
Shares