Créer une Application FullStack avec Spring Boot, React, OAuth2, Docker et la déployer dans AWS
Learn Time, Learn with code
Assista a este curso e milhares de outros
Assista a este curso e milhares de outros
Aulas neste curso
-
-
1.
[Introduction] Overview
0:58
-
2.
[Introduction] Démonstration6
15:13
-
3.
[Introduction] Plan de formation
3:15
-
4.
[Introduction] Prérequis & Outils utilisés
1:03
-
5.
[Projet Backend] Présentation générale du projet
3:28
-
6.
[Projet Backend] Présentation du fichier pom.xml
1:47
-
7.
[Projet Backend] Présentation du modèle base de données
3:48
-
8.
[Projet Backend] Présentation des scripts SQL utilisé par l’outil Flyway
12:15
-
9.
[Projet Backend] Présentation des Entités JPA
8:47
-
10.
[Projet Backend] Présentation des Repositories Spring Data
10:56
-
11.
[Projet Backend] Présentation des exceptions
9:14
-
12.
[Projet Backend] Présentation de la couche validation
16:08
-
13.
[Projet Backend] Présentation du Swagger
18:25
-
14.
[Projet Backend] Présentation des Controller REST
16:24
-
15.
[Projet Backend] Présentation de la couche sécurité Configurations & Clients OAuth2
12:48
-
16.
[Projet Backend] Présentation de la couche sécurité Workflow d’Authentification
11:37
-
17.
[Projet Backend] Présentation de la couche sécurité Code Source
29:47
-
18.
[Projet Backend] Présentation du fichier Dockerfile
3:07
-
19.
[Projet Backend] Démarrage du projet backend sur votre machine
5:56
-
20.
[Projet Frontend] Présentation générale
13:35
-
21.
[Projet Frontend] Présentation du fichier package.json
14:00
-
22.
[Projet Frontend] Présentation des models
6:37
-
23.
[Projet Frontend] Présentation des services
14:50
-
24.
[Projet Frontend] Présentation de la conf
1:28
-
25.
[Projet Frontend] Présentation du UserContext
3:35
-
26.
[Projet Frontend] Présentation du composant App
12:40
-
27.
[Projet Frontend] Présentation du Navbar
15:57
-
28.
[Projet Frontend] Présentation du Footer
0:57
-
29.
[Projet Frontend] Présentation de la page Home
6:36
-
30.
[Projet Frontend] Présentation de la page Login
1:50
-
31.
[Projet Frontend] Présentation de la page PlayQuiz
11:33
-
32.
[Projet Frontend] Présentation de la page Historique
5:03
-
33.
[Projet Frontend] Présentation de la page ManageQuiz
12:10
-
34.
[Projet Frontend] Présentation de la page AddQuiz
5:16
-
35.
[Projet Frontend] Présentation du composant QuizForm Partie 1
12:48
-
36.
[Projet Frontend] Présentation du composant QuizForm Partie 2
14:00
-
37.
[Projet Frontend] Présentation de la page UpdateQuiz
4:08
-
38.
[Projet Frontend] Présentation de la page ImportQuiz
7:48
-
39.
[Projet Frontend] Présentation de la page ManageUsers
3:43
-
40.
[Projet Frontend] Présentation du fichier Dockerfile
2:52
-
41.
[Projet Frontend] Démarrage du projet frontend sur votre machine
4:25
-
42.
[Déploiement AWS] Présentation de notre utilisation de Github
3:45
-
43.
[Déploiement AWS] Présentation du workflow Github Action
11:14
-
44.
[Déploiement AWS] Présentation des fichiers docker-compose.yml et nginx.conf
9:49
-
45.
[Déploiement AWS] Créer un compte Github OAuth2
1:46
-
46.
[Déploiement AWS] Achat de notre nom domaine depuis AWS
3:29
-
47.
[Déploiement AWS] Créer un compte Google OAuth2
2:07
-
48.
[Déploiement AWS] Création de l’instance EC2 dans AWS
4:44
-
49.
[Déploiement AWS] Création d’une instance RDS dans AWS
3:20
-
50.
[Déploiement AWS] Lier notre nom de domaine à l’adresse IP de notre instance EC2
1:48
-
51.
[Déploiement AWS] Installer Docker dans l'instance EC2
2:01
-
52.
[Déploiement AWS] Génération du certificat SSL
5:01
-
53.
[Déploiement AWS] Démarrage de l’application dans AWS
1:53
-
-
- --
- Nível iniciante
- Nível intermediário
- Nível avançado
- Todos os níveis
Gerado pela comunidade
O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.
11
Estudantes
--
Projeto
Sobre este curso
Dans cette formation, vous allez découvrir comment créer une application FullStack moderne en explorant en détail son code source. Vous allez apprendre à utiliser Spring Boot pour le projet backend, React pour le projet frontend et OAuth2 pour une authentification sécurisée en utilisant Google et GitHub. Vous allez découvrir comment utiliser Docker pour déployer l'application dans le cloud avec AWS. Enfin, vous allez découvrir comment générer un certificat SSL Let's Encrypt pour assurer une connexion HTTPS à l'application.
Comment se déroule ce cours ?
Au lieu de construire le projet de A à Z, nous analyserons ensemble le code source complet de l'application en expliquant chaque partie pour que vous compreniez pleinement la structure et les concepts utilisés. Vous aurez accès à tout le code source, vous permettant d'explorer et d'appliquer les idées à vos propres projets.
Chaque module se concentre sur un aspect spécifique du projet pour vous fournir une vue d'ensemble complète et cohérente du développement d'une application FullStack sécurisée et prête à être déployée dans le cloud.
Ce que vous allez apprendre ?
- Utiliser Spring Web pour implémenter des APIs REST
- Utiliser Spring Doc pour générer la documentation Swagger
- Utiliser Spring Data pour gérer la relation entre tables/entités et la communication avec la base de données
- Utiliser Spring Security pour la mettre en place de l'authentification OAuth2 et la générer des tokens JWT
- Utiliser Flyway pour initialiser le schéma de la base de données et gérer sa mise à jour
- Utiliser React Router pour la mettre en place le routage entre les pages de l'application (page d'accueil, login, …)
- Utiliser React Table pour la mise en place de tableaux avec les fonctionnalités de recherche, tri et filtre
- Utiliser React Context pour rendre accessible les données d'authentification aux différents composants React
- Utiliser Axios pour consommer des APIs sécurisés
- Démarrer d'une image PostgreSQL via Docker Compose
- Créer des comptes OAuth2 dans Google et Github
- Utiliser de Github Action pour builder les images Docker backend et frontend et les déposer dans Github Packages
- Acheter un nom de domaine dans AWS
- Créer une instance RDS PostgreSQL dans AWS
- Créer une instance EC2 dans AWS pour démarrer les images docker backend et frontend via Docker Compose
- Mettre en place un certificat via Let's Encrypt pour activer le HTTPS
Pourquoi suivre ce cours ?
- Apprentissage rapide et efficace : En vous focalisant sur l'analyse du code source, vous allez absorber des concepts essentiels rapidement, tout en ayant l'opportunité de tester et d'adapter le code à vos besoins.
- Comprendre en profondeur les technologies FullStack : Vous apprendrez à maîtriser Spring Boot et React en analysant une application réelle, tout en découvrant des technologies cloud avancées comme AWS EC2 et RDS.
- Déploiement sécurisé : Vous verrez non seulement comment déployer une application sur AWS, mais aussi comment configurer une connexion HTTPS sécurisée avec un certificat SSL.
À qui s'adresse ce cours ?
Ce cours est parfait pour les développeurs qui souhaitent analyser un projet FullStack complet tout en apprenant les bonnes pratiques de développement et de déploiement cloud sécurisé. Il est idéal pour :
- Développeurs Backend souhaitant renforcer leurs compétences avec Spring Boot et découvrir des solutions de déploiement sur AWS.
- Développeurs Frontend cherchant à mieux comprendre l’intégration entre React et un backend sécurisé.
- Développeurs DevOps qui veulent se familiariser avec Docker, Nginx et les services AWS tels que EC2 et RDS.
- Étudiants en quête de projets concrets pour comprendre les meilleures pratiques en matière de sécurité, containérisation et de déploiement cloud.
Conheça seu professor
Bienvenue chez Learn Time, l'endroit ideal pour apprendre les langages du web tels que HTML, CSS et JavaScript, React, Java, Spring, mais pas que :)
Notre mission chez Learn Time est de simplifier la programmation web et de rendre ces langages accessibles a tous, que vous soyez debutant ou que vous cherchiez a approfondir vos competences existantes. Nous nous engageons a fournir des cours de haute qualite qui vous aideront a acquerir une comprehension approfondie du developpement web. Nous aborderons non seulement les bases, mais aussi des concepts avances pour vous preparer a relever les defis du monde reel.
Rejoignez-nous dans cette aventure d'apprentissage passionnante chez Learn Time, ou le temps que vous investissez dans l'apprentissage de la program... Visualizar o perfil completo
Projeto prático de curso
Projet : Ajouter une nouvelle fonctionnalité à l'application permettant à chaque utilisateur de supprimer son historique des quiz joués.
Étapes :
-
Téléchargez le code source disponible ci-dessous et démarrez l'application en local en suivant les étapes expliquées dans le cours.
-
Dans le projet Backend, ajoutez une nouvelle API permettant de supprimer l'historique des quiz joués de l'utilisateur connecté.
- Dans le projet Frontend, ajoutez un bouton dans la page Historique permettant aux utilisateurs de supprimer leur historique. Quand l'utilisateur clique sur ce bouton, déclenchez l'appel à l'API crée à l'étape 2
- Assurez-vous que l'authentification OAuth2 fonctionne avec cette nouvelle fonctionnalité pour permettre uniquement aux utilisateurs authentifiés de supprimer leur propre historique.
-
Une fois la fonctionnalité ajoutée, vérifier que :
- L'utilisateur peut supprimer son historique de quiz joués depuis l'interface.
- Les données sont effectivement supprimées dans la base de données.
- Les autres fonctionnalités de l’application restent intactes après cette modification.
Étapes bonus (facultatif) :
Vous pouvez aller plus loin en personnalisant d'autres aspects de l'application selon vos besoins, par exemple :
- Ajouter une confirmation avant de supprimer l'historique.
- Ajouter une notification après la suppression de l'historique.
Partagez Votre Version du Projet :
Après avoir ajouté la fonctionnalité et testé votre travail, vous pouvez partager votre version personnalisée du projet avec la communauté Skillshare. Bonne chance et n'hésitez pas à me poser toutes vos questions concernant ce cours/projet !
Nota do curso
Por que fazer parte da Skillshare?
Faça cursos premiados Skillshare Original
Cada curso possui aulas curtas e projetos práticos
Sua assinatura apoia os professores da Skillshare