alvinashcraft
shared this story
from 
Planet Xamarin.
Xamarin Forms with Microsoft Azure
Short introduction
Mobile apps – mostly all of them are connected with some services. Retrieving data, receiving notifications or saving data. There are many options to create backend for mobile apps including Xamarin. This is great that nowadays Xamarin developers are on Microsoft stack so we have one developer platform:
Cloud – Microsoft Azure
Mobile – Xamarin
That’s why I decided to write this article and show you how to connect Xamarin Forms application and Azure cloud serivce. Before we start I would like to present components we will use in this sample:
Azure Blob Storage – place where you can store files – like pictures in our case
Azure DocumentDB – no SQL database where you can store objects in JSON format
Azure Function – servless code architecture where you can process events – in our case HTTP requests
Steps we will do in this article:
Create Xamarin Forms app to take photos with title and description added
Azure Function with HTTP Post trigger to retrieve data sent from the mobile app
Azure DocumentDB to store photo as JSON
Azure Blob Storage to store photo as BLOB object with metadata
THIS SAMPLE IS TO PRESENT DIFFERENT CAPABILITIES OF AZURE AND XAMARIN
What do I need to start?
1) Visual Studio 2015 Community (for free) or higher
2) Microsoft Azure subscription (you can test it for free here)
Let’s start
1. Sign in to Microsoft Azure portal here:
Create Azure Blob Storage
1. Click on the “plus” button on the left and search for “blob” and select “Storage account” from the list:
2. Click “Create” button and below window should appear with information to fill:
Type the unique “Name” and set the rest like below. Then click “Create” button:
3. After few seconds storage account should be ready:
Before we go further it is worth to mention how blob storage structure looks like:
Storage Account: All access to Azure Storage is done through a storage account. This storage account can be a General-purpose storage account or a Blob storage account which is specialized for storing objects/blobs. For more information about storage accounts, see Azure storage account.
Container: A container provides a grouping of a set of blobs. All blobs must be in a container. An account can contain an unlimited number of containers. A container can store an unlimited number of blobs. Note that the container name must be lowercase.
Blob: A file of any type and size. Azure Storage offers three types of blobs: block blobs, page blobs, and append blobs.
Block blobs are ideal for storing text or binary files, such as documents and media files – we will use this type to store our photos
Append blobs are similar to block blobs in that they are made up of blocks, but they are optimized for append operations, so they are useful for logging scenarios
Page blobs can be up to 1 TB in size, and are more efficient for frequent read/write operations
4. It is time to add container:
5. Type the name of your container – remember that it has to be lowecase and set access type to “private”. Then click “Create” button:
6.After few seconds container should be created and shown on the list:
That’s it! We will create blobs during uploading photos later in this article.
Remember to copy storage key and storage name – we will use them later in this article:
Create Azure DocumentDB
1. Click “Plus” button on the left and search for “documentDB”. Then select “NoSQL (DocumentDB)” and click “Create” button:
2. Fill all required information like below. Remember to select unique URL and resource group created before (when created Azure Storage above). Then click “Create” button:
3. After few seconds you should see that DocumentDB was created:
Before we move forward it is good to describe what is the structure of data in DocumentDB:
A database account consists of a set of databases, each containing multiple collections
Collections can contain stored procedures, triggers, UDFs, documents, and related attachments
A database also has associated users, each with a set of permissions to access various other collections
4. Click “Add Collection” button:
5. Type the name of your collection. In my case this is “PhotoMetaData”. Remember also to provide database id:
Storage capacity should be set to 10GB – it is just for demo purpose.
Click “OK” button:
After few seconds database with collection should be created.
6. Go to “Document Explorer” (available from the list on the left). There you should review your documents in the different collections and databases:
That’s it! Now we have DocumentDB ready.
Remember to copy database and collection name and also Uri and Primary Key – we will use them later:
Create Azure Function
1. Click on the “plus” button on the left and search for “function” and select “Function App” from the list. Then click “Create” button:
2. Fill all required information. Remember to use previously created resource group. Click “Create” button:
3. After few seconds function should be ready:
It is time to connect this Azure components! : )
We would like to take picture with our Xamarin Forms application and then save it with metadata (title and description). Let’s start from configuring our Azure Function.
1. Click “New Function” tab and select “API & Webhoks” scenario. Then select “HttpTrigger-CSharp” template:
2. Type the name of your function and set “Authorization level” to “Function”. Then click “Create” button:
3. After few seconds function is ready for development:
4. Go to “Integrate” tab:
5. Select “Triggers” tab:
We would like to limit our HTTP trigger to POST method (to send photos to Azure). Configuration is shown below:
Click “Save” button.
6. Now go to “Outputs” and select “HTTP”:
Save below configuration:
Configure function app settings
Now it is time to configure function app settings like Storage and DocumentDB connections.
1. Select “Function app settings” from left list:
2. Select “”Configure app settings”:
3. Now we need to add configuration keys:
PhotoStorage – connection string to photos storage – it should look like this: DefaultEndpointsProtocol=https;AccountName=storagesample;AccountKey=<account-key>
PhotoDbUrl – Url to your DocumentDB database
PhotoDbPrimaryKey – Primary key for your DocumentDB
PhotosDbName – name of your database in DocumentDB
PhotosCollectionName – name of your collection in DocumentDB
PhotoContainer – name of your container in PhotoStorage
Save changes.
4. Return to “Develop” tab to see Function code:
Connect Azure Function with Azure Blob Storage
Below code with description is responsible for receiving http request with JSON that contains Photo object which consists of:
Title (string)
Description (string)
FileName (string)
File (byte array)
Great – now you know how to use Azure Function to receive HTTP requests, process them and then uplad files to Azure Blob Storage.
Connect Azure Function with DocumentDB
While configuration for Azure Blob Storage is ready we can pin our Function with DocumentDB database. Below you can find extended code with description to access to DocumentDB:
1. First of all we need to add DocumentDB NuGet package. Open right tab and click “Add” button on top:
2. Add file called “project.json”:
File should contains below code:
2. Get back to “Run.csx” file and paste below function code:
We extended existing code with “UploadDocument” method:
Great – now you know how to use Azure Function to receive HTTP requests, process them and then save them as document in DocumentDB database.
Create Xamarin Forms photo app
1. Create new Xamarin Forms app using below project template in Visual Studio:
2. We will use Android, UWP and iOS projects and of course Portable to share the code:
3. Open “MainPage.xaml” file from “Portable” project and paste below XAML code:
4. Now it is time to add “Xam.Plugin.Media” NuGet to each project:
Then add “Microsoft.Net.Http” NuGet to Portable project:
5. Add folder called “Model” in Portable project and class “Photo” inside it:
6. Replace code in “MainPage.xaml.cs” file with the one below (with description included):
Before you launch the app, remember to add permissions:
1. Android manifest:
2. iOS info.plist:
3. UWP manifest – Pictures library capability
Launch application and see result
Type title
Type description
Select image from the gallery
Android:
iOS
UWP
Sum up
As you can see with Microsoft Azure you are able to implement various scenarios. Now you know that you do not need to have own server – you can use Azure Function. What’s more you know how to connect it with your Xamarin Forms application to store data in Azure Blob and DocumentDB. This is only the beginning – you should definitely try different services. Enjoy!
