Angular. Building CRUD Web Application

De Wikijoan
Dreceres ràpides: navegació, cerca

Contingut

Introducció

Article-201018060704.png

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

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:

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

Instal·lar la REST API (Node.js, Express.js, Mongoose.js, 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

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:

$ 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

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:

  "scripts": {
    "start": "node ./bin/www"
  },

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:

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

Per afegir un nou producte (fem servir POST):

$ 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

Per visualitzar tots els productes:

$ curl -i -H "Accept: application/json" localhost:3000/products

Per visualitzar el producte amb id=5cbf295b75e0a91fd03740db:

$ curl -i -H "Accept: application/json" localhost:3000/products/5cbf295b75e0a91fd03740db

Per esborrar el producte amb id=5cbf295b75e0a91fd03740db:

$ curl -i -X DELETE localhost:3000/products/5cbf295b75e0a91fd03740db

Des del navegador també podem llistar els productes:

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:

...
/* GET ALL PRODUCTS */
router.get('/', function(req, res, next) {
  Product.find(function (err, products) {
    if (err) return next(err);
    res.json(products);
  });
});
...

que s'executa quan fem:

i també s'executarà quan tinguem la nostra aplicació Angular (més endavant).

Podem ficar abans del res.json per comprovar que funciona:

console.log(products);

Sessió de consola de MongoDB

El servei de Mongo ha d'estar arrencat:

$ mongod

o bé

$ sudo /etc/init.d/mongod start

(recordar que la d ve de dimoni, el servei que s'està executant)

$ 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
}

Angular 7 Tutorial: Building CRUD Web Application

Seguim el següent tutorial:

Angular 7 Tutorial: Building CRUD Web Application

Què és Material?:

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:

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.

Possibles errors/problemes que us podeu trobar

En el tutorial hi ha un error. app/product.ts és: (és _id en comptes de id)

export class Product {
    _id: string;
    prod_name: string;
    prod_desc: string;
    prod_price: number;
    updated_at: Date;
  }

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:

i no pas

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:

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:

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.

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:

Per fer-ho hem d'instal·lar el paquet cors:

CORS is a node.js package for providing a Connect/Express middleware that can be used to enable CORS with various options.

$ npm install cors

I aleshores la solució és ben senzilla. En el fitxer app.js:

const cors = require('cors')

...
var app = express();
app.use(cors());
...

D'aquesta manera habilitem el CORS i ja funciona l'aplicació

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:

Entrega

Entregar al Classroom dins el termini previst per la pràctica.


creat per Joan Quintana Compte, abril 2019

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
Institut Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines