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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
But what about the code? After the app has been generated, you can download the source code at the bottom of the page.
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:
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.aspx. Please 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.
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.
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).
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.
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!