Discussion :

[xulien]

Si j'ai plusieurs fonctionnalités sur une seule page (météo, date...), dois-je faire un seul fichier .js dans /routes ou un par fonctionnalité ?

Aucune obligation, et cela dépends un peu de la taille de ton projet...

Par exemple http://cuisinenligne.com (attention, aucun rapport, mais le design est en train d'être fait par un pro et pour l'instant c'est moche et ça pique les yeux, comme ça c'est dis...) un site un peu conséquent, je le découpe comme ça:

routes/

index.js /

contributeur.js /contributeurs

inscription.js /inscription/...

recherche.js /search?...

....
recettes/

index.js /recettes/(id de la recette)
print.js /recettes/(id de la recette)/print
depot.js /recettes/deposer
...

edit/

titre.js /recettes/(id de la recette)/edit/titre
ingredients.js /recettes/(id de la recette)/edit/ingredients/...
...

articles/

index.js /articles
...

admin/

utilisateurs.js /admin/users/...

...

En bref, un fichier par url principale, comme dans recette, et quand le fichier contient trop de contrôleurs, je subdivise mes sous-url dans un dossier et des sous-fichiers grace à une instance de router de express4 que je "monte" sur l'instance Router de niveau supérieur

Par contre pour idees2menu.fr, qui est une webapp, c'est à dire angular et un serveur node, le nombre contrôleur étant faible (une petite dizaine) puisqu'une grande partie du routage est déporté coté client, tout est dans un seul fichier js.

Cela dépends vraiment du type de projet, et de ça complexité.

Et pour /models, quand dois-je m'en servir ?

euh... demande toi ce que tu met dans le dossier models, et tu as ta réponse

La, je bataille avec Jade et Bootstrap pour arriver à afficher une iframe, et des colonnes, mais rien n'y fait...

fait le en html, puis va sur http://html2jade.org/, et tu verras que ce n'est pas bien sorcier. En gros, jade ce n'est que du html en plus compact...

maintenant tu n'es pas obliger de le faire en jade, libre à toi de revenir à ejs ou autre chose!

[lostsoul]

Ok, merci pour toutes ces explications ;-)

Il faut s'adapter suivant le projet donc, tout simplement. Ca paraît logique.
Et logique aussi pour /models ;-)

Comment vois-tu que c'est un site ou une webapp ? Et quelle est la différence au niveau de la construction et du fonctionnement ?

Je pense rester sur Jade, avec le bien que tu m'en as dit. Faut juste que je trouve mes marques. Et EJS, je ne connais pas beaucoup mieux de toutes façons.

Désolé pour toutes ces questions, sa me vient au fur à mesure.

[xulien]

Comment vois-tu que c'est un site ou une webapp ?

Un indice parmi d'autres, dans http://idees2menu.com, si tu clique sur le nom d'un des auteurs (sous le titre de chaque menus) ou si tu ajoute un filtre, la liste des menus affichés va changer, mais l'url ne bougeras pas, et il n'y aura pas de rechargement de page

Et quelle est la différence au niveau de la construction et du fonctionnement ?

là je te renvoi sur un des tous premiers post de ce fil de discussion

Site web ->
La page est construite dynamiquement coté serveur, qui renvoi le résultat sous forme de HTML au navigateur pour chaque url et à chaque chargement de page.
sans rechargement de page, le client n'est pas informé des modifications éventuelles sur le serveur.

Appli web/Single page ->
Au premier chargement, le navigateur récupère la page HTML principale statique (d'où le single page), et un ensemble de fichiers js qui se charge de construire dynamiquement le contenu coté client. Puis en cas de modification coté client, ce dernier peut interagir avec le serveur via de simple appel ajax.
Pour gérer la partie client, c'est le boulot de framework tel que backbonejs, angularjs, emberjs, etc... l'api coté serveur est géré avec ce que tu veux: nodejs, php, java, ruby, est les (multiples) frameworks qui vont avec.

Désolé pour toutes ces questions, sa me vient au fur à mesure.

Pas de problème, c'est le but du jeu de ce fil

[lostsoul]

Merci pour toutes ces explications.

Oui, je suis retourné sur le début du fil de discution après avoir envoyé ma réponse ;-)

[lostsoul]

J'essaye d'intégrer au code du tuto mon code pour afficher un flux RSS, sur la nouvelle page que j'ai créé, mais je suis un peu perdu.
L'arbo n'est pas exactement la même, j'ai un fichier routes.js qui ne donne que les routes, et un fichier flux.js dans /models qui traite les données pour afficher le flux. Et un fichier .ejs qu'il faudra convertir en JADE.

[xulien]

Quelle est la question?

[lostsoul]

lol Comment ça je ne suis pas clair ;-)

Je ne sais pas trop comment intégrer le code du lecteur RSS dans le code du tuto.
Bon, en le formulant ça m'aidera peut-être.

Voilà le fichier principal du lecteur RSS (ne hurle pas pour les 2 dernières lignes, faut que je comprenne ce que je dois exporter, feedparser me paraitrait logique). Je pense qu'il devrait aller dans le dossier /routes du code du tuto ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
var FeedParser = require('feedparser')
var request = require('request')
var req = request('http://www.slate.fr/rss.xml')
var feedparser = new FeedParser();
 
var items = [];
var meta = {};
 
req.on('error', function (error) {
    // handle any request errors
});
req.on('response', function (res) {
    var stream = this;
 
    if (res.statusCode != 200) return this.emit('error', new Error('Bad status code'));
 
    stream.pipe(feedparser);
});
 
 
feedparser.on('error', function(error) {
    // always handle errors
});
feedparser.on('readable', function() {
    // This is where the action is!
    var stream = this;
    meta = this.meta;
    var item = {};
 
    while (item = stream.read()) {
        items.push(item);
    }
 
});
 
module.exports.items = items;
module.exports.meta = meta;

Mais ensuite ? Il faut que je le modifie pour passer les variables à /views/appli.jade, le fichier qui l'affichera ?

J'espère être plus clair dans mes intérogations ?

[xulien]

Mais ensuite ?

Ensuite, tu importe ton fichier dans un contrôleur qui va ce charger de passer les variables au gestionnaire de template, qui construit la réponse HTML pour le contrôleur, qui enfin renvoi la réponse.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
// routes.js
var flux = require('./models/flux');
(...)
app.get('/lurlquivabien', function(req, res) {
  res.render('monfichierdevue',{flux: flux}); // ou bien décomposé { items: flux.items, meta: flux.meta }
});

p.s:

ne hurle pas pour les 2 dernières lignes

je ne hurlerais pas même si cela me démange
je dirais juste que exports n'est qu'un raccourci pour module.exports. exports = module.exports

[xulien]

Autre aspect, concernant flux.js:


request('http://www.slate.fr/rss.xml') ne sera exécuté qu'une seule fois! Tous les modules sont lu/exécuté/charger qu'au démarrage de l'application, et stocker dans un simple objet en mémoire.

Il te faut donc encapsuler ta requête et son parsage dans une fonction qui sera utilisé dans ton contrôleur. ainsi à chaque requête, c'est toute la fonction qui est à nouveau exécuté et renvoi un résultat à jour.


J'en viens alors au conseil ultime! ne fait jamais de copier-coller si tu ne comprends tous les tenants et aboutissants de chaque lignes de code que tu copie. Plus encore en phase d'apprentissage.

D'autant que le code que l'on trouve dans "Usage" n'est souvent qu'une indication, et à la suite de celui de node-feedparser il y a ceci:

I strongly encourage you to take a look at the iconv example for a very thorough working example.

.

Et même si cela semble plus laborieux, pénible, c'est vraiment le seul moyen de progresser, sinon tu vas buter sur chaque concept que tu rencontreras.

[lostsoul]

Bon, j'ai mis le fichier flux.js dans /routes (avec module.exports = feedparser.

Ensuite, toujours dans /routes, le fichier routes.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
var flux = require('./routes/flux');
 
app.get('/meteo', function(req, res) {
  res.render(meteo',{flux: flux}); // ou bien décomposé { items: flux.items, meta: flux.meta }
});

Et dans ma page jade (qui ne fonctionne pas car sûrement mal convertit de ejs en Jade...) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
.row
             .col-md6
               .well
                  h3
                     span.glyphicon.glyphicon-cloud
                     |  Flux RSS
                       ul
                          for (var i=0; i<#{items.length}; i++) {
                          li a(href="#{items[i].link}") "#{items[i].title}
                          li "#{items[i].author}"
                          li "#{items[i].pubdate}"
                          li "#{items[i].summary}"
                          }

C'est plutôt bon comme ça ?

J'ai vu iconv, mais ça me paraissait plus compliqué, de même pour actualiser le résultat, et comme c'est juste pour tester, je ne suis pas aller plus loin en fait. Et je comprenais mieux l'exemple utilisé dans usage que iconv.


Encore une précision, j'ai ceci pour afficher la météo, dans /routes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
var express = require('express');
var router = express.Router();
var marked = require('marked');
var emphasis = require('emphasis').normalize;
 
router.get('/', function (req, res) {
    var openWeatherMapURL = 'http://api.openweathermap.org/data/2.5/weather?q=Bourges,France&lang=fr&units=metric';
    require('request').get(openWeatherMapURL, function (err, response, body) {
        if (err) throw err;
        if (!err && response.statusCode == 200) {
 
            var info = JSON.parse(body);
            res.render('meteo', {
                info: info
            });
 
        }
    });
});
 
module.exports = router;

Est-ce que je devrais le couper en 2 pour avoir ce qui gère la route dans le fichier /routes/routes.js, comme pour le flux rss ?

[xulien]

Bon, j'ai mis le fichier flux.js dans /routes .

Pourquoi? flux.js n'est pas un controlleur, elle ne gére pas un comportement en fonction d'une url.

(avec module.exports = feedparser

Pourquoi feedparser?!

J'ai vu iconv, mais ça me paraissait plus compliqué, de même pour actualiser le résultat, et comme c'est juste pour tester, je ne suis pas aller plus loin en fait. Et je comprenais mieux l'exemple utilisé dans usage que iconv.

Ce qui est intéressant dans l’exemple sur iconv, c'est la fonction fetch. Tout le traitement est contenu dedans et c'est elle que tu exporte et qui sera exécuté par la route.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
var FeedParser = require('feedparser')
var request = require('request')
var feedparser = new FeedParser();
 
function fetch(url, callback) {
  var items = [];
 
  var req = request(url);
 
  req.on('error', function (error) {
      return callback(new Error('Erreur lors de la récupération du flux'));
  });
 
  req.on('response', function (res) {
      var stream = this;
 
      if (res.statusCode != 200) return this.emit('error', new Error('Bad status code'));
 
      stream.pipe(feedparser);
  });
 
  feedparser.on('error', function(error) {
      return callback(new Error('Erreur lors du parsage du flux'));
  });
 
  feedparser.on('readable', function() {
 
      var stream = this;
      var item = {};
 
      while (item = stream.read()) {
          items.push(item);
      }
 
      callback(items);
 
  });
}
 
module.exports = fetch;

et tu l'utilise comme ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
var flux = require('./routes/flux');
 
app.get('/meteo', function(req, res) {

    flux('http://www.slate.fr/rss.xml', function(err, items) {
       res.render(meteo',{flux: items}); 
    })
});

Pour ton fichier jade:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.row
    .col-md6
        .well
            h3
                span.glyphicon.glyphicon-cloud
                |  Flux RSS
                ul
                    for i in items
                        li
                            a(href="#{items[i].link}") #{items[i].title}
                        li #{items[i].author}
                        li #{items[i].pubdate}
                        li #{items[i].summary}

Est-ce que je devrais le couper en 2 pour avoir ce qui gère la route dans le fichier /routes/routes.js, comme pour le flux rss ?

Oui, ce serais plus propre/modulaire.

Question subsidiaire, que ce passe t'il dans cette route si openweathermap.org te renvoi une erreur de type 500 (erreur de leur serveur) ou même 301/302 (redirection suite à modification de leur api)?

[lostsoul]

En fait, je ne savais pas trop ou le mettre. Ce n'est pas un models,ni une views.

Feedpassrer, ça me paraissait logique, puisque exports sert à exporter une fonction pour qu'on y accède depuis d'autres fichiers. Comme j'ai besoin des variables utilisées dans feedparser, j'ai pensé que c'est lui qu'il fallait exporter. J'ai tout faux ?

Ok, je vais voir fetch alors.

La route avec fetch ? Les erreurs sont détectées, gérées et un message est affiché :
Erreur lors du parsage du flux
Bad status code

Chose qu'il faudra implémenter dans le code du tuto.

[xulien]

En fait, je ne savais pas trop ou le mettre. Ce n'est pas un models,ni une views.

C'est plutôt ce qu'on appel un service, tu peux donc créer un nouveau dossier service ou un autre nom qui te parait plus pertinent pour désigner un bout de fonction qui fait un traitement de façon indépendante de la logique du framework.

Feedpassrer, ça me paraissait logique, puisque exports sert à exporter une fonction pour qu'on y accède depuis d'autres fichiers. Comme j'ai besoin des variables utilisées dans feedparser, j'ai pensé que c'est lui qu'il fallait exporter. J'ai tout faux ?

Tu n'as pas besoin des variables utilisées dans feedparser, tu as besoin du résultat du traitement de la fonction feedparser. D'ailleurs, flux.js ne fait pas que ça; elle récupère le flux avec request, le traite avec feedparser pour créer un objet JavaScript exploitable contenant les informations du flux rss, et c'est ça qui t’intéresse. C'est donc l'ensemble du traitement que l'on met dans la fonction fetch que l'on exporte.

Ok, je vais voir fetch alors.

Attention, fetch n'est pas une fonction particulière, c'est juste un nom que l'on a donné à la fonction qui contient les opérations permettant d'obtenir notre objet js contenant le flux à partir d'une url. Tu peux donc l'appeler comme tu le souhaite.

Et pour lever toutes ambiguïté, remplaçons fetch par «rapporter» par exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
var FeedParser = require('feedparser')
var request = require('request')
var feedparser = new FeedParser();
 
function rapporter(url, callback) {
  var items = [];
 
  var req = request(url);
 
  req.on('error', function (error) {
      return callback(new Error('Erreur lors de la récupération du flux'));
  });
 
  req.on('response', function (res) {
      var stream = this;
 
      if (res.statusCode != 200) return this.emit('error', new Error('Bad status code'));
 
      stream.pipe(feedparser);
  });
 
  feedparser.on('error', function(error) {
      return callback(new Error('Erreur lors du parsage du flux'));
  });
 
  feedparser.on('readable', function() {
 
      var stream = this;
      var item = {};
 
      while (item = stream.read()) {
          items.push(item);
      }
 
      callback(items);
 
  });
}
 
module.exports = rapporter;

La route avec fetch ? Les erreurs sont détectées, gérées et un message est affiché :
Erreur lors du parsage du flux
Bad status code

euuuhh.... ah bha oui

d'ailleurs, il y a un oubli dans mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
(...)
      while (item = stream.read()) {
          items.push(item);
      }
 
      callback(err, items);
(...)

Chose qu'il faudra implémenter dans le code du tuto.

c'est prévu, mais pas tout de suite car y'a plein de truc à en dire

[lostsoul]

J'ai créé un dossier /services avec flux.js dedans, finissant par :
module.exports = stream;
J'ai bon la ? C'est bien la-dedans qu'il y a le flux et les objets que l'on veut ?

Oui, faudra gérer les erreurs par la suite.

[xulien]

J'ai bon la ? C'est bien la-dedans qu'il y a le flux et les objets que l'on veut ?

est-ce que tu obtient ton objet avec le contenu de ton flux rss?

[lostsoul]

Je n'obtient rien, j'ai une erreur dans la syntaxe JADE du fichier...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
extends ./layout
 
block body
 
 
      .container
        | Bienvenue chez vous ;-)
 
      .row
             .col-md6
               .well
                  h3
 
                     |  Heure
                        script(type='text/javascript').
                        window.onload=function() {
                        horloge('div_horloge');
                        };
                        function horloge(el) {
                        if(typeof el=="string") { el = document.getElementById(el); }
                        function actualiser() {
                        var date = new Date();
                        var dateString = date.toLocaleDateString() + " " +
                        date.toLocaleTimeString();
                        var dateLoc = document.getElementById(el);
                        var str = (date.getHours()<10?'0':'')+date.getHours();
                        str += ':'+(date.getMinutes()<10?'0':'')+date.getMinutes();
                        str += ':'+(date.getSeconds()<10?'0':'')+date.getSeconds();
                        el.innerHTML = dateString;
                        }
                        actualiser();
                        setInterval(actualiser,1000);
                        }
 
           .row
             .col-md6
               .well
                  h3
                     span.glyphicon.glyphicon-cloud
                     |  Flux RSS
                       ul
                          for (var i=0; i<#{items.length}; i++) {
                          li a(href="#{items[i].link}") "#{items[i].title}
                          li "#{items[i].author}"
                          li "#{items[i].pubdate}"
                          li "#{items[i].summary}"
                          }

[xulien]

j'ai une erreur dans la syntaxe JADE

Passe à ejs, sinon cela fais trop d'un coup.

Je n'obtient rien

Ton module. tu dois pouvoir le tester indépendamment du framework, par exemple dans un fichier quelconque:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
// testRapide.js
var flux = require('./flux');
 
flux('http://www.slate.fr/rss.xml', function(err, items) {   
       console.log(items);
});

et tu l'execute en faisant un simple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

node testRapide.js

et le résultat doit s'afficher dans ta console. D'où ma question initiale, obtient tu le contenu de ton flux rss?

[lostsoul]

Oui, je crois, vais reconvertir tout ça en ejs.

J'ai ça...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
module.exports = stream;
                 ^
ReferenceError: stream is not defined

[xulien]

J'ai ça...

Et qu'en déduis tu? (c'est un problème de base en JavaScript)

ps: pour info, le module flux.js, je te l'ai écris tout cuit dans les posts #51 et #53... là je ne peux pas faire plus simple!

[lostsoul]

J'en déduis que je ne suis pas doué... Tu m'avais bien montré dans les posts 51 et 53 comment ça fonctionnait et ce qu'il fallait exporter (le résultat de la fonction fetch).

Mon fichier flux.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
var FeedParser = require('feedparser')
var request = require('request')
var feedparser = new FeedParser();
 
function fetch(url, callback) {
  var items = [];
 
  var req = request(url);
 
  req.on('error', function (error) {
      return callback(new Error('Erreur lors de la récupération du flux'));
  });
 
  req.on('response', function (res) {
      var stream = this;
 
      if (res.statusCode != 200) return this.emit('error', new Error('Bad status code'));
 
      stream.pipe(feedparser);
  });
 
  feedparser.on('error', function(error) {
      return callback(new Error('Erreur lors du parsage du flux'));
  });
 
  feedparser.on('readable', function() {
 
      var stream = this;
      var item = {};
 
      while (item = stream.read()) {
          items.push(item);
      }
 
      callback(items);
 
  });
}
 
module.exports = fetch;

Et testRapide.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
var express = require("express");
var flux = require('./flux');
var app = express();
 
app.get('/', function(req, res) {
 
    flux('http://www.slate.fr/rss.xml', function(err, items) {
       res.render('/',{flux: items}); 
    })
});

Et je n'ai rien qui s'affiche en console, le programme se coupe tout seul. Sans message d'erreur.

Je me décourage un peu là, j'ai vraiment l'impression de pas être doué du tout.......