Developing for the Microsoft Band Android Edition

In my last post we looked at getting set up to develop a Windows Phone app using the Microsoft Band SDK as well as Visual Studio Community Edition on a Windows 10 machine. We also looked at using the Web Tiles, which utilizes a web interface to build a communication tile that you install with your Microsoft Health App. In this post, we will look at getting going with Android development.

In order to start development for the Microsoft Band let’s go over some ground rules. You are not building an app for the “Band”. You are building an app for a mobile device (aka Phone) which will take advantage of all of the sensors within the Band. Think of the Band as sending and receiving information. It sends data from it’s sensors and receives data from the app that you create.

There are 2 major aspects of developing for the Band. The “app” and the “Band UI”. The app is something that you have full control over. The UI, the code, the OS (yes, we support Android, iOS and Windows development). The Band UI is more structured and starts with the Tile which is the first interaction with your app. Once the user engages with the Tile, you then can create Pages with information and actions.

Development Setup

To get started with the Microsoft Band development, we will first need to get our machine up and running. Whether you are on Windows or Mac, the steps are pretty much the same.

  1. Download and install Java JDK
  2. Download and install Visual Studio Emulator for Android (Windows) or Xamarin Android Player (Mac)…Visual Studio Emulator for the Mac coming soon.
  3. Download and install Android Studio
  4. Download the Android SDK for Microsoft Band

Once everything is downloaded and installed, you can start by creating an empty Android project.

After the project is created and before you start coding, you will need to make sure we have the Microsoft Band SDK (jar file) added to our project. In Android Studio we can drag our jar file into our lib directory. Once we do that, make sure you right click on the jar file and choose “Add as Library” so it is added to your Gradle and project.

Now you are ready to start development!

Development Process

The process of creating an app and connecting to the band is in 3 steps.

  1. The first step in our app is to make a connection to a Band. To make a connection, the Band and the our Android device must be paired. Item to note – this will not work within the emulator, you will need a device. You can use the Band Client Manager to get a list of paired Bands, and establish a connection to one or more paired Bands.

     
  2. Once we get a list of paired bands we can then start the process of subscribing to its sensors. The subscriptions are managed by the Band Sensor Manager on the Band Client. For each hardware sensor, the Sensor Manager allows the application developer to create a subscription. A subscription is essentially a platform-specific callback mechanism. It will deliver data at intervals specific to the sensor. Some sensors have dynamic intervals, such as the Accelerometer (on Android and Windows), that allow developers to specify at what rate they want data to be delivered. Other sensors deliver data only as their values change.

    Item to note – sensor subscription can be taxing on battery. Use as needed.
  3. We also then can create a Event Listener to perform our operations.

    Item to note – The Heart Rate sensor requires user consent to access. You can prompt and check if the user provided the appropriate permissions before your calls.

     
  4. That is basically it. There are some clean up methods such as deregistering the event listeners when done, but more or less those couple of lines will get you up and running.

Take a look at the following Channel 9 Video for more detail on building the full app or the GitHub repo.

band-channel9

 

Developing for the Microsoft Band

I am embarking on a series on Developing for the Microsoft Band. If you are not familiar with the Band it is a product that is in its second iteration. With 11 sensors ranging from accelerometer and gyroscope to heart rate and skin sensor, the Band is a great device.

The first part of the series we will be looking at Web Tiles. Microsoft Band Web Tiles make it extremely simple to deliver relevant information to the Band from virtually any data source accessible through the web. Developers only have to write web tile code once to support multiple mobile platforms (iOS, Android and Windows) since the Microsoft Health app takes responsibility for doing the rest – installing the web tile to the Band, accessing web resources for content, extracting and formatting the content, and delivering that content to the associated web tile on the Band.

A web tile, fully described by a “web tile package”, contains a variety of information including tile metadata, information needed to fetch data from the web and format it for the tile, and other resources associated with creation and updates of the tile.

Then we will dive into the SDK.

We are going to look into the Microsoft Band SDK which will allow third-party application developers to harness the power of Microsoft Band. The SDK gives developers access to the sensors available on the Band, as well as the ability to create Tiles on the Band and to send notifications to these Tiles from their applications. Through the SDK, you, as an application developer, will be able to enhance and extend the experience of your application to your customers’ wrists. This opens up a whole new dimension of interaction and enables new, richer scenarios for your applications that make use of the capabilities of the Band.

Applications that work with Microsoft Band make use of the Microsoft Band SDK to communicate with the Band. The application logic runs on the host OS (iPhone, Android, Windows), and remotely controls the UI of the Band as well as receives contextual information and sensor data from the Band.

The features offered by the Microsoft Band SDK are as follows: 

  • Multi-platform support 
  • Sensor data subscriptions 
  • Tile creation and management 
  • Tile notifications 
  • Custom layouts 
  • Haptic notifications 
  • Band theme personalization

The SDK is also supported on a wide range of platforms. They include Windows Phone 8.1 and later, Windows 8.1 and later (Store Apps) iOS 7 and later, Android 4.2 (API 17) and later.

Channel 9 Video

band-vid

More Info:

Part 2: using Android

Building Cross Platform Apps with Visual Studio – Part 3

In part one we did the setup. Part two we did the coding. Now we will continue some of the coding but also start looking at some configuration options.

Step 1: More Services

Lets finish up the rest of the services. We are basically mimicking what we just did for the Occasions API call for the Results and Details. If we look at the API we find the endpoint to get all drinks by occasion is /drinks/for/occasion_id. We have a route that mimics that /drinks/:filter/:id We can use this route, controller and service over and over again by changing the filter based on what we want returned. Read more “Building Cross Platform Apps with Visual Studio – Part 3”

Building Cross Platform Apps with Visual Studio – Part 2

In part one we setup our development environment by downloading Visual Studio 2013 Community Edition. Installing Visual Studio Tools for Apache Cordova. And stubbing out our app. If you did not do any of those steps, no worries, head on over to part one and then make your way back here.

Lets reset a bit on our project. We are starting to look at building an app that will be able to run on iOS, Android and Windows. There are a couple of ways to doing this, natively or cross platform approach. If we were to build a native app for 3 platforms we would have to code in 3 different languages and use 3 different IDE’s. (Not counting a tool like Xamarin). We are also looking at the multiple stack developer who has a lot of “web” knowledge. They know how to build web apps and their skills can translate well to this cross platform development. We will be using HTML and JavaScript to build this app. Most importantly, we will be using Visual Studio to create our cross platform app.

The app can be anything, but in this example it is a drink recipe app. Categories -> Results -> Details. That is the flow of our app. We will be using a theme from Bootstrap to make it look pretty and responsive for multiple screen sizes. AngularJS will be our JavaScript MVC Framework for the back-end. We left off with a basic “barebones” app structure that we will build upon.

Lets Begin

Read more “Building Cross Platform Apps with Visual Studio – Part 2”

Building Cross Platform Apps with Visual Studio

If you don’t know it already, mobile apps are all the rage. From social networking to pictures and videos to gaming, the app ecosystem is where you want to be. But what if you are a “one-stack” developer? What if you only know HTML/JavaScript? What if your expertise lies in Web Development? Well, they all have their challenges but over the next few articles I will try to demystify the mobile development process especially when it comes to cross platform development. The “one-stack” developer has is a bit easier. They know what the hardware will be. They know the screen size and capabilities of the device. They can reuse code over and over again and create some high quality apps. The “multiple-stack” developer has an advantage as well. They know how to code for multiple platforms. They know what may or may not be possible for each of the platforms. Lets look at the “stacks” and define them a bit.

Read more “Building Cross Platform Apps with Visual Studio”

jQuery Accordion with 8 Lines of Code

Ok.  Maybe more than 8 lines of code but very little.  I have been working with another agency (that will rename nameless) on a mobile web site for a client of ours.  The agency provided the HTML/CSS/Images and Script for our technology team to implement.  We hook up all the back end and call it a day.

The section that came into question was an ‘accordion’ style UI for a set of FAQ’s and other content.  When I first loaded up their pages, everything worked fine.  Upon further inspection of their code I noticed a lot of JavaScript libraries that were not needed.  They included jQuery AND Prototype along with some effects and accordion scripts.  (Prototype alone is almost 100kb in file size and the other scripts were 42kb.  That still does not include the 70kb for jQuery)  I thought to myself, this is a mobile site…why have extra scripts if not needed.  To make matters even more funny, we are supporting Mobile Safari (iOS), Mobile Chrome (Android) and the BlackBerry Browser (RIM), it does not work in BlackBerry at all.  Forget enabling or disabling JavaScript it just does not work.  Even the elements are hidden.

So it got me thinking about the old saying, “if you want something done right you have to do it yourself”.  So I did.

I removed all the libraries except for jQuery and made all of the elements visible by default.  Basically if a user does not have JavaScript enabled then they can see everything.

Here is my HTML

Styles and other HTML can be wrapped around it. You can change the paragraph tags to div’s if needed but that is the structure you need more or less.

Now for the JavaScript.

Make sure you embed jQuery (I did from Google)

Then hide all open content containers:

If the element does not have the ‘current’ class then we need to first remove the ‘old’ ‘current’, close the ‘old’ ‘current’ and open and set the new ‘current’.

Done.

Here is the final:

Depending on how you format the code and what you count as a ‘line’ it can be about 8 lines 🙂

Updated GitHub Repository

Demo here – View in Mobile Browser.  Desktop browser will work as well.  Works on iOS, Android, BlackBerry.