Blog ENI : Toute la veille numérique !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. Angular
  3. Le cross
Extrait - Angular Développez vos applications web avec le framework JavaScript de Google (3e édition)
Extraits du livre
Angular Développez vos applications web avec le framework JavaScript de Google (3e édition) Revenir à la page d'achat du livre

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...