Creare un'app Apache CordovaCreate an Apache Cordova app

PanoramicaOverview

Questa esercitazione illustra come aggiungere un servizio back-end basato sul cloud a un'app per dispositivi mobili Apache Cordova mediante un back-end per app per dispositivi mobili di 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. Verranno creati un nuovo back-end di app per dispositivi mobili e una semplice app Apache Cordova di tipo Todo list che archivia i dati delle app in Azure.You create both a new mobile app backend and a simple Todo list Apache Cordova app that stores app data in Azure.

Il completamento di questa esercitazione è un prerequisito per tutte le altre esercitazioni Apache Cordova relative all'uso della funzionalità delle app per dispositivi mobili nel Servizio app di Azure.Completing this tutorial is a prerequisite for all other Apache Cordova tutorials about using the Mobile Apps feature in Azure App Service.

PrerequisitiPrerequisites

Per completare questa esercitazione è necessario soddisfare i prerequisiti seguenti:To complete this tutorial, you need the following prerequisites:

È anche possibile ignorare Visual Studio e usare direttamente la riga di comando di Apache Cordova.You may also bypass Visual Studio and use the Apache Cordova command line directly. L'uso della riga di comando è utile quando l'esercitazione viene completata in un computer Mac.Using the command line is useful when completing the tutorial on a Mac computer. La compilazione di applicazioni client di Apache Cordova dalla riga di comando non è trattata in questa esercitazione.Compiling Apache Cordova client applications using the command line is not covered by this tutorial.

Creare un back-end dell'app per dispositivi mobili di AzureCreate an Azure mobile app backend

  1. Accedere al portale di Azure.Sign in to the [Azure portal].

  2. Fare clic su New.Click New.

  3. Nella casella di ricerca digitare App per dispositivi mobili.In the search box, type Mobile Apps.

    Portale di Azure con Avvio rapido per le app per dispositivi mobili evidenziato

  4. Nell'elenco dei risultati selezionare Avvio rapido per le app per dispositivi mobili e quindi Crea.In the results list, select Mobile Apps Quickstart, and then select Create.

  5. In Gruppo di risorse selezionare un gruppo di risorse esistente o crearne uno nuovo usando lo stesso nome dell'app.Under Resource Group, select an existing resource group or create a new one (using the same name as your app).

  6. Fare clic su Crea.Click Create. Prima di procedere, attendere il completamento della distribuzione del servizio.Wait a few minutes for the service to be deployed successfully before proceeding.

Guardare un video che illustra una procedura simileWatch a video showing similar steps

Configurare il progetto serverConfigure the server project

  1. Fare clic sul pulsante Servizi app e selezionare il back-end delle app per dispositivi mobili, quindi Avvio rapido e infine la piattaforma client (iOS, Android, Xamarin o Cordova).Click the App Services button, select your Mobile Apps back end, select Quickstart, and then select your client platform (iOS, Android, Xamarin, Cordova).

    Portale di Azure con Avvio rapido per le app per dispositivi mobili evidenziato

  2. Se non è configurata la connessione a un database, crearne una seguendo questa procedura:If a database connection is not configured, create one by doing the following:

    Portale di Azure con connessione a un database per le app per dispositivi mobili

    a.a. Creare un nuovo server e un nuovo database SQL.Create a new SQL database and server.

    Portale di Azure con creazione di un nuovo database e un nuovo server per le app per dispositivi mobili

    b.b. Attendere la creazione della connessione dati.Wait until the data connection is successfully created.

    Notifica del completamento della creazione della connessione dati nel portale di Azure

    c.c. La connessione dati deve avere esito positivo.Data connection must be successful.

    Notifica "Esiste già una connessione dati" nel portale di Azure

  3. In 2. Creare un'API di tabella selezionare Node.js per Linguaggio back-end.Under 2. Create a table API, select Node.js for Backend language.

  4. Accettare l'acknowledgment e quindi selezionare Crea tabella TodoItem.Accept the acknowledgment, and then select Create TodoItem table.
    Con questa azione viene creata una nuova tabella di attività nel database.This action creates a new to-do item table in your database.

    Importante

    Il passaggio di un back-end esistente a Node.js sovrascrive tutto il contenuto.Switching an existing back end to Node.js overwrites all contents. Per creare invece un back-end .NET, vedere Usare l'SDK del server back-end .NET per App per dispositivi mobili di Azure.To create a .NET back end instead, see Work with the .NET back-end server SDK for Mobile Apps.

Scaricare ed eseguire l'app Apache CordovaDownload and run the Apache Cordova app

  1. Visitare il portale di Azure.Visit the [Azure portal].
  2. Fare clic su Servizi app e quindi selezionare il back-end che è stato creato.Click App Services > the backend that you created.
  3. Nelle impostazioni dell'app per dispositivi mobili fare clic su Quickstart > Cordova.In the mobile app settings, click Quickstart > Cordova. Portale di Azure con app per dispositivi mobili del servizio app, avvio rapido evidenziatoAzure Portal with Mobile Apps Quickstart highlighted
  4. In Configure your client application (Configura applicazione client), selezionare Create a New App (Crea nuova app) e quindi fare clic su Download (Scarica).Under Configure your client application, select Create a New App, then click Download.
  5. Decomprimere il file con estensione zip scaricato in una directory sul disco rigido, passare al file della soluzione con estensione sln e aprirlo con 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. In Visual Studio, scegliere la piattaforma di soluzioni (Android, iOS o Windows) dall'elenco a discesa accanto alla freccia di inizio.In Visual Studio, choose the solution platform (Android, iOS, or Windows) from the drop-down next to the start arrow. Selezionare un dispositivo di distribuzione specifico o un emulatore facendo clic sul menu a discesa sulla freccia verde.Select a specific deployment device or emulator by clicking the drop-down on the green arrow. È possibile usare la piattaforma Android e l'emulatore Ripple predefiniti.You can use the default Android platform and Ripple emulator. Per esercitazioni più avanzate (ad esempio, sulle notifiche push) sarà necessario selezionare un dispositivo o un emulatore supportato.More advanced tutorials (for example, push notifications) require you to select a supported device or emulator.
  7. Per compilare ed eseguire l'app Cordova, premere F5 o fare clic sulla freccia verde.To build and run your Cordova app, press F5 or click the green arrow. Se nell'emulatore viene visualizzata una finestra di dialogo di sicurezza che richiede di accedere alla rete, accettare.If you see a security dialog in the emulator requesting access to the network, accept it.
  8. Dopo l'avvio dell'app nel dispositivo o nell'emulatore, digitare un testo significativo in Enter new text (Immettere nuovo testo), ad esempio Complete the tutorial (Completare l'esercitazione) e quindi fare clic sul pulsante Add (Aggiungi).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.

Il back-end inserisce i dati della richiesta nella tabella TodoItem del database SQL e restituisce informazioni sugli elementi appena archiviati all'app per dispositivi mobili.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. L'app per dispositivi mobili consente di visualizzare questi dati nell'elenco.The mobile app displays this data in the list.

È possibile ripetere i passaggi da 3 a 5 per altre piattaforme.You can repeat steps 3 through 5 for other platforms.

Passaggi successiviNext Steps

Ora che l'esercitazione introduttiva è stata completata, passare a una delle esercitazioni seguenti:Now that you completed this quick start tutorial, move on to one of the following tutorials:

Altre informazioni sui concetti chiave del servizio app di Azure.Learn more about key concepts with Azure App Service.

Informazioni su come usare gli SDK.Learn how to use the SDKs.