> 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 ?
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.
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
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 !
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
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.
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.
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" ?
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
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 ?
Seul on va plus vite, ensemble on va plus loin. 'KawaBunga'
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.
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.js, server.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 :
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 :
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 :
L’éternel débutant...
L’éternel débutant...
Seul on va plus vite, ensemble on va plus loin. 'KawaBunga'
Seul on va plus vite, ensemble on va plus loin. 'KawaBunga'
« 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.