How to create your own BLE Mobile App in 10 minutes

Have you ever wanted to get into mobile apps development but didn't have the time to learn other programming languages?

In this blog I will show you how to create your own mobile app that connects to your Bluetooth Low Energy device.

As part of a Hackathon project, I was interested in creating my own mobile app to connect to a Zigbee-based Light that doubles as a BLE Device. In other words, it is a Light that supports two protocols; Zigbee and BLE over the same radio.

I wanted to support Android and iOS and I only had a background in Embedded Systems and a couple of days to get it done. So, after a quick Google search I was lucky to find a solution that only takes 10 minutes to develop (that's including the time spent installing the tools).

The solution is called Evothings Studio and it offers a way to develop your mobile app using familiar web technologies such as HTML, CSS and JavaScript.

One of the most amazing things is that the mobile app runs live on mobile devices while you develop and you can instantly see code changes on your apps.

The process of developing the mobile app can be summarized as follows:

Get a Bluetooth Device running.

Install Evothings Tools in your PC and your phone.

Select an example from the Evothings list of examples.

Modify the example by using the UUIDs from your BLE Device.

Connect your phone to your BLE Device to control it.

Step-by-step guide to reproduce the project

Getting a Bluetooth Device running

If you already have a BLE Device running, then the only thing you need to do in this step is make note of the following Unique Identifiers (UUID):

BLE Unique Service Indentifier: this is the UUID of the BLE Device Service you want to control (e.g. bae55b96-7d19-458d-970c-50613d801bc9).

BLE Characteristic Unique Identifier: this is the UUID of the BLE Device Characteristic you want to control (e.g. 76e137ac-b15f-49d7-9c4c-e278e6492ad9).

If you don't have your BLE Device ready to go, then you can use the same one that I used from the Dynamic Multiprotocol (DMP) Light/Switch Demo. Click here and follow steps 1-5 to get it running.

Once you get it running, open the Light Project in Simplicity Studio, open the file DynamicMultiprotocolDemoLightSoc.isc, select the Bluetooth GATT tab and make note of the BLE Unique Service Identifier and the BLE Characteristic Unique Identifier as illustrated in the image below:

Figure 1
Finding your BLE Device's UUIDs in Simplicity Studio

Installing the Evothings Tools

In this step you need to install both, the Evothings Studio application in your PC and the Evothings Mobile App in your phone. Click here to install the Evothings tools and verify that everything is operational by running their Hello World example.

Select a Mobile App BLE example as a starting point

Once you verified that you can run their Hello World example, locate the example Arduino101 LED On/Off BLE and click the button Copy as shown in Figure 2:

Figure 2
Selecting one of the BLE Examples as a starting point

A window will be displayed for you to edit the project's name. You can call it dmp-light as shown in the following image:

Figure 3
Customizing the example with your own project name

Modifying the Mobile App BLE example with your own UUIDs

The next step is to edit the code. Select the tab MyApps in Evothings Studio to display your newly created example and click the button Edit and your text editor will open the folder where your example is located.

First edit the file evothings.json and replace the property uuid with your own BLE Device Service UUID as shown in Figure 4:

Figure 4
Customizing the example with your own BLE device's service UUID

Similarly, open the file index.html and replace the uuids in the functions to turn the LED On and Off, with your own BLE Device Characteristic UUID as shown in the image below:

Finally, find out what's the advertised name of your BLE Device by scanning all the BLE devices within range from your phone as shown in Figure 6:

Figure 6
Scanning BLE devices within range from your phone

Open the file index.html, locate the function app.connect and replace the advertised name of the BLE device with your own name as illustrated in Figure 7:

Figure 7
Customizing the example with your own BLE device name

Connecting your new mobile app to your BLE device

To connect to your BLE device you need to follow the same steps you made when trying their Hello World example; Start Evothings Workbench and under the Connect tab paste your Cloud Token and get a connect key using the GET KEY button. Launch Evothings Viewer on your phone, enter the connect key to hook up with your Workbench. On your computer, click the RUN button on your new DMP Light example in the Workbench.

Now you can turn the Light On/Off from your phone as shown in the image below:

Figure 8
Your new mobile app

Conclusion

The Evothings Studio platform is a fast and easy way to develop mobile applications for Android and iOS while supporting one single code base through the use of the three most basic web technologies (HTML, JavaScript and CSS).