Régate des IUT - INSA Lyon · IV. SITE WEB - MISE EN PLACE Configuration du serveur qui va héberger le Site Web Partir de Zéro avec seulement un accès à ce serveur (Linux CentOS)

CRÉATIS STAGE DUT INFORMATIQUE

CHARPY BASTIEN

Conception et mise œuvre d’un Site Web, d’une Application de

partage de données et d’un Démonstrateur Web

IUT INFORMATIQUE – BOURG-EN-BRESSE

23 Juin 2015

SOMMAIRE

I . Contexte du Stage

II. Introduction

III. Planning

IV. Site Web

V. Gestionnaire de Fichiers

VI. Démonstrateur Web

VII. Conclusion


2/26

I. INTERNSHIP CONTEXT

Presentation of CREATIS – Medical Research Laboratory

INSA at Villeurbanne

Ultrasounds Imaging Team (Signal processing and medical imaging)

AtysCrea project in collaboration with a company (Atys Medical)


3/26

II. INTRODUCTION

Presentation of AtysCrea Project

Answer to a call for projects from ANR

Based on medical devices for transcranial Doppler sonography and high-frequency ultrasound imaging.

Collaboration

Answer to a call for project called LabCom from ANR Creation of AtysCrea

LabCom


4/26

III. PLANNING

Diagramme de Gantt :

3 parties se distinguent : Site Web / Gestionnaire de Fichiers / Démonstrateur Web (Desk)


5/26

IV. SITE WEB - PRÉSENTATION

Objectif : Présentation du LabCom AtysCréa & Portail Collaboratif

Configuration du Serveur pour accueillir le site

Drupal (CMS)

Intègre le Gestionnaire de Fichiers et les Démonstrateurs


6/26

IV. SITE WEB - MISE EN PLACE

Configuration du serveur qui va héberger le Site Web

Partir de Zéro avec seulement un accès à ce serveur (Linux CentOS).

Installation des outils nécessaire pour l’hébergement et le fonctionnement du Site.

PhpMyAdmin & MySQL : Gérer les bases de Données

Apache & PHP : Faire fonctionner le Site Web

FTP : Stocker des données facilement

Demande d’ouverture de port à l’INSA ( domaine « insa-lyon.fr »)


7/26

IV. SITE WEB - FONCTIONNALITÉS

Fonctionnalités attendues dans le Site Web :

Portail Collaboratif

Gestionnaire de Fichiers

Contenu Dynamique

Partie Publique / Intranet Privé

Droits d’accès

Promouvoir le travail des chercheurs

Publications

Mettre en avant le projet AtysCréa

Démonstrateur Web


Nuage de mots !

8/26

IV. SITE WEB - CONCEPTION

Maquette du Site :


9/26

IV. SITE WEB - RÉALISATION

Drupal et ses modules :

~ 100 Modules Installés :

Droits d’accès

Publications

Menu Déroulant

Etc…

Ex : Gestions des droits d’accès :

Fichier Privé / Public

Contenu Privé / Public

Modifications de certains modules

Code JavaScript (ex : Module Publication)


10/26

IV. SITE WEB – RÉSULTAT FINAL - HTTPS://ATYSCREA.INSA-LYON.FR


11/26

V. GESTIONNAIRE DE FICHIERS – PRÉSENTATION

Objectif : Echanger des fichiers simplement entre collaborateurs (Collaboratif)

Pas de module Drupal répondant à toutes les exigences

Intégré directement au Site Web

Développement en JavaScript

FileAPI

IUT INFORMATIQUE – BOURG-EN-BRESSE IUT INFORMATIQUE – BOURG-EN-BRESSE

12/26

V. GESTIONNAIRE DE FICHIERS – FONCTIONNALITÉS

Fonctionnalités attendues dans ce Gestionnaire :

Gestion des Droits d’accès

Accès aux fichiers Privés

Permissions restreintes

Interactions demandées (Non Exhaustif) :

Upload, Download

Drag & Drop

Multi-Fichiers

Contrainte supplémentaire :

Sans Authentification


13/26

V. GESTIONNAIRE DE FICHIERS – CONCEPTION

Maquette & Diagramme du Gestionnaire de Fichiers :


Diagramme Cas Utilisation - Interactions Maquette du Gestionnaire de fichiers 14/26

V. GESTIONNAIRE DE FICHIERS – RÉALISATION

Libraire JavaScript FileAPI :

Propose des outils pour une meilleure prise en main :

Fonctions facile d’utilisation

Fonctions préconçues :

Upload / Download / Copier / Coller…

Adaptation du Drag & Drop

Droits d’accès

Disponible sur Github : http://mailru.github.io/FileAPI/


15/26

V. GESTIONNAIRE DE FICHIERS – RÉALISATION

Gestion des Droits sans Authentification :

Requête SQL sur la base de Drupal


Schéma de fonctionnement des Droits pour le Gestionnaire de Fichiers

16/26

V. GESTIONNAIRE DE FICHIERS - RÉSULTAT FINAL

Disponible sur l’Intranet du Site


17/26

SOMMAIRE

I . Contexte du Stage

II. Introduction

III. Planning

IV. Site Web

V. Gestionnaire de Fichiers

VI. Démonstrateur Web

VII. Conclusion


18/26

VI. DÉMONSTRATEUR ECHO 3D - PRÉSENTATION

Objectif : Mettre en avant le savoir-faire des chercheurs

Tester les algorithmes des chercheurs directement en ligne

Exemple d’utilisation avec des données Echographiques 3D de la peau


19/26

VI. DÉMONSTRATEUR ECHO 3D - PRÉSENTATION

Librairies utilisées pour le Démonstrateur :

Desk – Interactions en JavaScript

QooxDoo – Interface Graphique (Fenetre, bouton…)

Three JS & WebGL – Afficher des volumes 3D

Node Js – Utilisé par Desk


20/26

VI. DÉMONSTRATEUR ECHO 3D – INSTALLATION

Configuration de l’environnement :

Installation des librairies requises

Installation en Local pour la prise en main

Via Github

… puis sur un serveur distant

Serveur de Sébastien Valette


21/26

VI. DÉMONSTRATEUR ECHO 3D – CONCEPTION

Mise en place de l’interface : Qooxdoo

Inspiré du démonstrateur actuel

Sur le site de Créatis, mais pas le même

type de donnée.


22/26

VI. DÉMONSTRATEUR ECHO 3D – RÉALISATION

Chaine de traitement, de la donnée brut au volume 3D :

Paramètres d’entrées choisi par l’utilisateur

Zone de sélection

Copie des paramètres dans un fichier

Fichier json

Fichier 3D en sortie

Format VTK affichable depuis Desk


23/26

VI. DÉMONSTRATEUR ECHO 3D – RÉSULTAT FINAL


24/26

VII. CONCLUSION


Points to improve : Design of WebSite

Demonstrator

AtysCrea, a concrete project

Relation with IUT

Variety of missions

Capacity to adapt

Project Management

Thanks to all in the Creatis team for hosting and support 25/26

BILAN PERSONNEL


Stage :

Première expérience dans le monde du travail

o Gestion de Projet

o Responsabilités

Acquérir de nouvelles compétences

o JavaScript

o Drupal

o Configuration de Serveur

Et ensuite… : Licence Professionnelle Réseaux & Sécurité à Lyon (ESSIR)

Administrateur Réseau & Sécurité

26/26

DÉMONSTRATION


Site Gestionnaire de

fichiers

Démonstrateur

https://atyscrea.insa-lyon.fr/fr/

https://atyscrea.insa-lyon.fr/fr/fileManager_atyscrea

https://atyscrea.insa-lyon.fr/fr/fileManager_atyscrea

https://desk.creatis.insa-lyon.fr/charpy/

QUESTIONS & RÉPONSES

28

Documents

Régate des IUT - INSA Lyon · IV. SITE WEB - MISE EN PLACE Configuration du serveur qui va héberger le Site Web Partir de Zéro avec seulement un accès à ce serveur (Linux CentOS)