App Studio is a really cool online application that Microsoft launched last August to make it easy for developers – or anyone, really – to create data-driven Windows Phone apps without writing any code. The whole experience is driven from within a web browser and anyone can build an app – no programming skills required. Of course, if you’re a developer you can download the source code generated by App Studio and use that codebase as a starting point for your own custom apps. FYI, the code generation is a one-way street, i.e. you cannot customize the code in Visual Studio and then do a round-trip back to App Studio for more customizations.
I actually published my own Windows Phone app based on App Studio called Watch Corner Gas last October, but I had to take it down since the third-party YouTube channel I was using was closed (you can see a live video I recorded here). App Studio has been a very popular tool. Microsoft reports that over 300,000 App Studio projects have been created to date, and more than 20,000 apps have been published in the Windows Phone Store. I can always feel the excitement of attendees every time I demonstrate it at events. My youngest attendee to date was even featured in a recent Nokia Conversations blog post where this really sharp 8-year-old kid attended my App Studio session at Dvlup Day Boston. He created his first app while attending my talk, and was a published developer within a week. What’s your excuse?
Today Microsoft announced a new major version of App Studio. First, we have a new url to access App Studio: http://appstudio.windowsphone.com.
The first thing you’ll notice is a major UI redesign (see below). Quite nice if you ask me, and now it’s touch-friendly to boot. You can easily create Windows Phone apps on your Microsoft Surface, Nokia Lumia 2520 or Dell Venue 8 Pro (to name just a few). Your projects built with the prior version of App Studio will all show-up nicely under “My Projects”. Nothing was lost. Microsoft will also send you an email to confirm that all your projects were successfully migrated.
The Content section is where you configure your screens and respective data sources. The workflow has really been streamlined here and the UI is much more intuitive.
Load up one of your existing projects (or create a new one), and start digging around. There is also a How To section you can read to get a better idea of the capabilities and configuration options. The data sources supported are still the same, nothing new was added for now. They are:
- RSS – A list of sets of information based on an RSS feed that you enter when creating the data source.
- 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 search results based on a Bing search that you enter when creating the data source.
- Html – A single page of static text that you enter.
- Collection – A list of items with columns of characteristics. This is your personal data that does not depend on a website.
I was hoping to see new data sources in the list, hopefully we’ll get to see more added over time. My wish list includes:
- Multiple RSS sources aggregated into a single feed.
- More image sources like Bing Images, Instagram, Twitpic, Google Images, etc.
- JSON-based collections coming from a REST service
I’ll save the full tutorial for another day. To be honest the tool is so easy to use that a tutorial is not really required. I do intend to write more blog posts about various tips & tricks you can use with App Studio.
Now jump to the final section and hit that big “Generate” button. You’ll be greeted by a nice surprise:
Yes! App Studio now supports code generation for Windows 8.1 apps that you can publish to the Windows Store. This is huge! The feature is still in beta (aka “Preview”) and has the ability to generate a full Microsoft Visual Studio 2013 solution containing both a Windows Phone and a Windows 8.1 version of your app, making it easy to publish to both stores. The Windows Phone solution can be edited in Visual Studio 2012 or 2013, but the Windows 8.1 solution requires Visual Studio 2013. See my Getting Started page for a list of reference links to the various developer tools you can download.
Some of the new features in this version of App Studio also include:
- New web-based emulator: The on-screen emulator in the web designer now supports dynamic text updates, so you can see your changes on the fly. This is working MUCH better than the previous one which was mainly for show. Now you can actually play with your app in the browser.
- New templates for business: Building mobile apps quickly that showcase company and product info. I have not tried those yet. I’ll revisit them in a future blog post.
- New code generation: The source code produced by App Studio now benefits from a better structure, readability, and performance.
The generated source code was one of the main criticisms of the previous version of App Studio. The source was generated by a tool from a company called Radarc. While App Studio appealed to neophytes, the generated source code required quite advanced developer skills since it made full use of code decoupling patterns such as Inversion of Control (IoC) and Dependency Injection (DI). The source code structure in App Studio is now more aligned with MVVM and I cannot find any references to the Radarc comments, which leads me to believe this is a completely new code generation engine. I have not done a full comparison or analysis of the code yet and I’ll be sure to dig deeper in future blog posts.
Once the Windows Phone 8.0 version is generated, you’ll get several downloads available to you :
- Install package you can deploy to your own phone for testing (unlocked phone not required)
- XAP package ready to be published in the App Store
- Source code package ready to be edited in Visual Studio
For the dual-platform option, you get the same downloads for Windows Phone, but you only get the source code for Windows 8.1. No binaries are produced (yet!) Go ahead and download the source code, make sure to “Unblock” the zip file in the File Explorer properties before extracting it (or you might bet Build errors), and open the solution in Visual Studio 2013. This is what the full dual-platform solution looks like:
While it looks like there are duplicate projects in there – e.g. there are two data projects, one for Windows Phone, one for Windows 8.1 – the solution is structured in a way that each of those Data projects actually uses linked files to the Shared folders above. This is how code sharing is achieved without duplication. I’m not sure why PCLs (Portable Class Libraries) were not used instead, I’ll have to investigate further. So far I like the code structure much better than the previous version. MVVM fans will like it too and this is a good way to promote best practices to developers.
Windows 8.1 App Support
Of course, I couldn’t wait to see what my project would look as a Windows 8.1 app for Windows Store. I’m using a modified version of a demo app I built for my Dvlup Day presentations last Fall in Boston and Vancouver. It pulls the Dvlup blog RSS feed, the Nokia YouTube channel and Lumia 1020 41 megapixel photos from Flickr.
First, here are some screens from the 3 panorama panes in the Windows Phone 8.0 version:
Now this is what the same project looks like as a Windows 8.1 app. As you can expect, the full panorama is now a single screen on a larger display, and each of the 3 “columns” scroll independently. I imagine that if I had 6 sections instead of 3, the whole screen would scroll horizontally. I’ll have to try that later. This generated app is a great starting point and you can tweak the UI further in XAML if you want. All the code is pre-wired to get the data, so nothing stops you from making the Windows 8.1 experience more unique. Then of course, this is still in beta and I’m sure we’ll see cool new features in the coming months.
I’ll be covering App Studio projects in future blog posts. In the meantime, head-on over to the App Studio How To page to learn more about the capabilities and get started on your own projects here. If you build something cool with App Studio and get your app in the store, be sure to come back here and let me know in the comments below. I do a lot of presentations at conferences, user groups, code camps and other events and I’m always looking for great examples of successful apps built with App Studio. I would love to showcase your apps to my audiences.
Will you build apps with App Studio? What kind of features or data sources would you like to see supported in App Studio? Tell me in the comments below or on Twitter at @ActiveNick.