ASU Logo

CIS105 App Development Project Page - Spring 2014

Note!

On Monday, April 15th, App Studio and the Windows Store had some major changes.  The Windows 8.1 app types is now accepted into the store.  I am also hearing reports that some students are having trouble uploading the legacy 8.0 phone project .xap files.  If you have this problem, try this: (1) use Firefox to generate and download your app (2) make sure you have replaced all placeholder content, including the splash screen and lock screen content with either your own images or images from the App Studio Resources, or (3) regenerate your project using the 8.1 universal project type and submit the windows download packages to the Windows store (not the phone store). Please report upload failures to me at randy.guthrie@microsoft.com with your publisher name, app name, and a screen shot of your error message. Don't forget to report successful certifications to:

Windows Phone App Certfication Reporting Link

Windows 8.1 Store App Certification Reporting Link

List of Certified Apps from This Semester (Leaderboard)

Windows Store and Windows Phone Certification Requirements

Contents

 

Office and Lab Hours Tempe Campus

For virtual office hours and remote support, please download and install Team Viewer (http://teamviewer.com) so I can see your computer and help you. Then e-mail me and if I am available I will try to help you.

Office and Lab Hours West Campus

Pre-Project Checklist

Optional for Aspiring Technologists

Some of the extra credit can only be done in Visual Studio running on Windows 8. We will have a couple of computers available in the lab but you'll be much more productive using your own computer. If you decide to go the extra mile, these additional steps will get you there.

Project Overview

Creating, marketing and supporting an app you recreated is highly rewarding and can be a big differentiator in your job search.  Most beginners think that the bulk of the work is in the "programming" of the app. The reality is that there is as much if not more work that goes in to the design of the app, artwork, and other creative elements needed when you submit your app to the store for certification. In this project you will make a simple "productivity" or "news" app that consumes either online content such as YouTube video, blog feeds, Pinterest (via rss), Bing search results, and Flickr image, and/or can display custom image and text content that you create yourself.  Once you complete the first release of your app, you will submit it to one or both of the Microsoft mobile app stores for certification and publication.

Terminology/Vocabulary

Grading (tentative)

Lecture Content

App Business Fundamentals

App Marketing and Strategy

Phone Project Workflow

  1. Do a little market research in the Windows Phone store to see what apps are already in the store around the topic you are thinking of.  If there are already 50 "news" or "fan" apps on the topic you are contemplating, then you may want to pick another topic. If there are only a few however, then see what they are about and what you can do better or differently. Sometimes it will be content, other times you might just do a better job of marketing.   Also look for leading "complementary" or competing apps.  For example, if someone is likely to use some popular app (say Instagram), you could build an "Instagram Guide" app that you can use the Instagram search term and when people search for Instagram they will find your app too.

  2. Jot down a few ideas for your logo.  Be careful about using well established logos and brands because you might find your app removed from the store if the brand owner complains.  Generally if you are making a "fan" app you can use team or brand logos without fear. Search Bing images or TheNounProject for a simple graphic to use as your base image, or if you have the time or skills you can make your own logo using the drawing tools in Word or PowerPoint, or an graphic design tool or your choice.

  3. Reserve your App Name in your store developer account.  If you aren't sure you can reserve multiple versions of your name and then release the ones you end up not using when you submit your app for certification.

  4. Create your logo.  You might have to try a couple of different versions before you are satisified.  Don't overly obsess about your logo. You can always refine it in subsequent releases.

  5. Sign into App Studio and select the "Start Building" icon.  Create an "empty" app. 

  6. Add sections appropriate to your app's purpose and subject matter

  7. Modify and edit the theme colors if it will improve your app

  8. Select the tile "style" and edit the tile titles content and images so it looks polished and professional in all three tile views NOTE: if you leave the default text and images in the Tile and Publish Info tabs you will likely fail certification

  9. Edit the Publish Information including the logo image and description making sure to change all place-holder text

  10. Review your app and snip a "screen shot" of one or more of your app section pages (snipping tool in Windows or command+shift+4 on Mac/iOS)

  11. Generate your app

  12. Download the Publish Package

  13. Log into your Developer Account at http://dev.windowsphone.com

  14. Click on the submit icon and work through the workflow (see this video how-to)

  15. Report completion of your app when submitted and again when certified

Art Asset Reference

Logo (App Studio Information Page): 160x160 .png format (tranparent background recommended)

Background   .jpg max file size 500KB

Lock Screen: 768x1280 .jpg max file size 500KB

Splash Screen: 720x1280 .jpg max file size 500KB

Store Logo: 300x300 .png format

Phone Screen Shot : 768x1280 (portrait orientation) or 1280x768 (landscape orientation) .png format

How-To Videos

Where to find the developer token on DreamSpark.com

How to Edit and Resize Images using Pixlr (for Mac users and PC users)

How to use Pixlr.com to make an image with a transparent background (for Mac and PC users)

Creating a custom logo from an Internet image using Paint.net

How to Make Background and Splash Screen Images using Paint.net

How to make the "screen shot" in App Studio that is required to submit your project to the Windows Phone Store

How to Use PowerPoint 2013 to Make Tiles and Promotional Images

How to Make an App Using App Studio

How to Associate your Windows 8.1 App to the Store

How to Submit Your App Studio Phone App to the Store

Submitting your Windows 8 app to the Store

How to Report the Completion and Certification of Your App

How to use Pinterest as an RSS feed to your app

How to use the different tile types in App Studio

How to put ads in your apps

Windows 8.1 App How-To (App Studio)

How to associate your Windows 8.1 app to the Store

 

New! How to submit a Win 8 Store App for certification

New! Privacy Policy for Windows 8 Apps

 

Windows 8.1 App Project Workflow

 

Project Reporting and Submission

Windows Phone App Certfication Reporting Link

Windows 8.1 Store App Certification Reporting Link

Downloads and Resources

Paint.net (image editing software for Windows)

Pixlr Browser Image Editor (for Mac or Windows)

The Noun Project (thousands of icons for free if you cite or cheap if you don't want to cite)

App Madness Challenge (get $50 & $100 cash cards for certified Windows 8 apps)

Privacy Policy Options for Windows 8 apps

Complete online course on App Store Optimization

 

Common Problem Solving

Problem: I am having trouble verifying my student status on the DreamSpark.com website or I never received the e-mail from DreamSpark when I tried to verify through my school
Solution: contact Professor Carlin or Randy Guthrie to get a code, then use the "I have a code" method of verifying

Problem: I am trying to create a developer account and it is asking me to verify my Microsoft Account using a code, and the code I got on DreamSpark isn't working
Solution: The confusion here is that your Microsoft Acccount (that used to be called a Windows Live ID or Xbox Account) is about creating a central identify on all Microsoft websites and products, and not about being a developer.  The Micrsoft Account has a verification process that is separate than the Developer account verification process (yeah I know it's not the most seamless process you could imagine). The DreamSpark code is used when setting up your developer account, not your Microsoft Account, and you enter it in a field called "promotional code" where the $19 cost is displayed. The Microsoft Account (Windows Live ID) verification code is sent to you either by e-mail or text message when you click a button, depending on what contact method you specificed.  You are usually prompted to enter it when using a public computer like in the lab. Sometimes the e-mail containing the code gets blocked by your e-mail provider. This happens more often with gmail than with other e-mail solutions. If you can't get the code, try going through the process on your personal computer. If that doesn't work, then the fastest way around it is to just create a new Microsoft account. Alternatively you can contact Microsoft Live Support

Problem: Phone Developer Account sign-up doesn't recognize that you are a student
Solution: Sign into Dreamspark.com, navigate to app development>Windows Phone 8 Learn More> & click "map account" and then retry making your developer account at dev.windowsphone.com

Problem: When I put in my credit card info Microsoft charged my account $1.57.
Solution: Part of the account validation process is for you to look up that charge and enter it into an information field.  As soon as you put in the correct charge amount, the charge is reversed. 

Problem: I don't know what to do after my app is complete in App Studio (apps.windowsstore.com)
Solution: Submit your app for certification at dev.windowsphone.com as shown in this video: https://vimeo.com/87248531 . Written instructions are follows:

- take one to eight screen shots of the main pages of your app: cmd+shift+4 for a Mac or use the snipping tool for PC (search using the term "snip"). Select only the lit part of the screen not the edge of the simulated phone hardware itself. Edit the pictures so they are 768 x 1280 pixels dimensionally.  PCs need to use Paint or Paint.net; Macs can double click on the image to launch the tools utility, or your can download Gimp or use

- generate your app on the apps.windowsstore.com website

- click the Download Publish Package" to your local computer. The file name will be WPAppStudio.xap ( we call it the "zap file" for short).

- sign into dev.windowsphone.com & click on the "submit app" icon.  If you only see the "join now" button, then you need to create your developer account first. Click on the box with the number one on it and fill out the requested information. Then click on the box with the number two on it and (1) upload your .xap file (the Publish Package) and after it uploads, you can the content (descriptions, search terms & images) for your app's page in the Windows Phone Store. Click save when done. Ignore the optional steps.

- Review and submit your app

- Log back into your developer account every 12 hours or so and go the dashboard to check if your app has been certified. If it has been, then report that your app is complete by filling out the survey form as explained here: https://vimeo.com/87155475 . Survey link is here: http://www.surveytool.com/s/S604E46D79

Problem: when I try to upload my .xap ("zap") file, I see an error message telling me that I need to install or don't have the current version of Silverlight
Solution: If you have a PC and are using the Chrome or Firefox web browsers, close them and try using Internet Explorer. If you are using a Mac and are using Safari, you have a couple of options: 1.
download Internet Explorer for Mac; 2. Install the Silverlight plug-in in Safari, Chrome or Firefox

Problem: I get errors when I try to upload my .xap file such as: 2006: The WMAppManifest.xml file isn't correct. ImageURI Path in the Template element is empty.
Solution: The official error list is here: http://msdn.microsoft.com/en-us/library/windowsphone/help/jj206735(v=vs.105).aspx.   Much of the advice assumes you are using Visual Studio but it can still be helpful to look the list over.  Generally try rebuilding your app and resubmit it.  If it still fails notify your professor via e-mail and provide a copy of your .xap file and we will submit it to the App Studio team to try and pin-point the problem.

Problem: dev.windowsphone.com step two wants me to upload an "app tile", a "background image" and "screen shots".  What are those?
Solution: The best way to understand what the information you are entering in the second step of submitting your app, go to
http://windowsphone.com, then click on "Apps and Games" and then "apps" and select one of the apps listed. The large picture on the store page is the "background image" and you can also see the screen shots and the description.  The smaller image you clicked on is the "Tile Image".

Problem: My app failed certification: what do I do now?
Solution: Open the certification test results, navigate to the bottom and read the tester's comments then look at the following "problems" and "solutions" to see if your problem is mentioned. If it isn't talk to Professor Carlin and she can suggest changes that might fix it. If you disagree with the tester's findings, then regenerate the .xap file and resubmit your app to the store without making any changes.  It will probably get certified by the next tester.

Problem: I failed certification because my app had content from the template
Solution: When you create an app in App Studio, even an "empty app", there is often place-holder content such as a logo or a few words in the description. This place-holder content has to be replaced with your own content or you app will fail certification.  App Studio does not check to see if this content was replaced by you, so you have to be diligent and make sure you haven't forgotten anything.

Problem: I failed certification because the tester thinks that my app information was about one thing but the app appears to be about another
Solution: If you have made more than one app you might have uploaded the .xap file from your other app my mistake, or if you were using a lab computer or a computer shared by another student in this class , you might have uploaded the .xap file from another student's project by mistake. If you are still using a shared computer, delete every instance of the .xap file from the Documents, Pictures and Download folders. Re-download your Project Package file from apps.windowsstore.com  and then resubmit your project on dev.windowsphone.com. You shouldn't have to make any other changes.

Problem: I failed certification because of a "pin to start" problem with my screen shot.
Solution: If your first section uses an HTML 5 datasource, there was probably a secondary "pin to start" window open at the bottom of the page.  That little pop up can't be included in a screen shot and is a bug in app studio.  The easiest way to fix it is to just delete that  one screen shot. If you want to include that page, then you can turn off the pin to start option in order to make your screen shot.  Go into that section's "Section Page" and then click the "extras" text at the bottom. In the screen that opens move the slider to disable "Pin to Start" and save changes.  Then go back to the review screen and take a new screen shot without the Pin To Start pop up.  Once you have the screen shot turn the feature back on.

Problem: I failed certification because my screen shot had extranous artifacts, phone chrome, etc.
Solution: The Windows Phone Marketplace certification requirements require clean screen shots that contain only the lit screen part of the preview. The screen shot can't include the part of the picture representing the phone hardware, or the background behind the phone. Correcting this is easy. Sign back into App Studio (http://apps.windowsstore.com) and take some new screen shots of your pages, being very careful to only include the screen and not the phone.  If you have HTML 5 pages that show the "pin to start" pop-up at the bottom of the screen, you can't include that in your screen shot. See the prior Problem/Solution set above for information on how to get rid of the pop-up.

Problem: My Windows 8 failed certification because my app referenced the Microsoft Privacy Policy and the test wants me to change to my own privacy policy.
Solution: See the Privacy Policy Solutions page.

Contact Dev Center Support

Randy Guthrie's Blog & Webpage