Examen Lab Pao I 2023

[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
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
Procedimiento
Página 2 | 18
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
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
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
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
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
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
</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>
<label>origin</label>
<input type="text" class="form-control" name="origin"
placeholder="origin" value="{{route.origin}}">
</div>
<label>metric</label>
<input type="text" class="form-control" name="metric"
placeholder="metric" value="{{route.metric}}">
</div>
<label>localpref</label>
<input type="text" class="form-control" name="localpref"
placeholder="localpref" value="{{route.localpref}}">
</div>
<label>valid</label>
<input type="text" class="form-control" name="valid"
placeholder="valid" value="{{route.valid}}">
</div>
<label>internal</label>
<input type="text" class="form-control" name="internal"
placeholder="internal" value="{{route.internal}}">
</div>
<label>date</label>
<input type="text" class="form-control" name="date"
placeholder="date" value="{{route.date}}">
</div>
<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
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
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
}
});
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
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
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
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
Página 15 | 18

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
Página 17 | 18
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

Examen Lab Pao I 2023

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Examen Lab Pao I 2023

Cargado por

Copyright:

Formatos disponibles

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

Docente: Adriana Collaguazo Jaramillo

EXAMEN LAB PAO I 2023

DESARROLLO WEB USANDO

ELABORADO POR: MSIG. ADRIANA COLLAGUAZO JARAMILLO

MATERIA: ADMINISTRACIÓN DE SISTEMAS Y SERVICIOS EN RED

CARRERA DE INGENIERÍA EN TELEMÁTICA

Fecha: Click or tap to enter a date.

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

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

const express = require('express')

e) Instalar todas las dependencias

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

var app = express();

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

Paso 2. Presentación de contenido web.

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

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

c) Instalar mongoose desde la terminal

npm install --save mongoose

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.

var app = express();

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

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

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

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

var routerSchema = new mongoose.Schema({

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

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

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

function insertRecord(req, res){

function updateRecord(req, res){

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

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

viewTitle: "Update Route",

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

l) Capturas de pantalla de aplicación

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

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

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

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

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

e) Capturas de pantalla de operaciones CRUD

Evaluación de la práctica de laboratorio

Actividad Puntaje Observaciones

Paso 1.g Capturas /20

Paso 2.l Capturas /20

Paso 3.c Reto /15

Paso 3.e Capturas /40

También podría gustarte