Skapa en Apache Cordova-appCreate an Apache Cordova app

Översikt

Overview I den här kursen får du lära dig hur du lägger till en molnbaserad serverdelstjänst i en Apache Cordova-mobilapp med hjälp av en mobilappserverdel i Azure.This tutorial shows you how to add a cloud-based backend service to an Apache Cordova mobile app by using an Azure mobile app backend. Du skapar både en ny serverdel för mobilappen och en enkel Apache Cordova-app med en att göra-lista som lagrar appdata i Azure.You create both a new mobile app backend and a simple Todo list Apache Cordova app that stores app data in Azure.

Du måste slutföra den här kursen innan du påbörjar någon annan Apache Cordova-kurs om att använda funktionen Mobile Apps i Azure Apptjänst.Completing this tutorial is a prerequisite for all other Apache Cordova tutorials about using the Mobile Apps feature in Azure App Service.

KravPrerequisites

För att slutföra den här självstudien, finns följande förhandskrav:To complete this tutorial, you need the following prerequisites:

Du kan också kringgå Visual Studio och direkt använda kommandoraden i Apache Cordova.You may also bypass Visual Studio and use the Apache Cordova command line directly. Det är praktiskt att använda kommandoraden om du går självstudiekursen på en Mac-dator.Using the command line is useful when completing the tutorial on a Mac computer. I den här kursen ingår inte att kompilera klientprogram i Apache Cordova med hjälp av kommandoraden.Compiling Apache Cordova client applications using the command line is not covered by this tutorial.

Skapa serverdelen för en Azure-mobilappCreate an Azure mobile app backend

  1. Logga in på Azure Portal.Sign in to the Azure portal.

  2. Klicka på Ny.Click New.

  3. I sökrutan skriver du Mobile Apps.In the search box, type Mobile Apps.

    Azure Portal med snabbstarten för Mobile Apps markerad

  4. I resultatlistan väljer du Snabbstart för Mobile Apps och klickar sedan på Skapa.In the results list, select Mobile Apps Quickstart, and then select Create.

  5. Under Resursgrupp väljer du en befintlig resursgrupp, eller skapar en ny (med samma namn som din app).Under Resource Group, select an existing resource group or create a new one (using the same name as your app).

  6. Klicka på Skapa.Click Create. Vänta några minuter på att tjänsten ska distribueras innan du fortsätter.Wait a few minutes for the service to be deployed successfully before proceeding.

Titta på en video som visar liknande stegWatch a video showing similar steps

Konfigurera serverprojektetConfigure the server project

  1. Klicka på knappen Apptjänster, välj din Mobile Apps-serverdel, välj Snabbstart och sedan din klientplattform (iOS, Android, Xamarin, Cordova).Click the App Services button, select your Mobile Apps back end, select Quickstart, and then select your client platform (iOS, Android, Xamarin, Cordova).

    Azure Portal med snabbstarten för Mobile Apps markerad

  2. Om en databasanslutning inte konfigureras skapar du en genom att göra följande:If a database connection is not configured, create one by doing the following:

    Azure Portal med Mobile Apps Connect till databas

    a.a. Skapa en ny SQL-databas och server.Create a new SQL database and server.

    Azure Portal med Mobile Apps skapa ny databas och server

    b.b. Vänta tills anslutningen har skapats.Wait until the data connection is successfully created.

    Azure Portal-meddelande om att dataanslutningen har skapats

    c.c. Dataanslutningen måste lyckas.Data connection must be successful.

    Azure Portal-meddelande, "Du har redan en dataanslutning"

  3. Under 2. Skapa ett tabell-API, Välj Node.js för Språk för serverdel.Under 2. Create a table API, select Node.js for Backend language.

  4. Godkänn bekräftelsen och välj Skapa TodoItem-tabell.Accept the acknowledgment, and then select Create TodoItem table.
    En ny att göra-post-tabell skapas i din databas.This action creates a new to-do item table in your database.

    Viktigt

    Om du ändrar en befintlig serverdel till Node.js skrivs allt innehåll över.Switching an existing back end to Node.js overwrites all contents. Om du istället vill skapa en .NET-serverdel läser du Work with the .NET back-end server SDK for Mobile Apps (Arbeta med SDK för .NET-serverdelen för Mobile Apps).To create a .NET back end instead, see Work with the .NET back-end server SDK for Mobile Apps.

Hämta och köra Apache Cordova-appenDownload and run the Apache Cordova app

  1. Besök Azure Portal.Visit the Azure portal.
  2. Klicka på Apptjänster > serverdelen som du skapade.Click App Services > the backend that you created.
  3. I inställningarna för mobilappar, klickar du på Snabbstart > Cordova.In the mobile app settings, click Quickstart > Cordova. Azure-portalen med snabbstart för mobila appar markeradAzure Portal with Mobile Apps Quickstart highlighted
  4. Under Konfigurera klientprogrammet, väljer du Skapa en ny app, och klickar sedan på Hämta.Under Configure your client application, select Create a New App, then click Download.
  5. Packa upp den hämtade ZIP-filen i en katalog på hårddisken, navigera till lösningsfilen (.sln) och öppna den med hjälp av Visual Studio.Unpack the downloaded ZIP file to a directory on your hard drive, navigate to the solution file (.sln) and open it using Visual Studio.
  6. I Visual Studio väljer du lösningsplattform (Android, iOS eller Windows) från listrutan bredvid startpilen.In Visual Studio, choose the solution platform (Android, iOS, or Windows) from the drop-down next to the start arrow. Välj en viss distributionsenhet eller emulator genom att klicka på den gröna pilen i listrutan.Select a specific deployment device or emulator by clicking the drop-down on the green arrow. Du kan använda Android-plattformen och Ripple-emulatorn av standardtyp.You can use the default Android platform and Ripple emulator. För mer avancerade självstudier (t.ex, push-meddelanden) krävs att du väljer en enhet eller emulator som stöds.More advanced tutorials (for example, push notifications) require you to select a supported device or emulator.
  7. Tryck på F5 eller klicka på den gröna pilen för att skapa och köra din Cordova-app.To build and run your Cordova app, press F5 or click the green arrow. Om du ser en säkerhetsdialogruta i emulatorn som begär åtkomst till nätverket, accepterar du begäran.If you see a security dialog in the emulator requesting access to the network, accept it.
  8. Efter att appen har startats på enheten eller emulatorn, skriver du in en beskrivande text i Ange ny text, exempelvis Genomför självstudierna, och klickar sedan på Lägg till-knappen.After the app is started on the device or emulator, type meaningful text in Enter new text, such as Complete the tutorial and then click the Add button.

Serverdelen infogar data från begäran i TodoItem-tabellen i SQL Database och returnerar information om det nyligen lagrade objekten tillbaka till mobilappen.The backend inserts data from the request into the TodoItem table in the SQL Database, and returns information about the newly stored items back to the mobile app. Mobilappen visar dessa data i listan.The mobile app displays this data in the list.

Du kan upprepa steg 3 till 5 för andra plattformar.You can repeat steps 3 through 5 for other platforms.

Nästa stegNext Steps

Nu när du har slutfört den här snabbstartskursen går du vidare till en av följande kurser:Now that you completed this quick start tutorial, move on to one of the following tutorials:

Läs mer om nyckelbegrepp i Azure Apptjänst.Learn more about key concepts with Azure App Service.

Lär dig hur du använder SDK: er.Learn how to use the SDKs.