Tutoriel Apache Cordova : Développer des applications mobiles avec Cordova

Les applications mobiles s'infiltrent partout, à commencer par les smartphones et les tablettes, jusqu'aux montres intelligentes, et bientôt également dans d'autres appareils portables. Cependant, développer pour chaque plate-forme mobile distincte peut être une tâche fastidieuse, surtout si vos ressources sont limitées ou si vous êtes un développeur unique plutôt qu'une société de développement d'applications mobiles.

C'est là que devenir un développeur Apache Cordova expérimenté peut s'avérer utile en fournissant un moyen de développer des applications mobiles à l'aide de technologies Web standard : HTML5, CSS3 et JavaScript.

En 2009, une startup appelée Nitobi a créé PhoneGap, une API open source pour accéder aux ressources mobiles natives, dans le but de permettre aux développeurs de créer des applications mobiles à l'aide de technologies Web standard. Dans la vision de Nitobi, la plupart des applications mobiles seraient bientôt développées à l'aide de PhoneGap, mais les développeurs auraient toujours la possibilité d'écrire du code natif si nécessaire, que ce soit en raison de problèmes de performances ou de l'absence d'une méthode d'accès à un matériel spécifique.

Cordova PhoneGap?

Il n'y a rien de tel, vraiment. Ce qui s'est passé, c'est qu'Adobe a acquis Nitobi en 2011 et a fait don du noyau open source à Apache Software Foundation, qui l'a rebaptisé Apache Cordova. Une analogie courante que vous rencontrerez souvent est que Cordova est à PhoneGap ce que WebKit est à Chrome ou Safari.

De toute évidence, les différences entre Cordova et PhoneGap étaient minimes au début. Avec le temps, Adobe PhoneGap a développé son propre ensemble de fonctionnalités propriétaires, tandis que Cordova était - et est toujours - pris en charge par la communauté open source. Cet examen et ce didacticiel Apache Cordova examineront plus en détail le développement d'applications Cordova, et bien que certains d'entre eux puissent s'appliquer à PhoneGap, cela ne devrait pas être considéré comme un didacticiel PhoneGap, en soi .

Fonctionnalités d'Apache Cordova

En substance, Cordova n'a aucune limitation par rapport aux applications développées en natif. Ce que vous obtenez avec Cordova est simplement une API JavaScript, qui sert de wrapper pour le code natif et est cohérente sur tous les appareils. Vous pouvez considérer Cordova comme un conteneur d'applications avec une vue Web, qui couvre tout l'écran de l'appareil. La vue Web utilisée par Cordova est la même vue Web que celle utilisée par le système d'exploitation natif. Sur iOS, il s'agit de l'Objective-C UIWebView par défaut ou d'une classe WKWebView personnalisée ; sur Android, c'est android.webkit.WebView .

Apache Cordova est livré avec un ensemble de plug-ins pré-développés qui permettent d'accéder à l'appareil photo, au GPS, au système de fichiers, etc. de l'appareil. À mesure que les appareils mobiles évoluent, l'ajout de la prise en charge de matériel supplémentaire consiste simplement à développer de nouveaux plug-ins.

Enfin, les applications Cordova s'installent comme les applications natives. Cela signifie que la construction de votre code pour iOS produira un fichier IPA, pour Android un fichier APK et que la construction pour Windows Phone produira un fichier XAP. Si vous consacrez suffisamment d'efforts au processus de développement, vos utilisateurs ne se rendront peut-être même pas compte qu'ils n'utilisent pas une application native.

Flux de travail de développement Apache Cordova

Il existe deux chemins de base que vous pouvez suivre lors du développement avec Cordova :

• Lorsque votre intention est de déployer une application sur autant de plates-formes que possible, avec peu ou pas de développement spécifique à la plate-forme, vous devez utiliser le flux de travail multiplateforme. Le principal outil prenant en charge ce flux de travail est l'interface de ligne de commande Cordova (CLI), qui sert d'abstraction de niveau supérieur pour la configuration et la création de votre application pour différentes plates-formes. C'est le chemin de développement le plus couramment utilisé.
• Si vous envisagez de développer votre application avec une plate-forme spécifique à l'esprit, vous devez utiliser le workflow centré sur la plate-forme. De cette façon, vous pourrez peaufiner et modifier votre code à un niveau inférieur en mélangeant des composants natifs avec des composants Cordova. Même si vous pouvez utiliser cette approche pour le développement multiplateforme, le processus sera plus long et plus fastidieux.

Il est généralement recommandé de commencer par le flux de travail de développement multiplateforme, car le passage au développement centré sur la plateforme est assez simple. Cependant, si vous démarrez initialement avec le flux de travail centré sur la plateforme, vous ne pourrez pas passer au développement multiplateforme car la CLI écrasera vos personnalisations une fois que vous aurez exécuté le processus de génération.

Prérequis et installation de Cordova

Avant d'installer et d'exécuter tout ce qui concerne Cordova, vous devrez installer le SDK pour chaque plate-forme pour laquelle vous avez l'intention de créer votre application. Nous nous concentrerons sur la plate-forme Android dans cet article ; cependant, le processus impliquant d'autres plates-formes est similaire.

Vous devez télécharger le SDK Android trouvé ici. Pour Windows, le SDK se présente sous la forme d'un programme d'installation, tandis que pour Linux et OSX, il se présente sous la forme d'une archive qui peut être simplement extraite. Après avoir extrait/installé le package, vous devrez ajouter les sdk/tools et sdk/platform-tools à votre variable PATH . La variable PATH est utilisée par Cordova pour rechercher les fichiers binaires dont il a besoin pour le processus de construction. Si vous n'avez pas installé Java, vous devez continuer et installer le JDK avec Ant. ANT_HOME et JAVA_HOME doivent être définis sur les dossiers bin de JDK et Ant, et après avoir installé le SDK Android, définissez la variable ANDROID_HOME sur Android/Sdk . Tous les emplacements des trois variables *_HOME doivent également figurer dans votre variable PATH .

Après avoir installé la commande SDK android , elle sera disponible dans votre ligne de commande. Exécutez-le pour ouvrir le gestionnaire de SDK et installer les derniers outils et l'API Android. Vous aurez probablement besoin des outils SDK Android, des outils de la plate-forme SDK Android, des outils de construction du SDK Android, de la plate-forme SDK, des API Google Intel x86 Atom System Image, des sources pour le SDK Android et de l'accélérateur d'émulation Intel x86 (programme d'installation HAXM) . Après cela, vous pourrez créer un émulateur avec android avd .

Cordova CLI dépend de Node.js et du client Git, alors allez-y et téléchargez et installez Node depuis nodejs.org et Git depuis git-scm.com. Vous utiliserez npm pour installer Cordova CLI lui-même ainsi que pour installer des plugins supplémentaires, et Cordova utilisera git dans les coulisses afin de télécharger les dépendances requises. Enfin, courez

 npm install -g cordova

… pour installer la CLI Cordova globalement ( npm install cordova n'est pas suffisant en soi.)

Pour résumer, voici les packages dont vous aurez besoin :

• Java
• Fourmi
• SDK Android
• NodeJSName
• Gite

Et ces variables d'environnement devront être mises à jour :

• PATH
• JAVA_HOME
• ANT_HOME
• ANDROID_HOME

Amorcer une application

Si vous avez correctement installé Cordova, vous devriez maintenant avoir accès à l'utilitaire de ligne de commande Cordova. Ouvrez votre terminal ou votre ligne de commande et accédez à un répertoire dans lequel vous souhaitez créer votre premier projet Cordova. Pour démarrer une application, tapez la commande suivante :

 cordova create toptal toptal.hello HelloToptal

La ligne de commande se compose du nom de la commande cordova , suivi de la sous-commande create . La sous-commande est invoquée avec trois paramètres supplémentaires : le dossier dans lequel l'application sera placée, l'espace de noms de l'application et son nom d'affichage. Cela démarre l'application dans un dossier avec la structure suivante :

 toptal/ |-- hooks/ |-- platforms/ |-- plugins/ |-- www/ `-- config.xml

Le dossier www contient le noyau de votre application. C'est là que vous placerez votre code d'application qui est commun à toutes les plateformes.

Bien que Cordova vous permette de développer facilement une application pour différentes plates-formes, vous devez parfois ajouter des personnalisations. Lorsque vous développez pour plusieurs plates-formes, vous ne souhaitez pas modifier les fichiers source dans les différents répertoires platforms/[platform-name][assets]/www , car ils sont régulièrement écrasés par les fichiers www de niveau supérieur.

À ce stade, vous pouvez également ouvrir le fichier config.xml et modifier les métadonnées de votre application, telles que l'auteur et la description.

Ajoutez votre première plateforme en utilisant :

 cordova platform add android

Si vous changez d'avis plus tard, vous pouvez facilement supprimer une plate-forme du processus de construction :

 cordova platform rm android

En inspectant le répertoire des plates-formes, vous remarquerez le dossier android qu'il contient. Pour chaque plate-forme que vous ajoutez, Cordova créera un nouveau répertoire dans les plates-formes et dupliquera le dossier www à l'intérieur. Si, par exemple, vous souhaitez personnaliser votre application pour Android, vous pouvez modifier les fichiers dans platforms/android/assets/www et basculer vers des outils shell spécifiques à la plateforme.

Cependant, rappelez-vous que si vous reconstruisez votre application avec la CLI (utilisée pour le développement multiplate-forme), Cordova écrasera les modifications que vous avez apportées pour chaque plate-forme, alors assurez-vous de les avoir sous contrôle de version, ou vous faites spécifique à la plate-forme modifications une fois que vous avez terminé le développement multiplateforme. Comme nous l'avons mentionné précédemment, il est facile de passer d'un développement multiplateforme à un développement spécifique à une plateforme. Se déplacer dans l'autre sens ne l'est pas.

Si vous souhaitez continuer à utiliser le flux de travail multiplateforme tout en effectuant des personnalisations spécifiques à la plateforme, vous devez utiliser le dossier de fusion de niveau supérieur. À partir de la version 3.5 de Cordova, ce dossier a été supprimé du modèle d'application par défaut, mais si vous en avez besoin, vous pouvez simplement le créer à côté des autres répertoires de niveau supérieur ( hooks , platforms -formes, plugins et www ).

Les personnalisations spécifiques à la plate-forme sont placées dans merges/[platform-name] et sont appliquées après les fichiers source dans le dossier www de niveau supérieur. De cette façon, vous pouvez soit ajouter de nouveaux fichiers source pour certaines plates-formes, soit remplacer des fichiers source entiers de niveau supérieur par des fichiers spécifiques à la plate-forme. Prenons par exemple la structure suivante :

 merges/ |-- wp8/ | `-- app.js |-- android/ | `-- android.js |-- www/ `-- app.js

Dans ce cas, le fichier de sortie pour Android contiendra à la fois les fichiers app.js et android.js , mais le fichier de sortie pour Windows Phone 8 ne contiendra que le fichier app.js qui se trouve dans le dossier merges/wp8 , puisque le les fichiers dans merges/[platform] remplacent les fichiers dans www .

Le répertoire des plugins contient des informations sur les plugins de chaque plate-forme. À ce stade, vous ne devriez avoir que le fichier android.json qui devrait avoir la structure suivante :

 { "prepare_queue": { "installed": [], "uninstalled": [] }, "config_munge": { "files": {} }, "installed_plugins": {}, "dependent_plugins": {} }

Construisons l'application et déployons-la sur un appareil Android. Vous pouvez également utiliser l'émulateur, si vous le souhaitez.

Cordova fournit plusieurs étapes CLI pour créer et exécuter vos applications : cordova prepare , cordova compile , cordova build (qui est un raccourci pour les deux précédents), cordova emulate et cordova run (qui intègre build et peut également exécuter l'émulateur). Cela ne devrait pas vous dérouter, car dans la plupart des cas, vous souhaitez créer et exécuter votre application dans l'émulateur :

 cordova run --emulator

Si vous le souhaitez, vous pouvez brancher votre appareil via le port USB, activer le mode de débogage USB et déployer votre première application Apache Cordova directement sur votre appareil en exécutant simplement :

 cordova run

Cela copiera tous vos fichiers dans platforms/* et exécutera toutes les tâches requises.

Vous pouvez limiter la portée du processus de construction en spécifiant le nom de la plate-forme pour laquelle vous souhaitez construire l'application et/ou même l'émulateur spécifique, par exemple :

 cordova run android --emulator

ou

 cordova run ios --emulator --target="iPhone-8-Plus"

Tutoriel pratique Apache Cordova

Créons une application de tutoriel simple pour démontrer l'utilisation de Cordova et de ses plugins. L'intégralité de la démo se trouve dans ce référentiel GitHub afin que vous puissiez la télécharger et en parcourir certaines parties avec ce court didacticiel Cordova.

Nous utiliserons la configuration initiale que vous avez créée et ajouterons du code supplémentaire. Disons que nous voulons ajouter de nouveaux projets à une base de données Toptal imaginaire, ainsi que voir ceux qui existent déjà. Ouvrez index.html et configurez deux onglets de la manière suivante :

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="msapplication-tap-highlight" content="no" /> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" /> <link rel="stylesheet" type="text/css" href="css/toptal.css" /> <title>Hello Toptal</title> </head> <body> <div> <div> </div> </div> <footer> <ul> <li class="tab-button active" data-tab="#search-tab">Search Projects</li> <li class="tab-button" data-tab="#add-tab">Post a Project</li> </ul> </footer> <div></div> <script src="js/lib/jquery-1.11.1.min.js"></script> <script src="js/lib/jquery.mobile-1.4.5.min.js"></script> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/SQLiteStorageService.js"></script> <script type="text/javascript" src="js/Controller.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html>

Notez que j'ai ajouté Bootstrap et jQuery Mobile en tant que dépendances. Sachez que de bien meilleures solutions et frameworks ont été développés pour créer des applications hybrides modernes, mais comme la plupart (sinon tous) les développeurs Web connaissent ces deux bibliothèques, il est logique de les utiliser pour un didacticiel pour débutants. Vous pouvez télécharger les feuilles de style depuis GitHub ou utiliser les vôtres, si vous préférez.

Passons au fichier index.js et réduisons-le à ce qui suit :

 var app = { // Application Constructor initialize: function() { if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) { document.addEventListener("deviceready", this.onDeviceReady, false); } else { this.onDeviceReady(); } }, onDeviceReady: function() { // We will init / bootstrap our application here }, }; app.initialize();

N'oubliez pas que l'architecture préconisée pour les applications Cordova est la mise en place d'une application monopage (SPA). De cette façon, toutes les ressources ne sont chargées qu'une seule fois au démarrage de l'application et peuvent rester dans la vue Web tant que l'application est en cours d'exécution. De plus, avec les SPA, l'utilisateur n'aura pas de rechargements de page qui ne sont pas simplement typiques des applications natives. Gardant cela à l'esprit, configurons un contrôleur simple pour basculer entre les deux onglets :

 var Controller = function() { var controller = { self: null, initialize: function() { self = this; this.bindEvents(); self.renderSearchView(); }, bindEvents: function() { $('.tab-button').on('click', this.onTabClick); }, onTabClick: function(e) { e.preventDefault(); if ($(this).hasClass('active')) { return; } var tab = $(this).data('tab'); if (tab === '#add-tab') { self.renderPostView(); } else { self.renderSearchView(); } }, renderPostView: function() { $('.tab-button').removeClass('active'); $('#post-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); $("#tab-content").load("./views/post-project-view.html", function(data) { $('#tab-content').find('#post-project-form').on('submit', self.postProject); }); }, renderSearchView: function() { $('.tab-button').removeClass('active'); $('#search-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); var $projectTemplate = null; $("#tab-content").load("./views/search-project-view.html", function(data) { $projectTemplate = $('.project').remove(); // Load projects here }); } } controller.initialize(); return controller; }

Le contrôleur a jusqu'à présent deux méthodes, une pour rendre la vue de recherche et une pour rendre la vue Post-projet. Initialisons-le dans notre fichier index.js en le déclarant d'abord en haut et en le construisant dans la méthode onDeviceReady :

 // top of index.js var controller = null

 // inside onDeviceReady method controller = new Controller();

Enfin, ajoutez une référence de script dans index.html au-dessus de la référence à index.js . Vous pouvez télécharger les vues Search et Post directement depuis GitHub. Étant donné que les vues partielles sont lues à partir d'un fichier, certains navigateurs comme Chrome, tout en essayant de rendre votre page, se plaindront des requêtes inter-domaines.

La solution possible ici serait d'exécuter un serveur statique local, par exemple en utilisant le module node-static npm. De plus, ici, vous pouvez commencer à penser à utiliser un framework tel que PhoneGap et/ou Ionic. Tous fournissent une gamme d'outils de développement, y compris l'émulation dans le navigateur, le rechargement à chaud et la génération de code (échafaudage).

Pour l'instant, déployons simplement sur un appareil Android en exécutant ce qui suit :

 cordova run android

À ce stade, votre application devrait avoir deux onglets. Le premier onglet permet de rechercher des projets :

Le second onglet permet de poster de nouveaux projets :

Tout ce que nous avons maintenant est une application Web classique exécutée dans une vue Web. Nous n'avons pas vraiment utilisé l'une des fonctionnalités natives, alors essayons de le faire maintenant. Une question courante est de savoir comment stocker les données localement sur l'appareil, ou plus précisément, quel type de stockage utiliser. Il y a plusieurs façons de procéder :

• Stockage local
• WebSQL
• IndexedDB
• Stockage côté serveur accessible via un service Web
• Plugins tiers offrant d'autres options

LocalStorage convient pour stocker de petites quantités de données, mais cela ne suffira pas si vous créez une application gourmande en données, car l'espace disponible varie de 3 à 10 Mo. IndexedDB peut être une meilleure solution pour ce cas. WebSQL est obsolète et n'est pas pris en charge sur certaines plates-formes. Enfin, l'utilisation de services Web pour récupérer et modifier des données s'inscrit bien dans le paradigme SPA, mais il tombe en panne lorsque votre application se déconnecte. Les techniques PWA ainsi que les Service Workers sont récemment entrés dans le monde de Cordova pour aider à cela.

De plus, de nombreux plugins tiers supplémentaires viennent combler les lacunes du noyau de Cordova. Le plugin File peut être très utile car il vous donne accès au système de fichiers de l'appareil, vous permettant de créer et de stocker des fichiers. Pour l'instant, essayons SQLitePlugin qui vous fournit une base de données SQLite locale. Vous pouvez l'ajouter à votre projet en exécutant :

 cordova plugin add https://github.com/brodysoft/Cordova-SQLitePlugin

SQLitePlugin fournit une API à la base de données SQLite de l'appareil et sert de véritable mécanisme de persistance. Nous pouvons créer un service de stockage simple de la manière suivante :

 SQLiteStorageService = function () { var service = {}; var db = window.sqlitePlugin ? window.sqlitePlugin.openDatabase({name: "demo.toptal", location: "default"}) : window.openDatabase("demo.toptal", "1.0", "DB para FactAV", 5000000); service.initialize = function() { // Initialize the database var deferred = $.Deferred(); db.transaction(function(tx) { tx.executeSql( 'CREATE TABLE IF NOT EXISTS projects ' + '(id integer primary key, name text, company text, description text, latitude real, longitude real)' ,[], function(tx, res) { tx.executeSql('DELETE FROM projects', [], function(tx, res) { deferred.resolve(service); }, function(tx, res) { deferred.reject('Error initializing database'); }); }, function(tx, res) { deferred.reject('Error initializing database'); }); }); return deferred.promise(); } service.getProjects = function() { // fetch projects } service.addProject = function(name, company, description, addLocation) { // add a new project } return service.initialize(); }

Vous pouvez télécharger le code pour récupérer et ajouter des projets à partir de GitHub et le coller dans les espaces réservés respectifs. N'oubliez pas d'ajouter SQLiteStorageService.js à votre fichier index.html au dessus de Controller.js, et de l'initialiser dans votre controller en modifiant la fonction init du Controller :

 initialize: function() { self = this; new SQLiteStorageService().done(function(service) { self.storageService = service; self.bindEvents(); self.renderSearchView(); }).fail(function(error) { alert(error); }); }

Si vous jetez un coup d'œil au service.addProject(), vous remarquerez qu'il fait un appel à la méthode navigator.geolocation.getCurrentPosition(). Cordova a un plugin de géolocalisation que vous pouvez utiliser pour obtenir l'emplacement actuel du téléphone, et vous pouvez même utiliser la méthode navigator.geolocation.watchPosition() pour recevoir des mises à jour lorsque la position de l'utilisateur change.

Enfin, ajoutons les poignées d'événement du contrôleur pour ajouter et récupérer des projets à partir de la base de données :

 renderPostView: function() { $('.tab-button').removeClass('active'); $('#post-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); $("#tab-content").load("./views/post-project-view.html", function(data) { $('#tab-content').find('#post-project-form').on('submit', self.postProject); }); }, postProject: function(e) { e.preventDefault(); var name = $('#project-name').val(); var description = $('#project-description').val(); var company = $('#company').val(); var addLocation = $('#include-location').is(':checked'); if (!name || !description || !company) { alert('Please fill in all fields'); return; } else { var result = self.storageService.addProject( name, company, description, addLocation); result.done(function() { alert('Project successfully added'); self.renderSearchView(); }).fail(function(error) { alert(error); }); } }, renderSearchView: function() { $('.tab-button').removeClass('active'); $('#search-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); var $projectTemplate = null; $("#tab-content").load("./views/search-project-view.html", function(data) { $('#addressSearch').on('click', function() { alert('Not implemented'); }); $projectTemplate = $('.project').remove(); var projects = self.storageService.getProjects().done(function(projects) { for(var idx in projects) { var $div = $projectTemplate.clone(); var project = projects[idx]; $div.find('.project-name').text(project.name); $div.find('.project-company').text(project.company); $div.find('.project-description').text(project.description); if (project.location) { var url = '<a target="_blank" href="https://www.google.com.au/maps/preview/@' + project.location.latitude + ',' + project.location.longitude + ',10z">Click to open map</a>'; $div.find('.project-location').html(url); } else { $div.find('.project-location').text("Not specified"); } $tab.append($div); } }).fail(function(error) { alert(error); }); }); }

Pour ajouter la console et les plugins de dialogue, exécutez ce qui suit :

 cordova plugin add org.apache.cordova.dialogs cordova plugin add org.apache.cordova.console

Le plugin cordova.console vous aidera dans le débogage en activant la fonction console.log() dans les émulateurs.

Vous pouvez facilement déboguer des applications Android via le débogueur à distance Chrome. Une fois que vous avez connecté votre appareil, cliquez sur le menu déroulant dans le coin supérieur droit (sous le bouton X), développez Plus d'outils et cliquez sur Inspecter les appareils. Vous devriez voir votre appareil dans la liste et pouvoir ouvrir sa console de débogage.

Safari fournit la même fonctionnalité pour le débogage des applications iOS qui s'exécutent sur un périphérique ou un émulateur connecté par USB. Activez simplement les outils de développement sous l'onglet Paramètres Safari> Avancé.

Le plug-in cordova.dialogs active les notifications natives. Une pratique courante consiste à redéfinir la méthode windows.alert à l'aide de l'API cordova.dialogs de la manière suivante :

 overrideBrowserAlert: function() { if (navigator.notification) { // Override default HTML alert with native dialog window.alert = function (message) { navigator.notification.alert( message, // message null, // callback "Toptal", // title 'OK' // buttonName ); }; } }

La fonction overrideBrowserAlert doit être appelée dans le gestionnaire d'événements deviceready .

Vous devriez maintenant pouvoir ajouter de nouveaux projets et afficher ceux existants à partir de la base de données. Si vous cochez la case "Inclure l'emplacement", l'appareil appellera l'API de géolocalisation et ajoutera votre emplacement actuel au projet.

Ajoutons une touche finale à l'application en définissant une icône et un écran de démarrage. Ajoutez ce qui suit à votre fichier config.xml :

 <platform name="android"> <icon src="www/img/logo.png" /> <splash src="www/img/logo.png" density="mdpi"/> <splash src="www/img/logo.png" density="hdpi"/> <splash src="www/img/logo.png" density="xhdpi"/> </platform>

Enfin, placez une image de logo dans le dossier www/img .

Votre propre application Cordova

Nous avons suivi les étapes de base du développement d'applications Apache Cordova et utilisé notre propre architecture JavaScript et feuille de style CSS. Ce didacticiel Cordova était une tentative de montrer le potentiel d'Apache Cordova en tant que moyen de développer des applications mobiles à l'aide de technologies familières, réduisant à la fois le temps de développement et l'effort requis pour créer plusieurs applications pour différentes plates-formes.

Cependant, lors de la création d'applications destinées à la production, il est recommandé d'utiliser un framework existant. En plus de structurer votre application dans une architecture prédéfinie, cela peut également vous fournir un ensemble de composants qui aideront votre application à se rapprocher de l'apparence native. Certains frameworks à noter sont Ionic, Framework7, Weex, Ratchet, Kendo UI et Onsen UI. Bonne chance!