Editions ENI Livres | Vidéos | e-Formations
Le cross-platform avec Angular
Apache Cordova
Apache Cordova est un framework open source faisant partie de Apache Software Foundation. Il sert à effectuer des développements mobiles en utilisant les technologies web (HTML, CSS et JavaScript).
Ce framework agit comme un conteneur : son rôle est d’encapsuler une application web dans une application native, on parle alors d’application hybride. Techniquement, Cordova va embarquer les ressources de l’application web (fichiers HTML/JS/CSS, mais aussi images, fonts, etc.) dans l’application native puis les afficher à partir d’un composant WebView (customisé pour aller chercher les ressources en local plutôt que sur Internet).
Ce type d’application permet de capitaliser sur les connaissances en développement web afin de créer des applications mobiles. De plus, il permet de créer plusieurs applications natives, compatibles Android ou IOS, et un site web avec un maximum de code en commun.
Avec Apache Cordova, il est également possible d’accéder aux API natives de chaque plateforme. Il est par exemple possible de faire vibrer le téléphone ou de prendre une photo depuis l’application.
1. Créer un projet Apache Cordova
Apache Cordova, tout comme Angular, dispose d’une interface en ligne de commande (CLI) permettant de créer, lancer ou compiler un projet Cordova. Il faut donc commencer par installer cette CLI disponible sous forme de paquet Node.js. Pour cela, il faut utiliser la commande suivante :
npm install cordova --global Cette commande va rechercher et installer le paquet Cordova en se servant de npm (Node Package Manager). Le flag "--global" permet de préciser que l’installation doit être faite sur la machine de manière globale et non simplement pour le projet courant.
Une fois cette commande exécutée, il est possible d’utiliser...
Ionic 6
Ionic 6 est un framework permettant le développement d’applications mobiles hybrides. Ionic a surtout pour but de conserver le look and feel d’une application native et fournit donc tout un ensemble d’éléments graphiques utilisables. Ces éléments seront parfois légèrement différents en fonction de la plateforme ciblée afin de respecter le design des éléments natifs.
De plus, allant de pair avec Ionic, l’équipe de Ionic met à disposition des développeurs une librairie appelée Capacitor. Cette librairie permet de développer des applications web, plus précisément Progressive Web Apps, dans un contexte natif en donnant un accès aux fonctionnalités natives telles que la caméra ou bien la géolocalisation.
1. Créer un projet Ionic
Ionic dispose également d’une interface en ligne de commande (CLI). Pour utiliser cette CLI, il faut commencer par l’installer. Elle est mise à disposition sous forme de paquet Node.js dans le registre npm. Il suffit donc d’utiliser la commande install de la CLI de npm avec le flag -g afin de l’installer de manière globale à la machine et non uniquement pour le dossier courant :
npm install -g @ionic/cli Une fois installée, il est possible de se servir de la CLI via la commande ionic. Pour créer un projet, il faut utiliser la commande start. Cette commande prend en paramètre le nom de l’application (qui sera également le dossier dans lequel le projet sera créé) ainsi qu’un nom de template optionnel. Ce template permet de préremplir l’application avec quelques éléments. Il est par exemple possible d’utiliser le template tabs qui crée une application avec trois onglets. Pour créer une application...
