My First Band Web Tile

Home / Band / My First Band Web Tile

I’ve been wearing my Microsoft Band 2 since it first became available nearly two months ago and I was rockin’ the first version of the device before that. Suffice it to say, I really like Microsoft’s version of a health & fitness tracker (though it’s much more than that!).

Being a developer at heart I decided I’ve owned this device far too long to not have created any apps for it yet. So I decided to take a look at the Microsoft Band developer site. When you first visit the site, you will see the following three options:

image

You can make use of the full Band SDK to develop apps for Windows, Android and iOS. You’ll want to use the Band SDK to take advantage of the full feature set of Microsoft’s Band 2.

If you are wanting to build an app that revolves around data available from the web, then you can quickly build a Web Tile app and install it on your Band (more on this in a moment).

The Cloud API Preview is a set of APIs that allow you to enhance your Band apps (built via the Band SDK) by including data from Microsoft Health.

For the purpose of this article I am going to walk through the steps of creating a Web Tile app for Microsoft’s Band 2.

Step 1: Create the App

To create a Web Tile, click on the “Get Started” button below the Web Tile link on the main page of the Microsoft Band developer site (see image above). From here, you will go through a series of (5) steps to create your app.

Choose a Layout

There are three major app types you can select from:

  • Single page tile – creates a tile that can update a single page with new data
  • Multiple page tile – creates a tile that can update multiple pages with new data
  • Feed tile – creates a tile that repeatedly pulls in data such as a news feed

I will be selecting Feed tile since I am building a Web Tile for this blog.

Next, you’ll need to choose the layout style. Depending on your needs and the type of data source you are using, your selection might vary. In my case, I want to display the article title and first few lines of content so I selected the Scrolling text wrap option.

image

Specify Your RSS Feed URL

Since I am building a Feed tile I must provide the URL that will be used to provide the data. In my case, it is simply my blog site URL with “/feed” on the end of it.

image

Assign Your Data

Now that we have a feed we need to select the fields to display within the tile. You do this by dragging-and-dropping the fields on the right to the placeholders on the left. You will be able to see a preview of what the message would look like on your Band.

In my case, I have selected title and description as the two fields to display.

image

Set Up Notifications

One of the great features of Microsoft’s Band is its ability to display notifications as new items are made available. This is easy to setup for Web Tiles using the web-based editor. For my app, I simply want a notification to appear if any new items are found. To do this:

  1. Click on the ‘+’ icon to add a new notification.
  2. Provide the notification text. You can do this be either typing the notification text directly into the placeholder field (as I have done in the example below*) or by dragging-and-dropping a field (much like you did above) into the placeholder.
  3. Setup the notification condition. This is an expression that determines when a notification should be shown. In my case, I want a notification to be shown any time a new item is found so I provided a simple expression that always returns “true”.

    Note: At least one side of the condition must be a variable. That is why I have the “title” field on the left and a bogus operand on the right. Otherwise, I would have simply created a condition such as “1 = 1”.

*You’ll notice in my screen shot below that I spelled “A Developer’s Life” as “A Developer's Life”. This is because I noticed that when I use an apostrophe (‘) the text following the punctuation mark was being truncated when displayed on the Band. I have a feeling this is a flaw in the web editor since the title shows up appropriately in the manifest file. Either way, it’s something to keep in mind as you build your app.

image

Give Your Tile an Identity

The final step to creating your tile is to provide some basic information about your app and to select a theme color. In my case, I have opted to default to the Band theme colors. I also provided a couple of basic icons for my app (essentially, larger versions of my blog site’s “favicon”).

image

Step 2: Download and Test Your Tile

Testing your Web Tile app is fairly straightforward:

  1. Download your tile to your PC by clicking on the Download my tile button.
  2. Send the downloaded file (e.g. mytile.webtile) to yourself as an attachment in an e-mail (using an account that you can access on your phone).
  3. Open the attachment on your phone. This will open the Microsoft Health app where you can opt to install the tile.
  4. Once the tile is installed, you will see that your custom tile has been added to your Band – likely toward the end of the list as you scroll through your tiles.
  5. Tap your new tile to verify that it is working. In my case, I am seeing the last eight posts on my blog site.

Step 3: Submit Your Tile

Once you’ve worked the kinks out of your new Web Tile you might like to share it with the rest of the world (why not? Smile). You can share your Web Tile by clicking on the Submit my tile button. From here you’ll need to:

  1. Upload the Web Tile package (e.g. mytile.webtile).
  2. Select an appropriate category (I selected News and weather).
  3. Upload an image for the gallery (I used a blue version of my tile icon).
  4. Provide a contact e-mail if desired.
  5. Click Submit.

image

Once submitted, you will see a “Thank you” screen letting you know that your tile will be uploaded to the gallery once it has been approved.

Summary & Other Information

Well, there you have it! As you can see, it’s fairly straightforward and simple to create a Web Tile for your band utilizing an RSS feed. You can experiment with the other display styles and features of the Web Tile editor to see what else is possible.

Also, if you’re curious about what is being submitted as part of your Web Tile package, it’s simple to find out. The Web Tile package is simply a ZIP file so, if you change the extension to “.zip”, you can open it like any other ZIP file and inspect the contents.

In doing this, you will notice there is an icons folder containing images such as badgeIcon.png and tileIcon.png.

You will also see a manifest.json file containing various metadata about your Web Tile. For example, mine looks something like this:

image

As you can see in the manifest file above, the refresh interval (refreshIntervalMinutes) is set to 30 minutes. Good to know for testing purposes.

Although this is a simple Web Tile example I hope it shows you that you can create some pretty useful tiles for your Band without having to crack open Visual Studio (or your favorite editor). While I enjoy coding as much as the next person, any time I can create a useful app without having to actually code it well, that’s enjoyable also!

References

ContactUs.com