Week4 Examples: Storage, Web Clients and Beyond

1. Storage models: local, system applications (e.g., Medial Library), and per-application permanent storage (isolated storage):
   • Behavior: three pivot items, each shows a distinct storage model.
   • Note: images are "Content" and build action should be "Copy if Newer"!
   • Local Storage: see that images are shipped over and can be accessible via local (relative) URI
   • MediaLibrary Storage: can save images (only jpg format) into the system picture hub (Medial Library) from local storage (permanent, shared with all applications).
   • Isolated Storage (permanent per application): unique (how?) storage location
     • Importance of GUID!! Who Unique? Install a "new" application?! Local storage clash!?
     • Create several files to see: Begin strings
     • Quit and start the app again, attempt to create files, and see "Hello" strings because the files already exists!
        
2. Web-client simple request of data:
   • HTTPRequest: simple low level
   • WebClient: build on HTTPRequest
   • Behavior: three pages to the panorama:
   • WebBrowser: a simple web-browser embedded in the applicaiton-page. Notice pinch zoom and scroll comes for free!
   • ImageClinet: use WebClient's ReadAsync, results comes sometime later.
     • Notice the service function Lambda expression we are getting lazy, in-line definition of Action() service function
   • TextClient: use WebClient's ReadAsync, for text
     • Notice the difference between: ~ksung/index.html, ~ksung/Test/test.php and the java script in the js/t.html (part of web-page)
     • Look at the source code of test.php and t.html
   • What have we learned?
     • Web Browsing is completely "text-based" send a URL (or URI) gets text back
     • It all depends on how you parse and interpret the "text": Browser App, As an image, or, try to "parse"!
        
3. GPS to Google Location:
   • Trivial idea: works 5 months ago ... not anymore!!
   • Avoid everyone developing their own GPS :-)
   • So? Notice the URI works for regular web-browsing
   • This is what is Web Services ... constructing URI as function calls
      
4. Map Service:
   • Not surprisingly, great Bing Map support (not so good GoogleMap Support :-().
   • Instead of simple URI, going through API.
     • More Opaque, but simpler to program with
     • Without credential, they display a water mark: protect their IP: you can used it for free, but let us know who you are so we can know how much you are using us (e.g., cut you off after 10Million calls).
   • To register for an account: http://www.bingmapsportal.com/
     • Reference on getting a BingMap Key: http://msdn.microsoft.com/en-us/library/ff428642.aspx
     • Details I used for my key registration:
       • Application name: KelvinDemo
       • Key: <xxxxxx> please do not do bad things with my credential!
       • URL: http://faculty.washington.edu/ksung
   • In this example, simple registration with a "service" to use their free service.
   • More information on the Map service for Silverlight:
     • Intro general reference: http://msdn.microsoft.com/en-us/library/ff941096%28v=vs.92%29.aspx
     • More elaborate API: http://msdn.microsoft.com/en-us/library/ee681893.aspx
   • More general Bing API!: all the Live services!!
     • General reference: http://msdn.microsoft.com/en-us/library/live/hh826550.aspx
     • Get services from: Hotmail, Skydrive, May be even Bing Search, Text to Speech? etc.
        

5. FB-YourApp:
   • Credit: Most of Facebook web services are learned and developed, over Fall 2011 and Spring 2012 by:
     • Jordan Locke, Kyle Zaretzke, and Melanie Burnham, without their exhaustive hard work and searches, none of the following examples will be here.
     • Here are some general information from Jordan and Kyle on FB and Bing (refer to the list of references at the end of the document).
   • In this first example, we see how to exchange credential information to find out about non-personal resource information.
   • First, you will get your own Facebook account, a developers ID (secret App Key), and a App ID (App Secret).
   • In this example, we will go through step-by-step web-services with simple WebClient/URI's to find out more about the app itself.
   • First off: notice the DLL folder. This contains the JSON parsing library (dll). This library is added into the project. (<- what does this mean?)
   • To find out about the application:
     • Construct a URI based on FB API spec: (Authentical as an App): http://developers.facebook.com/docs/authentication/applications/
     • Notice: can cut/paste the URI into web-browser and get _exactly_ the same results
   • Step 1: get a access token based on who you are (Client ID) and what App you want to find info on (AppID), send a request with information encoded in the URI
   • Step 2: receive a "Token" (that will be valid for a short while) in reply (as though we have loaded a web-page! just that the content is a simple one)
   • Step 3: construct a URI based on the token and you will get all the information on your application (not you, but the application).
   • Notice, all communications are in plain text!! No user authentication, just authentication for accessing information on the application.
   • get app info: as JSON (JavaScript Object Notation), System.Json DLL!
   • Cut/Paste WebClient URI string to webbrowser!! always work!
     • Stop in Debugger and try this!! Kind of interesting
        
6. FaceBookApp:
   • Open standard for Authorization: (OAuth):
     • Step 1: Verify you approve: Send User ID: to get access code (user logon). (simple HTTP Request), can implement via webClient with specific URI
     • Step 2: Verify you allow access to your resources: Send access Code + User ID + Secret App ID to get access token (Opaque)
     • AccessToken: valid for a period of time
     • With API, the above process becomes somewhat hidden
     • Some references on OAuth:
       • http://en.wikipedia.org/wiki/OAuth
       • http://oauth.net/
       • http://hueniverse.com/oauth/
     • Not to be confused with OAth (without the "u"): Open Initiative
   • Once you get AccessToken, you can do queries (API function calls) like:
     • https://graph.facebook.com/me/friends?access_token=<yourAccessToken>
     • You need to know the base URI (i.e., the http://graph.facebook.com/me/friends)
     • For facebook: refer to: http://developers.facebook.com/docs/reference/api/
   • DLL Folder:
     • Microsoft.Contracts and FB (for OAuth and simplifying URI API calls).
   • FacebookLoginPage: Step-1
     • the WebBrowser object: IsScriptEnabled must be set to TRUE!!
     • Notice, this page is occupied entirely by a WebBrowser, and this page is never actually shown!
     • Constructor: Build the URI for Step-1
     • When this page is loaded, we invoke the web-browser to navigate to the URI to complete Step-1
       • The URI causes Facebook to prompt user authentication screen
       • When proper user information is entered, FB replaces the URI  with a code.
     • The new URI from FB casuses the web-browser to Navigated: result of the page is a simple "Success" string! :-)
     • In the Navigated function, we parse the returned code and initiate Step-2 (opaque exchange for AccessToken)
     • Stop in debugger and we can cut/paste everything for a regular web-browser except the very last step (exchanging for AccessToken).
   • Watch out for NavigateService.Navigate(URI) <-- pages are under "FacebookSupport" folder!!
   • FacebookInfoPage.xaml: less interesting contains a few samples of how to make FB API calls, notice all the same format, need the AccessToken
     • Loaded: GetSync() about "me"
     • FqlSample: Facebook SQL query
     • FqlMultipleQuerySample(): multiple of FB SQL at a time
     • PostToWall_Click: how to post to wall
     • DeleteLastMessage_Click: how to delete last message (with id).
   • Hardware Backbutton does not work! (causes the re-load of current page)
     • What can be done? Think of NavigationService.RemoveBackEntry()
     • Think about how to avoid using FacebookLoginPage.xaml, can use the visibility of WebBrowser UIElement on main page to accomplish the goals of this page.
   • The FB-API is storing oAuth results (probably in isolated storage), that's why once authorized, you don't have to go through it again.