bookpaso1b - keblato/TutorialesTalleres-Angular GitHub Wiki
Book - paso 1b
Puede comenzar por hacer un checkout del release del paso-1b del repositorio del front.
Para ello, abra Visual Studio Code y desde el terminal integrado ejecute el siguiente comando:
git checkout -f paso-1b
Vuelva a ejecutar el comando para instalar los paquetes necesarios:
npm install
Puede correr la aplicación con el comando:
ng serve
Si accede a localhost:4200 verá que el BookStore está vacío, es decir que aparentemente no hay ni libros, autores ni editoriales:
 |
|---|
| Figura 1: BookStore vacío |
Esto se debe a que la aplicación ya no está compuesta únicamente por el proyecto del front en Angular, sino que ahora cuenta con un back desarrollado en Node.js. Este se encuentra en otro repositorio que deberá clonar en un directorio diferente.
Ejecución del back
| URL: | https://github.com/Uniandes-isis2603/node_backstepbystep |
|---|---|
| Release: | git checkout -f paso-1 |
En un directorio diferente, clone el repositorio que contiene el back.
git clone https://github.com/Uniandes-isis2603/node_backstepbystep
Haga checkout del release del paso-1:
git checkout -f paso-1
Instale los paquetes necesarios:
npm install
Y lance el back con el comando:
npm start
 |
|---|
| Figura 2: ejecución del back |
Si refresca el navegador en localhost:4200 verá que el BookStore vuelve a mostrar los libros, los autores y las editoriales
 |
|---|
| Figura 3: el BookStore muestra los datos traídos del back |
El back
El back está desarrollado en Node.js, funciona como un API REST y su estructura es la siguiente:
 |
|---|
| Figura 4: estructura del back |
Diseño global del back
En el diagrama a continuación se muestra el diseño del back:
 |
|---|
| Figura 5: diseño global del back |
El back se divide en tres elementos principales: app.js, los controladores y los servicios.
app.js
El archivo app.js es la base del back.
 |
|---|
| Figura 6: app.js |
El back importa tres paquetes esenciales:
express: un framework para aplicaciones web
 |
|---|
| Figura 7: express |
body-parser: que permitirá trabajar con las peticiones que llegan al API REST
 |
|---|
| Figura 8: body-parser |
cors: que esencialmente se encarga de permitir que se acepten peticiones provenientes de otras direcciones
 |
|---|
| Figura 9: cors |
Si es de su interés, puede revisar la documentación de cada uno de estos paquetes en npm haciendo click en el nombre de cada uno de ellos.
El puerto para recibir las peticiones está definido como el 8000. Puede cambiarlo, pero no debe olvidar modificarlo también el proyecto del front en los archivos ubicados en el directorio src/environments. Esto se explicará en una sección más adelante.
En este archivo también se definen los 3 controladores que atenderán las peticiones REST (authorsController, booksController y editorialController).
De igual forma, se define una ruta base para las peticiones /bookstore/api.
Los controladores
Estos están ubicados en el directorio /app/controllers y se nombran de acuerdo a nombre.ctrl.js. Estos tienen la responsabilidad de implementar el API REST.
La estructura de un controlador se muestra a continuación:
 |
|---|
| Figura 10: books.ctrl.js |
El paquete express para el manejo de la aplicación, y en especial para utilizar su router y poder definir las rutas del API REST.
En este caso, cada controlador solo cuenta con una ruta que se encarga de devolver las lista de libros, autores y editoriales.
Para ello, los controladores definen la ruta de la petición get, por ejemplo /books, /authors y /editorials. Es decir que para hacer un get de la lista de libros se debe hacer una petición /bookstore/api/books (la ruta base del app.js + la definida en el controlador).
El router permite obtener la petición req (request - que en este caso no se utiliza) y lo que será la respuesta del back res.
Por medio del servicio booksService, el controlador obtiene la lista de libros, le asigna el código de estado 200 a la respuesta (que significa que la petición se ejecutó correctamente) y envía la lista.
Nota: para más información sobre los códigos de estado puede revisar el link haciendo click.
Los servicios
Estos están ubicados en el directorio /app/services y se nombran de acuerdo con nombre.srv.js.
Los servicios se encargan de la lógica y la persistencia, es decir de realizar las operaciones en la base de datos y de devolver a los controladores los resultados de estas.
La estructura básica se muestra en esta imagen:
 |
|---|
| Figura 11: books.srv.js |
Los servicios definen métodos que reciben típicamente los parámetros que necesitan para las búsquedas en la base de datos y dos promesas success y error que se encargarán de informar al controlador si hubo o no problemas con los queries en la base de datos.
Para efectos de simplicidad en este paso, aún no se cuenta con una base de datos, sino que la lista de libros que retorna el servicio es el mismo archivo .json que en el paso-1a se obtenía directamente en los servicios del proyecto del front.
Conexión del front y el back
Después de haber hecho el checkout del release paso-1b del repositorio del front, verá que los servicios de cada módulo cambiaron ligeramente.
Ahora, los servicios importan el archivo environment (ubicado en src/environments) para poder obtener la ruta del back (API_URL) y tienen una variable para acceder a los recursos correspondientes. En el caso del book.service.ts, el cambio se refleja así:
 |
|---|
| Figura 12: conexión front - back |
De esta forma, cada servicio hace la petición al API REST para obtener la lista de libros, autores o editoriales, para luego transmitírsela a los componentes a través del Observable que se explicó en el paso-1a.
En el paso siguiente paso-1c se empezará a utilizar una base de datos mysql.