DevMobile#3 – Initiation au développement hybride avec Cordova

# mobile# cordova# android# mobilité
écrit par Vincent Bozouklian publié le lundi 7 octobre 2019

Visual Studio 2013, 2015 et 2017 proposaient un outil de développement multiplateforme mobile : Apache Cordova. Grâce à cet outil, il est possible de développer une application mobile très rapidement et simplement. Ce qui est un bon moyen pour se lancer dans le développement hybride !

 

 

Présentation de Apache Cordova

 

Cordova est un Framework open-source développé par la Fondation Apache, il permet de développer des applications mobiles hybride en HTML, CSS et Javascript.

Actuellement, Cordova n’est plus disponible sur la dernière version de Visual Studio (2019), et a été remplacé par Xamarin. Pour information, la dernière version de Cordova a été publiée le 27 septembre 2018 (version 8.1.1).

 

Installation de Cordova

 

RAPPEL : L’outil Cordova est disponible sur Visual Studio 2013, 2015 et 2017 ! Si vous ne le trouvez pas dans la liste des outils Visual Studio 2013, veuillez mettre à jour votre logiciel afin d’avoir la dernière version.

 

1- Depuis une version déjà installée : Lancez “Visual Studio Installer” afin de modifier Visual Studio.

Sinon, veuillez télécharger une des versions sur le site internet Microsoft (de préférence, la 2017) : https://visualstudio.microsoft.com/fr/vs/older-downloads/

 

2- Ajoutez Cordova à la liste des fonctionnalités dans le menu d’installation (Mobile development with Javascript)

 

3- Continuez l’installation et lancez Visual Studio

4- Ouvrez un nouveau projet “Blank App (Apache Cordova)”

 

Et voilà ! Votre environnement de développement est en place ! Il ne vous reste plus qu’à vous plonger dans le code et créer votre première application mobile !


Description de l'architecture projet

 

 

Principalement, nous allons travailler dans le dossier www, qui contient la liste de nos pages HTML, JS, CSS et nos images.

build.json sert seulement pour le déploiement de l’application sur un store.

config.json

C’est le fichier de configuration du projet. Il contient plusieurs onglets :

  • Ensemble d’outils
    • Actions sur Cordova (changement de version...)
  • Commun
    • Configuration générale du projet (nom, page de démarrage...)
  • Pung-ins
    • Ajout, suppression et gestion des plugins
  • Windows
    • Paramétrages de l’application en vue d’un déploiement sur Windows Store (Windows Phone)
  • Android
    • Paramétrages de l’application en vue d’un déploiement sur Google Play Store (Android)
  • IOS
    • Paramétrages de l’application en vue d’un déploiement sur l'App Store (iOS)

 

 

Génération de l'application

 

Grâce à Cordova via Visual Studio, il est possible de tester son application depuis un simulateur et de générer un APK ! Vous avez le choix 😀

Voici une liste par défaut des possibilités sous Visual Studio 2017 :

 

La simulation de l’application est un très bon moyen afin de tester son code pendant la phase de développement. Nous avons accès à la console de debug du navigateur, ce qui nous permet de détecter et corriger facilement les erreurs Javascript.

Aperçu de la génération de l’application dans le simulateur :

 

Architecture des fichiers Javascript

 

 

Comme nous pouvons le voir à l’écran, des fonctions sont saisies dans le fichier index.js, créé en même temps que le projet. Grâce à Cordova, vous pouvez exécuter du code en fonction de l’état de l’application (active, suspendue, réactivée).

Voilà ! Vous avez toutes les cartes en mains pour créer votre application mobile hybride Cordova sous Visual Studio 😀

N’hésitez pas à vous référer au site internet de Cordova sur lequel vous trouverez beaucoup de tutoriels : https://cordova.apache.org/

 

 

Ressources