Skapa en iOS-app

Översikt

Den här kursen visar hur du lägger till Azure App Service Mobile Apps, en molnbaserad serverdelstjänst, i en iOS-app. Det första steget är att skapa en ny mobilserverdel på Azure. Ladda sedan ned en enkel exempelapp, att göra-lista, i iOS som lagrar data i Azure.

Du behöver ett Azure-konto och en Mac-dator för att slutföra den här självstudien.

Skapa en ny mobilappserverdel i Azure

  1. Logga in på [Azure-portalen].

  2. Klicka på Skapa en resurs.

  3. Skriv Web Appi sökrutan .

  4. Välj Web App på Marketplace i resultatlistan.

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

  6. Välj ett unikt namn på din webbapp.

  7. Välj standardpubliceringsalternativet som kod.

  8. I runtime-stackenmåste du välja en version under ASP.NET eller Node. Om du skapar en .NET-backend väljer du en version under ASP.NET. Annars om du riktar in dig på ett nodbaserat program väljer du en av versionen från Nod.

  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 appserviceplan och tryck på Granska och skapa.

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

  13. Klicka på Skapa. Vänta några minuter på att tjänsten ska distribueras innan du fortsätter. Titta på meddelandeikonen (klockan) i portalrubriken för statusuppdateringar.

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

  15. Klicka på konfigurationsbladet under Inställningar och klicka på knappen Ny programinställning i programinställningarna.

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

Du är redo att använda den här nyskapade App Service Web-appen som en mobilapp.

Skapa en databasanslutning och konfigurera klient- och serverprojektet

  1. Ladda ner klientens SDK-snabbstarter för följande plattformar:

    iOS (Mål-C)
    iOS (Swift)
    Android (Java)
    Xamarin.iOS
    Xamarin.Android
    Xamarin.Forms
    Cordova
    Windows (C#)

    Anteckning

    Om du använder iOS-projektet måste du hämta "azuresdk-iOS-*.zip" från senaste GitHub-versionen. Packa upp och MicrosoftAzureMobile.framework lägg till filen i projektets rot.

  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 enskilda databaser i Azure SQL Database

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

      1. Format för SQL-databasanslutningssträng -Data Source=tcp:{your_SQLServer},{port};Initial Catalog={your_catalogue};User ID={your_username};Password={your_password}

        {your_SQLServer} Namnet på servern, detta finns i översiktssidan för databasen och är oftast i form av "server_name.database.windows.net". {port} vanligtvis 1433. {your_catalogue} Databasens namn. {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 Connection String-format

      2. Lägg till anslutningssträngen i mobilappen I App Service kan du hantera anslutningssträngar för ditt program med alternativet Konfiguration 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. Skriv namn somMS_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 backends.

    • Nod.js backend

      Om du ska använda appen Node.js quickstart följer du instruktionerna nedan.

      1. I Azure-portalen går du till Enkla tabeller, du kommer att se den här skärmen.

        Nod enkla tabeller

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

        Konfiguration av enkla nodtabeller

      3. Klicka på knappen + Lägg till i Enkla tabeller.

        Knappen Lägg till nodbara tabeller

      4. Skapa TodoItem en tabell med anonym åtkomst.

        Nod Enkla tabeller Lägg till tabell

    • .NET-serverdelen

      Om du ska använda .NET quickstart-appen följer du instruktionerna nedan.

      1. Ladda ned serverprojektet För Azure Mobile Apps .NET från databasen azure-mobile-apps-quickstarts.

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

      3. Öppna Solution Explorer i Visual Studio, ZUMOAPPNAMEService högerklicka på projektet, klicka Publish to App ServicePublicera, ett fönster. Om du arbetar på Mac kan du läsa andra sätt att distribuera appen här.

        Visuell studio publicering

      4. Välj Apptjänst som publiceringsmål och klicka sedan på Välj befintligoch 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å appen. När du är klar klickar du på OK, detta distribuerar .NET-serverprojektet som du har lokalt i apptjänstens serverdel. När distributionen är klar omdirigeras http://{zumoappname}.azurewebsites.net/ du till i webbläsaren.

Köra iOS-appen

  1. Öppna det nedladdade klientprojektet med Xcode.

  2. Gå till Azure-portalen och navigera till mobilappen som du skapade. Leta Overview efter webbadressen som är den offentliga slutpunkten för mobilappen på bladet. Exempel - webbplatsnamnet för mitt appnamn "test123" kommer att vara https://test123.azurewebsites.net.

  3. För Swift-projektet öppnar ToDoTableViewController.swift du filen i den här mappen - ZUMOAPPNAME/ZUMOAPPNAME/ToDoTableViewController.swift. Programnamnet är ZUMOAPPNAME.

  4. Ersätt viewDidLoad() ZUMOAPPURL parametern med den offentliga slutpunkten ovan.

    let client = MSClient(applicationURLString: "ZUMOAPPURL")

    Blir

    let client = MSClient(applicationURLString: "https://test123.azurewebsites.net")

  5. För Objective-C-projekt öppnar QSTodoService.m du filen i den här mappen - ZUMOAPPNAME/ZUMOAPPNAME. Programnamnet är ZUMOAPPNAME.

  6. Ersätt init ZUMOAPPURL parametern med den offentliga slutpunkten ovan.

    self.client = [MSClient clientWithApplicationURLString:@"ZUMOAPPURL"];

    Blir

    self.client = [MSClient clientWithApplicationURLString:@"https://test123.azurewebsites.net"];

  7. Klicka på Kör-knappen för att skapa projektet och starta appen i iOS-simulatorn.

  8. Klicka på plus ()+ i appen, skriv meningsfull text, till exempel Slutför självstudienoch klicka sedan på spara-knappen. Detta skickar en POST-begäran till den Azure-serverdel som du distribuerade tidigare. Serverdelen infogar data från begäran i TodoItem-SQL-tabellen och returnerar information om det nyligen lagrade objektet tillbaka till mobilappen. Mobilappen visar dessa data i listan.

    Snabbstart för appar som körs i iOS