How to extend an App Studio app using Visual Studio
0 (0 Likes / 0 Dislikes)
[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]