Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Bending APIs to Your Will Using Windows Phone

Kamran Ayub
September 25, 2013

Bending APIs to Your Will Using Windows Phone

A talk I gave at the Minnesota Developers Conference 2013 on building connected apps on the Windows Phone platform

Kamran Ayub

September 25, 2013

More Decks by Kamran Ayub

Other Decks in Programming


  1. Bending APIs to Your Will Using Windows Phone 8 Kamran

    Ayub (MDC 2013) [email protected] @kamranayub kamranicus.com Follow along: http://mdc.ilmservice.com/download
  2. About Me Connected Apps App Walkthrough MVVM Async/Await Offline Caching

    Event Aggregator Tips & Tricks Closing Comments Questions Let’s talk about bending APIs http://www.fanpop.com/clubs/avatar-the-last-airbender/images/461375/title/aang-air-bending-wallpaper
  3. Play (too many) video games Watch (too many) TV shows

    Hang out with (just enough) friends Am getting married (thanks Cassie!) Other than developing software, I…
  4. Started programming in 2001 Classic ASP , HTML & CSS

    (FrontPage) Moved onto ASP .NET 1.1 VB.NET, Web Forms, HTML & CSS (Server <generate>d) Spent some time freelancing PHP , MySQL, ASP .NET, C#, HTML & CSS (“hand-crafted”) Got a job in college PHP , MySQL, HTML & CSS (Actually OK) Got hired at General Mills (3 years ago) ASP .NET 4.0/4.5, ASP .NET MVC, C#, HTML & CSS Meanwhile, after hours… JavaScript frameworks, ASP .NET Web API, Windows Phone apps, Windows 8 apps, open source Where I’m Coming From
  5. Underscore-KO Mashup library that adds Underscore.js functions to Knockout arrays

    Giantbomb-CSharp .NET API SDK for GiantBomb site .JSON Tiny dynamic JSON API to parse and create JSON Other random gists and scripts Other contributions github.com/kamranayub
  6. I didn’t ask Is there already an app for it?

    Doesn’t matter, it probably sucks or it’s missing something.
  7. I didn’t ask Is there a RESTful API for it?

    As long as there’s a programmatic way to access data on the site, REST or not, you can create a front-end for it. Also, it’s probably not really RESTful.
  8. I didn’t ask Can I make money off it? Let

    the app speak for itself before trying to think of ways to make money off it. And whatever you do, provide a way for people to try before they buy or offer in-app upgrades.
  9. I didn’t ask Is there a website someone else uses

    a lot? If you don’t use it regularly, chances are good you’ll miss what’s really important for the mobile experience.
  10. Then, for each site, think about whether or not there’s

    a public API of some sort If you’re at home, research!
  11. Websites I use in a typical week Website Has a

    way to access data Website Has a way to access data StackOverflow Yes Mint No Facebook Yes Medium Sort of (Microformats) Feedly Yes GiantBomb Yes Amazon Yes Reddit Yes Gmail Yes GameTrailers Limited (RSS feeds) Forecast.io Yes Wikipedia Yes Tweetdeck (Twitter) Yes Codeplex Yes Github Yes Splitwise Yes MSDN No Springpad Yes Youtube Yes Foursquare Yes USAA No Steam Store Yes
  12. Even in my (limited) list, there are already potential app

    ideas! Don’t let the lack of any APIs get you down either, you can build your own as well.
  13. Caliburn.Micro (or equivalent MVVM) MVVM framework to speed up development

    Microsoft.Bcl.Async Async/Await support, even for WP7.1+ Microsoft.Net.Http Easy-to-use lightweight async-compatible HttpClient Windows Phone Toolkit Provides tons of controls Modern UI Icons modernuiicons.com Essential Packages and Tools
  14. GovTalk is a soon-to-be-released Windows Phone application that makes it

    easy to contact and learn about your congressional representatives. It is built on top of the public Sunlight Labs API. GovTalk Walkthrough
  15. Model View View Model Model-View-ViewModel • State • Domain •

    Renders the interface to the user • Accepts input from the user • Logic for controlling the view • Transforms Model to View- friendly model (View Model) Services • Dependencies • Business logic • Encapsulate device features
  16. MVVM Framework Use Caliburn to simplify your code when building

    apps Install Caliburn.Micro Nuget package This installs the required framework Install Caliburn.Micro.Start Nuget package This gets you started with using Caliburn Bonus: Install Caliburn.Micro.BindableAppBar to make it easier to create dynamic context-sensitive app bars Guess who made this?
  17. Connecting to Sunlight Labs Wrap your connection-logic into an API

    client class Create a repository to manage working with the API client and any local storage solutions Register the two services with Caliburn Inject and consume the repository in your view models
  18. App Request Flow Connect Send Request Receive Response Activate View

    Model Request Data Cached or Live Data? Client-Side API/Server-Side
  19. API Client: Wrap the connection logic It’s easy to use

    the HttpClient to connect to an API Create a generic request helper to assist in sending requests
  20. API Client: Generic request method First, check if we have

    a network available Then, set up the request Next, we send the request.
  21. API Client: Generic request method (cont’d) If there is no

    response content, we’ll throw. Then, we deserialize the response content (using JSON.NET in this case) and returning the expected type. Gotcha: “Root Element” Example response from server { "legislator": { "first_name": "Kamran", "last_name": "Ayub" } }
  22. Register with container Use the bootstrapper code and add your

    own services Your repository and client can be PerRequest but I’ve used Singleton for my app. Since the main page is a Panorama, I’ve also made that a Singleton as well. SettingsModel is used to store cacheable settings, so that’s a Singleton.
  23. Dependency Injection Finally, inject your dependencies into your view model’s

    ctor In addition, you can inject other view models as well, either as an instance public MyRepsViewModel(SettingsModel settings) or a factory that generates new instances: public MyRepsViewModel(Func<SettingsModel> settingsFactory)
  24. Feeding the Data Into the View Load the data when

    the view is activated or initialized Bind the data to an observable Display the data in the UI in a sexy fashion Cache the data
  25. Caliburn View Model Request Lifecycle Request View Model • MyRepsViewModel

    • Inject dependencies Find Corresponding View • MyRepsView.xaml View Model Lifecycle • OnInitialize • OnActivate • OnDeactivate
  26. Representatives is a flat collection that I use for caching

    and storage. Expose public observable properties Due to differences in the API for WP7/WP8, you might need to use compile constants. LongListSelector differs for each platform.
  27. Caliburn exposes any public properties on the view model for

    binding Bind to those properties in the XAML Caliburn let’s you use mock data in Visual Studio design view, very useful for UI design
  28. Then, you need a parameterless constructor on your view model.

    Set up any fake data you want in the ctor. Use Caliburn’s InDesignMode to determine whether or not to set up your mocked data. You will see your fake data populated in the design-time view in Visual Studio, making it way easier to design! Design-Time Binding
  29. How do you communicate between two view models? Pub/Sub mechanism

    Caliburn provides the IEventAggregator service View Model 1 View Model 2 IEventAggregator Publish Subscribe
  30. To receive events Subscribe when view model is activated Unsubscribe

    when view model is deactivated Implement the IHandle<T> interface
  31. Event Aggregator: Avoid Anti-Patterns Use consistent event interfaces (naming, structure,

    etc.) Avoid using event messaging for internal events (single VM) Be cognizant of other events triggering your events and plan accordingly Don’t modify the message contents (keep it immutable) Order of subscribers shouldn’t matter
  32. Use a framework like Caliburn to provide structure Connect to

    your APIs intelligently and cache data Degrade gracefully (connection, platform, device features, etc.) Be respectful of your users time and constraints Creating compelling connected apps
  33. What makes a great connected app? Offline Support Globalization &

    Localization Error Reporting & Logging Full API Support Extra App-Only Features Live Tiles Push Notifications Hardware Integration Features that make any app great Features that make a connected app great Queuing Write Methods Background Tasks Local Device Caching
  34. Network Service Listens to network changes Uses event aggregation to

    notify view models of network changes Hooked into Caliburn’s DI system
  35. Network Service (Cont’d) View models can listen for the event

    and handle appropriately Registered as a singleton with Caliburn container
  36. MainViewModel.cs Supporting Deep Linking (“The Right Way”) Pinned Tile •

    User taps tile on start screen • URI MainViewModel.xaml ?LegislatorId=xxx Main Page •Caliburn injects query string values into view model •LegislatorId Navigate forward • Preserves back stack • Smooth UX
  37. Extending the Navigation Service You can extend the navigation service

    easily using extension methods In a POST-Redirect-GET pattern, it works a little differently in a native app environment but the same logic applies. Redirect then raise a message:
  38. OAuth Use the AsyncOAuth library (works well with HttpClient) Use

    DPAPI to store consumer access token and secret Use WebBrowser control to embed OAuth login page
  39. Supporting Cancellation Create a new CancellationTokenSource for each request Pass

    the CancellationTokenSource.Token to your repository/client If you need to cancel, call CancellationTokenSource.Cancel() Handle the TaskCanceledException