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

Bending APIs to Your Will Using Windows Phone

B924bc0147903cbd7a4506d7d26ab328?s=47 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) kamran.ayub@gmail.com @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. About me

  4. 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…
  5. The other woman in my life Chalupa, thanks for keeping

    me company while I code.
  6. 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
  7. Coderbits Profile

  8. Keep Track of My Games keeptrackofmygames.com

  9. Centwise centwiseapp.com

  10. 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
  11. Connected Apps

  12. It’s easy to answer the question…

  13. What kind of app should I build?

  14. Ask yourself 3 questions

  15. 1. Is there a website I use a lot?

  16. 2. Would I use it on my phone?

  17. 3. Can I interface with it in any way?

  18. If the answer to all three questions is YES, THERE’S

  19. Notice what questions I left out

  20. I didn’t ask Is there already an app for it?

    Doesn’t matter, it probably sucks or it’s missing something.
  21. 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.
  22. 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.
  23. 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.
  24. Let’s do a little brainstorming session

  25. Think about all the websites you use in a typical

  26. Then, for each site, think about whether or not there’s

    a public API of some sort If you’re at home, research!
  27. Here are my results (for myself)

  28. 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
  29. 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.
  30. Still looking for inspiration? There are always niche needs that

    need to be met…
  31. Building Connected Apps

  32. MVVM Async / Await Event Aggregator Offline Caching / Storage

  33. 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
  34. 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
  35. MVVM

  36. 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
  37. 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?
  38. Async / Await

  39. 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
  40. App Request Flow Connect Send Request Receive Response Activate View

    Model Request Data Cached or Live Data? Client-Side API/Server-Side
  41. Create an API Client Interface

  42. 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
  43. API Client: Generic request method First, check if we have

    a network available Then, set up the request Next, we send the request.
  44. 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" } }
  45. API Client: Call the private helper

  46. 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.
  47. 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)
  48. Offline Caching / Storage

  49. 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
  50. Caliburn View Model Request Lifecycle Request View Model • MyRepsViewModel

    • Inject dependencies Find Corresponding View • MyRepsView.xaml View Model Lifecycle • OnInitialize • OnActivate • OnDeactivate
  51. Load the data when the view model activates

  52. 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.
  53. 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
  54. 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
  55. Finally, cache the data For simple apps, you can use

    Caliburn’s StorageHandler<T>
  56. Event Aggregator

  57. 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
  58. Inject the aggregator To send events Call the Publish method

  59. To receive events Subscribe when view model is activated Unsubscribe

    when view model is deactivated Implement the IHandle<T> interface
  60. Event Aggregator: Perfect for Panoramas UserLocationUpdated

  61. 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
  62. Summary

  63. 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
  64. 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
  65. Tips & Tricks

  66. Network Service Listens to network changes Uses event aggregation to

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

    and handle appropriately Registered as a singleton with Caliburn container
  68. 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
  69. 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:
  70. 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
  71. 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
  72. Logging Errors Use the BugSense SDK (WP8/WP7) Register the handler

    on application start Done!
  73. Thank you! Kamran Ayub kamran.ayub@gmail.com @kamranayub kamranicus.com Slides http://mdc.ilmservice.com/download http://speakerdeck.com/kamranayub

    Evaluations http://mdc.ilmservice.com/eval