Microsoft App Studio
Timber Creek High School
BY KATHRYN SINGKORNRAT & MICHAEL POWELL
Introductions
 Kathryn
 Microsoft
Student Partner
 Computer
 Teaching
Science Undergraduate
Assistant at UCF
 Michael
 Microsoft
 Digital
Student Partner
Forensics Graduate Student
 Computer
Science Senior Design Assistant
Introductions
 Joe
Healy
 Technology
 14
Evangelist
Years with Microsoft
 Previously
worked with IBM, ES, and other
companies
 Covers
North and Central Florida
Introductions
 Stop
us if we go to fast!
 Feel
free to ask us questions, but please try
to save them until the end.
 We
will give you our email addresses if you
have additional questions later!
What Are We Going To Cover?
 App
Studio Walkthrough
 We
are going to show you how to make a 4
section application.
 Publishing
 How
Your Applications
to export to Visual Studio
 Questions
& Answers
What is App Studio?
 App
Studio is a web based tool that allows
you to build apps for both Windows Phone
and the Windows 8
 It
features a simple mouse driven UI
 Includes
prebuilt templates for content
and app ideas
What else can I do with it?
 You
can easily enable advertisements in
your applications to make money
 Your
applications can be published
straight from App Studio to the Stores
 You
can export your code to further work
on it in Visual Studio
Where do we begin?
 Go
to this address:
http://appstudio.windows.com
 Once
there click you will need to sign in.
Where do we begin?
 Think
of a place, a team, or a person that
would have a YouTube account, a
Facebook page, and a news feed or
personal site.
 We’re
going to choose the University of
Central Florida. Other examples would be
the Orlando Magic, City of Orlando, etc…
Where do we begin?
 At
this point you have two options:
1.
Create your own Live account, or sign in
with your existing account.
2.
Otherwise we will come around and sign
you in with our demo account!
Starting a New Project
 Once
you’ve signed in you will want to
click “Start a New Project”
Choose a Template
Choose a Template
 You
can click on any of the templates to
see an interactive example of the app.
 Use
your mouse to swipe up/down and
left/right to explore the template in the
preview window.
Choose a Template
 For
this demonstration we’re going to
show you how to make a simple
informational application.
 The
best template for us to use is the
“Empty App” template.
 Once
selected, click “Create”.
Now Name Your App
 In
the top left you should have a box to fill
in your application name:
Now Name Your App
 If
you plan to publish this application to
either the Windows Phone and/or
Windows 8 Store, make sure your that you
identify your application as “Unofficial”.
 Michael
has a funny story about why and
the NBA…
Give Your App a Logo
 Click
on “Sample Logo”, you can see from
this image we named my app UCF News
Give Your App a Logo
 Now
click on “App Studio Resources”
Give Your App a Logo
 You
can choose any of the logos they
give you for now.
 We
went ahead and found a logo that
matched the requirements. We wanted to
use this logo, so it stands out!
 Make
sure the logo or images are legal
for you to use!
Check It Out!
 As
we make changes the preview
application gets updated:
 Every
change you make
should appear quickly
within the preview window.
 Try
it out!
Now What Do We Do?
 Now
your application will need content!
 There
are four tabs, make sure you’re
viewing the first one labeled “Content”.
Now What Do We Do?
 At
this point we’re going to show you a
few examples for our application, but
you’re welcome to try any of the content
options on your own!
 We
are going to focus on the “Basic
Sections”.
The First Step
 Choosing
“Html” content as your first
content section is the easiest way to start.
 Click
this icon to add a Html section.
The First Step
 “Section
Name” is the title you want to
give this screen. For ours we chose
“Welcome” since it is the first screen users
will see when they open my application.
 “Data
Configuration” is the content. For
HTML this can be a simple text blurb.
The First Step
The First Step
 Once
you’ve written a blurb, and you like
what you have. Click “Confirm” to save
the changes.
 You
should now see a blue
square saying
“Html </> Welcome”
The First Step
 If
you click on the X in the top right, it will
delete this section.
 You
can make changes by
clicking on “Edit” beneath
the section.
The First Step
 You
should now see your new section in
the preview.
Saving Your Work
 At
any point you can click this button to
save the changes you’ve made:
 It’s
a good idea to do this frequently!
Read All About It!
 It
is common for large corporations, sports
teams, and the like to have RSS feeds.
 UCF’s
main website (ucf.edu) has a RSS
feed listed on it.
 http://events.ucf.edu/?upcoming=upcom
ing&format=rss
Read All About It!
 To
add an RSS feed to your app, click the
“RSS” button.
 We
named the section “Upcoming
Events” to match the contents of the RSS
feed. Data Configuration is the link to the
RSS feed.
Read All About It!
 Example:
Read All About It!
 To
see it in your preview
swipe right to left once:
Videos
 Text
is a great way to convey information,
but people like videos and pictures more!
 Let’s
add a YouTube channel.
 UCF’s
YouTube channel is conveniently
called “UCF”.
Videos
 You’re
now…
 Click
probably noticing a pattern by
the YouTube Icon to add a YouTube
section to your app.
Videos
 For
the “Section Name” we chose
“Videos”.
 From
the dropdown, we chose “User”, and
for the box beneath that we entered
“ucf”.
Videos
 There
down
are two other options under the drop
 Search
You
can tell it what to search for and it will pull
the newest related videos. This is great to help
users find videos that they might not know
about.
 Playlist
Playlist
allows you to control what set of videos
get displayed in the application. This allows you
to show videos from a variety of
users/channels.
Videos
 These
are the settings we used:
Videos
 How
it appears in
the preview:
Facebook
 Everyone
has a Facebook. This is an easy
way to pull information about your subject
into your application.
 UCF’s

Facebook URL is “UCF”.
https://www.facebook.com/UCF
Facebook
 Click
the Facebook Icon to add the
Facebook section to your application.
Facebook
 Here
are the settings we used:
Facebook
 Here
is the
preview:
Have You Saved?
 Now
would be a good time!
 Click
this button:
Give Your App Some Style
 After
saving, click on the “Themes” tab.
Give Your App Some Style
 By
default the “Dark Style” theme is
chosen.
Give Your App Some Style
 UCF’s
colors are black and gold. We want
to match those colors in our application.
 We
are going to change the
“Foreground” to the default yellow color.
 We’ve
also changed “Application Bar” to
a light grey so that it stands out.
Give Your App Some Style
 Here
is what we chose:
Give Your App Some Style
 Here
is how
the preview
looks now.
Give Your App Some Style
 Background
images are great final touch,
but are totally optional.
 Make
sure you find a dark background if
you have light text, and light background
if you have dark text.
Give Your App Some Style
 Click
the Upload Icon next to the words
“Background Image”
Give Your App Some Style
 We
chose “My Computer” to pick the
background we found online.
 For
this demo choose
App Studio resources
Give Your App Some Style
 Here
is an updated
preview. You should
see the faint UCF logo
in the background
now.
Give Your App Some Style
 Make
sure to save again!
Last Step Before Publishing!
 Tiles
are the last thing we need to worry
about!
 Tiles
are the application’s icons. You will
see them on a Windows Phone, or in the
Start Menu on Windows 8.
Tiles
 We
would recommend again that you use
“App Studio Resources” when choosing a
graphic for your tiles.
 We
are going to use the previous logo we
chose, for the tiles also.
Tiles
 Here
is how it looks
when you finish.
 Don’t
worry,
purple is just an
example color!
Users chose their
own color.
Splash & Lock
 Make
tab.
 These
sure to check out the Splash & Lock
are the images that will temporary
appear when your application is loading.
For our application we choose to the App
Studio resources.
Splash & Lock
 Here
is what we chose:
Splash & Lock
 Time
to save again!
 Once
tab.
you’ve saved click the “Publish Info”
Publishing Info
 Your
page
should be
similar to
our
example.
Publishing Info
 Here
you can finalize your application
name.
 You
can add a description for your
application. This can appear on the store.
 If
you want to publish an application that
isn’t in English, you can select the
language here.
Publishing Info
 You
do not need to worry about the
Privacy Statement URL unless you’re going
to make further changes with Visual
Studio. We’ll cover that in a minute.
 You
can enable advertisements on this
tab. This requires going through
PubCenter, which we won’t cover today.
Finished… Almost..
 Once
you’re done with the Publish Info
tab, click Finish.
Finished… Almost..
 Here
is how our app looks:
Finished… Almost..
 Play
with the previews. Make sure they
look good!
 This
is how your app should look on both
devices.
 If
everything looks good click Generate!
Generate
 Clicking
generate creates three things:
 Installable
package: An immediately
installable package that you can load onto
any phone, PC, or tablet running Windows 8.1.
 Publish
package: A zip file with screenshots,
your tile, and your appx package you can
take to Dev Center to publish your app to
Windows Phone Store and Windows Store.
 Source
code package: The complete source
code you can edit using Visual Studio 2013.
Generate
 It
will take just a minute or two for App
Studio to generate the packages.
 While
it is generating the packages the
button should look like this:
Finished!
Finished!
 From
this page you can download your
application and install it on your computer.
(This might not work on the school computers
if they have security in place!)
 If
you would like to see your application run
on a Windows phone call Michael over!
The Next Step When You Leave
 You
can export your code into Visual Studio.
 Take
what you learn from class and expand
your application!
 Try
whatever you want! Make an application
for anyone!
To Export to Visual Studio
 Click
the Source Code tab
 Click
Download Source Code
The End!
THANKS FOR LISTENING TO OUR PRESENTATION AND FOLLOWING ALONG!
Questions?
 App
Studio
 Publishing
 University
of Central Florida
 Computer
 Anything
Science
Else?