https://air.imag.fr/api.php?action=feedcontributions&feedformat=atom&user=Sebastien.Toussaint 2026-05-31T10:52:13Z User contributions MediaWiki 1.39.17 https://air.imag.fr/index.php?title=Projets-2015-2016-SmartClassRoom&diff=28118 2016-03-17T09:02:15Z

<p>Sebastien.Toussaint: /* Snake */</p> <hr /> <div>= Project presentation=<br /> <br /> Pour la présentation du sujet nous avons fait le choix d'utiliser la technique '''QQQOP''' qui permet de mobiliser ses connaissances d'une manière structurée. Cela nous à notamment permet de prendre en main le smartClassroom qui est dit &quot;très libre&quot;. <br /> <br /> Afin de donner une analyse structuré de notre projet nous avons rédigé un fiche '''&quot;Software Requirements Specification&quot;''' (SRS) .<br /> <br /> == Qui ? ==<br /> <br /> Le projet est suivi par deux encadrant : <br /> <br /> '''- Monsieur Didier DONSEZ'''<br /> <br /> '''- Monsieur Jérôme MAISONNASSE'''<br /> <br /> <br /> L’équipe en charge du projet est divisé en deux, 4 élèves de la filière RICM5 de Polytech Grenoble :<br /> <br /> '''- HAMDANI Youcef'''<br /> <br /> '''- MESNIER Vincent'''<br /> <br /> '''- SAUSSAC Thibault'''<br /> <br /> '''- TOUSSAINT Sébastien'''<br /> <br /> <br /> Viendront compléter l’équipe, deux étudiant de DUT Réseaux et Télécoms (première année). <br /> <br /> '''- SAK Melik'''<br /> <br /> '''- ZOPP Sébastien'''<br /> <br /> == Quoi ? Définition du sujet ==<br /> <br /> L'objectif à moyen voir à long terme de ce projet est de mettre en place des technologies qui permettent d'améliorer les enseignements dans les salles de cours en utilisant des technologies innovantes inspiré par des résultats de travaux de recherche.<br /> <br /> On peut ainsi imaginer des activités pédagogiques interactives comme des évaluations fournissant des réponses instantanées et permettant ainsi aux enseignants de voir quand un concept doit être révisé ou quand ils doivent davantage aider les élèves. Ce projet est donc principalement destiné aux enseignants. Il leur permettra de passer d'un type d'enseignement à un autre plus évolué, c'est à dire gérer plus efficacement leurs classes, et évaluer la compréhension des élèves durant le cours. On distingue ensuite les élèves qui pourront entre autres organiser leurs propres fichiers multimédias, prendre des notes, collaborer avec d'autres élèves ou partager des fichiers avec les enseignants.<br /> <br /> <br /> ==Quand ? ==<br /> <br /> L’objectif est d’utiliser ce projet durant différents cours, les conférences ou dans journées portes ouvertes afin de mettre en avant l’école.<br /> <br /> <br /> ==Où ? Le lieu où se situe le projet==<br /> <br /> Ce projet pourra s’implanter dans les différentes salles de cours dans les universités de France, dans un premier temps sur le campus Grenoblois.<br /> <br /> <br /> ==Pourquoi ?==<br /> <br /> - Faire évoluer l’enseignement en apportant plus de technologie (interaction) qui est aujourd’hui un facteur important dans l’apprentissage.<br /> <br /> - Ne pas prendre de retard en cas d’absence puisqu’un élève pourra suivre un cours à distance depuis un hôpital ou simplement depuis chez lui.<br /> <br /> - Facilité l’accès aux informations en ayant une plateforme collaborative entre professeurs et étudiants.<br /> <br /> - D’un point de vue santé ce projet permet d’éviter la surcharge des sacs des étudiants. Facilité le coté administratif en gérant la présence des élèves de manière automatiques. (Le temps pour faire l’appel en début de cours ne sera plus nécessaire.)<br /> <br /> ==Software Requirements Specification==<br /> &quot;A software requirements specification (SRS) is a description of a software system to be developed. It lays out functional and non-functional requirements, and may include a set of use cases that describe user interactions that the software must provide.&quot;(src. Wikipédia)<br /> <br /> Vous pouvez consulter notre SRS en cliquant sur le liens ci-dessous :<br /> [[Projets-2015-2016-SmartClassRoom/SRS|Fiche SRS]]<br /> <br /> ==Product functions==<br /> <br /> ==Product evolution==<br /> <br /> =Links=<br /> <br /> =Project schedule=<br /> <br /> Le projet a commencé depuis le 25 Janvier 2015 à 10h30.<br /> <br /> Pour ce projet nous avons fais le choix, sous l'influence de Monsieur Donsez d'utiliser les méthodes agiles afin d'avoir un suivis régulier et un travail organisé. De plus, la méthode SCRUM apporte une grande flexibilité pour le projet ce qui nous parait intéressant au vu de la composition de l'équipe ayant des compétences et des emploi du temps très différents (DUT et Polytech).<br /> <br /> Nous avons commencé par faire un planning de Gantt afin d'avoir un vision global du projet. Je vous laisse ci-dessous prendre connaissance du diagramme que vous avons mis en place. Vous aurez ensuite tous le travaille détaillé STEP by STEP ;)<br /> <br /> [[File:Projets-2015-2016-Gantt.png | 600px| center]]<br /> <br /> <br /> <br /> == Week 1 (January, 25th - February, 1st) ==<br /> === Travail Réalisé === <br /> <br /> '''- Comprendre le sujet, et le définir''' <br /> - Cette objectif est de récupérer des informations et d'avoir des idées innovantes afin de p<br /> <br /> '''- Récupération de nouvelles idées'''<br /> - Connexion smartphone - Table --&gt; Afficher le contenu d'un smartphone sur une table<br /> - Faire bouger des objets avec des gestes élémentaires via le rétroprojecteur <br /> - Chat permettant la communication intra classe <br /> - Animation de figures avec moteurs physiques<br /> - Projection 3D (pour effet Lumière à Lyon)<br /> '''- Rendez-vous avec Jérome Maisonnasse'''<br /> - Jérome nous a donnée différentes idée pour le projet Smartclassroom. Cependant le code n'étant pas disponible il se <br /> charge de le trouver pour le sprint suivant.<br /> '''- Contact des anciens (Projet SmartClassroom 2015)'''<br /> - Nous avons contacter Malick et Adam qui nous ont bien expliqué les travaux qu'ils ont réalisés l'an dernier. <br /> Nous donnant de nouvelles idées d'amélioration (voir ci-dessus)<br /> '''- Création du Wiki'''<br /> - Création de la page [[Projets-2015-2016-SmartClassRoom/SRS | SRS]]<br /> - Création de la page du projet [[Projets-2015-2016-SmartClassRoom | SmartClassRoom]]<br /> <br /> === Rétrospective Sprint 1 ===<br /> <br /> Ce Sprint 1 c'est bien passé nous avons pu réalisé les différentes taches prévu. L'aide des anciens (Malick), de Messieurs DONSEZ &amp; MAISONNASSE nous a été très importante pour comprendre le context et le but du projet. <br /> <br /> Nous avons pu mettre en place un planing dans le groupe l'organisation dans les différentes taches de récupérations d'informations a été très bonne.<br /> <br /> == Week 2 (February, 2nd - February, 8th) ==<br /> === Travail Réalisé ===<br /> <br /> '''- Installation de l'application sur les Tables de la FABLAB''' <br /> - Récupération du code de l'an dernier<br /> - Brancher les machines sur un switch<br /> - Allez dans le projet /SmartClassRoom --&gt; executer web.js<br /> - Sur les 3 tables ouvrir un navigateur (Chrome de préférence)<br /> - Entrez dans le navigateur : @IPserveur:8080<br /> - (L'adresse mise dynamiquement mise si problème aujouté manuellement)<br /> - Profitez ....<br /> <br /> '''- Quelques nouvelles idées'''<br /> - Etendre le &quot;screen&quot; à des tablettes.<br /> - Mettre les cours du prof directement en ligne depuis la caméra du rétroprojecteur<br /> - Configuration de la localisation des tables plus dynamique<br /> <br /> '''- Première lecture du code'''<br /> - Analyser le code pour voir la conception du projet.<br /> - Étude du ping pong<br /> <br /> '''- Début du développement d'un CHAT en JavaScript'''<br /> - Nous voulions mettre en place en chat <br /> - Utilisation du JAVASCRIPT pour un chat<br /> <br /> '''- Définitions des tâches '''<br /> - Réunion avec les DUTs<br /> - Le javascript est t'il possible pour un chat?<br /> - Rédaction de tutoriel d'installation de l'application<br /> - Apport de nouvelles idées<br /> <br /> <br /> === Rétrospective Sprint 2 ===<br /> <br /> Durant ce sprint nous avons pris un peu de retard pour l'implémentation du code. Impossibilité d'exécuter le code sur nos machines personnelles, de plus nous n'avons pas encore eu la démo pour le rétroprojecteur (ni le code).<br /> <br /> Cependant nous avons pu avancer sur des taches parallèles. L'ambiance dans le groupe est bonne, malgré les difficultés pour récupérer le code qui nous fait perdre pas mal de temps<br /> <br /> == Week 3 (February, 9th - February, 15th) == <br /> ===Objectifs===<br /> '''- Récupérer l'ensemble du code'''<br /> '''- Conception'''<br /> '''- Début du développement'''<br /> <br /> ===Travail Réalisé===<br /> '''- Demonstration du projet de tableau intelligent'''<br /> - Prise en main de l'application<br /> '''- Implémentation d'un chat'''<br /> - Développement du chat en Javascript <br /> - Intégration du chat dans l'application principale<br /> '''- Etude de l'affichage des tables tactiles '''<br /> - Analyse du code de l'affichage existant <br /> - Recherche et analyse de différents type d'affichage en Javascript<br /> '''- Problèmes rencontrés '''<br /> - Difficulté d'intégration du chat dans l'application principale.<br /> - Interrogation sur le projet du tableau intelligent, car les moyens de détection et d'interaction vont changer<br /> <br /> <br /> === Rétrospective Sprint 3 ===<br /> Durant ce sprint l'ensemble des objectifs fixés ont été réalisé, de plus toujours une bonne entente dans le groupe. Les journées ont été chargé du fait de certain cours en parallèle. Le Chat est maintenant en place, ce qui est la satisfaction de la semaine.<br /> <br /> == Week 4 (February, 16th - February, 22nd) ==<br /> === Objectifs ===<br /> '''- Finir l'intégration du chat'''<br /> '''- Choix d'implémentation de la configuration pour l'affichage'''<br /> '''- Réflexion sur le tableau intelligent'''<br /> <br /> ===Travail Réalisé===<br /> '''- Le chat est maintenant fonctionnel'''<br /> - Intégration du Chat dans le projet <br /> - Voir les personnes en Ligne<br /> - Correction des bugs lors du passage PC - tablette<br /> - Mode de connexion<br /> '''- Le NFC'''<br /> - Donnez aux DUT pour débriefing pour voir si c'est adapter<br /> '''- Rotation et zoom d'images '''<br /> - Implementation de la rotation, translation et zoom de plusieurs images<br /> - Il faut maintenant l'intégrer au projet<br /> '''- Snake '''<br /> - Nous sommes entrain d'intégrer un snake dans la liste des jeux disponibles sur l'application<br /> - Quelques problèmes avec l'intégration.<br /> '''- Configuration dynamique d'image '''<br /> - Nous avons beaucoup étudier le code, merci notamment à Adam. Nous pouvons partager l'écran en 2, 3 ou 4 sur les tablettes choix dynamique.<br /> <br /> <br /> === Rétrospective Sprint 3 ===<br /> Durant ce sprint l'ensemble des objectifs fixés ont été réalisé, Nous avons notamment mis au point la stratégie suivante :<br /> Nous focaliser les 3 objectifs , l'intégration du snake, la configuration dynamique des écrans et enfin le rotozoom des images.<br /> L'ambiance a été bonne durant ce sprint.<br /> <br /> == Week 5 (February, 23rd - March, 1st) ==<br /> <br /> Interruption pédagogique d'une semaine, rédaction du Wiki<br /> <br /> == Week 6 (March, 1nd - March, 7th) ==<br /> <br /> ===Objectifs===<br /> '''- Récupérer l'ensemble du code'''<br /> '''- Conception'''<br /> '''- Début du développement'''<br /> <br /> ===Travail Réalisé===<br /> '''- Réparation de la table cassé'''<br /> - Changement du nock avec installation de la distribution.<br /> - Nouveau mot de passe = admin<br /> '''- Snake'''<br /> - Le grand écran du snake<br /> - En cours d'intégration du Tweldisplay<br /> '''- Configuration des tables tactiles '''<br /> - Création d'une interface pour une configuration dynamique<br /> - Début du code moteur pour intégrer la solution dynamique à l'application.<br /> '''- Préparation de la JPO Polytech'''<br /> - Préparation de la démo pour la journée Porte ouverte à Polytech<br /> '''- Modification des images '''<br /> - Possibilité de faire bouger une image, de la zoomer etc...<br /> - ajouter la rotation de l'image dans le canevas<br /> <br /> <br /> === Rétrospective Sprint 6 ===<br /> Durant ce sprint l'ensemble des objectifs fixés ont été réalisé, de plus toujours une bonne entente dans le groupe. Les journées ont été chargées. Bientôt trois nouvelles fonctionnalité seront disponible.<br /> <br /> == Week 7 (March, 8th - March, 13rd) ==<br /> === Objectifs ===<br /> '''- Finir la configuration dynamique des tables'''<br /> '''- Gérer le changement d'écran du Snake'''<br /> '''- Finir les action sur une image'''<br /> <br /> ===Travail Réalisé===<br /> '''- Rendu dossier MPI'''<br /> - Rendu du dossier pour le cours d'MPI<br /> - vous pouvez le consulter ici : [[File:MPI_SmartClassRoom.pdf ]]<br /> '''- NFC'''<br /> - Nous avons chargé les DUT de s'occuper du NFC il rencontre beaucoup de problèmes par rapport à l'installation ce qui nous donner au finale beaucoup de travail pour du Débug.<br /> '''- Configuration des tables tactiles '''<br /> - voir le tutoriel sur la configuration dynamique des tables : [[Projets-2015-2016-SmartClassRoom#Configuration_Dynamiques_des_Tables |Tutoriel configuration dynamique]]<br /> <br /> '''- Snake'''<br /> - Quelques problème avec le twiled display, en espérant règler les problèmes ce week end pour intégrer Lundi <br /> '''- Modification des images '''<br /> - Possibilité de faire bouger une image, de la boomer etc...<br /> '''- Problèmes '''<br /> - La cohabitation entre NOWJS (l'ensemble de projet à été codé avec cette librairie) et socket IO. Nous avons eu beaucoup de mal à trouver un solution pour remplacer NOWJS puisque cette librairie n'existe plus nous avons du faire le choix d'utiliser SocketIO. La grande difficulté à été de faire cohabité ces deux librairies.<br /> <br /> === Rétrospective Sprint 6 ===<br /> Durant ce sprint l'ensemble des objectifs fixés ont été réalisé, de plus toujours une bonne entente dans le groupe. Les journées ont été chargées. Bientôt trois nouvelles fonctionnalité seront disponible.<br /> <br /> == Week 8 (March, 9st - March, 17th) ==<br /> ===Objectif ===<br /> === Travail Réalisé === <br /> ''' - Debugging du jeux Snake '''<br /> -Debug du mode tiled (multijoueurs), gestion des collisions et des murs non bloquants<br /> <br /> '''-Implémentation du bouton &quot;quit&quot; sur le Snake'''<br /> -Pour le mode fullScreen et TiledDisplay<br /> <br /> '''-Réalisation de la video-Screencast pour le rendu (disponible [https://www.youtube.com/watch?v=FEwoA4S9rsM&amp;feature=youtu.be ici])<br /> <br /> '''-Rédaction du wiki'''<br /> <br /> '''-Mise en place de la démo pour la soutenance'''<br /> <br /> '''-Préparation de la soutenance (oral et powerpoint)'''<br /> <br /> = Bilan =<br /> <br /> <br /> == Travail Réalisé ==<br /> === Configuration Dynamiques des Tables===<br /> <br /> La configuration des tables dynamiques est une partie importante de notre projet, en effet nous avons mis en place un système permettant à l'utilisateur de choisir sa position par rapport aux autres. Ainsi avec cette nouvelle évolution, l'administrateur pourra définir le nombre de tablette suivant L*l (Longueur * largeur) ou Lignes * Colonnes.<br /> <br /> Nous allons maintenant voir comment cela fonctionne sur les écrans.<br /> <br /> Tout d'abord il vous faut lancer l'application :<br /> - Allez dans ifconfig et notez l'adresse IP de cette machine<br /> - Allez dans le répertoire SMARTCLASSROOM<br /> - Lancer web.js : nodejs ./web.js<br /> - Ouvrir un navigateur (Chrome)<br /> - Je vous laisse rentrer votre Login<br /> <br /> Passons maintenant à la partie intéressante pour configurer les tables dynamiquement.<br /> Pour cela :<br /> Allez dans : <br /> - Menu<br /> - Picture<br /> - Select Picture<br /> - Choisi une image<br /> <br /> [[File:Projets-2015-2016-SmartClassRoom_ConfigTable1.png | 600px| center]]<br /> Je vous laisse maintenant entrer le nombre de lignes et de colonne pour les tables que vous avez actuellement. ( Par exemple ici nous allons faire une configuration 2*2)<br /> <br /> <br /> <br /> [[File:Projets-2015-2016-SmartClassRoom_ConfigTable2.png | 600px| center]]<br /> <br /> Le serveur enverra à chaque machine la disposition des tables qui a été rentré il ne reste plus qu'a l'administrateur de choisir sa position pour chaque machine (suivant les places qui ne sont pas encore utilisés)<br /> <br /> [[File:Projets-2015-2016-SmartClassRoom_ConfigTable3.png | 600px| center]]<br /> <br /> L'application se chargera de couper l'image comme nous l'avons défini précédemment, je vous laisse prendre connaissant ci-dessous le résultat de la découpe d'écran. <br /> <br /> [[File:Projets-2015-2016-SmartClassRoom_ConfigTable4.png | 600px| center]]<br /> <br /> === Touch Interaction ===<br /> <br /> === Chat ===<br /> <br /> Le chat, que nous avons réalisé, est fait à l'aide de la bibliothèque [http://socket.io Socket.io]. Elle se base sur plusieurs techniques différentes qui permettent la communication en temps réel comme WebSocket. Socket.io fonctionne sous forme d'événements comme un événement lors d'une connexion ou une déconnexion. On peut émettre des événements. Le principe de Socket.io c'est que le client et le serveur peuvent émettre et recevoir des événements en temps réel et ainsi réagir en conséquence. De plus, il est possible de transmettre des données avec ces événements<br /> Le serveur (celui qui lance le nodeJS) possède tout ce qui a en commun et le diffuse au client qui l'affiche dans le html.<br /> <br /> <br /> En faite le serveur (WEB.JS) permet de gérer les connexions de clients c'est dans ce fichier que se fait la connection, la déconnection et l'émission d'un message vers les clients.<br /> <br /> <br /> Dans le HTML, qui sera chargé par chaque client, nous gérons la réception des messages, la récupération des champs INPUT et l'émission vers web.js<br /> <br /> <br /> L'utilisateur doit rentrer un pseudonyme avant de pouvoir utiliser le chat. On peut voir la liste des utilisateurs connectés, réinitialiser la conversation et quitter le chat. Pour utiliser toute l'application, l'utilisateur doit rentrer un pseudonyme pour voir le menu s'afficher.<br /> <br /> [[File:Projets-2015-2016-SmartClassRoom_Chat6.png | 800px| center]]<br /> <br /> === Snake ===<br /> <br /> L'objectif est de réaliser une autre application multi-utilisateur avec une gestion de l'affichage en Tiled Display (comme le jeux PingPong). Nous avons donc choisi le jeux classique Snake. Pour cela, nous sommes parti d'un snake basique réalisé en JavaScript et nous avons apporté des modification pour que celui ci fonctionne avec le projet (Nous nous sommes aidés d'un jeux déjà réalisé Ping Pong).<br /> <br /> Dans notre Snake nous avons choisi d'implémenter deux modes de jeu :<br /> <br /> - Un premier mode un-joueur. Ce mode permet de jouer au Snake Classique avec des bords bloquants. Pour réaliser cette partie, nous avons adapter le Snake afin qu'il puisse être affichable dans une de nos &quot;canvas&quot;. Puis nous avons implanté le code nécessaire afin que le Snake puisse se jouer en &quot;mode grand écran&quot;.<br /> <br /> - Un deuxième mode multi-joueur, qui permet à plusieurs personnes de jouer en Snake. Dans cette version nous avons défini des murs bloquants et non bloquants. Les murs non bloquants permettent de passer le Snake d'un utilisateur à l'autre.<br /> <br /> <br /> Afin d'implanté le Snake dans l'application existante, nous avons utilisé les principes mis en place par les étudiants de l'année 2014-2015. C'est dire que le jeu fonctionne selon un modèle d'architecture en deux couches. Il y a tout d'abords une partie moteur qui calcul et transmet les informations de position du Snake. Puis nous avons la vue qui affiche les éléments calculés par le moteur.<br /> <br /> En mode multi-joueur, ce qui se passe sur les écrans des différents joueur dépend de la location du Snake. L'écran qui possède le Snake sollicitera le moteur pour faire les calculs de déplacement et autres. Tandis que les autres écrans seront neutre, mis à part l'affichage du score qui changera en fonction des éléments mangés par le Snake.<br /> <br /> IMG and IMG<br /> <br /> En résumé les différences notables entre les deux modes du jeux Snake sont :<br /> - la présence du bouton « quit » sur l'écran du jeu multi-joueur<br /> <br /> - la présence de mur non bloquants dans le mode multi-joueur<br /> <br /> == Difficultés rencontrées ==<br /> <br /> <br /> <br /> == Notre ressenti ==<br /> <br /> <br /> <br /> <br /> = Références =<br /> <br /> <br /> =Matériels fournis=<br /> * [[MAG3110|MAG3110 Triple Axis Magnetometer Breakout Module]]<br /> * Lecteur [[Near Field Communication|NFC]]<br /> ** [[ACS ACR 122]] x1<br /> ** [[SCL3711]] x4<br /> * Tags NFC MiFare</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=Projets-2015-2016-SmartClassRoom&diff=28117 2016-03-17T09:01:45Z

<p>Sebastien.Toussaint: /* Snake */</p> <hr /> <div>= Project presentation=<br /> <br /> Pour la présentation du sujet nous avons fait le choix d'utiliser la technique '''QQQOP''' qui permet de mobiliser ses connaissances d'une manière structurée. Cela nous à notamment permet de prendre en main le smartClassroom qui est dit &quot;très libre&quot;. <br /> <br /> Afin de donner une analyse structuré de notre projet nous avons rédigé un fiche '''&quot;Software Requirements Specification&quot;''' (SRS) .<br /> <br /> == Qui ? ==<br /> <br /> Le projet est suivi par deux encadrant : <br /> <br /> '''- Monsieur Didier DONSEZ'''<br /> <br /> '''- Monsieur Jérôme MAISONNASSE'''<br /> <br /> <br /> L’équipe en charge du projet est divisé en deux, 4 élèves de la filière RICM5 de Polytech Grenoble :<br /> <br /> '''- HAMDANI Youcef'''<br /> <br /> '''- MESNIER Vincent'''<br /> <br /> '''- SAUSSAC Thibault'''<br /> <br /> '''- TOUSSAINT Sébastien'''<br /> <br /> <br /> Viendront compléter l’équipe, deux étudiant de DUT Réseaux et Télécoms (première année). <br /> <br /> '''- SAK Melik'''<br /> <br /> '''- ZOPP Sébastien'''<br /> <br /> == Quoi ? Définition du sujet ==<br /> <br /> L'objectif à moyen voir à long terme de ce projet est de mettre en place des technologies qui permettent d'améliorer les enseignements dans les salles de cours en utilisant des technologies innovantes inspiré par des résultats de travaux de recherche.<br /> <br /> On peut ainsi imaginer des activités pédagogiques interactives comme des évaluations fournissant des réponses instantanées et permettant ainsi aux enseignants de voir quand un concept doit être révisé ou quand ils doivent davantage aider les élèves. Ce projet est donc principalement destiné aux enseignants. Il leur permettra de passer d'un type d'enseignement à un autre plus évolué, c'est à dire gérer plus efficacement leurs classes, et évaluer la compréhension des élèves durant le cours. On distingue ensuite les élèves qui pourront entre autres organiser leurs propres fichiers multimédias, prendre des notes, collaborer avec d'autres élèves ou partager des fichiers avec les enseignants.<br /> <br /> <br /> ==Quand ? ==<br /> <br /> L’objectif est d’utiliser ce projet durant différents cours, les conférences ou dans journées portes ouvertes afin de mettre en avant l’école.<br /> <br /> <br /> ==Où ? Le lieu où se situe le projet==<br /> <br /> Ce projet pourra s’implanter dans les différentes salles de cours dans les universités de France, dans un premier temps sur le campus Grenoblois.<br /> <br /> <br /> ==Pourquoi ?==<br /> <br /> - Faire évoluer l’enseignement en apportant plus de technologie (interaction) qui est aujourd’hui un facteur important dans l’apprentissage.<br /> <br /> - Ne pas prendre de retard en cas d’absence puisqu’un élève pourra suivre un cours à distance depuis un hôpital ou simplement depuis chez lui.<br /> <br /> - Facilité l’accès aux informations en ayant une plateforme collaborative entre professeurs et étudiants.<br /> <br /> - D’un point de vue santé ce projet permet d’éviter la surcharge des sacs des étudiants. Facilité le coté administratif en gérant la présence des élèves de manière automatiques. (Le temps pour faire l’appel en début de cours ne sera plus nécessaire.)<br /> <br /> ==Software Requirements Specification==<br /> &quot;A software requirements specification (SRS) is a description of a software system to be developed. It lays out functional and non-functional requirements, and may include a set of use cases that describe user interactions that the software must provide.&quot;(src. Wikipédia)<br /> <br /> Vous pouvez consulter notre SRS en cliquant sur le liens ci-dessous :<br /> [[Projets-2015-2016-SmartClassRoom/SRS|Fiche SRS]]<br /> <br /> ==Product functions==<br /> <br /> ==Product evolution==<br /> <br /> =Links=<br /> <br /> =Project schedule=<br /> <br /> Le projet a commencé depuis le 25 Janvier 2015 à 10h30.<br /> <br /> Pour ce projet nous avons fais le choix, sous l'influence de Monsieur Donsez d'utiliser les méthodes agiles afin d'avoir un suivis régulier et un travail organisé. De plus, la méthode SCRUM apporte une grande flexibilité pour le projet ce qui nous parait intéressant au vu de la composition de l'équipe ayant des compétences et des emploi du temps très différents (DUT et Polytech).<br /> <br /> Nous avons commencé par faire un planning de Gantt afin d'avoir un vision global du projet. Je vous laisse ci-dessous prendre connaissance du diagramme que vous avons mis en place. Vous aurez ensuite tous le travaille détaillé STEP by STEP ;)<br /> <br /> [[File:Projets-2015-2016-Gantt.png | 600px| center]]<br /> <br /> <br /> <br /> == Week 1 (January, 25th - February, 1st) ==<br /> === Travail Réalisé === <br /> <br /> '''- Comprendre le sujet, et le définir''' <br /> - Cette objectif est de récupérer des informations et d'avoir des idées innovantes afin de p<br /> <br /> '''- Récupération de nouvelles idées'''<br /> - Connexion smartphone - Table --&gt; Afficher le contenu d'un smartphone sur une table<br /> - Faire bouger des objets avec des gestes élémentaires via le rétroprojecteur <br /> - Chat permettant la communication intra classe <br /> - Animation de figures avec moteurs physiques<br /> - Projection 3D (pour effet Lumière à Lyon)<br /> '''- Rendez-vous avec Jérome Maisonnasse'''<br /> - Jérome nous a donnée différentes idée pour le projet Smartclassroom. Cependant le code n'étant pas disponible il se <br /> charge de le trouver pour le sprint suivant.<br /> '''- Contact des anciens (Projet SmartClassroom 2015)'''<br /> - Nous avons contacter Malick et Adam qui nous ont bien expliqué les travaux qu'ils ont réalisés l'an dernier. <br /> Nous donnant de nouvelles idées d'amélioration (voir ci-dessus)<br /> '''- Création du Wiki'''<br /> - Création de la page [[Projets-2015-2016-SmartClassRoom/SRS | SRS]]<br /> - Création de la page du projet [[Projets-2015-2016-SmartClassRoom | SmartClassRoom]]<br /> <br /> === Rétrospective Sprint 1 ===<br /> <br /> Ce Sprint 1 c'est bien passé nous avons pu réalisé les différentes taches prévu. L'aide des anciens (Malick), de Messieurs DONSEZ &amp; MAISONNASSE nous a été très importante pour comprendre le context et le but du projet. <br /> <br /> Nous avons pu mettre en place un planing dans le groupe l'organisation dans les différentes taches de récupérations d'informations a été très bonne.<br /> <br /> == Week 2 (February, 2nd - February, 8th) ==<br /> === Travail Réalisé ===<br /> <br /> '''- Installation de l'application sur les Tables de la FABLAB''' <br /> - Récupération du code de l'an dernier<br /> - Brancher les machines sur un switch<br /> - Allez dans le projet /SmartClassRoom --&gt; executer web.js<br /> - Sur les 3 tables ouvrir un navigateur (Chrome de préférence)<br /> - Entrez dans le navigateur : @IPserveur:8080<br /> - (L'adresse mise dynamiquement mise si problème aujouté manuellement)<br /> - Profitez ....<br /> <br /> '''- Quelques nouvelles idées'''<br /> - Etendre le &quot;screen&quot; à des tablettes.<br /> - Mettre les cours du prof directement en ligne depuis la caméra du rétroprojecteur<br /> - Configuration de la localisation des tables plus dynamique<br /> <br /> '''- Première lecture du code'''<br /> - Analyser le code pour voir la conception du projet.<br /> - Étude du ping pong<br /> <br /> '''- Début du développement d'un CHAT en JavaScript'''<br /> - Nous voulions mettre en place en chat <br /> - Utilisation du JAVASCRIPT pour un chat<br /> <br /> '''- Définitions des tâches '''<br /> - Réunion avec les DUTs<br /> - Le javascript est t'il possible pour un chat?<br /> - Rédaction de tutoriel d'installation de l'application<br /> - Apport de nouvelles idées<br /> <br /> <br /> === Rétrospective Sprint 2 ===<br /> <br /> Durant ce sprint nous avons pris un peu de retard pour l'implémentation du code. Impossibilité d'exécuter le code sur nos machines personnelles, de plus nous n'avons pas encore eu la démo pour le rétroprojecteur (ni le code).<br /> <br /> Cependant nous avons pu avancer sur des taches parallèles. L'ambiance dans le groupe est bonne, malgré les difficultés pour récupérer le code qui nous fait perdre pas mal de temps<br /> <br /> == Week 3 (February, 9th - February, 15th) == <br /> ===Objectifs===<br /> '''- Récupérer l'ensemble du code'''<br /> '''- Conception'''<br /> '''- Début du développement'''<br /> <br /> ===Travail Réalisé===<br /> '''- Demonstration du projet de tableau intelligent'''<br /> - Prise en main de l'application<br /> '''- Implémentation d'un chat'''<br /> - Développement du chat en Javascript <br /> - Intégration du chat dans l'application principale<br /> '''- Etude de l'affichage des tables tactiles '''<br /> - Analyse du code de l'affichage existant <br /> - Recherche et analyse de différents type d'affichage en Javascript<br /> '''- Problèmes rencontrés '''<br /> - Difficulté d'intégration du chat dans l'application principale.<br /> - Interrogation sur le projet du tableau intelligent, car les moyens de détection et d'interaction vont changer<br /> <br /> <br /> === Rétrospective Sprint 3 ===<br /> Durant ce sprint l'ensemble des objectifs fixés ont été réalisé, de plus toujours une bonne entente dans le groupe. Les journées ont été chargé du fait de certain cours en parallèle. Le Chat est maintenant en place, ce qui est la satisfaction de la semaine.<br /> <br /> == Week 4 (February, 16th - February, 22nd) ==<br /> === Objectifs ===<br /> '''- Finir l'intégration du chat'''<br /> '''- Choix d'implémentation de la configuration pour l'affichage'''<br /> '''- Réflexion sur le tableau intelligent'''<br /> <br /> ===Travail Réalisé===<br /> '''- Le chat est maintenant fonctionnel'''<br /> - Intégration du Chat dans le projet <br /> - Voir les personnes en Ligne<br /> - Correction des bugs lors du passage PC - tablette<br /> - Mode de connexion<br /> '''- Le NFC'''<br /> - Donnez aux DUT pour débriefing pour voir si c'est adapter<br /> '''- Rotation et zoom d'images '''<br /> - Implementation de la rotation, translation et zoom de plusieurs images<br /> - Il faut maintenant l'intégrer au projet<br /> '''- Snake '''<br /> - Nous sommes entrain d'intégrer un snake dans la liste des jeux disponibles sur l'application<br /> - Quelques problèmes avec l'intégration.<br /> '''- Configuration dynamique d'image '''<br /> - Nous avons beaucoup étudier le code, merci notamment à Adam. Nous pouvons partager l'écran en 2, 3 ou 4 sur les tablettes choix dynamique.<br /> <br /> <br /> === Rétrospective Sprint 3 ===<br /> Durant ce sprint l'ensemble des objectifs fixés ont été réalisé, Nous avons notamment mis au point la stratégie suivante :<br /> Nous focaliser les 3 objectifs , l'intégration du snake, la configuration dynamique des écrans et enfin le rotozoom des images.<br /> L'ambiance a été bonne durant ce sprint.<br /> <br /> == Week 5 (February, 23rd - March, 1st) ==<br /> <br /> Interruption pédagogique d'une semaine, rédaction du Wiki<br /> <br /> == Week 6 (March, 1nd - March, 7th) ==<br /> <br /> ===Objectifs===<br /> '''- Récupérer l'ensemble du code'''<br /> '''- Conception'''<br /> '''- Début du développement'''<br /> <br /> ===Travail Réalisé===<br /> '''- Réparation de la table cassé'''<br /> - Changement du nock avec installation de la distribution.<br /> - Nouveau mot de passe = admin<br /> '''- Snake'''<br /> - Le grand écran du snake<br /> - En cours d'intégration du Tweldisplay<br /> '''- Configuration des tables tactiles '''<br /> - Création d'une interface pour une configuration dynamique<br /> - Début du code moteur pour intégrer la solution dynamique à l'application.<br /> '''- Préparation de la JPO Polytech'''<br /> - Préparation de la démo pour la journée Porte ouverte à Polytech<br /> '''- Modification des images '''<br /> - Possibilité de faire bouger une image, de la zoomer etc...<br /> - ajouter la rotation de l'image dans le canevas<br /> <br /> <br /> === Rétrospective Sprint 6 ===<br /> Durant ce sprint l'ensemble des objectifs fixés ont été réalisé, de plus toujours une bonne entente dans le groupe. Les journées ont été chargées. Bientôt trois nouvelles fonctionnalité seront disponible.<br /> <br /> == Week 7 (March, 8th - March, 13rd) ==<br /> === Objectifs ===<br /> '''- Finir la configuration dynamique des tables'''<br /> '''- Gérer le changement d'écran du Snake'''<br /> '''- Finir les action sur une image'''<br /> <br /> ===Travail Réalisé===<br /> '''- Rendu dossier MPI'''<br /> - Rendu du dossier pour le cours d'MPI<br /> - vous pouvez le consulter ici : [[File:MPI_SmartClassRoom.pdf ]]<br /> '''- NFC'''<br /> - Nous avons chargé les DUT de s'occuper du NFC il rencontre beaucoup de problèmes par rapport à l'installation ce qui nous donner au finale beaucoup de travail pour du Débug.<br /> '''- Configuration des tables tactiles '''<br /> - voir le tutoriel sur la configuration dynamique des tables : [[Projets-2015-2016-SmartClassRoom#Configuration_Dynamiques_des_Tables |Tutoriel configuration dynamique]]<br /> <br /> '''- Snake'''<br /> - Quelques problème avec le twiled display, en espérant règler les problèmes ce week end pour intégrer Lundi <br /> '''- Modification des images '''<br /> - Possibilité de faire bouger une image, de la boomer etc...<br /> '''- Problèmes '''<br /> - La cohabitation entre NOWJS (l'ensemble de projet à été codé avec cette librairie) et socket IO. Nous avons eu beaucoup de mal à trouver un solution pour remplacer NOWJS puisque cette librairie n'existe plus nous avons du faire le choix d'utiliser SocketIO. La grande difficulté à été de faire cohabité ces deux librairies.<br /> <br /> === Rétrospective Sprint 6 ===<br /> Durant ce sprint l'ensemble des objectifs fixés ont été réalisé, de plus toujours une bonne entente dans le groupe. Les journées ont été chargées. Bientôt trois nouvelles fonctionnalité seront disponible.<br /> <br /> == Week 8 (March, 9st - March, 17th) ==<br /> ===Objectif ===<br /> === Travail Réalisé === <br /> ''' - Debugging du jeux Snake '''<br /> -Debug du mode tiled (multijoueurs), gestion des collisions et des murs non bloquants<br /> <br /> '''-Implémentation du bouton &quot;quit&quot; sur le Snake'''<br /> -Pour le mode fullScreen et TiledDisplay<br /> <br /> '''-Réalisation de la video-Screencast pour le rendu (disponible [https://www.youtube.com/watch?v=FEwoA4S9rsM&amp;feature=youtu.be ici])<br /> <br /> '''-Rédaction du wiki'''<br /> <br /> '''-Mise en place de la démo pour la soutenance'''<br /> <br /> '''-Préparation de la soutenance (oral et powerpoint)'''<br /> <br /> = Bilan =<br /> <br /> <br /> == Travail Réalisé ==<br /> === Configuration Dynamiques des Tables===<br /> <br /> La configuration des tables dynamiques est une partie importante de notre projet, en effet nous avons mis en place un système permettant à l'utilisateur de choisir sa position par rapport aux autres. Ainsi avec cette nouvelle évolution, l'administrateur pourra définir le nombre de tablette suivant L*l (Longueur * largeur) ou Lignes * Colonnes.<br /> <br /> Nous allons maintenant voir comment cela fonctionne sur les écrans.<br /> <br /> Tout d'abord il vous faut lancer l'application :<br /> - Allez dans ifconfig et notez l'adresse IP de cette machine<br /> - Allez dans le répertoire SMARTCLASSROOM<br /> - Lancer web.js : nodejs ./web.js<br /> - Ouvrir un navigateur (Chrome)<br /> - Je vous laisse rentrer votre Login<br /> <br /> Passons maintenant à la partie intéressante pour configurer les tables dynamiquement.<br /> Pour cela :<br /> Allez dans : <br /> - Menu<br /> - Picture<br /> - Select Picture<br /> - Choisi une image<br /> <br /> [[File:Projets-2015-2016-SmartClassRoom_ConfigTable1.png | 600px| center]]<br /> Je vous laisse maintenant entrer le nombre de lignes et de colonne pour les tables que vous avez actuellement. ( Par exemple ici nous allons faire une configuration 2*2)<br /> <br /> <br /> <br /> [[File:Projets-2015-2016-SmartClassRoom_ConfigTable2.png | 600px| center]]<br /> <br /> Le serveur enverra à chaque machine la disposition des tables qui a été rentré il ne reste plus qu'a l'administrateur de choisir sa position pour chaque machine (suivant les places qui ne sont pas encore utilisés)<br /> <br /> [[File:Projets-2015-2016-SmartClassRoom_ConfigTable3.png | 600px| center]]<br /> <br /> L'application se chargera de couper l'image comme nous l'avons défini précédemment, je vous laisse prendre connaissant ci-dessous le résultat de la découpe d'écran. <br /> <br /> [[File:Projets-2015-2016-SmartClassRoom_ConfigTable4.png | 600px| center]]<br /> <br /> === Touch Interaction ===<br /> <br /> === Chat ===<br /> <br /> Le chat, que nous avons réalisé, est fait à l'aide de la bibliothèque [http://socket.io Socket.io]. Elle se base sur plusieurs techniques différentes qui permettent la communication en temps réel comme WebSocket. Socket.io fonctionne sous forme d'événements comme un événement lors d'une connexion ou une déconnexion. On peut émettre des événements. Le principe de Socket.io c'est que le client et le serveur peuvent émettre et recevoir des événements en temps réel et ainsi réagir en conséquence. De plus, il est possible de transmettre des données avec ces événements<br /> Le serveur (celui qui lance le nodeJS) possède tout ce qui a en commun et le diffuse au client qui l'affiche dans le html.<br /> <br /> <br /> En faite le serveur (WEB.JS) permet de gérer les connexions de clients c'est dans ce fichier que se fait la connection, la déconnection et l'émission d'un message vers les clients.<br /> <br /> <br /> Dans le HTML, qui sera chargé par chaque client, nous gérons la réception des messages, la récupération des champs INPUT et l'émission vers web.js<br /> <br /> <br /> L'utilisateur doit rentrer un pseudonyme avant de pouvoir utiliser le chat. On peut voir la liste des utilisateurs connectés, réinitialiser la conversation et quitter le chat. Pour utiliser toute l'application, l'utilisateur doit rentrer un pseudonyme pour voir le menu s'afficher.<br /> <br /> [[File:Projets-2015-2016-SmartClassRoom_Chat6.png | 800px| center]]<br /> <br /> === Snake ===<br /> <br /> L'objectif est de réaliser une autre application multi-utilisateur avec une gestion de l'affichage en Tiled Display (comme le jeux PingPong). Nous avons donc choisi le jeux classique Snake. Pour cela, nous sommes parti d'un snake basique réalisé en JavaScript et nous avons apporté des modification pour que celui ci fonctionne avec le projet (Nous nous sommes aidés d'un jeux déjà réalisé Ping Pong).<br /> <br /> Dans notre Snake nous avons choisi d'implémenter deux modes de jeu :<br /> <br /> - Un premier mode un-joueur. Ce mode permet de jouer au Snake Classique avec des bords bloquants. Pour réaliser cette partie, nous avons adapter le Snake afin qu'il puisse être affichable dans une de nos &quot;canvas&quot;. Puis nous avons implanté le code nécessaire afin que le Snake puisse se jouer en &quot;mode grand écran&quot;.<br /> <br /> - Un deuxième mode multi-joueur, qui permet à plusieurs personnes de jouer en Snake. Dans cette version nous avons défini des murs bloquants et non bloquants. Les murs non bloquants permettent de passer le Snake d'un utilisateur à l'autre.<br /> <br /> <br /> Afin d'implanté le Snake dans l'application existante, nous avons utilisé les principes mis en place par les étudiants de l'année 2014-2015. C'est dire que le jeu fonctionne selon un modèle d'architecture en deux couches. Il y a tout d'abords une partie moteur qui calcul et transmet les informations de position du Snake. Puis nous avons la vue qui affiche les éléments calculés par le moteur.<br /> <br /> En mode multi-joueur, ce qui se passe sur les écrans des différents joueur dépend de la location du Snake. L'écran qui possède le Snake sollicitera le moteur pour faire les calculs de déplacement et autres. Tandis que les autres écrans seront neutre, mis à part l'affichage du score qui changera en fonction des éléments mangés par le Snake.<br /> <br /> IMG and IMG<br /> <br /> En résumé les différences notables entre les deux modes du jeux Snake sont :<br /> - la présence du bouton « quit » sur l'écran du jeu multi-joueur<br /> - la présence de mur non bloquants dans le mode multi-joueur<br /> <br /> == Difficultés rencontrées ==<br /> <br /> <br /> <br /> == Notre ressenti ==<br /> <br /> <br /> <br /> <br /> = Références =<br /> <br /> <br /> =Matériels fournis=<br /> * [[MAG3110|MAG3110 Triple Axis Magnetometer Breakout Module]]<br /> * Lecteur [[Near Field Communication|NFC]]<br /> ** [[ACS ACR 122]] x1<br /> ** [[SCL3711]] x4<br /> * Tags NFC MiFare</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=Projets-2015-2016-SmartClassRoom&diff=28097 2016-03-16T23:45:15Z

<p>Sebastien.Toussaint: /* Snake */</p> <hr /> <div>= Project presentation=<br /> <br /> Pour la présentation du sujet nous avons fait le choix d'utiliser la technique '''QQQOP''' qui permet de mobiliser ses connaissances d'une manière structurée. Cela nous à notamment permet de prendre en main le smartClassroom qui est dit &quot;très libre&quot;. <br /> <br /> Afin de donner une analyse structuré de notre projet nous avons rédigé un fiche '''&quot;Software Requirements Specification&quot;''' (SRS) .<br /> <br /> == Qui ? ==<br /> <br /> Le projet est suivi par deux encadrant : <br /> <br /> '''- Monsieur Didier DONSEZ'''<br /> <br /> '''- Monsieur Jérôme MAISONNASSE'''<br /> <br /> <br /> L’équipe en charge du projet est divisé en deux, 4 élèves de la filière RICM5 de Polytech Grenoble :<br /> <br /> '''- HAMDANI Youcef'''<br /> <br /> '''- MESNIER Vincent'''<br /> <br /> '''- SAUSSAC Thibault'''<br /> <br /> '''- TOUSSAINT Sébastien'''<br /> <br /> <br /> Viendront compléter l’équipe, deux étudiant de DUT Réseaux et Télécoms (première année). <br /> <br /> '''- SAK Melik'''<br /> <br /> '''- ZOPP Sébastien'''<br /> <br /> == Quoi ? Définition du sujet ==<br /> <br /> L'objectif à moyen voir à long terme de ce projet est de mettre en place des technologies qui permettent d'améliorer les enseignements dans les salles de cours en utilisant des technologies innovantes inspiré par des résultats de travaux de recherche.<br /> <br /> On peut ainsi imaginer des activités pédagogiques interactives comme des évaluations fournissant des réponses instantanées et permettant ainsi aux enseignants de voir quand un concept doit être révisé ou quand ils doivent davantage aider les élèves. Ce projet est donc principalement destiné aux enseignants. Il leur permettra de passer d'un type d'enseignement à un autre plus évolué, c'est à dire gérer plus efficacement leurs classes, et évaluer la compréhension des élèves durant le cours. On distingue ensuite les élèves qui pourront entre autres organiser leurs propres fichiers multimédias, prendre des notes, collaborer avec d'autres élèves ou partager des fichiers avec les enseignants.<br /> <br /> <br /> ==Quand ? ==<br /> <br /> L’objectif est d’utiliser ce projet durant différents cours, les conférences ou dans journées portes ouvertes afin de mettre en avant l’école.<br /> <br /> <br /> ==Où ? Le lieu où se situe le projet==<br /> <br /> Ce projet pourra s’implanter dans les différentes salles de cours dans les universités de France, dans un premier temps sur le campus Grenoblois.<br /> <br /> <br /> ==Pourquoi ?==<br /> <br /> - Faire évoluer l’enseignement en apportant plus de technologie (interaction) qui est aujourd’hui un facteur important dans l’apprentissage.<br /> <br /> - Ne pas prendre de retard en cas d’absence puisqu’un élève pourra suivre un cours à distance depuis un hôpital ou simplement depuis chez lui.<br /> <br /> - Facilité l’accès aux informations en ayant une plateforme collaborative entre professeurs et étudiants.<br /> <br /> - D’un point de vue santé ce projet permet d’éviter la surcharge des sacs des étudiants. Facilité le coté administratif en gérant la présence des élèves de manière automatiques. (Le temps pour faire l’appel en début de cours ne sera plus nécessaire.)<br /> <br /> ==Software Requirements Specification==<br /> &quot;A software requirements specification (SRS) is a description of a software system to be developed. It lays out functional and non-functional requirements, and may include a set of use cases that describe user interactions that the software must provide.&quot;(src. Wikipédia)<br /> <br /> Vous pouvez consulter notre SRS en cliquant sur le liens ci-dessous :<br /> [[Projets-2015-2016-SmartClassRoom/SRS|Fiche SRS]]<br /> <br /> ==Product functions==<br /> <br /> ==Product evolution==<br /> <br /> =Links=<br /> <br /> =Project schedule=<br /> <br /> Le projet a commencé depuis le 25 Janvier 2015 à 10h30.<br /> <br /> Pour ce projet nous avons fais le choix, sous l'influence de Monsieur Donsez d'utiliser les méthodes agiles afin d'avoir un suivis régulier et un travail organisé. De plus, la méthode SCRUM apporte une grande flexibilité pour le projet ce qui nous parait intéressant au vu de la composition de l'équipe ayant des compétences et des emploi du temps très différents (DUT et Polytech).<br /> <br /> Nous avons commencé par faire un planning de Gantt afin d'avoir un vision global du projet. Je vous laisse ci-dessous prendre connaissance du diagramme que vous avons mis en place. Vous aurez ensuite tous le travaille détaillé STEP by STEP ;)<br /> <br /> [[File:Projets-2015-2016-Gantt.png | 600px| center]]<br /> <br /> <br /> <br /> == Week 1 (January, 25th - February, 1st) ==<br /> === Travail Réalisé === <br /> <br /> '''- Comprendre le sujet, et le définir''' <br /> - Cette objectif est de récupérer des informations et d'avoir des idées innovantes afin de p<br /> <br /> '''- Récupération de nouvelles idées'''<br /> - Connexion smartphone - Table --&gt; Afficher le contenu d'un smartphone sur une table<br /> - Faire bouger des objets avec des gestes élémentaires via le rétroprojecteur <br /> - Chat permettant la communication intra classe <br /> - Animation de figures avec moteurs physiques<br /> - Projection 3D (pour effet Lumière à Lyon)<br /> '''- Rendez-vous avec Jérome Maisonnasse'''<br /> - Jérome nous a donnée différentes idée pour le projet Smartclassroom. Cependant le code n'étant pas disponible il se <br /> charge de le trouver pour le sprint suivant.<br /> '''- Contact des anciens (Projet SmartClassroom 2015)'''<br /> - Nous avons contacter Malick et Adam qui nous ont bien expliqué les travaux qu'ils ont réalisés l'an dernier. <br /> Nous donnant de nouvelles idées d'amélioration (voir ci-dessus)<br /> '''- Création du Wiki'''<br /> - Création de la page [[Projets-2015-2016-SmartClassRoom/SRS | SRS]]<br /> - Création de la page du projet [[Projets-2015-2016-SmartClassRoom | SmartClassRoom]]<br /> <br /> === Rétrospective Sprint 1 ===<br /> <br /> Ce Sprint 1 c'est bien passé nous avons pu réalisé les différentes taches prévu. L'aide des anciens (Malick), de Messieurs DONSEZ &amp; MAISONNASSE nous a été très importante pour comprendre le context et le but du projet. <br /> <br /> Nous avons pu mettre en place un planing dans le groupe l'organisation dans les différentes taches de récupérations d'informations a été très bonne.<br /> <br /> == Week 2 (February, 2nd - February, 8th) ==<br /> === Travail Réalisé ===<br /> <br /> '''- Installation de l'application sur les Tables de la FABLAB''' <br /> - Récupération du code de l'an dernier<br /> - Brancher les machines sur un switch<br /> - Allez dans le projet /SmartClassRoom --&gt; executer web.js<br /> - Sur les 3 tables ouvrir un navigateur (Chrome de préférence)<br /> - Entrez dans le navigateur : @IPserveur:8080<br /> - (L'adresse mise dynamiquement mise si problème aujouté manuellement)<br /> - Profitez ....<br /> <br /> '''- Quelques nouvelles idées'''<br /> - Etendre le &quot;screen&quot; à des tablettes.<br /> - Mettre les cours du prof directement en ligne depuis la caméra du rétroprojecteur<br /> - Configuration de la localisation des tables plus dynamique<br /> <br /> '''- Première lecture du code'''<br /> - Analyser le code pour voir la conception du projet.<br /> - Étude du ping pong<br /> <br /> '''- Début du développement d'un CHAT en JavaScript'''<br /> - Nous voulions mettre en place en chat <br /> - Utilisation du JAVASCRIPT pour un chat<br /> <br /> '''- Définitions des tâches '''<br /> - Réunion avec les DUTs<br /> - Le javascript est t'il possible pour un chat?<br /> - Rédaction de tutoriel d'installation de l'application<br /> - Apport de nouvelles idées<br /> <br /> <br /> === Rétrospective Sprint 2 ===<br /> <br /> Durant ce sprint nous avons pris un peu de retard pour l'implémentation du code. Impossibilité d'exécuter le code sur nos machines personnelles, de plus nous n'avons pas encore eu la démo pour le rétroprojecteur (ni le code).<br /> <br /> Cependant nous avons pu avancer sur des taches parallèles. L'ambiance dans le groupe est bonne, malgré les difficultés pour récupérer le code qui nous fait perdre pas mal de temps<br /> <br /> == Week 3 (February, 9th - February, 15th) == <br /> ===Objectifs===<br /> '''- Récupérer l'ensemble du code'''<br /> '''- Conception'''<br /> '''- Début du développement'''<br /> <br /> ===Travail Réalisé===<br /> '''- Demonstration du projet de tableau intelligent'''<br /> - Prise en main de l'application<br /> '''- Implémentation d'un chat'''<br /> - Développement du chat en Javascript <br /> - Intégration du chat dans l'application principale<br /> '''- Etude de l'affichage des tables tactiles '''<br /> - Analyse du code de l'affichage existant <br /> - Recherche et analyse de différents type d'affichage en Javascript<br /> '''- Problèmes rencontrés '''<br /> - Difficulté d'intégration du chat dans l'application principale.<br /> - Interrogation sur le projet du tableau intelligent, car les moyens de détection et d'interaction vont changer<br /> <br /> <br /> === Rétrospective Sprint 3 ===<br /> Durant ce sprint l'ensemble des objectifs fixés ont été réalisé, de plus toujours une bonne entente dans le groupe. Les journées ont été chargé du fait de certain cours en parallèle. Le Chat est maintenant en place, ce qui est la satisfaction de la semaine.<br /> <br /> == Week 4 (February, 16th - February, 22nd) ==<br /> === Objectifs ===<br /> '''- Finir l'intégration du chat'''<br /> '''- Choix d'implémentation de la configuration pour l'affichage'''<br /> '''- Réflexion sur le tableau intelligent'''<br /> <br /> ===Travail Réalisé===<br /> '''- Le chat est maintenant fonctionnel'''<br /> - Intégration du Chat dans le projet <br /> - Voir les personnes en Ligne<br /> - Correction des bugs lors du passage PC - tablette<br /> - Mode de connexion<br /> '''- Le NFC'''<br /> - Donnez aux DUT pour débriefing pour voir si c'est adapter<br /> '''- Rotation et zoom d'images '''<br /> - Implementation de la rotation, translation et zoom de plusieurs images<br /> - Il faut maintenant l'intégrer au projet<br /> '''- Snake '''<br /> - Nous sommes entrain d'intégrer un snake dans la liste des jeux disponibles sur l'application<br /> - Quelques problèmes avec l'intégration.<br /> '''- Configuration dynamique d'image '''<br /> - Nous avons beaucoup étudier le code, merci notamment à Adam. Nous pouvons partager l'écran en 2, 3 ou 4 sur les tablettes choix dynamique.<br /> <br /> <br /> === Rétrospective Sprint 3 ===<br /> Durant ce sprint l'ensemble des objectifs fixés ont été réalisé, Nous avons notamment mis au point la stratégie suivante :<br /> Nous focaliser les 3 objectifs , l'intégration du snake, la configuration dynamique des écrans et enfin le rotozoom des images.<br /> L'ambiance a été bonne durant ce sprint.<br /> <br /> == Week 5 (February, 23rd - March, 1st) ==<br /> <br /> Interruption pédagogique d'une semaine, rédaction du Wiki<br /> <br /> == Week 6 (March, 1nd - March, 7th) ==<br /> <br /> ===Objectifs===<br /> '''- Récupérer l'ensemble du code'''<br /> '''- Conception'''<br /> '''- Début du développement'''<br /> <br /> ===Travail Réalisé===<br /> '''- Réparation de la table cassé'''<br /> - Changement du nock avec installation de la distribution.<br /> - Nouveau mot de passe = admin<br /> '''- Snake'''<br /> - Le grand écran du snake<br /> - En cours d'intégration du Tweldisplay<br /> '''- Configuration des tables tactiles '''<br /> - Création d'une interface pour une configuration dynamique<br /> - Début du code moteur pour intégrer la solution dynamique à l'application.<br /> '''- Préparation de la JPO Polytech'''<br /> - Préparation de la démo pour la journée Porte ouverte à Polytech<br /> '''- Modification des images '''<br /> - Possibilité de faire bouger une image, de la zoomer etc...<br /> - ajouter la rotation de l'image dans le canevas<br /> <br /> <br /> === Rétrospective Sprint 6 ===<br /> Durant ce sprint l'ensemble des objectifs fixés ont été réalisé, de plus toujours une bonne entente dans le groupe. Les journées ont été chargées. Bientôt trois nouvelles fonctionnalité seront disponible.<br /> <br /> == Week 7 (March, 8th - March, 13rd) ==<br /> === Objectifs ===<br /> '''- Finir la configuration dynamique des tables'''<br /> '''- Gérer le changement d'écran du Snake'''<br /> '''- Finir les action sur une image'''<br /> <br /> ===Travail Réalisé===<br /> '''- Rendu dossier MPI'''<br /> - Rendu du dossier pour le cours d'MPI<br /> - vous pouvez le consulter ici : [[File:MPI_SmartClassRoom.pdf ]]<br /> '''- NFC'''<br /> - Nous avons chargé les DUT de s'occuper du NFC il rencontre beaucoup de problèmes par rapport à l'installation ce qui nous donner au finale beaucoup de travail pour du Débug.<br /> '''- Configuration des tables tactiles '''<br /> - voir le tutoriel sur la configuration dynamique des tables : [[Projets-2015-2016-SmartClassRoom#Configuration_Dynamiques_des_Tables |Tutoriel configuration dynamique]]<br /> <br /> '''- Snake'''<br /> - Quelques problème avec le twiled display, en espérant règler les problèmes ce week end pour intégrer Lundi <br /> '''- Modification des images '''<br /> - Possibilité de faire bouger une image, de la boomer etc...<br /> '''- Problèmes '''<br /> - La cohabitation entre NOWJS (l'ensemble de projet à été codé avec cette librairie) et socket IO. Nous avons eu beaucoup de mal à trouver un solution pour remplacer NOWJS puisque cette librairie n'existe plus nous avons du faire le choix d'utiliser SocketIO. La grande difficulté à été de faire cohabité ces deux librairies.<br /> <br /> === Rétrospective Sprint 6 ===<br /> Durant ce sprint l'ensemble des objectifs fixés ont été réalisé, de plus toujours une bonne entente dans le groupe. Les journées ont été chargées. Bientôt trois nouvelles fonctionnalité seront disponible.<br /> <br /> == Week 7 (March, 9st - March, 15th) ==<br /> <br /> <br /> == Week 8 (March, 16th - March, 22nd) ==<br /> <br /> = Bilan =<br /> <br /> <br /> == Travail Réalisé ==<br /> === Configuration Dynamiques des Tables===<br /> <br /> La configuration des tables dynamiques est une partie importante de notre projet, en effet nous avons mis en place un système permettant à l'utilisateur de choisir sa position par rapport aux autres. Ainsi avec cette nouvelle évolution, l'administrateur pourra définir le nombre de tablette suivant L*l (Longueur * largeur) ou Lignes * Colonnes.<br /> <br /> Nous allons maintenant voir comment cela fonctionne sur les écrans.<br /> <br /> Tout d'abord il vous faut lancer l'application :<br /> - Allez dans ifconfig et notez l'adresse IP de cette machine<br /> - Allez dans le répertoire SMARTCLASSROOM<br /> - Lancer web.js : nodejs ./web.js<br /> - Ouvrir un navigateur (Chrome)<br /> - Je vous laisse rentrer votre Login<br /> <br /> Passons maintenant à la partie intéressante pour configurer les tables dynamiquement.<br /> Pour cela :<br /> Allez dans : <br /> - Menu<br /> - Picture<br /> - Select Picture<br /> - Choisi une image<br /> <br /> [[File:Projets-2015-2016-SmartClassRoom_ConfigTable1.png | 600px| center]]<br /> Je vous laisse maintenant entrer le nombre de lignes et de colonne pour les tables que vous avez actuellement. ( Par exemple ici nous allons faire une configuration 2*2)<br /> <br /> <br /> <br /> [[File:Projets-2015-2016-SmartClassRoom_ConfigTable2.png | 600px| center]]<br /> <br /> Le serveur enverra à chaque machine la disposition des tables qui a été rentré il ne reste plus qu'a l'administrateur de choisir sa position pour chaque machine (suivant les places qui ne sont pas encore utilisés)<br /> <br /> [[File:Projets-2015-2016-SmartClassRoom_ConfigTable3.png | 600px| center]]<br /> <br /> L'application se chargera de couper l'image comme nous l'avons défini précédemment, je vous laisse prendre connaissant ci-dessous le résultat de la découpe d'écran. <br /> <br /> [[File:Projets-2015-2016-SmartClassRoom_ConfigTable4.png | 600px| center]]<br /> <br /> === Touch Interaction ===<br /> <br /> === Chat ===<br /> <br /> Le chat, que nous avons réalisé, est fait à l'aide de la bibliothèque [http://socket.io Socket.io]. Elle se base sur plusieurs techniques différentes qui permettent la communication en temps réel comme WebSocket. Socket.io fonctionne sous forme d'événements comme un événement lors d'une connexion ou une déconnexion. On peut émettre des événements. Le principe de Socket.io c'est que le client et le serveur peuvent émettre et recevoir des événements en temps réel et ainsi réagir en conséquence. De plus, il est possible de transmettre des données avec ces événements<br /> Le serveur (celui qui lance le nodeJS) possède tout ce qui a en commun et le diffuse au client qui l'affiche dans le html.<br /> <br /> <br /> En faite le serveur (WEB.JS) permet de gérer les connexions de clients c'est dans ce fichier que se fait la connection, la déconnection et l'émission d'un message vers les clients.<br /> <br /> <br /> Dans le HTML, qui sera chargé par chaque client, nous gérons la réception des messages, la récupération des champs INPUT et l'émission vers web.js<br /> <br /> <br /> L'utilisateur doit rentrer un pseudonyme avant de pouvoir utiliser le chat. On peut voir la liste des utilisateurs connectés, réinitialiser la conversation et quitter le chat. Pour utiliser toute l'application, l'utilisateur doit rentrer un pseudonyme pour voir le menu s'afficher.<br /> <br /> [[File:Projets-2015-2016-SmartClassRoom_Chat6.png | 800px| center]]<br /> <br /> === Snake ===<br /> <br /> L'objectif est de réaliser une autre application multi-utilisateur avec une gestion de l'affichage en Tiled Display (comme le jeux PingPong). Nous avons donc choisi le jeux classique Snake. Pour cela, nous sommes parti d'un snake basique réalisé en JavaScript et nous avons apporté des modification pour que celui ci fonctionne avec le projet (Nous nous sommes aidés d'un jeux déjà réalisé Ping Pong).<br /> <br /> Dans notre Snake nous avons choisi d'implémenter deux modes de jeu :<br /> <br /> - Un premier mode un joueur. Ce mode permet de jouer au Snake Classique avec des bords bloquants. Pour réaliser cette partie, nous avons adapter le Snake afin qu'il puisse être affichable dans une de nos &quot;canvas&quot;. Puis nous avons implanté le code nécessaire pour le Snake puisse se jouer en &quot;mode grand écran&quot;. <br /> <br /> - Un deuxième mode multi-joueur, qui permet à plusieurs personnes de jouer en Snake. Dans cette version nous avons défini des murs bloquants et non bloquants. Les murs non bloquants permettent de passer le Snake d'un utilisateur à l'autre.<br /> <br /> Afin d'implanté le Snake dans l'application existante, nous avons utilisé les principes mis en place par les étudiants de l'année 2014-2015. C'est dire que le jeu fonctionne selon en modèle d'architecture en deux couches. Il y a tout d'abords une partie moteur qui calcul et transmet les informations de position du Snake. Puis nous avons la vue qui affiche les éléments calculés par le moteur.<br /> <br /> En mode multi-joueur, ce qui se passe sur les écrans des différents joueur, dépend de la location du Snake. L'écran qui possède le Snake sollicitera le moteur pour faire les calculs de déplacement et autre. Tandis que les autres écrans seront neutre, a part l'affichage du score qui changera en fonction des éléments mangés par le Snake.<br /> <br /> == Difficultés rencontrées ==<br /> <br /> <br /> <br /> == Notre ressenti ==<br /> <br /> <br /> <br /> <br /> = Références =<br /> <br /> <br /> =Matériels fournis=<br /> * [[MAG3110|MAG3110 Triple Axis Magnetometer Breakout Module]]<br /> * Lecteur [[Near Field Communication|NFC]]<br /> ** [[ACS ACR 122]] x1<br /> ** [[SCL3711]] x4<br /> * Tags NFC MiFare</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=Projets-2015-2016-SmartClassRoom&diff=28096 2016-03-16T23:38:10Z

<p>Sebastien.Toussaint: /* Snake */</p> <hr /> <div>= Project presentation=<br /> <br /> Pour la présentation du sujet nous avons fait le choix d'utiliser la technique '''QQQOP''' qui permet de mobiliser ses connaissances d'une manière structurée. Cela nous à notamment permet de prendre en main le smartClassroom qui est dit &quot;très libre&quot;. <br /> <br /> Afin de donner une analyse structuré de notre projet nous avons rédigé un fiche '''&quot;Software Requirements Specification&quot;''' (SRS) .<br /> <br /> == Qui ? ==<br /> <br /> Le projet est suivi par deux encadrant : <br /> <br /> '''- Monsieur Didier DONSEZ'''<br /> <br /> '''- Monsieur Jérôme MAISONNASSE'''<br /> <br /> <br /> L’équipe en charge du projet est divisé en deux, 4 élèves de la filière RICM5 de Polytech Grenoble :<br /> <br /> '''- HAMDANI Youcef'''<br /> <br /> '''- MESNIER Vincent'''<br /> <br /> '''- SAUSSAC Thibault'''<br /> <br /> '''- TOUSSAINT Sébastien'''<br /> <br /> <br /> Viendront compléter l’équipe, deux étudiant de DUT Réseaux et Télécoms (première année). <br /> <br /> '''- SAK Melik'''<br /> <br /> '''- ZOPP Sébastien'''<br /> <br /> == Quoi ? Définition du sujet ==<br /> <br /> L'objectif à moyen voir à long terme de ce projet est de mettre en place des technologies qui permettent d'améliorer les enseignements dans les salles de cours en utilisant des technologies innovantes inspiré par des résultats de travaux de recherche.<br /> <br /> On peut ainsi imaginer des activités pédagogiques interactives comme des évaluations fournissant des réponses instantanées et permettant ainsi aux enseignants de voir quand un concept doit être révisé ou quand ils doivent davantage aider les élèves. Ce projet est donc principalement destiné aux enseignants. Il leur permettra de passer d'un type d'enseignement à un autre plus évolué, c'est à dire gérer plus efficacement leurs classes, et évaluer la compréhension des élèves durant le cours. On distingue ensuite les élèves qui pourront entre autres organiser leurs propres fichiers multimédias, prendre des notes, collaborer avec d'autres élèves ou partager des fichiers avec les enseignants.<br /> <br /> <br /> ==Quand ? ==<br /> <br /> L’objectif est d’utiliser ce projet durant différents cours, les conférences ou dans journées portes ouvertes afin de mettre en avant l’école.<br /> <br /> <br /> ==Où ? Le lieu où se situe le projet==<br /> <br /> Ce projet pourra s’implanter dans les différentes salles de cours dans les universités de France, dans un premier temps sur le campus Grenoblois.<br /> <br /> <br /> ==Pourquoi ?==<br /> <br /> - Faire évoluer l’enseignement en apportant plus de technologie (interaction) qui est aujourd’hui un facteur important dans l’apprentissage.<br /> <br /> - Ne pas prendre de retard en cas d’absence puisqu’un élève pourra suivre un cours à distance depuis un hôpital ou simplement depuis chez lui.<br /> <br /> - Facilité l’accès aux informations en ayant une plateforme collaborative entre professeurs et étudiants.<br /> <br /> - D’un point de vue santé ce projet permet d’éviter la surcharge des sacs des étudiants. Facilité le coté administratif en gérant la présence des élèves de manière automatiques. (Le temps pour faire l’appel en début de cours ne sera plus nécessaire.)<br /> <br /> ==Software Requirements Specification==<br /> &quot;A software requirements specification (SRS) is a description of a software system to be developed. It lays out functional and non-functional requirements, and may include a set of use cases that describe user interactions that the software must provide.&quot;(src. Wikipédia)<br /> <br /> Vous pouvez consulter notre SRS en cliquant sur le liens ci-dessous :<br /> [[Projets-2015-2016-SmartClassRoom/SRS|Fiche SRS]]<br /> <br /> ==Product functions==<br /> <br /> ==Product evolution==<br /> <br /> =Links=<br /> <br /> =Project schedule=<br /> <br /> Le projet a commencé depuis le 25 Janvier 2015 à 10h30.<br /> <br /> Pour ce projet nous avons fais le choix, sous l'influence de Monsieur Donsez d'utiliser les méthodes agiles afin d'avoir un suivis régulier et un travail organisé. De plus, la méthode SCRUM apporte une grande flexibilité pour le projet ce qui nous parait intéressant au vu de la composition de l'équipe ayant des compétences et des emploi du temps très différents (DUT et Polytech).<br /> <br /> Nous avons commencé par faire un planning de Gantt afin d'avoir un vision global du projet. Je vous laisse ci-dessous prendre connaissance du diagramme que vous avons mis en place. Vous aurez ensuite tous le travaille détaillé STEP by STEP ;)<br /> <br /> [[File:Projets-2015-2016-Gantt.png | 600px| center]]<br /> <br /> <br /> <br /> == Week 1 (January, 25th - February, 1st) ==<br /> === Travail Réalisé === <br /> <br /> '''- Comprendre le sujet, et le définir''' <br /> - Cette objectif est de récupérer des informations et d'avoir des idées innovantes afin de p<br /> <br /> '''- Récupération de nouvelles idées'''<br /> - Connexion smartphone - Table --&gt; Afficher le contenu d'un smartphone sur une table<br /> - Faire bouger des objets avec des gestes élémentaires via le rétroprojecteur <br /> - Chat permettant la communication intra classe <br /> - Animation de figures avec moteurs physiques<br /> - Projection 3D (pour effet Lumière à Lyon)<br /> '''- Rendez-vous avec Jérome Maisonnasse'''<br /> - Jérome nous a donnée différentes idée pour le projet Smartclassroom. Cependant le code n'étant pas disponible il se <br /> charge de le trouver pour le sprint suivant.<br /> '''- Contact des anciens (Projet SmartClassroom 2015)'''<br /> - Nous avons contacter Malick et Adam qui nous ont bien expliqué les travaux qu'ils ont réalisés l'an dernier. <br /> Nous donnant de nouvelles idées d'amélioration (voir ci-dessus)<br /> '''- Création du Wiki'''<br /> - Création de la page [[Projets-2015-2016-SmartClassRoom/SRS | SRS]]<br /> - Création de la page du projet [[Projets-2015-2016-SmartClassRoom | SmartClassRoom]]<br /> <br /> === Rétrospective Sprint 1 ===<br /> <br /> Ce Sprint 1 c'est bien passé nous avons pu réalisé les différentes taches prévu. L'aide des anciens (Malick), de Messieurs DONSEZ &amp; MAISONNASSE nous a été très importante pour comprendre le context et le but du projet. <br /> <br /> Nous avons pu mettre en place un planing dans le groupe l'organisation dans les différentes taches de récupérations d'informations a été très bonne.<br /> <br /> == Week 2 (February, 2nd - February, 8th) ==<br /> === Travail Réalisé ===<br /> <br /> '''- Installation de l'application sur les Tables de la FABLAB''' <br /> - Récupération du code de l'an dernier<br /> - Brancher les machines sur un switch<br /> - Allez dans le projet /SmartClassRoom --&gt; executer web.js<br /> - Sur les 3 tables ouvrir un navigateur (Chrome de préférence)<br /> - Entrez dans le navigateur : @IPserveur:8080<br /> - (L'adresse mise dynamiquement mise si problème aujouté manuellement)<br /> - Profitez ....<br /> <br /> '''- Quelques nouvelles idées'''<br /> - Etendre le &quot;screen&quot; à des tablettes.<br /> - Mettre les cours du prof directement en ligne depuis la caméra du rétroprojecteur<br /> - Configuration de la localisation des tables plus dynamique<br /> <br /> '''- Première lecture du code'''<br /> - Analyser le code pour voir la conception du projet.<br /> - Étude du ping pong<br /> <br /> '''- Début du développement d'un CHAT en JavaScript'''<br /> - Nous voulions mettre en place en chat <br /> - Utilisation du JAVASCRIPT pour un chat<br /> <br /> '''- Définitions des tâches '''<br /> - Réunion avec les DUTs<br /> - Le javascript est t'il possible pour un chat?<br /> - Rédaction de tutoriel d'installation de l'application<br /> - Apport de nouvelles idées<br /> <br /> <br /> === Rétrospective Sprint 2 ===<br /> <br /> Durant ce sprint nous avons pris un peu de retard pour l'implémentation du code. Impossibilité d'exécuter le code sur nos machines personnelles, de plus nous n'avons pas encore eu la démo pour le rétroprojecteur (ni le code).<br /> <br /> Cependant nous avons pu avancer sur des taches parallèles. L'ambiance dans le groupe est bonne, malgré les difficultés pour récupérer le code qui nous fait perdre pas mal de temps<br /> <br /> == Week 3 (February, 9th - February, 15th) == <br /> ===Objectifs===<br /> '''- Récupérer l'ensemble du code'''<br /> '''- Conception'''<br /> '''- Début du développement'''<br /> <br /> ===Travail Réalisé===<br /> '''- Demonstration du projet de tableau intelligent'''<br /> - Prise en main de l'application<br /> '''- Implémentation d'un chat'''<br /> - Développement du chat en Javascript <br /> - Intégration du chat dans l'application principale<br /> '''- Etude de l'affichage des tables tactiles '''<br /> - Analyse du code de l'affichage existant <br /> - Recherche et analyse de différents type d'affichage en Javascript<br /> '''- Problèmes rencontrés '''<br /> - Difficulté d'intégration du chat dans l'application principale.<br /> - Interrogation sur le projet du tableau intelligent, car les moyens de détection et d'interaction vont changer<br /> <br /> <br /> === Rétrospective Sprint 3 ===<br /> Durant ce sprint l'ensemble des objectifs fixés ont été réalisé, de plus toujours une bonne entente dans le groupe. Les journées ont été chargé du fait de certain cours en parallèle. Le Chat est maintenant en place, ce qui est la satisfaction de la semaine.<br /> <br /> == Week 4 (February, 16th - February, 22nd) ==<br /> === Objectifs ===<br /> '''- Finir l'intégration du chat'''<br /> '''- Choix d'implémentation de la configuration pour l'affichage'''<br /> '''- Réflexion sur le tableau intelligent'''<br /> <br /> ===Travail Réalisé===<br /> '''- Le chat est maintenant fonctionnel'''<br /> - Intégration du Chat dans le projet <br /> - Voir les personnes en Ligne<br /> - Correction des bugs lors du passage PC - tablette<br /> - Mode de connexion<br /> '''- Le NFC'''<br /> - Donnez aux DUT pour débriefing pour voir si c'est adapter<br /> '''- Rotation et zoom d'images '''<br /> - Implementation de la rotation, translation et zoom de plusieurs images<br /> - Il faut maintenant l'intégrer au projet<br /> '''- Snake '''<br /> - Nous sommes entrain d'intégrer un snake dans la liste des jeux disponibles sur l'application<br /> - Quelques problèmes avec l'intégration.<br /> '''- Configuration dynamique d'image '''<br /> - Nous avons beaucoup étudier le code, merci notamment à Adam. Nous pouvons partager l'écran en 2, 3 ou 4 sur les tablettes choix dynamique.<br /> <br /> <br /> === Rétrospective Sprint 3 ===<br /> Durant ce sprint l'ensemble des objectifs fixés ont été réalisé, Nous avons notamment mis au point la stratégie suivante :<br /> Nous focaliser les 3 objectifs , l'intégration du snake, la configuration dynamique des écrans et enfin le rotozoom des images.<br /> L'ambiance a été bonne durant ce sprint.<br /> <br /> == Week 5 (February, 23rd - March, 1st) ==<br /> <br /> Interruption pédagogique d'une semaine, rédaction du Wiki<br /> <br /> == Week 6 (March, 1nd - March, 7th) ==<br /> <br /> ===Objectifs===<br /> '''- Récupérer l'ensemble du code'''<br /> '''- Conception'''<br /> '''- Début du développement'''<br /> <br /> ===Travail Réalisé===<br /> '''- Réparation de la table cassé'''<br /> - Changement du nock avec installation de la distribution.<br /> - Nouveau mot de passe = admin<br /> '''- Snake'''<br /> - Le grand écran du snake<br /> - En cours d'intégration du Tweldisplay<br /> '''- Configuration des tables tactiles '''<br /> - Création d'une interface pour une configuration dynamique<br /> - Début du code moteur pour intégrer la solution dynamique à l'application.<br /> '''- Préparation de la JPO Polytech'''<br /> - Préparation de la démo pour la journée Porte ouverte à Polytech<br /> '''- Modification des images '''<br /> - Possibilité de faire bouger une image, de la zoomer etc...<br /> - ajouter la rotation de l'image dans le canevas<br /> <br /> <br /> === Rétrospective Sprint 6 ===<br /> Durant ce sprint l'ensemble des objectifs fixés ont été réalisé, de plus toujours une bonne entente dans le groupe. Les journées ont été chargées. Bientôt trois nouvelles fonctionnalité seront disponible.<br /> <br /> == Week 7 (March, 8th - March, 13rd) ==<br /> === Objectifs ===<br /> '''- Finir la configuration dynamique des tables'''<br /> '''- Gérer le changement d'écran du Snake'''<br /> '''- Finir les action sur une image'''<br /> <br /> ===Travail Réalisé===<br /> '''- Rendu dossier MPI'''<br /> - Rendu du dossier pour le cours d'MPI<br /> - vous pouvez le consulter ici : [[File:MPI_SmartClassRoom.pdf ]]<br /> '''- NFC'''<br /> - Nous avons chargé les DUT de s'occuper du NFC il rencontre beaucoup de problèmes par rapport à l'installation ce qui nous donner au finale beaucoup de travail pour du Débug.<br /> '''- Configuration des tables tactiles '''<br /> - voir le tutoriel sur la configuration dynamique des tables : [[Projets-2015-2016-SmartClassRoom#Configuration_Dynamiques_des_Tables |Tutoriel configuration dynamique]]<br /> <br /> '''- Snake'''<br /> - Quelques problème avec le twiled display, en espérant règler les problèmes ce week end pour intégrer Lundi <br /> '''- Modification des images '''<br /> - Possibilité de faire bouger une image, de la boomer etc...<br /> '''- Problèmes '''<br /> - La cohabitation entre NOWJS (l'ensemble de projet à été codé avec cette librairie) et socket IO. Nous avons eu beaucoup de mal à trouver un solution pour remplacer NOWJS puisque cette librairie n'existe plus nous avons du faire le choix d'utiliser SocketIO. La grande difficulté à été de faire cohabité ces deux librairies.<br /> <br /> === Rétrospective Sprint 6 ===<br /> Durant ce sprint l'ensemble des objectifs fixés ont été réalisé, de plus toujours une bonne entente dans le groupe. Les journées ont été chargées. Bientôt trois nouvelles fonctionnalité seront disponible.<br /> <br /> == Week 7 (March, 9st - March, 15th) ==<br /> <br /> <br /> == Week 8 (March, 16th - March, 22nd) ==<br /> <br /> = Bilan =<br /> <br /> <br /> == Travail Réalisé ==<br /> === Configuration Dynamiques des Tables===<br /> <br /> La configuration des tables dynamiques est une partie importante de notre projet, en effet nous avons mis en place un système permettant à l'utilisateur de choisir sa position par rapport aux autres. Ainsi avec cette nouvelle évolution, l'administrateur pourra définir le nombre de tablette suivant L*l (Longueur * largeur) ou Lignes * Colonnes.<br /> <br /> Nous allons maintenant voir comment cela fonctionne sur les écrans.<br /> <br /> Tout d'abord il vous faut lancer l'application :<br /> - Allez dans ifconfig et notez l'adresse IP de cette machine<br /> - Allez dans le répertoire SMARTCLASSROOM<br /> - Lancer web.js : nodejs ./web.js<br /> - Ouvrir un navigateur (Chrome)<br /> - Je vous laisse rentrer votre Login<br /> <br /> Passons maintenant à la partie intéressante pour configurer les tables dynamiquement.<br /> Pour cela :<br /> Allez dans : <br /> - Menu<br /> - Picture<br /> - Select Picture<br /> - Choisi une image<br /> <br /> [[File:Projets-2015-2016-SmartClassRoom_ConfigTable1.png | 600px| center]]<br /> Je vous laisse maintenant entrer le nombre de lignes et de colonne pour les tables que vous avez actuellement. ( Par exemple ici nous allons faire une configuration 2*2)<br /> <br /> <br /> <br /> [[File:Projets-2015-2016-SmartClassRoom_ConfigTable2.png | 600px| center]]<br /> <br /> Le serveur enverra à chaque machine la disposition des tables qui a été rentré il ne reste plus qu'a l'administrateur de choisir sa position pour chaque machine (suivant les places qui ne sont pas encore utilisés)<br /> <br /> [[File:Projets-2015-2016-SmartClassRoom_ConfigTable3.png | 600px| center]]<br /> <br /> L'application se chargera de couper l'image comme nous l'avons défini précédemment, je vous laisse prendre connaissant ci-dessous le résultat de la découpe d'écran. <br /> <br /> [[File:Projets-2015-2016-SmartClassRoom_ConfigTable4.png | 600px| center]]<br /> <br /> === Touch Interaction ===<br /> <br /> === Chat ===<br /> <br /> Le chat, que nous avons réalisé, est fait à l'aide de la bibliothèque [http://socket.io Socket.io]. Elle se base sur plusieurs techniques différentes qui permettent la communication en temps réel comme WebSocket. Socket.io fonctionne sous forme d'événements comme un événement lors d'une connexion ou une déconnexion. On peut émettre des événements. Le principe de Socket.io c'est que le client et le serveur peuvent émettre et recevoir des événements en temps réel et ainsi réagir en conséquence. De plus, il est possible de transmettre des données avec ces événements<br /> Le serveur (celui qui lance le nodeJS) possède tout ce qui a en commun et le diffuse au client qui l'affiche dans le html.<br /> <br /> <br /> En faite le serveur (WEB.JS) permet de gérer les connexions de clients c'est dans ce fichier que se fait la connection, la déconnection et l'émission d'un message vers les clients.<br /> <br /> <br /> Dans le HTML, qui sera chargé par chaque client, nous gérons la réception des messages, la récupération des champs INPUT et l'émission vers web.js<br /> <br /> <br /> L'utilisateur doit rentrer un pseudonyme avant de pouvoir utiliser le chat. On peut voir la liste des utilisateurs connectés, réinitialiser la conversation et quitter le chat. Pour utiliser toute l'application, l'utilisateur doit rentrer un pseudonyme pour voir le menu s'afficher.<br /> <br /> [[File:Projets-2015-2016-SmartClassRoom_Chat6.png | 800px| center]]<br /> <br /> === Snake ===<br /> <br /> L'objectif est de réaliser une autre application multi-utilisateur avec une gestion de l'affichage en Tiled Display (comme le jeux PingPong). Nous avons donc choisi le jeux classique Snake. Pour cela, nous sommes parti d'un snake basique réalisé en JavaScript et nous avons apporté des modification pour que celui ci fonctionne avec le projet (Nous nous sommes aidés d'un jeux déjà réalisé Ping Pong).<br /> <br /> Dans notre Snake nous avons choisi d'implémenter deux modes de jeu :<br /> <br /> - Un premier mode un joueur. Ce mode permet de jouer au Snake Classique avec des bords bloquants. Pour réaliser cette partie, nous avons adapter le Snake afin qu'il puisse être affichable dans une de nos &quot;canvas&quot;. Puis nous avons implanté le code nécessaire pour le Snake puisse se jouer en &quot;mode grand écran&quot;. <br /> <br /> - Un deuxième mode multi-joueur, qui permet à plusieurs personnes de jouer en Snake. Dans cette version nous avons défini des murs bloquants et non bloquants. Les murs non bloquants permettent de passer le Snake d'un utilisateur à l'autre.<br /> <br /> Afin d'implanté le Snake dans l'application existante, nous avons utilisé les principes mis en place par les étudiants de l'année 2014-2015. C'est dire que le jeu fonctionne selon en modèle d'architecture en deux couches. Il y a tout d'abords une partie moteur qui calcul et transmet les informations de position du Snake. Puis nous avons la vu qui affiche les éléments calculé par les moteurs.<br /> <br /> == Difficultés rencontrées ==<br /> <br /> <br /> <br /> == Notre ressenti ==<br /> <br /> <br /> <br /> <br /> = Références =<br /> <br /> <br /> =Matériels fournis=<br /> * [[MAG3110|MAG3110 Triple Axis Magnetometer Breakout Module]]<br /> * Lecteur [[Near Field Communication|NFC]]<br /> ** [[ACS ACR 122]] x1<br /> ** [[SCL3711]] x4<br /> * Tags NFC MiFare</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=Projets-2015-2016-SmartClassRoom&diff=28095 2016-03-16T23:24:46Z

<p>Sebastien.Toussaint: /* Snake */</p> <hr /> <div>= Project presentation=<br /> <br /> Pour la présentation du sujet nous avons fait le choix d'utiliser la technique '''QQQOP''' qui permet de mobiliser ses connaissances d'une manière structurée. Cela nous à notamment permet de prendre en main le smartClassroom qui est dit &quot;très libre&quot;. <br /> <br /> Afin de donner une analyse structuré de notre projet nous avons rédigé un fiche '''&quot;Software Requirements Specification&quot;''' (SRS) .<br /> <br /> == Qui ? ==<br /> <br /> Le projet est suivi par deux encadrant : <br /> <br /> '''- Monsieur Didier DONSEZ'''<br /> <br /> '''- Monsieur Jérôme MAISONNASSE'''<br /> <br /> <br /> L’équipe en charge du projet est divisé en deux, 4 élèves de la filière RICM5 de Polytech Grenoble :<br /> <br /> '''- HAMDANI Youcef'''<br /> <br /> '''- MESNIER Vincent'''<br /> <br /> '''- SAUSSAC Thibault'''<br /> <br /> '''- TOUSSAINT Sébastien'''<br /> <br /> <br /> Viendront compléter l’équipe, deux étudiant de DUT Réseaux et Télécoms (première année). <br /> <br /> '''- SAK Melik'''<br /> <br /> '''- ZOPP Sébastien'''<br /> <br /> == Quoi ? Définition du sujet ==<br /> <br /> L'objectif à moyen voir à long terme de ce projet est de mettre en place des technologies qui permettent d'améliorer les enseignements dans les salles de cours en utilisant des technologies innovantes inspiré par des résultats de travaux de recherche.<br /> <br /> On peut ainsi imaginer des activités pédagogiques interactives comme des évaluations fournissant des réponses instantanées et permettant ainsi aux enseignants de voir quand un concept doit être révisé ou quand ils doivent davantage aider les élèves. Ce projet est donc principalement destiné aux enseignants. Il leur permettra de passer d'un type d'enseignement à un autre plus évolué, c'est à dire gérer plus efficacement leurs classes, et évaluer la compréhension des élèves durant le cours. On distingue ensuite les élèves qui pourront entre autres organiser leurs propres fichiers multimédias, prendre des notes, collaborer avec d'autres élèves ou partager des fichiers avec les enseignants.<br /> <br /> <br /> ==Quand ? ==<br /> <br /> L’objectif est d’utiliser ce projet durant différents cours, les conférences ou dans journées portes ouvertes afin de mettre en avant l’école.<br /> <br /> <br /> ==Où ? Le lieu où se situe le projet==<br /> <br /> Ce projet pourra s’implanter dans les différentes salles de cours dans les universités de France, dans un premier temps sur le campus Grenoblois.<br /> <br /> <br /> ==Pourquoi ?==<br /> <br /> - Faire évoluer l’enseignement en apportant plus de technologie (interaction) qui est aujourd’hui un facteur important dans l’apprentissage.<br /> <br /> - Ne pas prendre de retard en cas d’absence puisqu’un élève pourra suivre un cours à distance depuis un hôpital ou simplement depuis chez lui.<br /> <br /> - Facilité l’accès aux informations en ayant une plateforme collaborative entre professeurs et étudiants.<br /> <br /> - D’un point de vue santé ce projet permet d’éviter la surcharge des sacs des étudiants. Facilité le coté administratif en gérant la présence des élèves de manière automatiques. (Le temps pour faire l’appel en début de cours ne sera plus nécessaire.)<br /> <br /> ==Software Requirements Specification==<br /> &quot;A software requirements specification (SRS) is a description of a software system to be developed. It lays out functional and non-functional requirements, and may include a set of use cases that describe user interactions that the software must provide.&quot;(src. Wikipédia)<br /> <br /> Vous pouvez consulter notre SRS en cliquant sur le liens ci-dessous :<br /> [[Projets-2015-2016-SmartClassRoom/SRS|Fiche SRS]]<br /> <br /> ==Product functions==<br /> <br /> ==Product evolution==<br /> <br /> =Links=<br /> <br /> =Project schedule=<br /> <br /> Le projet a commencé depuis le 25 Janvier 2015 à 10h30.<br /> <br /> Pour ce projet nous avons fais le choix, sous l'influence de Monsieur Donsez d'utiliser les méthodes agiles afin d'avoir un suivis régulier et un travail organisé. De plus, la méthode SCRUM apporte une grande flexibilité pour le projet ce qui nous parait intéressant au vu de la composition de l'équipe ayant des compétences et des emploi du temps très différents (DUT et Polytech).<br /> <br /> Nous avons commencé par faire un planning de Gantt afin d'avoir un vision global du projet. Je vous laisse ci-dessous prendre connaissance du diagramme que vous avons mis en place. Vous aurez ensuite tous le travaille détaillé STEP by STEP ;)<br /> <br /> [[File:Projets-2015-2016-Gantt.png | 600px| center]]<br /> <br /> <br /> <br /> == Week 1 (January, 25th - February, 1st) ==<br /> === Travail Réalisé === <br /> <br /> '''- Comprendre le sujet, et le définir''' <br /> - Cette objectif est de récupérer des informations et d'avoir des idées innovantes afin de p<br /> <br /> '''- Récupération de nouvelles idées'''<br /> - Connexion smartphone - Table --&gt; Afficher le contenu d'un smartphone sur une table<br /> - Faire bouger des objets avec des gestes élémentaires via le rétroprojecteur <br /> - Chat permettant la communication intra classe <br /> - Animation de figures avec moteurs physiques<br /> - Projection 3D (pour effet Lumière à Lyon)<br /> '''- Rendez-vous avec Jérome Maisonnasse'''<br /> - Jérome nous a donnée différentes idée pour le projet Smartclassroom. Cependant le code n'étant pas disponible il se <br /> charge de le trouver pour le sprint suivant.<br /> '''- Contact des anciens (Projet SmartClassroom 2015)'''<br /> - Nous avons contacter Malick et Adam qui nous ont bien expliqué les travaux qu'ils ont réalisés l'an dernier. <br /> Nous donnant de nouvelles idées d'amélioration (voir ci-dessus)<br /> '''- Création du Wiki'''<br /> - Création de la page [[Projets-2015-2016-SmartClassRoom/SRS | SRS]]<br /> - Création de la page du projet [[Projets-2015-2016-SmartClassRoom | SmartClassRoom]]<br /> <br /> === Rétrospective Sprint 1 ===<br /> <br /> Ce Sprint 1 c'est bien passé nous avons pu réalisé les différentes taches prévu. L'aide des anciens (Malick), de Messieurs DONSEZ &amp; MAISONNASSE nous a été très importante pour comprendre le context et le but du projet. <br /> <br /> Nous avons pu mettre en place un planing dans le groupe l'organisation dans les différentes taches de récupérations d'informations a été très bonne.<br /> <br /> == Week 2 (February, 2nd - February, 8th) ==<br /> === Travail Réalisé ===<br /> <br /> '''- Installation de l'application sur les Tables de la FABLAB''' <br /> - Récupération du code de l'an dernier<br /> - Brancher les machines sur un switch<br /> - Allez dans le projet /SmartClassRoom --&gt; executer web.js<br /> - Sur les 3 tables ouvrir un navigateur (Chrome de préférence)<br /> - Entrez dans le navigateur : @IPserveur:8080<br /> - (L'adresse mise dynamiquement mise si problème aujouté manuellement)<br /> - Profitez ....<br /> <br /> '''- Quelques nouvelles idées'''<br /> - Etendre le &quot;screen&quot; à des tablettes.<br /> - Mettre les cours du prof directement en ligne depuis la caméra du rétroprojecteur<br /> - Configuration de la localisation des tables plus dynamique<br /> <br /> '''- Première lecture du code'''<br /> - Analyser le code pour voir la conception du projet.<br /> - Étude du ping pong<br /> <br /> '''- Début du développement d'un CHAT en JavaScript'''<br /> - Nous voulions mettre en place en chat <br /> - Utilisation du JAVASCRIPT pour un chat<br /> <br /> '''- Définitions des tâches '''<br /> - Réunion avec les DUTs<br /> - Le javascript est t'il possible pour un chat?<br /> - Rédaction de tutoriel d'installation de l'application<br /> - Apport de nouvelles idées<br /> <br /> <br /> === Rétrospective Sprint 2 ===<br /> <br /> Durant ce sprint nous avons pris un peu de retard pour l'implémentation du code. Impossibilité d'exécuter le code sur nos machines personnelles, de plus nous n'avons pas encore eu la démo pour le rétroprojecteur (ni le code).<br /> <br /> Cependant nous avons pu avancer sur des taches parallèles. L'ambiance dans le groupe est bonne, malgré les difficultés pour récupérer le code qui nous fait perdre pas mal de temps<br /> <br /> == Week 3 (February, 9th - February, 15th) == <br /> ===Objectifs===<br /> '''- Récupérer l'ensemble du code'''<br /> '''- Conception'''<br /> '''- Début du développement'''<br /> <br /> ===Travail Réalisé===<br /> '''- Demonstration du projet de tableau intelligent'''<br /> - Prise en main de l'application<br /> '''- Implémentation d'un chat'''<br /> - Développement du chat en Javascript <br /> - Intégration du chat dans l'application principale<br /> '''- Etude de l'affichage des tables tactiles '''<br /> - Analyse du code de l'affichage existant <br /> - Recherche et analyse de différents type d'affichage en Javascript<br /> '''- Problèmes rencontrés '''<br /> - Difficulté d'intégration du chat dans l'application principale.<br /> - Interrogation sur le projet du tableau intelligent, car les moyens de détection et d'interaction vont changer<br /> <br /> <br /> === Rétrospective Sprint 3 ===<br /> Durant ce sprint l'ensemble des objectifs fixés ont été réalisé, de plus toujours une bonne entente dans le groupe. Les journées ont été chargé du fait de certain cours en parallèle. Le Chat est maintenant en place, ce qui est la satisfaction de la semaine.<br /> <br /> == Week 4 (February, 16th - February, 22nd) ==<br /> === Objectifs ===<br /> '''- Finir l'intégration du chat'''<br /> '''- Choix d'implémentation de la configuration pour l'affichage'''<br /> '''- Réflexion sur le tableau intelligent'''<br /> <br /> ===Travail Réalisé===<br /> '''- Le chat est maintenant fonctionnel'''<br /> - Intégration du Chat dans le projet <br /> - Voir les personnes en Ligne<br /> - Correction des bugs lors du passage PC - tablette<br /> - Mode de connexion<br /> '''- Le NFC'''<br /> - Donnez aux DUT pour débriefing pour voir si c'est adapter<br /> '''- Rotation et zoom d'images '''<br /> - Implementation de la rotation, translation et zoom de plusieurs images<br /> - Il faut maintenant l'intégrer au projet<br /> '''- Snake '''<br /> - Nous sommes entrain d'intégrer un snake dans la liste des jeux disponibles sur l'application<br /> - Quelques problèmes avec l'intégration.<br /> '''- Configuration dynamique d'image '''<br /> - Nous avons beaucoup étudier le code, merci notamment à Adam. Nous pouvons partager l'écran en 2, 3 ou 4 sur les tablettes choix dynamique.<br /> <br /> <br /> === Rétrospective Sprint 3 ===<br /> Durant ce sprint l'ensemble des objectifs fixés ont été réalisé, Nous avons notamment mis au point la stratégie suivante :<br /> Nous focaliser les 3 objectifs , l'intégration du snake, la configuration dynamique des écrans et enfin le rotozoom des images.<br /> L'ambiance a été bonne durant ce sprint.<br /> <br /> == Week 5 (February, 23rd - March, 1st) ==<br /> <br /> Interruption pédagogique d'une semaine, rédaction du Wiki<br /> <br /> == Week 6 (March, 1nd - March, 7th) ==<br /> <br /> ===Objectifs===<br /> '''- Récupérer l'ensemble du code'''<br /> '''- Conception'''<br /> '''- Début du développement'''<br /> <br /> ===Travail Réalisé===<br /> '''- Réparation de la table cassé'''<br /> - Changement du nock avec installation de la distribution.<br /> - Nouveau mot de passe = admin<br /> '''- Snake'''<br /> - Le grand écran du snake<br /> - En cours d'intégration du Tweldisplay<br /> '''- Configuration des tables tactiles '''<br /> - Création d'une interface pour une configuration dynamique<br /> - Début du code moteur pour intégrer la solution dynamique à l'application.<br /> '''- Préparation de la JPO Polytech'''<br /> - Préparation de la démo pour la journée Porte ouverte à Polytech<br /> '''- Modification des images '''<br /> - Possibilité de faire bouger une image, de la zoomer etc...<br /> - ajouter la rotation de l'image dans le canevas<br /> <br /> <br /> === Rétrospective Sprint 6 ===<br /> Durant ce sprint l'ensemble des objectifs fixés ont été réalisé, de plus toujours une bonne entente dans le groupe. Les journées ont été chargées. Bientôt trois nouvelles fonctionnalité seront disponible.<br /> <br /> == Week 7 (March, 8th - March, 13rd) ==<br /> === Objectifs ===<br /> '''- Finir la configuration dynamique des tables'''<br /> '''- Gérer le changement d'écran du Snake'''<br /> '''- Finir les action sur une image'''<br /> <br /> ===Travail Réalisé===<br /> '''- Rendu dossier MPI'''<br /> - Rendu du dossier pour le cours d'MPI<br /> - vous pouvez le consulter ici : [[File:MPI_SmartClassRoom.pdf ]]<br /> '''- NFC'''<br /> - Nous avons chargé les DUT de s'occuper du NFC il rencontre beaucoup de problèmes par rapport à l'installation ce qui nous donner au finale beaucoup de travail pour du Débug.<br /> '''- Configuration des tables tactiles '''<br /> - voir le tutoriel sur la configuration dynamique des tables : [[Projets-2015-2016-SmartClassRoom#Configuration_Dynamiques_des_Tables |Tutoriel configuration dynamique]]<br /> <br /> '''- Snake'''<br /> - Quelques problème avec le twiled display, en espérant règler les problèmes ce week end pour intégrer Lundi <br /> '''- Modification des images '''<br /> - Possibilité de faire bouger une image, de la boomer etc...<br /> '''- Problèmes '''<br /> - La cohabitation entre NOWJS (l'ensemble de projet à été codé avec cette librairie) et socket IO. Nous avons eu beaucoup de mal à trouver un solution pour remplacer NOWJS puisque cette librairie n'existe plus nous avons du faire le choix d'utiliser SocketIO. La grande difficulté à été de faire cohabité ces deux librairies.<br /> <br /> === Rétrospective Sprint 6 ===<br /> Durant ce sprint l'ensemble des objectifs fixés ont été réalisé, de plus toujours une bonne entente dans le groupe. Les journées ont été chargées. Bientôt trois nouvelles fonctionnalité seront disponible.<br /> <br /> == Week 7 (March, 9st - March, 15th) ==<br /> <br /> <br /> == Week 8 (March, 16th - March, 22nd) ==<br /> <br /> = Bilan =<br /> <br /> <br /> == Travail Réalisé ==<br /> === Configuration Dynamiques des Tables===<br /> <br /> La configuration des tables dynamiques est une partie importante de notre projet, en effet nous avons mis en place un système permettant à l'utilisateur de choisir sa position par rapport aux autres. Ainsi avec cette nouvelle évolution, l'administrateur pourra définir le nombre de tablette suivant L*l (Longueur * largeur) ou Lignes * Colonnes.<br /> <br /> Nous allons maintenant voir comment cela fonctionne sur les écrans.<br /> <br /> Tout d'abord il vous faut lancer l'application :<br /> - Allez dans ifconfig et notez l'adresse IP de cette machine<br /> - Allez dans le répertoire SMARTCLASSROOM<br /> - Lancer web.js : nodejs ./web.js<br /> - Ouvrir un navigateur (Chrome)<br /> - Je vous laisse rentrer votre Login<br /> <br /> Passons maintenant à la partie intéressante pour configurer les tables dynamiquement.<br /> Pour cela :<br /> Allez dans : <br /> - Menu<br /> - Picture<br /> - Select Picture<br /> - Choisi une image<br /> <br /> [[File:Projets-2015-2016-SmartClassRoom_ConfigTable1.png | 600px| center]]<br /> Je vous laisse maintenant entrer le nombre de lignes et de colonne pour les tables que vous avez actuellement. ( Par exemple ici nous allons faire une configuration 2*2)<br /> <br /> <br /> <br /> [[File:Projets-2015-2016-SmartClassRoom_ConfigTable2.png | 600px| center]]<br /> <br /> Le serveur enverra à chaque machine la disposition des tables qui a été rentré il ne reste plus qu'a l'administrateur de choisir sa position pour chaque machine (suivant les places qui ne sont pas encore utilisés)<br /> <br /> [[File:Projets-2015-2016-SmartClassRoom_ConfigTable3.png | 600px| center]]<br /> <br /> L'application se chargera de couper l'image comme nous l'avons défini précédemment, je vous laisse prendre connaissant ci-dessous le résultat de la découpe d'écran. <br /> <br /> [[File:Projets-2015-2016-SmartClassRoom_ConfigTable4.png | 600px| center]]<br /> <br /> === Touch Interaction ===<br /> <br /> === Chat ===<br /> <br /> Le chat, que nous avons réalisé, est fait à l'aide de la bibliothèque [http://socket.io Socket.io]. Elle se base sur plusieurs techniques différentes qui permettent la communication en temps réel comme WebSocket. Socket.io fonctionne sous forme d'événements comme un événement lors d'une connexion ou une déconnexion. On peut émettre des événements. Le principe de Socket.io c'est que le client et le serveur peuvent émettre et recevoir des événements en temps réel et ainsi réagir en conséquence. De plus, il est possible de transmettre des données avec ces événements<br /> Le serveur (celui qui lance le nodeJS) possède tout ce qui a en commun et le diffuse au client qui l'affiche dans le html.<br /> <br /> <br /> En faite le serveur (WEB.JS) permet de gérer les connexions de clients c'est dans ce fichier que se fait la connection, la déconnection et l'émission d'un message vers les clients.<br /> <br /> <br /> Dans le HTML, qui sera chargé par chaque client, nous gérons la réception des messages, la récupération des champs INPUT et l'émission vers web.js<br /> <br /> <br /> L'utilisateur doit rentrer un pseudonyme avant de pouvoir utiliser le chat. On peut voir la liste des utilisateurs connectés, réinitialiser la conversation et quitter le chat. Pour utiliser toute l'application, l'utilisateur doit rentrer un pseudonyme pour voir le menu s'afficher.<br /> <br /> [[File:Projets-2015-2016-SmartClassRoom_Chat6.png | 800px| center]]<br /> <br /> === Snake ===<br /> <br /> L'objectif est de réaliser une autre application multi-utilisateur avec une gestion de l'affichage en Tiled Display (comme le jeux PingPong). Nous avons donc choisi le jeux classique Snake. Pour cela, nous sommes parti d'un snake basique réalisé en JavaScript et nous avons apporté des modification pour que celui ci fonctionne avec le projet (Nous nous sommes aidés d'un jeux déjà réalisé Ping Pong).<br /> <br /> Dans notre Snake nous avons choisi d'implémenter deux modes de jeu :<br /> <br /> - Un premier mode un joueur. Ce mode permet de jouer au Snake Classique avec des bords bloquants.<br /> <br /> - Un deuxième mode multi-joueur, qui permet à plusieurs personnes de jouer en Snake. Dans cette version nous avons défini des murs bloquants et non bloquants. Les murs non bloquants permettent de passer le Snake d'un utilisateur à l'autre.<br /> <br /> == Difficultés rencontrées ==<br /> <br /> <br /> <br /> == Notre ressenti ==<br /> <br /> <br /> <br /> <br /> = Références =<br /> <br /> <br /> =Matériels fournis=<br /> * [[MAG3110|MAG3110 Triple Axis Magnetometer Breakout Module]]<br /> * Lecteur [[Near Field Communication|NFC]]<br /> ** [[ACS ACR 122]] x1<br /> ** [[SCL3711]] x4<br /> * Tags NFC MiFare</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=Projets-2015-2016-SmartClassRoom&diff=28094 2016-03-16T23:23:10Z

<p>Sebastien.Toussaint: /* Snake */</p> <hr /> <div>= Project presentation=<br /> <br /> Pour la présentation du sujet nous avons fait le choix d'utiliser la technique '''QQQOP''' qui permet de mobiliser ses connaissances d'une manière structurée. Cela nous à notamment permet de prendre en main le smartClassroom qui est dit &quot;très libre&quot;. <br /> <br /> Afin de donner une analyse structuré de notre projet nous avons rédigé un fiche '''&quot;Software Requirements Specification&quot;''' (SRS) .<br /> <br /> == Qui ? ==<br /> <br /> Le projet est suivi par deux encadrant : <br /> <br /> '''- Monsieur Didier DONSEZ'''<br /> <br /> '''- Monsieur Jérôme MAISONNASSE'''<br /> <br /> <br /> L’équipe en charge du projet est divisé en deux, 4 élèves de la filière RICM5 de Polytech Grenoble :<br /> <br /> '''- HAMDANI Youcef'''<br /> <br /> '''- MESNIER Vincent'''<br /> <br /> '''- SAUSSAC Thibault'''<br /> <br /> '''- TOUSSAINT Sébastien'''<br /> <br /> <br /> Viendront compléter l’équipe, deux étudiant de DUT Réseaux et Télécoms (première année). <br /> <br /> '''- SAK Melik'''<br /> <br /> '''- ZOPP Sébastien'''<br /> <br /> == Quoi ? Définition du sujet ==<br /> <br /> L'objectif à moyen voir à long terme de ce projet est de mettre en place des technologies qui permettent d'améliorer les enseignements dans les salles de cours en utilisant des technologies innovantes inspiré par des résultats de travaux de recherche.<br /> <br /> On peut ainsi imaginer des activités pédagogiques interactives comme des évaluations fournissant des réponses instantanées et permettant ainsi aux enseignants de voir quand un concept doit être révisé ou quand ils doivent davantage aider les élèves. Ce projet est donc principalement destiné aux enseignants. Il leur permettra de passer d'un type d'enseignement à un autre plus évolué, c'est à dire gérer plus efficacement leurs classes, et évaluer la compréhension des élèves durant le cours. On distingue ensuite les élèves qui pourront entre autres organiser leurs propres fichiers multimédias, prendre des notes, collaborer avec d'autres élèves ou partager des fichiers avec les enseignants.<br /> <br /> <br /> ==Quand ? ==<br /> <br /> L’objectif est d’utiliser ce projet durant différents cours, les conférences ou dans journées portes ouvertes afin de mettre en avant l’école.<br /> <br /> <br /> ==Où ? Le lieu où se situe le projet==<br /> <br /> Ce projet pourra s’implanter dans les différentes salles de cours dans les universités de France, dans un premier temps sur le campus Grenoblois.<br /> <br /> <br /> ==Pourquoi ?==<br /> <br /> - Faire évoluer l’enseignement en apportant plus de technologie (interaction) qui est aujourd’hui un facteur important dans l’apprentissage.<br /> <br /> - Ne pas prendre de retard en cas d’absence puisqu’un élève pourra suivre un cours à distance depuis un hôpital ou simplement depuis chez lui.<br /> <br /> - Facilité l’accès aux informations en ayant une plateforme collaborative entre professeurs et étudiants.<br /> <br /> - D’un point de vue santé ce projet permet d’éviter la surcharge des sacs des étudiants. Facilité le coté administratif en gérant la présence des élèves de manière automatiques. (Le temps pour faire l’appel en début de cours ne sera plus nécessaire.)<br /> <br /> ==Software Requirements Specification==<br /> &quot;A software requirements specification (SRS) is a description of a software system to be developed. It lays out functional and non-functional requirements, and may include a set of use cases that describe user interactions that the software must provide.&quot;(src. Wikipédia)<br /> <br /> Vous pouvez consulter notre SRS en cliquant sur le liens ci-dessous :<br /> [[Projets-2015-2016-SmartClassRoom/SRS|Fiche SRS]]<br /> <br /> ==Product functions==<br /> <br /> ==Product evolution==<br /> <br /> =Links=<br /> <br /> =Project schedule=<br /> <br /> Le projet a commencé depuis le 25 Janvier 2015 à 10h30.<br /> <br /> Pour ce projet nous avons fais le choix, sous l'influence de Monsieur Donsez d'utiliser les méthodes agiles afin d'avoir un suivis régulier et un travail organisé. De plus, la méthode SCRUM apporte une grande flexibilité pour le projet ce qui nous parait intéressant au vu de la composition de l'équipe ayant des compétences et des emploi du temps très différents (DUT et Polytech).<br /> <br /> Nous avons commencé par faire un planning de Gantt afin d'avoir un vision global du projet. Je vous laisse ci-dessous prendre connaissance du diagramme que vous avons mis en place. Vous aurez ensuite tous le travaille détaillé STEP by STEP ;)<br /> <br /> [[File:Projets-2015-2016-Gantt.png | 600px| center]]<br /> <br /> <br /> <br /> == Week 1 (January, 25th - February, 1st) ==<br /> === Travail Réalisé === <br /> <br /> '''- Comprendre le sujet, et le définir''' <br /> - Cette objectif est de récupérer des informations et d'avoir des idées innovantes afin de p<br /> <br /> '''- Récupération de nouvelles idées'''<br /> - Connexion smartphone - Table --&gt; Afficher le contenu d'un smartphone sur une table<br /> - Faire bouger des objets avec des gestes élémentaires via le rétroprojecteur <br /> - Chat permettant la communication intra classe <br /> - Animation de figures avec moteurs physiques<br /> - Projection 3D (pour effet Lumière à Lyon)<br /> '''- Rendez-vous avec Jérome Maisonnasse'''<br /> - Jérome nous a donnée différentes idée pour le projet Smartclassroom. Cependant le code n'étant pas disponible il se <br /> charge de le trouver pour le sprint suivant.<br /> '''- Contact des anciens (Projet SmartClassroom 2015)'''<br /> - Nous avons contacter Malick et Adam qui nous ont bien expliqué les travaux qu'ils ont réalisés l'an dernier. <br /> Nous donnant de nouvelles idées d'amélioration (voir ci-dessus)<br /> '''- Création du Wiki'''<br /> - Création de la page [[Projets-2015-2016-SmartClassRoom/SRS | SRS]]<br /> - Création de la page du projet [[Projets-2015-2016-SmartClassRoom | SmartClassRoom]]<br /> <br /> === Rétrospective Sprint 1 ===<br /> <br /> Ce Sprint 1 c'est bien passé nous avons pu réalisé les différentes taches prévu. L'aide des anciens (Malick), de Messieurs DONSEZ &amp; MAISONNASSE nous a été très importante pour comprendre le context et le but du projet. <br /> <br /> Nous avons pu mettre en place un planing dans le groupe l'organisation dans les différentes taches de récupérations d'informations a été très bonne.<br /> <br /> == Week 2 (February, 2nd - February, 8th) ==<br /> === Travail Réalisé ===<br /> <br /> '''- Installation de l'application sur les Tables de la FABLAB''' <br /> - Récupération du code de l'an dernier<br /> - Brancher les machines sur un switch<br /> - Allez dans le projet /SmartClassRoom --&gt; executer web.js<br /> - Sur les 3 tables ouvrir un navigateur (Chrome de préférence)<br /> - Entrez dans le navigateur : @IPserveur:8080<br /> - (L'adresse mise dynamiquement mise si problème aujouté manuellement)<br /> - Profitez ....<br /> <br /> '''- Quelques nouvelles idées'''<br /> - Etendre le &quot;screen&quot; à des tablettes.<br /> - Mettre les cours du prof directement en ligne depuis la caméra du rétroprojecteur<br /> - Configuration de la localisation des tables plus dynamique<br /> <br /> '''- Première lecture du code'''<br /> - Analyser le code pour voir la conception du projet.<br /> - Étude du ping pong<br /> <br /> '''- Début du développement d'un CHAT en JavaScript'''<br /> - Nous voulions mettre en place en chat <br /> - Utilisation du JAVASCRIPT pour un chat<br /> <br /> '''- Définitions des tâches '''<br /> - Réunion avec les DUTs<br /> - Le javascript est t'il possible pour un chat?<br /> - Rédaction de tutoriel d'installation de l'application<br /> - Apport de nouvelles idées<br /> <br /> <br /> === Rétrospective Sprint 2 ===<br /> <br /> Durant ce sprint nous avons pris un peu de retard pour l'implémentation du code. Impossibilité d'exécuter le code sur nos machines personnelles, de plus nous n'avons pas encore eu la démo pour le rétroprojecteur (ni le code).<br /> <br /> Cependant nous avons pu avancer sur des taches parallèles. L'ambiance dans le groupe est bonne, malgré les difficultés pour récupérer le code qui nous fait perdre pas mal de temps<br /> <br /> == Week 3 (February, 9th - February, 15th) == <br /> ===Objectifs===<br /> '''- Récupérer l'ensemble du code'''<br /> '''- Conception'''<br /> '''- Début du développement'''<br /> <br /> ===Travail Réalisé===<br /> '''- Demonstration du projet de tableau intelligent'''<br /> - Prise en main de l'application<br /> '''- Implémentation d'un chat'''<br /> - Développement du chat en Javascript <br /> - Intégration du chat dans l'application principale<br /> '''- Etude de l'affichage des tables tactiles '''<br /> - Analyse du code de l'affichage existant <br /> - Recherche et analyse de différents type d'affichage en Javascript<br /> '''- Problèmes rencontrés '''<br /> - Difficulté d'intégration du chat dans l'application principale.<br /> - Interrogation sur le projet du tableau intelligent, car les moyens de détection et d'interaction vont changer<br /> <br /> <br /> === Rétrospective Sprint 3 ===<br /> Durant ce sprint l'ensemble des objectifs fixés ont été réalisé, de plus toujours une bonne entente dans le groupe. Les journées ont été chargé du fait de certain cours en parallèle. Le Chat est maintenant en place, ce qui est la satisfaction de la semaine.<br /> <br /> == Week 4 (February, 16th - February, 22nd) ==<br /> === Objectifs ===<br /> '''- Finir l'intégration du chat'''<br /> '''- Choix d'implémentation de la configuration pour l'affichage'''<br /> '''- Réflexion sur le tableau intelligent'''<br /> <br /> ===Travail Réalisé===<br /> '''- Le chat est maintenant fonctionnel'''<br /> - Intégration du Chat dans le projet <br /> - Voir les personnes en Ligne<br /> - Correction des bugs lors du passage PC - tablette<br /> - Mode de connexion<br /> '''- Le NFC'''<br /> - Donnez aux DUT pour débriefing pour voir si c'est adapter<br /> '''- Rotation et zoom d'images '''<br /> - Implementation de la rotation, translation et zoom de plusieurs images<br /> - Il faut maintenant l'intégrer au projet<br /> '''- Snake '''<br /> - Nous sommes entrain d'intégrer un snake dans la liste des jeux disponibles sur l'application<br /> - Quelques problèmes avec l'intégration.<br /> '''- Configuration dynamique d'image '''<br /> - Nous avons beaucoup étudier le code, merci notamment à Adam. Nous pouvons partager l'écran en 2, 3 ou 4 sur les tablettes choix dynamique.<br /> <br /> <br /> === Rétrospective Sprint 3 ===<br /> Durant ce sprint l'ensemble des objectifs fixés ont été réalisé, Nous avons notamment mis au point la stratégie suivante :<br /> Nous focaliser les 3 objectifs , l'intégration du snake, la configuration dynamique des écrans et enfin le rotozoom des images.<br /> L'ambiance a été bonne durant ce sprint.<br /> <br /> == Week 5 (February, 23rd - March, 1st) ==<br /> <br /> Interruption pédagogique d'une semaine, rédaction du Wiki<br /> <br /> == Week 6 (March, 1nd - March, 7th) ==<br /> <br /> ===Objectifs===<br /> '''- Récupérer l'ensemble du code'''<br /> '''- Conception'''<br /> '''- Début du développement'''<br /> <br /> ===Travail Réalisé===<br /> '''- Réparation de la table cassé'''<br /> - Changement du nock avec installation de la distribution.<br /> - Nouveau mot de passe = admin<br /> '''- Snake'''<br /> - Le grand écran du snake<br /> - En cours d'intégration du Tweldisplay<br /> '''- Configuration des tables tactiles '''<br /> - Création d'une interface pour une configuration dynamique<br /> - Début du code moteur pour intégrer la solution dynamique à l'application.<br /> '''- Préparation de la JPO Polytech'''<br /> - Préparation de la démo pour la journée Porte ouverte à Polytech<br /> '''- Modification des images '''<br /> - Possibilité de faire bouger une image, de la zoomer etc...<br /> - ajouter la rotation de l'image dans le canevas<br /> <br /> <br /> === Rétrospective Sprint 6 ===<br /> Durant ce sprint l'ensemble des objectifs fixés ont été réalisé, de plus toujours une bonne entente dans le groupe. Les journées ont été chargées. Bientôt trois nouvelles fonctionnalité seront disponible.<br /> <br /> == Week 7 (March, 8th - March, 13rd) ==<br /> === Objectifs ===<br /> '''- Finir la configuration dynamique des tables'''<br /> '''- Gérer le changement d'écran du Snake'''<br /> '''- Finir les action sur une image'''<br /> <br /> ===Travail Réalisé===<br /> '''- Rendu dossier MPI'''<br /> - Rendu du dossier pour le cours d'MPI<br /> - vous pouvez le consulter ici : [[File:MPI_SmartClassRoom.pdf ]]<br /> '''- NFC'''<br /> - Nous avons chargé les DUT de s'occuper du NFC il rencontre beaucoup de problèmes par rapport à l'installation ce qui nous donner au finale beaucoup de travail pour du Débug.<br /> '''- Configuration des tables tactiles '''<br /> - voir le tutoriel sur la configuration dynamique des tables : [[Projets-2015-2016-SmartClassRoom#Configuration_Dynamiques_des_Tables |Tutoriel configuration dynamique]]<br /> <br /> '''- Snake'''<br /> - Quelques problème avec le twiled display, en espérant règler les problèmes ce week end pour intégrer Lundi <br /> '''- Modification des images '''<br /> - Possibilité de faire bouger une image, de la boomer etc...<br /> '''- Problèmes '''<br /> - La cohabitation entre NOWJS (l'ensemble de projet à été codé avec cette librairie) et socket IO. Nous avons eu beaucoup de mal à trouver un solution pour remplacer NOWJS puisque cette librairie n'existe plus nous avons du faire le choix d'utiliser SocketIO. La grande difficulté à été de faire cohabité ces deux librairies.<br /> <br /> === Rétrospective Sprint 6 ===<br /> Durant ce sprint l'ensemble des objectifs fixés ont été réalisé, de plus toujours une bonne entente dans le groupe. Les journées ont été chargées. Bientôt trois nouvelles fonctionnalité seront disponible.<br /> <br /> == Week 7 (March, 9st - March, 15th) ==<br /> <br /> <br /> == Week 8 (March, 16th - March, 22nd) ==<br /> <br /> = Bilan =<br /> <br /> <br /> == Travail Réalisé ==<br /> === Configuration Dynamiques des Tables===<br /> <br /> La configuration des tables dynamiques est une partie importante de notre projet, en effet nous avons mis en place un système permettant à l'utilisateur de choisir sa position par rapport aux autres. Ainsi avec cette nouvelle évolution, l'administrateur pourra définir le nombre de tablette suivant L*l (Longueur * largeur) ou Lignes * Colonnes.<br /> <br /> Nous allons maintenant voir comment cela fonctionne sur les écrans.<br /> <br /> Tout d'abord il vous faut lancer l'application :<br /> - Allez dans ifconfig et notez l'adresse IP de cette machine<br /> - Allez dans le répertoire SMARTCLASSROOM<br /> - Lancer web.js : nodejs ./web.js<br /> - Ouvrir un navigateur (Chrome)<br /> - Je vous laisse rentrer votre Login<br /> <br /> Passons maintenant à la partie intéressante pour configurer les tables dynamiquement.<br /> Pour cela :<br /> Allez dans : <br /> - Menu<br /> - Picture<br /> - Select Picture<br /> - Choisi une image<br /> <br /> [[File:Projets-2015-2016-SmartClassRoom_ConfigTable1.png | 600px| center]]<br /> Je vous laisse maintenant entrer le nombre de lignes et de colonne pour les tables que vous avez actuellement. ( Par exemple ici nous allons faire une configuration 2*2)<br /> <br /> <br /> <br /> [[File:Projets-2015-2016-SmartClassRoom_ConfigTable2.png | 600px| center]]<br /> <br /> Le serveur enverra à chaque machine la disposition des tables qui a été rentré il ne reste plus qu'a l'administrateur de choisir sa position pour chaque machine (suivant les places qui ne sont pas encore utilisés)<br /> <br /> [[File:Projets-2015-2016-SmartClassRoom_ConfigTable3.png | 600px| center]]<br /> <br /> L'application se chargera de couper l'image comme nous l'avons défini précédemment, je vous laisse prendre connaissant ci-dessous le résultat de la découpe d'écran. <br /> <br /> [[File:Projets-2015-2016-SmartClassRoom_ConfigTable4.png | 600px| center]]<br /> <br /> === Touch Interaction ===<br /> <br /> === Chat ===<br /> <br /> Le chat, que nous avons réalisé, est fait à l'aide de la bibliothèque [http://socket.io Socket.io]. Elle se base sur plusieurs techniques différentes qui permettent la communication en temps réel comme WebSocket. Socket.io fonctionne sous forme d'événements comme un événement lors d'une connexion ou une déconnexion. On peut émettre des événements. Le principe de Socket.io c'est que le client et le serveur peuvent émettre et recevoir des événements en temps réel et ainsi réagir en conséquence. De plus, il est possible de transmettre des données avec ces événements<br /> Le serveur (celui qui lance le nodeJS) possède tout ce qui a en commun et le diffuse au client qui l'affiche dans le html.<br /> <br /> <br /> En faite le serveur (WEB.JS) permet de gérer les connexions de clients c'est dans ce fichier que se fait la connection, la déconnection et l'émission d'un message vers les clients.<br /> <br /> <br /> Dans le HTML, qui sera chargé par chaque client, nous gérons la réception des messages, la récupération des champs INPUT et l'émission vers web.js<br /> <br /> <br /> L'utilisateur doit rentrer un pseudonyme avant de pouvoir utiliser le chat. On peut voir la liste des utilisateurs connectés, réinitialiser la conversation et quitter le chat. Pour utiliser toute l'application, l'utilisateur doit rentrer un pseudonyme pour voir le menu s'afficher.<br /> <br /> [[File:Projets-2015-2016-SmartClassRoom_Chat6.png | 800px| center]]<br /> <br /> === Snake ===<br /> <br /> L'objectif est de réaliser une autre application multi-utilisateur avec une gestion de l'affichage en Tiled Display (comme le jeux PingPong). Nous avons donc choisi le jeux classique Snake. Pour cela, nous sommes parti d'un snake basique réalisé en JavaScript et nous avons apporté des modification pour que celui ci fonctionne avec le projet (Nous nous sommes aidés d'un jeux déjà réalisé Ping Pong).<br /> Dans notre Snake nous avons choisi d'implémenter deux modes de jeu :<br /> - Un premier mode un joueur. Ce mode permet de jouer au Snake Classique avec des bords bloquants.<br /> - Un deuxième mode multi-joueur, qui permet à plusieurs personnes de jouer en Snake. Dans cette version nous avons défini des murs bloquants et non bloquants. Les murs non bloquants permettent de passer le Snake d'un utilisateur à l'autre.<br /> <br /> == Difficultés rencontrées ==<br /> <br /> <br /> <br /> == Notre ressenti ==<br /> <br /> <br /> <br /> <br /> = Références =<br /> <br /> <br /> =Matériels fournis=<br /> * [[MAG3110|MAG3110 Triple Axis Magnetometer Breakout Module]]<br /> * Lecteur [[Near Field Communication|NFC]]<br /> ** [[ACS ACR 122]] x1<br /> ** [[SCL3711]] x4<br /> * Tags NFC MiFare</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=ECOM-RICM/PIXEL-SHIRT&diff=24596 2015-10-19T08:12:11Z

<p>Sebastien.Toussaint: /* Analyse de la concurrence */</p> <hr /> <div>Le projet ECOM-RICM 2015-2016 consiste à concevoir et développer une application de commerce électronique dans le cadre des unités d'enseignements Génie Logiciel, IHM et Projet ECOM gérer respectivement par Didier DONSEZ, Laurence NIGAY et Sybille CAFFIAU.<br /> <br /> ==Présentation du projet [[ECOM]]==<br /> <br /> Notre site de commerce électronique &quot;PIXEL-SHIRT&quot; permet la création de tee-shirt avec des modèles pixelisé personnalisé. Chaque client doit au préalablement créer un compte. Il pourra ensuite choisir entre une panoplie de Tee-shirt (la taille, le type, col en V, couleur, etc...). Deplus le client pourra importer un dessin à représenter sur le tee-shirt. Un outil de dessin pixélisé sera éventuellement mis en place sur le site. Le projet ECOM étant de courte durée nous décidons d'utiliser une méthodologie [[Scrum]] pour la conduite de ce projet. La partie IHM et la partie Système sont menées en parallèle pendant toute la durée du projet. Le projet se conclut par une soutenance finale pour chaque partie (IHM et système).<br /> <br /> ===SCRUM===<br /> Pour la partie conception de l'architecture de notre site nous avons décidé d'utiliser la méthode agile Scrum avec des sprints d'une durée de 1 semaine. En effet, cela nous permet d'avoir rapidement un feedback sur le travail effectué, et par conséquent d'augmenter notre réactivité face aux demandes du client. Voici le lien vers notre Waffle, qui permet de voir en temps réel l'avancement de notre projet : [https://waffle.io/Vivien-Michel/PIXEL-SHIRT]. Nous utilisons aussi Scrum pour la partie création du site. Ci dessous voici notre planning prévisionnel du projet avec les différentes tâches.<br /> <br /> [[File:planning_previsionnel.jpg|center|thumb|900px]]<br /> <br /> ===GIT===<br /> Nous utilisons Github un gestionnaire de version pour pouvoir interagir simultanément sur le projet PIXEL-SHIRT. Voici le lien de dêpot distant : [https://github.com/Vivien-Michel/PIXEL-SHIRT]<br /> <br /> ==Equipe==<br /> <br /> ===Enseignants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | DONSEZ Didier<br /> | didier.donsez@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | CAFFIAU Sybille <br /> | sybille.caffiau@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | NIGAY Laurence <br /> | laurence.nigay@imag.fr<br /> |- <br /> <br /> |}<br /> <br /> ===Etudiants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> !scope=&quot;col&quot;| Rôle<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | MICHEL Vivien<br /> | vivien.michel@e.ujf-grenoble.fr<br /> | Scrum Master<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | KLIPFFEL Tararaina<br /> | tararaina.klipffel@e.ujf-grenoble.fr<br /> | Chef de projet<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | TOUSSAINT Sebastien<br /> | sebastien.toussain@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | SAUSSAC Thibault<br /> | thibault.saussac@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | LONGFEI Jérôme<br /> | jérôme.longfei@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> |}<br /> <br /> =SRS=<br /> [fiche_SRS]<br /> Définitions des exigences logicielles<br /> <br /> =Gestion de projet=<br /> ==Initialisation du projet 08/09/2015==<br /> Définition du projet et des différents objectifs à atteindre. Création d'un site web permettant la création de Tee-Shirt avec des logos pixelisés. L'application offre la possibilité de créer des Tee-Shirt avec :<br /> * des modèles prédéfinis<br /> * des modèles prédéfinis modifiable<br /> * des créations de modèle.<br /> <br /> ==Création du questionnaire 15/09/2015==<br /> ===Questionnaire===<br /> [https://docs.google.com/forms/d/1rcJ5u16AZn9hkijGnRVUkNL3VhEI4zp9b5F17_58E7w/viewform Questionnaire ECOM]<br /> ===Analyse des données===<br /> ==== Cible ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Age des utilisateurs<br /> !scope=&quot;col&quot;| Nombre d'heure d'utilisation d'un ordinateur<br /> !scope=&quot;col&quot;| Nombre d'achat en ligne par mois<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:AgeConso.png|center|thumb|500px]]<br /> | [[File:HeureConso.png|center|thumb|500px]]<br /> | [[File:NbFoisConso.png|center|thumb|500px]]<br /> |-<br /> <br /> |}<br /> <br /> <br /> Notre cible est principalement des consommateurs entre 20 et 40. Les différents graphiques nous montrent qu’ils sont à l’aise avec un utilisateur car 93% d’entre eux passent entre 1h et plus sur un ordinateur. Concernant les achats en ligne ils ont déjà plusieurs fois utilisé ce moyen de consommation.<br /> <br /> Conclusion : nous avons à faire à des utilisateurs plus que novice dans l’utilisation des ordinateurs. Ayant déjà effectué des achats en ligne il faut que l’interface du site puis lors être familier, afin d’avoir des achats rapide. <br /> <br /> ==== Plateformes ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Plateforme utilisé pour effectuer des achats<br /> !scope=&quot;col&quot;| Navigateur utilisé pour effectuer des achats<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:SurQuoi.png|center|thumb|500px]]<br /> | [[File:browserusefor.png|center|thumb|500px]]<br /> |-<br /> <br /> |}<br /> <br /> L’ordinateur est la plateforme la plus utilité pour les achats en lignes. Donc nous allons nous concentrer sur le développement d’une application Web<br /> Concernant le support de navigation, Google Chrome prend la première place du podium 68,8% devant Firefox et Safari avec 18,8% et 6,3%. <br /> <br /> En conclusion nous allons utiliser HTML5 afin de favoriser l’afficher des pages web sur les téléphones portable. Et aussi afin d’avoir un rendu correct sur une grande variété de navigateur web.<br /> <br /> <br /> ==== Fonctionnalités attendus ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Fonctionnalités Importantes<br /> !scope=&quot;col&quot;| Importance des commentaires<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:poiintImportznt.png|center|thumb|500px]]<br /> | [[File:commentaireImport.png|center|thumb|500px]]<br /> |-<br /> <br /> |}<br /> <br /> <br /> Quatre points sont primordiaux pour les utilisateurs :<br /> * Des paiements sécurisés<br /> * Rapidité des commandes (EUH livraison ou sur le site)<br /> * Les commentaires<br /> * L’affichage des promotions <br /> <br /> Pour répondre à la première demande nous avons l’intention d’utiliser HTTPS pour les transactions sur notre site et nous comptons aussi le mettre en évidence afin que les clients soient sécurisés.<br /> <br /> Pour le dernier point nous avons l’intention d’afficher les promotions sur la page d’accueil dès qu’ils seront disponibles. <br /> L’usage des commentaires est essentiel pour effectuer un achat. Alors il prévu que les utilisateurs puissent écrire des commentaires pour un produit et aussi que ce commentaire soit visible<br /> <br /> <br /> ===Analyse de la concurrence ===<br /> [https://www.qwertee.com/ qwertee] : Site super clair car il mette bien en avant le produit. Le prix est bien visible, pas besoin de faire plusieurs click avant de l’afficher. La totalité du site avec régit pas des transactions HTTPS. Les commentaires sont bien visibles sous les articles proposés. Les commandes sont facilement exécutées (une dizaine de clics). <br /> <br /> [http://www.spreadshirt.fr/ spreadshirt] : Ce site met en valeur la fabrication du T-Shirt. Donc on a ici plus une interface pour de la création que pour de la vente. Mais ce site propose de vendre des T-Shirt. Ce site n’affiche pas le HTTPS durant la navigation. On ne voit pas de commentaire sur les articles sélectionnés <br /> <br /> [https://www.pixelshirt.fr/ pixelshirt] : Site super clair car il mette bien en avant le produit. Le prix est bien visible, pas besoin de faire plusieurs click avant de l’afficher. La totalité du site avec régit pas des transactions HTTPS. On ne voit pas de commentaire sur les articles sélectionnés. Mais l’on peut voter pour les T-Shirt.<br /> <br /> ==Définir les pré-requis, les besoins et les contraintes 22/09/2015 &amp; 29/09/2015==<br /> ===Les pré-requis===<br /> 1) Qui est ce qui va m’utiliser ? Quand ? Pourquoi ? Dans quel environnement ? Comment résonne cet utilisateur ?<br /> Le site de E-commerce sera utilisé par des utilisateurs relativement jeune puisque la plupart des personnes intéressées ont entre 15 et 25 ans. Par tous type de personne, à la fois des étudiants, des bureaux étudiants pour des tee-shirt à l’image de leur école ou filière mais aussi des chefs d’entreprise voulant faire des tee-shirt publicitaire à l’effigie de leur entreprise, des clubs sportifs. Ce site web sera disponible tout le temps mais les principales fréquentation devrait être en fin de journée après avoir étudier la fréquentation sur les sites concurrents. Leurs principales vente se font tout au long de la journée du fait de l’accès à l’Internet sur leur lieu de travail cependant le pic des commande se site en fin de journée entre 18h30 et 21h. Les tee-shirt personnalisés pourront être commandés par des personnes voulant se démarquer avec un tee-shirt original. Cependant ces tee-shirt sont aussi très commandés par des personnes voulant faire des cadeaux d’anniversaire afin d’avoir une touche personnel dessus. Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire. <br /> ===Les besoins===<br /> 2) Quelles plateformes je peux utiliser pour communiquer avec un humain ?<br /> Les plate-formes pouvant être utilisés sont les couriels, les SMS, puisque la clientèle est jeune il serait intéressant de faire des offres promotionnel via Facebook et plus généralement les réseaux sociaux. (GSM, Ordinateurs, Smartphones)<br /> 3) Qu’est ce que j’ai besoin de connaître pour permettre à l’humain d’accomplir ses tâches ? Qu’est ce qu’un développeur peut m’apprendre ? Comment ?<br /> * Ses coordonnées bancaires.<br /> * Son adresse de livraison<br /> * Son nom, prénom.<br /> * Son adresse mail.<br /> * Son numéro de téléphone.<br /> ===Les contraintes===<br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des contraintes<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Type<br /> !scope=&quot;col&quot;| contraintes<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Utilisateurs<br /> | Les utilisateurs de notre site seront :<br /> * Les étudiants qui veulent un tee-shirt représentant leur filière ou école.<br /> * Les personnes qui veulent un tee-shirt individualisé.<br /> * Les entreprises qui veulent prendre un tee-shirt représentant leur culture d’entreprise.<br /> * Les groupes comme les clubs sportifs et les geeks.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | Environnement<br /> | Les clients vont utiliser le site de E-commerce sur les ordinateurs puisque c’est pratique à télécharger leur commandes vers un serveur.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Objectifs de l’utilisateur, tâches et cas d’utilisation<br /> | L’objectif de l’utilisateur est de faire une commande des tee-shirts individualisés.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Entrées/sorties possibles, plateformes<br /> | Entrées: Les images des tee-shirts, le nombre et les tailles des tee-shirts, les informations personnalisés (les coordonnées bancaires, l’adresse de livraison, le nom et prénom, l’adresse mail, le numéro de téléphone). Plateformes: Les navigateurs web sur les ordinateurs.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Analyse technologique (étude de librairies...) technologies web obligatoires<br /> | Utilisation de JavaScript et CSS pour réaliser des web pages, java pour réaliser la couche logique et JDBC pour la connexion à des bases de donneés<br /> |-<br /> <br /> |}<br /> <br /> <br /> ==Conception IHM 06/10/2015==<br /> ===Utilisateurs cible===<br /> Personnes comprises entre 18 et 40 ans. Les 18 – 25 car ils veulent suivre la mode du rétro. Et les 25 - 40 car cela leur rappel leur enfance avec les jeux pixelisés.<br /> ===Tâches : priorité de développement pour l’utilisateur===<br /> Product backlog des priorité de développement pour l'utilisateur en ce qui concerne L'IHM.<br /> <br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des tâches<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Tâche<br /> !scope=&quot;col&quot;| Sous tâches<br /> !scope=&quot;col&quot;| Priorité<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Gestion compte<br /> | <br /> * création/suppression du compte<br /> | (7)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Créer un modèle de Tee-shirt<br /> | <br /> * proposer un design<br /> * choix d’un modèle prédéfinit<br /> | 2<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Gestion du panier<br /> | <br /> * création d‘une session <br /> * ajouter/supprimer/modifier un article au panier <br /> * commander<br /> | (6)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Transaction bancaire<br /> |<br /> * accepter <br /> * refuser <br /> * payer<br /> | 3<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Visualiser le catalogue<br /> | <br /> * recherche article<br /> * visualiser par catégorie <br /> * IHM<br /> | 1<br /> |-<br /> <br /> !scope=&quot;row&quot;| 6<br /> | Gérer catalogue<br /> | <br /> * création BD<br /> | (4)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 7<br /> | Administrateur<br /> |<br /> * ajout d'un article au catalogue<br /> | (5)<br /> |-<br /> |}<br /> <br /> ===Contextes d'utilisation===<br /> Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire.<br /> <br /> ===User Case UML===<br /> [[File:Use_Case.png|center|thumb|600px]]<br /> <br /> ===Modèle de tâche===<br /> [[File:tache.jpg|center|thumb|1200px]]<br /> <br /> ===IHM===<br /> ====IHM abstraite====<br /> [[File:IHM_abstraite.png|center|thumb|900px]]<br /> <br /> ====Maquette IHM====<br /> [[File:maquette.jpg|center|thumb|600px]]<br /> <br /> =Références=</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=ECOM-RICM/PIXEL-SHIRT&diff=24595 2015-10-19T08:11:55Z

<p>Sebastien.Toussaint: /* Analyse de la concurrence */</p> <hr /> <div>Le projet ECOM-RICM 2015-2016 consiste à concevoir et développer une application de commerce électronique dans le cadre des unités d'enseignements Génie Logiciel, IHM et Projet ECOM gérer respectivement par Didier DONSEZ, Laurence NIGAY et Sybille CAFFIAU.<br /> <br /> ==Présentation du projet [[ECOM]]==<br /> <br /> Notre site de commerce électronique &quot;PIXEL-SHIRT&quot; permet la création de tee-shirt avec des modèles pixelisé personnalisé. Chaque client doit au préalablement créer un compte. Il pourra ensuite choisir entre une panoplie de Tee-shirt (la taille, le type, col en V, couleur, etc...). Deplus le client pourra importer un dessin à représenter sur le tee-shirt. Un outil de dessin pixélisé sera éventuellement mis en place sur le site. Le projet ECOM étant de courte durée nous décidons d'utiliser une méthodologie [[Scrum]] pour la conduite de ce projet. La partie IHM et la partie Système sont menées en parallèle pendant toute la durée du projet. Le projet se conclut par une soutenance finale pour chaque partie (IHM et système).<br /> <br /> ===SCRUM===<br /> Pour la partie conception de l'architecture de notre site nous avons décidé d'utiliser la méthode agile Scrum avec des sprints d'une durée de 1 semaine. En effet, cela nous permet d'avoir rapidement un feedback sur le travail effectué, et par conséquent d'augmenter notre réactivité face aux demandes du client. Voici le lien vers notre Waffle, qui permet de voir en temps réel l'avancement de notre projet : [https://waffle.io/Vivien-Michel/PIXEL-SHIRT]. Nous utilisons aussi Scrum pour la partie création du site. Ci dessous voici notre planning prévisionnel du projet avec les différentes tâches.<br /> <br /> [[File:planning_previsionnel.jpg|center|thumb|900px]]<br /> <br /> ===GIT===<br /> Nous utilisons Github un gestionnaire de version pour pouvoir interagir simultanément sur le projet PIXEL-SHIRT. Voici le lien de dêpot distant : [https://github.com/Vivien-Michel/PIXEL-SHIRT]<br /> <br /> ==Equipe==<br /> <br /> ===Enseignants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | DONSEZ Didier<br /> | didier.donsez@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | CAFFIAU Sybille <br /> | sybille.caffiau@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | NIGAY Laurence <br /> | laurence.nigay@imag.fr<br /> |- <br /> <br /> |}<br /> <br /> ===Etudiants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> !scope=&quot;col&quot;| Rôle<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | MICHEL Vivien<br /> | vivien.michel@e.ujf-grenoble.fr<br /> | Scrum Master<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | KLIPFFEL Tararaina<br /> | tararaina.klipffel@e.ujf-grenoble.fr<br /> | Chef de projet<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | TOUSSAINT Sebastien<br /> | sebastien.toussain@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | SAUSSAC Thibault<br /> | thibault.saussac@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | LONGFEI Jérôme<br /> | jérôme.longfei@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> |}<br /> <br /> =SRS=<br /> [fiche_SRS]<br /> Définitions des exigences logicielles<br /> <br /> =Gestion de projet=<br /> ==Initialisation du projet 08/09/2015==<br /> Définition du projet et des différents objectifs à atteindre. Création d'un site web permettant la création de Tee-Shirt avec des logos pixelisés. L'application offre la possibilité de créer des Tee-Shirt avec :<br /> * des modèles prédéfinis<br /> * des modèles prédéfinis modifiable<br /> * des créations de modèle.<br /> <br /> ==Création du questionnaire 15/09/2015==<br /> ===Questionnaire===<br /> [https://docs.google.com/forms/d/1rcJ5u16AZn9hkijGnRVUkNL3VhEI4zp9b5F17_58E7w/viewform Questionnaire ECOM]<br /> ===Analyse des données===<br /> ==== Cible ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Age des utilisateurs<br /> !scope=&quot;col&quot;| Nombre d'heure d'utilisation d'un ordinateur<br /> !scope=&quot;col&quot;| Nombre d'achat en ligne par mois<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:AgeConso.png|center|thumb|500px]]<br /> | [[File:HeureConso.png|center|thumb|500px]]<br /> | [[File:NbFoisConso.png|center|thumb|500px]]<br /> |-<br /> <br /> |}<br /> <br /> <br /> Notre cible est principalement des consommateurs entre 20 et 40. Les différents graphiques nous montrent qu’ils sont à l’aise avec un utilisateur car 93% d’entre eux passent entre 1h et plus sur un ordinateur. Concernant les achats en ligne ils ont déjà plusieurs fois utilisé ce moyen de consommation.<br /> <br /> Conclusion : nous avons à faire à des utilisateurs plus que novice dans l’utilisation des ordinateurs. Ayant déjà effectué des achats en ligne il faut que l’interface du site puis lors être familier, afin d’avoir des achats rapide. <br /> <br /> ==== Plateformes ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Plateforme utilisé pour effectuer des achats<br /> !scope=&quot;col&quot;| Navigateur utilisé pour effectuer des achats<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:SurQuoi.png|center|thumb|500px]]<br /> | [[File:browserusefor.png|center|thumb|500px]]<br /> |-<br /> <br /> |}<br /> <br /> L’ordinateur est la plateforme la plus utilité pour les achats en lignes. Donc nous allons nous concentrer sur le développement d’une application Web<br /> Concernant le support de navigation, Google Chrome prend la première place du podium 68,8% devant Firefox et Safari avec 18,8% et 6,3%. <br /> <br /> En conclusion nous allons utiliser HTML5 afin de favoriser l’afficher des pages web sur les téléphones portable. Et aussi afin d’avoir un rendu correct sur une grande variété de navigateur web.<br /> <br /> <br /> ==== Fonctionnalités attendus ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Fonctionnalités Importantes<br /> !scope=&quot;col&quot;| Importance des commentaires<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:poiintImportznt.png|center|thumb|500px]]<br /> | [[File:commentaireImport.png|center|thumb|500px]]<br /> |-<br /> <br /> |}<br /> <br /> <br /> Quatre points sont primordiaux pour les utilisateurs :<br /> * Des paiements sécurisés<br /> * Rapidité des commandes (EUH livraison ou sur le site)<br /> * Les commentaires<br /> * L’affichage des promotions <br /> <br /> Pour répondre à la première demande nous avons l’intention d’utiliser HTTPS pour les transactions sur notre site et nous comptons aussi le mettre en évidence afin que les clients soient sécurisés.<br /> <br /> Pour le dernier point nous avons l’intention d’afficher les promotions sur la page d’accueil dès qu’ils seront disponibles. <br /> L’usage des commentaires est essentiel pour effectuer un achat. Alors il prévu que les utilisateurs puissent écrire des commentaires pour un produit et aussi que ce commentaire soit visible<br /> <br /> <br /> ===Analyse de la concurrence ===<br /> [https://www.qwertee.com/ qwertee] : Site super clair car il mette bien en avant le produit. Le prix est bien visible, pas besoin de faire plusieurs click avant de l’afficher. La totalité du site avec régit pas des transactions HTTPS. Les commentaires sont bien visibles sous les articles proposés. Les commandes sont facilement exécutées (une dizaine de clics). <br /> <br /> <br /> [http://www.spreadshirt.fr/ spreadshirt] : Ce site met en valeur la fabrication du T-Shirt. Donc on a ici plus une interface pour de la création que pour de la vente. Mais ce site propose de vendre des T-Shirt. Ce site n’affiche pas le HTTPS durant la navigation. On ne voit pas de commentaire sur les articles sélectionnés <br /> <br /> [https://www.pixelshirt.fr/ pixelshirt] : Site super clair car il mette bien en avant le produit. Le prix est bien visible, pas besoin de faire plusieurs click avant de l’afficher. La totalité du site avec régit pas des transactions HTTPS. On ne voit pas de commentaire sur les articles sélectionnés. Mais l’on peut voter pour les T-Shirt.<br /> <br /> ==Définir les pré-requis, les besoins et les contraintes 22/09/2015 &amp; 29/09/2015==<br /> ===Les pré-requis===<br /> 1) Qui est ce qui va m’utiliser ? Quand ? Pourquoi ? Dans quel environnement ? Comment résonne cet utilisateur ?<br /> Le site de E-commerce sera utilisé par des utilisateurs relativement jeune puisque la plupart des personnes intéressées ont entre 15 et 25 ans. Par tous type de personne, à la fois des étudiants, des bureaux étudiants pour des tee-shirt à l’image de leur école ou filière mais aussi des chefs d’entreprise voulant faire des tee-shirt publicitaire à l’effigie de leur entreprise, des clubs sportifs. Ce site web sera disponible tout le temps mais les principales fréquentation devrait être en fin de journée après avoir étudier la fréquentation sur les sites concurrents. Leurs principales vente se font tout au long de la journée du fait de l’accès à l’Internet sur leur lieu de travail cependant le pic des commande se site en fin de journée entre 18h30 et 21h. Les tee-shirt personnalisés pourront être commandés par des personnes voulant se démarquer avec un tee-shirt original. Cependant ces tee-shirt sont aussi très commandés par des personnes voulant faire des cadeaux d’anniversaire afin d’avoir une touche personnel dessus. Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire. <br /> ===Les besoins===<br /> 2) Quelles plateformes je peux utiliser pour communiquer avec un humain ?<br /> Les plate-formes pouvant être utilisés sont les couriels, les SMS, puisque la clientèle est jeune il serait intéressant de faire des offres promotionnel via Facebook et plus généralement les réseaux sociaux. (GSM, Ordinateurs, Smartphones)<br /> 3) Qu’est ce que j’ai besoin de connaître pour permettre à l’humain d’accomplir ses tâches ? Qu’est ce qu’un développeur peut m’apprendre ? Comment ?<br /> * Ses coordonnées bancaires.<br /> * Son adresse de livraison<br /> * Son nom, prénom.<br /> * Son adresse mail.<br /> * Son numéro de téléphone.<br /> ===Les contraintes===<br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des contraintes<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Type<br /> !scope=&quot;col&quot;| contraintes<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Utilisateurs<br /> | Les utilisateurs de notre site seront :<br /> * Les étudiants qui veulent un tee-shirt représentant leur filière ou école.<br /> * Les personnes qui veulent un tee-shirt individualisé.<br /> * Les entreprises qui veulent prendre un tee-shirt représentant leur culture d’entreprise.<br /> * Les groupes comme les clubs sportifs et les geeks.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | Environnement<br /> | Les clients vont utiliser le site de E-commerce sur les ordinateurs puisque c’est pratique à télécharger leur commandes vers un serveur.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Objectifs de l’utilisateur, tâches et cas d’utilisation<br /> | L’objectif de l’utilisateur est de faire une commande des tee-shirts individualisés.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Entrées/sorties possibles, plateformes<br /> | Entrées: Les images des tee-shirts, le nombre et les tailles des tee-shirts, les informations personnalisés (les coordonnées bancaires, l’adresse de livraison, le nom et prénom, l’adresse mail, le numéro de téléphone). Plateformes: Les navigateurs web sur les ordinateurs.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Analyse technologique (étude de librairies...) technologies web obligatoires<br /> | Utilisation de JavaScript et CSS pour réaliser des web pages, java pour réaliser la couche logique et JDBC pour la connexion à des bases de donneés<br /> |-<br /> <br /> |}<br /> <br /> <br /> ==Conception IHM 06/10/2015==<br /> ===Utilisateurs cible===<br /> Personnes comprises entre 18 et 40 ans. Les 18 – 25 car ils veulent suivre la mode du rétro. Et les 25 - 40 car cela leur rappel leur enfance avec les jeux pixelisés.<br /> ===Tâches : priorité de développement pour l’utilisateur===<br /> Product backlog des priorité de développement pour l'utilisateur en ce qui concerne L'IHM.<br /> <br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des tâches<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Tâche<br /> !scope=&quot;col&quot;| Sous tâches<br /> !scope=&quot;col&quot;| Priorité<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Gestion compte<br /> | <br /> * création/suppression du compte<br /> | (7)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Créer un modèle de Tee-shirt<br /> | <br /> * proposer un design<br /> * choix d’un modèle prédéfinit<br /> | 2<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Gestion du panier<br /> | <br /> * création d‘une session <br /> * ajouter/supprimer/modifier un article au panier <br /> * commander<br /> | (6)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Transaction bancaire<br /> |<br /> * accepter <br /> * refuser <br /> * payer<br /> | 3<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Visualiser le catalogue<br /> | <br /> * recherche article<br /> * visualiser par catégorie <br /> * IHM<br /> | 1<br /> |-<br /> <br /> !scope=&quot;row&quot;| 6<br /> | Gérer catalogue<br /> | <br /> * création BD<br /> | (4)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 7<br /> | Administrateur<br /> |<br /> * ajout d'un article au catalogue<br /> | (5)<br /> |-<br /> |}<br /> <br /> ===Contextes d'utilisation===<br /> Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire.<br /> <br /> ===User Case UML===<br /> [[File:Use_Case.png|center|thumb|600px]]<br /> <br /> ===Modèle de tâche===<br /> [[File:tache.jpg|center|thumb|1200px]]<br /> <br /> ===IHM===<br /> ====IHM abstraite====<br /> [[File:IHM_abstraite.png|center|thumb|900px]]<br /> <br /> ====Maquette IHM====<br /> [[File:maquette.jpg|center|thumb|600px]]<br /> <br /> =Références=</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=ECOM-RICM/PIXEL-SHIRT&diff=24592 2015-10-19T08:09:49Z

<p>Sebastien.Toussaint: /* Analyse de la concurrence */</p> <hr /> <div>Le projet ECOM-RICM 2015-2016 consiste à concevoir et développer une application de commerce électronique dans le cadre des unités d'enseignements Génie Logiciel, IHM et Projet ECOM gérer respectivement par Didier DONSEZ, Laurence NIGAY et Sybille CAFFIAU.<br /> <br /> ==Présentation du projet [[ECOM]]==<br /> <br /> Notre site de commerce électronique &quot;PIXEL-SHIRT&quot; permet la création de tee-shirt avec des modèles pixelisé personnalisé. Chaque client doit au préalablement créer un compte. Il pourra ensuite choisir entre une panoplie de Tee-shirt (la taille, le type, col en V, couleur, etc...). Deplus le client pourra importer un dessin à représenter sur le tee-shirt. Un outil de dessin pixélisé sera éventuellement mis en place sur le site. Le projet ECOM étant de courte durée nous décidons d'utiliser une méthodologie [[Scrum]] pour la conduite de ce projet. La partie IHM et la partie Système sont menées en parallèle pendant toute la durée du projet. Le projet se conclut par une soutenance finale pour chaque partie (IHM et système).<br /> <br /> ===SCRUM===<br /> Pour la partie conception de l'architecture de notre site nous avons décidé d'utiliser la méthode agile Scrum avec des sprints d'une durée de 1 semaine. En effet, cela nous permet d'avoir rapidement un feedback sur le travail effectué, et par conséquent d'augmenter notre réactivité face aux demandes du client. Voici le lien vers notre Waffle, qui permet de voir en temps réel l'avancement de notre projet : [https://waffle.io/Vivien-Michel/PIXEL-SHIRT]. Nous utilisons aussi Scrum pour la partie création du site. Ci dessous voici notre planning prévisionnel du projet avec les différentes tâches.<br /> <br /> [[File:planning_previsionnel.jpg|center|thumb|900px]]<br /> <br /> ===GIT===<br /> Nous utilisons Github un gestionnaire de version pour pouvoir interagir simultanément sur le projet PIXEL-SHIRT. Voici le lien de dêpot distant : [https://github.com/Vivien-Michel/PIXEL-SHIRT]<br /> <br /> ==Equipe==<br /> <br /> ===Enseignants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | DONSEZ Didier<br /> | didier.donsez@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | CAFFIAU Sybille <br /> | sybille.caffiau@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | NIGAY Laurence <br /> | laurence.nigay@imag.fr<br /> |- <br /> <br /> |}<br /> <br /> ===Etudiants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> !scope=&quot;col&quot;| Rôle<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | MICHEL Vivien<br /> | vivien.michel@e.ujf-grenoble.fr<br /> | Scrum Master<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | KLIPFFEL Tararaina<br /> | tararaina.klipffel@e.ujf-grenoble.fr<br /> | Chef de projet<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | TOUSSAINT Sebastien<br /> | sebastien.toussain@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | SAUSSAC Thibault<br /> | thibault.saussac@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | LONGFEI Jérôme<br /> | jérôme.longfei@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> |}<br /> <br /> =SRS=<br /> [fiche_SRS]<br /> Définitions des exigences logicielles<br /> <br /> =Gestion de projet=<br /> ==Initialisation du projet 08/09/2015==<br /> Définition du projet et des différents objectifs à atteindre. Création d'un site web permettant la création de Tee-Shirt avec des logos pixelisés. L'application offre la possibilité de créer des Tee-Shirt avec :<br /> * des modèles prédéfinis<br /> * des modèles prédéfinis modifiable<br /> * des créations de modèle.<br /> <br /> ==Création du questionnaire 15/09/2015==<br /> ===Questionnaire===<br /> [https://docs.google.com/forms/d/1rcJ5u16AZn9hkijGnRVUkNL3VhEI4zp9b5F17_58E7w/viewform Questionnaire ECOM]<br /> ===Analyse des données===<br /> ==== Cible ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Age des utilisateurs<br /> !scope=&quot;col&quot;| Nombre d'heure d'utilisation d'un ordinateur<br /> !scope=&quot;col&quot;| Nombre d'achat en ligne par mois<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:AgeConso.png|center|thumb|500px]]<br /> | [[File:HeureConso.png|center|thumb|500px]]<br /> | [[File:NbFoisConso.png|center|thumb|500px]]<br /> |-<br /> <br /> |}<br /> <br /> <br /> Notre cible est principalement des consommateurs entre 20 et 40. Les différents graphiques nous montrent qu’ils sont à l’aise avec un utilisateur car 93% d’entre eux passent entre 1h et plus sur un ordinateur. Concernant les achats en ligne ils ont déjà plusieurs fois utilisé ce moyen de consommation.<br /> <br /> Conclusion : nous avons à faire à des utilisateurs plus que novice dans l’utilisation des ordinateurs. Ayant déjà effectué des achats en ligne il faut que l’interface du site puis lors être familier, afin d’avoir des achats rapide. <br /> <br /> ==== Plateformes ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Plateforme utilisé pour effectuer des achats<br /> !scope=&quot;col&quot;| Navigateur utilisé pour effectuer des achats<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:SurQuoi.png|center|thumb|500px]]<br /> | [[File:browserusefor.png|center|thumb|500px]]<br /> |-<br /> <br /> |}<br /> <br /> L’ordinateur est la plateforme la plus utilité pour les achats en lignes. Donc nous allons nous concentrer sur le développement d’une application Web<br /> Concernant le support de navigation, Google Chrome prend la première place du podium 68,8% devant Firefox et Safari avec 18,8% et 6,3%. <br /> <br /> En conclusion nous allons utiliser HTML5 afin de favoriser l’afficher des pages web sur les téléphones portable. Et aussi afin d’avoir un rendu correct sur une grande variété de navigateur web.<br /> <br /> <br /> ==== Fonctionnalités attendus ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Fonctionnalités Importantes<br /> !scope=&quot;col&quot;| Importance des commentaires<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:poiintImportznt.png|center|thumb|500px]]<br /> | [[File:commentaireImport.png|center|thumb|500px]]<br /> |-<br /> <br /> |}<br /> <br /> <br /> Quatre points sont primordiaux pour les utilisateurs :<br /> * Des paiements sécurisés<br /> * Rapidité des commandes (EUH livraison ou sur le site)<br /> * Les commentaires<br /> * L’affichage des promotions <br /> <br /> Pour répondre à la première demande nous avons l’intention d’utiliser HTTPS pour les transactions sur notre site et nous comptons aussi le mettre en évidence afin que les clients soient sécurisés.<br /> <br /> Pour le dernier point nous avons l’intention d’afficher les promotions sur la page d’accueil dès qu’ils seront disponibles. <br /> L’usage des commentaires est essentiel pour effectuer un achat. Alors il prévu que les utilisateurs puissent écrire des commentaires pour un produit et aussi que ce commentaire soit visible<br /> <br /> <br /> ===Analyse de la concurrence ===<br /> [https://www.qwertee.com/ qwertee] : Site super clair car il mette bien en avant le produit. Le prix est bien visible, pas besoin de faire plusieurs click avant de l’afficher. La totalité du site avec régit pas des transactions HTTPS. Les commentaires sont bien visibles sous les articles proposés. <br /> <br /> <br /> [http://www.spreadshirt.fr/ spreadshirt] : Ce site met en valeur la fabrication du T-Shirt. Donc on a ici plus une interface pour de la création que pour de la vente. Mais ce site propose de vendre des T-Shirt. Ce site n’affiche pas le HTTPS durant la navigation. On ne voit pas de commentaire sur les articles sélectionnés <br /> <br /> [https://www.pixelshirt.fr/ pixelshirt] : Site super clair car il mette bien en avant le produit. Le prix est bien visible, pas besoin de faire plusieurs click avant de l’afficher. La totalité du site avec régit pas des transactions HTTPS. On ne voit pas de commentaire sur les articles sélectionnés. Mais l’on peut voter pour les T-Shirt.<br /> <br /> ==Définir les pré-requis, les besoins et les contraintes 22/09/2015 &amp; 29/09/2015==<br /> ===Les pré-requis===<br /> 1) Qui est ce qui va m’utiliser ? Quand ? Pourquoi ? Dans quel environnement ? Comment résonne cet utilisateur ?<br /> Le site de E-commerce sera utilisé par des utilisateurs relativement jeune puisque la plupart des personnes intéressées ont entre 15 et 25 ans. Par tous type de personne, à la fois des étudiants, des bureaux étudiants pour des tee-shirt à l’image de leur école ou filière mais aussi des chefs d’entreprise voulant faire des tee-shirt publicitaire à l’effigie de leur entreprise, des clubs sportifs. Ce site web sera disponible tout le temps mais les principales fréquentation devrait être en fin de journée après avoir étudier la fréquentation sur les sites concurrents. Leurs principales vente se font tout au long de la journée du fait de l’accès à l’Internet sur leur lieu de travail cependant le pic des commande se site en fin de journée entre 18h30 et 21h. Les tee-shirt personnalisés pourront être commandés par des personnes voulant se démarquer avec un tee-shirt original. Cependant ces tee-shirt sont aussi très commandés par des personnes voulant faire des cadeaux d’anniversaire afin d’avoir une touche personnel dessus. Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire. <br /> ===Les besoins===<br /> 2) Quelles plateformes je peux utiliser pour communiquer avec un humain ?<br /> Les plate-formes pouvant être utilisés sont les couriels, les SMS, puisque la clientèle est jeune il serait intéressant de faire des offres promotionnel via Facebook et plus généralement les réseaux sociaux. (GSM, Ordinateurs, Smartphones)<br /> 3) Qu’est ce que j’ai besoin de connaître pour permettre à l’humain d’accomplir ses tâches ? Qu’est ce qu’un développeur peut m’apprendre ? Comment ?<br /> * Ses coordonnées bancaires.<br /> * Son adresse de livraison<br /> * Son nom, prénom.<br /> * Son adresse mail.<br /> * Son numéro de téléphone.<br /> ===Les contraintes===<br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des contraintes<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Type<br /> !scope=&quot;col&quot;| contraintes<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Utilisateurs<br /> | Les utilisateurs de notre site seront :<br /> * Les étudiants qui veulent un tee-shirt représentant leur filière ou école.<br /> * Les personnes qui veulent un tee-shirt individualisé.<br /> * Les entreprises qui veulent prendre un tee-shirt représentant leur culture d’entreprise.<br /> * Les groupes comme les clubs sportifs et les geeks.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | Environnement<br /> | Les clients vont utiliser le site de E-commerce sur les ordinateurs puisque c’est pratique à télécharger leur commandes vers un serveur.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Objectifs de l’utilisateur, tâches et cas d’utilisation<br /> | L’objectif de l’utilisateur est de faire une commande des tee-shirts individualisés.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Entrées/sorties possibles, plateformes<br /> | Entrées: Les images des tee-shirts, le nombre et les tailles des tee-shirts, les informations personnalisés (les coordonnées bancaires, l’adresse de livraison, le nom et prénom, l’adresse mail, le numéro de téléphone). Plateformes: Les navigateurs web sur les ordinateurs.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Analyse technologique (étude de librairies...) technologies web obligatoires<br /> | Utilisation de JavaScript et CSS pour réaliser des web pages, java pour réaliser la couche logique et JDBC pour la connexion à des bases de donneés<br /> |-<br /> <br /> |}<br /> <br /> <br /> ==Conception IHM 06/10/2015==<br /> ===Utilisateurs cible===<br /> Personnes comprises entre 18 et 40 ans. Les 18 – 25 car ils veulent suivre la mode du rétro. Et les 25 - 40 car cela leur rappel leur enfance avec les jeux pixelisés.<br /> ===Tâches : priorité de développement pour l’utilisateur===<br /> Product backlog des priorité de développement pour l'utilisateur en ce qui concerne L'IHM.<br /> <br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des tâches<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Tâche<br /> !scope=&quot;col&quot;| Sous tâches<br /> !scope=&quot;col&quot;| Priorité<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Gestion compte<br /> | <br /> * création/suppression du compte<br /> | (7)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Créer un modèle de Tee-shirt<br /> | <br /> * proposer un design<br /> * choix d’un modèle prédéfinit<br /> | 2<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Gestion du panier<br /> | <br /> * création d‘une session <br /> * ajouter/supprimer/modifier un article au panier <br /> * commander<br /> | (6)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Transaction bancaire<br /> |<br /> * accepter <br /> * refuser <br /> * payer<br /> | 3<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Visualiser le catalogue<br /> | <br /> * recherche article<br /> * visualiser par catégorie <br /> * IHM<br /> | 1<br /> |-<br /> <br /> !scope=&quot;row&quot;| 6<br /> | Gérer catalogue<br /> | <br /> * création BD<br /> | (4)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 7<br /> | Administrateur<br /> |<br /> * ajout d'un article au catalogue<br /> | (5)<br /> |-<br /> |}<br /> <br /> ===Contextes d'utilisation===<br /> Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire.<br /> <br /> ===User Case UML===<br /> [[File:Use_Case.png|center|thumb|600px]]<br /> <br /> ===Modèle de tâche===<br /> [[File:tache.jpg|center|thumb|1200px]]<br /> <br /> ===IHM===<br /> ====IHM abstraite====<br /> [[File:IHM_abstraite.png|center|thumb|900px]]<br /> <br /> ====Maquette IHM====<br /> [[File:maquette.jpg|center|thumb|600px]]<br /> <br /> =Références=</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=ECOM-RICM/PIXEL-SHIRT&diff=24591 2015-10-19T08:08:56Z

<p>Sebastien.Toussaint: /* Analyse de la concurrence */</p> <hr /> <div>Le projet ECOM-RICM 2015-2016 consiste à concevoir et développer une application de commerce électronique dans le cadre des unités d'enseignements Génie Logiciel, IHM et Projet ECOM gérer respectivement par Didier DONSEZ, Laurence NIGAY et Sybille CAFFIAU.<br /> <br /> ==Présentation du projet [[ECOM]]==<br /> <br /> Notre site de commerce électronique &quot;PIXEL-SHIRT&quot; permet la création de tee-shirt avec des modèles pixelisé personnalisé. Chaque client doit au préalablement créer un compte. Il pourra ensuite choisir entre une panoplie de Tee-shirt (la taille, le type, col en V, couleur, etc...). Deplus le client pourra importer un dessin à représenter sur le tee-shirt. Un outil de dessin pixélisé sera éventuellement mis en place sur le site. Le projet ECOM étant de courte durée nous décidons d'utiliser une méthodologie [[Scrum]] pour la conduite de ce projet. La partie IHM et la partie Système sont menées en parallèle pendant toute la durée du projet. Le projet se conclut par une soutenance finale pour chaque partie (IHM et système).<br /> <br /> ===SCRUM===<br /> Pour la partie conception de l'architecture de notre site nous avons décidé d'utiliser la méthode agile Scrum avec des sprints d'une durée de 1 semaine. En effet, cela nous permet d'avoir rapidement un feedback sur le travail effectué, et par conséquent d'augmenter notre réactivité face aux demandes du client. Voici le lien vers notre Waffle, qui permet de voir en temps réel l'avancement de notre projet : [https://waffle.io/Vivien-Michel/PIXEL-SHIRT]. Nous utilisons aussi Scrum pour la partie création du site. Ci dessous voici notre planning prévisionnel du projet avec les différentes tâches.<br /> <br /> [[File:planning_previsionnel.jpg|center|thumb|900px]]<br /> <br /> ===GIT===<br /> Nous utilisons Github un gestionnaire de version pour pouvoir interagir simultanément sur le projet PIXEL-SHIRT. Voici le lien de dêpot distant : [https://github.com/Vivien-Michel/PIXEL-SHIRT]<br /> <br /> ==Equipe==<br /> <br /> ===Enseignants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | DONSEZ Didier<br /> | didier.donsez@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | CAFFIAU Sybille <br /> | sybille.caffiau@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | NIGAY Laurence <br /> | laurence.nigay@imag.fr<br /> |- <br /> <br /> |}<br /> <br /> ===Etudiants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> !scope=&quot;col&quot;| Rôle<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | MICHEL Vivien<br /> | vivien.michel@e.ujf-grenoble.fr<br /> | Scrum Master<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | KLIPFFEL Tararaina<br /> | tararaina.klipffel@e.ujf-grenoble.fr<br /> | Chef de projet<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | TOUSSAINT Sebastien<br /> | sebastien.toussain@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | SAUSSAC Thibault<br /> | thibault.saussac@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | LONGFEI Jérôme<br /> | jérôme.longfei@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> |}<br /> <br /> =SRS=<br /> [fiche_SRS]<br /> Définitions des exigences logicielles<br /> <br /> =Gestion de projet=<br /> ==Initialisation du projet 08/09/2015==<br /> Définition du projet et des différents objectifs à atteindre. Création d'un site web permettant la création de Tee-Shirt avec des logos pixelisés. L'application offre la possibilité de créer des Tee-Shirt avec :<br /> * des modèles prédéfinis<br /> * des modèles prédéfinis modifiable<br /> * des créations de modèle.<br /> <br /> ==Création du questionnaire 15/09/2015==<br /> ===Questionnaire===<br /> [https://docs.google.com/forms/d/1rcJ5u16AZn9hkijGnRVUkNL3VhEI4zp9b5F17_58E7w/viewform Questionnaire ECOM]<br /> ===Analyse des données===<br /> ==== Cible ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Age des utilisateurs<br /> !scope=&quot;col&quot;| Nombre d'heure d'utilisation d'un ordinateur<br /> !scope=&quot;col&quot;| Nombre d'achat en ligne par mois<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:AgeConso.png|center|thumb|500px]]<br /> | [[File:HeureConso.png|center|thumb|500px]]<br /> | [[File:NbFoisConso.png|center|thumb|500px]]<br /> |-<br /> <br /> |}<br /> <br /> <br /> Notre cible est principalement des consommateurs entre 20 et 40. Les différents graphiques nous montrent qu’ils sont à l’aise avec un utilisateur car 93% d’entre eux passent entre 1h et plus sur un ordinateur. Concernant les achats en ligne ils ont déjà plusieurs fois utilisé ce moyen de consommation.<br /> <br /> Conclusion : nous avons à faire à des utilisateurs plus que novice dans l’utilisation des ordinateurs. Ayant déjà effectué des achats en ligne il faut que l’interface du site puis lors être familier, afin d’avoir des achats rapide. <br /> <br /> ==== Plateformes ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Plateforme utilisé pour effectuer des achats<br /> !scope=&quot;col&quot;| Navigateur utilisé pour effectuer des achats<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:SurQuoi.png|center|thumb|500px]]<br /> | [[File:browserusefor.png|center|thumb|500px]]<br /> |-<br /> <br /> |}<br /> <br /> L’ordinateur est la plateforme la plus utilité pour les achats en lignes. Donc nous allons nous concentrer sur le développement d’une application Web<br /> Concernant le support de navigation, Google Chrome prend la première place du podium 68,8% devant Firefox et Safari avec 18,8% et 6,3%. <br /> <br /> En conclusion nous allons utiliser HTML5 afin de favoriser l’afficher des pages web sur les téléphones portable. Et aussi afin d’avoir un rendu correct sur une grande variété de navigateur web.<br /> <br /> <br /> ==== Fonctionnalités attendus ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Fonctionnalités Importantes<br /> !scope=&quot;col&quot;| Importance des commentaires<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:poiintImportznt.png|center|thumb|500px]]<br /> | [[File:commentaireImport.png|center|thumb|500px]]<br /> |-<br /> <br /> |}<br /> <br /> <br /> Quatre points sont primordiaux pour les utilisateurs :<br /> * Des paiements sécurisés<br /> * Rapidité des commandes (EUH livraison ou sur le site)<br /> * Les commentaires<br /> * L’affichage des promotions <br /> <br /> Pour répondre à la première demande nous avons l’intention d’utiliser HTTPS pour les transactions sur notre site et nous comptons aussi le mettre en évidence afin que les clients soient sécurisés.<br /> <br /> Pour le dernier point nous avons l’intention d’afficher les promotions sur la page d’accueil dès qu’ils seront disponibles. <br /> L’usage des commentaires est essentiel pour effectuer un achat. Alors il prévu que les utilisateurs puissent écrire des commentaires pour un produit et aussi que ce commentaire soit visible<br /> <br /> <br /> ===Analyse de la concurrence ===<br /> [https://www.qwertee.com/] : Site super clair car il mette bien en avant le produit. Le prix est bien visible, pas besoin de faire plusieurs click avant de l’afficher. La totalité du site avec régit pas des transactions HTTPS. Les commentaires sont bien visibles sous les articles proposés. <br /> <br /> [http://www.spreadshirt.fr/] : Ce site met en valeur la fabrication du T-Shirt. Donc on a ici plus une interface pour de la création que pour de la vente. Mais ce site propose de vendre des T-Shirt. Ce site n’affiche pas le HTTPS durant la navigation. On ne voit pas de commentaire sur les articles sélectionnés <br /> <br /> [https://www.pixelshirt.fr/] : Site super clair car il mette bien en avant le produit. Le prix est bien visible, pas besoin de faire plusieurs click avant de l’afficher. La totalité du site avec régit pas des transactions HTTPS. On ne voit pas de commentaire sur les articles sélectionnés. Mais l’on peut voter pour les T-Shirt.<br /> <br /> <br /> <br /> [http://camaloon.fr Camaloon]<br /> <br /> ==Définir les pré-requis, les besoins et les contraintes 22/09/2015 &amp; 29/09/2015==<br /> ===Les pré-requis===<br /> 1) Qui est ce qui va m’utiliser ? Quand ? Pourquoi ? Dans quel environnement ? Comment résonne cet utilisateur ?<br /> Le site de E-commerce sera utilisé par des utilisateurs relativement jeune puisque la plupart des personnes intéressées ont entre 15 et 25 ans. Par tous type de personne, à la fois des étudiants, des bureaux étudiants pour des tee-shirt à l’image de leur école ou filière mais aussi des chefs d’entreprise voulant faire des tee-shirt publicitaire à l’effigie de leur entreprise, des clubs sportifs. Ce site web sera disponible tout le temps mais les principales fréquentation devrait être en fin de journée après avoir étudier la fréquentation sur les sites concurrents. Leurs principales vente se font tout au long de la journée du fait de l’accès à l’Internet sur leur lieu de travail cependant le pic des commande se site en fin de journée entre 18h30 et 21h. Les tee-shirt personnalisés pourront être commandés par des personnes voulant se démarquer avec un tee-shirt original. Cependant ces tee-shirt sont aussi très commandés par des personnes voulant faire des cadeaux d’anniversaire afin d’avoir une touche personnel dessus. Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire. <br /> ===Les besoins===<br /> 2) Quelles plateformes je peux utiliser pour communiquer avec un humain ?<br /> Les plate-formes pouvant être utilisés sont les couriels, les SMS, puisque la clientèle est jeune il serait intéressant de faire des offres promotionnel via Facebook et plus généralement les réseaux sociaux. (GSM, Ordinateurs, Smartphones)<br /> 3) Qu’est ce que j’ai besoin de connaître pour permettre à l’humain d’accomplir ses tâches ? Qu’est ce qu’un développeur peut m’apprendre ? Comment ?<br /> * Ses coordonnées bancaires.<br /> * Son adresse de livraison<br /> * Son nom, prénom.<br /> * Son adresse mail.<br /> * Son numéro de téléphone.<br /> ===Les contraintes===<br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des contraintes<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Type<br /> !scope=&quot;col&quot;| contraintes<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Utilisateurs<br /> | Les utilisateurs de notre site seront :<br /> * Les étudiants qui veulent un tee-shirt représentant leur filière ou école.<br /> * Les personnes qui veulent un tee-shirt individualisé.<br /> * Les entreprises qui veulent prendre un tee-shirt représentant leur culture d’entreprise.<br /> * Les groupes comme les clubs sportifs et les geeks.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | Environnement<br /> | Les clients vont utiliser le site de E-commerce sur les ordinateurs puisque c’est pratique à télécharger leur commandes vers un serveur.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Objectifs de l’utilisateur, tâches et cas d’utilisation<br /> | L’objectif de l’utilisateur est de faire une commande des tee-shirts individualisés.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Entrées/sorties possibles, plateformes<br /> | Entrées: Les images des tee-shirts, le nombre et les tailles des tee-shirts, les informations personnalisés (les coordonnées bancaires, l’adresse de livraison, le nom et prénom, l’adresse mail, le numéro de téléphone). Plateformes: Les navigateurs web sur les ordinateurs.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Analyse technologique (étude de librairies...) technologies web obligatoires<br /> | Utilisation de JavaScript et CSS pour réaliser des web pages, java pour réaliser la couche logique et JDBC pour la connexion à des bases de donneés<br /> |-<br /> <br /> |}<br /> <br /> <br /> ==Conception IHM 06/10/2015==<br /> ===Utilisateurs cible===<br /> Personnes comprises entre 18 et 40 ans. Les 18 – 25 car ils veulent suivre la mode du rétro. Et les 25 - 40 car cela leur rappel leur enfance avec les jeux pixelisés.<br /> ===Tâches : priorité de développement pour l’utilisateur===<br /> Product backlog des priorité de développement pour l'utilisateur en ce qui concerne L'IHM.<br /> <br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des tâches<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Tâche<br /> !scope=&quot;col&quot;| Sous tâches<br /> !scope=&quot;col&quot;| Priorité<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Gestion compte<br /> | <br /> * création/suppression du compte<br /> | (7)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Créer un modèle de Tee-shirt<br /> | <br /> * proposer un design<br /> * choix d’un modèle prédéfinit<br /> | 2<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Gestion du panier<br /> | <br /> * création d‘une session <br /> * ajouter/supprimer/modifier un article au panier <br /> * commander<br /> | (6)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Transaction bancaire<br /> |<br /> * accepter <br /> * refuser <br /> * payer<br /> | 3<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Visualiser le catalogue<br /> | <br /> * recherche article<br /> * visualiser par catégorie <br /> * IHM<br /> | 1<br /> |-<br /> <br /> !scope=&quot;row&quot;| 6<br /> | Gérer catalogue<br /> | <br /> * création BD<br /> | (4)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 7<br /> | Administrateur<br /> |<br /> * ajout d'un article au catalogue<br /> | (5)<br /> |-<br /> |}<br /> <br /> ===Contextes d'utilisation===<br /> Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire.<br /> <br /> ===User Case UML===<br /> [[File:Use_Case.png|center|thumb|600px]]<br /> <br /> ===Modèle de tâche===<br /> [[File:tache.jpg|center|thumb|1200px]]<br /> <br /> ===IHM===<br /> ====IHM abstraite====<br /> [[File:IHM_abstraite.png|center|thumb|900px]]<br /> <br /> ====Maquette IHM====<br /> [[File:maquette.jpg|center|thumb|600px]]<br /> <br /> =Références=</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=ECOM-RICM/PIXEL-SHIRT&diff=24590 2015-10-19T08:07:38Z

<p>Sebastien.Toussaint: /* Analyse de la concurrence */</p> <hr /> <div>Le projet ECOM-RICM 2015-2016 consiste à concevoir et développer une application de commerce électronique dans le cadre des unités d'enseignements Génie Logiciel, IHM et Projet ECOM gérer respectivement par Didier DONSEZ, Laurence NIGAY et Sybille CAFFIAU.<br /> <br /> ==Présentation du projet [[ECOM]]==<br /> <br /> Notre site de commerce électronique &quot;PIXEL-SHIRT&quot; permet la création de tee-shirt avec des modèles pixelisé personnalisé. Chaque client doit au préalablement créer un compte. Il pourra ensuite choisir entre une panoplie de Tee-shirt (la taille, le type, col en V, couleur, etc...). Deplus le client pourra importer un dessin à représenter sur le tee-shirt. Un outil de dessin pixélisé sera éventuellement mis en place sur le site. Le projet ECOM étant de courte durée nous décidons d'utiliser une méthodologie [[Scrum]] pour la conduite de ce projet. La partie IHM et la partie Système sont menées en parallèle pendant toute la durée du projet. Le projet se conclut par une soutenance finale pour chaque partie (IHM et système).<br /> <br /> ===SCRUM===<br /> Pour la partie conception de l'architecture de notre site nous avons décidé d'utiliser la méthode agile Scrum avec des sprints d'une durée de 1 semaine. En effet, cela nous permet d'avoir rapidement un feedback sur le travail effectué, et par conséquent d'augmenter notre réactivité face aux demandes du client. Voici le lien vers notre Waffle, qui permet de voir en temps réel l'avancement de notre projet : [https://waffle.io/Vivien-Michel/PIXEL-SHIRT]. Nous utilisons aussi Scrum pour la partie création du site. Ci dessous voici notre planning prévisionnel du projet avec les différentes tâches.<br /> <br /> [[File:planning_previsionnel.jpg|center|thumb|900px]]<br /> <br /> ===GIT===<br /> Nous utilisons Github un gestionnaire de version pour pouvoir interagir simultanément sur le projet PIXEL-SHIRT. Voici le lien de dêpot distant : [https://github.com/Vivien-Michel/PIXEL-SHIRT]<br /> <br /> ==Equipe==<br /> <br /> ===Enseignants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | DONSEZ Didier<br /> | didier.donsez@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | CAFFIAU Sybille <br /> | sybille.caffiau@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | NIGAY Laurence <br /> | laurence.nigay@imag.fr<br /> |- <br /> <br /> |}<br /> <br /> ===Etudiants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> !scope=&quot;col&quot;| Rôle<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | MICHEL Vivien<br /> | vivien.michel@e.ujf-grenoble.fr<br /> | Scrum Master<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | KLIPFFEL Tararaina<br /> | tararaina.klipffel@e.ujf-grenoble.fr<br /> | Chef de projet<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | TOUSSAINT Sebastien<br /> | sebastien.toussain@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | SAUSSAC Thibault<br /> | thibault.saussac@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | LONGFEI Jérôme<br /> | jérôme.longfei@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> |}<br /> <br /> =SRS=<br /> [fiche_SRS]<br /> Définitions des exigences logicielles<br /> <br /> =Gestion de projet=<br /> ==Initialisation du projet 08/09/2015==<br /> Définition du projet et des différents objectifs à atteindre. Création d'un site web permettant la création de Tee-Shirt avec des logos pixelisés. L'application offre la possibilité de créer des Tee-Shirt avec :<br /> * des modèles prédéfinis<br /> * des modèles prédéfinis modifiable<br /> * des créations de modèle.<br /> <br /> ==Création du questionnaire 15/09/2015==<br /> ===Questionnaire===<br /> [https://docs.google.com/forms/d/1rcJ5u16AZn9hkijGnRVUkNL3VhEI4zp9b5F17_58E7w/viewform Questionnaire ECOM]<br /> ===Analyse des données===<br /> ==== Cible ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Age des utilisateurs<br /> !scope=&quot;col&quot;| Nombre d'heure d'utilisation d'un ordinateur<br /> !scope=&quot;col&quot;| Nombre d'achat en ligne par mois<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:AgeConso.png|center|thumb|500px]]<br /> | [[File:HeureConso.png|center|thumb|500px]]<br /> | [[File:NbFoisConso.png|center|thumb|500px]]<br /> |-<br /> <br /> |}<br /> <br /> <br /> Notre cible est principalement des consommateurs entre 20 et 40. Les différents graphiques nous montrent qu’ils sont à l’aise avec un utilisateur car 93% d’entre eux passent entre 1h et plus sur un ordinateur. Concernant les achats en ligne ils ont déjà plusieurs fois utilisé ce moyen de consommation.<br /> <br /> Conclusion : nous avons à faire à des utilisateurs plus que novice dans l’utilisation des ordinateurs. Ayant déjà effectué des achats en ligne il faut que l’interface du site puis lors être familier, afin d’avoir des achats rapide. <br /> <br /> ==== Plateformes ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Plateforme utilisé pour effectuer des achats<br /> !scope=&quot;col&quot;| Navigateur utilisé pour effectuer des achats<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:SurQuoi.png|center|thumb|500px]]<br /> | [[File:browserusefor.png|center|thumb|500px]]<br /> |-<br /> <br /> |}<br /> <br /> L’ordinateur est la plateforme la plus utilité pour les achats en lignes. Donc nous allons nous concentrer sur le développement d’une application Web<br /> Concernant le support de navigation, Google Chrome prend la première place du podium 68,8% devant Firefox et Safari avec 18,8% et 6,3%. <br /> <br /> En conclusion nous allons utiliser HTML5 afin de favoriser l’afficher des pages web sur les téléphones portable. Et aussi afin d’avoir un rendu correct sur une grande variété de navigateur web.<br /> <br /> <br /> ==== Fonctionnalités attendus ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Fonctionnalités Importantes<br /> !scope=&quot;col&quot;| Importance des commentaires<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:poiintImportznt.png|center|thumb|500px]]<br /> | [[File:commentaireImport.png|center|thumb|500px]]<br /> |-<br /> <br /> |}<br /> <br /> <br /> Quatre points sont primordiaux pour les utilisateurs :<br /> * Des paiements sécurisés<br /> * Rapidité des commandes (EUH livraison ou sur le site)<br /> * Les commentaires<br /> * L’affichage des promotions <br /> <br /> Pour répondre à la première demande nous avons l’intention d’utiliser HTTPS pour les transactions sur notre site et nous comptons aussi le mettre en évidence afin que les clients soient sécurisés.<br /> <br /> Pour le dernier point nous avons l’intention d’afficher les promotions sur la page d’accueil dès qu’ils seront disponibles. <br /> L’usage des commentaires est essentiel pour effectuer un achat. Alors il prévu que les utilisateurs puissent écrire des commentaires pour un produit et aussi que ce commentaire soit visible<br /> <br /> <br /> ===Analyse de la concurrence ===<br /> [https://www.qwertee.com/] : Site super clair car il mette bien en avant le produit. Le prix est bien visible, pas besoin de faire plusieurs click avant de l’afficher. La totalité du site avec régit pas des transactions HTTPS. Les commentaires sont bien visibles sous les articles proposés. <br /> <br /> [http://www.spreadshirt.fr/] : Ce site met en valeur la fabrication du T-Shirt. Donc on a ici plus une interface pour de la création que pour de la vente. Mais ce site propose de vendre des T-Shirt. Ce site n’affiche pas le HTTPS durant la navigation. On ne voit pas de commentaire sur les articles sélectionnés <br /> <br /> [https://www.pixelshirt.fr/] : Site super clair car il mette bien en avant le produit. Le prix est bien visible, pas besoin de faire plusieurs click avant de l’afficher. La totalité du site avec régit pas des transactions HTTPS. On ne voit pas de commentaire sur les articles sélectionnés. Mais l’on peut voter pour les T-Shirt.<br /> <br /> ==Définir les pré-requis, les besoins et les contraintes 22/09/2015 &amp; 29/09/2015==<br /> ===Les pré-requis===<br /> 1) Qui est ce qui va m’utiliser ? Quand ? Pourquoi ? Dans quel environnement ? Comment résonne cet utilisateur ?<br /> Le site de E-commerce sera utilisé par des utilisateurs relativement jeune puisque la plupart des personnes intéressées ont entre 15 et 25 ans. Par tous type de personne, à la fois des étudiants, des bureaux étudiants pour des tee-shirt à l’image de leur école ou filière mais aussi des chefs d’entreprise voulant faire des tee-shirt publicitaire à l’effigie de leur entreprise, des clubs sportifs. Ce site web sera disponible tout le temps mais les principales fréquentation devrait être en fin de journée après avoir étudier la fréquentation sur les sites concurrents. Leurs principales vente se font tout au long de la journée du fait de l’accès à l’Internet sur leur lieu de travail cependant le pic des commande se site en fin de journée entre 18h30 et 21h. Les tee-shirt personnalisés pourront être commandés par des personnes voulant se démarquer avec un tee-shirt original. Cependant ces tee-shirt sont aussi très commandés par des personnes voulant faire des cadeaux d’anniversaire afin d’avoir une touche personnel dessus. Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire. <br /> ===Les besoins===<br /> 2) Quelles plateformes je peux utiliser pour communiquer avec un humain ?<br /> Les plate-formes pouvant être utilisés sont les couriels, les SMS, puisque la clientèle est jeune il serait intéressant de faire des offres promotionnel via Facebook et plus généralement les réseaux sociaux. (GSM, Ordinateurs, Smartphones)<br /> 3) Qu’est ce que j’ai besoin de connaître pour permettre à l’humain d’accomplir ses tâches ? Qu’est ce qu’un développeur peut m’apprendre ? Comment ?<br /> * Ses coordonnées bancaires.<br /> * Son adresse de livraison<br /> * Son nom, prénom.<br /> * Son adresse mail.<br /> * Son numéro de téléphone.<br /> ===Les contraintes===<br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des contraintes<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Type<br /> !scope=&quot;col&quot;| contraintes<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Utilisateurs<br /> | Les utilisateurs de notre site seront :<br /> * Les étudiants qui veulent un tee-shirt représentant leur filière ou école.<br /> * Les personnes qui veulent un tee-shirt individualisé.<br /> * Les entreprises qui veulent prendre un tee-shirt représentant leur culture d’entreprise.<br /> * Les groupes comme les clubs sportifs et les geeks.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | Environnement<br /> | Les clients vont utiliser le site de E-commerce sur les ordinateurs puisque c’est pratique à télécharger leur commandes vers un serveur.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Objectifs de l’utilisateur, tâches et cas d’utilisation<br /> | L’objectif de l’utilisateur est de faire une commande des tee-shirts individualisés.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Entrées/sorties possibles, plateformes<br /> | Entrées: Les images des tee-shirts, le nombre et les tailles des tee-shirts, les informations personnalisés (les coordonnées bancaires, l’adresse de livraison, le nom et prénom, l’adresse mail, le numéro de téléphone). Plateformes: Les navigateurs web sur les ordinateurs.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Analyse technologique (étude de librairies...) technologies web obligatoires<br /> | Utilisation de JavaScript et CSS pour réaliser des web pages, java pour réaliser la couche logique et JDBC pour la connexion à des bases de donneés<br /> |-<br /> <br /> |}<br /> <br /> <br /> ==Conception IHM 06/10/2015==<br /> ===Utilisateurs cible===<br /> Personnes comprises entre 18 et 40 ans. Les 18 – 25 car ils veulent suivre la mode du rétro. Et les 25 - 40 car cela leur rappel leur enfance avec les jeux pixelisés.<br /> ===Tâches : priorité de développement pour l’utilisateur===<br /> Product backlog des priorité de développement pour l'utilisateur en ce qui concerne L'IHM.<br /> <br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des tâches<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Tâche<br /> !scope=&quot;col&quot;| Sous tâches<br /> !scope=&quot;col&quot;| Priorité<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Gestion compte<br /> | <br /> * création/suppression du compte<br /> | (7)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Créer un modèle de Tee-shirt<br /> | <br /> * proposer un design<br /> * choix d’un modèle prédéfinit<br /> | 2<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Gestion du panier<br /> | <br /> * création d‘une session <br /> * ajouter/supprimer/modifier un article au panier <br /> * commander<br /> | (6)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Transaction bancaire<br /> |<br /> * accepter <br /> * refuser <br /> * payer<br /> | 3<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Visualiser le catalogue<br /> | <br /> * recherche article<br /> * visualiser par catégorie <br /> * IHM<br /> | 1<br /> |-<br /> <br /> !scope=&quot;row&quot;| 6<br /> | Gérer catalogue<br /> | <br /> * création BD<br /> | (4)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 7<br /> | Administrateur<br /> |<br /> * ajout d'un article au catalogue<br /> | (5)<br /> |-<br /> |}<br /> <br /> ===Contextes d'utilisation===<br /> Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire.<br /> <br /> ===User Case UML===<br /> [[File:Use_Case.png|center|thumb|600px]]<br /> <br /> ===Modèle de tâche===<br /> [[File:tache.jpg|center|thumb|1200px]]<br /> <br /> ===IHM===<br /> ====IHM abstraite====<br /> [[File:IHM_abstraite.png|center|thumb|900px]]<br /> <br /> ====Maquette IHM====<br /> [[File:maquette.jpg|center|thumb|600px]]<br /> <br /> =Références=</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=ECOM-RICM/PIXEL-SHIRT&diff=24589 2015-10-19T08:05:57Z

<p>Sebastien.Toussaint: /* Création du questionnaire 15/09/2015 */</p> <hr /> <div>Le projet ECOM-RICM 2015-2016 consiste à concevoir et développer une application de commerce électronique dans le cadre des unités d'enseignements Génie Logiciel, IHM et Projet ECOM gérer respectivement par Didier DONSEZ, Laurence NIGAY et Sybille CAFFIAU.<br /> <br /> ==Présentation du projet [[ECOM]]==<br /> <br /> Notre site de commerce électronique &quot;PIXEL-SHIRT&quot; permet la création de tee-shirt avec des modèles pixelisé personnalisé. Chaque client doit au préalablement créer un compte. Il pourra ensuite choisir entre une panoplie de Tee-shirt (la taille, le type, col en V, couleur, etc...). Deplus le client pourra importer un dessin à représenter sur le tee-shirt. Un outil de dessin pixélisé sera éventuellement mis en place sur le site. Le projet ECOM étant de courte durée nous décidons d'utiliser une méthodologie [[Scrum]] pour la conduite de ce projet. La partie IHM et la partie Système sont menées en parallèle pendant toute la durée du projet. Le projet se conclut par une soutenance finale pour chaque partie (IHM et système).<br /> <br /> ===SCRUM===<br /> Pour la partie conception de l'architecture de notre site nous avons décidé d'utiliser la méthode agile Scrum avec des sprints d'une durée de 1 semaine. En effet, cela nous permet d'avoir rapidement un feedback sur le travail effectué, et par conséquent d'augmenter notre réactivité face aux demandes du client. Voici le lien vers notre Waffle, qui permet de voir en temps réel l'avancement de notre projet : [https://waffle.io/Vivien-Michel/PIXEL-SHIRT]. Nous utilisons aussi Scrum pour la partie création du site. Ci dessous voici notre planning prévisionnel du projet avec les différentes tâches.<br /> <br /> [[File:planning_previsionnel.jpg|center|thumb|900px]]<br /> <br /> ===GIT===<br /> Nous utilisons Github un gestionnaire de version pour pouvoir interagir simultanément sur le projet PIXEL-SHIRT. Voici le lien de dêpot distant : [https://github.com/Vivien-Michel/PIXEL-SHIRT]<br /> <br /> ==Equipe==<br /> <br /> ===Enseignants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | DONSEZ Didier<br /> | didier.donsez@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | CAFFIAU Sybille <br /> | sybille.caffiau@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | NIGAY Laurence <br /> | laurence.nigay@imag.fr<br /> |- <br /> <br /> |}<br /> <br /> ===Etudiants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> !scope=&quot;col&quot;| Rôle<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | MICHEL Vivien<br /> | vivien.michel@e.ujf-grenoble.fr<br /> | Scrum Master<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | KLIPFFEL Tararaina<br /> | tararaina.klipffel@e.ujf-grenoble.fr<br /> | Chef de projet<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | TOUSSAINT Sebastien<br /> | sebastien.toussain@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | SAUSSAC Thibault<br /> | thibault.saussac@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | LONGFEI Jérôme<br /> | jérôme.longfei@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> |}<br /> <br /> =SRS=<br /> [fiche_SRS]<br /> Définitions des exigences logicielles<br /> <br /> =Gestion de projet=<br /> ==Initialisation du projet 08/09/2015==<br /> Définition du projet et des différents objectifs à atteindre. Création d'un site web permettant la création de Tee-Shirt avec des logos pixelisés. L'application offre la possibilité de créer des Tee-Shirt avec :<br /> * des modèles prédéfinis<br /> * des modèles prédéfinis modifiable<br /> * des créations de modèle.<br /> <br /> ==Création du questionnaire 15/09/2015==<br /> ===Questionnaire===<br /> [https://docs.google.com/forms/d/1rcJ5u16AZn9hkijGnRVUkNL3VhEI4zp9b5F17_58E7w/viewform Questionnaire ECOM]<br /> ===Analyse des données===<br /> ==== Cible ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Age des utilisateurs<br /> !scope=&quot;col&quot;| Nombre d'heure d'utilisation d'un ordinateur<br /> !scope=&quot;col&quot;| Nombre d'achat en ligne par mois<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:AgeConso.png|center|thumb|500px]]<br /> | [[File:HeureConso.png|center|thumb|500px]]<br /> | [[File:NbFoisConso.png|center|thumb|500px]]<br /> |-<br /> <br /> |}<br /> <br /> <br /> Notre cible est principalement des consommateurs entre 20 et 40. Les différents graphiques nous montrent qu’ils sont à l’aise avec un utilisateur car 93% d’entre eux passent entre 1h et plus sur un ordinateur. Concernant les achats en ligne ils ont déjà plusieurs fois utilisé ce moyen de consommation.<br /> <br /> Conclusion : nous avons à faire à des utilisateurs plus que novice dans l’utilisation des ordinateurs. Ayant déjà effectué des achats en ligne il faut que l’interface du site puis lors être familier, afin d’avoir des achats rapide. <br /> <br /> ==== Plateformes ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Plateforme utilisé pour effectuer des achats<br /> !scope=&quot;col&quot;| Navigateur utilisé pour effectuer des achats<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:SurQuoi.png|center|thumb|500px]]<br /> | [[File:browserusefor.png|center|thumb|500px]]<br /> |-<br /> <br /> |}<br /> <br /> L’ordinateur est la plateforme la plus utilité pour les achats en lignes. Donc nous allons nous concentrer sur le développement d’une application Web<br /> Concernant le support de navigation, Google Chrome prend la première place du podium 68,8% devant Firefox et Safari avec 18,8% et 6,3%. <br /> <br /> En conclusion nous allons utiliser HTML5 afin de favoriser l’afficher des pages web sur les téléphones portable. Et aussi afin d’avoir un rendu correct sur une grande variété de navigateur web.<br /> <br /> <br /> ==== Fonctionnalités attendus ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Fonctionnalités Importantes<br /> !scope=&quot;col&quot;| Importance des commentaires<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:poiintImportznt.png|center|thumb|500px]]<br /> | [[File:commentaireImport.png|center|thumb|500px]]<br /> |-<br /> <br /> |}<br /> <br /> <br /> Quatre points sont primordiaux pour les utilisateurs :<br /> * Des paiements sécurisés<br /> * Rapidité des commandes (EUH livraison ou sur le site)<br /> * Les commentaires<br /> * L’affichage des promotions <br /> <br /> Pour répondre à la première demande nous avons l’intention d’utiliser HTTPS pour les transactions sur notre site et nous comptons aussi le mettre en évidence afin que les clients soient sécurisés.<br /> <br /> Pour le dernier point nous avons l’intention d’afficher les promotions sur la page d’accueil dès qu’ils seront disponibles. <br /> L’usage des commentaires est essentiel pour effectuer un achat. Alors il prévu que les utilisateurs puissent écrire des commentaires pour un produit et aussi que ce commentaire soit visible<br /> <br /> <br /> ===Analyse de la concurrence ===<br /> https://www.qwertee.com/ : Site super clair car il mette bien en avant le produit. Le prix est bien visible, pas besoin de faire plusieurs click avant de l’afficher. La totalité du site avec régit pas des transactions HTTPS. Les commentaires sont bien visibles sous les articles proposés. <br /> <br /> http://www.spreadshirt.fr/ : Ce site met en valeur la fabrication du T-Shirt. Donc on a ici plus une interface pour de la création que pour de la vente. Mais ce site propose de vendre des T-Shirt. Ce site n’affiche pas le HTTPS durant la navigation. On ne voit pas de commentaire sur les articles sélectionnés <br /> <br /> <br /> https://www.pixelshirt.fr/ : Site super clair car il mette bien en avant le produit. Le prix est bien visible, pas besoin de faire plusieurs click avant de l’afficher. La totalité du site avec régit pas des transactions HTTPS. On ne voit pas de commentaire sur les articles sélectionnés. Mais l’on peut voter pour les T-Shirt.<br /> <br /> ==Définir les pré-requis, les besoins et les contraintes 22/09/2015 &amp; 29/09/2015==<br /> ===Les pré-requis===<br /> 1) Qui est ce qui va m’utiliser ? Quand ? Pourquoi ? Dans quel environnement ? Comment résonne cet utilisateur ?<br /> Le site de E-commerce sera utilisé par des utilisateurs relativement jeune puisque la plupart des personnes intéressées ont entre 15 et 25 ans. Par tous type de personne, à la fois des étudiants, des bureaux étudiants pour des tee-shirt à l’image de leur école ou filière mais aussi des chefs d’entreprise voulant faire des tee-shirt publicitaire à l’effigie de leur entreprise, des clubs sportifs. Ce site web sera disponible tout le temps mais les principales fréquentation devrait être en fin de journée après avoir étudier la fréquentation sur les sites concurrents. Leurs principales vente se font tout au long de la journée du fait de l’accès à l’Internet sur leur lieu de travail cependant le pic des commande se site en fin de journée entre 18h30 et 21h. Les tee-shirt personnalisés pourront être commandés par des personnes voulant se démarquer avec un tee-shirt original. Cependant ces tee-shirt sont aussi très commandés par des personnes voulant faire des cadeaux d’anniversaire afin d’avoir une touche personnel dessus. Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire. <br /> ===Les besoins===<br /> 2) Quelles plateformes je peux utiliser pour communiquer avec un humain ?<br /> Les plate-formes pouvant être utilisés sont les couriels, les SMS, puisque la clientèle est jeune il serait intéressant de faire des offres promotionnel via Facebook et plus généralement les réseaux sociaux. (GSM, Ordinateurs, Smartphones)<br /> 3) Qu’est ce que j’ai besoin de connaître pour permettre à l’humain d’accomplir ses tâches ? Qu’est ce qu’un développeur peut m’apprendre ? Comment ?<br /> * Ses coordonnées bancaires.<br /> * Son adresse de livraison<br /> * Son nom, prénom.<br /> * Son adresse mail.<br /> * Son numéro de téléphone.<br /> ===Les contraintes===<br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des contraintes<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Type<br /> !scope=&quot;col&quot;| contraintes<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Utilisateurs<br /> | Les utilisateurs de notre site seront :<br /> * Les étudiants qui veulent un tee-shirt représentant leur filière ou école.<br /> * Les personnes qui veulent un tee-shirt individualisé.<br /> * Les entreprises qui veulent prendre un tee-shirt représentant leur culture d’entreprise.<br /> * Les groupes comme les clubs sportifs et les geeks.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | Environnement<br /> | Les clients vont utiliser le site de E-commerce sur les ordinateurs puisque c’est pratique à télécharger leur commandes vers un serveur.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Objectifs de l’utilisateur, tâches et cas d’utilisation<br /> | L’objectif de l’utilisateur est de faire une commande des tee-shirts individualisés.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Entrées/sorties possibles, plateformes<br /> | Entrées: Les images des tee-shirts, le nombre et les tailles des tee-shirts, les informations personnalisés (les coordonnées bancaires, l’adresse de livraison, le nom et prénom, l’adresse mail, le numéro de téléphone). Plateformes: Les navigateurs web sur les ordinateurs.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Analyse technologique (étude de librairies...) technologies web obligatoires<br /> | Utilisation de JavaScript et CSS pour réaliser des web pages, java pour réaliser la couche logique et JDBC pour la connexion à des bases de donneés<br /> |-<br /> <br /> |}<br /> <br /> <br /> ==Conception IHM 06/10/2015==<br /> ===Utilisateurs cible===<br /> Personnes comprises entre 18 et 40 ans. Les 18 – 25 car ils veulent suivre la mode du rétro. Et les 25 - 40 car cela leur rappel leur enfance avec les jeux pixelisés.<br /> ===Tâches : priorité de développement pour l’utilisateur===<br /> Product backlog des priorité de développement pour l'utilisateur en ce qui concerne L'IHM.<br /> <br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des tâches<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Tâche<br /> !scope=&quot;col&quot;| Sous tâches<br /> !scope=&quot;col&quot;| Priorité<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Gestion compte<br /> | <br /> * création/suppression du compte<br /> | (7)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Créer un modèle de Tee-shirt<br /> | <br /> * proposer un design<br /> * choix d’un modèle prédéfinit<br /> | 2<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Gestion du panier<br /> | <br /> * création d‘une session <br /> * ajouter/supprimer/modifier un article au panier <br /> * commander<br /> | (6)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Transaction bancaire<br /> |<br /> * accepter <br /> * refuser <br /> * payer<br /> | 3<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Visualiser le catalogue<br /> | <br /> * recherche article<br /> * visualiser par catégorie <br /> * IHM<br /> | 1<br /> |-<br /> <br /> !scope=&quot;row&quot;| 6<br /> | Gérer catalogue<br /> | <br /> * création BD<br /> | (4)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 7<br /> | Administrateur<br /> |<br /> * ajout d'un article au catalogue<br /> | (5)<br /> |-<br /> |}<br /> <br /> ===Contextes d'utilisation===<br /> Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire.<br /> <br /> ===User Case UML===<br /> [[File:Use_Case.png|center|thumb|600px]]<br /> <br /> ===Modèle de tâche===<br /> [[File:tache.jpg|center|thumb|1200px]]<br /> <br /> ===IHM===<br /> ====IHM abstraite====<br /> [[File:IHM_abstraite.png|center|thumb|900px]]<br /> <br /> ====Maquette IHM====<br /> [[File:maquette.jpg|center|thumb|600px]]<br /> <br /> =Références=</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=File:CommentaireImport.png&diff=24586 2015-10-19T08:02:48Z

<p>Sebastien.Toussaint: </p> <hr /> <div></div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=File:PoiintImportznt.png&diff=24585 2015-10-19T08:02:23Z

<p>Sebastien.Toussaint: </p> <hr /> <div></div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=ECOM-RICM/PIXEL-SHIRT&diff=24584 2015-10-19T08:01:25Z

<p>Sebastien.Toussaint: /* Fonctionnalités attendus */</p> <hr /> <div>Le projet ECOM-RICM 2015-2016 consiste à concevoir et développer une application de commerce électronique dans le cadre des unités d'enseignements Génie Logiciel, IHM et Projet ECOM gérer respectivement par Didier DONSEZ, Laurence NIGAY et Sybille CAFFIAU.<br /> <br /> ==Présentation du projet [[ECOM]]==<br /> <br /> Notre site de commerce électronique &quot;PIXEL-SHIRT&quot; permet la création de tee-shirt avec des modèles pixelisé personnalisé. Chaque client doit au préalablement créer un compte. Il pourra ensuite choisir entre une panoplie de Tee-shirt (la taille, le type, col en V, couleur, etc...). Deplus le client pourra importer un dessin à représenter sur le tee-shirt. Un outil de dessin pixélisé sera éventuellement mis en place sur le site. Le projet ECOM étant de courte durée nous décidons d'utiliser une méthodologie [[Scrum]] pour la conduite de ce projet. La partie IHM et la partie Système sont menées en parallèle pendant toute la durée du projet. Le projet se conclut par une soutenance finale pour chaque partie (IHM et système).<br /> <br /> ===SCRUM===<br /> Pour la partie conception de l'architecture de notre site nous avons décidé d'utiliser la méthode agile Scrum avec des sprints d'une durée de 1 semaine. En effet, cela nous permet d'avoir rapidement un feedback sur le travail effectué, et par conséquent d'augmenter notre réactivité face aux demandes du client. Voici le lien vers notre Waffle, qui permet de voir en temps réel l'avancement de notre projet : [https://waffle.io/Vivien-Michel/PIXEL-SHIRT]. Nous utilisons aussi Scrum pour la partie création du site. Ci dessous voici notre planning prévisionnel du projet avec les différentes tâches.<br /> <br /> [[File:planning_previsionnel.jpg|center|thumb|900px]]<br /> <br /> ===GIT===<br /> Nous utilisons Github un gestionnaire de version pour pouvoir interagir simultanément sur le projet PIXEL-SHIRT. Voici le lien de dêpot distant : [https://github.com/Vivien-Michel/PIXEL-SHIRT]<br /> <br /> ==Equipe==<br /> <br /> ===Enseignants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | DONSEZ Didier<br /> | didier.donsez@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | CAFFIAU Sybille <br /> | sybille.caffiau@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | NIGAY Laurence <br /> | laurence.nigay@imag.fr<br /> |- <br /> <br /> |}<br /> <br /> ===Etudiants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> !scope=&quot;col&quot;| Rôle<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | MICHEL Vivien<br /> | vivien.michel@e.ujf-grenoble.fr<br /> | Scrum Master<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | KLIPFFEL Tararaina<br /> | tararaina.klipffel@e.ujf-grenoble.fr<br /> | Chef de projet<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | TOUSSAINT Sebastien<br /> | sebastien.toussain@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | SAUSSAC Thibault<br /> | thibault.saussac@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | LONGFEI Jérôme<br /> | jérôme.longfei@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> |}<br /> <br /> =SRS=<br /> [fiche_SRS]<br /> Définitions des exigences logicielles<br /> <br /> =Gestion de projet=<br /> ==Initialisation du projet 08/09/2015==<br /> Définition du projet et des différents objectifs à atteindre. Création d'un site web permettant la création de Tee-Shirt avec des logos pixelisés. L'application offre la possibilité de créer des Tee-Shirt avec :<br /> * des modèles prédéfinis<br /> * des modèles prédéfinis modifiable<br /> * des créations de modèle.<br /> <br /> ==Création du questionnaire 15/09/2015==<br /> ===Questionnaire===<br /> [https://docs.google.com/forms/d/1rcJ5u16AZn9hkijGnRVUkNL3VhEI4zp9b5F17_58E7w/viewform Questionnaire ECOM]<br /> ===Analyse des données===<br /> ==== Cible ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Age des utilisateurs<br /> !scope=&quot;col&quot;| Nombre d'heure d'utilisation d'un ordinateur<br /> !scope=&quot;col&quot;| Nombre d'achat en ligne par mois<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:AgeConso.png|center|thumb|500px]]<br /> | [[File:HeureConso.png|center|thumb|500px]]<br /> | [[File:NbFoisConso.png|center|thumb|500px]]<br /> |-<br /> <br /> |}<br /> <br /> <br /> Notre cible est principalement des consommateurs entre 20 et 40. Les différents graphiques nous montrent qu’ils sont à l’aise avec un utilisateur car 93% d’entre eux passent entre 1h et plus sur un ordinateur. Concernant les achats en ligne ils ont déjà plusieurs fois utilisé ce moyen de consommation.<br /> <br /> Conclusion : nous avons à faire à des utilisateurs plus que novice dans l’utilisation des ordinateurs. Ayant déjà effectué des achats en ligne il faut que l’interface du site puis lors être familier, afin d’avoir des achats rapide. <br /> <br /> ==== Plateformes ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Plateforme utilisé pour effectuer des achats<br /> !scope=&quot;col&quot;| Navigateur utilisé pour effectuer des achats<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:SurQuoi.png|center|thumb|500px]]<br /> | [[File:browserusefor.png|center|thumb|500px]]<br /> |-<br /> <br /> |}<br /> <br /> L’ordinateur est la plateforme la plus utilité pour les achats en lignes. Donc nous allons nous concentrer sur le développement d’une application Web<br /> Concernant le support de navigation, Google Chrome prend la première place du podium 68,8% devant Firefox et Safari avec 18,8% et 6,3%. <br /> <br /> En conclusion nous allons utiliser HTML5 afin de favoriser l’afficher des pages web sur les téléphones portable. Et aussi afin d’avoir un rendu correct sur une grande variété de navigateur web.<br /> <br /> <br /> ==== Fonctionnalités attendus ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Fonctionnalités Importantes<br /> !scope=&quot;col&quot;| Importance des commentaires<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:poiintImportznt.png|center|thumb|500px]]<br /> | [[File:commentaireImport.png|center|thumb|500px]]<br /> |-<br /> <br /> |}<br /> <br /> <br /> Quatre points sont primordiaux pour les utilisateurs :<br /> * Des paiements sécurisés<br /> * Rapidité des commandes (EUH livraison ou sur le site)<br /> * Les commentaires<br /> * L’affichage des promotions <br /> <br /> Pour répondre à la première demande nous avons l’intention d’utiliser HTTPS pour les transactions sur notre site et nous comptons aussi le mettre en évidence afin que les clients soient sécurisés.<br /> <br /> Pour le dernier point nous avons l’intention d’afficher les promotions sur la page d’accueil dès qu’ils seront disponibles. <br /> L’usage des commentaires est essentiel pour effectuer un achat. Alors il prévu que les utilisateurs puissent écrire des commentaires pour un produit et aussi que ce commentaire soit visible<br /> <br /> <br /> &lt; A venir &gt;<br /> <br /> ==Définir les pré-requis, les besoins et les contraintes 22/09/2015 &amp; 29/09/2015==<br /> ===Les pré-requis===<br /> 1) Qui est ce qui va m’utiliser ? Quand ? Pourquoi ? Dans quel environnement ? Comment résonne cet utilisateur ?<br /> Le site de E-commerce sera utilisé par des utilisateurs relativement jeune puisque la plupart des personnes intéressées ont entre 15 et 25 ans. Par tous type de personne, à la fois des étudiants, des bureaux étudiants pour des tee-shirt à l’image de leur école ou filière mais aussi des chefs d’entreprise voulant faire des tee-shirt publicitaire à l’effigie de leur entreprise, des clubs sportifs. Ce site web sera disponible tout le temps mais les principales fréquentation devrait être en fin de journée après avoir étudier la fréquentation sur les sites concurrents. Leurs principales vente se font tout au long de la journée du fait de l’accès à l’Internet sur leur lieu de travail cependant le pic des commande se site en fin de journée entre 18h30 et 21h. Les tee-shirt personnalisés pourront être commandés par des personnes voulant se démarquer avec un tee-shirt original. Cependant ces tee-shirt sont aussi très commandés par des personnes voulant faire des cadeaux d’anniversaire afin d’avoir une touche personnel dessus. Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire. <br /> ===Les besoins===<br /> 2) Quelles plateformes je peux utiliser pour communiquer avec un humain ?<br /> Les plate-formes pouvant être utilisés sont les couriels, les SMS, puisque la clientèle est jeune il serait intéressant de faire des offres promotionnel via Facebook et plus généralement les réseaux sociaux. (GSM, Ordinateurs, Smartphones)<br /> 3) Qu’est ce que j’ai besoin de connaître pour permettre à l’humain d’accomplir ses tâches ? Qu’est ce qu’un développeur peut m’apprendre ? Comment ?<br /> * Ses coordonnées bancaires.<br /> * Son adresse de livraison<br /> * Son nom, prénom.<br /> * Son adresse mail.<br /> * Son numéro de téléphone.<br /> ===Les contraintes===<br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des contraintes<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Type<br /> !scope=&quot;col&quot;| contraintes<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Utilisateurs<br /> | Les utilisateurs de notre site seront :<br /> * Les étudiants qui veulent un tee-shirt représentant leur filière ou école.<br /> * Les personnes qui veulent un tee-shirt individualisé.<br /> * Les entreprises qui veulent prendre un tee-shirt représentant leur culture d’entreprise.<br /> * Les groupes comme les clubs sportifs et les geeks.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | Environnement<br /> | Les clients vont utiliser le site de E-commerce sur les ordinateurs puisque c’est pratique à télécharger leur commandes vers un serveur.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Objectifs de l’utilisateur, tâches et cas d’utilisation<br /> | L’objectif de l’utilisateur est de faire une commande des tee-shirts individualisés.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Entrées/sorties possibles, plateformes<br /> | Entrées: Les images des tee-shirts, le nombre et les tailles des tee-shirts, les informations personnalisés (les coordonnées bancaires, l’adresse de livraison, le nom et prénom, l’adresse mail, le numéro de téléphone). Plateformes: Les navigateurs web sur les ordinateurs.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Analyse technologique (étude de librairies...) technologies web obligatoires<br /> | Utilisation de JavaScript et CSS pour réaliser des web pages, java pour réaliser la couche logique et JDBC pour la connexion à des bases de donneés<br /> |-<br /> <br /> |}<br /> <br /> <br /> ==Conception IHM 06/10/2015==<br /> ===Utilisateurs cible===<br /> Personnes comprises entre 18 et 40 ans. Les 18 – 25 car ils veulent suivre la mode du rétro. Et les 25 - 40 car cela leur rappel leur enfance avec les jeux pixelisés.<br /> ===Tâches : priorité de développement pour l’utilisateur===<br /> Product backlog des priorité de développement pour l'utilisateur en ce qui concerne L'IHM.<br /> <br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des tâches<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Tâche<br /> !scope=&quot;col&quot;| Sous tâches<br /> !scope=&quot;col&quot;| Priorité<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Gestion compte<br /> | <br /> * création/suppression du compte<br /> | (7)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Créer un modèle de Tee-shirt<br /> | <br /> * proposer un design<br /> * choix d’un modèle prédéfinit<br /> | 2<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Gestion du panier<br /> | <br /> * création d‘une session <br /> * ajouter/supprimer/modifier un article au panier <br /> * commander<br /> | (6)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Transaction bancaire<br /> |<br /> * accepter <br /> * refuser <br /> * payer<br /> | 3<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Visualiser le catalogue<br /> | <br /> * recherche article<br /> * visualiser par catégorie <br /> * IHM<br /> | 1<br /> |-<br /> <br /> !scope=&quot;row&quot;| 6<br /> | Gérer catalogue<br /> | <br /> * création BD<br /> | (4)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 7<br /> | Administrateur<br /> |<br /> * ajout d'un article au catalogue<br /> | (5)<br /> |-<br /> |}<br /> <br /> ===Contextes d'utilisation===<br /> Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire.<br /> <br /> ===User Case UML===<br /> [[File:Use_Case.png|center|thumb|600px]]<br /> <br /> ===Modèle de tâche===<br /> [[File:tache.jpg|center|thumb|1200px]]<br /> <br /> ===IHM===<br /> ====IHM abstraite====<br /> [[File:IHM_abstraite.png|center|thumb|900px]]<br /> <br /> ====Maquette IHM====<br /> [[File:maquette.jpg|center|thumb|600px]]<br /> <br /> =Références=</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=ECOM-RICM/PIXEL-SHIRT&diff=24583 2015-10-19T08:00:03Z

<p>Sebastien.Toussaint: /* Création du questionnaire 15/09/2015 */</p> <hr /> <div>Le projet ECOM-RICM 2015-2016 consiste à concevoir et développer une application de commerce électronique dans le cadre des unités d'enseignements Génie Logiciel, IHM et Projet ECOM gérer respectivement par Didier DONSEZ, Laurence NIGAY et Sybille CAFFIAU.<br /> <br /> ==Présentation du projet [[ECOM]]==<br /> <br /> Notre site de commerce électronique &quot;PIXEL-SHIRT&quot; permet la création de tee-shirt avec des modèles pixelisé personnalisé. Chaque client doit au préalablement créer un compte. Il pourra ensuite choisir entre une panoplie de Tee-shirt (la taille, le type, col en V, couleur, etc...). Deplus le client pourra importer un dessin à représenter sur le tee-shirt. Un outil de dessin pixélisé sera éventuellement mis en place sur le site. Le projet ECOM étant de courte durée nous décidons d'utiliser une méthodologie [[Scrum]] pour la conduite de ce projet. La partie IHM et la partie Système sont menées en parallèle pendant toute la durée du projet. Le projet se conclut par une soutenance finale pour chaque partie (IHM et système).<br /> <br /> ===SCRUM===<br /> Pour la partie conception de l'architecture de notre site nous avons décidé d'utiliser la méthode agile Scrum avec des sprints d'une durée de 1 semaine. En effet, cela nous permet d'avoir rapidement un feedback sur le travail effectué, et par conséquent d'augmenter notre réactivité face aux demandes du client. Voici le lien vers notre Waffle, qui permet de voir en temps réel l'avancement de notre projet : [https://waffle.io/Vivien-Michel/PIXEL-SHIRT]. Nous utilisons aussi Scrum pour la partie création du site. Ci dessous voici notre planning prévisionnel du projet avec les différentes tâches.<br /> <br /> [[File:planning_previsionnel.jpg|center|thumb|900px]]<br /> <br /> ===GIT===<br /> Nous utilisons Github un gestionnaire de version pour pouvoir interagir simultanément sur le projet PIXEL-SHIRT. Voici le lien de dêpot distant : [https://github.com/Vivien-Michel/PIXEL-SHIRT]<br /> <br /> ==Equipe==<br /> <br /> ===Enseignants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | DONSEZ Didier<br /> | didier.donsez@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | CAFFIAU Sybille <br /> | sybille.caffiau@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | NIGAY Laurence <br /> | laurence.nigay@imag.fr<br /> |- <br /> <br /> |}<br /> <br /> ===Etudiants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> !scope=&quot;col&quot;| Rôle<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | MICHEL Vivien<br /> | vivien.michel@e.ujf-grenoble.fr<br /> | Scrum Master<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | KLIPFFEL Tararaina<br /> | tararaina.klipffel@e.ujf-grenoble.fr<br /> | Chef de projet<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | TOUSSAINT Sebastien<br /> | sebastien.toussain@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | SAUSSAC Thibault<br /> | thibault.saussac@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | LONGFEI Jérôme<br /> | jérôme.longfei@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> |}<br /> <br /> =SRS=<br /> [fiche_SRS]<br /> Définitions des exigences logicielles<br /> <br /> =Gestion de projet=<br /> ==Initialisation du projet 08/09/2015==<br /> Définition du projet et des différents objectifs à atteindre. Création d'un site web permettant la création de Tee-Shirt avec des logos pixelisés. L'application offre la possibilité de créer des Tee-Shirt avec :<br /> * des modèles prédéfinis<br /> * des modèles prédéfinis modifiable<br /> * des créations de modèle.<br /> <br /> ==Création du questionnaire 15/09/2015==<br /> ===Questionnaire===<br /> [https://docs.google.com/forms/d/1rcJ5u16AZn9hkijGnRVUkNL3VhEI4zp9b5F17_58E7w/viewform Questionnaire ECOM]<br /> ===Analyse des données===<br /> ==== Cible ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Age des utilisateurs<br /> !scope=&quot;col&quot;| Nombre d'heure d'utilisation d'un ordinateur<br /> !scope=&quot;col&quot;| Nombre d'achat en ligne par mois<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:AgeConso.png|center|thumb|500px]]<br /> | [[File:HeureConso.png|center|thumb|500px]]<br /> | [[File:NbFoisConso.png|center|thumb|500px]]<br /> |-<br /> <br /> |}<br /> <br /> <br /> Notre cible est principalement des consommateurs entre 20 et 40. Les différents graphiques nous montrent qu’ils sont à l’aise avec un utilisateur car 93% d’entre eux passent entre 1h et plus sur un ordinateur. Concernant les achats en ligne ils ont déjà plusieurs fois utilisé ce moyen de consommation.<br /> <br /> Conclusion : nous avons à faire à des utilisateurs plus que novice dans l’utilisation des ordinateurs. Ayant déjà effectué des achats en ligne il faut que l’interface du site puis lors être familier, afin d’avoir des achats rapide. <br /> <br /> ==== Plateformes ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Plateforme utilisé pour effectuer des achats<br /> !scope=&quot;col&quot;| Navigateur utilisé pour effectuer des achats<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:SurQuoi.png|center|thumb|500px]]<br /> | [[File:browserusefor.png|center|thumb|500px]]<br /> |-<br /> <br /> |}<br /> <br /> L’ordinateur est la plateforme la plus utilité pour les achats en lignes. Donc nous allons nous concentrer sur le développement d’une application Web<br /> Concernant le support de navigation, Google Chrome prend la première place du podium 68,8% devant Firefox et Safari avec 18,8% et 6,3%. <br /> <br /> En conclusion nous allons utiliser HTML5 afin de favoriser l’afficher des pages web sur les téléphones portable. Et aussi afin d’avoir un rendu correct sur une grande variété de navigateur web.<br /> <br /> <br /> ==== Fonctionnalités attendus ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Plateforme utilisé pour effectuer des achats<br /> !scope=&quot;col&quot;| Navigateur utilisé pour effectuer des achats<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:poiintImportznt.png|center|thumb|500px]]<br /> | [[File:commentaireImport.png|center|thumb|500px]]<br /> |-<br /> <br /> |}<br /> <br /> <br /> Quatre points sont primordiaux pour les utilisateurs :<br /> * Des paiements sécurisés<br /> * Rapidité des commandes (EUH livraison ou sur le site)<br /> * Les commentaires<br /> * L’affichage des promotions <br /> <br /> Pour répondre à la première demande nous avons l’intention d’utiliser HTTPS pour les transactions sur notre site et nous comptons aussi le mettre en évidence afin que les clients soient sécurisés.<br /> <br /> Pour le dernier point nous avons l’intention d’afficher les promotions sur la page d’accueil dès qu’ils seront disponibles. <br /> L’usage des commentaires est essentiel pour effectuer un achat. Alors il prévu que les utilisateurs puissent écrire des commentaires pour un produit et aussi que ce commentaire soit visible<br /> <br /> <br /> &lt; A venir &gt;<br /> <br /> ==Définir les pré-requis, les besoins et les contraintes 22/09/2015 &amp; 29/09/2015==<br /> ===Les pré-requis===<br /> 1) Qui est ce qui va m’utiliser ? Quand ? Pourquoi ? Dans quel environnement ? Comment résonne cet utilisateur ?<br /> Le site de E-commerce sera utilisé par des utilisateurs relativement jeune puisque la plupart des personnes intéressées ont entre 15 et 25 ans. Par tous type de personne, à la fois des étudiants, des bureaux étudiants pour des tee-shirt à l’image de leur école ou filière mais aussi des chefs d’entreprise voulant faire des tee-shirt publicitaire à l’effigie de leur entreprise, des clubs sportifs. Ce site web sera disponible tout le temps mais les principales fréquentation devrait être en fin de journée après avoir étudier la fréquentation sur les sites concurrents. Leurs principales vente se font tout au long de la journée du fait de l’accès à l’Internet sur leur lieu de travail cependant le pic des commande se site en fin de journée entre 18h30 et 21h. Les tee-shirt personnalisés pourront être commandés par des personnes voulant se démarquer avec un tee-shirt original. Cependant ces tee-shirt sont aussi très commandés par des personnes voulant faire des cadeaux d’anniversaire afin d’avoir une touche personnel dessus. Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire. <br /> ===Les besoins===<br /> 2) Quelles plateformes je peux utiliser pour communiquer avec un humain ?<br /> Les plate-formes pouvant être utilisés sont les couriels, les SMS, puisque la clientèle est jeune il serait intéressant de faire des offres promotionnel via Facebook et plus généralement les réseaux sociaux. (GSM, Ordinateurs, Smartphones)<br /> 3) Qu’est ce que j’ai besoin de connaître pour permettre à l’humain d’accomplir ses tâches ? Qu’est ce qu’un développeur peut m’apprendre ? Comment ?<br /> * Ses coordonnées bancaires.<br /> * Son adresse de livraison<br /> * Son nom, prénom.<br /> * Son adresse mail.<br /> * Son numéro de téléphone.<br /> ===Les contraintes===<br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des contraintes<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Type<br /> !scope=&quot;col&quot;| contraintes<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Utilisateurs<br /> | Les utilisateurs de notre site seront :<br /> * Les étudiants qui veulent un tee-shirt représentant leur filière ou école.<br /> * Les personnes qui veulent un tee-shirt individualisé.<br /> * Les entreprises qui veulent prendre un tee-shirt représentant leur culture d’entreprise.<br /> * Les groupes comme les clubs sportifs et les geeks.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | Environnement<br /> | Les clients vont utiliser le site de E-commerce sur les ordinateurs puisque c’est pratique à télécharger leur commandes vers un serveur.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Objectifs de l’utilisateur, tâches et cas d’utilisation<br /> | L’objectif de l’utilisateur est de faire une commande des tee-shirts individualisés.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Entrées/sorties possibles, plateformes<br /> | Entrées: Les images des tee-shirts, le nombre et les tailles des tee-shirts, les informations personnalisés (les coordonnées bancaires, l’adresse de livraison, le nom et prénom, l’adresse mail, le numéro de téléphone). Plateformes: Les navigateurs web sur les ordinateurs.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Analyse technologique (étude de librairies...) technologies web obligatoires<br /> | Utilisation de JavaScript et CSS pour réaliser des web pages, java pour réaliser la couche logique et JDBC pour la connexion à des bases de donneés<br /> |-<br /> <br /> |}<br /> <br /> <br /> ==Conception IHM 06/10/2015==<br /> ===Utilisateurs cible===<br /> Personnes comprises entre 18 et 40 ans. Les 18 – 25 car ils veulent suivre la mode du rétro. Et les 25 - 40 car cela leur rappel leur enfance avec les jeux pixelisés.<br /> ===Tâches : priorité de développement pour l’utilisateur===<br /> Product backlog des priorité de développement pour l'utilisateur en ce qui concerne L'IHM.<br /> <br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des tâches<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Tâche<br /> !scope=&quot;col&quot;| Sous tâches<br /> !scope=&quot;col&quot;| Priorité<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Gestion compte<br /> | <br /> * création/suppression du compte<br /> | (7)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Créer un modèle de Tee-shirt<br /> | <br /> * proposer un design<br /> * choix d’un modèle prédéfinit<br /> | 2<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Gestion du panier<br /> | <br /> * création d‘une session <br /> * ajouter/supprimer/modifier un article au panier <br /> * commander<br /> | (6)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Transaction bancaire<br /> |<br /> * accepter <br /> * refuser <br /> * payer<br /> | 3<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Visualiser le catalogue<br /> | <br /> * recherche article<br /> * visualiser par catégorie <br /> * IHM<br /> | 1<br /> |-<br /> <br /> !scope=&quot;row&quot;| 6<br /> | Gérer catalogue<br /> | <br /> * création BD<br /> | (4)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 7<br /> | Administrateur<br /> |<br /> * ajout d'un article au catalogue<br /> | (5)<br /> |-<br /> |}<br /> <br /> ===Contextes d'utilisation===<br /> Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire.<br /> <br /> ===User Case UML===<br /> [[File:Use_Case.png|center|thumb|600px]]<br /> <br /> ===Modèle de tâche===<br /> [[File:tache.jpg|center|thumb|1200px]]<br /> <br /> ===IHM===<br /> ====IHM abstraite====<br /> [[File:IHM_abstraite.png|center|thumb|900px]]<br /> <br /> ====Maquette IHM====<br /> [[File:maquette.jpg|center|thumb|600px]]<br /> <br /> =Références=</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=ECOM-RICM/PIXEL-SHIRT&diff=24582 2015-10-19T07:59:11Z

<p>Sebastien.Toussaint: /* Création du questionnaire 15/09/2015 */</p> <hr /> <div>Le projet ECOM-RICM 2015-2016 consiste à concevoir et développer une application de commerce électronique dans le cadre des unités d'enseignements Génie Logiciel, IHM et Projet ECOM gérer respectivement par Didier DONSEZ, Laurence NIGAY et Sybille CAFFIAU.<br /> <br /> ==Présentation du projet [[ECOM]]==<br /> <br /> Notre site de commerce électronique &quot;PIXEL-SHIRT&quot; permet la création de tee-shirt avec des modèles pixelisé personnalisé. Chaque client doit au préalablement créer un compte. Il pourra ensuite choisir entre une panoplie de Tee-shirt (la taille, le type, col en V, couleur, etc...). Deplus le client pourra importer un dessin à représenter sur le tee-shirt. Un outil de dessin pixélisé sera éventuellement mis en place sur le site. Le projet ECOM étant de courte durée nous décidons d'utiliser une méthodologie [[Scrum]] pour la conduite de ce projet. La partie IHM et la partie Système sont menées en parallèle pendant toute la durée du projet. Le projet se conclut par une soutenance finale pour chaque partie (IHM et système).<br /> <br /> ===SCRUM===<br /> Pour la partie conception de l'architecture de notre site nous avons décidé d'utiliser la méthode agile Scrum avec des sprints d'une durée de 1 semaine. En effet, cela nous permet d'avoir rapidement un feedback sur le travail effectué, et par conséquent d'augmenter notre réactivité face aux demandes du client. Voici le lien vers notre Waffle, qui permet de voir en temps réel l'avancement de notre projet : [https://waffle.io/Vivien-Michel/PIXEL-SHIRT]. Nous utilisons aussi Scrum pour la partie création du site. Ci dessous voici notre planning prévisionnel du projet avec les différentes tâches.<br /> <br /> [[File:planning_previsionnel.jpg|center|thumb|900px]]<br /> <br /> ===GIT===<br /> Nous utilisons Github un gestionnaire de version pour pouvoir interagir simultanément sur le projet PIXEL-SHIRT. Voici le lien de dêpot distant : [https://github.com/Vivien-Michel/PIXEL-SHIRT]<br /> <br /> ==Equipe==<br /> <br /> ===Enseignants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | DONSEZ Didier<br /> | didier.donsez@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | CAFFIAU Sybille <br /> | sybille.caffiau@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | NIGAY Laurence <br /> | laurence.nigay@imag.fr<br /> |- <br /> <br /> |}<br /> <br /> ===Etudiants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> !scope=&quot;col&quot;| Rôle<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | MICHEL Vivien<br /> | vivien.michel@e.ujf-grenoble.fr<br /> | Scrum Master<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | KLIPFFEL Tararaina<br /> | tararaina.klipffel@e.ujf-grenoble.fr<br /> | Chef de projet<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | TOUSSAINT Sebastien<br /> | sebastien.toussain@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | SAUSSAC Thibault<br /> | thibault.saussac@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | LONGFEI Jérôme<br /> | jérôme.longfei@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> |}<br /> <br /> =SRS=<br /> [fiche_SRS]<br /> Définitions des exigences logicielles<br /> <br /> =Gestion de projet=<br /> ==Initialisation du projet 08/09/2015==<br /> Définition du projet et des différents objectifs à atteindre. Création d'un site web permettant la création de Tee-Shirt avec des logos pixelisés. L'application offre la possibilité de créer des Tee-Shirt avec :<br /> * des modèles prédéfinis<br /> * des modèles prédéfinis modifiable<br /> * des créations de modèle.<br /> <br /> ==Création du questionnaire 15/09/2015==<br /> ===Questionnaire===<br /> [https://docs.google.com/forms/d/1rcJ5u16AZn9hkijGnRVUkNL3VhEI4zp9b5F17_58E7w/viewform Questionnaire ECOM]<br /> ===Analyse des données===<br /> ==== Cible ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Age des utilisateurs<br /> !scope=&quot;col&quot;| Nombre d'heure d'utilisation d'un ordinateur<br /> !scope=&quot;col&quot;| Nombre d'achat en ligne par mois<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:AgeConso.png|center|thumb|500px]]<br /> | [[File:HeureConso.png|center|thumb|500px]]<br /> | [[File:NbFoisConso.png|center|thumb|500px]]<br /> |-<br /> <br /> |}<br /> <br /> <br /> Notre cible est principalement des consommateurs entre 20 et 40. Les différents graphiques nous montrent qu’ils sont à l’aise avec un utilisateur car 93% d’entre eux passent entre 1h et plus sur un ordinateur. Concernant les achats en ligne ils ont déjà plusieurs fois utilisé ce moyen de consommation.<br /> <br /> Conclusion : nous avons à faire à des utilisateurs plus que novice dans l’utilisation des ordinateurs. Ayant déjà effectué des achats en ligne il faut que l’interface du site puis lors être familier, afin d’avoir des achats rapide. <br /> <br /> ==== Plateformes ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Plateforme utilisé pour effectuer des achats<br /> !scope=&quot;col&quot;| Navigateur utilisé pour effectuer des achats<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:SurQuoi.png|center|thumb|500px]]<br /> | [[File:browserusefor.png|center|thumb|500px]]<br /> |-<br /> <br /> |}<br /> <br /> L’ordinateur est la plateforme la plus utilité pour les achats en lignes. Donc nous allons nous concentrer sur le développement d’une application Web<br /> Concernant le support de navigation, Google Chrome prend la première place du podium 68,8% devant Firefox et Safari avec 18,8% et 6,3%. <br /> <br /> En conclusion nous allons utiliser HTML5 afin de favoriser l’afficher des pages web sur les téléphones portable. Et aussi afin d’avoir un rendu correct sur une grande variété de navigateur web.<br /> <br /> <br /> ==== Fonctionnalités attendus ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Plateforme utilisé pour effectuer des achats<br /> !scope=&quot;col&quot;| Navigateur utilisé pour effectuer des achats<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:poiintImportznt.png|center|thumb|500px]]<br /> | [[File:commentaireImport.png|center|thumb|500px]]<br /> |-<br /> <br /> <br /> <br /> <br /> Quatre points sont primordiaux pour les utilisateurs :<br /> * Des paiements sécurisés<br /> * Rapidité des commandes (EUH livraison ou sur le site)<br /> * Les commentaires<br /> * L’affichage des promotions <br /> <br /> Pour répondre à la première demande nous avons l’intention d’utiliser HTTPS pour les transactions sur notre site et nous comptons aussi le mettre en évidence afin que les clients soient sécurisés.<br /> <br /> Pour le dernier point nous avons l’intention d’afficher les promotions sur la page d’accueil dès qu’ils seront disponibles. <br /> L’usage des commentaires est essentiel pour effectuer un achat. Alors il prévu que les utilisateurs puissent écrire des commentaires pour un produit et aussi que ce commentaire soit visible<br /> <br /> <br /> &lt; A venir &gt;<br /> <br /> ==Définir les pré-requis, les besoins et les contraintes 22/09/2015 &amp; 29/09/2015==<br /> ===Les pré-requis===<br /> 1) Qui est ce qui va m’utiliser ? Quand ? Pourquoi ? Dans quel environnement ? Comment résonne cet utilisateur ?<br /> Le site de E-commerce sera utilisé par des utilisateurs relativement jeune puisque la plupart des personnes intéressées ont entre 15 et 25 ans. Par tous type de personne, à la fois des étudiants, des bureaux étudiants pour des tee-shirt à l’image de leur école ou filière mais aussi des chefs d’entreprise voulant faire des tee-shirt publicitaire à l’effigie de leur entreprise, des clubs sportifs. Ce site web sera disponible tout le temps mais les principales fréquentation devrait être en fin de journée après avoir étudier la fréquentation sur les sites concurrents. Leurs principales vente se font tout au long de la journée du fait de l’accès à l’Internet sur leur lieu de travail cependant le pic des commande se site en fin de journée entre 18h30 et 21h. Les tee-shirt personnalisés pourront être commandés par des personnes voulant se démarquer avec un tee-shirt original. Cependant ces tee-shirt sont aussi très commandés par des personnes voulant faire des cadeaux d’anniversaire afin d’avoir une touche personnel dessus. Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire. <br /> ===Les besoins===<br /> 2) Quelles plateformes je peux utiliser pour communiquer avec un humain ?<br /> Les plate-formes pouvant être utilisés sont les couriels, les SMS, puisque la clientèle est jeune il serait intéressant de faire des offres promotionnel via Facebook et plus généralement les réseaux sociaux. (GSM, Ordinateurs, Smartphones)<br /> 3) Qu’est ce que j’ai besoin de connaître pour permettre à l’humain d’accomplir ses tâches ? Qu’est ce qu’un développeur peut m’apprendre ? Comment ?<br /> * Ses coordonnées bancaires.<br /> * Son adresse de livraison<br /> * Son nom, prénom.<br /> * Son adresse mail.<br /> * Son numéro de téléphone.<br /> ===Les contraintes===<br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des contraintes<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Type<br /> !scope=&quot;col&quot;| contraintes<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Utilisateurs<br /> | Les utilisateurs de notre site seront :<br /> * Les étudiants qui veulent un tee-shirt représentant leur filière ou école.<br /> * Les personnes qui veulent un tee-shirt individualisé.<br /> * Les entreprises qui veulent prendre un tee-shirt représentant leur culture d’entreprise.<br /> * Les groupes comme les clubs sportifs et les geeks.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | Environnement<br /> | Les clients vont utiliser le site de E-commerce sur les ordinateurs puisque c’est pratique à télécharger leur commandes vers un serveur.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Objectifs de l’utilisateur, tâches et cas d’utilisation<br /> | L’objectif de l’utilisateur est de faire une commande des tee-shirts individualisés.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Entrées/sorties possibles, plateformes<br /> | Entrées: Les images des tee-shirts, le nombre et les tailles des tee-shirts, les informations personnalisés (les coordonnées bancaires, l’adresse de livraison, le nom et prénom, l’adresse mail, le numéro de téléphone). Plateformes: Les navigateurs web sur les ordinateurs.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Analyse technologique (étude de librairies...) technologies web obligatoires<br /> | Utilisation de JavaScript et CSS pour réaliser des web pages, java pour réaliser la couche logique et JDBC pour la connexion à des bases de donneés<br /> |-<br /> <br /> |}<br /> <br /> <br /> ==Conception IHM 06/10/2015==<br /> ===Utilisateurs cible===<br /> Personnes comprises entre 18 et 40 ans. Les 18 – 25 car ils veulent suivre la mode du rétro. Et les 25 - 40 car cela leur rappel leur enfance avec les jeux pixelisés.<br /> ===Tâches : priorité de développement pour l’utilisateur===<br /> Product backlog des priorité de développement pour l'utilisateur en ce qui concerne L'IHM.<br /> <br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des tâches<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Tâche<br /> !scope=&quot;col&quot;| Sous tâches<br /> !scope=&quot;col&quot;| Priorité<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Gestion compte<br /> | <br /> * création/suppression du compte<br /> | (7)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Créer un modèle de Tee-shirt<br /> | <br /> * proposer un design<br /> * choix d’un modèle prédéfinit<br /> | 2<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Gestion du panier<br /> | <br /> * création d‘une session <br /> * ajouter/supprimer/modifier un article au panier <br /> * commander<br /> | (6)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Transaction bancaire<br /> |<br /> * accepter <br /> * refuser <br /> * payer<br /> | 3<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Visualiser le catalogue<br /> | <br /> * recherche article<br /> * visualiser par catégorie <br /> * IHM<br /> | 1<br /> |-<br /> <br /> !scope=&quot;row&quot;| 6<br /> | Gérer catalogue<br /> | <br /> * création BD<br /> | (4)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 7<br /> | Administrateur<br /> |<br /> * ajout d'un article au catalogue<br /> | (5)<br /> |-<br /> |}<br /> <br /> ===Contextes d'utilisation===<br /> Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire.<br /> <br /> ===User Case UML===<br /> [[File:Use_Case.png|center|thumb|600px]]<br /> <br /> ===Modèle de tâche===<br /> [[File:tache.jpg|center|thumb|1200px]]<br /> <br /> ===IHM===<br /> ====IHM abstraite====<br /> [[File:IHM_abstraite.png|center|thumb|900px]]<br /> <br /> ====Maquette IHM====<br /> [[File:maquette.jpg|center|thumb|600px]]<br /> <br /> =Références=</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=ECOM-RICM/PIXEL-SHIRT&diff=24581 2015-10-19T07:53:31Z

<p>Sebastien.Toussaint: /* Création du questionnaire 15/09/2015 */</p> <hr /> <div>Le projet ECOM-RICM 2015-2016 consiste à concevoir et développer une application de commerce électronique dans le cadre des unités d'enseignements Génie Logiciel, IHM et Projet ECOM gérer respectivement par Didier DONSEZ, Laurence NIGAY et Sybille CAFFIAU.<br /> <br /> ==Présentation du projet [[ECOM]]==<br /> <br /> Notre site de commerce électronique &quot;PIXEL-SHIRT&quot; permet la création de tee-shirt avec des modèles pixelisé personnalisé. Chaque client doit au préalablement créer un compte. Il pourra ensuite choisir entre une panoplie de Tee-shirt (la taille, le type, col en V, couleur, etc...). Deplus le client pourra importer un dessin à représenter sur le tee-shirt. Un outil de dessin pixélisé sera éventuellement mis en place sur le site. Le projet ECOM étant de courte durée nous décidons d'utiliser une méthodologie [[Scrum]] pour la conduite de ce projet. La partie IHM et la partie Système sont menées en parallèle pendant toute la durée du projet. Le projet se conclut par une soutenance finale pour chaque partie (IHM et système).<br /> <br /> ===SCRUM===<br /> Pour la partie conception de l'architecture de notre site nous avons décidé d'utiliser la méthode agile Scrum avec des sprints d'une durée de 1 semaine. En effet, cela nous permet d'avoir rapidement un feedback sur le travail effectué, et par conséquent d'augmenter notre réactivité face aux demandes du client. Voici le lien vers notre Waffle, qui permet de voir en temps réel l'avancement de notre projet : [https://waffle.io/Vivien-Michel/PIXEL-SHIRT]. Nous utilisons aussi Scrum pour la partie création du site. Ci dessous voici notre planning prévisionnel du projet avec les différentes tâches.<br /> <br /> [[File:planning_previsionnel.jpg|center|thumb|900px]]<br /> <br /> ===GIT===<br /> Nous utilisons Github un gestionnaire de version pour pouvoir interagir simultanément sur le projet PIXEL-SHIRT. Voici le lien de dêpot distant : [https://github.com/Vivien-Michel/PIXEL-SHIRT]<br /> <br /> ==Equipe==<br /> <br /> ===Enseignants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | DONSEZ Didier<br /> | didier.donsez@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | CAFFIAU Sybille <br /> | sybille.caffiau@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | NIGAY Laurence <br /> | laurence.nigay@imag.fr<br /> |- <br /> <br /> |}<br /> <br /> ===Etudiants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> !scope=&quot;col&quot;| Rôle<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | MICHEL Vivien<br /> | vivien.michel@e.ujf-grenoble.fr<br /> | Scrum Master<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | KLIPFFEL Tararaina<br /> | tararaina.klipffel@e.ujf-grenoble.fr<br /> | Chef de projet<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | TOUSSAINT Sebastien<br /> | sebastien.toussain@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | SAUSSAC Thibault<br /> | thibault.saussac@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | LONGFEI Jérôme<br /> | jérôme.longfei@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> |}<br /> <br /> =SRS=<br /> [fiche_SRS]<br /> Définitions des exigences logicielles<br /> <br /> =Gestion de projet=<br /> ==Initialisation du projet 08/09/2015==<br /> Définition du projet et des différents objectifs à atteindre. Création d'un site web permettant la création de Tee-Shirt avec des logos pixelisés. L'application offre la possibilité de créer des Tee-Shirt avec :<br /> * des modèles prédéfinis<br /> * des modèles prédéfinis modifiable<br /> * des créations de modèle.<br /> <br /> ==Création du questionnaire 15/09/2015==<br /> ===Questionnaire===<br /> [https://docs.google.com/forms/d/1rcJ5u16AZn9hkijGnRVUkNL3VhEI4zp9b5F17_58E7w/viewform Questionnaire ECOM]<br /> ===Analyse des données===<br /> ==== Cible ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Age des utilisateurs<br /> !scope=&quot;col&quot;| Nombre d'heure d'utilisation d'un ordinateur<br /> !scope=&quot;col&quot;| Nombre d'achat en ligne par mois<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:AgeConso.png|center|thumb|500px]]<br /> | [[File:HeureConso.png|center|thumb|500px]]<br /> | [[File:NbFoisConso.png|center|thumb|500px]]<br /> |-<br /> <br /> |}<br /> <br /> <br /> Notre cible est principalement des consommateurs entre 20 et 40. Les différents graphiques nous montrent qu’ils sont à l’aise avec un utilisateur car 93% d’entre eux passent entre 1h et plus sur un ordinateur. Concernant les achats en ligne ils ont déjà plusieurs fois utilisé ce moyen de consommation.<br /> <br /> Conclusion : nous avons à faire à des utilisateurs plus que novice dans l’utilisation des ordinateurs. Ayant déjà effectué des achats en ligne il faut que l’interface du site puis lors être familier, afin d’avoir des achats rapide. <br /> <br /> ==== Plateformes ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Plateforme utilisé pour effectuer des achats<br /> !scope=&quot;col&quot;| Navigateur utilisé pour effectuer des achats<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:SurQuoi.png|center|thumb|500px]]<br /> | [[File:browserusefor.png|center|thumb|500px]]<br /> |-<br /> <br /> |}<br /> <br /> L’ordinateur est la plateforme la plus utilité pour les achats en lignes. Donc nous allons nous concentrer sur le développement d’une application Web<br /> Concernant le support de navigation, Google Chrome prend la première place du podium 68,8% devant Firefox et Safari avec 18,8% et 6,3%. <br /> En conclusion nous allons utiliser HTML5 afin de favoriser l’afficher des pages web sur les téléphones portable. Et aussi afin d’avoir un rendu correct sur une grande variété de navigateur web.<br /> <br /> <br /> ==== Fonctionnalités attendus ====<br /> <br /> Quatre points sont primordiaux pour les utilisateurs :<br /> * Des paiements sécurisés<br /> * Rapidité des commandes (EUH livraison ou sur le site)<br /> * Les commentaires<br /> * L’affichage des promotions <br /> Pour répondre à la première demande nous avons l’intention d’utiliser HTTPS pour les transactions sur notre site et nous comptons aussi le mettre en évidence afin que les clients soient sécurisés. <br /> Pour le dernier point nous avons l’intention d’afficher les promotions sur la page d’accueil dès qu’ils seront disponibles. <br /> L’usage des commentaires est essentiel pour effectuer un achat. Alors il prévu que les utilisateurs puissent écrire des commentaires pour un produit et aussi que ce commentaire soit visible<br /> <br /> <br /> &lt; A venir &gt;<br /> <br /> ==Définir les pré-requis, les besoins et les contraintes 22/09/2015 &amp; 29/09/2015==<br /> ===Les pré-requis===<br /> 1) Qui est ce qui va m’utiliser ? Quand ? Pourquoi ? Dans quel environnement ? Comment résonne cet utilisateur ?<br /> Le site de E-commerce sera utilisé par des utilisateurs relativement jeune puisque la plupart des personnes intéressées ont entre 15 et 25 ans. Par tous type de personne, à la fois des étudiants, des bureaux étudiants pour des tee-shirt à l’image de leur école ou filière mais aussi des chefs d’entreprise voulant faire des tee-shirt publicitaire à l’effigie de leur entreprise, des clubs sportifs. Ce site web sera disponible tout le temps mais les principales fréquentation devrait être en fin de journée après avoir étudier la fréquentation sur les sites concurrents. Leurs principales vente se font tout au long de la journée du fait de l’accès à l’Internet sur leur lieu de travail cependant le pic des commande se site en fin de journée entre 18h30 et 21h. Les tee-shirt personnalisés pourront être commandés par des personnes voulant se démarquer avec un tee-shirt original. Cependant ces tee-shirt sont aussi très commandés par des personnes voulant faire des cadeaux d’anniversaire afin d’avoir une touche personnel dessus. Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire. <br /> ===Les besoins===<br /> 2) Quelles plateformes je peux utiliser pour communiquer avec un humain ?<br /> Les plate-formes pouvant être utilisés sont les couriels, les SMS, puisque la clientèle est jeune il serait intéressant de faire des offres promotionnel via Facebook et plus généralement les réseaux sociaux. (GSM, Ordinateurs, Smartphones)<br /> 3) Qu’est ce que j’ai besoin de connaître pour permettre à l’humain d’accomplir ses tâches ? Qu’est ce qu’un développeur peut m’apprendre ? Comment ?<br /> * Ses coordonnées bancaires.<br /> * Son adresse de livraison<br /> * Son nom, prénom.<br /> * Son adresse mail.<br /> * Son numéro de téléphone.<br /> ===Les contraintes===<br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des contraintes<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Type<br /> !scope=&quot;col&quot;| contraintes<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Utilisateurs<br /> | Les utilisateurs de notre site seront :<br /> * Les étudiants qui veulent un tee-shirt représentant leur filière ou école.<br /> * Les personnes qui veulent un tee-shirt individualisé.<br /> * Les entreprises qui veulent prendre un tee-shirt représentant leur culture d’entreprise.<br /> * Les groupes comme les clubs sportifs et les geeks.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | Environnement<br /> | Les clients vont utiliser le site de E-commerce sur les ordinateurs puisque c’est pratique à télécharger leur commandes vers un serveur.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Objectifs de l’utilisateur, tâches et cas d’utilisation<br /> | L’objectif de l’utilisateur est de faire une commande des tee-shirts individualisés.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Entrées/sorties possibles, plateformes<br /> | Entrées: Les images des tee-shirts, le nombre et les tailles des tee-shirts, les informations personnalisés (les coordonnées bancaires, l’adresse de livraison, le nom et prénom, l’adresse mail, le numéro de téléphone). Plateformes: Les navigateurs web sur les ordinateurs.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Analyse technologique (étude de librairies...) technologies web obligatoires<br /> | Utilisation de JavaScript et CSS pour réaliser des web pages, java pour réaliser la couche logique et JDBC pour la connexion à des bases de donneés<br /> |-<br /> <br /> |}<br /> <br /> <br /> ==Conception IHM 06/10/2015==<br /> ===Utilisateurs cible===<br /> Personnes comprises entre 18 et 40 ans. Les 18 – 25 car ils veulent suivre la mode du rétro. Et les 25 - 40 car cela leur rappel leur enfance avec les jeux pixelisés.<br /> ===Tâches : priorité de développement pour l’utilisateur===<br /> Product backlog des priorité de développement pour l'utilisateur en ce qui concerne L'IHM.<br /> <br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des tâches<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Tâche<br /> !scope=&quot;col&quot;| Sous tâches<br /> !scope=&quot;col&quot;| Priorité<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Gestion compte<br /> | <br /> * création/suppression du compte<br /> | (7)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Créer un modèle de Tee-shirt<br /> | <br /> * proposer un design<br /> * choix d’un modèle prédéfinit<br /> | 2<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Gestion du panier<br /> | <br /> * création d‘une session <br /> * ajouter/supprimer/modifier un article au panier <br /> * commander<br /> | (6)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Transaction bancaire<br /> |<br /> * accepter <br /> * refuser <br /> * payer<br /> | 3<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Visualiser le catalogue<br /> | <br /> * recherche article<br /> * visualiser par catégorie <br /> * IHM<br /> | 1<br /> |-<br /> <br /> !scope=&quot;row&quot;| 6<br /> | Gérer catalogue<br /> | <br /> * création BD<br /> | (4)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 7<br /> | Administrateur<br /> |<br /> * ajout d'un article au catalogue<br /> | (5)<br /> |-<br /> |}<br /> <br /> ===Contextes d'utilisation===<br /> Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire.<br /> <br /> ===User Case UML===<br /> [[File:Use_Case.png|center|thumb|600px]]<br /> <br /> ===Modèle de tâche===<br /> [[File:tache.jpg|center|thumb|1200px]]<br /> <br /> ===IHM===<br /> ====IHM abstraite====<br /> [[File:IHM_abstraite.png|center|thumb|900px]]<br /> <br /> ====Maquette IHM====<br /> [[File:maquette.jpg|center|thumb|600px]]<br /> <br /> =Références=</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=File:Browserusefor.png&diff=24580 2015-10-19T07:50:54Z

<p>Sebastien.Toussaint: </p> <hr /> <div></div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=File:SurQuoi.png&diff=24578 2015-10-19T07:50:20Z

<p>Sebastien.Toussaint: </p> <hr /> <div></div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=ECOM-RICM/PIXEL-SHIRT&diff=24577 2015-10-19T07:50:06Z

<p>Sebastien.Toussaint: /* Création du questionnaire 15/09/2015 */</p> <hr /> <div>Le projet ECOM-RICM 2015-2016 consiste à concevoir et développer une application de commerce électronique dans le cadre des unités d'enseignements Génie Logiciel, IHM et Projet ECOM gérer respectivement par Didier DONSEZ, Laurence NIGAY et Sybille CAFFIAU.<br /> <br /> ==Présentation du projet [[ECOM]]==<br /> <br /> Notre site de commerce électronique &quot;PIXEL-SHIRT&quot; permet la création de tee-shirt avec des modèles pixelisé personnalisé. Chaque client doit au préalablement créer un compte. Il pourra ensuite choisir entre une panoplie de Tee-shirt (la taille, le type, col en V, couleur, etc...). Deplus le client pourra importer un dessin à représenter sur le tee-shirt. Un outil de dessin pixélisé sera éventuellement mis en place sur le site. Le projet ECOM étant de courte durée nous décidons d'utiliser une méthodologie [[Scrum]] pour la conduite de ce projet. La partie IHM et la partie Système sont menées en parallèle pendant toute la durée du projet. Le projet se conclut par une soutenance finale pour chaque partie (IHM et système).<br /> <br /> ===SCRUM===<br /> Pour la partie conception de l'architecture de notre site nous avons décidé d'utiliser la méthode agile Scrum avec des sprints d'une durée de 1 semaine. En effet, cela nous permet d'avoir rapidement un feedback sur le travail effectué, et par conséquent d'augmenter notre réactivité face aux demandes du client. Voici le lien vers notre Waffle, qui permet de voir en temps réel l'avancement de notre projet : [https://waffle.io/Vivien-Michel/PIXEL-SHIRT]. Nous utilisons aussi Scrum pour la partie création du site. Ci dessous voici notre planning prévisionnel du projet avec les différentes tâches.<br /> <br /> [[File:planning_previsionnel.jpg|center|thumb|900px]]<br /> <br /> ===GIT===<br /> Nous utilisons Github un gestionnaire de version pour pouvoir interagir simultanément sur le projet PIXEL-SHIRT. Voici le lien de dêpot distant : [https://github.com/Vivien-Michel/PIXEL-SHIRT]<br /> <br /> ==Equipe==<br /> <br /> ===Enseignants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | DONSEZ Didier<br /> | didier.donsez@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | CAFFIAU Sybille <br /> | sybille.caffiau@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | NIGAY Laurence <br /> | laurence.nigay@imag.fr<br /> |- <br /> <br /> |}<br /> <br /> ===Etudiants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> !scope=&quot;col&quot;| Rôle<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | MICHEL Vivien<br /> | vivien.michel@e.ujf-grenoble.fr<br /> | Scrum Master<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | KLIPFFEL Tararaina<br /> | tararaina.klipffel@e.ujf-grenoble.fr<br /> | Chef de projet<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | TOUSSAINT Sebastien<br /> | sebastien.toussain@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | SAUSSAC Thibault<br /> | thibault.saussac@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | LONGFEI Jérôme<br /> | jérôme.longfei@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> |}<br /> <br /> =SRS=<br /> [fiche_SRS]<br /> Définitions des exigences logicielles<br /> <br /> =Gestion de projet=<br /> ==Initialisation du projet 08/09/2015==<br /> Définition du projet et des différents objectifs à atteindre. Création d'un site web permettant la création de Tee-Shirt avec des logos pixelisés. L'application offre la possibilité de créer des Tee-Shirt avec :<br /> * des modèles prédéfinis<br /> * des modèles prédéfinis modifiable<br /> * des créations de modèle.<br /> <br /> ==Création du questionnaire 15/09/2015==<br /> ===Questionnaire===<br /> [https://docs.google.com/forms/d/1rcJ5u16AZn9hkijGnRVUkNL3VhEI4zp9b5F17_58E7w/viewform Questionnaire ECOM]<br /> ===Analyse des données===<br /> ==== Cible ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Age des utilisateurs<br /> !scope=&quot;col&quot;| Nombre d'heure d'utilisation d'un ordinateur<br /> !scope=&quot;col&quot;| Nombre d'achat en ligne par mois<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:AgeConso.png|center|thumb|500px]]<br /> | [[File:HeureConso.png|center|thumb|500px]]<br /> | [[File:NbFoisConso.png|center|thumb|500px]]<br /> |-<br /> <br /> |}<br /> <br /> <br /> Notre cible est principalement des consommateurs entre 20 et 40. Les différents graphiques nous montrent qu’ils sont à l’aise avec un utilisateur car 93% d’entre eux passent entre 1h et plus sur un ordinateur. Concernant les achats en ligne ils ont déjà plusieurs fois utilisé ce moyen de consommation.<br /> <br /> Conclusion : nous avons à faire à des utilisateurs plus que novice dans l’utilisation des ordinateurs. Ayant déjà effectué des achats en ligne il faut que l’interface du site puis lors être familier, afin d’avoir des achats rapide. <br /> <br /> ==== Fonctionnalités attendus ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Plateforme utilisé pour effectuer des achats<br /> !scope=&quot;col&quot;| Navigateur utilisé pour effectuer des achats<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:SurQuoi.png|center|thumb|500px]]<br /> | [[File:browserusefor.png|center|thumb|500px]]<br /> |-<br /> <br /> |}<br /> <br /> Quatre points sont primordiaux pour les utilisateurs :<br /> * Des paiements sécurisés<br /> * Rapidité des commandes (EUH livraison ou sur le site)<br /> * Les commentaires<br /> * L’affichage des promotions <br /> Pour répondre à la première demande nous avons l’intention d’utiliser HTTPS pour les transactions sur notre site et nous comptons aussi le mettre en évidence afin que les clients soient sécurisés. <br /> Pour le dernier point nous avons l’intention d’afficher les promotions sur la page d’accueil dès qu’ils seront disponibles. <br /> L’usage des commentaires est essentiel pour effectuer un achat. Alors il prévu que les utilisateurs puissent écrire des commentaires pour un produit et aussi que ce commentaire soit visible<br /> <br /> <br /> &lt; A venir &gt;<br /> <br /> ==Définir les pré-requis, les besoins et les contraintes 22/09/2015 &amp; 29/09/2015==<br /> ===Les pré-requis===<br /> 1) Qui est ce qui va m’utiliser ? Quand ? Pourquoi ? Dans quel environnement ? Comment résonne cet utilisateur ?<br /> Le site de E-commerce sera utilisé par des utilisateurs relativement jeune puisque la plupart des personnes intéressées ont entre 15 et 25 ans. Par tous type de personne, à la fois des étudiants, des bureaux étudiants pour des tee-shirt à l’image de leur école ou filière mais aussi des chefs d’entreprise voulant faire des tee-shirt publicitaire à l’effigie de leur entreprise, des clubs sportifs. Ce site web sera disponible tout le temps mais les principales fréquentation devrait être en fin de journée après avoir étudier la fréquentation sur les sites concurrents. Leurs principales vente se font tout au long de la journée du fait de l’accès à l’Internet sur leur lieu de travail cependant le pic des commande se site en fin de journée entre 18h30 et 21h. Les tee-shirt personnalisés pourront être commandés par des personnes voulant se démarquer avec un tee-shirt original. Cependant ces tee-shirt sont aussi très commandés par des personnes voulant faire des cadeaux d’anniversaire afin d’avoir une touche personnel dessus. Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire. <br /> ===Les besoins===<br /> 2) Quelles plateformes je peux utiliser pour communiquer avec un humain ?<br /> Les plate-formes pouvant être utilisés sont les couriels, les SMS, puisque la clientèle est jeune il serait intéressant de faire des offres promotionnel via Facebook et plus généralement les réseaux sociaux. (GSM, Ordinateurs, Smartphones)<br /> 3) Qu’est ce que j’ai besoin de connaître pour permettre à l’humain d’accomplir ses tâches ? Qu’est ce qu’un développeur peut m’apprendre ? Comment ?<br /> * Ses coordonnées bancaires.<br /> * Son adresse de livraison<br /> * Son nom, prénom.<br /> * Son adresse mail.<br /> * Son numéro de téléphone.<br /> ===Les contraintes===<br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des contraintes<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Type<br /> !scope=&quot;col&quot;| contraintes<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Utilisateurs<br /> | Les utilisateurs de notre site seront :<br /> * Les étudiants qui veulent un tee-shirt représentant leur filière ou école.<br /> * Les personnes qui veulent un tee-shirt individualisé.<br /> * Les entreprises qui veulent prendre un tee-shirt représentant leur culture d’entreprise.<br /> * Les groupes comme les clubs sportifs et les geeks.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | Environnement<br /> | Les clients vont utiliser le site de E-commerce sur les ordinateurs puisque c’est pratique à télécharger leur commandes vers un serveur.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Objectifs de l’utilisateur, tâches et cas d’utilisation<br /> | L’objectif de l’utilisateur est de faire une commande des tee-shirts individualisés.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Entrées/sorties possibles, plateformes<br /> | Entrées: Les images des tee-shirts, le nombre et les tailles des tee-shirts, les informations personnalisés (les coordonnées bancaires, l’adresse de livraison, le nom et prénom, l’adresse mail, le numéro de téléphone). Plateformes: Les navigateurs web sur les ordinateurs.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Analyse technologique (étude de librairies...) technologies web obligatoires<br /> | Utilisation de JavaScript et CSS pour réaliser des web pages, java pour réaliser la couche logique et JDBC pour la connexion à des bases de donneés<br /> |-<br /> <br /> |}<br /> <br /> <br /> ==Conception IHM 06/10/2015==<br /> ===Utilisateurs cible===<br /> Personnes comprises entre 18 et 40 ans. Les 18 – 25 car ils veulent suivre la mode du rétro. Et les 25 - 40 car cela leur rappel leur enfance avec les jeux pixelisés.<br /> ===Tâches : priorité de développement pour l’utilisateur===<br /> Product backlog des priorité de développement pour l'utilisateur en ce qui concerne L'IHM.<br /> <br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des tâches<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Tâche<br /> !scope=&quot;col&quot;| Sous tâches<br /> !scope=&quot;col&quot;| Priorité<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Gestion compte<br /> | <br /> * création/suppression du compte<br /> | (7)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Créer un modèle de Tee-shirt<br /> | <br /> * proposer un design<br /> * choix d’un modèle prédéfinit<br /> | 2<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Gestion du panier<br /> | <br /> * création d‘une session <br /> * ajouter/supprimer/modifier un article au panier <br /> * commander<br /> | (6)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Transaction bancaire<br /> |<br /> * accepter <br /> * refuser <br /> * payer<br /> | 3<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Visualiser le catalogue<br /> | <br /> * recherche article<br /> * visualiser par catégorie <br /> * IHM<br /> | 1<br /> |-<br /> <br /> !scope=&quot;row&quot;| 6<br /> | Gérer catalogue<br /> | <br /> * création BD<br /> | (4)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 7<br /> | Administrateur<br /> |<br /> * ajout d'un article au catalogue<br /> | (5)<br /> |-<br /> |}<br /> <br /> ===Contextes d'utilisation===<br /> Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire.<br /> <br /> ===User Case UML===<br /> [[File:Use_Case.png|center|thumb|600px]]<br /> <br /> ===Modèle de tâche===<br /> [[File:tache.jpg|center|thumb|1200px]]<br /> <br /> ===IHM===<br /> ====IHM abstraite====<br /> [[File:IHM_abstraite.png|center|thumb|900px]]<br /> <br /> ====Maquette IHM====<br /> [[File:maquette.jpg|center|thumb|600px]]<br /> <br /> =Références=</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=ECOM-RICM/PIXEL-SHIRT&diff=24576 2015-10-19T07:48:14Z

<p>Sebastien.Toussaint: /* Fonctionnalités attendus */</p> <hr /> <div>Le projet ECOM-RICM 2015-2016 consiste à concevoir et développer une application de commerce électronique dans le cadre des unités d'enseignements Génie Logiciel, IHM et Projet ECOM gérer respectivement par Didier DONSEZ, Laurence NIGAY et Sybille CAFFIAU.<br /> <br /> ==Présentation du projet [[ECOM]]==<br /> <br /> Notre site de commerce électronique &quot;PIXEL-SHIRT&quot; permet la création de tee-shirt avec des modèles pixelisé personnalisé. Chaque client doit au préalablement créer un compte. Il pourra ensuite choisir entre une panoplie de Tee-shirt (la taille, le type, col en V, couleur, etc...). Deplus le client pourra importer un dessin à représenter sur le tee-shirt. Un outil de dessin pixélisé sera éventuellement mis en place sur le site. Le projet ECOM étant de courte durée nous décidons d'utiliser une méthodologie [[Scrum]] pour la conduite de ce projet. La partie IHM et la partie Système sont menées en parallèle pendant toute la durée du projet. Le projet se conclut par une soutenance finale pour chaque partie (IHM et système).<br /> <br /> ===SCRUM===<br /> Pour la partie conception de l'architecture de notre site nous avons décidé d'utiliser la méthode agile Scrum avec des sprints d'une durée de 1 semaine. En effet, cela nous permet d'avoir rapidement un feedback sur le travail effectué, et par conséquent d'augmenter notre réactivité face aux demandes du client. Voici le lien vers notre Waffle, qui permet de voir en temps réel l'avancement de notre projet : [https://waffle.io/Vivien-Michel/PIXEL-SHIRT]. Nous utilisons aussi Scrum pour la partie création du site. Ci dessous voici notre planning prévisionnel du projet avec les différentes tâches.<br /> <br /> [[File:planning_previsionnel.jpg|center|thumb|900px]]<br /> <br /> ===GIT===<br /> Nous utilisons Github un gestionnaire de version pour pouvoir interagir simultanément sur le projet PIXEL-SHIRT. Voici le lien de dêpot distant : [https://github.com/Vivien-Michel/PIXEL-SHIRT]<br /> <br /> ==Equipe==<br /> <br /> ===Enseignants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | DONSEZ Didier<br /> | didier.donsez@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | CAFFIAU Sybille <br /> | sybille.caffiau@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | NIGAY Laurence <br /> | laurence.nigay@imag.fr<br /> |- <br /> <br /> |}<br /> <br /> ===Etudiants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> !scope=&quot;col&quot;| Rôle<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | MICHEL Vivien<br /> | vivien.michel@e.ujf-grenoble.fr<br /> | Scrum Master<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | KLIPFFEL Tararaina<br /> | tararaina.klipffel@e.ujf-grenoble.fr<br /> | Chef de projet<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | TOUSSAINT Sebastien<br /> | sebastien.toussain@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | SAUSSAC Thibault<br /> | thibault.saussac@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | LONGFEI Jérôme<br /> | jérôme.longfei@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> |}<br /> <br /> =SRS=<br /> [fiche_SRS]<br /> Définitions des exigences logicielles<br /> <br /> =Gestion de projet=<br /> ==Initialisation du projet 08/09/2015==<br /> Définition du projet et des différents objectifs à atteindre. Création d'un site web permettant la création de Tee-Shirt avec des logos pixelisés. L'application offre la possibilité de créer des Tee-Shirt avec :<br /> * des modèles prédéfinis<br /> * des modèles prédéfinis modifiable<br /> * des créations de modèle.<br /> <br /> ==Création du questionnaire 15/09/2015==<br /> ===Questionnaire===<br /> [https://docs.google.com/forms/d/1rcJ5u16AZn9hkijGnRVUkNL3VhEI4zp9b5F17_58E7w/viewform Questionnaire ECOM]<br /> ===Analyse des données===<br /> ==== Cible ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Age des utilisateurs<br /> !scope=&quot;col&quot;| Nombre d'heure d'utilisation d'un ordinateur<br /> !scope=&quot;col&quot;| Nombre d'achat en ligne par mois<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:AgeConso.png|center|thumb|500px]]<br /> | [[File:HeureConso.png|center|thumb|500px]]<br /> | [[File:NbFoisConso.png|center|thumb|500px]]<br /> |-<br /> <br /> |}<br /> <br /> <br /> Notre cible est principalement des consommateurs entre 20 et 40. Les différents graphiques nous montrent qu’ils sont à l’aise avec un utilisateur car 93% d’entre eux passent entre 1h et plus sur un ordinateur. Concernant les achats en ligne ils ont déjà plusieurs fois utilisé ce moyen de consommation.<br /> <br /> Conclusion : nous avons à faire à des utilisateurs plus que novice dans l’utilisation des ordinateurs. Ayant déjà effectué des achats en ligne il faut que l’interface du site puis lors être familier, afin d’avoir des achats rapide. <br /> <br /> ==== Fonctionnalités attendus ====<br /> <br /> Quatre points sont primordiaux pour les utilisateurs :<br /> * Des paiements sécurisés<br /> * Rapidité des commandes (EUH livraison ou sur le site)<br /> * Les commentaires<br /> * L’affichage des promotions <br /> Pour répondre à la première demande nous avons l’intention d’utiliser HTTPS pour les transactions sur notre site et nous comptons aussi le mettre en évidence afin que les clients soient sécurisés. <br /> Pour le dernier point nous avons l’intention d’afficher les promotions sur la page d’accueil dès qu’ils seront disponibles. <br /> L’usage des commentaires est essentiel pour effectuer un achat. Alors il prévu que les utilisateurs puissent écrire des commentaires pour un produit et aussi que ce commentaire soit visible<br /> <br /> <br /> &lt; A venir &gt;<br /> <br /> ==Définir les pré-requis, les besoins et les contraintes 22/09/2015 &amp; 29/09/2015==<br /> ===Les pré-requis===<br /> 1) Qui est ce qui va m’utiliser ? Quand ? Pourquoi ? Dans quel environnement ? Comment résonne cet utilisateur ?<br /> Le site de E-commerce sera utilisé par des utilisateurs relativement jeune puisque la plupart des personnes intéressées ont entre 15 et 25 ans. Par tous type de personne, à la fois des étudiants, des bureaux étudiants pour des tee-shirt à l’image de leur école ou filière mais aussi des chefs d’entreprise voulant faire des tee-shirt publicitaire à l’effigie de leur entreprise, des clubs sportifs. Ce site web sera disponible tout le temps mais les principales fréquentation devrait être en fin de journée après avoir étudier la fréquentation sur les sites concurrents. Leurs principales vente se font tout au long de la journée du fait de l’accès à l’Internet sur leur lieu de travail cependant le pic des commande se site en fin de journée entre 18h30 et 21h. Les tee-shirt personnalisés pourront être commandés par des personnes voulant se démarquer avec un tee-shirt original. Cependant ces tee-shirt sont aussi très commandés par des personnes voulant faire des cadeaux d’anniversaire afin d’avoir une touche personnel dessus. Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire. <br /> ===Les besoins===<br /> 2) Quelles plateformes je peux utiliser pour communiquer avec un humain ?<br /> Les plate-formes pouvant être utilisés sont les couriels, les SMS, puisque la clientèle est jeune il serait intéressant de faire des offres promotionnel via Facebook et plus généralement les réseaux sociaux. (GSM, Ordinateurs, Smartphones)<br /> 3) Qu’est ce que j’ai besoin de connaître pour permettre à l’humain d’accomplir ses tâches ? Qu’est ce qu’un développeur peut m’apprendre ? Comment ?<br /> * Ses coordonnées bancaires.<br /> * Son adresse de livraison<br /> * Son nom, prénom.<br /> * Son adresse mail.<br /> * Son numéro de téléphone.<br /> ===Les contraintes===<br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des contraintes<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Type<br /> !scope=&quot;col&quot;| contraintes<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Utilisateurs<br /> | Les utilisateurs de notre site seront :<br /> * Les étudiants qui veulent un tee-shirt représentant leur filière ou école.<br /> * Les personnes qui veulent un tee-shirt individualisé.<br /> * Les entreprises qui veulent prendre un tee-shirt représentant leur culture d’entreprise.<br /> * Les groupes comme les clubs sportifs et les geeks.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | Environnement<br /> | Les clients vont utiliser le site de E-commerce sur les ordinateurs puisque c’est pratique à télécharger leur commandes vers un serveur.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Objectifs de l’utilisateur, tâches et cas d’utilisation<br /> | L’objectif de l’utilisateur est de faire une commande des tee-shirts individualisés.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Entrées/sorties possibles, plateformes<br /> | Entrées: Les images des tee-shirts, le nombre et les tailles des tee-shirts, les informations personnalisés (les coordonnées bancaires, l’adresse de livraison, le nom et prénom, l’adresse mail, le numéro de téléphone). Plateformes: Les navigateurs web sur les ordinateurs.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Analyse technologique (étude de librairies...) technologies web obligatoires<br /> | Utilisation de JavaScript et CSS pour réaliser des web pages, java pour réaliser la couche logique et JDBC pour la connexion à des bases de donneés<br /> |-<br /> <br /> |}<br /> <br /> <br /> ==Conception IHM 06/10/2015==<br /> ===Utilisateurs cible===<br /> Personnes comprises entre 18 et 40 ans. Les 18 – 25 car ils veulent suivre la mode du rétro. Et les 25 - 40 car cela leur rappel leur enfance avec les jeux pixelisés.<br /> ===Tâches : priorité de développement pour l’utilisateur===<br /> Product backlog des priorité de développement pour l'utilisateur en ce qui concerne L'IHM.<br /> <br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des tâches<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Tâche<br /> !scope=&quot;col&quot;| Sous tâches<br /> !scope=&quot;col&quot;| Priorité<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Gestion compte<br /> | <br /> * création/suppression du compte<br /> | (7)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Créer un modèle de Tee-shirt<br /> | <br /> * proposer un design<br /> * choix d’un modèle prédéfinit<br /> | 2<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Gestion du panier<br /> | <br /> * création d‘une session <br /> * ajouter/supprimer/modifier un article au panier <br /> * commander<br /> | (6)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Transaction bancaire<br /> |<br /> * accepter <br /> * refuser <br /> * payer<br /> | 3<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Visualiser le catalogue<br /> | <br /> * recherche article<br /> * visualiser par catégorie <br /> * IHM<br /> | 1<br /> |-<br /> <br /> !scope=&quot;row&quot;| 6<br /> | Gérer catalogue<br /> | <br /> * création BD<br /> | (4)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 7<br /> | Administrateur<br /> |<br /> * ajout d'un article au catalogue<br /> | (5)<br /> |-<br /> |}<br /> <br /> ===Contextes d'utilisation===<br /> Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire.<br /> <br /> ===User Case UML===<br /> [[File:Use_Case.png|center|thumb|600px]]<br /> <br /> ===Modèle de tâche===<br /> [[File:tache.jpg|center|thumb|1200px]]<br /> <br /> ===IHM===<br /> ====IHM abstraite====<br /> [[File:IHM_abstraite.png|center|thumb|900px]]<br /> <br /> ====Maquette IHM====<br /> [[File:maquette.jpg|center|thumb|600px]]<br /> <br /> =Références=</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=ECOM-RICM/PIXEL-SHIRT&diff=24575 2015-10-19T07:47:16Z

<p>Sebastien.Toussaint: /* Création du questionnaire 15/09/2015 */</p> <hr /> <div>Le projet ECOM-RICM 2015-2016 consiste à concevoir et développer une application de commerce électronique dans le cadre des unités d'enseignements Génie Logiciel, IHM et Projet ECOM gérer respectivement par Didier DONSEZ, Laurence NIGAY et Sybille CAFFIAU.<br /> <br /> ==Présentation du projet [[ECOM]]==<br /> <br /> Notre site de commerce électronique &quot;PIXEL-SHIRT&quot; permet la création de tee-shirt avec des modèles pixelisé personnalisé. Chaque client doit au préalablement créer un compte. Il pourra ensuite choisir entre une panoplie de Tee-shirt (la taille, le type, col en V, couleur, etc...). Deplus le client pourra importer un dessin à représenter sur le tee-shirt. Un outil de dessin pixélisé sera éventuellement mis en place sur le site. Le projet ECOM étant de courte durée nous décidons d'utiliser une méthodologie [[Scrum]] pour la conduite de ce projet. La partie IHM et la partie Système sont menées en parallèle pendant toute la durée du projet. Le projet se conclut par une soutenance finale pour chaque partie (IHM et système).<br /> <br /> ===SCRUM===<br /> Pour la partie conception de l'architecture de notre site nous avons décidé d'utiliser la méthode agile Scrum avec des sprints d'une durée de 1 semaine. En effet, cela nous permet d'avoir rapidement un feedback sur le travail effectué, et par conséquent d'augmenter notre réactivité face aux demandes du client. Voici le lien vers notre Waffle, qui permet de voir en temps réel l'avancement de notre projet : [https://waffle.io/Vivien-Michel/PIXEL-SHIRT]. Nous utilisons aussi Scrum pour la partie création du site. Ci dessous voici notre planning prévisionnel du projet avec les différentes tâches.<br /> <br /> [[File:planning_previsionnel.jpg|center|thumb|900px]]<br /> <br /> ===GIT===<br /> Nous utilisons Github un gestionnaire de version pour pouvoir interagir simultanément sur le projet PIXEL-SHIRT. Voici le lien de dêpot distant : [https://github.com/Vivien-Michel/PIXEL-SHIRT]<br /> <br /> ==Equipe==<br /> <br /> ===Enseignants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | DONSEZ Didier<br /> | didier.donsez@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | CAFFIAU Sybille <br /> | sybille.caffiau@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | NIGAY Laurence <br /> | laurence.nigay@imag.fr<br /> |- <br /> <br /> |}<br /> <br /> ===Etudiants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> !scope=&quot;col&quot;| Rôle<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | MICHEL Vivien<br /> | vivien.michel@e.ujf-grenoble.fr<br /> | Scrum Master<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | KLIPFFEL Tararaina<br /> | tararaina.klipffel@e.ujf-grenoble.fr<br /> | Chef de projet<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | TOUSSAINT Sebastien<br /> | sebastien.toussain@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | SAUSSAC Thibault<br /> | thibault.saussac@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | LONGFEI Jérôme<br /> | jérôme.longfei@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> |}<br /> <br /> =SRS=<br /> [fiche_SRS]<br /> Définitions des exigences logicielles<br /> <br /> =Gestion de projet=<br /> ==Initialisation du projet 08/09/2015==<br /> Définition du projet et des différents objectifs à atteindre. Création d'un site web permettant la création de Tee-Shirt avec des logos pixelisés. L'application offre la possibilité de créer des Tee-Shirt avec :<br /> * des modèles prédéfinis<br /> * des modèles prédéfinis modifiable<br /> * des créations de modèle.<br /> <br /> ==Création du questionnaire 15/09/2015==<br /> ===Questionnaire===<br /> [https://docs.google.com/forms/d/1rcJ5u16AZn9hkijGnRVUkNL3VhEI4zp9b5F17_58E7w/viewform Questionnaire ECOM]<br /> ===Analyse des données===<br /> ==== Cible ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Age des utilisateurs<br /> !scope=&quot;col&quot;| Nombre d'heure d'utilisation d'un ordinateur<br /> !scope=&quot;col&quot;| Nombre d'achat en ligne par mois<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:AgeConso.png|center|thumb|500px]]<br /> | [[File:HeureConso.png|center|thumb|500px]]<br /> | [[File:NbFoisConso.png|center|thumb|500px]]<br /> |-<br /> <br /> |}<br /> <br /> <br /> Notre cible est principalement des consommateurs entre 20 et 40. Les différents graphiques nous montrent qu’ils sont à l’aise avec un utilisateur car 93% d’entre eux passent entre 1h et plus sur un ordinateur. Concernant les achats en ligne ils ont déjà plusieurs fois utilisé ce moyen de consommation.<br /> <br /> Conclusion : nous avons à faire à des utilisateurs plus que novice dans l’utilisation des ordinateurs. Ayant déjà effectué des achats en ligne il faut que l’interface du site puis lors être familier, afin d’avoir des achats rapide. <br /> <br /> ==== Fonctionnalités attendus ====<br /> <br /> Quatre points sont primordiaux pour les utilisateurs :<br /> - Des paiements sécurisés<br /> - Rapidité des commandes (EUH livraison ou sur le site)<br /> - Les commentaires<br /> - L’affichage des promotions <br /> Pour répondre à la première demande nous avons l’intention d’utiliser HTTPS pour les transactions sur notre site et nous comptons aussi le mettre en évidence afin que les clients soient sécurisés. <br /> Pour le dernier point nous avons l’intention d’afficher les promotions sur la page d’accueil dès qu’ils seront disponibles. <br /> L’usage des commentaires est essentiel pour effectuer un achat. Alors il prévu que les utilisateurs puissent écrire des commentaires pour un produit et aussi que ce commentaire soit visible<br /> <br /> <br /> &lt; A venir &gt;<br /> <br /> ==Définir les pré-requis, les besoins et les contraintes 22/09/2015 &amp; 29/09/2015==<br /> ===Les pré-requis===<br /> 1) Qui est ce qui va m’utiliser ? Quand ? Pourquoi ? Dans quel environnement ? Comment résonne cet utilisateur ?<br /> Le site de E-commerce sera utilisé par des utilisateurs relativement jeune puisque la plupart des personnes intéressées ont entre 15 et 25 ans. Par tous type de personne, à la fois des étudiants, des bureaux étudiants pour des tee-shirt à l’image de leur école ou filière mais aussi des chefs d’entreprise voulant faire des tee-shirt publicitaire à l’effigie de leur entreprise, des clubs sportifs. Ce site web sera disponible tout le temps mais les principales fréquentation devrait être en fin de journée après avoir étudier la fréquentation sur les sites concurrents. Leurs principales vente se font tout au long de la journée du fait de l’accès à l’Internet sur leur lieu de travail cependant le pic des commande se site en fin de journée entre 18h30 et 21h. Les tee-shirt personnalisés pourront être commandés par des personnes voulant se démarquer avec un tee-shirt original. Cependant ces tee-shirt sont aussi très commandés par des personnes voulant faire des cadeaux d’anniversaire afin d’avoir une touche personnel dessus. Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire. <br /> ===Les besoins===<br /> 2) Quelles plateformes je peux utiliser pour communiquer avec un humain ?<br /> Les plate-formes pouvant être utilisés sont les couriels, les SMS, puisque la clientèle est jeune il serait intéressant de faire des offres promotionnel via Facebook et plus généralement les réseaux sociaux. (GSM, Ordinateurs, Smartphones)<br /> 3) Qu’est ce que j’ai besoin de connaître pour permettre à l’humain d’accomplir ses tâches ? Qu’est ce qu’un développeur peut m’apprendre ? Comment ?<br /> * Ses coordonnées bancaires.<br /> * Son adresse de livraison<br /> * Son nom, prénom.<br /> * Son adresse mail.<br /> * Son numéro de téléphone.<br /> ===Les contraintes===<br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des contraintes<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Type<br /> !scope=&quot;col&quot;| contraintes<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Utilisateurs<br /> | Les utilisateurs de notre site seront :<br /> * Les étudiants qui veulent un tee-shirt représentant leur filière ou école.<br /> * Les personnes qui veulent un tee-shirt individualisé.<br /> * Les entreprises qui veulent prendre un tee-shirt représentant leur culture d’entreprise.<br /> * Les groupes comme les clubs sportifs et les geeks.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | Environnement<br /> | Les clients vont utiliser le site de E-commerce sur les ordinateurs puisque c’est pratique à télécharger leur commandes vers un serveur.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Objectifs de l’utilisateur, tâches et cas d’utilisation<br /> | L’objectif de l’utilisateur est de faire une commande des tee-shirts individualisés.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Entrées/sorties possibles, plateformes<br /> | Entrées: Les images des tee-shirts, le nombre et les tailles des tee-shirts, les informations personnalisés (les coordonnées bancaires, l’adresse de livraison, le nom et prénom, l’adresse mail, le numéro de téléphone). Plateformes: Les navigateurs web sur les ordinateurs.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Analyse technologique (étude de librairies...) technologies web obligatoires<br /> | Utilisation de JavaScript et CSS pour réaliser des web pages, java pour réaliser la couche logique et JDBC pour la connexion à des bases de donneés<br /> |-<br /> <br /> |}<br /> <br /> <br /> ==Conception IHM 06/10/2015==<br /> ===Utilisateurs cible===<br /> Personnes comprises entre 18 et 40 ans. Les 18 – 25 car ils veulent suivre la mode du rétro. Et les 25 - 40 car cela leur rappel leur enfance avec les jeux pixelisés.<br /> ===Tâches : priorité de développement pour l’utilisateur===<br /> Product backlog des priorité de développement pour l'utilisateur en ce qui concerne L'IHM.<br /> <br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des tâches<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Tâche<br /> !scope=&quot;col&quot;| Sous tâches<br /> !scope=&quot;col&quot;| Priorité<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Gestion compte<br /> | <br /> * création/suppression du compte<br /> | (7)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Créer un modèle de Tee-shirt<br /> | <br /> * proposer un design<br /> * choix d’un modèle prédéfinit<br /> | 2<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Gestion du panier<br /> | <br /> * création d‘une session <br /> * ajouter/supprimer/modifier un article au panier <br /> * commander<br /> | (6)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Transaction bancaire<br /> |<br /> * accepter <br /> * refuser <br /> * payer<br /> | 3<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Visualiser le catalogue<br /> | <br /> * recherche article<br /> * visualiser par catégorie <br /> * IHM<br /> | 1<br /> |-<br /> <br /> !scope=&quot;row&quot;| 6<br /> | Gérer catalogue<br /> | <br /> * création BD<br /> | (4)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 7<br /> | Administrateur<br /> |<br /> * ajout d'un article au catalogue<br /> | (5)<br /> |-<br /> |}<br /> <br /> ===Contextes d'utilisation===<br /> Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire.<br /> <br /> ===User Case UML===<br /> [[File:Use_Case.png|center|thumb|600px]]<br /> <br /> ===Modèle de tâche===<br /> [[File:tache.jpg|center|thumb|1200px]]<br /> <br /> ===IHM===<br /> ====IHM abstraite====<br /> [[File:IHM_abstraite.png|center|thumb|900px]]<br /> <br /> ====Maquette IHM====<br /> [[File:maquette.jpg|center|thumb|600px]]<br /> <br /> =Références=</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=ECOM-RICM/PIXEL-SHIRT&diff=24574 2015-10-19T07:42:33Z

<p>Sebastien.Toussaint: </p> <hr /> <div>Le projet ECOM-RICM 2015-2016 consiste à concevoir et développer une application de commerce électronique dans le cadre des unités d'enseignements Génie Logiciel, IHM et Projet ECOM gérer respectivement par Didier DONSEZ, Laurence NIGAY et Sybille CAFFIAU.<br /> <br /> ==Présentation du projet [[ECOM]]==<br /> <br /> Notre site de commerce électronique &quot;PIXEL-SHIRT&quot; permet la création de tee-shirt avec des modèles pixelisé personnalisé. Chaque client doit au préalablement créer un compte. Il pourra ensuite choisir entre une panoplie de Tee-shirt (la taille, le type, col en V, couleur, etc...). Deplus le client pourra importer un dessin à représenter sur le tee-shirt. Un outil de dessin pixélisé sera éventuellement mis en place sur le site. Le projet ECOM étant de courte durée nous décidons d'utiliser une méthodologie [[Scrum]] pour la conduite de ce projet. La partie IHM et la partie Système sont menées en parallèle pendant toute la durée du projet. Le projet se conclut par une soutenance finale pour chaque partie (IHM et système).<br /> <br /> ===SCRUM===<br /> Pour la partie conception de l'architecture de notre site nous avons décidé d'utiliser la méthode agile Scrum avec des sprints d'une durée de 1 semaine. En effet, cela nous permet d'avoir rapidement un feedback sur le travail effectué, et par conséquent d'augmenter notre réactivité face aux demandes du client. Voici le lien vers notre Waffle, qui permet de voir en temps réel l'avancement de notre projet : [https://waffle.io/Vivien-Michel/PIXEL-SHIRT]. Nous utilisons aussi Scrum pour la partie création du site. Ci dessous voici notre planning prévisionnel du projet avec les différentes tâches.<br /> <br /> [[File:planning_previsionnel.jpg|center|thumb|900px]]<br /> <br /> ===GIT===<br /> Nous utilisons Github un gestionnaire de version pour pouvoir interagir simultanément sur le projet PIXEL-SHIRT. Voici le lien de dêpot distant : [https://github.com/Vivien-Michel/PIXEL-SHIRT]<br /> <br /> ==Equipe==<br /> <br /> ===Enseignants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | DONSEZ Didier<br /> | didier.donsez@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | CAFFIAU Sybille <br /> | sybille.caffiau@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | NIGAY Laurence <br /> | laurence.nigay@imag.fr<br /> |- <br /> <br /> |}<br /> <br /> ===Etudiants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> !scope=&quot;col&quot;| Rôle<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | MICHEL Vivien<br /> | vivien.michel@e.ujf-grenoble.fr<br /> | Scrum Master<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | KLIPFFEL Tararaina<br /> | tararaina.klipffel@e.ujf-grenoble.fr<br /> | Chef de projet<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | TOUSSAINT Sebastien<br /> | sebastien.toussain@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | SAUSSAC Thibault<br /> | thibault.saussac@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | LONGFEI Jérôme<br /> | jérôme.longfei@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> |}<br /> <br /> =SRS=<br /> [fiche_SRS]<br /> Définitions des exigences logicielles<br /> <br /> =Gestion de projet=<br /> ==Initialisation du projet 08/09/2015==<br /> Définition du projet et des différents objectifs à atteindre. Création d'un site web permettant la création de Tee-Shirt avec des logos pixelisés. L'application offre la possibilité de créer des Tee-Shirt avec :<br /> * des modèles prédéfinis<br /> * des modèles prédéfinis modifiable<br /> * des créations de modèle.<br /> <br /> ==Création du questionnaire 15/09/2015==<br /> ===Questionnaire===<br /> [https://docs.google.com/forms/d/1rcJ5u16AZn9hkijGnRVUkNL3VhEI4zp9b5F17_58E7w/viewform Questionnaire ECOM]<br /> ===Analyse des données===<br /> ==== Cible ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Age des utilisateurs<br /> !scope=&quot;col&quot;| Nombre d'heure d'utilisation d'un ordinateur<br /> !scope=&quot;col&quot;| Nombre d'achat en ligne par mois<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:AgeConso.png|center|thumb|500px]]<br /> | [[File:HeureConso.png|center|thumb|500px]]<br /> | [[File:NbFoisConso.png|center|thumb|500px]]<br /> |-<br /> <br /> |}<br /> <br /> <br /> Notre cible est principalement des consommateurs entre 20 et 40. Les différents graphiques nous montrent qu’ils sont à l’aise avec un utilisateur car 93% d’entre eux passent entre 1h et plus sur un ordinateur. Concernant les achats en ligne ils ont déjà plusieurs fois utilisé ce moyen de consommation.<br /> <br /> Conclusion : nous avons à faire à des utilisateurs plus que novice dans l’utilisation des ordinateurs. Ayant déjà effectué des achats en ligne il faut que l’interface du site puis lors être familier, afin d’avoir des achats rapide. <br /> <br /> &lt; A venir &gt;<br /> <br /> ==Définir les pré-requis, les besoins et les contraintes 22/09/2015 &amp; 29/09/2015==<br /> ===Les pré-requis===<br /> 1) Qui est ce qui va m’utiliser ? Quand ? Pourquoi ? Dans quel environnement ? Comment résonne cet utilisateur ?<br /> Le site de E-commerce sera utilisé par des utilisateurs relativement jeune puisque la plupart des personnes intéressées ont entre 15 et 25 ans. Par tous type de personne, à la fois des étudiants, des bureaux étudiants pour des tee-shirt à l’image de leur école ou filière mais aussi des chefs d’entreprise voulant faire des tee-shirt publicitaire à l’effigie de leur entreprise, des clubs sportifs. Ce site web sera disponible tout le temps mais les principales fréquentation devrait être en fin de journée après avoir étudier la fréquentation sur les sites concurrents. Leurs principales vente se font tout au long de la journée du fait de l’accès à l’Internet sur leur lieu de travail cependant le pic des commande se site en fin de journée entre 18h30 et 21h. Les tee-shirt personnalisés pourront être commandés par des personnes voulant se démarquer avec un tee-shirt original. Cependant ces tee-shirt sont aussi très commandés par des personnes voulant faire des cadeaux d’anniversaire afin d’avoir une touche personnel dessus. Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire. <br /> ===Les besoins===<br /> 2) Quelles plateformes je peux utiliser pour communiquer avec un humain ?<br /> Les plate-formes pouvant être utilisés sont les couriels, les SMS, puisque la clientèle est jeune il serait intéressant de faire des offres promotionnel via Facebook et plus généralement les réseaux sociaux. (GSM, Ordinateurs, Smartphones)<br /> 3) Qu’est ce que j’ai besoin de connaître pour permettre à l’humain d’accomplir ses tâches ? Qu’est ce qu’un développeur peut m’apprendre ? Comment ?<br /> * Ses coordonnées bancaires.<br /> * Son adresse de livraison<br /> * Son nom, prénom.<br /> * Son adresse mail.<br /> * Son numéro de téléphone.<br /> ===Les contraintes===<br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des contraintes<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Type<br /> !scope=&quot;col&quot;| contraintes<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Utilisateurs<br /> | Les utilisateurs de notre site seront :<br /> * Les étudiants qui veulent un tee-shirt représentant leur filière ou école.<br /> * Les personnes qui veulent un tee-shirt individualisé.<br /> * Les entreprises qui veulent prendre un tee-shirt représentant leur culture d’entreprise.<br /> * Les groupes comme les clubs sportifs et les geeks.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | Environnement<br /> | Les clients vont utiliser le site de E-commerce sur les ordinateurs puisque c’est pratique à télécharger leur commandes vers un serveur.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Objectifs de l’utilisateur, tâches et cas d’utilisation<br /> | L’objectif de l’utilisateur est de faire une commande des tee-shirts individualisés.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Entrées/sorties possibles, plateformes<br /> | Entrées: Les images des tee-shirts, le nombre et les tailles des tee-shirts, les informations personnalisés (les coordonnées bancaires, l’adresse de livraison, le nom et prénom, l’adresse mail, le numéro de téléphone). Plateformes: Les navigateurs web sur les ordinateurs.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Analyse technologique (étude de librairies...) technologies web obligatoires<br /> | Utilisation de JavaScript et CSS pour réaliser des web pages, java pour réaliser la couche logique et JDBC pour la connexion à des bases de donneés<br /> |-<br /> <br /> |}<br /> <br /> <br /> ==Conception IHM 06/10/2015==<br /> ===Utilisateurs cible===<br /> Personnes comprises entre 18 et 40 ans. Les 18 – 25 car ils veulent suivre la mode du rétro. Et les 25 - 40 car cela leur rappel leur enfance avec les jeux pixelisés.<br /> ===Tâches : priorité de développement pour l’utilisateur===<br /> Product backlog des priorité de développement pour l'utilisateur en ce qui concerne L'IHM.<br /> <br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des tâches<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Tâche<br /> !scope=&quot;col&quot;| Sous tâches<br /> !scope=&quot;col&quot;| Priorité<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Gestion compte<br /> | <br /> * création/suppression du compte<br /> | (7)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Créer un modèle de Tee-shirt<br /> | <br /> * proposer un design<br /> * choix d’un modèle prédéfinit<br /> | 2<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Gestion du panier<br /> | <br /> * création d‘une session <br /> * ajouter/supprimer/modifier un article au panier <br /> * commander<br /> | (6)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Transaction bancaire<br /> |<br /> * accepter <br /> * refuser <br /> * payer<br /> | 3<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Visualiser le catalogue<br /> | <br /> * recherche article<br /> * visualiser par catégorie <br /> * IHM<br /> | 1<br /> |-<br /> <br /> !scope=&quot;row&quot;| 6<br /> | Gérer catalogue<br /> | <br /> * création BD<br /> | (4)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 7<br /> | Administrateur<br /> |<br /> * ajout d'un article au catalogue<br /> | (5)<br /> |-<br /> |}<br /> <br /> ===Contextes d'utilisation===<br /> Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire.<br /> <br /> ===User Case UML===<br /> [[File:Use_Case.png|center|thumb|600px]]<br /> <br /> ===Modèle de tâche===<br /> [[File:tache.jpg|center|thumb|1200px]]<br /> <br /> ===IHM===<br /> ====IHM abstraite====<br /> [[File:IHM_abstraite.png|center|thumb|900px]]<br /> <br /> ====Maquette IHM====<br /> [[File:maquette.jpg|center|thumb|600px]]<br /> <br /> =Références=</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=File:NbFoisConso.png&diff=24573 2015-10-19T07:41:36Z

<p>Sebastien.Toussaint: </p> <hr /> <div></div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=File:HeureConso.png&diff=24572 2015-10-19T07:41:17Z

<p>Sebastien.Toussaint: </p> <hr /> <div></div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=File:AgeConso.png&diff=24571 2015-10-19T07:40:51Z

<p>Sebastien.Toussaint: </p> <hr /> <div></div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=ECOM-RICM/PIXEL-SHIRT&diff=24570 2015-10-19T07:40:35Z

<p>Sebastien.Toussaint: /* Cible */</p> <hr /> <div>Le projet ECOM-RICM 2015-2016 consiste à concevoir et développer une application de commerce électronique dans le cadre des unités d'enseignements Génie Logiciel, IHM et Projet ECOM gérer respectivement par Didier DONSEZ, Laurence NIGAY et Sybille CAFFIAU.<br /> <br /> ==Présentation du projet [[ECOM]]==<br /> <br /> Notre site de commerce électronique &quot;PIXEL-SHIRT&quot; permet la création de tee-shirt avec des modèles pixelisé personnalisé. Chaque client doit au préalablement créer un compte. Il pourra ensuite choisir entre une panoplie de Tee-shirt (la taille, le type, col en V, couleur, etc...). Deplus le client pourra importer un dessin à représenter sur le tee-shirt. Un outil de dessin pixélisé sera éventuellement mis en place sur le site. Le projet ECOM étant de courte durée nous décidons d'utiliser une méthodologie [[Scrum]] pour la conduite de ce projet. La partie IHM et la partie Système sont menées en parallèle pendant toute la durée du projet. Le projet se conclut par une soutenance finale pour chaque partie (IHM et système).<br /> <br /> ===SCRUM===<br /> Pour la partie conception de l'architecture de notre site nous avons décidé d'utiliser la méthode agile Scrum avec des sprints d'une durée de 1 semaine. En effet, cela nous permet d'avoir rapidement un feedback sur le travail effectué, et par conséquent d'augmenter notre réactivité face aux demandes du client. Voici le lien vers notre Waffle, qui permet de voir en temps réel l'avancement de notre projet : [https://waffle.io/Vivien-Michel/PIXEL-SHIRT]. Nous utilisons aussi Scrum pour la partie création du site. Ci dessous voici notre planning prévisionnel du projet avec les différentes tâches.<br /> <br /> [[File:planning_previsionnel.jpg|center|thumb|900px]]<br /> <br /> ===GIT===<br /> Nous utilisons Github un gestionnaire de version pour pouvoir interagir simultanément sur le projet PIXEL-SHIRT. Voici le lien de dêpot distant : [https://github.com/Vivien-Michel/PIXEL-SHIRT]<br /> <br /> ==Equipe==<br /> <br /> ===Enseignants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | DONSEZ Didier<br /> | didier.donsez@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | CAFFIAU Sybille <br /> | sybille.caffiau@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | NIGAY Laurence <br /> | laurence.nigay@imag.fr<br /> |- <br /> <br /> |}<br /> <br /> ===Etudiants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> !scope=&quot;col&quot;| Rôle<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | MICHEL Vivien<br /> | vivien.michel@e.ujf-grenoble.fr<br /> | Scrum Master<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | KLIPFFEL Tararaina<br /> | tararaina.klipffel@e.ujf-grenoble.fr<br /> | Chef de projet<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | TOUSSAINT Sebastien<br /> | sebastien.toussain@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | SAUSSAC Thibault<br /> | thibault.saussac@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | LONGFEI Jérôme<br /> | jérôme.longfei@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> |}<br /> <br /> =SRS=<br /> [fiche_SRS]<br /> Définitions des exigences logicielles<br /> <br /> =Gestion de projet=<br /> ==Initialisation du projet 08/09/2015==<br /> Définition du projet et des différents objectifs à atteindre. Création d'un site web permettant la création de Tee-Shirt avec des logos pixelisés. L'application offre la possibilité de créer des Tee-Shirt avec :<br /> * des modèles prédéfinis<br /> * des modèles prédéfinis modifiable<br /> * des créations de modèle.<br /> <br /> ==Création du questionnaire 15/09/2015==<br /> ===Questionnaire===<br /> [https://docs.google.com/forms/d/1rcJ5u16AZn9hkijGnRVUkNL3VhEI4zp9b5F17_58E7w/viewform Questionnaire ECOM]<br /> ===Analyse des données===<br /> ==== Cible ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Age des utilisateurs<br /> !scope=&quot;col&quot;| Nombre d'heure d'utilisation d'un ordinateur<br /> !scope=&quot;col&quot;| Nombre d'achat en ligne par mois<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:AgeConso.png|center|thumb|900px]]<br /> | [[File:HeureConso.png|center|thumb|900px]]<br /> | [[File:NbFoisConso.png|center|thumb|900px]]<br /> |-<br /> <br /> |}<br /> <br /> <br /> Notre cible est principalement des consommateurs entre 20 et 40. Les différents graphiques nous montrent qu’ils sont à l’aise avec un utilisateur car 93% d’entre eux passent entre 1h et plus sur un ordinateur. Concernant les achats en ligne ils ont déjà plusieurs fois utilisé ce moyen de consommation.<br /> <br /> Conclusion : nous avons à faire à des utilisateurs plus que novice dans l’utilisation des ordinateurs. Ayant déjà effectué des achats en ligne il faut que l’interface du site puis lors être familier, afin d’avoir des achats rapide. <br /> <br /> &lt; A venir &gt;<br /> <br /> ==Définir les pré-requis, les besoins et les contraintes 22/09/2015 &amp; 29/09/2015==<br /> ===Les pré-requis===<br /> 1) Qui est ce qui va m’utiliser ? Quand ? Pourquoi ? Dans quel environnement ? Comment résonne cet utilisateur ?<br /> Le site de E-commerce sera utilisé par des utilisateurs relativement jeune puisque la plupart des personnes intéressées ont entre 15 et 25 ans. Par tous type de personne, à la fois des étudiants, des bureaux étudiants pour des tee-shirt à l’image de leur école ou filière mais aussi des chefs d’entreprise voulant faire des tee-shirt publicitaire à l’effigie de leur entreprise, des clubs sportifs. Ce site web sera disponible tout le temps mais les principales fréquentation devrait être en fin de journée après avoir étudier la fréquentation sur les sites concurrents. Leurs principales vente se font tout au long de la journée du fait de l’accès à l’Internet sur leur lieu de travail cependant le pic des commande se site en fin de journée entre 18h30 et 21h. Les tee-shirt personnalisés pourront être commandés par des personnes voulant se démarquer avec un tee-shirt original. Cependant ces tee-shirt sont aussi très commandés par des personnes voulant faire des cadeaux d’anniversaire afin d’avoir une touche personnel dessus. Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire. <br /> ===Les besoins===<br /> 2) Quelles plateformes je peux utiliser pour communiquer avec un humain ?<br /> Les plate-formes pouvant être utilisés sont les couriels, les SMS, puisque la clientèle est jeune il serait intéressant de faire des offres promotionnel via Facebook et plus généralement les réseaux sociaux. (GSM, Ordinateurs, Smartphones)<br /> 3) Qu’est ce que j’ai besoin de connaître pour permettre à l’humain d’accomplir ses tâches ? Qu’est ce qu’un développeur peut m’apprendre ? Comment ?<br /> * Ses coordonnées bancaires.<br /> * Son adresse de livraison<br /> * Son nom, prénom.<br /> * Son adresse mail.<br /> * Son numéro de téléphone.<br /> ===Les contraintes===<br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des contraintes<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Type<br /> !scope=&quot;col&quot;| contraintes<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Utilisateurs<br /> | Les utilisateurs de notre site seront :<br /> * Les étudiants qui veulent un tee-shirt représentant leur filière ou école.<br /> * Les personnes qui veulent un tee-shirt individualisé.<br /> * Les entreprises qui veulent prendre un tee-shirt représentant leur culture d’entreprise.<br /> * Les groupes comme les clubs sportifs et les geeks.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | Environnement<br /> | Les clients vont utiliser le site de E-commerce sur les ordinateurs puisque c’est pratique à télécharger leur commandes vers un serveur.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Objectifs de l’utilisateur, tâches et cas d’utilisation<br /> | L’objectif de l’utilisateur est de faire une commande des tee-shirts individualisés.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Entrées/sorties possibles, plateformes<br /> | Entrées: Les images des tee-shirts, le nombre et les tailles des tee-shirts, les informations personnalisés (les coordonnées bancaires, l’adresse de livraison, le nom et prénom, l’adresse mail, le numéro de téléphone). Plateformes: Les navigateurs web sur les ordinateurs.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Analyse technologique (étude de librairies...) technologies web obligatoires<br /> | Utilisation de JavaScript et CSS pour réaliser des web pages, java pour réaliser la couche logique et JDBC pour la connexion à des bases de donneés<br /> |-<br /> <br /> |}<br /> <br /> <br /> ==Conception IHM 06/10/2015==<br /> ===Utilisateurs cible===<br /> Personnes comprises entre 18 et 40 ans. Les 18 – 25 car ils veulent suivre la mode du rétro. Et les 25 - 40 car cela leur rappel leur enfance avec les jeux pixelisés.<br /> ===Tâches : priorité de développement pour l’utilisateur===<br /> Product backlog des priorité de développement pour l'utilisateur en ce qui concerne L'IHM.<br /> <br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des tâches<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Tâche<br /> !scope=&quot;col&quot;| Sous tâches<br /> !scope=&quot;col&quot;| Priorité<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Gestion compte<br /> | <br /> * création/suppression du compte<br /> | (7)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Créer un modèle de Tee-shirt<br /> | <br /> * proposer un design<br /> * choix d’un modèle prédéfinit<br /> | 2<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Gestion du panier<br /> | <br /> * création d‘une session <br /> * ajouter/supprimer/modifier un article au panier <br /> * commander<br /> | (6)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Transaction bancaire<br /> |<br /> * accepter <br /> * refuser <br /> * payer<br /> | 3<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Visualiser le catalogue<br /> | <br /> * recherche article<br /> * visualiser par catégorie <br /> * IHM<br /> | 1<br /> |-<br /> <br /> !scope=&quot;row&quot;| 6<br /> | Gérer catalogue<br /> | <br /> * création BD<br /> | (4)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 7<br /> | Administrateur<br /> |<br /> * ajout d'un article au catalogue<br /> | (5)<br /> |-<br /> |}<br /> <br /> ===Contextes d'utilisation===<br /> Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire.<br /> <br /> ===User Case UML===<br /> [[File:Use_Case.png|center|thumb|600px]]<br /> <br /> ===Modèle de tâche===<br /> [[File:tache.jpg|center|thumb|1200px]]<br /> <br /> ===IHM===<br /> ====IHM abstraite====<br /> [[File:IHM_abstraite.png|center|thumb|900px]]<br /> <br /> ====Maquette IHM====<br /> [[File:maquette.jpg|center|thumb|600px]]<br /> <br /> =Références=</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=ECOM-RICM/PIXEL-SHIRT&diff=24568 2015-10-19T07:39:27Z

<p>Sebastien.Toussaint: </p> <hr /> <div>Le projet ECOM-RICM 2015-2016 consiste à concevoir et développer une application de commerce électronique dans le cadre des unités d'enseignements Génie Logiciel, IHM et Projet ECOM gérer respectivement par Didier DONSEZ, Laurence NIGAY et Sybille CAFFIAU.<br /> <br /> ==Présentation du projet [[ECOM]]==<br /> <br /> Notre site de commerce électronique &quot;PIXEL-SHIRT&quot; permet la création de tee-shirt avec des modèles pixelisé personnalisé. Chaque client doit au préalablement créer un compte. Il pourra ensuite choisir entre une panoplie de Tee-shirt (la taille, le type, col en V, couleur, etc...). Deplus le client pourra importer un dessin à représenter sur le tee-shirt. Un outil de dessin pixélisé sera éventuellement mis en place sur le site. Le projet ECOM étant de courte durée nous décidons d'utiliser une méthodologie [[Scrum]] pour la conduite de ce projet. La partie IHM et la partie Système sont menées en parallèle pendant toute la durée du projet. Le projet se conclut par une soutenance finale pour chaque partie (IHM et système).<br /> <br /> ===SCRUM===<br /> Pour la partie conception de l'architecture de notre site nous avons décidé d'utiliser la méthode agile Scrum avec des sprints d'une durée de 1 semaine. En effet, cela nous permet d'avoir rapidement un feedback sur le travail effectué, et par conséquent d'augmenter notre réactivité face aux demandes du client. Voici le lien vers notre Waffle, qui permet de voir en temps réel l'avancement de notre projet : [https://waffle.io/Vivien-Michel/PIXEL-SHIRT]. Nous utilisons aussi Scrum pour la partie création du site. Ci dessous voici notre planning prévisionnel du projet avec les différentes tâches.<br /> <br /> [[File:planning_previsionnel.jpg|center|thumb|900px]]<br /> <br /> ===GIT===<br /> Nous utilisons Github un gestionnaire de version pour pouvoir interagir simultanément sur le projet PIXEL-SHIRT. Voici le lien de dêpot distant : [https://github.com/Vivien-Michel/PIXEL-SHIRT]<br /> <br /> ==Equipe==<br /> <br /> ===Enseignants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | DONSEZ Didier<br /> | didier.donsez@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | CAFFIAU Sybille <br /> | sybille.caffiau@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | NIGAY Laurence <br /> | laurence.nigay@imag.fr<br /> |- <br /> <br /> |}<br /> <br /> ===Etudiants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> !scope=&quot;col&quot;| Rôle<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | MICHEL Vivien<br /> | vivien.michel@e.ujf-grenoble.fr<br /> | Scrum Master<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | KLIPFFEL Tararaina<br /> | tararaina.klipffel@e.ujf-grenoble.fr<br /> | Chef de projet<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | TOUSSAINT Sebastien<br /> | sebastien.toussain@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | SAUSSAC Thibault<br /> | thibault.saussac@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | LONGFEI Jérôme<br /> | jérôme.longfei@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> |}<br /> <br /> =SRS=<br /> [fiche_SRS]<br /> Définitions des exigences logicielles<br /> <br /> =Gestion de projet=<br /> ==Initialisation du projet 08/09/2015==<br /> Définition du projet et des différents objectifs à atteindre. Création d'un site web permettant la création de Tee-Shirt avec des logos pixelisés. L'application offre la possibilité de créer des Tee-Shirt avec :<br /> * des modèles prédéfinis<br /> * des modèles prédéfinis modifiable<br /> * des créations de modèle.<br /> <br /> ==Création du questionnaire 15/09/2015==<br /> ===Questionnaire===<br /> [https://docs.google.com/forms/d/1rcJ5u16AZn9hkijGnRVUkNL3VhEI4zp9b5F17_58E7w/viewform Questionnaire ECOM]<br /> ===Analyse des données===<br /> ==== Cible ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Age des utilisateurs<br /> !scope=&quot;col&quot;| Nombre d'heure d'utilisation d'un ordinateur<br /> !scope=&quot;col&quot;| Nombre d'achat en ligne par mois<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | [[File:AgeConso.jpg|center|thumb|900px]]<br /> | [[File:HeureConso.jpg|center|thumb|900px]]<br /> | [[File:NbFoisConso.jpg|center|thumb|900px]]<br /> |-<br /> <br /> |}<br /> <br /> <br /> Notre cible est principalement des consommateurs entre 20 et 40. Les différents graphiques nous montrent qu’ils sont à l’aise avec un utilisateur car 93% d’entre eux passent entre 1h et plus sur un ordinateur. Concernant les achats en ligne ils ont déjà plusieurs fois utilisé ce moyen de consommation.<br /> <br /> Conclusion : nous avons à faire à des utilisateurs plus que novice dans l’utilisation des ordinateurs. Ayant déjà effectué des achats en ligne il faut que l’interface du site puis lors être familier, afin d’avoir des achats rapide. <br /> <br /> &lt; A venir &gt;<br /> <br /> ==Définir les pré-requis, les besoins et les contraintes 22/09/2015 &amp; 29/09/2015==<br /> ===Les pré-requis===<br /> 1) Qui est ce qui va m’utiliser ? Quand ? Pourquoi ? Dans quel environnement ? Comment résonne cet utilisateur ?<br /> Le site de E-commerce sera utilisé par des utilisateurs relativement jeune puisque la plupart des personnes intéressées ont entre 15 et 25 ans. Par tous type de personne, à la fois des étudiants, des bureaux étudiants pour des tee-shirt à l’image de leur école ou filière mais aussi des chefs d’entreprise voulant faire des tee-shirt publicitaire à l’effigie de leur entreprise, des clubs sportifs. Ce site web sera disponible tout le temps mais les principales fréquentation devrait être en fin de journée après avoir étudier la fréquentation sur les sites concurrents. Leurs principales vente se font tout au long de la journée du fait de l’accès à l’Internet sur leur lieu de travail cependant le pic des commande se site en fin de journée entre 18h30 et 21h. Les tee-shirt personnalisés pourront être commandés par des personnes voulant se démarquer avec un tee-shirt original. Cependant ces tee-shirt sont aussi très commandés par des personnes voulant faire des cadeaux d’anniversaire afin d’avoir une touche personnel dessus. Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire. <br /> ===Les besoins===<br /> 2) Quelles plateformes je peux utiliser pour communiquer avec un humain ?<br /> Les plate-formes pouvant être utilisés sont les couriels, les SMS, puisque la clientèle est jeune il serait intéressant de faire des offres promotionnel via Facebook et plus généralement les réseaux sociaux. (GSM, Ordinateurs, Smartphones)<br /> 3) Qu’est ce que j’ai besoin de connaître pour permettre à l’humain d’accomplir ses tâches ? Qu’est ce qu’un développeur peut m’apprendre ? Comment ?<br /> * Ses coordonnées bancaires.<br /> * Son adresse de livraison<br /> * Son nom, prénom.<br /> * Son adresse mail.<br /> * Son numéro de téléphone.<br /> ===Les contraintes===<br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des contraintes<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Type<br /> !scope=&quot;col&quot;| contraintes<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Utilisateurs<br /> | Les utilisateurs de notre site seront :<br /> * Les étudiants qui veulent un tee-shirt représentant leur filière ou école.<br /> * Les personnes qui veulent un tee-shirt individualisé.<br /> * Les entreprises qui veulent prendre un tee-shirt représentant leur culture d’entreprise.<br /> * Les groupes comme les clubs sportifs et les geeks.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | Environnement<br /> | Les clients vont utiliser le site de E-commerce sur les ordinateurs puisque c’est pratique à télécharger leur commandes vers un serveur.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Objectifs de l’utilisateur, tâches et cas d’utilisation<br /> | L’objectif de l’utilisateur est de faire une commande des tee-shirts individualisés.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Entrées/sorties possibles, plateformes<br /> | Entrées: Les images des tee-shirts, le nombre et les tailles des tee-shirts, les informations personnalisés (les coordonnées bancaires, l’adresse de livraison, le nom et prénom, l’adresse mail, le numéro de téléphone). Plateformes: Les navigateurs web sur les ordinateurs.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Analyse technologique (étude de librairies...) technologies web obligatoires<br /> | Utilisation de JavaScript et CSS pour réaliser des web pages, java pour réaliser la couche logique et JDBC pour la connexion à des bases de donneés<br /> |-<br /> <br /> |}<br /> <br /> <br /> ==Conception IHM 06/10/2015==<br /> ===Utilisateurs cible===<br /> Personnes comprises entre 18 et 40 ans. Les 18 – 25 car ils veulent suivre la mode du rétro. Et les 25 - 40 car cela leur rappel leur enfance avec les jeux pixelisés.<br /> ===Tâches : priorité de développement pour l’utilisateur===<br /> Product backlog des priorité de développement pour l'utilisateur en ce qui concerne L'IHM.<br /> <br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des tâches<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Tâche<br /> !scope=&quot;col&quot;| Sous tâches<br /> !scope=&quot;col&quot;| Priorité<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Gestion compte<br /> | <br /> * création/suppression du compte<br /> | (7)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Créer un modèle de Tee-shirt<br /> | <br /> * proposer un design<br /> * choix d’un modèle prédéfinit<br /> | 2<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Gestion du panier<br /> | <br /> * création d‘une session <br /> * ajouter/supprimer/modifier un article au panier <br /> * commander<br /> | (6)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Transaction bancaire<br /> |<br /> * accepter <br /> * refuser <br /> * payer<br /> | 3<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Visualiser le catalogue<br /> | <br /> * recherche article<br /> * visualiser par catégorie <br /> * IHM<br /> | 1<br /> |-<br /> <br /> !scope=&quot;row&quot;| 6<br /> | Gérer catalogue<br /> | <br /> * création BD<br /> | (4)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 7<br /> | Administrateur<br /> |<br /> * ajout d'un article au catalogue<br /> | (5)<br /> |-<br /> |}<br /> <br /> ===Contextes d'utilisation===<br /> Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire.<br /> <br /> ===User Case UML===<br /> [[File:Use_Case.png|center|thumb|600px]]<br /> <br /> ===Modèle de tâche===<br /> [[File:tache.jpg|center|thumb|1200px]]<br /> <br /> ===IHM===<br /> ====IHM abstraite====<br /> [[File:IHM_abstraite.png|center|thumb|900px]]<br /> <br /> ====Maquette IHM====<br /> [[File:maquette.jpg|center|thumb|600px]]<br /> <br /> =Références=</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=ECOM-RICM/PIXEL-SHIRT&diff=24564 2015-10-19T07:34:14Z

<p>Sebastien.Toussaint: </p> <hr /> <div>Le projet ECOM-RICM 2015-2016 consiste à concevoir et développer une application de commerce électronique dans le cadre des unités d'enseignements Génie Logiciel, IHM et Projet ECOM gérer respectivement par Didier DONSEZ, Laurence NIGAY et Sybille CAFFIAU.<br /> <br /> ==Présentation du projet [[ECOM]]==<br /> <br /> Notre site de commerce électronique &quot;PIXEL-SHIRT&quot; permet la création de tee-shirt avec des modèles pixelisé personnalisé. Chaque client doit au préalablement créer un compte. Il pourra ensuite choisir entre une panoplie de Tee-shirt (la taille, le type, col en V, couleur, etc...). Deplus le client pourra importer un dessin à représenter sur le tee-shirt. Un outil de dessin pixélisé sera éventuellement mis en place sur le site. Le projet ECOM étant de courte durée nous décidons d'utiliser une méthodologie [[Scrum]] pour la conduite de ce projet. La partie IHM et la partie Système sont menées en parallèle pendant toute la durée du projet. Le projet se conclut par une soutenance finale pour chaque partie (IHM et système).<br /> <br /> ===SCRUM===<br /> Pour la partie conception de l'architecture de notre site nous avons décidé d'utiliser la méthode agile Scrum avec des sprints d'une durée de 1 semaine. En effet, cela nous permet d'avoir rapidement un feedback sur le travail effectué, et par conséquent d'augmenter notre réactivité face aux demandes du client. Voici le lien vers notre Waffle, qui permet de voir en temps réel l'avancement de notre projet : [https://waffle.io/Vivien-Michel/PIXEL-SHIRT]. Nous utilisons aussi Scrum pour la partie création du site. Ci dessous voici notre planning prévisionnel du projet avec les différentes tâches.<br /> <br /> [[File:planning_previsionnel.jpg|center|thumb|900px]]<br /> <br /> ===GIT===<br /> Nous utilisons Github un gestionnaire de version pour pouvoir interagir simultanément sur le projet PIXEL-SHIRT. Voici le lien de dêpot distant : [https://github.com/Vivien-Michel/PIXEL-SHIRT]<br /> <br /> ==Equipe==<br /> <br /> ===Enseignants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | DONSEZ Didier<br /> | didier.donsez@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | CAFFIAU Sybille <br /> | sybille.caffiau@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | NIGAY Laurence <br /> | laurence.nigay@imag.fr<br /> |- <br /> <br /> |}<br /> <br /> ===Etudiants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> !scope=&quot;col&quot;| Rôle<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | MICHEL Vivien<br /> | vivien.michel@e.ujf-grenoble.fr<br /> | Scrum Master<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | KLIPFFEL Tararaina<br /> | tararaina.klipffel@e.ujf-grenoble.fr<br /> | Chef de projet<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | TOUSSAINT Sebastien<br /> | sebastien.toussain@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | SAUSSAC Thibault<br /> | thibault.saussac@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | LONGFEI Jérôme<br /> | jérôme.longfei@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> |}<br /> <br /> =SRS=<br /> [fiche_SRS]<br /> Définitions des exigences logicielles<br /> <br /> =Gestion de projet=<br /> ==Initialisation du projet 08/09/2015==<br /> Définition du projet et des différents objectifs à atteindre. Création d'un site web permettant la création de Tee-Shirt avec des logos pixelisés. L'application offre la possibilité de créer des Tee-Shirt avec :<br /> * des modèles prédéfinis<br /> * des modèles prédéfinis modifiable<br /> * des créations de modèle.<br /> <br /> ==Création du questionnaire 15/09/2015==<br /> ===Questionnaire===<br /> [https://docs.google.com/forms/d/1rcJ5u16AZn9hkijGnRVUkNL3VhEI4zp9b5F17_58E7w/viewform Questionnaire ECOM]<br /> ===Analyse des données===<br /> ==== Cible ====<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Age des utilisateurs<br /> !scope=&quot;col&quot;| Nombre d'heure d'utilisation d'un ordinateur<br /> !scope=&quot;col&quot;| Nombre d'achat en ligne par mois<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | DONSEZ Didier<br /> | didier.donsez@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | CAFFIAU Sybille <br /> | sybille.caffiau@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | NIGAY Laurence <br /> | laurence.nigay@imag.fr<br /> |- <br /> <br /> |}<br /> <br /> <br /> Notre cible est principalement des consommateurs entre 20 et 40. Les différents graphiques nous montrent qu’ils sont à l’aise avec un utilisateur car 93% d’entre eux passent entre 1h et plus sur un ordinateur. Concernant les achats en ligne ils ont déjà plusieurs fois utilisé ce moyen de consommation.<br /> <br /> Conclusion : nous avons à faire à des utilisateurs plus que novice dans l’utilisation des ordinateurs. Ayant déjà effectué des achats en ligne il faut que l’interface du site puis lors être familier, afin d’avoir des achats rapide. <br /> <br /> &lt; A venir &gt;<br /> <br /> ==Définir les pré-requis, les besoins et les contraintes 22/09/2015 &amp; 29/09/2015==<br /> ===Les pré-requis===<br /> 1) Qui est ce qui va m’utiliser ? Quand ? Pourquoi ? Dans quel environnement ? Comment résonne cet utilisateur ?<br /> Le site de E-commerce sera utilisé par des utilisateurs relativement jeune puisque la plupart des personnes intéressées ont entre 15 et 25 ans. Par tous type de personne, à la fois des étudiants, des bureaux étudiants pour des tee-shirt à l’image de leur école ou filière mais aussi des chefs d’entreprise voulant faire des tee-shirt publicitaire à l’effigie de leur entreprise, des clubs sportifs. Ce site web sera disponible tout le temps mais les principales fréquentation devrait être en fin de journée après avoir étudier la fréquentation sur les sites concurrents. Leurs principales vente se font tout au long de la journée du fait de l’accès à l’Internet sur leur lieu de travail cependant le pic des commande se site en fin de journée entre 18h30 et 21h. Les tee-shirt personnalisés pourront être commandés par des personnes voulant se démarquer avec un tee-shirt original. Cependant ces tee-shirt sont aussi très commandés par des personnes voulant faire des cadeaux d’anniversaire afin d’avoir une touche personnel dessus. Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire. <br /> ===Les besoins===<br /> 2) Quelles plateformes je peux utiliser pour communiquer avec un humain ?<br /> Les plate-formes pouvant être utilisés sont les couriels, les SMS, puisque la clientèle est jeune il serait intéressant de faire des offres promotionnel via Facebook et plus généralement les réseaux sociaux. (GSM, Ordinateurs, Smartphones)<br /> 3) Qu’est ce que j’ai besoin de connaître pour permettre à l’humain d’accomplir ses tâches ? Qu’est ce qu’un développeur peut m’apprendre ? Comment ?<br /> * Ses coordonnées bancaires.<br /> * Son adresse de livraison<br /> * Son nom, prénom.<br /> * Son adresse mail.<br /> * Son numéro de téléphone.<br /> ===Les contraintes===<br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des contraintes<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Type<br /> !scope=&quot;col&quot;| contraintes<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Utilisateurs<br /> | Les utilisateurs de notre site seront :<br /> * Les étudiants qui veulent un tee-shirt représentant leur filière ou école.<br /> * Les personnes qui veulent un tee-shirt individualisé.<br /> * Les entreprises qui veulent prendre un tee-shirt représentant leur culture d’entreprise.<br /> * Les groupes comme les clubs sportifs et les geeks.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | Environnement<br /> | Les clients vont utiliser le site de E-commerce sur les ordinateurs puisque c’est pratique à télécharger leur commandes vers un serveur.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Objectifs de l’utilisateur, tâches et cas d’utilisation<br /> | L’objectif de l’utilisateur est de faire une commande des tee-shirts individualisés.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Entrées/sorties possibles, plateformes<br /> | Entrées: Les images des tee-shirts, le nombre et les tailles des tee-shirts, les informations personnalisés (les coordonnées bancaires, l’adresse de livraison, le nom et prénom, l’adresse mail, le numéro de téléphone). Plateformes: Les navigateurs web sur les ordinateurs.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Analyse technologique (étude de librairies...) technologies web obligatoires<br /> | Utilisation de JavaScript et CSS pour réaliser des web pages, java pour réaliser la couche logique et JDBC pour la connexion à des bases de donneés<br /> |-<br /> <br /> |}<br /> <br /> <br /> ==Conception IHM 06/10/2015==<br /> ===Utilisateurs cible===<br /> Personnes comprises entre 18 et 40 ans. Les 18 – 25 car ils veulent suivre la mode du rétro. Et les 25 - 40 car cela leur rappel leur enfance avec les jeux pixelisés.<br /> ===Tâches : priorité de développement pour l’utilisateur===<br /> Product backlog des priorité de développement pour l'utilisateur en ce qui concerne L'IHM.<br /> <br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des tâches<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Tâche<br /> !scope=&quot;col&quot;| Sous tâches<br /> !scope=&quot;col&quot;| Priorité<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Gestion compte<br /> | <br /> * création/suppression du compte<br /> | (7)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Créer un modèle de Tee-shirt<br /> | <br /> * proposer un design<br /> * choix d’un modèle prédéfinit<br /> | 2<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Gestion du panier<br /> | <br /> * création d‘une session <br /> * ajouter/supprimer/modifier un article au panier <br /> * commander<br /> | (6)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Transaction bancaire<br /> |<br /> * accepter <br /> * refuser <br /> * payer<br /> | 3<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Visualiser le catalogue<br /> | <br /> * recherche article<br /> * visualiser par catégorie <br /> * IHM<br /> | 1<br /> |-<br /> <br /> !scope=&quot;row&quot;| 6<br /> | Gérer catalogue<br /> | <br /> * création BD<br /> | (4)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 7<br /> | Administrateur<br /> |<br /> * ajout d'un article au catalogue<br /> | (5)<br /> |-<br /> |}<br /> <br /> ===Contextes d'utilisation===<br /> Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire.<br /> <br /> ===User Case UML===<br /> [[File:Use_Case.png|center|thumb|600px]]<br /> <br /> ===Modèle de tâche===<br /> [[File:tache.jpg|center|thumb|1200px]]<br /> <br /> ===IHM===<br /> ====IHM abstraite====<br /> [[File:IHM_abstraite.png|center|thumb|900px]]<br /> <br /> ====Maquette IHM====<br /> [[File:maquette.jpg|center|thumb|600px]]<br /> <br /> =Références=</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=ECOM-RICM/PIXEL-SHIRT&diff=24562 2015-10-19T07:28:33Z

<p>Sebastien.Toussaint: /* Création du questionnaire 15/09/2015 */</p> <hr /> <div>Le projet ECOM-RICM 2015-2016 consiste à concevoir et développer une application de commerce électronique dans le cadre des unités d'enseignements Génie Logiciel, IHM et Projet ECOM gérer respectivement par Didier DONSEZ, Laurence NIGAY et Sybille CAFFIAU.<br /> <br /> ==Présentation du projet [[ECOM]]==<br /> <br /> Notre site de commerce électronique &quot;PIXEL-SHIRT&quot; permet la création de tee-shirt avec des modèles pixelisé personnalisé. Chaque client doit au préalablement créer un compte. Il pourra ensuite choisir entre une panoplie de Tee-shirt (la taille, le type, col en V, couleur, etc...). Deplus le client pourra importer un dessin à représenter sur le tee-shirt. Un outil de dessin pixélisé sera éventuellement mis en place sur le site. Le projet ECOM étant de courte durée nous décidons d'utiliser une méthodologie [[Scrum]] pour la conduite de ce projet. La partie IHM et la partie Système sont menées en parallèle pendant toute la durée du projet. Le projet se conclut par une soutenance finale pour chaque partie (IHM et système).<br /> <br /> ===SCRUM===<br /> Pour la partie conception de l'architecture de notre site nous avons décidé d'utiliser la méthode agile Scrum avec des sprints d'une durée de 1 semaine. En effet, cela nous permet d'avoir rapidement un feedback sur le travail effectué, et par conséquent d'augmenter notre réactivité face aux demandes du client. Voici le lien vers notre Waffle, qui permet de voir en temps réel l'avancement de notre projet : [https://waffle.io/Vivien-Michel/PIXEL-SHIRT]. Nous utilisons aussi Scrum pour la partie création du site. Ci dessous voici notre planning prévisionnel du projet avec les différentes tâches.<br /> <br /> [[File:planning_previsionnel.jpg|center|thumb|900px]]<br /> <br /> ===GIT===<br /> Nous utilisons Github un gestionnaire de version pour pouvoir interagir simultanément sur le projet PIXEL-SHIRT. Voici le lien de dêpot distant : [https://github.com/Vivien-Michel/PIXEL-SHIRT]<br /> <br /> ==Equipe==<br /> <br /> ===Enseignants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | DONSEZ Didier<br /> | didier.donsez@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | CAFFIAU Sybille <br /> | sybille.caffiau@imag.fr<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | NIGAY Laurence <br /> | laurence.nigay@imag.fr<br /> |- <br /> <br /> |}<br /> <br /> ===Etudiants===<br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Nom Prénom<br /> !scope=&quot;col&quot;| Mail<br /> !scope=&quot;col&quot;| Rôle<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | MICHEL Vivien<br /> | vivien.michel@e.ujf-grenoble.fr<br /> | Scrum Master<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | KLIPFFEL Tararaina<br /> | tararaina.klipffel@e.ujf-grenoble.fr<br /> | Chef de projet<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | TOUSSAINT Sebastien<br /> | sebastien.toussain@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | SAUSSAC Thibault<br /> | thibault.saussac@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | LONGFEI Jérôme<br /> | jérôme.longfei@e.ujf-grenoble.fr<br /> | Développeur<br /> |-<br /> <br /> |}<br /> <br /> =SRS=<br /> [fiche_SRS]<br /> Définitions des exigences logicielles<br /> <br /> =Gestion de projet=<br /> ==Initialisation du projet 08/09/2015==<br /> Définition du projet et des différents objectifs à atteindre. Création d'un site web permettant la création de Tee-Shirt avec des logos pixelisés. L'application offre la possibilité de créer des Tee-Shirt avec :<br /> * des modèles prédéfinis<br /> * des modèles prédéfinis modifiable<br /> * des créations de modèle.<br /> <br /> ==Création du questionnaire 15/09/2015==<br /> ===Questionnaire===<br /> [https://docs.google.com/forms/d/1rcJ5u16AZn9hkijGnRVUkNL3VhEI4zp9b5F17_58E7w/viewform Questionnaire ECOM]<br /> ===Analyse des données===<br /> ==== Cible ====<br /> <br /> tableau<br /> <br /> Notre cible est principalement des consommateurs entre 20 et 40. Les différents graphiques nous montrent qu’ils sont à l’aise avec un utilisateur car 93% d’entre eux passent entre 1h et plus sur un ordinateur. Concernant les achats en ligne ils ont déjà plusieurs fois utilisé ce moyen de consommation.<br /> <br /> Conclusion : nous avons à faire à des utilisateurs plus que novice dans l’utilisation des ordinateurs. Ayant déjà effectué des achats en ligne il faut que l’interface du site puis lors être familier, afin d’avoir des achats rapide. <br /> <br /> &lt; A venir &gt;<br /> <br /> ==Définir les pré-requis, les besoins et les contraintes 22/09/2015 &amp; 29/09/2015==<br /> ===Les pré-requis===<br /> 1) Qui est ce qui va m’utiliser ? Quand ? Pourquoi ? Dans quel environnement ? Comment résonne cet utilisateur ?<br /> Le site de E-commerce sera utilisé par des utilisateurs relativement jeune puisque la plupart des personnes intéressées ont entre 15 et 25 ans. Par tous type de personne, à la fois des étudiants, des bureaux étudiants pour des tee-shirt à l’image de leur école ou filière mais aussi des chefs d’entreprise voulant faire des tee-shirt publicitaire à l’effigie de leur entreprise, des clubs sportifs. Ce site web sera disponible tout le temps mais les principales fréquentation devrait être en fin de journée après avoir étudier la fréquentation sur les sites concurrents. Leurs principales vente se font tout au long de la journée du fait de l’accès à l’Internet sur leur lieu de travail cependant le pic des commande se site en fin de journée entre 18h30 et 21h. Les tee-shirt personnalisés pourront être commandés par des personnes voulant se démarquer avec un tee-shirt original. Cependant ces tee-shirt sont aussi très commandés par des personnes voulant faire des cadeaux d’anniversaire afin d’avoir une touche personnel dessus. Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire. <br /> ===Les besoins===<br /> 2) Quelles plateformes je peux utiliser pour communiquer avec un humain ?<br /> Les plate-formes pouvant être utilisés sont les couriels, les SMS, puisque la clientèle est jeune il serait intéressant de faire des offres promotionnel via Facebook et plus généralement les réseaux sociaux. (GSM, Ordinateurs, Smartphones)<br /> 3) Qu’est ce que j’ai besoin de connaître pour permettre à l’humain d’accomplir ses tâches ? Qu’est ce qu’un développeur peut m’apprendre ? Comment ?<br /> * Ses coordonnées bancaires.<br /> * Son adresse de livraison<br /> * Son nom, prénom.<br /> * Son adresse mail.<br /> * Son numéro de téléphone.<br /> ===Les contraintes===<br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des contraintes<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Type<br /> !scope=&quot;col&quot;| contraintes<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Utilisateurs<br /> | Les utilisateurs de notre site seront :<br /> * Les étudiants qui veulent un tee-shirt représentant leur filière ou école.<br /> * Les personnes qui veulent un tee-shirt individualisé.<br /> * Les entreprises qui veulent prendre un tee-shirt représentant leur culture d’entreprise.<br /> * Les groupes comme les clubs sportifs et les geeks.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 2<br /> | Environnement<br /> | Les clients vont utiliser le site de E-commerce sur les ordinateurs puisque c’est pratique à télécharger leur commandes vers un serveur.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Objectifs de l’utilisateur, tâches et cas d’utilisation<br /> | L’objectif de l’utilisateur est de faire une commande des tee-shirts individualisés.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Entrées/sorties possibles, plateformes<br /> | Entrées: Les images des tee-shirts, le nombre et les tailles des tee-shirts, les informations personnalisés (les coordonnées bancaires, l’adresse de livraison, le nom et prénom, l’adresse mail, le numéro de téléphone). Plateformes: Les navigateurs web sur les ordinateurs.<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Analyse technologique (étude de librairies...) technologies web obligatoires<br /> | Utilisation de JavaScript et CSS pour réaliser des web pages, java pour réaliser la couche logique et JDBC pour la connexion à des bases de donneés<br /> |-<br /> <br /> |}<br /> <br /> <br /> ==Conception IHM 06/10/2015==<br /> ===Utilisateurs cible===<br /> Personnes comprises entre 18 et 40 ans. Les 18 – 25 car ils veulent suivre la mode du rétro. Et les 25 - 40 car cela leur rappel leur enfance avec les jeux pixelisés.<br /> ===Tâches : priorité de développement pour l’utilisateur===<br /> Product backlog des priorité de développement pour l'utilisateur en ce qui concerne L'IHM.<br /> <br /> <br /> {|class=&quot;wikitable alternance&quot;<br /> |+ tableau des tâches<br /> |-<br /> |<br /> !scope=&quot;col&quot;| Tâche<br /> !scope=&quot;col&quot;| Sous tâches<br /> !scope=&quot;col&quot;| Priorité<br /> |-<br /> <br /> !scope=&quot;row&quot;| 1<br /> | Gestion compte<br /> | <br /> * création/suppression du compte<br /> | (7)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Créer un modèle de Tee-shirt<br /> | <br /> * proposer un design<br /> * choix d’un modèle prédéfinit<br /> | 2<br /> |-<br /> <br /> !scope=&quot;row&quot;| 3<br /> | Gestion du panier<br /> | <br /> * création d‘une session <br /> * ajouter/supprimer/modifier un article au panier <br /> * commander<br /> | (6)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 4<br /> | Transaction bancaire<br /> |<br /> * accepter <br /> * refuser <br /> * payer<br /> | 3<br /> |-<br /> <br /> !scope=&quot;row&quot;| 5<br /> | Visualiser le catalogue<br /> | <br /> * recherche article<br /> * visualiser par catégorie <br /> * IHM<br /> | 1<br /> |-<br /> <br /> !scope=&quot;row&quot;| 6<br /> | Gérer catalogue<br /> | <br /> * création BD<br /> | (4)<br /> |-<br /> <br /> !scope=&quot;row&quot;| 7<br /> | Administrateur<br /> |<br /> * ajout d'un article au catalogue<br /> | (5)<br /> |-<br /> |}<br /> <br /> ===Contextes d'utilisation===<br /> Le site devra être disponible sur les ordinateurs puisque les personnes interrogées commande à 90% sur leur ordinateur personnel. les commandes sur Smartphone ou sur tablette ne semble donc pas être nécessaire.<br /> <br /> ===User Case UML===<br /> [[File:Use_Case.png|center|thumb|600px]]<br /> <br /> ===Modèle de tâche===<br /> [[File:tache.jpg|center|thumb|1200px]]<br /> <br /> ===IHM===<br /> ====IHM abstraite====<br /> [[File:IHM_abstraite.png|center|thumb|900px]]<br /> <br /> ====Maquette IHM====<br /> [[File:maquette.jpg|center|thumb|600px]]<br /> <br /> =Références=</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=File:VT2015_Factoring_RSA.pdf&diff=24133 2015-10-12T07:02:10Z

<p>Sebastien.Toussaint: </p> <hr /> <div></div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=VT2015_Factoring_RSA&diff=24132 2015-10-12T07:00:23Z

<p>Sebastien.Toussaint: </p> <hr /> <div>= Présentation =<br /> * Enseignants : Georges-Pierre Bonneau, Didier Donsez (VT2015) <br /> * Sujet : Factoring RSA Keys With TLS Perfect Forward Secrecy<br /> * Auteur : Sébastien TOUSSAINT<br /> * Date : 02 octobre 2015 <br /> <br /> <br /> == Mots Clés ==<br /> RSA, théorème des restes chinois, TLS, Perfect foward secrecy, confidentialité persitante, handshake, diffie-hellman.<br /> <br /> == Abstract ==<br /> <br /> The significant growth of transactions on the Internet in the early-mid 90s and early 2000s raised awareness among researchers to find and develop data security techniques on the internet. The September 21, 2000, the end RSA encryption patent previously held by the Massachusetts Institute of Technology (MIT), was a breakthrough in securing confidential data on the internet. This encryption system is the safest today. An article mad by Florian Weimer published Sept. 2, 2015 said it is possible to retrieve RSA private keys, especially if they were implemented using the Chinese remainder theorem. RSA encryption with forward secrecy TLS protocols are safe. But the implementation of these protocols can be badly performed and therefore be vulnerable to Lenstra attacks. To prevent this problem it is necessary to verify the implementation of these algorithms and ensure that it is not vulnerable to hardware problems.<br /> <br /> == Résumé ==<br /> <br /> La croissance importante des transactions effectuées sur internet dans le début-milieu des années 90 et début des années 2000 a sensibilisé les chercheurs à trouver et développer des techniques de sécurisation des données sur internet. Le 21 septembre 2000, la fin du brevet de chiffrement RSA détenu jusqu’alors par le Massachusetts Institute of Technology (MIT), fut une grande avancée dans la sécurisation des données confidentielles sur internet. Ce système de chiffrement est le plus sûr aujourd’hui. Un article de Florian Weimer paru le 2 septembre 2015 dit qu’il est possible de récupérer des clés privées de RSA, spécialement si elles ont été implémentées été implémenté à l’aide du théorème des restes chinois. Le chiffrement RSA avec la confidentialité persistante de TLS sont des protocoles sûrs. Mais l’implémentation de ces protocoles peut être mal effectuée et donc être vulnérable aux attaques de Lenstra. Pour prévenir ce problème il faut bien vérifier l’implémentation de ces algorithmes et faire en sorte qu’il ne soit pas vulnérable aux problèmes matériels.<br /> <br /> = Synthèse =<br /> == Introduction ==<br /> La croissance importante des transactions effectuées sur internet dans le début-milieu des années 90 et début des années 2000 a sensibilisé les chercheurs à trouver et développer des techniques de sécurisation des données sur internet. Le 21 septembre 2000, la fin du brevet de chiffrement RSA détenu jusqu’alors par le Massachusetts Institute of Technology (MIT), fut une grande avancée dans la sécurisation des données confidentielles sur internet. Ce système de chiffrement est le plus sûr aujourd’hui. Un article de Florian Weimer paru le 2 septembre 2015 dit qu’il est possible de récupérer des clés privées de RSA, spécialement, si elles ont été implémentées été implémenté à l’aide du théorème des restes chinois. Nous allons dans cette synthèse revenir sur les bases de RSA, du théorème des restes chinois et le TLS perfect foward secrecy avec ses mécanismes (handshake, Diffie-Hellman) avant d’étudier les travaux de Florian Weimer.<br /> <br /> == Le chiffrement RSA ==<br /> Le chiffrement RSA est un système de cryptographie asymétrique. Cela signifie qu’il y existe deux clés dans notre système. Une clé privée connue par une seule entité. Elle va lui permettre de déchiffrer les messages qui lui ont été envoyés. Une clé publique connue de tout le monde et qui va chiffrer le message que l’on souhaite envoyer. Ces clés sont produites par une seule entité.<br /> <br /> [[File:rsa.png|center|thumb|700px]]<br /> <br /> L’image ci-dessus représente une communication RSA entre deux utilisateurs, Alice et Bob. Les éléments en vert sur l’image représentent les informations en clair dans le canal de communication de ce protocole, donc tout le monde y a accès. Les éléments en rouge représentent les informations privées de chaque utilisateur. Donc du côté d’Alice ces informations permettent de créer sa clé privée. Tout d’abord Alice choisit deux nombres premiers distincts p et q puis elle fait leur produit afin d’obtenir le nombre n, ensuite l’indicateur de Euler ou fonction Phi de n f = (p-1) (q-1). Puis on calcul e premier avec f donc e = 5 et on calcule d, inverse de e modulo f. Donc pour chiffrer les messages nous avons y = x^e mod n. Et pour déchiffrer les messages nous avons z = y^d mod n.<br /> <br /> == Le théorème des restes chinois ==<br /> Théorème : Prenons m1, ..., m n des entiers supérieurs à 2 deux à deux premiers entre eux, et a1,...,an des entiers. Le système d'équations :<br /> <br /> [[File:trc.png|center|thumb|500px]]<br /> <br /> admet une unique solution modulo M=m1×⋯×mn qui est donnée par la formule :<br /> x=a1M1y1+⋯+anMnyn<br /> où Mi = et yi = Mod mi pour tout i compris entre 1 et n.<br /> <br /> <br /> == Transport Layer Security (TLS) ==<br /> Transport Layer Security (TLS) est un protocole qui garantit la confidentialité entre les applications et leurs utilisateurs sur Internet. Quand un serveur et le client communiquent, TLS garantit qu'aucun tiers ne peut être espionné ou altérer un message. TLS est le successeur du protocole Secure Sockets Layer (SSL). Ce type de protocole est né du fait que plusieurs sites ont commencé à proposer des transactions (achats en ligne notamment). Afin de favoriser l’utilisation de ces plateformes de transaction, des protocoles de sécurisation des données des utilisateurs furent mis en place. En 2009, TLS est utilisé par la plupart des navigateurs Web. L'internaute peut reconnaître qu'une transaction est chiffrée à plusieurs signes : <br /> * l'URL dans la barre d'adresse commence par https et non http (https://...) ;<br /> * affichage d'une clé ou un cadenas<br /> <br /> <br /> == La confidentialité persistante (Perfect Forward Secrecy) ==<br /> <br /> Une fois que la clé privée de certains sites Web HTTPS est compromise, un attaquant est capable de construire une attaque « man-in-the-middle » pour intercepter et décrypter toute communication avec le site Web. La première étape contre une telle attaque est la révocation du certificat associé. Malheureusement, l'attaquant pourrait également avoir enregistré des communications passées protégées par cette clé privée et donc les décrypter. Forward secrecy permet à l'information d'aujourd'hui d’être gardée secrète, même si la clé privée est compromise dans l'avenir. La réalisation de cette propriété est généralement coûteuse et par conséquent, la plupart des serveurs web ne le permet pas.<br /> <br /> == Diffie-Hellman &amp; Handshake ==<br /> === Handshake ===<br /> En informatique, en télécommunications et dans les domaines associés, le handshaking ou &quot;handshake&quot; (&quot;poignée de main&quot; en français) est un processus automatisé de négociations qui établit les paramètres d'une communication entre deux entités avant que la communication commence. Un handshake est fait au moment où un ordinateur veut entreprendre une communication avec un appareil plus ou moins éloigné, par exemple un modem, une imprimante ou un serveur.<br /> <br /> <br /> === Diffie-Hellman ===<br /> Diffie-Hellman est une méthode par laquelle deux personnes nommées conventionnellement Alice et Bob peuvent se mettre d'accord sur un nombre (qu'ils peuvent utiliser comme clé pour chiffrer la conversation suivante) sans qu'une troisième personne appelée Ève puisse découvrir le nombre, même en ayant écouté tous leurs échanges.<br /> <br /> [[File:d-f.png|center|thumb|500px]]<br /> <br /> <br /> == Factoring RSA Keys With TLS Perfect Forward Secrecy == <br /> Dans un rapport de Florian Weimer paru le 9 septembre 2015, ce dernier affirme avoir réussi à récupérer des clés RSA. En effet il dit que les protocoles utilisant le protocole RSA avec les théorèmes des restes chinois pour mettre en place le TLS avec de la confidentialité persistante sont les plus vulnérables. Mais les seuls genres d’attaques capables de permettre une telle vulnérabilité sont les attaques Lenstra. <br /> <br /> Les attaques Lenstra sont des attaques sur les canaux auxiliaires. Ils sont dus à de mauvaises implémentations logicielles ou matérielles (veilles librairies, UAL fatiguée, erreurs dans une mémoire cache …) des crypto-systèmes. Donc cela ne remet pas en cause les protocoles de cryptographie et ici dans notre cas le RSA. <br /> <br /> === La faille === <br /> Dans le rapport de Weimer, la formule utilisée pour effectuer la signature est la suivante :<br /> * y_p = x^d modulo p<br /> * y_q = x^d modulo q<br /> * y = y_p q (q^{-1} modulo p) + y_q p (p^{-1} modulo q) modulo n.<br /> <br /> Mais si un problème survient durant le calcul de y_p, que nous allons appeler w_p. Alors nous avons <br /> * Y = Y_p modulo p<br /> * Y = y_q modulo q<br /> <br /> Si nous mettons le tout à la puissance (voir rappel sur RSA) et que nous enlevons x nous avons :<br /> * Y^e - x = Y_p^e - x = a modulo p<br /> * Y^e - x = y_q^e - x = 0 modulo q<br /> <br /> Et là nous savons que q divise w_p et que q divise aussi n. Alors que p ne divise plus Y^e – x. Il nous reste plus qu’à faire le PGCD de n et Y^e – x pour trouver q.<br /> <br /> [[File:tls.png|center|thumb|700px]]<br /> <br /> D’un point de vue réseau il s’agit d’une trame en plus que fournit le serveur au client durant le handshake TLS. Dans cette trame il y a la clé publique du serveur. Cette trame ne dit pas quel algorithme a été utilisé pour faire l’échange de clé; et ceci peut conduire à une longue série d’attaque. Selon le rapport de Florian Weimer il existe un seul moyen de prévenir cette erreur, il faut vérifier que la signature ait été bien faite. <br /> <br /> Cette fuite est visible pour le client qui réalise la poignée de mains TLS ou un observateur passif qui intercepte le trafic réseau&quot; écrit Florian Weimer<br /> <br /> Florian Weimer explique que &quot;dans les cas de fuites de clés que nous avons observé, l'attaquant à distance ne peut pas organiser une fuite de clés à la demande étant donné qu'il n'est pas en mesure de manipuler le serveur du réseau d'une manière qui augmenterait la probabilité d'une fuite de réseau dans une poignées de main TLS. L'individu malintentionné peut uniquement intercepter un maximum de poignées de main, probablement en initialisant une multitude de poignées&quot;.<br /> <br /> === A ne pas faire ===<br /> &quot;La désactivation de la confidentialité persistante permettrait aux observateurs passifs qui auraient voler des clés, de déchiffrer les sessions TLS à venir dans le trafic réseau intercepté, sans devoir rediriger la connexion du client. Autrement, la désactivation de la confidentialité persistante ne contribue qu'à la détérioration de la situation. (la désactivation de la confidentialité persistance et le remplacement du certificat du serveur, quant à eux, fonctionnent)&quot; écrit Florian Weimer.<br /> <br /> <br /> = Conclusion =<br /> <br /> Pour résumer, le chiffrement RSA avec la confidentialité persistante de TLS sont des protocoles sûrs. Mais l’implémentation de ces protocoles peut être mal effectuée et donc être vulnérable aux attaques de Lenstra. Pour prévenir ce problème il faut bien vérifier l’implémentation de ces algorithmes et faire en sorte qu’il ne soit pas vulnérable aux problèmes matériels. <br /> <br /> Concernant les logiciels qui utilisent ces protocoles, ils ont été prévenus et ont mieux protégés leurs implémentations. Si vous voulez savoir si votre système est bien implémenté il est conseillé de contacter votre fournisseur d'outil d'outils de chiffrement pour en être certain.<br /> <br /> = Notes et références =<br /> - https://securityblog.redhat.com/2015/09/02/factoring-rsa-keys-with-tls-perfect-forward-secrecy/<br /> - http://villemin.gerard.free.fr/Crypto/RSA.htm<br /> - http://blog.terraverdeservices.com/rsa-key-factoring-vulnerability-using-perfect-forward-secrecy<br /> - https://www.nccgroup.trust/us/about-us/newsroom-and-events/blog/2015/september/factoring-rsa-keys-with-tls-perfect-forward-secrecy/<br /> - https://simple.wikipedia.org/wiki/Diffie-Hellman_key_exchange<br /> - http://bibmath.net/crypto/index.php?action=affiche&amp;quoi=complements/resteschinois</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=VT2015_Factoring_RSA&diff=24052 2015-10-09T08:16:11Z

<p>Sebastien.Toussaint: </p> <hr /> <div>= Présentation =<br /> * Enseignants : Georges-Pierre Bonneau, Didier Donsez (VT2015) <br /> * Sujet : Factoring RSA Keys With TLS Perfect Forward Secrecy<br /> * Auteur : Sébastien TOUSSAINT<br /> * Date : 02 octobre 2015 <br /> <br /> <br /> == Mots Clés ==<br /> RSA, théorème des restes chinois, TLS, Perfect foward secrecy, confidentialité persitante, handshake, diffie-hellman.<br /> <br /> == Abstract ==<br /> <br /> == Résumé ==<br /> <br /> = Synthèse =<br /> == Introduction ==<br /> La croissance importante des transactions effectuées sur internet dans le début-milieu des années 90 et début des années 2000 a sensibilisé les chercheurs à trouver et développer des techniques de sécurisation des données sur internet. Le 21 septembre 2000, la fin du brevet de chiffrement RSA détenu jusqu’alors par le Massachusetts Institute of Technology (MIT), fut une grande avancée dans la sécurisation des données confidentielles sur internet. Ce système de chiffrement est le plus sûr aujourd’hui. Un article de Florian Weimer paru le 2 septembre 2015 dit qu’il est possible de récupérer des clés privées de RSA, spécialement, si elles ont été implémentées été implémenté à l’aide du théorème des restes chinois. Nous allons dans cette synthèse revenir sur les bases de RSA, du théorème des restes chinois et le TLS perfect foward secrecy avec ses mécanismes (handshake, Diffie-Hellman) avant d’étudier les travaux de Florian Weimer.<br /> <br /> == Le chiffrement RSA ==<br /> Le chiffrement RSA est un système de cryptographie asymétrique. Cela signifie qu’il y existe deux clés dans notre système. Une clé privée connue par une seule entité. Elle va lui permettre de déchiffrer les messages qui lui ont été envoyés. Une clé publique connue de tout le monde et qui va chiffrer le message que l’on souhaite envoyer. Ces clés sont produites par une seule entité.<br /> <br /> [[File:rsa.png|center|thumb|700px]]<br /> <br /> L’image ci-dessus représente une communication RSA entre deux utilisateurs, Alice et Bob. Les éléments en vert sur l’image représentent les informations en clair dans le canal de communication de ce protocole, donc tout le monde y a accès. Les éléments en rouge représentent les informations privées de chaque utilisateur. Donc du côté d’Alice ces informations permettent de créer sa clé privée. Tout d’abord Alice choisit deux nombres premiers distincts p et q puis elle fait leur produit afin d’obtenir le nombre n, ensuite l’indicateur de Euler ou fonction Phi de n f = (p-1) (q-1). Puis on calcul e premier avec f donc e = 5 et on calcule d, inverse de e modulo f. Donc pour chiffrer les messages nous avons y = x^e mod n. Et pour déchiffrer les messages nous avons z = y^d mod n.<br /> <br /> == Le théorème des restes chinois ==<br /> Théorème : Prenons m1, ..., m n des entiers supérieurs à 2 deux à deux premiers entre eux, et a1,...,an des entiers. Le système d'équations :<br /> <br /> [[File:trc.png|center|thumb|500px]]<br /> <br /> admet une unique solution modulo M=m1×⋯×mn qui est donnée par la formule :<br /> x=a1M1y1+⋯+anMnyn<br /> où Mi = et yi = Mod mi pour tout i compris entre 1 et n.<br /> <br /> <br /> == Transport Layer Security (TLS) ==<br /> Transport Layer Security (TLS) est un protocole qui garantit la confidentialité entre les applications et leurs utilisateurs sur Internet. Quand un serveur et le client communiquent, TLS garantit qu'aucun tiers ne peut être espionné ou altérer un message. TLS est le successeur du protocole Secure Sockets Layer (SSL). Ce type de protocole est né du fait que plusieurs sites ont commencé à proposer des transactions (achats en ligne notamment). Afin de favoriser l’utilisation de ces plateformes de transaction, des protocoles de sécurisation des données des utilisateurs furent mis en place. En 2009, TLS est utilisé par la plupart des navigateurs Web. L'internaute peut reconnaître qu'une transaction est chiffrée à plusieurs signes : <br /> * l'URL dans la barre d'adresse commence par https et non http (https://...) ;<br /> * affichage d'une clé ou un cadenas<br /> <br /> <br /> == La confidentialité persistante (Perfect Forward Secrecy) ==<br /> <br /> Une fois que la clé privée de certains sites Web HTTPS est compromise, un attaquant est capable de construire une attaque « man-in-the-middle » pour intercepter et décrypter toute communication avec le site Web. La première étape contre une telle attaque est la révocation du certificat associé. Malheureusement, l'attaquant pourrait également avoir enregistré des communications passées protégées par cette clé privée et donc les décrypter. Forward secrecy permet à l'information d'aujourd'hui d’être gardée secrète, même si la clé privée est compromise dans l'avenir. La réalisation de cette propriété est généralement coûteuse et par conséquent, la plupart des serveurs web ne le permet pas.<br /> <br /> == Diffie-Hellman &amp; Handshake ==<br /> === Handshake ===<br /> En informatique, en télécommunications et dans les domaines associés, le handshaking ou &quot;handshake&quot; (&quot;poignée de main&quot; en français) est un processus automatisé de négociations qui établit les paramètres d'une communication entre deux entités avant que la communication commence. Un handshake est fait au moment où un ordinateur veut entreprendre une communication avec un appareil plus ou moins éloigné, par exemple un modem, une imprimante ou un serveur.<br /> <br /> <br /> === Diffie-Hellman ===<br /> Diffie-Hellman est une méthode par laquelle deux personnes nommées conventionnellement Alice et Bob peuvent se mettre d'accord sur un nombre (qu'ils peuvent utiliser comme clé pour chiffrer la conversation suivante) sans qu'une troisième personne appelée Ève puisse découvrir le nombre, même en ayant écouté tous leurs échanges.<br /> <br /> [[File:d-f.png|center|thumb|500px]]<br /> <br /> <br /> == Factoring RSA Keys With TLS Perfect Forward Secrecy == <br /> Dans un rapport de Florian Weimer paru le 9 septembre 2015, ce dernier affirme avoir réussi à récupérer des clés RSA. En effet il dit que les protocoles utilisant le protocole RSA avec les théorèmes des restes chinois pour mettre en place le TLS avec de la confidentialité persistante sont les plus vulnérables. Mais les seuls genres d’attaques capables de permettre une telle vulnérabilité sont les attaques Lenstra. <br /> <br /> Les attaques Lenstra sont des attaques sur les canaux auxiliaires. Ils sont dus à de mauvaises implémentations logicielles ou matérielles (veilles librairies, UAL fatiguée, erreurs dans une mémoire cache …) des crypto-systèmes. Donc cela ne remet pas en cause les protocoles de cryptographie et ici dans notre cas le RSA. <br /> <br /> === La faille === <br /> Dans le rapport de Weimer, la formule utilisée pour effectuer la signature est la suivante :<br /> * y_p = x^d modulo p<br /> * y_q = x^d modulo q<br /> * y = y_p q (q^{-1} modulo p) + y_q p (p^{-1} modulo q) modulo n.<br /> <br /> Mais si un problème survient durant le calcul de y_p, que nous allons appeler w_p. Alors nous avons <br /> * Y = Y_p modulo p<br /> * Y = y_q modulo q<br /> <br /> Si nous mettons le tout à la puissance (voir rappel sur RSA) et que nous enlevons x nous avons :<br /> * Y^e - x = Y_p^e - x = a modulo p<br /> * Y^e - x = y_q^e - x = 0 modulo q<br /> <br /> Et là nous savons que q divise w_p et que q divise aussi n. Alors que p ne divise plus Y^e – x. Il nous reste plus qu’à faire le PGCD de n et Y^e – x pour trouver q.<br /> <br /> [[File:tls.png|center|thumb|700px]]<br /> <br /> D’un point de vue réseau il s’agit d’une trame en plus que fournit le serveur au client durant le handshake TLS. Dans cette trame il y a la clé publique du serveur. Cette trame ne dit pas quel algorithme a été utilisé pour faire l’échange de clé; et ceci peut conduire à une longue série d’attaque. Selon le rapport de Florian Weimer il existe un seul moyen de prévenir cette erreur, il faut vérifier que la signature ait été bien faite. <br /> <br /> Cette fuite est visible pour le client qui réalise la poignée de mains TLS ou un observateur passif qui intercepte le trafic réseau&quot; écrit Florian Weimer<br /> <br /> Florian Weimer explique que &quot;dans les cas de fuites de clés que nous avons observé, l'attaquant à distance ne peut pas organiser une fuite de clés à la demande étant donné qu'il n'est pas en mesure de manipuler le serveur du réseau d'une manière qui augmenterait la probabilité d'une fuite de réseau dans une poignées de main TLS. L'individu malintentionné peut uniquement intercepter un maximum de poignées de main, probablement en initialisant une multitude de poignées&quot;.<br /> <br /> === A ne pas faire ===<br /> &quot;La désactivation de la confidentialité persistante permettrait aux observateurs passifs qui auraient voler des clés, de déchiffrer les sessions TLS à venir dans le trafic réseau intercepté, sans devoir rediriger la connexion du client. Autrement, la désactivation de la confidentialité persistante ne contribue qu'à la détérioration de la situation. (la désactivation de la confidentialité persistance et le remplacement du certificat du serveur, quant à eux, fonctionnent)&quot; écrit Florian Weimer.<br /> <br /> <br /> = Conclusion =<br /> <br /> Pour résumer, le chiffrement RSA avec la confidentialité persistante de TLS sont des protocoles sûrs. Mais l’implémentation de ces protocoles peut être mal effectuée et donc être vulnérable aux attaques de Lenstra. Pour prévenir ce problème il faut bien vérifier l’implémentation de ces algorithmes et faire en sorte qu’il ne soit pas vulnérable aux problèmes matériels. <br /> <br /> Concernant les logiciels qui utilisent ces protocoles, ils ont été prévenus et ont mieux protégés leurs implémentations. Si vous voulez savoir si votre système est bien implémenté il est conseillé de contacter votre fournisseur d'outil d'outils de chiffrement pour en être certain.<br /> <br /> = Notes et références =<br /> - https://securityblog.redhat.com/2015/09/02/factoring-rsa-keys-with-tls-perfect-forward-secrecy/<br /> - http://villemin.gerard.free.fr/Crypto/RSA.htm<br /> - http://blog.terraverdeservices.com/rsa-key-factoring-vulnerability-using-perfect-forward-secrecy<br /> - https://www.nccgroup.trust/us/about-us/newsroom-and-events/blog/2015/september/factoring-rsa-keys-with-tls-perfect-forward-secrecy/<br /> - https://simple.wikipedia.org/wiki/Diffie-Hellman_key_exchange<br /> - http://bibmath.net/crypto/index.php?action=affiche&amp;quoi=complements/resteschinois</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=VT2015_Factoring_RSA&diff=24017 2015-10-09T06:57:59Z

<p>Sebastien.Toussaint: </p> <hr /> <div>= Présentation =<br /> * Enseignants : Georges-Pierre Bonneau, Didier Donsez (VT2015) <br /> * Sujet : Factoring RSA Keys With TLS Perfect Forward Secrecy<br /> * Auteur : Sébastien TOUSSAINT<br /> * Date : 02 octobre 2015 <br /> <br /> <br /> == Mots Clés ==<br /> RSA, théorème des restes chinois, TLS, Perfect foward secrecy, confidentialité persitante, handshake, diffie-hellman.<br /> <br /> = Synthèse =<br /> == Introduction ==<br /> La croissance importante des transactions effectuées sur internet dans le début-milieu des années 90 et début des années 2000 a sensibilisé les chercheurs à trouver et développer des techniques de sécurisation des données sur internet. Le 21 septembre 2000, la fin du brevet de chiffrement RSA détenu jusqu’alors par le Massachusetts Institute of Technology (MIT), fut une grande avancée dans la sécurisation des données confidentielles sur internet. Ce système de chiffrement est le plus sûr aujourd’hui. Un article de Florian Weimer paru le 2 septembre 2015 dit qu’il est possible de récupérer des clés privées de RSA, spécialement, si elles ont été implémentées été implémenté à l’aide du théorème des restes chinois. Nous allons dans cette synthèse revenir sur les bases de RSA, du théorème des restes chinois et le TLS perfect foward secrecy avec ses mécanismes (handshake, Diffie-Hellman) avant d’étudier les travaux de Florian Weimer.<br /> <br /> == Le chiffrement RSA ==<br /> Le chiffrement RSA est un système de cryptographie asymétrique. Cela signifie qu’il y existe deux clés dans notre système. Une clé privée connue par une seule entité. Elle va lui permettre de déchiffrer les messages qui lui ont été envoyés. Une clé publique connue de tout le monde et qui va chiffrer le message que l’on souhaite envoyer. Ces clés sont produites par une seule entité.<br /> <br /> [[File:rsa.png|center|thumb|700px]]<br /> <br /> L’image ci-dessus représente une communication RSA entre deux utilisateurs, Alice et Bob. Les éléments en vert sur l’image représentent les informations en clair dans le canal de communication de ce protocole, donc tout le monde y a accès. Les éléments en rouge représentent les informations privées de chaque utilisateur. Donc du côté d’Alice ces informations permettent de créer sa clé privée. Tout d’abord Alice choisit deux nombres premiers distincts p et q puis elle fait leur produit afin d’obtenir le nombre n, ensuite l’indicateur de Euler ou fonction Phi de n f = (p-1) (q-1). Puis on calcul e premier avec f donc e = 5 et on calcule d, inverse de e modulo f. Donc pour chiffrer les messages nous avons y = x^e mod n. Et pour déchiffrer les messages nous avons z = y^d mod n.<br /> <br /> == Le théorème des restes chinois ==<br /> Théorème : Prenons m1, ..., m n des entiers supérieurs à 2 deux à deux premiers entre eux, et a1,...,an des entiers. Le système d'équations :<br /> <br /> [[File:trc.png|center|thumb|500px]]<br /> <br /> admet une unique solution modulo M=m1×⋯×mn qui est donnée par la formule :<br /> x=a1M1y1+⋯+anMnyn<br /> où Mi = et yi = Mod mi pour tout i compris entre 1 et n.<br /> <br /> <br /> == Transport Layer Security (TLS) ==<br /> Transport Layer Security (TLS) est un protocole qui garantit la confidentialité entre les applications et leurs utilisateurs sur Internet. Quand un serveur et le client communiquent, TLS garantit qu'aucun tiers ne peut être espionné ou altérer un message. TLS est le successeur du protocole Secure Sockets Layer (SSL). Ce type de protocole est né du fait que plusieurs sites ont commencé à proposer des transactions (achats en ligne notamment). Afin de favoriser l’utilisation de ces plateformes de transaction, des protocoles de sécurisation des données des utilisateurs furent mis en place. En 2009, TLS est utilisé par la plupart des navigateurs Web. L'internaute peut reconnaître qu'une transaction est chiffrée à plusieurs signes : <br /> * l'URL dans la barre d'adresse commence par https et non http (https://...) ;<br /> * affichage d'une clé ou un cadenas<br /> <br /> <br /> == La confidentialité persistante (Perfect Forward Secrecy) ==<br /> <br /> Une fois que la clé privée de certains sites Web HTTPS est compromise, un attaquant est capable de construire une attaque « man-in-the-middle » pour intercepter et décrypter toute communication avec le site Web. La première étape contre une telle attaque est la révocation du certificat associé. Malheureusement, l'attaquant pourrait également avoir enregistré des communications passées protégées par cette clé privée et donc les décrypter. Forward secrecy permet à l'information d'aujourd'hui d’être gardée secrète, même si la clé privée est compromise dans l'avenir. La réalisation de cette propriété est généralement coûteuse et par conséquent, la plupart des serveurs web ne le permet pas.<br /> <br /> == Diffie-Hellman &amp; Handshake ==<br /> === Handshake ===<br /> En informatique, en télécommunications et dans les domaines associés, le handshaking ou &quot;handshake&quot; (&quot;poignée de main&quot; en français) est un processus automatisé de négociations qui établit les paramètres d'une communication entre deux entités avant que la communication commence. Un handshake est fait au moment où un ordinateur veut entreprendre une communication avec un appareil plus ou moins éloigné, par exemple un modem, une imprimante ou un serveur.<br /> <br /> <br /> === Diffie-Hellman ===<br /> Diffie-Hellman est une méthode par laquelle deux personnes nommées conventionnellement Alice et Bob peuvent se mettre d'accord sur un nombre (qu'ils peuvent utiliser comme clé pour chiffrer la conversation suivante) sans qu'une troisième personne appelée Ève puisse découvrir le nombre, même en ayant écouté tous leurs échanges.<br /> <br /> [[File:d-f.png|center|thumb|500px]]<br /> <br /> <br /> == Factoring RSA Keys With TLS Perfect Forward Secrecy == <br /> Dans un rapport de Florian Weimer paru le 9 septembre 2015, ce dernier affirme avoir réussi à récupérer des clés RSA. En effet il dit que les protocoles utilisant le protocole RSA avec les théorèmes des restes chinois pour mettre en place le TLS avec de la confidentialité persistante sont les plus vulnérables. Mais les seuls genres d’attaques capables de permettre une telle vulnérabilité sont les attaques Lenstra. <br /> <br /> Les attaques Lenstra sont des attaques sur les canaux auxiliaires. Ils sont dus à de mauvaises implémentations logicielles ou matérielles (veilles librairies, UAL fatiguée, erreurs dans une mémoire cache …) des crypto-systèmes. Donc cela ne remet pas en cause les protocoles de cryptographie et ici dans notre cas le RSA. <br /> <br /> === La faille === <br /> Dans le rapport de Weimer, la formule utilisée pour effectuer la signature est la suivante :<br /> * y_p = x^d modulo p<br /> * y_q = x^d modulo q<br /> * y = y_p q (q^{-1} modulo p) + y_q p (p^{-1} modulo q) modulo n.<br /> <br /> Mais si un problème survient durant le calcul de y_p, que nous allons appeler w_p. Alors nous avons <br /> * Y = Y_p modulo p<br /> * Y = y_q modulo q<br /> <br /> Si nous mettons le tout à la puissance (voir rappel sur RSA) et que nous enlevons x nous avons :<br /> * Y^e - x = Y_p^e - x = a modulo p<br /> * Y^e - x = y_q^e - x = 0 modulo q<br /> <br /> Et là nous savons que q divise w_p et que q divise aussi n. Alors que p ne divise plus Y^e – x. Il nous reste plus qu’à faire le PGCD de n et Y^e – x pour trouver q.<br /> <br /> [[File:tls.png|center|thumb|700px]]<br /> <br /> D’un point de vue réseau il s’agit d’une trame en plus que fournit le serveur au client durant le handshake TLS. Dans cette trame il y a la clé publique du serveur. Cette trame ne dit pas quel algorithme a été utilisé pour faire l’échange de clé; et ceci peut conduire à une longue série d’attaque. Selon le rapport de Florian Weimer il existe un seul moyen de prévenir cette erreur, il faut vérifier que la signature ait été bien faite. <br /> <br /> Cette fuite est visible pour le client qui réalise la poignée de mains TLS ou un observateur passif qui intercepte le trafic réseau&quot; écrit Florian Weimer<br /> <br /> Florian Weimer explique que &quot;dans les cas de fuites de clés que nous avons observé, l'attaquant à distance ne peut pas organiser une fuite de clés à la demande étant donné qu'il n'est pas en mesure de manipuler le serveur du réseau d'une manière qui augmenterait la probabilité d'une fuite de réseau dans une poignées de main TLS. L'individu malintentionné peut uniquement intercepter un maximum de poignées de main, probablement en initialisant une multitude de poignées&quot;.<br /> <br /> === A ne pas faire ===<br /> &quot;La désactivation de la confidentialité persistante permettrait aux observateurs passifs qui auraient voler des clés, de déchiffrer les sessions TLS à venir dans le trafic réseau intercepté, sans devoir rediriger la connexion du client. Autrement, la désactivation de la confidentialité persistante ne contribue qu'à la détérioration de la situation. (la désactivation de la confidentialité persistance et le remplacement du certificat du serveur, quant à eux, fonctionnent)&quot; écrit Florian Weimer.<br /> <br /> <br /> = Conclusion =<br /> <br /> Pour résumer, le chiffrement RSA avec la confidentialité persistante de TLS sont des protocoles sûrs. Mais l’implémentation de ces protocoles peut être mal effectuée et donc être vulnérable aux attaques de Lenstra. Pour prévenir ce problème il faut bien vérifier l’implémentation de ces algorithmes et faire en sorte qu’il ne soit pas vulnérable aux problèmes matériels. <br /> <br /> Concernant les logiciels qui utilisent ces protocoles, ils ont été prévenus et ont mieux protégés leurs implémentations. Si vous voulez savoir si votre système est bien implémenté il est conseillé de contacter votre fournisseur d'outil d'outils de chiffrement pour en être certain.<br /> <br /> = Notes et références =<br /> - https://securityblog.redhat.com/2015/09/02/factoring-rsa-keys-with-tls-perfect-forward-secrecy/<br /> - http://villemin.gerard.free.fr/Crypto/RSA.htm<br /> - http://blog.terraverdeservices.com/rsa-key-factoring-vulnerability-using-perfect-forward-secrecy<br /> - https://www.nccgroup.trust/us/about-us/newsroom-and-events/blog/2015/september/factoring-rsa-keys-with-tls-perfect-forward-secrecy/<br /> - https://simple.wikipedia.org/wiki/Diffie-Hellman_key_exchange<br /> - http://bibmath.net/crypto/index.php?action=affiche&amp;quoi=complements/resteschinois</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=VT2015_Factoring_RSA&diff=24014 2015-10-09T06:54:48Z

<p>Sebastien.Toussaint: /* Conclusion */</p> <hr /> <div>= Présentation =<br /> * Enseignants : Georges-Pierre Bonneau, Didier Donsez (VT2015) <br /> * Sujet : Factoring RSA Keys With TLS Perfect Forward Secrecy<br /> * Auteur : Sébastien TOUSSAINT<br /> * Date : 02 octobre 2015 <br /> <br /> <br /> == Mots Clés ==<br /> RSA, théorème des restes chinois, TLS, Perfect foward secrecy, confidentialité persitante, handshake, diffie-hellman.<br /> <br /> = Synthèse =<br /> == Introduction ==<br /> La croissance importante des transactions effectuées sur internet dans le début-milieu des années 90 et début des années 2000 a sensibilisé les chercheurs à trouver et développer des techniques de sécurisation des données sur internet. Le 21 septembre 2000, la fin du brevet de chiffrement RSA détenu jusqu’alors par le Massachusetts Institute of Technology (MIT), fut une grande avancée dans la sécurisation des données confidentielles sur internet. Ce système de chiffrement est le plus sûr aujourd’hui. Un article de Florian Weimer paru le 2 septembre 2015 dit qu’il est possible de récupérer des clés privées de RSA, spécialement, si elles ont été implémentées été implémenté à l’aide du théorème des restes chinois. Nous allons dans cette synthèse revenir sur les bases de RSA, du théorème des restes chinois et le TLS perfect foward secrecy avec ses mécanismes (handshake, Diffie-Hellman) avant d’étudier les travaux de Florian Weimer.<br /> <br /> == Le chiffrement RSA ==<br /> Le chiffrement RSA est un système de cryptographie asymétrique. Cela signifie qu’il y existe deux clés dans notre système. Une clé privée connue par une seule entité. Elle va lui permettre de déchiffrer les messages qui lui ont été envoyés. Une clé publique connue de tout le monde et qui va chiffrer le message que l’on souhaite envoyer. Ces clés sont produites par une seule entité.<br /> <br /> [[File:rsa.png|center|thumb|700px]]<br /> <br /> L’image ci-dessus représente une communication RSA entre deux utilisateurs, Alice et Bob. Les éléments en vert sur l’image représentent les informations en clair dans le canal de communication de ce protocole, donc tout le monde y a accès. Les éléments en rouge représentent les informations privées de chaque utilisateur. Donc du côté d’Alice ces informations permettent de créer sa clé privée. Tout d’abord Alice choisit deux nombres premiers distincts p et q puis elle fait leur produit afin d’obtenir le nombre n, ensuite l’indicateur de Euler ou fonction Phi de n f = (p-1) (q-1). Puis on calcul e premier avec f donc e = 5 et on calcule d, inverse de e modulo f. Donc pour chiffrer les messages nous avons y = x^e mod n. Et pour déchiffrer les messages nous avons z = y^d mod n.<br /> <br /> == Le théorème des restes chinois ==<br /> Théorème : Prenons m1, ..., m n des entiers supérieurs à 2 deux à deux premiers entre eux, et a1,...,an des entiers. Le système d'équations :<br /> <br /> [[File:trc.png|center|thumb|500px]]<br /> <br /> admet une unique solution modulo M=m1×⋯×mn qui est donnée par la formule :<br /> x=a1M1y1+⋯+anMnyn<br /> où Mi = et yi = Mod mi pour tout i compris entre 1 et n.<br /> <br /> <br /> == Transport Layer Security (TLS) ==<br /> Transport Layer Security (TLS) est un protocole qui garantit la confidentialité entre les applications et leurs utilisateurs sur Internet. Quand un serveur et le client communiquent, TLS garantit qu'aucun tiers ne peut être espionné ou altérer un message. TLS est le successeur du protocole Secure Sockets Layer (SSL). Ce type de protocole est né du fait que plusieurs sites ont commencé à proposer des transactions (achats en ligne notamment). Afin de favoriser l’utilisation de ces plateformes de transaction, des protocoles de sécurisation des données des utilisateurs furent mis en place. En 2009, TLS est utilisé par la plupart des navigateurs Web. L'internaute peut reconnaître qu'une transaction est chiffrée à plusieurs signes : <br /> * l'URL dans la barre d'adresse commence par https et non http (https://...) ;<br /> * affichage d'une clé ou un cadenas<br /> <br /> <br /> == La confidentialité persistante (Perfect Forward Secrecy) ==<br /> <br /> Une fois que la clé privée de certains sites Web HTTPS est compromise, un attaquant est capable de construire une attaque « man-in-the-middle » pour intercepter et décrypter toute communication avec le site Web. La première étape contre une telle attaque est la révocation du certificat associé. Malheureusement, l'attaquant pourrait également avoir enregistré des communications passées protégées par cette clé privée et donc les décrypter. Forward secrecy permet à l'information d'aujourd'hui d’être gardée secrète, même si la clé privée est compromise dans l'avenir. La réalisation de cette propriété est généralement coûteuse et par conséquent, la plupart des serveurs web ne le permet pas.<br /> <br /> == Diffie-Hellman &amp; Handshake ==<br /> === Handshake ===<br /> En informatique, en télécommunications et dans les domaines associés, le handshaking ou &quot;handshake&quot; (&quot;poignée de main&quot; en français) est un processus automatisé de négociations qui établit les paramètres d'une communication entre deux entités avant que la communication commence. Un handshake est fait au moment où un ordinateur veut entreprendre une communication avec un appareil plus ou moins éloigné, par exemple un modem, une imprimante ou un serveur.<br /> <br /> <br /> === Diffie-Hellman ===<br /> Diffie-Hellman est une méthode par laquelle deux personnes nommées conventionnellement Alice et Bob peuvent se mettre d'accord sur un nombre (qu'ils peuvent utiliser comme clé pour chiffrer la conversation suivante) sans qu'une troisième personne appelée Ève puisse découvrir le nombre, même en ayant écouté tous leurs échanges.<br /> <br /> [[File:d-f.png|center|thumb|500px]]<br /> <br /> <br /> == Factoring RSA Keys With TLS Perfect Forward Secrecy == <br /> Dans un rapport de Florian Weimer paru le 9 septembre 2015, ce dernier affirme avoir réussi à récupérer des clés RSA. En effet il dit que les protocoles utilisant le protocole RSA avec les théorèmes des restes chinois pour mettre en place le TLS avec de la confidentialité persistante sont les plus vulnérables. Mais les seuls genres d’attaques capables de permettre une telle vulnérabilité sont les attaques Lenstra. <br /> <br /> Les attaques Lenstra sont des attaques sur les canaux auxiliaires. Ils sont dus à de mauvaises implémentations logicielles ou matérielles (veilles librairies, UAL fatiguée, erreurs dans une mémoire cache …) des crypto-systèmes. Donc cela ne remet pas en cause les protocoles de cryptographie et ici dans notre cas le RSA. <br /> <br /> === La faille === <br /> Dans le rapport de Weimer, la formule utilisée pour effectuer la signature est la suivante :<br /> * y_p = x^d modulo p<br /> * y_q = x^d modulo q<br /> * y = y_p q (q^{-1} modulo p) + y_q p (p^{-1} modulo q) modulo n.<br /> <br /> Mais si un problème survient durant le calcul de y_p, que nous allons appeler w_p. Alors nous avons <br /> * Y = Y_p modulo p<br /> * Y = y_q modulo q<br /> <br /> Si nous mettons le tout à la puissance (voir rappel sur RSA) et que nous enlevons x nous avons :<br /> * Y^e - x = Y_p^e - x = a modulo p<br /> * Y^e - x = y_q^e - x = 0 modulo q<br /> <br /> Et là nous savons que q divise w_p et que q divise aussi n. Alors que p ne divise plus Y^e – x. Il nous reste plus qu’à faire le PGCD de n et Y^e – x pour trouver q.<br /> <br /> [[File:tls.png|center|thumb|700px]]<br /> <br /> D’un point de vue réseau il s’agit d’une trame en plus que fournit le serveur au client durant le handshake TLS. Dans cette trame il y a la clé publique du serveur. Cette trame ne dit pas quel algorithme a été utilisé pour faire l’échange de clé; et ceci peut conduire à une longue série d’attaque. Selon le rapport de Florian Weimer il existe un seul moyen de prévenir cette erreur, il faut vérifier que la signature ait été bien faite. <br /> <br /> Cette fuite est visible pour le client qui réalise la poignée de mains TLS ou un observateur passif qui intercepte le trafic réseau&quot; écrit Florian Weimer<br /> <br /> <br /> = Conclusion =<br /> <br /> Pour résumer, le chiffrement RSA avec la confidentialité persistante de TLS sont des protocoles sûrs. Mais l’implémentation de ces protocoles peut être mal effectuée et donc être vulnérable aux attaques de Lenstra. Pour prévenir ce problème il faut bien vérifier l’implémentation de ces algorithmes et faire en sorte qu’il ne soit pas vulnérable aux problèmes matériels. <br /> <br /> Concernant les logiciels qui utilisent ces protocoles, ils ont été prévenus et ont mieux protégés leurs implémentations. Si vous voulez savoir si votre système est bien implémenté il est conseillé de contacter votre fournisseur d'outil d'outils de chiffrement pour en être certain.<br /> <br /> = Notes et références =<br /> - https://securityblog.redhat.com/2015/09/02/factoring-rsa-keys-with-tls-perfect-forward-secrecy/<br /> - http://villemin.gerard.free.fr/Crypto/RSA.htm<br /> - http://blog.terraverdeservices.com/rsa-key-factoring-vulnerability-using-perfect-forward-secrecy<br /> - https://www.nccgroup.trust/us/about-us/newsroom-and-events/blog/2015/september/factoring-rsa-keys-with-tls-perfect-forward-secrecy/<br /> - https://simple.wikipedia.org/wiki/Diffie-Hellman_key_exchange<br /> - http://bibmath.net/crypto/index.php?action=affiche&amp;quoi=complements/resteschinois</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=VT2015_Factoring_RSA&diff=24013 2015-10-09T06:53:49Z

<p>Sebastien.Toussaint: /* Conclusion */</p> <hr /> <div>= Présentation =<br /> * Enseignants : Georges-Pierre Bonneau, Didier Donsez (VT2015) <br /> * Sujet : Factoring RSA Keys With TLS Perfect Forward Secrecy<br /> * Auteur : Sébastien TOUSSAINT<br /> * Date : 02 octobre 2015 <br /> <br /> <br /> == Mots Clés ==<br /> RSA, théorème des restes chinois, TLS, Perfect foward secrecy, confidentialité persitante, handshake, diffie-hellman.<br /> <br /> = Synthèse =<br /> == Introduction ==<br /> La croissance importante des transactions effectuées sur internet dans le début-milieu des années 90 et début des années 2000 a sensibilisé les chercheurs à trouver et développer des techniques de sécurisation des données sur internet. Le 21 septembre 2000, la fin du brevet de chiffrement RSA détenu jusqu’alors par le Massachusetts Institute of Technology (MIT), fut une grande avancée dans la sécurisation des données confidentielles sur internet. Ce système de chiffrement est le plus sûr aujourd’hui. Un article de Florian Weimer paru le 2 septembre 2015 dit qu’il est possible de récupérer des clés privées de RSA, spécialement, si elles ont été implémentées été implémenté à l’aide du théorème des restes chinois. Nous allons dans cette synthèse revenir sur les bases de RSA, du théorème des restes chinois et le TLS perfect foward secrecy avec ses mécanismes (handshake, Diffie-Hellman) avant d’étudier les travaux de Florian Weimer.<br /> <br /> == Le chiffrement RSA ==<br /> Le chiffrement RSA est un système de cryptographie asymétrique. Cela signifie qu’il y existe deux clés dans notre système. Une clé privée connue par une seule entité. Elle va lui permettre de déchiffrer les messages qui lui ont été envoyés. Une clé publique connue de tout le monde et qui va chiffrer le message que l’on souhaite envoyer. Ces clés sont produites par une seule entité.<br /> <br /> [[File:rsa.png|center|thumb|700px]]<br /> <br /> L’image ci-dessus représente une communication RSA entre deux utilisateurs, Alice et Bob. Les éléments en vert sur l’image représentent les informations en clair dans le canal de communication de ce protocole, donc tout le monde y a accès. Les éléments en rouge représentent les informations privées de chaque utilisateur. Donc du côté d’Alice ces informations permettent de créer sa clé privée. Tout d’abord Alice choisit deux nombres premiers distincts p et q puis elle fait leur produit afin d’obtenir le nombre n, ensuite l’indicateur de Euler ou fonction Phi de n f = (p-1) (q-1). Puis on calcul e premier avec f donc e = 5 et on calcule d, inverse de e modulo f. Donc pour chiffrer les messages nous avons y = x^e mod n. Et pour déchiffrer les messages nous avons z = y^d mod n.<br /> <br /> == Le théorème des restes chinois ==<br /> Théorème : Prenons m1, ..., m n des entiers supérieurs à 2 deux à deux premiers entre eux, et a1,...,an des entiers. Le système d'équations :<br /> <br /> [[File:trc.png|center|thumb|500px]]<br /> <br /> admet une unique solution modulo M=m1×⋯×mn qui est donnée par la formule :<br /> x=a1M1y1+⋯+anMnyn<br /> où Mi = et yi = Mod mi pour tout i compris entre 1 et n.<br /> <br /> <br /> == Transport Layer Security (TLS) ==<br /> Transport Layer Security (TLS) est un protocole qui garantit la confidentialité entre les applications et leurs utilisateurs sur Internet. Quand un serveur et le client communiquent, TLS garantit qu'aucun tiers ne peut être espionné ou altérer un message. TLS est le successeur du protocole Secure Sockets Layer (SSL). Ce type de protocole est né du fait que plusieurs sites ont commencé à proposer des transactions (achats en ligne notamment). Afin de favoriser l’utilisation de ces plateformes de transaction, des protocoles de sécurisation des données des utilisateurs furent mis en place. En 2009, TLS est utilisé par la plupart des navigateurs Web. L'internaute peut reconnaître qu'une transaction est chiffrée à plusieurs signes : <br /> * l'URL dans la barre d'adresse commence par https et non http (https://...) ;<br /> * affichage d'une clé ou un cadenas<br /> <br /> <br /> == La confidentialité persistante (Perfect Forward Secrecy) ==<br /> <br /> Une fois que la clé privée de certains sites Web HTTPS est compromise, un attaquant est capable de construire une attaque « man-in-the-middle » pour intercepter et décrypter toute communication avec le site Web. La première étape contre une telle attaque est la révocation du certificat associé. Malheureusement, l'attaquant pourrait également avoir enregistré des communications passées protégées par cette clé privée et donc les décrypter. Forward secrecy permet à l'information d'aujourd'hui d’être gardée secrète, même si la clé privée est compromise dans l'avenir. La réalisation de cette propriété est généralement coûteuse et par conséquent, la plupart des serveurs web ne le permet pas.<br /> <br /> == Diffie-Hellman &amp; Handshake ==<br /> === Handshake ===<br /> En informatique, en télécommunications et dans les domaines associés, le handshaking ou &quot;handshake&quot; (&quot;poignée de main&quot; en français) est un processus automatisé de négociations qui établit les paramètres d'une communication entre deux entités avant que la communication commence. Un handshake est fait au moment où un ordinateur veut entreprendre une communication avec un appareil plus ou moins éloigné, par exemple un modem, une imprimante ou un serveur.<br /> <br /> <br /> === Diffie-Hellman ===<br /> Diffie-Hellman est une méthode par laquelle deux personnes nommées conventionnellement Alice et Bob peuvent se mettre d'accord sur un nombre (qu'ils peuvent utiliser comme clé pour chiffrer la conversation suivante) sans qu'une troisième personne appelée Ève puisse découvrir le nombre, même en ayant écouté tous leurs échanges.<br /> <br /> [[File:d-f.png|center|thumb|500px]]<br /> <br /> <br /> == Factoring RSA Keys With TLS Perfect Forward Secrecy == <br /> Dans un rapport de Florian Weimer paru le 9 septembre 2015, ce dernier affirme avoir réussi à récupérer des clés RSA. En effet il dit que les protocoles utilisant le protocole RSA avec les théorèmes des restes chinois pour mettre en place le TLS avec de la confidentialité persistante sont les plus vulnérables. Mais les seuls genres d’attaques capables de permettre une telle vulnérabilité sont les attaques Lenstra. <br /> <br /> Les attaques Lenstra sont des attaques sur les canaux auxiliaires. Ils sont dus à de mauvaises implémentations logicielles ou matérielles (veilles librairies, UAL fatiguée, erreurs dans une mémoire cache …) des crypto-systèmes. Donc cela ne remet pas en cause les protocoles de cryptographie et ici dans notre cas le RSA. <br /> <br /> === La faille === <br /> Dans le rapport de Weimer, la formule utilisée pour effectuer la signature est la suivante :<br /> * y_p = x^d modulo p<br /> * y_q = x^d modulo q<br /> * y = y_p q (q^{-1} modulo p) + y_q p (p^{-1} modulo q) modulo n.<br /> <br /> Mais si un problème survient durant le calcul de y_p, que nous allons appeler w_p. Alors nous avons <br /> * Y = Y_p modulo p<br /> * Y = y_q modulo q<br /> <br /> Si nous mettons le tout à la puissance (voir rappel sur RSA) et que nous enlevons x nous avons :<br /> * Y^e - x = Y_p^e - x = a modulo p<br /> * Y^e - x = y_q^e - x = 0 modulo q<br /> <br /> Et là nous savons que q divise w_p et que q divise aussi n. Alors que p ne divise plus Y^e – x. Il nous reste plus qu’à faire le PGCD de n et Y^e – x pour trouver q.<br /> <br /> [[File:tls.png|center|thumb|700px]]<br /> <br /> D’un point de vue réseau il s’agit d’une trame en plus que fournit le serveur au client durant le handshake TLS. Dans cette trame il y a la clé publique du serveur. Cette trame ne dit pas quel algorithme a été utilisé pour faire l’échange de clé; et ceci peut conduire à une longue série d’attaque. Selon le rapport de Florian Weimer il existe un seul moyen de prévenir cette erreur, il faut vérifier que la signature ait été bien faite. <br /> <br /> Cette fuite est visible pour le client qui réalise la poignée de mains TLS ou un observateur passif qui intercepte le trafic réseau&quot; écrit Florian Weimer<br /> <br /> <br /> = Conclusion =<br /> <br /> Pour résumer, le chiffrement RSA avec la confidentialité persistante de TLS sont des protocoles sûrs. Mais l’implémentation de ces protocoles peut être mal effectuée et donc être vulnérable aux attaques de Lenstra. Pour prévenir ce problème il faut bien vérifier l’implémentation de ces algorithmes et faire en sorte qu’il ne soit pas vulnérable aux problèmes matériels. <br /> Concernant les logiciels qui utilisent ces protocoles, ils ont été prévenus et ont mieux protégés leurs implémentations. Si vous voulez savoir si votre système est bien implémenté il est conseillé de contacter votre fournisseur d'outil d'outils de chiffrement pour en être certain.<br /> <br /> = Notes et références =<br /> - https://securityblog.redhat.com/2015/09/02/factoring-rsa-keys-with-tls-perfect-forward-secrecy/<br /> - http://villemin.gerard.free.fr/Crypto/RSA.htm<br /> - http://blog.terraverdeservices.com/rsa-key-factoring-vulnerability-using-perfect-forward-secrecy<br /> - https://www.nccgroup.trust/us/about-us/newsroom-and-events/blog/2015/september/factoring-rsa-keys-with-tls-perfect-forward-secrecy/<br /> - https://simple.wikipedia.org/wiki/Diffie-Hellman_key_exchange<br /> - http://bibmath.net/crypto/index.php?action=affiche&amp;quoi=complements/resteschinois</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=VT2015_Factoring_RSA&diff=24011 2015-10-09T06:46:43Z

<p>Sebastien.Toussaint: /* Notes et références */</p> <hr /> <div>= Présentation =<br /> * Enseignants : Georges-Pierre Bonneau, Didier Donsez (VT2015) <br /> * Sujet : Factoring RSA Keys With TLS Perfect Forward Secrecy<br /> * Auteur : Sébastien TOUSSAINT<br /> * Date : 02 octobre 2015 <br /> <br /> <br /> == Mots Clés ==<br /> RSA, théorème des restes chinois, TLS, Perfect foward secrecy, confidentialité persitante, handshake, diffie-hellman.<br /> <br /> = Synthèse =<br /> == Introduction ==<br /> La croissance importante des transactions effectuées sur internet dans le début-milieu des années 90 et début des années 2000 a sensibilisé les chercheurs à trouver et développer des techniques de sécurisation des données sur internet. Le 21 septembre 2000, la fin du brevet de chiffrement RSA détenu jusqu’alors par le Massachusetts Institute of Technology (MIT), fut une grande avancée dans la sécurisation des données confidentielles sur internet. Ce système de chiffrement est le plus sûr aujourd’hui. Un article de Florian Weimer paru le 2 septembre 2015 dit qu’il est possible de récupérer des clés privées de RSA, spécialement, si elles ont été implémentées été implémenté à l’aide du théorème des restes chinois. Nous allons dans cette synthèse revenir sur les bases de RSA, du théorème des restes chinois et le TLS perfect foward secrecy avec ses mécanismes (handshake, Diffie-Hellman) avant d’étudier les travaux de Florian Weimer.<br /> <br /> == Le chiffrement RSA ==<br /> Le chiffrement RSA est un système de cryptographie asymétrique. Cela signifie qu’il y existe deux clés dans notre système. Une clé privée connue par une seule entité. Elle va lui permettre de déchiffrer les messages qui lui ont été envoyés. Une clé publique connue de tout le monde et qui va chiffrer le message que l’on souhaite envoyer. Ces clés sont produites par une seule entité.<br /> <br /> [[File:rsa.png|center|thumb|700px]]<br /> <br /> L’image ci-dessus représente une communication RSA entre deux utilisateurs, Alice et Bob. Les éléments en vert sur l’image représentent les informations en clair dans le canal de communication de ce protocole, donc tout le monde y a accès. Les éléments en rouge représentent les informations privées de chaque utilisateur. Donc du côté d’Alice ces informations permettent de créer sa clé privée. Tout d’abord Alice choisit deux nombres premiers distincts p et q puis elle fait leur produit afin d’obtenir le nombre n, ensuite l’indicateur de Euler ou fonction Phi de n f = (p-1) (q-1). Puis on calcul e premier avec f donc e = 5 et on calcule d, inverse de e modulo f. Donc pour chiffrer les messages nous avons y = x^e mod n. Et pour déchiffrer les messages nous avons z = y^d mod n.<br /> <br /> == Le théorème des restes chinois ==<br /> Théorème : Prenons m1, ..., m n des entiers supérieurs à 2 deux à deux premiers entre eux, et a1,...,an des entiers. Le système d'équations :<br /> <br /> [[File:trc.png|center|thumb|500px]]<br /> <br /> admet une unique solution modulo M=m1×⋯×mn qui est donnée par la formule :<br /> x=a1M1y1+⋯+anMnyn<br /> où Mi = et yi = Mod mi pour tout i compris entre 1 et n.<br /> <br /> <br /> == Transport Layer Security (TLS) ==<br /> Transport Layer Security (TLS) est un protocole qui garantit la confidentialité entre les applications et leurs utilisateurs sur Internet. Quand un serveur et le client communiquent, TLS garantit qu'aucun tiers ne peut être espionné ou altérer un message. TLS est le successeur du protocole Secure Sockets Layer (SSL). Ce type de protocole est né du fait que plusieurs sites ont commencé à proposer des transactions (achats en ligne notamment). Afin de favoriser l’utilisation de ces plateformes de transaction, des protocoles de sécurisation des données des utilisateurs furent mis en place. En 2009, TLS est utilisé par la plupart des navigateurs Web. L'internaute peut reconnaître qu'une transaction est chiffrée à plusieurs signes : <br /> * l'URL dans la barre d'adresse commence par https et non http (https://...) ;<br /> * affichage d'une clé ou un cadenas<br /> <br /> <br /> == La confidentialité persistante (Perfect Forward Secrecy) ==<br /> <br /> Une fois que la clé privée de certains sites Web HTTPS est compromise, un attaquant est capable de construire une attaque « man-in-the-middle » pour intercepter et décrypter toute communication avec le site Web. La première étape contre une telle attaque est la révocation du certificat associé. Malheureusement, l'attaquant pourrait également avoir enregistré des communications passées protégées par cette clé privée et donc les décrypter. Forward secrecy permet à l'information d'aujourd'hui d’être gardée secrète, même si la clé privée est compromise dans l'avenir. La réalisation de cette propriété est généralement coûteuse et par conséquent, la plupart des serveurs web ne le permet pas.<br /> <br /> == Diffie-Hellman &amp; Handshake ==<br /> === Handshake ===<br /> En informatique, en télécommunications et dans les domaines associés, le handshaking ou &quot;handshake&quot; (&quot;poignée de main&quot; en français) est un processus automatisé de négociations qui établit les paramètres d'une communication entre deux entités avant que la communication commence. Un handshake est fait au moment où un ordinateur veut entreprendre une communication avec un appareil plus ou moins éloigné, par exemple un modem, une imprimante ou un serveur.<br /> <br /> <br /> === Diffie-Hellman ===<br /> Diffie-Hellman est une méthode par laquelle deux personnes nommées conventionnellement Alice et Bob peuvent se mettre d'accord sur un nombre (qu'ils peuvent utiliser comme clé pour chiffrer la conversation suivante) sans qu'une troisième personne appelée Ève puisse découvrir le nombre, même en ayant écouté tous leurs échanges.<br /> <br /> [[File:d-f.png|center|thumb|500px]]<br /> <br /> <br /> == Factoring RSA Keys With TLS Perfect Forward Secrecy == <br /> Dans un rapport de Florian Weimer paru le 9 septembre 2015, ce dernier affirme avoir réussi à récupérer des clés RSA. En effet il dit que les protocoles utilisant le protocole RSA avec les théorèmes des restes chinois pour mettre en place le TLS avec de la confidentialité persistante sont les plus vulnérables. Mais les seuls genres d’attaques capables de permettre une telle vulnérabilité sont les attaques Lenstra. <br /> <br /> Les attaques Lenstra sont des attaques sur les canaux auxiliaires. Ils sont dus à de mauvaises implémentations logicielles ou matérielles (veilles librairies, UAL fatiguée, erreurs dans une mémoire cache …) des crypto-systèmes. Donc cela ne remet pas en cause les protocoles de cryptographie et ici dans notre cas le RSA. <br /> <br /> === La faille === <br /> Dans le rapport de Weimer, la formule utilisée pour effectuer la signature est la suivante :<br /> * y_p = x^d modulo p<br /> * y_q = x^d modulo q<br /> * y = y_p q (q^{-1} modulo p) + y_q p (p^{-1} modulo q) modulo n.<br /> <br /> Mais si un problème survient durant le calcul de y_p, que nous allons appeler w_p. Alors nous avons <br /> * Y = Y_p modulo p<br /> * Y = y_q modulo q<br /> <br /> Si nous mettons le tout à la puissance (voir rappel sur RSA) et que nous enlevons x nous avons :<br /> * Y^e - x = Y_p^e - x = a modulo p<br /> * Y^e - x = y_q^e - x = 0 modulo q<br /> <br /> Et là nous savons que q divise w_p et que q divise aussi n. Alors que p ne divise plus Y^e – x. Il nous reste plus qu’à faire le PGCD de n et Y^e – x pour trouver q.<br /> <br /> [[File:tls.png|center|thumb|700px]]<br /> <br /> D’un point de vue réseau il s’agit d’une trame en plus que fournit le serveur au client durant le handshake TLS. Dans cette trame il y a la clé publique du serveur. Cette trame ne dit pas quel algorithme a été utilisé pour faire l’échange de clé; et ceci peut conduire à une longue série d’attaque. Selon le rapport de Florian Weimer il existe un seul moyen de prévenir cette erreur, il faut vérifier que la signature ait été bien faite. <br /> <br /> Cette fuite est visible pour le client qui réalise la poignée de mains TLS ou un observateur passif qui intercepte le trafic réseau&quot; écrit Florian Weimer<br /> <br /> <br /> = Conclusion =<br /> <br /> Pour résumer, le chiffrement RSA avec la confidentialité persistante de TLS sont des protocoles sûrs. Mais l’implémentation de ces protocoles peut être mal effectuée et donc être vulnérable aux attaques de Lenstra. Pour prévenir ce problème il faut bien vérifier l’implémentation de ces algorithmes et faire en sorte qu’il ne soit pas vulnérable aux problèmes matériels.<br /> <br /> = Notes et références =<br /> - https://securityblog.redhat.com/2015/09/02/factoring-rsa-keys-with-tls-perfect-forward-secrecy/<br /> - http://villemin.gerard.free.fr/Crypto/RSA.htm<br /> - http://blog.terraverdeservices.com/rsa-key-factoring-vulnerability-using-perfect-forward-secrecy<br /> - https://www.nccgroup.trust/us/about-us/newsroom-and-events/blog/2015/september/factoring-rsa-keys-with-tls-perfect-forward-secrecy/<br /> - https://simple.wikipedia.org/wiki/Diffie-Hellman_key_exchange<br /> - http://bibmath.net/crypto/index.php?action=affiche&amp;quoi=complements/resteschinois</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=VT2015_Factoring_RSA&diff=24008 2015-10-09T06:44:53Z

<p>Sebastien.Toussaint: /* Notes et références */</p> <hr /> <div>= Présentation =<br /> * Enseignants : Georges-Pierre Bonneau, Didier Donsez (VT2015) <br /> * Sujet : Factoring RSA Keys With TLS Perfect Forward Secrecy<br /> * Auteur : Sébastien TOUSSAINT<br /> * Date : 02 octobre 2015 <br /> <br /> <br /> == Mots Clés ==<br /> RSA, théorème des restes chinois, TLS, Perfect foward secrecy, confidentialité persitante, handshake, diffie-hellman.<br /> <br /> = Synthèse =<br /> == Introduction ==<br /> La croissance importante des transactions effectuées sur internet dans le début-milieu des années 90 et début des années 2000 a sensibilisé les chercheurs à trouver et développer des techniques de sécurisation des données sur internet. Le 21 septembre 2000, la fin du brevet de chiffrement RSA détenu jusqu’alors par le Massachusetts Institute of Technology (MIT), fut une grande avancée dans la sécurisation des données confidentielles sur internet. Ce système de chiffrement est le plus sûr aujourd’hui. Un article de Florian Weimer paru le 2 septembre 2015 dit qu’il est possible de récupérer des clés privées de RSA, spécialement, si elles ont été implémentées été implémenté à l’aide du théorème des restes chinois. Nous allons dans cette synthèse revenir sur les bases de RSA, du théorème des restes chinois et le TLS perfect foward secrecy avec ses mécanismes (handshake, Diffie-Hellman) avant d’étudier les travaux de Florian Weimer.<br /> <br /> == Le chiffrement RSA ==<br /> Le chiffrement RSA est un système de cryptographie asymétrique. Cela signifie qu’il y existe deux clés dans notre système. Une clé privée connue par une seule entité. Elle va lui permettre de déchiffrer les messages qui lui ont été envoyés. Une clé publique connue de tout le monde et qui va chiffrer le message que l’on souhaite envoyer. Ces clés sont produites par une seule entité.<br /> <br /> [[File:rsa.png|center|thumb|700px]]<br /> <br /> L’image ci-dessus représente une communication RSA entre deux utilisateurs, Alice et Bob. Les éléments en vert sur l’image représentent les informations en clair dans le canal de communication de ce protocole, donc tout le monde y a accès. Les éléments en rouge représentent les informations privées de chaque utilisateur. Donc du côté d’Alice ces informations permettent de créer sa clé privée. Tout d’abord Alice choisit deux nombres premiers distincts p et q puis elle fait leur produit afin d’obtenir le nombre n, ensuite l’indicateur de Euler ou fonction Phi de n f = (p-1) (q-1). Puis on calcul e premier avec f donc e = 5 et on calcule d, inverse de e modulo f. Donc pour chiffrer les messages nous avons y = x^e mod n. Et pour déchiffrer les messages nous avons z = y^d mod n.<br /> <br /> == Le théorème des restes chinois ==<br /> Théorème : Prenons m1, ..., m n des entiers supérieurs à 2 deux à deux premiers entre eux, et a1,...,an des entiers. Le système d'équations :<br /> <br /> [[File:trc.png|center|thumb|500px]]<br /> <br /> admet une unique solution modulo M=m1×⋯×mn qui est donnée par la formule :<br /> x=a1M1y1+⋯+anMnyn<br /> où Mi = et yi = Mod mi pour tout i compris entre 1 et n.<br /> <br /> <br /> == Transport Layer Security (TLS) ==<br /> Transport Layer Security (TLS) est un protocole qui garantit la confidentialité entre les applications et leurs utilisateurs sur Internet. Quand un serveur et le client communiquent, TLS garantit qu'aucun tiers ne peut être espionné ou altérer un message. TLS est le successeur du protocole Secure Sockets Layer (SSL). Ce type de protocole est né du fait que plusieurs sites ont commencé à proposer des transactions (achats en ligne notamment). Afin de favoriser l’utilisation de ces plateformes de transaction, des protocoles de sécurisation des données des utilisateurs furent mis en place. En 2009, TLS est utilisé par la plupart des navigateurs Web. L'internaute peut reconnaître qu'une transaction est chiffrée à plusieurs signes : <br /> * l'URL dans la barre d'adresse commence par https et non http (https://...) ;<br /> * affichage d'une clé ou un cadenas<br /> <br /> <br /> == La confidentialité persistante (Perfect Forward Secrecy) ==<br /> <br /> Une fois que la clé privée de certains sites Web HTTPS est compromise, un attaquant est capable de construire une attaque « man-in-the-middle » pour intercepter et décrypter toute communication avec le site Web. La première étape contre une telle attaque est la révocation du certificat associé. Malheureusement, l'attaquant pourrait également avoir enregistré des communications passées protégées par cette clé privée et donc les décrypter. Forward secrecy permet à l'information d'aujourd'hui d’être gardée secrète, même si la clé privée est compromise dans l'avenir. La réalisation de cette propriété est généralement coûteuse et par conséquent, la plupart des serveurs web ne le permet pas.<br /> <br /> == Diffie-Hellman &amp; Handshake ==<br /> === Handshake ===<br /> En informatique, en télécommunications et dans les domaines associés, le handshaking ou &quot;handshake&quot; (&quot;poignée de main&quot; en français) est un processus automatisé de négociations qui établit les paramètres d'une communication entre deux entités avant que la communication commence. Un handshake est fait au moment où un ordinateur veut entreprendre une communication avec un appareil plus ou moins éloigné, par exemple un modem, une imprimante ou un serveur.<br /> <br /> <br /> === Diffie-Hellman ===<br /> Diffie-Hellman est une méthode par laquelle deux personnes nommées conventionnellement Alice et Bob peuvent se mettre d'accord sur un nombre (qu'ils peuvent utiliser comme clé pour chiffrer la conversation suivante) sans qu'une troisième personne appelée Ève puisse découvrir le nombre, même en ayant écouté tous leurs échanges.<br /> <br /> [[File:d-f.png|center|thumb|500px]]<br /> <br /> <br /> == Factoring RSA Keys With TLS Perfect Forward Secrecy == <br /> Dans un rapport de Florian Weimer paru le 9 septembre 2015, ce dernier affirme avoir réussi à récupérer des clés RSA. En effet il dit que les protocoles utilisant le protocole RSA avec les théorèmes des restes chinois pour mettre en place le TLS avec de la confidentialité persistante sont les plus vulnérables. Mais les seuls genres d’attaques capables de permettre une telle vulnérabilité sont les attaques Lenstra. <br /> <br /> Les attaques Lenstra sont des attaques sur les canaux auxiliaires. Ils sont dus à de mauvaises implémentations logicielles ou matérielles (veilles librairies, UAL fatiguée, erreurs dans une mémoire cache …) des crypto-systèmes. Donc cela ne remet pas en cause les protocoles de cryptographie et ici dans notre cas le RSA. <br /> <br /> === La faille === <br /> Dans le rapport de Weimer, la formule utilisée pour effectuer la signature est la suivante :<br /> * y_p = x^d modulo p<br /> * y_q = x^d modulo q<br /> * y = y_p q (q^{-1} modulo p) + y_q p (p^{-1} modulo q) modulo n.<br /> <br /> Mais si un problème survient durant le calcul de y_p, que nous allons appeler w_p. Alors nous avons <br /> * Y = Y_p modulo p<br /> * Y = y_q modulo q<br /> <br /> Si nous mettons le tout à la puissance (voir rappel sur RSA) et que nous enlevons x nous avons :<br /> * Y^e - x = Y_p^e - x = a modulo p<br /> * Y^e - x = y_q^e - x = 0 modulo q<br /> <br /> Et là nous savons que q divise w_p et que q divise aussi n. Alors que p ne divise plus Y^e – x. Il nous reste plus qu’à faire le PGCD de n et Y^e – x pour trouver q.<br /> <br /> [[File:tls.png|center|thumb|700px]]<br /> <br /> D’un point de vue réseau il s’agit d’une trame en plus que fournit le serveur au client durant le handshake TLS. Dans cette trame il y a la clé publique du serveur. Cette trame ne dit pas quel algorithme a été utilisé pour faire l’échange de clé; et ceci peut conduire à une longue série d’attaque. Selon le rapport de Florian Weimer il existe un seul moyen de prévenir cette erreur, il faut vérifier que la signature ait été bien faite. <br /> <br /> Cette fuite est visible pour le client qui réalise la poignée de mains TLS ou un observateur passif qui intercepte le trafic réseau&quot; écrit Florian Weimer<br /> <br /> <br /> = Conclusion =<br /> <br /> Pour résumer, le chiffrement RSA avec la confidentialité persistante de TLS sont des protocoles sûrs. Mais l’implémentation de ces protocoles peut être mal effectuée et donc être vulnérable aux attaques de Lenstra. Pour prévenir ce problème il faut bien vérifier l’implémentation de ces algorithmes et faire en sorte qu’il ne soit pas vulnérable aux problèmes matériels.<br /> <br /> = Notes et références =<br /> - https://securityblog.redhat.com/2015/09/02/factoring-rsa-keys-with-tls-perfect-forward-secrecy/<br /> - http://villemin.gerard.free.fr/Crypto/RSA.htm<br /> - http://blog.terraverdeservices.com/rsa-key-factoring-vulnerability-using-perfect-forward-secrecy<br /> - https://www.nccgroup.trust/us/about-us/newsroom-and-events/blog/2015/september/factoring-rsa-keys-with-tls-perfect-forward-secrecy/</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=VT2015_Factoring_RSA&diff=24007 2015-10-09T06:44:20Z

<p>Sebastien.Toussaint: /* Notes et références */</p> <hr /> <div>= Présentation =<br /> * Enseignants : Georges-Pierre Bonneau, Didier Donsez (VT2015) <br /> * Sujet : Factoring RSA Keys With TLS Perfect Forward Secrecy<br /> * Auteur : Sébastien TOUSSAINT<br /> * Date : 02 octobre 2015 <br /> <br /> <br /> == Mots Clés ==<br /> RSA, théorème des restes chinois, TLS, Perfect foward secrecy, confidentialité persitante, handshake, diffie-hellman.<br /> <br /> = Synthèse =<br /> == Introduction ==<br /> La croissance importante des transactions effectuées sur internet dans le début-milieu des années 90 et début des années 2000 a sensibilisé les chercheurs à trouver et développer des techniques de sécurisation des données sur internet. Le 21 septembre 2000, la fin du brevet de chiffrement RSA détenu jusqu’alors par le Massachusetts Institute of Technology (MIT), fut une grande avancée dans la sécurisation des données confidentielles sur internet. Ce système de chiffrement est le plus sûr aujourd’hui. Un article de Florian Weimer paru le 2 septembre 2015 dit qu’il est possible de récupérer des clés privées de RSA, spécialement, si elles ont été implémentées été implémenté à l’aide du théorème des restes chinois. Nous allons dans cette synthèse revenir sur les bases de RSA, du théorème des restes chinois et le TLS perfect foward secrecy avec ses mécanismes (handshake, Diffie-Hellman) avant d’étudier les travaux de Florian Weimer.<br /> <br /> == Le chiffrement RSA ==<br /> Le chiffrement RSA est un système de cryptographie asymétrique. Cela signifie qu’il y existe deux clés dans notre système. Une clé privée connue par une seule entité. Elle va lui permettre de déchiffrer les messages qui lui ont été envoyés. Une clé publique connue de tout le monde et qui va chiffrer le message que l’on souhaite envoyer. Ces clés sont produites par une seule entité.<br /> <br /> [[File:rsa.png|center|thumb|700px]]<br /> <br /> L’image ci-dessus représente une communication RSA entre deux utilisateurs, Alice et Bob. Les éléments en vert sur l’image représentent les informations en clair dans le canal de communication de ce protocole, donc tout le monde y a accès. Les éléments en rouge représentent les informations privées de chaque utilisateur. Donc du côté d’Alice ces informations permettent de créer sa clé privée. Tout d’abord Alice choisit deux nombres premiers distincts p et q puis elle fait leur produit afin d’obtenir le nombre n, ensuite l’indicateur de Euler ou fonction Phi de n f = (p-1) (q-1). Puis on calcul e premier avec f donc e = 5 et on calcule d, inverse de e modulo f. Donc pour chiffrer les messages nous avons y = x^e mod n. Et pour déchiffrer les messages nous avons z = y^d mod n.<br /> <br /> == Le théorème des restes chinois ==<br /> Théorème : Prenons m1, ..., m n des entiers supérieurs à 2 deux à deux premiers entre eux, et a1,...,an des entiers. Le système d'équations :<br /> <br /> [[File:trc.png|center|thumb|500px]]<br /> <br /> admet une unique solution modulo M=m1×⋯×mn qui est donnée par la formule :<br /> x=a1M1y1+⋯+anMnyn<br /> où Mi = et yi = Mod mi pour tout i compris entre 1 et n.<br /> <br /> <br /> == Transport Layer Security (TLS) ==<br /> Transport Layer Security (TLS) est un protocole qui garantit la confidentialité entre les applications et leurs utilisateurs sur Internet. Quand un serveur et le client communiquent, TLS garantit qu'aucun tiers ne peut être espionné ou altérer un message. TLS est le successeur du protocole Secure Sockets Layer (SSL). Ce type de protocole est né du fait que plusieurs sites ont commencé à proposer des transactions (achats en ligne notamment). Afin de favoriser l’utilisation de ces plateformes de transaction, des protocoles de sécurisation des données des utilisateurs furent mis en place. En 2009, TLS est utilisé par la plupart des navigateurs Web. L'internaute peut reconnaître qu'une transaction est chiffrée à plusieurs signes : <br /> * l'URL dans la barre d'adresse commence par https et non http (https://...) ;<br /> * affichage d'une clé ou un cadenas<br /> <br /> <br /> == La confidentialité persistante (Perfect Forward Secrecy) ==<br /> <br /> Une fois que la clé privée de certains sites Web HTTPS est compromise, un attaquant est capable de construire une attaque « man-in-the-middle » pour intercepter et décrypter toute communication avec le site Web. La première étape contre une telle attaque est la révocation du certificat associé. Malheureusement, l'attaquant pourrait également avoir enregistré des communications passées protégées par cette clé privée et donc les décrypter. Forward secrecy permet à l'information d'aujourd'hui d’être gardée secrète, même si la clé privée est compromise dans l'avenir. La réalisation de cette propriété est généralement coûteuse et par conséquent, la plupart des serveurs web ne le permet pas.<br /> <br /> == Diffie-Hellman &amp; Handshake ==<br /> === Handshake ===<br /> En informatique, en télécommunications et dans les domaines associés, le handshaking ou &quot;handshake&quot; (&quot;poignée de main&quot; en français) est un processus automatisé de négociations qui établit les paramètres d'une communication entre deux entités avant que la communication commence. Un handshake est fait au moment où un ordinateur veut entreprendre une communication avec un appareil plus ou moins éloigné, par exemple un modem, une imprimante ou un serveur.<br /> <br /> <br /> === Diffie-Hellman ===<br /> Diffie-Hellman est une méthode par laquelle deux personnes nommées conventionnellement Alice et Bob peuvent se mettre d'accord sur un nombre (qu'ils peuvent utiliser comme clé pour chiffrer la conversation suivante) sans qu'une troisième personne appelée Ève puisse découvrir le nombre, même en ayant écouté tous leurs échanges.<br /> <br /> [[File:d-f.png|center|thumb|500px]]<br /> <br /> <br /> == Factoring RSA Keys With TLS Perfect Forward Secrecy == <br /> Dans un rapport de Florian Weimer paru le 9 septembre 2015, ce dernier affirme avoir réussi à récupérer des clés RSA. En effet il dit que les protocoles utilisant le protocole RSA avec les théorèmes des restes chinois pour mettre en place le TLS avec de la confidentialité persistante sont les plus vulnérables. Mais les seuls genres d’attaques capables de permettre une telle vulnérabilité sont les attaques Lenstra. <br /> <br /> Les attaques Lenstra sont des attaques sur les canaux auxiliaires. Ils sont dus à de mauvaises implémentations logicielles ou matérielles (veilles librairies, UAL fatiguée, erreurs dans une mémoire cache …) des crypto-systèmes. Donc cela ne remet pas en cause les protocoles de cryptographie et ici dans notre cas le RSA. <br /> <br /> === La faille === <br /> Dans le rapport de Weimer, la formule utilisée pour effectuer la signature est la suivante :<br /> * y_p = x^d modulo p<br /> * y_q = x^d modulo q<br /> * y = y_p q (q^{-1} modulo p) + y_q p (p^{-1} modulo q) modulo n.<br /> <br /> Mais si un problème survient durant le calcul de y_p, que nous allons appeler w_p. Alors nous avons <br /> * Y = Y_p modulo p<br /> * Y = y_q modulo q<br /> <br /> Si nous mettons le tout à la puissance (voir rappel sur RSA) et que nous enlevons x nous avons :<br /> * Y^e - x = Y_p^e - x = a modulo p<br /> * Y^e - x = y_q^e - x = 0 modulo q<br /> <br /> Et là nous savons que q divise w_p et que q divise aussi n. Alors que p ne divise plus Y^e – x. Il nous reste plus qu’à faire le PGCD de n et Y^e – x pour trouver q.<br /> <br /> [[File:tls.png|center|thumb|700px]]<br /> <br /> D’un point de vue réseau il s’agit d’une trame en plus que fournit le serveur au client durant le handshake TLS. Dans cette trame il y a la clé publique du serveur. Cette trame ne dit pas quel algorithme a été utilisé pour faire l’échange de clé; et ceci peut conduire à une longue série d’attaque. Selon le rapport de Florian Weimer il existe un seul moyen de prévenir cette erreur, il faut vérifier que la signature ait été bien faite. <br /> <br /> Cette fuite est visible pour le client qui réalise la poignée de mains TLS ou un observateur passif qui intercepte le trafic réseau&quot; écrit Florian Weimer<br /> <br /> <br /> = Conclusion =<br /> <br /> Pour résumer, le chiffrement RSA avec la confidentialité persistante de TLS sont des protocoles sûrs. Mais l’implémentation de ces protocoles peut être mal effectuée et donc être vulnérable aux attaques de Lenstra. Pour prévenir ce problème il faut bien vérifier l’implémentation de ces algorithmes et faire en sorte qu’il ne soit pas vulnérable aux problèmes matériels.<br /> <br /> = Notes et références =<br /> - https://securityblog.redhat.com/2015/09/02/factoring-rsa-keys-with-tls-perfect-forward-secrecy/<br /> <br /> - http://villemin.gerard.free.fr/Crypto/RSA.htm<br /> <br /> - http://blog.terraverdeservices.com/rsa-key-factoring-vulnerability-using-perfect-forward-secrecy<br /> <br /> - https://www.nccgroup.trust/us/about-us/newsroom-and-events/blog/2015/september/factoring-rsa-keys-with-tls-perfect-forward-secrecy/</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=VT2015_Factoring_RSA&diff=24006 2015-10-09T06:43:44Z

<p>Sebastien.Toussaint: </p> <hr /> <div>= Présentation =<br /> * Enseignants : Georges-Pierre Bonneau, Didier Donsez (VT2015) <br /> * Sujet : Factoring RSA Keys With TLS Perfect Forward Secrecy<br /> * Auteur : Sébastien TOUSSAINT<br /> * Date : 02 octobre 2015 <br /> <br /> <br /> == Mots Clés ==<br /> RSA, théorème des restes chinois, TLS, Perfect foward secrecy, confidentialité persitante, handshake, diffie-hellman.<br /> <br /> = Synthèse =<br /> == Introduction ==<br /> La croissance importante des transactions effectuées sur internet dans le début-milieu des années 90 et début des années 2000 a sensibilisé les chercheurs à trouver et développer des techniques de sécurisation des données sur internet. Le 21 septembre 2000, la fin du brevet de chiffrement RSA détenu jusqu’alors par le Massachusetts Institute of Technology (MIT), fut une grande avancée dans la sécurisation des données confidentielles sur internet. Ce système de chiffrement est le plus sûr aujourd’hui. Un article de Florian Weimer paru le 2 septembre 2015 dit qu’il est possible de récupérer des clés privées de RSA, spécialement, si elles ont été implémentées été implémenté à l’aide du théorème des restes chinois. Nous allons dans cette synthèse revenir sur les bases de RSA, du théorème des restes chinois et le TLS perfect foward secrecy avec ses mécanismes (handshake, Diffie-Hellman) avant d’étudier les travaux de Florian Weimer.<br /> <br /> == Le chiffrement RSA ==<br /> Le chiffrement RSA est un système de cryptographie asymétrique. Cela signifie qu’il y existe deux clés dans notre système. Une clé privée connue par une seule entité. Elle va lui permettre de déchiffrer les messages qui lui ont été envoyés. Une clé publique connue de tout le monde et qui va chiffrer le message que l’on souhaite envoyer. Ces clés sont produites par une seule entité.<br /> <br /> [[File:rsa.png|center|thumb|700px]]<br /> <br /> L’image ci-dessus représente une communication RSA entre deux utilisateurs, Alice et Bob. Les éléments en vert sur l’image représentent les informations en clair dans le canal de communication de ce protocole, donc tout le monde y a accès. Les éléments en rouge représentent les informations privées de chaque utilisateur. Donc du côté d’Alice ces informations permettent de créer sa clé privée. Tout d’abord Alice choisit deux nombres premiers distincts p et q puis elle fait leur produit afin d’obtenir le nombre n, ensuite l’indicateur de Euler ou fonction Phi de n f = (p-1) (q-1). Puis on calcul e premier avec f donc e = 5 et on calcule d, inverse de e modulo f. Donc pour chiffrer les messages nous avons y = x^e mod n. Et pour déchiffrer les messages nous avons z = y^d mod n.<br /> <br /> == Le théorème des restes chinois ==<br /> Théorème : Prenons m1, ..., m n des entiers supérieurs à 2 deux à deux premiers entre eux, et a1,...,an des entiers. Le système d'équations :<br /> <br /> [[File:trc.png|center|thumb|500px]]<br /> <br /> admet une unique solution modulo M=m1×⋯×mn qui est donnée par la formule :<br /> x=a1M1y1+⋯+anMnyn<br /> où Mi = et yi = Mod mi pour tout i compris entre 1 et n.<br /> <br /> <br /> == Transport Layer Security (TLS) ==<br /> Transport Layer Security (TLS) est un protocole qui garantit la confidentialité entre les applications et leurs utilisateurs sur Internet. Quand un serveur et le client communiquent, TLS garantit qu'aucun tiers ne peut être espionné ou altérer un message. TLS est le successeur du protocole Secure Sockets Layer (SSL). Ce type de protocole est né du fait que plusieurs sites ont commencé à proposer des transactions (achats en ligne notamment). Afin de favoriser l’utilisation de ces plateformes de transaction, des protocoles de sécurisation des données des utilisateurs furent mis en place. En 2009, TLS est utilisé par la plupart des navigateurs Web. L'internaute peut reconnaître qu'une transaction est chiffrée à plusieurs signes : <br /> * l'URL dans la barre d'adresse commence par https et non http (https://...) ;<br /> * affichage d'une clé ou un cadenas<br /> <br /> <br /> == La confidentialité persistante (Perfect Forward Secrecy) ==<br /> <br /> Une fois que la clé privée de certains sites Web HTTPS est compromise, un attaquant est capable de construire une attaque « man-in-the-middle » pour intercepter et décrypter toute communication avec le site Web. La première étape contre une telle attaque est la révocation du certificat associé. Malheureusement, l'attaquant pourrait également avoir enregistré des communications passées protégées par cette clé privée et donc les décrypter. Forward secrecy permet à l'information d'aujourd'hui d’être gardée secrète, même si la clé privée est compromise dans l'avenir. La réalisation de cette propriété est généralement coûteuse et par conséquent, la plupart des serveurs web ne le permet pas.<br /> <br /> == Diffie-Hellman &amp; Handshake ==<br /> === Handshake ===<br /> En informatique, en télécommunications et dans les domaines associés, le handshaking ou &quot;handshake&quot; (&quot;poignée de main&quot; en français) est un processus automatisé de négociations qui établit les paramètres d'une communication entre deux entités avant que la communication commence. Un handshake est fait au moment où un ordinateur veut entreprendre une communication avec un appareil plus ou moins éloigné, par exemple un modem, une imprimante ou un serveur.<br /> <br /> <br /> === Diffie-Hellman ===<br /> Diffie-Hellman est une méthode par laquelle deux personnes nommées conventionnellement Alice et Bob peuvent se mettre d'accord sur un nombre (qu'ils peuvent utiliser comme clé pour chiffrer la conversation suivante) sans qu'une troisième personne appelée Ève puisse découvrir le nombre, même en ayant écouté tous leurs échanges.<br /> <br /> [[File:d-f.png|center|thumb|500px]]<br /> <br /> <br /> == Factoring RSA Keys With TLS Perfect Forward Secrecy == <br /> Dans un rapport de Florian Weimer paru le 9 septembre 2015, ce dernier affirme avoir réussi à récupérer des clés RSA. En effet il dit que les protocoles utilisant le protocole RSA avec les théorèmes des restes chinois pour mettre en place le TLS avec de la confidentialité persistante sont les plus vulnérables. Mais les seuls genres d’attaques capables de permettre une telle vulnérabilité sont les attaques Lenstra. <br /> <br /> Les attaques Lenstra sont des attaques sur les canaux auxiliaires. Ils sont dus à de mauvaises implémentations logicielles ou matérielles (veilles librairies, UAL fatiguée, erreurs dans une mémoire cache …) des crypto-systèmes. Donc cela ne remet pas en cause les protocoles de cryptographie et ici dans notre cas le RSA. <br /> <br /> === La faille === <br /> Dans le rapport de Weimer, la formule utilisée pour effectuer la signature est la suivante :<br /> * y_p = x^d modulo p<br /> * y_q = x^d modulo q<br /> * y = y_p q (q^{-1} modulo p) + y_q p (p^{-1} modulo q) modulo n.<br /> <br /> Mais si un problème survient durant le calcul de y_p, que nous allons appeler w_p. Alors nous avons <br /> * Y = Y_p modulo p<br /> * Y = y_q modulo q<br /> <br /> Si nous mettons le tout à la puissance (voir rappel sur RSA) et que nous enlevons x nous avons :<br /> * Y^e - x = Y_p^e - x = a modulo p<br /> * Y^e - x = y_q^e - x = 0 modulo q<br /> <br /> Et là nous savons que q divise w_p et que q divise aussi n. Alors que p ne divise plus Y^e – x. Il nous reste plus qu’à faire le PGCD de n et Y^e – x pour trouver q.<br /> <br /> [[File:tls.png|center|thumb|700px]]<br /> <br /> D’un point de vue réseau il s’agit d’une trame en plus que fournit le serveur au client durant le handshake TLS. Dans cette trame il y a la clé publique du serveur. Cette trame ne dit pas quel algorithme a été utilisé pour faire l’échange de clé; et ceci peut conduire à une longue série d’attaque. Selon le rapport de Florian Weimer il existe un seul moyen de prévenir cette erreur, il faut vérifier que la signature ait été bien faite. <br /> <br /> Cette fuite est visible pour le client qui réalise la poignée de mains TLS ou un observateur passif qui intercepte le trafic réseau&quot; écrit Florian Weimer<br /> <br /> <br /> = Conclusion =<br /> <br /> Pour résumer, le chiffrement RSA avec la confidentialité persistante de TLS sont des protocoles sûrs. Mais l’implémentation de ces protocoles peut être mal effectuée et donc être vulnérable aux attaques de Lenstra. Pour prévenir ce problème il faut bien vérifier l’implémentation de ces algorithmes et faire en sorte qu’il ne soit pas vulnérable aux problèmes matériels.<br /> <br /> = Notes et références =<br /> - https://securityblog.redhat.com/2015/09/02/factoring-rsa-keys-with-tls-perfect-forward-secrecy/<br /> <br /> - http://villemin.gerard.free.fr/Crypto/RSA.htm<br /> <br /> - http://blog.terraverdeservices.com/rsa-key-factoring-vulnerability-using-perfect-forward-secrecy<br /> <br /> - https://www.nccgroup.trust/us/about-us/newsroom-and-events/blog/2015/september/factoring-rsa-keys-with-tls-perfect-forward-secrecy/</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=File:Tls.png&diff=24005 2015-10-09T06:32:44Z

<p>Sebastien.Toussaint: </p> <hr /> <div></div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=File:D-f.png&diff=24004 2015-10-09T06:32:15Z

<p>Sebastien.Toussaint: </p> <hr /> <div></div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=File:Trc.png&diff=24003 2015-10-09T06:31:31Z

<p>Sebastien.Toussaint: </p> <hr /> <div></div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=VT2015_Factoring_RSA&diff=24002 2015-10-09T06:31:04Z

<p>Sebastien.Toussaint: </p> <hr /> <div>= Présentation =<br /> * Enseignants : Georges-Pierre Bonneau, Didier Donsez (VT2015) <br /> * Sujet : Factoring RSA Keys With TLS Perfect Forward Secrecy<br /> * Auteur : Sébastien TOUSSAINT<br /> * Date : 02 octobre 2015 <br /> <br /> <br /> == Mots Clés ==<br /> RSA, théorème des restes chinois, TLS, Perfect foward secrecy, confidentialité persitante, handshake, diffie-hellman.<br /> <br /> = Synthèse =<br /> == Introduction ==<br /> La croissance importante des transactions effectuées sur internet dans le début-milieu des années 90 et début des années 2000 a sensibilisé les chercheurs à trouver et développer des techniques de sécurisation des données sur internet. Le 21 septembre 2000, la fin du brevet de chiffrement RSA détenu jusqu’alors par le Massachusetts Institute of Technology (MIT), fut une grande avancée dans la sécurisation des données confidentielles sur internet. Ce système de chiffrement est le plus sûr aujourd’hui. Un article de Florian Weimer paru le 2 septembre 2015 dit qu’il est possible de récupérer des clés privées de RSA, spécialement, si elles ont été implémentées été implémenté à l’aide du théorème des restes chinois. Nous allons dans cette synthèse revenir sur les bases de RSA, du théorème des restes chinois et le TLS perfect foward secrecy avec ses mécanismes (handshake, Diffie-Hellman) avant d’étudier les travaux de Florian Weimer.<br /> <br /> == Le chiffrement RSA ==<br /> Le chiffrement RSA est un système de cryptographie asymétrique. Cela signifie qu’il y existe deux clés dans notre système. Une clé privée connue par une seule entité. Elle va lui permettre de déchiffrer les messages qui lui ont été envoyés. Une clé publique connue de tout le monde et qui va chiffrer le message que l’on souhaite envoyer. Ces clés sont produites par une seule entité.<br /> <br /> [[File:rsa.png|center|thumb|700px]]<br /> <br /> L’image ci-dessus représente une communication RSA entre deux utilisateurs, Alice et Bob. Les éléments en vert sur l’image représentent les informations en clair dans le canal de communication de ce protocole, donc tout le monde y a accès. Les éléments en rouge représentent les informations privées de chaque utilisateur. Donc du côté d’Alice ces informations permettent de créer sa clé privée. Tout d’abord Alice choisit deux nombres premiers distincts p et q puis elle fait leur produit afin d’obtenir le nombre n, ensuite l’indicateur de Euler ou fonction Phi de n f = (p-1) (q-1). Puis on calcul e premier avec f donc e = 5 et on calcule d, inverse de e modulo f. Donc pour chiffrer les messages nous avons y = x^e mod n. Et pour déchiffrer les messages nous avons z = y^d mod n.<br /> <br /> == Le théorème des restes chinois ==<br /> Théorème : Prenons m1, ..., m n des entiers supérieurs à 2 deux à deux premiers entre eux, et a1,...,an des entiers. Le système d'équations :<br /> <br /> [[File:trc.png|center|thumb|500px]]<br /> <br /> admet une unique solution modulo M=m1×⋯×mn qui est donnée par la formule :<br /> x=a1M1y1+⋯+anMnyn<br /> où Mi = et yi = Mod mi pour tout i compris entre 1 et n.<br /> <br /> <br /> == Transport Layer Security (TLS) ==<br /> Transport Layer Security (TLS) est un protocole qui garantit la confidentialité entre les applications et leurs utilisateurs sur Internet. Quand un serveur et le client communiquent, TLS garantit qu'aucun tiers ne peut être espionné ou altérer un message. TLS est le successeur du protocole Secure Sockets Layer (SSL). Ce type de protocole est né du fait que plusieurs sites ont commencé à proposer des transactions (achats en ligne notamment). Afin de favoriser l’utilisation de ces plateformes de transaction, des protocoles de sécurisation des données des utilisateurs furent mis en place. En 2009, TLS est utilisé par la plupart des navigateurs Web. L'internaute peut reconnaître qu'une transaction est chiffrée à plusieurs signes : <br /> * l'URL dans la barre d'adresse commence par https et non http (https://...) ;<br /> * affichage d'une clé ou un cadenas<br /> <br /> <br /> == La confidentialité persistante (Perfect Forward Secrecy) ==<br /> <br /> Une fois que la clé privée de certains sites Web HTTPS est compromise, un attaquant est capable de construire une attaque « man-in-the-middle » pour intercepter et décrypter toute communication avec le site Web. La première étape contre une telle attaque est la révocation du certificat associé. Malheureusement, l'attaquant pourrait également avoir enregistré des communications passées protégées par cette clé privée et donc les décrypter. Forward secrecy permet à l'information d'aujourd'hui d’être gardée secrète, même si la clé privée est compromise dans l'avenir. La réalisation de cette propriété est généralement coûteuse et par conséquent, la plupart des serveurs web ne le permet pas.<br /> <br /> == Diffie-Hellman &amp; Handshake ==<br /> === Handshake ===<br /> En informatique, en télécommunications et dans les domaines associés, le handshaking ou &quot;handshake&quot; (&quot;poignée de main&quot; en français) est un processus automatisé de négociations qui établit les paramètres d'une communication entre deux entités avant que la communication commence. Un handshake est fait au moment où un ordinateur veut entreprendre une communication avec un appareil plus ou moins éloigné, par exemple un modem, une imprimante ou un serveur.<br /> <br /> <br /> === Diffie-Hellman ===<br /> Diffie-Hellman est une méthode par laquelle deux personnes nommées conventionnellement Alice et Bob peuvent se mettre d'accord sur un nombre (qu'ils peuvent utiliser comme clé pour chiffrer la conversation suivante) sans qu'une troisième personne appelée Ève puisse découvrir le nombre, même en ayant écouté tous leurs échanges.<br /> <br /> [[File:d-f.png|center|thumb|500px]]<br /> <br /> <br /> == Factoring RSA Keys With TLS Perfect Forward Secrecy == <br /> Dans un rapport de Florian Weimer paru le 9 septembre 2015, ce dernier affirme avoir réussi à récupérer des clés RSA. En effet il dit que les protocoles utilisant le protocole RSA avec les théorèmes des restes chinois pour mettre en place le TLS avec de la confidentialité persistante sont les plus vulnérables. Mais les seuls genres d’attaques capables de permettre une telle vulnérabilité sont les attaques Lenstra. <br /> <br /> Les attaques Lenstra sont des attaques sur les canaux auxiliaires. Ils sont dus à de mauvaises implémentations logicielles ou matérielles (veilles librairies, UAL fatiguée, erreurs dans une mémoire cache …) des crypto-systèmes. Donc cela ne remet pas en cause les protocoles de cryptographie et ici dans notre cas le RSA. <br /> <br /> === La faille === <br /> Dans le rapport de Weimer, la formule utilisée pour effectuer la signature est la suivante :<br /> * y_p = x^d modulo p<br /> * y_q = x^d modulo q<br /> * y = y_p q (q^{-1} modulo p) + y_q p (p^{-1} modulo q) modulo n.<br /> <br /> Mais si un problème survient durant le calcul de y_p, que nous allons appeler w_p. Alors nous avons <br /> * Y = Y_p modulo p<br /> * Y = y_q modulo q<br /> <br /> Si nous mettons le tout à la puissance (voir rappel sur RSA) et que nous enlevons x nous avons :<br /> * Y^e - x = Y_p^e - x = a modulo p<br /> * Y^e - x = y_q^e - x = 0 modulo q<br /> <br /> Et là nous savons que q divise w_p et que q divise aussi n. Alors que p ne divise plus Y^e – x. Il nous reste plus qu’à faire le PGCD de n et Y^e – x pour trouver q.<br /> <br /> [[File:tls.png|center|thumb|700px]]<br /> <br /> D’un point de vue réseau il s’agit d’une trame en plus que fournit le serveur au client durant le handshake TLS. Dans cette trame il y a la clé publique du serveur. Cette trame ne dit pas quel algorithme a été utilisé pour faire l’échange de clé; et ceci peut conduire à une longue série d’attaque. Selon le rapport de Florian Weimer il existe un seul moyen de prévenir cette erreur, il faut vérifier que la signature ait été bien faite. <br /> <br /> Cette fuite est visible pour le client qui réalise la poignée de mains TLS ou un observateur passif qui intercepte le trafic réseau&quot; écrit Florian Weimer<br /> <br /> <br /> = Conclusion =<br /> <br /> Pour résumer, le chiffrement RSA avec la confidentialité persistante de TLS sont des protocoles sûrs. Mais l’implémentation de ces protocoles peut être mal effectuée et donc être vulnérable aux attaques de Lenstra. Pour prévenir ce problème il faut bien vérifier l’implémentation de ces algorithmes et faire en sorte qu’il ne soit pas vulnérable aux problèmes matériels.<br /> <br /> = Notes et références =<br /> TO DO WHEN I HAVE INTERNET BECAUSE I'M USING MY PHONE RIGHT NOW AND THAT'S NOT GOOD AT ALL</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=VT2015_Factoring_RSA&diff=24001 2015-10-09T06:28:41Z

<p>Sebastien.Toussaint: </p> <hr /> <div>= Présentation =<br /> * Enseignants : Georges-Pierre Bonneau, Didier Donsez (VT2015) <br /> * Sujet : Factoring RSA Keys With TLS Perfect Forward Secrecy<br /> * Auteur : Sébastien TOUSSAINT<br /> * Date : 02 octobre 2015 <br /> <br /> <br /> == Mots Clés ==<br /> RSA, théorème des restes chinois, TLS, Perfect foward secrecy, confidentialité persitante, handshake, diffie-hellman.<br /> <br /> = Synthèse =<br /> == Introduction ==<br /> La croissance importante des transactions effectuées sur internet dans le début-milieu des années 90 et début des années 2000 a sensibilisé les chercheurs à trouver et développer des techniques de sécurisation des données sur internet. Le 21 septembre 2000, la fin du brevet de chiffrement RSA détenu jusqu’alors par le Massachusetts Institute of Technology (MIT), fut une grande avancée dans la sécurisation des données confidentielles sur internet. Ce système de chiffrement est le plus sûr aujourd’hui. Un article de Florian Weimer paru le 2 septembre 2015 dit qu’il est possible de récupérer des clés privées de RSA, spécialement, si elles ont été implémentées été implémenté à l’aide du théorème des restes chinois. Nous allons dans cette synthèse revenir sur les bases de RSA, du théorème des restes chinois et le TLS perfect foward secrecy avec ses mécanismes (handshake, Diffie-Hellman) avant d’étudier les travaux de Florian Weimer.<br /> <br /> == Le chiffrement RSA ==<br /> Le chiffrement RSA est un système de cryptographie asymétrique. Cela signifie qu’il y existe deux clés dans notre système. Une clé privée connue par une seule entité. Elle va lui permettre de déchiffrer les messages qui lui ont été envoyés. Une clé publique connue de tout le monde et qui va chiffrer le message que l’on souhaite envoyer. Ces clés sont produites par une seule entité.<br /> <br /> [[File:rsa.png|center|thumb|500px]]<br /> <br /> L’image ci-dessus représente une communication RSA entre deux utilisateurs, Alice et Bob. Les éléments en vert sur l’image représentent les informations en clair dans le canal de communication de ce protocole, donc tout le monde y a accès. Les éléments en rouge représentent les informations privées de chaque utilisateur. Donc du côté d’Alice ces informations permettent de créer sa clé privée. Tout d’abord Alice choisit deux nombres premiers distincts p et q puis elle fait leur produit afin d’obtenir le nombre n, ensuite l’indicateur de Euler ou fonction Phi de n f = (p-1) (q-1). Puis on calcul e premier avec f donc e = 5 et on calcule d, inverse de e modulo f. Donc pour chiffrer les messages nous avons y = x^e mod n. Et pour déchiffrer les messages nous avons z = y^d mod n.<br /> <br /> == Le théorème des restes chinois ==<br /> Théorème : Prenons m1, ..., m n des entiers supérieurs à 2 deux à deux premiers entre eux, et a1,...,an des entiers. Le système d'équations :<br /> <br /> [[File:Example.jpg]]<br /> <br /> admet une unique solution modulo M=m1×⋯×mn qui est donnée par la formule :<br /> x=a1M1y1+⋯+anMnyn<br /> où Mi = et yi = Mod mi pour tout i compris entre 1 et n.<br /> <br /> <br /> == Transport Layer Security (TLS) ==<br /> Transport Layer Security (TLS) est un protocole qui garantit la confidentialité entre les applications et leurs utilisateurs sur Internet. Quand un serveur et le client communiquent, TLS garantit qu'aucun tiers ne peut être espionné ou altérer un message. TLS est le successeur du protocole Secure Sockets Layer (SSL). Ce type de protocole est né du fait que plusieurs sites ont commencé à proposer des transactions (achats en ligne notamment). Afin de favoriser l’utilisation de ces plateformes de transaction, des protocoles de sécurisation des données des utilisateurs furent mis en place. En 2009, TLS est utilisé par la plupart des navigateurs Web. L'internaute peut reconnaître qu'une transaction est chiffrée à plusieurs signes : <br /> * l'URL dans la barre d'adresse commence par https et non http (https://...) ;<br /> * affichage d'une clé ou un cadenas<br /> <br /> <br /> == La confidentialité persistante (Perfect Forward Secrecy) ==<br /> <br /> Une fois que la clé privée de certains sites Web HTTPS est compromise, un attaquant est capable de construire une attaque « man-in-the-middle » pour intercepter et décrypter toute communication avec le site Web. La première étape contre une telle attaque est la révocation du certificat associé. Malheureusement, l'attaquant pourrait également avoir enregistré des communications passées protégées par cette clé privée et donc les décrypter. Forward secrecy permet à l'information d'aujourd'hui d’être gardée secrète, même si la clé privée est compromise dans l'avenir. La réalisation de cette propriété est généralement coûteuse et par conséquent, la plupart des serveurs web ne le permet pas.<br /> <br /> == Diffie-Hellman &amp; Handshake ==<br /> === Handshake ===<br /> En informatique, en télécommunications et dans les domaines associés, le handshaking ou &quot;handshake&quot; (&quot;poignée de main&quot; en français) est un processus automatisé de négociations qui établit les paramètres d'une communication entre deux entités avant que la communication commence. Un handshake est fait au moment où un ordinateur veut entreprendre une communication avec un appareil plus ou moins éloigné, par exemple un modem, une imprimante ou un serveur.<br /> <br /> <br /> === Diffie-Hellman ===<br /> Diffie-Hellman est une méthode par laquelle deux personnes nommées conventionnellement Alice et Bob peuvent se mettre d'accord sur un nombre (qu'ils peuvent utiliser comme clé pour chiffrer la conversation suivante) sans qu'une troisième personne appelée Ève puisse découvrir le nombre, même en ayant écouté tous leurs échanges.<br /> <br /> [[File:Example.jpg]]<br /> <br /> <br /> == Factoring RSA Keys With TLS Perfect Forward Secrecy == <br /> Dans un rapport de Florian Weimer paru le 9 septembre 2015, ce dernier affirme avoir réussi à récupérer des clés RSA. En effet il dit que les protocoles utilisant le protocole RSA avec les théorèmes des restes chinois pour mettre en place le TLS avec de la confidentialité persistante sont les plus vulnérables. Mais les seuls genres d’attaques capables de permettre une telle vulnérabilité sont les attaques Lenstra. <br /> <br /> Les attaques Lenstra sont des attaques sur les canaux auxiliaires. Ils sont dus à de mauvaises implémentations logicielles ou matérielles (veilles librairies, UAL fatiguée, erreurs dans une mémoire cache …) des crypto-systèmes. Donc cela ne remet pas en cause les protocoles de cryptographie et ici dans notre cas le RSA. <br /> <br /> === La faille === <br /> Dans le rapport de Weimer, la formule utilisée pour effectuer la signature est la suivante :<br /> * y_p = x^d modulo p<br /> * y_q = x^d modulo q<br /> * y = y_p q (q^{-1} modulo p) + y_q p (p^{-1} modulo q) modulo n.<br /> <br /> Mais si un problème survient durant le calcul de y_p, que nous allons appeler w_p. Alors nous avons <br /> * Y = Y_p modulo p<br /> * Y = y_q modulo q<br /> <br /> Si nous mettons le tout à la puissance (voir rappel sur RSA) et que nous enlevons x nous avons :<br /> * Y^e - x = Y_p^e - x = a modulo p<br /> * Y^e - x = y_q^e - x = 0 modulo q<br /> <br /> Et là nous savons que q divise w_p et que q divise aussi n. Alors que p ne divise plus Y^e – x. Il nous reste plus qu’à faire le PGCD de n et Y^e – x pour trouver q.<br /> <br /> [[File:Example.jpg]]<br /> <br /> D’un point de vue réseau il s’agit d’une trame en plus que fournit le serveur au client durant le handshake TLS. Dans cette trame il y a la clé publique du serveur. Cette trame ne dit pas quel algorithme a été utilisé pour faire l’échange de clé; et ceci peut conduire à une longue série d’attaque. Selon le rapport de Florian Weimer il existe un seul moyen de prévenir cette erreur, il faut vérifier que la signature ait été bien faite. <br /> <br /> Cette fuite est visible pour le client qui réalise la poignée de mains TLS ou un observateur passif qui intercepte le trafic réseau&quot; écrit Florian Weimer<br /> <br /> <br /> = Conclusion =<br /> <br /> Pour résumer, le chiffrement RSA avec la confidentialité persistante de TLS sont des protocoles sûrs. Mais l’implémentation de ces protocoles peut être mal effectuée et donc être vulnérable aux attaques de Lenstra. Pour prévenir ce problème il faut bien vérifier l’implémentation de ces algorithmes et faire en sorte qu’il ne soit pas vulnérable aux problèmes matériels.<br /> <br /> = Notes et références =<br /> TO DO WHEN I HAVE INTERNET BECAUSE I'M USING MY PHONE RIGHT NOW AND THAT'S NOT GOOD AT ALL</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=File:Rsa.png&diff=24000 2015-10-09T06:27:48Z

<p>Sebastien.Toussaint: </p> <hr /> <div></div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=VT2015_Factoring_RSA&diff=23999 2015-10-09T06:27:05Z

<p>Sebastien.Toussaint: </p> <hr /> <div>= Présentation =<br /> * Enseignants : Georges-Pierre Bonneau, Didier Donsez (VT2015) <br /> * Sujet : Factoring RSA Keys With TLS Perfect Forward Secrecy<br /> * Auteur : Sébastien TOUSSAINT<br /> * Date : 02 octobre 2015 <br /> <br /> <br /> == Mots Clés ==<br /> RSA, théorème des restes chinois, TLS, Perfect foward secrecy, confidentialité persitante, handshake, diffie-hellman.<br /> <br /> = Synthèse =<br /> == Introduction ==<br /> La croissance importante des transactions effectuées sur internet dans le début-milieu des années 90 et début des années 2000 a sensibilisé les chercheurs à trouver et développer des techniques de sécurisation des données sur internet. Le 21 septembre 2000, la fin du brevet de chiffrement RSA détenu jusqu’alors par le Massachusetts Institute of Technology (MIT), fut une grande avancée dans la sécurisation des données confidentielles sur internet. Ce système de chiffrement est le plus sûr aujourd’hui. Un article de Florian Weimer paru le 2 septembre 2015 dit qu’il est possible de récupérer des clés privées de RSA, spécialement, si elles ont été implémentées été implémenté à l’aide du théorème des restes chinois. Nous allons dans cette synthèse revenir sur les bases de RSA, du théorème des restes chinois et le TLS perfect foward secrecy avec ses mécanismes (handshake, Diffie-Hellman) avant d’étudier les travaux de Florian Weimer.<br /> <br /> == Le chiffrement RSA ==<br /> Le chiffrement RSA est un système de cryptographie asymétrique. Cela signifie qu’il y existe deux clés dans notre système. Une clé privée connue par une seule entité. Elle va lui permettre de déchiffrer les messages qui lui ont été envoyés. Une clé publique connue de tout le monde et qui va chiffrer le message que l’on souhaite envoyer. Ces clés sont produites par une seule entité.<br /> <br /> [[File:Example.jpg]]<br /> <br /> [[File:rsa.png|center|thumb|500px]]<br /> <br /> L’image ci-dessus représente une communication RSA entre deux utilisateurs, Alice et Bob. Les éléments en vert sur l’image représentent les informations en clair dans le canal de communication de ce protocole, donc tout le monde y a accès. Les éléments en rouge représentent les informations privées de chaque utilisateur. Donc du côté d’Alice ces informations permettent de créer sa clé privée. Tout d’abord Alice choisit deux nombres premiers distincts p et q puis elle fait leur produit afin d’obtenir le nombre n, ensuite l’indicateur de Euler ou fonction Phi de n f = (p-1) (q-1). Puis on calcul e premier avec f donc e = 5 et on calcule d, inverse de e modulo f. Donc pour chiffrer les messages nous avons y = x^e mod n. Et pour déchiffrer les messages nous avons z = y^d mod n.<br /> <br /> == Le théorème des restes chinois ==<br /> Théorème : Prenons m1, ..., m n des entiers supérieurs à 2 deux à deux premiers entre eux, et a1,...,an des entiers. Le système d'équations :<br /> <br /> [[File:Example.jpg]]<br /> <br /> admet une unique solution modulo M=m1×⋯×mn qui est donnée par la formule :<br /> x=a1M1y1+⋯+anMnyn<br /> où Mi = et yi = Mod mi pour tout i compris entre 1 et n.<br /> <br /> <br /> == Transport Layer Security (TLS) ==<br /> Transport Layer Security (TLS) est un protocole qui garantit la confidentialité entre les applications et leurs utilisateurs sur Internet. Quand un serveur et le client communiquent, TLS garantit qu'aucun tiers ne peut être espionné ou altérer un message. TLS est le successeur du protocole Secure Sockets Layer (SSL). Ce type de protocole est né du fait que plusieurs sites ont commencé à proposer des transactions (achats en ligne notamment). Afin de favoriser l’utilisation de ces plateformes de transaction, des protocoles de sécurisation des données des utilisateurs furent mis en place. En 2009, TLS est utilisé par la plupart des navigateurs Web. L'internaute peut reconnaître qu'une transaction est chiffrée à plusieurs signes : <br /> * l'URL dans la barre d'adresse commence par https et non http (https://...) ;<br /> * affichage d'une clé ou un cadenas<br /> <br /> <br /> == La confidentialité persistante (Perfect Forward Secrecy) ==<br /> <br /> Une fois que la clé privée de certains sites Web HTTPS est compromise, un attaquant est capable de construire une attaque « man-in-the-middle » pour intercepter et décrypter toute communication avec le site Web. La première étape contre une telle attaque est la révocation du certificat associé. Malheureusement, l'attaquant pourrait également avoir enregistré des communications passées protégées par cette clé privée et donc les décrypter. Forward secrecy permet à l'information d'aujourd'hui d’être gardée secrète, même si la clé privée est compromise dans l'avenir. La réalisation de cette propriété est généralement coûteuse et par conséquent, la plupart des serveurs web ne le permet pas.<br /> <br /> == Diffie-Hellman &amp; Handshake ==<br /> === Handshake ===<br /> En informatique, en télécommunications et dans les domaines associés, le handshaking ou &quot;handshake&quot; (&quot;poignée de main&quot; en français) est un processus automatisé de négociations qui établit les paramètres d'une communication entre deux entités avant que la communication commence. Un handshake est fait au moment où un ordinateur veut entreprendre une communication avec un appareil plus ou moins éloigné, par exemple un modem, une imprimante ou un serveur.<br /> <br /> <br /> === Diffie-Hellman ===<br /> Diffie-Hellman est une méthode par laquelle deux personnes nommées conventionnellement Alice et Bob peuvent se mettre d'accord sur un nombre (qu'ils peuvent utiliser comme clé pour chiffrer la conversation suivante) sans qu'une troisième personne appelée Ève puisse découvrir le nombre, même en ayant écouté tous leurs échanges.<br /> <br /> [[File:Example.jpg]]<br /> <br /> <br /> == Factoring RSA Keys With TLS Perfect Forward Secrecy == <br /> Dans un rapport de Florian Weimer paru le 9 septembre 2015, ce dernier affirme avoir réussi à récupérer des clés RSA. En effet il dit que les protocoles utilisant le protocole RSA avec les théorèmes des restes chinois pour mettre en place le TLS avec de la confidentialité persistante sont les plus vulnérables. Mais les seuls genres d’attaques capables de permettre une telle vulnérabilité sont les attaques Lenstra. <br /> <br /> Les attaques Lenstra sont des attaques sur les canaux auxiliaires. Ils sont dus à de mauvaises implémentations logicielles ou matérielles (veilles librairies, UAL fatiguée, erreurs dans une mémoire cache …) des crypto-systèmes. Donc cela ne remet pas en cause les protocoles de cryptographie et ici dans notre cas le RSA. <br /> <br /> === La faille === <br /> Dans le rapport de Weimer, la formule utilisée pour effectuer la signature est la suivante :<br /> * y_p = x^d modulo p<br /> * y_q = x^d modulo q<br /> * y = y_p q (q^{-1} modulo p) + y_q p (p^{-1} modulo q) modulo n.<br /> <br /> Mais si un problème survient durant le calcul de y_p, que nous allons appeler w_p. Alors nous avons <br /> * Y = Y_p modulo p<br /> * Y = y_q modulo q<br /> <br /> Si nous mettons le tout à la puissance (voir rappel sur RSA) et que nous enlevons x nous avons :<br /> * Y^e - x = Y_p^e - x = a modulo p<br /> * Y^e - x = y_q^e - x = 0 modulo q<br /> <br /> Et là nous savons que q divise w_p et que q divise aussi n. Alors que p ne divise plus Y^e – x. Il nous reste plus qu’à faire le PGCD de n et Y^e – x pour trouver q.<br /> <br /> [[File:Example.jpg]]<br /> <br /> D’un point de vue réseau il s’agit d’une trame en plus que fournit le serveur au client durant le handshake TLS. Dans cette trame il y a la clé publique du serveur. Cette trame ne dit pas quel algorithme a été utilisé pour faire l’échange de clé; et ceci peut conduire à une longue série d’attaque. Selon le rapport de Florian Weimer il existe un seul moyen de prévenir cette erreur, il faut vérifier que la signature ait été bien faite. <br /> <br /> Cette fuite est visible pour le client qui réalise la poignée de mains TLS ou un observateur passif qui intercepte le trafic réseau&quot; écrit Florian Weimer<br /> <br /> <br /> = Conclusion =<br /> <br /> Pour résumer, le chiffrement RSA avec la confidentialité persistante de TLS sont des protocoles sûrs. Mais l’implémentation de ces protocoles peut être mal effectuée et donc être vulnérable aux attaques de Lenstra. Pour prévenir ce problème il faut bien vérifier l’implémentation de ces algorithmes et faire en sorte qu’il ne soit pas vulnérable aux problèmes matériels.<br /> <br /> = Notes et références =<br /> TO DO WHEN I HAVE INTERNET BECAUSE I'M USING MY PHONE RIGHT NOW AND THAT'S NOT GOOD AT ALL</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=VT2015_Factoring_RSA&diff=23934 2015-10-08T18:08:43Z

<p>Sebastien.Toussaint: </p> <hr /> <div>= Présentation =<br /> * Enseignants : Georges-Pierre Bonneau, Didier Donsez (VT2015) <br /> * Sujet : Factoring RSA Keys With TLS Perfect Forward Secrecy<br /> * Auteur : Sébastien TOUSSAINT<br /> * Date : 02 octobre 2015 <br /> <br /> <br /> == Mots Clés ==<br /> RSA, théorème des restes chinois, TLS, Perfect foward secrecy, confidentialité persitante, handshake, diffie-hellman.<br /> <br /> = Synthèse =<br /> == Introduction ==<br /> La croissance importante des transactions effectuées sur internet dans le début-milieu des années 90 et début des années 2000 a sensibilisé les chercheurs à trouver et développer des techniques de sécurisation des données sur internet. Le 21 septembre 2000, la fin du brevet de chiffrement RSA détenu jusqu’alors par le Massachusetts Institute of Technology (MIT), fut une grande avancée dans la sécurisation des données confidentielles sur internet. Ce système de chiffrement est le plus sûr aujourd’hui. Un article de Florian Weimer paru le 2 septembre 2015 dit qu’il est possible de récupérer des clés privées de RSA, spécialement, si elles ont été implémentées été implémenté à l’aide du théorème des restes chinois. Nous allons dans cette synthèse revenir sur les bases de RSA, du théorème des restes chinois et le TLS perfect foward secrecy avec ses mécanismes (handshake, Diffie-Hellman) avant d’étudier les travaux de Florian Weimer.<br /> <br /> == Le chiffrement RSA ==<br /> Le chiffrement RSA est un système de cryptographie asymétrique. Cela signifie qu’il y existe deux clés dans notre système. Une clé privée connue par une seule entité. Elle va lui permettre de déchiffrer les messages qui lui ont été envoyés. Une clé publique connue de tout le monde et qui va chiffrer le message que l’on souhaite envoyer. Ces clés sont produites par une seule entité.<br /> <br /> [[File:Example.jpg]]<br /> <br /> L’image ci-dessus représente une communication RSA entre deux utilisateurs, Alice et Bob. Les éléments en vert sur l’image représentent les informations en clair dans le canal de communication de ce protocole, donc tout le monde y a accès. Les éléments en rouge représentent les informations privées de chaque utilisateur. Donc du côté d’Alice ces informations permettent de créer sa clé privée. Tout d’abord Alice choisit deux nombres premiers distincts p et q puis elle fait leur produit afin d’obtenir le nombre n, ensuite l’indicateur de Euler ou fonction Phi de n f = (p-1) (q-1). Puis on calcul e premier avec f donc e = 5 et on calcule d, inverse de e modulo f. Donc pour chiffrer les messages nous avons y = x^e mod n. Et pour déchiffrer les messages nous avons z = y^d mod n.<br /> <br /> == Le théorème des restes chinois ==<br /> Théorème : Prenons m1, ..., m n des entiers supérieurs à 2 deux à deux premiers entre eux, et a1,...,an des entiers. Le système d'équations :<br /> <br /> [[File:Example.jpg]]<br /> <br /> admet une unique solution modulo M=m1×⋯×mn qui est donnée par la formule :<br /> x=a1M1y1+⋯+anMnyn<br /> où Mi = et yi = Mod mi pour tout i compris entre 1 et n.<br /> <br /> <br /> == Transport Layer Security (TLS) ==<br /> Transport Layer Security (TLS) est un protocole qui garantit la confidentialité entre les applications et leurs utilisateurs sur Internet. Quand un serveur et le client communiquent, TLS garantit qu'aucun tiers ne peut être espionné ou altérer un message. TLS est le successeur du protocole Secure Sockets Layer (SSL). Ce type de protocole est né du fait que plusieurs sites ont commencé à proposer des transactions (achats en ligne notamment). Afin de favoriser l’utilisation de ces plateformes de transaction, des protocoles de sécurisation des données des utilisateurs furent mis en place. En 2009, TLS est utilisé par la plupart des navigateurs Web. L'internaute peut reconnaître qu'une transaction est chiffrée à plusieurs signes : <br /> * l'URL dans la barre d'adresse commence par https et non http (https://...) ;<br /> * affichage d'une clé ou un cadenas<br /> <br /> <br /> == La confidentialité persistante (Perfect Forward Secrecy) ==<br /> <br /> Une fois que la clé privée de certains sites Web HTTPS est compromise, un attaquant est capable de construire une attaque « man-in-the-middle » pour intercepter et décrypter toute communication avec le site Web. La première étape contre une telle attaque est la révocation du certificat associé. Malheureusement, l'attaquant pourrait également avoir enregistré des communications passées protégées par cette clé privée et donc les décrypter. Forward secrecy permet à l'information d'aujourd'hui d’être gardée secrète, même si la clé privée est compromise dans l'avenir. La réalisation de cette propriété est généralement coûteuse et par conséquent, la plupart des serveurs web ne le permet pas.<br /> <br /> == Diffie-Hellman &amp; Handshake ==<br /> === Handshake ===<br /> En informatique, en télécommunications et dans les domaines associés, le handshaking ou &quot;handshake&quot; (&quot;poignée de main&quot; en français) est un processus automatisé de négociations qui établit les paramètres d'une communication entre deux entités avant que la communication commence. Un handshake est fait au moment où un ordinateur veut entreprendre une communication avec un appareil plus ou moins éloigné, par exemple un modem, une imprimante ou un serveur.<br /> <br /> <br /> === Diffie-Hellman ===<br /> Diffie-Hellman est une méthode par laquelle deux personnes nommées conventionnellement Alice et Bob peuvent se mettre d'accord sur un nombre (qu'ils peuvent utiliser comme clé pour chiffrer la conversation suivante) sans qu'une troisième personne appelée Ève puisse découvrir le nombre, même en ayant écouté tous leurs échanges.<br /> <br /> [[File:Example.jpg]]<br /> <br /> <br /> == Factoring RSA Keys With TLS Perfect Forward Secrecy == <br /> Dans un rapport de Florian Weimer paru le 9 septembre 2015, ce dernier affirme avoir réussi à récupérer des clés RSA. En effet il dit que les protocoles utilisant le protocole RSA avec les théorèmes des restes chinois pour mettre en place le TLS avec de la confidentialité persistante sont les plus vulnérables. Mais les seuls genres d’attaques capables de permettre une telle vulnérabilité sont les attaques Lenstra. <br /> <br /> Les attaques Lenstra sont des attaques sur les canaux auxiliaires. Ils sont dus à de mauvaises implémentations logicielles ou matérielles (veilles librairies, UAL fatiguée, erreurs dans une mémoire cache …) des crypto-systèmes. Donc cela ne remet pas en cause les protocoles de cryptographie et ici dans notre cas le RSA. <br /> <br /> === La faille === <br /> Dans le rapport de Weimer, la formule utilisée pour effectuer la signature est la suivante :<br /> * y_p = x^d modulo p<br /> * y_q = x^d modulo q<br /> * y = y_p q (q^{-1} modulo p) + y_q p (p^{-1} modulo q) modulo n.<br /> <br /> Mais si un problème survient durant le calcul de y_p, que nous allons appeler w_p. Alors nous avons <br /> * Y = Y_p modulo p<br /> * Y = y_q modulo q<br /> <br /> Si nous mettons le tout à la puissance (voir rappel sur RSA) et que nous enlevons x nous avons :<br /> * Y^e - x = Y_p^e - x = a modulo p<br /> * Y^e - x = y_q^e - x = 0 modulo q<br /> <br /> Et là nous savons que q divise w_p et que q divise aussi n. Alors que p ne divise plus Y^e – x. Il nous reste plus qu’à faire le PGCD de n et Y^e – x pour trouver q.<br /> <br /> [[File:Example.jpg]]<br /> <br /> D’un point de vue réseau il s’agit d’une trame en plus que fournit le serveur au client durant le handshake TLS. Dans cette trame il y a la clé publique du serveur. Cette trame ne dit pas quel algorithme a été utilisé pour faire l’échange de clé; et ceci peut conduire à une longue série d’attaque. Selon le rapport de Florian Weimer il existe un seul moyen de prévenir cette erreur, il faut vérifier que la signature ait été bien faite. <br /> <br /> Cette fuite est visible pour le client qui réalise la poignée de mains TLS ou un observateur passif qui intercepte le trafic réseau&quot; écrit Florian Weimer<br /> <br /> <br /> = Conclusion =<br /> <br /> Pour résumer, le chiffrement RSA avec la confidentialité persistante de TLS sont des protocoles sûrs. Mais l’implémentation de ces protocoles peut être mal effectuée et donc être vulnérable aux attaques de Lenstra. Pour prévenir ce problème il faut bien vérifier l’implémentation de ces algorithmes et faire en sorte qu’il ne soit pas vulnérable aux problèmes matériels.<br /> <br /> = Notes et références =<br /> TO DO WHEN I HAVE INTERNET BECAUSE I'M USING MY PHONE RIGHT NOW AND THAT'S NOT GOOD AT ALL</div>

Sebastien.Toussaint https://air.imag.fr/index.php?title=VT2015_Factoring_RSA&diff=23933 2015-10-08T18:07:11Z

<p>Sebastien.Toussaint: </p> <hr /> <div>= Présentation =<br /> * Enseignants : Georges-Pierre Bonneau, Didier Donsez (VT2015) <br /> * Sujet : Factoring RSA Keys With TLS Perfect Forward Secrecy<br /> * Auteur : Sébastien TOUSSAINT<br /> * Date : 02 octobre 2015 <br /> <br /> <br /> == Mots Clés ==<br /> RSA, théorème des restes chinois, TLS, Perfect foward secrecy, confidentialité persitante, handshake, diffie-hellman.<br /> <br /> = Synthèse =<br /> == Introduction ==<br /> La croissance importante des transactions effectuées sur internet dans le début-milieu des années 90 et début des années 2000 a sensibilisé les chercheurs à trouver et développer des techniques de sécurisation des données sur internet. Le 21 septembre 2000, la fin du brevet de chiffrement RSA détenu jusqu’alors par le Massachusetts Institute of Technology (MIT), fut une grande avancée dans la sécurisation des données confidentielles sur internet. Ce système de chiffrement est le plus sûr aujourd’hui. Un article de Florian Weimer paru le 2 septembre 2015 dit qu’il est possible de récupérer des clés privées de RSA, spécialement, si elles ont été implémentées été implémenté à l’aide du théorème des restes chinois. Nous allons dans cette synthèse revenir sur les bases de RSA, du théorème des restes chinois et le TLS perfect foward secrecy avec ses mécanismes (handshake, Diffie-Hellman) avant d’étudier les travaux de Florian Weimer.<br /> <br /> == Le chiffrement RSA ==<br /> Le chiffrement RSA est un système de cryptographie asymétrique. Cela signifie qu’il y existe deux clés dans notre système. Une clé privée connue par une seule entité. Elle va lui permettre de déchiffrer les messages qui lui ont été envoyés. Une clé publique connue de tout le monde et qui va chiffrer le message que l’on souhaite envoyer. Ces clés sont produites par une seule entité.<br /> <br /> [[File:Example.jpg]]<br /> <br /> L’image ci-dessus représente une communication RSA entre deux utilisateurs, Alice et Bob. Les éléments en vert sur l’image représentent les informations en clair dans le canal de communication de ce protocole, donc tout le monde y a accès. Les éléments en rouge représentent les informations privées de chaque utilisateur. Donc du côté d’Alice ces informations permettent de créer sa clé privée. Tout d’abord Alice choisit deux nombres premiers distincts p et q puis elle fait leur produit afin d’obtenir le nombre n, ensuite l’indicateur de Euler ou fonction Phi de n f = (p-1) (q-1). Puis on calcul e premier avec f donc e = 5 et on calcule d, inverse de e modulo f. Donc pour chiffrer les messages nous avons y = x^e mod n. Et pour déchiffrer les messages nous avons z = y^d mod n.<br /> <br /> == Le théorème des restes chinois ==<br /> Théorème : Prenons m1, ..., m n des entiers supérieurs à 2 deux à deux premiers entre eux, et a1,...,an des entiers. Le système d'équations :<br /> <br /> [[File:Example.jpg]]<br /> <br /> admet une unique solution modulo M=m1×⋯×mn qui est donnée par la formule :<br /> x=a1M1y1+⋯+anMnyn<br /> où Mi = et yi = Mod mi pour tout i compris entre 1 et n.<br /> <br /> <br /> == Transport Layer Security (TLS) ==<br /> Transport Layer Security (TLS) est un protocole qui garantit la confidentialité entre les applications et leurs utilisateurs sur Internet. Quand un serveur et le client communiquent, TLS garantit qu'aucun tiers ne peut être espionné ou altérer un message. TLS est le successeur du protocole Secure Sockets Layer (SSL). Ce type de protocole est né du fait que plusieurs sites ont commencé à proposer des transactions (achats en ligne notamment). Afin de favoriser l’utilisation de ces plateformes de transaction, des protocoles de sécurisation des données des utilisateurs furent mis en place. En 2009, TLS est utilisé par la plupart des navigateurs Web. L'internaute peut reconnaître qu'une transaction est chiffrée à plusieurs signes : <br /> * l'URL dans la barre d'adresse commence par https et non http (https://...) ;<br /> * affichage d'une clé ou un cadenas<br /> <br /> <br /> == La confidentialité persistante (Perfect Forward Secrecy) ==<br /> <br /> Une fois que la clé privée de certains sites Web HTTPS est compromise, un attaquant est capable de construire une attaque « man-in-the-middle » pour intercepter et décrypter toute communication avec le site Web. La première étape contre une telle attaque est la révocation du certificat associé. Malheureusement, l'attaquant pourrait également avoir enregistré des communications passées protégées par cette clé privée et donc les décrypter. Forward secrecy permet à l'information d'aujourd'hui d’être gardée secrète, même si la clé privée est compromise dans l'avenir. La réalisation de cette propriété est généralement coûteuse et par conséquent, la plupart des serveurs web ne le permet pas.<br /> <br /> == Diffie-Hellman &amp; Handshake ==<br /> === Handshake ===<br /> En informatique, en télécommunications et dans les domaines associés, le handshaking ou &quot;handshake&quot; (&quot;poignée de main&quot; en français) est un processus automatisé de négociations qui établit les paramètres d'une communication entre deux entités avant que la communication commence. Un handshake est fait au moment où un ordinateur veut entreprendre une communication avec un appareil plus ou moins éloigné, par exemple un modem, une imprimante ou un serveur.<br /> <br /> <br /> === Diffie-Hellman ===<br /> Diffie-Hellman est une méthode par laquelle deux personnes nommées conventionnellement Alice et Bob peuvent se mettre d'accord sur un nombre (qu'ils peuvent utiliser comme clé pour chiffrer la conversation suivante) sans qu'une troisième personne appelée Ève puisse découvrir le nombre, même en ayant écouté tous leurs échanges.<br /> <br /> [[File:Example.jpg]]<br /> <br /> <br /> == Factoring RSA Keys With TLS Perfect Forward Secrecy == <br /> Dans un rapport de Florian Weimer paru le 9 septembre 2015, ce dernier affirme avoir réussi à récupérer des clés RSA. En effet il dit que les protocoles utilisant le protocole RSA avec les théorèmes des restes chinois pour mettre en place le TLS avec de la confidentialité persistante sont les plus vulnérables. Mais les seuls genres d’attaques capables de permettre une telle vulnérabilité sont les attaques Lenstra. <br /> <br /> Les attaques Lenstra sont des attaques sur les canaux auxiliaires. Ils sont dus à de mauvaises implémentations logicielles ou matérielles (veilles librairies, UAL fatiguée, erreurs dans une mémoire cache …) des crypto-systèmes. Donc cela ne remet pas en cause les protocoles de cryptographie et ici dans notre cas le RSA. <br /> <br /> === La faille === <br /> Dans le rapport de Weimer, la formule utilisée pour effectuer la signature est la suivante :<br /> * y_p = x^d modulo p<br /> * y_q = x^d modulo q<br /> * y = y_p q (q^{-1} modulo p) + y_q p (p^{-1} modulo q) modulo n.<br /> <br /> Mais si un problème survient durant le calcul de y_p, que nous allons appeler w_p. Alors nous avons <br /> * Y = Y_p modulo p<br /> * Y = y_q modulo q<br /> <br /> Si nous mettons le tout à la puissance (voir rappel sur RSA) et que nous enlevons x nous avons :<br /> * Y^e - x = Y_p^e - x = a modulo p<br /> * Y^e - x = y_q^e - x = 0 modulo q<br /> <br /> Et là nous savons que q divise w_p et que q divise aussi n. Alors que p ne divise plus Y^e – x. Il nous reste plus qu’à faire le PGCD de n et Y^e – x pour trouver q.<br /> <br /> [[File:Example.jpg]]<br /> <br /> D’un point de vue réseau il s’agit d’une trame en plus que fournit le serveur au client durant le handshake TLS. Dans cette trame il y a la clé publique du serveur. Cette trame ne dit pas quel algorithme a été utilisé pour faire l’échange de clé; et ceci peut conduire à une longue série d’attaque. Selon le rapport de Florian Weimer il existe un seul moyen de prévenir cette erreur, il faut vérifier que la signature ait été bien faite. <br /> <br /> Cette fuite est visible pour le client qui réalise la poignée de mains TLS ou un observateur passif qui intercepte le trafic réseau&quot; écrit Florian Weimer<br /> <br /> <br /> = Conclusion =<br /> <br /> Pour résumer, le chiffrement RSA avec la confidentialité persistante de TLS sont des protocoles sûrs. Mais l’implémentation de ces protocoles peut être mal effectuée et donc être vulnérable aux attaques de Lenstra. Pour prévenir ce problème il faut bien vérifier l’implémentation de ces algorithmes et faire en sorte qu’il ne soit pas vulnérable aux problèmes matériels.</div>

Sebastien.Toussaint