Estruturação do Projeto

Open in GitHub

Arquivos
monitor-app-mvc
├── back
│   ├── package-lock.json
│   ├── package.json
│   ├── requests.http
│   └── src
│       ├── database
│       │   ├── data.js
│       │   ├── seeders.js
│       │   └── seeders.json
│       ├── index.js
│       ├── models
│       │   └── Hosts.js
│       ├── routes.js
│       └── routes.test.js
└── front
    ├── css
    │   └── style.css
    ├── index.html
    ├── js
    │   ├── components
    │   │   ├── HostForm.js
    │   │   ├── HostTableRow.js
    │   │   └── Modal.js
    │   ├── lib
    │   │   ├── dom.js
    │   │   └── hosts.js
    │   ├── main.js
    │   └── services
    │       └── storage.js
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── vite.svg
    └── vite.config.js
Arquivos
monitor-app-mvc
├── back
│   ├── package-lock.json
│   ├── package.json
│   ├── requests.http
│   └── src
│       ├── database
│       │   ├── data.js
│       │   ├── seeders.js
│       │   └── seeders.json
│       ├── index.js
│       ├── models
│       │   └── Hosts.js
│       ├── routes.js
│       └── routes.test.js
└── front
    ├── css
    │   └── style.css
    ├── index.html
    ├── js
    │   ├── components
    │   │   ├── HostForm.js
    │   │   ├── HostTableRow.js
    │   │   └── Modal.js
    │   ├── lib
    │   │   ├── dom.js
    │   │   └── hosts.js
    │   ├── main.js
    │   └── services
    │       └── storage.js
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── vite.svg
    └── vite.config.js

Loader

/codes/expressjs/monitor-app-mvc/back/src/index.js
import 'express-async-errors';
import express from 'express';
import cors from 'cors';
import morgan from 'morgan';
import router from './routes.js';
import Seed from './database/seeders.js';
 
const server = express();
 
server.use(morgan('tiny'));
 
server.use(
  cors({
    origin: '*',
    methods: 'GET,HEAD,OPTIONS,PUT,PATCH,POST,DELETE',
    allowedHeaders: ['Content-Type', 'Authorization'],
    credentials: true,
    preflightContinue: false,
  })
);
 
server.use(express.json());
 
// server.use(express.static('public'));
 
server.use(router);
 
Seed.up();
 
server.listen(3000, () => {
  console.log('Server is running on port 3000');
});
 
export default server;
 
/codes/expressjs/monitor-app-mvc/back/src/index.js
import 'express-async-errors';
import express from 'express';
import cors from 'cors';
import morgan from 'morgan';
import router from './routes.js';
import Seed from './database/seeders.js';
 
const server = express();
 
server.use(morgan('tiny'));
 
server.use(
  cors({
    origin: '*',
    methods: 'GET,HEAD,OPTIONS,PUT,PATCH,POST,DELETE',
    allowedHeaders: ['Content-Type', 'Authorization'],
    credentials: true,
    preflightContinue: false,
  })
);
 
server.use(express.json());
 
// server.use(express.static('public'));
 
server.use(router);
 
Seed.up();
 
server.listen(3000, () => {
  console.log('Server is running on port 3000');
});
 
export default server;
 

Database

/codes/expressjs/monitor-app-mvc/back/src/database/data.js
export const hosts = [];
 
/codes/expressjs/monitor-app-mvc/back/src/database/data.js
export const hosts = [];
 

Model

/codes/expressjs/monitor-app-mvc/back/src/models/Hosts.js
import { v4 as uuidv4 } from 'uuid';
import { hosts } from '../database/data.js';
 
function create({ name, address, id }) {
  id = id ?? uuidv4();
 
  if (!name || !address) {
    throw new Error('Error when passing parameters');
  }
 
  const newHost = { name, address, id };
 
  hosts.push(newHost);
 
  return newHost;
}
 
function read(where) {
  if (where) {
    const field = Object.keys(where)[0];
 
    const value = where[field];
 
    const filteredHosts = hosts.filter((host) =>
      host[field] instanceof String
        ? host[field].toLowerCase().includes(value.toLowerCase())
        : host[field] === value
    );
 
    return filteredHosts;
  }
 
  return hosts;
}
 
function readById(id) {
  if (!id) {
    throw new Error('Unable to find host');
  }
 
  const index = hosts.findIndex((host) => host.id === id);
 
  if (!hosts[index]) {
    throw new Error('Host not found');
  }
 
  return hosts[index];
}
 
function update({ id, name, address }) {
  if (!name || !address || !id) {
    throw new Error('Error when passing parameters');
  }
 
  const index = hosts.findIndex((host) => host.id === id);
 
  if (!hosts[index]) {
    throw new Error('Host not found');
  }
 
  const newHost = { name, address, id };
 
  hosts[index] = newHost;
 
  return newHost;
}
 
function remove(id) {
  if (!id) {
    throw new Error('Unable to find host');
  }
 
  const index = hosts.findIndex((host) => host.id === id);
 
  if (!hosts[index]) {
    throw new Error('Host not found');
  }
 
  hosts.splice(index, 1);
 
  return true;
}
 
export default { create, read, readById, update, remove };
 
/codes/expressjs/monitor-app-mvc/back/src/models/Hosts.js
import { v4 as uuidv4 } from 'uuid';
import { hosts } from '../database/data.js';
 
function create({ name, address, id }) {
  id = id ?? uuidv4();
 
  if (!name || !address) {
    throw new Error('Error when passing parameters');
  }
 
  const newHost = { name, address, id };
 
  hosts.push(newHost);
 
  return newHost;
}
 
function read(where) {
  if (where) {
    const field = Object.keys(where)[0];
 
    const value = where[field];
 
    const filteredHosts = hosts.filter((host) =>
      host[field] instanceof String
        ? host[field].toLowerCase().includes(value.toLowerCase())
        : host[field] === value
    );
 
    return filteredHosts;
  }
 
  return hosts;
}
 
function readById(id) {
  if (!id) {
    throw new Error('Unable to find host');
  }
 
  const index = hosts.findIndex((host) => host.id === id);
 
  if (!hosts[index]) {
    throw new Error('Host not found');
  }
 
  return hosts[index];
}
 
function update({ id, name, address }) {
  if (!name || !address || !id) {
    throw new Error('Error when passing parameters');
  }
 
  const index = hosts.findIndex((host) => host.id === id);
 
  if (!hosts[index]) {
    throw new Error('Host not found');
  }
 
  const newHost = { name, address, id };
 
  hosts[index] = newHost;
 
  return newHost;
}
 
function remove(id) {
  if (!id) {
    throw new Error('Unable to find host');
  }
 
  const index = hosts.findIndex((host) => host.id === id);
 
  if (!hosts[index]) {
    throw new Error('Host not found');
  }
 
  hosts.splice(index, 1);
 
  return true;
}
 
export default { create, read, readById, update, remove };
 

Seed

/codes/expressjs/monitor-app-mvc/back/src/database/seeders.js
import { resolve } from 'node:path';
import { readFileSync } from 'node:fs';
import Host from '../models/Hosts.js';
 
function up() {
  const file = resolve('src', 'database', 'seeders.json');
 
  const seed = JSON.parse(readFileSync(file));
 
  for (const host of seed.hosts) {
    Host.create(host);
  }
}
 
export default { up };
 
/codes/expressjs/monitor-app-mvc/back/src/database/seeders.js
import { resolve } from 'node:path';
import { readFileSync } from 'node:fs';
import Host from '../models/Hosts.js';
 
function up() {
  const file = resolve('src', 'database', 'seeders.json');
 
  const seed = JSON.parse(readFileSync(file));
 
  for (const host of seed.hosts) {
    Host.create(host);
  }
}
 
export default { up };
 
/codes/expressjs/monitor-app-mvc/back/src/database/seeders.json
{
  "hosts": [
    {
      "id": "e4cfb6bb-4431-42a9-b660-d5701b2f49cd",
      "name": "Google DNS",
      "address": "8.8.8.8"
    },
    {
      "id": "a2bb615a-6153-41bf-8cbe-0bfb538ce511",
      "name": "Google Search",
      "address": "www.google.com"
    }
  ]
}
 
/codes/expressjs/monitor-app-mvc/back/src/database/seeders.json
{
  "hosts": [
    {
      "id": "e4cfb6bb-4431-42a9-b660-d5701b2f49cd",
      "name": "Google DNS",
      "address": "8.8.8.8"
    },
    {
      "id": "a2bb615a-6153-41bf-8cbe-0bfb538ce511",
      "name": "Google Search",
      "address": "www.google.com"
    }
  ]
}
 

Router

/codes/expressjs/monitor-app-mvc/back/src/routes.js
import express from 'express';
import Host from './models/Hosts.js';
 
class HttpError extends Error {
  constructor(message, code = 400) {
    super(message);
    this.code = code;
  }
}
 
const router = express.Router();
 
router.post('/hosts', async (req, res) => {
  const { name, address } = req.body;
 
  if (!name || !address) {
    throw new HttpError('Error when passing parameters');
  }
 
  try {
    const createdHost = await Host.create({ name, address });
 
    return res.status(201).json(createdHost);
  } catch (error) {
    throw new HttpError('Unable to create a host');
  }
});
 
router.get('/hosts', async (req, res) => {
  const { name } = req.query;
 
  try {
    if (name) {
      const filteredHosts = await Host.read({ name });
 
      return res.json(filteredHosts);
    }
 
    const hosts = await Host.read();
 
    return res.json(hosts);
  } catch (error) {
    throw new HttpError('Unable to read hosts');
  }
});
 
router.get('/hosts/:id', async (req, res) => {
  const { id } = req.params;
 
  try {
    const host = await Host.readById(id);
 
    if (host) {
      return res.json(host);
    } else {
      throw new HttpError('Host not found');
    }
  } catch (error) {
    throw new HttpError('Unable to read a host');
  }
});
 
router.put('/hosts/:id', async (req, res) => {
  const { name, address } = req.body;
 
  const id = req.params.id;
 
  if (!name || !address) {
    throw new HttpError('Error when passing parameters');
  }
 
  try {
    const updatedHost = await Host.update({ id, name, address });
 
    return res.json(updatedHost);
  } catch (error) {
    throw new HttpError('Unable to update a host');
  }
});
 
router.delete('/hosts/:id', async (req, res) => {
  const { id } = req.params;
 
  try {
    await Host.remove(id);
 
    return res.send(204);
  } catch (error) {
    throw new HttpError('Unable to delete a host');
  }
});
 
// 404 handler
router.use((req, res, next) => {
  return res.status(404).json({ message: 'Content not found!' });
});
 
// Error handler
router.use((err, req, res, next) => {
  // console.error(err.message);
  console.error(err.stack);
 
  if (err instanceof HttpError) {
    return res.status(err.code).json({ message: err.message });
  }
 
  // next(err);
  return res.status(500).json({ message: 'Something broke!' });
});
 
export default router;
 
/codes/expressjs/monitor-app-mvc/back/src/routes.js
import express from 'express';
import Host from './models/Hosts.js';
 
class HttpError extends Error {
  constructor(message, code = 400) {
    super(message);
    this.code = code;
  }
}
 
const router = express.Router();
 
router.post('/hosts', async (req, res) => {
  const { name, address } = req.body;
 
  if (!name || !address) {
    throw new HttpError('Error when passing parameters');
  }
 
  try {
    const createdHost = await Host.create({ name, address });
 
    return res.status(201).json(createdHost);
  } catch (error) {
    throw new HttpError('Unable to create a host');
  }
});
 
router.get('/hosts', async (req, res) => {
  const { name } = req.query;
 
  try {
    if (name) {
      const filteredHosts = await Host.read({ name });
 
      return res.json(filteredHosts);
    }
 
    const hosts = await Host.read();
 
    return res.json(hosts);
  } catch (error) {
    throw new HttpError('Unable to read hosts');
  }
});
 
router.get('/hosts/:id', async (req, res) => {
  const { id } = req.params;
 
  try {
    const host = await Host.readById(id);
 
    if (host) {
      return res.json(host);
    } else {
      throw new HttpError('Host not found');
    }
  } catch (error) {
    throw new HttpError('Unable to read a host');
  }
});
 
router.put('/hosts/:id', async (req, res) => {
  const { name, address } = req.body;
 
  const id = req.params.id;
 
  if (!name || !address) {
    throw new HttpError('Error when passing parameters');
  }
 
  try {
    const updatedHost = await Host.update({ id, name, address });
 
    return res.json(updatedHost);
  } catch (error) {
    throw new HttpError('Unable to update a host');
  }
});
 
router.delete('/hosts/:id', async (req, res) => {
  const { id } = req.params;
 
  try {
    await Host.remove(id);
 
    return res.send(204);
  } catch (error) {
    throw new HttpError('Unable to delete a host');
  }
});
 
// 404 handler
router.use((req, res, next) => {
  return res.status(404).json({ message: 'Content not found!' });
});
 
// Error handler
router.use((err, req, res, next) => {
  // console.error(err.message);
  console.error(err.stack);
 
  if (err instanceof HttpError) {
    return res.status(err.code).json({ message: err.message });
  }
 
  // next(err);
  return res.status(500).json({ message: 'Something broke!' });
});
 
export default router;
 
/codes/expressjs/monitor-app-mvc/back/requests.http
@server=http://localhost:3000
@createdHostId = {{createHost.response.body.$.id}}
 
### Create a host
# @name createHost
POST {{server}}/hosts
Content-Type: application/json
 
{
  "name": "DNS Server",
  "address": "1.1.1.1"
}
 
### Create a host without name or address
POST {{server}}/hosts
Content-Type: application/json
 
{
  "name": "DNS Server"
}
 
### Read hosts
GET {{server}}/hosts
 
### Read a host by name
GET {{server}}/hosts?name=Google%20DNS
# GET {{server}}/hosts?name=DNS
# GET {{server}}/hosts?name=dns
 
### Read a host by id
GET {{server}}/hosts/{{createdHostId}}
 
### Read a host by id with invalid id
GET {{server}}/hosts/x
 
### Update a host
PUT {{server}}/hosts/{{createdHostId}}
Content-Type: application/json
 
{
  "name": "Cloudflare DNS",
  "address": "1.1.1.1"
}
 
### Update a host without name or address
PUT {{server}}/hosts/{{createdHostId}}
Content-Type: application/json
 
{
  "name": "Cloudflare DNS"
}
 
### Update a host with invalid id
PUT {{server}}/hosts/x
Content-Type: application/json
 
{
  "name": "Cloudflare DNS",
  "address": "1.1.1.1"
}
 
### Delete a host
DELETE {{server}}/hosts/{{createdHostId}}
 
### Delete a host with invalid id
DELETE {{server}}/hosts/x
 
/codes/expressjs/monitor-app-mvc/back/requests.http
@server=http://localhost:3000
@createdHostId = {{createHost.response.body.$.id}}
 
### Create a host
# @name createHost
POST {{server}}/hosts
Content-Type: application/json
 
{
  "name": "DNS Server",
  "address": "1.1.1.1"
}
 
### Create a host without name or address
POST {{server}}/hosts
Content-Type: application/json
 
{
  "name": "DNS Server"
}
 
### Read hosts
GET {{server}}/hosts
 
### Read a host by name
GET {{server}}/hosts?name=Google%20DNS
# GET {{server}}/hosts?name=DNS
# GET {{server}}/hosts?name=dns
 
### Read a host by id
GET {{server}}/hosts/{{createdHostId}}
 
### Read a host by id with invalid id
GET {{server}}/hosts/x
 
### Update a host
PUT {{server}}/hosts/{{createdHostId}}
Content-Type: application/json
 
{
  "name": "Cloudflare DNS",
  "address": "1.1.1.1"
}
 
### Update a host without name or address
PUT {{server}}/hosts/{{createdHostId}}
Content-Type: application/json
 
{
  "name": "Cloudflare DNS"
}
 
### Update a host with invalid id
PUT {{server}}/hosts/x
Content-Type: application/json
 
{
  "name": "Cloudflare DNS",
  "address": "1.1.1.1"
}
 
### Delete a host
DELETE {{server}}/hosts/{{createdHostId}}
 
### Delete a host with invalid id
DELETE {{server}}/hosts/x
 

Teste

Jest, Supertest:

$ npm i jest supertest -D
 
$ npm run test
$ npm i jest supertest -D
 
$ npm run test
/codes/expressjs/monitor-app-mvc/back/src/routes.test.js
import request from 'supertest';
import app from './index.js';
 
let createdHost;
 
const newHost = {
  name: 'DNS Server',
  address: '1.1.1.1',
};
 
const updatedHost = {
  name: 'Cloudflare DNS',
  address: '1.1.1.1',
};
 
describe('Moniotr App', () => {
  describe('Hosts Endpoints', () => {
    describe('POST /hosts', () => {
      it('should create a new host', async () => {
        const response = await request(app).post('/hosts').send(newHost);
 
        createdHost = response.body;
 
        expect(response.statusCode).toBe(201);
      });
 
      it('should not create a new host without name or address', async () => {
        const response = await request(app).post('/hosts').send({
          name: 'DNS Server',
        });
 
        expect(response.statusCode).toBe(400);
      });
    });
 
    describe('GET /hosts', () => {
      it('should show all hosts', async () => {
        const response = await request(app).get('/hosts');
 
        expect(response.statusCode).toBe(200);
      });
 
      it('should list the valid host', async () => {
        const response = await request(app).get('/hosts');
 
        const hasValidHost = response.body.some(
          (host) => host.address === createdHost.address
        );
 
        expect(hasValidHost).toBeTruthy();
      });
 
      it('should show all hosts by name', async () => {
        const response = await request(app).get('/hosts?name=DNS');
 
        expect(response.statusCode).toBe(200);
      });
    });
 
    describe('GET /hosts/:hostId', () => {
      it('should show a host by id', async () => {
        const response = await request(app).get(`/hosts/${createdHost.id}`);
 
        expect(response.statusCode).toBe(200);
 
        expect(response.body.name).toBe(createdHost.name);
      });
 
      it('should not show a host with invalid id', async () => {
        const response = await request(app).get(`/hosts/x`);
 
        expect(response.statusCode).toBe(400);
 
        expect(response.body.message).toBe('Unable to read a host');
      });
    });
 
    describe('PUT /hosts/:hostId', () => {
      it('should update a host', async () => {
        const response = await request(app)
          .put(`/hosts/${createdHost.id}`)
          .send(updatedHost);
 
        expect(response.statusCode).toBe(200);
      });
 
      it('should list an updated host', async () => {
        const response = await request(app).get('/hosts');
 
        const hasValidHost = response.body.some(
          (host) => host.address === updatedHost.address
        );
 
        expect(hasValidHost).toBeTruthy();
      });
 
      it('should not update a host without name or address', async () => {
        const response = await request(app)
          .put(`/hosts/${createdHost.id}`)
          .send({
            name: 'Cloudflare DNS',
          });
 
        expect(response.statusCode).toBe(400);
      });
 
      it('should not update a host with invalid id', async () => {
        const response = await request(app).put(`/hosts/x`).send(updatedHost);
 
        expect(response.statusCode).toBe(400);
 
        expect(response.body.message).toBe('Unable to update a host');
      });
    });
 
    describe('DELETE /hosts/:hostId', () => {
      it('should remove a host', async () => {
        const response = await request(app).delete(`/hosts/${createdHost.id}`);
 
        expect(response.statusCode).toBe(204);
      });
 
      it('should not delete a host with invalid id', async () => {
        const response = await request(app).delete(`/hosts/x`);
 
        expect(response.statusCode).toBe(400);
 
        expect(response.body.message).toBe('Unable to delete a host');
      });
    });
  });
});
 
/codes/expressjs/monitor-app-mvc/back/src/routes.test.js
import request from 'supertest';
import app from './index.js';
 
let createdHost;
 
const newHost = {
  name: 'DNS Server',
  address: '1.1.1.1',
};
 
const updatedHost = {
  name: 'Cloudflare DNS',
  address: '1.1.1.1',
};
 
describe('Moniotr App', () => {
  describe('Hosts Endpoints', () => {
    describe('POST /hosts', () => {
      it('should create a new host', async () => {
        const response = await request(app).post('/hosts').send(newHost);
 
        createdHost = response.body;
 
        expect(response.statusCode).toBe(201);
      });
 
      it('should not create a new host without name or address', async () => {
        const response = await request(app).post('/hosts').send({
          name: 'DNS Server',
        });
 
        expect(response.statusCode).toBe(400);
      });
    });
 
    describe('GET /hosts', () => {
      it('should show all hosts', async () => {
        const response = await request(app).get('/hosts');
 
        expect(response.statusCode).toBe(200);
      });
 
      it('should list the valid host', async () => {
        const response = await request(app).get('/hosts');
 
        const hasValidHost = response.body.some(
          (host) => host.address === createdHost.address
        );
 
        expect(hasValidHost).toBeTruthy();
      });
 
      it('should show all hosts by name', async () => {
        const response = await request(app).get('/hosts?name=DNS');
 
        expect(response.statusCode).toBe(200);
      });
    });
 
    describe('GET /hosts/:hostId', () => {
      it('should show a host by id', async () => {
        const response = await request(app).get(`/hosts/${createdHost.id}`);
 
        expect(response.statusCode).toBe(200);
 
        expect(response.body.name).toBe(createdHost.name);
      });
 
      it('should not show a host with invalid id', async () => {
        const response = await request(app).get(`/hosts/x`);
 
        expect(response.statusCode).toBe(400);
 
        expect(response.body.message).toBe('Unable to read a host');
      });
    });
 
    describe('PUT /hosts/:hostId', () => {
      it('should update a host', async () => {
        const response = await request(app)
          .put(`/hosts/${createdHost.id}`)
          .send(updatedHost);
 
        expect(response.statusCode).toBe(200);
      });
 
      it('should list an updated host', async () => {
        const response = await request(app).get('/hosts');
 
        const hasValidHost = response.body.some(
          (host) => host.address === updatedHost.address
        );
 
        expect(hasValidHost).toBeTruthy();
      });
 
      it('should not update a host without name or address', async () => {
        const response = await request(app)
          .put(`/hosts/${createdHost.id}`)
          .send({
            name: 'Cloudflare DNS',
          });
 
        expect(response.statusCode).toBe(400);
      });
 
      it('should not update a host with invalid id', async () => {
        const response = await request(app).put(`/hosts/x`).send(updatedHost);
 
        expect(response.statusCode).toBe(400);
 
        expect(response.body.message).toBe('Unable to update a host');
      });
    });
 
    describe('DELETE /hosts/:hostId', () => {
      it('should remove a host', async () => {
        const response = await request(app).delete(`/hosts/${createdHost.id}`);
 
        expect(response.statusCode).toBe(204);
      });
 
      it('should not delete a host with invalid id', async () => {
        const response = await request(app).delete(`/hosts/x`);
 
        expect(response.statusCode).toBe(400);
 
        expect(response.body.message).toBe('Unable to delete a host');
      });
    });
  });
});
 

.skip()

describe.skip()
 
it.skip()
describe.skip()
 
it.skip()

Cobertura de Testes

/codes/expressjs/monitor-app-mvc/back/package.json
{
  "name": "invest-app",
  "type": "module",
  "scripts": {
    "start": "node src/index.js",
    "dev": "node --watch src/index.js",
    "test": "node --experimental-vm-modules ./node_modules/.bin/jest src",
    "test:coverage": "node --experimental-vm-modules ./node_modules/.bin/jest src --coverage"
  },
  "jest": {
    "collectCoverage": true,
    "testTimeout": 20000,
    "coverageReporters": [
      "json",
      "html"
    ]
  },
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.18.2",
    "express-async-errors": "^3.1.1",
    "morgan": "^1.10.0",
    "uuid": "^9.0.0"
  },
  "devDependencies": {
    "jest": "^29.7.0",
    "supertest": "^6.3.4"
  }
}
 
/codes/expressjs/monitor-app-mvc/back/package.json
{
  "name": "invest-app",
  "type": "module",
  "scripts": {
    "start": "node src/index.js",
    "dev": "node --watch src/index.js",
    "test": "node --experimental-vm-modules ./node_modules/.bin/jest src",
    "test:coverage": "node --experimental-vm-modules ./node_modules/.bin/jest src --coverage"
  },
  "jest": {
    "collectCoverage": true,
    "testTimeout": 20000,
    "coverageReporters": [
      "json",
      "html"
    ]
  },
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.18.2",
    "express-async-errors": "^3.1.1",
    "morgan": "^1.10.0",
    "uuid": "^9.0.0"
  },
  "devDependencies": {
    "jest": "^29.7.0",
    "supertest": "^6.3.4"
  }
}
 
$ npm run test:coverage
$ npm run test:coverage

View

Editar esta página