##### Introduction ##### Présentation ----- Dans ce tutoriel, nous allons créer, pas à pas, une application web ; plus précisément un forum en temps réel. .. only:: html .. seealso:: Qu'est-ce que c'est ? De quoi ça a l'air ? .. only:: latex .. hint:: Qu'est-ce que c'est ? De quoi ça a l'air ? .. only:: html Voilà des questions que vous vous posez sûrement déjà. Pour entrer en matière et trouver une réponse, vous pouvez visionner cette vidéo : .. raw:: html

.. only:: latex Voilà des questions que vous vous posez sûrement déjà. Pour entrer en matière et trouver une réponse, vous pouvez visionner une vidéo à cette adresse : http://j.mp/1T2Xfuy Enjeux ----- Maintenant que vous avez une idée plus précise de notre projet, ses enjeux peuvent être énumérés. NodeJS côté serveur ***** Ce tutoriel vous permettra de créer une application web d'un autre genre. En effet, le code côté serveur des forums habituels est souvent le ``PHP``. Cette application innove en utilisant du ``nodeJS``. Ce langage a plusieurs avantages par rapport au PHP : .. important:: Il est orienté sur les **événements**. Contrairement au ``PHP``, le ``javascript`` agit en grande partie de manière asynchrome (ou "non-bloquante"), c'est-à-dire qu'il exécute les instructions qui se trouvent dans le code de façon dynamique. Prenons un exemple : si nous voulons charger plusieurs fichiers à l'aide d'un script ``PHP``, le code (appelé code bloquant) s'occupe de charger les fichiers les uns après les autres. En revanche, en ``javascript``, le code s'exécutera en créant tout simplement des événements pour chaque téléchargement. Ainsi, plusieurs téléchargements seront simultanés. Lorsqu'un téléchargement est terminé, nous appeleons alors une fonction de ``callback`` (fonction de retour) qui dit au programme ce qu'il doit faire avec le fichier. Pour illustrer cet exemple, voici une image : .. image:: intro/1.png :height: 10000 px :width: 700 px :scale: 60 % En prenant le simple exemple d'un chargement de fichiers, nous entrevoyons déjà l'énorme avantage de la programmation événementielle. En ``PHP``, si un fichier à télécharger provient d'un serveur à bande passante très lente, le script se contentera d'attendre que le téléchargement soit terminé pour exécuter d'autres instructions. Par contre, en ``nodeJS``, le script aura peut-être déjà terminé l'exécution des autres quand ce fichier sera téléchargé. Nous constatons donc que cela représente un gain de temps non-négligable : .. image:: intro/2.png :height: 10000 px :width: 700 px :scale: 60 % .. only:: html .. seealso:: OK, le ``nodeJS`` est utile pour télécharger des fichiers ; mais a-t-on besoin de télécharger des fichiers pour créer un forum ? .. only:: latex .. hint:: OK, le ``nodeJS`` est utile pour télécharger des fichiers ; mais a-t-on besoin de télécharger des fichiers pour créer un forum ? En effet, le forum ne nécessite pas beaucoup de chargements de fichiers, mais le ``nodeJS`` contribue à significativement accélérer sa vitesse. Un exemple : lors d'une requête ``SQL`` vers la base de données, le code va crée l'événement qui concerne cette requête, puis exécute d'autres instructions (par exemple : préparer la page qui doit être envoyée à l'utilisateur). Lorsque le résultat de la requête est retourné, il n'a alors plus qu'à envoyer la page toute prête à l'utilisateur. .. important:: Il est très rapide. En plus de son mode asynchrome, le ``nodeJS`` est connu pour avoir d'excellentes performances, notamment grâce au moteur ``V8`` de ``Google Chrome``. .. important:: C'est un langage de bas niveau avec une gestion native du ``HTTP`` Avec le ``nodeJS``, vous gérez aisément les routes vers les pages web et le format des ``URL``. Ainsi, plus besoin d'installer des programmes tels qu'``Apache`` et des frameworks pour le faire. Javascript côté client ***** Pour réaliser ce forum, nous utiliserons également beaucoup de ``javascript``. Ce langage nous permet de concrétiser la notion de temps réel ; grâce à lui, des modifications peuvent s'effectuer sur une page sans que l'utilisateur aie besoin de recharger celle-ci. Le ``javascript``, employé avec ``nodeJS``, utilise exactement le même langage sur le code côté serveur et sur le code côté client. Ainsi, nul besoin d'apprendre la syntaxe du ``javascript``, puisque c'est la même que celle du ``nodeJS``. Grâce à la pratique constante du ``javascript`` et du ``nodeJS``, vous deviendrez plus expérimentés dans ce langage et vous découvrirez peut-être une nouvelle manière de créer des applications web. Socket.io ***** ``Socket.io`` n'est pas un langage à proprement parler, car il utilise du ``javascript``. Ce module ``nodeJS`` permet de relier le client et le serveur avec une communication bidirectionnelle asynchrome. .. only:: html .. seealso:: Une communication bidirectionnelle asynchrome ? .. only:: latex .. hint:: Une communication bidirectionnelle asynchrome ? Il s'agit d'une sorte de "tuyau" de communication qui permet au client d'envoyer directement des éléments au serveur, et vice-versa. .. image:: intro/3.png :height: 10000 px :width: 700 px :scale: 60 % ``socket.io`` est bidirectionnel ; c'est ce qui explique la flèche qui va dans les deux sens. Le client et le serveur sont ainsi toujours en contact et peuvent s'envoyer des requêtes dans les deux sens. Le mot "asynchrome", quant à lui, signifie que ``socket.io`` se base sur les événements et les fonctions de rappel. Un exemple concret : lorsque le serveur envoie un message au client, le client exécute une fonction qui affiche le message sur la page. Lorsque vous aurez utilisé ``socket.io`` pour créer cette application, vous maîtriserez un système très efficace pour actualiser des données en temps réel sur une page sans recharger celle-ci. Ce système peut en effet s'appliquer de nombreux programmes : un chat, un système d'édition collaborative de documents, une présentation à distance... Dans l'application que nous allons créer, il servira à actualiser les messages d'une discussion en temps réel. MySQL ***** Dans presque chaque application qui stocke des données, nous avons besoin d'une base de données. Et en l'occurence, nous utiliserons ``MySQL``. .. only:: html .. seealso:: Pourquoi utiliser ``MySQL`` et non pas d'autres systèmes de gestion de bases de données ? .. only:: latex .. hint:: Pourquoi utiliser ``MySQL`` et non pas d'autres systèmes de gestion de bases de données ? .. only:: html ``MySQL`` a plusieurs avantages : il est gratuit, le système de gestion de base de données est relationnel et il existe un module (`node-mysql`_) très complet qui permet de travailler avec les bases de données de ce type en ``nodeJS``. .. only:: latex ``MySQL`` a plusieurs avantages : il est gratuit, le système de gestion de base de données est relationnel et il existe un module (node-mysql, consultable sur le lien suivant : http://j.mp/1TXXIzF) très complet qui permet de travailler avec les bases de données de ce type en ``nodeJS``. L'écriture de nombreuses requêtes ``SQL`` améliorera vos compétences dans ce domaine. Vous parviendrez alors plus aisément à organiser vos données, à les trier et à récupérer ensuite celles dont vous avez besoin pour les transmettre à l'utilisateur de votre application. Bootstrap ***** Vous rêvez de réaliser un site web au design propre mais vous n'avez pas assez d'idées et d'expérience avec ``CSS`` ? Alors ``bootstrap`` est fait pour vous ! ``Bootstrap`` est un framework ``CSS`` qui donne accès à une très grande quantité de directives ``CSS`` qui modifient l'apparence une page web. Il est entièrement compatible avec le ``responsive design`` (il aide même grandement à la création d'un site web ``responsive``). .. only:: html .. seealso:: Un site web ``responsive`` ? Qu'est-ce que c'est ? .. only:: latex .. hint:: Un site web ``responsive`` ? Qu'est-ce que c'est ? C'est tout simplement un site web qui s'adapte à la taille de l'écran depuis lequel on le visite. Pour illustrer ce concept, voici une image d'une page du forum pour un petit écran (à gauche) et pour un plus grand écran (à droite) : .. image:: exemple_responsive.png ``Bootstrap`` aide donc à créer un site web ``responsive``, notamment grâce à son système de grilles. Connaître ce framework vous permet de mieux appréhender le ``responsive design`` et d'apprendre à réaliser un site web avec un design moderne et uniforme. HTML et CSS ***** Quasiment obligatoires lorsqu'il s'agit de créer un site web, ces langages sont aujourd'hui à la base du côté client de n'importe quelle application web. Les travaux pratiques de ce tutoriel vous permettront d'approfondir vos connaissances dans ces langages pour ainsi modifier aisément l'esthétique de votre page. Tout cela vous donne envie ? Alors commençons l'apprentissage ! Pré-requis ----- Tout d'abord, pour comprendre ce tutoriel, il est nécessaire de connaître la base des quelques langages énumérés ci-dessous : .. only:: html **HTML et CSS** : Vous apprendrez ces langages en lisant `ce cours`_. Il est important de lire l'intégralité des parties concernant le HTML. Pour le ``CSS``, des notions de base suffiront. .. only:: latex **HTML et CSS** : Vous apprendrez ces langages en lisant le cours accessible à partir de cette adresse - http://j.mp/1TFzMR1. Il est important de lire l'intégralité des parties concernant le HTML. Pour le ``CSS``, des notions de base suffiront. .. only:: html **Bootstrap** : Si vous comprenez bien l'anglais, `la documentation de bootstrap`_ vous donnera les notions dont vous aurez besoin pour réaliser ce tutoriel, le principal étant de connaître le système de grilles, les formulaires, les boutons et la barre de navigation. Nul besoin de savoir tout ce qui concerne le ``javascript``, car nous utiliserons ``bootstrap`` uniquement pour mettre en forme les pages. Par ailleurs, si vous désirez lire un cours en français, vous pouvez utiliser `celui-ci`_. .. only:: latex **Bootstrap** : Si vous comprenez bien l'anglais, la documentation de ``bootstrap`` (trouvable sur ce lien - http://j.mp/1Rg25iB) vous donnera les notions dont vous aurez besoin pour réaliser ce tutoriel, le principal étant de connaître le système de grilles, les formulaires, les boutons et la barre de navigation. Nul besoin de savoir tout ce qui concerne le ``javascript``, car nous utiliserons ``bootstrap`` uniquement pour mettre en forme les pages. Par ailleurs, si vous désirez lire un cours en français, vous pouvez utiliser celui qui se trouve sur le lien suivant : http://j.mp/22dfPCB. **Javascript** : Il est important de connaître la syntaxe de base du ``javascript`` et d'être capable de manipuler l'arbre ``DOM`` d'une page ``HTML``. Plusieurs cours proposent cet apprentissage : .. only:: html - `Introduction à la programmation avec JavaScript`_ de Khan Academy (cours interactif) - `JavaScript basics`_ (sur Udacity - avec des exercices corrigés automatiquement) - `Ce cours en anglais`_ sur Udemy .. only:: latex - Introduction à la programmation avec ``JavaScript`` de Khan Academy (cours interactif) - http://j.mp/1UqcNIC - ``JavaScript basics`` (sur ``Udacity`` - avec des exercices corrigés automatiquement) - http://j.mp/1Xnj7jh - Ce cours sur ``Udemy`` - http://j.mp/1Xnj8DZ .. only:: html **NodeJS et socket.io** : Les notions de base de ces technologies sont expliquées `dans ce cours`_. Le reste sera abordé dans ce tutoriel. .. only:: latex **NodeJS et socket.io** : Les notions de base de ces technologies sont expliquées le cours disponible à cette adresse - http://j.mp/1R9M0Os. Le reste sera abordé dans ce tutoriel. .. warning:: Il est essentiel de lire les lignes sur ``expressJS`` et ``EJS`` afin de comprendre le fonctionnement d'EJS ; ce module sera souvent utilisé dans ce tutoriel. .. only:: html **MySQL** : Grâce à `ce cours d'openclassrooms`_, vous apprivoiserez les bases du langage ``SQL``. Toutefois, ne vous perdez pas dans toutes les sections de ce cours. Il vous suffit de savoir insérer, modifier et supprimer des données. Pour créer un dialogue entre la base de données et le script ``nodeJS``, la lecture de la `documentation sur node-mysql`_ vous sera bénéfique. De plus, vous devrez savoir utiliser `l'interface de phpmyadmin`_. .. only:: latex **MySQL** : Grâce à ce cours d'``openclassrooms`` - disponible sur l'adresse http://j.mp/1U9MnMk, vous apprivoiserez les bases du langage ``SQL``. Toutefois, ne vous perdez pas dans toutes les sections de ce cours. Il vous suffit de savoir insérer, modifier et supprimer des données. Pour créer un dialogue entre la base de données et le script ``nodeJS``, la lecture de la documentation sur ``node-mysql`` vous sera bénéfique. De plus, vous devrez savoir utiliser l'interface de phpmyadmin après avoir lu ce cours - http://j.mp/1RY2c5z .. only:: html **Les expressions régulières** : La `première`_ et la `deuxième`_ parties d'un `cours d'openclassrooms`_ les concernant vous expliquerons comment comprendre et utiliser les expressions régulières en ``javascript`` .. only:: latex **Les expressions régulières** : La première et la deuxième parties d'un cours d'``openclassrooms``, disponibles au liens suivants - http://j.mp/1pnRV9A et http://j.mp/1SKzEyF, vous expliquerons comment comprendre et utiliser les expressions régulières en ``javascript`` .. liens... .. _node-mysql: https://github.com/felixge/node-mysql .. _ce cours: https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3 .. _la documentation de bootstrap: http://getbootstrap.com/getting-started/ .. _celui-ci: https://openclassrooms.com/courses/prenez-en-main-bootstrap .. _Introduction à la programmation avec JavaScript: https://fr.khanacademy.org/computing/computer-programming/programming .. _Javascript basics: https://www.udacity.com/course/viewer#!/c-ud804/l-2239648539/e-1938268552/m-2298878572 .. _Ce cours en anglais: https://www.udemy.com/understand-javascript/#/ .. _dans ce cours: https://openclassrooms.com/courses/des-applications-ultra-rapides-avec-node-js .. _ce cours d'openclassrooms: https://openclassrooms.com/courses/administrez-vos-bases-de-donnees-avec-mysql .. _documentation sur node-mysql: https://github.com/felixge/node-mysql .. _première: https://openclassrooms.com/courses/dynamisez-vos-sites-web-avec-javascript/les-expressions-regulieres-1-2 .. _deuxième: https://openclassrooms.com/courses/dynamisez-vos-sites-web-avec-javascript/les-expressions-regulieres-partie-2-2-1 .. _cours d'openclassrooms: https://openclassrooms.com/courses/dynamisez-vos-sites-web-avec-javascript/ .. _l'interface de phpmyadmin: https://openclassrooms.com/courses/concevez-votre-site-web-avec-php-et-mysql/phpmyadmin-5