Building Serverless Mobile App With Azure Functions Using Xamarin.Forms

Introduction

Azure Functions is a solution for easily running small pieces of code in the cloud. We can create, execute, and test our custom logic function without creating a VM or web application and also without needing to install any software or infrastructure to run the function. In this article, we'll learn how to implement Azure Functions and directly call through HTTP from Xamarin.Forms application.

Create Azure Functions

I have explained about different ways to create basic Azure Functions in my previous article. You can refer to any of the below articles for creating new Azure Functions.

Create New Xamarin Forms Client Application

We need to create a new blank Xamarin.Forms application and add a new XAML page. You can refer to my previous article for setting up and creating new Xamarin.Forms application.

If you have already installed VS on your machine, open Visual Studio >> Create New Project ( Ctrl +Shift +N) >> Select Cross-Platform Template >> Select Blank Xamarin Forms Application >> Provide Project name and press OK.

The Solution will be created with all the platform and PCL projects.

Design portable UI

The UI will have a few elements on the screen. Entry control for providing user input value and label for print output text .

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="AzureFunctionsDemo.MainPage">
<StackLayout>
<Label Text ="Building Serverless Mobile App with Azure Functions using Xamarin Forms" HorizontalOptions="Center" TextColor="Green" FontSize="30" />
<Entry TextColor="Green" x:Name="txtname" Placeholder =" Enter Your Name" />
<Button Text="Connect to Azure Functions" Clicked="OnButtonClicked" />
<ActivityIndicator x:Name="waitindicator" IsVisible ="false"
Color="Black" />
<Label x:Name="lblname" HorizontalOptions="Center" TextColor="Green" FontSize="30" />
</StackLayout>
</ContentPage>

Create Aure Functions Helper Class

It's time to integrate Azure Functions into the Mobile Applciation. Now, you can add Newtonsoft.JSON from portable project. Right click on Portable Project > Manage NuGet Packages > select Newtonsoft.Json from Browse tab > click on Install.

Create Uri custom extension method for appending the query string.

public static class Common
{
/// <summary>
/// BuildQueryString
/// </summary>
/// <param name="uri"></param>
/// <param name="parameters"></param>
/// <returns></returns>
public static Uri BuildQueryString(this Uri uri, Dictionary<string, string> parameters)
{
var stringBuilder = new StringBuilder();
string str = "?";
foreach (KeyValuePair<string, string> item in parameters)
{
stringBuilder.Append(str + item.Key + "=" + item.Value);
str = "&";
}
return new Uri(uri + stringBuilder.ToString());
}
}

We have already created Get Azure Functions, before writing C# code, copy functions URL of Azure portal and write the HTTP get client method as per below. The HTTP Client will automatically be included in the latest .NET Framework.

using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Text;
using System.Threading.Tasks;
namespace AzureFunctionsDemo
{
public class AzureFunctionHelper
{
// Remember to paste below your Azure Function url copied before in the Portal:
const string AZURE_FUNCTION_URL = "https://devenvexefunctiondemo.azurewebsites.net/api/HttpTriggerCSharp1";
// Remember to paste below your Azure Function Key copied before in the Portal:
const string AZURE_CODE = "fnNK7ncbR3QKAgMgXAaV1gnPMgaPaqUTH3mbv7gi9nM9zt7yJImeng==";
/// <summary>
///Get Azure Functions
/// </summary>
/// <typeparam name="T"></typeparam>
/// <param name="name"></param>
/// <returns></returns>
public async Task<object> GetAsync<T>(string value)
{
var httpClient = new HttpClient();
Dictionary<string, string> query = new Dictionary<string, string>();
query["code"] = AZURE_CODE;
query["name"] = value;
Uri uri = new Uri(AZURE_FUNCTION_URL).BuildQueryString(query);
var content = await httpClient.GetStringAsync(uri);
return JsonConvert.DeserializeObject(content);
}
}

Now, you can start calling GetAsync method from MainPage.xaml.cs file.

using System;
using Xamarin.Forms;
namespace AzureFunctionsDemo
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
async void OnButtonClicked(object sender, EventArgs args)
{
//Show Wait indicator
waitindicator.IsVisible = true;
waitindicator.IsRunning = true;
//Calling Azure Function
AzureFunctionHelper oazurehelper = new AzureFunctionHelper();
var value = await oazurehelper.GetAsync<string>(txtname.Text);
//print azure fucntion return value
lblname.Text = value.ToString();
//Disable wait Indicator after loading output
waitindicator.IsVisible = false;
waitindicator.IsRunning = false;
}
}
}

We have completed all the code for consuming Azure Functions from Xamarin. Now, we can select the platform and press F5. The output looks like below.

Summary

You have learned from here how to create an Azure Function without its own server. Azure Functions is directly called through HTTP from Xamarin.Forms application.

If you have any questions/ feedback/ issues, please write in the comment box.

4 Comments

Join the conversation! Your thoughts help the community grow.

Shantimohan Elchuri9y ago
This is what I was looking for. But I have an issue. I get "Unhandled Exception" error on httpClient.GetStringAsync(uri). What am I doing wrong? The uri is https://esm-func-app-demo.azurewebsites.net/code=...xxx...&name=shanti
- Suthahar Jegatheesan9y ago
  Hello Shantimohan ,Welcome to C# corner , Can you replace below code while get value var content = await httpClient.GetStringAsync(uri).ConfigureAwait(false); // continue in thread pool
- Shantimohan Elchuri9y ago
  Hi Suthahar, It didn't work.
kathir velu9y ago
Very good article..