/homeAid

Home Aid - Proyecto 2

Primary LanguageTypeScript

HomeAid

This project was generated with Angular CLI version 1.0.4.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Especificaciones de Development

Instalación

Vamos a usar Yarn para las instalaciones de dependencias, para instalarlo, usen npm install -g yarn o sudo npm install -g yarn, dependiendo de sus permisos, después nada más hagan cd al directorio de este proyecto y ejecute el comando yarn para instalar las dependencias.

Yarn es similar a npm, pero instala las dependencias mucho más rápido.
Antes de ejecutar yarn para instalar las dependencias, lean la sección de Getting Started.

Como instalar paquetes con Yarn

Para instalar paquetes con Yarn se hace de la siguiente manera: yarn add node-sass --dev. el add funciona igual que el install de npm y el --dev igual que --save-dev, en el ejemplo anterior el paquete node-sass hace referencia a cualquier paquete que tambien este para npm, en raros casos, puede que el paquete no se encuentre disponible para Yarn, en ese caso se podría instalar de la manera regular, con npm.

Getting Started

Hice un comando Shell que debería de usarse cada vez que alguien no haya trabajado en el repositorio en un rato o para la primera vez que corre el proyecto, para usarlo ejecuten el comando sh start.sh en el directorio de este proyecto, este comando, borrara la carpeta node_modules y los yarn.lock y volverá a instalar las dependencias, esto por si alguien instalo alguna dependencia en el proyecto y cuando alguien más lo ejecute no se quiebre por la falta de esa dependencia, también ejecutará npm start para no tener que hacerlo y abre el browser por defecto en su máquina en la ruta http://localhost:4200/. En resumen, ejecuta la instalación, les abre el browser y ejecuta npm start. Una vez que haya terminado de compilar con npm start el browser se refrescara.

Para evitar errores a la hora de instalacion instalar:

  • npm install -g concurrently
  • npm install -g pug-cli

Development

git checkout dev para pasarse al branch de Development.

Recomendaciones de paquetes de Atom

Tecnologías

Angular CLI

Version 1.0.4

npm install -g @angular/cli

Node

Usaremos la última versión de node, la cual es la 7.10.0 y la 4.2.0 de npm.
Recomiendo usar NVM para el manejo de node y sus versiones.

Bootstrap

Usaremos ngx-bootstrap, es un paquete que posee todas las características de Bootstrap, pero para Angular 2.
Aqui esta la documentación.

Angular Material

Usaremos Angular Material junto con Bootstrap para la implementacion del UI Aqui esta la documentación.

Pug

Usaremos Pug para agilizar el proceso de escribir HTML, Pug es una herramienta que ofrece una nueva sintaxis para escribir HTML, donde no son necesarios los tags y es por indentación, aca esta la documentación.

SCSS

Para manejar los estilos, usaremos scss, ya configure el proyecto para que reconociera los archivos con extensión .scss e inclusive a la hora de ejecutar ng generate component component-name generará un archivo .ts, uno .html y uno .scss.

Firebase

Comming soon.

Estándares (Alpha)

TypeScript

El siguiente es el ejemplo de cómo debería de estar escrito un componente, definiremos las propiedades de la clases con public, en caso de que el componente tenga un nombre extenso, será separado por un -, como por ejemplo ticket-component.

   import { Component } from '@angular/core';

   @Component({
     selector: 'ticket',
     templateUrl: './ticket.component.html',
     styleUrls: ['./ticket.component.scss']
   })
   export class TicketComponent {
     public title: string = 'Hello World';
     public description: string = 'What up!';

     sayDescription() {
       console.log(this.description);
     }
   }

SCSS

Para escribir en archivos scss usaremos la metodología BEM, en este link pueden ver ejemplos y también en el componente ticket. Aunque, en vez de separar con __ los Blocks de los Elements se usará - y en caso de un Modifier se usará _. Ejemplo:

.ticket {
 &-title {
   color: green;
   &_icon: {
     color: blue;
   }
 }
}

Esto hará que el elemento con clase ticket-name sea verde y ticket-name_icon sea azul. Esta metodología permite la creación de estilos de una manera más ordenada e intuitiva.

Pug

Este es un ejemplo de código en Pug.

.ticket
  h1.ticket-title {{title}}
  p.ticket-description {{description}}
  button.btn.btn-success((click)="sayDescription()") Say Hello

Esto compilara en esto:

<div class="ticket">
  <h1 class="ticket-title">{{title}}</h1>
  <p class="ticket-description">{{description}}</p>
  <button class="btn btn-success" (click)="sayDescription()">Say Hello</button>
</div>

CSS hover

Para utilizar el hover de los botones: http://ianlunn.github.io/Hover/