Xamarin: Integration with Azure Functions

Imagine a scenario wherein you need to quickly setup APIs or microservices for your POCs or small projects without the hassle of provisioning or managing of your infrastructures. What solution should you use? Well the answer for that is to leverage Azure functions. Now a days you can commonly hear or maybe read the term Serverless computing. If you are a developer, well good news instead of trying to setup some servers you can just concentrate more on your codes. In Today’s article I would like to show to you how easy it is to setup Azure Function and integrate with a simple Xamarin Forms Application.

AzureFunctionCoverPhoto

What are Azure Functions?

Azure Functions basically is a FaaS offering of Azure that will let you concentrate more on the code itself rather than the complexity of designing your Infrastructure. A good thing also is that you can scale on demand and only pay for what you have just used. Another highlight of using Azure Functions is that you can seamlessly integrate with other Azure services like Storages, Event Hubs and many more. In this tutorial will just use the HTTPTrigger but you can check some other Azure functions as shown in the Image below:

DifferentAzureFunction.PNG
Different Azure Functions

Setting up an Azure Function

First thing to do is to login on your Microsoft Azure Account. You can also activate your Azure access on your My Visual Studio Benefits for free credits. You will be greeted by the landing page as shown in Figure 1.

LandingPage
Figure 1. Azure Landing Page.

Next thing to do is to create the Azure function using the Create a Resource button. Then under the Compute Category you will see the Function App service as shown in Figure 2.

Step2.png
Figure 2. Creating an Azure Function App

After clicking the Azure Function App, you will be greeted by some settings you need to complete as shown in Figure 3.

  • App Name: The unique application you want to call for your Function App.
  • Subscription: Choose the subscription e.g. (V.S. Professional, Enterprise) you want to use for your Function App.
  • Resource Group: Choose to create a new or either put it in an existing group the Function App that you want to create.
  • OS: The OS that you want your server to be, could be Linux or either Windows.
  • Hosting Plan: Basically you can either choose consumption plan (Pay as you execute) or App service plan (Predefined capacity allocation).
  • Location: Region wherein you’re Function App should run.
  • Runtime Stack: Choose what runtime for your preferred language you want to use on your Function app.
  • Storage: Choose a new or created storage you want your Function app to utilize.
  • Application Insights: You can use this to further monitor you Function App.
Step3.png
Figure 3. Function App Configuration

Once you’ve successfully created your Function App you will be greeted by the Main Page of your Azure Function App as shown in Figure 4.

Step4.png
Figure 4. Function App Main Page

So let’s try to add a simple function by clicking the Functions item as shown in Figure 5.

Step5.png
Figure 5. Adding a new Function App

In this example we will use the HTTP Trigger Function App wherein the triggering of our code will be activated through calling the HTTP. Will name our HTTP Trigger Function app as xamarinhelloworld shown in Figure 6.

Step6
Figure 6. Creating a new HTTP Trigger function app

Creating this successfully will have a default generated code as shown in Figure 7. For the simplicity of this tutorial we will not modify or make changes on our generated code.

Step7
Figure 7. Default generated code for HTTP Trigger.

One thing to note here is that you can either use the Azure Web IDE to manage or make changes on your Function App or you can also use the Visual Studio IDE. Now let’s try to test our function App using the Web IDE. Just click the Run button and you will see the output on the lower right part of your screen as shown in Figure 8. You can also try to edit the parameters for Azure Function by editing the Request Body.

AzureFunctionExecute.gif
Figure 8. Running your Azure Function App

Let’s try to test our function app using our web browser just to validate that it’s working outside the Azure portal. First thing to do is to get the complete URL by clicking the Get Function URL code as shown in Figure 9. Just be mindful of your Azure Function Key for security purposes. You can check the Manage menu to view, renew or revoke each individual Function key.

Step9.png
Figure 9. Function App URL.

Next thing to do is to copy and paste in your web browser but adding the parameter &name=Juan so that it will process and in return will display Hello Juan as shown in Figure 10.

Step11
Figure 10. Testing your Function App in Web browser

Integrating Function App with Xamarin

For our Xamarin integration will be using a simple Android App wherein the user can enter their name and will be processed by our Function app and will be returned to our Android App as shown in Figure 11.

SampleApp
Figure 11. Sample Android App.

Our sample application will just have three lines of codes using mainly the HttpClient class. Will use the GetStringAsync() method with our URL as our parameter as shown in Figure 12. Try to run the android application using either your emulator or actual device and you should see the same output on Figure 11.

Step12.PNG
Figure 12. Using HTTPClient.

Here is the URL for the sample App: https://github.com/KirkPatrickJunsay/XamarinAzureFunctions

Conclusion

To wrap things up, we created a simple Azure Function App in our Azure Portal, then we’ve learned how to execute it and also test it in our web browser. We also used the HTTPClient class in order to test in our simple Xamarin Forms Application. With that in mind Azure Functions are good for small APIs, microservices or for POCs, if you want to explore more you can check other Serverless Computing offerings of Microsoft.

Happy Coding 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s