Skapa en Xamarin.Forms-app med Azure

Översikt

Den här självstudien visar hur du lägger till en molnbaserad back-end-tjänst i en Xamarin.Forms-mobilapp med hjälp av Mobile Apps-funktionen i Azure App Service som back-end. Du skapar både en ny Mobile Apps-serverdel och en enkel to-do lista Xamarin.Forms-app som lagrar appdata i Azure.

Att slutföra den här självstudiekursen är en förutsättning för alla andra Mobilapplikationer-självstudiekurser för Xamarin.Forms.

Förutsättningar

För att slutföra den här självstudien behöver du följande:

• Ett aktivt Azure-konto. Om du inte har något konto kan du registrera dig för en Utvärderingsversion av Azure och få upp till 10 kostnadsfria mobilappar som du kan fortsätta använda även när utvärderingsversionen är slut. Mer information finns i Kostnadsfri utvärderingsversion av Azure.

• Visual Studio Tools för Xamarin, i Visual Studio 2017 eller senare, eller Visual Studio för Mac. Se installationssidan för Xamarin för instruktioner.

• (valfritt) För att skapa en iOS-app krävs en Mac med Xcode 9.0 eller senare. Visual Studio för Mac kan användas för att utveckla iOS-appar, eller så kan Visual Studio 2017 eller senare användas (så länge Mac är tillgängligt i nätverket).

Skapa en ny mobile apps-serverdel

1. Logga in på Azure-portalen.

2. Klicka på Skapa en resurs.

3. I sökrutan skriver du Webbapp.

4. I resultatlistan väljer du Webbapp från Marketplace.

5. Välj din prenumeration och resursgrupp (välj en befintlig resursgrupp eller skapa en ny (med samma namn som din app)).

6. Välj ett unikt namn på webbappen.

7. Välj standardalternativet Publicera som Kod.

8. I Körningsstacken måste du välja en version under ASP.NET eller Node. Om du skapar en .NET-serverdel väljer du en version under ASP.NET. Om du annars riktar in dig på ett Nodbaserat program väljer du en av versionerna från Node.

9. Välj rätt operativsystem, antingen Linux eller Windows.

10. Välj den region där du vill att den här appen ska distribueras.

11. Välj lämplig App Service-plan och tryck på Granska och skapa.

12. Under Resursgrupp väljer du en befintlig resursgrupp eller skapar en ny (med samma namn som din app).

13. Klicka på Skapa. Vänta några minuter tills tjänsten har distribuerats framgångsrikt innan du fortsätter. Titta på ikonen Meddelanden (klockan) i portalrubriken för statusuppdateringar.

14. När distributionen är klar klickar du på avsnittet Distributionsinformation och klickar sedan på resursen av typen Microsoft.Web/sites. Den navigerar dig till apptjänstens webbapp som du nyss skapade.

15. Klicka på bladet Konfiguration under Inställningar och klicka på knappen Ny programinställning i Programinställningar.

16. På sidan Lägg till/redigera programinställning anger du Namn som MobileAppsManagement_EXTENSION_VERSION och Värde som senaste och trycker på OK.

Du är redo att använda den här nyligen skapade App Service-webbappen som en mobilapp.

Skapa en databasanslutning och konfigurera klient- och serverprojektet

1. Ladda ned snabbstarterna för klient-SDK för följande plattformar:

   iOS (Objective-C)
   iOS (Swift)
   Android (Java)
   Xamarin.iOS
   Xamarin.Android
   Xamarin.Forms
   Cordova
   Windows (C#)

   Anmärkning

   Om du använder iOS-projektet måste du ladda ned "azuresdk-iOS-*.zip" från den senaste GitHub-versionen. Zippa upp och lägg till filen MicrosoftAzureMobile.framework i projektets huvudmapp.

2. Du måste lägga till en databasanslutning eller ansluta till en befintlig anslutning. Ta först reda på om du ska skapa ett datalager eller använda ett befintligt.

   • Skapa ett nytt datalager: Om du ska skapa ett datalager använder du följande snabbstart:

     Snabbstart: Komma igång med enkla databaser i Azure SQL Database

   • Befintlig datakälla: Följ anvisningarna nedan om du vill använda en befintlig databasanslutning

     1. SQL Database-anslutningssträngformat – Data Source=tcp:{your_SQLServer},{port};Initial Catalog={your_catalogue};User ID={your_username};Password={your_password}

        {your_SQLServer} Namnet på servern finns på översiktssidan för databasen och är vanligtvis i form av "server_name.database.windows.net". {port} vanligtvis 1433. {your_catalogue} Namnet på databasen. {your_username} Användarnamn för att komma åt databasen. {your_password} Lösenord för att komma åt databasen.

        Läs mer om SQL-anslutningssträngformat

     2. Lägg till anslutningssträngen i mobilappen I App Service kan du hantera anslutningssträngar för ditt program med hjälp av konfigurationsalternativet på menyn.

        Så här lägger du till en anslutningssträng:

        1. Klicka på fliken Programinställningar .

        2. Klicka på [+] Ny anslutningssträng.

        3. Du måste ange Namn, Värde och Typ för anslutningssträngen.

        4. Ange namn som MS_TableConnectionString

        5. Värdet ska vara den anslutningssträng som du skapade i steget innan.

        6. Om du lägger till en anslutningssträng i en SQL Azure-databas väljer du SQLAzure under typ.

3. Azure Mobile Apps har SDK:er för .NET och Node.js backend-tjänster.

   • Node.js backend

     Om du ska använda Node.js snabbstartsapp följer du anvisningarna nedan.

     1. I Azure-portalen går du till Enkla tabeller. Den här skärmen visas.

        

     2. Kontrollera att SQL-anslutningssträngen redan har lagts till på fliken Konfiguration . Markera sedan kryssrutan i Jag bekräftar att detta kommer att skriva över allt webbplatsinnehåll och klicka på knappen Skapa TodoItem-tabell .

        

     3. I Enkla tabeller klickar du på knappen + Lägg till .

        

     4. Skapa en TodoItem tabell med anonym åtkomst.

        

   • .NET-backend

     Om du ska använda .NET-snabbstartsappen följer du anvisningarna nedan.

     1. Ladda ned Azure Mobile Apps .NET-serverprojektet från lagringsplatsen azure-mobile-apps-quickstarts.

     2. Skapa .NET-serverprojektet lokalt i Visual Studio.

     3. I Visual Studio öppnar du Solution Explorer, högerklickar på projektet, klickar på ZUMOAPPNAMEServicePublicera, du ser ett Publish to App Service fönster. Om du arbetar med Mac kan du titta på andra sätt att distribuera appen här.

        

     4. Välj App Service som publiceringsmål och klicka sedan på Välj befintlig och klicka sedan på knappen Publicera längst ned i fönstret.

     5. Du måste logga in på Visual Studio med din Azure-prenumeration först. Välj Subscription, Resource Groupoch välj sedan namnet på din app. När du är klar klickar du på OK. Då distribueras det .NET-serverprojekt som du har lokalt till App Service-serverdelen. När distributionen är klar omdirigeras du till http://{zumoappname}.azurewebsites.net/ i webbläsaren.

Kör lösningen Xamarin.Forms

Visual Studio Tools for Xamarin krävs för att öppna lösningen, se installationsanvisningarna för Xamarin. Om verktygen redan är installerade följer du de här stegen för att ladda ned och öppna lösningen:

Visual Studio (Windows och Mac)

1. Gå till Azure-portalen och gå till den mobilapp som du skapade. På bladet Overview letar du efter url:en som är den offentliga slutpunkten för din mobilapp. Exempel – webbplatsnamnet för mitt appnamn "test123" blir https://test123.azurewebsites.net.

2. Öppna filen Constants.cs i den här mappen – xamarin.forms/ZUMOAPPNAME. Programnamnet är ZUMOAPPNAME.

3. I Constants.cs-klass ersätter du ZUMOAPPURL variabel med den offentliga slutpunkten ovan.

   public static string ApplicationURL = @"ZUMOAPPURL";

   Blir

   public static string ApplicationURL = @"https://test123.azurewebsites.net";

4. Följ anvisningarna nedan för att köra Android- eller Windows-projekt. och om det finns en nätverksbaserad Mac-dator tillgänglig, iOS-projektet.

(Valfritt) Kör Android-projektet

I det här avsnittet kör du Xamarin.Android-projektet. Du kan hoppa över det här avsnittet om du inte arbetar med Android-enheter.

Visual Studio

1. Högerklicka på Android-projektet (Droid) och välj sedan Ange som startprojekt.

2. På menyn Skapa väljer du Configuration Manager.

3. I dialogrutan Configuration Manager markerar du kryssrutorna Skapa och distribuera bredvid Android-projektet och ser till att det delade kodprojektet har kryssrutan Skapa .

4. Om du vill skapa projektet och starta appen i en Android-emulator trycker du på F5-tangenten eller klickar på startknappen .

Visual Studio för Mac

1. Högerklicka på Android-projektet och välj sedan Ange som startprojekt.

2. Om du vill skapa projektet och starta appen i en Android-emulator väljer du menyn Kör och sedan Starta felsökning.

I appen skriver du meningsfull text, till exempel Learn Xamarin, och väljer sedan plustecknet (+).

Den här åtgärden skickar en postbegäran till den nya Mobile Apps-serverdelen som finns i Azure. Data från begäran infogas i tabellen TodoItem. Objekt som lagras i tabellen returneras av mobile apps-serverdelen och data visas i listan.

(Valfritt) Kör iOS-projektet

I det här avsnittet kör du Xamarin.iOS-projektet för iOS-enheter. Du kan hoppa över det här avsnittet om du inte arbetar med iOS-enheter.

Visual Studio

1. Högerklicka på iOS-projektet och välj sedan Ange som startprojekt.

2. På menyn Skapa väljer du Configuration Manager.

3. I dialogrutan Configuration Manager markerar du kryssrutorna Skapa och Distribuera bredvid iOS-projektet och ser till att det delade kodprojektet har rutan Skapa markerad.

4. Om du vill skapa projektet och starta appen i iPhone-emulatorn väljer du F5-nyckeln .

Visual Studio för Mac

1. Högerklicka på iOS-projektet och välj sedan Ange som startprojekt.

2. På menyn Kör väljer du Starta felsökning för att skapa projektet och starta appen i iPhone-emulatorn.

I appen skriver du meningsfull text, till exempel Learn Xamarin, och väljer sedan plustecknet (+).

Den här åtgärden skickar en postbegäran till den nya Mobile Apps-serverdelen som finns i Azure. Data från begäran infogas i tabellen TodoItem. Objekt som lagras i tabellen returneras av mobile apps-serverdelen och data visas i listan.

(Valfritt) Kör Windows-projektet

I det här avsnittet kör du Xamarin.Forms UWP-projektet (Universal Windows Platform) för Windows-enheter. Du kan hoppa över det här avsnittet om du inte arbetar med Windows-enheter.

Visual Studio

1. Högerklicka på valfritt UWP-projekt och välj sedan Ange som startprojekt.

2. På menyn Skapa väljer du Configuration Manager.

3. I dialogrutan Configuration Manager markerar du kryssrutorna Skapa och Distribuera bredvid det Windows-projekt som du valde och ser till att det delade kodprojektet har kryssrutan Skapa markerad.

4. Om du vill skapa projektet och starta appen i en Windows-emulator trycker du på F5-tangenten eller klickar på startknappen (som ska läsa Lokal dator).

I appen skriver du meningsfull text, till exempel Learn Xamarin, och väljer sedan plustecknet (+).

Den här åtgärden skickar en postbegäran till den nya Mobile Apps-serverdelen som finns i Azure. Data från begäran infogas i tabellen TodoItem. Objekt som lagras i tabellen returneras av mobile apps-serverdelen och data visas i listan.

Felsökning

Om du har problem med att skapa lösningen kör du NuGet-pakethanteraren och uppdaterar till den senaste versionen av Xamarin.Forms, och uppdaterar supportpaketen Xamarin.Android i Android-projektet. Snabbstartsprojekt kanske inte alltid innehåller de senaste versionerna.

Observera att alla supportpaket som refereras i Ditt Android-projekt måste ha samma version. NuGet-paketet för Azure Mobile Apps är Xamarin.Android.Support.CustomTabs beroende av Android-plattformen, så om ditt projekt använder nyare supportpaket måste du installera det här paketet med nödvändig version direkt för att undvika konflikter.