Une introduction à Cordova les bases

Dans cet article, je vais vous présenter Cordova, un framework utilisé pour développer des applications mobiles. Si vous êtes nouveau sur Cordova ou si vous voulez savoir si c’est le bon outil pour votre prochain projet, vous êtes au bon endroit. Dans cet article, je chercherai à répondre aux questions suivantes:

  • Cordova c'est quoi?
  • Comment ça marche sous le capot?
  • Que puis-je construire avec Cordova?
  • Comment démarrer avec Cordova et de quoi ai-je besoin?

Allons-y et plongeons dans.

1. Qu'est-ce que Cordova??

Cordova est un framework de développement d'applications mobiles principalement destiné aux développeurs Web. Il permet aux développeurs Web d'utiliser des technologies Web telles que HTML, CSS et JavaScript pour créer des applications mobiles. Comme toute autre technologie, Cordova a ses avantages et ses inconvénients.

Avantages

  • Facile à apprendre Si vous êtes un développeur Web, Cordova a une courbe d'apprentissage douce. Vous pouvez facilement appliquer vos compétences en tant que développeur Web pour créer une application avec Cordova. Tout ce dont vous avez besoin est de vous familiariser avec la ligne de commande pour pouvoir utiliser Cordova..
  • Accès à la fonctionnalité native Avec Cordova, vous avez accès aux fonctionnalités de l'appareil natif, telles que l'appareil photo, les contacts, la géolocalisation, les fichiers multimédias, les SMS, etc..
  • Libre Vous n'avez rien à payer pour utiliser Cordova.
  • Open source Tout le monde peut contribuer au code source de Cordova pour l'améliorer. Les plugins sont également open source et n'importe qui peut créer des plugins personnalisés. Cela signifie que les développeurs comme vous peuvent facilement installer et utiliser ces plugins. Ou vous pouvez créer votre propre plugin et le partager avec la communauté.
  • Grande communauté Beaucoup de développeurs utilisent Cordova. Sur Stack Overflow, par exemple, près de 40 000 questions sont étiquetées avec Cordova. Cela signifie que vous ne serez jamais seuls à résoudre des bugs étranges (si jamais vous les rencontrez). Les membres de la communauté sont toujours disposés à aider, tout ce que vous avez à faire est de demander.
  • Ecrire une fois, déployer partout Cordova compile votre application dans un fichier de package, requis par la plupart des magasins d'applications. Cela signifie que les applications créées avec Cordova peuvent facilement être déployées dans le magasin d'applications de votre choix. Si vous déployez sur Android, Cordova crée un APK (Package d'applications Android). Si vous déployez sur iOS, Cordova compile pour IPA. Pour Windows, c'est APPX.

Les inconvénients

  • Mauvaise documentation Il est difficile de trouver des informations sur des choses très spécifiques, telles que les packages à installer avec Android SDK Manager. Et quand vous regardez quelque chose, les résultats indiquent des informations spécifiques aux différentes versions de Cordova. Ceci est parfois déroutant pour les débutants car ils pourraient avoir une version différente de Cordova installée et ils consultent la documentation d'une autre version de Cordova..
  • Plus lent que l'indigène Étant donné que les applications créées avec Cordova sont essentiellement des applications Web contenues dans une vue Web, elles ne fonctionnent pas aussi bien que leurs homologues natifs. Cela signifie qu'il existe une limite au type d'applications que vous pouvez créer. Par exemple, une application de montage vidéo est mieux construite en mode natif car elle dépendra beaucoup du processeur et du processeur graphique pour effectuer son travail..
  • Cadres Cordova n'étant qu'un wrapper pour une application Web, il ne contient pas de composants d'interface utilisateur, d'animations et d'autres fonctionnalités que vous trouverez dans la plupart des applications natives. Cela signifie que vous devez implémenter tout cela vous-même. C'est pourquoi de nombreux développeurs s'appuient sur des frameworks tels que Ionic ou Onsen UI pour construire l'interface utilisateur de leurs applications..
  • Bugs dans les plugins Tous les plugins ne sont pas créés égaux. Il y a ceux qui ont des bugs ou ne fonctionnent pas comme prévu.
  • Tous les appareils ne sont pas identiques La fonctionnalité de périphérique natif est accessible via l'utilisation de plugins. Cordova expose une API pour que ces plugins puissent être utilisés dans la vue Web, mais tous les appareils ne sont pas identiques. Il y a des bizarreries sur chaque appareil. Pour le dire simplement, toutes les options que vous pouvez définir sur un plugin ne fonctionneront pas sur tous les appareils. Par exemple, sur Android, le cameraDirection la valeur donne toujours une photo prise avec la caméra orientée vers l'arrière.

2. Cordova et PhoneGap

Lorsque vous travaillez avec Cordova, vous rencontrez souvent le terme PhoneGap. PhoneGap est le nom du projet original créé par une startup appelée Nitobi aux alentours de 2009. En 2011, la société a été acquise par Adobe..

Notez qu'Adobe n'a pas acheté le code réel, mais uniquement le nom et les personnes qui ont travaillé chez Nitobi. Le noyau open source a été donné à Apache Software Foundation, qui est maintenant connue sous le nom de Cordova..

Une analogie couramment utilisée par les développeurs est que Cordova est à PhoneGap ce que WebKit est à Safari. Autrement dit, PhoneGap est une distribution de Cordova gérée par Adobe. Si vous souhaitez en savoir plus sur l'historique, vous pouvez consulter cet article sur le blog PhoneGap de Brian LeRoux..

En pratique, PhoneGap et Cordova sont fondamentalement les mêmes. Vous pouvez choisir PhoneGap ou Cordova lors du démarrage d'un projet. La seule différence est l'interface de ligne de commande (CLI). La CLI de PhoneGap s’intègre à Adobe PhoneGap Build. Ce service permet aux développeurs de compiler leurs applications sur la plate-forme de leur choix en les téléchargeant sur le site Web PhoneGap Build..

3. Comment fonctionne Cordova sous le capot?

L'interface utilisateur de Cordova est une vue Web. Vous pouvez considérer la vue Web comme un onglet dans un navigateur. Lorsque vous compilez une application Cordova, elle ne prend pas votre code HTML, CSS et JavaScript et ne le convertit pas automatiquement en code natif, spécifique à chaque plate-forme..

Cordova agit comme un conteneur pour l'application que vous écrivez à l'aide des technologies Web. Lorsque l'application est compilée, votre code reste en fait intact. Le compilateur prend simplement votre code et le met à la disposition de la vue Web pour le rendu..

Si vous avez déjà ouvert un fichier HTML dans un navigateur, c'est essentiellement la même chose. N'oubliez pas que cette vue Web est implémentée différemment sur chaque appareil. Cela signifie que certaines fonctionnalités ne sont pas disponibles sur certaines plates-formes ou qu'elles sont implémentées différemment..

4. Fonctionnalité de périphérique natif

Avec Cordova, vous avez accès aux fonctionnalités de l'appareil natif via l'utilisation de plug-ins. Les plugins sont des modules complémentaires qui exposent une API JavaScript pour les composants natifs. Ils vous permettent d’accéder aux fonctionnalités des appareils natifs en utilisant l’API JavaScript qu’elle expose..

Comme vous pouvez le supposer, les plugins sont écrits en code natif. Cela signifie que vous devez installer le SDK pour les différentes plates-formes sur lesquelles vous prévoyez de déployer. Ensuite, vous pourrez écrire le code natif de chacune de ces plates-formes. Vous appelez ensuite le code natif via l'API JavaScript afin de pouvoir y accéder dans la vue Web..

Il existe deux types de plug-ins que vous pouvez trouver dans l'écosystème de plug-ins Cordova. D'abord, les plugins officiels. Celles-ci sont gérées par la communauté Cordova. Vous saurez qu'un plugin est officiel s'il a la Cordova-plugin préfixe.

Les autres types de plug-ins sont des plug-ins personnalisés. Ceux-ci sont construits par des développeurs comme vous et moi. Souvent, ils sont conçus pour résoudre un problème très spécifique, tel que la connexion d'une application à Facebook ou au plug-in Ionic Keyboard pour faciliter l'interaction avec le clavier..

Si vous souhaitez en savoir plus sur le type de plug-ins que vous pouvez utiliser avec Cordova, vous pouvez visiter le site Web de Cordova Plugins..

5. Que pouvez-vous construire avec Cordova?

Bien que vous puissiez créer à peu près n'importe quel type d'application avec Cordova, il existe des limites dont nous parlerons plus tard. Pour l'instant, passons en revue quelques exemples d'applications que vous pouvez créer avec Cordova..

  • TripCase TripCase est une application de voyage qui vous guide à travers toutes les étapes de votre voyage..
  • FruitSalad FruitSalad est un jeu de réflexion similaire à Bejeweled.
  • Panasonic World Heritage Calendar Ceci est une application de calendrier qui vous montre de belles photographies de sites du patrimoine mondial. Il comprend également des anecdotes sur la culture et la nature liées aux sites.
  • HealthTap HealthTap est le débordement de pile pour les questions de santé.
  • Wikipedia L'application officielle Wikipedia est construite avec Cordova.

Sur la base des applications répertoriées ci-dessus, vous devriez maintenant avoir une idée du type d'applications que vous pouvez créer avec Cordova. Si vous êtes développeur, vous avez peut-être remarqué que toutes ces applications utilisent Internet. Ils communiquent tous avec un serveur distant pour récupérer des données. C'est ce à quoi Cordova est doué: extraire des données d'un serveur, les présenter à l'utilisateur, écouter les réponses de l'utilisateur et y répondre..

Mais cela ne signifie pas que vous ne pouvez pas créer d’applications autonomes avec Cordova. Il existe de nombreuses solutions de base de données côté client que vous pouvez facilement utiliser. Un exemple populaire est LokiJS, un magasin de données rapide en mémoire, orienté document pour Node.js, le navigateur et Cordova. Dans une application de galerie de photos, par exemple, vous pouvez utiliser cette bibliothèque pour stocker les chemins d'accès aux photos, puis les récupérer dans la mémoire si nécessaire..

Avec Cordova, vous pouvez utiliser à peu près toutes les bibliothèques CSS ou JavaScript que vous pouvez trouver sur cdnjs, car le code que vous écrivez s’exécute dans le navigateur. Soyez prudent cependant, tous les navigateurs ne sont pas identiques. Et cela nous amène à la section suivante.

6. Limites

Comme pour toute chose dans la vie, il y a toujours des limites. Cordova ne fait pas exception. Dans cette section, je parlerai de certaines des limitations de Cordova.

Tout ce que vous pouvez accomplir avec du code natif, vous pouvez également le faire avec Cordova. Il y a deux limitations communes cependant, performance et disponibilité du plugin.

Performance

Cordova accède aux capacités de l'appareil natif via des plug-ins, ce qui a un coût, un coût que les applications natives n'ont pas. Comme je l'ai mentionné précédemment dans ce didacticiel, il n'est pas judicieux de créer des applications avec Cordova qui s'appuient fortement sur le processeur ou le processeur graphique. De telles applications ne seront pas aussi performantes que vous le voudriez, surtout si elles sont comparées à leurs homologues natives.

Disponibilité du plugin

Une autre limitation est la disponibilité du plugin. Si une fonctionnalité spécifique n'est pas disponible via un plugin existant dans le référentiel, votre seul choix est de construire le plugin vous-même..

Affichage Web

Par défaut, Cordova utilise la vue Web de la plate-forme pour afficher l'interface utilisateur, ce qui signifie que vous interagissez avec une vue Web différente sur chaque plate-forme que vous ciblez..

De plus, différentes versions du système d'exploitation de la plate-forme peuvent avoir une vue Web différente ou une vue avec un ensemble de fonctionnalités différent. Par exemple, les appareils Android modernes peuvent exécuter une version d'Android sur laquelle WebRTC est activé, alors que les anciennes versions d'Android n'ont pas cette fonctionnalité..

Pour les développeurs Cordova, c’est une bonne chose que des projets comme Crosswalk viennent à la rescousse. Crosswalk vous permet d'utiliser un affichage Web personnalisé dans les applications Cordova, en normalisant les différences entre les plates-formes. Plus loin dans ce tutoriel, je vous montrerai comment utiliser Crosswalk dans un projet Cordova..

En savoir plus dans notre cours sur Cordova

Si vous souhaitez en savoir plus sur Cordova, consultez le cours de Reggie Dawson sur Cordova. Reggie vous présente la plate-forme et vous aide à créer une application Cordova à partir de zéro. Regardez la vidéo ci-dessous pour avoir un aperçu du cours.

Conclusion

Vous devriez maintenant avoir une bonne idée de ce qu'est Cordova et de la manière dont il accomplit sa magie. J'espère que cet article a répondu à la question de savoir si Cordova est le bon outil pour votre prochain projet mobile..

Dans le prochain article, nous allons nous salir les mains en créant une application mobile avec Cordova. N'hésitez pas à laisser des questions ou des commentaires dans les commentaires ci-dessous.