Dans le prochain article, nous allons examiner Ionic Framework et comment il peut être installé sur Ubuntu 20.04. Ce framework permettra aux utilisateurs de mettre en œuvre des projets avec d'autres frameworks tels que Angular. Ionic est un SDK open source complet pour le développement d'applications mobiles hybrides créé par Max Lynch, Ben Sperry et Adam Bradley de Drifty Co. en 2013. La version originale a été publiée en 2013 et construite sur AngularJS et Apache Cordova. Cependant, la dernière version a été reconstruite comme un ensemble de composants Web, qui permet à l'utilisateur de choisir de faire des projets Angular, React ou Vue.js. Il permet également l'utilisation de composants Ionic sans aucun cadre d'interface utilisateur.
Ionique fournit des outils et des services pour développer des applications Web hybrides de bureau, mobiles et progressives basées sur des pratiques et des technologies de développement Web modernes. Pour cela, des technologies Web telles que CSS, HTML5 et Sass peuvent être utilisées. Avec ce framework, nous pouvons développer des applications avec des technologies Web compatibles avec iOS, Android ou le Web lui-même. Il propose également un outil CLI puissant avec lequel nous pourrons gérer et créer des projets.
Caractéristiques générales de Ionic
- Ce framework est gratuit et open source. Il propose une bibliothèque d'outils et de composants d'interface utilisateur optimisés pour les mobiles avec lesquels créer des applications rapides et hautement interactives.
- Ionic utilise Cordova, et plus récemment des plug-ins pour accéder aux fonctions du système d'exploitation hôte telles que GPS, appareil photo, lampe de poche, etc.
- Les utilisateurs peuvent créer leurs applications, puis les personnaliser pour Android, iOS, Windows, ordinateur de bureau (avec Electron) ou les navigateurs modernes.
- Ionique comprend des pièces mobiles, une typographie ou un thème de base extensible.
- Lors de l'utilisation Composants Web, Ionic fournit des composants et des méthodes personnalisés pour interagir avec eux. L'un de ces composants, le défilement virtuel, permet aux utilisateurs de faire défiler une liste de milliers d'éléments sans aucun impact sur les performances. Un autre composant, Tabs, crée une interface à onglets qui prend en charge la navigation de style natif et la gestion de l'état de l'historique.
- En plus du SDK, Ionic fournit également services que les développeurs peuvent utiliser pour activer des fonctionnalitéstelles que les implémentations de code ou les builds automatisés.
- Aussi fournit son propre IDE connu sous le nom d'Ionic Studio.
- Il offre également une interface de Ligne de commande (CLI) pour créer des projets. La CLI permet également aux développeurs d'ajouter des plugins et packages Cordova supplémentaires, d'activer les notifications push, de générer des icônes d'application, des écrans de démarrage et de créer des binaires natifs.
Installer Ionic sur Ubuntu 20.04
L'installation de ce framework est assez simple. Pour commencer, il suffit d'ouvrir un terminal (Ctrl + Alt + T) et mettre à jour nos packages système:
sudo apt update; sudo apt upgrade
Alors nous allons installer certains packages nécessaires. Dans le même terminal, nous devrons utiliser la commande :
sudo apt install curl gnupg2 wget git
La prochaine étape va être installer NodeJS. Cet exemple que j'ai testé avec la version 14.x. Pour installer cette version, nous allons commencer par ajouter le référentiel nécessaire:
curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -
Alors nous pouvons installer NodeJS exécution de cette autre commande:
sudo apt install nodejs
Ionic nécessite Apache Cordova. Il convient de préciser qu'il s'agit d'un ensemble d'API d'appareils qui permettent au développeur d'applications mobiles, à l'aide de JavaScript, d'accéder aux fonctions natives de l'appareil, telles que la caméra ou l'accéléromètre.
Après avoir installé NodeJS, nous pouvons installer cordova fonctionnement:
sudo npm install -g cordova
À ce stade, nous pouvons passer à installer Ionic en utilisant npm:
sudo npm i -g @ionic/cli
Après l'installation, nous pouvons vérifier la version installée avec la commande:
ionic -v
Un exemple d'application
Pour savoir si l'installation a été faite correctement, on peut commencer par créer un petit exemple d'application. Pour ce faire, nous n'aurons qu'à exécutez la commande suivante créez l'exemple:
ionic start
Lors de l'exécution de cette commande vous devrez définir quel type de projet vous souhaitez créer. Pour cet exemple, j'ai choisi Angular. De plus, vous devrez donner un nom à votre projet et choisir le modèle. Tout cela, vous devrez sélectionner à partir d'un écran similaire au suivant :
Après la configuration, un dossier sera généré avec le nom que nous avons donné au projet. Accédez à ce dossier pour voir la structure du projet.
Pour voir le projet, dans le même terminal, nous allons exécuter cette autre commande :
ionic serve --host 0.0.0.0 --port 8000
Avec cette commande nous autoriserons n'importe quel hôte à accéder au port 8000.
Lorsque tout ce dont vous avez besoin est chargé, ouvrez votre navigateur Web et accédez à http://localhost:8000 o http://IP-de-tu-servidor:8000 et vous verrez la page d'exemple qui vient d'être créée.
Ionic est un framework moderne qui nous permet de développer des applications multiplateformes de manière simple et élégante. Il peut être obtenu plus d'informations et de documentation sur son installation et son fonctionnement dans le site web du projet.