Une web app pour trouver des groupes de musique queers et féministes.

L'app en ligne ici

Compétences acquises durant ce projet :

Frontend

Faire une barre de recherche qui filtre les résultats (Javascript) ;
Créer des checkbox qui filtrent des résultats ;
Passer des données entre des pages html et des pages php via l’url ;
Communiquer des données entre des pages php et js.

Backend

Gérer une base de données SQL (MySQL) ;
Intégrer une carte de France interactive ;
Développer une partie administration dans un site.

Technos :

HTML5 / CSS3 / JavaScript
Sass
PHP
SQL / MySQL /PHP MyAdmin
Bootstrap
JQuery
Git / GitHub

Commentaires :

C’était un projet super intéressant, qui m’a demandé beaucoup de réflexion et de recherche.

Les points "challengeant" (traduction : je n'avais aucune idée de comment j'allais faire ça):

Faire fonctionner le système de filtre checkbox ;
Communiquer des données entre différents langages (php - js).

I. Présentation du projet

Je vous conseille vraiment de réaliser un projet comme celui-ci, suite à un tuto ou une formation. C’est vraiment là que vous allez apprendre le plus.

Pour faire une analogie parlante : vous avez passer votre code c’est cool (la formation ou tuto), mais maintenant il vous faut quelques heures de conduites avant d’avoir votre permis !

Un projet perso oui, mais quoi ?

Pour un maximum d’efficacité, je vous conseille de trouver un projet qui réponde à ces trois points :

Passionnant : En rapport avec l’une de vos passions ;
Utile : Qui pourrait être utile à d’autres personnes ;
Challengeant : Qui nécessite des compétences que vous n’avez pas encore (sans être trop dur non plus - oui je sais c’est pas simple de jauger … !)

Exemple :

J’ai fait ce projet à la suite du cours Udemy de John Taieb, dans lequel on construit avec lui un site de e-commerce PHP / MySQL.

Je voulais consolider mes compétences avec un projet perso, en proposant un outil qui n’existe pas dans le petit milieu queer-punk : regrouper tous les groupes queers / féministe de France métropolitaine en différentes catégories, à la fois par régions/villes et par styles.

Ce projet était parfait pour maintenir ma motivation au niveau le plus haut.

Il m’a été nécessaire de résoudre beaucoup de bugs et de problèmes. Du coup, j’ai appris énormément de choses.

J’ai pu consolider et intégrer toutes les notions apprises durant le cours, aussi bien en frontend qu’en backend.

Certaines problématiques spécifiques à ce projet m’ont demandé plus de temps de recherche et d’investissement que pendant le cours : c'est normal et bon signe.

Ce que je ne savais pas faire (ni comment j'allais le faire) :
Connecter des checkbox à un système de filtrage JS
Faire des requêtes complexes avec MySQL ;
Communiquer des infos entre différents langages (PHP - JS)
Intégrer des modules extérieur à un projet (ici la carte de France JS).

Comme vous pouvez le voir, j’étais loin d’être serein quand à la faisabilité quand j’ai commencé ! Mais votre fierté n'en sera que décuplée quand vous allez réussir à résoudre un à un tout vos soucis, je vous assure. En tout cas pour moi ça c'est vérifié !

Je vais détailler les étapes de construction point par point et m’attarder sur les points les plus complexes. Ça n'a pas été simple, j'ai du faire preuve de patience et d'acharnement, et je trouve ça bien de m'attarder sur tous ces aspects également.

II. Les étapes détaillées

1. Établir une Road Map.

Même si au début, on ne sait pas toujours où l'on va exactement, il est primordial d'établir un plan d'attaque. Sous forme de liste par exemple, où de checkbox, de préférence par ordre chronologique. La mienne ressemblait peu ou proue aux étapes de cette partie.

Faites également une partie "Bugs et problèmes", où vous noterez tous les bugs et problèmes rencontrés. D'abord parce que c'est bien utile pour vous y retrouvez quand vous reprenez votre projet sur plusieurs jours, et puis parce que c'est important de garder une trace des solutions trouvés. Une des grandes règles du codes est : N'ai jamais a débugger deux fois le même bugs.

2. Le Design

Pourquoi cette étape : Que l'on maitrise ou non un logiciel de graphisme, faire un design avant de se lancer dans le codage du front me semble être une étape indispensable. De très chouettes outils sont maintenant disponibles en plus maintenant (Adobde XD par exemple, gratuit et assez intuitif dans la prise en main).

Si jamais vous êtes vraiment une quiche en design ou que vous ne vous sentez pas la patience d'apprendre à maitriser XD ou Sketch, vous pouvez très bien aussi faire un simple dessin sur une feuille. Même si vous ne savez pas dessiner, quelque chose de très schématique, avec des anoations sera toujours beaucoup mieux que rien.

N'hésitez pas également à vous inspirer de design existant (sans les voler bien entendu). En terme de design pur comme d'UX, les sites assez connus sont généralement bien foutu. Inspirez vous de sites que vous appréciez, sur lesquels il est agréable de naviguer par exemple.

Exemple : La maquette d'origine : pas mal de différences avec la version finale (ci-dessous) mais très utile pour avoir une ligne directrice.

Le projet final

J'ai opté pour un design simple et épuré (Adobe XD). Les couleurs ont un sens par rapport au contenu de mon app (les couleurs du drapeau trans). J'ai également décidé de limiter au maximum le nombre de lien (mais tout en intégrant les fonctionnalités challengeantes que je souhaitais implémenter).

3. Créer la base de données avec MySQL

Je ne vais pas détaillé le process ici car ce serait un peu long. Un très bon cours OpenClassroom pour apprendre à créer une base de donnée ici.

Le cours est cependant un peu long et détaillé, il n'est pas nécessaire à ce stade d'apprendre tant de détails pour mener à bien son projet.

Les bases apprises dans le cours Udemy de John Taieb ("Formation Complète Développeur Web" -> "Apprendre PHP et MySQL et créer un site Web dynamique") m'ont largement suffit. (cependant je ne recommande pas spécialement l'achat complète de cette formation, un peu datée sur certains points).

Je suppose que n'importe quel bon tuto youtube fera aussi l'affaire. (reportez-vous au cours OpenClassrooms si besoin).

4. HTML/CSS

Je recommande de faire d'abord, même grossièrement, tout le HTML/CSS. Si certains éléments vous prenne la tête, notez-le sur votre ROAD MAP, partie "bugs et problèmes" et passer à la suite. Inutile de s'attarder sur les détails et finition pour l'instant.

C'est un bon moyen de s'échauffer, et c'est toujours agréable de voir son site naître visuellement. (profitez de la ballade avant de vous prendre la tête avec le backend).

5. Faire la partie admin (CRUD) du site en PHP

*CRUD pour Create, Read, Update Delete. Ce sont, en gros, les quatre piliers de base des interactions avec une base de données.

C'est ici que commence les problèmes généralement.

Pour ma part, ça m'a demandé pas mal de réflexion et bugs à résoudre.

READ :

Il fallait faire des requêtes à la base de données pour que les éléments présents dans celle-ci s'affichent dynamiquement dans la partie admin (dans un index.php qui affichait tous les noms des groupes dans un tableaux, cf image)

La partie Admin du site.

UPDATE : Il fallait aussi gérer la possibilité d'éditer les groupes pour modifier les infos.

DELETE : Mais aussi pouvoir supprimer les groupes au besoin.

CREATE : Et enfin bien sûr ajouter de nouveaux groupes via un formulaire.

6. Relier l'admin au front (les éléments présents dans l'admin doivent maintenant s'afficher dans le front).

Après cela, il fallait que la partie Public s'affiche dynamiquement elle aussi, et donc la connecter à la Database. Cette partie demande moins de commande (pas de requêtes SQL complexes car on veut juste afficher les données)

La petite difficulté a été d'afficher les groupes sous forme de tableaux car cela nécessitait l'utilisation de jointures* (mais l'opération ressemblait beaucoup au tableau de la partie Admin finalement)

*voir cours openclassroom

7. Search Bar (filtre JS)

La search Bar ! Ce fût simple car je venais de faire un cours OpenClassroom qui implémentait exactement cette fonctionnalité avec jQuery (d'où mon utilisation de JQuery).

Pour plus de détails sur comment créer une barre de recherche qui filtre des résultats.

8. Connecter les checkbox à un système de filtrage des groupes (challenge).

Là. Là fût le challenge de ce projet.

Gérer un système de filtrage avec des checkbox. Peu de ressources présentes en ligne.

Beaucoup de tests de fonction JS en perspective.

Finalement après des jours d'acharnement, j'arrive à des checkbox filtrantes. Pas parfaites certes. Mais je les aime comme elles sont.

Pas parfaites effectivement car les filtres sont cumulatifs et non réellement filtrant (quand on n'en coche plusieurs, ils fonctionnent comme des OU et non comme des ET).

Un exemple et vous allez tout comprendre : si vous cocher "Ile de France" et "Punk" vous n'aurez pas les groupes punks d'Ile de France mais tous les groupes punks et tous les groupes d'Ile de France.

Dans mon cas je n'ai pas chercher à corriger la chose car ça m'arranger : il y a peu de groupes dans la base de données, je ne voyais pas l'intérêt d'un filtrage aussi restrictif.

Mais la possibilité de switcher entre les deux manières de filtrer pourrait faire partie de mes prochains challenges, des prochaines features à implémenter (cf étape 14).

La grosse difficulté fût aussi de gérer les noms de régions, qui dans la base de données peuvent contenir des espaces ou des accents ("Provence Alpes Côte d'Azur" si tu m'entends). Il a donc fallu remplacer tout ça à l'aide de regex par des _ pour pouvoir ensuite les attribuer en nom de classes CSS, et pouvoir utiliser le système de filtrage.

Piou.

9. Relier les régions de la carte de France à un filtrage

Une carte sympathique, type Le Bon Coin.

Après avoir intégré la carte de France (via un module libre de droits), il a fallu relier les régions aux système de filtrage .. ! Et ce ne fût pas sans peine. La solution retenue à été de récupérer l'id de la région cliquée et de le faire passer à la page suivante (celle qui affiche le tableau avec les groupes) via l'url.

Par exemple si on clique sur la région Aquitaine, notre url sera :

lesite.com/page2.php?ID=Z2

Une fois l'id de région passée, il suffit de le récupérer et de l'associer à la checkbox correspondante.

10. Rendre l'affichage du nombre sur la carte de groupes dynamique (bonus)

Au début je ne comptais implémenter cette fonctionnalité, et puis finalement je me suis lancé !

Afin de ne pas avoir à modifier l'affichage à chaque ajout de groupe, c'était mieux que l'affichage du nombre de groupe par région soit dynamique.

Mais ça me chafouinait car ça impliquait de faire en sorte que le mot "groupe" s'accorde lui aussi dynamiquement, selon s'il y avait 0 ou 1 groupe ou bien plusieurs groupeS.

11. Sécuriser la partie Admin

La partie admin permettant de modifier, supprimer ou ajouter des groupes, il est important que tout le monde ne puisse pas y avoir accès une fois le site en ligne .. !

Si vous aussi vous avez besoin de sécuriser une partie administration, je vous recommande grandement ce cours OpenClassroom. On pourrait croire que je suis sponsorisé par eux, mais en vrai pas du tout. J'y ai juste passé beaucoup beeeeeeaucoup de temps et je suis reconnaissant de tant de ressources de qualité !

Simple, efficace et suffisant ( surtout si vous souhaitez le rendre accessible qu'à quelques personnes par exemple) !

12. Amélioration et correction des petits bugs

C'est comme dans le bâtiment, c'est vraiment les finitions qui prennent le plus de temps ! Il y a aura toujours des petits détails à finir ou à améliorer. Savoir s'arrêter sera sans doute le plus dur !

Pensez à faire une checklist avant de vous lancer, ce qui vous permettra de ne pas vous éparpiller et vous évitera de passer 30 min à reprendre l'apparence d'un pauvre lien dans le footer.

Ça reste une étape très agréable car on sent que le projet touche à sa fin , et normalement à ce stade, tout fonctionne !

13. Mettre le projet en ligne : déploiement

Dernière étape : la mise en ligne du site ou de l'application !

Il faudra trouver un hébergeur, acheter un nom de domaine (il existe des formulaires peu chères). Vous trouverez plein de ressources sur l'internet, de comparatifs de formules et autres tests.

Pour ma part j'ai opté pour Hostinger car ils proposent des formules peu chères et plutôt complètes.

Après le procédé est assez simple (pour un site simple) : vous copiez-collez le dossier de votre site en local sur le serveur de votre hébergeur (grossièrement).

Quelques manipulation seront cependant nécessaires :

Si vous utilisez un préprocesseur pour le CSS (type Sass ou Less) il faudra le compiler. De manière général, il est conseillé de compiler son CSS pour le rendre compatible avec la plupart des navigateurs (sur ce projet, j'ai utilisé npm prefix). Généralement on fait un dossier "public" ou "dist" dans notre projet pour y mettre tous les fichiers qu'on a "préparés" pour la mise en ligne.
Exclure les dossiers et fichiers de production, que vous n'avez pas besoin de mettre en ligne (typiquement le dossier node_modules par exemple).

Webpack est une sorte de grosse caisse à outil qui permet d'automatiser un peu tout ça (mais je vous recommande de prendre le temps de d'abord le faire manuellement pour comprendre le fonctionnement).

14. Faire une liste des fonctionnalités futures à développer plus tard.

Une solution pour arrêter d'ajouter du code et des petites fonctionnalités et autres améliorations par-çi par-là est de lister les features qu'on ajoutera petits à petits.

Ça permet de mettre en ligne le projet le plus tôt possible, dès qu'on a une version fonctionnelle (appelée aussi M.V.P pour "Minimum Viable Product").

En plus ça nous permet de retoucher régulièrement à notre code afin de ne pas complètement oublier la structure.

Sur ce projet j'ai listé trois "fonctionnalités/amélioration à venir" :

Design plus moderne ;
Refactoriser une fonction quand j'aurais les compétences nécessaires (je n'y étais pas arrivé au cours du développement) ;
Ajouter toutes les grandes villes de France dans la base de données.

Conclusion

Je vous ai ici bien détaillé chaque étape, et cela reste un exemple très singulier dont le schéma ne pourra pas fonctionner pour tous les projets.

Cependant il me parait intéressant de pouvoir observer les méthodologies des autres pour construire la sienne : j'espère que cela pourra vous inspirer d'une manière ou d'une autre !

Hésitez pas à décrire en commentaire vos propres projets et méthodologies, c'est toujours intéressant de savoir comment les autres travaillent et appréhendent leurs propres projets. C'est intéressant aussi de tenir un tel journal de projet : maintenant avec le recul, j'aurais procédé complètement différent (déjà je n'aurais jamais utilisé PHP et MySQL et j'aurais tout fait un React + firebase :p )

Bon courage à vous pour vos projets ! Ce sont les moments les plus passionnants et épanouissants que j'ai pu vivre jusqu'à maintenant dans le milieu du code : quand notre idée prends vie sous nos doigts, touche après touche, problème après problème.