Build Quick Windows Phone Apps using Windows Phone App Studio Beta

Posted by: Vikram Pendse , on 3/31/2014, in Category DNC Magazine
Views: 5745
Abstract: This article introduces the Windows Phone App Studio for Windows 8 phone & desktop and walks us through the features of this powerful little tool.

Mobile Phones have become nearly ubiquitous in modern life. As developers, we are faced with an exciting opportunity of creating mobile applications for millions of customers using Windows Phone, Google Android or the Apple iOS platform, amongst a few other ones. With Microsoft’s pairing with Nokia, developing apps for Windows Phone has become all the more attractive.

So far, developers have been using Visual Studio and Expression Blend to create Windows Phone apps. Combined these two tools help developers to create mobile apps with great ease. Additionally Microsoft has been taking some huge steps to improve the User and Developer experience on the Windows Phone Platform. Windows Phone App Studio is one such initiative. Currently in Beta, it’s an Online Phone Application Building Tool. Another initiative from Microsoft is its recently announced Project Siena which is a Metro App to design Metro Apps. Both these tools have got windows phone developers excited because of their powerful but easy-to-use features. In this article we are going to discuss more about some new features things in the Windows Phone App Studio.

This article is published from the DotNetCurry .NET Magazine – A Free High Quality Digital Magazine for .NET professionals published once every two months. Subscribe to this eMagazine for Free and get access to hundreds of free tutorials from experts

 

What is Windows Phone App Studio?

Windows Phone App Studio is a Web-based tool for potential Developers, Hobbyists and Enthusiast who wish to develop Windows Phone Apps with little efforts. It provides some unique built-in design templates as Start kits based on specific Themes. Users can then further customize these themes according to their needs.

It is a FREE Tool for all. The biggest advantage of the tool is for hobbyists and enthusiasts to create next generation apps without much prior development knowledge. All you need is a valid Windows Live ID, Enroll using it and once it is activated, Login and start building Apps. You can get started over here: http://appstudio.windowsphone.com/

The Portal as shown here gives you couple of options to know more about the Windows Phone Platform and guidelines for Application Development. Another advantage of this tool is that it work across browsers like Internet Explorer, Mozilla Firefox etc. Since this is “Beta” version, there may be couple of Bugs/Issues in the portal, which will eventually get fixed.

portal-dashboard

Building an Application for Windows Phone using App Studio

To start building Apps, you need to sign-in with your Live ID and login at http://appstudio.windowsphone.com/

signin-liveid

Once you input your Live ID and Password, you will be taken to the Dashboard of App Studio:

choose-template

As you can see, your Dashboard enables you to choose a Template for your app. It can be an Empty Template if you wish to customize it yourself and have a total control over it. Alternatively you can choose from “More templates” and pick any predefined template theme and start customizing it as per your needs. For our demo, we will pick the “My City” template and build an App using this template. Once you click on Create, you will see a step by step Wizard. Let us go through each step.

create-app

Step 1 : Content

Once you click on Create, the wizard moves to Step 1: “Content”. Here you can set the overall content of the Application as shown in the screenshot here.

step1-content

The screen consists of Info Block which can be customized using HTML5 (the first block). There are some other blocks like “monuments”, “special Places”, “history” etc. You can also add some additional Blocks like “RSS”, “Html”, “YouTube”, “Flicker” and “Bing” to leverage individual services offerings for your App. Here I am considering “Dubai” as City for my “My City” app. You can set the Title in “App title” box on the top left corner and change Images or replace the default images either from local image source or even from the Cloud. We will see this in the next steps.

Let’s first quickly build some Info and basic structure of the App using the Main Sections. It allows maximum 6 blocks, but for our demo we will reduce to 4. We will also add the “YouTube” and “Bing” Section in our App. The YouTube Videos will be added with the term “Dubai City”, so we will configure that as shown here. You can filter YouTube either with a User or Search Term as per your need. We are going for “Search” for this example.

add-youtube

Similarly we will configure the “Bing” section with term “Shopping in Dubai” and we will filter Data Configuration by UAE as default country :

add-bing

edit-button

Note: the Edit option helps you to customize the content for an individual Section. We will click it to edit the “info” section followed by “special places” as shown here:

edit-section-pages

edit-section-data

So here we get 2 Sections in Info as “Pages” and “Data”. Pages allows you to do Bindings for Content and also helps you to configure “Page extras” like Text To Speech, PinToStart and ShareText. This will appear on the AppBar. Section gives you a kind of RichTextBox which allows you to use your text with some basic Bold, Italic and Bullet Font effects. One you are done, just press “Save” which will take you to next Step.

Step 2: Theme

Themes allows you to change Images and apply different Styles to your content. Here I will be changing the background and Images.

section2-theme-style

section2-theme-images

We will select Local Images from my Machine. You can also get images from OneDrive (Earlier it was SkyDrive) and App Studio Resources.

Step 3: Tiles

In Step 3 “Tiles” helps you to complete the Iconography and Lock Screen setup for your app. For those new to Windows Phone, a Tile is an image that represents your app on the Start screen. Here you have a choice to select The Template for Tiles such as “Flip”, “Cycle” and “Iconic”. I am going for Flip.

section3-tiles-tilestyle

Once you select and configure it, click on Save to move ahead for Splash & Lock.

section3-tiles-splashlock

Splash & Lock allows you to configure Splash screen and Lock Screen. Note that the Iconography is as per the Windows Phone Marketplace guidance, so don’t worry about size of the icons much. It will even convert your JPEG images to PNG internally as per policy and UI design guidance.

Note: If you need some tips on building Marketplace ready apps, check this article Building Store Ready Apps for Windows Phone.

Step 4: Publish Info

After saving these changes, now we are all set to publish our Application to your phone and eventually to the app store, so the last step to “Publish Info”. In this final step, we will edit Publish Package information like App Description, Enable Ads, Setting the default App Language etc. as shown here:

step4-publishinfo

Generate Source Code and Publish App

Once you click on “Finish”, you will be redirected to final page of the wizard where you can download the Source Code (Generated by App Studio in the background).

generate-app-downloadcode

You need to click on “Generate” button to complete the Code Generation Process. By clicking on “Generate”, App Studio will ask you whether you want to publish App only for Phone or for both Phone and Windows 8.1 (Desktop), here we will choose for Phone and Windows 8.1 (Desktop)

generate-final-app

Once you click on “Generate”, the wizard will generate a QR Code for you along with “Download Publish Package” and “Download Source Code” to download on your local Machine, if you wish to customize it further . If you scan the QR Code and install the Certificate which you get on your LiveID via email, you will be able to install the Application on your Phone directly. You can also share the Application on social platforms like Facebook and Twitter, Email.

After downloading the Source Code, you can then open it in Visual Studio 2012 / 2013 (It is assumed that your local machine already has the Windows Phone SDK installed and configured). Once you open the Solution (Either Phone or Desktop), you can compile the Source Code and even test in the Emulator. The source code generated by App Studio will be in the Model View ViewModel (MVVM) Pattern. You can further customize the XAML and C# code as per your requirement and publish the Application to Windows Phone Marketplace as per the standard guidance of publishing Windows Phone Apps to the Marketplace.

output-windowsphone

For Windows 8.1 Desktop you can set the Windows 8.1 Project as Startup Project and Customize and Test it just like the Windows Phone Project

output-windows8desktop

And there you go! This way you can build next generation Apps for Windows Phone using Windows Phone App Studio Beta.

Summary

The Windows Phone App Studio is a unique tool which helps enthusiasts without a programming background, realize their app ideas and get a chance to enter the mobile app ecosystem . Even Developers who are ready to add advanced programming features but wish to have some cool designs complimenting their code, can use this tool and its templates.

Windows Phone App Studio comes with an Interactive built-in emulator which shows real time Content and supports dynamic text updates. Please note that this tool is useful only for Building Apps and Generating Source Code. For publishing Apps to Windows Phone App Store, it is recommended to revisit the Marketplace App Submission guidance provided by Microsoft. It is also highly recommended to use Marketplace Test Kit available in Visual Studio for passing the basic test cases before actual submission of Application to Windows Phone Store.

I hope this article provides you the jumpstart needed to get you to publish apps on the App Store. So what’s holding you back?

Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles
Vikram Pendse is currently working as a Subject Matter Expert in Avanade (Accenture, India) for .NET, Azure & Windows Phone Projects. He is responsible for Providing Estimates, Architecture, Supporting RFPs and Deals. He is Microsoft MVP since year 2008 and currently a Windows Phone MVP. He is a very active member in various Microsoft Communities and participates as a 'Speaker' in many events. You can follow him on Twitter at: @VikramPendse


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by Marc Gilmore on Tuesday, April 1, 2014 12:16 PM
Eagerly waiting for the weekend planning to make an app for the local church. Thanks for the write up.
Comment posted by Vikram Pendse on Thursday, April 3, 2014 3:55 AM
Thanks Marc Gilmore, Hope the article will help you to build your app quickly. Do let us know your feedback and experience for the same.
Comment posted by kunal on Friday, April 18, 2014 5:17 AM
Excellent article. Too good...
Comment posted by Vikram Pendse on Thursday, April 24, 2014 12:07 AM
Thanks Kunal !
Comment posted by Nicholas on Thursday, May 29, 2014 2:48 AM
windows phone 7 c sharp qr code reader dll
http://www.keepdynamic.com/dotnet-barcode-reader/qr-code.shtml

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel