shop-cart

Vous lisez actuellement: Automatiser le web #2, un environnement javascript

Automatiser le web #2, un environnement javascript

Dans cet article, second de la série sur l’automatisation avec les technologies du web, je vais vous parler de l’environnement de développement. Cet environnement va vous servir pour suivre la suite des articles, mais c’est aussi une base de tout développeur web.

Un environnement à tout faire

Vous ne le savez peut-être pas, mais Javascript est tout autour de vous, sans arrêt. Une omniprésence assez incroyable, si l’on connait sa vraie histoire et son statut dans le début de sa vie.

Au départ considéré comme une langue qui permettait simplement de faire de petites choses sans grande importance, il s’est imposé, sans conteste, comme la langage de notre siècle.

Téléphone mobiles, télévision, montres connectées, application web, application mobile, application de bureau ! Le Javascript est partout, vous dis-je.

D’abord voué à quelques développeurs front-end bidouilleurs, il a su maturer et devenir un langage utilisé partout et par tous, permettant alors de laisser faire l’imagination pour inventer toute sorte de logiciels incroyables.

Ce qui nous intéresse vraiment pour notre série d’articles, c’est sa capacité à être disponible, justement, dans tous sites internet. Avec quelques techniques simples, nous allons réussir à modeler, modifier et gérer des informations de ces sites web pour en faire ce que nous souhaitons. Attention, je ne parlerais pas de hacking, mais bien d’automatisation.

Les bons outils

Vous allez devoir suivre quelques étapes, pour appréhender la suite, et disposer des bons outils, installés sur votre machine.

Peu importe votre environnement, il vous faudra :

  • Le navigateur Chrome, https://www.google.com/chrome/.
  • Une console pour jouer avec des scripts, cmdr si vous êtes sous Windows, Iterm si vous êtes sous mac, sous gnu/linux vous avez déjà tout sous la main.
  • Installer Node.js sur votre machine.
  • Installer un éditeur de texte, je vous recommande le très bon Visual Studio Code, édité par Microsoft, qui dispose d’une tonne de plugin pour nous aider à la tâche.

Pour les autres outils, nous y reviendrons en temps voulu. Pour le moment, vous êtes déjà prêt à grimper sur votre monture et à vous amuser avec le DOM !

Appréhender la console de Chrome

Si vous ne le connaissez pas, il est un outil indispensable, pour écrire des scripts, les tester et automatiser vos première tâches, c’est la console de Chrome.

Celle-ci est accessible facilement, il vous suffira de vous rendre dans le menu de Chrome puis de chercher Plus d’outils > Outils de développements.

Le menu dans chrome, depuis un environnement osx

Le menu dans chrome, depuis un environnement osx

En cliquant sur ce menu, vous obtiendrez une belle console de développement, et beaucoup d’autres onglets pour travailler avec une page internet. Je vous conseil aussi, selon votre système, de garder en tête le raccourci clavier vous permettant d’ouvrir ou de refermer ces outils, que vous trouverez en face du sous-menu d’accès.

Nous n’utiliserons que l’onglet Console pour le moment. Les autres nous donnerons des informations importantes sur les ressources d’une page (images, scripts, …) et sur les appels réseaux. Mais la console est l’onglet qui nous intéressera le plus dans le cadre de notre série.

Une vue de la console ouverte dans votre navigateur

Une vue de la console ouverte dans votre navigateur

Grâce à ell, vous disposerez d’un environnement Javascript complet, dans lequel nous allons pouvoir exécuter du code et en obtenir un retour. C’est aussi votre principal outil, car avant d’écrire un script complet, nous pourrons tâtonner en son sein.

L’éditeur de texte

Vous pouvez utiliser n’importe quel éditeur pour travailler, mais il y a une raison à la proposition d’installer Visual Studio Code. Ce logiciel propose un environnement pour coder qui allie simplicité, puissance et confort. Nous n’utilisons d’ailleurs plus que ce logiciel dans notre équipe.

Grâce à Visual Studio Code, vous allez pouvoir vous appuyer sur des centaines de plugins qui vous aiderons à mieux coder et plus simplement. De plus, cet éditeur est parfait pour la Javascript. Il automatise tout un pan de votre travail.

Nous y sommes, gagner du temps est justement notre mot d’ordre !

Icône d’accès à la vue des plugins

Icône d’accès à la vue des plugins

Bien entendu, je vous prépare à coté un article sur les plugins les plus utiles.

Je vous invite à parcourir le moteur de recherche sus-présenté par la capture et de vous amuser à trouver les plugins les plus intéressants par vous même, nous avons tous nos petites préférences.

Utiliser le terminal

Si vous vous êtes un peu renseigné sur Javascript, vous avez sûrement dû lire, ou entendre, que c’est un environnement essentiellement disponible dans le navigateur.

Nous aborderons plus tard Node.Js, qui a apporté aux développeurs un espace de travail côté serveur, et non plus uniquement côté client. Cette grande évolution de Javascript a joué en grande partie à sa démocratisation, et à l’engouement de la communauté pour ce superbe langage.

En ce sens, si Javascript peut tourner côté serveur, il nous faudra un terminal pour le lancer, avoir un retour de ce qui se passe et pouvoir jouer avec des scripts. Vous verrez qu’exécuter un programme sur un serveur diffère relativement du client. Cela nous apportera beaucoup, en ne permettant cependant pas les mêmes fonctionnements qu’un navigateur. Tout est différent, mais vous apprendrez à dompter les deux.

Retour console d’une installation de Node.js, avec le gestionnaire de paquet Npm

Retour console d’une installation de Node.js, avec le gestionnaire de paquet Npm

Pour savoir si votre environnement dispose des outils nécessaires, il vous suffira de taper ces deux commandes :

npm -v
node -v

Ouvrez donc votre plus beau terminal et lancez ces commandes. Si rien ne sort, ou qu’une erreur apparait, je vous invite à relire un peu plus haut les outils nécessaires et à réinstaller Node.Js, l’utilitaire Npm étant installé en même temps que Node.js.

Dans le prochain article, je vous exposerais le projet d’automatisation que nous réaliserons ensemble, étapes par étapes.

Avec

726

Vues


Écrit par

Julien Moulin

Julien est le lead-developer / CTO de blueanchor. Développeur fullstack, il évolue d’abord dans le monde Php/Symfony (chez SensioLabs), puis s’oriente vers Javascript pour performer en Angular. Formateur chez Linkedin learning, il met à profit son savoir auprès des utilisateurs de tout bord, en tentant de faire découvrir le monde du web au plus grand nombre.


Afficher la conversation (0)

Recommander cette page

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

0 People Replies to “Automatiser le web #2, un environnement javascript”