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.

1. Getting Started With Azure Functions Using Azure Free Trial Account
2. How To Create And Test Azure Functions Using Azure Portal
3. Getting Started With Microsoft Azure Functions Using Visual Studio 2017

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>
  <!--Title text-->
<Label Text ="Building Serverless Mobile App with Azure Functions using Xamarin Forms" HorizontalOptions="Center" TextColor="Green" FontSize="30" />
  <!--Provide Input Parameter to Azure Functions-->
  <Entry TextColor="Green" x:Name="txtname" Placeholder =" Enter Your Name" />
  <!--Click On Button For Communicate to Azure Functions-->
    <Button Text="Connect to Azure Functions"  Clicked="OnButtonClicked" />
  <!--Activity Indicator will show progress of client and Azure connection and excution-->
  <ActivityIndicator x:Name="waitindicator" IsVisible ="false"
                           Color="Black" />
  <!--Output label-->
<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.