Swissdle

Description

Swissdle est une application sur laquel l'utilisateur doit, chaque jours, essayer de deviner une ville de Suisse.

Dès que l'utilisateur fait une proposition de ville, des indices s'affiche à l'écran pour qu'il sache s'il ce raproche de la ville du jour ou non.

Ce concept est inspiré de différents jeux comme Wordle, Loldle et Globle.

Captures

Quand l'utilisateur arrive sur le site il sera accueilli avec cette page:

Il a ensuite la possibilité de faire un guess :

Il devra essayer jusqu'à ce qu'il trouve la bonne ville :

Comment mettre en place le projet ?

1 Clone

Premièrement, cloner le repository.

En http :

git clone https://github.com/HE-Arc/Swissdle.git

ou par ssh :

git clone git@github.com:HE-Arc/Swissdle.git

2 Structure du projet

Le projet contient les dossiers suivants :

• backend-laravel -->
• frontend-vue -->
• data -->

3 Démarrer Docker

Si ce n'est pas déjà fait, démarrer Docker.

Lorsque celui-ci à démarrer, vérifier qu'il est bien en mode "Linux Containers".

4 Ubuntu pour Windows

Ouvrir Ubuntu et se déplacer à l'endroit où le projet a été cloné.

ℹ️ Pour accéder au disque de la machine "hôte" depuis Ubuntu, se rendre dans le dossier /mnt :

cd /mnt

Si l'on liste les sous dossier de ce répertoire, on retrouve nos disques :

ls -la # ou ll

Sortie :

total 12
drwxr-xr-x  8 root    root    4096 Dec 10 13:12 .
drwxr-xr-x 24 root    root    4096 Dec 18 21:18 ..
drwxrwxrwx  1 thombre thombre  512 Dec 17 20:09 c
drwxrwxrwx  1 thombre thombre 4096 Dec 13 22:45 d
drwxrwxrwx  1 thombre thombre 4096 Dec 15 00:10 e
drwxrwxrwx  2 root    root    4096 Dec 10 13:12 f
drwxrwxrwt  5 root    root     120 Dec 18 21:18 wsl
drwxrwxrwt  8 root    root     320 Dec 18 21:18 wslg

5 Setup du backend laravel

Une fois dans le dossier où le repository a été cloné, se déplacer dans backend-laravel :

cd backend-laravel

5.1 Composer

Obtenir les dépendances du backend laravel avec la commande suivante :

composer install

5.2 Mise en place du .env

Executer la commande suivante :

cp .env.example .env

5.3 Lancement des conteneurs

💡 Pour pouvoir utiliser sail plus simplement, rajouter un alias dans le ~/.bashrc :

nano ~/.bashrc

Ajouter la ligne : alias sail='[ -f sail ] && sh sail || sh vendor/bin/sail' à la fin du ~/.bashrc.
Sauvegarder puis quitter l'édition.

Lancer la commande :

sail up -d

5.4 Création et peuplement de la base de données

Lancer les migrations :

sail artisan migrate

Peupler la base de données :

sail artisan db:seed

6 Setup du front-end

Revenir à la racine du projet et se déplacer dans le dossier frontend-vue :

cd frontend-vue

6.2 Dépendances npm

Installez les dépendances nécessaires :

npm install

6.3 Lancer le frontend

lancez le mode de développement avec la commande :

npm run serve

Assurez-vous d'avoir Node.js installé sur votre machine avant d'exécuter ces commandes. Le processus d'installation des dépendances peut prendre quelques instants. Une fois terminé, le Frontend sera accessible en mode développement.

7 Accès à l'application en local

Dès maintenant il doit être possible de se rendre sur localhost:8080 sans rencontrer d'erreurs.

Ressources supplémentaires

Vous pouvez accéder à swissdle ici

Manuel de développeur ici

Et accéder à la documentation de notre API ici

Participant

• Thomas Bruno
• Salmon Mathias
• Santschi Loïc