Vous êtes sur la page 1sur 45

Afin d'éviter la fuite de questions, ce rapport ne doit pas être partagé avec les candidats.

Aymen (bouhlelaymen91@gmail.com)
Liliya R

Campagne : Java, Spring Framework, Angular 2+, Git, Docker - Senior Domaine(s) : Angular 2+, Docker, Git, Java, Spring Framework

Langage : Français Date : 18/04/2022

MEILLEUR QUE
RANG 1/1

89% DURÉE 1h08 / 1h34

des professionnels SCORE 1 105 / 1 970 (56%)

Angular 2+ 415 / 730pts (57%) MEILLEUR QUE 86% des professionnels

Connaissance du langage 415 / 730pts

Docker 80 / 180pts (44%) MEILLEUR QUE 56% des professionnels

Connaissance du langage 60 / 60pts

Modélisation 20 / 80pts

Résolution de problèmes 0 / 40pts

Git 120 / 180pts (67%) MEILLEUR QUE 81% des professionnels

Connaissance du langage 120 / 180pts

1 / 45
Aymen (bouhlelaymen91@gmail.com)
Java 390 / 780pts (50%) MEILLEUR QUE 78% des professionnels

Connaissance du langage 167 / 207pts

Fiabilité 43 / 93pts

Modélisation 40 / 40pts

Résolution de problèmes 140 / 440pts

Spring Framework
100 / 100pts (100%) MEILLEUR QUE >99% des professionnels

Connaissance du langage 80 / 80pts

Spring Web 20 / 20pts

2 / 45
Aymen (bouhlelaymen91@gmail.com)
Question 1: [Web] @ControllerAdvice
Spring Framework 01:18 / 01:30 20 / 20 pts

Question
Quel est le rôle de la classe ci-dessous dans une application web Spring ?

@ControllerAdvice
public class ExceptionAdvice {
@ExceptionHandler({UserNotFoundException.class})
public final ResponseEntity<String> handleException(UserNotFoundException ex, WebRequest
request) {
return new ResponseEntity<>(null, new HttpHeaders(), HttpStatus.NOT_FOUND);
}
}

Réponse

Intercepter les exceptions UserNotFoundException non capturées et


traduire le statut HTTP 500 par défaut en un statut plus descriptif

Empêcher les exceptions UserNotFoundException d'être lancées par les


contrôleurs

Définir UserNotFoundException et le rendre disponible pour que d'autres


classes puissent l'utiliser

Fournir des logs supplémentaires lorsqu'une exception


UserNotFoundException est lancée

Résultat
Réponse correcte
Spring Web +20pts

3 / 45
Aymen (bouhlelaymen91@gmail.com)
Question 2: [AOP] Logging aspect
Spring Framework 00:51 / 01:15 20 / 20 pts

Question
Vous souhaitez créer un aspect qui permet de logguer le temps d'exécution d'une méthode de votre
module métier. Vous n'avez pas besoin de vous occuper des exceptions.

Par quelle annotation devriez-vous remplacer XXXXXX ?

Réponse

@Around

@Before

@After

@AfterReturning

Résultat
Réponse correcte
Connaissance du langage +20pts

4 / 45
Aymen (bouhlelaymen91@gmail.com)
Question 3: [Core] Constructeurs Autowired
Spring Framework 00:48 / 00:50 40 / 40 pts

Question
Quel énoncé est correct concernant l'annotation @Autowired(required=true) sur les constructeurs
d'une classe ?

Réponse

@Autowired n'est utilisable que sur les champs et les méthodes setter

@Autowired peut être ajouté sur un constructeur mais ce n'est pas


nécessaire

@Autowired peut être ajouté sur autant de constructeurs que souhaité

Résultat
Réponse correcte
Connaissance du langage +40pts

5 / 45
Aymen (bouhlelaymen91@gmail.com)
Question 4: [Web] STOMP
Spring Framework 00:50 / 00:50 3x (19 sec) 20 / 20 pts

Le temps alloué à cette question s'est écoulé. La réponse du


candidat a été automatiquement récupérée à la fin du décompte.

Question
Quel est le nom du protocole, basé sur du texte, utilisé par Spring pour envoyer des messages par
Websockets ?

Réponse
STOMP

Résultat
Réponse correcte
Connaissance du langage +20pts

Réponse(s) correcte(s)
STOMP
Streaming Text Oriented Messaging Protocol

6 / 45
Aymen (bouhlelaymen91@gmail.com)
Question 5: git bisect
Git 00:42 / 01:00 1x (18 sec) 20 / 20 pts

Question
Quel est l'usage typique de la commande git bisect ?

Réponse

Pour diviser l'historique de commit d'un projet afin de filtrer les logs

Pour recherche un fichier particulier commité dans le dépôt

Pour retrouver quel commit dans votre historique de projet a introduit un


bug

Pour trouver le dernier commit sans récupérer les changements du dépôt


distant

Résultat
Réponse correcte
Connaissance du langage +20pts

7 / 45
Aymen (bouhlelaymen91@gmail.com)
Question 6: Option -m
Git 00:09 / 00:30 20 / 20 pts

Question
Quelle option de la ligne de commande permet de spécifier un commentaire de commit à l'exécution de
git commit ?

Réponse

-m

-i

-l

-a

Résultat
Réponse correcte
Connaissance du langage +20pts

8 / 45
Aymen (bouhlelaymen91@gmail.com)
Question 7: git diff
Git 00:40 / 00:40 40 / 40 pts

Le temps alloué à cette question s'est écoulé. La réponse du


candidat a été automatiquement récupérée à la fin du décompte.

Question
Vous avez modifié localement le code du fichier index.html .

Quelle commande exécuter pour voir quels changements de code seront ajoutés quand vous passerez
le fichier dans la "staging area" ?

Réponse

git status index.html

git diff index.html

git show index.html

git show --diff index.html

Résultat
Réponse correcte
Connaissance du langage +40pts

9 / 45
Aymen (bouhlelaymen91@gmail.com)
Question 8: git clone files
Git 00:26 / 01:00 40 / 40 pts

Question
On suppose que la branche par défaut est la branche master.

À l'exécution de git clone <remote repository> , quels fichiers sont ajoutés au répertoire local ?

Réponse

Les fichiers du premier commit de la branche master du dépôt distant

Aucun fichier n'est récupéré, seul un dépôt vide est créé

La dernière version des fichiers de la branche master du dépôt distant

La dernière version des fichiers de la branche la plus récente du dépôt


distant

Résultat
Réponse correcte
Connaissance du langage +40pts

10 / 45
Aymen (bouhlelaymen91@gmail.com)
Question 9: git reflog
Git 01:00 / 01:00 2x (28 sec) 0 / 60 pts

Le temps alloué à cette question s'est écoulé. La réponse du


candidat a été automatiquement récupérée à la fin du décompte.

Question
Un utilisateur tiers a accidentellement rebasé de manière incorrecte et a fait un "force push" de son
rebase. Vous faites un pull de ces changements dans votre dépôt local et vous perdez tout l'historique
des commits.

Quelle commande pouvez-vous exécuter pour lister tous les changements du dépôt afin que vous
puissiez revenir à un état antérieur correspondant à une référence donnée ?

Réponse
git log

Résultat
Réponse correcte
Connaissance du langage +60pts

Réponse(s) correcte(s)
git reflog
reflog

11 / 45
Aymen (bouhlelaymen91@gmail.com)
Question 10: Dockerfile : EXPOSE
Docker 00:45 / 00:45 20 / 20 pts

Le temps alloué à cette question s'est écoulé. La réponse du


candidat a été automatiquement récupérée à la fin du décompte.

Question
Quel est le rôle de l'instruction EXPOSE dans un Dockerfile ?

Réponse

Elle indique au démon Docker que le container sera à l'écoute d'un port
donné

Elle indique au démon Docker qu'un répertoire spécifique du container sera


exposé au niveau de l'hôte

Elle indique au démon Docker qu'il devra se mettre à l'écoute de tous les
ports du container

EXPOSE n'est pas une instruction possible du Dockerfile

Elle indique au démon Docker qu'il devra router l'ensemble du trafic du


container vers l'hôte par utilisation de NAT

Résultat
Réponse correcte
Connaissance du langage +20pts

12 / 45
Aymen (bouhlelaymen91@gmail.com)
Question 11: Dockerfile : choix entre CMD et ENTRYPOINT
Docker 01:00 / 01:00 20 / 20 pts

Le temps alloué à cette question s'est écoulé. La réponse du


candidat a été automatiquement récupérée à la fin du décompte.

Question
Y-a-t-il des différences entre les instructions CMD et ENTRYPOINT d'un Dockerfile ?

Réponse

Il n'y a pas de différences. Ce sont des alias.

Oui, CMD permet de spécifier une commande par défaut qui sera exécutée
seulement si aucune commande n'est spécifiée au lancement d'un
container alors que les arguments de ENTRYPOINT seront toujours
exécutés

Oui, ENTRYPOINT doit toujours être utilisé en conjonction avec CMD alors
que CMD peut être utilisé seul

Oui, ENTRYPOINT permet de spécifier le répertoire par défaut dans lequel


s'exécutera la commande spécifiée par CMD

Résultat
Réponse correcte
Modélisation +20pts

13 / 45
Aymen (bouhlelaymen91@gmail.com)
Question 12: Docker troubleshooting : inspection du réseau
Docker
Docker 00:45 / 00:45 2x (21 sec) 0 / 40 pts

Le temps alloué à cette question s'est écoulé. La réponse du


candidat a été automatiquement récupérée à la fin du décompte.

Question
Pour investiguer un problème, vous avez besoin de lister les ports publiés par un container.

Quelle commande pourriez-vous utiliser dans cette situation ?

Plusieurs réponses attendues.

Réponse

docker port

docker ps

docker network

docker list port

Résultat
Réponse incorrecte
Résolution de problèmes +40pts

14 / 45
Aymen (bouhlelaymen91@gmail.com)
Question 13: Docker network : utilisation d'un serveur DNS
custom
Docker 00:39 / 00:40 1x (16 sec) 40 / 40 pts

Question
Quelle commande permet de créer un container avec pour serveur DNS personnalisé 8.8.8.8 ?

Réponse

docker container create --dns=8.8.8.8

docker container create --custom-dns=8.8.8.8

docker container create --add-dns=8.8.8.8

docker container create --resolve=8.8.8.8

Résultat
Réponse correcte
Connaissance du langage +40pts

15 / 45
Aymen (bouhlelaymen91@gmail.com)
Question 14: Docker swarm : incident sur cluster
Docker 01:08 / 01:30 0 / 60 pts

Question
On considère le cluster Docker swarm suivant :

Qu'arrivera-t-il si Master-A, Master-B et Master-E tombent ?

16 / 45
Aymen (bouhlelaymen91@gmail.com)
Réponse

Rien de plus, le cluster continue de tourner comme si les masters étaient


toujours en cours d'exécution

Tous les services / containers s'arrêtent

Les services existants continuent de fonctionner mais le scheduler ne peut


pas déployer de nouveaux services ou redéployer des services en échec

Toutes les fonctionnalités du cluster sont opérantes parce qu'il reste des
masters en cours d'exécution mais les performances de scheduling sont
dégradées

Résultat
Réponse incorrecte
Modélisation +60pts

17 / 45
Aymen (bouhlelaymen91@gmail.com)
Question 15: Test Driven Development (TDD)
Java 00:22 / 01:00 20 / 20 pts

Question
Parmi ces deux procédures de développement, laquelle préconisez-vous ?

Procédure #1 :
Ecrire des tests pour la nouvelle fonctionnalité "F" Tester que "F" ne fonctionne pas Implémenter "F"
Tester que "F" fonctionne correctement

Procédure #2 :
Implémenter la nouvelle fonctionnalité "F" Ecrire des tests pour "F" Tester que "F"
fonctionne correctement

Réponse

Procédure #1

Procédure #2

Résultat
Réponse correcte
Modélisation +20pts

18 / 45
Aymen (bouhlelaymen91@gmail.com)
Question 16: Dependency Inversion Principle (DIP)
Java 00:13 / 00:45 20 / 20 pts

Question
Les abstractions (ex : interfaces) ne doivent pas dépendre des détails (implémentations concrètes). Les
détails doivent dépendre des abstractions.

Réponse

Vrai

Faux

Résultat
Réponse correcte
Modélisation +20pts

19 / 45
Aymen (bouhlelaymen91@gmail.com)
Question 17: Opérateur sur les bits : >>
Java 00:20 / 00:20 1x (7 sec) 40 / 40 pts

Le temps alloué à cette question s'est écoulé. La réponse du


candidat a été automatiquement récupérée à la fin du décompte.

Question
Quel est le résultat de l'opération 2 >> 1 ?

Réponse

Résultat
Réponse correcte
Connaissance du langage +40pts

20 / 45
Aymen (bouhlelaymen91@gmail.com)
Question 18: Création d'une chaîne de caractères
Java 01:00 / 01:00 0 / 40 pts

Le temps alloué à cette question s'est écoulé. La réponse du


candidat a été automatiquement récupérée à la fin du décompte.

Question
Voici deux manières de créer une chaîne de caractères : String s = "Test" String s = new
String("Test")

Quelle affirmation est correcte concernant les différences entre ces deux méthodes ?

Réponse

L'option 1 est plus performante

L'option 2 est plus performante

L'objet 1 est variable (mutable), l'objet 2 est immuable (immutable)

L'objet 2 est variable (mutable), l'objet 1 est immuable (immutable)

Résultat
Réponse incorrecte
Connaissance du langage +40pts

21 / 45
Aymen (bouhlelaymen91@gmail.com)
Question 19: HashMap avec objet variable en tant que clef
Java 01:00 / 01:00 60 / 60 pts

Le temps alloué à cette question s'est écoulé. La réponse du


candidat a été automatiquement récupérée à la fin du décompte.

Question
Dans une HashMap, une classe variable (mutable) est utilisée comme clef.

Quelle proposition est vraie ?

Réponse

Peu importe que la clef soit variable ou immuable (immutable), la HashMap


se comporte de la même manière

Utiliser des clefs variables peut poser un problème de performance : la


HashMap recalcule les valeurs hash des clefs à chaque fois qu'une entrée est
recherchée

Une HashMap peut être peu fiable lorsque l'on utilise des clefs variables
car leurs valeurs hash peut dépendre de l'état de l'objet clef

Résultat
Réponse correcte
Connaissance du langage +60pts

22 / 45
Aymen (bouhlelaymen91@gmail.com)
Question 20: Duodigits
Java 03:27 / 12:00 3x (28 sec) 100 / 100 pts

Question
On appelle "duodigit" un nombre entier dont la représentation décimale n'utilise pas plus de deux
chiffres différents. Par exemple 12 , 110 , -33333 sont des duodigits, mais 102 ne l'est pas.

Implémentez la méthode isDuoDigit(number) qui renvoie un string:


y si number est un duodigt n dans le cas contraire

EXEMPLE :

Number
1

Number
2020

Number
-2021
Result
y

Result
y

Result
n

23 / 45
Aymen (bouhlelaymen91@gmail.com)
Réponse

1 import java.util.*;
2 import java.io.*;
3 import java.math.*;
4
5 class Solution {
6
7 public static String isDuoDigit(int number) {
8 // Write your code here
9 // To debug: System.err.println("Debug messages...");
10 boolean result=Integer.toString(Math.abs(number)).chars().distinct().count()<=2;
11 return result?"y":"n";
12 }
13
14 /* Ignore and do not change the code below */
15 // #region main
16 public static void main(String args[]) {
17 Scanner in = new Scanner(System.in);
18 int number = in.nextInt();
19 PrintStream outStream = System.out;
20 System.setOut(System.err);
21 String result = isDuoDigit(number);
22 System.setOut(outStream);
23 System.out.println(result);
24 }
25 // #endregion
26 }

24 / 45
Aymen (bouhlelaymen91@gmail.com)
Résultat
42
Résolution de problèmes +15pts

111000
Résolution de problèmes +15pts

456
Résolution de problèmes +15pts

2
Résolution de problèmes +15pts

-79
Résolution de problèmes +10pts

0
Fiabilité +10pts

113300
Résolution de problèmes +10pts

-99001
Résolution de problèmes +10pts

25 / 45
Aymen (bouhlelaymen91@gmail.com)
Question 21: Correction simple
Java 00:46 / 02:00 50 / 100 pts

Question
La méthode sumRange devrait retourner la somme des entiers compris entre 10 et 100 inclusifs
contenus dans le tableau passé en paramètre.

Corrigez la méthode sumRange .

Note : le paramètre ints n'est jamais null.

Réponse

1 // Java code below


2 import java.util.*;
3 import java.io.*;
4 import java.nio.*;
5 import java.math.*;
6
7 class Solution {
8
9 static int sumRange(int[] ints) {
10 int sum = 0;
11 for (int i = 1; i < ints.length; i++) {
12 int n = ints[i];
13 if (n >= 10 && n <= 100) sum += n;
14 }
15 return sum;
16 }
17 }

Résultat
La solution fonctionne avec { 1, 4, 9, 12, 98, -10, 10 }
Résolution de problèmes +50pts

La solution fonctionne avec { 30, 4, 9, 12, 98, -10, 10 }


Fiabilité +50pts

26 / 45
Aymen (bouhlelaymen91@gmail.com)
Question 22: Expression booléenne simple
Java 01:25 / 02:00 100 / 100 pts

Question
A.a(int i, int j) devrait retourner true si un des arguments est égal à 1 ou si leur somme est
égale à 1.

Par exemple :
A.a(1, 5) retourne true
A.a(2, 3) retourne false
A.a(-3, 4) retourne true

Réponse

1 // Java code below


2 class A {
3
4 static boolean a(int i, int j) {
5 return (i+j ==1 || (i==1 || j==1));
6
7
8 }
9
10 }

Résultat
Retourne true si i ou j est égal à 1, sinon false
Connaissance du langage +67pts

Retourne true si i+j est égal à 1


Fiabilité +33pts

27 / 45
Aymen (bouhlelaymen91@gmail.com)
Question 23: Reconstitution de message
Java 20:00 / 20:00 10x (8 min) 0 / 300 pts

Le temps alloué à cette question s'est écoulé. La réponse du


candidat a été automatiquement récupérée à la fin du décompte.

28 / 45
Aymen (bouhlelaymen91@gmail.com)
Question
On vous demande de reconstituer un message qui a été coupé en morceaux.

Implémentez la méthode rebuildMessage(parts) qui reçoit en paramètre un tableau de chaînes de


caractères.

Chaque élément de parts a été découpé à partir d'un seul et même message. Vous devez reconstituer
le message original, à partir des règles suivantes :
le message original commence toujours par le caractère A et finit par le caractère Z deux parties
peuvent être rattachées lorsque le dernier caractère de la première partie est égal au premier caractère
de la deuxième partie. lors de la combinaison de deux parties, on ne conserve qu'un exemplaire du
caractère de liaison (par exemple " A---b " + " b---Z " donne " A---b---Z et non " A---bb---Z ")

rebuildMessage doit retourner le message reconstitué.

Contraintes :
chaque premier caractère est unique parmi parts chaque partie contient au moins 2 caractères et au
plus 1000 caractères la solution existe forcément et est unique parts n'est jamais null , contient au
moins un élément et au plus 100 éléments

EXEMPLES:
Parties
Ab
bcZ
Message
AbcZ

Parties
*====#
X-+-+-+-+-+-Z
#______X
A.........*
Message
A.........*====#______X-+-+-+-+-+-Z

29 / 45
Aymen (bouhlelaymen91@gmail.com)
Réponse

1 import java.util.*;
2 import java.io.*;
3 import java.math.*;
4
5 class Solution {
6
7 public static String rebuildMessage(String[] parts) {
8 // Write your code here
9 // To debug: System.err.println("Debug messages...");
10 StringBuilder result= new StringBuilder();
11 String debut="";
12 String fin="";
13 List <String> list = Arrays.asList(parts);
14 for(int i=0;i<parts.length;i++)
15
16 {
17 if(parts[i].startsWith("A"))
18 {
19 debut =parts[i];
20
21 }
22 if(parts[i].endsWith("Z"))
23 {
24 fin=parts[i];
25
26 }
27 list.remove(i);
28
29 }
30
31 Collections.sort(list);
32 return list.toArray() ;
33 }
34
35 /* Ignore and do not change the code below */
36 // #region main
37 public static void main(String args[]) {
38 Scanner in = new Scanner(System.in);
39 int partsCount = in.nextInt();
40 if (in.hasNextLine()) {
41 in.nextLine();
42 }
43 String[] parts = new String[partsCount];
44 for (int i = 0; i < partsCount; i++) {
45 parts[i] = in.nextLine();
46 }
47 PrintStream outStream = System.out;
48 System.setOut(System.err);
49 String message = rebuildMessage(parts);
50 System.setOut(outStream);
51 System.out.println(message);
52 }
53 // #endregion
54 }

30 / 45
Aymen (bouhlelaymen91@gmail.com)
Résultat
AbbbbccccZZZZ
Résolution de problèmes +45pts

A------0==1-+-+-+-+-+-+-+-+-+-+-:_____Z
Résolution de problèmes +45pts

Seulement 2 parties
Résolution de problèmes +45pts

Beaucoup de petites parties


Résolution de problèmes +45pts

Les caractères aux extrémités ne sont pas spécifiques


Résolution de problèmes +40pts

Une seule partie


Résolution de problèmes +40pts

Beaucoup de parties
Résolution de problèmes +40pts

31 / 45
Aymen (bouhlelaymen91@gmail.com)
Question 24: Directive structurelle
Angular 2+ 00:14 / 00:30 20 / 20 pts

Question
Parmi les propositions suivantes, laquelle n'est pas un directive structurelle d'Angular ?

Réponse

ngIf

ngFor

ngSwitch

ngUnless

Résultat
Réponse correcte
Connaissance du langage +20pts

32 / 45
Aymen (bouhlelaymen91@gmail.com)
Question 25: Nouvelle application Angular
Angular 2+ 00:10 / 00:30 20 / 20 pts

Question
Quelle ligne de commande permet de créer une nouvelle application Angular ?

Réponse

ng new appName

ng start appName

npm start appName

npm create appName

Résultat
Réponse correcte
Connaissance du langage +20pts

33 / 45
Aymen (bouhlelaymen91@gmail.com)
Question 26: Route avec accès non-autorisé
Angular 2+ 00:10 / 00:30 40 / 40 pts

Question
Comment pouvez-vous protéger une certaine route contre les accès non-autorisés ?

Réponse

en utilisant un UrlMatcher

en utilisant des "route guards"

en utilisant un service spécifique

en traitant des événements de sécurité

Résultat
Réponse correcte
Connaissance du langage +40pts

34 / 45
Aymen (bouhlelaymen91@gmail.com)
Question 27: Passage de données d'enfant vers parent
Angular 2+ 00:13 / 00:30 40 / 40 pts

Question
Quelle syntaxe utiliseriez-vous pour passer une donnée d'un fils vers son composant parent ?

Réponse

Output

Input

@Output()

@Input()

Résultat
Réponse correcte
Connaissance du langage +40pts

35 / 45
Aymen (bouhlelaymen91@gmail.com)
Question 28: Écouter les événements de l'hôte
Angular 2+ 00:15 / 00:45 40 / 40 pts

Question
Quel décorateur peut-on utiliser pour écouter les événements de l'élément hôte depuis une directive
fille?

Réponse

@HostListener

@Listener

@Target

@Event

Résultat
Réponse correcte
Connaissance du langage +40pts

36 / 45
Aymen (bouhlelaymen91@gmail.com)
Question 29: Détection de modifications d'un composant
Angular 2+ 00:30 / 00:30 0 / 60 pts

Le temps alloué à cette question s'est écoulé. La réponse du


candidat a été automatiquement récupérée à la fin du décompte.

Question
Quelle est la stratégie de détection de modifications par défaut pour un composant ?

Réponse

Component Change Detection

ChangeDetection

OnPush

Default

Résultat
Réponse incorrecte
Connaissance du langage +60pts

37 / 45
Aymen (bouhlelaymen91@gmail.com)
Question 30: Directive ngClass
Angular 2+ 00:54 / 01:30 1x (16 sec) 0 / 60 pts

Question
Quelle directive built-in Angular peut-on utiliser pour remplacer ???? à la ligne 6 pour d'appliquer la
classe blue de manière conditionnelle ?

Réponse
[ngStyle]

Résultat
Réponse correcte
Connaissance du langage +60pts

38 / 45
Aymen (bouhlelaymen91@gmail.com)
Réponse(s) correcte(s)
[ngClass]
[ ngClass ]

Question 31: @Input/@Output composant parent


Angular 2+ 08:42 / 15:00 2x (1 min) 75 / 150 pts

Question
On vous demande de créer un composant Angular nommé DisplayComponent et ayant display-
component pour sélecteur.

Il doit utiliser le composant VoterComponent (sélecteur = voter-component ) dont le code est fourni.

DisplayComponent a 3 champs public nommés question , yesAnswer et noAnswer . Ils


représentent une question posée à l'utilisateur et les choix de réponse possibles affichés dans
VoterComponent .

DisplayComponent doit utiliser VoterComponent en tant qu'enfant et doit lui passer question ,
yesAnswer et noAnswer en entrée.

Quand l'utilisateur vote, VoterComponent créé un événement de type boolean vers un @Output
nommé output .

Vous devez afficher le résultat du vote dans DisplayComponent dans un <div> avec id=lastVote :
si output est vrai, alors on affiche la valeur de yesAnswer , sinon on affiche la valeur de noAnswer .

Notes : Un bloc de "Preview" est disponible pour vous permettre de débugguer votre code. Il affiche
votre composant ci-dessous. Vous pouvez l'ouvrir et le modifier à votre guise. Ce bloc de "Preview" n'est
pas pris en compte dans le calcul du score de votre code.

Réponse

1 // Angular 8.x code


2 import { Component, Input, NgModule, Output, EventEmitter } from '@angular/core';
3
4 @Component({
5 selector:'display-component',
6 template: `<div id="lastVote">{{answer}}</div>

39 / 45
Aymen (bouhlelaymen91@gmail.com)
7 <voter-component
8 [question]="question"
9 [yesAnswer]="yesAnswer"
10 [noAnswer]="noAnswer"
11 (outuput)="setVote($event)">
12
13 </voter-component>
14 `
15 })
16 export class DisplayComponent {
17 public question = "Too easy?"
18 public yesAnswer = "Yes";
19 public noAnswer = "No";
20 public answer="Yes";
21 setVote(event:boolean){
22 return (this.answer=event?this.yesAnswer:this.noAnswer);
23 }
24 }
25
26 // VoterComponent: do not change
27 @Component({
28 selector:'voter-component',
29 template: `
30 {{question}}
31 <button (click)="vote(true)">{{yesAnswer}}</button>
32 <button (click)="vote(false)">{{noAnswer}}</button>
33 `
34 })
35 export class VoterComponent {
36 @Input()
37 public question: string;
38
39 @Input()
40 public yesAnswer: string;
41
42 @Input()
43 public noAnswer: string;
44
45 @Output()
46 public output = new EventEmitter<boolean>();
47
48 public vote(vote: boolean): void{
49 this.output.emit(vote);
50 }
51 }
52
53
54
55 // #region Preview
56
57 @Component({
58 template: `<display-component></display-component>`
59 })
60 export class PreviewComponent { }
61 // #endregion Preview
62
63 // #region Module declaration - Do not Change
64 @NgModule({
65 declarations: [PreviewComponent, DisplayComponent, VoterComponent],
66 entryComponents: [PreviewComponent]
67 })
68 export class PreviewModule { }
69 // #endregion Module declaration

40 / 45
Aymen (bouhlelaymen91@gmail.com)
Résultat
Compile
Connaissance du langage +0pts

Gère l'événement
Connaissance du langage +75pts

Les entrées sont bien propagées


Connaissance du langage +75pts

41 / 45
Aymen (bouhlelaymen91@gmail.com)
Question 32: Utilisation des pipes (percent, currency, date)
Angular 2+ 17:04 / 20:00 5x (4 min) 180 / 300 pts

Question
On vous demande de terminer le composant TransactionDetailsComponent . Vous devez
uniquement modifier la partie template du composant.

L'objectif de ce composant est d'afficher la date, le montant, la devise et les frais associés à une
transaction, chacun dans un format spécifique.

Vous devez afficher 3 divs :


Le div "Fee" (frais)
L'id de ce div doit être fee . Il affiche les frais fee associés à la transaction sous forme de pourcentage :
S'il y a moins de 2 chiffres pour la partie entière de la valeur en pourcentage, vous devez combler avec
des zéros à gauche. S'il y a moins de 2 chiffres dans la partie décimale, vous devez comblez avec zéros à
droite. S'il y a plus de 3 chiffres dans la partie décimale, vous devez arrondir à 3 chiffres. On utilise un
point . en tant que séparateur décimal.
Par exemple 0.031234 s'affiche 03.123% .
Le div "Amount" (montant)
L'id de ce div doit être amount . Il affiche les frais amount et la devise currency de la transaction. Le
symbole de la devise associée au code currency (par exemple € pour EUR ) est affiché avant les frais.
Les frais sont formattés comme suit :
S'il y a moins de 9 chiffres pour la partie entière, vous devez combler avec des zéros à gauche. Le
séparateur des milliers doit être une virgule , . S'il y a moins de 2 chiffres dans la partie décimale, vous
devez comblez avec zéros à droite. S'il y a plus de 2 chiffres dans la partie décimale, vous devez arrondir
à 2 chiffres.
Par exemple currency=EUR , amount=312.562 s'affiche €000,000,312.56 .
Le div "Time" (date)
L'id de ce div doit être time . La date et l'heure de la transaction doivent être affiché dans ce format
inhabituel : 'ww: yyyy MMMMM dd hh-mm-ss'

Notes : Un bloc de "Preview" est disponible pour vous permettre de débugguer votre code. Il affiche
votre composant ci-dessous. Vous pouvez ouvrir ce bloc et le modifier à votre guise. Le bloc de "Preview"
n'est pas pris en compte dans le calcul du score de votre code.

42 / 45
Aymen (bouhlelaymen91@gmail.com)
Réponse

1 // Angular 8.x code


2 import { Component, Input, NgModule } from '@angular/core';
3 import { CommonModule } from '@angular/common';
4
5 @Component({
6 selector:'transaction-component',
7 template: `
8 <div id="fee">{{fee|number|percent:'2.2-3'}}</div>
9 <div id="amount">{{amount | currency:currency:'symbol':'9.2-2'}}</div>
10
11 <div id="time">{{timeOfTransaction | date:'ww: yyyy MMMMM dd hh-mm-ss'}}</div>
12 `
13 })
14 export class TransactionDetailsComponent {
15
16 @Input()
17 public currency: string;
18
19 @Input()
20 public timeOfTransaction: Date;
21
22 @Input()
23 public amount: number;
24
25 @Input()
26 public fee: number;
27
28 }
29
30 // #region Preview
31 @Component({
32 template: `<transaction-component [fee]=0.02 [amount]=123.45 [currency]="'EUR'"
[timeOfTransaction]='getPresetDate()'></transaction-component>`
33 })
34 export class PreviewComponent {
35 public getPresetDate(){
36 return new Date(1997,6,1,12,32);
37 }
38 }
39 // #endregion Preview
40
41 // #region Module declaration - Do not Change
42 @NgModule({
43 imports: [CommonModule],
44 declarations: [PreviewComponent, TransactionDetailsComponent],
45 entryComponents: [PreviewComponent]
46 })
47 export class PreviewModule { }
48 // #endregion Module declaration

43 / 45
Aymen (bouhlelaymen91@gmail.com)
Résultat
Compile
Connaissance du langage +0pts

Affichage pourcentage
Connaissance du langage +60pts

Affichage de date
Connaissance du langage +60pts

Affichage EUR
Connaissance du langage +60pts

Affichage JPY
Connaissance du langage +60pts

3 décimales pour le pourcentage


Connaissance du langage +60pts

44 / 45
Aymen (bouhlelaymen91@gmail.com)
Glossaire

Connaissance du langage

La mesure de cette compétence permet de déterminer l'expérience du candidat dans la pratique d'un langage de
programmation. Privilégiez cette compétence si, par exemple, vous recherchez un développeur qui devra être
rapidement opérationnel.

Modélisation

Cette mesure fournit une indication sur la capacité du candidat à appliquer des solutions standard pour résoudre des
problèmes récurrents. Un développeur ayant un bon niveau dans cette compétence augmentera la qualité
(maintenabilité, évolutivité) de vos applications. Cette compétence ne dépend pas spécifiquement d'une technologie.
Privilégiez cette compétence si, par exemple, vous recherchez un développeur qui sera amené à travailler sur les
briques qui structurent vos applications, à anticiper les besoins de demain pour développer des solutions pérennes.

Résolution de problèmes

Cette compétence correspond aux aptitudes du candidat à comprendre et à structurer son raisonnement pour trouver
des solutions à des problèmes complexes. Cette compétence ne dépend pas spécifiquement d'une technologie.
Privilégiez cette compétence si, par exemple, vos applications ont une composante technique importante (R&D,
innovation).

Fiabilité

La fiabilité caractérise la capacité du candidat à réaliser des solutions qui prennent en compte les cas particuliers. Plus
cette compétence est élevée, plus vos applications sont robustes (moins de bugs).

45 / 45
Aymen (bouhlelaymen91@gmail.com)

Vous aimerez peut-être aussi