Cas pratique : développer un service WHOIS avec Node.Js

Dans cet article je vous montre comment on peut développer en moins d’une heure un service WHOIS complet avec Node.JS.

Cette idée m’est venu en rédigeant un article explicatif sur WHOIS. J’ai donc choisi de créer mon propre service pour illustrer et mes propos. Je vais donc en profiter pour vous décrire le processus.

Gitlab

Comme tous projets on crée un projet sur Gitlab, on le clone en local dans notre dossier qui contient nos projets, et on prêt à commencer. J’ai nommé mon projet WHOIS, pour faire simple.

Le front-End avec Node.JS

Le Frontend est très simple, on a un simple formulaire composé d’un champ de recherche, et d’un bouton de validation. Lorsque l’on clique sur le bouton, le Backend va chercher les infos WHOIS du nom de domaine renseigné dans le champ et les retourne directement sous le formulaire.

Express.JS

Express.Js est un Framework simpliste à la base de pleins d’autres Framework utilisant la technologie Node. Il permet de créer facilement un Frontend ou une api, tout en simplifiant pas mal le travail.

Express JS Logo
Express JS

On crée notre application express simplement via l’utilitaire en ligne de commande :

express --view=hbs .

Libre à vous de modifier les options de la commande pour choisir votre type de template ou votre façon de traiter le CSS. La documentation est disponible ici.

Voici l’architecture crée, elle est simple et intuitive :

.
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.hbs
    ├── index.hbs
    └── layout.hbs

7 dossiers, 9 fichiers

Avant de tester, on installe les dépendances de NPM :

npm install

Et on lance le serveur de dev avec l’options de DEBUG :

DEBUG=whois:* npm start

Voilà notre serveur front-end est lancé et on voit notre helloWorld

Express.js HelloWorld
Express.js HelloWorld

Framework css : Boostrap4 la référence

Je n’aime pas travailler sans framework CSS même pour les projets les plus simples, on part donc sur du Boostrap 4. Par contre on ne va pas s’embêter et l’installer directement via le html.

On récupère directement le template de base disponible sur le site de boostrap, et on le modifie pour le faire marcher avec HBS :

<!doctype html>
<html lang="fr">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous">

  <!-- custom css -->
  <link rel='stylesheet' href='/stylesheets/style.css' />

  <title>{{ title }}</title>
</head>

<body>
  {{{ body }}}
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
    crossorigin="anonymous"></script>
</body>

</html>
Template de base HTML

On a maintenant une base saine pour travailler, passons au formulaire.

Le formulaire

On récupère également le formulaire sur la page d’exemple de Bootstrap précédente, et on le modifie pour récupérer notre nom de domaine. Pour l’instant pas de validation, on restera simple.

<form method="POST" action="/">
    <div class="form-group">
        <label for="ndd">Nom de domaine</label>
        <input type="text" class="form-control" id="ndd" name="ndd" aria-describedby="nddHelp" placeholder="Entrez votre nom de domaine">
        <small id="nddHelp" class="form-text text-muted">Entrez un nom domaine valide (ndd.tld)</small>
    </div>
    <button type="submit" class="btn btn-primary">WHOIS</button>
</form>

On crée ensuite une route POST pour vérifier qu’on récupère bien le nom de domaine demandé.

router.post('/', function (req, res, next) {
  // get ndd from post
  ndd = req.body.ndd;
  console.log(ndd)

  res.render('index');
});

Récupérer les infos WHOIS ?

Maintenant qu’on a un front-end fonctionnel. Il nous faut récupérer les infos du nom de domaine via WHOIS.

Le réflexe est simple, on cherche si un paquet NPM ne ferait pas tout le boulot pour nous. Et c’est le cas, installons-le :

npm install whois

Attention : si comme moi vous avez nommée votre dossier WHOIS, NPM ne sera pas très content ajoutez un “ -f  ” à la commande pour forcer le passage.

Voyons comment l’intégrer

var whois = require('whois') // on inclus le paquet
whois.lookup('google.com', {"follow": 10}function(err, data) {
    console.log(data) // on affiche les infos
})

Simple comme bonjour n’est-ce pas ? il suffit d’utiliser la commande whois.lookup() et le tour est joué.

On ajoute une petite fonction pour filtrer les données et les retourner dans un tableau associatif que l’on va pouvoir utiliser dans notre vue :

function parseData(data) {
  var attr;
  var attrColon;
  var returnArray = [];

  data.split('\n').forEach(function (part) {
    if (!part) return;

    attrColon = part.indexOf(': ');
    attr = part.substr(0, attrColon);

    if (attr !== '') {
      returnArray[attr] = part.substr(attrColon + 1).trim()
    }
  });

  return returnArray;
}

Utilisons cela pour retourner le résultat et l’afficher dans notre page :

    <ul>
        <li>
            Site web : {{ data.website }}
        </li>
        <li>
            Nom de domaine : {{ data.domain }}
        </li>
        <li>
            Pays : {{ data.country }}
        </li>
    </ul>

Faites un console.log() si vous voulez savoir à quelles données vous avez accès dans votre vue. Attention, les données récupérées ne seront pas toujours les mêmes et un petit traitement des données préalable peut être utile, mais on va passer cette étape.

Améliorations

Voilà c’est fait, voici une liste de ce qui peut être amélioré :

  • Le design
  • Présentation des données ; à vous de faire votre sauce, et de présenter les données de façon cohérente. Inspirez-vous des autres sites WHOIS.
  • Valider l’URL du nom de domaine; utilisez un paquet NPM pour sécuriser votre app et améliorer l’expérience utilisateur. L’idée c’est de tester si l’input est bien un nom de domaine valide pour pas lancer de requêtes inutiles
  • Ajouter une petite pub pour vous faire de l’argent, et un petit lien vers votre site perso pour vous faire connaitre.
  • Partagez le

Déploiement

Il ne reste plus qu’a déployer notre app sur un serveur pour la rendre accessible au reste du monde.

Compression

Optimisons un peu en ajoutant un peu de compressions gzip, avec express c’est simple et rapide, pourquoi s’en priver ? On installe le paquet

npm install compression

Et on ajoute ces deux lignes de codes :

var compression = require('compression');

app.use(compression());

Sécurité

Ajoutons un peu de sécurité avec le paquet Helmet qui gêre quelqu’unes des plus grosses failles d’Express/Node. On installe le paquet :

npm install helmet

Et on ajoute deux lignes de codes (vous commencez à comprendre le principe non ?)

var helmet = require('helmet');

app.use(helmet());

Mise en place

Si vous avez suivi ce tuto juste pour l’exemple, je vous conseille d’utiliser Heroku. Simple et rapide vous pourrez déployer votre app en 2 commandes.

Moi je vais plugé tout çela avec ma config nginx. Pm2 s’occupera du monitoring et le pilotage de l’app. Je vous passe  les détails, cela fera surement l’objet d’un article complet.

Doctor who ; l’une des meilleurs séries

Conclusion

Nous avons crée une petite app qui permet de récupérer des informations WHOIS et de les ré-afficher à l’utilisateurs. Et tout cela en moins d’une heure. Vous pouvez voir le mien ici sur whois.fabrice-palermo.fr.

2 thoughts on “Cas pratique : développer un service WHOIS avec Node.Js

  1. Très intéressant, je cherche à tester des choses avec node.js et ça me semble être une belle occasion. Je suis pour le moment tourné vers vue.js et j’ai développé pas mal de petites choses assez similaires à ce tuto. Par contre j’ai du mal à saisir l’intérêt d’express.js, n’esil pas pssoble de gérer cela avec node.js et bootstrap sans surcouche ?

    1. Il faut que tu vois express.js comme une librairie qui va te simplifier les fonctions de bases de node.js. il te fournit des options pour gérer ton serveur et tes requêtes via des middleware. Et simplifie également la création de ceux-ci.

      Vue.js quand a lui te fournit des composants dynamique ce qui te permet d’améliorer l’expérience utilisateur.

      Tu peux parfaitement utiliser Node tout seul sans bootstrap ni express. Comme tu peux juste coder en JavaScript.

      Avant de débuter un projet il faut chercher la technologie la plus adapté a ce que l’on veut faire pour travailler le moins possible.

      La difficulté est de ne pas se perdre dans les milliers de technologies qui existent.
      J’éspere que je t’ai aider.

Laisser un commentaire

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