Messagerie Instantanée Fax

Auteur

Corto, stagiaire émérite du #TremplinNumérique6 vous présente la messagerie instanée FaX

Projet

Création d’une application de messagerie instantanée
Gestion du backend et de la base de données.

Objectifs

Logo FaX

      # Un challenge intéressant.
      # Nouveaux languages et nouvelles librairies.
      # Travail sous contrainte de temps et rendre un projet fonctionnel.
      # Ajouter un projet concret à mon portfolio et valoriser mes compétences.

Étapes de votre projet

Sommaire du cahier des charges

Création d'un cahier des charges le plus complet possible comprenant : (lien Media:Cahier_des_charges_FaX.pdf)

• Les besoins du projet
• Un apperçu des objectifs
• Les étapes de réalisations
• Une description du site avec des captures d'écran
• Choix de la charte graphique (police d'écriture et couleurs)
• Une ébauche du design du site (faite avec Excalidraw)
• Une decription technique du site
• Un bugdet et un planning
• Un projet de maintenance de l'application

Construction de la page de discussion

Schéma de la construction du site

1. Création de plusieur boites (cf capture d'écran ->)
2. Implémentation boite de texte pour les dialogues et bouton d'envoi.
3. Test du système d'api pour me familiariser avec le format de fichier JSON (JavaScript Oriented Notation).
4. Implémentation de JavaScript (fichier app.js) pour afficher message dans la zone de texte dédiée.
5. Ajout d'évenement "si l'utilisateur appui sur la touche entrée, alors j'envoi mon message"
6. Dans le JavaScript : Différenciation entre message envoyé et message reçu.
7. Création de server.js (via node.js)
8. Test de Node.js
9. Test de Socket.io
10. Modification du système d'évènement pour les messages reçu et les messages emis avec socket io.
11. Création d'un JSON dans le JavaScript de app.js pour pouvoir envoyer les infos "pseudo" et "message"
12. On modifie le css pour rendre le site "joli"
13. Ajout d'une fonction autoscroll pour faire en sorte que le site défile vers le bas dès qu'un nouveau message arrive.

Post projet perso

Côté client	Côté serveur

• Ajout d'un système d'authentification utilisateur (Pseudo)
• Afficher le pseudo et l'heure d'envoi à côté des messages dans la fenêtre de discussion
• Ajout d'une base de donnée pour stocker les informations
  (pour l'instant tout est dans le cache du navigateur,
  des qu'on recharge la page toutes les infos sont éffacés)
• Ajout d'une liste de discussion sur la gauche de la fenêtre de chat
• Ajout de la création de salon privés
• Ajout d'une page contact
• Ajout d'une page paramêtre pour changer le pseudo et l'image

Compétences

Noter ici les compétences dont vous avez eu besoin.

date

Du 17/03/2025 au 28/03/2025

Ressources

• IDE : VSCodium
• Schémas : Excalidraw
• Outil de création de présentation et diapos : Canva
• Gestion du server : Node.js
• Gestion des sockets de connections : Socket.io
• Votre présentation finale (celle que vous allez présenter au jury)

Aide technique

• Contact
• Introduction au HTML/CSS
• Css : Display flex
• Mooc sur le JavaScript OpenClassRoom Javascript
• Qu'est-ce qu'un fichier JSON ?
• Qu'est-ce qu'une API
• Tutoriel construction d'une application simple de messagerie instantantée Medium.com
• Tutoriel de socket.io (English) Socket.io

matériel et outils utilisés

Un pc et une connection internet !

Photos

Différentes photos de votre projet FaXAppJsConst.jpg Fax AppJs Variables FaXAppJsEventEnvoyMessage.jpg Evenement Envoi FaXAppJsEventSocketIoMessageEnvoyeOuRecu.jpg Evenement SocketIo Message Envoye/Recu FaXAppJsFuctionSendMessage.jpg Fonction EnvoiMessage FaXCssBodyH1.jpg Css Body et H1 FaXCssContainerZonechatMessage.jpg Css Container et ZoneChatMessage FaXCssLight.jpg Css Illumination des fenêtres FaXCssmsgEnvoyRecu.jpg Css envoy/recu FaXCssTextBoxBtn.jpg Css Style de la boite de texte FaXHTMLBody.jpg HTML Body FaXHTMLHead.jpg HTML Head FaXServerJsConsoleConnectionDeco.jpg Server.js Console Connection Deconnection