-- Acrobatt --

LP CDAD - IUT Robert Schuman - 2022

BEAUMIER Elias - CHALABI Wassim - DI PIAZZA Hugo - GARDEUR Quentin - GUILLEMINOT Lucas

Sommaire

1. Présentation
   1. Contexte
   2. Objectif
   3. Client Web
   4. Client Mobile
2. Pré-requis
3. Installation
4. Démarrage
5. Configuration
6. Utilisation
   1. Utilisation du client web
   2. Utilisation du client mobile
7. Développement
   1. Serveur
   2. Client Web
   3. Client Mobile
8. Publication
9. Annexes

Présentation

"Les Touristes" est une application gratuite permettant de planifier à l'avances ses voyages.

Pas d'inspiration ? Cherchez parmis notre base de données des centaines de voyages pré-rempli.

Contexte

Organiser correctement ses déplacements est nécessaire pour profiter pleinement de son voyage.

Nos applications proposent une nouvelle façon de voyager et de découvrir des lieux qui vous plaisent en toute tranquillité.

Une carte interactive avec la possibilité de placer des points personnalisés, un album de voyage, une liste de tâches interactive, rédiger un journal de bord avec les membres du voyage... Tout ceci permet de créer le compagnon de voyage idéal.

Objectif

L'objectif est de réaliser une application web de création et de gestion de voyages avec une partie publique vitrine et une partie privée nécessitant une authentification : todo-list, itinéraire, étapes, journal, gestion des partages, etc.

En addition à cela, il faut aussi réaliser une application mobile de suivi en temps réel du voyage : accès aux documents, informations locales, photos, gestion des dépenses, etc.

Évidemment, il est aussi nécessaire de créer une API de gestion des données proposant des routes permettant de réaliser toutes les fonctionnalités de l’ensemble des applications.

Client Web

Sur l'application web, l'utilisateur peut créer et se connecter à son compte.

Ensuite, il a la possibilité de créer, modifier ou supprimer son voyage via son espace personnel (le "Dashboard").

Au niveau des fonctionnalités :

• Système d'authentification et d'inscription.

• Carte interactive où l'utilisateur peut placer, déplacer et modifier ou retirer des points d'intérêt. De même pour les points d'étapes de voyage. Il est aussi en capacité de relier les points d'intérêt à une étape, afin de générer des étapes dans le planning.

• To-Do List interactive où l'utilisateur peut créer, modifier, compléter et supprimer des tâches.

• Planning où l'utilisateur peut apercevoir les différentes étapes du voyage.

• Une liste de membres où le créateur du voyage peut ajouter et exclure des membres.

• Journal où chaque membre du voyage peut ajouter, modifier et supprimer des entrées.

• Liste de documents où l'utilisateur peut ajouter des images ou des documents en y insérant un titre et une description. Ensuite, il est en capacité de le visionner, de le télécharger, le modifier ou le supprimer.

• Galerie où l'utilisateur peut apercevoir ses photos prises via l'application mobile sur son téléphone.

Client Mobile

Sur l'application mobile, l'utilisateur pourra visualiser tout ce qu'il a réalisé depuis l'application web :

• Système d'authentification.

• Carte interactive où l'utilisateur peut voir ses trajets et ses points

• Planning où toutes ses étapes et les points d'intérêts par jour seront résumés dedans

• To-Do List interactive où l'utilisateur peut compléter et modifier ses tâches

• Une liste de membres où le créateur du voyage peut ajouter et exclure des membres.

• Un Dashboard où l'utilisateur pourra voir ses informations personnelles ainsi que sélectionner le voyage actif.

• Une galerie où l'utilisateur pourra ajouter des photos depuis son appareil ou prendre des photos avec sa caméra.

• Un journal de bord où chaque utilisateur pourra ajouter des messages, les éditer et les supprimer.

Pré-requis

• Docker (https://www.docker.com/get-started/)

• NodeJS (https://nodejs.org/fr/docs/)

• NPM

• Android Studio (pour lancer l’application sur un émulateur, éventuellement)

• Expo (https://docs.expo.dev/get-started/installation/)

• Avoir cloné le projet depuis GitLab.

• Les ports 8080, 8081, 3000, et 3630 devront être ouverts et libres.

Installation

Installation et lancement du serveur

Une fois Docker installé et le projet cloné, se rendre dans le dossier /server de l’application et lancer un terminal dedans.

## Exécuter la commande :
docker-compose -f dev.docker-compose.yml up --build

Il est possible que cette partie prenne plusieurs minutes. Le serveur écoutera sur le port 8080, assurez-vous qu’il est disponible. PHPmyAdmin est aussi disponible sur le port 8081.

Installation et lancement du client web

## Dans le dosser web, exécuter :
npm install
## Exécuter:
npm run start

Installation et lancement de l’application mobile

## Dans le dossier mobile, exécuter :
expo install

Ouvrir un émulateur android (ou iOS).

Dans la fenêtre du navigateur dans laquelle expo a ouvert, cliquer sur « Run on Android device / emulator » ou « Run on iOS simulator ».

Démarrage

Pour démarrer le serveur en local, exécuter les commandes suivantes dans le répertoire du serveur.

npm install
node index.js

Configuration

Configuration du serveur

Le serveur n'as pas besoin d'être configuré, il fonctionne très bien de base. Néanmoins, vous pouvez changer sa configuration simplement dans le fichier docker-compose.yml (pour la production) et dev.docker-compose.yml pour le développement

Configuration du client web/mobile

Avant de commencer à développer, vérifier que le client web et mobile soient bien configurés pour les requêtes:

// Pour le client web (./web/src/api/api.json)
{
  "base_url": "http://localhost:8080/api" // Changer ici
}

// Pour le mobile (./mobile/api/config.js)
export default {
  baseUrl: 'http://localhost:8080', // Changer ici (NE PAS METTRE /API)
};

Développement en local

Au préalable, vérifier que Docker est allumé:

docker ps

Pour lancer le serveur en mode développement (avec le hot reload et la migration en direct), executer:

## Dossier server
docker-compose -f dev.docker-compose.yml up --build --remove-orphans

cette opération peut prendre quelques instants

Déploiement

Au préalable, avoir uploadé sur la VM les fichiers du projet.

1. Build une image des deux Dockerfiles

## Dans le dossier où se situe le Dockerfile du serveur
docker build -t acrobatt-touristes-server:lastest .

## Dans le dossier où se situe le Dockerfile du client web
docker build -t acrobatt-touristes-web:latest

2. Lancer docker-compose

Lancer une instance de docker, puis :

docker-compose up

Utilisation

Utilisation du client web

Après avoir lancé le client web, nous tombons sur la page d'accueil.

• Page d'accueil :

• nous pouvons créer un compte ou se connecter via les deux boutons disposées au-dessus de la page
• l'utilisateur peut aussi cloner un voyage via la liste des voyages publics

• Inscription :

• l'utilisateur est amené à remplir un formulaire d'inscription, il lui suffit d'insérer : son nom, son prénom, sa date de naissance, son nom d'utilisateur, son adresse e-mail et son mot de passe
• il obtiendra des erreurs en fonction des champs mal saisis

• Connexion :

• après avoir crée son compte, l'utilisateur est donc amené à se connecter avec ses informations correctes
• il obtiendra une erreur si il s'est trompé sur ses informations

• Dashboard :

• l'utilisateur peut visualiser ses informations personnelles, ses voyages qu'il a crée et les voyage qu'il a rejoint
• il peut cliquer via le bouton en bas à gauche de son écran pour "Créer un voyage", il devra insérer le nom du voyage ainsi que des tags si il le souhaite
• une fois crée, il peut cliquer dessus pour le sélectionner, modifier le nom du voyuage ou le supprimer
• il peut aussi modifier sa photo de profil en cliquant sur l'avatar

• En-tête :

• l'utilisateur peut cliquer sur "Les Touristes" pour se rendre sur la page d'accueil
• pour aller sur le Dashboard, il faudra cliquer sur l'icône blanche
• pour se déconnecter il faudra cliquer sur l'icône rouge

• Carte :

• on peut observer le nombre d'étapes, de points d'intérêt et de trajets du voyage
• via le menu de droite, on peut rendre le voyage public en cliquant sur le verrou et modifier le nom du voyage
• il y a 3 modes d'utilisation
• mode navigation (icône Oeil) : il permet de naviguer librement sur la carte, on peut observer les informations de chaque point en cliquant dessus
• mode POI (point d'intérêt, icône orange) : il permet de placer, déplacer, modifier, supprimer des POI sur la carte ; on peut relier ces points à une étape
• mode STEP (étape, icône verte) : il permet de placer, déplacer, modifier, supprimer des STEP sur la carte ; on peut y lier des documents

• To-Do List :

• on peut créer, modifier, checker, supprimer des tâches
• on peut filtrer les tâches en fonction de si ils sont checkés ou non
• on peut lier des documents à ces tâches

• Planning :

• généré via les POI liés aux STEP
• on peut cliquer sur les POI, cela nous amène directement au POI sur la carte

• Membres :

• ajout de membres via leur adresse e-mail
• exclusion possible

• Journal :

• ajout, modification et suppression de messages

• Documents :

• tous les documents liés au voyage sont référencés ici
• néanmoins on peut en ajouter quand même via cette page (PDF, JPG, PNG, etc...) : nom, description

• Galerie :

• toutes les photos ajoutés ou prises via l'application mobile sont référencés dans la galerie
• téléchargeables en un clic via le bouton

Utilisation du client mobile

Une fois l'application installée sur l'appareil, l'utilisateur sera inviter à se connecter pour accéder à son tableau de bord personnel. Avant toutes choses, l'utilisateur est invité à rejoindre un voyage. Une fois le voyage rejoint, l'utilisateur pourra controller l'entièreté de son voyage :

• To-Do List :

• Lister les tâches
• Modifier le titre et la description d'une tâche
• Accéder aux documents liés de la tâche
• Changer le statut de la tâche (fait / pas fait)
• Supprimer la tâche

• Carte :

• Naviger librement sur la carte avec les différents points d'interrêts et les étapes
• Au clic sur un point, l'utilisateur pourra voir le titre et la description du point
• Au clic sur un point, l'utilisateur pourra lancer la navigation intégrée avec Google Maps
• Centrer sur la géolocalisation de l'appareil

• Planning :

• Voir le planning complet (avec les étapes, les jours et les points d'intérêts)
• Au clic sur une étape ou un point d'intérêt, voir les documents liés ainsi que le titre et la description
• Si le voyage est activé, il pourra voir les dates prévisionnelles

• Galerie :

• Afficher toutes les photos prises avec l'application
• Ajouter une photo depuis le mobile
• Prendre une photo depuis l'applicaiton
• Supprimer une image

• Journal :

• Ajout d'entrées de journal

Publication

Disclaimer : seuls Lucas G. et Elias B. ont accès au dépôt de déploiement.

1. Build docker

docker build -t registry.gitlab.com/lucasglmt/acrobatt-deployment .

2. Push le docker

docker push registry.gitlab.com/lucasglmt/acrobatt-deployment

3. Sur la VM, pull le docker

docker pull registry.gitlab.com/lucasglmt/acrobatt-deployment:latest

4. Monter les conteneurs

docker-compose up -d

Annexes

Vous pourrez retrouver sur ce lien différents documents liés à ce projet :

DRIVE