Un CRUD atomizado (I). Preparando la base.

En esta sección del curso vamos a desarrollar una nueva versión del CRUD que ya conocemos, pero lo vamos a hacer de otra manera. Hasta ahora hemos aprendido mucho con los CRUD que hemos hecho. Hemos aprendido a usar un servicio en un módulo, implementando en él la lógica de todos los componentes de dicho módulo. Esto puede ser una buena práctica, cuando el módulo es simple y ligero, cómo hemos visto. Sin embargo, en módulos más amplios, que puedieran tener varia docenas de componentes, nos conviene buscar un equilibrio entre la unificación y la atomización. Un módulo demasiado atomizado, con la lógica de cada componente en dicho componente, podría estar repitiendo operaciones o micro operaciones que podrían unificarse en un servicio. Un módulo con toda, o casi toda la lógica en un servicio podría dar lugar a un código difícil de rastrear, leer o mantener. La solución perfecta, como en casi todo en la vida, está en el equilibrio. Las partes de la lógica que pueden ser comunes a varios componentes del módulo, deberían estar en un servicio de ese módulo, mientras que las partes que son propias y exclusivas de cada componente deberían estar en el TypeScript de ese componente.

También hemos aprendido bastante sobre comunicaciones HTTP con API’s. Sin embargo, vamos a seguir profundizando en este tema, con aspectos como la captura de errores, redirecciones de una vista a otra y otros conceptos interesantes. Aprenderemos más sobre el enrutamiento y los observables, y conoceremos los interceptores de Angular.

Además, el CRUD que vamos a construir aquí nos servirá para dos fines. Por un lado, nos permitirá repasar conceptos esenciales que ya conocemos, pero que debemos interiorizar hasta que nos salgan tan naturales como respirar. Por otra parte, nos preparará el terreno para aprender cosas nuevas. El CRUD que construyamos aquí nos será muy útil en secciones posteriores del curso.

INICIANDO EL PROYECTO

El construir el proyecto desde cero, detallando los pasos que vamos a dar, no es banal. A lo largo de los artículos anteriores hemos ido aprendiendo muchos conceptos y recursos, y nos vendrá múy bien usar este artículo como repaso de los comienzos, para que no se nos olviden los fundamentos.

Empezamos situándonos en nuestro directorio localhost y creando una nueva aplicación. La vamos a llamar ang-crud-atom, con el prefijo aca y con sistema de enrutamiento, así:

ng new ang-crud-atom -p aca --routing true

Una vez creada, abrimos el VSC en la carpeta de la aplicación, e instalamos jQuery, Bootstrap 3 y Moment.js. Podemos hacerlo fácilmente, añadiendo, en la sección dependencies del archivo package.json lo siguiente:

Después, en la consola tecleamos:

npm install

Tras unos segundos, El Node Package Manager habrá descargado estas tres dependencias de Internet, y las habrá alojado en el directorio node_modules.

Ahora modificamos el archivo .angular-cli.json, para que el CLI reconozca las dependencias y podamos usarlas en nuestra aplicación. Buscaremos las siguientes líneas:

Las reemplazaremos con:

El siguiente paso es copiar en el archivo src/styles.css la misma hoja de estilos que ya tenemos de las aplicaciones anteriores. Podríamos haberla retocado en algo (y, quizá, lo hagamos más adelante). Sin embargo, para empezar nos servirá perfectamente:

LA ESTRUCTURA DE MÓDULOS Y COMPONENTES

Llegados a este punto vamos a crear la estructura básica de módulos y componentes. Vamos a crear dos módulos, llamados globals y members. Al segundo le dotaremos de enrutamiento propio, porque lo cargaremos en diferido (lazy load, o carga perezosa), para repasar también este tema. Mantenemos la estructura de dos módulos porque nos va a permitir cubrir todos los objetivos didácticos de este proyecto, al tiempo que lo mantenemos estructuralmente simple.

ng g m globals
ng g m members --routing true

EL MÓDULO GlobalsModule

En el módulo globals colocaremos los siguientes componentes:

  • HomeComponent. Será el componente de inicio de la aplicación.
  • NavBarComponent. Será el componente que cree la barra de navegación.
  • HeaderComponent. Contendrá la cabecera de la aplicación.
  • NotFoundComponent. Generará una vista cuando el usuario trate de acceder a una ruta que no exista en la aplicación.

Más tarde, en artículos posteriores, añadiremos otros componentes pero, por ahora, esto nos va a valer. Los crearemos así:

ng g c globals/Home
ng g c globals/NavBar --export
ng g c globals/Header --export
ng g c globals/NotFound

En el TypeScript del módulo (globals.module.ts) debemos incluir el RouterModule de Angular, así:

Recuerda que esto lo necesitamos porque en este módulo va la barra de navegación, que contiene los enlaces.

Observa que aún no hemos incluido nada de código específico en los componentes. De momento, sólo estamos preparando la estructura en líneas generales.

EL MÓDULO MembersModule

En este módulo vamos a crear menos componentes, aunque también crearemos bastante más código. Los componentes serán los siguientes:

  • MemberFormComponent. Este componente tendrá el formulario que nos permitirá crear un nuevo socio, o editar uno existente. Usaremos un sólo componente para ambas funcionalidades, y aprenderemos técnicas que permitirán modificar el comportamiento de dicho componente, según lo que esperemos de él.
  • MembersListComponent. El componente que nos dará el listado de los miembros registrados.

Los crearemos así:

ng g c members/MemberForm
ng g c members/MembersList

Además, añadiremos uns clase, llamada Member, que definirá la estructura del objeto de cada socio, así:

ng g class members/classes/Member

Su código, en principio, será el siguiente:

También definiremos dos servicios: uno que se ocupará de los métodos de conexión con API’s (los que usamos para obtener observables), llamado HttpConnectService, y otro que se ocupará de empaquetar los datos de un usuario, bien para altas o para ediciones, para poder mandarlo al método que, a su vez, lo mandará a la API correspondiente. Este último se llamará DataPackService. Los crearemos así:

ng g service members/services/HttpConnect
ng g service members/services/DataPack

Dentro de la ruta src/app/members/services/ se han creado cuatro archivos nuevos. Dos de ellos tienen la terminación .spec.ts y, de momento, podemos ignorarlos. Los archivos de los servicios tienen, por ahora, la estructura básica:

Dentro del TypeScript de este módulo (members.module.ts) debemos asegurarnos de que haya tres puntos cubiertos:

  • Que se haya importado el enrutador interno de este módulo. Si tienes dudas respecto a esto, respasa este artículo.
  • Que se haya importado el FormsModule, ya que usaremos las directivas de formulario de Angular como, por ejemplo, [(ngModel)].
  • Que se hayan proveido los dos servicios en el módulo.

El código de este archivo queda, por ahora, así:

Las líneas resaltadas muestran los puntos que hemos dicho que deben estar cubiertos.

ARCHIVOS GENERALES DE LA APLICACIÓN

Por encima de módulos, componentes y otros elementos, debemos configurar algunos archivos generales de la aplicación. Estos se encuentran en la ruta src/app/.

Para empezar, en el archivo app.component.ts podemos eliminar la línea que pone title = 'aca';, puesto que no vamos a necesitarla.

En app.module.ts debemos importar RouterModule, HttpClientModule, GlobalsModule y MembersModule. Los dos primeros son de Angular y los otros dos son nuestros propios módulos. El archivo nos queda así:

Aún hay otro punto global de la aplicación que tenemos que tocar. Sabemos que vamos a hacer un CRUD que, mediante unas API’s, trabajará contra una base de datos. Por lo tanto, tenemos que definir cuales serán las rutas de las API’s, tanto para desarrollo como para producción. Por simplificar, en este ejercicio pondremos las dos rutas iguales. Sabemos que esto lo establecemos en los achivos src/environments/environments.ts y src/environments/environments.prod.ts, cuyos listados nos quedarán así:

ATENCIÓN. Sabemos que el CLI de Angular escoge, de forma automática, el entorno necesario, según estemos trabajando en el modo de desarrollo, o con la versión de producción creada con npm run build. Esto es parte de la magia de Angular… pero menos. En realidad, esto está perfectamente tipificado en el fichero .angular-cli.json. En él encontramos, entre otras, las siguientes líneas:

Como ves, no es magia. Está todo previsto.

LOS COMPONENTES DE GlobalsModule

Las vistas de los componentes de GlobalsModule no presentan, de momento, novedades mencionables. Tanto el HeaderComponent, como el HomeComponent y el NotFoundComponent son los mismos que venimos usando hasta ahora. Más adelante, en esta aplicación, los modificaremos para ir aprendiendo nuevas funcionalidades pero, por ahora, nos valen así.

El único componente de este módulo que es específico de este proyecto es el NavBarComponent, cuya vista (nav-bar.component.html) tiene el siguiente código:

No es que tenga nada de particular. Solo es una barra de navegación de Bootstrap 3. Lo único resaltado es que hemos puesto la opción de Miembros en un menú desplegable que nos permite acceder al listado por una parte, y a la creación de un nuevo miembro por la otra.

Por otra parte, en la lógica de HomeComponent (home.component.ts) hemos añadido el jQuery que ya conocemos para modificar el título de la pestaña del navegador y para agregarle la clase active del Bootstrap al enlace correspondiente del menú. Nada que no conozcas ya, como puedes ver:

LOS COMPONENTES DE MembersModule

En estos componentes no vamos a añadir todavía ningún contenido específico. Lo único que vamos a modificar en la lógica de los dos componentes es el equivalente a lo que hemos hecho en HomeComponent para que se muestren activos los enlaces adecuados de la barra de menús, y para que cambie el título de la pestaña.

LOS ENRUTADORES

En cualquier aplicación SPA desarrollada con Angular tenemos, al menos, un enrutador principal. Bien. Esto no siempre es exactamente así. Podríamos no tener sistema de enrutamiento si nuestra aplicación fuera tan simple que todos los posibles contenidos estuvieran en una sola vista. Pero, seamos claros. Para una cosa tan simple, quizá ni siquiera emplearíamos Angular. La mayoría de las veces (quizá el 99.9%), habrá más de una vista y, por tanto, un menú, y un enrutador. El archivo es app-routing.module.ts:

Quiero llamar tu atención sobre la línea resaltada. Como ya sabes, es vital para que el enrutador funcione… y extremadamente fácil de olvidar. Si la olvidas, o la omites, tu enrutador no funcionará, y te volverás loco intentando saber qué pasa.

Además, como tenemos un módulo que se carga en diferido, en esta aplicación tenemos un enrutador específico para ese módulo. Es el archivo members-routing.module.ts, y su listado (por ahora) es el siguiente:

CONCLUYENDO

Bien. Este artículo ha sido extenso, pero fácil de digerir. Esto se debe a que no hemos aportado nada nuevo a lo que ya sabemos sobre Angular. Sólo hemos repasado la creación de la estructura básica de la aplicación, y los conocimientos que ya tenemos. El resto de artículos de esta sección serán más breves, pero también más intensos. No quiero decir que no vayamos a seguir repasando conceptos ya familiares cuando lo necesitemos, pero serán más específicos, y también introduciremos, donde proceda, conocimientos nuevos. De momento, puesde descargarte la aplicación, en su estado actual, en este enlace. Pruèbala, juega con ella y, sobre todo, repasa el código. Eso te ayudará a interiorizar y asimilar lo que ya conoces. Nos vemos en el siguiente artículo.

   

Deja un comentario