APLICACION WEB CON ANGULAR Y FIREBASE

En este proyecto implementaremos las siguientes herramientas de Firebase: Firestore, Firebase Storage, Cloud Functions and Hosting

Consulte: https://firebase.google.com/docs para obtener más información.

Este proyecto se generó con [Angular CLI] (https://github.com/angular/angular-cli) versión 9.1.11.

EMPECEMOS!!!!

App Web

http://localhost:4200/home

TRABAJAREMOS CON FIRESTORE, STORAGE, FUNCTIONS Y HOSTING

https://github.com/AdrianaTiconipaGutierrez/firebaseFunctions

CREAR PROYECTO EN ANGULAR

Instale el nodo node.js org: instale la última versión estable

Node.JS es JavaScript en el lado del servidor. NPM es un gestor de paquetes para este entorno.

• https://nodejs.org/en/download/

• nodo –versión

En este proyecto usamos NODE 10 (Necesitamos una versión mínima que sea 6.9 para construir una aplicación angular).

Necesitamos una herramienta NODE PACKAGE MANAGER NPM

(NPM) para instalar bibliotecas de terceros, una de estas bibliotecas es ANGULAR/CLI, que significa interfaz de línea de comandos, es una herramienta de línea de comandos que usamos para crear un nuevo proyecto angular o generar algún código repetitivo, así como crear paquetes desplegables

• npm install -g @ angular / cli

• npm install -g @angular/cli@9.x.x

• ng –version

ESTRUCTURA ANGULAR

El módulo es un contenedor de un grupo de componentes relacionados

¿Cómo funciona Angular?

CREACION DE UN NUEVO PROYECTO EN ANGULAR

Crear un proyecto, componentes, modelos y servicios.

• ng new nombreProyecto

• ng g c nameComponent

• ng g s nameService

Verificar el proyecto funciona en Angular

Tenemos un servidor de desarrollo en vivo que escucha en localhotsport 4200

• ng serve -o

En este proyecto utilizamos material angular:

• ng add @ angular / material

Para mas informacion visitar: https://material.angular.io/

ESTRUCTURA DE UN PROYECTO EN ANGULAR

Visual Studio Code

CONEXION CON FIREBASE

• Requisito Instalar Node.js con nvm (Node Version Manager).

• Cuando lo hagas, se instalarán automáticamente las herramientas de comando de npm.

Creación de un Proyecto de Firebase

• Consola de Firebase

• Dasboard de Firebase

• Agregar Proyecto

• HABILITAMOS HERRAMIENTAS: DATABASE Y STORAGE EN LA CONSOLA

• Agregamos Firebase a la app WEB

• Copiamos la variable config y lo copiamos en environment.ts

src/app/environments/environment.ts

INSTALAMOS FIRESTORE Y STORAGE EN ANGULAR

Para esto necesitamos el paquete angular fire 2

ANgular Fire 2

AngularFire2 es la librería que se usa en angular para acceder a bases de datos firebase, posee una serie de objetos para acceder a tus documentos de FireStore o RealTime Data Base.

https://github.com/angular/angularfire

Como instalamos?

npm install firebase @angular/fire --save

ng add @angular/fire

Escogemos nuestro Proyecto

Instala la version "@angular/fire": "^6.0.2"

Y empezamos las importaciones en app.module.ts

Modificamos el Archivo

src/app/app.module.ts

INYECTAMOS LAS 3 DEPENDENCIAS DE FIRESTORE EN IMPORTS //IMPORTACIONES DE ANGULAR FIRE

import {AngularFirestoreModule } from '@angular/fire/firestore'; //OJO EN VERSION FIRE 6 VAMBIO DE STORAGE BUCKET A BUCKET StorageBucket import { AngularFireStorageModule, BUCKET} from '@angular/fire/storage'; import {AngularFireModule } from '@angular/fire';

Import {AngualrFireModule} from @angular/fire/

###//OJO EN VERSION FIRE 6 VAMBIO DE STORAGE BUCKET A BUCKET

En Imports

• AngularFireModule.initializeApp(environment.firebaseConfig)

• AngularFireStorageModule

• AngularFirestoreModule

En imports tenemos:

Para Storage

PARA EL BUCKET EN PROVIDERS: CONGIGURAMOS NUESTRO BUCKET EN FIREBASE

Provide: StorageBucket, useValue ‘URL DE STORAGE’

Ojo importamos environment

CONTINUAMOS CON STORAGE

Cloud Storage para Firebase es un servicio de almacenamiento de objetos potente, simple y rentable construido para la escala de Google.

1. Firebase console

selecciona Storage y, luego, haz clic en Comenzar

2. Agrega la URL del depósito a la app

1. Ve a tu panel de Storage en Firebase console.

2. Haz clic en la pestaña Archivos y, luego, busca en el encabezado del visor de archivos.

3. Copia la URL al portapapeles. Por lo general, tiene el formato project-id.appspot.com.

4. Agrega el atributo firebaseConfig con la URL del depósito al objeto storageBucket de tu app de la siguiente manera:

Inicializar firebase

  firebaseConfig : {
    apiKey: "AIzaSyA2Whqyf42ZcSWgfj_R5KaOuTcUU2Pfn9E",
    authDomain: "fir-angular-94580.firebaseapp.com",
    databaseURL: "https://fir-angular-94580.firebaseio.com",
    projectId: "fir-angular-94580",
    storageBucket: "fir-angular-94580.appspot.com",
    messagingSenderId: "548074631601",
    appId: "1:548074631601:web:9a4f57a23e987e98980d90",
    measurementId: "G-2K0KMRT5XY"
  }

app.module.ts // Obtener archivo usamos eventos(change) cuando a cambaido el input let file= e.target.files[0]; //Create a storage ref: Creamos uan referencia de alamacenamiento let storageRef = firebase.storage().ref('folder_name/'+file.name'); // Subir el archivo a firebase storage let task = storageRef.put(file); ///PUT SUBIRA EL ARCHIVO A STORAGE

Crea una referencia

A fin de subir o descargar archivos, borrar archivos, obtener o actualizar metadatos, debes crear una referencia al archivo con el que deseas trabajar.

Obtenga una referencia al servicio de almacenamiento, que se utiliza para crear referencias en su depósito de almacenamiento
var storage = firebase.storage();
// Crea una referencia de almacenamiento desde nuestro servicio de almacenamiento
var storageRef = storage.ref();

Propiedades de las referencias

// La ruta de referencia es: 'images / space.jpg'
// Esto es análogo a una ruta de archivo en el disco

spaceRef.fullPath;

// El nombre de referencia es el último segmento de la ruta completa: 'space.jpg'
// Esto es análogo al nombre del archivo

spaceRef.name;

// El depósito de referencia es el nombre del depósito de almacenamiento donde se almacenan los archivos

spaceRef.bucket;