YouthSpark

#WeSpeakCode
Make an app with Windows App Studio
1 Hour Workshop
<< Aljohn Manalastas Viloria, Microsoft Student Partner >>
Adapted from Windows App Studio Curriculum, Microsoft Educator Network (http://aka.ms/appstudioeducation)
Who am I?
• Introduce yourself to your students!
• Aljohn Viloria
• Third Year student at Nueva Ecija Uiversity of Science and
Technology
• Information Technology,Major in Database Management
• Microsoft Student Partner
• President Neust Microsoft Society
• Member,iTech Society
What Apps do you use?
• Do you know these apps?

Social Apps Games

Tools, Productivity and Communications

Do you know what
an App is?
What is an App?
• An Application is a program or a piece of software designed to fulfill a
particular purpose.

• Applications are usually downloaded by a user to a mobile device like…

• Smartphones
• Tablets
• Computers

• There are thousands of Apps in different app stores…

• Windows Store
• iTunes App Store
• Google Play
Why do people build Apps?
• Everyone has different reasons to build an app:
• To make money by selling the app
• To promote a product, a movie, or a sports event
• To maintain contact with customers
• To deliver location based information
• To offer a mobile version of a desktop application
• To publish media on a mobile platform
• To demonstrate your programming skills

• If every App needs a purpose, what purpose will you give your
app?
How can we build an App?
• App development also has its own lifecycle!

Use a tool or Monitor App

Test App on Publish App
Plan/Design kit to Create and Receive
Real Device in App Store
App Feedback
What is Windows App Studio?
• A web-based app development platform
• Point-and-click development with no coding required
• Useful for Information and Promotion type apps
• Publishes to the Windows Store for Windows 8.1 and Windows Phone 8.1
• Enables you to extend or enhance your app with code

What are some examples of

Information and Promotion apps?
What kind of Apps can I create?
• App Studio is best suited for Information and Promotion type apps such as:
• Fan apps – bands, movies, sports teams
• Guides – vacation destinations, my home town
• Collections – recipes, personal training records, videos, photos
• Store front – product lists and information
• Events – wedding or party planning

• You can:
• Use content from the Internet by linking to it from your app
• Use your own content embedded in the app
• Consider privacy and ownership – what content can you use?
Demo slides…
To be updated and tested!
Demo: Sign in to App Studio

• Sign up for a free

Microsoft account if you
don’t already have one
https://signup.live.com
• Sign in at: http://
apps.windowsstore.com/d
efault.htm
• Visit the Dashboard and
How To pages
Demo: Creating an App, Part 1

• Creating a new app

• Adding a description and
a logo
 Designing and Creating an App: Configuring
App Content (Overview)
Data PicturesSource AboutSource ChurchPicturesSource
Sources (Flickr) (HTML5) (Flickr)

Sections/ Pictures About UsefulLinks (Menu)

Menus (Section) (Section) Action Items Section Items
• URL • Venice Churches
• Email
• Phone
 Designing and Creating an App: Adding
Content Using HTML5
“HTML5 is a markup language used for structuring and presenting content for
the World Wide Web and a core technology of the Internet .”
http://en.wikipedia.org/wiki/HTML5

<p>HTML5 is a <em>markup</em> language
used for structuring and presenting
content for the <strong>World Wide
Web</strong> and a core technology of
the Internet.</p>
HTML5 is a markup language used for structuring and
presenting content for the World Wide Web and a
core technology of the Internet.

App Studio enables you to include custom formatted content in your app by
using an HTML5 data source in a section.
Designing and Creating an App: Adding a
Menu
• A menu section contains a collection of menu items.
• A menu item can be:
• A section item that links to another section in your app.
• An action item that can perform tasks such as open a webpage, send an
email message, call a phone number, launch a music player, or start a
search operation.
• Each menu item has a title and an optional image that display in the app on
the phone.
Data Sources: Review of Types

Flickr HTML

Bing RSS

YouTube Collection
Creating an App: Configuring App Style
On the style page, you can customize the colors that your app uses:
• Accent brush – used for app title
• Background brush or image – used for app background
• Foreground brush – used for text
• Application bar brush – used for application bar background

Colors in the palettes are based on the standard Windows Phone color schemes
but you can use others that are not included here.
Creating an App: Generate
When you have finished creating your
app in App Studio, you can ask App
Studio to generate it. You can then:
• Install the app on your phone – you
must install the App Studio
certificate first
• Share the app with other App Studio
users in an in an email message
• Publish your app in the App Store
• Make your app public in App Studio
• Download your app
Demo: Creating an App, Part 3

• Choosing a style
• Generating the app
• Sharing the app
Managing your Apps with the Dashboard
In App Studio, you can use the Dashboard page to:
• List your apps
• Start editing your apps again
• Manage your profile
Review — what did we do today?
• Why should I build an app?
• How do I create an app?
• Introduction to using App Studio
• The basics of app design
Appendix:
More info about
Windows App Studio
(to be updated)
#WeSpeakCode Overview
YouthSpark #WeSpeakCode:
A week designated across the Asia Pacific region to encourage
people to give coding a try

Campaign Geography:
Asia Pacific
Campaign Hashtags:
Campaign Period:
#YouthSpark
January - March 2015
#WeSpeakCode

Key Milestones:
• (8-14 December 2014) Global Hour of Code
• (January 2015) #WeSpeakCode Launch
• (23-29 March 2015) #WeSpeakCode
www.wespeakcode.net
Campaign Timeline
Jan
(Jan 13) Public announcement of YouthSpark
#WeSpeakCode, via:
• Campaign kick-off blogpost
• Email out to teachers, schools, colleges, universities,
community centers, youth organizations, and
YouthSpark community to sign up to try code during
23-29 March 2015 when all of Asia is saying
#WeSpeakCode
(Week of Jan 26) Start promoting #WeSpeakCode
ThunderClap
2015
Feb
Reminder to teachers and schools to sign up to try
code during 23-29 March 2015 when all of Asia is
saying #WeSpeakCode
(Week of Feb 2) Announce #WeSpeakCode Social
Media Contest
(Week of Feb 2) ‘Back-to-school with Code’: Email out
to MSPs to adopt their alma mater and volunteer to
teach a class basic coding skills between March - April
(Week of Feb 23/TBC) Kick-off email from APAC Area
Vice President Cesar Cernuda
(Week of Feb 23) Train-the-trainer for MSPs on Kodu,
TouchDevelop and Windows App Studio (via Lync)
Mar
Reminder to teachers and schools to sign up to try
code during 23-29 Mar 2015 when all of Asia is
saying #WeSpeakCode
Hour of Code & Kodu Train-the-Trainer for
employees, MACHs and interns (via Lync)
#WeSpeakCode, 23-29 March 2015:
• #WeSpeakCode in-country events
• #WeSpeakCode ThunderClap to blast out a
timed Twitter, Facebook and Tumblr post from
everyone who have signed up
• Launch of Microsoft Virtual Academy training
Coding coaches and MSPs to teach basic coding skills
(The Hour of Code and Kodu) in schools, colleges,
community centers and universities
Education white paper on which countries are
incorporating computer science in their curriculum
(TBC)