JavaScript – Simple Application de Chat (en 2h)

Just another WordPress site

JavaScript – Simple Application de Chat (en 2h)

« javascript – simple application de chat (en 2h) » salut à tous c’est smfcoder, on se retrouve aujourd’hui pour un challenge, cette fois ci c’est un challenge pour moi parce que je vais essayer de réaliser une application de chat en js en 2h ou moins si possible. Cette vidéo je ne vais rien vous expliquer en fait, ce sera comme je vous l’ai dis en fait un challenge pour moi et je vais essayer de résoudre ce challenge. Comme vous voyez à l’écran il est déjà 19h ici chez moi et je vais commencer là 2h donc je dois finir avant 21h. Commençons donc, ca va aller très vite et espérons que je puisse relever le challenge. Là je commence à créer l’architecture de mes dossiers, j’essaie de les organiser le mieux possible, là le template.css que vous voyez j’ai créé là, à la fin du projet finalement je ne l’avais pas utilisé donc vous pouvez ne pas le créer si vous voulez reproduire le code en même temps que moi. Donc là c’est le html, je vais utiliser bootstrap c’est une librairie qui permet d’écrire du code css plus rapidement et plus facilement, donc c’est leur code que je copie comme ca, ca va m’aider à aller plus rapidement, avec la signature du css que j’inclus, et après le js. Et là la propriété defer que je mets, si vous n’êtes pas habitué, defer veut juste dire que la balise script va se charger après tout le document html. Ok là c’est ma structure, je commence un peu avec du css en même temps. Vous voyez grâce au bootstrap vous voyez là les documents se forme assez rapidement et on a déjà un résultat, ca c’est bootstrap. Là maintenant c’est la partie vraiment de l’application, le haut la c’était l’en-tête maintenant je développe l’application donc la partie qui va afficher tous les messages et celle qui va permettre à l’utilisateur de créer son message et de l’envoyer. Donc c’est juste une application en js qui n’utilise aucun réseau, c’est juste local sur ma machine donc la personne qui va envoyer le message va juste écrire son nom que message de tel personne et le système va se charger de mettre l’heure à laquelle il l’a envoyé automatiquement. A la fin le but le but c’est d’inclure ca dans le localstorage, si vous ne connaissez pas faites un peu la recherche dessus mais en fait c’est un peu comme des cookies mais en mieux en fait, une appli qui permet de sauvegarder les données sur le navigateur de la personne directement, donc c’est ca que je vais utiliser pour sauvegarder les messages à fin que lorsque j’actualise ca ne se perd pas. Mais ca se fait vers la fin, toute suite c’est juste, oui ca sera juste basique. Là je suis là en js, vous voyez que au fur et à mesure la plus part du temps je suis toujours sur le navigateur en train de faire les recherches en même temps, c’est comme ca que je travail généralement, lorsque j’apprends des notions je les pratique, lorsque je les connais maintenant, si je fais beaucoup de temps sans les pratiquer après au moins je sais ce que je veux chercher en fait. Vous voyez les recherches vont très rapidement, je cherche et je trouve très rapidement ce que je veux, parce que j’ai déjà eu à travailler sur ca donc je sais ce que je cherche en fait. C’est pour ca que je vous encourage toujours à faire la pratique, travailler pour connaitre, même si vous passez après quelques temps sans les pratiquer, mais si vous avez compris ca au début après vous pourrez facilement les retrouver puisqu’avec internet aujourd’hui on peut facilement trouver des choses et très rapidement. Là je ne sais plus trop ce que je faisais à ce moment, à oui je performais un peu mon box pour que ca ressemble vraiment à un endroit pour envoyer des messages, ca c’est avec bootstrap ca me permet d’aller plus rapidement, là je cherche une icône pour le bouton envoyer, je le colle là et je dois inclure la librairie font out somme pour pouvoir vraiment utiliser ce bouton sinon je ne pourrais pas le faire. Et le je l’ai trouvé sur w3schools, je pars là vous voyez je clic je clic et vous voyez je sais où je vais aller le chercher parce que comme je l’ai dit avant j’ai déjà eu l’habitude de travailler avec ca donc, mais ce serais mieux aussi si vous pouvez le retenir, ce sera beaucoup plus rapide surement, donc là j’ai ma box, maintenant là ce sera l’endroit qui va contenir mes messages. Je mets un petit css pour que ce soit réservé et que ca aille plus rapidement n fait. Pour qu’on vole vraiment que c’est la box pour les messages Ok ca commence déjà à ressembler à l’état final, donc on va passer au js dans quelques secondes ou quelques minutes. Vous voyez là bien sûr je rajoute un peu du css pour, pour mettre à jour en fait. Pour modifier vraiment

cet élément et le rendre comme je veux à la fin. Il y’a certain css que je mets juste parce que lorsque je suis en train d’écrire directement, juste pour par exemple les bordures rouge que vous voyez là c’est juste pour que je puisse voir où es ma box et je vais le retirer après. Là c’est le js, ca c’est vraiment ce qui fait fonctionner notre application, j’ai une class application, je n’ai plus utilisé de class il y’a beaucoup de temps donc là vous voyez j’essaie un peu de me rappeler la syntaxe, je vais même aller chercher sur la documentation, vous voyez là je cherche un peu parce que je n’ai plus utilisé ca depuis un bout de temps donc je cherche un peu comment ca marche en fait, donc là ca va très rapidement. En fait ce que je veux faire c’est, lorsque la personne envoie un message il clic sur ce bouton envoyer, je retire le message qui est dans sa boite, je l’ajoute dans le tableau de tous les messages. Si c’était dans une autre application ce serait dans une base de données, mais j’ai oublié une base de données, c’est ca qui est mon messagearray que vous voyez là, messages, donc je l’ajoute dans ce tableau qui comme ma base de données et après je display tous les messages. C’est ca ici que j’ai appelé la fonction refresh pour rafraichir le chat. N’hésitez pas à vous abonner si vous êtes nouveaux sur la chaine, laissez un pouce bleu si vous aimez ce genre de contenu et laissez moi un commentaire aussi si vous avez des commentaires. Je penses que je vais faire une version deux de cette application, mais là pour l’instant je ne sais pas encore Ok essayons de faire une fonction qui dessine toutes les données, dessine tous les messages Là je parcours je passe dans tous les éléments de mes messages et je les affiches un à un, c’est juste qu’après je vais voir que ce n’est pas vraiment performent parce que, supposons une application où on a des milliers de messages, là je ne voudrais pas vraiment lire tous les messages de la base de données à chaque fois donc après je vais modifier ca pour lire juste les derniers messages en fait. Voilà ca commence à marcher déjà, je clic sur le message et ca l’envoie. Vous voyez là ca me met envoyé là avec le style que je veux. Là je vais donner un petit css à cet élément à fin que ca ressemble vraiment à un message en fait que ce ne soit pas que du texte. Jusqu’à présent je stockais juste les messages sous forme de texte dans ma base de données ou dans mon tableau, donc toute de suite la ce que je fais c’est que je vais créer une class pour les messages qui aura le message en fait, le nom de l’utilisateur qui a envoyé le message, je vais appeler ca from, et aussi le temps au quel il est envoyé. Le temps je vais juste prendre le temps actuel donc quand il envoie le message, comme je vous l’ai dis tout à l’heure c’est juste parce que c’est un projet juste en js, si c’était dans une base de données ca serait une table sans cette class message bon je pourrais faire une class aussi

mais ce sera vraiment dans une table sur la base de données, si vous connaissez le système de base de données c’est vraiment ca que ce sera, pour là actuellement on a les messages et là j’essaie de les afficher, essayez la syntaxe de js ci ici, je ne sais pas pourquoi ca n’a pas marché. Là on va faire une variable timestr, c’est pour que ce soit plus formaté voilà, on ca, on a le texte et l’heure à laquelle il a été envoyé Maintenant je vais un moyen aussi pour pouvoir envoyer le nome de l’utilisateur qui a envoyé ca aussi, mais pour ca il faut que je crée d’abord un champs que l’utilisateur mette son nom que c’est moi qui ais envoyé ca et là je l’ajoute dans la class message, le nom de l’utilisateur qui envoie le message, et aussi dans l’affichage. Ok ca avance plutôt vite là, en moins d’une heure on a déjà fait une application qui fonctionne pas mal, allez après je mets une pause pour consommer un peu de jus, et on sera bon pour repartir. Ok c’est bon, let’s go. On commence à personnaliser un peu plus les messages pour que ca ressemble un peu plus à un message quoi. Là c’est la partie head donc ce qui contient le nom de l’envoyeur du message et là on a un résultat en fait. Ca ressemble déjà à quelque chose c’est pas mal beau, donc je vais essayer d’agrandir ca pour que ce soit plus meilleur. Là on passe au body, donnons aussi un css à ca, ok nice Ok là c’est une erreur. Qu’est ce qui ce passe ? je ne sais pas, ca répète les messages et je ne sais pas pour quelle raison donc essayons de voir quel est le problème, j’ai essayé de changer quelque chose, et à ca me donne une erreur. Là j’ai essayé avec un long texte pour voir ce que ca donnait et ca débordait, donc je vais essayer de mettre des max, des limites à ces messages, je vais donner une taille limite pour s’attribuer et changer un peu le font aussi. Là on a toujours la même erreur en js, je pensais que je l’avais résolu mais non, on va regarder ca de plus près, et là quand je regarde les messages, les messages n’ont pas été dupliqué c’est juste lors de l’affichage donc je ne comprends pas trop, je vais essayer de regarder ca un peu. Là la vitesse de la

vidéo elle est en train d’aller fois 4 pour que vous ne passer pas vraiment 2h à regarder ce que je fais, pour que ca aille plus rapidement. Mais vous voyez les moments où ca reste bloqué là pour quelques instant ca veux dire que je restais là à réfléchir aussi, donc c’est comme ca en fait lorsque j’exécute les projets réels, il y’a les moments où je suis bloqué et ici contrairement aux tutoriels qu’on fait, là ce sont les cas que je les faits d’abord, lorsque je suis bloqué et tout, j’essaie de trouver la solution d’abord et de vous expliquer ensuite. Là c’est un projet réel donc je me bloque et j’essaie de me débloquer en même temps. Et là je semble avoir trouvé une solution, ca marche sauf que j’essaie de, non là je n’ai pas encore trouvé de solution en fait. Là maintenant il y’a un autre problème c’est que le message lorsqu’il est ajouté il ne s’affiche pas directement donc on essaie de trouver un truc, là ca marche, essayons de tester autre chose, ok cool ca marche. Donc là je pourrais laisser ca comme ca et on aurait résolu notre problème en une heure environ mais je vais essayer d’ajouter des update à notre application pour aller plus loin, la c’est l’idée que j’avais au départ, maintenant je vais essayer d’ajouter des emojis. Un nouveau challenge, je n’ai jamais essayé ca donc là je vois que lorsque je copie un émojie et je colle là ca marche Je copie là et je colle ca marche. Donc vous voyez je suis en train de causer avec mon ami imaginaire, en changeant les noms là à chaque fois, mais si c’était une application réelle chaque utilisateur devait être de son coté, on ne devait pas avoir à mettre le nom de l’utilisateur à chaque fois, ce serais juste, vous prenez le nom de login , vous comprenez un peu le processus en fait Lorsque vous êtes connecté sur instagram, instagram ne vous demande pas votre nom à chaque fois, instagram connait déjà, c’est enregistré dans l’application. Donc là c’est juste une application coté client avec juste js que je prends le nom de l’utilisateur à chaque fois. On va essayer de mettre les emojies, je vais ajouter comme une box qui va contenir tous les emojies, je cherche une icône pour la box la, ok maintenant là ca marche déjà, cool maintenant ce que je veux c’est que lorsque je clic sur ce bouton ca m’afiche une boite avec tous les emojis donc c’est ce que je suis en train de faire ici, donc là j’ai dis activated false, par défaut ca doit être faut pour que la boite des emojis ne s’affiche pas par défaut, et ca la boite des emojis que j’ai là je l’ai appelé emojilist, qui va contenir tous les emojis. Mais là dans le html il n’y aura rien, je vais ajouter tous ces emojis dans le js. Donnons un peu de css à ca, ok c’est dans le js comme je disais, c’est dans le js que je vais générer en fait tous les emojis comme je disais la bon pas tous les emojis, je vais mettre juste quelques emojis à disposition de l’utilisateur, là ma fonctionnalité marche, lorsque je clic ca active et ca désactive. Sauf que PAR défaut je veux que ce soit désactivé, et là je mets un peu de display et un petit css pour les emojis, les margin en fait. Les

parties, donc j’ai regardé un peu pour les caractères des emojis et j’ai décidé de prendre juste les émojis sur ce site la, et je les mets dans un tableau en fait. Ca sera considéré comme des chaines de caractères J’ai copié certain et je vais en copier plusieurs et les mettre dans mon tableau d’emojis Là j’en ai copié quelques et je les ai mis dans mon tableau comme je vous l’ai dit, ce que je vais faire maintenant c’est que je parcours mon tableau et j’ajoute tous ces emoji la dans ma liste d’emoji qui est dans le html en lui sélectionnant emoji avec son id, je le parcours et je l’ajoute en fait. Un peu comme dans les messages, juste que ca c’est pour les emoji et il n’y a pas d’autres complications pour les emojis C’est juste les valeurs que je mets là Là vous voyez mes emoji ont bien été chargé, et c’est super. Là je finis la configuration de mes emojis, et je vais m’amuser un peu avec ca, je mets un évènement que lorsqu’on clic dessus ca l’ajoute à la boite de dialogue et ca marche en fait super, mais sauf que vous remarquez chaque fois que j’envoie le message je dois l’effacer par moi-même, c’est pas vraiment ce que je veux, donc je vais essayer de modifier ca, allons à js ca c’est un petit truc, c’est juste que je vais effacer la boite qui contient le message à la fin lorsque je vais effacer le message en fait et là maintenant lorsque j’envoie le message, et ca efface le message cool. Donc on a une application là de chat qui marche déjà bien, sauf que lorsque je clic là à chaque fois vous remarquez toutes les valeurs sont effacées. Là je vais enregistrer d’autres emoji d’abord parce que ces emoji sont très peu, je vais essayer d’ajouter plus mais pas beaucoup donc je vous épargne ca et, là c’est la partie où je fais la persistance des données, c’est-à-dire je les faits être sauvegardées dans le localstorage c’est-à-dire un peu comme un disque dur ou une base de données dans le navigateur qui est réservé pour ces données la. Je sauvegarde premièrement le nom de la personne qui est en train d’envoyer, pour qu’il n’a pas besoin de mettre son nom à chaque fois qu’il actualise, vous voyez lorsque j’actualise le nom reste bien là, super, maintenant je vais essayer de faire pareil pour les messages en fait. Je vais essayer de faire pareil pour les messages sauf que là je vais faire d’abord, je vais envoyer tous les messages et ca va me donner une erreur qui n’est pas vraiment souhaitée, ca va me donner une erreur parce que j’ai sauvegardé les données et j’ai envoyé directement l’objet et l’objet , et les local storage le problème avec ca, ou la bonne chose ca dépend de vous, ca sauvegarde que les chaines de caractères. Donc ca convertissait mon objet ou mon tableau d’objets en chaine de caractère et vous voyez cette erreur que ca me donnait, ca me donnait des messages qui n’existent pas donc ce que j’ai fais pour résoudre ca, j’ai regardé un peu en ligne pour quelque secondes ou quelques minutes et j’ai vu que je devais convertir ces données la en utilisant d’abord, et ca faisait du sens, donc c’est ce que j’ai fais, là c’est la partie où je faisais des recherches, je regardais la partie sessionstorage si c’est différent, non c’est pas le cas, c’est la même chose sessionstorage et localstorage sont deux choses vous pouvez regarder ca sur la documentation si vous voulez en savoir plus. Là ca marchait sauf que lorsque j’actualisais ca mettait encore ces erreur la. Donc la vraiment je dois faire ces recherches et trouver ce qui ne va pas. Donc j’essaie d’abord de débloquer, lorsque j’ai mis mes objets en chaine de caractère, là maintenant j’ai su ce que je devais chercher, vous voyez un peu grâce au link que j’ai fais

là, et là j’ai trouvé une solution, je relis la solution et je comprends que je dois convertir en json et c’est ce que je vais faire ici, je convertis en json qui est le format qui permet de sauvegarder les données, lorsque je convertis en json et je vais le dé convertir à la sortie parce que je vais l’utiliser au départ, là j’essaie, ma boite de message, et j’actualise, bam mes messages sont toujours là super, j’ai réussis et j’ouvre même sur un autre onglet et mes messages sont toujours là donc on peut dire que j’ai accomplis ma mission, mon application est déjà terminé en fait et je l’ai fais en moins de 2h, c’est super Chaque je dois changer de nom ici, c’est comme je l’ai dis juste parce que ca marche avec du js, si c’était comme avec du php, là je pouvais faire des sessions comme si on voulait envoyer des messages et tout, là vous voyez mes messages et emoji, ca c’est super, c’est assez simple et basique, si vous pouvez reproduire ca du coté client juste, c’est ca en fait. Maintenant je l’ai fais en 1h52, super j’ai relevé le challenge Fixez vous des challenges aussi comme ca, et résolvez-les pour devenir plus meilleur