Créer une application Apache Cordova avec Azure Mobile Apps

  • Article

Ce tutoriel vous montre comment ajouter un service back-end 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 un back-end d’application mobile et une application Todo list simple qui stocke les données d’application dans Azure.

Suivez ce tutoriel avant de poursuivre avec les autres tutoriels Apache Cordova sur l’utilisation des fonctionnalités Mobile Apps dans Azure App Service.

Prérequis

Pour terminer ce tutoriel, vous avez besoin de ce qui suit :

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

Apache Cordova 8.1.2 ou une version antérieure requis

Apache Cordova a publié un changement incompatible de l’outil dans la version v9.0.0. Si Apache Cordova v9.0.0 ou une version ultérieure est installée, le plug-in ne fonctionnera pas, déplorant 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 le 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. Il est installé 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 manuellement le répertoire bin à votre chemin.

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 GitHub azure/azure-mobile-apps. Vous pouvez télécharger le dépôt sous la forme d’un fichier ZIP, puis décompressez-le. Les fichiers seront créés dans le dossier azure-mobile-apps-main.

Une fois le téléchargement terminé, ouvrez un terminal, puis accédez au répertoire dans lequel se trouvent les fichiers.

Déployer le service back-end

Pour déployer le service de démarrage rapide, connectez-vous d’abord à Azure à l’aide de l’interface de ligne de commande Azure :

az login

Un navigateur web s’ouvre pour procéder à 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 back-end dans Azure

Le service se compose des ressources suivantes :

  • Un plan d’hébergement App Service sur le plan Gratuit.
  • Un 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 (engendre des frais).

La base de données Azure SQL est la seule ressource qui engendre des frais. Pour plus d’informations, consultez les tarifs.

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

Quand vous avez terminé, exécutez la commande suivante pour voir 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 par le biais du portail Azure. Le nom du service App Service est utilisé ci-dessous, et le point de terminaison public est incorporé ultérieurement dans votre code.

Enfin, déployez le serveur Azure Mobile Apps sur le service 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 service App Service, affiché dans la liste des sorties. En 2 à 3 minutes, votre serveur Azure Mobile Apps sera prêt à être utilisé. Vous pouvez utiliser un navigateur web pour vérifier que le back-end fonctionne. Dirigez votre navigateur web vers votre point de terminaison public auquel est ajouté /tables/TodoItem (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 tutoriel de démarrage rapide, vous pouvez supprimer les ressources avec az group delete -n zumo-quickstart.

Ce tutoriel se compose de trois parties (dont cette section). Ne supprimez pas les ressources avant de terminer le tutoriel.

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, android et ios, si nécessaire. La plateforme browser ne fonctionnera pas si la synchronisation hors connexion est activée. Une fois que vous avez ajouté toutes les plateformes que vous souhaitez utiliser, exécutez cordova requirements pour vérifier que toutes les exigences sont satisfaites.

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

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

Enregistrez le fichier. Ouvrez le fichier www/index.html dans un éditeur de texte. Modifiez la valeur Content-Security-Policy pour mettre à jour l’URL afin qu’elle corresponde à l’URL de votre back-end, 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

En cas d’exécution à partir d’un navigateur (à l’aide de cordova platform add browser), vous devez activer la prise en charge de 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 ZUMPAPPNAME par le nom de votre back-end mobile Azure App Service. Une fois le back-end configuré, exécutez la commande suivante :

cordova run android

Une fois le démarrage initial terminé, vous pouvez ajouter et supprimer des éléments dans 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. À présent, vous pouvez démarrer l’émulateur manuellement. Si vous exécutez adb devices -l, vous devriez voir l’appareil émulé sélectionné. Vous devez maintenant être en mesure d’exécuter cordova run android.

Apache Cordova App

Étapes suivantes

Poursuivez avec l’implémentation de la synchronisation des données hors connexion.