UFood

Application web Vue.js pour la gestion de tâches de tableaux en colones style Kanban. Cette application est faite en anglais, cette documentation ne reflète donc pas son language.

Configuration

1. Créer le fichier de configuration

1.1 Fichier de configuration Front End

Créez un fichier .env.local à la racine du repertoire frontend avec les variables d'environnement suivantes :

VITE_APP_API_URL=http://localhost:3000

Variables d'environnement :

• VITE_APP_API_URL : URL configuree pour le backend

1.2 Fichier de configuration Back End

Créez un fichier .env à la racine du repertoire backend avec les variables d'environnement suivantes :

DATABASE_URI=mongodb://localhost:27017/utask
PORT=3000
JWT_SECRET=SECRET_JWT_STRING

Variables d'environnement :

• DATABASE_URI : URI configuree pour la connection Mongo
• PORT : Le port sur lequel le serveur express du backend va rouler, celui-ci doit le mettre meme port que celui specifie pour le frontend
• JWT_SECRET : Le secret definie pour JWT lors de l'encodage de token. Si vous n'en avez pas, vous pouvez rouler la commande suivante

node -e "console.log(require('crypto').randomBytes(64).toString('hex'))"

2. Mongo Cluster

Assurez-vous d'avoir une connexion MongoDB. L'URI par defaut sera mongodb://localhost:27017/. Si aucune connexion n'existe, vous pouvez en creer une facilement grace a docker. Les ports fournis sont dans le cas ou une connexion differente au port par defaut (27017) est existante. Toute autre facon de creer le cluster est egalement valable, assurez-vous d'avoir la bonne variable d'environnement DATABASE_URI

 docker run -d --name mongo_utasks -p 27018:27017 mongo:8

Prérequis

• Node.js (version LTS recommandée)

Vérifier que Node est installé avec la commande:

node -v

Installation et lancement

1. Installer les dépendances dans les deux repertoires (frontend et backend) ou clique-droit sur chacun des packages.json et Run 'nmp install'. La commande suivante fonctionne pour le monorepo:

npm run install:all

2. Lancer l'application en mode développement. Ceci lance le backend et frontend en parallele avec le meme logger grace au package concurrently. Celui-ci peut avoir a s'installer lors du lancement de la commande :

npm run dev

• Si vous preferez, il est aussi possible de rouler les scripts individuellement. Il suffit juste d'etre dans le bon repertoire, le faire a partir des package.json des repertoires respectifs fonctionne aussi.

L'application sera disponible à l'adresse http://localhost:5173/

A. Des scripts pour build et pour lancer l'application sans etre en mode dev sont egalement disponibles dans le cas de deploiements potentiels

Notes

L'édition des champs est inline, c'est-à-dire qu'en cliquant dessus, ils deviennent éditables et appuyer sur Entrer (Enter) confirme le changement, Échap (ESC) l'annule.

L'acces aux chats se fait une fois connecte. Un bouton va apparaitre sur la droite pour changer la vue sur le chats (de l'autre cote apparaitra un bouton pour revenir aux boards). Il y a deux types de chats, un global que tous les utilisateurs voient et des prives entre utilisateurs. Pour creer un chat prive, il suffit d'appuyer sur le bouton et de rechercher un utilisateur soit par nom d'utilisateur (username), soit par courriel. Une fois le chat cree, il ne sera pas reellement cree tant qu'un premier message n'a pas ete envoye.

Pour bien tester les chats en temps reel, il est possible d'utiliser la navigation privee ou d'autres navigateurs afin d'etre connecte sur 2 users differents et ecrire soit dans le chat global ou dans un chat prive. Pour bien voir les implications, il est recommande de creer 3 utilisateurs:

• Les trois peuvent ecrire dans le chat global en temps reel
• 2 peuvent s'ecrire en chat prive et le 3e ne le verra pas
• possible de tester en inversant les utilisateurs de l'etape precedente