Description

Il m'est arrivé plusieurs fois d'aller dans un restaurant que j'ai trouvé très bon et dans lequel je souhaitais retourner. Grâce à ce site web je peux stocker toutes mes bonnes adresses et même pouvoir les partager à mes amis qui peuvent laisser un commentaire pour donner leurs avis et échanger. Néanmoins, avec les restaurants fermés à cause du confinement, ca risque d'être compliqué... :)

Mise en place

Ce projet utilise Firebase pour stocker les données Découvrez firebase.
Pour commencer, nous devons créer une page html ainsi qu'un fichier javascript (js). Dans le fichier html, on initialise un formulaire vide.

Dans ce formulaire on ajoute un input pour le nom, un input pour l'adresse, un select pour le type de cuisine (vous pouvez ajouter autant d'option que vous le désirez), ainsi qu'un textarea pour laisser des commentaires sur ce restaurant. Ces commentaires sont optionnels.

Maintenant passons du côté du javascript ! Premièrement, il nous faut initialiser notre objet Firebase avec le code suivant. Pour récupérer vos identifiants, il vous faut créer un nouveau projet sur Firebase et créer une nouvelle application dans ce projet.

Une fois Firebase initialisé, nous récupérons les données du formulaires avec ces quelques lignes

On écrit donc notre fonction d'ajout grace à la fonction set, en ajoutant tous les champs présents dans notre formulaire. Nous créons également une fonction permettant de générer pour chaque restaurant un identifiant unique, cet identifiant sera utilisé comme base pour retrouver notre restaurant dans notre base de données.
La dernière ligne permet d'actualiser la page, cela vide le formulaire et mettra à jour la liste de restaurant (que nous allons mettre en place ensuite 😉).

Tout est prêt pour ajouter notre restaurant dans la base de données. On remplit le formulaire, on appuie sur ajouter et ... TADA ! Notre restaurant a bien été ajouté dans la base de données.

C'est super de pouvoir ajouter les restaurants, mais si on ne peut pas les voir, notre site ne sert pas à grand chose ! Nous allons donc mettre cela en place.
On créer une div vide sur le html. Dans cette div seront ajoutés tous les restaurants.

On créer la fonction permettant de lister les restaurants dans le javascript. La fonction ref nous permettant de requêter tous les restaurants présents dans notre base de données.
Ensuite, pour chaque restaurants, nous créons une div en associant la classe card, et nous ajoutons un à un les informations (nom, adresse et commantaires).

Et voilà, on voit apparaitre notre premier restaurant !

Mais que se passe-t-il si je retourne dans ce restaurant et que finalement, la cuisine ne me plait plus ? Il nous faut pouvoir le supprimer, nous allons maintenant mettre cela en place.
Commençons par créer une fonction supprimer() qui prend en paramètre l'identifiant du restaurant.
Et enfin, ajoutons ce bouton dans la boucle de notre fonction de listage des restaurants.

Aller plus loin

Si vous le souhaiter, vous pouvez aller plus loin en ajoutant des fonctions pour modifier les restaurants avec la fontion update ou set. Ou alors proposer une auto-complétion de l'adresse à partir de l'API de Google !