Projet Site Home a Game
Chaque fin d’année Bachelor à Ynov nous avons un gros projet (UF) sur plusieurs mois à réaliser en équipe à rendre à la fin de l’année pour mettre en pratique tout ce que l’on a pu apprendre tout au long de notre formation.
Cette année nous avions un vrai client, la société On The Road a Game, qui fasse à la crise sanitaire a eu un nouvelle idée de concept.
Je ne vais pas décrire ici la société, car j'ai ensuite été engagée par cette société pour reprendre mon travail et le mettre réellement en place en septembre/octobre 2021, j'ai donc écrit un article de blog à ce sujet juste ici
Pour cela 2 projets distincts :
- Site Web de gestion complète du concept.
- Infrastructure système et réseau permettant de soutenir les besoins web, applicatifs et en base de données de la solution @Home A Game.
Avec mon binôme, nous nous sommes réparti les tâches, je m’occupais du site internet, et lui de l’infrastructure, tout en s’entraidant sur n’importe quelles tâches pour avancer le mieux et le plus vite possible.
Je vais donc ici vous décrire mon travail niveau Web
Le concept @Home a Game permettra de goûter à l’esprit des voyages On The Road a Game (OTR) sans devoir voyager, en restant chez soi !
- Chaque session @Home a Game dure 8 à 12 semaines.
- 4 sessions de @Home a Game sont prévues chaque année.
- Lors du lancement de la session, une dizaine de défis sont proposés aux participants.
- Les défis sont pensés dans l’esprit des challenges qui sont relevés par les voyageurs lors d’un voyage OTR et ont pour but de pousser à la rencontre, à la découverte, à la créativité…
- Chaque défi rapporte un nombre de points défini à l’avance.
- Les participants doivent valider chaque défi en soumettant une photo ou une vidéo qui prouve sa bonne réalisation.
- A la fin de chaque session, un classement général est établi.
- Une dotation en goodies récompense les participants les mieux classés de chaque session.
- Le vainqueur de chaque session se qualifie pour un tirage au sort qui permet de gagner 1 voyage On The Road a Game.
Voici plus en détails les fonctionnalités à développer :
Front-end
Le front-end est accessible à tous les internautes, sans besoin de se connecter.
Il permet d’afficher :
- La présentation générale du jeu @Home a Game
- Le formulaire d’inscription à une session
- Le classement général en temps réel de la session en cours
- Des articles d’actualités mis à jour automatiquement
Espace de jeu
L’espace de jeu est réservé aux participants qui ont payé leur participation à la session en cours.
Il donne accès à :
- Un espace de gestion de ses données personnelles
- La liste des 2 et leur présentation complète
- Un outil qui leur permet de soumettre la preuve de réalisation de chacun des défis
- Un espace qui leur permet de suivre en temps réel la validation des défis par les administrateurs
Back-office
Les administrateurs ont accès à un back-office qui leur permet :
- De gérer les comptes et les accès des participants
- De créer les sessions @Home a Game. Pour chaque session, il faut pouvoir paramétrer :
- La date de début
- La date de fin
- Les défis à réaliser
- La dotation en goodies
- De créer, pour chaque session, les défis à relever. Chaque défi se compose d’:
- Un intitulé
- Une ou plusieurs images d’illustration
- Un nombre de points prédéfini
- De valider la bonne réalisation des défis soumis par les participants
- Lors de la validation des défis, le système doit permettre l’envoi d’un message justificatif en cas de refus de la validation
- Le système doit permettre d’attribuer un nombre de points intermédiaire en cas de défi partiellement réalisé
Ce site devez être obligatoirement réalisé à l'aide d'un Framework, j'ai choisi d'utiliser Laravel 8 (Framework PHP), nous l'avons appris en cours et j'ai trouvé ce Framework très complet pour faire du back et du front.
De plus, il facilite énormément le développement comme pour toute l'authentification par exemple, la gestion des autorisations/droits, ce qui est très utile pour un site avec un back-office
J'ai utilisé son générateur de template Blade pour le front, du CSS et également le Framework CSS Bootstrap pour avoir un design assez rapidement. J'ai utilisé du JavaScript et la librairie Jquery pour le dynamisme. Enfin ce projet est relié à une base de données MySQL.
Vous pouvez retrouvez le projet sur mon gitLab en cliquant juste ici