Popote explication du projet en Vue.js

Lancez votre site d'avis de restaurant

Résumé

Dans ce projet, j’ai choisi de me lancer dans le business des avis de restaurants.
Mon objectif : créer un service simple et utile qui permet d’avoir des avis sur des restaurants autour de moi.
Pour ce projet, j’utilise des API externes, telles que celles de Google Maps et de Google Places, je vais orchestrer toutes ces informations de manière cohérente dans mon application.
Par sécurité pour éviter une duplication de code ( par les petits malins sur OC ) et de ma clé API, je vais partager avec vous des petits bouts de code en Vue JS.

Etape 1 : la carte des restaurants

2 sections principales:

* Une carte Google Maps, chargée avec l’API de Google Maps. La carte sera centrée sur la position de l’utilisateur. Utilisation de l’API de géolocalisation de JavaScript.

* Une liste de restaurants correspondant à la zone affichée sur la carte Google Maps.(Fichier Json au départ)

Appel / Affichage de la carte + avis.
(ligne 3) On déclare un id « mapName » dans la div pour y introduire la carte.
(ligne 23) On fait l’appel du fichier json avec un import.
On utilise aussi des composants (Ratingstars, Comments, Filtrage) placés dans un fichier components que l’on « import ».
(ligne 6) On boucle avec un « v-for » dans le json pour afficher les restaurants.

On fait l’appel de la carte 
( commentaire 1 ) et on affiche notre position
( commentaire 2 )

On utilisera streetView aussi de google pour afficher la « lat » et « long » du restaurant et avoir une photo du lieu dans les avis.

Résultat pour la partie 1

Etape 2 : ajoutez des restaurants et des avis +
Etape 3 : intégration avec l'API de Google Places

* ajouter un avis sur un restaurant existant.
* ajouter un restaurant, en cliquant sur un lieu spécifique de la carte.
* utilisation de la search api pour trouver des restaurants dans la zone affichée. On utilise plus le fichier Json. ( Uniquement les API )

Ajout d’un avis , une fois le click effectué sur « Donner un avis sur le restaurant ».

Ajout d’un restaurant lors d’un double click sur la map.

Pour la selection de l’affichage on va utiliser des « v-if » avec conditions (true/false).
( ligne 15, 16, 17, 18 ) Ainsi on pourra choisir si on veut afficher ou non notre composant.
On utilisera axios pour faire nos requêtes API (ligne 24).

Je ne vais pas rentrer trop dans le code sinon le projet pourrait être réutilisé par des individus voulant tricher pendant leur parcours de dèv frontend.
Il n’y aura pas de détail sur:
– le moyen de captation de la position du click sur la map
– la méthode de filtration
– Etc…

Mais…Je vais quand même vous mettre mes requetes API car c’est la partie la plus interessante du projet.

Requête avec « nearbysearch »
Dans cette appel on peut voir qu’on utilise « nearbysearch » et on indique notre « lat » et « lng » qu’on a récupéré auparavant avec la géolocalisation du navigateur en javascript. On y indique aussi le rayon de recherche « radius » ainsi que le type de la recherche (ici « restaurant »).

Une condition booléenne est mise en place pour éviter les requêtes inutiles et ne pas surcharger la bande passante.
À l’état initial, nous avons uniquement les informations de base du restaurant (nom du restaurant, adresse, nombre d’étoiles) mais pas de commentaires, donc tous les restaurants ont une valeur false.
Lors du click sur un restaurant, Si la valeur vérifiée est false, on fait une requête pour chercher les reviews du restaurant et les stocker dans un tableau, dans le cas contraire, la condition est true et on ne fait pas de requête supplémentaire.

Résumé

Ce projet a été très interessant pour moi car j’ai découvert le framework Vue Js avec l’utilisation des composants, des v-bind, des v-for etc…
Je remercie encore particulièrement mon ancien mentor Antoine Creuzet avec qui j’ai appris énormément.