L'essentiel
L'essentiel du contenu de ce cours est couvert par la série de tutoriels nommée "essentials".
Tout au long de la série "essentials", un site pour une pizzeria est développé de manière incrémentale.
Chaque tutoriel de la série "essentials" illustre une des 3 compétences essentielles du cours. Le fichier README.md de chaque tutoriel décrit les étapes importantes dans la création du code. Il vous est donc conseillé de lire ce fichier README.md en parallèle du code.
Voici l'ordre de lecture recommandé pour cette série "Essentials" :
- api-basic
- api-persistence
- api-fat-model
- classic-hmi
- webpack-part1-hmi
- webpack-part2-hmi
- modern-hmi
- modern-esthetic-hmi
- modern-dynamic-hmi
- structured-hmi
- routing-hmi
- basic-fetch-no-proxy-hmi
- api-cors
- basic-fetch-hmi
- async-await-hmi
- api-auths
- api-safe
- api-cookies
- jwt-fetch-hmi
- web-storage-hmi
- cookies-hmi
Voici quelques explications concernant les principales compétences associées au développement d'une Single Page Application (SPA) :
1. Créer un service web
Une RESTful API va mettre à disposition des opérations sur des ressources (les
données) nécessaires pour rendre votre site web dynamique.
A ce stade-ci, testez toutes vos opérations de manière indépendante du frontend, via REST Client par exemple. Ainsi, si tout est fonctionnel, vous êtes prêt à intégrer ces opérations au sein de votre IHM.
2. Créer une IHM interactive & moderne
Dans un premier temps, veuillez simplement créer le layout de votre application : le frontend reprend tout la mise en page souhaitée (header, footer, main, barre de navigation…) et permet de naviguer entre les différentes pages de votre application web. A cette étape, la mise à jour dynamique du frontend via des opérations sur des Web API n'est pas encore envisagée. N'hésitez pas néanmoins à rendre votre frontend dynamique pour tout ce qui peut être fait côté client (affichages des bons composants lors de clics, animations…).
Une fois le layout de votre application disponible, veuillez mettre à jour votre frontend afin que celui-ci s'intègre avec votre RESTful API. Votre site devient dynamique en utilisant des opérations sur des ressources offertes par votre RESTful API.
- Intégrer l'authentification, l'autorisation et les sessions d'utilisateurs au sein de SPA
Cette étape consiste à sécuriser l'accès aux opérations de votre RESTful API et mettre à disposition l'authentification au sein tant de votre IHM que de votre API.
Nous espérons que cette série vous facilitera le développement de votre propre site.
Bon amusement ; )