Creare un'app Apache Cordova

• Android
• Cordova
• iOS
• Windows
• Xamarin.Android
• Xamarin.iOS
• Xamarin.Forms

Informazioni generali

Questa esercitazione illustra come aggiungere un servizio back-end basato sul cloud a un'app per dispositivi mobili Apache Cordova usando un back-end dell'app per dispositivi mobili di Azure. Crei sia un nuovo back-end per l'app per dispositivi mobili sia una semplice lista di Todo che un'app Apache Cordova che archivia i dati dell'app in Azure.

Il completamento di questa esercitazione è un prerequisito per tutte le altre esercitazioni su Apache Cordova sull'uso della funzionalità App per dispositivi mobili nel servizio app di Azure.

Prerequisiti

Per completare questa esercitazione è necessario soddisfare i prerequisiti seguenti:

• Un PC con Visual Studio Community 2017 o versione successiva.
• Visual Studio Tools per Apache Cordova.
• Un account di Azure attivo .

È anche possibile ignorare Visual Studio e usare direttamente la riga di comando di Apache Cordova. L'uso della riga di comando è utile quando si completa l'esercitazione in un computer Mac. La compilazione di applicazioni client Apache Cordova tramite la riga di comando non è coperta da questa esercitazione.

Creare un back-end dell'app per dispositivi mobili di Azure

1. Accedere al portale di Azure.

2. Fare clic su Crea una risorsa.

3. Nella casella di ricerca digitare 'app Web.

4. Nell'elenco dei risultati, selezionare Web App dal Marketplace.

5. Selezionare sottoscrizione e gruppo di risorse (selezionare un gruppo di risorse esistente o crearne uno nuovo usando lo stesso nome dell'app).

6. Scegliere un nome univoco per l'app Web.

7. Scegliere l'opzione predefinita Pubblica come Codice.

8. Nello stack di runtime è necessario selezionare una versione in ASP.NET o Node. Se stai creando un back-end .NET, seleziona una versione di ASP.NET. In caso contrario, se si ha come destinazione un'applicazione basata su Node, selezionare una della versione da Node.

9. Seleziona il sistema operativo, Linux o Windows.

10. Selezionare la area in cui si vuole distribuire l'app.

11. Selezionare il piano di servizio app appropriato e premere Rivedi e crea.

12. In gruppo di risorseselezionare un gruppo di risorse esistente o crearne uno nuovo (usando lo stesso nome dell'app).

13. Clicca su Crea. Attendere alcuni minuti affinché il servizio venga distribuito correttamente prima di procedere. Osservare l'icona Notifiche (campanello) nell'intestazione del portale per gli aggiornamenti dello stato.

14. Una volta completata la distribuzione, fare clic sulla sezione dei dettagli della distribuzione e quindi fare clic sulla risorsa di tipo Microsoft.Web/sites. Ti indirizzerà all'App Web di App Service che hai appena creato.

15. Fare clic sul pannello Configurazione sotto Impostazioni e nelle Impostazioni applicazione, fare clic sul pulsante Nuova impostazione applicazione.

16. Nella pagina impostazione dell'applicazione Aggiungi/Modifica, immettere Nome come MobileAppsManagement_EXTENSION_VERSION e Valore come più recente e premere OK.

Ora sei pronto per utilizzare questa app Web del servizio app appena creata come app per dispositivi mobili.

Creare una connessione al database e configurare il progetto client e server

1. Scaricare le guide introduttive dell'SDK client per le piattaforme seguenti:

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

   Nota

   Se si usa il progetto iOS è necessario scaricare "azuresdk-iOS-*.zip" da versione più recente di GitHub. Decomprimere e aggiungere il file MicrosoftAzureMobile.framework alla radice del progetto.

2. Sarà necessario aggiungere una connessione al database o connettersi a una connessione esistente. Prima di tutto, determinare se si creerà un archivio dati o se ne userà uno esistente.

   • Creare un nuovo archivio dati: se si intende creare un archivio dati, usare la guida introduttiva seguente:

     Avvio rapido: Introduzione ai database singoli in Azure SQL Database

   • fonte dati esistente: seguite le istruzioni riportate di seguito se desiderate utilizzare una connessione di database esistente

     1. Formato stringa di connessione del database SQL - Data Source=tcp:{your_SQLServer},{port};Initial Catalog={your_catalogue};User ID={your_username};Password={your_password}

        {your_SQLServer} Nome del server, è disponibile nella pagina di panoramica del database ed è in genere sotto forma di "server_name.database.windows.net". {port} in genere 1433. {your_catalogue} Nome del database. {your_username} Nome utente per accedere al database. {your_password} Password per accedere al database.

        Altre informazioni sul formato stringa di connessione SQL

     2. Aggiungere la stringa di connessione alla tua app per dispositivi mobili Nel servizio app è possibile gestire le stringhe di connessione per l'applicazione usando l'opzione Configurazione nel menu.

        Per aggiungere una stringa di connessione:

        1. Fare clic sulla scheda impostazioni applicazione.

        2. Fare clic su [+] Nuova stringa di connessione.

        3. È necessario specificare Nome, Valore e Tipo per la stringa di connessione.

        4. Digitare Nome come illustrato MS_TableConnectionString

        5. Il valore deve essere la stringa di connessione creata nel passaggio precedente.

        6. Se si aggiunge una stringa di connessione a un database SQL di Azure, scegliere SQLAzure in tipo.

3. Le App per dispositivi mobili di Azure includono gli SDK per i back-end .NET e Node.js.

   • Node.js backend

     Se hai intenzione di usare l'app Node.js di avvio rapido, segui le istruzioni riportate di seguito.

     1. Nel portale di Azure passare a Easy Tables, verrà visualizzata questa schermata.

        

     2. Assicurarsi che la stringa di connessione SQL sia già stata aggiunta nella scheda di configurazione . Selezionare quindi la casella di Riconosco che questo sovrascriverà tutto il contenuto del sito e fare clic sul pulsante Crea tabella TodoItem.

        

     3. In Easy Tablesfare clic sul pulsante + Aggiungi.

        

     4. Creare una tabella TodoItem con accesso anonimo.

        

   • backend .NET

     Se si intende usare l'app di avvio rapido .NET, seguire le istruzioni riportate di seguito.

     1. Scaricare il progetto server .NET di App per dispositivi mobili di Azure dal repository azure-mobile-apps-quickstarts.

     2. Compilare il progetto server .NET in locale in Visual Studio.

     3. In Visual Studio aprire Esplora soluzioni, fare clic con il pulsante destro del mouse su ZUMOAPPNAMEService progetto, scegliere Pubblica, verrà visualizzata una finestra Publish to App Service. Se utilizzi un Mac, scopri altri modi per distribuire l'app qui.

        

     4. Selezionare servizio app come destinazione di pubblicazione, quindi fare clic su Selezionaesistente, quindi fare clic sul pulsante Pubblica nella parte inferiore della finestra.

     5. È prima necessario accedere a Visual Studio con la sottoscrizione di Azure. Selezionare il Subscription, Resource Groupe quindi selezionare il nome dell'app. Quando si è pronti, fare clic su OK, verrà distribuito il progetto server .NET disponibile localmente nel back-end del servizio app. Al termine della distribuzione, si verrà reindirizzati a http://{zumoappname}.azurewebsites.net/ nel browser.

Scaricare ed eseguire l'app Apache Cordova

1. Passare al file della soluzione nel progetto client (.sln) e aprirlo usando Visual Studio.

2. In Visual Studio scegliere la piattaforma della soluzione (Android, iOS o Windows) dall'elenco a discesa accanto alla freccia iniziale. Selezionare un dispositivo o un emulatore di distribuzione specifico facendo clic sull'elenco a discesa sulla freccia verde. È possibile usare la piattaforma Android predefinita e l'emulatore Di Ripple. Le esercitazioni più avanzate (ad esempio, le notifiche push) richiedono di selezionare un dispositivo o un emulatore supportato.

3. Aprire il file ToDoActivity.java in questa cartella - ZUMOAPPNAME/app/src/main/java/com/example/zumoappname. Il nome dell'applicazione è ZUMOAPPNAME.

4. Passare al portale di Azure e passare all'app per dispositivi mobili creata. Nella scheda Overview cercare l'URL che rappresenta l'endpoint pubblico per la tua app mobile. Esempio: il nome del sito per il nome dell'app "test123" sarà https://test123.azurewebsites.net.

5. Passare al file index.js in ZUMOAPPNAME/www/js/index.js e nel metodo onDeviceReady() sostituire il parametro ZUMOAPPURL con l'endpoint pubblico sopra.

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

   diventa

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

6. Per compilare ed eseguire l'app Cordova, premere F5 o fare clic sulla freccia verde. Se viene visualizzata una finestra di dialogo di sicurezza nell'emulatore che richiede l'accesso alla rete, accettarla.

7. Dopo l'avvio dell'app nel dispositivo o nell'emulatore, digitare testo significativo in Immettere nuovo testo, ad esempio Completare l' esercitazione e quindi fare clic sul pulsante aggiungi .

Il back-end inserisce i dati della richiesta nella tabella TodoItem nel database SQL e restituisce informazioni sugli elementi appena archiviati all'app per dispositivi mobili. L'app per dispositivi mobili visualizza questi dati nell'elenco.

È possibile ripetere i passaggi da 3 a 5 per altre piattaforme.