Ionic From Scratch Qu'est-ce que Ionic?

Êtes-vous intéressé par le codage d'applications mobiles, mais vous ne possédez pas les connaissances spécialisées ou l'expérience dans la programmation et le développement d'applications iOS et Android? Eh bien, laissez-moi vous présenter le cadre Ionic, qui vous permet d'écrire une application une fois et de la publier sur n'importe quelle plate-forme mobile..

Alors, quel est ionique?

En termes simples, Ionic est un framework gratuit qui vous permet de créer des applications mobiles pour iOS, Android et Windows Phone, le tout à partir d’une seule base de code. En d'autres termes, Ionic est un outil de développement mobile multiplate-forme..

Ionic a été fondé en 2012 par une start-up technologique appelée Drifty Co. Il s'agit désormais du meilleur framework open source au monde pour la création d'applications mobiles multiplates-formes (hybrides).. 

Comment fonctionne ionique

Ionic vous permet de développer des applications mobiles utilisant les technologies Web et des langages tels que HTML, CSS, JavaScript, Angular et TypeScript. Par conséquent, considérons Ionic comme un kit de développement logiciel frontal permettant de créer des applications hybrides mobiles. En tant que tel, Ionic fournit un ensemble de composants qui imitent l'apparence, la convivialité et les fonctionnalités natives de chaque plate-forme mobile. Des exemples de ces composants incluent des boutons, des onglets, des menus, des listes, des cartes, des modaux, etc..

Outre ces composants qui fournissent le style et le "look and feel" des applications mobiles, Ionic fournit également le comportements comme la navigation et les gestes, par exemple, les événements de balayage, de rotation et de pincement, pour n'en nommer que quelques-uns. Ionic comprend également une collection d'icônes appelées Ionicons. Tous ces composants sont des éléments que vous utilisez pour créer vos applications Ionic, avec les plugins Cordova et PhoneGap, que nous aborderons dans quelques instants..

Comment est-il difficile de commencer?

Ce n'est vraiment pas difficile de commencer à utiliser Ionic. Ionic est livré avec des outils pour vous aider à configurer, construire et exécuter votre projet Ionic. Il s'agit de l'interface de ligne de commande (CLI) Ionic. Toutes les bibliothèques frontales et la CLI sont des projets à code source ouvert. Vous pouvez donc les utiliser gratuitement lors du développement de vos applications.. 

Pourquoi utiliser Ionic?

Il est difficile de développer des applications natives. Pour développer uniquement des applications Android, vous devez apprendre à utiliser l'IDE (environnement de développement intégré) d'Android Studio et connaître le langage de programmation Java ou Kotlin. Vous devez également comprendre les concepts spécifiques à Android, tels que les activités et les intentions, et créer votre interface utilisateur avec une syntaxe XML personnalisée.. 

Pour iOS, vous devez utiliser l'IDE Xcode (uniquement disponible pour Mac), ainsi que les langages de programmation Objective-C ou Swift d'Apple. Sans parler de tous les nombreux SDK et concepts spécifiques au Mac! Et en plus de cela, si vous décidez également de construire pour Windows Phone, vous devrez également apprendre à utiliser l'EDI de Visual Studio, ainsi qu'à écrire du code en C # ou Visual Basic, etc.

Donc, si vous souhaitez envoyer votre application sur plusieurs plates-formes, vous devrez réécrire la même fonctionnalité dans trois langues différentes! Développer des applications de cette manière nécessite non seulement l'apprentissage de nombreux langages et outils, mais également la recodification de la même logique pour deux ou trois langages de programmation et plateformes mobiles différents. Et le même dédoublement d'efforts est requis lorsque vous devez apporter des modifications. Développer des applications nativement prend beaucoup de temps, d'argent et de compétences. Donc, ne serait-il pas formidable d'avoir une base de code unique qui fonctionne pour les trois plates-formes? 

C'est là qu'Ionic entre en jeu!

Applications hybrides

Les applications hybrides tirent parti des bibliothèques ou des composants de l'interface utilisateur de chaque plate-forme tels que des boutons, des listes, etc. L'un de ces composants est webview, une vue qui affiche des pages Web. Il s'agit d'un composant d'application mobile natif pouvant exécuter une application Web. Vous pouvez donc écrire une application en HTML, CSS et JavaScript et utiliser une vue Web pour l'afficher..

Elles sont appelées applications hybrides car elles utilisent un mélange de code natif et HTML, CSS et JavaScript. Il existe de nombreux frameworks qui facilitent la création d'une application qui exécute une application Web dans une vue Web. Le plus populaire est Apache Cordova, généralement accessible via sa distribution la plus populaire: PhoneGap. Cordova est un projet à source ouverte et PhoneGap, propriété d’Adobe, est basé sur Cordova et fournit des fonctionnalités et des services supplémentaires..

Ionic utilise le projet Apache Cordova pour créer et exécuter vos applications en tant qu'applications natives..

Ionic et Cordova

Cordova agit comme un pont vers le code natif pour Ionic. Il compile votre HTML, JavaScript et CSS dans des applications natives, leur permettant de s'exécuter de manière native sur les appareils Android, iOS et Windows Phone..

Si vous écrivez simplement une application Web de la même manière que vous écrivez un site Web et que vous la personnalisez simplement comme une application mobile avec Cordova, le résultat final sera une application qui ressemble à un site Web. Les utilisateurs remarqueront que le style et l'interaction des utilisateurs sont différents d'une application mobile "normale".. 

C’est la pièce manquante pour laquelle Ionic offre un aspect et une sensation natifs. Ionic inclut une collection de composants ayant l'aspect et la même sensation que les composants natifs, utilisant les styles et les comportements appropriés pour chaque plate-forme, comme indiqué précédemment. Vous pouvez donc écrire votre application en HTML, CSS et JavaScript, mais votre application ressemblera à une application native plutôt qu'à une page Web..

Cordova propose également plus de 200 plug-ins disponibles en tant que modules complémentaires que vous pouvez utiliser dans vos projets Ionic, ce qui vous permet d'accéder aux API de périphérique natif telles que l'appareil photo, la géolocalisation, le gyroscope, etc. du téléphone. Vous pouvez les utiliser pour améliorer les fonctionnalités de votre application.. 

Ionique et angulaire

Il est fort probable que vous ne souhaitiez pas créer vos applications Web en utilisant uniquement JavaScript, HTML et CSS à la vanille. Au lieu de cela, vous utiliseriez probablement un framework Web comme Angular. Angular est un framework extrêmement populaire qui facilite la création d'applications Web réactives. Et maintenant, Ionic apporte la puissance du codage angulaire au mobile! 

Ionic permet d’utiliser le framework Angular pour écrire des applications mobiles en livrant une riche bibliothèque de composants ainsi que l’outil permettant de compiler du code Angular TypeScript en un ensemble de JavaScript, HTML et CSS à la vanille, qu’Apache Cordova peut ensuite intégrer à un application mobile native.

Un rapide diagramme illustrant ce qui précède ressemble à ceci:

Conclusion

Pour tous ceux qui cherchent à se lancer dans le développement d'applications mobiles, je vous recommande vivement et vous encourage à essayer Ionic, car il vous offre la possibilité de développer des applications mobiles multiplates-formes, le tout à partir d'une seule base de code..

Le cadre est bien pris en charge et a continué à se développer et à se développer au fil des ans, et il continue à aller de mieux en mieux.