Video_1_CompleteVideo
0 (0 Likes / 0 Dislikes)
[Speaker] Welcome to this video.
The ins and outs of windows
app studio. In this video,
I'm going to give you a guided
tour of all the key
features of app studio.
A web-based tool that
you can use to build
store-ready apps for PCs,
Tablets, and Phones.
App Studio also allows you
to download the source code
of your app if you want to
make further customization
using Visual Studio. But that
feature is outside the scope
of what I'm going to cover
in this first video.
In a single session we will
create a universal app that will
will run on any PC, Tablet,
or Phone running Windows 8.1.
By the end of this video,
you'll have seen everything
you need to know to start
creating universal apps
for Windows
8.1 devices.
I'm starting at the site
appstudios.windows.com.
If I click on the start
new project link, I can
sign into App Studio using
my Microsoft account.
If you don't already have
a Microsoft account,
you can sign up for one
at signup.live.com.
Now that I've signed
into App Studio, I would
be able to view any projects
that I might have created
by clicking My Projects.
However, since I'm starting
my first project, I'll create
start new project again.
On the choose your template
page in App Studio
I see a list of templates
I can pick from to use
for my new app. Two new
templates recently
added to App Studio
are the touch develop
and web app templates.
Touch develop integration
allows you to add a section
that will import apps
or games created in touch
develop. Check out
touchdevelop.com
to get started.
Not all types of apps or
games, called scripts, are
able to be imported in
Windows App Studio.
The web app template or
WAT, for short, allow me
to create universal Windows
apps for mobile websites.
If you already own a
mobile optimized website
that includes all the
content you need and want
to create an app out of,
this can be a good option
for you. See wat.codeplex.com
for more information
about WAT. Additional
information about these
and other updates, recently
added to App Studio
can be found on the
App Studio Homepage
under the Windows App
Studio news section.
Here I can view a set of
templates such as my trip,
sports team, or
birthday party.
I can explore the template
in this preview simulator
to understand what the
template contains.
This video I'm focusing
on creating a new
universal
Windows app.
Because I'm starting from
scratch, I'll click on the
empty app template,
on the Create page.
I'll click
create here.
I'm now at the first of the 4
tabs where I design my app.
You can the 4 tabs near
the top of the section.
And you'll see that I can
switch between them.
The app I'm going to create
will display information
about my upcoming
trip to Venice.
So I'm going to start
filling this page out with
suitable data. Visit
Venice in the title box.
And I'll upload a PNG
image I prepared earlier
to use as my
app's logo.
You can see here that I
can upload a PNG file
from my computer or from
my One Drive account.
You can also use one of
the images provided by
App Studio. We recommend
creating a unique
image for each app. Think
of this as your logo.
I'll show you more about
customizing the title later.
Typically you also use
the same image to
represent your app
in the App Store.
Start with a 300 by 300 pixel
image to use as a logo.
You can use many free
programs, such as
Microsoft Paint to work
with photos and images.
Although I'm using a
PNG image, you could
also upload JPG images,
which App Studio
will convert
to PNG format.
This will just lack the
transparent effect.
While I'm making the
changes, you may have
noticed that the preview
image over here
has been updating. This
helps you to make sure
that your information will
display correctly when
the app is installed
on a real phone.
The preview isn't perfect
but it gives you a real
good indication of what
your app will look like.
Next, I want to start adding
some sections to my app.
This is the page where you
define your app's content.
An app created with App
Studio is organized
into sections, where
each section contains a
particular type of data.
For example,
one section might hold a
collection of images,
while others hold a
collection of news articles.
And another might simply
be text that you enter
directly into
App Studio.
Users of your app can navigate
through your sections
by swiping left and right on
the main sections of the app.
I can create a new section
by clicking on the
component I want to use
from either the basic
or advanced set. Notice
that an app is limited
to six sections in total.
So it's a good idea
to plan in advance what your
sections are going to be.
Although you can always
come back and add or
remove sections
later on.
As well as sections that
hold content, such as
images, videos, and news
articles, there are also
menu sections. A menu holds
a collection of links.
Either links to information
stored externally to your app,
such as websites and
phone numbers, or links
to other sections
in your app.
I'm going to go ahead
and create a section
that contains a
photo gallery.
To add a section that contains
images, I could create
a collection, an Instagram
section, or a Flicker section.
For this app I'll use the
Flicker data source.
I'll give the section a
name, configure my Flicker
user ID to show the pictures
in my photo stream,
and confirm
the addition.
Instead of using a Flicker
ID, I can provide a search
term or tag for the
pictures I want to display.
To obtain your Flicker
user ID, a number of
third party sites exist
to find your Flicker ID.
If I click edit, I can
customize the section further.
On this page I can choose
the layouts for the list
and detail pages in the section.
I'm going to choose
slightly smaller thumbnails
for the listing page
and a larger picture
for the detail page.
I can also modify the search
terms if I click on data.
When I'm happy with the
results, I'll return to my
list of sections.
Now I'm going to add
another section that
contains a collection
of videos from YouTube.
I'll give the new section
a name and customize
the list of videos from
YouTube that my app
displays by entering
a YouTube user name,
play list, or
search term.
I'll click confirm
when I'm done.
I'll save my new section.
I can edit the pages for
my video section in the
same way I could edit
the pages for my picture
section. I can add or
remove detail pages and
select different layouts.
Notice that if I click
on data, I can modify
the criteria used to
select the videos.
As I mentioned earlier,
touch developed
integration allows you to
add a section that will
import apps or games
created in touch develop.
Not all types of apps or
games, called scripts
are able to be imported
into Windows App Studio.
And I will show you how to
tell which is which, shortly.
In one approach I can
create an app or game,
called a script, in Touch
Develop and import it
as a data source section,
directly into App Studio.
And then use App Studio
to publish my app
or game to the store as
a single section app.
The other approach is to
take that same app or game
script, you created,
into App Studio.
And integrate it into an
App Studio app that has
multiple sections creating
sort of a hybrid app.
We'll take that last approach.
So, let's see how
to add a Touch Develop
script into the Visit
Venice app I'm
currently developing.
I'll start by opening
up another browser and
go to
touchdevelop.com.
I then click launch
Touch Develop here.
Next I sign into Touch
Develop with a Windows
account.
Once signed in, over
here on the far right,
I click search
everything.
In the search text box, I
type in the name of the
script I'm
looking for.
I'll type
coin flipper.
I'll select the script
highlighted here.
Next, I click the share
tile to view the Share this
Script window. After a short
while, if the script is
found to be compatible
with App Studio,
the Windows App Studio
logo will appear.
This tells me that I can
continue to import this
script into my App
Studio project.
I'll go ahead and
click cancel
Next I need to copy the
script ID for the script,
XGMJ. I'll highlight it and
copy it to the clipboard,
the return to
App Studio.
In App Studio, I
click Touch Develop.
I give this section a name
and paste the script ID
that I copied from the
Touch Develop Website.
I then click
confirm.
I now have a new section
called Coin Flip, which
contains the new script.
Later on in this video
I will show you how to side
load an app to the phone.
And now I can show you
how the script runs on
my phone. Here on my
phone, you can see that
the Visit Venice app is running.
I swipe to the
right to view the coin flip
section. When I click on
the quarter
it flips.
Now I'll show you how the
other approach I can
use with the touch vault
script, how to load
the script into it's own
App Studio project.
Here I started a new
copy of App Studio.
One that contains
no apps.
I switch back to Touch
Develop and click share
on the Coin
Flip script.
This time on the share this
script dialog, I click
make it an app. That
brings up App Studio
and you can see that a new
app has been created,
but the Coin Flip script has
been automatically added
to the first
available section.
Clicking on My Projects
shows you the new
project that was created.
Now let's return to our
original Visit Venice
app in App Studio.
I'm going to need all 6
sections for this app,
so I'm gonna make some
space and delete the
Coin Flip script.
In the next section, I'll
add an RSS feed to my app.
Next I'm gonna add a
section that shows news
from the Venice
Biannual Festival.
To do this, I'm adding a section
with an RSS data source.
Many news sites and blogs
use RSS as a way to
publish articles to
subscribers as they become
available. This is a great
way to add a data source
that stays up to date
with the current latest
news on a topic. Here I'm
adding the address of
an RSS news feed from
the New York Times.
Again, when I'm happy
with this, I'll click
confirm and save.
So you can now see
news from the Biannual
Festival as one of the
sections in the app.
The app will check for news
articles and display them
as and when they're published.
Again, if I want
to change how the information
is displayed, I can
edit the page layouts
for this section.
I'm going to add another
section that displays
results from a
Bing search.
I'm going to use Bing to
look for events that are
happening in Venice. As
with an RSS data source,
this type of data source
updates automatically
because the app executes
the search when the
app is running
on the device.
For the search, I'm
specifying the country and
then providing a
search string.
I'll click confirm
when I'm done.
I'll save the
new section.
If I want to modify the
layout for this page,
I'll click on edit.
Notice that there's
only one layout for the
search results.
On the data page I can
modify the search criteria.
The next section I'm
going to create is
an About the Author
section, that says a bit
about the app and the author.
For this I'm going
to use an HTML
component.
I can create the content
for my page using
this editor.
I can use the formatting
buttons to apply basic
HTML formatting
to my content.
If I want to, I can also
edit the HTML directly
by clicking here. A useful
tip for creating content
in an HTML data source,
is that you can cut and
paste from an existing
website and keep the
formatting. Let me save
this for the new section.
At this point, on the
Main Sections page,
you can see that I've
reached the maximum
number of sections. I
still have one more
important section to add.
So I'll delete the section
that contains videos
of singing gondoliers.
For this last section,
I'm going to use the
collection component to
create a mini-database
of museums
in Venice.
I can define the data that my
collection will hold here.
I'm going to start by
adding a set of default
columns for my data
by clicking here.
I'm going to add a new
column called address to
store each
museums address.
Notice I can choose between
all these different
types for
each column.
I'm also going to add a
column to store a phone
number.
When I finish with the
column definitions,
I'll click confirm
to save them.
To add data to my collection,
I'll click edit.
Next I need to add some data.
So I'll click on data
and then edit data.
Add some details and
then click save.
To speed up entering the
data, you can use the
import and export feature.
First I'm going to
click export data to export
my single item to a file.
I'll save the file on
my local hard drive.
I can then open the file
in a text editor to add
more records, following
the format of the
existing records
in the file.
Notice how each field is
surrounded by quotation marks,
and that there is a semi
colon between each field.
To save time I'm going to
paste a set of records
I created earlier.
Back in App Studio I'll
click on import data and
select the CSV
file I edited.
Note that the image
column is empty.
I need to upload the
images separately using
App Studio. I'll upload
the image for each museum
and then accept the new
records by clicking save
for each
museum entry.
I want to show you one
last feature in page
layout design. I'm going
to use these bindings
to configure what information,
from the collection,
is displayed on the
list of museums.
Notice how the
preview updates.
I'm also going to edit the
detail page layout for
my museum's
collection.
In addition to being able
to map other columns
from my data source
into the placeholders
on the page layout, I
can also map columns
that have particular data
types, such as a phone
number to actions
on the page.
In this example, by clicking
on an icon of a phone,
a user will be able
to dial the museum's
information number.
Clicking on another icon
will display the museum's
location on a map.
Let me save
the changes.
The collection I just created
was a static resource.
In a static resource, the
items are embedded in the app.
The app can display the
items without needing
an Internet connection.
But I can't change the
collection without
generating the app and
redistributing it
to all my users.
On the other hand, I have
the option of creating
a dynamic resource.
Once an app has been
published using dynamic
resources, items you
create in App Studio are
stored in the cloud.
The app needs an Internet
connection to display
them. But I can edit
the collection within
App Studio and have the
changes automatically
picked up by all of my
users because the app
loads the collection from
the data services in
the cloud.
Now I've defined the
content for my app.
It's time to make a few
changes to how it looks.
Just before I start making
changes to the color
scheme and other user
interface elements,
I want to change the
order of my sections on
the main section screen. I
can do this by dragging
the sections to a new location.
When I'm done,
I'll save the changes and
click themes to move on
to styling my app.
On the themes page, I
can change the colors
of various key user
interface elements.
I can either user the
standard dark or light styles
or choose a custom
set of colors.
But I must be careful not
to choose combinations
of colors that make it
hard to read my content.
Notice how the preview
display updates to
reflect my choices. If you
select the custom style
you can choose a background
image. But again,
be careful that your
text remains legible.
It's best to use an
image that is very dark
and use light text, or use
an image that is very
light and use dark text.
The ideal image size
is 1,366 pixels wide
by 768 pixels high.
I'll save the
changes.
On the tiles tab, I can
change the appearance
and behavior of the tile
that represents the app
on the phone
start screen.
The Flip template enables
me to customize the
front and back of a tile
with different content.
The Cycle template cycles
through up to 9 images
from one of the collection
sections in my app.
If you have a section
that uses an App Studio
video data service
collection that you can
update the images on
your user's phone
by editing the content
of the data service in
App Studio.
This tile uses a scheduled
task that enables
your app to execute
code in the background
even if your app is not
running in the foreground
on the phone. And the
Iconic template shows a
single image with
customizable text for 3
different sizes of tile.
For my app, I'm going to
select the Cycle template
and configure it like this.
The final option configuration
choices for my App
Studio app are for
splash screen images.
A splash screen displays
as the app is loading.
If you create your own
custom images, they
should be 1,366 by
768 pixels in size.
You can upload these
images from your computer
or from your One
Drive account.
I'm using the same image
for both in my app.
I'll save the
changes.
If you do not intend to publish
your app at this time,
you can skip this process.
On the publish info tab
I'm going to complete
some information in
preparation for publishing
my app to the store.
I'll add a
description.
Select the
language.
And optionally include
an about dialog and
enable ads
in my app.
Next I want to associate
this app within the store.
Here you need to fill in
the information for the
4 parameters
listed.
App Identity, App
Display Name,
Publisher ID, and
Publisher Name.
I'll show you how to
find the information for
each parameter in
the order listed.
The first step is to
open another browser and
got to Windows
Dev Center.
At Dev.windows.com.
I sign in here with
my Windows ID.
It is important that you
use the same Windows ID
here in Dev Center as
you used in App Studio.
I will sign in
with my account.
Now I'll click on the
dashboard and from there
I click Windows
Phone Store.
On the dashboard screen
I click Submit App.
And on the Submit App
screen I click App Info.
On the App Info screen
I will enter the name
for my app, Visit
Venice Demo App.
And then click
Reserve App Name.
Here's where you collect
the information you need
for the first 3 parameters
you need in App Studio.
Next I will select the
package identity name
and copy it to
the clipboard.
And I'll switch back to
App Studio and paste the
name into the App Identity
field, then switch
back to Dev Center.
In the same manner, I
select the names reserved
for this app value, copy
it into the clipboard,
go back to App Studio and
paste it into the App
Display Name field.
Then switch back
to Dev Center.
I now select the Windows
Publisher Name,
copy it to the
clipboard,
go back to App Studio,
and paste it into
the Publisher
ID field.
Now back to Dev
Center again.
To obtain the information
we need for the last
field in App Studio,
I need to go to my
account screen. To do this,
I click on dashboard
and then click
on account.
On the account page I
select the Publisher name
and copy it.
I then switch back
to App Studio,
paste it into the
Publisher Name field,
click confirm,
and then
click save.
Before we leave Dev
Center completely,
there are a couple of items
I need to attend to.
I switch back
to Dev Center,
click Submit App, and
then click App Info.
In the name field, I type
in the name of our app,
and then click
Associate App.
I scroll down the page a
bit and set an appropriate
category and sub-category
for our app.
Setting the categories
correctly will help users
find my app. I set category
to Travel plus Navigation.
When I do that the
sub-category field is set to
the default value
of City Guides.
Looking at the drop-down
list, I think I'll stick
with City Guides.
I can set the
price for my app.
Because this app is not a
game, I will choose the
default setting for
market distribution to
distribute my app to
all available markets.
I'm now finished with
Dev Center and publish
info in App Studio.
Note, next we'll move on
to generating our app.
In this section we will
generate the Visit Venice
app package that I can
side load to phone.
Here in App Studio, I
have saved all my changes
so now I will
click finish.
App Studio will create 3
different types of packages.
And installable package
that you can side load
directly to your
Phone, Tablet, or PC,
a published package
that you can use to
upload your app to
publish to store,
and a source code
package that you can
download and then edit
with Visual Studio.
To start building a
package, I click Generate.
For this section, I want
to side load the app
to my phone. So I will
de-select publish packages,
and then click
generate.
It takes App Studio a few
minutes to generate the app.
And when it's done it will
send me a notification email.
Before I can side load the
app to my phone, I must
first install a certificate.
And I do that
clicking Install Windows
Phone 8.1 certificate
and the QR code for
installing the certificate
display. I will now go
to my phone and install
the certificate.
On my phone I
start the camera,
switch to the
Bing vision lens,
scan the QR code and
click the link.
At the sign in page, I
sign in with the same
Microsoft account that
I'm using in App Studio
by entering my user
name and password.
When prompted to download
the file, I click open.
I don't actually need to
tap the screen at the
tap prompt. I'm almost
immediately presented
with the prompt to add
a workplace account.
I click add. That finishes
the installation of
the certificate. Let's
go back to App Studio.
Back on the App Studio
screen, I will click cancel
to close the QR code
for the certificate.
To side load the app I need
to scan the QR code here.
Let me show you on my
phone how I can scan
this QR code to start
the installation.
Like with the certificate,
I start the camera,
switch to the
Bing lens,
scan the QR code and
click the link.
On the downloading file
prompt, I click open
and the file starts
downloading.
On the tap to open
screen, there's nothing
I need to do. And now
I'm presented with the
install a company
app prompt.
I click install. I'm again
prompted to tap to open
the appx file. But at this
point,the app has been
installed and there's no
need to do this again.
I'll ignore this second
prompt to tap and instead
tap the Windows
button on the phone.
I swipe over to
my list of apps,
locate Visit
Venice,
tap it and the
app starts.
I have now downloaded
and installed both the
Windows certificate and
the Visit Venice app.
In the next section, I
will show you how to
go about testing
the app.
Now I will test the app I
just side loaded to my phone.
I find Visit Venice in my
list of apps and pin it
to the start
screen.
I then increase the
size of the tile.
When I launch the app,
you'll see the splash
screen as it loads.
As I navigate through
the app, you can see
the various sections I defined.
You can see the
list of museums I added
in my collection.
And here you can see the
custom actions I defined
for the
museum items.
If I click on one of
the museum entries,
the information is displayed
on the detail page.
I can navigate between
entries by swiping left
and right. I don't need to
return to the list page
first. If I had to find
multiple detail pages for
this section, then
swiping would navigate
between the different
pages for the entry.
Having multiple detail
pages is useful
if your collection has
more than 4 columns,
as you can display
different column data on
different pages. You can
also see the action items
that I defined using
the action binding.
Clicking on the phone
number enables me to
dial the number and clicking
on the location item
would show the
location on a map.
Thanks for watching
this video.
If you want to learn
more about extending
and enhancing your app
using Visual Studio,
then watch the next
video, How to get you
the source code and
make a modification.
Have fun and build
some great apps.