Projet SI3 : Aide à la mobilité à l’international

Table des matières

  • Durée : 22/1/2019 → 4/6/2019 tous les mardis matins
  • 3 grandes périodes :
    1. acquisition des connaissances nécessaires au démarrage (acquisition technologique et prise en main des besoins)
    2. Développement du site web
    3. Finalisation et présentation du site
  • Le sujet en une phrase : réaliser un site web utile pour la mobilité internationale à l’école.
  • Ce projet est suivi par une semaine projet (à partir du 11 juin)  à temps complet s’appuyant sur le site web réalisé pour y ajouter une composante IoT

Coeff : Temps Partiel 2/3, temps complet 1/3

Liens utiles :

Organisation de la séance du 11 juin : OrganisationSéanceDu11

Résultats des évaluations – Sites diffusables : SitesWEbsDiffusables

Consignes Rédaction de rapport : ConseilsRapportsPS6

Planning 14 mai : PS6Plannig14mai

Slides d’introduction : ProjetPS622Courte

équipes https://docs.google.com/spreadsheets/d/1d3VOeFBvzSCSSzfX96490U-kfUALsjNSX_2s-OY549U/edit#gid=0

LIVRAISONS ET EVALUATIONS

Votre code GIT sera considéré stable dès le  (10 juin)

Votre retour d’expérience (à envoyer par mail le 28 mai) dans un rapport d’une dizaine de pages maximum incluant les points forts de votre solution, les point faibles et en prenant du recul en faisant le lien avec les cours de POO, IHM, BD et Client Serveur au travers de cette expérience

La démonstration du 11 juin sera notée par le public et des experts choisi hors équipe pédagogique. Les équipes qui ne présenteront pas au public devront montrer l’évolution de leur site aux enseignants à la même date.

Equipe pédagogique

  • Equipe utilisateur : elle expose ses besoins, guide pour leur bonne prise en compte et évalue l’utilité du site web fourni.
    • Groupe d’utilisateurs administratif : Bureau des Relations Internationales
    • Groupe d’utilisateur Pédagogique : Enseignants qui gèrent la mobilité internationale
    • Groupe d’utilisateurs Etudiants : Etudiants concernés
  • Equipe technique : elle présente la technologie, assure le suivi technique et évalue la qualité du code et la prise en main de la technologie
    • Jean-Yves Delmotte : Framework Angular / NodeJS
    • Rémi Pourtier : Framework Angular / NodeJS
    • Christian Brel : Framework Angular / NodeJS
  • Equipe « Suivi de projet » joue le rôle de facilitateur projet et évalue la gestion de projet.
    • Bénédicte Lagouge : Usage et GL
    • Anne Marie Pinna Dery : Usage et GL
    • Christian Brel : Usage et GL

Fonctionnement

Chaque équipe étudiante a un référent usage, un référent technique, un référent Suivi de projet.

Chaque groupe doit  répondre à des besoins exprimés par un des 3 groupes d’utilisateurs (contour de leur site web).

Chaque groupe est évalué sur les 3 aspects : techniques, prise en compte des besoins et gestion de projet.

Objectifs pédagogiques

  1. Comprendre les besoins des utilisateurs et proposer une solution adaptée
  2. Définir les contours de la solution fournie en prenant en compte l’acquisition d’une nouvelle technologie
  3. Construire un site web progressivement partie Back End et Front End

Résumé du projet

Le site web de notre école met l’accent sur l’international : http://unice.fr/polytechnice/fr/international#.XBokGPk8aHs

Je cite : « Nous offrons la possibilité de valider l’expérience à l’international en effectuant des séjours d’études à l’étranger dans le cadre d’un échange académique (un ou deux semestres dans une université partenaire) ou lors d’un stage en entreprise, de préférence dans le domaine d’études de l’élève ingénieur… Nous coopérons avec plusieurs universités étrangères. Les élèves-ingénieurs peuvent participer à des programmes d’échanges en Europe, aux Etats-Unis, au Canada, en Chine, en Corée du Sud, en Thaïlande ou au Vietnam. En Europe, nous avons des accords avec près de 200 universités dans 25 pays…»

Pour améliorer la communication autour de la mobilité internationale, nous vous proposons de répondre à des besoins utilisateurs divers et globalement utiles qui prendront la forme dans le contexte de ce cours de « sites webs » dédiés à des problématiques spécifiques.

Besoins applicatifs 

Nous avons identifié trois groupes d’utilisateurs ayant chacun des problématiques spécifiques : l’administration qui doit diffuser des informations aux étudiants (dossiers de candidature, contraintes temporelles, demandes de bourses), les responsables pédagogiques qui doivent faciliter les échanges (établir les contrats pédagogiques, valider les compétences pédagogiques, accroître les possibilités de départ…) ; les étudiants qui souhaitent partir qui ont besoin d’identifier quelle expérience à l’étranger leur convient le mieux et  ceux qui sont déjà partis pour qu’ils relatent leur expérience. Les besoins  présentés lors de la première séance sont consignés en résumé dans les slides joints.

Les représentants de ces groupes d’utilisateur présentent les besoins à la première séance. Des entrevues=  à la fin des premières et secondes périodes, lors des évaluations, ils vous feront des retour sur vos avancées. Une démonstration à plus grande échelle est prévue en fin de projet à laquelle assisteront bien sur l’équipe d’utilisateurs.

Contraintes techniques

Vous développerez le site Web avec Angular et nodeJS

Dans la première période, vous aurez un exercice « bac à sable » vous permettant d’acquérir les bases pour avoir un développement de qualité.

Gestion de projet

Pour une bonne gestion de projet vous devez appliquer les bonnes pratiques vues dans les projets PS5 : création d’un GIT, écritures d’issues, de releases.

Planning et livraisons

Il y a 3 grandes périodes :

  1. premières semaines du 22 janvier au 12 mars : bac à sable Angular et identification des scénarios plus prototypage avec une première évaluation technique et retours sur les scénarios
  2. semaines de réalisation du 19 mars au 30 avril : implémentation du prototype avec une seconde évaluation technique et utilisateurs
  3. semaines de finalisation du 7 mai au 4 juin : finalisation et rendu avec une démonstration grand public des sites webs sélectionnés.

 

Date Séance Date Séance Date Séance
22 Janvier Présentation des besoins 12 mars Eval no 1 30 avril Eval no 2
29 Janvier Présentation des techno 19 mars Développement 7 mai Finalisation
5 Février Prise en main : Techno et Prototype 26 mars Développement 14 mai Finalisation
12 Février Présentation Backend et code review 2 avril Développement 28 mai Préparation Démonstration
26 Février Techno et prototype 9 avril Développement 4 juin Démonstration
5 mars Techno et prototype 23 avril Développement 11 juin Préparation semaine temps plein

 

Vous devez rendre :

  1. Vos slides et vos compte rendus  (eval 1, eval 2)
  2. Votre code GIT (eval 1, 2 et fin de projet)
  3. Votre retour d’expérience (28 mai) dans un rapport d’une dizaine de pages maximum incluant les points forts de votre solution, les point faibles et en prenant du recul en faisant le lien avec les cours de POO, IHM, BD et Client Serveur au travers de cette expérience

Les évaluations du 12 mars (évaluation 1)  et du 30 avril (évaluation 2) seront double, une partie revue de code avec l’équipe technique et une partie suivi du projet avec l’équipe Suivi de projet et l’équipe utilisateurs.

Vos référents donneront également une note de suivi de projet.

La démonstration du 4 juin sera notée par le public et des experts choisi hors équipe pédagogique.

Pile technologique

  • Version control: Git (+ github classroom)
  • Développement Web avec le framework Angular (pour la partie front-end) et NodeJS (pour la partie back-end)

Contact

Via Slack

#ps6 pour toutes les questions et informations générales sur le projet

#ps6user pour toutes les questions qui concernent les groupes d’utilisateurs

#ps6-techno pour toutes les questions qui concernent les difficultés techniques

En cas de problème plus liés au fonctionnement du  groupe adressez-vous directement à votre référent projet.

Evaluation

  • Evaluations Codes : 30%
  • Evaluations Usage : 30%
  • Rapport et livraisons : 30%
  • Présentation Finale : 10%

Liens utiles ici ou dans les sous parties

TDS Techno – Front End https://docs.google.com/document/d/1QGbspfhAHhuhGSnz2M2XBQ4a8U54-gW2GLQN9bi778w/edit

Back End https://docs.google.com/document/d/1ZGG0Isd3JPkEn7IvdYzgEZlLNGg4hf5WdEyjknaEKmo/edit

 CORRIGES : https://github.com/delmotte/polytech-corrige-td-1-et-2

INFORMATIONS COMPLEMENTAIRES SUR SLACK

Attention les dates ont changé mais seulement les dates
Ici quelques informations supplémentaires

14 mai : Oral final techno et usage (au lieu du 30 avril)

Vous devez contextualiser votre travail rapidement, faire une démonstration argumentée qui s’articule sur les scénarios que vous proposez pour répondre aux besoins, illustrer votre travail par des parties techniques pertinentes. Vous devez terminer par une ouverture sur les différents besoins que vous pourriez ajouter à votre site et comment vous pourriez le faire.
Pour la partie scénario, évitez les scénarios brefs, privilégiez les scénarios complets. Argumentez le plus possible ce que vous montrez.
Pour la partie technique, montrez du code et/ou utilisez des slides. Vous devez au moins expliquer sur un exemple de votre site comment vous avez le plus souvent développé votre backend, votre front end et comment vous les avez connectés. Vous pouvez aussi zoomer sur des parties plus spécifiques du frontend (composants particuliers, …) ou backend (BD, modèles complexes…).

Rapport à fournir le 28 mai

En plus de ce qui est sur le site :
1. Votre retour d’expérience (28 mai) dans un rapport d’une dizaine de pages maximum incluant les points forts de votre solution, les point faibles et en prenant du recul en faisant le lien avec les cours de POO, IHM, BD et Client Serveur au travers de cette expérience

Consacrez une dernière partie du rapport à votre gestion de projet : rétrospective (ce qu’on a fait et ce qu’on aurait du faire), n’oubliez pas une répartition du travail honnête en plus du GIT est demandée

Démonstration grand public
Vous aurez un stand où vous pourrez faire utiliser votre site par des utilisateurs (étudiants et enseignants)
Ils auront une fiche à remplir sur la satisfaction par rapport à votre proposition. Ce sera la note du public.
Vous pourrez avoir des notes individuelles selon la qualité de vos parties respectives aussi bien à l’oral que dans le rapport.

ARCHIVES_________________________________________

Interfaces Homme Machine : Module SI3 Année 2016 2017

DUREE : 12 semaines
Responsable cours :  AM Dery-Pinna
Responsables TD :  Cécile Camillieri <Cecile.CAMILLIERI@i3s.unice.fr>, Clément Duffau <Clement.DUFFAU@i3s.unice.fr>, Steven Roumajon <steven.roumajon@inria.fr>
 _________________________________________________________________________________________________

Objectifs

  • Sensibilisation à la place des IHMs et des fonctionnalités au sein d’une application.
  • Mise en œuvre du concept de séparation couche de présentation / couche applicative.
  • Découverte des différents types d’applications Desktop et Mobile et des spécificités de leurs IHMs
  • Développement d’IHMs à travers différents langages (JavaFx et Android).
  • Initiation et apprentissage et/ou approfondissement selon les acquis des étudiants
 ————————————————————————————————————————————–

Orientation pédagogique du module

  • IHM JavaFx (6 séances : 5,6,7,9,10,11) : initiations / rappels des principes de base de la programmation des IHMs : TP fil Rouge.
  • IHM pour applications mobiles avec Android (6 séances : 12, 13, 14, 15,17,18) : initiation à la structure et à l’usage des applications mobiles : TP fil rouge

Le fonctionnement de ce module est un fonctionnement en mode projet avec un assistant technique spécialisé.

Vous travaillerez en groupe  et aurez des évaluations individuelles et de groupe.

Communication via Piazza : http://piazza.com/unice.fr/spring2017/eiin625

Contrôle Continu et évaluations

Les modalités des évaluations Semaine 7 et 11 seront précisées la semaine précédente (démonstration, revue de code ou soutenance). Chaque étudiant aura une part personnelle de travail à effectuer et les notes seront attribuées par étudiant.

Pour la partie Android vous aurez une note correspondant à votre travail effectué sur les séances de TP des semaines 12 et 13 en semaine 15.

Le travail Android sera noté par votre responsable de TD en semaine 20 et présenté le 9 juin où vous reprendrez le travail fait dans la partie JavaFx pour faire une comparaison avec Android.

Le devoir sur table portera sur les cours uniquement : Architecture et bonnes pratiques de programmation dans les 2 technologies.

_________________________________________________________________________________________________

Partie ANDROID : Semaines 12 à 18

Installation Android

Avant le premier cours :

installer Android Studio et un émulateur ne suffit pas, il vous faut ensuite les lancer pour pouvoir télécharger et installer les SDK Android et autres paquets nécessaires, qui sont très lourds.

Les instructions sont disponibles ici: https://docs.google.com/document/d/1555nW8ElSTtC_xfns3Qa_Btog-u1Ei4pgoogVl5CcPY/edit?usp=sharing.

Attention Ceux qui ont déjà une installation Android Studio doivent au minimum aller s’assurer qu’ils ont tout ce qui est demandé dans ces instructions afin que tout le monde travaille avec la même version des SDK Android.

__________________________________________

Sujets

Les 2 premières semaines sont des séances de TD vous permettant de vous familiariser avec les bonnes pratiques de programmation d’IHM en Android. Il s’agira de construire une liste de News pour Polytech.

Les 4 semaines suivantes vous permettront de développer une application mobile pour les clients et administrateurs soit du Centre Commercial, soit de  l’Enseigne soit du magasin : sujet à l’adresse suivante https://docs.google.com/document/d/1IFbl7R2aFmxkYDvS2K0O2a8NnOtSQ6i_roTRZEsNtxg/edit#heading=h.r1kbaldscpwn

Consignes

Vous serez évalué sur l’usage, la maitrise de la technologie et la qualité du code. Vous vous attacherez à travailler les vues : partie Front end, vous aurez un backend minimaliste.

Modalité du TP Fil rouge

Chaque étudiant développe une application correspondant à un persona en mettant en œuvre au moins 2 usages et des choix technologiques équivalents à 3 étoiles. Les choix à 1 ou 2 étoiles sont à valider avec les encadrants pour mesurer correctement leur valeur. Les étudiants travaillent séparément mais présentent à 2 (2 personas différents d’une même activité : Centre commercial / Enseigne / Magasin) pour pouvoir comparer en fonction des personas et des dispositifs : tablette / smartphone. Chaque étudiant doit être l’utilisateur de l’application de son collègue et lui  faire des retours sur les IHM proposées en termes d’usage, de choix d’interactions ou de visualisation.

Chaque étudiant rendra 1 page sur ce qu’il a retenu du travail demandé dans les 2 technologies : comparaison technologiques et retour sur les usages

———————————————————————————————————————————-

Détail des séances

Période Cours TD Evaluation
Semaines 12 et 13 Démonstration Android Studio

Introduction à Android

 

 TP apprentissage Android Semaine 14

Avancées dans le TP
Semaines 14-18 Cours Android Applications Mobiles pour « Cap Sophia and co » Semaine 18: Avancées des applications

Cours no 1 : Semaine 12

Familiarisation avec ANDROID STUDIO

TDs Semaine 12 et 13

Familiarisation avec Android

Cours no 2 : Semaine 13

Introduction à Android :

Cours no 3 : Semaine 14

En savoir plus sur les Activités, Fragments, Intents, Adapters … :

Cours no 4 : Semaine 15

En savoir plus sur le Material Design, les services…

Démonstration du 9 juin Comparaison JavaFX Android au travers de l’application Android
 ————————————————————————————————————————————–

PARTIE JavaFx Semaines 5 – 11

Installation JavaFx

Avant le premier cours :

Télécharger et installer Java 8 et SceneBuilder ainsi que Intellij ou Eclipse (suivant les préférences).
Liens utiles :
JDK8 : http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
SceneBuilder (Gluon) : http://gluonhq.com/labs/scene-builder/

__________________________________________

Sujet : Partie JavaFx

L’idée est de faciliter les courses dans les grandes zones commerciales genre Cap 3000 ou Polygone riviera.

Il y a  trois applications envisageables:

  1. Celle pour administrer le centre qui a besoin d’informations uniformes pour montrer l’ensemble des services offerts.

Le but du responsable du centre est d’attirer un maximum de visiteurs / clients dans son centre et d’avoir donc les meilleures enseignes pour le public qu’il vise.

  1. Celle des enseignes pour donner une vision claire de l’enseigne : ses produits, ses caractéristiques et points forts et pour administrer chaque magasin et  mettre en avant les points fort de l’enseigne.

Le but du responsable de l’enseigne est d’attirer les clients qui correspondent au public visé en mettant en avant les bons slogans et produits, il est aussi d’avoir des magasins rentables un peu partout en France et d’être représenté dans les plus grands centres ou zones commerciales.

  1. Celle de chaque magasin pour se conformer à l’enseigne tout en gardant sa propre « spécificité »

Le but du responsable du magasin est d’avoir une bonne visibilité dans le centre qui l’accueille, d’attirer les clients et de conserver le plus longtemps la franchise de l’enseigne.

Application pour une enseigne

Acteur / Persona : Responsable de l’Enseigne « To Be or to have »

Scénario : je suis responsable de cette nouvelle enseigne qui vend des livres, cd, dvd, stages de développement personnel… Je prépare avec notre designer les éléments représentatifs de l’enseigne et la vue publicitaire fidèle aux produits et à l’esprit de l’enseigne. J’attends que l’on me propose plusieurs mises en page avant de valider.

Vous devez fournir dans un premier temps une vue qui illustre les points forts d’une enseigne. Cette vue comprend les informations suivantes :

  1. Descriptif de l’enseigne
  2. Image représentative de l’enseigne
  3. Galerie d’images pour des produits phares
  4. Lien internet pour en savoir plus
  5. Promotions de la semaine ou informations de la semaine

Les autres aspects à étudier sont :

  1. La mise en place des informations de l’enseigne via un formulaire qui permet de créer / modifier les éléments précédents
  2. La possibilité de créer plusieurs magasins pour une enseigne via un formulaire qui permet de créer / modifier les informations concernant un magasin de l’enseigne  incluant les données suivantes :
    1. L’adresse du magasin
    2. Le centre commercial qui l’accueille si c’est le cas
    3. Les coordonnées mail et téléphone du magasin
    4. Page web du magasin
  3. La possibilité de lister l’ensemble des magasins de l’enseigne (par ville, par région, ou selon d’autres critères…)
  4. La possibilité d’avoir une vue statistique des résultats des magasins de l’enseigne : chiffre d’affaires, produits renvoyés, nombre d’employés, coût de maintenance….

Application pour un magasin

Acteur / Persona : Responsable du magasin « To Be or to have » qui se trouve dans le centre commercial Cap Sophia dans la zone industrielle Sophipolitaine.

Scénario : J’ai reçu les informations de mon enseigne, je souhaite cependant me démarquer  des autres magasins de la région car le public Sophipolitain étant très scientifique, je voudrais mettre en évidence les produits sur la Neurologie et les Sciences. Un autre aspect important est la possibilité de venir chercher une commande faite par Internet, les employés de la technopole pourront se déplacer rapidement entre midi et deux chercher leur commande. Il faut que la vue de mon magasin soit claire et efficace !

Vous devez fournir dans un premier temps une vue qui illustre les points forts d’un magasin. Cette vue comprend les mêmes informations que l’enseigne mais le magasin peut  compléter et modifier les données de l’enseigne de la façon suivante

  1. L’enseigne et son descriptif ne peuvent pas être modifiés
  2. L’enseigne gère les commandes faites par Internet
  3. La galerie d’images peut être un sous ensemble de la galerie d’images de l’enseigne ou mettre en avant d’autres produits
  4. Les promotions peuvent être différentes
  5. Les informations pour accéder au magasin – adresse no tel page web sont ajoutées

Les autres aspects à étudier sont :

  1. La possibilité modifier les informations concernant le magasin
  2. La possibilité de lister l’ensemble des magasins de l’enseigne (par ville, par région, ou selon d’autres critères…)
  3. La possibilité d’avoir une vue statistique des résultats du magasin : évolution mois par mois de données importantes : chiffre d’affaires, produits renvoyés, produits soldés
  4. La possibilité d’appliquer des réductions sur des produits en magasin

Application pour un centre commercial

Acteur / Persona : Responsable du centre commercial « Cap Sophia » qui se trouve dans la zone industrielle Sophipolitaine.

Scénario : Ce nouveau centre vise essentiellement les employés Sophipolitains  et les habitants de Valbonne, Mougins , Roquefort qui comprend entre autres beaucoup de familles, de cadres et d’anglophones. Il faut que je trouve un moyen de représenter mon centre de façon adaptée.

On part du principe que chaque magasin doit donner les informations permettant de faire une communication utile pour attirer les clients dans un format commun pour avoir une uniformité dans la présentation générale pour un centre. Ce que l’on trouve le plus souvent dans les sites webs  c’est :

  • Catégorie de magasin: (Mode Femme, Mode Enfant, Mode Homme, Jardin / Déco, Cadeaux originaux,  Restauration…
  • Descriptif de l’enseigne
  • Image représentative de l’enseigne
  • Produits phares
  • Lien internet pour en savoir plus

L’administrateur du centre commercial construit la vue générale grâce aux informations reçues. Il met en évidence certaines enseignes. Il y ajoute des informations propres au centre (localisation, activités phares : semaine Régionale dans les restaurants, papa Noel est là, 100 Euros d bons d’achat au nième visiteur…)

Vous devez fournir dans un premier temps cette vue principale qui se base sur les catégories, les enseignes phares,…

Les autres aspects à étudier sont :

  1. La possibilité de créer / modifier les informations concernant le centre
  2. Proposer des vues intéressantes pour l’ensemble des magasins du centre, par zone, par catégorie, selon d’autres critères
  3. La possibilité d’avoir une vue statistique de la fréquentation du centre : nombre de visiteurs, nombres d’acheteurs, profil des visiteurs (famille, jeunes branchés, retraités…)

———————————————————————————————————————————-

Consignes

Vous serez évalué sur l’usage, la maitrise de la technologie et la qualité du code. Vous vous attacherez à travailler les vues : partie Front end, vous aurez un backend minimaliste avec des données en dur, pour tout ce qui est visualisation des statistiques on supposera les données fournies et cohérentes.

Par contre vous proposerez des variantes des vues en vous attachant à :

  • proposer plusieurs layout et comparer : AnchorPane, BorderPane, GridPane, HBox, VBox, …
  • proposer des composants dédiés au moins un :  MediaView, WebView, ImageView, Canvas, Chart
  • utiliser des propriétés qui améliorent la visualisation  : Bordure autour de la région, Couleur ou image d’arrière-plan de la région, Marge (espace) autour du contenu de la région
  • proposer plusieurs feuilles de style : Apple Aqua (AquaFX) • Microsoft Modern UI (JMetro) Windows-7 Aero (AeroFX) • Twitter Bootstrap (Fextile) • Flatter (Embedded UI), . . .

Modalité du TP Fil rouge

Dans chaque groupe de TD vous constituerez des équipes de 6 composées de 3 binômes, chaque binôme devant traiter un des persona du sujet. Chaque équipe doit s’attacher à proposer une solution complète cohérente pour les utilisateurs. Chaque binôme étudiera un point de vue particulier : soit celui du responsable du centre commercial, soit celui du responsable d’une enseigne soit celui du responsable d’un magasin.

Dans tous les cas vous avez une livraison de base à fournir  par binôme correspondant à la vue principale et plusieurs extensions possibles. Chaque étudiant prendra en charge au moins une extension.

Le choix des extensions se fera après la première évaluation en collaboration avec les responsables de cours et de TD ; il sera différent selon les étudiants.

———————————————————————————————————————————-

Détail des séances

Période Cours TD Evaluation
Semaines 5,6 et 7 Introduction aux IHM (1)

Introduction JavaFX  (2)

Architecture IHM  (1)

 Maquettage et implémentation Vue principale Semaine 7 Démonstration maquette et avancée
Semaines 9,10,11 Rétrospective JavaFX (1) Finalisation vue principale et Extensions Semaine 11: Evaluation  des extensions

Cours no 1 : Semaine 5

Introduction à la démarche IHM – présentation des principes de base de l’architecture des systèmes intéractifs


Cours no 2 : JavaFX

Interfaces Homme Machine : Module SI3 Année 2015 2016

Cours no 1 : Semaine 5


Cours no 2 : Semaine 6

Maquettage et principes de base de la construction d’une interface graphique en JavaFx

TD no 2

Maquettage en JavaFx

Cours no 3 : Semaine 7

Présentation d’architectures logicielles pour systèmes interactifs : zoom sur MVC (ArchiIhm2016V2)

TD no 3

Première démonstration : évaluation de la maquette

Cours no 4 : Semaine 9

JavaFx Suite

TD no 4

Prise en compte des retours et finalisation de l’application

Cours no 5 : Semaine 10

A DEFINIR Interaction et  systèmes interactifs (ArchiIhm2016Suite)

TD no 5

Finalisation du système interactif

Cours no 6 : Semaine 11

?? BILAN

TD no 6

Démonstration finale

 _________________________________________________________________________________________________

Détail des séances : Partie ANDROID

Cours no 1 : Semaine 12

Familiarisation avec ANDROID STUDIO

Installation : https://docs.google.com/document/d/1gIcHhLQ5BUaAzZF_yzDQhjd_De6lxm9nqXXofWD4YYA/edit?usp=sharing

TD no 1

Familiarisation avec le Sujet  : AndroidTD

Tutoriel : Suivre les indications Tutoriel(4)

Fichiers à télécharger :

https://drive.google.com/file/d/0B_UMKY7EAPtfR1l5eV84bUE1aGM/view?usp=sharing

Cours no 2 : Semaine 13

Introduction à Android : https://drive.google.com/file/d/0B_UMKY7EAPtfQ01kZnlQY1FURjQ/view?usp=sharing

TD no 2

RAPPEL Objectifs de la séance : terminer le tutoriel et proposer une maquette pour la suite

Sujet du TD : AndroidTD

Tutoriel : Suivre les indications Tutoriel(4)

Fichiers à télécharger :

https://drive.google.com/file/d/0B_UMKY7EAPtfR1l5eV84bUE1aGM/view?usp=sharing

Cours no 3 : Semaine 14

Les activités : https://drive.google.com/file/d/0B_UMKY7EAPtfQUplanNRS2pLb3c/view?usp=sharing

TD no 3

RAPPEL Objectifs de la séance :avancer votre activité

Sujet du TD : AndroidTD

Cours no 4 : Semaine 15

Les Fragments, Intents, AsyncTasks : AndroidCours3

TD no 4

Première démonstration

Sujet du TD : AndroidTD

TD no 5 : Semaine 16

Objectifs de la séance : INTEGRATION

Sujet du TD : AndroidTD

Cours no 6 : Semaine 17

Cours de Conclusion

https://drive.google.com/file/d/0B_UMKY7EAPtfSGJ6dFFOTEU3TVU/view?usp=sharing

TD no 6

Finalisation

Sujet du TD : AndroidTD

Semaine 18 RENDU Analyse comparative approche JavaFx et Android
 

__________________________________________________________________________________________________

Interfaces Homme Machine : Module SI3 Année 2015 2016

DUREE : 12 semaines
Responsable cours : A. Occello & AM Dery-Pinna
Responsable partie Android : A-M. Dery-Pinna
Responsable partie Web : R. Pighetti
Responsables TD : Oscar Rodríguez Rocha <oscar.rodriguez-rocha@inria.fr> et Cécile Camillieri <Cecile.CAMILLIERI@polytech.unice.fr>

Objectifs

  • Sensibilisation à la place des IHMs et des fonctionnalités au sein d’une application.
  • Mise en œuvre du concept de séparation couche de présentation / couche applicative.
  • Découverte des différents types d’applications et des spécificités de leurs IHMs
  • Développement d’IHMs à travers différents langages.

Orientation pédagogique du module

  • IHM SWING (5 séances) : initiations / rappels des principes de base de la programmation des IHMs : application au projet DEVINT
  • IHM pour applications mobiles avec Android (5 séances) : initiation à la structure et à l’usage des applications mobiles : TP fil rouge
  • IHM pour applications web (web applications) avec AngularJS /bootstrap (2 séances) : introduction au projet de fin de semestre

Le fonctionnement de ce module est un fonctionnement en mode projet avec toutes les séances de TD obligatoires avec un assistant technique spécialisé.

Vous travaillerez en groupe de 4 étudiants et aurez des évaluations individuelles et de groupe.

Détail des séances : Partie SWING

Cours no 1

Introduction à la démarche IHM – présentation des proncips de base de l’architecture des systèmes intéractifs


TD no 1

Terminer le tuto DEVINt et mettre en place les extensions demandées et celles de votre choix

Cours no 2

(CoursSwingComp) Introduction à la bibliothèque SWING – principation des principes de base de la construction d’une interface graphique.

TD no 2

Spécification du jeu DEVINT – maquettage et intégration dans le module de jeu – architecture de votre jeu.

Cours no 3

Présentation d’architectures logicielles pour systèmes interactifs : zoom sur MVC (ArchiIhm2016V2)

N’oubliez pas de préparer le Devoir et TD MVC à rendre en binôme le 3 avril sur GIT (Sujet MVC)

TD no 3

Codage du jeu DEVINT

Cours no 4

Annulé

TD no 4

Codage du jeu DEVINT

Cours no 5

Interaction et  systèmes interactifs (ArchiIhm2016Suite)

TD no 5

Bilan Codage du jeu DEVINT et devoir MVC

Détail des séances : Partie ANDROID

Cours no 1

Familiarisation avec ANDROID STUDIO

Installation : https://docs.google.com/document/d/1gIcHhLQ5BUaAzZF_yzDQhjd_De6lxm9nqXXofWD4YYA/edit?usp=sharing

TD no 1

Sujet du TD : AndroidTD

Tutoriel : Suivre les indications Tutoriel(4)

Fichiers à télécharger :

https://drive.google.com/file/d/0B_UMKY7EAPtfR1l5eV84bUE1aGM/view?usp=sharing

Cours no 2

Introduction à Android : https://drive.google.com/file/d/0B_UMKY7EAPtfQ01kZnlQY1FURjQ/view?usp=sharing

TD no 2

RAPPEL Objectifs de la séance : terminer le tutoriel et proposer une maquette pour la suite

Sujet du TD : AndroidTD

Tutoriel : Suivre les indications Tutoriel(4)

Fichiers à télécharger :

https://drive.google.com/file/d/0B_UMKY7EAPtfR1l5eV84bUE1aGM/view?usp=sharing

Cours no 3

Les activités : https://drive.google.com/file/d/0B_UMKY7EAPtfQUplanNRS2pLb3c/view?usp=sharing

TD no 3

RAPPEL Objectifs de la séance :avancer votre activité

Sujet du TD : AndroidTD

Cours no 4

Les Fragments, Intents, AsyncTasks : AndroidCours3

TD no 4

RAPPEL Objectifs de la séance :avancer votre activité : DERNIERE SEANCE AVANT L’INTEGRATION

Sujet du TD : AndroidTD

TD no 5

Objectifs de la séance : INTEGRATION

Sujet du TD : AndroidTD

Cours de Conclusion

https://drive.google.com/file/d/0B_UMKY7EAPtfSGJ6dFFOTEU3TVU/view?usp=sharing

 

Planning Revue de code Séance du 3 juin

Heure de passage Groupe Jury
Anne Marie Dery & Cécile Camillieri
8H00 AIELLO MORAS PEPIN PRESTINI
8H30 LASKAR ZAGO DE LA RED PAUMBO
9H00 DUGLUE GIROUD KALOUSTIAN  LAFON
9H30 BAR BONIFACCI METGE
9H50 AKHMADOV ALONZO LEVY MERINO
10H10 BERGER NAZIHI
10H25 DENGREVILLE MUNOZ PIAT  ZHELTANOSAVA
10H55 MONZEIN BERNARD LUPIAC AUBE
11H25 DALIE ROSE
11H35 GONIN JALABERT STEYER
11H55 GILLOT CHAUDRON
12H10 LAFAURIE COSTA
Anne Marie Dery & Oscar Rodriguez Rocha
13H30

14H

 ASWAD RICCIO RAYBAUD RAMI

MAHIEUX KUMAR ARNAUD FILIOL
14H30 BORRY HERMENT GRIVON JUNGBLUTH
15H00 CAMOUSSEIGHT LOROSCIO
15H15 CAVALCANTE DA SILVA Gabriela, LOPES DE OLIVEIRA Raquel, COLLE César et XIOHAN Huang
15H45 JABIRI AIT ERRAMI
16H00 JACQUOT LEQUIENTY
16H15 ANDOLERZAK FRIEDEL BOUCHER-THOUVENY TOCCI
16H45 FRASQUET SBAYTTI BERTOT
17H05 WANG TANG
17H20 TERRIS GHIRA RABENANDRASANA
17H40 CHEVALIER ELHAOURI GNING MONIER
17H55

 

Détail des séances : Partie WEB

Cette partie prépare le projet SI3 de fin de semestre avec la prise en mail du framework pour Angular.

Cours no 1

Cours et ressources intéressantes pour la prise en main d’Angular sur la page suivante: http://users.polytech.unice.fr/~pighetti/pooihm_2016/

Installation

Pour ce qui est de l’installation, il vous faudra avant tout installer NodeJS, le site est donné dans le document TD.pdf (pour les utilisateurs Linux attention à la version dans vos paquets qui n’est pas toujours la dernière…).
Vous pouvez ensuite suivre les indications de la page citée dans « Mettre en place une application Angular avec Yeoman » pour créer le socle de votre application.
Différentes ressources vous sont données dans le document TD.pdf pour commencer à prendre en main le framework et savoir où trouver la documentation.
N’oubliez pas que bower install ne fonctionnera pas sur le réseau unice hotspot à cause des restrictions appliquées sur ce réseau. Par conséquent, la création d’une nouvelle application avec yeoman (yo angular) finira forcément par échouer puisque cette commande appelle bower install, qui ne pourra s’exécuter correctement. Si bower install échoue et que vous devez l’arrêter, je vous recommande vivement de supprimer le dossier bower_components et de relancer bower install en vous assurant d’être sur un réseau permettant son exécution complète.

Mode d’évaluation

Partie SWING

Dans la cadre de la partie Swing vous aurez une note de suivi du travail à chaque séance.
0 ABSENT ou Rien a été fait
5 Travail insuffisant
10 Travail tout juste satisfaisant
15 Objectifs attendus atteints
20 Au delà des objectifs espérés.
Vous aurez une démonstration argumentée (revue de code) en semaine 14
Vous aurez un rapport à rendre en MVC
Attention dans ce module nous attachons de l’importance à la progression des étudiants.

Partie ANDROID

1. Eval TD Android

Les séances 1 et 2 sont notées comme d’habitude sur le principe du 0, 10, 15, 20
Les séances 3 et 4 ne sont pas notées.
Lors de La séance  5  vos encadrants vérifient l’état d’avancée de chacune des parties en début de séance.  La note de TD correspond à ce travail.

2. Rendu Android

Par mail l’apk, les sources et un fichier README contenant la répartition du travail.
Le mail DOIT avoir  pour destinataires votre responsable de TD et le responsable du cours  et pour titre RENDU ANDROID : noms des membres du groupe.
Ce mail doit être reçu AVANT le dimanche 1er mai 23:59 heure de Paris.

3. Revue de code Android

Vendredi 3 juin, 20 minutes par groupe.
Vous devrez montrer le code livré.
Planning à venir

Ensemble des cours

Les coefficients suivants seront appliqués : 1/3 TD SWING, 1/3 suivi de TD ANDROID et 1/3 devoir surveillé (questions sur les cours).
Le devoir sur table portera sur l’ensemble des cours de la matière.

————————————————————————————–

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *