IONIC FRAMEWORK POUR DÉBUTANT

IONIC FRAMEWORK POUR DÉBUTANT

Commencer à développer des applications mobile avec Ionic et Angular. Réalisation d’une application TODO LIST

Plan détaillé:

Avant-propos

Qui suis-je ?

Si vous lisez ce livre, c’est que nous avons deux choses en commun : Vous sommes intéressé par l’informatique, et vous voulez apprendre à créer vos propres applications. Quand je dis en commun, je parle de vous et moi car mois aussi j’ai toujours aimé l’informatique et particulièrement le développement d’application mobile.

Je suis NTONGA Hervé Yves, Ingénieur réseau et télécommunication à l'EPSIEL (École Polyvalente supérieur d’informatique et d'électronique - Fes Maroc ). Je suis entrepreneur dans le domaine du digital et j’ai à mon actif la création de l’entreprise Vyconsulting, une entreprise qui accompagnent les entrepreneurs et les entreprise à lancer leur application mobiles.

Depuis 2017, je suis donc développeur mobiles dans ma propre entreprise et je réalise toutes mes applications mobiles avec le Framework Ionic. J’ai choisi ce Framework car il me permettais de démarrer avec mes connaissances de base en HTML, CSS et Javascript. Dans ce livre je vais donc vous aider à prendre en main cette technologie que je trouve vraiment passionnante.

Qu’est ce que vous allez apprendre

Dans ce livre, nous allons créer une application TODO liste. Une application qui permet de planifier ma journée. Grâce à ce projet je vais vous montrer comment :

Créer un projet Ionic Comment enrichir son interface avec des composant ionic Comment manipuler les données Comment voir le rendu de votre application sur le web.

Pour suivre au mieux ce cours il est recommandé d’avoir une connection internet car certaines commandes que nous allons taper pour mettre en place l'environnement de développement et aussi pour créer un projet nécessitent des dépendances en ligne.

Comment lire ce livre

Vous pouvez lire ce livre de deux manière :

En lisant la notion jusqu'à la fin et ensuite écrire le code ou bien vous pouvez faire les deux simultanément. Personnellement je vous conseillerai de lire le cours tout en pratiquant cela vous permettra certainement de mieux comprendre les différentes notions.

Les prés-requis

Pour cette technologie des compétence en HTML, CSS , TYPESCRIPT (JS) et Angular son requisent. Il ne s’agit pas d’être un expert dans ces notions, mais d’avoir des notion de base. Mais si vous n’avez pas ces notions, pas grave je vais m’efforcer à vous donner ce qu’il faut pour être efficace dans ce cours.

Nous allons donc partir de zéro.

Remerciement

Je tiens à remercier la communauté facebook développeurs circle de Douala de m’avoir accompagner tout au long de ce projet et surtout d’avoir permi que ce projet voit le jours. Je dis donc merci à :

A la découverte de Ionic - Angular

C’est quoi Ionic ?

Sur le marché des smartphones, il y a trois grands concurrents en ce qui concerne les systèmes d'exploitation : Apple avec iOS, Google avec Android, et Microsoft avec Windows. Chaque système comporte ses propres capacités, ses propres défauts, et surtout, son propre système d'applications : pour iOS, il y a les langages Objective-C et Swift ; pour Android, on code en Java ; pour Windows, on utilise habituellement le C# et le XAML. Pendant longtemps, le résultat de cette concurrence était que si on voulait développer une application pour les trois plateformes, il fallait la coder trois fois, en trois langages et de trois manières différentes. L'arrivée du framework Cordova a tout changé. Ce framework a permis aux développeurs web de créer des applications multiplateformes avec une seule base de code en HTML, CSS et JavaScript, donnant accès aux différents API natifs des téléphones : l'appareil photo ou la géolocalisation, par exemple. Ionic vient s'inscrire par-dessus Cordova, permettant l'utilisation d'Angular, avec tous ses avantages, et intégrant beaucoup de components très utiles pour l'UX : Ionic vous permet de créer des applications dynamiques multiplateformes avec vos connaissances en Angular !

Pourquoi choisir Ionic ?

Pour répondre à cette question je vais vous donner les raison qui ont fortement favorisées mon choix pour cette technologie :

Ionic ne nécessite pas l’apprentissage de nouveaux langage de programmation pour sa prise en main. Il s'appuie principalement sur l’existant. Ionic est un framework qui est utilisé par une grande communauté de développeur. Ionic est une framework en constante évolution et se position aujourd’hui comme le leader des framework de développement d’application mobile cross platform.

Ionic est donc adapter pour des personnes qui comme moi, on appris le développement en autodidacte.

Installation de l'environnement de développement

Installation de Ionic

Après avoir vu ce que c’est que Ionic, nous allons voir comment faire pour l'installer. Le processus d’installation de ionic sur windows et sur mac os ne diffère pas tellement. Il y’a juste quelques spécificités à prendre en considération si nous sommes sur windows ou sur mac os.

Pour installation de ionic nous avons premièrement besoin du gestionnaire de package de node ( npm). Pour cela je vous invite à aller sur le site de nodejs dans la section download et télécharger la version de node correspondant à votre système d’exploitation.

Pour le choix de la version de node à installer, je vous invite à choisir la version LTS qui est la version la plus stable.

Dans le cas ou vous avez déjà node installer, vérifier la version en tapant node -v

Pour avoir une version récente, faite une mise en tapant npm install -g npm sur la CMD.

Maintenant que nous avons nodejs, nous pouvons utiliser son gestionnaire de package (npm) pour installer ionic.

npm install -g @ionic/cli

Sur mac os et sur linux vous devez précéder la commande du mot clé sudo pour l’exécuter en tant que superutilisateur.

sudo npm install -g @ionic/cli

Pour vérifier si tout c’est bien passé, taper la commande suivant :

ionic -v

Vous devriez alors obtenir le résultat suivant sur votre terminal

Si vous avez ce résultat comme moi, alors bravo ! vous avez fini l’installation de ionic. Pour le choix de l’IDE pour le développement, je vous laisse le choix d’utiliser votre éditeur préféré.

Pour moi, je vais utiliser Vs code. C’est un IDE complet et vraiment adapté pour les développeur. Il est également très recommandée par les développeurs. Vous pouvez l’avoir gratuitement sur le site de vscode dans la section download.

Les commandes console avec Ionic

Bien, nous avons fini avec la mise en place de notre environnement de développement. Nous pouvons donc nous lancer sur notre projet. Je vous rappel que nous allons créer une application TODO LIST tout au long de ce cours. Mais avant laissez moi vous présenter la liste des commandes que vous aurez régulièrement à utiliser.

ionic start todo tabs Permet de créer une nouvelle application. todo dans la commande, c’est le nom de l’application et tabs c’est le type. ionic serve

Permet de visualiser le rendu de l’application sur votre navigateur préféré. ionic generate page Permettre de créer une nouvelle page de votre application.

Débogage avec Google Chrome.

Prise en main de Ionic - Angular

Dans cette partie, nous allons entrer dans le vif du sujet en créant notre première application. Déjà essayons de présenter le cahier de charge de l’application :

Tâches :

Page principale : Elle liste les différentes tâches Création de la fonctionnalité d’ajout des tâches. Pour mettre à l’utilisateur d’ajouter une nouvelle tâche à faire Page secondaire : Permet d’afficher la description les informations spécifique d’une tâche Suppression et mise à jour d’une tâche

Cette application n’est pas grande mais elle vous permettra d’apprendre énormément de choses.

Ceci est le résultat que nous allons essayer d’obtenir.

Création de votre première application

Voilà ! Nous y sommes en fin. Nous allons pouvoir commencer à créer notre application mobile. Pour ce faire, placez vous dans votre dossier de travail et taper la commande

ionic start todo

Après avoir taper la commande vous allez obtenir le résultat suivant. Dans cette partie il est question de choisir le type de projet ionic que vous voulez, Vous avez le choix entre ionic Angular et ionic react.

Nous allons choisir ionic angular donc à cette étape taper sur entrer.

Après avoir choisi le framework que nous vous voulez utiliser, il vous sera demandé de choisir le type de template.

Nous allons choisir la template Blank parmi la liste des templates. Ce template nous permet de partir de zéro. Le prochain arrêté nous demande de choisir si nous voulons faire tourner ionic sur cordova ou bien capacitor. Nous allons choisir cordova en tapant n et en appuyant sur la touche entrer. Ce choix dans notre cas est d’ordre pédagogique.

Après cette étape, nous allons laisser ionic finir la création de notre projet et juste après nous allons ouvrir dans notre IDE préféré et voir la structure du projet ionic.

Si vous avez obtenu le résultat ci-dessus cela signifie que vous projet à été créer avec succès. Ouvrez le dans votre éditeur et voyons comment il est structuré

Architecture d’un projet ionic

Une fois qu'une application est créée par l'Ionic CLI, l'étape suivante consiste à commencer à créer des fonctionnalités et des composants. La majorité de l'application sera développée dans le répertoire src/app/.

Le répertoire src/ contient des éléments tels que le fichier index.html, des fichiers de configuration pour les tests, un dossier de ressources pour les images et le répertoire /app principal pour le code de l'application.

Le répertoire src/app/ contient le composant et le module d'application racine ainsi que des répertoires supplémentaires qui contiennent des fonctionnalités d'application telles que des pages, des composants, des services, etc.

Visualiser mon application

Voila! maintenant que nous avons vu comment l’application est structurée, je vous invite à démarrer votre application sur chrome afin de commencer son développement

Pour ce faire, positionnez vous dans le projet avec la ligne de commande du CMD ou du Terminal en utilisant la commande cd et lorsque vous êtes dans le projet Taper la commande

ionic serve

Après quelques minutes, vous devriez obtenir le résultat suivant sur votre CMD ou terminal et l’application devrait se lancer automatique sur votre navigateur par défaut.

Vous allez toujours laisser cette interface ouverte pour permettre au serveur local d’actualiser automatiquement le rendu de l’application à chaque fois que vous faite une modification.

Si vous voulez arrêter le développement pour recommencer plus tard, il suffit de couper le server avec la combinaison ctrl+c sur windows et command + c sur mac os.

Sur le navigateur vous avez certainement l’application qui s’affiche. Ouvrez l’outils de développement de chrome afin d’obtenir quelque chose de semblable à ça :

Voilà nous avons fini avec la création d’un projet ionic. Pour mieux avancer dans ce cours faisons un petite pause pour que je puisse vous montrer les différents composants que nous allons utiliser.

Les composants ionic

Notre application aura besoin des plusieurs composants pour pouvoir fonctionner. Pour la plupart des ces composants nous n’allons pas les créer car ionic à déjà fait ce boulot pour nous. Il suffit donc de nous rendre sur le site officiel de ionic, dans la section developers et dans la sous section ui component

Lorsque vous cliquer sur UI components, vous verrez alors apparaître une page contenant tous les différent composant ionic que nous allons utiliser dans ce projet.

Dans la suite du document lorsqu’il faudra ajouter un composant, n’ayez donc pas honte à copier le code du composant que vous voulez utiliser directement sur le site ionic comme indiqué sur l’image ci-dessous.

Ceci s’affiche lorsque vous sélectionnez ion-button dans la colonne des composant.

Donc la documentation de ionic sera votre meilleur allié si vous apprenez à l’utiliser. Prenez donc un peu de temps de découvrir et prendre en main cette documentation.

Notion de page

Une application ionic est un ensemble de page permettant d’afficher des information à l’utilisateur. Dans notre cas actuelle, notre application est composée d’une seule page, la page Home. Vous pouvez voir ça en navigant sur l’arborescence de notre projet :

src/app/pages

dans chaque page, vous avez plusieurs fichier. Nous allons dans un premier temps nous intéresser uniquement à trois de ces fichier. Dans le cas de la page home, se sont les fichiers:

home.page.html qui permet de gérer la vue de la page home.page.scss pour styliser la vue home.page.ts pour coder la logique.

Chaque page de ionic contient au minimum ces trois fichiers.

Notre page home est la page qui est affiché lors du démarrage de l’application. Elle ressemble à ça pour le moment.

Essayons de modifier cette page de manière à obtenir la première page de notre cahier de charge. Pour ce faire voyons comment est structuré la vue de notre page home. Pour cela ouvrons le fichier home/home.page.html

Les vues des différentes pages ionic sont divisées en deux parties. La partie header (ion-header) qui porte le titre de la page et la partie content (ion-content) qui est le corps de la page.

Pour le moment faisons le ménage sur notre page en supprimant les information qui ne nous serve à rien. Essayez d’obtenir le code suivant :

Changeons le titre de notre page de manière à ce qu’il soit significatif pour nous. Pour cela modifions le contenu de ion-title dans la partie header de notre page.

En enregistrant les modifications nous obtenons les rendu suivant.

Nous allons maintenant essayer de gérer l’affichage de la liste des tâches. Pour cela nous allons utiliser les composant ionic suivant :

ionic-list ion-item ion-icon ion-checkbox

Modifions donc le contenu de notre page en ajoutant les éléments ion-list et ion-item dans le corps de notre page html comme ceci :

dans ce code, chaque tâche est représentées par un ion-item et est constituée d’un titre et d’une petite description. Pour créer notre liste des tâches, nous avons utilisé le component ion-list. Le résultat de cette manipulation est la suivante :

Notre application commence à prendre forme. Nous allons maintenant essayer d’ajouter un ion-checkbox pour marquer les différentes tâches achevées.

Le code de votre ion-content devra alors ressembler à ça.

Parlons un peu des attributs de notre ion-checkbox. Nous avons l’attribut slot qui permet d’aligner ion-checkbox et la div sur la même ligne dans le même ion-item. Cette attribut est propre à l'élément ion-item et s’applique aux enfants de cette élément. Nous avons slot=”start” et slot=”end” pour positionner un élément enfant de ion-item respectivement au début ou à la fin.

L’attribut checked=”false” est propre à l’élément ion-checkbox. Je vous conseille de lire à documentation de cette élément dans le doc de ionic

Le résultat de cette modification est la suivante :

Faisons un peu de css

Dans le résultat précédent vous constater les composant ionic on déjà des propriétés css appliquées et applicables par défaut. Si vous voulez connaitre ces différents styles applicables, aller dans document du composant spécifique dans la section css custom properties

Les styles ci-dessus sont applicables à l’élément ion-checkbox. Si vous avez déjà fait du css leur utilisation ne vous posera aucun problème.

Nous allons donc essayer de donner plus de style à notre page en effectuant la tâche suivante :

Diminuer la marge entre le titre de la tâche et sa description Pour ce faire je vous invite à ouvrir le fichier home.page.scss et appliquer une marge supérieur négative.

S”il y’a déjà du code dans ce fichier css je vous invite à le supprimer complètement. Le résultat de cette modification est la suivant :

Pour le css je vous invite vivement à fonctionner comment avec les sites statiques (html - css). Pour le différents composants ionic, je vous invite à lire la documentation comme je vous ai montré plus haut.

Manipulation des données

Bien maintenant que nous savons comment comment modifier le DOM de notre page nous allons voir comment manipuler les donnée dans une page.

Jusqu’ici nous avons pas encore eu à exploiter la puissance de Angular. Vous vous souvenez, nous travaillons avec ionic-angular. Nous allons donc utiliser la puissance de angular pour faire passsage de données entre la vue (home.page.html) et le typescript (home.page.ts)

Pour cela nous allons déclarer notre une variable title contenant le titre de notre application, et allons l’afficher à la place de celui que nous avons mis de manière statique dans la vue.

Nous pouvons remarquer qu’une le fichier home.page.ts contient une class typescript. Nous avons donc déclarer la variable de manière globale à notre classe.

Essayons maintenant de voir comment cette variable sera afficher sur le notre vue.

Voici à quoi ressemble le code du header de notre page HTML. Nous avons remplacé notre titre par la variable que nous avons créer dans notre typescript . Pour ce faire, nous avons mis le nom de la variable entre deux crochet. Ceci est possible grâce à Angular et va permettre d’afficher le contenu de cette variable à l’utilisateur.

Ici l’information va du typescript vers la vue . En actualisant la page on obtient le résultat principale.

Nous allons utiliser ce que nous avons eu à faire pour gérer notre liste de tâche. Pour le moment les différentes tâches sont codées en dure dans le html ce qui n’est pas normal. Nous devons créer notre liste de tâche depuis notre typescript et l’afficher dans notre DOM.

Pour ce faire nous allons utiliser une directive de Angular pour pouvoir boucler le table des tâches et afficher chaque élément du table. Cette directive c’est la directive ngFor.

Veillons voir tout ça en code.

Dans notre ts nous avons pris la peine de déclarer notre liste de tâches. Dans le code ci-dessous avons utiliser la directive ngFor pour parcourir la liste des tâches et les afficher.

Voilà, toutes nos données viennent du typescript et sont uniquement affichées au niveau du DOM html. Le résultat côté utilisateur reste la même mais notre code est devenu beaucoup moins encombré coté HTML.

Création d’une nouvelle page

Voilà nous avons déjà notre page permettant de lister les différentes tâches à effectuer. Ces tâches, nous les avons listé sur la HomePage.

La page que nous allons maintenant créée permettra de voir les détails de chaque tâche de notre toDoList.

Navigation entre les pages

Création d’une application basique

Passer les paramètres entre différents pages Utilisation d’un service Utilisation du modal Utilisation de l’alerte Envoyer votre projet sur Github

Prochaine étape.

Présentation du livre niveau avancé Ce que vous allez apprendre dans ce livre