Super-Detailed First (MashUp)Windows Phone 7 App Walkthrough


Randy Guthrie – Microsoft Academic Developer Evangelist
http://blogs.msdn.com/MIS_Laboratory

I just spend the last couple of hours writing a draft project description for college professors who what to add a mobile application development project to their courses to give students a taste of the entire “software development life-cycle” or SDLC without getting bogged down into too much programming (or in this case programming at all).  In previous posts I mentioned the AppMakr browser-based development tool. In the following example I assume the student has no prior knowledge of the Windows Phone 7 ecosystem, and walk them pretty-much through the process from start to finish. Please give feedback if I’m missing something or made a mistake! 

Cheers,

Randy

Project Overview

In this project students will build a simple (but unique) Windows Phone 7 mobile phone app and submit it the WP7 app marketplace.

Required Tools:

Computer (Mac or PC) with:
Web Browser
Windows 7 OS (Mac will need to dual boot to Windows via Bootcamp or Parallels)
Windows Phone 7 Developer Tools: Emulator, Deployment Tool, and Registration Tool
Zune Client Software (download at http://www.zune.com )

Step One – Create Your Pro Account/ Start Your Software Company

1. Create an account at http://www.dreamspark.com

a. Sign-in: use your Windows Live ID or create one

b. Get Verified: verify as a student > Get verified through my school > continue and use the filters on the left: US > [ your state] > [your university]> Continue > [enter your school or other requested credentials]

2. Download the Windows Phone 7 Tools if you are using your own computer (must be running Windows 7 OS to download), or skip this step if you are planning to use a school lab computer with the tools installed

a. If you are running Windows XP you can get a copy of Windows 7 via MSDNAA from your CS department if you are currently enrolled in a CS class (will require complete rebuild; upgrade not available)

b. Install the Zune client application downloadable from http://www.zune.com for PC or Mac. Note: you need the Zune software to “side load” your apps directly to your phone for testing before submitting to the marketplace.

3. Create a student “pro” account at http://create.msdn.com using the same credentials (Windows Live ID/e-mail & password) that you used to create your DreamSpark account (note: you do not have to provide financial info/SSN unless and until you submit a paid app or one with connected to an ad server) Note: in the box where it asks for your publisher name, you are in essence picking the name for your own start-up software company, so I recommend being thoughtful and use a professional-sounding name

a. http://create.msdn.com: Member Registration/Join Now > Account Type [US, Student, Select “Terms of Use”, I Accept]

b. Fill out personal details (name, address, phone, e-mail): use real information, this a real business you are starting. Publisher Name is the name of your “company”

c. Select a gamer picture and Gamer Tag

Step Two – Create Your First (“Mash Up”) App

1. Create an App Maker Account at http://www.appmakr.com/

a. Click on the “Register” button

b. Enter an E-mail Address and password (re-enter password)

2. Build Your App

a. Log in and on your dashboard click “create new app”

b. Select “Windows Phone MashUp”

c. Enter the URL, RSS/Atom Feed or Search Term of a website with the data you want to build a MashUp app for. Some good examples are news sites, sports teams, college departments, libraries, event sites, celebrity web pages, musical group web pages, etc.

i. Note: check the Windows Phone 7 app marketplace first to see if a mashup app already exists for the site you are thinking about. There isn’t a rule about having more than one “Britney Spears” app, but if you want anyone to download yours be prepared to do a better job that what is already out there. You can also check the list of apps that others have made on the AppMaker home page.

d. Work on each tab of the app makr process; you can skip the monetize part if you want.

clip_image001

As you select each section, you can see the results in the emulator.

i. On the Art tab you select images for the various screens and icons from images displayed on the webpage, any other webpage you know of, or you can create and upload your own special images if you have the time, talent, tools and inclination to do so.

ii. Tabs you can add more pages so you can have news, schedules, picture gallery, etc.

iii. The “Customize” tab lets you add a “header image”. You can download a picture from the website and make the header using the cropping and other tools Windows Live Photo Gallery (free photo editing)

iv. “App Info” is the name, description, your contact info, etc. in case you want to put your app on the Appmaker market in addition to Windows 7 (note, you can only install apps from the AppMakr market if you side load them and then there is time limit before you will be forced to uninstall it)

v. On the Monetize tag you can put in an ad if you create an ad account (not required)

vi. Publish will create you app and when it’s done, you’ll get a link to download your finished app. You can always go back and modify and re-download. There may be some delay from the time you click on “Publish” and when the download link will become available since you job will go into a queue. Download you app and note the location; for most Windows users your file will end up in your “Downloads” folder.

Step Three: Test Your App in the Emulator

1. Your downloaded app has a really long name starting with your app name and then a bunch of random characters with a .zip file extension. Change the name to something short and meaningful, and change the extension to .xap .

2. Click on the Start Button > All Programs > Windows Phone Developer Tools > Application Deployment

clip_image003

Target the Emulator, and then browse for your XAP file. Click on “Deploy” and your app will now run on your local desktop emulator. Make sure your computer has an Internet connection or the feeds to the website won’t work.

Step Four: Test Your App on a Phone (optional but recommended and very cool)

1. Unlock the phone you are going to use

a. Connect the phone to your computer using the USB cord; make sure the Zune software is installed and launched. Make sure the word “Phone” appears next to Social on the menu bar at the top

b. Select the “Windows Phone Developer Registration” tool in the Windows Phone Developer Tools collection

c. Enter the Windows Live ID and password associated with your pro Windows Phone 7 account and click “register”. If the phone is already unlocked you can skip this step (it will say “unregister” on the button), or you can change the registration to your account

2. Use the Application Deployment tool the same as in Step Three (above) but target the device instead of the emulator in the drop down. In a few seconds the app will be published the phone. Note: if there is no SIM card tied to a valid phone account with a data plan in the phone, your app won’t work unless you are connected to WIFI ( you can set up in the settings app of the phone)

Step Five: Upload Your App to the Marketplace

1. Sign in to your App Hub account at http://create.msdn.com . Click on “Submit for Windows Phone” link/button

2. Fill out each page as follows:

a. On the “Upload Tab” name your app (for you own use), you’ll pick the Marketplace name on the next tab. Then point at your .XAP file. Use version 1.0 if you don’t already have a version of this app approved in the Marketplace.

b. The “Describe” tab takes the longest to fill out, because you have to submit not only text descriptions, but also at least one screen shot (but no more than eight), and a few other images. The good news is that most of them are created; you just have to make a copy of your .XAP file, change the extension back to .ZIP, extract the file and voila! The image files you need were made by the AppMakr program and put in the .XAP file.

c. On the “Price” tab is how you would set a price if you were selling your app, but I don’t recommend selling a MashUp app (note: if you do decide to sell your app be prepared to give Microsoft your SSN and bank account info because we only do direct deposit and report your earnings to the IRS). You also pick which countries to distribute your app to (be aware it is YOUR responsibility to make sure your app doesn’t violate foreign copyright, content and privacy laws)

d. Submit your app for testing and certification. You can decide to go “Beta” and only distribute to others, wait to submit to market after passing the tests, or go live immediately after you pass certification tests. If you fail the performance tests read the comments and fix the problem; usually for mash ups you have to fix a link or make images small so they take up less memory.

e. When you pass certification give yourself a huge pat on the back and let your colleagues know so they can download and rate your app.

Step Six: Maintain Your App

1. After you app is certified and in the market, think of an improvement you can make; either add a page or change graphics, etc. Re-download your “improved” app, test it per Steps 3 and 4, and resubmit to the marketplace but change your version to 1.1 or 2.0 or whatever. Guess what? When you update your version anyone who downloaded your app will automatically be notified there is a new version and has the option of downloading it.


Comments (1)

  1. Surf4Fun says:

    Nicely done Randy!