Xamarin Azure Challenge

Welcome to the Xamarin Azure Challenge!

The goal is to create a serverless Azure Function and connect it to a Xamarin mobile app.

Winners

The winner list has been announced here: https://github.com/xamarin/XamarinAzureChallenge/blob/master/WinnerList.md.

If you are among the winners, congratulations! If not, rest assured that we have a little something for you too as a thank you token for your participation.

Emails with instructions on how to proceed will follow soon.

Challenge Info

The challenge begins 23 September 2019, and ends at 2359 PT on 23 October 2019.

• Ten (10) Grand Prizes:

  • Each winner will receive Microsoft Surface Headphones

• One Thousand (1,000) Prizes:

  • Each winner will receive a 3-month Xbox Game Pass

Learn more about the challenge: https://github.com/xamarin/XamarinAzureChallenge/blob/master/TermsAndConditions.md

Challenge Objectives

1. Create and publish a serverless Azure Function
2. Add the Azure Function url to the Xamarin.Forms application
3. Submit your entry from the Xamarin.Forms application to your Azure Function

Task 0: Prerequisites

1. Create Azure Subscription
   • If you do not currently have an Azure subscription, sign up for a free Azure account that includes a $200 Azure Credit
2. Install Visual Studio + Xamarin Tools
   • On PC, follow these steps to install Visual Studio with Xamarin
   • On Mac, follow these steps to install Visual Studio for Mac with Xamarin

Task 1: Create an Azure Function resource in Azure

1. Retrieve Source Code

We have two options to retrieve the code for the Xamarin Azure Challenge:

• Clone the repository
• Download the source code

1a. Clone the repository

To clone this repository, run this command in your favorite terminal:

git clone https://github.com/xamarin/XamarinAzureChallenge.git

1b. Download Source Code

To download the source code, click this link: https://github.com/xamarin/XamarinAzureChallenge/archive/master.zip

Note: On a PC, save the source code in a folder close to your root directory, e.g. C:\XamarinAzureChallenge\. If the folder path is too many characters long, you may get errors while publishing the code to the Azure Functions.

2. (Windows) Move Code to C:\XamarinAzureChallenge Folder

1. (Windows) After retrieving the source code, move the XamarinAzureChallenge folder to C:\XamarinAzureChallenge

• (macOS) Skip this step

Note: Moving the code to C:\XamarinAzureChallenge ensures that the MAX_PATH limit will not be hit. On Windows 10, it is possible to remove the MAX_PATH limit following these instructions: https://www.ryadel.com/en/enable-ntfs-win32-long-paths-policy-remove-255-260-characters-limit-windows-10/

3. Publish Azure Function

After cloning the repository, we have 3 options to create our Azure Function:

1. Use Visual Studio on PC
   • Learn More
2. Use Visual Studio for Mac
   • Learn More
3. Use Azure CLI
   • Learn More

3a. Use Visual Studio on PC

1. In Visual Studio on PC, open XamarinAzureChallenge.sln

2. In Visual Studio, in the top toolbar, select File > Account Settings...

3. In the Account Settings window, select Add an account...

Note: If your Azure account is already visible, you may skip this step

4. In the Sign in to your account pop-up, log in to your Azure account

Note: If your Azure account was already visible, you may skip this step

5. In the Account Settings window, select Close

6. In Visual Studio, in the Solution Explorer, right-click on Backend > XamarinAzureChallenge.Functions

7. In the right-click menu, select in Publish

8. In the Pick a publish target window, select the following:

• Azure Functions Consumption Plan
  • Create New

Note: If publish targets don't appear, install Azure development workload.

9. In the Pick a publish target window, select Publish

10. In the Create New window, enter the following information:

• Name: XamarinAzureChallenge-[Your Name]
  • Note: Replace [Your Name] with your name to ensure the Azure Function name is unique
  • In this example, I'm using XamarinAzureChallenge-Brandon
• Subscription: [Select your Azure Subscription]
• Resource Group
  • New
    • New resource group name: XamarinAzureChallenge
    • OK
• Location: [Select the Azure Data Center Closest To You]
• Azure Storage
  • New
    • Account Name: xamarinazure[Your Name]
      • Note: Replace [Your Name] with your name to ensure the Azure Storage name is unique
      • In this example, I'm using "xamarinazurebrandon"
    • Location: [Select the Azure Data Center Closest To You]
    • Account type: Standard - Locally Redundant Storage
    • OK

11. In the Create New window, click Create

12. Standby while Visual Studio creates our Azure Function resources

13. In the Publish window, to push our code to the newly created Azure Function, select Publish

14. In the Visual Studio Toolbar, select View > Output

15. In the Output window, ensure it says Publish: 1 succeeded

3b. Use Visual Studio for Mac

1. In Visual Studio for Mac, open XamarinAzureChallenge.sln

2. In the Apple Menu Bar, select Visual Studio > Account...

3. In the Account window, click Add...

Note: If your Azure account is already visible, you may skip this step

4. In the Sign in to your account pop-up, sign into your Azure account

Note: If your Azure account was already visible, you may skip this step

5. After logging into your Azure Account, in the Account window, select the red close button, X

6. In Visual Studio for Mac, in the Solution Explorer, right-click on Backend > XamarinAzureChallenge.Functions

7. In the right-click menu, select Publish > Publish to Azure...

8. In the Publish to Azure App Service window, select your Azure Account

9. In the Publish to Azure App Service window, select New

10. In the Create New App Service on Azure window, enter the following information:

• App Service Name: XamarinAzureChallenge-[Your Name]
  • Note: Replace [Your Name] with your name to ensure the App Service Name is unique
  • In this example, I'm using XamarinAzureChallenge-Brandon
• Subscription: [Select your Azure Subscription]
• Resource Group
  • Click the + symbol
  • XamarinAzureChallenge
• Service Plan:
  • Custom
• Plan Name: XamarinAzureChallenge
• Region: [Select the Azure Data Center Closest to you]
• Pricing: Consumption

11. In the Create New App Service on Azure window, select Next

12. In the Configure Storage Account window, enter the following information:

• Storage Account:
  • Custom
• Account Name: xamarinazure[Your Name]
  • Note: Replace [Your Name] with your name to ensure the Storage Account Name is unique
  • In this example, I'm using "xamarinazurebrandon"
• Account Type: Standard - Locally Redundant Storage

13. In the Configure Storage Account window, select Create

14. In the Create Azure App Service pop up, select OK

15. In Visual Studio, in the menu bar, select View > Pads > Azure

16. In Visual Studio, in the Azure pad, ensure the code is Deploying...

17. Stand by while Visual Studio for Mac publishes our code to our Azure Function

3c. Use Azure CLI

As a prerequisite, you must install Azure Core Tools version 2.x and Azure CLI.

Alternatively, if you do not wish to install these tools locally, you can use these CLI tools pre-installed in a browser via the Azure Cloud Shell.

1. Open the terminal

• How to open the macOS Terminal
• How to open the Windows Terminal

2. In the terminal, enter the following command to login into Azure CLI:

az login

Note: Stand by until the Azure CLI opens your browser to the Azure Login page

3. In the automatically-opened browser window, on the Azure Login page, log into your Azure Account

4. In the terminal, enter the following command to create a new Azure Resource Group:

az group create --name XamarinAzureChallenge --location westeurope

Note: If you have more than one subscription you will need to especify the subscription in which the resource group will be created using --subscription [your Azure Subscription ID]

How to find your Azure Subscription ID

5. In the terminal, enter the following command to create a new Azure Storage Account:

az storage account create --name xamarinazure[Your Name] --location westeurope --resource-group XamarinAzureChallenge --sku Standard_LRS

Note: Replace [Your Name] with your name to ensure the storage name is unique

Note: If you have more than one subscription you will need to especify the subscription in which the resource group will be created using --subscription [your Azure Subscription ID]

How to find your Azure Subscription ID

6. In the terminal, enter the following command to create a function app:

az functionapp create --resource-group XamarinAzureChallenge --consumption-plan-location westeurope --name XamarinAzureChallenge-[Your Name] --storage-account  xamarinazure[Your Name] --runtime dotnet

Note: Replace [Your Name] with your name to ensure the functionapp name is unique

Note: For --storage-account, use the storage account created in the previous step

Note: If you have more than one subscription you will need to especify the subscription in which the resource group will be created using --subscription [your Azure Subscription ID]

How to find your Azure Subscription ID

Note: The Azure Function name must be unique, which is why we append our name

7. In the terminal, enter the following command to navigate to the project folder XamarinAzureChallenge.Functions project folder.

• Windows
  • cd [Your Path to XamarinAzureChallengeSource Code]\src\XamarinAzureChallenge.Functions
• macOS
  • cd [Your Path to XamarinAzureChallengeSource Code]/src/XamarinAzureChallenge.Functions

8. In the terminal, enter the following command to publish our code to our Azure Function:

func azure functionapp publish XamarinAzureChallenge-[Your Name]

Note: Replace [Your Name] with your name, using the same account name created earlier

Task 2: Configure Azure Function

Before our Azure Function can submit our entry for the XamarinAzureChallenge, we'll need to configure a few items.

1. Add Submission Url to Environment Variables

Azure Functions allow us to store Environment Variables in the cloud that our Functions app can retrieve at runtime. In this step, we'll add the submission url as an Environment Variable.

1. In your browser, navigate to the Azure Portal

2. In the Azure Portal, on the left-hand menu, select the cube-shaped Resource Groups icon

3. In the Resource Groups window, in the filter box, enter XamarinAzureChallenge

4. In the Resource Groups window, select the XamarinAzureChallenge Resource Group

5. In the XamarinAzureChallenge Resource Group, select the function app XamarinAzureChallenge-[Your Name]

6. In the XamarinAzureChallenge Function, in the Configured features frame, select Configuration

7. In the Application Settings window, select + New application setting

8. In the Add/Edit application setting window, enter the following data:

• Name: END_POINT
• Value: https://xamarinazurechallenge-backend.azurewebsites.net/api/SubmitChallengeResult

9. In the Add/Edit application setting window, select OK

10. In the Add/Edit application setting window, select the Save

11. Stand by while the settings are saved

12. In the Add/Edit application setting window, select the close button, X

2. Enable Access Control (IAM)

To ensure a valid submission, the Function App will verify the Azure Subscription ID using Managed Identity & Access Control. Let's enable both.

Note: Azure Functions using Linux Consumption Plans don't support IAM. Be sure you've followed the instructions in Step 2 which create an Azure Function using the Windows Consumption Plan.

1. In the XamarinAzureChallenge window, select Platform features

2. In the Platform features window, select Identity

3. In the Identity window, in the System assigned tab, set the Status to On

4. In the Identity window, select Save

5. In the confirmation popup, select Yes

6. Stand by while System Assigned Identity is enabled

7. In the Identity window, click the close button, X

8. In the Platform features tab, select Access control (IAM)

9. In the Access Control window, select +Add > Add role assignment

10. In the right-hand fly-out menu Add role assignment, make the following selections:

• Role: Owner
• Assign Access to: Azure AD user, group or service principal
• Select: xamarinazurechallenge

11. In the right-hand fly-out menu Add role assignment, select XamarinAzureChallenge-[Your Name]

12. In the right-hand fly-out menu Add role assignment, select Save

Task 3: Configure the Xamarin App

1. Retrieve Azure Function URL

After publishing our Azure Function, we are ready to configure our Xamarin app with our Azure Function's URL.

1. In your browser, navigate to the Azure Portal

2. In the Azure Portal, on the left-hand menu, select the cube-shaped Resource Groups icon

3. In the Resource Groups window, in the filter box, enter XamarinAzureChallenge

4. In the Resource Groups window, select the XamarinAzureChallenge Resource Group

5. In the XamarinAzureChallenge Resource Group, select the function app XamarinAzureChallenge-[Your Name]

6. In the Function Apps window, select XamarinAzureChallenge > Functions > SubmitChallengeFunction

7. In the SubmitChallengeFunction window, select Get function url

8. In the Get function url window, select Copy

2. Add the Azure Function URL to Xamarin App

1. In Visual Studio, open XamarinAzureChallenge.sln

2. In Visual Studio, in the Solution Explorer, open Mobile > XamarinAzureChallenge > ViewModels > UserDataViewModel.cs

3. In the UserDataViewModel editor, comment out the #error compiler directive by prepending //:

//#error Missing Azure Function Endpoint Url. Replace "Enter Your Function API Url Here" with your Azure Function Endpoint Url

4. In the UserDataViewModel editor, paste your Azure Function Url to private const string endpoint:

private const string endpoint = "[Enter your Azure Function URL]";

Note: Replace [Enter your Azure Function URL] with the URL retrieved in the previous step

Task 4: Run the Xamarin App

1. In Visual Studio, in the Solution Explorer, right-click on XamarinAzureChallenge.Android

   Note: To run the iOS app, right-click on XamarinAzureChallenge.iOS

2. In the right-click menu, select Set As Startup Project

3. In Visual Studio, at the top, select the arrow icon to build/deploy the app

4. Ensure the app launches on your mobile device

5. Follow the instructions on the mobile app to complete the Xamarin Azure Challenge

6. Upon completing the challenge, ensure the success screen is displayed

Congratulations!

You've successfully completed the Xamarin Azure Challenge. Keep an eye out for an email shortly!

Report an issue

If you found an issue with this challenge, please open an issue in this GitHub repo

Additional Resources

If you are interested in learning more about this topic, you can refer to the following resources:

• Azure Function Documentation
• Xamarin Documentation
• Azure Samples + Xamarin