EDN Admin
Well-known member
This video covers the basics of working with data in the Windows 8 Khan Academy app. We go over the new asynchronous pattern in WinRT for handling requests to and from the server, as well as putting together the Data Model for our app. If you have never worked with async patterns before, the following http://msdn.microsoft.com/en-us/library/windows/apps/hh452713.aspx async overview may be helpful before proceeding with our Khan Academy samples. <h1> An Overview of Async / Await </h1> As referenced above, asynchronous APIs are found all over the Windows 8 runtime and they are a key concept in Windows 8 app development. We have already seen the async / await pattern in action in the first Quickstart of this series when discussing the LaunchApp() method on startup: App.xaml.cs <pre class="brush: csharp
public async void LaunchApp(
ApplicationExecutionState previousExecutionState)
{
DataSource = new KhanDataSource();
await DataSource.LoadAllData();
[/code] Notice the use of the async keyword in the method’s declaration. Since this method is going to use an await operator for an asynchronous task, we need to use the async keyword in the declaration. In our case, we use await after we create our Data Model named DataSource and request it to populate itself by calling its LoadAllData() function. LoadAllData() handles both local and remote requests for Khan Academy video playlist data. The Windows 8 Khan Academy video app ships with a cached snapshot of the entire playlist library stored locally. This keeps the UI fast and fluid since the app doesn’t need to request and parse the entire collection of videos from the internet before launching for the first time. Each time the app runs, though, the KhanDataSource.LoadAllData() function in our Data Model also makes a call to the Khan Academy server and updates the local cache with any updates behinds the scenes, before reloading the local data to update any bindings. LoadRemoteData() is also implements the async/await pattern and is shown below: C# <pre class="brush: csharp
private async void LoadRemoteData()
{
HttpClient client = new HttpClient();
client.MaxResponseContentBufferSize = Megabyte * 20;
HttpResponseMessage response = await client.GetAsync(
new Uri(“http://www.khanacademy.org/api/v1/topictree”));
await WriteLocalCacheAsync(
await response.Content.ReadAsStringAsync(),
@”cachetopictree”);
await LoadCachedData();
}
[/code] LoadRemoteData() first creates and qualifies an HttpClient object but then needs to await the asynchronous HttpResponseMessage from the server before continuing. So far, this is a straightforward async/await pattern. But some tasks may require a nesting of await commands to complete the desired transaction. We can see this in the code once we want to write the response locally. In order to write to the local cache, which is itself an async operation, we first need to read the response as a string, which also requires an await command: C# <pre class="brush: csharp
await WriteLocalCacheAsync(
await response.Content.ReadAsStringAsync(),
@”cachetopictree”);
[/code] Once the local cache has been updated with the most recent data retrieved from the Khan Academy web servers, we refresh the local Data Source from this updated cache. In the Khan Academy Windows 8 app, the majority of code that handles the asynchronous data is contained in the KhanDataSource.cs file and follows the similar structure as shown above. <h1> Handling the JSON Response </h1> As we saw in the previous section, the Khan Academy app keeps the local cache of app data up to date by overwriting the local cache with updated JSON data from the Khan Academy servers. With Windows 8, there are multiple ways of processing JSON data, based on your needs and situation. For our scenario, we knew the shape of the data being returned by Khan Academy, so we first created a custom class that would represent each logical node of the response: C# <pre class="brush: csharp
[DataContract]
public class JsonNode
{
[DataMember(Name = “children”)]
public JsonNode[] Children { get; set; }
[DataMember(Name = “kind”)]
public string Kind { get; set; }
[DataMember(Name = “ka_url”)]
public string Url { get; set; }
[DataMember(Name = “title”)]
public JsonNode[] Title{ get; set; }
[DataMember(Name = “description”)]
public string Description { get; set; }
[…]
}
[/code] When it is time to read this locally cached JSON response, we invoke the following method and pass in our custom class type: KhanDataSource.cs <pre class="brush: csharp
private async Task LoadCachedData()
{
JsonNode cached = await ReadLocalCacheAsync<JsonNode>(
@"cachetopictree.json",
@"datatopictree.json");
PopulateGroups(cached);
}
private static async Task<T> ReadLocalCacheAsync<T>(
string filename,
StorageFolder folder)
where T : class
{
try
{
var file = await folder.GetFileAsync(filename);
string result = await FileIO.ReadTextAsync(file);
var serializer = new DataContractJsonSerializer(typeof(T));
var memStream = new MemoryStream(
Encoding.UTF8.GetBytes(result));
var serializedResult = serializer.ReadObject(memStream) as T;
return serializedResult;
}
catch (FileNotFoundException)
{
return default(T);
}
}
[/code] As you can see, ReadLocalCacheAsync creates a new DataContractJsonSerializer of the type specified. The string result of reading the local cache file is wrapped in a MemoryStream and passed to the JSON serializer. Once serialized, we have an object representation of the cached text data. The cached response is then sent to the PopulateGroups() function to update our Data Model. If we look at the first part of the PopulateGroups() function, youll see how we are using LINQ to pull out a properly formatted collection of elements for use in our Data Model. C# <pre class="brush: csharp
private void PopulateGroups(JsonNode root)
{
if (root == null) return;
Func<JsonNode, bool> videoClause = v => v.Kind == "Video";
Func<JsonNode, bool> topicClause = c => c.Kind == "Topic";
var playlists = root.Children
.SelectMany(group => group.Children.Where(topicClause)
.Flatten(g => g.Children.Where(topicClause))
.Select(k => new PlaylistItem
{
Name = k.Title,
Description = k.Description,
Slug = group.Title,
SourceNode = k
})
.OrderBy(k => k.Slug));
[…]
}
[/code] <h1> Populating the Data Model </h1> The Khan Academy API returns a series of playlists, made up of video items. However, the content of these playlists spans many different academic topics, so we want to make sure we further organize the playlists according to these topics. Here is a part of the Class Diagram to illustrate the relationship. <img title="clip_image007" src="http://files.channel9.msdn.com/wlwimages/b99a24a9f48a4ce2b672a09b015ae985/clip_image007%5B3%5D-1.png" alt="clip_image007" width="672" height="639" border="0 If we look at the last part of the PopulateGroups() method , the videos are subsequently organized under their individual playlists. This ungrouped collection of populated playlists is then sent to CreateGroups() which organizes them into their respective Topics. The relevant code looks like this: C# <pre class="brush: csharp
private void PopulateGroups(JsonNode root)
{
[…]
foreach (var playlist in playlists)
{
// now load all the videos
var videos = playlist.SourceNode
.Children
.Flatten(v => v.Children);
foreach (var video in videos.Where(videoClause).Select(
v => new VideoItem
{
Name = v.Title,
Description = v.Description,
ImagePath = v.Downloads != null ?
new Uri(v.Downloads.Screenshot) : null,
VideoPath = v.Downloads != null ?
new Uri(v.Downloads.Video) : null,
KhanPath = new Uri(v.Url),
Parent = playlist.Name,
DateAdded = DateTime.Parse(v.DateAdded)
}))
{
playlist.Videos.Add(video);
}
}
if (playlists.Count() > 0)
{
SortGroups(
TopicItem.CreateGroups(
playlists.Where(p => p.Videos.Count > 0)));
}
}
public static IEnumerable<TopicItem>
CreateGroups(IEnumerable<PlaylistItem> ungroupedPlaylists)
{
var grouped = ungroupedPlaylists
.GroupBy(i => i.GroupKey)
.Select(g => new TopicItem(g.Key, g.Key + " description")
{
ListSetter = g
});
var res = grouped
.OrderBy(i => i.Order)
.ThenByDescending(i => i.Playlists.Count);
return res;
}
[/code] In this way, we are able to get unsorted JSON data from Khan Academy and organize it into a series of classes that represent the actual videos, their topical playlist and their high level, academic grouping of topics. All this information is stored in ObservableCollections which we will bind to the UI in the next Quickstart. If you have any questions, comments, or feedback feel free to join in the discussion. Twitter: @ http://twitter.com/rickbarraza rickbarraza , http://twitter.com/joelmartinez @joelmartinez <img src="http://m.webtrends.com/dcs1wotjh10000w0irc493s0e_6x1g/njs.gif?dcssip=channel9.msdn.com&dcsuri=http://channel9.msdn.com/Feeds/RSS&WT.dl=0&WT.entryid=Entry:RSSView:c13026695b1b455eb308a09f0189234e
View the full article
public async void LaunchApp(
ApplicationExecutionState previousExecutionState)
{
DataSource = new KhanDataSource();
await DataSource.LoadAllData();
[/code] Notice the use of the async keyword in the method’s declaration. Since this method is going to use an await operator for an asynchronous task, we need to use the async keyword in the declaration. In our case, we use await after we create our Data Model named DataSource and request it to populate itself by calling its LoadAllData() function. LoadAllData() handles both local and remote requests for Khan Academy video playlist data. The Windows 8 Khan Academy video app ships with a cached snapshot of the entire playlist library stored locally. This keeps the UI fast and fluid since the app doesn’t need to request and parse the entire collection of videos from the internet before launching for the first time. Each time the app runs, though, the KhanDataSource.LoadAllData() function in our Data Model also makes a call to the Khan Academy server and updates the local cache with any updates behinds the scenes, before reloading the local data to update any bindings. LoadRemoteData() is also implements the async/await pattern and is shown below: C# <pre class="brush: csharp
private async void LoadRemoteData()
{
HttpClient client = new HttpClient();
client.MaxResponseContentBufferSize = Megabyte * 20;
HttpResponseMessage response = await client.GetAsync(
new Uri(“http://www.khanacademy.org/api/v1/topictree”));
await WriteLocalCacheAsync(
await response.Content.ReadAsStringAsync(),
@”cachetopictree”);
await LoadCachedData();
}
[/code] LoadRemoteData() first creates and qualifies an HttpClient object but then needs to await the asynchronous HttpResponseMessage from the server before continuing. So far, this is a straightforward async/await pattern. But some tasks may require a nesting of await commands to complete the desired transaction. We can see this in the code once we want to write the response locally. In order to write to the local cache, which is itself an async operation, we first need to read the response as a string, which also requires an await command: C# <pre class="brush: csharp
await WriteLocalCacheAsync(
await response.Content.ReadAsStringAsync(),
@”cachetopictree”);
[/code] Once the local cache has been updated with the most recent data retrieved from the Khan Academy web servers, we refresh the local Data Source from this updated cache. In the Khan Academy Windows 8 app, the majority of code that handles the asynchronous data is contained in the KhanDataSource.cs file and follows the similar structure as shown above. <h1> Handling the JSON Response </h1> As we saw in the previous section, the Khan Academy app keeps the local cache of app data up to date by overwriting the local cache with updated JSON data from the Khan Academy servers. With Windows 8, there are multiple ways of processing JSON data, based on your needs and situation. For our scenario, we knew the shape of the data being returned by Khan Academy, so we first created a custom class that would represent each logical node of the response: C# <pre class="brush: csharp
[DataContract]
public class JsonNode
{
[DataMember(Name = “children”)]
public JsonNode[] Children { get; set; }
[DataMember(Name = “kind”)]
public string Kind { get; set; }
[DataMember(Name = “ka_url”)]
public string Url { get; set; }
[DataMember(Name = “title”)]
public JsonNode[] Title{ get; set; }
[DataMember(Name = “description”)]
public string Description { get; set; }
[…]
}
[/code] When it is time to read this locally cached JSON response, we invoke the following method and pass in our custom class type: KhanDataSource.cs <pre class="brush: csharp
private async Task LoadCachedData()
{
JsonNode cached = await ReadLocalCacheAsync<JsonNode>(
@"cachetopictree.json",
@"datatopictree.json");
PopulateGroups(cached);
}
private static async Task<T> ReadLocalCacheAsync<T>(
string filename,
StorageFolder folder)
where T : class
{
try
{
var file = await folder.GetFileAsync(filename);
string result = await FileIO.ReadTextAsync(file);
var serializer = new DataContractJsonSerializer(typeof(T));
var memStream = new MemoryStream(
Encoding.UTF8.GetBytes(result));
var serializedResult = serializer.ReadObject(memStream) as T;
return serializedResult;
}
catch (FileNotFoundException)
{
return default(T);
}
}
[/code] As you can see, ReadLocalCacheAsync creates a new DataContractJsonSerializer of the type specified. The string result of reading the local cache file is wrapped in a MemoryStream and passed to the JSON serializer. Once serialized, we have an object representation of the cached text data. The cached response is then sent to the PopulateGroups() function to update our Data Model. If we look at the first part of the PopulateGroups() function, youll see how we are using LINQ to pull out a properly formatted collection of elements for use in our Data Model. C# <pre class="brush: csharp
private void PopulateGroups(JsonNode root)
{
if (root == null) return;
Func<JsonNode, bool> videoClause = v => v.Kind == "Video";
Func<JsonNode, bool> topicClause = c => c.Kind == "Topic";
var playlists = root.Children
.SelectMany(group => group.Children.Where(topicClause)
.Flatten(g => g.Children.Where(topicClause))
.Select(k => new PlaylistItem
{
Name = k.Title,
Description = k.Description,
Slug = group.Title,
SourceNode = k
})
.OrderBy(k => k.Slug));
[…]
}
[/code] <h1> Populating the Data Model </h1> The Khan Academy API returns a series of playlists, made up of video items. However, the content of these playlists spans many different academic topics, so we want to make sure we further organize the playlists according to these topics. Here is a part of the Class Diagram to illustrate the relationship. <img title="clip_image007" src="http://files.channel9.msdn.com/wlwimages/b99a24a9f48a4ce2b672a09b015ae985/clip_image007%5B3%5D-1.png" alt="clip_image007" width="672" height="639" border="0 If we look at the last part of the PopulateGroups() method , the videos are subsequently organized under their individual playlists. This ungrouped collection of populated playlists is then sent to CreateGroups() which organizes them into their respective Topics. The relevant code looks like this: C# <pre class="brush: csharp
private void PopulateGroups(JsonNode root)
{
[…]
foreach (var playlist in playlists)
{
// now load all the videos
var videos = playlist.SourceNode
.Children
.Flatten(v => v.Children);
foreach (var video in videos.Where(videoClause).Select(
v => new VideoItem
{
Name = v.Title,
Description = v.Description,
ImagePath = v.Downloads != null ?
new Uri(v.Downloads.Screenshot) : null,
VideoPath = v.Downloads != null ?
new Uri(v.Downloads.Video) : null,
KhanPath = new Uri(v.Url),
Parent = playlist.Name,
DateAdded = DateTime.Parse(v.DateAdded)
}))
{
playlist.Videos.Add(video);
}
}
if (playlists.Count() > 0)
{
SortGroups(
TopicItem.CreateGroups(
playlists.Where(p => p.Videos.Count > 0)));
}
}
public static IEnumerable<TopicItem>
CreateGroups(IEnumerable<PlaylistItem> ungroupedPlaylists)
{
var grouped = ungroupedPlaylists
.GroupBy(i => i.GroupKey)
.Select(g => new TopicItem(g.Key, g.Key + " description")
{
ListSetter = g
});
var res = grouped
.OrderBy(i => i.Order)
.ThenByDescending(i => i.Playlists.Count);
return res;
}
[/code] In this way, we are able to get unsorted JSON data from Khan Academy and organize it into a series of classes that represent the actual videos, their topical playlist and their high level, academic grouping of topics. All this information is stored in ObservableCollections which we will bind to the UI in the next Quickstart. If you have any questions, comments, or feedback feel free to join in the discussion. Twitter: @ http://twitter.com/rickbarraza rickbarraza , http://twitter.com/joelmartinez @joelmartinez <img src="http://m.webtrends.com/dcs1wotjh10000w0irc493s0e_6x1g/njs.gif?dcssip=channel9.msdn.com&dcsuri=http://channel9.msdn.com/Feeds/RSS&WT.dl=0&WT.entryid=Entry:RSSView:c13026695b1b455eb308a09f0189234e
View the full article