Joan: /* Proves dels endpoints de la REST API */

2021-05-01T21:44:58Z

Proves dels endpoints de la REST API

Joan: /* Possibles errors/problemes que us podeu trobar */

2019-04-30T17:31:54Z

Possibles errors/problemes que us podeu trobar

Pàgina nova

=Introducció=
[[Fitxer:Article-201018060704.png|thumbnail]]
Crearem una aplicació web amb el framework de Angular 7. És una aplicació que mostra la funcionalitat bàsica CRUD (''create, read, update, delete'') sobre una llista de productes que tindrem implementada en una base de dades MongoDB.

El més interessant d'aquesta pràctica, a part d'implemntar un exemple concret de Angular, és que crea i utilitza una REST API d'una forma ràpida i eficient utilitzant també les tecnologies més actuals.

De cara al projecte de síntesi que realitzaràs en les properes setmanes seria una bona idea implementar també una REST API, i en aquesta pràctica en tens un bon exemple.

És important per aquesta pràctica tenir actualitzat a les últimes versions el Node, Angular i npm.

=Referències=
Seguirem aquests dos tutorials:

How to Create REST API Easily using Node.js, Express.js, Mongoose.js and MongoDB
*https://www.djamware.com/post/58a91cdf80aca748640ce353/how-to-create-rest-api-easily-using-nodejs-expressjs-mongoosejs-and-mongodb

Angular 7 Tutorial: Building CRUD Web Application
*https://www.djamware.com/post/5bca67d780aca7466989441f/angular-7-tutorial-building-crud-web-application

El primer tutorial crea la REST API per accedir a la BD de MongoDB des de http. Fins que no hagis finalitzat aquest tutorial no podràs continuar amb el següent, que és pròpiament el tutorial de Angular.

Per tal de poder seguir els dos tutorials és important tenir ben actualitzats el ''node'', ''npm'' i el ''angular''. Per exemple, per actualitzar ha funcionat en Ubuntu 18.04:
<pre>
sudo apt-get remove nodejs ^node-* nodejs-*
sudo apt-get autoremove
sudo apt-get clean
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install nodejs
curl https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | sh
</pre>

=Instal·lar la REST API (Node.js, Express.js, Mongoose.js, MongoDB)=
*https://www.djamware.com/post/58a91cdf80aca748640ce353/how-to-create-rest-api-easily-using-nodejs-expressjs-mongoosejs-and-mongodb

Aquesta REST API utilitza diferents tecnologies:

'''Què és mongoose?'''
Elegant mongodb object modeling for node.js. Es fa servir mongoose per tal de connectar-nos a MongoDB.

'''Què és Express.js?'''

Fast, unopinionated, minimalist web framework for Node.js. Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

==Proves dels endpoints de la REST API==
*https://www.djamware.com/post/5bca67d780aca7466989441f/angular-7-tutorial-building-crud-web-application

La Rest Api està basada en teconologia Node.

Tria la carpeta on instal·laràs la Rest Api. Pot ser una carpeta paral·lela a la carpeta on instal·laràs el projecte Angular. Per exemple, per al professor:
<pre>
$ cd ~/M06_WEC_1819/PHP/UF2/node-rest-api
$ npm start

> node-rest-api@0.0.0 start /home/joan/M06_WEC_1819/PHP/UF2/node-rest-api
> node ./bin/www

connection succesful
</pre>
Amb '''npm start''' arrenquem el nostre API REST pel port 3000. Hem de veure que la connexió és ''successful'', que vol dir que tenim una bona connexió al MongoDB a través de ''Mongoose''.

Quan fem '''npm start''' el que estem fent és executar el script que hi ha definit en el fitxer ''package.json'':
<pre>
"scripts": {
"start": "node ./bin/www"
},
</pre>
Si ens fixem, el script ''./bin/www'' és un servidor web fet amb node que escolta pel port 3000.

Podem comprovar que funciona la REST API, amb la url en el navegador:
*localhost:3000

Per provar els endpopints de la Rest API farem servir '''curl''' des de la consola.

Per afegir un nou producte (fem servir POST):
<pre>
$ curl -i -H "Accept: application/json" lX POST -H "Content-Type: application/json" -d '{ "prod_name":"GBA","prod_desc":"Game Boy Advance 1994","prod_price": 88 }' localhost:3000/products
</pre>
Per visualitzar tots els productes:
<pre>
$ curl -i -H "Accept: application/json" localhost:3000/products
</pre>
Per visualitzar el producte amb id=5cbf295b75e0a91fd03740db:
<pre>
$ curl -i -H "Accept: application/json" localhost:3000/products/5cbf295b75e0a91fd03740db
</pre>
Per esborrar el producte amb id=5cbf295b75e0a91fd03740db:
<pre>
$ curl -i -X DELETE localhost:3000/products/5cbf295b75e0a91fd03740db
</pre>
Des del navegador també podem llistar els productes:
*localhost:3000/products
*localhost:3000/products/5cbf295b75e0a91fd03740db

Quan provem la REST API podem visualitzar la info (mínima) que ens proporciona la consola que tenim oberta. També és una manera de comprovar que funciona correctament.

En el fitxer node-rest-api/products.js tenim:
<pre>
...
/* GET ALL PRODUCTS */
router.get('/', function(req, res, next) {
Product.find(function (err, products) {
if (err) return next(err);
res.json(products);
});
});
...
</pre>
que s'executa quan fem:
*http://localhost:3000/products
i també s'executarà quan tinguem la nostra aplicació Angular (més endavant).
*http://localhost:4200/products

Podem ficar abans del res.json per comprovar que funciona:
<pre>
console.log(products);
</pre>

==Sessió de consola de MongoDB==
El servei de Mongo ha d'estar arrencat:
<pre>
$ mongod
</pre>
o bé
<pre>
$ sudo /etc/init.d/mongod start
</pre>
(recordar que la ''d'' ve de dimoni, el servei que s'està executant)
<pre>
$ mongo
MongoDB shell version: 2.6.10
connecting to: test
> show dbs
...
product 0.078GB
...

> use product
switched to db product
> db
product

> db.getCollectionNames()
[ "products", "system.indexes" ]

o bé:
> show collections
products
system.indexes

> db.products.find()
{ "_id" : ObjectId("5cbf292375e0a91fd03740da"), "prod_name" : "XBox One", "prod_desc" : "New Microsoft XBox One, the latest games console", "prod_price" : 520, "updated_at" : ISODate("2019-04-23T15:02:59.791Z"), "__v" : 0 }
{ "_id" : ObjectId("5cbf6d0e5e41d216f51ab56c"), "prod_name" : "Sony PS 4", "prod_desc" : "Sony playstation 4", "prod_price" : 580, "updated_at" : ISODate("2019-04-23T19:52:46.471Z"), "__v" : 0 }
{ "_id" : ObjectId("5cbf6d3b5e41d216f51ab56d"), "prod_name" : "XBox One", "prod_desc" : "New Microsoft XBox One, the latest games console", "prod_price" : 520, "updated_at" : ISODate("2019-04-23T19:53:31.251Z"), "__v" : 0 }

o millor:
> db.products.find().pretty()

> db.products.find().pretty()
{
"_id" : ObjectId("5cbf292375e0a91fd03740da"),
"prod_name" : "XBox One",
"prod_desc" : "New Microsoft XBox One, the latest games console",
"prod_price" : 520,
"updated_at" : ISODate("2019-04-23T15:02:59.791Z"),
"__v" : 0
}
{
"_id" : ObjectId("5cbf6d0e5e41d216f51ab56c"),
"prod_name" : "Sony PS 4",
"prod_desc" : "Sony playstation 4",
"prod_price" : 580,
"updated_at" : ISODate("2019-04-23T19:52:46.471Z"),
"__v" : 0
}
</pre>

=Angular 7 Tutorial: Building CRUD Web Application=
Seguim el següent tutorial:

Angular 7 Tutorial: Building CRUD Web Application
*https://www.djamware.com/post/5bca67d780aca7466989441f/angular-7-tutorial-building-crud-web-application

'''Què és Material?''':
*https://material.angular.io/
'''Material''' és una llibreria optimitzada per a Angular per tal de fer de forma ràpida components UI (formularis, taules,...)

De la pàgina web:
<pre>Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop

Fast and Consistent
Finely tuned performance, because every millisecond counts. Fully tested across modern browsers.

Versatile
Themable, for when you need to stay on brand or just have a favorite color. Accessible and internationalized so that all users are welcome.

Optimized for Angular
Built by the Angular team to integrate seamlessly with Angular.
</pre>
==Possibles errors/problemes que us podeu trobar==
En el tutorial hi ha un error. ''app/product.ts'' és: (és ''_id'' en comptes de ''id'')
<pre>
export class Product {
_id: string;
prod_name: string;
prod_desc: string;
prod_price: number;
updated_at: Date;
}
</pre>

Si després de seguir pas a pas el tutorial no funciona, recordeu que podeu descarregar el codi del GitHub.

Així i tot, en el Github hi ha un error/inconsistència en el tutorial. La ruta de la API és:
*http://localhost:3000
i no pas
*http://localhost:3000/api/v1
Això s'ha de canviar en el fitxer ''api.service.ts''.

Per tal de comprovar que l'aplicació funciona, allò bàsic és mostrar la llista de productes:
*http://localhost:4200/products

Per tal de què funcioni, primer de tot hi ha d'haver productes al mongo (pots utilitzar curl per crear productes, com es comenta més amunt).

Així i tot, el professor s'ha trobat amb el següent error:
<pre>
Failed to load http://localhost:3000/products: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.
</pre>
Aquest error el veiem en la consola de l'aplicació Angular (en la consola de les Eines de Desenvolupament, no pas en la consola de Angular CLI)

És un problema de CORS amb la rest API (http://localhost:3000). Hem de fer que la nostra aplicació Express tingui habilitat el CORS:
*https://stackoverflow.com/questions/7067966/how-to-allow-cors

Per fer-ho hem d'instal·lar el paquet cors:
*https://www.npmjs.com/package/cors
'''CORS''' is a node.js package for providing a Connect/Express middleware that can be used to enable CORS with various options.
<pre>
$ npm install cors
</pre>
I aleshores la solució és ben senzilla. En el fitxer app.js:
<pre>
const cors = require('cors')

...
var app = express();
app.use(cors());
...
</pre>
D'aquesta manera habilitem el CORS i ja funciona l'aplicació
*http://localhost:4200/products
i també crear un nou producte, editar-lo i esborrar-lo, que és el que volíem

=Feina per l'alumne=
La principal feina és implementar de forma correcta els dos tutorials: primer la REST API; i segon l'aplicació Angular.

Un cop funcioni correctament, i per validar que l'alumne sap quins fitxers són els importants, es proposa les següents modificacions:
*'''Fàcil''': modificar l'aplicació per tal de què la informació que tenim del producte inclogui també un codi de referència (per exemple un codi de barres, l'anomenarem '''ref''')
*'''Més difícil''': definir en el MongoDB una col·lecció de categories, i fer que els productes pertanyin a una categoria. Quan creem un producte, en una llista desplegable hem de poder triar la categoria a què pertany el producte. Quan modifiquem el producte també hem de poder canviar de categoria. Quan llistem els productes o la info d'un producte, s'ha de visualitzar la categoria a què pertany.

=Entrega=
Entregar al Classroom dins el termini previst per la pràctica.
{{Autor}}, abril 2019

@@ Línia 75: / Línia 75: @@
 Per afegir un nou producte (fem servir POST):
 <pre>
-$ curl -i -H "Accept: application/json" lX POST -H "Content-Type: application/json" -d '{ "prod_name":"GBA","prod_desc":"Game Boy Advance 1994","prod_price": 88 }' localhost:3000/products
+$ curl -i -H "Accept: application/json" -X POST -H "Content-Type: application/json" -d '{ "prod_name":"GBA","prod_desc":"Game Boy Advance 1994","prod_price": 88 }' localhost:3000/products
 </pre>
 Per visualitzar tots els productes:

Angular. Building CRUD Web Application - Historial de revisió

Joan: /* Proves dels endpoints de la REST API */

Joan: /* Possibles errors/problemes que us podeu trobar */