Introducción al desarrollo Web: Backend
0 recomendaciones255 vistas
Este documento introduce el desarrollo web con Angular 6 y NodeJs para el backend, utilizando las tecnologías Nodejs, Express, MongoDB y Loopback. Explica la estructura de datos noSQL de MongoDB, cómo crear una base de datos y agregar documentos, y realiza operaciones básicas como consultas, actualizaciones y eliminaciones. Luego, cubre la instalación de Nodejs y MongoDB, la creación de un proyecto backend con Express y la conexión a la base de datos. Finalmente, introduce el framework Loopback para generar de forma automática APIs RESTful y
![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](https://image.slidesharecdn.com/angularnodeunidad2-181109233139/85/Introduccion-al-desarrollo-Web-Backend-21-320.jpg)
![Conectores
db.createUser( { user: "admin", pwd: "nimda", roles: [ { role: "userAdminAnyDatabase", db: "admin" } ] } )
31](https://image.slidesharecdn.com/angularnodeunidad2-181109233139/85/Introduccion-al-desarrollo-Web-Backend-31-320.jpg)
Introducción al desarrollo Web: Backend
- 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