gabriel-dahan/passepar-4

PASSEPAR-4, objet de participation aux Trophées NSI

PASSEPAR-4

Présentation

Ce projet est une adaptation du fameux Puissance 4 pour le web, étendu à un système plus 'compétitif', dans le thème de Matrix©. Il est constitué de deux parties distinctes : l'API, faite en Python (avec Flask), qui gère toute la partie logistique, base de données, websockets, etc. ; et l'application à proprement parler, faite en HTML, CSS, JS (TypeScript), le tout à l'aide de VueJS (framework), qui applique toutes les données fournies par l'API au site pour assurer son bon fonctionnement.

Voici une version hébergée du projet : https://passepar4.fr/

Installation

L'installation du projet se fait donc en deux temps :

API

Suivez ces étapes pas à pas pour installer l'API.

Prérequis :

• Python >=3.8 : https://www.python.org/downloads/.
• Ne pas avoir de proxy bloquant activé (type lycée).
• Être administrateur de son ordinateur (en cas de mise sur le réseau).

---

Créez un nouvel environnement python à l'aide du module venv (natif) et activez-le, puis installez les dépendances du projet :

Windows :

$ python -m venv .venv
$ .venv\Scripts\activate
(.venv) $ pip install -r requirements.txt

Linux :

$ python3 -m venv .venv
$ . .venv/bin/activate
(.venv) $ pip install -r requirements.txt

---

Il vous faut ensuite créer un fichier .env à la racine du dossier ./api avec les données suivantes :

DB_URI=sqlite:///site.db 

SECRET=...

• DB_URI : Nous recommandons de prendre l'adresse donnée par défaut : bien qu'une adresse MySQL/PostgreSQL soit également valide et fonctionne sans aucun doute, l'API n'a pas été testée pour.

• SECRET : Clé secrète de l'application, elle peut par exemple être générée de la maniètre suivante en Python :

import uuid
uuid.uuid4().hex  # --> Exemple : '21aad80a741a42d584fc17729a7b2018'

Il reste une dernière étape avant que l'API soit prête à être lancée : (re)initialiser la base de données, à l'aide de la commande suivante :

(.venv) $ python resetdb.py

Note : Ce fichier à initialement été fait pour réinitialiser la base de données lors de changements durant le développement, mais peut également servir à initialiser la base de données lors du premier lancement du serveur.

Vous pouvez ensuite lancer l'API :

(.venv) $ python run.py

Note : Par défaut, le serveur ne sera accessible qu'en local ! Pour l'ouvrir à votre réseau, il faudra changer le keyword host à 0.0.0.0 dans le fichier run.py :

if __name__ == '__main__':
   # Avant : host = '127.0.0.1'
   socket.run(app, debug = True, host = '0.0.0.0') 

Cela nécessite généralement des droits administrateurs.

Application (VueJS)

Prérequis :

• Node.js >=v16.17.0 (des versions antérieures fonctionnent probablement, mais le projet n'a pas été testé avec ces versions) : https://nodejs.org/en/download.
• npm >=9.6.0 (livré avec Node.js, vérifier que la version est à jour : 'npm --version').

Pour installer l'application dans son ensemble (hors-API), il suffit d'éxecuter cette commande (à la racine de ./app) :

$ npm install 

Cette commande va installer toutes les dépendances du projet dans les bonnes versions, il est alors possible de lancer l'application (en développement) avec la commande suivante :

$ npm run dev

Note : Veillez à ce que l'API soit lancée pour éviter des erreurs de connection dans les outils de développement sur votre navigateur.

passepar-4's Issues

Login, register, formulaires, ...

@AdrianUtge, comment vous comptez gérer les utilisateurs au niveau front-end ? Il vous faut quoi comme info ?
Je travaille sur l'endpoint '/api/players' et j'ai déjà mis /register (pour créer un compte), et /<playerid> pour avoir des infos sur le joueur.

Je peux ajouter /login, qui renvoie un booléen si le mot de passe donné avec l'email est le bon, mais comment on le laisse connecté après ? Je stocke une session avec son ip, qui dure tant de temps ?

Organisation des fichiers (frontend)

Si possible essayer d'organiser les fichiers dans des dossiers pour avoir d'un côté tout ce qui est style, scripts, html ... Même au sein des fichiers HTML si il y en a beaucoup au bout d'un moment il faudra les organiser en plusieurs catégories du site 👍

PS. : T'as le droit d'avoir deux fichiers qui ont le même nom quand leur extension est différente donc pas obligé de mettre "p4" après

Partie.html

Salut, comme j'ai fait le ficher game.html qui se génère de manière dynamique il faut remplacer le pointage du partie.html

Adrian.

API - côté JavaScript

Ce serait bien de mettre dans des constantes les valeurs importantes genre la racine de l'API, le port, etc. Comme ça on pourra facilement changer entre serveur de développement et local dans tout le code 👍

Requirements.txt

Salut, tu as installe des nouvelles libs sans update le requirements.txt
@gabriel-dahan