Creating Windows Phone and Window 8.1 applications using Microsoft App Studio

This article aims to present the Microsoft App Studio for creating applications for Windows Phone 8.1 and Windows 8.1.

A few months ago Microsoft released Windows Phone App Studio Beta, a service that allows any person without programming skills to can create applications for Windows Phone in just 4 steps: have an idea, add content, choose style and use the application. Recently, more specifically in the Microsoft //Build/ event, that took place last April, a new version of the service was released alongside the beta version of Windows App Studio, which in addition to the Windows Phone applications, allows the creation of Windows 8.1 applications.

The service can be accessed from appstudio.windowsphone.com. To start with this service, the user is required to have an Outlook.com account or, in case the user doesn’t have an account of these, any Microsoft Id will work. For accounts that not fits with theses, the email account can be associated with Microsoft Id, and for it the user should use the link http://bit.ly/1gywtmO or in login page, click in Sign up.

The first time we do the login, the website will show a screen for allow the App Studio to access our account, which can be changed later if we wish to. After this, we need to accept the terms of use and we need to define the user for the email account we are using.

At this moment, we are ready for start creating application! For it we only need to click the button “Start new project”.

App Studio provides a set of templates for help the users in creating application. Theses templates are application demos for a specific context which are more used.

Noteworthy is that all the templates are C # / XAML applications and are available for both Windows Phone 8.1 and Windows 8.1, except for the Web App Template which is only available for Windows Phone.

When selecting a template of type “Empty App” we are creating an application from scratch. This template is often used when the other templates do not meet the needs of the user or for more advanced users who already have some experience with App Studio.

The user will set all kinds of content, styles and will have to use all your creativity to build a “great app”. In the case of the “Web App Template” the user will also create the application from scratch, but in this case is given a base Url which will be the starting point of the application and have access to some buttons on “AppBar”, this template is ideal for website that suits to the mobile devices. On the other hand, other templates allow to have a quick guide
in the application we are building and we only have to change the data and customize the application.

Now, let’s see in practice how we create applications with these templates.

Contoso Ltd Template

After we select the template, a screen will be shown where we can have a first look at the app. This is a simple simulation the app for Windows Phone and Windows 8.1 that does not allow to navigate to the details pages.

This screen allows us to have an idea about the application without installing it. Let’s see the configuration for this template.

Content

The first page shows the application name and logo (left, at the top) and shows all definitions for the content of the app, which, in this case, has five sections:

• About us is an HTML section
• Catalogue is a dynamic collection section
• Team is a dynamic collection section
• News is a Bing section
• Contact us is a menu section which has menu actions

There’s a limit of up to six sections. After each section is created we can edit, delete or move the section position with the goal to define the best order for it.

For each section we can select one of the following options:

• RSS – A list of sets of information based on an RSS feed that you enter when creating the data source.
• Html – A single page of static text that you enter.
• Youtube – A list of videos with titles and descriptions based on a YouTube channel or search that you enter when creating the data source.
• Flickr – A list of images and their corresponding data based on a Flickr UserId or search that you enter when creating the data source.
• Bing – A list of news
• Facebook – A Facebook feed from a public Facebook page.
• Instagram – a Instragram feed based in a tag
• Menu – allow to create menu action which can use other apps (for example: using an address for Here Maps, using a phone number for make a call phone, and others)
• Collection – A list of items with columns of characteristics. The collection can be static or dynamic and if the collection is dynamic the data can be imported or exported for a CSV file.

A future feature will be the twitter feed, but at this moment this is not available in App Studio, but was mentioned in a //build/ session on this subject.

App Studio already has a comprehensive list of data sources, allowing the user to create compelling apps. However, these data sources are based on RSS feeds which have a limited number of items and some presentation limitations

Theme

In this page, we can define the background image or the background color, define the text color and the application bar color. There are three option: custom style (using a background image), dark style and a light style. The Select button allows to define the style and then we need to save the configuration.

Tile

In the Tiles tab, we can define tiles for the application and we can select one type from the three available types: Flip Template,
Cycle Template and Icon Template. In this case was selected the Cycle Template and the respective images.

In the Splash & Lock separator, we define the images for o splash screen and for lock screen, for both apps.

This page doesn’t mention the size of the images but when we try to upload it, will be shown the allowed size if our images don´t fit those values.

Publish

In this page, the language for the app is defined. For now it is only possible to select one. It is possible to define the title, the description, and we can define if the app has an About page or even ads (but it requires development in Visual Studio). Before the finalize step it is possible to associate the app with the store, which requires a reserved name in Store Dashboard.

After all configuration we are available to finalize the app by clicking in Finish button.

Finish

On this page you can view the applications for each target platform (not being able to navigate) and it is possible to generate the application to get the application packages for install on each device and then get the source code. Clicking on the “Generate” button we get a screen where we can choose which application we want to generate.

We can generate for both cases, which implies two different generations. However, for a more experienced user that uses Visual Studio to test our application, it is recommend the generation for Windows 8.1, because the generated code is an “universal app” solution that consists of the Windows Application project Phone 8.1, Windows 8.1 application for the project, shared between the previous projects and also contains a project of type “portable class library” with the whole data structure.

After this step, we can get the application packages that allow to test the application in our devices, or we ca get the source code and then test the application in simulator or in a device using Visual Studio (but for it is a requirement to have the developer account). Is possible to install the application package directly in the device using the QRCode provided and is possible to share, in social network, the url for the application.

When we generate the application for Windows 8.1 we get this screen

Where we can get the package for the Windows 8.1 application and then we can use PowerShell to install it in our PC with Windows 8.1.

And we can get the source code, which the solution is a Universal App, whit the following structure:

With the source code, each application can be extended in order to add new features such as:

• Add more resource strings (localization)
• Add ads configuration
• Add Twitter feed
• Change the user interface

amongst others …

Web App Template

Like it was mentioned, this template is only available for Windows Phone and this is a Web App. Let’s now see in practice how we can use this template.

When we select the Web App Template we will see this page

As we can see, the content of this app is only a reference for a url, which is a website that supports mobile devices.

For example, this template uses the m.microsoft.com url, but we can change it for use any another url, like: booking.com, m.sapo.pt, m.vodafone.pt, amongst other references…

The definition for Theme, Tile and Publish are the same as we saw in Contoso Ltd template.

When we click in the Finish button, we will get to a page for generating the application packages and the source code. And when we click in Generator we will see this screen

The final result of the application, using the reference m.sapo.pt is

The application from App Studio should be tested in different devices to ensure that the application works propertly and is like we defined. Only after completing the tests, the application must be submited to the store. Recall that in the Publish page we had the option to connect the application to the store, and on the final page after the generation of the application is provided in the reference to submit in store. The applications generated by App Studio will be pass in certification process like an application developed by a programmer.

For more advanced users, who wish to extend the application giving new functionality, they don´t have a way to submit the changes in the App Studio. The solution is to do a “merge” between the modified source code and the new version of the application. And starting the moment the source code is changed, the user is responsible for the creation of application packages using Visual Studio

For more information about this subject, see the curation Building apps without code using AppStudio that contains articles, videos and others resources about App Studio.

In conclusion, the App Studio presents a quick solution to develop applications for both Windows Phone and 8.1 for Windows, and we can extend the functionality of the application through the generated source code. I’d like to point out that, despite all the associated automation, there are some limitations that should be worked out in the future, so that applications generated by the App Studio will have more quality.