Examen Fin de Module : Développement FRONT

Développement Digital option Web Full Stack

TypeScript / Angular

Partie I - Principe de base

Questions 1 point par question

1. TypeScript: Quelle est la différence entre une interface et un type dans TypeScript ?

   • a) Une interface décrit la structure d'un objet, tandis qu'un type peut représenter n'importe quel type de données.
   • b) Une interface est utilisée pour les classes, tandis qu'un type est utilisé pour les variables.
   • c) Il n'y a pas de différence significative entre les deux.
   • d) Une interface est plus restrictive qu'un type.

2. TypeScript: Quel est le but des generics en TypeScript ?

   • a) Permettre la réutilisation de code en créant des fonctions et des classes polyvalentes.
   • b) Améliorer la lisibilité du code en ajoutant des types plus spécifiques.
   • c) Rendre le code plus performant.
   • d) Toutes les réponses ci-dessus.

3. Angular: Quelle est la différence entre un service et un provider en Angular ?

   • a) Un service est une instance unique dans toute l'application, tandis qu'un provider définit comment créer une instance.
   • b) Un service est utilisé pour partager des données, tandis qu'un provider est utilisé pour gérer les routes.
   • c) Il n'y a pas de différence significative entre les deux.
   • d) Un provider est une sous-classe d'un service.

4. Angular: Quelle est la fonction de ChangeDetectionStrategy.OnPush ?

   • a) Déclencher la détection des changements à chaque modification des données.
   • b) Déclencher la détection des changements uniquement lorsque les entrées du composant changent.
   • c) Désactiver complètement la détection des changements.
   • d) Améliorer les performances en réduisant le nombre de vérifications de changements.

5. TypeScript: Qu'est-ce qu'un type union ?

   • a) Un type qui représente une valeur qui peut être de plusieurs types différents.
   • b) Un type qui représente une intersection de plusieurs types.
   • c) Un type qui est une version plus spécifique d'un autre type.
   • d) Un type qui est utilisé pour créer des types génériques.

6. Angular: Quelle est la différence entre un composant et une directive ?

   • a) Un composant est une partie autonome de l'UI, tandis qu'une directive modifie le comportement ou l'apparence d'un élément existant.
   • b) Un composant est utilisé pour gérer les données, tandis qu'une directive est utilisée pour gérer les événements.
   • c) Il n'y a pas de différence significative entre les deux.
   • d) Un composant est une sous-classe d'une directive.

7. TypeScript: Qu'est-ce qu'une interface fonctionnelle ?

   • a) Une interface qui définit la signature d'une fonction.
   • b) Une interface qui est utilisée pour créer des fonctions génériques.
   • c) Une interface qui est utilisée pour implémenter des interfaces.
   • d) Une interface qui est utilisée pour créer des types d'événements.

8. Angular: Quelle est la fonction de NgZone ?

   • a) Gérer la zone d'exécution Angular.
   • b) Gérer les événements asynchrones.
   • c) Gérer les changements de détection.
   • d) Toutes les réponses ci-dessus.

9. TypeScript: Qu'est-ce qu'un namespace ?

   • a) Un moyen d'organiser du code en modules.
   • b) Un moyen de créer des types privés.
   • c) Un moyen de créer des types génériques.
   • d) Un moyen de créer des interfaces.

10. Angular: Quelle est la différence entre ViewChild et ContentChild ?

• a) ViewChild permet d'accéder à un enfant direct d'un composant, tandis que ContentChild permet d'accéder à un enfant projeté dans un composant.
• b) ViewChild est utilisé pour les services, tandis que ContentChild est utilisé pour les composants.
• c) Il n'y a pas de différence significative entre les deux.
• d) ViewChild est utilisé pour les directives, tandis que ContentChild

Partie II  (10 points) - Mini Projet sur Ordinateur

Context : Réservation d'hôtel

Objectifs :

• Créer une interface utilisateur intuitive pour effectuer des réservations d'hôtel.
• Intégrer une API existante pour vérifier la disponibilité des chambres.
• Gérer la création et la mise à jour dynamique des clients.
• Proposer une option de réservation de voiture en intégrant une autre API.
• Assurer une expérience utilisateur fluide grâce à une interface responsive et des validations en temps réel.

1. Création de la maquette de réservation (1.5pts)

• Champs requis: CLIENT, EMAIL, TELEPHONE, PERIODE, TYPE DE LOGEMENT
• Utiliser une liste déroulante (select) pour le type de logement avec 5 options prédéfinies

2. Récupération des clients dynamiquement (1.5pts)

• Faire un appel API GET pour vérifier l'existence du client
• Si le client n'existe pas, afficher une maquette d'ajout de client avec les champs: NOM, PRENOM, NUMERO DE PASSEPORT OU CARTE D'IDENTITE, EMAIL, TELEPHONE

3. Ajout des réservations de voiture en option (3pts)

• Ajouter une option pour réserver une voiture
• Faire un appel API pour obtenir les options de location de voiture
• Utiliser un modal ou une popup pour afficher les options de location de voiture sur la page principale

4. Validation des champs en temps réel (2pts)

• Implémenter la validation en temps réel des champs de formulaire avec JavaScript/TypeScript
• Utiliser Reactive Forms pour une meilleure gestion des formulaires et des validations

5. Maquette responsive (2pts)

• Utiliser CSS Grid et Flexbox pour créer une maquette responsive
• S'assurer de la compatibilité avec Mobile, Tablet et Desktop