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

Messagerie Instantanée Fax : Différence entre versions

De Les Fabriques du Ponant
Aller à : navigation, rechercher
(→‎Pourquoi ce projet ?)
(→‎Ressources)
 
(210 révisions intermédiaires par 2 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
−
==Auteurs==
+
==Auteur==
−
Corto, stagiaire émérite du TN6.
+
Corto, stagiaire émérite du #TremplinNumérique6 vous présente la messagerie instanée <b>FaX</b>
  
−
==Pourquoi ce projet ?==
+
==Projet==
−
J'ai choisi de faire une application web de messagerie instantanée, inpirée de what's APP, messenger et discord.  
+
Création d’une application de messagerie instantanée
 +
<br>
 +
Gestion du backend et de la base de données.
 +
<br>
 +
 
 +
===Objectifs===
 +
        [[Fichier:FaxButton.jpg|70px|thumb|Logo FaX|left|alt=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.
 +
<br>
 +
 
 +
===Étapes de votre projet===
 +
[[Fichier:cahier_des_charges_sommaire.jpg|400px|thumb|Sommaire du cahier des charges|right|alt=Sommaire du cahier des charges]]
 +
Création d'un cahier des charges le plus complet possible comprenant : (lien [[Media:Cahier_des_charges_FaX.pdf | Cahier des charges]])
 +
<ul>
 +
<li>Les besoins du projet </li>
 +
<li>Un apperçu des objectifs</li>
 +
<li>Les étapes de réalisations</li>
 +
<li>Une description du site avec des captures d'écran</li>
 +
<li>Choix de la charte graphique (police d'écriture et couleurs)</li>
 +
<li>Une ébauche du design du site (faite avec [https://excalidraw.com/ Excalidraw])</li>
 +
<li>Une decription technique du site</li>
 +
<li>Un bugdet et un planning</li>
 +
<li>Un projet de maintenance de l'application</li>
 +
</ul>
 +
 
 +
===Construction de la page de discussion===
 +
[[Fichier:Excal schema site 26March.jpg|400px|thumb|Schéma de la construction du site|right|alt=Schéma de la construction du site]]
 
<ol>
 
<ol>
−
<ul>Ce projet me paraissait être un challenge complexe mais réalisable en 2 semaines. Elle me permet de m'occuper à la foi du frontend et backend.</ul>
+
<li>Création de plusieur boites (cf Shéma de la construction du site ->)</li>
−
<ul>Utilisation de nouveaux languages et le travail sous contrainte (temps) pour un projet qui demande beaucoup de connaissances techniques.</ul>
+
<li>Implémentation boite de texte pour les dialogues et bouton d'envoi.</li>
−
<ul>Ajouter un projet concret à mon portfolio et valoriser mes compétences.</ul>
+
<li>Test du système d'api pour me familiariser avec le format de fichier JSON (JavaScript Oriented Notation).</li>
 +
<li>Implémentation de JavaScript (fichier app.js) pour afficher message dans la zone de texte dédiée.</li>
 +
<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 [https://nodejs.org/fr Node.js]</li>
 +
<li>Test de [https://socket.io/ 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 défile vers le bas dès qu'un nouveau message arrive.</li>
 
</ol>
 
</ol>
  
−
==Logiciel et technologies utilisées==
+
===Post projet perso===
−
IDE : VScodium
+
{| class="wikitable" style="display: float; float: right; margin-left: auto; margin-right: 0px;"
−
<br>
+
|-
−
Languages de programations : HTML/CSS, JavaScript.
+
! Côté client !! Côté serveur
−
<br>
+
|-
−
Librairies : Node.js (backend), socket.io
+
| [[Fichier:Ajouts_coté_client.jpg|320px|alt=Ajouts côté client]] || [[Fichier:Ajouts_coté_server.jpg|300px|alt=Ajouts côté serveur]]
 +
|}
 +
 
 +
<ul>
 +
<li>Ajout d'un système d'authentification utilisateur (Pseudo)</li>
 +
<li>Afficher le pseudo et l'heure d'envoi à côté des messages dans la fenêtre de discussion</li>
 +
<li>Ajout d'une base de donnée pour stocker les informations <br>(pour l'instant tout est dans le cache du navigateur,<br>
 +
des qu'on recharge la page toutes les infos sont éffacées)</li>
 +
<li>Ajout d'une liste de discussion sur la gauche de la fenêtre de chat</li>
 +
<li>Ajout de la création de salon privés</li>
 +
<li>Ajout d'une page contact</li>
 +
<li>Ajout d'une page paramêtre pour changer le pseudo et l'image</li>
 +
</ul>
 +
 
 +
==Compétences==
 +
Patience, méthodologie, rigueur, l'envie d'avoir envie, curiosité, résilience.
  
−
==Date==
+
==date==
−
Projet réalisé du 17 au 28 mars 2025
+
Du 17/03/2025 au 28/03/2025
  
−
==type de médiation==
+
===Ressources===
−
animation, exposition, conférence,...  
+
*IDE : <u>[https://vscodium.com/ VSCodium]</u>
 +
*Outil organisationnel <u>[https://trello.com/fr Trello]</u>
 +
*Schémas : <u>[https://excalidraw.com/ Excalidraw]</u>
 +
*Outil de création de présentation et diapos : <u>[https://www.canva.com/ Canva]</u> & <u>[https://gamma.app/ Gamma]</u>
 +
*Design du logo(Fait par IA) <u>[https://logoponey.fr/ Logopony]</u>
 +
*Ouverture et fermeture de connection : <u>[https://nodejs.org/fr Node.js]</u>
 +
*Gestion des sockets de connections : <u>[https://socket.io/ Socket.io]</u>
 +
<b>Mon Code</b> <u>[https://github.com/CortoGyt/ProjetPersoTN6.git Lien Github]</u>
 +
<br>
 +
<b>Support de présentation oral</b> <u>[[Fichier:FaxSupportprésentation.pdf]]</u>
  
−
==lieu==
+
==Aide technique==
 +
*Super site de @yann <u>[https://wiki.lesfabriquesduponant.net/index.php?title=Site_Web_Stade_de_foot_de_Brest html/css détaillé]</u>
 +
*Introduction au <u>[https://pixees.fr/informatiquelycee/n_site/snt_web_html.html HTML/CSS]</u>
 +
*Css : <u>[https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox Display flex]</u>
 +
*Mooc sur le JavaScript <u>[https://openclassrooms.com/fr/courses/7696886-apprenez-a-programmer-avec-javascript OpenClassRoom Javascript]</u>
 +
*Qu'est-ce qu'un fichier <u>[https://www.hostinger.fr/tutoriels/quest-ce-que-json JSON]</u> ?
 +
*Qu'est-ce qu'une <u>[https://appmaster.io/fr/blog/les-api-pour-les-debutants-comment-utiliser-une-api-un-guide-complet API]</u>
 +
*Tutoriel construction d'une application simple de messagerie instantantée <u>[https://medium.com/@petitbazarweb/comment-cr%C3%A9er-un-chat-avec-node-js-et-socket-io-f0960b0d33c2 Medium.com]</u>
 +
*Tutoriel de socket.io (<b>English</b>) <u>[https://socket.io/docs/v4/tutorial/step-1 Socket.io]</u>
  
−
==durée==
+
* Contact : corto.gayetun@gmail.com (Envoyé un mail si vous avez des questions spécifiques)
  
−
==Contenus==
+
===Matériel et outils utilisés===
−
Une page de discussion entre 2 utilisateurs, avec séparation entre messages envoyés et messages recu.
+
Un pc et une connection internet, rien de plus.
−
<br>
 
−
Une boite d'envoi pour les messages (formulaire), un bouton d'envoi.
 
−
<br>
 
−
Un retour dans la console coté backend avec différents évènements (connection/déconnection utilisateur, un fichier json avec le <b>pseudo</b> et le <b>message </b>envoyé)
 
  
−
==Partenariat envisagé ?==
+
===Photos===
−
* Pour quoi faire ?
 
−
* Organisme de recherche, radio, webtv,... ? ou pas !
 
  
−
==Objectifs==
+
==Côté design==
−
* détailler les finalités, objectifs, objectifs pédagogiques
 
−
* les objectifs s'écrivent avec des verbe d'action à l'infinitif
 
−
* les objectifs pédagogiques peuvent s'écrire : A l'issue de la médiation, les participant·e·s sont capables de (verbe d'action à l'infinitif)...
 
−
* Voir ici https://sup-ujm.univ-st-etienne.fr/fr/methodes-et-outils/concevoir-son-enseignement/les-objectifs-pedagogiques.html
 
  
−
==Construction du projet==
+
[[Fichier:FaxExcalidrawVisuelV0.11jpg.jpg|200px|alt=1er Design]]
 +
[[Fichier: FaxEbauchedesign.jpg|200px|alt=Fax Ebauche design]]
 +
[[Fichier: FaxCharteGraphique.jpg|200px|alt=Fax Charte graphique]]
 +
[[Fichier:LogoFax.jpg|300px|alt=logo Fax]]
  
−
===Cahier des charges===
+
==Côté Technique==
−
<p>Dans le cahier des charges, j'ai intégré les détails de mon entreprise fictive :  
+
[[Fichier:FaxArborescence.jpg|100px|alt=Arborescence1]]
−
<br>
+
[[Fichier:Arborescence2.jpg|100px|alt=Arborescence2]]
−
Le choix du nom -> <b>FaXprod</b> et l'application <b>FaX</b> (référence au fax téléphonique)
+
[[Fichier:Excal schema site 26March.jpg|300px|alt=Schema du site]]
−
</p>
+
[[Fichier:FaxSchéma technique.jpg|400px|alt=Schema technique]]
−
<p>Les besoins du projet : </p>
+
[[Fichier:FaXArborescenceExcalidraw.jpg|400px|alt=Schema technique excalidraw]]
  
−
===matériel autre===
+
==Ajours prévus==
−
tables, chaise, internet,...
+
#En bleu clair
 +
[[Fichier:Ajouts coté client.jpg|300px|alt=Ajouts coté client]]
 +
[[Fichier:Ajouts coté server.jpg|300px|alt=Ajouts coté server]]
 +
#Ebauche page d'accueil
 +
[[Fichier:FaxPage d'acceuil.jpg|300px|alt=logo Fax]]
  
−
===webographie médiation===
+
==catégorie==
−
des liens vers des exemples se rapprochant
 
  
−
==Catégorie==
 
 
[[Catégorie:Tn6]]
 
[[Catégorie:Tn6]]

Version actuelle datée du 2 avril 2025 à 11:24

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
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
Sommaire du cahier des charges

Création d'un cahier des charges le plus complet possible comprenant : (lien Cahier des charges)

  • 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
Schéma de la construction du site
  1. Création de plusieur boites (cf Shéma de la construction du site ->)
  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
Ajouts côté client Ajouts 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ées)
  • 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

Patience, méthodologie, rigueur, l'envie d'avoir envie, curiosité, résilience.

date

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

Ressources

Mon Code Lien Github
Support de présentation oral Fichier:FaxSupportprésentation.pdf

Aide technique

  • Contact : corto.gayetun@gmail.com (Envoyé un mail si vous avez des questions spécifiques)

Matériel et outils utilisés

Un pc et une connection internet, rien de plus.

Photos

Côté design

1er Design Fax Ebauche design Fax Charte graphique logo Fax

Côté Technique

Arborescence1 Arborescence2 Schema du site Schema technique Schema technique excalidraw

Ajours prévus

#En bleu clair

Ajouts coté client Ajouts coté server 

#Ebauche page d'accueil

logo Fax

catégorie

Récupérée de « http://wiki.lesfabriquesduponant.net/index.php?title=Messagerie_Instantanée_Fax&oldid=33609 »