XamList

An iOS and Android app showcasing Xamarin.Forms, Azure Functions, Azure SQL Database, Azure API and App Center.

Visual Studio Requirements

Visual Studio for Mac

This solution requires Visual Studio for Mac Version 7.1 Build 1294 or later.

Earlier versions of VSMac don't support Shared Project references from .NET Standard libraries.

Visual Studio for PC

This solution requires Visual Studio for PC Version 15.3 or later.

Earlier versions of VS don't support Azure Functions.

Getting Started

1. Create Azure API App

1. Open a browser, navigate to the Azure Portal and log in.

2. After logging in, click on New -> Enter API App into the Search Bar -> Selected API App from the search results -> Click Create

3. Name the API App
   • I named mine XamListAPIApp
4. Select the Subscription
   • I selected my Visual Studio Enterprise subscription
   • If you do not have a VS Enterprise Subscription, you will need to select a different option
5. Create a new Resource Group
   • I named my resource group XamList
6. Create a new App Service Plan
   1. Click App Service Plan
   2. Click Create New
   3. Name the App Service Plan
      • I named my App Service Plan XamListAppService
   4. Select the location closest to you
      • I selected South Central US
   5. Select the Free Pricing Tier
      1. Click "Pricing Tier"
      2. Select "Free"
      3. Click "Select"
   6. Click "OK"
   7. Click "Create"

2. Create Azure Function App

1. In the Azure portal, click on New -> Enter Function App into the Search Bar -> Selected Function App from the search results -> Click Create

2. Name the Function App
   • I named mine XamListFunctionApp
3. Select Consumption for the Hosting Plan
4. Select the XamList Resource Group
   • We created this resource group when we made our API App, above
5. Select the Location closest to you
6. Under Storage, Select Create New
   • I named my storage "xamlistfunctionapp"
7. Click Create

3. Create Azure SQL Database

1. In the Azure portal, click on New -> Enter SQL Database into the Search Bar -> Selected SQL Database from the search results -> Click Create

2. Name the SQL Database
   • I named mine XamListDatabase
3. Select the Subscription
   • I selected my Visual Studio Enterprise subscription
   • If you do not have a VS Enterprise Subscription, you will need to select a different option
4. Select the XamList Resource Group
   • We created this resource group when we made our API App, above
5. Select Blank Database

6. Select Server
7. Select Create New Server
8. Enter the Server Name
   • I named mine xamlistdatabaseserver
9. Create a Server admin login
   • Store this password somewhere safe, because we will need to use it for our database connection later!
10. Create a password
11. Select the closest location
12. Click "Select"

13. Select "Not Now" for the SQL Elastic Pool option
14. Select Pricing Tier
    1. Select Basic
    2. Move the slider to maximum, 2GB
       • Don't worry, it's the same price for 2GB as it is for 100MB. No clue why!
    3. Click Apply
15. Click Create

4. Get SQL Database Connection String

1. On the Azure Portal, navigate to the SQL Database we created, above
2. Click on "Connection Strings" -> "ADO.NET"
3. Copy the entire Connection String into a text editor

4. In the text editor, change "{your_username}" and "{your_password}" to match the SQL Database Username / Password created above
   • Don't use my username / password because it won't work ;-)

5. Connect SQL Database to the API App

1. In the Azure Portal, navigate to the API App
   • I named mine XamListAPIApp
2. Click Application Settings
3. In the Application Settings, scroll down to "Connection Strings"
4. Create a new connection string
   • Set the name as XamListDatabaseConnectionString
     • Make sure to use this exact name, otherwise the source code will not work
   • Copy/paste the connection string from the text editor
   • From the drop-down menu, Select SQLDatabase
5. Click Save

6. Connect SQL Database to the Azure Function App

1. On the Azure Portal, navigate to the Functions App we create above
2. Select "Application Settings"

3. In the Application Settings, scroll down to "Connection Strings"
4. Create a new connection string
   • Set the name as XamListDatabaseConnectionString
     • Make sure to use this exact name, otherwise the source code will not work
   • Copy/paste the connection string from the text editor
   • From the drop-down menu, Select SQLDatabase
5. Click Save

7. Create the ContactModel Table in the SQL Database

1. In the Azure Portal, navigate to the SQL Database Server we created in a previous step
2. Enter your public IP Address
   • Your public IP address is listed on this page as "Client IP Address"
   • Alternatively, you can discover your public IP Address by navigating to http://whatismyipaddress.com
3. Click Save

4. On the Azure Portal, retrieve the URL of the database we created in the previous steps.

5. Open SQL Server Management Studio and enter the following connection information:
   • Server Type: Database Engine
   • Server Name: [your database server url]
     • Mine is xamlistdatabaseserver.database.windows.net
   • Authentication: SQL Server Authentication
   • User: [your database admin username]
   • Password: [your database admin password]
6. Click Connect

7. In SSMS, create a new Table
   • In the Object Explorer, navigate to the database we created in a previous step
   • Right-click Tables -> New -> Table...

8. Create New Columns
   • Id -> nvarchar(128) -> False
   • FirstName -> nvarchar(128) -> False
   • LastName -> nvarchar(128) -> False
   • PhoneNumber -> nvarchar(128) -> False
   • CreatedAt -> datetimeoffset(7) -> False
   • UpdatedAt -> datetimeoffset(7) -> False
   • Deleted -> bit -> False

9. Create Table Name
   • In the Properties window, enter "ContactModels" for the Name
   • Click SaveAll

8. Publish API App to Azure

1. In Visual Studio, right-click on XamList.API and select Publish

2. In the Publish window, choose "Select Existing" -> "Publish"

3. In the App Service window, select the API App we created earlier, and click OK

4. Visual Studio is now publishing the XamList.API code to your Azure API App

9. Publish Function App to Azure

1. In Visual Studio, right-click on XamList.Functions and select Publish

2. Choose AzureFunctionApp -> Select Existing -> Publish

3. In the App Service window, select the Functions App we created earlier, and click OK

4. Visual Studio is now publishing the XamList.API code to your Azure API App

10. Configure API URL for Mobile App

1. In BackendConstants.cs, change the value of AzureAPIUrl to match your Azure API App URL
   • The address for the one I created in this tutorial is http://xamlistapiapp.azurewebsites.net/

11. Configure Azure Function Url & Keys for Mobile App

1. In BackendConstants.cs, change the value of AzureFunctionUrl to match your Azure Function URL
   • The address for the one I created in this tutorial is https://xamlistfunctionapp.azurewebsites.net

2. In BackendConstants.cs, change the value of AzureFunctionKey_RemoveItemFromDatabase to match your Azure Function Key for Remove Item From Database

3. In BackendConstants.cs, change the value of AzureFunctionKey_RestoreDeletedContacts to match your Azure Function Key for Restore Deleted Contacts