Projet M2 MIAGE

Auteurs

Valentin Bouquet - [email protected]

Rémy Pocquerusse - [email protected]

Oussemo Oulhaci - [email protected]

Technologies

• Npm: Javascript package manager.
• Webpack: Javascript module bundler.
• Babel: Transpiling code for new languages features.
• React: MVC Framework for dynamic statefull web pages.
• Redux: State container for Javascript apps.
• Express: Basic nodejs server (for front-end testing).
• Django-rest: Framework for building web API.
• OpenCV: Computer vision and machine learning library.

Prérequis

• Git, gestionnaire de version - Télécharger git
• Virtualbox, outil de virtualisation - Télécharger Virtualbox
• Vagrant, gestionnaire de machine virtuelle - Télécharger vagrant

Installation

Lancer un terminal en mode administrateur sous windows (pour éviter les problèmes de symlink)

cd ~/{$project}
vagrant up
vagrant ssh

cd $PROJECT_DIR
sudo mount --bind $HOME_DIR/vagrant_node_modules $PROJECT_DIR/node_modules

# Lancez le serveur sur localhost:8080
node src/server/express/main.js &

# Lancez le serveur REST
python3.5 $DJANGO_DIR/manage.py runserver 0.0.0.0:8000 &

Developpement

• 

CLI

Vagrant

# Démarrrer la VM
vagrant up

# Eteindre la VM
vagrant halt

# Supprimer la VM
vagrant destroy

# Se connecter en ssh à la VM
vagrant ssh

Front-end

# Lancer webpack avec la configuration pour produire le bundle.js (regroupement des dépendances javascript)

# Option 1
./node_modules/.bin/webpack -d --config webpack-config.js

# Option 2
npm run build

# Option 3, depuis n'importe quel dossier
npm run --prefix /vagrant build

# Lancer webpack pour automatiser la génération à chaque modification
# Attention: problème de synchronisation en dehors de la machine virtuelle

# Option 1
./node_modules/.bin/webpack -d --config webpack-config.js --watch

# Option 2
npm run watch

Server REST

# Lancer le serveur Django depuis l'host
vagrant ssh -c "/usr/bin/python3.5 -u $DJANGO_DIR/manage.py runserver 0.0.0.0:8000"

# Lancer le serveur Django depuis la machine virtuelle
vagrant ssh
python3.5 $DJANGO_DIR/manage.py runserver 0.0.0.0:8000

# Lancer les migrations depuis l'host
vagrant ssh -c "/usr/bin/python3.5 -u $DJANGO_DIR/manage.py makemigrations"
vagrant ssh -c "/usr/bin/python3.5 -u $DJANGO_DIR/manage.py migrate"

# Lancer les migrations depuis la machine virtuelle
vagrant ssh
python3.5 $DJANGO_DIR/manage.py makemigrations
python3.5 $DJANGO_DIR/manager.py migrate

Ressources

• Style de code et conventions pour react et javascript

• Style de code et conventions pep8 pour python

• Opencv - Image processing with python API

• Tutoriel pour utiliser react avec npm, babel et webpack

• Etat des lieux des différentes technologies javascript et de leur utilité

• Bibliothèque recharts pour afficher des graphiques avec React et D3JS

• React props versus state

• Comment accéder à la vidéo et à l'audio d'un ordinateur depuis le navigateur

• Comment gérer le flux video/audio, gérer les formats en enregistrer

Ressources (old)

• Tutorial for using react with D3js (fork adapté pour la version 4 de D3JS)

• Alternative à recharts, plus dynamique