Condividi tramite

Creare un'app Apache Cordova con App per dispositivi mobili di Azure

  • Articolo

Nota

Questo prodotto viene ritirato. Per una sostituzione dei progetti che usano .NET 8 o versione successiva, vedere la libreria datasync di Community Toolkit.

Questa esercitazione illustra come aggiungere un servizio back-end basato sul cloud a un'app multipiattaforma Apache Cordova usando App per dispositivi mobili di Azure e un back-end di app per dispositivi mobili di Azure. Si creerà sia un nuovo back-end dell'app per dispositivi mobili che un semplice elenco Todo'app che archivia i dati delle app in Azure.

Completare questa esercitazione prima di continuare con altre esercitazioni su Apache Cordova sull'uso della funzionalità App per dispositivi mobili nel servizio app di Azure.

Prerequisiti

Per completare questa esercitazione, è necessario:

Questa esercitazione può essere completata nei sistemi Windows o Mac. La versione iOS dell'app può essere eseguita solo in un Mac. Questa esercitazione usa Solo Windows (con l'app in esecuzione in Android).

Apache Cordova 8.1.2 o versioni precedenti necessarie

Apache Cordova ha rilasciato una modifica incompatibile allo strumento nella versione 9.0.0. Se è installato Apache Cordova v9.0.0 o versione successiva, il plug-in non funzionerà, segnalando un problema di dipendenza con il modulo q.

Visual Studio Code

È disponibile un'estensione Apache Cordova per Visual Studio Code che consente di eseguire l'applicazione con il debug. Visual Studio Code è altamente consigliato per lo sviluppo di Apache Cordova.

Installare Gradle

L'errore più comune durante la configurazione di Apache Cordova in Windows è l'installazione di Gradle. Questa operazione viene installata per impostazione predefinita con Android Studio, ma non è disponibile per l'utilizzo normale. Scaricare e decomprimere il versione più recente, quindi aggiungere manualmente la directory bin al percorso.

Scaricare il progetto di avvio rapido di Apache Cordova

Il progetto di avvio rapido di Apache Cordova si trova nella cartella samples/cordova del repository azure/azure-mobile-apps repository GitHub. È possibile scaricare il repository come file ZIP, quindi decomprimerlo. I file verranno creati nella cartella azure-mobile-apps-main.

Dopo il download, aprire un terminale e modificare la directory nel percorso dei file.

Distribuire il servizio back-end

Per distribuire il servizio di avvio rapido, accedere prima ad Azure con l'interfaccia della riga di comando di Azure:

az login

Verrà aperto un Web browser per completare l'autorizzazione.

Se necessario, selezionare una sottoscrizione.

Creare un gruppo di risorse

Digitare quanto segue per creare un gruppo di risorse:

az group create -l westus -n zumo-quickstart

Questo comando crea un gruppo di risorse denominato zumo-quickstart per contenere tutte le risorse create. Sostituire westus con un'altra area se non si ha accesso all'area westus o si preferisce un'area più vicina all'utente.

Distribuire il back-end in Azure

Il servizio è costituito dalle risorse seguenti:

  • Piano di hosting del servizio app nel piano gratuito.
  • Sito Web ospitato nel piano di hosting del servizio app.
  • Un server SQL di Azure.
  • Un database SQL di Azure nel livello Basic (comporta costi).

Il database SQL di Azure è l'unica risorsa che comporta costi. Per informazioni dettagliate, vedere prezzi .

Per distribuire le risorse, digitare i comandi seguenti:

cd samples/nodejs
az deployment group create -n ZumoQuickstart -g zumo-quickstart --template-file ./azuredeploy.json

Al termine, eseguire il comando seguente per visualizzare gli output:

az deployment group show -n ZumoQuickstart -g zumo-quickstart --query properties.outputs

Questo comando mostra informazioni sulla distribuzione necessaria per lo sviluppo dell'applicazione per dispositivi mobili. Il nome utente e la password del database sono utili per accedere al database tramite il portale di Azure. Il nome del servizio app viene usato di seguito e l'endpoint pubblico viene incorporato nel codice in un secondo momento.

Distribuire infine il server app per dispositivi mobili di Azure nel servizio app creato:

az webapp deployment source config-zip -g zumo-quickstart --name zumo-XXXXXXXX --src ./zumoserver.zip

Sostituire zumo-XXXXXXXX con il nome del servizio app; visualizzato nell'elenco degli output. Entro 2-3 minuti, il server di App per dispositivi mobili di Azure sarà pronto per l'uso. È possibile usare un Web browser per verificare che il back-end funzioni. Puntare il Web browser all'endpoint pubblico con /tables/TodoItem accodato ( ad esempio, https://zumo-XXXXXXXX.azurewebsites.net/tables/TodoItem). Il browser visualizzerà un errore relativo a un parametro X-ZUMO-VERSION mancante se il server funziona correttamente.

Eliminazione delle risorse

Dopo aver completato l'esercitazione introduttiva, è possibile eliminare le risorse con az group delete -n zumo-quickstart.

L'esercitazione è costituita da tre parti (inclusa questa sezione). Non eliminare le risorse prima di completare l'esercitazione.

Configurare il progetto di avvio rapido di Apache Cordova

Eseguire npm install per installare tutte le dipendenze.

Aggiungere una piattaforma al progetto. Ad esempio, per aggiungere la piattaforma Android, usare:

cordova platform add android

È possibile aggiungere browser, androide ios in base alle esigenze. La piattaforma browser non funzionerà con la sincronizzazione offline abilitata. Dopo aver aggiunto tutte le piattaforme da usare, eseguire cordova requirements per assicurarsi che siano stati soddisfatti tutti i requisiti.

Aprire il file www/js/index.js in un editor di testo. Modificare la definizione di BackendUrl per visualizzare l'URL back-end. Ad esempio, se l'URL back-end è stato https://zumo-abcd1234.azurewebsites.net, l'URL back-end sarà simile al seguente:

    var BackendUrl = "https://zumo-abcd1234.azurewebsites.net";

Salvare il file. Aprire il file www/index.html in un editor di testo. Modificare il Content-Security-Policy per aggiornare l'URL in modo che corrisponda all'URL back-end; Per esempio:

<meta http-equiv="Content-Security-Policy" 
    content="default-src 'self' data: gap: https://zumo-abcd1234.azurewebsites.net; style-src 'self'; media-src *;">

Per compilare l'app, usare il comando seguente:

cordova build

Eseguire l'app

Se si esegue da un browser (usando cordova platform add browser), è necessario abilitare il supporto CORS nel servizio app di Azure. A tale scopo, eseguire il comando seguente:

az webapp cors add -g zumo-quickstart --name ZUMOAPPNAME --allowed-origins "*"

Sostituire il ZUMPAPPNAME con il nome del back-end mobile del servizio app di Azure. Dopo aver configurato il back-end, eseguire il comando seguente:

cordova run android

Al termine dell'avvio iniziale, è possibile aggiungere ed eliminare elementi dall'elenco. Gli elementi Todo vengono archiviati nell'istanza sql di Azure connessa al back-end di App per dispositivi mobili di Azure.

Se l'emulatore non viene avviato automaticamente, aprire Android Studio, quindi selezionare Configura>AVD Manager. È ora possibile avviare l'emulatore manualmente. Se si esegue adb devices -l, verrà visualizzato il dispositivo emulato selezionato. A questo momento dovrebbe essere possibile eseguire cordova run android.

dell'app Apache Cordova

Passaggi successivi

Continuare a implementare sincronizzazione dei dati offline.