Easy Windows Phone Apps with Microsoft App Studio

There are an increasing amount of options for non-coders to create basic mobile apps. On SitePoint we have had an article covering 3 Options for Creating Mobile Apps Without Coding.

Now Microsoft has its own alternative, called App Studio, and I am going to show how to use it to create a mobile application for SitePoint. All you need to build an application using App Studio is a Microsoft Account and you’re ready to go.

Getting Started

App Studio allows you create applications for mobile phones and tablets using Windows 8.1 and the new Windows 10 operating system. You can embed RSS feeds, YouTube channels, Facebook and Twitter feeds and HTML pages, or choose one of the templates available.

To create your first project with App Studio, log into your Microsoft Account and go to the App Studio dashboard.

We are going to create a Windows 8.1 application, click the Start new project button and make sure the Windows 8.1 tab is selected.

Select the Empty App template and make SitePoint the app name.

Click Start with this one!. This will redirect you to an Edit your app content page, where you can change the content of your application. You can insert the content here, modify the look-and-feel by choosing a theme or modifying one, set the icon and the splash screen and change other settings.

The First Screen

The first screen we’re building will be a menu. Click on the Menu button and set the title to SitePoint. It will create a blue tile identifying the menu screen just built.

In that tile you can see three icons. The first, resembling a hamburger icon, adds content into the menu. Click it and add 9 menu items to represent SitePoint categories.

The first URL will be HTML and CSS for Menu action title and https://www.sitepoint.com/html-css/ for Menu Item Action Value. To save the changes, click on the Save button (if you forget to save, you’ll be prompted to save before switching). You can continue with the other menu items in the same way.

Now for some styling. I’d like to have these items as a list, stacked on top of each other. To do this, click on the edit button of the menu tile (the second that looks like a pencil) and choose the Photo Left layout, which shows a thumbnail picture of the item and the name. You can find the images I used here.

To add icons for the menu items, click the edit button for each of them and click the default icon of each item and pick the image for the list item.

We need an icon for the app. Go to the Tiles menu and click on the blank images to add icons needed.

For the theme, you can choose one from the list that Microsoft supplies. Open the Themes tab and pick one from the list, change the colors as you wish. I’m using the white theme.

Adding More Views

Now that we have the first view, we can add more. I’d like to have these views:

• About us
• News (RSS feed)
• SitePoint’s Twitter page
• SitePoint’s YouTube channel
• SitePoint’s Facebook page

For the About Us page, click on the HTML button and set the title to About Us. The content, taken from SitePoint’s about us page is this:

<p>
SitePoint provides cutting-edge content for web professionals — developers, designers, programmers, freelancers and site owners.
</p>

<p>
Founded by <a href="https://twitter.com/daxatron">Mark Harbottle</a> and <a href="https://twitter.com/MattMickiewicz">Matt Mickiewicz</a>; our mission is to deliver new ideas, emerging concepts, and teach state-of-the-art technology to our readers. Whether it’s via our practical tutorials, books, articles, courses, if it’s got anything to do with building the web - we've got you covered.
</p>

Click the Save button and the view is added to the application. By swiping left and right, you can change the views of the application.

For the RSS feed, click on the RSS button and set the title to Feed and the feed url to https://www.sitepoint.com/feed/. By clicking the edit button, you can style the RSS feed, both the list page and the single item (a.k.a detail) page. I am picking No Photo for the list layout, since not all articles will have a photo and I’d like the Feed to be consistent. I chose Generic Layout for the single item layout.

For the Twitter page, click on the Twitter button and you’ll need to create an API key. Click Create new API Key, which will guide you through creating the necessary API key for adding Twitter support. After creating the API key, select User Timeline from the drop down and set the username to sitepointdotcom. Here you can change the layout like in the Feed example, but I’m leaving it as default, with the user photo on the left.

The same applies for the YouTube channel. Click the YouTube button and create the API key. At the data configuration stage, select User from the drop down and set the username to SitePoint. You can change the layout, but I’m leaving it as default, with the video thumbnail on the left.

For the Facebook page, do the same as for Twitter and YouTube. Select the API key (or create one) and search for a Facebook page called sitepoint. Choose that from the results and confirm all the changes.

Wrapping Up

After building this application, the last steps are to make it usable for everyone. Firstly, make sure you saved any changes and switch to the settings tab. Add an app description, such as:

SitePoint provides cutting-edge content for web professionals – developers, designers, programmers, freelancers and site owners.

Then click the Finish button. App Studio then generates three downloads:

• An installable package, which you can install on your mobile device
• A publish package, which you can upload and publish into the Windows Phone Store
• The source code

For the publish package, you have to fill the fields in the Store Association section in the Settings tab.

Congratulations! You’ve just built a Windows 8.1 application for SitePoint. Let me know what other experiments you try with App Studio.