UWP, Azure App Services, and DocumentDB Soup: A photo-sharing app

SnapGold is a photo-sharing UWP code sample that runs on Azure App Services and uses Azure DocumentDB and Azure Blob Storage for its data storage. You should be able to get this sample running locally using its mock (i.e. dummy) service in 5 minutes and then fully link to your own Azure App service in less than 30 minutes.

What is SnapGold?

All the code can be found on our GitHub page here.

The app highlights best practices in the following areas, which you can use to model your own app:

• UWP optimized for desktop & mobile
• MVVM with responsive layout
• Azure App Service
• Azure DocumentDB & Blob storage back end
• Azure App Service Authentication (w/Facebook/Twitter/Google/Microsoft account)
• Authenticated push notifications
• Instrumented with Visual Studio Application Insights (client and server)In-App-Purchase Enabled

There’s lots of great stuff in this code, even if a photo-sharing app isn’t your goal. The navigation framework, MVVM patterns, Azure integration, push notifications, and authentication are all juicy bits that you can port directly to your own apps.

Why DocumentDB?

Originally this code sample leveraged a SQL Server database to store the relational data for SnapGold. We moved the data layer to DocumentDB for a few reasons.

1. DocumentDB has some awesome querying power considering all fields on your data models are indexed.
2. So many apps use SQL and most developers are framiliar with the nuances of setting it up. Here we tried something different. DocumentDB is relatively new and offers different bring-up steps.
3. This is a code sample, and bring up for DocumentDB is much faster than bringing a new SQL Server database online. In our sample, just create a new DocumentDB in Azure, set two configs, and it creates itself when you deploy to Azure. #forthewin

We found that some queries in DocumentDB were straightforward and could be accomplished with simple Lambda queries against the collections. Here we get all the photo documents for a single user of the app for their profile page:

Conversely, some were more complicated and required some DocumentDB stored procedures. In this case, get the top 20 photos from the 20 categories most recently updated with new photos. DocumentDB uses JavaScript as their equivalent for TSQL as you will see in our code below. (More details on that are here.)

For our code sample, DocumentDB “sprocs” are stored in the Mobile App Service as Javascript files. See below:

The code for the highlighted DocumentDB sproc (getRecentPhotosForCategoriesStoredProcedure.js) is below so you can see the syntax we use for DocumentDB sprocs.

When you deploy the service, most of the magic to provision our DocumentDB happens in DocumentDBRepository.cs.

We deploy these .js files automatically when you deploy the Azure App Service in the SnapGold code sample.

First we create the database:

Then we deploy the sprocs:

DocumentDB is much easier to self-provision in your code than a SQL Server database. This code looks for the existence of the specified DocumentDB, and if missing, sets itself up.

How easily can I port this to my own app?

Perhaps the best way to show off this code sample is to fork this sample into another photo-sharing app. In a few steps below, we’ll create SportsPics, an app for sharing sports pictures. Click here to download the free SportsPics app from the Store to get an idea of the look/feel of our code sample.

Here’s what you’ll need to get your own app started.

1. Get code from GitHub.
2. Open PhotoSharingApp.sln and hit Ctrl+F5 to run the UWP app. It should deploy the UWP locally and launch SnapGold using the mock service mentioned above. You’ll see a red “dummy” box at the top indicating it’s not hitting a real service. This should give you a feel for how the app functions. The next step is getting the app pointed to your own, real service.
3. Create a free (for 1 month) Azure subscription to host the service, DocumentDB, and Blob Storage.
4. Follow the Getting Started guide to get your own App Service hosted in Azure.
5. At this point, you should have the SnapGold code sample running on your own Azure hosted App service. Now let’s tweak the app a bit.
6. Change the default colors from Gold to whatever you want. We chose Blues for SportsPics:

7. Add a logo. I created one in PhotoShop and simply added it to the header control in the PageHeader.xaml

8. Update the app name in package.appxmanifest.
9. Ship it! You just created your own photo-sharing app.

Now go forth and clone

By now, you hopefully have a locally hosted UWP running against your own Azure App Service and are ready to start turning this thing into the next Instagram. You also (hopefully) now better understand how easy it is to wire up a rich UWP to an Azure App Service. If you have questions about the code sample (https://github.com/Microsoft/Appsample-Photosharing), submit comments below. The team is here to help.

Happy Windows Store coding!

Written by Eric Langland, Senior Software Engineering Lead for Universal Store