Project Siena is super-cool, because it extends the ability to build real data-driven business apps to non-developers inside organizations: that is, the business experts and power users who, in many cases, know the inner meaning of business data better than anyone else in an organization. In Part 1 of this three-part article mini-series, I provided an overview of Project Siena as a new no-code app building tool for Windows 8.1. 

Get Project Siena for FREE!

In this article, we’ll continue our exploration of Project Siena by stepping through the process of building a real no-code Windows 8.1 app together, with our focus on setting up the data source that our app will consume in Microsoft Azure Mobile Services.  In Part 3, we’ll then build the Windows 8.1 client app to consume this data and publish it for either internal app distribution (aka., sideloading Windows 8.1 apps) or public distribution via the Windows Store.

What's the app that we're building?

Earlier in Part 1, we discussed several common patterns for building no-code apps with Project Siena.  We’ll be using one of these common patterns for our new app: apps that consume and present data. Specifically, we’ll be building an app that presents a video-based lesson plan around training IT Pros on Hyper-V from a VMware Admin’s Perspective. This app leverages content that my good friend, Andy Syrewicze, and I completed earlier this year with our TechNet Radio publishing team.  Note that this is just one example of the many app ideas that can be quickly built as no-code apps using Project Siena.

Here’s a screenshot of the finished sample app that we'll be building together …

Download this app from the Windows Store!
      Our example Project Siena application

This app presents a scrollable left-to-right image gallery across the top for each training module in the series.  When an image is tapped in the gallery, a description of the module is displayed and the associated video automatically begins playing.  At the bottom of the app, a button links to a prescribed set of hands-on next steps for continued learning on that topic area. As a data-driven app, all of the data needed for displaying the image gallery, videos, descriptions and next steps will be pulled by the app from the cloud-based Azure Mobile Services database that we'll be defining in this article.

This app is currently available for free in the Windows Store for download and installation, so you can easily grab a copy of it to take a closer look.

Download this app from the Windows Store!

It all starts with data …

When building a data-driven app in Project Siena, we’ll need to setup our data source first.  Project Siena supports several common data sources, including Excel workbooks, SharePoint lists, Azure Mobile Services and more …


Data sources available for Project Siena apps

For this app, we’ll be using Azure Mobile Services as a cloud-based data source that it is globally accessible by users via an Internet connection.  In addition, Azure Mobile Services will provide a central data source location that can be easily updated with new training modules and/or changes when they become available, without the need to make and deploy updates to the client app itself.

Provision a new Azure Mobile Service

In the following steps, we’ll proceed through building an Azure Mobile Services data source for our app.  This data source will provide the title, description, thumbnail and URL information for each training module displayed in our app.

  1. Activate a Microsoft Azure Free Trial subscription ( if you don’t currently have an active subscription ).
     
  2. Sign-in at the Azure Management Portal with the same credentials used to activate your subscription.
     
  3. On the bottom toolbar of the Azure Management Portal, click New | Compute | Mobile Service | Create. This will launch the Create a Mobile Service form.
     
    Create an Azure Mobile Service
    Create a new Azure Mobile Service
     
  4. On the Create a Mobile Service form, complete the following fields:
     
    URL: enter a globally unique name for your new Azure Mobile Service
     
    Database: Create a free 20 MB SQL database
     
    Region: Select the region closest to your users
     
    Backend: JavaScript
     
    Click the image button to continue to the next form page.
     
  5. Complete the fields on the Specify database settings form to create a new Azure SQL database and server instance.
     
    Specify database settings
    Specify database settings for new Azure Mobile Service
     
    Name: Specify a unique name for your database
     
    Server: Select New SQL database server
     
    Server Login Name & Password: Specify the Admin credentials to be provisioned on the new SQL database server
     
    Region: Select the same region as used for the Mobile Service in Steps 3 & 4 above.
     
    Click the image button to begin provisioning the new Azure Mobile Service and SQL database.

After the new Azure Mobile Service has been provisioned, it will be displayed on the Mobile Services page in the Azure Management Portal with a status of Ready

Azure Mobile Services
Congratulations! Your new Azure Mobile Service has been provisioned in the Cloud!

Adding Tables to Azure Mobile Services

Now that your new Azure Mobile Service has been provisioned, we’ll need to add tables to it for storing the data that Project Siena will ultimately consume.

Follow the below steps to define two new data tables in the Azure Mobile Service: episodes and zz_config.  The episodes table will be used to store data for each video-based module that will be displayed in our app.  The zz_config table is a special metadata table that Project Siena uses to discover the tables that are available for Siena apps.

  1. On the Mobile Services page, click on the name of your new Azure Mobile Service to drill into the detailed dashboard page for that Mobile Service.
     
  2. Click on the Data tab.
     
    Data in Azure Mobile Services
     
  3. On the bottom toolbar, click the Create button to create a new table named episodes with the properties shown below.
     
    Create New Table
     
    Click the image button to create the episodes table.
     
  4. On the bottom toolbar, click the Create button again to create a new table named zz_config with the properties shown below.
     
    Create New Table
     
    Click the image button to create the zz_config table.

You should now see two tables defined in your Azure Mobile Services database, as shown below.

Data in Azure Mobile Services
Data Tables defined in Azure Mobile Services database

Adding Columns to Tables in Azure Mobile Services

Using the steps below, you’ll add columns to each table for storing the data elements that Project Siena will consume.

  1. On the Data tab of your Azure Mobile Service, click on the name of the episodes table.
     
  2. Click on the Columns tab and add the columns shown below by using the Add Column button on the bottom toolbar. 
     
    Click to enlarge ...
     
    Be sure to remove any default columns in the table that are not shown above.
     
  3. Click on the name of the zz_config table in the left navigation area.
     
  4. Click on the Columns tab and add the columns shown below by using the Add Column button on the bottom toolbar. 
     
    Click to enlarge ...
     
    Be sure to remove any default columns in the table that are not shown above.

Adding Data to Azure Mobile Services

Finally, we’ll need to add rows of data into each table that Project Siena will consume.  Azure Mobile Services uses an Azure SQL Database for storing the tables and columns of data, so we can add and manage the necessary data using any common tool that can connect to SQL Server, such as Microsoft Access or SQL Server Management Studio.  However, to keep our steps as simple as possible, we’ll use the web-based management tools for Azure SQL Databases to input this data.

  1. On the left navigation bar in the Azure Management Portal, click SQL Databases.
     
    Azure SQL Databases
     
  2. On the SQL Databases page, select the database for your Azure Mobile Service and click Manage on the bottom toolbar. If prompted to add a firewall rule to permit SQL connections from your current IP address, be sure to click Yes to add this rule.
     
  3. When prompted, sign-in to the Management Portal for Azure SQL Database using the credentials specified when creating the database above.
     
  4. On the left navigation bar, click Design.
     
    Design Tables
     
  5. On the Tables page, click the Edit button located next to the episodes table.
     
  6. Click the Data tab and then click the Add row button to add each row of data needed for the training modules to be displayed in the Project Siena app.
     
    Click to enlarge ...
     
    Click the Save button on the top toolbar to save the data when complete.
     
    Note: You can download a worksheet with my sample data here for convenience.
     
  7. Click on Tables on the top breadcrumb trail to navigate back to the list of tables. 
     
  8. Click the Edit button located next to the zz_config table.
     
  9. Click the Data tab and then click the Add row button to add a single row that will be used by Project Siena to discover the available data tables in the data source.
     
    Click to enlarge ...
     
    When entering this row of data, be sure to use these column values:

    id: 0
     
    key: table
     
    value: episodes
     
    Click the Save button on the top toolbar to save the data when complete.

The Azure Mobile Services data source is now defined and populated with data, ready for Project Siena to consume.

Join me for part 3 to build the client app in Project Siena …

Be sure to join me for part 3 of this three-part article mini-series, where we’ll step through the process of using Project Siena to build a Windows 8.1 client app to consume the data source we’ve defined in Azure Mobile Services.

In the meantime, please share your ideas in the Comments section below for leveraging Project Siena within your organization.

  Interested in learning more about Windows 8.1 for Business?

  Check out our complete blog series at: