Cinq mini-projets pour se perfectionner sur Angular 2+
mettre en oeuvre vos connaissances Angular 2+ dans divers contextes métier et technique
Une fois les bases d'Angular 2 acquises, grâce à Angular 2 par la pratique par exemple :) , il peut être intéressant de s'atteler à divers projets qui vous permettront de mettre en oeuvre vos connaissances en Angular 2 dans divers contextes métiers et techniques. C'est ce que vous permettra de faire "Cinq mini-projets pour se perfectionner en Angular 2+".
Au programme :
projet 1 - Weekplan (planifier son emploi du temps en tâches via glisser/déplacer, CRUD dans localStorage)
projet 2 - YT Search & Play (créer un projet MEAN, requéter l'API REST Youtube, lire une vidéo du résultat dans un player ergnonomique, persister les favoris dans MongoDB via Mongoose)
projet 3 - Foodeval (application Ionic 3, Firebase et Angularfire 5.0 utilisant le matériel d'un device afin de connaitre en détail les ingrédients d'aliments vendus en grande surface, de persister en base vos aliments favoris, puis de se constituer des menus)
projet 4 - Parios (app permettant de parier un coup à boire ou des croissants, Angular 6 / PWA) - date estimée de mise en ligne mai 2018
projet 5 - Avidelecture (avis de lecture en CRUD dans appli MEAN Angular 6) - date estimée de mise en ligne juin 2018
Votre formateur
Développeur web depuis 2003 dans des entreprises clientes publiques (SNCF, URSSAF, EDF...) et privées (Iron Mountain, Jouve, CDiscount...), dirigeant de la société rennaise Code Concept spécialisée en formation JavaScript Front, Back et mobiles hybrides, Samir Medjdoub a eu comme comme fil conducteur la conscience qu’il est bien plus facile de rester sur la vague que de tenter de remonter après s’être laissé submerger. Fidèle à cette stratégie, il a ainsi pris la vague Angular 2 dès les versions bêta en 2015, celle de Node.js il y a sept années de cela et a eu la chance d'évoluer dans des sociétés qui avaient été parmi les premières en France à adopter MongoDB, conjointement aux bases de données relationnelles. Il a toujours cru que comparaison était raison et a porté une égale attention à React et Redux dès 2015, puis Vue.js en 2016. Meteor et désormais Svelte.js sont les outsiders qui retiennent régulièrement son attention.
Les développeuses et développeurs JavaScript (Front, Back ou Fullstack !) ont de très beaux jours devant eux : les formations de la société Code Concept vous aideront à investir efficacement dans les frameworks, plateformes et librairies JavaScript qui vous ouvriront de belles opportunités en 2024 !
Programme de la formation
Projet 1 - Weekplan (planifier son emploi du temps en tâches, CRUD dans localStorage)
Valable dans
jours
jours
après votre inscription
-
PrévisualiserPrésentation du projet (1:20)
-
PrévisualiserCréer notre projet à l'aide d'angular-cli (3:46)
-
CommencerAjout de (twitter) bootstrap (1:01)
-
CommencerArchitecture basée sur container components et presentation components (6:49)
-
CommencerCréation du module "grid" (4:53)
-
CommencerInstallation de la librairie de drag & drop "Dragula" (3:36)
-
CommencerImportation du Module Dragula (4:43)
-
CommencerImplémentation du drag & drop à partir de données en dur (12:49)
-
CommencerS'abonner aux événements drag, drop, over, out (10:20)
-
CommencerCréer le type "Task" (2:11)
-
CommencerCréer le custom service crud-localstorage (8:46)
-
CommencerConsommer le service crud-localstorage (3:14)
-
CommencerPasser des données de app.component vers son enfant grid.component via un @Input (3:47)
-
CommencerConsommation par Dragula des données passées en input (0:44)
-
CommencerCréation du presentation component add-form.component (12:17)
-
CommencerCréer et émettre un custom event (7:15)
-
CommencerTyper fortement l'event reçu par le container component (0:58)
-
CommencerPersister les nouvelles tâches postées via le formulaire dans localStorage (8:54)
-
CommencerPersister la position des tâches (14:14)
Projet 2 - YT Search & Play (créer un projet MEAN, requéter l'API REST Youtube, lire une vidéo du résultat dans un player ergonomique, persister les favoris dans MongoDB via Mongoose)
Valable dans
jours
jours
après votre inscription
-
PrévisualiserPrésentation du projet (3:23)
-
CommencerInitialisation de la partie front-end à l’aide d’angular-cli (4:36)
-
CommencerInitialisation de la partie back-end Node / Express (2:45)
-
CommencerCréation du serveur Express (6:17)
-
CommencerGénération du répertoire ‘dist’ et envoi sous forme de fichiers statiques par Express (5:10)
-
CommencerCréer une API à l'aide d'Express (8:11)
-
CommencerCréation de notre base MongoDB (7:00)
-
CommencerCréation d’un model Mongoose (10:28)
-
CommencerUtiliser notre model Mongoose afin de lire dans mLab depuis notre API (4:47)
-
CommencerGénération du service Angular : FavoriteService (5:53)
-
CommencerGénération du component Angular 2 favorite-list (7:05)
-
CommencerExportation de nos constantes Node (3:14)
-
CommencerGénération d'une page d'accueil (1:29)
-
CommencerCréation du menu de navigation (6:21)
-
CommencerCréation de nos routes (4:24)
-
CommencerCréation de notre component de recherche Youtube : youtube-search.component (7:43)
-
CommencerTransformation de notre champ texte de recherche en flux de données RxJS (7:52)
-
CommencerCréation du service de requétage Youtube : youtube.service (5:09)
-
CommencerUtilisation de notre service YoutubeService (4:23)
-
CommencerL'opérateur debounceTime() pour effectuer une requête après l'arrêt de saisies utilisateur trop rapprochées (2:42)
-
CommencerL'opérateur switchMap() pour éviter un subscribe dans un subscribe (7:32)
-
CommencerAfficher les résultats (9:28)
-
CommencerCréation du lecteur vidéo (9:36)
-
CommencerUtilisation du module externe angular2-modal (11:46)
-
CommencerGestion des événements d'une boîte de dialogue créée via angular-modal (6:13)
-
CommencerEnrichir le service Angular favorite.service.ts d'une méthode createFavorite(video) (6:56)
-
CommencerConsommation de createFavorite(video) depuis youtube-search.component.ts (5:07)
-
CommencerInsérer un favori dans MongoDB depuis Node.js via Mongoose (8:45)
-
CommencerRécupérer le contenu posté à l'aide de body-parser (8:28)
-
CommencerAfficher les favoris (5:50)
-
CommencerGérer la suppression d'un favori (7:54)
-
CommencerRépercuter la suppression du favori côté Front (4:31)
-
CommencerDernière mise à jour lundi 17 avril 2017.
projet 3 - Foodeval (application Ionic 3 utilisant le matériel d'un device afin de connaitre les ingrédients d'aliments puis de se constituer des menus)
Valable dans
jours
jours
après votre inscription
-
PrévisualiserGénération du projet (9:07)
-
CommencerAjouter un bouton de menu (16:36)
-
CommencerPersonnaliser le thème de votre application (5:00)
-
CommencerInstallation du plugin cordova barcode-scanner (4:26)
-
CommencerAjouter et personnaliser un FAB (Floating Action Button) (7:17)
-
CommencerImports relatifs à Barcode Scanner (4:49)
-
CommencerImplémenter le scan (9:18)
-
CommencerTest sur un vrai device à l'aide de Ionic DevApp (5:23)
-
CommencerTest sur un vrai device à l'aide de Ionic DevApp (démo) (3:11)
-
Commencerasync et await (ES 7) (1:57)
-
CommencerJSON pipe (1:01)
-
CommencerRequêter une API REST (10:30)
-
CommencerAfficher les données de l'API dans l'application Ionic (7:19)
-
CommencerFirebase et AngularFire 2 (8:17)
-
CommencerFirebase et AngularFire : préparation (5:51)
-
CommencerPersister dans Firebase (9:09)
-
CommencerDernière mise à jour : lundi 27 novembre 2017
FAQ (questions fréquentes)
Quand ce cours sera-t-il en ligne ?
Le projet numéro 1 - un gestionnaire de temps mettant en oeuvre Angular 2 / localStorage / Dragula - a été mis en ligne de mi-janvier 2017 à fin février 2017. Le projet 2 - du full-stack JavaScript en MEAN avec Angular 2, Node et MongoDB - a été mis en ligne durant les mois de février et mars 2017. Le projet 3 débutera fin novembre 2017 et vous permettra de créer une application mobile Ionic 3 basée sur Angular 5.
Pourquoi ne pas tout publier d'un coup ?
Car cela laisse de la latitude pour suivre les évolutions d'Angular et de Ionic. Ainsi, Ionic 2 étant passé en version finale le 26 janvier 2017 puis ayant été rapidement suivi de Ionic 3, le projet 3 consistera à créer une application Ionic 3, ce qui n'était pas prévu tant que Ionic 2 était en RC 5. En revanche, une fois que le tournage d'un projet a démarré, il est figé sur les technos et versions annoncées. C'est le bon dosage entre évolutivité et productivité.
En commandant aujourd'hui, aurai-je accès aux projets à venir ?
Oui ! Le prix inclut 5 projets.
Quel est le pré requis ?
Outre une connaissance des fondamentaux du HTML, CSS et JavaScript, il faut être déjà initié à Angular 2 : savoir ce que sont modules, components, services, decorators, directives. Notre cours "Angular 2 par la pratique" vous permettra d'avoir le niveau requis.
Et si le cours ne correspond pas à mes attentes, puis-je être remboursé ?
Oui, vous disposez de 30 jours d'essai durant lesquels vous pouvez être remboursé.
Ce cours sera-t-il proposé sur d'autres plateformes ?
Non, c'est une exclusivité codeconcept.teachable.com
Est-il possible de faire des suggestions pour un projet pas encore commencé ?
Bien sûr ! Quand une techno JavaScript spécifique est très demandée, nous l'intégrons à un projet à venir.