Article original : Create a Real Time Chat App with Supabase and Angular
Nous venons de publier un cours sur la chaîne YouTube freeCodeCamp.org qui vous aidera à améliorer vos compétences avec Supabase et Angular. Dans ce cours, vous apprendrez à construire une application de chat en temps réel. Le cours est parfait pour toute personne cherchant à élargir ses compétences en développement web.
Angular est un framework populaire pour construire des applications web. Développé par Google, il permet aux développeurs de créer des applications dynamiques et monopages (SPA) avec une architecture propre et efficace. Angular offre une solution complète qui inclut tout, depuis la liaison de données et l'injection de dépendances jusqu'au routage et à la gestion d'état.
Supabase est une plateforme open-source de backend-as-a-service qui vous aide à construire des applications sécurisées et évolutives. Elle offre des capacités en temps réel, une base de données PostgreSQL, une authentification et des services de stockage. Supabase facilite la configuration et la gestion de votre backend sans nécessiter de connaissances approfondies en développement côté serveur.
Deji de Code Angle a développé ce cours. Voici les sections qu'il a incluses dans ce cours.
1. Introduction et Démonstration du Projet
Obtenez un aperçu du projet et voyez le produit final en action. Cela vous aidera à comprendre ce que vous allez construire tout au long du cours.
2. Configuration de l'Interface Utilisateur
Apprenez à configurer l'interface utilisateur pour votre application de chat. Cette section couvre les bases de la conception d'une interface utilisateur propre et fonctionnelle en utilisant Angular.
3. Création d'un Nouveau Projet Supabase
Plongez dans Supabase et configurez un nouveau projet. Supabase est une puissante plateforme de backend-as-a-service qui offre des capacités en temps réel et une base de données PostgreSQL.
4. Configuration de Google OAuth en utilisant Google Cloud Platform
Implémentez Google OAuth pour permettre aux utilisateurs de se connecter en utilisant leurs comptes Google. Cette section couvre la configuration et la mise en place de Google Cloud Platform pour activer l'authentification.
5. Configuration du Routeur Angular
Configurez le routeur Angular pour gérer la navigation au sein de votre application. Cela garantit des transitions fluides entre les différentes parties de votre application.
6. Mise en place du Service d'Authentification
Créez un service d'authentification pour gérer les fonctionnalités de connexion et de déconnexion des utilisateurs. Ce service sera essentiel pour gérer les sessions utilisateur.
7. Création du Garde de Route CanActivate
Implémentez des gardes de route pour protéger certaines routes au sein de votre application. Cela garantit que seuls les utilisateurs authentifiés peuvent accéder à des parties spécifiques de votre application.
8. Configuration des Tables de Chat et de la Table des Utilisateurs dans Supabase
Configurez les tables de base de données nécessaires dans Supabase pour stocker les messages de chat et les informations utilisateur. Cette section couvre la conception du schéma et la gestion des données.
9. Implémentation de la Fonctionnalité pour Créer un Nouveau Chat
Ajoutez une fonctionnalité pour créer de nouvelles salles de chat. Les utilisateurs pourront démarrer de nouvelles conversations facilement.
10. Réinitialisation du Formulaire à la Soumission et Désactivation du Bouton pour Validation
Assurez-vous que vos formulaires sont conviviaux en les réinitialisant à la soumission et en désactivant les boutons pour validation. Cela améliore l'expérience utilisateur globale.
11. Récupération et Affichage des Chats depuis la Base de Données
Apprenez à récupérer les messages de chat depuis la base de données et à les afficher dans votre application. Cette section couvre les mises à jour de données en temps réel pour garder votre application de chat dynamique.
12. Implémentation de la Fonctionnalité de Suppression de Message
Ajoutez une fonctionnalité pour supprimer des messages. Les utilisateurs auront la possibilité de supprimer leurs messages du chat.
13. Hébergement de l'Application avec Vercel
Déployez votre application de chat en utilisant Vercel. Cette section couvre les étapes pour mettre votre application en ligne sur le web.
14. Conclusion
Terminez le cours avec des réflexions finales et les prochaines étapes.
Vous pouvez regarder le cours complet sur la chaîne YouTube freeCodeCamp.org (2 heures de visionnage).