Een iOS-app maken

  • Artikel
  • 5 minuten om te lezen

Overzicht

Deze zelfstudie laat zien hoe u Azure App Service Mobile Apps, een back-endservice in de cloud, toevoegt aan een iOS-app. De eerste stap bestaat uit het maken van een nieuwe mobiele back-end in Azure. Download vervolgens een eenvoudige iOS voorbeeld-app van een takenlijst die gegevens in Azure opslaat.

Voor het uitvoeren van deze zelfstudie hebt u een Mac en een Azure-account nodig

Een nieuwe back-end voor mobiele apps van Azure maken

  1. Meld u aan bij de [Azure-portal].

  2. Klik op Een resource maken.

  3. Typ Web Appin het zoekvak .

  4. Selecteer Web-App in de lijst met resultaten op marktplaats.

  5. Selecteer uw abonnements- en resourcegroep (selecteer een bestaande resourcegroep of maak een nieuwe groep (met dezelfde naam als uw app)).

  6. Kies een unieke naam van uw web-app.

  7. Kies de standaardoptie Publiceren als Code.

  8. In de runtime-stackmoet u een versie selecteren onder ASP.NET of Knooppunt. Als u een .NET-backend bouwt, selecteert u een versie onder ASP.NET. Als u anders een op knooppunt gebaseerde toepassing target, selecteert u een van de versie uit Knooppunt.

  9. Selecteer het juiste besturingssysteem, Linux of Windows.

  10. Selecteer de regio waar u deze app wilt implementeren.

  11. Selecteer het juiste App-serviceplan en druk op Controleren en maken.

  12. Selecteer onder Resourcegroepeen bestaande resourcegroep of maak een nieuwe groep (met dezelfde naam als uw app).

  13. Klik op Maken. Wacht enkele minuten tot de service is geïmplementeerd voordat u doorgaat. Houd het meldingspictogram (bel) in de koptekst van de portal in de gaten voor statusupdates.

  14. Zodra de implementatie is voltooid, klikt u op de sectie Implementatiegegevens en klikt u vervolgens op de bron van type Microsoft.Web/sites. Het zal u naar de App Service Web App die u zojuist hebt gemaakt.

  15. Klik op het configuratieblad onder Instellingen en klik in de toepassingsinstellingenop de knop Nieuwe toepassingsinstelling.

  16. Voer op de pagina Toepassingsinstelling toevoegen/bewerken de naam in als MobileAppsManagement_EXTENSION_VERSION en Waarde als laatste en druk op OK.

U bent helemaal klaar om deze nieuw gemaakte App Service Web-app te gebruiken als een mobiele app.

Een databaseverbinding maken en het client- en serverproject configureren

  1. Download de SDK-client snelstart voor de volgende platforms:

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

    Notitie

    Als u het iOS-project gebruikt, moet u*"azuresdk-iOS- .zip" downloaden van de nieuwste GitHub-release. Rits het bestand MicrosoftAzureMobile.framework uit en voeg het bestand toe aan de hoofdmap van het project.

  2. U moet een databaseverbinding toevoegen of verbinding maken met een bestaande verbinding. Bepaal eerst of u een gegevensarchief maakt of een bestaand archief gebruikt.

    • Een nieuw gegevensarchief maken: Als u een gegevensarchief gaat maken, gebruikt u de volgende snelstart:

      Snelstart: aan de slag met afzonderlijke databases in Azure SQL Database

    • Bestaande gegevensbron: Volg de onderstaande instructies als u een bestaande databaseverbinding wilt gebruiken

      1. SQL Database Connection String-indeling -Data Source=tcp:{your_SQLServer},{port};Initial Catalog={your_catalogue};User ID={your_username};Password={your_password}

        {your_SQLServer} Naam van de server, dit kan worden gevonden in de overzichtspagina voor uw database en is meestal in de vorm van "server_name.database.windows.net". {port} gewoonlijk 1433. {your_catalogue} Naam van de database. {your_username} Gebruikersnaam om toegang te krijgen tot uw database. {your_password} Wachtwoord om toegang te krijgen tot uw database.

        Meer informatie over SQL Connection String-indeling

      2. Voeg de verbindingstekenreeks toe aan uw mobiele app In App Service u verbindingstekenreeksen voor uw toepassing beheren met behulp van de optie Configuratie in het menu.

        Een verbindingstekenreeks toevoegen:

        1. Klik op het tabblad Toepassingsinstellingen.

        2. Klik op [+] Nieuwe verbindingstekenreeks.

        3. U moet naam, waarde en type opgeven voor uw verbindingstekenreeks.

        4. Type naam alsMS_TableConnectionString

        5. Waarde moet de verbindingstekenreeks zijn die u in de stap ervoor hebt gevormd.

        6. Als u een verbindingstekenreeks toevoegt aan een SQL Azure-database, kiest u SQLAzure onder type.

  3. Azure Mobile Apps heeft SDK's voor backends .NET en Node.js.

    • Node.js backend

      Als je de Quickstart-app van Node.js gaat gebruiken, volg je de onderstaande instructies.

      1. Ga in de Azure-portal naar Eenvoudige tabellen, u ziet dit scherm.

        Node Easy Tables

      2. Controleer of de SQL-verbindingstekenreeks al is toegevoegd op het tabblad Configuratie. Schakel vervolgens het selectievakje in dat ik erken dat dit alle inhoud van de site overschrijft en klik op de knop TodoItem maken.

        Configuratie van node easy-tabellen

      3. Klik in Eenvoudige tabellenop de knop + Toevoegen.

        Knop Eenvoudige tabellen knooppunt toevoegen

      4. Maak TodoItem een tabel met anonieme toegang.

        Tabel eenvoudige tabellen knooppunt toevoegen

    • .NET-back-end

      Als je de QuickStart-app van .NET gaat gebruiken, volg je de onderstaande instructies.

      1. Download het Azure Mobile Apps .NET-serverproject vanuit de azure-mobile-apps-quickstarts repository.

      2. Bouw het .NET-serverproject lokaal in Visual Studio.

      3. Open in Visual Studio Solution Explorer ZUMOAPPNAMEService met de rechtermuisknop op project, klik op Publiceren, u ziet een Publish to App Service venster. Als u aan Mac werkt, bekijkt u hierandere manieren om de app te implementeren.

        Visual studio publishing

      4. Selecteer App Service als publicatiedoel en klik vervolgens op Bestaand selecterenen klik vervolgens op de knop Publiceren onder aan het venster.

      5. U moet zich eerst aanmelden bij Visual Studio met uw Azure-abonnement. Selecteer Subscriptionde Resource Group, en selecteer vervolgens de naam van uw app. Wanneer u klaar bent, klikt u op OK, hiermee wordt het .NET-serverproject dat u lokaal hebt geïmplementeerd in de backend van de appservice. Wanneer de implementatie is voltooid, http://{zumoappname}.azurewebsites.net/ wordt u doorgestuurd naar in de browser.

De iOS-app uitvoeren

  1. Open het gedownloade clientproject met Xcode.

  2. Ga naar de Azure-portal en navigeer naar de mobiele app die u hebt gemaakt. Zoek Overview op het blad naar de URL die het openbare eindpunt is voor uw mobiele app. Voorbeeld - de sitenaam voor mijn app-naam https://test123.azurewebsites.net"test123" is .

  3. Open voor Swift-project ToDoTableViewController.swift het bestand in deze map - ZUMOAPPNAME/ZUMOAPPNAME/ToDoTableViewController.swift. De toepassingsnaam ZUMOAPPNAMEis .

  4. Vervang viewDidLoad() in ZUMOAPPURL de methode de parameter door het openbare eindpunt hierboven.

    let client = MSClient(applicationURLString: "ZUMOAPPURL")

    Wordt

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

  5. Open het bestand QSTodoService.m in deze map voor het Objective-C-project - ZUMOAPPNAME/ZUMOAPPNAME. De toepassingsnaam ZUMOAPPNAMEis .

  6. Vervang init in ZUMOAPPURL de methode de parameter door het openbare eindpunt hierboven.

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

    Wordt

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

  7. Druk op de knop Uitvoeren om het project te bouwen en de app te starten in de iOS-emulator.

  8. Klik in de app**+** op het pluspictogram ( ) en typ betekenisvolle tekst, zoals De zelfstudie voltooienen klik vervolgens op de knop Opslaan. Er wordt nu een POST-aanvraag verzonden naar de back-end van Azure die u eerder hebt geïmplementeerd. De back-end voegt gegevens van de aanvraag toe aan de SQL-takentabel en stuurt informatie over de nieuw opgeslagen items terug naar de mobiele app. Deze gegevens worden in de lijst in de mobiele app weergegeven.

    Snelstartgids-app uitgevoerd op iOS