AppMakr Student Handbook

advertisement
AppMakr Student Handbook
How to create a Windows Phone 7 App
and upload it to the App Hub
What is AppMakr?
• AppMakr, created by PointAbout, is the largest
Do It Yourself mobile app creation platform for
iPhone, Android and Windows Phone apps.
• AppMakr is used by brands like PBS, Newsweek,
PGA TOUR, Perez Hilton, Washington Post,
Harvard Business Review, US Congress, MacLife,
Accenture and thousands of others.
• Over 1.5% of all apps in the iTunes App Store
were created using AppMakr.
What is the AppMakr
Student Handbook?
• The AppMakr Student Handbook documents
the process a student can use to create a
Windows Phone 7 application using AppMakr
and upload it to the Microsoft AppHub.
• AppMakr applications are called MashUp or
Content Aggregation apps.
• That means your app will aggregate
information from multiple related sites on the
web and bring them into one easy to use app.
Table of Contents
• CHAPTER 1 – GET AN APP HUB ACCOUNT
• CHAPTER 2 – CREATE AN APPMAKR APP
• CHAPTER 3 – UPLOAD YOUR APP TO APP HUB
GET YORUSELF AN APP HUB ACCOUNT
CHAPTER 1
Sign up for DreamSpark
• The first step is to get a DreamSpark account.
You’ll need a free Windows Live id for that.
– The DreamSpark site will help you though that
simple process.
• If you already have a DreamSpark account,
sign in and let’s get started.
Sign up for App Hub
• Select the Windows Phone link under the Download
Software link on the DreamSpark home page
• Once there select the Register for the App Hub link
– Select Student as your account type on the App Hub
registration page and enter your contact information
• You will get an email to verify your registration.
– Make sure you use a valid email address that you check.
You may want to make sure that this email doesn’t get
filtered to your SPAM folder – It happens sometimes.
Get Verified by GeoTrust
• Next you will receive an email from a company called GeoTrust.
– This email will ask you to visit a site where you will be asked a set of
questions only you should know the answer to. This will verify your
identity for the App Hub Marketplace.
• After GeoTrust has verified your identity, you will receive a second
email from them that asks you to send a signed copy of an ID such
as a drivers license.
– It’s all about making sure people are identified so that they can receive
payment for and take responsibility for their work. This second email
can take up to 2-3 days before you receive it.
• After you send in the signed copy of your ID, GeoTrust sends
Microsoft the identification information; this can also take up to 2-3
days.
– At least you only have to do this once!
CREATE AN APPMAKR APP
CHAPTER 2
Step 1 – Getting Started
Go to the AppMakr
beta site and log in.
Select Windows Phone
MashUp and click the
‘Choose This’ button.
Step 1 – Getting Started (cont.)
Enter a URL for the site
that you want to use as
the basis for your app.
Enter your URL and
click the ‘Create App!’
button.
Step 1 – Getting Started (cont.)
AppMakr will attempt
to collect feeds and
media from the URL
that you have provided
and will prepare your
app for customization.
Step 2 – Add a Title and Icon
Once AppMakr is done with
prep, you are presented with
the screen where you can
begin specifying images for
your app.
Let’s explore this screen;
there are a set of options
across the top that represent
the steps you go through the
create your application:
–
–
–
–
–
–
Art
Tabs
Customize
App Info
Monetize
Publish
Step 2 – Add a Title and Icon (cont.)
The lower part of the
screen is divided into two
sections.
On the left, we have
elements that defined the
interface and visual
elements of the
application. The right
hand side contains an
application simulator.
Using a simulator, you are
able to see and use the
application before it’s
completed.
Step 2 – Add a Title and Icon (cont.)
Enter an Icon Display Name
for your app. This is the
default text that appears in
your app header so choose a
good name here.
Next you can specify the
image used for the Tile and
Icon, as well as an image that
will be used for Splash screen.
Clicking on ‘Save’ will save
your selections and will add
the Logo image on the Tile in
the upper left hand corner of
the simulator.
Step 3 - Add Additional RSS Feeds
a.k.a. Tabs
Click on “Tabs”
On this screen we can
specify additional RSS
feeds that will be
available within your
app.
RSS feeds are XML
documents that provide
lists of stories, pictures,
video, etc. Finding RSS
feeds for sites can be a
little tricky.
Step 3 - Add Additional RSS Feeds
a.k.a. Tabs (cont.)
First look for this
symbol:
This represents a link to
the RSS document. Click
it and your browser will
bring you to the
document and you will
be prompted to
subscribe to the feed.
Step 3 - Add Additional RSS Feeds
a.k.a. Tabs (cont.)
Other ways to find RSS
feeds include searching
for the term RSS on
your primary site.
Step 3 - Add Additional RSS Feeds
a.k.a. Tabs (cont.)
This may bring up a list
of RSS documents that
are available from your
primary site.
Step 3 - Add Additional RSS Feeds
a.k.a. Tabs (cont.)
Here is an example of
what an RSS feed looks
like in the browser. This is
a great candidate for
adding content to your
app. There are headlines,
images and interesting
stories.
Since RSS feeds are
updated automatically,
your app will always have
fresh content.
NOTE: RSS feeds should be avoided if they
contain graphic images or language.
Also be aware that if you intend to profit
from your app, you will want to make sure
you have the rights to use the content.
Otherwise keep your app free.
Our recommendation is to look at the
content your school has on their web site
as a great place to start such as feeds
about news, sports, etc.
Step 3 - Add Additional RSS Feeds
a.k.a. Tabs (cont.)
Copy the URL from the
address bar of the
browser, click the ‘Add
an RSS / Atom Feed’
button.
Step 3 - Add Additional RSS Feeds
a.k.a. Tabs (cont.)
When you add an additional feed,
you are promoted to select an icon.
Select an icon that best fits the
content of your RSS feed. There are
lots of icons to choose from so
scroll down to find the one that
best fits your feed.
Give the new RSS feed a unique
name.
Once you have added the
additional feeds, click save and use
the Simulator to launch the app.
Step 3 - Add Additional RSS Feeds
a.k.a. Tabs (cont.)
You can test your application
by clicking your app Tile.
You will see a list of the icons
and titles you specified.
Clicking on one of the items
in the list will bring you to the
list of headlines from the RSS
feed. If there is an image
associated with the story, it
will appear next to the
headline.
If you click a headline you will
be brought to the full story.
Congratulations! You have a
working Windows Phone 7
app.
Step 4 – Customize Colors
Click on “Customize”
Here you have the option of uploading a
banner and/or changing the colors for
your app screen.
A banner image must be a 640x88 PNG
file. Adding a banner is optional. If you do
not add a banner, your app name is
displayed as the header.
Changing colors us useful to make your
app match the colors of the main site you
are pulling feeds from. You will need to
use the HEX color values. If you don’t have
them all memorized, this web site can be a
useful tool:
http://w3schools.com/html/html_colors.a
sp
Once you are done making changes, click
the ‘Save’ button to have them applied.
Step 5 – Add Application Details
Click on “Add Info”
On this screen you can add the
details about your application
including:
–
–
–
–
–
Title
Description
Web Site
Support contact
Cost
You can also opt to have your
app listed in the AppMakr
Gallery. AppMakr is a popular
site making your app much more
discoverable.
Step 6 – Monetize
Click On “Monetize”
Note: This step is optional and
the details of signing up for
pubCenter are not covered here.
Here you have the option of
registering with the Microsoft
pubCenter. This feature will inject
advertising into your application.
When users of your app click on
the ads you make money. Pretty
cool!
Register with pubCenter and start
making money for every time
your app is launched or navigated
even if the app is free.
Step 7 – Publish
Click on “Publish”
Check out your App Quality
Index (AQI). If the bar is green
and filled towards the right
then you have a great score
and should be ready for
submission to the Microsoft
App Hub.
If the AQI is only filled a small
amount and is red you may
need to do some more work
on your application.
Step 7 – Publish (cont.)
Click on “Build App” to
have AppMakr submit
your app to the build
queue.
AppMakr will create a
downloadable ZIP file
ready for submission to
the Microsoft App Hub.
When the build is
complete you will see a
Download App button.
Click this button to
download your app.
UPLOAD YOUR APP TO APP HUB
CHAPTER 3
Step 0 – Prep Files
• Unzip the package from AppMakr into a new
sub-folder
• Rename the ZIP file to XAP
Create Tile Images
• App Hub requires 3 Tile Icons
• AppMakr gives you one of these
and is called Background.png
• Use Paint to create the other 2
200x200
173x173
99x99
Create App Screen Shots
• App Hub allows you to upload several screen
shots.
• We recommend that you create 3 screen shots
for your AppMakr app using the AppMakr
simulator:
– Main Screen
– List of Articles
– Article View
Step 1 – Start the Submission
Got to http://create.msdn.com and
log into your App Hub account.
Select ‘my dashboard’ then
‘windows phone 7’ from the drop
down menu.
Click ‘submit new app’.
Step 1 – Start the Submission (cont.)
You will note that uploading
your app to the App Hub is a 5
step process.
The first step allows us to
provide the name of your app,
the platform, language,
version number. There is also
a cross hair target that you
click to upload the XAP file for
your app.
Once you have the form filled
out. Click ‘Next’.
Note that at any time you can
click ‘Save & Quit’ to save
your submission and return to
it later to finish the process.
Step 2 – Description
In step 2 you provide a detailed
description of your app and set the
appropriate app category.
Select an appropriate category for
your app. If your app is leveraging
news feeds then ‘News & Weather’
would be a good category. If you are
using sports feeds then ‘Sports’
would be a good category.
Adding keywords will make your
app easier to search for.
Ratings and Certs are not required.
The legal URL would be the URL for
the site you are drawing your feeds
from.
Supply your email for support.
Click ‘Next’.
Step 3 - Artwork
The App Hub requires Tile,
Icon, and screen shot
images.
We already created these in
step 0 so all we need to do
now is click each image
target on the form and
upload the images.
When you have set all the
required images, click ‘Next’.
Step 4 – Price your app
Here is where you can
specify the price of your
application.
For your first app you may
want to select ‘Free’ or
$0.00 in order to get an
app into market.
As your apps become
more sophisticated you
can begin to charge for
them or use pubCenter to
generate income from ads.
Click ‘Next’.
Step 5 – Submit for Certification
One click away!
If you are happy with your
submission then click
‘Submit for certification’.
If you want to save your
work and return to
complete the submission
later click ‘Save & Quit’.
Please note: it can take a
maximum of 5 business
days to complete the app
certification process.
CONGRATULATIONS
You are a
Windows Phone 7 Developer
Download