Guia-tutorial Mean Stack: Desarrollando nuestro proyecto

mean stack desarrollando nuestro proyectoEn anteriores entregas de este tutorial para iniciarse como Mean Stack, hemos visto cómo aprovechar al máximo Node.JS, Express y MongoDB. ¡Es hora de finalizar el desarrollo de nuestra aplicación en esta última entrega!

 

Tutoriales anteriores de nuestro proyecto:

  1. Introducción: Mean Stack
  2. Guia tutorial Node.JS
  3. Guia-tutoria Express
  4. Guia-tutorial MongoDB
  5. Desarrollando nuestro proyecto

 

Desarrollando nuestro proyecto

En nuestro proyecto vamos a usar un drive MongoDB para node

Para instalarlo, en la raíz de nuestro helloExpress, teclearemos:

#:> npm install mongodb –save

Comprobamos que package.json contiene una referencia a mongodb, recordamos que es lo que hace el modificador –-save y es importante para el mantenimiento, modularidad y portabilidad de nuestro proyecto.

 

Editemos app.js y añadamos este código después del último require (en verde):

 

En app.js:

codigo app.js

Si ejecutamos con npm start, deberíamos ver en consola un mensaje

Conectado con éxito al servidor

 

Bien, nos hemos conectado. Vamos a dar un paso más. Vamos a imprimir en pantalla todos los resultados de la colección “restaurants”:

 

Creamos una variable que contiene la siguiente función:

En app.js

fragmento código app js

Ahora la llamamos desde el callback de conexión, para ello modificamos el código marcado en verde anteriormente:

En app.js:

codigo cliente mongo

Cuando ejecutemos nuestro programa, nos devolverá todos los restaurantes de la colección restaurants en consola.

 

Vamos a aprender cómo filtrar registros con nuestro programa. Digamos que queremos obtener un subconjunto de los restaurantes que sirvan comida Irlandesa. Para ello vamos a filtrar por la propiedad “cuisine”. Sólo tenemos que modificar ligeramente el código de la función findDocuments:

En app.js:

Al ejecutar con npm start, veremos que sólo nos devuelve los registros filtrados.

 

Ahora vamos a hacer cambios para ver esta información en pantalla. Vamos a crear dentro de express una ruta /restaurantes que nos lleve a un listado de restaurantes de comida irlandesa. Después, vamos a capturar los restaurantes en una variable y se la vamos a pasar al router. Por último, crearemos una vista con una plantilla jade, y volcaremos la variable en la vista, y generaremos el HTML necesario para mostrar una lista de restaurantes.

 

Primero creamos nuestra ruta en la carpeta helloExpress/routes/

 

Creamos un nuevo archivo llamado restaurantes.js en la carpeta helloExpress/routes/

 

Usamos este contenido:

En routes/restaurantes.js:

fragmento express

Si este tutorial te ha gustado y sientes curiosidad por convertirte en Full Stack Developer, ¡tenemos buenas noticias para ti! Hemos preparado un itinerario formativo en Javascript que te convertirá en uno de los perfiles laborales más demandados en la actualidad.

Básicamente, creamos una ruta que acepta el método GET, con router.get.

 

Router.get admite dos parámetros:

 

router.METHOD(PATH, HANDLER)

 

El primer parámetro es la ruta. La ruta ‘/’ no es el raíz, porque ahora veremos que al importarla en app.js, la haremos relativa de la ruta ‘/restaurantes’ por lo tanto ‘/’ aquí significará, ‘http://localhost/restaurantes/’

 

 

El segundo es un handler, una función. En nuestro caso pasamos a la función dos objetos, req y res. Estos son respectivamente el objeto que contiene la solicitud (request) y el que contiene la respuesta (response)

 

Así tomamos el objeto res (response) y accedemos a su método render, que se encarga de renderizar la vista. Al llamar a render, pasamos una variable a la vista llamada

 

“restaurantes” y le asignamos el valor req.restatuarantes, que será la variable con todos los resultados, que pasaremos a su vez al router desde nuestra app.js.

 

Veamos un esquema:

esquema restaurantes

Lo siguiente que vamos a hacer es cambiar el código del archivo app.js:

En primer lugar asignamos a una variable nuestra nueva ruta, para ello añadimos la siguiente línea a final de todas las definiciones de variables:ç

var restaurants_route = require(‘./routes/restaurantes’);

También vamos a definir una variable que contenga todos los restaurantes:

var restaurantes = [];

Lo siguiente que vamos a hacer es permitir que nuestro router tenga acceso a la variable restaurantes que contendrá el listado:

En app.js:

app use

Por último le pedimos a express que haga uso de la ruta que hemos definido:

app.use(‘/restaurantes’, restaurants_route);

Ahora vamos a definir la vista:

 

Express utiliza plantillas jade (ahora se llama pug) para las vistas, consultad la sintaxis:

Con esta información creamos el siquiente archivo restaurantes.jade En views/restaurantes.jade:

extends layput

Ahora ejecutamos nuestro programa con npm start y accedemos a http://localhost:3000/restaurantes. Veremos un HTML con una lista de todos los restaurantes que sirven comida Irlandesa.

 

Aplicando algo de formato con Bootstrap 4

Vamos a incluir Bootstrap 4 en nuestro proyecto para dar algo de formato al resultado. Las plantillas Jade pueden extender unas de otras, por eso en la plantilla que hemos editado tiene como primera línea este código:

extends layout

Por tanto, nuestra plantilla restaturantes.jade hereda la estructura de la plantilla layout.jade.

 

Es en esta plantilla donde vamos a incluir los css y javascript necesarios para que funcione Bootstrap 4.

 

Sustituimos el contenido de layout.js por este:

views/layout.jade:

bootstrap líneas

Incluimos los css y js necesrios por medio de CDNs.

 

Vamos a cambiar nuestra plantilla restaurantes.jade por este código:

 

Para mejorar el aspecto de nuestra aplicación, vemos que en la base de datos MongoDB, tenemos más información disponible sobre cada restaurante.

Además del nombre del restaurante, podemos usar el barrio y la dirección completa para ampliar la información que ofrecemos al usuario y formatearla de una manera más útil y atractiva.

 

También observamos que bajo la propiedad address, tenemos un array en la propiedad coord. Con la latitud y longitud del restaurante. Utilizaremos estos datos junto con la API de Google Static Maps para representar un pequeño mapa con la ubicación.

 

Para que esto funcione en tu aplicación, debes obtener una clave API de Google Maps static y sustituirla en la url de maps.googleapis.com/maps/api/staticmap por tu propia clave. En el código de más abajo, se indica en naranja el lugar donde debes poner tu clave.

 

Para obtener una clave te recomendamos seguir estas instrucciones:

 

En la plantilla Jade observarás que hemos modificado la estructura añadiendo clases que nos permitan hacer uso de componentes Bootstrap 4 para formatear nuestro contenido.

Observa que para acceder a las distintas variables que contienen nuestros datos, usamos restaurante.propiedad.propiedad_subordinada. Por ejemplo para acceder a la calle, usamos la variable restaurante.address.street. Vamos a ver cómo queda nuestra plantilla:

views/restaurantes.jade:

lineas codigo plantilla

Si ejecutamos nuestra aplicación ahora, veremos que el resultado es más usable y presentable que lo que habíamos conseguido hasta ahora:

restaurantes

Si quisiésemos ordenar los resultados por barrios, por ejemplo, podríamos ir a nuestra app.js y modificar la línea en la que obtenemos los registros de la base de datos, utilizando la función sort ({borough:1}):

Desde aquí se nos abren infinitas posibilidades, como ofrecer al usuario un filtro por nombre, barrio o dirección, crear un CRUD que nos permita añadir restaurantes, editar los existentes o borrarlos, etc. Para esto podríamos ayudarnos de Mongoose una solución de modelado de datos que nos permite crear aplicaciones CRUD con MongoDB de manera rápida y eficiente.

En la parte de frontend, integraríamos Angular2 y crearíamos los componentes necesarios para dotar a nuestra aplicación de toda la potencia de una aplicación MEAN.

 

Y hasta aquí nuestro tutorial Mean Stack ¿Quieres saber más? Mira nuestro itinerario sobre Full Stack developer Javascript e introdúcete en uno de los perfiles más demandados en el mercado laboral.

Port Relacionados

Déjanos un comentario

Debes estarconectado/a para publicar un comentario.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies

ACEPTAR
Aviso de cookies