{"id":4195,"date":"2016-05-17T23:48:07","date_gmt":"2016-05-18T07:48:07","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/cesardelatorre\/?p=4195"},"modified":"2016-05-17T23:48:07","modified_gmt":"2016-05-18T07:48:07","slug":"using-azure-functions-from-xamarin-mobile-apps","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/cesardelatorre\/using-azure-functions-from-xamarin-mobile-apps\/","title":{"rendered":"Using Azure Functions from Xamarin Mobile Apps"},"content":{"rendered":"

\"image\"<\/a> <\/p>\n

I was testing Azure Functions by creating a simple proof of concept with a Xamarin.Forms client<\/b> and since there\u2019s not much info about \u201cusing Azure Functions from Xamarin\u201d I thought it was a good idea to publish this Getting Started or Walkthrough in my MSDN blog. <\/p>\n

Make no mistake about it, you consume an Azure Function from a Xamarin app in the same way you\u2019d consume a regular web service or ASP.NET Web API deployed in Azure in any other environment (Azure App Service or even Azure Service Fabric). But I think this E2E walkthrough is interesting in any case if you are not aware of Azure Functions and\/or Xamarin.Forms. <\/p>\n

With Xamarin.Forms<\/a><\/b> you can create native cross-platform mobile apps with C#, targeting iOS, Android and UWP. <\/p>\n

With Azure Functions<\/a><\/b> you can create event-driven task\/services with a server-less approach, just like publishing a C# function in the cloud and, \u2018voila\u2019, it\u2019ll work right away! It is a convenient way to create small web services that you can invoke through HTTP, they can also be scheduled or triggered by events. <\/p>\n

This is the definition you can see in azure.com: <\/p>\n

\u201cAzure Functions is a solution for easily running small pieces of code, or \u2018functions\u2019 in the cloud. You can write just the code you need for the problem at hand, without worrying about a whole application or the infrastructure to run it<\/i><\/b>.\u201d <\/p>\n

You can get an Overview of Azure Functions here<\/a>, and more details about how to implement Azure Functions with .NET\/C# here<\/a>. <\/p>\n

Step 1 \u2013 Create the Azure Function app environment in Azure\u2019s portal<\/h2>\n

A \u201cfunction app\u201d hosts the execution of your functions in Azure. Before you can create a function, you need to have an active Azure subscription account. If you don’t already have an Azure account, free accounts are available<\/a> or even better, free benefits with VS Dev Essentials<\/a><\/b> (Azure credit, $25\/month for 12 months, for free). <\/p>\n

Go to the Azure portal and sign-in with your Azure account. <\/p>\n

If you have an existing function app to use, select it from Your function apps then click Open. To create a new function app, type a unique Name for your new function app or accept the generated one, select your preferred Region, then click Create + get started. At this point you have your Azure Function App environment where you can create as many Functions as you\u2019d like. <\/p>\n

In your function app, click + New Function > HttpTrigger \u2013 C#<\/b>, provide a name for the Function and hit \u201cCreate\u201d. <\/p>\n

\"image\"<\/a> <\/p>\n

This creates a function that is based on the specified template. <\/p>\n

Step 2 \u2013 Write the code for your Azure Function in the web editor<\/h2>\n

Now write your code. Of course, in a real case, your function code might be accesing some kind of data source like Azure SQL DB, DocDB, Azure Storage, etc. In this simple case, for simplicity\u2019s sake, I\u2019m generating the data (a List,Vehicle>) within my code and using Linq. You can simply copy\/paste the following code into your function if you want to go faster:<\/p>\n\n\n\n
\n

using System.Net; <\/p>\n

public static async Task<HttpResponseMessage> Run(HttpRequestMessage req, TraceWriter log) <\/p>\n

{ <\/p>\n

log.Info($”C# HTTP trigger function processed a request. RequestUri={req.RequestUri}”); <\/p>\n

\/\/ parse query parameter <\/p>\n

string make = req.GetQueryNameValuePairs() <\/p>\n

.FirstOrDefault(q => string.Compare(q.Key, “make”, true) == 0) <\/p>\n

.Value; <\/p>\n

\/\/ Get request body <\/p>\n

dynamic data = await req.Content.ReadAsAsync<object>(); <\/p>\n

\/\/ Set name to query string or body data <\/p>\n

make = make ?? data?.make; <\/p>\n

if(make == null) <\/p>\n

return req.CreateResponse(HttpStatusCode.BadRequest, “Please pass a car make (make param, like make=Chevrolet) on the query string or in the request body”); <\/p>\n

List<Vehicle> listOfVehicles = new List<Vehicle>(); <\/p>\n

Vehicle vehicle1 = new Vehicle(); <\/p>\n

vehicle1.Make = “Chevrolet”; <\/p>\n

vehicle1.Model = “Camaro”; <\/p>\n

listOfVehicles.Add(vehicle1); <\/p>\n

Vehicle vehicle2 = new Vehicle(); <\/p>\n

vehicle2.Make = “Chevrolet”; <\/p>\n

vehicle2.Model = “Tahoe”; <\/p>\n

listOfVehicles.Add(vehicle2); <\/p>\n

Vehicle vehicle3 = new Vehicle(); <\/p>\n

vehicle3.Make = “Ford”; <\/p>\n

vehicle3.Model = “Mustang”; <\/p>\n

listOfVehicles.Add(vehicle3); <\/p>\n

var requestedVehicles = from vehicle in listOfVehicles <\/p>\n

where vehicle.Make == make <\/p>\n

select vehicle; <\/p>\n

IEnumerable<Vehicle> enumerableListOfVehicles = requestedVehicles; <\/p>\n

return req.CreateResponse(HttpStatusCode.OK, enumerableListOfVehicles); <\/p>\n

} <\/p>\n

public class Vehicle <\/p>\n

{ <\/p>\n

public string Make { get; set; } <\/p>\n

public string Model { get; set; } <\/p>\n

}<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

You should have something like the following:<\/p>\n

\"image\"<\/a><\/p>\n

  <\/p>\n

Step 3 \u2013 Test the Azure function in Azure\u2019s portal<\/h2>\n

Since the Azure Functions contain functional code, you can immediately test your new function. <\/p>\n

In the Develop tab, review the Code window and notice that this C# code expects an HTTP request with a \u201cmake\u201d value (car make) passed either in the message body or in a query string. When the function runs, this value is used to filter the data to return. <\/p>\n

Scroll down to the Request body<\/b> text box, change the value of the make<\/b> property to \u201cChevrolet<\/b>\u201d, and click Run<\/b>. You will see that execution is triggered by a test HTTP request, information is written to the streaming logs, and the function response (list of filtered cars) is displayed in the Output. <\/p>\n

\"clip_image006\"<\/a> <\/p>\n

To trigger execution of the same function from another browser window or tab, copy the Function URL value from the Develop tab. <\/p>\n

\"clip_image008\"<\/a> <\/p>\n

And now paste it in a browser address bar but don\u2019t forget to append an additional parameter with \u201cmake=Chevrolet\u201d or \u201cmake=Ford\u201d (query string value as &make=Chevrolet<\/b>) and hit enter. You\u2019ll get the same JSON data in the browser: <\/p>\n

\"clip_image010\"<\/a> <\/p>\n

You can also test it with curl<\/a> or other tools like PostMan<\/a> like explained in Testing Azure Functions<\/a>. <\/p>\n

Step 4 \u2013 Develop your Xamarin app and consume the Azure function<\/h2>\n

Now that our Azure Function works and is tested, let\u2019s create our Xamarin.Forms app. <\/p>\n

I created a plain \u201cBlank App (Xamarin.Forms Portable)\u201d solution using the following template: <\/p>\n

\"clip_image012\"<\/a> <\/p>\n

Once you have the solution, I usually get rid of the Windows 8.1 projects and just leave the Android, iOs and UWP projects plus the PCL project, of course, as I show below: <\/p>\n

\"clip_image013\"<\/a> <\/p>\n

Since this is a Xamarin.Forms solution and this is a pretty straight forward sample, we\u2019ll just need to change code in the shared PCL project. <\/p>\n

In particular, we just need to add code in the App.cs. <\/p>\n

\"clip_image014\"<\/a> <\/p>\n

Next, add the Newtonsoft.Json Nuget<\/b> package to your PCL project: <\/p>\n

\"clip_image016\"<\/a> <\/p>\n

Now, because I want to have a quick proof of concept, I wrote all the code as C# code. Of course, in a more elaborated Xamarin.Forms app, I usually would use XAML for my controls and views rather than by adding controls in C# like I\u2019m doing in this example. But for the sake of brevity, I just added C# code. <\/p>\n

Within the App.cs, add the line: <\/p>\n

using Newtonsoft.Json; <\/p>\n

And now paste the following code in your App.cs<\/b> file within your app namespace definition:<\/p>\n

 <\/p>\n\n\n\n
\n

public class App : Application <\/p>\n

{ <\/p>\n

static ListView lstVehicles = new ListView(); <\/p>\n

static Label titleLabel = new Label(); <\/p>\n

public App() <\/p>\n

{ <\/p>\n

MainPage = GetMainPage(); <\/p>\n

} <\/p>\n

public static ContentPage GetMainPage() <\/p>\n

{ <\/p>\n

titleLabel.HorizontalTextAlignment = TextAlignment.Center; <\/p>\n

titleLabel.Text = “Testing Azure Functions from Xamarin!”; <\/p>\n

Button newButn = new Button() <\/p>\n

{ <\/p>\n

Text = “Connect to Azure Function”, <\/p>\n

}; <\/p>\n

newButn.Clicked += newButn_Clicked; <\/p>\n

lstVehicles.ItemTemplate = new DataTemplate(typeof(TextCell)); <\/p>\n

lstVehicles.ItemTemplate.SetBinding(TextCell.TextProperty, “Model”); <\/p>\n

return new ContentPage <\/p>\n

{ <\/p>\n

Content = new StackLayout() <\/p>\n

{ <\/p>\n

Children = { <\/p>\n

titleLabel, <\/p>\n

newButn, <\/p>\n

lstVehicles <\/p>\n

} <\/p>\n

} <\/p>\n

}; <\/p>\n

} <\/p>\n

static async void newButn_Clicked(object sender, EventArgs e) <\/p>\n

{ <\/p>\n

string previousTextValue = titleLabel.Text; <\/p>\n

titleLabel.Text = “******* Executing the Azure Function! ********”; <\/p>\n

VehiclesAzureFunction vehiclesAzureFunction = new VehiclesAzureFunction(“https:\/\/helloworldfunctcdltll.azurewebsites.net\/”); <\/p>\n

\/\/Consume the Azure Function with hardcoded method easier to see as an example <\/p>\n

var vehiclesList = await vehiclesAzureFunction.GetVehiclesHardCodedAsync(); <\/p>\n

\/\/Consume the Azure Function with HttpClient reusable code within the Function\/Service Agent <\/p>\n

\/\/var vehiclesList = await vehiclesAzureFunction.GetVehiclesAsync(“Chevrolet”); <\/p>\n

lstVehicles.ItemsSource = vehiclesList; <\/p>\n

titleLabel.Text = previousTextValue; <\/p>\n

} <\/p>\n

} <\/p>\n

public class Vehicle <\/p>\n

{ <\/p>\n

public string Make { get; set; } <\/p>\n

public string Model { get; set; } <\/p>\n

} <\/p>\n

public class VehiclesAzureFunction <\/p>\n

{ <\/p>\n

public VehiclesAzureFunction() <\/p>\n

{ <\/p>\n

} <\/p>\n

public async Task<List<Vehicle>> GetVehiclesHardCodedAsync() <\/p>\n

{ <\/p>\n

var client = new System.Net.Http.HttpClient(); <\/p>\n

string url = $”https:\/\/helloworldfunctcdltll.azurewebsites.net\/api\/HttpTriggerVehicleList?code=mi11r1elo9fwd2cafw5ozctgy8yug8fr0cjc&make=Chevrolet”; <\/p>\n

var response = await client.GetAsync(url); <\/p>\n

var vehiclesJson = response.Content.ReadAsStringAsync().Result; <\/p>\n

List<Vehicle> listOfVehicles = JsonConvert.DeserializeObject<List<Vehicle>>(vehiclesJson); <\/p>\n

return listOfVehicles; <\/p>\n

} <\/p>\n

}<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Basically, I\u2019m using the System.Net.Http.HttpClient class in order to call the Azure Function, in the same way you do when consuming regular Web API services. That code is implemented in a Function\/Service agent class called VehiclesAzureFunction, and I\u2019m running that code when the user presses the \u201cConnect to Azure Function\u201d. <\/p>\n

When running the Xamarin app in the Android emulator, this is what you get when starting the app and after pressing the button and calling the Azure Function: <\/p>\n\n\n\n
\n

\"clip_image018\"<\/a><\/p>\n<\/td>\n

\n

\"clip_image020\"<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Code available at GitHub<\/h2>\n

You can grab all the code from GitHub, as it\u2019ll easier to see than just copying\/pasting from a blog post. In the code at GitHub I\u2019m also using some base classes with generics that are useful when you want to re-use more code in a Xamarin project. <\/p>\n

Code download in GitHub<\/b>: https:\/\/github.com\/CESARDELATORRE\/Xamarin_AzureFunctions_PoC<\/a> <\/p>\n

Next steps<\/h2>\n

In this blog post I simply created an Azure Function<\/b> that was directly called through HTTP from a Xamarin.Forms<\/b> app and I\u2019m showing in the mobile app the returned data. <\/p>\n

Once you have deployed you Azure Function you can learn on How to scale Azure Functions<\/a>, as well.  <\/p>\n

But, there are many other possibilities you can do with Azure Functions like cool things related to events, for instance, triggering an Azure Function when a WebHook<\/strong><\/a> event is received (like a GitHub WebHook<\/strong><\/a> or a custom ASP.NET WebHook<\/strong><\/a>) like in this example: Azure Function triggered by a WebHook<\/strong><\/a>. <\/p>\n

Another interesting scenario would be to create an Azure Function that receives a WebHook and that Azure Function generates a Mobile Push Notification<\/strong><\/a> to be sent to mobile devices (iOS, Android and Windows devices) through Azure Push Notifications Hub. <\/p>\n

I also like this Azure Function example using the new Azure Cognitive Services<\/strong> (in this case, purely server-side related): Smart image re-sizing with Azure Functions and Cognitive Services<\/a>. <\/p>\n

At the end of the day, Azure Functions can be useful when testing small proof of concepts of code or quick actions with C# or Node.js code and you don\u2019t want\/need to deploy a whole VS project. You could use it even for building simple microservices, too. Although, for a more complex\/large Microservices approach solution, you should check out this MSDN Magazine article Azure Service Fabric and the Microservices Architecture<\/a><\/strong> that I wrote. \ud83d\ude42 <\/p>\n

Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"

I was testing Azure Functions by creating a simple proof of concept with a Xamarin.Forms client and since there\u2019s not much info about \u201cusing Azure Functions from Xamarin\u201d I thought it was a good idea to publish this Getting Started or Walkthrough in my MSDN blog. Make no mistake about it, you consume an Azure […]<\/p>\n","protected":false},"author":362,"featured_media":12806,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[28,124],"class_list":["post-4195","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cesardelatorre","tag-azure-functions","tag-xamarin"],"acf":[],"blog_post_summary":"

I was testing Azure Functions by creating a simple proof of concept with a Xamarin.Forms client and since there\u2019s not much info about \u201cusing Azure Functions from Xamarin\u201d I thought it was a good idea to publish this Getting Started or Walkthrough in my MSDN blog. Make no mistake about it, you consume an Azure […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/cesardelatorre\/wp-json\/wp\/v2\/posts\/4195","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/cesardelatorre\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/cesardelatorre\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/cesardelatorre\/wp-json\/wp\/v2\/users\/362"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/cesardelatorre\/wp-json\/wp\/v2\/comments?post=4195"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/cesardelatorre\/wp-json\/wp\/v2\/posts\/4195\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/cesardelatorre\/wp-json\/wp\/v2\/media\/12806"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/cesardelatorre\/wp-json\/wp\/v2\/media?parent=4195"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/cesardelatorre\/wp-json\/wp\/v2\/categories?post=4195"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/cesardelatorre\/wp-json\/wp\/v2\/tags?post=4195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}