C'est l'été ! Fleur.gif

Messagerie Instantanée Fax : Différence entre versions

De Les Fabriques du Ponant
Aller à : navigation, rechercher
(Étapes de votre projet)
(Étapes de votre projet)
Ligne 30 : Ligne 30 :
  
 
Construction de la page de discussion :
 
Construction de la page de discussion :
Création de plusieur boites (cf capture d'écran
+
<ol>
Implémentation boite de texte pour les dialogues et bouton d'envoi.
+
<li>Création de plusieur boites (cf capture d'écran ->)</li>
Test du système d'api pour me familiariser avec le format de fichier JSON (JavaScript Oriented Notation).
+
<li>Implémentation boite de texte pour les dialogues et bouton d'envoi.</li>
Implémentation de JavaScript (fichier app.js) pour afficher message dans la zone de texte dédiée.
+
<li>Test du système d'api pour me familiariser avec le format de fichier JSON (JavaScript Oriented Notation).</li>
Ajout d'évenement "si l'utilisateur appui sur la touche entrée, alors j'envoi mon message"
+
<li>Implémentation de JavaScript (fichier app.js) pour afficher message dans la zone de texte dédiée.</li>
Dans le JavaScript : Différenciation entre message envoyé et message reçu.
+
<li>Ajout d'évenement "si l'utilisateur appui sur la touche entrée, alors j'envoi mon message"</li>
 +
<li>Dans le JavaScript : Différenciation entre message envoyé et message reçu.</li>
 +
<li>Création de server.js (via node.js)</li>
 +
<li>Test de node.js</li>
 +
<li>Test de socket.io</li>
 +
<li>Modification du système d'évènement pour les messages reçu et les messages emis avec socket io.</li>
 +
<li>Création d'un JSON dans le JavaScript de app.js pour pouvoir envoyer les infos "pseudo" et "message"</li>
 +
<li>On modifie le css pour rendre le site "joli"</li>
 +
<li>Ajout d'une fonction autoscroll pour faire en sorte que le site scroll en bas des qu'un nouveau message arrive.</li>
 +
</ol>
  
 
==Compétences==
 
==Compétences==

Version du 25 mars 2025 à 17:23

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

  • Lister les différents objectifs : (démarche de projet, approfondir ses connaissances, acquis de compétences, etc ...)
      # 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

Création d'un cahier des charges le plus complet possible comprenant :

  • 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 :

  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 scroll en bas des qu'un nouveau message arrive.

Compétences

Noter ici les compétences dont vous avez eu besoin

date

Préciser la date de votre projet

Ressources

  • Liens vers des ressources en lien avec votre projet
  • Votre présentation finale (celle que vous allez présenter au jury)

Aide technique

  • Contact
  • Infos diverses

matériel et outils utilisés

Lister le matériel ou les machines dont vous avez eu besoin. (avec un lien vers la documentation ou un tutoriel)

Photos

Différentes photos de votre projet

catégorie