How to extend an App Studio app using Visual Studio

[Introduction to Mobile App Development] [Video 2 — How to Get to the Source Code and Make a Modification] [male speaker] Welcome to this video, How to Get the Source Code and Make a Modification. In the previous video, the Ins and Outs of Windows Phone App Studio, you saw how to create a Windows Phone app using the web-based App Studio tool. In this video, I'm going to show you how to extend the capabilities of your Windows Phone app beyond what you can achieve with the App Studio. I'll be starting with the app I created previously in App Studio. To extend my app, I'm going to edit the app C# example source code using Visual Studio. By the end of this video, you'll have seen how to get started with customizing an App Studio app. After that, it's down to you to come up with the great ideas for apps, then put them into practice using App Studio and Visual Studio. If you plan on trying out any of the techniques you see in this video, you'll need a copy of Visual Studio installed on your computer. There are several versions of Visual Studio that you can use and several ways that you can get a copy of Visual Studio to install on your computer. For a full-featured version of Visual Studio, you can use Visual Studio Professional 2012 or Visual Studio Professional 2013. If you're a student, you should be able to get a copy from the DreamSpark website. If you're an MSDN subscriber, then Visual Studio is included as part of many subscription packages. Alternatively, you can purchase Visual Studio directly. If you're doing Windows Phone development, then in addition to Visual Studio, you'll need the tools and libraries included in the Windows Phone SDK, which is available as a free download. If you're using Visual Studio Professional 2013, then the SDK is already included, so you don't need to install it separately. But if you're using Visual Studio Professional 2012, then you'll need to download and install it before you get started. Finally, there's the Visual Studio 2012 express version that gives you a basic version of Visual Studio. If you download and install the Windows Phone SDK without having Visual Studio Professional installed, the SDK installs the Express version of Visual Studio for Windows Phone development. [Downloading the Source Code] At the end of the previous video, I finished up by using App Studio to generate my Visit to Venice app. I could decide to publish my app to the App Store now, but I want to make a few enhancements first. To do this, I need to download the source code, which I can do from here by clicking this link. I'll save the app.zip file here. [Running the App in the Emulator] I'll unzip the file I downloaded. You might need to check the properties of the ZIP file and unblock it before you can unzip it. If I drill down, I'll find a file called app.sln in the app folder. This is a Visual Studio solution file, and if I double click, it will load into Visual Studio. For these security warnings, I'll clear the check box and click OK. The solution and all its subsidiary projects are now loaded into Visual Studio. At this point, I just want to try the app out and see how it behaves, and to do this, I can use the Windows Phone emulator that comes with the Windows Phone SDK. The emulator runs the same operating system as a real phone, so I can test out how the app works without installing it on a real device. If this is the first time you've used Visual Studio with an App Studio project, you may need to change this setting here in Tools, Library Package Manager, Package Manager Settings, to allow NuGet to download missing packages. I'll explain a bit more about NuGet in just a minute. I'll click on OK to save that configuration change. Now I'll click this button here to compile the project and deploy my app to the emulator. You can see in this dropdown that there are a couple of emulator configurations with different screen sizes and memory to choose from. I'll go with this WGVA configuration. It takes a bit of time for Visual Studio to compile the app, start the emulator, deploy, and launch the app, and here it is displaying the content of my menu section. I can navigate around my app, visiting the different sections by swiping left and right and access the detail pages by clicking here on one of the thumbnail pictures. If I go to my list of museums and look at the detail page for this one, for example, then I can pull the museum's phone number by clicking here. I'm going to return to Visual Studio and stop the session in the emulator by clicking here. [The Visual Studio Solution] In Visual Studio, a solution is a container for related projects and other resources. In this solution, created from App Studio, you can see two projects. There's a project called AppStudio.ui that contains the app's UI code. There's a project called AppStudio.data that contains definitions of the various data sources, such as the collection of museums and the RSS feed that my app uses. You might recognize some of the data sources names in the sections I created in the previous video. This lib folder contains any library views by the projects and bundled with the solution. The solution also uses NuGet, which I already mentioned, to download additional libraries during the build phase. Using NuGet this way means the App Studio doesn't need to include a whole set of libraries as part of the downloaded solution. If I drill down a bit further in the AppStudio.ui project, there are some other things you might recognize from my App Studio project, such as the pictures in the Assets/Data Images folder. Here's my app logo image. App Studio generates source code that follows the model, view, view, model, or MVVM, design pattern as a way of organizing the various parts of the app. In MVVM, the model represents the data or content used by the app. This is implemented in the AppStudio.data project. The view represents the user interface. The views are defined using the XAML markup language, and you can see the files in this view folder and the data template subfolder here. The view model mediates between the view and model elements. It handles the binding between the data in the model and the user interface elements in the view. You saw how to configure the bindings in App Studio on the page layouts. The view models are implemented using the C# programming language, and you can see the files in this folder here. Again, the names will help you recognize which sections of the app they belong to. [Adding a New Link to the Menu] Let me show you how I can start to modify my app by editing the source code. I'm going to start with this C# file in the AppStudio.data project that defines the list of items on my menu. As you can see from the main, UsefulLinksDS.cs, this file defines the data source for the menu section in the app. I'm going to add a link to the Venice Public Transport website like this. I'm going to save all the changes I made in the Visual Studio solution and then see what the changes look like in the emulator by clicking here. And here you can see my new link in the menu section of my app. I can test it out here by clicking on it, and then return to the app by clicking the Back button. [Changing a Page Layout] Next, I want to show you how I can change the layout in one of the detail views by editing the XAML. If you look at this detail page from my museum collection, you can see that the action button is below the image and includes the museum's description. I want to put the action button before the picture and use the museum's subtitle instead of its description. To make the change, I need to first locate the XAML that defines the detail page. It's in this file, detail.xaml. The specific code I'm interested in is contained in this stack pile that contains both the image and the call phone button. If I swap the image and call buttons around, that should change the layout to how I want it. I'll also change the binding to use the subtitle instead of the description. Now I can check my changes by running the app in the emulator. As you can see, the layout of this page has changed in the way I wanted. So now you've seen how I can modify part of my app by editing the XAML in Visual Studio. I should point out that after I've made a change in Visual Studio, there's no way of pushing the changes back into App Studio. from now on, I'll have to make any changes using Visual Studio. Next, I want to show you how I can make a slightly more complex change by editing the C# code to change the behavior of my app. [Using the Debugger] Before I make any more changes, let me show you how I can use the Debugger in Visual Studio to understand how the app is working. In the view model class for the Useful Links section, I'm going to find the code that is executed when the user clicks on a menu item. If I click in the left margin here, I can set a break point in the code. Then if I launch the app in the emulator and click on a menu item, the code pauses at the break point. If I hover the mouse over the current item variable, I can see the URL that the app is about to navigate to. If I click on the step over button, you can see how the application executes the code. Here I will view Step Into to step into the navigation services class that handles the navigation in the app. I could click on Continue to let the code continue. Let me stop the debugger and go back to Visual Studio. [Adding an Appointment to the Calendar] I want to add a feature to my app that enables users to build a schedule for their visit to Venice in the Calendar app on their phone. To do this, I'm going to define a new action as an entry with details for the museum to a calendar. If I open the ActionCommands.cs file, I can see all of the existing commands, such as Mail To and Call to Phone. I'm going to create a new command, Add to Calendar, by copying one of the existing commands. I'll make a slight change, because I want to use several details about a museum when I add the calendar entry. To get rid of the red underscores, I'll right click on the MuseumsDS schema and choose Resolve. This adds to the using clause at the top of the file for the name space I'm using. If I look in the Windows Phone Development documentation, I can find some sample code that shows me how to save an appointment to the calendar. I'll copy this code and paste it here. To get rid of the red underscores, I'll right click on this Save Appointment task and choose Resolve. This adds to the user clause at the top of the file for the library I'm using. Next, I need to modify the code I pasted in to make it do what I want. I'll let the user choose a start and end time, and I'll replace the subject, location, and details with information about the museum. I need to modify the Detail.xaml data template to make sure that the new command is called when the user taps on the Detail screen. I also need to make sure that all the details of the museum are passed to the command and not just the phone number. I'll save all my changes and try it out. In the emulator, I'll navigate to one of the museum pages in my app. Then if I click on the phone link, I get the option to enter a new appointment. I can adjust any details I like, such as the date and duration of my planned visit. And then click the Save button. If I navigate to the Calendar app on the phone, you can see that the appointment was added. If I click on the appointment, you can see the full address and description of the museum. [Changing the Sort Order] One last thing I could consider doing for this enhancement is to replace the phone icon on the museum detail page in my app with an icon that better represents the task. I want to show you another change I can make by editing my app's C# code, this time changing the behavior of a data source. Currently, the app displays my list of museums in the order they were entered into the data source in App Studio. What I want to do is provide some way to sort the entries. I've modified my data source in App Studio to include a priority field, which isn't visible in the app. I'm going to use this to sort my list of museums by priority order in the app. In the AppStudio.data project in the MuseumsDS class, there's a method called Load Data which retrieves the data from the data service. This is where I'm going to make my change. First I'm adding a using clause for link, because I'll be using a method from this library. Now I'll add an Order By clause that sorts museum entries by priority. If I run the app now, you can see that the museums are sorted in my priority order. [Enabling Ads] Another change to consider is to monetize your app by including ads. Before you enable ads in your Visual Studio solution, you should first make sure that you've installed the latest version of the Microsoft Advertising SDK for Windows Phone 8. You can download the latest version of the SDK from here. [http://www.microsoft.com/en-us/download/details.aspx?id=8729] App Studio can add the necessary code to your app if you enable this option on the Publish Info tab before you download the App Studio solution. In the downloaded solution, I must uncommit the ad control in the main page .XAML view and replace the application ID and Ad Unit ID with values I obtained when I register my app at the Pub Center site. [http://pubcenter.microsoft.com/] Your app will now display ads at the top of the main screen. In this video, I've shown you how to download and open the source code for an app created using App Studio. I opened the source code in Visual Studio and showed you five simple ways you can modify the app— modifying the C# for menu section in the app, modifying the XAML to change the layout of a page, intercepting an action on page to perform a different task on the phone, modifying the behavior of a data source to apply a custom sort order, and enabling ads in the app. Other ways that you might consider extending or enhancing your App Studio app include customizing the behavior of an action on a menu instead of on a section page— for example, to send an SMS message, change your social media status, or share an item— changing how an app retrieves information by customizing the searching of Bing, RSS, or collection section. You could filter results based on your location or the current date, or sort results to make sure that the items that are most relevant appear at the top of the list, replacing one of your app sections with a completely custom user interface, perhaps enabling a user to record notes about the museum they're visiting or take a photo and save it into the app. Thanks for watching this video. If you want to learn more about how to publish your app to the store, then watch the next video, Get Your App Ready to Go to Market. Have fun, and build some great apps. [Introduction to Mobile App Development]