Créer une application Apache Cordova
Cet article fait référence à Visual Studio Tools pour Apache Cordova, qui correspond à la version préliminaire du logiciel. Les fonctionnalités décrites sont dans l'aperçu et sont sujettes à modification. Vous pouvez télécharger l'aperçu à partir du Centre de téléchargement Microsoft.
Une application générée à l'aide de Visual Studio Tools for Apache Cordova utilise Cordova pour accéder aux API natives à l'aide de technologies web telles que HTML et CSS. En réduisant ou en éliminant la nécessité d'utiliser du code natif, les applications fonctionnent sur plusieurs appareils.
Certaines tâches sont communes à la plupart des applications Cordova. Elles incluent notamment :
Choisir une infrastructure JavaScript tierce
Générer une interface utilisateur
Ajouter des fonctionnalités natives (plug-ins)
Ajouter des services connectés
Ajouter des ressources spécifiques à une plateforme
Créer un projet Cordova
Pour consulter une introduction sur le développement à l'aide de Visual Studio Tools for Apache Cordova et une description de la structure des projets Cordova dans Visual Studio, reportez-vous à Create Your First Hello World App.
Choisir une infrastructure JavaScript tierce
En général, quand vous générez une application Cordova, vous souhaiterez également inclure une infrastructure JavaScript tierce pour faciliter le développement de l'application ou pour suivre les meilleures pratiques en matière de conception d'applications. Vous n'êtes pas limité à une seule infrastructure. (Et aucune n'est requise. Ces infrastructures ne font pas partie de Cordova.)
Les infrastructures JavaScript tierces peuvent inclure diverses fonctionnalités et caractéristiques de conception, telles que :
Modèles de conception MVC (modèle-vue-contrôleur) en vue de traiter différents problèmes d'application. AngularJS et Backbone n'en sont que deux exemples populaires.
Styles et contrôles d'interface utilisateur. Une infrastructure d'interface utilisateur (ou une bibliothèque) inclut généralement des contrôles spécifiques, tels qu'un contrôle de grille et parfois des feuilles de style CSS. Pour plus d'informations, voir Générer une interface utilisateur.
Modèle de navigation. Les infrastructures telles qu'AngularJS et la version open source de WinJS, ainsi que d'autres infrastructures, fournissent un modèle de navigation sur une seule page pour favoriser l'activation d'un comportement de type application.
Générer une interface utilisateur
Les applications Cordova s'exécutent dans un contrôle WebView sur toutes les plateformes à l'exception de Windows et Windows Phone 8.1, si bien qu'elles auront tendance à plus ressembler à des applications web. Lors de la planification d'une expérience utilisateur pour des clients, il est important de poser quelques questions :
Voulez-vous que votre application ait le même aspect sur des plateformes différentes ?
Si vous souhaitez une apparence et une convivialité natives pour chaque plateforme, le coût de développement sera supérieur et cet objectif peut s'avérer difficile à atteindre.
Si vous souhaitez une apparence et une convivialité natives, ciblez-vous une plateforme particulière plus que d'autres ?
Certaines infrastructures d'interface utilisateur peuvent ressembler à l'apparence et à la convivialité d'une plateforme particulière. Toutefois, elles fournissent en général une expérience marquée et sont conçues pour avoir le même aspect entre les différentes plateformes. Ionic et Bootstrap sont des exemples d'infrastructures d'interface utilisateur populaires.
Il est important de suivre les règles de conception pour des plateformes particulières afin d'assurer la validation de votre application dans le cadre du processus de révision. Les applications n'ont pas nécessairement besoin d'avoir un aspect natif pour être approuvées pour un magasin d'applications, mais elles doivent se comporter plus comme une application que comme une page web. Pour plus d'informations, consultez Get Your Cordova App Approved by the App Stores.
Si votre interface utilisateur est relativement simple ou si vous disposez de ressources de développement sous la main, vous pouvez créer votre propre interface utilisateur en utilisant les meilleures pratiques en matière de styles CSS interplateformes, telles que les requêtes @media et CSS3 Flexbox. Il existe de nombreuses ressources web qui fournissent des informations sur cela.
Quelques considérations à garder à l'esprit si vous générez votre propre interface utilisateur :
Si vous ciblez Android 4.4 ou version ultérieure (navigateur basé sur Chromium), Windows ou Windows Phone, la prise en charge des normes CSS et des autres technologies web actuelles est meilleure. Consultez caniuse.com pour obtenir des informations spécifiques sur les fonctionnalités prises en charge.
Si vous ciblez des versions iOS ou Android antérieures à 4.4, le navigateur est basé sur WebKit. (L'émulateur Ripple, qui utilise la version installée de Chrome, a un comportement plus proche d'Android 4.4.) Le comportement de certains navigateurs WebKit est différent. Par exemple, les navigateurs WebKit ne fournissent pas une prise en charge cohérente pour les unités vw et vh, lesquelles sont utiles lors de la conception d'une interface utilisateur réactive.
Conseil
Utilisez le dossier merges de votre projet pour gérer les différences de plateformes qui ne peuvent pas être codées de façon plus générique.
Pour obtenir un exemple utilisant des techniques d'interface utilisateur interplateforme, consultez l'exemple de page maître/détails AngularJS.
Ajouter des fonctionnalités natives (plug-ins)
L'une des fonctionnalités les plus importantes fournies par Cordova est la prise en charge de plug-ins qui permettent d'accéder à des fonctionnalités natives, telles que la géolocalisation et la batterie. En utilisant un plug-in, vous pouvez programmer une API JavaScript générique. Les plug-ins principaux prennent en charge généralement toutes les plateformes principales, tandis que les plug-ins tiers peuvent nécessiter des investigations plus poussées. Si la prise en charge des plug-ins n'est pas disponible, vous pouvez être amené à personnaliser un plug-in existant ou à écrire votre propre plug-in, ce qui nécessitera du code natif.
Pour plus d'informations, consultez Gérer les plug-ins pour les applications générées à l'aide de Visual Studio Tools for Apache Cordova.
Ajouter des services connectés
Si votre application utilise des services Azure ou Office 365, consultez Ajouter des services connectés dans votre application générée à l'aide de Visual Studio Tools for Apache Cordova. Un plug-in principal pour Azure Mobile Services est disponible dans le concepteur de configuration, dans Visual Studio.
Pour plus d'informations sur l'ajout des services Azure dans l'exemple d'application de liste de tâches pour Visual Studio Tools for Apache Cordova (version AngularJS), consultez Créer l'exemple d'application ToDoList.
Ajouter des ressources spécifiques à une plateforme
Des ressources spécifiques à une plateforme, telles que des écrans de démarrage et des icônes de magasin, sont requises pour obtenir l'acceptation des applications en vue de leur téléchargement à partir des magasins d'applications. Le dossier res de votre projet contient ces ressources. Vous pouvez également utiliser le dossier res pour ajouter des fichiers de configuration personnalisés. Pour plus d'informations, consultez Configurer votre application générée à l'aide de Visual Studio Tools for Apache Cordova.