Getting Started With Windows App Studio

Introduction

App Studio is a Windows and Windows Phone developing platform from Microsoft providing point-and-click, web-based development. No coding required, very useful for information and Promotion type apps that target Windows and Windows Phone exclusively. You can use/share your app immediately on any phone, laptop, or PC running Windows 8 or take your publish package to the Store. It enables you to extend or enhance your app with code. It's still a Beta version. Visit: Windows App Studio.

Sample apps from App Studio

These beautiful apps are created with App Studio.


                              Figure 1.1, 1.2, 1.3, 1.4

Creating an app with App Studio


                                                Figure 2

Demo: Creating an App

Sign in to App Studio with your Microsoft account.


                                                      Figure 3

Choose Your Template

Once signed in you should create a new project by clicking the “Start new project” button. You will then need to choose a template for your app. When you select a template a popup window appears that describes and previews the template.

There are two choices for creating an app.

Start with a blank template. You'll need to create all the menus, sections and data sources yourself. This gives the greatest flexibility, but involves more work.

Select an existing template. The app will already contain a set of menus, sections and data sources you can use since they are customized to your own requirements. You can also add new resources to the ones provided by the template.

When you've selected a template and you're happy with it then click the Create button to create your app.


                                                      Figure 4

Here we're going to work with the “Empty App” template. Select the “Empty App” template and you can see the window below.


                                                   Figure 5

Click the “Confirm” button and you can see the working environment like the following.

Getting Started


                                                   Figure 6

You can choose any item from the “Basic Section” menu. You can choose the highest six items. We'll go through all the items one by one, how to add and modify them as we want to. To make an app in App Studio, there is no need to write any code.

RSS Feed

First of all we'll use the “Rss” item. RSS enables you to include all the feeds that a website provides. You can visualize your app with the important news of a website.


                                                      Figure 7

Paste your website's RSS URL and hit the “Confirm” button. Here we've used Windows Phone Central's RSS feed. You can also change the Section name to anything you want.

YouTube

Then, we'll add Windows Phone YouTube Channel. The channel's name is “windowsphone”.


                                             Figure 8

So, we put the channel's name and made the Data Configuration as User. Also if you want to just search an item, you can do so. You can also change the Section Name from here.

Flicker

Now we'll add a Flicker item. Flickr offers web-based photo sharing and photo organizing. App Studio enables you to include galleries from Flickr in your app.


                                                   Figure 9

After adding this item, you can also change the view of the images that are retrieved from Flicker as follows. Click the edit option and you can edit from here.


                                                      Figure 10

There're some types of layouts, choose your favorite one.

Bing Search

You can also implement Bing search in you app. We search “Windows Phone 8.1” in our search content. We want to see the news about Windows Phone 8.1, if we search in the Bing Search Engine.


                                                      Figure 11

It will show the list of results in the window.

Facebook Page

You can also set your favorite Facebook page. You can even make your own Facebook Page app. That is cool, anyone can promote their page, just by making a simple app in App Studio. Moreover, it's universal. It runs both Windows and Windows Phone platform.


                                                   Figure 12

Here we've added a Windows Phone Facebook page.

Instagram

Instagram allows photo sharing with friends. App Studio enables you to include photos from Instagram in your app.


                                                Figure 13

We used the tag “windowsphone”. There is no need to use a hash sign here. One problem is nothing will show in design view, but when you run it several images will be shown that have the “windowsphone” hash tag, like the following.


               Figure 14

So, you can tag whatever you want to see. Many features are built into App Studio. Just drag and drop an item and that's it. It's a kind of magic. Microsoft gives you much flexibility to make an app if you're a non-programmer.

HTML Content

The last item is HTML content. If you want to display some text or like an “About” page, or just like a normal HTML page, you can use a HTML item. Since we can't use more than six items (that's the limitation) we can't use one more item in our app. But you can use it like this.


                                                   Figure 15

You can also use HTML tags to beautify your content.

Changing Title

To change the title, just change the App title from here.


                                                            Figure 16

Changing the Theme

In the theme section, you can change the theme, background color and so on.


                                                   Figure 17

Also you can upload your external background from your local drive.

Tiles and Splash Screen

To change the title image and Splash screen, just go to the “Tile” section and change it from here.


                                                      Figure 18

Remember, when you move one section to another, always save you changes, otherwise that will be lost and you've to do the same thing again.

Publish Info

Now go to the “Publish Info” section and you can also change the App title and description from here. To associate you app with the Store, there is an option here. You can also provide the privacy statement URL here, but we're not doing these here. We'll do it later from Visual Studio in our next chapter.

Now hit the “Finish” button and you can see the window below.


                                                      Figure 19

Hit the “Generate” button, then a popup window will open.

Generate the Source Code


                                             Figure 20

Click the “Generate” button and it'll generate source code for both Windows and Windows Phone.

Download the Source Code


                                                      Figure 21

Download it from here.


                              Figure 22

Hit “Download” and after downloading, open it with Visual Studio 2013.

Summary

It's all done, you can make your favorite app only in an hour. Hopefully you have understand all these things. My main intention was to provide a proper description of Windows App Studio and how to create a simple app. Thanks for reading this article.

Visit our blog site: Office 365 – Get it done from anywhere.