Dans ce TD, nous allons brancher un front-end minimaliste à l'API que nous avons créée.
L'application que nous allons modifier ici se base sur du JavaScript "brut" (nous n'utiliserons pas de framework type Angular, Vue ou React). Vous constaterez vite que le code écrit de cette façon sera vite peu utilisable.
Tout d'abord, forkez et clonez le dépôt suivant :
Lancez :
php -S localhost:9000
Votre front-end tourne désormais sur http://localhost:9000/.
Constatez qu'aucun message n'apparaissent pas. Si vous observez les messages d'erreur, vous observerez quelque chose de similaire à :
Cette erreur vient du fait que le front-end (http://localhost:9000) n'est pas autorisé à communiquer avec le back-end (http://localhost:8000).
Pour ce faire, retournez dans le back-end, et lancez :
symfony composer req cors
Observez votre fichier .env
: les origines locales sont acceptées par défaut par la politique CORS du bundle,
ce qui devrait faire fonctionner le chargement des messages!
Constatez que la recherche par adresse ne fonctionne pas. Modifiez messages.js
de manière à relancer
la recherche lorsque le bouton de recherche est cliqué.
Nous allons implémenter la page de connexion.
Modifiez:
login.js
login
de geochatAPI
logout
de geochatAPI
api.js
login(email, password)
appelle l'api /api/login
localStorage
,logout
enlève le jeton du localStorage
.Note: pensez à appeler set_is_connected
. Normalement, le menu en haut de la page devrait changer,
y compris si vous naviguez entre les pages.
En modifiant post.js
, gérez la publication des messages à travers l'API en envoyant une requête qui inclura
le jeton d'identification Bearer dans les en-têtes.
Pensez à gérer les erreurs que vous le serveur vous retournera, vous pouvez par exemple les afficher comme ceci: