Creating a Windows Phone app for your website using Microsoft App Studio

Microsoft aims at making it easier for developers to get started with app development on Windows platform. Our website too has a similar goal and we want more and more developers to start developing apps for this platform. To make life easier Microsoft started a new programme, App Studio where less experienced developers can have a go at making apps for Windows Phone and desktop. It’s a wizard type of thing where you get various customizations to make your app personal. Even some experienced developers use it to develop a prototype. After you are done with making an app in app studio, a project zip can be generated which can be further edited in Visual Studio. Otherwise you could directly publish the app from App Studio. Here’s how you could create an app using Microsoft App Studio

Step 1. Go to your App Studio account

Visit:

http://appstudio.windowsphone.com/

Log in to your account or sign up if you aldready don’t have one.

Step 2. Grant permissions to App Studio

When you log in to app studio for the first time it asks for certain permissions. Grant it those permissions and move forward

Step 3. Start a new project from the dashboard

When you log in, you will be taken to a screen that would list all your previous projects. Start a new project from this screen.

Step 4. Choose an app template for your project

You could choose from multiple pre-defined templates that help you get started quickly. Here we will be choosing Web App Template for making an app for our website http://www.windowsapptutorials.com.

Note: Web App Template supports only windows phone and not windows 8 for desktop. So you can publish this app only for windows phone.

Click on Create to move to the next step.

Step 5. Fill in the details under Content tab

  • Enter the App Title. Here the app name is `Windows App Tutorials`
  • Enter the base URL for your website
  • Customize App bar buttons if you need to
  • Change the Share actions to personalize it to your needs
  • Save the changes and move to Themes


Step 6. Selecting Theme for your app

You could modify the default theme for your app and choose between light and dark. You can even make a custom style for the app. Play with the customizations, save it and move to the next step.

Step 7. Add tile images, content, lock screen image and splash screen

Under the tab Tiles you can choose amongst Flip, Cycle and Iconic tiles and set its image and content. Also you can add a splash screen image and lock screen image for the application. Save these changes and move to the last tab, Publish Info.

Step 8. Fill in the publish info for the app

This step deals with the details which one usually finds under WMAppManifest.xml while working in Visual Studio.

  • Enter the app title
  • Choose default app language
  • Write something in the app description
  • Enter the desired app display name

Step 9. Associate app with the store

If you plan to publish the app in windows phone store then you need to fill in the required details under Associate App with store under Publish Info tab. Fill all the details correctly and confirm it. Similarly if you want to enable ads in your app then you need to check `Enable ad client` and fill in the details in `Microsoft pubCenter data`. For this you need to have a pubcenter account and create a new application and its ad units using that account. Those details need to be filled in here to enable ads. For now I am skipping ads to give you guys the best app experience (after all this would be our official app for now).

Save changes and click on Finish.

Step 10. Generate packages

Click on Generate to build your app and generate Download Package, Publish Package and Source code package.

You will be notified that windows 8.1 is not supported. Check Publish packages and Installable packages in the dialog box that pops up. Click on generate to get the packages.

It will takes a minute or two to build all the packages for you. Then the packages will be displayed to you with instructions to use it.

Step 11. Install Windows Phone 8 certificate to your phone

If you wish to deploy the app on your phone then click on `Install Windows Phone 8 Certificate` and scan the QR code to get the certificate installed on your phone.

Tap to open the key file and install it on your device.



Step 12. Download installable package

Download the installable package in a similar fashion by scanning the QR code and navigation to the embedded link.

Tap on the XAP file link to install it to your device.

Step 13. Download Publish Package

Lastly download the Publish package which contains the app XAP file so that you can submit the app to the store.

Step 14. Submit the app to the store

Now that you have successfully created an app, you could submit it to the store for others to see it. If you don’t have an account then sign up at

http://www.developer.windowsphone.com

Log in to your account and click on Submit App

Step 15. Click on App Info to fill in the app name, price and other info

Enter some for your app, choose a price and fill in other relevant info

Step 16. Upload your app package and other info

Save the changes in app info and move to Upload and describe your package.

Choose the XAP you earlier downloaded as Publish Package and upload it.

Start filling in other details once the app package has been uploaded.

Add a app title icon which will be visible in the marketplace and optionally add promotional images. You also need to one mandatory screen shot of the app.

Save the changes and click on Review Submission. Finally review your submission and check for any errors. If everything is correct then proceed to submit your app.

You have successfully created an app for your website using Microsoft App Studio and published it to the store. Sound off below and show off your apps created using App Studio. I will add another post explaining how you could edit an app created using App Studio using Visual Studio to add more features.

Here’s the marketplace link of the app we just created. Do download it and stay updated with our latest posts.

http://www.windowsphone.com/s?appid=42f23a4d-4477-4aba-9492-d124b0a737a9

 
If you want to make a simple feed app using app studio then this article may be useful. It explains how to draft a simple feed app for Engadget.