Entornos de desarrollo

1º DAM/DAW - Curso 2024-2025

User Tools

Site Tools

Trace:
apuntes:backend_frontend

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
apuntes:backend_frontend [2024/10/20 17:47] – [API con CRUD completo y base de datos] Santiago Faciapuntes:backend_frontend [2025/03/24 09:34] (current) – [Backend: API] Santiago Faci
Line 14: Line 14:
   "version": "0.1",   "version": "0.1",
   "description": "A sample project to learn Node.js",   "description": "A sample project to learn Node.js",
-  "type": "module", 
   "scripts": {   "scripts": {
     "start": "node src/app.js"     "start": "node src/app.js"
Line 259: Line 258:
 <caption>cities-frontend</caption> <caption>cities-frontend</caption>
 </figure> </figure>
 +
 +
 +
 +
 ===== CRUD Backend + Frontend ===== ===== CRUD Backend + Frontend =====
  
Line 452: Line 455:
  
 ==== Backend: API ==== ==== Backend: API ====
 +
 +El primer paso será preparar el fichero de configuración de la base de datos, indicando el tipo (SQLite) y la ubicación (el fichero 'cities.db').
  
 <file javascript src/configuration/database.js> <file javascript src/configuration/database.js>
Line 467: Line 472:
 exports.db = db; exports.db = db;
 </file> </file>
 +
 +En el fichero principal simplemente añadiremos las operaciones definidas en el fichero 'route/cities.js' e iniciaremos el backend.
  
 <file javascript src/app.js> <file javascript src/app.js>
Line 483: Line 490:
  
 </file> </file>
 +
 +El fichero 'routes/cities.js' contiene la lista de todas las operaciones definidas en este backend y que tendremos que implementar correctamente en la capa //controller//:
  
 <file javascript src/route/cities.js> <file javascript src/route/cities.js>
Line 498: Line 507:
 module.exports = router; module.exports = router;
 </file> </file>
 +
 +La capa //controller// implementa todas las operaciones que se han definido en la capa //routes// invocando a la capa //service// que será donde desarrollaremos toda la lógica. En esta capa //controller// simplemente leeremos la petición (que puede tener o no algún parámetro), validaremos dicha petición y sus parámetros e invocaremos a la capa //service// para ejecutar toda la lógica asociada a la misma:
  
 <file javascript src/controller/cities.js> <file javascript src/controller/cities.js>
Line 545: Line 556:
 }; };
 </file> </file>
 +
 +En nuestro caso, en la capa //service//, será donde accedamos a la base de datos a por la información requerida, hagamos la operaciones de lógica necesarias (si las hay) y devolveremos la información a la capa anterior (//controller//) para que ésta la devuelva a su superior (que será quien haya realizado la petición, el frontend):
  
 <file javascript src/service/cities.js> <file javascript src/service/cities.js>
Line 598: Line 611:
 </file> </file>
  
 +==== Frontend: Utilidades ====
  
 +<file javascript documentUtils.js>
 +const icons = new Map();
 +icons.set('edit', 
 +    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">' +
 +        '<path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325"/>' +
 +    '</svg>'
 +);
 +icons.set('delete',
 +    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">' +
 +        '<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/>' +
 +        '<path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/>' +
 +    '</svg>' 
 +);
 +// TODO Añadir más iconos
 +
 +const el = function (elementId) {
 +    return document.getElementById(elementId);
 +};
 +
 +const icon = function(iconName) {
 +    return icons.get(iconName);
 +};
 +
 +const td = function(text) {
 +    return '<td>' + text + '</td>';
 +}
 +
 +module.exports = {
 +    el,
 +    icon,
 +    td
 +};
 +</file>
 +==== Frontend: carga de datos en una tabla ====
 +
 +<file html index.html>
 +<!DOCTYPE html>
 +<html>
 +    <head>
 +        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
 +        <script type="module" src="index.js"></script>
 +    </head>
 +    <body onload="readCities()">
 +        <div class="container">
 +            <ul class="nav nav-tabs">
 +                <li class="nav-item">
 +                    <a class="nav-link active" aria-current="page" href="index.html">Listado</a>
 +                </li>
 +                <li class="nav-item">
 +                    <a class="nav-link" href="registro.html">Registro</a>
 +                </li>
 +            </ul>
 +
 +            <h1>Listado de ciudades</h1>
 +            
 +            <table class="table">
 +                <thead>
 +                    <tr>
 +                        <th>Nombre</th>
 +                        <th>Población</th>
 +                        <th>Área</th>
 +                        <th>. . .</th>
 +                    </tr>
 +                </thead>
 +                <tbody id="tableBody">
 +                </tbody>
 +            </table>
 +            </ul>
 +        </div>
 +    </body>
 +</html>
 +</file>
 +
 +<file javascript index.js>
 +import axios from 'axios';
 +import { el, icon, td } from './documentUtil';
 +import { notifyOk } from './dialogUtil';
 +
 +window.readCities = function() {
 +    axios.get('http://localhost:8080/cities')
 +        .then((response) => {
 +            const cityList = response.data;
 +            const cityTable = el('tableBody');
 +            
 +            cityList.forEach(city => {
 +                const row = document.createElement('tr');
 +                row.id = 'city-' + city.id;
 +                row.innerHTML = td(city.name) +
 +                                td(city.population) +
 +                                td(city.area) +
 +                                '<a class="btn btn-warning" href="modify.html?id=' + city.id + '">' +
 +                                icon('edit') + 
 +                                '</a> ' +
 +                                '<a class="btn btn-danger" href="javascript:removeCity(' + city.id + ')">' +
 +                                icon('delete') +
 +                                '</a>';
 +                cityTable.appendChild(row);
 +            })
 +        });
 +};
 +
 +window.removeCity = function(id) {
 +    if (confirm('¿Está seguro de que desea eliminar esta ciudad?')) {
 +        axios.delete('http://localhost:8080/cities/' + id)
 +            .then((response) => {
 +                if (response.status == 204) {
 +                    notifyOk('Ciudad eliminada correctamente');
 +                    el('city-' + id).remove();
 +                }
 +            });
 +    }
 +};
 +</file>
 +==== Frontend: Diálogos ====
 +
 +<file javascript dialogUtils.js>
 +import Toastify from 'toastify-js';
 +import 'toastify-js/src/toastify.css';
 +
 +const notifyError = function(message) {
 +    Toastify({
 +        text: message,
 +        duration: 3000,
 +        gravity: 'top',
 +        position: 'center',
 +        style: {
 +            background: "red",
 +        },
 +    }).showToast();
 +};
 +
 +const notifyOk = function(message) {
 +    Toastify({
 +        text: message,
 +        duration: 3000,
 +        gravity: 'top',
 +        position: 'center',
 +        style: {
 +            background: "green",
 +        },
 +    }).showToast();
 +};
 +
 +module.exports = {
 +    notifyError,
 +    notifyOk
 +};
 +</file>
 +
 +==== Frontend: formulario de registro ====
 +
 +<file html register.html>
 +<!DOCTYPE html>
 +<html>
 +    <head>
 +        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
 +        <script type="module" src="register.js"></script>
 +    </head>
 +    <body>
 +        <div class="container">
 +            <ul class="nav nav-tabs">
 +                <li class="nav-item">
 +                    <a class="nav-link" aria-current="page" href="index.html">Listado</a>
 +                </li>
 +                <li class="nav-item">
 +                    <a class="nav-link active" href="register.html">Registro</a>
 +                </li>
 +            </ul>
 +            
 +            <h1>Registro ciudades</h1>
 +            <form action="http://localhost:8080/cities">
 +                <div class="mb-3">
 +                    <label for="title" class="form-label">Nombre</label>
 +                    <input class="form-control" type="text" id="name"/>
 +                </div>
 +                <div class="mb-3">
 +                    <label for="description" class="form-label">Población</label>
 +                    <input class="form-control" type="text" id="population"/>
 +                </div>
 +                <div class="mb-3">
 +                    <label for="year" class="form-label">Area</label>
 +                    <input class="form-control" type="text" id="area"/>
 +                </div>
 +                <button type="button" class="btn btn-primary" onClick="addCity()">Registrar</button>
 +            </form>
 +        </div>
 +    </body>
 +</html>
 +</file>
 +
 +<file javascript register.js>
 +import axios from 'axios';
 +import { notifyError, notifyOk } from './dialogUtil.js';
 +import { el } from './documentUtil.js';
 +
 +window.addCity = function() {
 +    const name = el('name').value;
 +    const population = el('population').value;
 +    const area = el('area').value;
 +
 +    // TODO Validación de datos
 +    if (name === '') {
 +        notifyError('El nombre es un campo obligatorio');
 +        return;
 +    }
 +
 +    axios.post('http://localhost:8080/cities', {
 +        name: name,
 +        population: population,
 +        area: area
 +    });
 +
 +    // TODO Confirmar al usuario que todo ha ido bien (o mal)
 +    notifyOk('Ciudad registrada');
 +
 +    // TODO Limpiar el formulario
 +    el('name').value = '';
 +    el('population').value = '';
 +    el('area').value = '';
 +};
 +</file>
 +===== Funciones de utilidad =====
 +
 +<code javascript>
 +function getDays(fromDate, toDate) {
 +    const days = toDate.getTime() - fromDate.getTime();
 +
 +    return Math.abs(Math.round(days / (1000 * 3600 * 24)));
 +}
 +
 +function getDaysFromNow(date) {
 +    const now = new Date(Date.now());
 +    
 +    return getDays(date, now);
 +}
 +
 +function getYearsFromNow(date) {
 +    const now = new Date(Date.now());
 +    return Math.ceil(getDays(date, now) / 365);
 +}
 +
 +module.exports = {
 +    getDaysFromNow,
 +    getYearsFromNow,
 +    getDays
 +}
 +</code>
 +
 +===== Ficheros de configuración =====
 +
 +<code yaml config.local.yaml>
 +db:
 +  host: localhost
 +  port: 3306
 +  user: user
 +  password: password
 +  database: cities
 +
 +service:
 +  port: 8080
 +</code>
 +
 +<file javascript config/configuration.js>
 +const yaml = require('js-yaml');
 +const fs = require('fs');
 +const yargs = require('yargs/yargs');
 +const { hideBin } = require('yargs/helpers');
 +
 +// Lee el fichero de configuración
 +let configFile = 'config.prod.yaml';
 +const argv = yargs(hideBin(process.argv)).argv;
 +if (argv.config != undefined) {
 +    configFile = argv.config;
 +}
 +const config = yaml.load(fs.readFileSync(configFile, 'utf-8'));
 +
 +module.exports = {
 +    config
 +};
 +</file>
 +
 +
 +===== MariaDB como base de datos =====
 +
 +<code javascript>
 +const knex = require('knex');
 +. . .
 +const { config } = require('../config/configuration');
 +
 +// Configuración de la base de datos: tipo, ubicación y otros parámetros
 +const db = knex({
 +    client: 'mysql',
 +    connection: {
 +        host: config.db.host,
 +        port: config.db.port,
 +        user: config.db.user,
 +        password: config.db.password,
 +        database: config.db.database
 +    },
 +    useNullAsDefault: true
 +});
 +</code>
 ---- ----
  
apuntes/backend_frontend.1729446428.txt.gz · Last modified: 2024/10/20 17:47 by Santiago Faci