◎ Formation complète Ionic ◎

➲ Section 1 : Decouverte d'Ionic

➔ Première vidéo d'introduction du framework Ionic.

➔ Afin de bien comprendre le fonctionnement d'Ionic, il est important de comprendre son écosystème, dans cette vidéo, je vous explique en quoi cela consiste.

➲ Section 2 : Installations nécessaires

⁂ IONIC - 2 Installation NodeJs

➔ Afin de pouvoir réaliser un projet, nous aurons besoin de NodeJs qui est le gestionnaire de packages le plus utilisé dans le monde.

⁂ IONIC - 2.2 Installation IONIC

➔ Maintenant que nous avons bien installé NodeJs, nous allons pouvoir, commencer à installer Ionic, dans le but de concevoir un premier projet.

➲ Section 3 : Réalisation d'un premier projet

⁂ IONIC - 3.1 Installer VsCode

➔ Afin de concevoir un projet, nous aurons besoin d'installer un éditeur de texte. Je vous propose d'installer "VisualStudioCode", cependant, vous pouvez très besoin utilisé un editeur de texte dans lequelle vous vous sentez à l'aise.

⁂ IONIC - 3.2 Réalisation d'un projet

➔ Maintenant que nous avons effectuer nos installations, nous pouvons commencer notre premier projet. Et quoi de mieux qu'un petit exercice d'interaction avec un bouton.

⁂ IONIC - 3.3 Introduction de projet to-do list

➔ Nous avons pu voir le contenu d'un projet Ionic et effectuer un exercice dans lequel nous avons interargit avec notre page. Maintenant, je vous propose un projet à réaliser d'une "to-do list", Donc dans un premier temps, nous passons en revue les détails de ce projet.

⁂ IONIC - 3.4 Structure du projet avec Angular

➔ Afin de réaliser notre projet, nous allons avoir besoin d'Angular. Il est important de vous faire une petite présentation, si vous avez des connaissances concernant cette techno, c'est évidemment un plus, mais je préfère partir du principe où vous n'avez aucune connaissance via Angular. Alors, un petit refresh parfois, cela fait du bien.

⁂ IONIC - 3.5 Réalisation d'une to do list (1)

⁂ IONIC - 3.6 Réalisation d'une to do list (2)

➔ Dans cette deuxième vidéo de projet, nous allons modifier notre page d'accueil, donc la "home page", que nous allons personnalisé par rapport aux fonctionnalités qu'on souhaite apportés. Il est d'autant plus simple et explicite de consulter la documentation qui nous indiquera toutes les réalisations possibles à l'aide d'Ionic.

⁂ IONIC - 3.7 Réalisation d'une to do list (3)

➔ Dans cette troisième vidéo de projet, nous allons dynamiser nos fonctionnalités appportés à l'aide de notre fichier TypeScipt comme le fait de pouvoir supprimer la tâche que nous avons ajouter.

⁂ IONIC - 3.8 Réalisation d'une to do list (4)

➔ Dans cette dernière vidéo de la "to-do list", nous allons nous pencher sur le style e notre projet. En soit le style n'est pas trop mal, je vous apporte quelques réajustement qui reste léger afin de rester neutre. Mais vous pouvez apportés une meilleur visibilité si vous le souhaitez, tout est relatif en fonction de vos préférences.

⁂ IONIC - 3.9 Quizz

➔ Maintenant que nous avons accumulés pas mal d'informations, quoi de mieux que de vous proposer un petit Quizz de niveau assez facile, vous pouvez vous amuser à répondre aux questions posées. Le but étant de faire une petit recapitulatif de nos avancées.

➲ Section 4 : Les components Ionic

⁂ IONIC Section 4 - 4.1 Création de notre premier Component

➔ Dans cette nouvelle section dédiés aux components Ionic, nous allons voir comment créer un component. Nous allons donc créer un nouveau projet vierge, et dans ce projet, nous allons créer un dossier dans lequel nous allons créer notre component et l'importer.

⁂ IONIC Section 4 - 4.2 Blocs de construction d'application de base

➔ Dans cette vidéo nous allons voir ensemble les blocs de construction. la gestion de l'état, les fonctionnalités natives de l'appareil par exemple par le biais d'un support diaporama.

⁂ IONIC Section 4 - 4.3 Description des composants Ionics

➔ Dans cette vidéo nous allons voir ensemble la description des composants par rapport à notre noyau Ionic. Dès lorsque nous l'insérons, nous avons des actions qui se réalisent, il est donc intéressant de savoir comment cela fonctionne.

⁂ IONIC Section 4 - 4.4 Configuration d'un projet Ionic sans Angular

➔ Afin de voir les fonctionnalités d'Ionic sans Angular, nous allons donc créer un projet vierge, et dans ce projet nous allons supprimer tous les fichiers et dossiers dans ce nouveau dossier projet vierge. Nous allons créer un fichier HTML et nous allons nous aider de la documentation pour insérer les liens permettants de relier note fichier HTML aux autres fichiers que nous allons créer ultérieurement.

⁂ IONIC Section 4 - 4.5 Présentation de la documentation IONIC

➔ S'il y a bien une ressource à ne pas négliger, c'est la documentation. Et pour le coup, cje peux vous dire qu'elle est très bien fournit, elle est très explicite lorsque vous avez besoin d'informations. Nous avons pour habitude de consulter internet afin de pouvoir cibler les problèmes rencontrés, les ajouts de fonctionnalités que l'on souhaite apportés ou autre, pourquoi pas. Mais si vous consultez la documentation dans le bon répertoire, vous finirez par avoir ce premier réflexe.

⁂ IONIC Section 4 - 4.6 Utilisation de components Ionic de base

➔ Dans cette vidéo, nous débutons notre deuxième réalisation de projet qui sera un "plan budgétaire". Dans un premier temps nous allons modifier la page HTML à l'aide de "ion-app" et "ion-toolbar" afin d'obtenir notre en-tête.

⁂ IONIC Section 4 - 4.7 Plus de components de base

➔ Pour notre projet, nous aurons besoin davantage de components comme "ion-input", "ion-label" ou bien d'autres, qui vont nous être utile afin de saisir les raisons de notre dépense aisni que le montant.

⁂ IONIC Section 4 - 4.8 Les catégories des components

➔ Dans cette vidéo nous allons voir ensemble les différentes catégories des components que nous pouvons manipuler lors de notre projet. Vous avez par exemple les "output", les "layout" et les "input" qui vous seront expliqué par le biais d'un support diaporama.

⁂ IONIC Section 4 - 4.9 Utilisation de ion-grid

➔ Nous allons pouvoir utiliser le component "ion-grid", qui va nous permettre de faire des grilles qui se manipule à l'aide de "ion-row" pour les rangés, "ion-col" pour les colonnes, dans laquelle vous pouvez personnalisés en définissant sa taille ou bien même son contenu.

⁂ IONIC Section 4 - 4.10 Ajout d'icônes et utilisation de slots

➔ Nous allons pouvoir insérer des boutons qui vont nous permettre d'insérer et de supprimer les dépenses. Nous allons également insérer des icônes correspondants à l'ajout et à la suppression.

⁂ IONIC Section 4 - 4.11 Utilisation attributs CSS

➔ Dans cette vidéo, nous pouvons ajouter un peu de style, encore une fois j'ajoute un style neutre afin de vous présenter un projet lisible, mais vous pouvez le personnalisé en fonction de vos préférences, il n'y a pas de soucis à ce sujet.

⁂ IONIC Section 4 - 4.12 Utiliser des éléments Ionic comme des éléments HTML "Normaux"

➔ Dans ce projet nous souhaitons apporté une logique, nous pourrons très bien le faire avec Angular, mais le but de cette section est de vous montrer que nous pouvons intégrer un projet Ionic sans l'aide d'Angular. Alors pour se faire, nous allons créer un fichier JavaScript dans lequel nous allons faire des console.log lors du clique sur nos boutons afin de tester l'ensemble de nos éléments.

⁂ IONIC Section 4 - 4.13 Validation de l'entrée utilisateur

➔ Il est temps de rendre nos boutons fonctionnels, donc on souhaite que, lorsqu'on clique sur "ajout des dépenses", la dépense soit boin ajouté et pris en compte par notre IDE. Donc nous allons ajouter notre propre logique dans notre fichier JavaScript dans cette vidéo.

⁂ IONIC Section 4 - 4.14 Création d'éléments Ionic par programmation

➔ Dans cette vidéo nous souhaitons structurer l'ensemble de nos éléments ajouté dans une liste. Et pour se faire, nous allons insérer le component "ion-list", et également intégrer notre logique dans notre fichier JavaScript. Le but étant d'avoir un historique de nos actions.

⁂ IONIC Section 4 - 4.15 Terminer la logique JavaScript de base

➔ A ce stade, nous pouvons finaliser notre logique concernant JavaScript. Comme par exemple le souhait le champs lorsque des données sont renseignées, sans pour autant avoir valider la dépense. Nous allons donc terminer cette logique afin de dynamiser intégralement notre projet.

⁂ IONIC Section 4 - 4.16 Finalisation de la mise en page

➔ Maintenant que nous avons finaliser le dynamisme de notre application, nous pouvons finaliser la mise en page de celle-ci. Donc nous pouvons modifier la personnalisation de nos colonnes, on peut centrer notre affichage, de mon coté je vous apporte des améliarations, mais vous pouvez aussi en apporter davantage si vous trouvez quelque chose de ludique par exemple dans la documentation, vous pouvez tester sans problème.

⁂ IONIC Section 4 - 4.17 Utilisation des components du contrôleur

➔ Les utilisations des components du controleur vont nous permettre, par exemple, d'afficher une pop-up, donc une alerte, demandant à l'utilisateur la confirmation de la suppression, par exemple, de la dépense.

⁂ IONIC Section 4 - 4.18 Pourquoi Angular ?

➔ Dans cette vidéo, il vous sera expliquer l'utilité d'Angular concernant sa logique complexe, sa gestion de l'état ou bien son routing.

➲ Section 5 : Angular + Ionic

⁂ IONIC Section 5 - 5.1 Angular + Ionic : Module d'introduction

➔ Dans cette vidéo d'introduction concerant la nouvelle section dédiée à Angular et Ionic, je vais vous expliquer les points que nous allons abordés tout au long de la section.

⁂ IONIC Section 5 - 5.2 Pourquoi utiliser Angular

➔ Cette vidéo est un repost de la 4.18, si jamais vous l'avez vu vous pouvez passé à la suivante.

⁂ IONIC Section 5 - 5.3 Création d'un nouveau projet Angular Ionic

➔ Pour commencer, nous allons générer un nouveau projet, donc nous allons effectuer les manipulations ensemble.

⁂ IONIC Section 5 - 5.4 Analyser le projet créé

➔ Maintenant que le projet est créer, nous allons pouvoir examiner l'architecture de notre dossier projet, ce qu'il contient, les fonctionnalités de chaque dossiers et fichiers.

⁂ IONIC Section 5 - 5.5 Comment Angular et Ionic fonctionnent ensemble ?

➔ Dans un premier temps, nous allons essayé de comprendre comment Ionic et Angular fonctionnent ensemble dans cette vidéo.

⁂ IONIC Section 5 - 5.6 Ajouter et charger une nouvelle page

➔ Il est temps d'effectuer un nouveau projet, je vous propose donc de faire une application qui sera uneliste de recettes. Cela permettra de jouer entre la page d'accueil donc la page des recettes et la page de détails de recettes lorsqu'on clique sur une recette dans la page d'acceuil. Donc nous allons générer un nouveau dossier et modifier le fichier "routing".

⁂ IONIC Section 5 - 5.7 Utilisation de fonctions Angular sur des components Ionic

➔ Suite et progression de notre application, concernant la page de nos recettes où nous allons insérer un tableau afin de regrouper toutes nos recettes à l'intérieur ainsi que les informations de ces recettes. On va également écrire du code Angular afin de pouvoir parcourir l'ensemble de nos recettes.

⁂ IONIC Section 5 - 5.8 Configurer des Routes Angular

➔ Suite à nos avancées, nous allons créer un nouveau dossier qui se chargera de stocker les informations concerant les détails de nos recettes. Il faudra donc lui indiquer le bon chemin pour aller piocher dans le bon fichier les détails de la recette.

⁂ IONIC Section 5 - 5.9 Gestion de l'état avec les services

➔ Dans cette vidéo, nous aurons besoin de générer un service Angular ce qui nous permettra de lier les détails de nos recettes à la recette que nous avons recherché.

⁂ IONIC Section 5 - 5.10 Extraction et affichage des données de paramètres d'itinéraire

➔ Dans cette vidéo, nous allons gérer l'extraction et l'affichage des données afin d'obtenir une seule recette sur notre page.

⁂ IONIC Section 5 - 5.11 Naviguer entre les pages

➔ Afin de naviguer entre nos pages, nous allons avoir besoin du "routerlink" qui permettra d'ajouter les components tout en ajoutant notre propre navigation. Nous allons donc intégrer notre logique afin de récupérer les éléments qui nous seront utiles pour naviguer entre nos pages.

⁂ IONIC Section 5 - 5.12 Suppression d'une recette

➔ Maintenant, nous allons insérer notre logique pour ajouter la fonctionnalité de suppression d'une recette en ajoutant notre icon de suppression. Nous allons donc ajouter la méthode nécessaire qui nous permettra de tester notre suppression.

⁂ IONIC Section 5 - 5.13 Debugging

➔ Si vous avez suivi l'intégralité des vidéos concernant ce projet, vous aez donc certainement un bug qui s'est pondérés. Je vous indique donc les détails afin de debbuger et donc de rendre notre application fonctionnelle.

⁂ IONIC Section 5 - 5.14 Explication debugging

➔ Maitnenant que nous avons debbuger, vous aimeriez peut-être savoir ce qu'il s'est passé ? Et bien dans cette vidéo, nous allons voir cela ensemble.

⁂ IONIC Section 5 - 5.15 Injecter des contrôleurs Ionic

➔ Notre application a besoin d'être finalisée, nous allons effectuer la finalisation de la mise en page. Nous souhaitons donc ajouter une alerte en indiquant un message de confirmation à l'utilisateur lorsqu'il souhaite supprimer une recette.

⁂ IONIC Section 5 - 5.16 Components Angular vs components Ionic

➔ Dans cette vidéo, nous allons comparer les compoents Angular par rapport aux components Ionic. Pour se faire, nous allons générer un component dans notre projet afin de voir s'il on obtient une différence entre les deux, dans notre application.

⁂ IONIC Section 5 - 5.17 Conclure

➔ La section prend fin, nous pouvons conclure concernant le projet que nous avons effectuer afin de nous préparer pour la prochaine section.

➲ Section 6 : Création d'applications natives avec Capacitor

⁂ IONIC Section 6 - 6.1 Création d'applications natives avec Capacitor : module d'introduction

➔ Courte vidéo d'introduction concernant notre nouvelle section intitulé : Création d'application natives avec Capacitor.

⁂ IONIC Section 6 - 6.2 Informations générales

➔ Avant de commencer, je vous renseigne quelques informations générales concernant les différents systèmes d'exploitations.

⁂ IONIC Section 6 - 6.3 Créer une application IOS

➔ C'est parti, nous pouvons commencer notre application, sachez que je travaille sous MacOS, je sortirai très prochainement une nouvelle vidéo pour la réalisation via Windows. En attendant , vous pouvez suivre cet exemple vous démontrant la logique à interprêter.

⁂ IONIC Section 6 - 6.4 Conclure

➔ Courte vidéo de conclusion suite à la réalisation de notre application via Capacitor.

Section 7 : Navigation et Routing dans les applications Ionic

⁂ IONIC Section 7 - 7.1 Navigation et Routing dans les applications Ionic module d’introduction

➔ Dans cette nouvelle section intitulée : navigation et routing dans les applications Ionic, nous allons voir les divers points que nous allons aborder durant cette section.

⁂ IONIC Section 7 - 7.2 Comment fonctionne le Routing dans une application Ionic + Angular ?

➔ Nous allons voir dans un premier temps comment le routing fonctionne dans notre application à l'aide d'un support diaporama expliquant la navigation entre toutes ces pages.

⁂ IONIC Section 7 - 7.3 Le caching d'une page Ionic et ses cycles de vie supplémentaires

➔ Dans cette vidéo je vous explique le concept de la navigation. Lors de cette section, nous souhaitons effectuer un nouveau projet, où nous allons concevoir une application style "AirBnB", de réservation de lieux. Je vous explique donc les détails des divers pages qui nous seront utiles.

⁂ IONIC Section 7 - 7.4 Planification du projet

➔ Nous allons donc renseigné un itinéraire afin d'indiquer la page liée à la bonne recette afin que lorsqu'on clique sur la recette, nous ayons les détails de cette dernière.

⁂ IONIC Section 7 - 7.5 Création de nos pages d'application

➔ Dans cette nouvelle vidéo, nous allons modifier notre projet que nous avons créer, nous allons apportés des modifications personnalisés par rapport à notre projet.

👍 Bon à savoir :

💻 Ionic est l’un des principaux environnements de développement d’applications mobiles hybrides utilisés par les entreprises. Il fonctionne comme un framework SDK open source conçu sur des langages de programmation. Ionic a acquis une très grande popularité en tant que langage de programmation ou framework basé sur Javascript, HTML 5, CSS 3, Apache Cordova et Angular.

📱 En tant que framework open source, Ionic a conquis le cœur des développeurs et des entrepreneurs en raison de la richesse de ses fonctionnalités. L’équipe de Ionic est bien déterminée à poursuivre son objectif de faciliter le développement mobile pour iOS et Android.