Présentation du projet
Ce projet consistait à développer MercaNews, un site web d’actualités créé avec Vue.js. L’objectif principal était de créer une plateforme responsive pour afficher des articles d’actualités et des scores sportifs en direct. En fin de compte, MercaNews offre aux utilisateurs une expérience de navigation fluide, mettant en avant la puissance du développement web.
Scraping des actualités
Pour commencer, j’ai développé une fonction Node.js pour extraire des articles d’actualités provenant de diverses sources. Ensuite, j’ai stocké les données dans Firebase pour une présentation dynamique sur MercaNews. Cette méthode garantit que les utilisateurs ont toujours accès aux dernières nouvelles.
Scraping des scores
Ensuite, j’ai créé une autre fonction Node.js pour extraire les scores sportifs en direct. De même, ces données ont également été stockées dans Firebase pour des mises à jour en temps réel sur MercaNews. Cette fonctionnalité permet aux utilisateurs de suivre les événements sportifs en direct.
Récupération des données
J’ai utilisé Axios pour effectuer des appels API afin de récupérer les articles d’actualités et les scores depuis Firebase. Par conséquent, MercaNews dispose toujours des informations les plus récentes disponibles pour ses utilisateurs.
Design responsive
De plus, j’ai implémenté Bootstrap et BootstrapVue pour garantir une mise en page responsive. Ainsi, les utilisateurs peuvent accéder à MercaNews de manière transparente sur différents appareils, que ce soit sur ordinateur ou mobile.
Composants dynamiques
En outre, j’ai créé des composants dynamiques pour afficher des articles d’actualités et des scores en direct sur MercaNews. J’ai également utilisé vue-carousel et vue-slick-carousel pour des éléments visuels engageants, améliorant ainsi l’interaction des utilisateurs avec le site.
Formatage des dates
Pour améliorer l’expérience utilisateur, j’ai utilisé Moment.js et vue-moment pour formater et afficher les dates et heures de publication de chaque article d’actualités. Cette clarté permet aux utilisateurs de comprendre facilement quand les nouvelles ont été publiées.
Intégration des publicités
Enfin, j’ai intégré vue-google-adsense pour la monétisation à travers des publicités affichées aux côtés du contenu d’actualités. Cette addition soutient non seulement le site financièrement, mais permet également de le rendre durable.
Résultat final
En conclusion, le résultat est un site d’actualités pleinement fonctionnel appelé MercaNews qui affiche efficacement les derniers articles d’actualités et les scores sportifs en direct. Avec une interface conviviale, MercaNews exploite la récupération de données en temps réel, le scraping web et un design responsive. Par conséquent, il améliore l’expérience utilisateur et garde les visiteurs informés. Ce projet met en avant mes compétences en développement web avec Vue.js pour créer des expériences utilisateur dynamiques et engageantes.