Bending APIs to Your Will Using Windows Phone

Transcript

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

    YOUR NEXT APP

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

    week

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

    Patterns

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