Partage
  • Partager sur Facebook
  • Partager sur Twitter

Passez au Full stack avec Node.js, Express et....

Quiz : Savez-vous implémenter le CRUD ?

1 décembre 2019 à 18:58:51

Bonjour.

Je suis bloqué au quizz sur l'implémentation du CRUD (quizz à la fin de la parti2).

J'ai recopié le dépot git dans un répertoire frontend. Dans le répertoire frontend, j'ai lancé la commande npm install.

Mais quand je lance la commande npm start, j'ai l'erreur suivante :

  • 20 error code ELIFECYCLE
  • 21 error errno 1
  • 22 error go-fullstack-fr-activity@1.0.0 start: `concurrently "node ./node_modules/.bin/http-server -a localhost -p 8081"  "sleep 1 && open http://localhost:8081"`
  • 22 error Exit status 1
  • 23 error Failed at the go-fullstack-fr-activity@1.0.0 start script.
  • 23 error This is probably not a problem with npm. There is likely additional logging output above.

Quel est le problème ?

Merci d'avance.

  • Partager sur Facebook
  • Partager sur Twitter
1 décembre 2019 à 21:20:00

Bonjour,

Généralement pour trouver une solution à ce genre de problèmes il faut copier-coller le messager d'erreur dans Google.

 https://stackoverflow.com/questions/42308879/npm-err-code-elifecycle

  • Partager sur Facebook
  • Partager sur Twitter
"Ils ne savaient pas que c'était impossible, alors ils l'ont fait" Mark Twain
2 décembre 2019 à 21:52:47

J'ai essayé les différentes tentatives de suppression de fichiers/dossiers puis réinstall (comme indiqué sur stackoverflow) mais sans succès.

Avec la commande npm start, j'ai la log suivante :

  • PS C:\Users\Jérome\Desktop\formations\test-fullstack\test\frontend> npm start

    > go-fullstack-fr-activity@1.0.0 start C:\Users\Jérome\Desktop\formations\test-fullstack\test\frontend
    > concurrently "node ./node_modules/.bin/http-server -a localhost -p 8081"  "sleep 1 && open http://localhost:8081"

    [1] 'sleep' n'est pas reconnu en tant que commande interne
    [1] ou externe, un programme ex�cutable ou un fichier de commandes.
    [1] sleep 1 && open http://localhost:8081 exited with code 1
    [0] C:\Users\Jérome\Desktop\formations\test-fullstack\test\frontend\node_modules\.bin\http-server:2
    [0] basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
    [0]           ^^^^^^^
    [0]
    [0] SyntaxError: missing ) after argument list
    [0]     at wrapSafe (internal/modules/cjs/loader.js:1043:16)
    [0]     at Module._compile (internal/modules/cjs/loader.js:1091:27

J'ai modifier le fichier package.json pour directement utiliser http-server (sans passer par le .bin) :

"scripts": {
    "start": "concurrently \"node ./node_modules/http-server/bin/http-server -a localhost -p 8081\"  \"sleep 1 && open http://localhost:8081\""
  },

A présent le serveur se lance sur le port 8081 mais j'ai une page d'erreur avec le message :

  • "Le site à l’adresse http://localhost:8081/ a subi une violation de protocole réseau qui ne peut pas être corrigée."

Je suis sous windows 10, est-ce que quelqu'un a réussi à passer ce quiz ?

Merci.

  • Partager sur Facebook
  • Partager sur Twitter
4 décembre 2019 à 16:43:40

Bonjour jeromemahoudeau

Je ne suis pas sur qu'il faille recopier le depot ds un dossier nommé frontend. Ce n'est pas dans l'énoncé.

J'ai recrée tous les elements dans ce  dossier (app.js, server.js, crée un model) et cela ne marche pas aussi. J'ai cree une bd sur MongoDB.

mais pas modifié la commande car elle lance tout ensemble le node  et le localhost avec 'concurrently'

Je pense qu'il manque une info…

moi j'ai :    '"POST /api/products" Error (404): "Not found"'

en fait on ne sait pas si il faut passer creer un produit ou  si comme pour thing on retourne ce que le form a comme donnée soit :

 const product = new Product({        
        name: "toto",
        description: "ma description",
        price: 20,
        inStock: false
    });


const product = new Product({  
       name: req.body.name,
        description: req.body.description,
        price: req.body.price,
        inStock: req.body.inStock 
    });


merci pour votre idée ;-)

Cordialement

-
Edité par lvdesign 4 décembre 2019 à 17:20:01

  • Partager sur Facebook
  • Partager sur Twitter
6 décembre 2019 à 0:34:55

Bonjour,

J'ai aussi la même erreur avec le sleep, etc. Mais je suis passé par le serveur interne de PHP qui marche :

 php -S localhost:8081



  • Partager sur Facebook
  • Partager sur Twitter
10 décembre 2019 à 16:19:56

Bonjour.

Finalement j'ai réussi à démarrer le front en modifiant la ligne start ainsi :

"scripts": {
    "start": "node ./node_modules/http-server/bin/http-server -a localhost -p 8081"
  },

J'accède ensuite directement à http://localhost:8081/index.html pour avoir la même page que celle indiqué par le cours.

@lvdesign : j'ai eu aussi ce type d'erreur 404, il faut créer les bonnes routes.

  • Partager sur Facebook
  • Partager sur Twitter
10 décembre 2019 à 18:26:11

Bonjour,

il faut donc bien créer un dossier backend et considerer le dossier récuperé comme le FrontEnd et ensuite adapter les endpoints à Product. Peut-être la jungle de tarzan ;-)

Vraiment dommage que la solution ne soit pas donnée pour progresser dans le bon sens.

Bonne suite à tous :magicien:

-
Edité par lvdesign 14 décembre 2019 à 22:40:32

  • Partager sur Facebook
  • Partager sur Twitter
14 décembre 2019 à 9:57:21

Moi j'ai plutôt une erreur de ce genre  ERROR: Product found when GETting individual product is not correct!  

alors que ma route GET:/api/products/:id est bien implementée.

Quelqu'un peut m'aider svp! Merci d'avance.

  • Partager sur Facebook
  • Partager sur Twitter
17 décembre 2019 à 5:20:22

Bonjour,

J'imagine que ton insertion marche. On pourrait avoir le code de ta route app.get('api/products/:id') pour t'aider ?

-
Edité par Leyzou 17 décembre 2019 à 5:21:07

  • Partager sur Facebook
  • Partager sur Twitter
18 décembre 2019 à 11:20:46

Leyzou a écrit:

Bonjour,

J'imagine que ton insertion marche. On pourrait avoir le code de ta route app.get('api/products/:id') pour t'aider ?

-
Edité par Leyzou hier à 5:21

Merci Leyzou, voici le code de ma route app.get('api/products/:id') ci-dessous.

app.get('/api/products/:id', (req, res, next) => {
Product.findOne({_id: req.params.id})
.then(product => res.status(200).json({product}))
.catch(error => res.status(404).json({error}));
});


  • Partager sur Facebook
  • Partager sur Twitter
18 décembre 2019 à 11:32:26

PaulinKonanKouakou a écrit:

Leyzou a écrit:

Bonjour,

J'imagine que ton insertion marche. On pourrait avoir le code de ta route app.get('api/products/:id') pour t'aider ?

-
Edité par Leyzou hier à 5:21

Merci Leyzou, voici le code de ma route app.get('api/products/:id') ci-dessous.

app.get('/api/products/:id', (req, res, next) => {
Product.findOne({_id: req.params.id})
.then(product => res.status(200).json({product}))
.catch(error => res.status(404).json({error}));
});



Bonjour.

Dans la consigne de l'exercice, on indique :

GET:/api/products/:id
Retournera le produit avec le_id fourni sous la forme { product: Product }

Tu retournes {product} ce qui est différent.

  • Partager sur Facebook
  • Partager sur Twitter
20 décembre 2019 à 8:02:32

jeromemahoudeau a écrit:

PaulinKonanKouakou a écrit:

Leyzou a écrit:

Bonjour,

J'imagine que ton insertion marche. On pourrait avoir le code de ta route app.get('api/products/:id') pour t'aider ?

-
Edité par Leyzou hier à 5:21

Merci Leyzou, voici le code de ma route app.get('api/products/:id') ci-dessous.

app.get('/api/products/:id', (req, res, next) => {
Product.findOne({_id: req.params.id})
.then(product => res.status(200).json({product}))
.catch(error => res.status(404).json({error}));
});



Bonjour.

Dans la consigne de l'exercice, on indique :

GET:/api/products/:id
Retournera le produit avec le_id fourni sous la forme { product: Product }

Tu retournes {product} ce qui est différent.

Bonjour,

Merci pour ta réponse, en fait mon erreur était plutôt au niveau du nommage des attributs de mon model "produit" j'avais mis 'instock' au lieu de 'inStock' sinon mon middleware était correct. merci



  • Partager sur Facebook
  • Partager sur Twitter
12 février 2020 à 17:47:42

Bonjour,

QQ1 peut-il svp nous envoyer son code fonctionnel ?

Je galère vraiment et j'aimerais bien comprendre mon erreur avant de passer au chapitre suivant.

Merci.

Laurent

  • Partager sur Facebook
  • Partager sur Twitter
20 février 2020 à 19:36:14

Bonjour Laurent,

Je me suis replongé dans ce cour après avoir fait celui de Wes Bos (https://learnnode.com/) et il n'y a pas de photo de gorille…:D

Franchement, je ne suis pas sur que cette activité fonctionne. Donnez nous la preuve avec un corrigé !

Cordialement et bon courage

  • Partager sur Facebook
  • Partager sur Twitter
1 mars 2020 à 16:00:26

Qui peut me fournir un corrigé . J'ai une erreur : ERROR: Could not create new product! 

pourtant je suis sur que on code est correct, toute mes routes marchent sur postman

-
Edité par CharlesNoumangue 1 mars 2020 à 16:16:04

  • Partager sur Facebook
  • Partager sur Twitter
9 mars 2020 à 13:48:01

Idem chez moi (Could not create new product). Pour arriver à débogguer en profondeur, je vous conseille :

1) de lancer le serveur de la façon suivante :

DEBUG=express:* nodemon server

On obtient dans la console de débogage, différents messages importants

express:router dispatching OPTIONS /api/products

2) de mettre des traces dans vos appels de route, par exemple :

app.options('/api/products', (req, res, next) => {
  console.log("OPTIONS /api/products");
...

3) de vous appuyer sur les outils de développement de vos navigateurs (chrome ou firefox) qui vous permettent de faire et voir énormément de choses.

-
Edité par Tanin69 9 mars 2020 à 16:42:05

  • Partager sur Facebook
  • Partager sur Twitter
12 mars 2020 à 12:57:29

Bonjour tout le monde,

Pour ma part je bloque sur la "liste" des produits : ERROR: Could not GET all products!

hors mon get passe bien et il a l'air d'envoyer quelque chose de cohérent...

quelqu'un a eu ce problème? merci d'avance...

Edit :

GET: /api/products
Retournera tous les produits sous la forme{ products: Product[] }

je retournais {product}... ok mais maintenant j'ai une erreur dans mon app.js

/mnt/d/Users/*****/Mes_projets/oc eval/api/app.js:26
    .then(product => res.status(200).json({product: Product[]}))
                                                            ^

SyntaxError: Unexpected token ']'

c'est pire que mon {product} qui envoyait bien un tableau d'objets.....

Edit (bis) : je regrette qu'on aie pas un frontend qui ne teste pas séparément les différents middleware car j'aurais bien aimé voir si le reste de mon programme fonctionne... et ça donne un peu l'impression " si on bloque sur un point => on ne sait rien faire.... "

Edit (ter) :

Ok ..... mes deux méthodes GET m'em....nuyaient !!!

En fait (enfin pour moi ça marche comme ça et c'est capillotracté), il faut reformater les objets via une fonction...

Ce que j'entend par reformater :

function getAllProduct(paramProduct) {
  products={};
  products.products = paramProduct;
  return products
}

function getOneProduct(paramProduct) {
  product={};
  product.product = paramProduct;
  return product
}

Après on appel la fonction à la place de {product} (accolades comprises) en mettant en paramètre product... Et voila!

c'est une solution détourné.... capillotracté.... mais une solution !

-
Edité par Manuel CQE 12 mars 2020 à 20:46:53

  • Partager sur Facebook
  • Partager sur Twitter

L’éternel débutant...

8 avril 2020 à 0:23:12

Voilà le code de mes routes, tout fonctionne :

app.post('/api/products', (req, res, next) => {
  const product = new Product({
    ...req.body
  });
  product.save()
    .then(() => res.status(201).json({ product }))
    .catch(error => res.status(400).json({ error }));
});

app.get('/api/products/:id', (req, res, next) => {
  Product.findOne({ _id: req.params.id })
    .then(product => res.status(200).json({ product }))
    .catch(error => res.status(404).json({ error }));
});

app.put('/api/products/:id', (req, res, next) => {
  Product.updateOne({ _id: req.params.id }, { ...req.body, _id: req.params.id })
    .then(() => res.status(200).json({ message: 'Objet modifié !'}))
    .catch(error => res.status(400).json({ error }));
});

app.delete('/api/products/:id', (req, res, next) => {
  Product.deleteOne({ _id: req.params.id })
    .then(() => res.status(200).json({ message: 'Deleted !'}))
    .catch(error => res.status(400).json({ error }));
});

app.get('/api/products', (req, res, next) => {
    Product.find()
      .then(products => res.status(200).json({ products }))
      .catch(error => res.status(400).json({ error }));
});

Un petit message au créateur de ce cours si jamais il passe par là, le CRUD n'est pas totalement implémenté dans la version finale de l'application à la fin du cours, en effet l'ancienne image n'est pas supprimée lors de la modification de l'image (route PUT). J'imagine que ça peut constituer un bon exercice pour aller plus loin sur ce cours, en tout cas je compte bien y arriver ^^

-
Edité par Seize D 8 avril 2020 à 23:38:42

  • Partager sur Facebook
  • Partager sur Twitter
8 avril 2020 à 10:47:41

Seize D a écrit:

Voilà le code de mes routes, tout fonctionne :

    .then(product => res.status(200).json({ product })) 

Edité par Seize D il y a environ 9 heures


:waw: Sérieux ? tu n'a pas eu de problème avec { products: Product[] } ? (ou alors il y a eu une petite modif sur l'application a télécharger depuis mon dernier post...)

Ps : tu aurais pu recadrer l'image tu spoile la réponse... (quoique ton poste entier est un spoil vu qu'on peut faire un copié collé "vite fais, ni vu, ni connu" de ton code...).

Ça sent pour le créateur de l'appli et du quiz une révision du code.:p

-
Edité par Manuel CQE 8 avril 2020 à 10:59:08

  • Partager sur Facebook
  • Partager sur Twitter

L’éternel débutant...

8 avril 2020 à 15:47:59

Merci Seize D pour la solution.

Franchement vous avez eu beaucoup de courage pour terminer ce projet.

:magicien:

-
Edité par lvdesign 8 avril 2020 à 15:48:28

  • Partager sur Facebook
  • Partager sur Twitter
8 avril 2020 à 23:26:26

L'application demande à ce que la route GET all products retourne products au pluriel :

.then(products => res.status(200).json({ products }))

alors que la route GET individual product doit retourner product au singulier :

.then(product => res.status(200).json({ product }))

C'est ce qui m'a causé problème et qui semble causer problème à beaucoup de monde ^^

Pour ce qui est du spoil, je ne sais pas quelles sont les règles du forum à ce sujet ?
J'imagine qu'il vaut mieux que la réponse soit accessible, surtout pour une histoire de singulier/pluriel :-°

Tu as raison en tout cas, je vais cacher le mot secret qui n'est pas utile.

-
Edité par Seize D 8 avril 2020 à 23:36:28

  • Partager sur Facebook
  • Partager sur Twitter
19 avril 2020 à 22:51:44

Hello, merci vous vos réponses je bloquais aussi.

Mon problème était sur le 

.then(products => res.status(200).json({ products }))

que j'écrivais

.then(products => res.status(200).json(products))


donc sans les {}.

C'était comme ça pour things, je pensais donc que ça allait fonctionner. Quelqu'un saurait expliquer la diff et pourquoi pour "things" ça fonctionne et pas pour "products" ?

Merci

  • Partager sur Facebook
  • Partager sur Twitter
4 mai 2020 à 12:40:45

Désolé je répond un peu tard, c'est simplement parce que l'application demande à ce que le résultat soit retourné au sein d'un objet, j'imagine que ça doit être une bonne pratique, en tout cas l'auteur de ce cours semble avoir cette habitude. Pour voir la différence tu peux faire une requête à ton API dans ton navigateur et regarder à quoi ressemble la réponse. J'aimerais faire une réponse plus détaillée mais j'ai supprimé les fichiers du cours ^^
  • Partager sur Facebook
  • Partager sur Twitter
20 août 2020 à 14:11:31

Salut

Je viens vers vous car je galère aussi pour cet exercice, mais c'est purement architectural. 

J'ai créé un dossier nommer quiz-2
Je clone l'exercice avec git et j'obtient le dossier fullstack-activity a l'interieur
a partir de la je suis perdu .... 

Dois je créer une nouveau cluster sur mongoDb ou utiliser la même API que j'ai créer pour les cours précédents. 
( mongoDb me dis que j'ai le droit a un seul cluster gratuit ).

Ensuite dois je placer fullstack-activity dans un dossier frontend. 
Et dois je créer un dossier backend au même niveau que frontend. 

Ou dois je seulement créer un dossier backend au même niveau que le dossier fullstack-activity sans créer de dossier front end ? 

Si j'ai bien compris le but de l'exercice c'est ce de créer un fichier app.js, server.js et un dossier models avec thing.js ?

Puis on ouvre le front on clique sur test route est si tout est ok on a la réponse ? 


  • Partager sur Facebook
  • Partager sur Twitter

Seul on va plus vite, ensemble on va plus loin. 'KawaBunga'

25 août 2020 à 17:02:56

Hello,

Pour ma part je n'ai pas créé de nouveau cluster, mais utilisé le même que pour le cours.

Ensuite j'ai renommé le dossier téléchargé sur github "frontend" et créé un second dossier "backend" (comme le professeur à fait dans les cours précédents).

On doit bien créer les fichiers app.js, server.js et Product.js viens remplacer Thing.js.

En rentrant le code "npm start" sur  ton dossier frontend depuis le terminale tu devrais voir la page apparaître sur ton navigateur.

 Reste à lancer les tests. 

  • Partager sur Facebook
  • Partager sur Twitter
25 août 2020 à 18:53:33

Salut Nathan

Merci pour l'éclairage, pourquoi as tu un dossier dist dans ton dossier models ?
  • Partager sur Facebook
  • Partager sur Twitter

Seul on va plus vite, ensemble on va plus loin. 'KawaBunga'

26 août 2020 à 15:02:05

Yo :)!

A vrai dire je ne sais pas. En tout cas aucun problème dû à ces dossiers.

Je vais demander à mon mentor lors de ma cession avec elle. 

  • Partager sur Facebook
  • Partager sur Twitter
20 septembre 2020 à 18:32:35

J'ai moi aussi un peu galéré pour arriver au bout de cette activité, car tout n'est pas expliqué. Mais en fait, c'est parce que c'est tellement obvious ! Sauf sur un point, mais je vais vous expliquer.

Pour commencer, il faut cloner le repo git dans un dossier vierge. Ce qui va créer un dossier fullstack-activity, qui est équivalent au dossier frontend de l'exercice précédent. Vous pouvez donc le renommer frontend pour plus de clarté.

Ensuite, déplacez-vous via le terminal dans ce dossier, et installer les dépendances :

npm install

Moi perso, j'ai eu un warning donc j'ai rajouté cette commande comme suggéré

npm audit fix

Ensuite réalisez les commandes telles qu'indiquées dans le quizz, c'est-à-dire 

npm init

puis

npm start

Cela devrait ouvrir la page web de l'appli.

Ensuite, créez un dossier backend à côté du dossier frontend, déplacez-vous dedans via le terminal, et lancez toutes les commandes qui ont été réalisées depuis le début du cours dans ce dossier. Bon je veux bien les repréciser parce que je suis sympa ^^

Initialisez le projet

npm init

Comme auparavant, saisissez les options par défaut, sauf pour le point d'entrée qui doit être server.js

Par contre, pas besoin de git init ni de créer un .gitignore.

Installez nodemon (bien que cela soit sans-doute facultatif)

npm install -g nodemon

Installez express

npm install --save express

Installez body-parser

npm install --save body-parser

Installez mongoose

npm install --save mongoose

Et enfin démarrez le serveur

nodemon server

Pas besoin de reconfigurer une base de donnée MongoDB, on utilise la même que lors du cours. Rien à faire de ce côté donc.

Dans le dossier backend, n'oubliez pas de créer les fichiers app.jsserver.js et le dossier models qui contiendra le fichier product.js

Pour tout ce qui est code, je vous laisse vous débrouiller, il y a suffisamment d'aide dans les posts précédents.

La seule difficulté est la partie de retour des fonctions. Il faut effectivement écrire comme indiqué par le professeur :

.json({product})

Les accolades sont nécessaires.

Bon courage à tous !

  • Partager sur Facebook
  • Partager sur Twitter
4 novembre 2020 à 15:56:15

J'ai bien suivi les recommandations du quiz et c'est ça qui posait problème en réalité!!

En ayant tout bien suivi comme il faut, lorsque je cliquais sur "Testroutes", ça bloquait lorsque le GET allait chercher un élément, un product. Le problème c'est que dans le middileware GET et findOne(), comme réponse à renvoyer je tapais :

.then(product => res.status(200).json({product : Product[]}))



Premièrement, l'éditeur de code vous signale une erreur et nodemon server ne se lance pas tant que vous n'avez pas corrigé l'erreur. J'ai donc essayé ça :

.then(product => res.status(200).json({product : Product}))



Là il n'y avait plus d'erreur, mais ça ne marchait toujours pas. J'ai enfin essayé ça:

.then(product => res.status(200).json({product}))



Et avec ça, ça marche!

-
Edité par Raphael_C 5 novembre 2020 à 7:44:13

  • Partager sur Facebook
  • Partager sur Twitter

« Ce n'est pas le plus fort de l'espèce qui survit, ni le plus intelligent. C'est celui qui sait le mieux s'adapter au changement » ! Charles Darwin.

6 novembre 2020 à 15:56:42

Bonjour à tous, j'y vais de mon petit problème perso...

Mon APi fonctionne pour tous sauf pour la route PUT. Je ne comprends absolument pas pourquoi :

app.put('/api/products/:id', (req, res, next) => {
    Product.updateOne({ _id: req.params.id }, { ...req.body, _id: req.params.id })
      .then(() => res.status(200).json({ message: 'Modified!'}))
      .catch(error => res.status(400).json({ error }));
  });


j'ai le simple message d'erreur sur le frontend me disant que ça ne fonctionne pas et que je dois implémenter utiliser une route PUT...

-
Edité par QuRO 6 novembre 2020 à 15:57:28

  • Partager sur Facebook
  • Partager sur Twitter