Despliegue con Firebase Hosting

Clase 20 de 21 • Curso de Fundamentos de Angular

Contenido del curso

Primeros pasos

Comunicación de datos

Estructuras de control

Estilos

Deploy

20
Despliegue con Firebase Hosting
Viendo ahora

Despedida

21
Continúa con el Curso de Angular: Componentes y Servicios
00:57 min

Tomar examen

Resumen

Puedes realizar tu primer deploy de una aplicación Angular utilizando Firebase.

¿Qué es un deploy?

Un deploy, o despliegue, es el proceso de llevar tu software de un entorno local, a un entorno el cual se pueda acceder a través de internet desde cualquier parte del mundo para estar disponible para su uso.

¿Qué es Firebase?

A lo igual que Angular, Firebase es una plataforma de herramientas para desarrolladores de software desarrollado y mantenido por Google. Puedes utilizarlo para, en unos pocos clics, tener tu primera aplicación en un entorno productivo. Además de otros usos que ofrece el servicio

¿Cómo realizo mi primer deploy?

Para esto, ingresa a la página oficial de Firebase con tu cuenta de @gmail y comienza creando tu primer proyecto:

Elige un nombre para el mismo:

Y elige si utilizar o no Google Analytics en tu aplicación:

TIP: Google Analytics es una herramienta para visualización del tráfico de los usuarios en tu sitio web, comportamiento según audiencia y mucho más. Es una herramienta principalmente utilizada en Marketing Digital.

Luego de algunos segundo, tu proyecto estará listo.

Firebase ofrece, entre otros servicios:

Autenticación
Hosting
Bases de Datos
Storage
Mensajería

Para tu primer deploy, usarás los servicios de Hosting que provee un servidor gratuito para tu aplicación. Desde el menú lateral selecciona la opción Hosting.

Firebase solicita que instales algunas dependencias de forma global en nuestro computador. Para eso, desde una terminar utilizarás el comando:

npm install -g firebase-tools

Teniendo el CLI de Firebase instalado, podrás autenticarte para iniciar un proyecto nuevo:

firebase login

Posteriormente, estando situado desde la terminal en la raíz de tu proyecto, inicializa los servicios de Firebase:

firebase init

Selecciona la opción

Hosting

para iniciar la configuración de Firebase en tu proyecto:

Escoge

Use an existing project

y selecciona el nombre de tu proyecto creado anteriormente desde la web de Firebase:

Te recomiendo responder a las preguntas que te realizará el CLI de la siguiente manera para finalizar la inicialización del proyecto:

Se creará en tu proyecto dos archivos, uno llamado .firebaserc y otro firebase.json que contienen la configuración con el servidor de Firebase con tu proyecto. También creará de una carpeta public con un index.html, que no utilizarás, ya que Angular provee su propio index.html al compilar la aplicación. Puedes borrar este directorio.

Angular build y despliegue final

Con el comando:

ng build

Puedes preparar tu aplicación para un entorno productivo. Creará un directorio llamado dist y dentro otro más con el nombre de tu proyecto. Esta es el directorio que Angular provee para la distribución de la aplicación.

Dirígete ahora al archivo firebase.json creado al momento de ejecutar la inicialización de Firebase y edita la propiedad public de la siguiente manera:

{
 "hosting": {
    "public": "dist/<NOMBRE_DE_TU_PROYECTO>",
    ...
 }

De esta manera, Firebase desplegará tu aplicación que ya está compilada dentro de ese directorio.

Ahora si es momento del deploy. Para eso, utiliza el comando:

firebase deploy

Luego de algunos segundos, Firebase te entregará un URL pública en internet desde la cual podrás acceder a tu proyecto desde cualquier parte.

**¡Felicidades, realizaste tu primer despliegue a producción con Firebase!

Aporte creado por: Kevin Fiorentino.

Matias Acosta

student•

Buenas!! El curso estuvo genial! Espero que lo hayan disfrutado!

Aqui debajo les comparto mi resumen general del curso!

Les recomiendo que lo copien y lo guarden en un archivo .md, ya luego pueden convertirlo a pdf desde aqui

Curso de fundamentos de Angular. Platzi

Estructura de un proyecto

El nucleo de la aplicacion se encuentra # la carpet src*
Los componentes se encuentran en el directorio app

Archivos internos

.browserslistrc: Indica a angular en que versiones tiene que ser compatible tu aplicacion
.editorconfig Tiene mas que ver con trabajar en equipo. Sirve para configurar las reglas de desarrollo del equipo. Por ejemplo la indentacion, etc. Para que este archivo funcione debes de instalar en VsCode un plugin llamado EditorConfig for VS Code
tsconfig.json Tiene que ve con la configuracion que tiene Angular con TypeScript
angular.json Es donde podemos manejar diferentes ambientes. Por ejemplo: podemos tener un ambiente de staging y un ambiente de QA (testing). En la seccion de budgets podemos configurar cual es el tamaño que deberia tener normalmente nuestra aplicacion
karma.conf.js Es para correr unit testing
package.json Las versiones que estamos utilizando
.nvmrc Sirve para especificar la version de node en la cual corre nuestro proyecto. Si no esta creada simplemente podemos crearla

Property Binding

Su uso es para configurar propiedades en un elemento html <button [disabled]="btnDisabled"> Click me </button>

Event Binding

Con parentesis, encerramos el evento que queremos capturar <button (click)="onClick()"> Click me </button>

Data Binding

Es una fusion entre escuchar un evento (Event Binding) y escuchar una propiedad (Property Binding) En angular tenemos algo especial para esto, que es el:

[(ngModel)]: ngModel siempre esta pendiente del estado del input. Chequea si ese campo es valido o no y ademas sincroniza el valor

Estructuras de control

NgIf

    <div *ngIf="condition; else elseBlock">
        Content to render when condition is true.
    </div>
    <ng-template #elseBlock>
        Content to render when condition is false.
    </ng-template>

NgFor

    <li *ngFor="let item of items; index as i; trackBy: trackByFn">...</li>

NgSwitch

    <container-element [ngSwitch]="switch_expression">
        <!-- the same view can be shown in more than one case -->
        <some-element *ngSwitchCase="match_expression_1">...</some-element>
        <some-element *ngSwitchCase="match_expression_2">...</some-element>
        <some-other-element *ngSwitchCase="match_expression_3">...</some-other-element>
        <!--default case when there are no matches -->
        <some-element *ngSwitchDefault>...</some-element>
    </container-element>

Template reference variables

Es una referencia a un elemento de nuestra aplicacion. Podemos acceder a esta referencia tanto desde nuestro typescript como desde el html. Las referencias pueden ser utilizadas en el TS recien desde el afterViewInit en el HTML solo podemos acceder a la variable despues de declararla, no antes. Pasos para utilizar template variables

Agregar el template variable en el html

    <p #text>
        Random text
    </p>

Agregar la referencia al elemento HTML en el TS con @ViewChild @ViewChild('text') text!:ElementRef;
Utilizar la refencia al elemento dentro afterViewInit, o en cualquier metodo que se ejecute luego de afterViewInit

  ngAfterViewInit(){
    console.log(this.text)
    this.text.nativeElement.innerHTML += "Hola desde TS"
  }

Estilos dinamicos dependiedo del estado de un elemento

Agregar clases dinamicas

Nos permite activar o desactivar una clase CSS, en un elemento, dependiendo de una condicion. Su sintaxis es la siguiente:

    <p #text class='simple-text' [class.nameClass]='condition goes here'>
        Random text
    </p>
    <!--por ejemplo-->
    <p #text class='simple-text' [class.active]=' 1 == 1 '>
        Random text
    </p>

Como verificar que un elemento tiene uno o mas estilos concatenados

Con verificar que un elemento tiene estilos concatenados, me refiero a esto:

    <p #text class='simple-text active' >
        Random text
    </p>

Esto podemos verificarlo en el CSS de esta forma:

.simple-text {
    background: red;
    color: white;
    opacity: 0; //Hace que sea invisible

    &.active{
        opacity: 1;
    }
}

Esto hace que, cuando nuestro elemento cuente con las clases simple-text y active al mismo tiempo, nuestra opacidad cambie a 1, es decir, que se muestre el elemento

Modificar estilos dinamicamente

Esto nos permite modificar un estilo especifico en el html, dependiendo de una condicion.

    <p #text [style.font-style]="condicion ? 'true-value' : 'false-value'">
        Random text
    </p>

Por ejemplo

    <p #text [style.font-style]="condicion ? 'bold' : 'normal'">
        Random text
    </p>

NgClass & NgStyle

Nos permite agregar varias clases y/o estilos de forma dinamica.

NgClass

    <p #text class='simple-text' [ngClass]="{
        'class-name-1': condition1,
        'class-name-2': condition2
    }">
        Random text
    </p>
    <!--por ejemplo-->
    <p #text class='simple-text' [ngClass]="{
        'valid-class': input.lenght > 0,
        'invalid-class': input.lenght == 0
    }">
        Random text
    </p>

NgStyle

    <p #text class='simple-text' [ngStyle]="{
        'color': pStyles.color,
        'background': pStyles.background
    }">
        Random text
    </p>

En este ejemplo, pStyles es un objeto declarado en el TS del componente.

Creacion de un formulario desde HTML


<!-- Aqui se declara que es un formulario 'reactivo'.
Esto nos sirve para comprobar que todos los campos esten completados -->
<form #myForm="ngForm">
    <input name="name" type="text">
    <input name="lastname" type="text">
    <input name="password" type="password">

    <button 
        type="submit" 
        [disabled]=myForm.invalid>
        Enviar
    </button>
</form>

Datos interesantes sobre Estilos

40em es una ancho estandar para tablets en adelante. A utilizarlo en las @media queries
62em parece un ancho estandar para desktops. Tambien para las @media queries

Compilar nuestra aplicacion para producccion

ng build

Luis Eduardo

student•

Buen resumen

Christian Eduardo Ramirez Castillo

student•

gracias por el resumen, pero no entendi bien lo de .MD

EDGAR MERCADO GARCIA

Camilla Bachna

Elber Liebermen

ELKIN YESID MORENO VELEZ

Mariano Tribuj

Andres Felipe Pinto Becerra

Harold Gama

Giancarlos Guedez

Manuel Alvarez

Santiago Giorgetti

Orlando Daniel Montes Antonio

Carlos Eduardo Gomez García

teacher•

Kevin Bueno

Edinson Colonia Paez

Nicolas Molina

German Pinilla

Jully Evangelina Flórez Fonseca

Fredy Antonio pelaez castañeda

CARLOS ALBERTO WILSON PEREZ

Oscar Bravo

Jackeline Edith García Serna

Alejandro Rico García

Gabriel Ortiz

Gustavo Pú

Álvaro Sánchez García

Julian David Guzmán Infante

César Araucano

Julian Franco

Daniel Díaz

Binder Germán Ariel

Despliegue con Firebase Hosting

Primeros pasos

Qué es Angular: ventajas y cómo aprenderlo

Instalación de Angular CLI

Comandos de Angular para correr tu proyecto

Estructura de un proyecto en Angular

Conceptos básicos de TypeScript para usar Angular

Comunicación de datos

String interpolation

Property Binding

Introducción al Event Binding de Angular

Otros eventos que puedes escuchar

Data binding con ngModel

Estructuras de control

Uso de *ngIf

Uso de *ngFor

*ngFor para arrays

Uso de *ngSwitch

Angular Devtools

Estilos

Estilos a la lista de productos

Class and style

NgClass y NgStyle

Crear un formulario

Deploy

Despliegue con Firebase Hosting

Despedida

Continúa con el Curso de Angular: Componentes y Servicios