BLOG

Viernes, 19 Enero 2018 12:26

PAUTAS PARA LA IMPLEMENTACIÓN DE UN PROYECTO WEB CON MATERIAL DESIGN COMPONENTS FOR ANGULAR

Cristian Villegas con el Logo de Trans SolutionsEl blog en esta oportunidad es presentado por Cristian Villegas Chávez, destacado developer en Trans Solutions Systems. Material Desing es un lenguaje de diseño elaborado por Google y presentado en junio de 2014. En este artículo veremos algunas pautas para la implementación de un proyecto web con material design components for angular.

A la fecha en la que se publica este artículo, Material Design components for Angular se encuentra en su versión estable 5.0.4. La cual ya posee la mayor parte de los controles en componentes para poder usar en el desarrollo de aplicaciones web.He ido observando su progreso a lo largo de su implementación. Incluso con la versión 2.0.0-beta.10 llegué a poner a prueba un proyecto. Realizando una comparación con la versión actual encontramos grandes cambios. Por ejemplo, la forma de importar sus módulos, agregar los selectores y el soporte de más componentes.

A continuación, mencionaré algunas pautas para la implementación de un proyecto web con Material Design components for Angular.

  1. Material Design

Es creado y diseñado por Google. Material Design es un lenguaje de diseño que combina los principios clásicos del diseño exitoso junto con la innovación y la tecnología. El objetivo de Google es desarrollar un sistema de diseño que permita una experiencia de usuario unificada en toda la plataforma.

Para aplicar de forma correcta Material Design se debe guiar de la documentación oficial que ofrece Google https://material.io/guidelines.

  1. Para crear el proyecto base usamos el comando ng new tssmaterialdesign. Luego, añadimos el paquete del Material Design

En este punto usaremos el gestor de paquetes de yarn ya que es mucho más rápido que el gestor de paquetes npm.

Para añadir el paquete de material ejecutamos el siguiente comando:

yarn add @angular/material @angular/cdk                            

Algunos componentes de Material dependen de módulos de animaciones angulares para poder realizar transiciones más avanzadas. En caso necesitemos estas funcionalidades debemos agregar el siguiente paquete:

yarn add @angular/animations                       

Se debe aclarar que aún no es compatible con todos los navegadores, si quiere dar soporte se debe agregar web animations-js.

En caso que no quisiera agregar otras dependencias para animaciones puede agregar el siguiente módulo NoopAnimationsModule de angular.

  1. Ahora agregaremos la referencia de los estilos e iconos del Material para poder crear nuestros componentes y visualizar los controles.

Se requiere aplicar el tema para usar los estilos básicos y temáticos. Para ello, incluyamos el siguiente import en el archivo de styles.scss de nuestro proyecto:

@import "~@angular/material/prebuilt-themes/indigo-pink.css"      

También es posible realizar temas personalizados. Para ello debemos seguir la siguiente guía de Material Angular https://material.angular.io/guide/theming

Para el caso de usar los iconos de diseño de materiales oficiales se debe agregar el link en el archivo index.html del proyecto:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  1. Cuando nuestra aplicación está orientada a dispositivos móviles y equipos que con tecnología touch, lo recomendable para una mejor interacción con el usuario es agregar el package de HammerJS a nuestro proyecto.

HammerJS agrega soporte para gestos táctiles y es utilizado por los componentes de Icon Material.

Lo agregamos con la siguiente línea de comandos:

yarn add hammerjs                                 

  1. Hasta este punto ya agregamos todo lo necesario para poder desarrollar nuestro proyecto. A continuación, procederé a importar el modulo del Material.

Agregamos el módulo de Card y Button en el app.module a nuestro proyecto:

import {MatCardModule, MatButtonModule } from '@angular/material' ;      

Agregamos un poco de estilo en el app.component.scss:

código app.component.scss

Compilamos el proyecto y como resultado observamos el siguiente diseño: 

 

Material Desing diseño

 A continuación, agregamos un módulo de shared en el proyecto. Dentro importamos los módulos de:

import { MatToolbarModule, MatCardModule, MatIconModule, MatButtonModule, MatMenuModule } from 'angular/material' ;   

La estructura del proyecto quedaría de la siguiente forma:

Estructura de proyecto en visual studio code

 

Una vez compilado el proyecto como presentación final tendríamos los siguiente:

Producto final de proyecyo Material Desing

 

Concluyendo con las pautas, en caso se tengan una aplicación orientada a usuarios finales de dispositivos móviles es recomendable utilizar Material Design for Angular. Se puede aplicar con mucha facilidad y tener esa apariencia como aplicación nativa.

El proyecto se encuentra en al siguiente ruta.

https://github.com/cnvillegaschavez/tssmaterialdesign