Curso dictado en el marco de las "Jornadas de Informatica UARG-UNPA"

1. Introducción al desarrollo
Web con Angular 6 y NodeJs
- Backend: nodejs, express, mongoDb, loopback -
Dra. Gabriela BOSETTI gbosetti@lifia.info.unlp.edu.ar
Jornadas de Informatica UARG-UNPA
Octubre, 2018

2. Mongo
2

3. Estructura de los datos
● NoSQL
○ Los datos no requieren una estructura fija
○ Grandes volúmenes de datos
○ Rendimiento más importante que la coherencia
● Cada entrada es un documento
○ Sus propiedades pueden no ser las mismas
○ Si la propiedad no aplica, podemos no guardarla
id nombre hecha
1 Comprar
pendrives
false
2 Comprar
remeras
false
3 Imprimir
programs
true
doc1: {
id: 1,
nombre: “Comprar pendrives”,
fecha: false
}
doc2: {id: 1, nombre: “Comprar remeras”, fecha: false}
doc3: {id: 1, nombre: “Imprimir programas”, fecha: false}
3

4. Verificar la versión de OS: lsb_release -a
Descarga el Community Server 4.0.2
https://www.mongodb.com/download-center#community
Extraer y ejecutar “mongod”
● Ubuntu
○ ./mongod --dbpath ./data/db/
● Windows
○ "F:Program FilesMongoDBbinmongod.exe" --dbpath
"F:Program FilesMongoDBbindata"
Abrir la shell:
Instalando mongo
SGBD
4

5. Creando una DB y agregando docs
Listar DBs show dbs
Usar/crear use demo
Eliminar db.dropDatabase()
Agregar documento
db.items.insert( { nombre: "Demo", hecho:
"false" } );
Agregar desde Json
(no desde la shell)
mongoimport --db dbName --collection
collectionName --file fileName.json
--jsonArray
Ej. mongoimport --db demo --collection users --file
/home/gabi/dev/mongodb-ubuntu/bin/data.json --jsonArray
5

6. Creando una DB
Recuperar doc/s db.items.find({nombre:"Demo item"})
Contar elementos db.items.find().count()
Actualizar
documento
db.items.update(
{_id: new ObjectId("5b9958b7b658ab54d70f148e")},
{$set: {nombre: "Nuevo nombre" }}
)
Eliminar
documento
db.items.deleteOne({_id: new
ObjectId("5b9958b7b658ab54d70f148e")})
Docs https://docs.mongodb.com/manual/tutorial/query-documents/
6

7. Operadores de queries
Más operadores https://docs.mongodb.com/manual/reference/operator/query/
Regex cheatsheet https://www.cheatography.com//davechild/cheat-sheets/regular-expressions/pdf/
● $all Permite obtener más de una instancia que coincida
● $gt Greather Than = mayor que
● $lt Lower Than = menor que
● $or realiza una operación OR lógica con expresiones
● $and realiza una operación AND lógica con expresiones
● $regex evalúa la coincidencia de patrones en cadenas
7

8. Hands on!
● Crear una nueva BD, con una colección de documentos llamada “films”.
● Agregar las siguientes películas:
Quo vaddo?
- anio: 2016
- : Italia
- director: Nunziante
- actores:
● Checco Zalone
Black Swan
- anio: 2010
- actores:
● Natalie Portman
● Mila Kunis
● Vincent Cassel
Bienvenue chez les Ch'tis
- anio: 2008
- pais: Francia
- director: Boon
La vita è bella
- anio: 1997
- pais: Italia
- director: Benigni
- actores:
● Roberto Benigni
● Nicoletta Braschi
Léon: The Professional
- anio: 1994
- pais: Francia
- director: Besson
- actores:
● Natalie Portman
Nueve reinas
- anio: 1997
- pais: Argentina
- actores:
● Ricardo Darín
● Leticia Brédice
● Gastón Pauls
8

9. Hands on!
1. Recuperá todos los documentos
2. Recuperá el número total de documentos en la colección
3. Recuperá todos los documentos
a. cuyo director sea Boon
b. cuyo país de producción es Francia
c. que incluyan a Natalie Portman en la lista de actores
principales
d. que incluyan “nue” o “Nue” en el título (not case-sensitive)
e. con películas estrenadas después del 2000
f. con películas estrenadas después del 2000
g. con películas de 1997 y 2008
h. con películas de los 90
9

10. node 10.9.x & mongo 3.x
10

11. Nuevo proyecto
➔ Crear un nuevo proyecto
npm init
➔ Instalar dependencias necesarias
npm install
◆ express framework para la creación de una api
◆ mongodb * controlador para usar mongodb
◆ body-parser * Parsea el body de solicitudes entrantes
◆ cors * Cross-Origin Resource Sharing
(*) middleware: bloque de código que se ejecuta tras un request, antes que la
petición llega a ser procesada por el route handler.
➔ Crear server.js
11

12. ¿Qué vamos a soportar?
12

13. Un posible esqueleto
var express = require('express');
var app = express();
var cors = require('cors');
var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(cors());
app.get( '/items', (req, res) => {});
app.post( '/items', (req, res, next) => {});
app.delete('/items/:id', (req, res, next) => {});
app.put( '/items/:id', (req, res, next) => {});
app.listen(3000);
Paths de la API E.g. http://localhost:3000/items
13

14. Conectándonos a la BD
MongoClient.connect( "mongodb://localhost:27017/items",
function(err, client) {
if(err) throw err;
db = client.db('items');
app.listen(3000);
console.log("Listening on port 3000n");
});
14

15. Hands on!
Recuperando documentos
app.get("/items", function(req, res) {
db.collection("items").find().toArray((error, results) => {
if (error) throw error;
res.send(results);
});
});
https://github.com/gbosetti/todo-list-mongo-backend/blob/master/server.js
pp.post('/items',(req, res) => {});
app.delete('/items/:id', (req, res) => {});
app.put('/items/:id', (req, res, next) => {});
15

16. Usando la API con curl
curl -X GET http://localhost:3000/items
curl -X POST -H "Content-Type: application/json" -d '{"name":
"demo"}' http://localhost:3000/items
16

17. Loopback 3.x
17

18. Instalando loopback-cli
sudo npm install -g loopback-cli@3
Sobre loopback
● Un framework de aplicaciones Node basado en Express
● loopback-cli es una herramienta que facilita la creación de este tipo de aplicaciones
● Vamos a usar la versión 3
Docs: https://loopback.io/doc/en/lb3/
18

19. Usando loopback-cli
● Crear el esqueleto mínimo
lb
● Crear una nueva clase del modelo
lb model
19

20. Usando loopback-cli
Docs: https://loopback.io/doc/en/lb3/
● Iniciar el servidor
node .
20

21. Creando un usuario por defecto
1. Configura las fuentes de datos
2. Define los modelos
3. Configura los modelos y les asocia las fuentes de datos
4. Configura la aplicación
5. Ejecuta scripts de arranque en el directorio /server/boot
var User = app.models.User;
User.create(
[{ username: 'admin',
email: 'admin@blah.com',
password: 'nimda'
}],
function(err, users) {
if (err) throw err;
}
);
Definiendo scripts de arrannque https://loopback.io/doc/en/lb3/Defining-boot-scripts.html
lb boot-script
21

22. Usando loopback-cli
● Borrar una clase del modelo
/common/models/your-model.js
/common/models/your-model.json
/server/model-config.json.
22

23. Autenticación
23

24. Habilitando la autenticación
lb acl
24

25. Accediendo
1. Crear un usuario
2. Iniciar sesión (/Users/login) con la credencial: {
"username": "...",
"password": "..."
}
Token
de
acceso
25

26. Relaciones entre
clases del modelo
26

27. hasMany
Ciudad
id: Number
nombre: String
Barrio
id: Number
nombre: String
idCiudad: Number
*
barrios
Dada una ciudad,
queremos listar
sus barrios
27

28. belongsTo
Ciudad
id: Number
nombre: String
Barrio
id: Number
nombre: String
idCiudad: Numberciudad
Dado un barrio,
queremos recuperar
su Ciudad
28

29. ¿Y si queremos vincular a User?
CustomUser
age: String
...
User
Gestionando usuarios: https://loopback.io/doc/en/lb3/Managing-users.html
...
Item*
29

30. MongoDB
30

31. Conectores
db.createUser( { user: "admin", pwd: "nimda", roles: [ { role: "userAdminAnyDatabase", db: "admin" } ] } )
31

32. MongoDB
● Crear un nuevo datasource y usar un conector
lb datasource
● Vincular las clases del modelo a la nueva DB
/server/model-config.json
32

33. MongoDB
{
"db": {
"host": "mongodb://127.0.0.1",
"port": 27017,
"url": "mongodb://127.0.0.1:27017/dbname",
"database": "sitedb",
"password": "nimda",
"name": "db",
"user": "admin",
"connector": "mongodb"
}
}
33

34. Introducción al desarrollo
Web con Angular 6 y NodeJs
- Backend: nodejs, express, mongoDb, loopback -
Dra. Gabriela BOSETTI gbosetti@lifia.info.unlp.edu.ar
Jornadas de Informatica UARG-UNPA
Octubre, 2018
34