App Studio - a new version of the online application builder from Microsoft

Hello everybody!

I present to you a new tool from Microsoft “Windows App Studio” - a designer for creating applications. Today I’ll talk about how the creation of applications for Windows and Windows Phone has become available to the average user. And a little about how this tool can be useful to the developer.

App Studio is a tool designed to create content applications. This type of application provides the user with thematic information, various directories and a whole host of other standard functions.

App Studio interacts with the user through a web interface, works on any browser and is available at the following link . All App Studio data is stored in the cloud.

To access App Studio, you must haveMicrosoft account (formerly Live ID) and network connectivity.

Overview

The interface is simple and intuitive:



On the main page there is a control panel for accessing the main pages of the resource:

• My projects - the page on which all the applications ever created by the user in App Studio will be stored with their status indicated: Edition / Generated
  
  
• How to - a page with instructions for App Studio, which details the elements, actions and results from App Studio.
• Start new - duplicates the button on the “Start new project” main page and redirects to the page for creating a new application.
• Sample apps - will tell and demonstrate examples of ready-made demo applications.
• News - resource news page where you can see updates, messages from the support team, etc.
• OS preview - directs the user to the page of the Developer Center, which describes how you can receive all updates about operating systems before ordinary users, how to get a developer account and quickly download all updates to your phone.
• Dev center - hereinafter referred to as the Development Center and a resource for developers for Windows and Windows Phone.

The main page also demonstrates applications created in App Studio that function and are available in the Windows Store:

Patterns

To create the application, App studio offers the following scenarios:

• Use the templates;
• Create an application from scratch.

App Studio templates are theme-oriented applications with a ready-made structure, demo content and the ability to edit:



Unlike other templates, the Empty App does not offer any script for creating applications and is completely freed from content.

All App Studio templates provide the ability to create universal applications available on Windows and Windows Phone 8.1 devices. In addition to the Web App template: The



purpose of this template is to convert the mobile version of the website into a Web App using the site URL. This feature is available only for Windows Phone applications.

It is worth noting the variety of App Studio templates and the presence of thematic components for each of them:

Application creation

The application creation cycle in App Studio consists of 4 stages:

• Search for an idea;
• Filling content;
• Style design;
• Using the finished application;

To demonstrate the capabilities of the tool, create a Wine Catalog based on the Empty App. We will call it Wine Expert, begin to create a structure and add content.

The start page of the new Empty App is as follows: The workspace is divided into four parts:

• Work on the structure and content of the application: Content ;
• Next, two tabs are responsible for the appearance and style of the application: Themes and Tiles .
• Publish info contains presets for publishing the application on the Windows Store.

Content Work

In the Content area, determine which pages Wine Expert will consist of:

• About wine;
• Wine catalog;
• Wine production;
• About the creators.

To create the structure, we use the set of blocks proposed by App Studio:

1. The “About Wine” page, if it contains text as in this example, is most conveniently formatted using the “HTML” block: Text editing is available in both text and HTML editor mode, just click on the symbol
   
   
   
   .
   
2. The wine catalog is a collection type block: Data in the application can be of two types:
   
   
   
   
   
   • Static
   • Dynamic.
   
   Static data is the data that is in the application. An application with this type of data does not require an internet connection. However, to update static data, you will have to update the entire application.
   
   Dynamic data is data located in the cloud. To access them, you need an Internet connection, but when you update this data in the cloud, they will be updated automatically in the application.
   The process of populating any of these data types in App Studio is the same, and Dynamic resources are suitable for demonstration. The type of resources can be changed until the data is full.
   
   Let's design the database structureour application. When you click on the "Add default columns" button, App Studio automatically adds the standard necessary and used data storage fields: Title, Subtitle, ImageUrl, Description. I remove the SubTitle field and add my own using the Create new button: In ColumnType, select the field type - text. Boolean Multiline, which allows multiline entries, is left in the false status. This completes the process of creating the application database structure. And proceed to filling it. The “Confirm” button returns us to the “Content” workspace, where we observe all the pages of which the application is still composed: On the “Wine Catalog” block, press the “Edit” button and switch to the editing mode of this block:
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   This message appears in the browser when the page contains unsaved changes. In this case, click "Stay on this page", and then click the "Save" button in the upper right corner.
   
   We repeat the steps and get into the collection editing mode: On the “Pages” tab, it is possible to edit the display of data both on the page and when selecting a catalog item, as well as setting up data sources corresponding to the application database fields - “Bindings”. The number of lines in “Bindings” depends on the selected display mode: Configure these sources: And switch to the edit mode for displaying the selected item: Here you will again need to configure the sources, but pay attention to the new settings - “Page extras”:
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   • TextToSpeech will allow you to convert text to speech in order to listen to the text;
   • ShareText will allow the application to share the selected item;
   • PinToStart will allow you to pin your favorite article on the start screen of the device to provide quick access to it.
   
   For these functions, it is also necessary to select the content source: Do not forget about the “Save” button and look at the Data tab: The already known database structure, ready for editing. We are interested in entering data into the application, click “Edit Data” and get to the next page: Data can be added manually, filling each line after its creation, using “Create new”. But we will use the built-in ability in App Studio to download data using a file with the .csv extension “Import data”: We warn the loader that our file was created without a header and you can load data from the first line. It remains only to add pictures: Pictures have been added, press the save button, return to the collection editing mode and look at the result:
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   The preview mode of the application on the Windows platform is available when you click on " Windows Preview ".
3. The “Wine Production” page will contain a video of this process, in this case, select a YouTube type block: Specify the page name, then configure the parameters that are necessary to display the corresponding videos on the page:
   
   
   
   
   
   • Search / User / Playlist - type of request by which the application will search for video;
   • " Wine production " - the content of the request.
   
   Result - a page displaying a video from YouTube for a given search query:
   
   
   
   
4. “About the creators” - this page will be created using a block of the “Menu” type: Two editing modes are available for this block:
   
   
   
   
   
   • Standard editing of data display on the page: “Edit” button;
   • Editing menu items.
   
   Editing menu items is an area in which you need to add the necessary elements: A block of type “Menu” can contain all the base blocks, collections, as well as an element of a new type of “MenuAction”: The action for which this item is responsible after editing it - Writing a letter through the applications available on the device: The “MenuAction” setting also includes other actions: making a phone call, switching to the specified page, etc. Add the phone to the page "About the creators" and filling the application with content is completed:
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

App design and style

App studio in the Themes tab offers to customize the theme of the application:

• Standard: dark, light background;
• The background that the user prefers, including the ability to set the image as a “Background Image”.

Using Custom Style, you can also customize the text color and the standard Application bar of the application: the Tiles tab draws the appearance of the application on the start screen, background image and background image: Set up the application tile on the start screen:

• Flip template - live tile;
• Cycle template - flipping the specified collection from the application;
• Iconic template - one image of all three tile sizes.

For the wine catalog, select the Flip template and upload the necessary images corresponding to the specified sizes: In the upper left corner there is also an area for loading the image, which will be displayed near the application name, fill it too: On the Splash & Lock tab, we will do the same actions with the images: Save the changes and go to the next step.

Set up an application to publish to the Windows Store

Let’s analyze what data Publish info requires from us, in order to prepare the publication of the application in the Windows Store, in addition to the clear App title, App description and Language:

• Enable ad client - setting the display of advertising banners in the application;
  Those who activate this setting need to fill in the Microsoft pubCenter data:
  
  
  
• Store Association
  Все приложения созданные в App Studio могут быть опубликованы в Windows Store, однако публикация доступна тем пользователям App Studio, которые имеют аккаунт разработчика в Центре разработки.
  

One of the conditions for publishing an application on the Windows Store is for the name of the application (App Name) to be reserved in the store before publishing it. We reserve the application name in the Development Center . For each reserved (registered) name, the store will assign its own “Package Identity”. An App Studio user needs to know this information, name and ID.

In order for App Studio to generate a special application package for publishing, you need to fill out the “Application manifest” - application manifest. To do this, the “Associate App with the Store” setting is provided in “Publish Info”: We



will find all the data in the Development Center :

1. App Identity: открываем Store Dashboard, выбираем или регистрируем там приложение. Выбираем Edit -> Select Services -> Live Services сайт. Далее видим нужную информацию «Application Identity» в формате “1234user.YourAppName”.
2. App Display Name: это зарезервированное имя приложения в магазине.
3. Publisher ID: эта информация назодится в «Account profile» разработчика в Центре разработчика, в следующем формате “CN=AAAAA-1111-2222-BBBBBBBBB”.
4. Publisher Name: имя, с которым разработчик зарегистрирован в Центре разработчика. Так же доступно в «Account profile».

Privacy statement url

Since the Windows Store works with personal data, information about the privacy policy must be specified in each application. The privacy policy will tell the user of the application how his data is used. Therefore, this paragraph should include a reference to the privacy policy statement. Further information on privacy policies can be found here .
You can read about how to publish the application in the Windows Store here .

The final stage of work with the application

The application is ready - click “Finish”: Get the opportunity to preview the application for any device. The “Generate" function suggests choosing which platform you want to generate the application for, select Windows Phone 8.1 and Windows 8.1, which will create a new type of application - universal : In the "Generation type" field, we note that we need an application package to install on the device and a package for publication . Application source code is generated by default. So, now we can download all the materials provided by App Studio for working with the created application.

Install the application on the device

An application created using App Studio can be installed directly on the device, outside the Windows Store, thanks to the generated “Installable packages” package.

What is needed for this:

1. Install the certificate on the device:
   
   • Download the installation package for the certificate provided in App Studio depending on the device (PC, tablet, phone);
   • Run the file with the extension .cer (during installation, select Local machine, Place all certificates in the following store: Trusted Root certification Authorities).
2. Install the application on the device:
   
   • Download Installable packages;
   • Find the file Add-AppDevPackage1.ps1, right-click to run “Run with PowerShell”.

Access to application data in the cloud

To add, delete or edit the dynamic data of a published application, you need to turn to the corresponding application in the Dashboard list in the Development Center. Open the collection and make any necessary changes. The application will update automatically.

Developer Features

App Studio can be useful for a professional developer in that it provides the source code for the application.



It can also be convenient for a developer to create the structure of his application using this tool, and then use Visual Studio 2013 (Update 2) to finalize it without wasting time writing down the basic elements.

Conclusion

In order to create an application in App Studio, you do not need programming knowledge, in addition, creating an application and obtaining its source code is completely free.

Developers will also be interested in using a new tool, for example, to reduce the time to develop the basic structure of the application.

useful links

Windows App Studio Tool Microsoft
Virtual Academy (MVA) Training Courses: Creating Windows and Windows Phone 8.1 Applications in App Studio
Download a Free or Trial Visual Studio 2013
Windows Development Center
How to Publish an Application on the Windows Store
Download the sample application from this article