Make a Windows Phone App With App Studio!

You have my apologies for the delay in posting A lot has been going on here at MS, and I’ll be sure to tell you all about it…later. This post is about using App Studio to develop a Windows Phone app in under an hour. Yep, I said it. Under an hour! Read more to learn more!

App Studio is a great tool used by devs and non-devs to create really useful and appealing apps. It’s perfect for those new to app development on Microsoft’s platforms. For the more experienced developers, App Studio still serves a purpose. Experienced developers can use this awesome tool to draft a prototype of the app, download the source code, add more functionality in Visual Studio, and proceed to publish the app from there. Those that only want to use App studio, however, can publish directly from the tool. This post will explain how to do just that. Another great reference on this is Vivek Maskara’s article, Creating a Windows Phone app for your website using Microsoft App Studio. It also acts as a reference for this article, so I just had to give a shout out. In his tutorial, Vivek details making a web app. I won’t be doing that here; this tutorial is based on drafting a simple feed app from my favorite tech news site, Engadget. While your app doesn’t have to be dedicated to Engadget like mine, it may be easier to follow what I’ve done to the letter before flying solo.

STEP 1 – GET A MICROSOFT ACCOUNT!

This is very important! If you don’t have one of these, how are you going to use App Studio? Anyways, take a visit to the App Studio Page, and click the giant “Start New Project” Button. You’ll be brought to a sign in page. If you don’t have a Microsoft account, you’ll need to click the “Sign Up” button at the lower right corner of the page and create one. Go ahead, I’ll wait. After you finish that, you’ll need to use that account to log into the App Studio page. You’ll be asked to grant some permissions. Accept them, and we’re already off to a great start! When you take care of that, your screen should look like this, with the exception of my username:

firstpage
Your page should look like this with the exception of my username and that obnoxious black rectangle where your email address will appear

STEP 2 -DEVELOP YOUR APP!

Got it? Great! So this is where we may part ways, unless you’d like to create the . Click the giant “Start new project” button. Now, a page with a lot of attractive app templates are displayed. For the sake of this tutorial, we’ll be boring and select the “Empty App” template. You should now be presented with an empty phone app in the nifty emulator as well as 6 empty boxes under “Main Sections.” Just to get your feet wet with App Studio, we’ll create a simple RSS feed reader for your favorite website. As mentioned before, mine will be based on Engadget. Use the three sections I have marked and enter the RSS feed URL, Facebook page URL, and YouTube channel URL for the organization that interests you. Be sure to tap the “Save” button frequently. App Studio likes that.

5th page

STEP 3-CHOOSE YOUR THEME AND TILES

In the “Themes” tab, you get to play around with the different styles, light and dark, for your app. I prefer the way all apps look in dark, but that’s personal preference. When you’re done playing with that, move onto the “Tiles” tab. Here, you can add images that will appear on the phone’s Start Screen. When you decide to make an app to profit from, this is a very important step. Choose your style of template and adhere to the image restrictions for the tiles and splash/lock screens.

STEP 4 – ENTER PUBLISHING DETAILS

Here, you can add all the details required for publishing your app. You can add the title of the app, the app’s description, language, and store association details.   If you have your own privacy policy, you may enter the URL, or one will be generated for you. For monetization purposes, consider allowing ads on your app. You can easily do this by tapping the “Enable ad client” switch.  After you’re done, make sure to press the “Save” button. Your page should look something like this:

6th page

STEP 5 – BUILD YOUR APP!

After clicking the “Finish” button, you’re brought to a new page with a preview for your app. Start by clicking the “Generate” button. A dialog screen will open and present a choice of generating your app for Windows Phone 8 or a universal Windows Phone 8.1 and Windows 8.1. Logically, of course we’d want to generate a universal app, but there are some issues with it as of now, so we’ll settle for a Windows Phone 8 app. Under “Generation type”, select both “Publish Packages” and “Installable Packages.” Installable packages allow installation of the app for testing on a physical device, and Publish packages allow the app to be pushed to the Windows Phone Store. Though we won’t be covering publishing in this tutorial (I gotta keep you coming back), for future reference, it will save a step for publishing later. Again, your page should look like the picture below. Press the “Generate” button.

7th page2

STEP 6 – INSTALL YOUR APP!

After clicking “Generate”, App Studio will get to work on packaging your app. You’ll receive an email with the required Windows Phone 8 certificate. Using your Windows Phone, install the certificate. Finally, you can install the app from the email by tapping the name of your app  with the phrase “Installable Package ” behind it. You’ll be asked to open or save the file. Open it, and your app is being installed! Super easy, right?

Hope this helps anyone looking to get started in some Windows Phone development! You can find my app, Engadget Insider in the store here.

One Comment

  1. Sandeep said:

    Please update how to add custom user control in listview with sticy header in wp 8.1 using c#

    November 22, 2015
    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *