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.
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/
Once you input your Live ID and Password, you will be taken to the Dashboard of App Studio:
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.
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.
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.
Similarly we will configure the “Bing” section with term “Shopping in Dubai” and we will filter Data Configuration by UAE as default country :
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:
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.
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.
Once you select and configure it, click on Save to move ahead for Splash & Lock.
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:
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).
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)
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.
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
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?
This article has been editorially reviewed by Suprotim Agarwal.
C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.
We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).
Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.
Click here to Explore the Table of Contents or Download Sample Chapters!
Was this article worth reading? Share it with fellow developers too. Thanks!
Vikram Pendse is currently working as a Cloud Solution Architect from India. He has 13+ years of IT experience spanning a diverse mix of clients and geographies in the Microsoft Technologies Domain. He is an active Microsoft MVP since year 2008. Vikram enables Customers & Communities globally to design, build and deploy Microsoft Azure Cloud and Microsoft AI Solutions. He is a member of many Microsoft Communities and participates as a Speaker in many key Microsoft events like Microsoft Ignite, TechEd, etc. You can follow him on Twitter @VikramPendse and
connect at LinkedIn.