Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

How to extend an App Studio app using Visual Studio

0 (0 Likes / 0 Dislikes)
[Introduction to Mobile App Development] 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. It's so hard 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. While I'll be starting with the app I created previously in App Studio. To extend my app, I'm going to write at the app C# xaml source code using Visual Studio. By the end of this video, you will see how to get started with customizing an App Studio app. After that, it's time for you to come up with great ideas for apps. Then put them into practice using App Studio and Visual Studio. If you plan on trying out on 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 Developments, then in addition to Visual Studio, we'll need 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. If you're using Visual Studio Professional 2012, then you'll need to download an installer 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 Express Version of Visual Studio for Windows Phone Development. Downloading the Source Code At the end of previous video, I finished up by using App Studio to generate my visit to Venice App. I could decide to publish the app 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 this zip file and unblock it before you can unzip it. If I drill down, I'll find the 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. With 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 it 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 a 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 a project and deploy my app to the emulator. You can see in this drop down that there are a couple of emulator configurations with different screen sizes and memory to choose from. I'll go with this WVGA 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, visit into different sections by swiping left and right, and access the detailed pages by clicking here on one of the thumbnail pictures. If I go to my list of museums and look at the detailed page for this one for example. Then, if you call 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 to 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 date source names from the sections I created in the previous video. This 'lib' folder contains any libraries used 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 that 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's some other things you might recognize from my App Studio project such as the pictures and the assets slash data images folder. Here's my app logo image. App Studio generates source code that follow the Model View ViewModel 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 DataTemplates subfolder here The View Model mediates between the View and Model elements. It handles the binding between the data and the model and the User Interface elements in the View. You still have 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 we hope 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 name, 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 layout in one of the detail views by editing the xaml. If you look at this detailed page, my museum collection, you can see that the action button is below the image and includes the museum's description. I'd like to put the action button before the picture and using museum 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, a specific code I'm interested in is contained in this stock panel. It 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 want it. 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 anymore changes, let me show you how I can use a 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's executed when a user clicks on a menu item. If I click on 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 my mouse over the current item variable, I can see the URL what 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, only if you stop into the navigation services class that handles the navigation in the app. I can click on Continue to let the code continue. Let me stop the debugger and go back to Visual Studio. Adding and Appointment to the Calendar I want to try the feature in my app that enables you just to build the schedule for their visit to Venice in the calendar app on their phone. To do this, I'm going to define a new action that adds an entry with details, with museum to a calendar. If I open the ActionCommands.cs file, I can see all of the existing commands such as mail to, and port to phone. I'm going to create a new command at the calendar by copying one of the existing commands. I'll make a slow 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 right click on the MuseumsDsSchema and choose resolve. This starts the using clause at the top of the file for the main space I'm using. If I look on the Windows Phone Developer 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 right click on the SaveAppointmentTask and choose resolve. This adds the using clause at the top of the file for the library I'm using. Next, and it's modified the code I pasted in to make it do what I want. I 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 in the museum are passed to the command and not just the phone number. I'll save all my changes and try it out. And the emulator navigates one of the museum pages in my app. Then if I click on he phone link, I get the option to enter new appointment. I can adjust any details I like such as the date and duration of my plan visit. And then click the Save button. If I navigate through a 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 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 we choose a 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 matter from this library Now, I'll add an order by a clause that sorts museum entries by priority. If I run the app now, you can see that the museums are 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. 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 ?? the ad control in the main page .xaml view and replace the application I.D. and add unit idea with values I obtained when I register my app at the pub center site. 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'll open the source code in Visual Studio and showed you five simple ways you can modify the app. Modifying the C# from menu section in the app, modifying the xaml to change the layout of a page, intersecting 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 the 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 can 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 your 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.

Video Details

Duration: 19 minutes and 40 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 63
Posted by: duncanma on Aug 22, 2014

Please proceed ASAP. This is the new team that is iunterested in the service. Please elt me know if you can deliver somthing on Monday and remaining by Wednesday.Thanks, Albina! ----- (Please provide translations for these languages: Czech (cze), English (eng), German (ger), Italian (ita), Japanese (jpn), Korean (kor), Portuguese (Brazil) (por_br), Russian (rus), Turkish (tur).)

Caption and Translate

    Sign In/Register for Dotsub to translate this video.