Creating an application based on API data can be a quick way to go from zero to hero with content that is constantly changing and often inherently rich. It’s also a great way to learn a new platform by leverage existing skills – the process of making asynchronous calls, wrangling the data and then affecting a UI with the result is something most developers have had to do , in some language or platform.
Want to write an application but not sure what? API’s can help kickstart that creative process, provide real and accessible content – and because many APIs share common data properties ( like geolocation, or date ) , they lend themselves to mashups.
Sometimes you just need a kickstart, and the team here has been working hard to do just that with our latest effort we’ve called the APIMash. We’ve been creating a bunch of starter kits that utilize a variety of popular APIs such as Twitter, Meetup, Tumblr, Bing Maps to help developers get a head start building Windows 8 and Windows Phone applications. These starter kits cover both development approaches – so you can choose your weapon : HTML/JS or C#/XAML.
Tumblr API
My current contribution is a simple application built in JavaScript using the search endpoint from the Tumblr API. I called it Tumblr Lawls, for finding a quick laugh on Tumblr is pretty easy just by searching. As a basic microblogging platform, Tumblr is best known for its single serving blogs or tumblelogs , where the url and content reflect a single theme such as Programmer Ryan Gosling or Reasons My Son is Crying. Tumblr has its own established community, where members can favorite and easily share content by re-blogging it. With over 108 million blogs ( at time of writing this ) , and a recent 1.1 billion acquisition by Yahoo, this api felt like a good choice to build something simple. The sample application can be download here.
Getting Started with the Tumblr API
To get started with the Tumblr API, developers are required to register an application to get an OAuth key, which can be done here. The API is well documented , has an intuitive URI structure, and has both a discussion group and a developers blog as additional resources. The terms of use for application developers also outlines information about things like data privacy, restrictions and branding.
Once you have a key, you can test out what the response data by hitting this url ( but replacing your key for “YOUR_KEY”).
http://api.tumblr.com/v2/tagged?tag=gif&api_key=YOUR_KEY. Most browsers won’t render the response nicely unless you have an extension installed – but you can use a variety of API tools listed in a previous blog post that will help you test and debug your calls.
Getting Started with the Tumblr Starter Kit
To run the starter kit, Visual Studio along with Windows 8 is required. If you are on Mac, you can run Windows8 via your favorite virtual machine or by setting up BootCamp.
Download the sample Tumblr API application.
What the Tumblr Starter Kit Does
The application itself demonstrates a few pieces of functionality:
- Invokes the Tumblr API, specifically the search end point using WinJS ( easily achieved other ways such as a simple XHR call or jQuery)
- Demonstrates how use WinJS to download an image to the pictures directory
- Demonstrates how to cache a request as a file to the local application directory using WinJS
The interface animation is accomplished using jQuery. One thing to note, if you plan on using jQuery, you need to use the 2.0 version for it to play nicely.
Time to Make it Your Own
Once the zip has been downloaded and extracted, run the .sln file ( solution file). A solution stores information relating to a project.
All API logic is held in the apimashtumblr.js file. This file uses WinJS to help define name spaces so that the global space is not polluted. The TumblrApi namespace is declared, and that is how it will be referenced in the future when instantiating and instance of it.
When this object is constructed, the API key can be passed in as a parameter. Defaults are set for this object including the tags to search for , the number of items for the request and the start date to search against.
This object handles two things:
- Retrieving search results from the Tumblr API based on the parameters set for the tags, limit and date.
- Cacheing the data after a successful response and returning cached date in the event of an API error( downtime, rate limiting etc ) .
As this is a simple example, there is only one method to get data – and that is the getTags method on the TumblrAPI class found in the apimashtumblr.js.
Customize The Parameters
This example can be easily changed/customized to reflect different search terms. This can be done in one of two places. The first is in the apitumblr.js – where the default tags in the object’s constructor can be modified. It can also be changed by passing them into the getTags method. Inspecting the apimashtumblr.js file will show that the getTags method takes a few parameters – and if no parameters are found, it uses the defaults.
Off to the App Store
Let this starter kit be a jump start. And when you have an application that you want to build or just about ready to submit to the store, remember to reserve your application name and make yourself some spiffy live Tiles. For bonus points, getting it in before June 30th, 2013, means that you will be eligible to for the Keep the Cash Rewards.
Perhaps you might build a mashup between image APIs such as Tumblr and Flickr to give everyone what they want and what they truly need – a kitten per day application. Or maybe you want to provide a more abstract and accidental way to explore Tumblr where it randomly serves up a new piece of content based on the previous search result tags. Whatever it may be, let there be much more animated gif goodness out there for people to enjoy.