Bienvenidos sean a este post, hoy continuaremos con la aplicacion notas.
Ya establecimos varios aspectos de nuestra aplicacion en los post anteriores pero nos falta la pagina de inicio de la aplicacion, para ello deberemos hacer algunos cambios y creacion de archivos, para ello necesitaremos el codigo de nuestra aplicacion en el post anterior, sino lo poseen les dejo un link para descargarlo:
Simplemente extraigan todos los archivos y nuestra aplicacion estara completamente funcional, lo siguiente sera ir al archivo index.mjs en el directorio routes y modificaremos el codigo de la siguiente manera:
routes/index.mjs
import * as express from 'express';
import { NotasMem as notas } from '../app.mjs';
export const router = express.Router();
router.get('/', async (req, res, next) => {
try {
const listaclaves = await notas.listarClaves();
const promesaClave = listaclaves.map(clave => {
return notas.read(clave);
});
const listanotas = await Promise.all(promesaClave);
res.render('index', { title: 'Notas',
listanotas: listanotas
});
} catch (err) {
next(err);
}
});La primera modificacion es que importamos todo del modulo express, antes solo era default, despues importamos al objeto notas del modulo app, router sigue siendo el mismo y la otra modificacion es en get donde no renderizamos solamente a la pagina sino que agregaremos primero un try y catch para que podamos interceptar el error y enviarlo en caso de suceder mediante un next, y en el bloque donde trabajaremos definiremos primero un objeto donde listaremos todas las claves, en el siguiente tambien almacenara las claves pero para este crearemos un map donde a cada clave le asociaremos los valores de esta, el siguiente generara una promesa para todos los elementos del objeto anterior, de esto ya veremos porque es asi, para finalmente mostrar la pagina de index o principal y ahi le pasaremos dos datos: el primero sera el titulo y el segundo el listado que creamos anteriormente, ya tenemos todo lo necesario para controlar la transmision de datos pero nos faltan un par de pasos mas y para ello debemos ir al directorio views y modificaremos el archivo layout.hbs de la siguiente manera:
views/layout.hbs
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
{{> header }}
{{{body}}}
</body>
</html>En este caso solo agregamos la opcion de header para que tengamos una vista nueva, la cual crearemos en breve, el resto queda de la misma forma, antes de pasar a crear el nuevo archivo vamos al archivo index.hbs en el mismo directorio y vamos a modificar su codigo actual de la siguiente manera:
views/index.hbs
<ul>
{{#each listanotas}}
<li>{{clave}}:
<a href="/notas/ver?clave={{ clave }}">{{ titulo }}</a>
</li>
{{/each}}
</ul>En este caso usaremos una lista sin ordenar donde mediante each traeremos cada elemento que tenemos en listanotas, el objeto que devuelve una promesa de cada nota, despues en cada elemento mostraremos el codigo/clave que lo identifica, lo siguiente sera mostrar el titulo de la nota y cada una tendra un link donde ira a otra pagina que se encargara de mostrarlo en base a la clave de la misma, pero esto por el momento no funcionara primero porque la lista esta vacia y no tenemos la pagina para mostrarlo, por ultimo antes de probar la pagina vamos a trabajar con los parciales, esto lo configuramos y mencionamos en este post, y para ello debemos crear en el directorio notas un nuevo sub-directorio con el nombre de partials, y en este crearemos un nuevo archivo con el nombre de header.hbs y le agregaremos el siguiente codigo:
partials/header.hbs
<header>
<h1>{{ title }}</h1>
<div class='navbar'>
<p>
<a href='/'>Inicio</a> |
<a href='/notas/add'>Agregar Nota</a>
</p>
</div>
</header>Este sera solamente el titulo de la pagina y las opciones que tendremos disponibles, en este caso una para volver al inicio y otra para agregar nuevas notas, con esto ya tenemos todo listo para hacer la primera prueba de nuestra pagina, veamos como trabaja mediante el siguiente video
Con esto ya tenemos una pagina de inicio y vimos tambien como algunas funciones ya trabajan, como el error 404, pero el listado sigue en blanco dado que no tenemos ninguna nota pero esto es algo que solucionaremos en el proximo post, antes de finalizar les dejo todos los codigos de la aplicacion hasta este momento en un archivo:
En resumen, hoy hemos agregado la pagina de inicio, hemos hecho la primera modificacion para poder implementarlo, luego hemos creado los archivos para mostrar la pagina de inicio, asi como el tema del listado, hicimos la primera prueba y ya vimos algunas funciones, espero les haya resultado interesante sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Donación
Es para mantenimento del sitio, gracias!
$1.50
El blog de Tinchicus 