Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                

Examen Lab Pao I 2023

Descargar como docx, pdf o txt
Descargar como docx, pdf o txt
Está en la página 1de 18

[ASSR P101] Administración de Sistemas y Servicios en Red

Docente: Adriana Collaguazo Jaramillo

PERÍODO 2023

EXAMEN LAB PAO I 2023

DESARROLLO WEB USANDO


JAVASCRIPT Y BASE DE DATOS NO
RELACIONAL

Nombres y Apellidos
Escribir el texto aquí

ELABORADO POR: MSIG. ADRIANA COLLAGUAZO JARAMILLO

MATERIA: ADMINISTRACIÓN DE SISTEMAS Y SERVICIOS EN RED

CARRERA DE INGENIERÍA EN TELEMÁTICA

FIEC - ESPOL

Página 1 | 18
[ASSR P101] Administración de Sistemas y Servicios en Red
Docente: Adriana Collaguazo Jaramillo

Fecha: Click or tap to enter a date.


Nombre completo: Click or tap here to enter text.
Paralelo: Click or tap here to enter text.

Objetivo:
● Desarrollar una API que realice las funciones CRUD utilizando tecnologías de
libre distribución con bases de datos no relacionales.
Duración:
Ciento veinte (120) minutos.

Materiales y Herramientas:
● Visual Studio Code

● MongoDB.

● Node.js

Introducción
Actualmente se encuentran APIs en todos lados. Facebook, Twitter, Github, todos ellos proveen
APIs dirigidas al uso de los desarrolladores. Una API (Application Programming Interface) es un
término que utilizamos para describir una forma de intercambiar información entre programas o
sitios web.

En este laboratorio se creará una API usando el paradigma de RESTFul con Node.js y MongoDB,
y se diseñará una interfaz web interactiva con todas las operaciones CRUD; Crear, Listar, Editar y
Eliminar.

Escenario

Fueron contratados por la empresa Adita S.A. con el cargo de Desarrollador de Software Jr. para
Networking, su primera tarea es desarrollar un FrontEnd interactivo para las rutas BGP de una red
que pueda cumplir con las operaciones CRUD.

Diagrama

Página 2 | 18
[ASSR P101] Administración de Sistemas y Servicios en Red
Docente: Adriana Collaguazo Jaramillo

Procedimiento

Paso 1. Preparar ambiente en Visual Studio

a) En la pestaña File escoger la opción Open folder

b) Crear una carpeta con nombre assrApp y seleccionarla.

c) Abrir la consola de visual Studio y ejecutar el siguiente comando, ingresar como


descripción ASSR APP y como autor su usuario Espol.

npm init

Página 3 | 18
[ASSR P101] Administración de Sistemas y Servicios en Red
Docente: Adriana Collaguazo Jaramillo

d) Crear el archivo index.js en el directorio principal, e ingresar lo siguiente:

const express = require('express')


const path = require('path')
const handlebars = require('handlebars')
const exphbs = require('express-handlebars')
const {allowInsecurePrototypeAccess} = require('@handlebars/allow-
prototype-access')
const bodyparser = require('body-parser')

e) Instalar todas las dependencias


npm install --save express path handlebars express-handlebars
@handlebars/allow-prototype-access body-parser

f) Agregar la siguiente configuración al archivo index.js y probar el servidor usando el


comando mostrado.

Página 4 | 18
[ASSR P101] Administración de Sistemas y Servicios en Red
Docente: Adriana Collaguazo Jaramillo

var app = express();

app.listen(3000, () => {
console.log("server started at port 3000")
});

node index.js

g) Captura de pantalla de correcto despliegue del servidor en el puerto 3000.

Página 5 | 18
[ASSR P101] Administración de Sistemas y Servicios en Red
Docente: Adriana Collaguazo Jaramillo

Paso 2. Presentación de contenido web.

a) Añadir el siguiente contenido al archivo index.js, para añadir una presentación simple

app.get('/', (req, res) => {


res.send(`
<h2>Welcome to ASSR APP</h2>
<h3>Click hereto get access to the <b> <a
href="/router/list">DATABASE</a></b></h3>
`);
});

b) Correr la aplicación e ingresar a http://localhost:3000 para comprobar su correcto


funcionamiento.

node index.js

c) Instalar mongoose desde la terminal

npm install --save mongoose

Página 6 | 18
[ASSR P101] Administración de Sistemas y Servicios en Red
Docente: Adriana Collaguazo Jaramillo

d) Crear la siguiente estructura de datos dentro de la carpeta de proyecto.

e) Modificar el archivo index.js, para hacer uso de las librerías instaladas.


require('./models/routes')
const express = require('express')
const path = require('path')
const handlebars = require('handlebars')
const exphbs = require('express-handlebars')
const {allowInsecurePrototypeAccess} = require('@handlebars/allow-
prototype-access')
const bodyparser = require('body-parser')
const { engine } = require('express-handlebars');
const routes_controller = require('./controllers/routes_controller')

var app = express();

app.use(bodyparser.urlencoded({extended: false}))
app.use(bodyparser.json())

app.get('/', (req, res) => {


res.send(`
<h2>Welcome to ASSR APP</h2>
<h3>Click hereto get access to the <b> <a
href="/router/list">DATABASE</a></b></h3>
`);

});

app.set('views', path.join(__dirname, "/views/"));

app.engine('hbs', exphbs.engine({

Página 7 | 18
[ASSR P101] Administración de Sistemas y Servicios en Red
Docente: Adriana Collaguazo Jaramillo

handlebars: allowInsecurePrototypeAccess(handlebars),
extname: 'hbs',
defaultLayout: "MainLayout",
layoutsDir: __dirname + "/views/layouts/",
})
);

app.set('view engine', 'hbs');

app.listen(3000, () => {
console.log("server started at port 3000")
});

app.use('/router', routes_controller);

f) El archivo mainLayout.hbs será la página principal, la cual contendrá los estilos css
(Bootstrap), que se usarán.
<!DOCTYPE html>
<html>
<head>
<Title>ROUTES</Title>
<link rel="stylesheet"

href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.mi
n.css"
integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<style>
#box {
background-color: #fff;
margin-top: 25px;
padding: 20 px;
-webkit-box-shadow: 10px 10px 20px 1px
rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 20px 1px rgba(0,0,0,0.75);
box-shadow: 10px 10px 20px 1px rgba(0,0,0,0.75);
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 0px solid #1f013b;
}
</style>
</head>
<body class="bg-info">
<div id='box' class="col-md-6 offset-md-3">
{{{body}}}
</div>

Página 8 | 18
[ASSR P101] Administración de Sistemas y Servicios en Red
Docente: Adriana Collaguazo Jaramillo

</body>
</html>

g) En el archivo crud.hbs se crea uan forma en formato html, donde podremos modificar los
valores de la base de datos.
<h3>{{viewTitle}}</h3>
<form action='/router' method="POST" autocomplete="off">
<input type="hidden" name="_id" value="{{route._id}}">
<div class="form-group">
<label>ip</label>
<input type="text" class="form-control" name="ip"
placeholder="ip" value="{{route.ip}}">
</div>
<div class="form-group">
<label>origin</label>
<input type="text" class="form-control" name="origin"
placeholder="origin" value="{{route.origin}}">
</div>
<div class="form-group">
<label>metric</label>
<input type="text" class="form-control" name="metric"
placeholder="metric" value="{{route.metric}}">
</div>
<div class="form-group">
<label>localpref</label>
<input type="text" class="form-control" name="localpref"
placeholder="localpref" value="{{route.localpref}}">
</div>
<div class="form-group">
<label>valid</label>
<input type="text" class="form-control" name="valid"
placeholder="valid" value="{{route.valid}}">
</div>
<div class="form-group">
<label>internal</label>
<input type="text" class="form-control" name="internal"
placeholder="internal" value="{{route.internal}}">
</div>
<div class="form-group">
<label>date</label>
<input type="text" class="form-control" name="date"
placeholder="date" value="{{route.date}}">
</div>
<div class="form-group">
<button type="submit" class="btn btn-info">Submit</button>
<a class="btn btn-secondary" href="/router/list">View</a>
</div>
</form>

Página 9 | 18
[ASSR P101] Administración de Sistemas y Servicios en Red
Docente: Adriana Collaguazo Jaramillo

h) En el archivo list.hbs se crea una forma en formato html, que será usada para modificar los
valores de la base de datos.

<h3><a class="btn btn-secondary" href="/router"> Create New</a>


Route</h3>
<table>
<thead>
<tr>
<th>ip</th>
<th>origin</th>
<th>metric</th>
<th>localpref</th>
<th>valid</th>
<th>internal</th>
<th>date</th>
</tr>
</thead>
<tbody>
{{#each list}}
<tr>
<td>{{this.ip}}</td>
<td>{{this.origin}}</td>
<td>{{this.metric}}</td>
<td>{{this.localpref}}</td>
<td>{{this.valid}}</td>
<td>{{this.internal}}</td>
<td>{{this.date}}</td>
<td>
<a class="btn btn-primary btn-sm"
href="/router/{{this.id}}">Edit</a>
<a class="btn btn-primary btn-sm"
href="/router/delete/{{this.id}}"
onclick="return confirm('Are you sure you want to
delete this record?');">Delete</a>
</td>
</tr>
{{/each}}
</tbody>
</table>

i) Usaremos el archivo routes.js, para por medio de mongoose, lograr una conexión a la base
de datos mongodb.
const mongoose = require('mongoose')
mongoose.connect('mongodb://localhost:27017/router_db', {
useNewUrlParser: true,
},
(err) => {

Página 10 | 18
[ASSR P101] Administración de Sistemas y Servicios en Red
Docente: Adriana Collaguazo Jaramillo

if (!err) {
console.log('Connection suceeded');
} else {
console.log('Error in connection' + err);
}
});

require('./routes.model');

j) El archivo routes.model.js, usará mongoose para crear un esquema que será usado por los
datos almacenados en la tabla de mongodb.
const mongoose = require('mongoose')

var routerSchema = new mongoose.Schema({


ip: { type: String, required: ' This field is required', },
origin: { type: String, required: ' This field is required', },
metric: { type: String, required: ' This field is required', },
localpref: { type: String, required: ' This field is required', },
valid: { type: String, required: ' This field is required', },
internal: { type: String, required: ' This field is required', },
date: {
type: Date,
required: ' This field is required',
},
});

mongoose.model("Routes", routerSchema);

k) Finalmente, el archivo routes_controller.js se encuentran las funciones que proporcionarán


la lógica de la app, prestando de servicios de redireccionamiento, rendering y operaciones
CRUD
const express = require("express")
var router = express.Router()
const mongoose = require("mongoose")
const Routes = mongoose.model("Routes")

router.get("/", (req,res) => {


res.render("router/crud", {
viewTitle: "Insert Route"
});
});

router.post('/', (req,res) => {


if (req.body._id == '') {
insertRecord(req, res)
} else {
updateRecord(req, res)

Página 11 | 18
[ASSR P101] Administración de Sistemas y Servicios en Red
Docente: Adriana Collaguazo Jaramillo

}
});

function insertRecord(req, res){


var route = new Routes()
route.ip = req.body.ip
route.origin = req.body.origin
route.metric = req.body.metric
route.localpref = req.body.localpref
route.valid = req.body.valid
route.internal = req.body.internal
route.date = req.body.date
route.save((err, doc) => {
if (!err) {
res.redirect("router/list")
} else {
console.log("Error during insert: " + err)
}
});
}

function updateRecord(req, res){


Routes.findOneAndUpdate(
{ _id: req.body._id}, req.body, {new: true}, (err, doc) => {
if (!err) {
res.redirect("router/list")
} else {
console.log("Error during update: " + err)
}
});
}

router.get("/list", (req, res) => {


Routes.find((err,docs) =>{
if (!err) {
res.render("router/list", {
list: docs
})
} else {
console.log("Error in retrieval: " + err)
}
});
});

router.get("/:id", (req,res) => {


Routes.findById(req.params.id, (err, doc) => {
if (!err) {
res.render("router/crud", {

Página 12 | 18
[ASSR P101] Administración de Sistemas y Servicios en Red
Docente: Adriana Collaguazo Jaramillo

viewTitle: "Update Route",


route: doc,
});
console.log(doc);
}
});
});

router.get("/delete/:id", (req,res) => {


Routes.findByIdAndRemove(req.params.id, (err, doc) => {
if (!err) {
res.render("router/list");
} else {
console.log("Error in deletion" + err);
}
});
});

module.exports = router

l) Capturas de pantalla de aplicación

Página 13 | 18
[ASSR P101] Administración de Sistemas y Servicios en Red
Docente: Adriana Collaguazo Jaramillo

Paso 3. Configuración de mongodb y pruebas de aplicación.

a) Abrir MongoDB Compass y crear una nueva conexión

b) Crear una base de datos llamada router_db con una colección llamada routes.

Página 14 | 18
[ASSR P101] Administración de Sistemas y Servicios en Red
Docente: Adriana Collaguazo Jaramillo

c) Reto: Crear un archivo .json e importar sus datos a la base de datos MongoDB creada,
usando la siguiente información.

[{"ip":"216.218.252.147", "origin":"Origin IGP", "metric":"metric 0", "localpref":"localpref


140", "valid":"valid", "internal":"internal", "date":"2021-11-30 16:56:54"},
{"ip":"216.218.252.151", "origin":"Origin IGP", "metric":"metric 0", "localpref":"localpref
140", "valid":"valid", "internal":"internal", "date":"2021-11-30 16:59:10"},
{"ip":"216.218.252.154", "origin":"Origin IGP", "metric":"metric 0", "localpref":"localpref
140", "valid":"valid", "internal":"internal", "date":"2021-11-30 17:00:34"},
{"ip":"216.218.252.157", "origin":"Origin IGP", "metric":"metric 0", "localpref":"localpref
140", "valid":"valid", "internal":"internal", "date":"2021-11-30 16:59:20"},
{"ip":"216.218.252.164", "origin":"Origin IGP", "metric":"metric 0", "localpref":"localpref
140", "valid":"valid", "internal":"internal", "date":"2021-11-30 16:59:15"},
{"ip":"216.218.252.165", "origin":"Origin IGP", "metric":"metric 0", "localpref":"localpref
140", "valid":"valid", "internal":"internal", "date":"2021-11-30 16:59:15"},
{"ip":"216.218.252.167", "origin":"Origin IGP", "metric":"metric 0", "localpref":"localpref
140", "valid":"valid", "internal":"internal", "date":"2021-11-30 16:59:14"},
{"ip":"216.218.252.168", "origin":"Origin IGP", "metric":"metric 0", "localpref":"localpref
140", "valid":"valid", "internal":"internal", "date":"2021-11-30 22:37:54"},
{"ip":"216.218.252.169", "origin":"Origin IGP", "metric":"metric 0", "localpref":"localpref
140", "valid":"valid", "internal":"internal", "date":"2021-12-09 01:49:23"},
{"ip":"216.218.252.171", "origin":"Origin IGP", "metric":"metric 0", "localpref":"localpref
140", "valid":"valid", "internal":"internal", "date":"2021-11-30 17:02:24"},
{"ip":"216.218.252.174", "origin":"Origin IGP", "metric":"metric 0", "localpref":"localpref
140", "valid":"valid", "internal":"internal", "date":"2021-11-30 16:58:55"},
{"ip":"216.218.252.176", "origin":"Origin IGP", "metric":"metric 0", "localpref":"localpref
140", "valid":"valid", "internal":"internal", "date":"2021-11-30 16:59:19"},
{"ip":"216.218.252.178", "origin":"Origin IGP", "metric":"metric 0", "localpref":"localpref
140", "valid":"valid", "internal":"internal", "date":"2021-11-30 16:59:16"},
{"ip":"216.218.252.179", "origin":"Origin IGP", "metric":"metric 0", "localpref":"localpref
140", "valid":"valid", "internal":"internal", "date":"2021-11-30 17:00:34"},
{"ip":"216.218.252.180", "origin":"Origin IGP", "metric":"metric 0", "localpref":"localpref
140", "valid":"valid", "internal":"internal", "date":"2021-11-30 16:59:00"},
{"ip":"216.218.252.184", "origin":"Origin IGP", "metric":"metric 0", "localpref":"localpref
140", "valid":"valid", "internal":"internal", "date":"2021-11-30 16:56:07"},
{"ip":"216.218.252.189", "origin":"Origin IGP", "metric":"metric 0", "localpref":"localpref
140", "valid":"valid", "internal":"internal", "date":"2021-11-30 17:00:04"},
{"ip":"216.218.252.190", "origin":"Origin IGP", "metric":"metric 0", "localpref":"localpref
140", "valid":"valid", "internal":"internal", "date":"2021-11-30 16:59:24"},
{"ip":"216.218.252.211", "origin":"Origin IGP", "metric":"metric 0", "localpref":"localpref
140", "valid":"valid", "internal":"internal", "date":"2021-11-30 17:01:04"},

Página 15 | 18
[ASSR P101] Administración de Sistemas y Servicios en Red
Docente: Adriana Collaguazo Jaramillo

{"ip":"216.218.252.28", "origin":"Origin IGP", "metric":"metric 0", "localpref":"localpref


140", "valid":"valid", "internal":"internal", "date":"2021-11-30 17:02:17"},
{"ip":"216.218.252.67", "origin":"Origin IGP", "metric":"metric 0", "localpref":"localpref
140", "valid":"valid", "internal":"internal", "date":"2021-11-30 17:01:35"},
{"ip":"216.218.252.82", "origin":"Origin IGP", "metric":"metric 0", "localpref":"localpref
140", "valid":"valid", "internal":"internal", "date":"2021-11-30 16:55:28"}]

d) Realizar pruebas, capturando y documentando cada una de las operaciones CRUD.

e) Capturas de pantalla de operaciones CRUD

Página 16 | 18
[ASSR P101] Administración de Sistemas y Servicios en Red
Docente: Adriana Collaguazo Jaramillo

Página 17 | 18
[ASSR P101] Administración de Sistemas y Servicios en Red
Docente: Adriana Collaguazo Jaramillo

Conclusiones y Recomendaciones
Click or tap here to enter text.

Evaluación de la práctica de laboratorio


1 2 3 4
Inicial En Desarrollo Desarrollado Excelencia

Actividad Puntaje Observaciones

Paso 1.g Capturas /20

Paso 2.l Capturas /20

Paso 3.c Reto /15

Paso 3.e Capturas /40

Conclusiones y Recomendaciones /5

Total /100

________________________________

Firma de la Profesora

Página 18 | 18

También podría gustarte