Ionic continue à évoluer et propose ainsi depuis 2020 sa version 5 baptisée Magnesium.
Fidèle à l'esprit "par la pratique", cette formation Ionic en ligne, vous permettra de en main cette v5, en créant une application de gestion des aliments de votre frigo.
Qu'allez-vous apprendre dans ce cours Ionic 5 par la Pratique ?
Sur le plan fonctionnel
- création d'un inventaire de votre frigidaire (ou d'un simple bac de congélation),
- ajout de nouveaux aliments,
- gestion de dates d'ajout et de dates de péremption,
- modification des intitulés et dates et suppression d'articles sortis (CRUD),
- calcul de date péremption imminente, configurable et dépendant du type d'aliment,
Sur le plan technique
- création et gestion d'onglets et de modales,
- création d'un référentiel (de type d'aliments et de durée de conservation),
- utilisation d'une base Firestore via la nouvelle version AngularFire,
- requêtage avancé de documents (where, orderBy) via AngularFire,
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.
C'est parti pour la création d'une application Ionic 5 qui sera utile tant, aux développeurs désireux de monter en compétences sur Ionic 5, qu'aux utilisateurs souhaitant réduire le gaspillage alimentaire 😉
Happy coding !
Table des matières de cette formation Ionic (durée : 4h16m)
-
Création et configuration du projet
- Demo de l'application gratuit 00:03:25
- Installation de Ionic gratuit 00:02:11
- Génération d'une nouvelle app Ionic gratuit 00:04:30
- Génération d'un build et ajout d'une plateforme 00:03:48
-
Gestion d'ajout d'aliments
- Création d'un Reactive Form d'ajout d'aliment 00:18:07
- Permettre de poster le formulaire seulement s'il est correctement rempli 00:01:42
- Création d'un service permettant de persister l'aliment posté 00:09:49
- Reset du formulaire après soumission 00:01:40
- Créer une interface 'Food' afin de typer fortement 00:05:24
-
Accès aux aliments préalablement ajoutés
- Lister tous les aliments 00:07:25
- Utiliser le lifecycle event ionViewWillEnter 00:03:26
-
Utilisation d'une base de donnée Firestore
- Créer un base de donnée Firestore 00:06:02
- Récupération l'objet de configuration Firestore et installer AngularFire 00:03:12
- Importer les modules propres à AngularFire 00:03:08
- Récupérer des documents depuis Firestore 00:12:13
- Se désabonner d'un flux avant la destruction d'un component 00:02:18
- Ajouter un aliment dans Firestore 00:05:13
- Montrer un spinner pendant l'ajout dans la base de données 00:05:40
- Centrer le spinner à l'aide de classes CSS 00:01:39
- Générer un ion-item par document en base 00:05:02
- Ajouter des event handlers pour edit et delete 00:02:37
- Supprimer un document de la base Firestore 00:13:01
- Récupérer un document par son id 00:02:36
- Créer une modale à l'aide de ModalController 00:10:45
- Méthode d'update et formulaire d'update 00:12:54
- Mettre à jour l'aliment dans Firestore 00:07:20
-
Communiquer avec l'utilisateur
- Afficher un toast à l'issue d'un update réussi 00:07:32
- Afficher une boîte de dialogue demandant confirmation avant suppression 00:08:41
-
Catégoriser les aliments
- Renommer food.model.ts en food.interface.ts 00:01:52
- Ajouter un référentiel "food-categories" et une interface Category 00:09:00
- Menu déroulant permettant de sélectionner une catégorie d'aliment 00:10:39
- Préselectionner le menu déroulant d'édition sur la catégorie courante 00:10:44
- Tester si une option de menu déroulant a été choisie 00:03:39
- Ordonner les documents en provenance de Firestore 00:05:11
-
Fonctionnalité de détection d'aliments à consommer rapidement
- Fonctionnalité de détection d'aliments à consommer rapidement 00:08:02
- Calculer la date maximale de conservation conseillée 00:11:36
- Récupérer la nourriture à manger avant 7 jours 00:17:36
- Afficher la nourriture à consommer avant x jours 00:06:52
- Fichiers sourcestélécharger
- Certificat
Formateur : Codeconcept
Avis des clients
Questions sur le tuto
-
Avec quelle version de logiciel ce tuto est-il compatible ?Ionic
-
Quel est le niveau requis pour suivre ce tuto ?débutant
-
faut-il connaître une version précédente de Ionic ?Non, les concepts propres à Ionic en général et à Ionic 5 en particuliers seront détaillés.
-
Faut-il connaître Angular ?C'est préférable car nous utilisons Ionic Angular dans cette formation.
