6 Trucs et astuces en JavaScript moderne
6 Trucs et astuces en JavaScript moderne
Angular et NestJS utilisés conjointement permettent de créer des applications FullStack TypeScript sans perdre de temps en configurations complexes. Dans cette formation en ligne résolument pratique, nous allons créer une application de Flash Cards qui permettra de :
- créer un backend NestJS,
- gérer les problème de CORS,
- créer ses propres module, controler et service NestJS,
- créer un client Angular 9,
- consommer depuis le client Angular 9 l'API REST du serveur NestJS,
- créer un service Angular,
- concevoir et implémenter des fonctionnalités proches du terrain,
- utiliser une animation CSS dans un client Angular,
- etc...
>Seule la pratique régulière permet de progresser en programmation.
Ce projet concret de flash cars est complexe mais humainement faisable en quelques soirées ou un jour de week-end. Il vous permettra de continuer à pratiquer votre art de la programmeur.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.
Bon tuto !
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Chapitre 1
Introduction
Introduction
Chapitre 2
Création d'un serveur web avec NestJS
Création d'un serveur web avec NestJS
Chapitre 3
Création du client Angular 9
Création du client Angular 9
Chapitre 4
Sauvegarder les réponses
Sauvegarder les réponses
Plan détaillé du cours
Chapitre 1 : Introduction
02m26
Leçon 1Présentation du projet fil rouge
Chapitre 2 : Création d'un serveur web avec NestJS
22m02
Leçon 1Générer un projet NestJS
Leçon 2Générer un Cards module, son controler et son service
Leçon 3Créer une méthode dans un service et une interface
Leçon 4Créer une route permettant de gérer une requête GET de cards
Chapitre 3 : Création du client Angular 9
55m44
Leçon 1Générer notre application Angular 9
Leçon 2Créer un service Angular qui va requêter les cards de NestJS
Leçon 3Résoudre les problèmes de CORS
Leçon 4Passer chaque card en tant qu'input property
Leçon 5Animer vos cards à l'aide de classes CSS
Leçon 6Envoyer une réponse d'un composant enfant vers son parent
Leçon 7Créer une interface Answer
Leçon 8Consolider les réponses
Leçon 9Ajouter Bootstrap 4
Chapitre 4 : Sauvegarder les réponses
47m42
Leçon 1Afficher les boutons "save" et "restart" quand toutes les questions ont été vues
Leçon 2Sauvgarder toutes les réponses côté NestJS
Leçon 3Poster la demande de sauvegarde de réponses
Leçon 4Afficher uniquement les cards auxquelles l'utilisateur n'a pas su répondre
Leçon 5Rafraîchissement des cards côté client
Leçon 6Remettre le jeu à zéro
Aperçus
Avis des apprenants