Skapa en Apache Cordova-appCreate an Apache Cordova app

Anteckning

Visual Studio App Center investerar i nya och integrerade tjänster som är centrala för utveckling av mobilappar.Visual Studio App Center is investing in new and integrated services central to mobile app development. Utvecklare kan använda bygge-, test -och distributions tjänster för att konfigurera kontinuerlig integrering och leverans pipeliner.Developers can use Build, Test and Distribute services to set up Continuous Integration and Delivery pipeline. När appen har distribuerats kan utvecklare övervaka status och användning av appen med hjälp av analys -och diagnos tjänster och engagera med användare med push -tjänsten.Once the app is deployed, developers can monitor the status and usage of their app using the Analytics and Diagnostics services, and engage with users using the Push service. Utvecklare kan också utnyttja auth för att autentisera sina användare och data tjänster för att spara och synkronisera AppData i molnet.Developers can also leverage Auth to authenticate their users and Data service to persist and sync app data in the cloud. Kolla App Center idag.Check out App Center today.

ÖversiktOverview

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.

FörutsättningarPrerequisites

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å Skapa en resurs.Click Create a resource.

  3. I sökrutan skriver Webbapp.In the search box, type Web App.

  4. I resultatlistan väljer Webbapp från Marketplace.In the results list, select Web App from the Marketplace.

  5. Välj din prenumeration och resursgrupp (Välj en befintlig resursgrupp eller skapa en ny (med samma namn som din app)).Select your Subscription and Resource Group (select an existing resource group or create a new one (using the same name as your app)).

  6. Välj ett unikt namn på din webbapp.Choose a unique Name of your web app.

  7. Välj standard publicera beroende på kod.Choose the default Publish option as Code.

  8. I den körningsstack, du måste välja en version under ASP.NET eller noden.In the Runtime stack, you need to select a version under ASP.NET or Node. Om du skapar en .NET-serverdel kan du välja en version under ASP.NET.If you are building a .NET backend, select a version under ASP.NET. Annars om du arbetar med en nod baserat program, Välj en av versionen från noden.Otherwise if you are targeting a Node based application, select one of the version from Node.

  9. Välja rätt operativsystemet, Linux eller Windows.Select the right Operating System, either Linux or Windows.

  10. Välj den Region där du vill att den här appen som ska distribueras.Select the Region where you would like this app to be deployed.

  11. Välj lämplig Apptjänstplan och därefter granska och skapa.Select the appropriate App Service Plan and hit Review and create.

  12. Under Resursgrupp, väljer du en befintlig resursgrrupp 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).

  13. 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å meddelandeikonen (klockan) i portalrubriken för statusuppdateringar.Watch the Notifications (bell) icon in the portal header for status updates.

  14. När distributionen är klar klickar du på den distributionsinformation och sedan klicka på den resurstyp Microsoft.Web/sites.Once the deployment is completed, click on the Deployment details section and then click on the Resource of Type Microsoft.Web/sites. Det går du till App Service Web App som du nyss skapade.It will navigate you to the App Service Web App that you just created.

  15. Klicka på den Configuration bladet under inställningar och i den programinställningar, klickar du på den nya programinställning knappen.Click on the Configuration blade under Settings and in the Application settings, click on the New application setting button.

  16. I den Lägg till/redigera programinställning anger namn som MobileAppsManagement_EXTENSION_VERSION och värdet som senaste och Tryck på OK.In the Add/Edit application setting page, enter Name as MobileAppsManagement_EXTENSION_VERSION and Value as latest and hit OK.

Du är allt klart att använda den nya App Service Web app som en mobil app.You are all set to use this newly created App Service Web app as a Mobile app.

Skapa en databas anslutning och konfigurera klient-och Server projektetCreate a database connection and configure the client and server project

  1. Ladda ned klienten SDK snabbstarter för följande plattformar:Download the client SDK quickstarts for the following platforms:

    iOS (Objective-C)iOS (Objective-C)
    iOS (Swift)iOS (Swift)
    Android (Java)Android (Java)
    Xamarin.iOSXamarin.iOS
    Xamarin.AndroidXamarin.Android
    Xamarin.FormsXamarin.Forms
    CordovaCordova
    Windows (C#)Windows (C#)

    Anteckning

    Om du använder iOS-projektet måste du ladda ned ”azuresdk-iOS -*.zip” från senaste GitHub-versionen.If you use the iOS project you need to download "azuresdk-iOS-*.zip" from latest GitHub release. Packa upp och lägga till den MicrosoftAzureMobile.framework filen till projektets rot.Unzip and add the MicrosoftAzureMobile.framework file to the project's root.

  2. Du måste lägga till en databasanslutning eller ansluta till en befintlig anslutning.You will have to add a database connection or connect to an existing connection. Först bestämma om du ska skapa ett datalager eller Använd en befintlig.First, determine whether you’ll create a data store or use an existing one.

    • Skapa ett nytt datalager: Om du ska skapa ett datalager, använder du följande Snabbstart:Create a new data store: If you’re going to create a data store, use the following quickstart:

      Snabbstart: Komma igång med en enskild databas i Azure SQL DatabaseQuickstart: Getting started with single databases in Azure SQL Database

    • Befintlig datakälla: Följ anvisningarna nedan om du vill använda en befintlig databasanslutningExisting data source: Follow the instructions below if you want to use an existing database connection

      1. Anslutningssträngen för SQL Database-format: Data Source=tcp:{your_SQLServer},{port};Initial Catalog={your_catalogue};User ID={your_username};Password={your_password}SQL Database Connection String format - Data Source=tcp:{your_SQLServer},{port};Initial Catalog={your_catalogue};User ID={your_username};Password={your_password}

        {your_SQLServer} Namnet på servern, denna finns i översiktssidan för databasen och är vanligtvis i form av ”server_name.database.windows.net”.{your_SQLServer} Name of the server, this can be found in the overview page for your database and is usually in the form of “server_name.database.windows.net”. {port} vanligtvis 1433.{port} usually 1433. {your_catalogue} Namnet på databasen.{your_catalogue} Name of the database. {your_username} Användarnamn för att komma åt databasen.{your_username} User name to access your database. {your_password} Lösenord för åtkomst till din databas.{your_password} Password to access your database.

        Mer information om format för SQL-anslutningssträngLearn more about SQL Connection String format

      2. Lägg till anslutningssträng till din mobilappen i App Service du kan hantera anslutningssträngar för ditt program med hjälp av den Configuration alternativ på menyn.Add the connection string to your mobile app In App Service, you can manage connection strings for your application by using the Configuration option in the menu.

        Lägga till en anslutningssträng:To add a connection string:

        1. Klicka på den programinställningar fliken.Click on the Application settings tab.

        2. Klicka på [+] ny anslutningssträng.Click on [+] New connection string.

        3. Du måste ange namn, värdet och typ för anslutningssträngen.You will need to provide Name, Value and Type for your connection string.

        4. Typ namn som MS_TableConnectionStringType Name as MS_TableConnectionString

        5. Värdet bör vara den anslutande strängen du formaterat i steget innan.Value should be the connecting string you formed in the step before.

        6. Om du lägger till en anslutningssträng till en SQL Azure-databas väljer SQLAzure under typ.If you are adding a connection string to a SQL Azure database choose SQLAzure under type.

  3. Azure Mobile Apps har SDK: er för .NET och Node.js-serverdelen.Azure Mobile Apps has SDKs for .NET and Node.js backends.

    • Node.js-serverdelenNode.js backend

      Om du ska använda appen Node.js-Snabbstart, följer du anvisningarna nedan.If you’re going to use Node.js quickstart app, follow the instructions below.

      1. I Azure-portalen går du till enkla tabeller, visas den här skärmen.In the Azure portal, go to Easy Tables, you will see this screen.

        Noden enkla tabeller

      2. Kontrollera att SQL-anslutningssträng har redan lagts till i den Configuration fliken. Markera kryssrutan på bekräftar jag att allt webbinnehåll skrivs och klicka på den skapa TodoItem-tabell knappen.Make sure the SQL connection string is already added in the Configuration tab. Then check the box of I acknowledge that this will overwrite all site contents and click the Create TodoItem table button.

        Enkla tabeller nodkonfiguration

      3. I enkla tabeller, klickar du på den + Lägg till knappen.In Easy Tables, click the + Add button.

        Noden enkla tabeller Lägg till knapp

      4. Skapa en TodoItem tabell med anonym åtkomst.Create a TodoItem table with anonymous access.

        Noden enkla tabeller Lägg till tabell

    • .NET-serverdelen.NET backend

      Om du ska använda appen för .NET-Snabbstart, följer du anvisningarna nedan.If you’re going to use .NET quickstart app, follow the instructions below.

      1. Ladda ned Azure Mobile Apps .NET server-projekt från den lagringsplatsen för azure-mobile-appar – snabbstarter.Download the Azure Mobile Apps .NET server project from the azure-mobile-apps-quickstarts repository.

      2. Skapa .NET serverprojektet lokalt i Visual Studio.Build the .NET server project locally in Visual Studio.

      3. Öppna i Visual Studio Solution Explorer, högerklicka på ZUMOAPPNAMEService projektet, klicka på publicera, visas en Publish to App Service fönster.In Visual Studio, open Solution Explorer, right-click on ZUMOAPPNAMEService project, click Publish, you will see a Publish to App Service window. Om du arbetar på Mac kan du kolla andra sätt att distribuera appen här.If you are working on Mac, check out other ways to deploy the app here.

        Visual studio-publicering

      4. Välj Apptjänst som publicerar mål, sedan klickar du på Välj befintligt, klicka sedan på den publicera knappen längst ned i fönstret.Select App Service as publish target, then click Select Existing, then click the Publish button at the bottom of the window.

      5. Du måste logga in på Visual Studio med din Azure-prenumeration först.You will need to log into Visual Studio with your Azure subscription first. Välj den Subscription, Resource Group, och välj sedan namnet på din app.Select the Subscription, Resource Group, and then select the name of your app. När du är klar klickar du på OK, detta distribuerar .NET server-projektet som du har lokalt till App Service-serverdelen.When you are ready, click OK, this will deploy the .NET server project that you have locally into the App Service backend. När distributionen är klar kommer du att omdirigeras till http://{zumoappname}.azurewebsites.net/ i webbläsaren.When deployment finishes, you will be redirected to http://{zumoappname}.azurewebsites.net/ in the browser.

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

  1. Navigera till lösningsfilen i klientprojektet (.sln) och öppna den med hjälp av Visual Studio.Navigate to the solution file in the client project (.sln) and open it using Visual Studio.

  2. 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.

  3. Öppna filen ToDoActivity.java i den här mappen - ZUMOAPPNAME/app/src/main/java/com/exempel/zumoappname.Open the file ToDoActivity.java in this folder - ZUMOAPPNAME/app/src/main/java/com/example/zumoappname. Programnamnet är ZUMOAPPNAME.The application name is ZUMOAPPNAME.

  4. Gå till den Azure-portalen och navigera till den mobila appen som du skapade.Go to the Azure portal and navigate to the mobile app that you created. På den Overview bladet letar du reda på URL: en som är den offentliga slutpunkten för din mobilapp.On the Overview blade, look for the URL which is the public endpoint for your mobile app. Exempel – sitename för min app name ”test123” kommer att https://test123.azurewebsites.net.Example - the sitename for my app name "test123" will be https://test123.azurewebsites.net.

  5. Gå till den index.js filen i ZUMOAPPNAME/www/js/index.js och i onDeviceReady() metod, Ersätt ZUMOAPPURL parameter med offentlig slutpunkt ovan.Go to the index.js file in ZUMOAPPNAME/www/js/index.js and in onDeviceReady() method, replace ZUMOAPPURL parameter with public endpoint above.

    client = new WindowsAzure.MobileServiceClient('ZUMOAPPURL');

    blirbecomes

    client = new WindowsAzure.MobileServiceClient('https://test123.azurewebsites.net');

  6. 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.

  7. När appen har startats på enheten eller emulatorn, ange en beskrivande text i ange ny text, till exempel i självstudiekursen och klicka sedan på den 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.