Partager via

Créer une application Apache Cordova avec Azure Mobile Apps

  • Article

Note

Ce produit est mis hors service. Pour un remplacement des projets utilisant .NET 8 ou version ultérieure, consultez la bibliothèque Datasync Community Toolkit.

Ce tutoriel vous montre comment ajouter un service principal basé sur le cloud à une application multiplateforme Apache Cordova à l’aide d’Azure Mobile Apps et d’un back-end d’application mobile Azure. Vous allez créer à la fois un serveur principal d’application mobile et une liste de tâches simple liste de tâches qui stocke les données d’application dans Azure.

Suivez ce tutoriel avant de poursuivre avec d’autres didacticiels Apache Cordova sur l’utilisation de la fonctionnalité Mobile Apps dans Azure App Service.

Conditions préalables

Pour suivre ce didacticiel, vous avez besoin des éléments suivants :

Ce tutoriel peut être effectué sur les systèmes Windows ou Mac. La version iOS de l’application ne peut être exécutée que sur un Mac. Ce tutoriel utilise Windows (avec l’application s’exécutant sur Android) uniquement.

Apache Cordova 8.1.2 ou version antérieure requise

Apache Cordova a publié une modification incompatible de l’outil dans la version 9.0.0. Si Apache Cordova v9.0.0 ou version ultérieure est installé, le plug-in ne fonctionnera pas, se plaindre d’un problème de dépendance avec le module q.

Visual Studio Code

Il existe une extension Apache Cordova pour Visual Studio Code qui vous permet d’exécuter l’application avec débogage. Visual Studio Code est fortement recommandé pour le développement Apache Cordova.

Installer Gradle

L’erreur la plus courante lors de la configuration d’Apache Cordova sur Windows est l’installation de Gradle. Cette opération est installée par défaut à l’aide d’Android Studio, mais n’est pas disponible pour une utilisation normale. Téléchargez et décompressez la dernière version, puis ajoutez le répertoire bin à votre chemin d’accès manuellement.

Télécharger le projet de démarrage rapide Apache Cordova

Le projet de démarrage rapide Apache Cordova se trouve dans le dossier samples/cordova du dépôt azure/azure-mobile-apps dépôt GitHub. Vous pouvez télécharger le référentiel en tant que fichier ZIP, puis le décompresser. Les fichiers seront créés dans le dossier azure-mobile-apps-main.

Une fois téléchargé, ouvrez un terminal et remplacez le répertoire par l’emplacement des fichiers.

Déployer le service principal

Pour déployer le service de démarrage rapide, commencez par vous connecter à Azure avec Azure CLI :

az login

Un navigateur web est ouvert pour terminer l’autorisation.

Si nécessaire, sélectionnez un abonnement.

Créer un groupe de ressources

Tapez ce qui suit pour créer un groupe de ressources :

az group create -l westus -n zumo-quickstart

Cette commande crée un groupe de ressources appelé zumo-quickstart pour contenir toutes les ressources que nous créons. Remplacez westus par une autre région si vous n’avez pas accès à la région westus ou si vous préférez une région plus proche de vous.

Déployer le serveur principal sur Azure

Le service se compose des ressources suivantes :

  • Plan d’hébergement App Service sur le plan gratuit.
  • Site web hébergé dans le plan d’hébergement App Service.
  • Un serveur AZURE SQL.
  • Une base de données Azure SQL dans le niveau De base (entraîne un coût).

La base de données Azure SQL est la seule ressource qui entraîne des coûts. Pour plus d’informations, consultez tarification.

Pour déployer les ressources, tapez les commandes suivantes :

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

Une fois l’opération terminée, exécutez la commande suivante pour afficher les sorties :

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

Cette commande affiche des informations sur votre déploiement dont vous avez besoin pour développer votre application mobile. Le nom d’utilisateur et le mot de passe de la base de données sont utiles pour accéder à la base de données via le portail Azure. Le nom de l’App Service est utilisé ci-dessous et le point de terminaison public est incorporé dans votre code ultérieurement.

Enfin, déployez le serveur Azure Mobile Apps sur l’App Service créé :

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

Remplacez zumo-XXXXXXXX par le nom de votre App Service ; illustré dans la liste des sorties. Dans les 2 à 3 minutes, votre serveur Azure Mobile Apps sera prêt à être utilisé. Vous pouvez utiliser un navigateur web pour vérifier que le serveur principal fonctionne. Pointez votre navigateur web vers votre point de terminaison public avec /tables/TodoItem ajouté à celui-ci (par exemple, https://zumo-XXXXXXXX.azurewebsites.net/tables/TodoItem). Le navigateur affiche une erreur concernant un paramètre X-ZUMO-VERSION manquant si le serveur fonctionne correctement.

suppression des ressources

Une fois que vous avez terminé le didacticiel de démarrage rapide, vous pouvez supprimer les ressources avec az group delete -n zumo-quickstart.

Le didacticiel comprend trois parties (y compris cette section). Ne supprimez pas les ressources avant de suivre le didacticiel.

Configurer le projet de démarrage rapide Apache Cordova

Exécutez npm install pour installer toutes les dépendances.

Ajoutez une plateforme au projet. Par exemple, pour ajouter la plateforme Android, utilisez :

cordova platform add android

Vous pouvez ajouter browser, androidet ios si nécessaire. La plateforme browser ne fonctionne pas avec la synchronisation hors connexion activée. Une fois que vous avez ajouté toutes les plateformes que vous souhaitez utiliser, exécutez cordova requirements pour vous assurer que toutes les exigences ont été remplies.

Ouvrez le fichier www/js/index.js dans un éditeur de texte. Modifiez la définition de BackendUrl pour afficher votre URL principale. Par exemple, si votre URL back-end était https://zumo-abcd1234.azurewebsites.net, l’URL du back-end ressemblerait à ceci :

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

Enregistrez le fichier. Ouvrez le fichier www/index.html dans un éditeur de texte. Modifiez le Content-Security-Policy pour mettre à jour l’URL pour qu’elle corresponde à votre URL principale ; par exemple:

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

Pour générer l’application, utilisez la commande suivante :

cordova build

Exécuter l’application

Si vous exécutez à partir d’un navigateur (à l’aide de cordova platform add browser), vous devez activer la prise en charge CORS dans Azure App Service. Pour ce faire, exécutez la commande suivante :

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

Remplacez le ZUMPAPPNAME par le nom de votre back-end mobile Azure App Service. Une fois le serveur principal configuré, exécutez la commande suivante :

cordova run android

Une fois le démarrage initial terminé, vous pouvez ajouter et supprimer des éléments de la liste. Les éléments todo sont stockés dans l’instance Azure SQL connectée à votre back-end Azure Mobile Apps.

Si l’émulateur ne démarre pas automatiquement, ouvrez Android Studio, puis sélectionnez Configurer>gestionnaire AVD. Vous pouvez maintenant démarrer l’émulateur manuellement. Si vous exécutez adb devices -l, vous devez voir votre appareil émulé sélectionné. Vous devez maintenant être en mesure d’exécuter cordova run android.

d’application Apache Cordova

Étapes suivantes

Continuez à implémenter synchronisation de données hors connexion.