Introduction

In 2013 Microsoft published the App Studio Beta (http://appstudio.windows.com/). With the App Studio web application, it is very easy to create Windows and Windows Phone applications. You do not need to write a line of code to create professional apps. In this post I like to give a short overview of App Studio, how easy it is to create apps and the code behind your apps.

Overview

Once you have a Microsoft account, you can log on the App Studio and start creating projects. The image below shows the My projects page where all your apps are listed. You can create new apps, edit existing apps or delete them.

Image
App Studio Project List

To create a new app, simply click the “Start new project” button. The following page let you select a template for your app. There is a bunch of layout templates you can use depending on your idea. I like to use the empty app template for this simple showcase.

Image
App Studio Template List

After a template has been selected, App Studio navigates to the edit section for the new app. As you can see in the image below, you can define various things for your application – from the content that is used in the app over themes and live tiles.

Image
App Studio Edit Section
Image
App Studio Theme Section
Image
App Studio Live Tile Definition

In the content section you can very easily add news feeds, web sites, YouTube channels, Facebook streams and many more to your application. With collections, you have a more generic possibility to add data to the app, e.g. static data that can be imported from CSV files, typed in manually in App Studio or dynamic data the can be pulled from a web service. Everything with only a few clicks. You can arrange the different content in the main sections that will be available for the user in your app. The user can switch through the sections be swiping from left to right or right to left.

For a simple demo I add a collection with static data to the app. I defined some columns and entered the data manually in App Studio. Further I add an RSS section that shows the newest Windows Blog entries. The image below shows how App Studio visualizes my app’s content.

Image
App Studio Edit Section

Very cool is the preview function on the left side. You can scroll and swipe through the app as you can do on a real device. It shows the app live with live content.

Each main section can be edited. Just click the Edit link below the main section of interest. The following image shows the edit section of my Todos main section (that visualizes the collection with static data). I first defined some columns: Title, Description and a Deadline for my to dos. Then I entered some data rows manually.

Image
App Studio Edit Collection Data

After I have some column definitions and the data, I like to edit the layout of my Todos section. So after saving the collection, I go back to the edit section page. Here I can define the pages and their layouts for my Todo list. For the main page I decided to use the first layout. Depending on the layout, you can bind the layout elements to the columns of the collection. I bound the title of a list entry to the Title column, and the sub title of a list entry to the Deadline column of my collection. Everything is very easy.

Image
App Studio Edit Section

You can add several sub pages to a section. Here I want to show the to dos with their title and the deadline in a list and if the user taps an item, he will navigate to the details of that item. For the details I can add a sub page. Again, you can select a layout for the sub page and bind the layout elements to your data. So I show the title of the to do as the page title and the deadline and description as the details on the page. The image below shows my configuration.

Image
App Studio Edit Pages

Now I have some data and some pages that shows the data. Now I like to change they layout a bit. Just to demonstrate how easy it is to customize your app. Therefore, I change to the Themes section in the App Studio. Here I select the custom style theme and change the background color to violet. Again, you can see the changes in the preview on the left side.

Image
App Studio Edit Themes

I like to stop designing my app here because I like to give an idea of what you can do with the App Studio. Now I like to finish my work here and generate the app. Therefore, I click the Finish button. The following page let me see my app on a Windows Phone and on a Windows tablet preview. I can test the app as if I use a real device. Now I can generate the app. If you want to, you can directly publish the app to the store.

Image
App Studio Generate App

Up to this point I designed a complete app that can be pushed into the store directly. That is great, because I did not need to write a line of code to come to an app. The App Studio is still a beta and so there is a lot to do for Microsoft. The wish list of features is long. So I would like to define page layouts for myself, apply sorting to collections or add custom filters and so on. But as you can see above, creating apps is as easy as it was never before – for developers and for non-developers. And with the time, features will come.

Code

But what about the code? After the app has been generated, you can download the source code at the bottom of the page.

Image
App Studio Download App

Now, let’s view the code in Visual Studio and see what App Studio is generating for us. First, let’s have a look at the solution structure:

SolutionStructure
App Studio generated Solution Structure

App Studio generates a solution with 4 projects. The first 3 projects you can see in the image above are the standard projects for an universal app. There is one project for each platform (Windows and Windows Phone) and one project that is shared between them. The Windows and Windows Phone projects contain the platform specific implementations. Finally, these projects implement the front ends with the views, pages etc. that are specific to the platform and form factor. The shared project contains code that is used by both of the other projects. Common code is factored out to the shared project to avoid writing/generating duplicated code.

The fourth project is a portable library. This library is shared between the Windows and Windows Phone project, too. But why does App Studio generate this project and does not generate the code into the shared project? Well, the shared project contains shared code that is specific to Windows and Windows Phone platform. But you can have more general code that you want to use/share for other clients as well. Therefore, portable class libraries (PCL) can be used by other types of projects on any .NET Framework-based runtime, also on non-Microsoft platforms (e.g. when developing with Xamarin). For further details on PCL visit the MSDN article http://msdn.microsoft.com/en-us/library/gg597391(v=vs.110).aspx and the MSDN blog post http://blogs.msdn.com/b/dotnet/archive/2013/10/14/portable-class-library-pcl-now-available-on-all-platforms.aspxPlease read on to see which code is put into the shared project and into the portable class library.

The Projects in Detail

Let’s have a look at the Windows and Windows Phone app projects. The image below shows the structure of both projects. As you can see, the most of the code is XAML code. As mentioned above, these two projects contain the front ends that App Studio generates for us. And so we have a lot of views here. Both projects are very similar.

AppProjects
App Studio Project Structure

Just remember the sections I add to the apps in App Studio. There was a section for the Windows Blog and another section for the to do list. App Studio generates pages for that in both projects. Further, there are data templates for these views. These templates define the structure of list items that are shown per view. These both projects are very straight forward.

The image below shows the shared project. As mentioned above, this project contains code that is used by the Windows and Windows Phone projects. In the Common folder you can find classes that manage page navigation and provide some commands. Further there is a base class for view models. View models are defined in the ViewModels folder. Here we can see that App Studio generates code that follows the MVVM pattern. There are view models for each view resp. section I added to the app.

Factoring this code into this project make sense since I want to implement several views on the same model. And that is, what App Studio generates for us. Two projects that implement the views and one shared project that contains the shared view models. The Windows and Windows Phone apps are views on these models only.

SharedProject
App Studio Project Structure

In the service folder are some services e.g. for sharing and playing music that can be used in the apps. There are also some controls generated in the Controls folder.

Now let’s have a look into the last project: the portable class library (PCL). As the name indicates, this project contains code that handles data in some way. For example, we can find classes that define the structure of the data (for to do list and Windows Blog entries) in the DataSchemas folder. That are the data classes to which the view models are mapped and that contain the “real” data. The DataSources folder contains code that loads our data. As we can see there are classes that loads Windows Blog entries and the to do list items.

There are other provider and helper classes in this project that are involved in managing data (e.g. classes querying external services or providing cache functionality).

PCL
App Studio Project Structure

As mentioned above, PCLs can be used on various platforms that support the .NET Framework. So you can implement an IPhone app with Xamarin that uses this portable class library.

Fazit

With the Microsoft App Studio you can create apps very easily. Just clicking together the views and the data you want to have. App Studio then generates a very clean solution that follows some well known design patterns and that have well designed abstraction layers. So it is very easy to change and extend the code to fit your needs.

I hope this blog post gives a brief introduction into App Studio and shows how simple it is to create apps very fast. There is a lot to do for Microsoft to give more flexibility and possibilities to your apps. But the beta shows what is possible. Maybe this inspires you to try to create your own apps.

If you have any questions, please do not hesitate to contact me!

 

 

Written by robinsedlaczek

I am studying informatics at TU Berlin and work as project manager at Fairmas Berlin. Further I develop technical solutions in the Microsoft .Net environment.

6 comments

    1. Thanks a lot!

      To your question: It depends on what you mean with complex app. You can create apps that follow the Microsoft modern UI approach. There are a lot of templates you can use to give an app that appearance what is the best for your use case. You can add a lot of data sources, RSS feeds, web Services and so on and put that together to create great apps. Then you can download the source code and change whatever you like.

      In my opinion: Yes you can create complex apps. But currently you have to do a lot by yourself e.g. to customize the layout and so on. But with the time, Microsoft will extend App Studio and provide more functionality.

      At the moment App Studio creates good apps that can be the base for your project offering a well designed and well structured code base.

      Try it! 🙂

      Von meinem Windows Phone gesendet ________________________________

      1. I Actually tried App Studio during early stage of release that time it was bit shady. I will definitely try again :).
        By complex i mean complete app with all proper validations, more user centric app with database connectivity etc in simple words a complete professional app. Because thing is App Studio is more UI based, so not much real coding happens in the source (correct me if i am wrong).
        What i really want to know is that, is App Studio capable of replacing visual studio completely, not now may be in near future ?
        If it does then that would be interesting to see many people will be coming up with many interesting apps.
        That will bring many creative and intelligent people to the table.

  1. @Sudhakar: I think, at the moment, non-professional users/programmers are targeted with App Studio. Currently, you cannot build complex apps, e.g. you cannot add input controls or complex inputs. Yes, for non-prof users, it is UI based without coding. But you have the possibility to change and extend the code, so you can add inputs for example. And the generated code base is an excellent example for a good structure and design I think.

    Without coding, you cannot create professional complex apps. And so, Visual Studio will not be replaced by App Studio. Further, in my opinion, it is not the intention of Microsoft to replace Visual Studio, rather they want to provide a way to create apps for non-professionals.

    You can have a look at Project Siena in the same way. I want to write an article about it and I like to compare both tools. In our DotNet user group here in Berlin, I was asked about the differences and target audience for both tools yesterday. Both are completely different and it seems to me, that it is not really clear when to use which tool and who should use which tool.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s