Forem: kikstart.dev

Agregando autenticación a tu app

Derlys — Sat, 24 Oct 2020 17:31:37 +0000

Requisitos

Asegurate de tener una app básica creada, similar a la que hicimos en la serie # 1 Introducción a Kikstart UI.

Paso # 1

En primer lugar generamos los componentes y el módulo que los contendrá.

1: Crea una carpeta llamada auth y genera los componentes register, login y logout.

ng g module auth/register --route register --module app

ng g module auth/login --route login --module app

ng g module auth/logout --route logout --module app

Paso # 2

Renderizamos las rutas de los componentes creados.

1: Abre el archivo app.component.ts y agrega los labels dentro del array de links asi:

{ label: 'Register', path: '/register'},
{ label: 'Login', path: '/login' },
{ label: 'Logout', path: '/logout'},

Paso # 3

Creamos el servicio,lo configuramos para que esté listo y utilizarlos en nuestro componente login.

1:Crea el servicio ejecutando el comando

 ng g service auth/auth

2:Añade las dependencias necesarias para utilizar las funcionalidades de firebase. Utiliza los siguientes comandos:

npm i @angular/fire
npm install @angular/fire firebase --save

3:Abre el archivo auth.service.ts y agrega lo siguiente en la parte superior:

import * as firebase from 'firebase';

4:En el mismo archivo auth.service.ts agrega lo siguiente en la clase AuthService:

export class AuthService {
  user: firebase.User;
  isLoggedIn: boolean;

5:Luego en el mismo archivo agrega lo siguiente en la parte superior:

import { AngularFireAuth } from '@angular/fire/auth';

6:Cuando hayamos importado AngularFireAuth podemos inyectar su funcionalidad en el constructor:

 constructor(private readonly afa: AngularFireAuth) {
    this.afa.authState.subscribe((res) => {
      console.log(res);
      this.user = res;
      this.isLoggedIn = !!this.user;
    });
  }
}

7:Importa el modulo para utilizar observables asi:

import { from, Observable, ObservedValueOf } from 'rxjs';

💡Nota

Si te aparece inactiva la línea que acabas de colocar en el punto 6 , no te preocupes , apenas estamos construyendo la lógica y no hemos usado Observables, vamos con calma 😉.

8:Como último punto en este paso en el archivo auth.service.ts agrega lo siguiente después del constructor:

login(
    email: string,
    password: string
  ): Observable<ObservedValueOf<Promise<firebase.auth.UserCredential>>> {
    return from(this.afa.signInWithEmailAndPassword(email, password));
  }

  register(
    email: string,
    password: string
  ): Observable<ObservedValueOf<Promise<firebase.auth.UserCredential>>> {
    return from(this.afa.createUserWithEmailAndPassword(email, password));
  }

  loginGoogle(): Observable<
    ObservedValueOf<Promise<firebase.auth.UserCredential>>
  > {
    const provider = new firebase.auth.GoogleAuthProvider();
    return from(this.afa.signInWithPopup(provider));
  }

  logout(): Observable<ObservedValueOf<Promise<void>>> {
    return from(this.afa.signOut());
  }
}

Paso # 4

Ahora crearemos las funciones para cada una de las formas de autenticación y luego las configuraremos.

💡Recuerda

En el paso anterior implementamos varias formas de autenticación cuando quieras puedes hacer uso de estos servicios solo debes configurarlo en tu componente como lo hacemos en el punto # 3 de este paso.

1: Abre el archivologin.component.ts y agrega lo siguiente en la parte superior:

import { Router } from '@angular/router';
import { AuthService } from '../auth.service';

2:Inyecta e inicializa la forma de autenticación que usarás. En este caso usaras loginGoogle.

private router: Router, private service: AuthService

3: En el mismo archivo login.component.ts agrega la siguiente función:

loginGoogle(): void {
    this.service.loginGoogle().subscribe((res) => {
      console.log(res);
      return this.router.navigate(['/']);
    });
  }

paso # 5

Aquí configuraremos el proyecto que creamos en firebase a nuestra app.

1:Busca en la terminal tu proyecto y ejecuta el siguiente comando:

ng add @angular/fire

💡 KikstartTip

Si es la primera vez que instalas @angular/fire en tu computador te hará preguntas como esta:
Allow Firebase to collect CLI usage and error reporting information? (Y/n).

2: Durante el proceso de instalación sobre el proyecto elige el que quieres desplegar.

Installing packages for tooling via npm.
Installed packages for tooling via npm.
UPDATE package.json (1516 bytes)
✔ Packages installed successfully.
✔ Preparing the list of your Firebase projects
? Please select a project: (Use arrow keys or type to search)
❯ site2 (site2-8ce5b)

3:Configura el enviroment con las llaves de tus proyectos en firebase.

4:En la consola de firebase busca tu proyecto.

5:En descripción general haz clic en configuración del proyecto.

3: Busca el siguiente título:

4: Busca la ruta src/enviroments/enviroment.ts y coloca esta secuencia de comandos con sus respectivas llaves:

export const environment = {
  production: false,
  firebase: {
    apiKey: '',
    authDomain: '',
    databaseURL: '',
    projectId: '',
    storageBucket: '',
    messagingSenderId: '',
    appId: '',
    measurementId: '',
  },
};

5: En tu archivo app.module.ts importa las funcionalidades de la autenticación de firebase para utilizarlas en el siguiente paso.

Agrega las siguientes líneas en la parte superior:

import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';
import { AngularFireAuthModule } from '@angular/fire/auth';
```


6: En el import del mismo archivo agrega esto:



```typescript
AngularFireModule.initializeApp(environment.firebase),
AngularFireAuthModule
```



## paso # 6
Llegó el momento de los templetes, que se haga la luz y renderizamos la lógica que hemos creado.

1: En el archivo `login.component.html` crea el templete para renderizar un formulario y un botón con ayuda de `Kikstart UI`.



```html
<!-- This flex container takes the full height and vertically centers the content -->
<div class="d-flex flex-column h-100 justify-content-center">
  <div class="container">
    <div class="row">
      <!-- This is a single column that is responsive -->
      <div class="col-12 col-md-6 offset-md-3">
        <div class="card">
          <div class="card-header">Login</div>
          <div class="card-body">
            <!-- The formGroup 'form' is defined in the component class -->
          </div>
          <div class="card-footer">
            <div class="d-flex justify-content-between">
              <a routerLink="/" class="ml-2 btn btn-outline-secondary">
                Home
              </a>
              <!-- The button has a click handler, it will be disabled if the form is not valid -->
              <button
                (click)="loginGoogle()"
                type="submit"
                class="btn btn-outline-success"
              >
                Log in
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```


2: Ve a la tu proyecto de firebase y busca la pestaña autenticación, en el botón añadir usuario ingresa un correo y una contraseña para autorizar el login.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n97w8kiltncxc9lwb4q4.png)

Ahora en la consola del navegador tu puedes ver que ya tenemos un usuario que utiliza este servicio.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d58c47zncdusvmh2g19w.png)

Sin embargo como nos damos cuenta en nuestra app que esto pasó, hagamos el siguiente paso.

## paso # 7
Creamos la lógica del logout y agregamos el código del templete para saber cuando estamos logueados o no.

1:Abre el archivo`logout.component.ts` y  agrega lo siguiente en la parte superior:



```typescript
import { Router } from '@angular/router';
import { AuthService } from '../auth.service';
```


2:Inyecta e inicializa el servicio del `logout` en el constructor.



```typescript
constructor(private router: Router, private service: AuthService) {}
```


3: En el mismo archivo `logout.component.ts` agrega la siguiente función:



```Typescript
logout(): void {
    this.service.logout().subscribe((res) => {
      return this.router.navigate(['/']);
    });
  }
```


4:En el archivo `logout.component.html`agrega las siguientes líneas:



```typescript
<button (click)="logout()" class="btn btn-secondary mr-1">
  logout
</button>
```


Asi dando click en el botón `logout` puedes notar que cuando ingresar al login nuevamente te solicitara tu correo.


## Resumen
Hemos agregado 3 nuevos componentes `login`, `register` y `logout`, también hemos configurado estos 3 componentes para darle autenticación a nuestra app.

Puedes encontrar el repositorio con los pasos [aquí](https://github.com/Derlys/Tutorial-auth).

Aplicando lazy loading a tu app

Derlys — Tue, 04 Aug 2020 17:51:58 +0000

Requisitos

Haber hecho tu app básica, puedes tomar el ejemplo del tutorial # 1 de la serie "Introducción a Kikstart UI"

💡Tip

La manera en que generamos el siguiente componente
es mucho más eficiente ya que crea el componente con su
respectiva ruta y módulo.

Paso # 1

Creamos el componente posts con su módulo y rutas.

1: Ejecuta el siguiente comando:

ng g module posts --route posts --module app

Paso # 2

Configuramos nuestra app para utilizar las colecciones del proyecto en firebase.

💡Recuerda

Antes de hacer este paso debiste haber instaladong add @angular/fire y configurar tu environment, como en el tutorial # 4 de la serie 1.

1: Busca la rutasrc/app.module.ts y escribe lo siguiente en la parte superior:

import {AngularFireModule} from "@angular/fire";
import {environment} from "../environments/environment";
import {AngularFirestoreModule} from "@angular/fire/firestore";

2: Luego en el mismo archivo en el array de importscoloca lo siguiente:

 AngularFireModule.initializeApp(environment.firebase),
 AngularFirestoreModule

Paso # 3

Mostrar la ruta

1: Busca la ruta src/app/app.component.tsen el array de link agrega un label más.

 links: UiLink[] = [
    { label: 'Home', path: '/' },
    { label: 'About', path: '/about' },
    { label: 'Contact', path: '/contact' },
    { label: 'Blog', path: '/posts' },
  ];
}

Paso # 4

Creamos el servicio y lo usamos en nuestro componente.

1: Ejecuta el siguiente comando:

 ng g service posts/posts --skip-tests

2: Configura el servicio en el archivo posts.service.ts y agrega lo siguiente en la parte superior:

import { Observable } from 'rxjs';
import { AngularFirestore } from '@angular/fire/firestore';
import { collectionData, docData, fromCollectionRef } from 'rxfire/firestore';

💡Recuerda

Para cada paquete de firebase que utilices debes instalarlo en este caso usamos rxfire entonces lo instalamos.

3: Luego en el mismo archivo en la clase coloca lo siguiente:

export class PostsService {
  blogs: Observable<any[]>;
  collectionRef: any;

  constructor(private firestore: AngularFirestore) {
    this.collectionRef = this.firestore.collection('courses');
    this.blogs = collectionData(this.collectionRef.ref, 'id');
  }
}

Paso # 5

Hacemos la lógica para usar nuestro servicio.

1: Busca la ruta src/app/posts.component.ts coloca lo siguiente en la parte superior:

import { PostsService } from './posts.service';
import { Observable } from 'rxjs';

2:Luego en el mismo archivo en la clase coloca lo siguiente:

export class PostsComponent implements OnInit {
  courses$: Observable<any>;

  constructor(public service: PostsService) {
    this.courses$ = this.service.blogs;
  }

  ngOnInit(): void {}
}

Paso # 6

Finalmente renderizamos los datos en nuestro componente

1: Busca la ruta src/app/posts/posts.component.html y pega lo siguiente:

  <div *ngIf="courses$ | async as posts">
  <div *ngFor="let post of posts">
    <img src="{{ post.author_img }}" />
    <a [routerLink]="['/posts', post.id]">
      <h2>{{ post.title }}</h2>
    </a>

    <h3>{{ post.description }}</h3>

    <h4>{{ post.author_name }}</h4>
  </div>
</div>

Resumen

Generamos un componente post con su módulo y ruta,creamos su servicio y lo usamos en el templete.

Gracias por seguir este tutorial, si tienes algun comentario hazlo a través de mi twitter y con gusto te contestare.

Tutorial: Aplicaciones de Angular CLI con bootstrap

Derlys — Tue, 28 Jul 2020 01:52:20 +0000

En este tutorial, tu aprendes cómo usar estilos en Apps de Angular CLI.

La meta es construir un layout en una aplicación con un header y un footer, una página home, página about y una página login con formulario.

Mira el demo en vivo aquí o el repositorio de Github.

Requisitos

Asegurate que tienes la siguientes herramientas instaladas:

Node.js y NPM, visita su pagina web para las instrucciones de instalación.
- Ejecuta node -v para verificar que tienes versión 12 o más.
- Ejecuta npm -v para verificar que tienes la versión 6 o más.
Angular CLI ( npm install -g @angular/cli@latest para instalar).
- Ejecuta ng --version para verificar que tienes versión 10 o más.

Si prefieres usar yarn, primero configura el package manager de Angular CLI . Esto asegura que la aplicación esta creado con un archivo yarn.lock en vez de un package-lock.json.

1. Crea una nueva aplicación

Abre un terminal y ejecuta el siguiente comando:



ng new sandbox --routing --style scss --strict

El comando ng new genera una aplicación Angular básica en un directorio llamado sandbox e instala sus dependencias.

El --routing le indica a Angular CLI que se genere un módulo de rutas.
El --style scss indica que usamos SCSS para los estilos.
El --strict configura la aplicación para ejecutarse en modo estricto.

Al final de la instalación del app, el Angular CLI también inicializa un repositorio de git y hace un commit inicial.

2. Inicia la aplicación en modo de desarrollo

Después de haber finalizado la instalación, ejecuta el siguiente comando para navegar al directorio del proyecto.



cd sandbox

En el directorio del proyecto, puedes iniciar el servidor de desarrollo usando ng serve:



ng serve

** Angular Live Development Server is listening on localhost:4200, open your browser on (http://localhost:4200/) **

Navega al link mencionado antes por el servidor de desarrollo y verifica que esté funcionando. El app está lista para tener algunos estilos! 😎

3. Instala Bootstrap

Ejecuta el siguiente comando en el directorio de tu proyecto para instalar Bootstrap:



npm install bootstrap

Cuando la instalación finaliza podemos decirle a Angular CLI que use estos estilos.

Abre src/styles.scss y agrega las siguientes líneas:



@import '~bootstrap/scss/bootstrap';
// Set the full page height so we can stick the footer to the bottom
html,
body {
  height: 100%;
}

Después abre src/app/app.component.html y borra todo el contenido,reemplazalo con lo siguiente:



<h1 class="text-center text-primary">Hello Bootstrap!</h1>

Cuando regreses a tu navegador, deberías ver Hello Bootstrap en letras azules grandes 👏🎊.

¡Podemos hacer que nuestra aplicación se vea mejor!

4. Configura el layout de la aplicación

En este paso creamos un UiModule y le agregamos 3 componentes:

LayoutComponent, HeaderComponent, y FooterComponent.

💡Es una buena idea mantener el UI separado del resto de la app. Esta separación de responsabilidades también te permite fácilmente reutilizar el UI en otros proyectos.

4.1 Crea el UiModule

Ejecuta el siguiente comando para generar el UiModule.



ng generate module ui --module app

Despues, genera los 3 componentes dentro de este nuevo módulo:



ng generate component ui/layout
ng generate component ui/header
ng generate component ui/footer

💡 El comando ng generate admite un acceso directo: Usa ng g c para generar un componente, ng g m para generar un módulo, etc.

4.2 Implementa Layout Component

Abre src/app/ui/layout/layout.component.html y reemplaza el contenido con el siguiente pedazo de código:



<!-- This flex container takes the full height -->
<div class="d-flex flex-column h-100">
  <app-header></app-header>
  <!-- The main area does not shrink, 'pushing down' the footer -->
  <main class="flex-shrink-0">
    <!-- This will render the routes -->
    <router-outlet></router-outlet>
  </main>
  <!-- This keeps the footer down if the main content does not fill up the space -->
  <footer class="mt-auto">
    <app-footer></app-footer>
  </footer>
</div>

Podemos usar este LayoutComponent en la ruta, y renderizar los children en la ubicación de router-outlet.

Antes de seguir, asegurate de importar RouterModule en UiModule.

Abre src/app/ui/ui.module.ts y agrega el siguiente código después de los otros imports:



import { RouterModule } from '@angular/router';

Agrega RouterModule a el array de imports:



@NgModule({
  declarations: [LayoutComponent, HeaderComponent, FooterComponent],
  imports: [CommonModule, RouterModule],
})

💡Si olvidas el import de RouterModule, el servidor te dira:

ERROR in src/app/ui/layout/layout.component.html:3:3 - error NG8001: 'router-outlet' is not a known element:
  1.  If 'router-outlet' is an Angular component, then verify that it is part of this module.
  2.  If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.</pre>

4.3 Usa el LayoutComponent

Abre src/app/app-routing.module.ts y reemplaza la linea const routes: Routes = [] con lo siguiente:



const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      // Here we will add our application pages
    ],
  },
];

Asegurate de importar LayoutComponent en src/app/app-routing.module.ts:



import { LayoutComponent } from './ui/layout/layout.component';

Abre src/app/app.component.html y reemplaza el contenido con la siguiente línea:



<router-outlet></router-outlet>

Guarda todos los archivos y revisa en tu navegador, deberías ver el HeaderComponent y FooterComponent renderizados. Hora de decorarlas!

4.4 Implementa el Header

Abre src/app/ui/header/header.component.html y reemplaza el contenido con lo siguiente:



<!-- You can change the values `dark` here with any of the following: -->
<!-- dark, light, primary, secondary, success, info, danger, warning -->
<nav class="navbar navbar-dark bg-dark">
  <!-- This is the application title with a link to the root -->
  <a class="navbar-brand" routerLinkActive="active" routerLink="/">Angular & Bootstrap</a>
  <!-- This is a spacer so the links move to the end -->
  <div class="mr-auto"></div>
  <!-- This main navigation links are defined here -->
  <div class="navbar-expand">
    <div class="navbar-nav">
      <!-- Each link has the routerLink property set to a different route -->
      <a class="nav-item nav-link" routerLinkActive="active" routerLink="/home">Home</a>
      <a class="nav-item nav-link" routerLinkActive="active" routerLink="/about">About</a>
      <a class="nav-item nav-link" routerLinkActive="active" routerLink="/login">Login</a>
    </div>
  </div>
</nav>

Refiere a la documentación de navbar en bootstrap para mas detalles de la sintaxis del navbar y como hacerlos responsivo.

4.5 Implementa el Footer

Abre src/app/ui/footer/footer.component.html y reemplaza el contenido con esto:



<div class="py-3 bg-dark text-center text-muted">
  <small>Copyright &copy; 2020</small>
</div>

5. Agregar páginas de aplicación

Cuando el layout de la aplicación esté en su lugar, es el momento de agregar unas páginas.

El comando que usamos crea un módulo con un componente y usa lazy-loading para registrarlo en el AppModule.

💡Lazy loading es recomendado como una manera de enrutar en una app de Angular, ya que se asegura que los usuarios no descarguen código que no se usará.

5.1 Crea una pagina Home

Ejecuta el siguiente comando para generar el HomeModule:



ng g module pages/home --route home --module app

Abre src/app/pages/home/home.component.html y reemplaza el contenido con esto:



<div class="container py-5">
  <div class="jumbotron">
    <h1 class="text-secondary">Home</h1>
  </div>
</div>

Ve a la aplicación en el navegador y haz clic en el enlace Home en el header.

Te llevará a la ruta /home con el texto 'Home'. Sin embargo, el layout con el header y el footer se ha ido!

Para arreglar esto, abre src/app/app-routing.module.ts y mueve la ruta creada recientemente dentro del array children.



const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      // Here we will add our application pages
      {
        path: 'home',
        loadChildren: () => import('./pages/home/home.module').then(m => m.HomeModule),
      },
    ],
  },
];

Después de guardar este archivo, la pagina deberia renderizarse apropiadamente.

5.2 Crea la pagina About

Ejecuta el siguiente comando para generar el AboutComponent:



ng g module pages/about --route about --module app

Abre src/app/pages/about/about.component.html y reemplaza el contenido con esto:



<div class="container py-5">
  <div class="jumbotron">
    <h1 class="text-secondary">About</h1>
  </div>
</div>

Abre src/app/app-routing.module.ts y mueve la ruta de about dentro del array children para que se encuentre al lado de la ruta de HomeModule.

5.3 Crea la pagina Login

La página de login es un poco más compleja porque tiene un formulario y usa el router para redirigir el usuario.

Ejecuta el siguiente comando para generar el LoginModule:



ng g module pages/login --route login --module app

Abre src/app/pages/login/login.component.ts y agrega el siguiente codigo despues de los otros imports:



import { FormControl, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';

Cambia el contenido del cuerpo de la clase LoginComponent con esto:



export class LoginComponent implements OnInit {
  // The form group defines the fields used in the form
  form = new FormGroup({
    email: new FormControl(''),
    password: new FormControl(''),
  });

  // Inject the router so we can navigate after a successful login
  constructor(private readonly router: Router) {}

  ngOnInit(): void {}

  public submit() {
    // Use the form value to do authentication
    console.log(this.form.value);
    // Navigate after successful login
    return this.router.navigate(['/']);
  }
}

Abre src/app/pages/login/login.component.html y reemplaza el contenido con lo siguiente:



<!-- This flex container takes the full height and vertically centers the content -->
<div class="d-flex flex-column h-100 justify-content-center">
  <div class="container">
    <div class="row">
      <!-- This is a single column that is responsive -->
      <div class="col-12 col-md-6 offset-md-3">
        <div class="card">
          <div class="card-header">Login</div>
          <div class="card-body">
            <!-- The formGroup 'form' is defined in the component class -->
            <form [formGroup]="form">
              <div class="form-group">
                <label for="email">Email address</label>
                <!-- The formControlName defines the name of the field in the formGroup -->
                <input id="email" formControlName="email" type="email" required class="form-control" />
              </div>
              <div class="form-group">
                <label for="password">Password</label>
                <input id="password" formControlName="password" type="password" required class="form-control" />
              </div>
            </form>
          </div>
          <div class="card-footer">
            <div class="d-flex justify-content-between">
              <a routerLink="/" class="ml-2 btn btn-outline-secondary">
                Home
              </a>
              <!-- The button has a click handler, it will be disabled if the form is not valid -->
              <button (click)="submit()" [disabled]="!form.valid" type="submit" class="btn btn-outline-success">
                Log in
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

💡 El template del LoginComponent es bastante largo. Cuando agregues más páginas de autenticación, considera crear un AuthLayoutComponent separado y usalo como LayoutComponent, luego agrega LoginComponent, RegisterComponent etc, como elementos secundarios de AuthLayoutComponent.

Ve a tu aplicación en el navegador y da clic al enlace Login en el header.

La página de login renderiza el formulario en el centro de la pantalla y no necesitamos agregar la ruta en el array de children.

Hay una última cosa por arreglar. Si haces clic en el enlace Home, volverá a la raíz de la aplicación que está en blanco.

¿ No sería genial si pudiéramos ir a la página de inicio 😱?

5.4 Redirigir la ruta inicial

Abre src/app/app-routing.module.ts y agregar el siguiente objeto en la parte superior del array de rutas:



const routes: Routes = [
  {
    path: '',
    // If this path is the 'full' match...
    pathMatch: 'full',
    // ...redirect to this route.
    redirectTo: 'home',
  },
  // The other routes go here
];

¿A dónde ir desde aquí?

Como se indicó en la introducción, esta aplicación es un punto de partida y debería ser bastante sencilla para mejorarla a tu gusto.

Librerías adicionales

Usa ng-bootstrap o ngx-bootstrap si deseas usar implementaciones de los componentes de bootstrap, como menús desplegables, pestañas, colapsar, etc. Ambas librerías son excelentes opciones, elija la que más le guste.

Si tus aplicaciones tienen muchos formularios, usa formly para una forma declarativa de definir sus formularios, sin escribir ninguna de las plantillas de formulario.

Temas y colores

Para ajustar la apariencia de Bootstrap, abre src/styles.scss y configura las variables. Asegúrate de definir las variables antes de importar Bootstrap:



$dark: hotpink;
$jumbotron-bg: #333;
$secondary: limegreen;
$body-bg: #555;
@import '~bootstrap/scss/bootstrap';

Otra opción genial es Bootswatch, que ofrece más de 20 diseños diferentes basados en bootstrap.

Conclusión

En este tutorial, tu aprendiste cómo crear una aplicación básica de Angular y usaste bootstrap para crear un layout con header y footer.

La app tiene varias páginas que son lazy loaded. La página de login tiene un formulario con validación básica y un redireccionamiento a la página de Home.

En caso que tengas alguna pregunta, siéntete libre para comentar en DEV o enviame un mensaje a mi twitter!

Muchas gracias por leerme y hagan mucho código 🤓

Tutorial 4: Desplegar una app de Angular CLI a Firebase

Derlys — Fri, 17 Jul 2020 15:30:55 +0000

En este tutorial vamos a aprender cómo desplegar nuestra app a Firebase.

💡 KikstartTip
El primer paso solo se realiza una vez por cada app, no es
necesario repetirlo.

Requisitos

Haber realizado el tutorial 3, donde creamos las rutas.
Tener un proyecto firebase

Paso # 1

Vamos a agregar @angular/fire

1: Busca en la terminal tu proyecto y ejecuta el siguiente comando:

ng add @angular/fire

💡 KikstartTip

Si es la primera vez que instalas @angular/fire en tu computador te hará preguntas como esta:
Allow Firebase to collect CLI usage and error reporting information? (Y/n).

2: Durante el proceso de instalación sobre el proyecto elige el que quieres desplegar.

Installing packages for tooling via npm.
Installed packages for tooling via npm.
UPDATE package.json (1516 bytes)
✔ Packages installed successfully.
✔ Preparing the list of your Firebase projects
? Please select a project: (Use arrow keys or type to search)
❯ site2 (site2-8ce5b)

Paso # 2

Configura el enviroment con las llaves de tus proyectos en firebase.

1: En la consola de firebase busca tu proyecto.

2: En descripción general haz clic en configuración del proyecto.

3: Busca el siguiente título:

4: Busca la ruta src/enviroments/enviroment.ts y coloca esta secuencia de comandos con sus respectivas llaves:

export const environment = {
  production: false,
  firebase: {
    apiKey: '',
    authDomain: '',
    databaseURL: '',
    projectId: '',
    storageBucket: '',
    messagingSenderId: '',
    appId: '',
    measurementId: '',
  },
};

💡Tip

Si quieres tener un proyecto en producción y otro en desarrollo realiza todos este paso en el archivo enviroment.prod.ts.

Paso # 3

En este paso vamos a desplegar la app. No tenemos que hacer el ng build porque este comando lo hace por nosotros.

1: Busca en la terminal tu proyecto y ejecuta el siguiente comando:

ng deploy

2: Si todo sale bien te genera el Hosting URL: https://site2-8ce5b.web.app. Haz clic en el link y disfruta tu nuevo sitio !!! =)

Resumen

En este tutorial agregamos @angular/fire, desplegamos la app y tenemos listo un resultado
que podemos ver en el navegador.

El repositorio con este paso lo puedes encontrar aquí.

Muchas gracias!

Te esperamos en la siguiente serie de Kikstart UI =)
Cualquier pregunta sobre esta serie siéntete libre de comentar.

Tutorial 3: Configurar rutas en una app de Angular CLI

Derlys — Wed, 15 Jul 2020 21:57:56 +0000

Requisitos

Haber realizado el tutorial 2, donde creamos nuestro layout.

Paso # 1

Generamos los componentes de home, about y contact y configuramos sus rutas.

1: Crea un nuevo componente llamado home con el siguiente comando:

ng generate component home

2: Crea un nuevo componente llamado about con el siguiente comando:

ng generate component about

3: Crea un nuevo componente contact escribiendo lo siguiente:

ng generate component contact

💡 KikstartTip

Una manera abreviada de crear estos componentes es:
ng g c home

4: Busca la ruta src/app/app-routing.module.ts y agrega lo siguiente en la parte superior.

import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';

5: Luego agrega en el array de routes lo siguiente:

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
  },
  {
    path: 'about',
    component: AboutComponent,
  },
  {
    path: 'contact',
    component: ContactComponent,
  },
];

Paso # 2

Utiliza UiLink para agregar las rutas.

1: Busca la ruta src/app/app.component.ts y agrega lo siguiente en la parte superior.

import { UiLink } from '@kikstart-ui/ui-link';

2: Luego define en el mismo archivo una propiedad links con el tipo UiLink[] dentro de la clase AppComponent.

links: UiLink[] = [
  { label: 'Home', path: '/' },
  { label: 'About', path: '/about' },
  { label: 'Contact', path: '/contact' },
];

3: En tu editor busca la ruta src/app/app.component.html y agrega la propiedad links a la etiqueta <ui-navbar>.

<ui-navbar navbarStyle="dark" [brand]="brand" [links]="links"></ui-navbar>

Paso # 3

Kikstart UI tiene una etiqueta que nos deja agregar un componente hero, lo implementamos para cada uno de nuestros componentes.

1: Busca la ruta src/app/app.module.ts y agrega lo siguiente en la parte superior:

import { UiHeroModule } from "@kikstart-ui/ui-hero";

2: Luego agrega UiHeroModule en el array imports de @NgModule.

...
imports: [
  BrowserModule,
  AppRoutingModule,
  LayoutWebModule,
  UiNavbarModule,
  UiHeroModule,
],
...

3: Busca la ruta src/app/home/home.component.html y modifica el template colocando lo siguiente:

  <ui-hero title="Home"></ui-hero>

📖 Kikstartpedia

Repite el punto 3 para el resto de los componentes about y contact.

Resumen

En este tutorial creamos 3 componentes,importamos y agregamos estos componentes en el routing y finalmente para visualizar nuestras rutas configuramos los links además de utilizar el ui-hero para cambiar cómo se renderizan las paginas.

El repositorio con este paso lo puedes encontrar aquí.

Tutorial 2: Instalación de Kikstart UI

Derlys — Tue, 14 Jul 2020 20:37:53 +0000

En este tutorial aprenderemos que Kikstart UI contiene dependencias que podemos utilizar para construir nuestra app.

Requisitos

Haber realizado el tutorial 1, donde instalamos Angular CLI y creamos una app.

Paso # 1

En este paso instalamos los temas de Kikstart UI. Los temas son una versión personalizada de bootswatch y estos mismos son temas de bootstrap.

1: Ejecuta el siguiente comando para instalar la dependencia:

npm install @kikstart-ui/themes

2: Actualiza los estilos de scss, en tu editor busca la ruta
src/styles.scss y agrega lo siguiente:

@import "~@kikstart-ui/themes/scss/dark";

📖 kikstartpedia

En Kikstart UI puedes experimentar con los diferentes styles de layout. Cambia la palabra dark en el @import por pirate o light y mira como se ve 😉.

Paso # 2

En este paso instala el layout-web y utilízalo en tu AppComponent.

1: Ejecuta el siguiente comando para instalar la dependencia:

npm install @kikstart-ui/layout-web

2: Busca la ruta src/app/app.module.ts y agrega lo siguiente en la parte superior:

import { LayoutWebModule } from '@kikstart-ui/layout-web'

3: Luego agrega LayoutWebModule en el array imports de @NgModule.

@NgModule({
  declarations: [
    AppComponent,  
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    LayoutWebModule 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4: En tu editor busca la ruta src/app/app.component.html y cambia el contenido con:

<web-layout>
  <header> header </header>
  <router-outlet></router-outlet>
  <footer class="text-center text-muted py-3">
    Copyright &copy; 2020
  </footer>
</web-layout>

Paso # 3

En este paso agrega la navegación principal a tu app. Usa el UiNavbarModule y configura el brand.

1: Busca la ruta src/app/app.module.ts y agrega lo siguiente en la parte superior:

import { UiNavbarModule} from '@kikstart-ui/ui-navbar';

2: Luego agrega UiNavbarModule en el array imports de @NgModule.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    LayoutWebModule,
    UiNavbarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3: Busca la ruta src/app/app.component.ts y agrega lo siguiente en la parte superior:

import { UiBrand} from '@kikstart-ui/ui-brand';

4: Luego en el mismo archivo define una propiedad brand con el tipo UiBrand.

 export class AppComponent {
  title = 'site';
  brand: UiBrand = {
    name: 'Site',
    logo: 'https://github.com/kikstart-ui.png',
  };
}

5: En tu editor busca la ruta src/app/app.component.html y cambia el header a:

<header>
  <ui-navbar navbarStyle="dark" [brand]="brand"></ui-navbar>
</header>

Resumen

Para resumir en este tutorial hemos instalado Kikstart UI y sus dependencias, creamos un layout que queda listo para empezar el siguiente tutorial en donde configuraremos nuestras rutas.

El repositorio con este paso lo puedes encontrar aquí.

Tutorial 1: Instalando Angular CLI

Derlys — Mon, 06 Jul 2020 16:51:54 +0000

Esta serie contiene 4 tutoriales en donde aprendemos los primeros pasos para crear una app en angular, utilizamos las herramientas de Kikstart UI para crear un layout, configuramos las rutas y finalmente desplegamos nuestra app.

Requisitos

Asegúrate de tener instaladas las siguientes herramientas:

Node.js y NPM, visite la página de inicio para obtener instrucciones de instalación.
- Ejecute el node -v para verificar que tiene la versión 12 o superior.
- Ejecute npm -v para verificar que tiene la versión 6 o superior.

$ node -v
v14.0.0
$  npm -v
6.14.4

Paso # 1

Instala Angular CLI para empezar el proyecto

1: Abre una terminal e instala la última versión de Angular CLI con el siguiente comando:

npm install -g @angular/cli

📖 kikstartpedia

El comando anterior tiene -g esto significa
que lo instalaste de manera global, adicionalmente puedes
averiguar que versión tienes de angular
con el comando: ng version.

Paso # 2

Crea una app utilizando angular, en mi ejemplo el nombre de mí app es site, tú puedes ponerle el nombre que quieras solo ten en cuenta que sea un nombre corto, claro y genérico
porque este nombre utilizaras mucho.

1: Busca la ruta de tu proyecto y digita el siguiente comando:

ng new site

2: Antes de generar tu app la terminal te preguntará si quieres utilizar rutas o (routing), te sale algo así:

3: Respondes si digitando la letra y y enter.

4: Luego te pregunta por los estilos (styles),te ofrece varias alternativas. Yo elijo SCSS, lo seleccionas y das enter.

📖 kikstartpedia

Si quieres evitar realizar los últimos ítems del paso, puedes hacerlo todo en una sola línea como se muestra en el siguiente comando: ng new site --routing --style scss.

Paso # 3

Es momento de conocer como quedo tu app y para verlo en un navegador hacemos lo siguiente:

1: Vas a la ruta donde está tu proyecto y ejecutas el siguiente comando:

ng serve

Cuando está corriendo el sitio te genera una dirección en el puerto 4200 como este site.

KikstartDato
Angular tambien te preguntara lo siguiente:

2: Busca la siguiente ruta src/app/app.component.html, borra todo el contenido y escribe "Hola kikstart".

Resumen

En este tutorial hemos descargado angular para crear una app, luego hemos modificado uno de sus archivos, por último corrimos la app en un navegador para conocer el resultado.

Este es solo el comienzo para conocer la poderosa plataforma de Kikstart UI,continua el siguiente tutorial, conoce las herramientas que Kikstart UI tiene para ti.

El repositorio con este paso lo puedes encontrar aquí.

Muchas gracias a Laura Ciro por revisar esta serie!! 🥳