Een iOS-app maken

2019-06-25

Overzicht

Deze zelfstudie laat zien hoe u Azure App Service Mobile Apps, een cloudback-endservice, toevoegt aan een iOS-app. De eerste stap is het maken van een nieuwe mobiele back-end in Azure. Download vervolgens een eenvoudige takenlijst met een iOS-voorbeeld-app waarin gegevens in Azure worden opgeslagen.

U hebt een Mac en een Azure-account nodig om deze zelfstudie te voltooien

Een nieuwe back-end voor mobiele Azure-apps maken

Meld u aan bij het Azure-portaal.
Klik op Een resource maken.
Typ Webapp in het zoekvak.
Selecteer in de resultatenlijst de Web App uit de Marketplace.
Selecteer uw abonnement en resourcegroep (selecteer een bestaande resourcegroep of maak een nieuwe (met dezelfde naam als uw app)).
Kies een unieke Naam voor uw webapp.
Kies de standaard Publiceren optie als Code.
In de Runtime-stack moet u een versie selecteren voor ASP.NET of Node. Als u een .NET-back-end bouwt, selecteert u een versie onder ASP.NET. Als u een op Node gebaseerde toepassing wilt gebruiken, selecteert u een van de versies van Node.
Kies het juiste besturingssysteem, Linux of Windows.
Selecteer de regio waar u deze app wilt uitrollen.
Selecteer het juiste App Service-plan en klik op Controleren en maken.
Selecteer onder Resourcegroep een bestaande resourcegroep of maak een nieuwe (met dezelfde naam als uw app).
Klik op Create. Wacht enkele minuten totdat de service is uitgerold voordat u doorgaat. Bekijk het pictogram Meldingen (bel) in de portalheader voor statusupdates.
Zodra de implementatie is voltooid, klikt u op de sectie Implementatiedetails en vervolgens op de resource van het type Microsoft.Web/sites. Hiermee gaat u naar de App Service-web-app die u zojuist hebt gemaakt.
Klik op het tabblad Configuratie onder Instellingen en klik in de toepassingsinstellingen op de knop Nieuwe toepassingsinstelling.
Voer op de pagina Toepassingsinstelling toevoegen/bewerken Naam in als MobileAppsManagement_EXTENSION_VERSION en Waarde als latest en druk op OK.

U bent klaar om deze zojuist gemaakte App Service-web-app te gebruiken als een mobiele app.

Een databaseverbinding maken en het client- en serverproject configureren

Download de client-SDK-quickstarts voor de volgende platforms:

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

Opmerking

Als u het iOS-project gebruikt, moet u 'azuresdk-iOS-*.zip' downloaden uit de nieuwste GitHub-release. Pak het MicrosoftAzureMobile.framework bestand uit en voeg dit toe aan de hoofdmap van het project.
U moet een databaseverbinding toevoegen of verbinding maken met een bestaande verbinding. Bepaal eerst of u een gegevensarchief maakt of een bestaand gegevensarchief gebruikt.
- Een nieuwe gegevensopslag maken: Als u een gegevensopslag gaat maken, gebruikt u de volgende quickstart:
  
  Quickstart: Aan de slag met de individuele databases in Azure SQL Database
- #B0 bestaande gegevensbron #A1: volg de onderstaande instructies als u een bestaande databaseverbinding wilt gebruiken
  1. SQL database-verbindingsreeks - Data Source=tcp:{your_SQLServer},{port};Initial Catalog={your_catalogue};User ID={your_username};Password={your_password}
    
    #B0 {your_SQLServer} #C1 naam van de server, vindt u deze op de overzichtspagina voor uw database en heeft deze meestal de vorm server_name.database.windows.net. {port} meestal 1433. {your_catalogue} Naam van de database. {your_username} Een gebruikersnaam om toegang te krijgen tot uw database. {your_password} Wachtwoord om toegang te krijgen tot uw database.
    
    #B0 Meer informatie over het SQL-verbindingstekstformaat #C1
  2. Voeg de verbindingsreeks toe aan uw mobiele app. In App Service kunt u verbindingsreeksen voor uw toepassing beheren met behulp van de optie Configuration in het menu.
    
    Een verbindingsreeks toevoegen:
    1. Klik op de Applicatie-instellingen tab.
    2. Klik op [+] Nieuwe verbindingsreeks.
    3. U moet Naam, Waarde en Type voor de connectiestring opgeven.
    4. Typ naam als MS_TableConnectionString
    5. Waarde moet de verbindingsstring zijn die je in de vorige stap hebt gevormd.
    6. Als u een verbindingsreeks toevoegt aan een SQL Azure database, kiest u SQLAzure onder type.
Azure Mobile Apps heeft SDK's voor .NET en Node.js back-ends.
- Node.js back-end
  
  Als u Node.js quickstart-app gaat gebruiken, volgt u de onderstaande instructies.
  1. Ga in het Azure-portal naar Easy Tables. U ziet dit scherm.
    
    Node Easy Tables
  2. Zorg ervoor dat de SQL-verbindingsreeks al is toegevoegd op het tabblad Configuratie. Vink vervolgens het selectievakje bij Ik erken dat hiermee alle site-inhoud wordt overschreven aan en klik op de knop TodoItem-tabel maken.
  3. Klik in Easy Tables op de knop + Toevoegen.
  4. Maak een TodoItem tabel met toegang voor anonieme gebruikers.
- .NET-back-end
  
  Als u de .NET-quickstart-app gaat gebruiken, volgt u de onderstaande instructies.
  1. Download het .NET-serverproject van de Azure Mobile Apps uit het repository azure-mobile-apps-quickstarts.
  2. Bouw het .NET-serverproject lokaal in Visual Studio.
  3. Open Solution Explorer in Visual Studio, klik met de rechtermuisknop op ZUMOAPPNAMEService project, en klik op Publiceren, u ziet een Publish to App Service venster. Als u op een Mac werkt, bekijk dan andere manieren om de app hier te implementeren.
  4. Selecteer App Service als publicatiedoel, klik vervolgens op Select Existing, en klik daarna op de knop Publiceren onder aan het venster.
  5. U moet zich eerst aanmelden bij Visual Studio met uw Azure-abonnement. Selecteer de Subscription, 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, in de App Service-backend geïmplementeerd. Wanneer de implementatie is voltooid, wordt u omgeleid naar http://{zumoappname}.azurewebsites.net/ in de browser.

De iOS-app uitvoeren

Open het gedownloade clientproject met behulp van Xcode.
Ga naar de Azure-portal en navigeer naar de mobiele app die u hebt gemaakt. Zoek op het Overview-blad naar de URL die het openbare eindpunt is voor uw mobiele app. Voorbeeld: de sitenaam voor mijn app-naam "test123" wordt https://test123.azurewebsites.net.
Voor Swift-project opent u het bestand ToDoTableViewController.swift in deze map - ZUMOAPPNAME/ZUMOAPPNAME/ToDoTableViewController.swift. De naam van de toepassing is ZUMOAPPNAME.
In de viewDidLoad()-methode vervang je de ZUMOAPPURL-parameter door het openbare eindpunt hierboven.

let client = MSClient(applicationURLString: "ZUMOAPPURL")

Wordt

let client = MSClient(applicationURLString: "https://test123.azurewebsites.net")
Open voor Objective-C project het bestand QSTodoService.m in deze map - ZUMOAPPNAME/ZUMOAPPNAME. De naam van de toepassing is ZUMOAPPNAME.
In de init-methode vervang je de ZUMOAPPURL-parameter door het openbare eindpunt hierboven.

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

Wordt

self.client = [MSClient clientWithApplicationURLString:@"https://test123.azurewebsites.net"];
Druk op de knop Uitvoeren om het project te bouwen en de app te starten in de iOS-simulator.
Klik in de app op het pluspictogram (+), typ zinvolle tekst, zoals De zelfstudie voltooien en klik vervolgens op de knop Opslaan. Hiermee wordt een POST-aanvraag verzonden naar de Azure-back-end die u eerder hebt geïmplementeerd. De back-end voegt gegevens uit de aanvraag in de SQL-tabel TodoItem in en retourneert informatie over de zojuist opgeslagen items terug naar de mobiele app. In de mobiele app worden deze gegevens weergegeven in de lijst.

Delen via

Een iOS-app maken

Overzicht

Een nieuwe back-end voor mobiele Azure-apps maken

Een databaseverbinding maken en het client- en serverproject configureren

De iOS-app uitvoeren

Aanvullende resources