The purpose of this article is 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 create applications for Windows Phone in just 4 steps: have an idea, add content, choose the 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, that in addition to the Windows Phone applications, allows the creation of Windows 8.1 applications.
The service can be accessed from appstudio.windowsphone. 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, any Microsoft Id will work. For accounts that does not fit with this, the email account can be associated with a Microsoft Id and for it the user should use the link http://bit.ly/1gywtmO or in the login page, click on Sign up.
The first time we do the login, the website will show a screen to allow the App Studio to access our account, that 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 to start creating the application! For it we only need to click the button “Start new project”.
App Studio provides a set of templates to help the users create applications. Theses templates are application demos for a specific context that are more often 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 that 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 need 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 that will be the starting point of the application and have access to some buttons on "AppBar", this template is ideal for a website that suit mobile devices. On the other hand, other templates allow a quick guide in the application we are building and we only need 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 of the app for Windows Phone and Windows 8.1 that does not allow navigation to the details pages.
This screen givews us an idea of 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 that 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: Allows creation of a menu action to be used in other apps (for example: using an address for Here Maps, using a phone number to 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 then 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 the 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 that 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 options: custom style (using a background image), dark style and a light style. The Select button allows definition of 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 a splash screen and for the lock screen, for both apps.
This page doesn't specify the size of the images but when we try to upload it, it will be shown at 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 and the description and we can define them 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, that requires a reserved name in the Store Dashboard.
After all the configuration we can finalize the app by clicking the 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 installation 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 a "universal app" solution that consists of the Windows Application project Phone 8.1, Windows 8.1 application for the project, shared among the previous projects and also contains a project of type "portable class library" with the entire data structure.
After this step, we can get the application packages that allow testing of the application in our devices, or we can get the source code and then test the application in the simulator or in a device using Visual Studio (but that requires a developer account). It 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 to 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, that 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 various devices to ensure that the application works propertly and is as 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 the store. The applications generated by App Studio will be passed in the certification process like an application developed by a programmer.
More advanced users that wish to extend the application with new functionality 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 Windows 8.1 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.