Creando el Kanban Board
Ahora vamos a iniciar con nuestro Kanban, así que manos a la obra 👍
Los prerrequisitos serán de un nivel de conocimientos técnicos y de una instalación mínima requerida en tu máquina.
En conocimientos técnicos es importante que conozcas lo básico de Angular, como son los componentes, directivas, módulos, servicios, routing y formularios.
Necesitamos un Editor de texto o IDE, puede ser visual studio code o el IDE o el editor de texto de tu preferencia.
Qué es un IDE?
Es un entorno de desarrollo integrado o interactivo, que te permite hacer más funcionalidades, puedes instalar extensiones en el para ayudarte a ser más productivo en tu trabajo. Incluso hay extensiones para editar el tema de nuestro entorno de desarrollo.
Por último necesitamos el CLI-Angular, que nos facilita la creación, generación, ejecución, testing, deploy, en el caso de no tener aún este último instalado, solo necesitas ejecutar en tu terminal, este comando:
npm install -g @angular/cli
Un Kanban es como un tablero. Sabemos que hemos estado en una situación social de pandemia, que nos ha afectado un poco a nivel productivo, este proyecto te ayudará a organizar un poco tus tareas del día a día, de una forma ágil y efectiva.
Dirás que este tablero, es parecido a una aplicación de las que encuentras por ahí para descargarla en tu máquina, para qué este proyecto?. Te cuento que con este proyecto podrás ver un poco que tanto tiene esa aplicación que descargas, lo harás tú mismo y podrás personalizarlo de acuerdo a tus necesidades e integrarlo con las herramientas que desees, puedes ir gradualmente aumentandole la complejidad.
En este tablero podremos ir creando nuestras tareas, tendremos 3 listas, una de tareas: ¿qué hacer?, otra de tareas en progreso, y una de está hecho, en estas listas iremos colocando las tareas que vayan pasando por cada una de esas etapas.
Tendremos un home, en él podremos ver una lista de nuestras tareas de acuerdo a la prioridad, estas tareas se crearán en la sección tablero donde crearemos nuestras tareas, las podremos mover por nuestras listas y una vez creadas, podemos, en el home revisarlas por categorías.
Usaremos un poco de componentes CDK, así que repasaremos un poco estos conceptos.
Una vez instalado el Angular CLI, crearemos un proyecto y añadiremos Angular Material e incluiremos uno de los temas sugeridos, crearemos el módulo donde iremos añadiendo nuestros componentes de Material y CDK.
En nuestro IDE en la terminal ejecutaremos el siguiente comando:
ng new workshop
- Podemos seleccionar que sea estricto.
- Usaremos SASS, en este caso escogeremos la sintaxis de sasy.
- Diremos "yes" al routing
- Una vez termina la creación de nuestro proyecto, podemos ejecutarlo con:
ng serve -o
Es hora de incluir Angular Material y los componentes de CDK, ejecutaremos el siguiente comando:
ng add @angular/material
Seleccionamos un tema:

Configuramos la tipografia global y el browser animation de material.

En nuestro archivo styles.scss incluiremos los estilos del tema que acabamos de incluir
@import '@angular/material/prebuilt-themes/indigo-pink.css';

Creemos un módulo de material-cdk en el cual iremos importando los módulos de Material y de CDK
ng g m material-cdk

Crearemos nuestro módulo shared y core.
ng g m core
ng g m shared
Importamos el Core Module y el Shared Module en el App Module
app.module.ts
import { CoreModule } from './core/core.module';
import { SharedModule } from './shared/shared.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
...
CoreModule,
SharedModule,
...
],
...
En nuestro Shared creamos una carpeta components donde incluiremos el componente header y el footer
ng g c shared/components/header
ng g c shared/components/footer
Importamos el módulo de material-cdk en nuestro shared, ya que más adelante incluiremos varios módulos que usaremos en nuestro modulo shared. Ademas crearemos una constante donde pondremos ahi los elementos que vamos a incluir en las declaraciones y en los exports:
shared.module.ts
...
import { MaterialCdkModule } from "./../material-cdk/material-cdk.module";
import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';
const declarables = [ HeaderComponent, FooterComponent ];
@NgModule({
declarations: [declarables],
imports: [
CommonModule,
MaterialCdkModule,
],
exports: declarables,
})
export class SharedModule { }
En el Modulo de Material-CDK incluiremos dos componentes de Material y creamos una constante para colocar los componentes en las declaraciones y exportarlos para ser usados. Importamos el módulo Toolbar y el icon en nuestro módulo material-cdk.
material-cdk.module.ts
material-cdk.module.ts
//Material
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
const components = [MatToolbarModule, MatIconModule];
@NgModule({
declarations: [],
imports: [CommonModule, components],
exports: components,
})
export class MaterialCdkModule {}
Coloquemos algo de contenido en nuestro componente Footer y Header.
En nuestro header crearemos un Toolbar, incluiremos algunos iconos para que nuestro toolbar se vea más bonito, si deseas añadir otro icono diferente puedes buscar la lista de iconos en la página de Angular Material.
Nuestro toolbar tendrá un menú, en los anchor añadiremos las rutas que tendremos de los módulos que crearemos en clases posteriores.
Colocaremos un poco de formato, para que nuestra aplicación vaya luciendo mejor.
header.component.html