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

Messagerie Instantanée Fax : Différence entre versions

De Les Fabriques du Ponant
Aller à : navigation, rechercher
(Page créée avec « ==Auteurs== Corto GAYET ==Public== Age, lieu de résidence, etc. tout renseignement permettant de spécifier le public ===représentations attendues=== * Quelles connais... »)
 
(→‎Ressources)
 
(225 révisions intermédiaires par 2 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
−
==Auteurs==
+
==Auteur==
−
Corto GAYET
+
Corto, stagiaire émérite du #TremplinNumérique6 vous présente la messagerie instanée <b>FaX</b>
  
−
==Public==
+
==Projet==
−
Age, lieu de résidence, etc. tout renseignement permettant de spécifier le public
+
Création d’une application de messagerie instantanée
 +
<br>
 +
Gestion du backend et de la base de données.
 +
<br>
  
−
===représentations attendues===
+
===Objectifs===
−
* Quelles connaissances sur le sujet peut-on s'attendre à trouver chez notre public ?
+
        [[Fichier:FaxButton.jpg|70px|thumb|Logo FaX|left|alt=logo FaX]]
−
* Quelle est l'actualité médiatique du sujet ?
+
      # Un challenge intéressant.
−
* Quels préjugés imagine-t-on trouver ?
+
      # 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>
  
−
==cadre==
+
===Étapes de votre projet===
−
scolaire, loisirs, soirée,..
+
[[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>
 +
<li>Création de plusieur boites (cf Shéma de la construction du site ->)</li>
 +
<li>Implémentation boite de texte pour les dialogues et bouton d'envoi.</li>
 +
<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>
 +
 
 +
===Post projet perso===
 +
{| class="wikitable" style="display: float; float: right; margin-left: auto; margin-right: 0px;"
 +
|-
 +
! Côté client !! Côté serveur
 +
|-
 +
| [[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==
−
préciser la date idéal de votre projet
+
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===
−
notions abordées
+
Un pc et une connection internet, rien de plus.
  
−
===webographie sciences, techniques, concepts===
+
===Photos===
−
Liens vers des sources sur les notions abordées
 
  
−
==Partenariat envisagé ?==
+
==Côté design==
−
* Pour quoi faire ?
 
−
* Organisme de recherche, radio, webtv,... ? ou pas !
 
  
−
==Objectifs==
+
[[Fichier:FaxExcalidrawVisuelV0.11jpg.jpg|200px|alt=1er Design]]
−
* détailler les finalités, objectifs, objectifs pédagogiques
+
[[Fichier: FaxEbauchedesign.jpg|200px|alt=Fax Ebauche design]]
−
* les objectifs s'écrivent avec des verbe d'action à l'infinitif
+
[[Fichier: FaxCharteGraphique.jpg|200px|alt=Fax Charte graphique]]
−
* 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)...
+
[[Fichier:LogoFax.jpg|300px|alt=logo Fax]]
−
* Voir ici https://sup-ujm.univ-st-etienne.fr/fr/methodes-et-outils/concevoir-son-enseignement/les-objectifs-pedagogiques.html
 
  
−
==description de la médiation==
+
==Côté Technique==
 +
[[Fichier:FaxArborescence.jpg|100px|alt=Arborescence1]]
 +
[[Fichier:Arborescence2.jpg|100px|alt=Arborescence2]]
 +
[[Fichier:Excal schema site 26March.jpg|300px|alt=Schema du site]]
 +
[[Fichier:FaxSchéma technique.jpg|400px|alt=Schema technique]]
 +
[[Fichier:FaXArborescenceExcalidraw.jpg|400px|alt=Schema technique excalidraw]]
  
−
===matériel et outils pédagogique===
+
==Ajours prévus==
−
imprimantes 3D, exposition, ...
+
#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]]
  
−
===matériel autre===
+
==catégorie==
−
tables, chaise, internet,...
 
  
−
===webographie médiation===
+
[[Catégorie:Tn6]]
−
des liens vers des exemples se rapprochant
 

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 »