Module : Initiation Application côté client
Dernière mise à jour : 10/10/2023
Co H HN ECT
de E E S
INFWEB0002 2 21 2
1 h
h
Responsable Module Safa Saoudi
Enseignants Nader Abdellaoui, Ameni Romene, Radhouane Maassoudi, Safa
– Intervenants Saoudi, Sellami Oussema, Amir Yazidi, Rym Alouane
Unité pédagogique UP Web
Unité Option SAE : Analyse et applications web
d’enseignement
avancées Option SE : Développement multi-
plateforme
Option IOSYS : Full stack
Option INFINI : Développement FrontEnd
Option ARCTIC : Automatisation du déploiement
Prérequis Algorithmique - Technologies web 1.0
Niveaux et Options 4ème année (SE , SAE, INFINI , IOSYS , ARCTIC )
Objectif du module :
A la fin de ce module l’apprenant sera capable de développer des applications web côté client.
Mode d’évaluation :
La moyenne de ce module est calculée comme suit :
● Moyenne : CC (20%) + Examen Théorique (80%)
Acquis d’apprentissage :
à la validation de ce module l’étudiant sera capable de:
AA Acquis d’apprentissage Niveau d’approfondissement
(*)
Identifier les technologies de
AA1 développement des applications côté 1
client.
Expliquer l’arborescence et l’architecture d’une
AA2 application 2
frontend
Manipuler les différents éléments de l’application
AA3 frontend 3
Utiliser un système de routage
AA4 3
Manipuler des services
AA5 3
Organiser les différents éléments de l’application
AA6 4
* : (1 : Expliquer, 2 : Distinguer, 3 : Analyser, 4 : synthétiser, 5 : concevoir, 6 : Mettre en œuvre
et tester).
Contenu détaillé
Chapitre 1 : Introduction au Module Initiation Application côté Client
● Présenter les Framework côté client
● Comprendre le modèle d’architecture orienté composants (Modules,
Components, Directives, Services)
● Définir les principes d’Angular
● Mise en place de l’environnement de travail
● Créer un premier projet exemple Angular.
Situation(s) Cours intégré+
d’apprentissage Workshop
Durée 3h
Rendu(s) Environnement
configuré et
outils installés
Chapitre 2 : Manipulation des composants (Data Binding et les directives)
● Comprendre la structure d’un projet Angular
● Présenter et exploiter les différents éléments d’un Composant
● Manipuler un composant
● Appliquer les différents types de data-binding
Situation(s Cours intégré+
) Workshop
d’apprentissag
e
Durée 3h
Rendu(s) HomeWork
Chapitre 3 : Implémentation d’un système de navigation
● Différencier entre le routage statique et le routage dynamique
● Construire des routes et des liens
● Utiliser des paramètres dans la routes
Situation(s) Cours intégré+
d’apprentissage Workshop
Durée 3h
Rendu(s) HomeWork
Chapitre 4 : Création et validation de formulaires
● Enumérer les approches de création de formulaires
● Reconnaître la différence entre les approches de création de formulaire.
● Construire un formulaire avec ses validateurs en utilisant la méthode « reactive form »
Situation(s) Cours intégré+
d’apprentissage Workshop
Durée 3h
Rendu(s) HomeWork
Chapitre 5 : Interaction entre les composants
● Définir l’interaction entre composants
● Expliquer les différentes façons d’interaction entre composants
● Produire des interactions entre composants
Situation( Cours intégré+
s) Workshop
d’apprentissa
ge
Durée 3h
Rendu(s) HomeWork
Chapitre 6 : Création et manipulation de services
● Définir la notion de services
● Reconnaître l’intérêt de l’utilisation des services
● Produire et appliquer des services
Situatio Cours intégré+
n(s) Workshop
d’apprentiss
age
Durée
3h
Rendu(s) HomeWork
Chapitre 7: Consommation des Web Services
● Définir HTTP providers
● Présenter les méthodes HTTP (GET / POST / PUT / DELETE)
● Définir et appliquer la notion d’observable et observateur.
Situation( Cours intégré+
s) Workshop
d’apprentissa
ge
Durée 3h
Rendu(s) HomeWork
Evaluation1 :
Oral Writte Report Pres TP Projec
asse n / en t
ss exa Hom tatio
men m/ ew n
t MC ork
Q
AA1 : Identifier les technologies de X
développement des applications côté
client
AA2 : Expliquer l’arborescence et X
l’architecture
d’une application frontend
AA3 : Manipuler les différents éléments de X
l’application frontend
AA4 : Utiliser un système de routage X
AA5 : Manipuler des services X
AA6 : Organiser les différents éléments de X
l’application
Références2:
Ref1:https://angular.io
Ref2: https://nodejs.org/en/
Ref3: https://www.typescriptlang.org
Ref4: https://www.npmjs.com
1
Pour les lignes, on met les acquis d’apprentissage et pour les colonnes tout type d’activité d’évaluation proposée durant le module.
l’examen final doit couvrir tous les acquis d’apprentissage d’un module.
2
Textbook,bibliographie, mooc, article de recherche , livre ,white book, reference netographique
