Guardando las imágenes de perfil en nuestra base de datos de firebase

Clase 46 de 63 • Curso de Angular 6 2018

Resumen

Para incluir la funcionalidad de agregar foto a nuestro perfil, usaremos el servicio Firebase Storage de Firebase, con AngularFireStorage.

El servicio FirebaseStorage funciona como un repositorio de recursos estáticos (organizado en carpetas) y se implementa en Angular a través del módulo AngularFireStorageModule, que debemos incluir en app.modules.ts

Finalmente, subiremos la imagen recortada a FirebaseStorage en formato base64, que será convertida por el storage a formato binario. Guardaremos luego en la base de datos, la referencia a la url de esa imagen que obtenemos mediante el método getDownloadURL().

Carlos Eduardo Rodríguez Arrivillaga

student•

Para los que obtengan un error en la consola de: Error: No Storage Bucket defined in Firebase Options…

Deben ir a la configuracion del proyecto en la consola de Firebase y buscar el valor que tiene storageBucket. Por defecto, este valor viene vacio al crear el proyecto, pero al configurar el storage, éste valor cambia en la configuracion, por tanto hay que cambiarlo en la configuracion en envionment.ts.

Eric Alejandro Hernández Moreno

student•

firebaseStorage

Deberá ser AngularFireStorage el import a Enero 2020 es import { AngularFireStorage } from '@angular/fire/storage';

Luis Abdel Rangel Castro

student•

app.module.ts

import { AngularFireStorageModule } from '@angular/fire/storage';

imports: [
    AngularFireStorageModule
  ],

Luis Abdel Rangel Castro

student•

profile.component.ts

import { AngularFireStorage } from '@angular/fire/storage';

constructor(
    private userService: UserService,
    private authenticationService: AuthenticationService,
    private angularFireStorage: AngularFireStorage
  ){...}

saveSettings(): void {
    if (this.croppedImage) {
      const currentPictureId = Date.now();
      const path = 'pictures/' + currentPictureId + '.jpg';
      const pictures = this.angularFireStorage
        .ref(path)
        .putString(this.croppedImage, 'data_url');
      pictures
        .then((result) => {
          this.picture = this.angularFireStorage.ref(path).getDownloadURL();
          this.picture.subscribe((p) => {
            this.userService
              .setAvatar(this.user.uid, p)
              .then(() => {
                alert('avatar uploaded');
              })
              .catch((err) => {
                console.error(err);
              });
          });
        })
        .catch((err) => {
          console.error(err);
        });
    }
...
}

Alfonso Adame Rueda

student•

a mi me funciono con este release: import { AngularFireStorage } from '@angular/fire/storage';//antes era import { AngularFireStorage } from 'angularfire2/storage';

Josue Anthony Facundo Chumacero

student•

claro es la nueva actualización junto con angular 8

Mayra Tarazona

student•

En mi caso llene el campo de storageBucket en enviroment.ts con "platzinger-dd5bc.appspot.com". Para solucionar el error de No Storage Bucket defined in Firebase Option. Solo es el nombre de mi proyecto seguido de .appspot.com

Wilson Alejandro Gonzalez Gaitan

student•

No es necesario solo debes haber creado el firebase storage primero a traves de la consola

Wilson Marino Pablo Mendez

student•

Graciar por el aporte. Esta vacio el apartado de la url del Storage.

Andrs

student•

    async guardar(){

        var user = {
          username:this.user.username,
          phone:this.user.phone,
          email:this.user.email,
          country:this.user.country,
          name:this.user.name,
          lastName:this.user.lastName,
          uid: this.user.uid,
          cover: this.user.cover || '../../../assets/img/profilePic.jpg'
        }

        if(this.croppedImage){
          let picture = await this.crudService.savePicProfile(this.croppedImage)
              user.cover = picture;
        }

          this.authService.editUser(user)
            .then((data)=>{
              return this.apisService.openSnackBar('Usuario Actualizado', 'SUCCESS')
            })
      }



//service.ts



  savePicProfile(croppedImage){

      const currentCoverId =  UUID.UUID();

      return this.firebaseStorage.ref(`pictures/${currentCoverId}.jpg`).putString(croppedImage, 'data_url')
              .then((res)=>{
                  return new Promise((resolve, reject)=>{
                    let picture =  this.firebaseStorage.ref(`pictures/${currentCoverId}.jpg`).getDownloadURL();
                    picture.subscribe((p)=>{
                          return resolve(p)
                      })
                  })
              })
  }

Carlos Enrique Ramírez Flores

student•

ahi va la cosa!

Patricio Jacho

student•

Genial, creo que faltó que al momento de modificar la imagen, también se actuaicen los demás campos, en caso de ser modificados.

Alex Eugenio Gavidia Donayre

student•

Gracias

carlos emmanuel arcos novelo

student•

alguien sabe como cerrar la vista previa de la imagen del npx image cropper?

Salvador Galliano

student•

Luis Abdel Rangel Castro

student•

import { AngularFireStorage } from '@angular/fire/storage';

constructor(
    private userService: UserService,
    private authenticationService: AuthenticationService,
    private angularFireStorage: AngularFireStorage
  ){...}

saveSettings(): void {
    if (this.croppedImage) {
      const currentPictureId = Date.now();
      const path = 'pictures/' + currentPictureId + '.jpg';
      const pictures = this.angularFireStorage
        .ref(path)
        .putString(this.croppedImage, 'data_url');
      pictures
        .then((result) => {
          this.picture = this.angularFireStorage.ref(path).getDownloadURL();
          this.picture.subscribe((p) => {
            this.userService
              .setAvatar(this.user.uid, p)
              .then(() => {
                alert('avatar uploaded');
              })
              .catch((err) => {
                console.error(err);
              });
          });
        })
        .catch((err) => {
          console.error(err);
        });
    }
...
}

    async guardar(){

        var user = {
          username:this.user.username,
          phone:this.user.phone,
          email:this.user.email,
          country:this.user.country,
          name:this.user.name,
          lastName:this.user.lastName,
          uid: this.user.uid,
          cover: this.user.cover || '../../../assets/img/profilePic.jpg'
        }

        if(this.croppedImage){
          let picture = await this.crudService.savePicProfile(this.croppedImage)
              user.cover = picture;
        }

          this.authService.editUser(user)
            .then((data)=>{
              return this.apisService.openSnackBar('Usuario Actualizado', 'SUCCESS')
            })
      }



//service.ts



  savePicProfile(croppedImage){

      const currentCoverId =  UUID.UUID();

      return this.firebaseStorage.ref(`pictures/${currentCoverId}.jpg`).putString(croppedImage, 'data_url')
              .then((res)=>{
                  return new Promise((resolve, reject)=>{
                    let picture =  this.firebaseStorage.ref(`pictures/${currentCoverId}.jpg`).getDownloadURL();
                    picture.subscribe((p)=>{
                          return resolve(p)
                      })
                  })
              })
  }

Guardando las imágenes de perfil en nuestra base de datos de firebase

Introducción

Qué aprenderás sobre Angular 6

Introducción a Angular

Configurando nuestro proyecto en Git y Github

Introducción a Angular CLI y al proyecto de Platzinger

Instalación del entorno de desarrollo en Mac OS

Instalación del entorno de desarrollo en Windows e información acerca del editor que usaré (WebStorm) y alternativas

Corriendo nuestra app en el navegador

Reto: Desarrolla un tutorial escrito comparando Angular con otro Framework (Vue, React)

Definición de la estructura del App

¿Qué hará nuestra app? ¿Cuál es su arquitectura? ¿De qué pantallas se compondrá? ¿Cuál será su look?

Explorando el sistema de archivos

¿Qué son y cómo generar los primeros componentes de nuestra app?

Navegación básica entre componentes

Componentes anidados: Creando un componente con nuestras rutas de navegación que funcione como menú

Reto: Varias conversaciones a la vez

Basics de Angular y TypeScript

¿Cómo usar tipos de datos con TypeScript?

Qué son las interfaces de TypeScript y su implementación

NgFor aplicado en la lista de usuarios

NgIf aplicado en la lista de usuarios

Navegación con parámetros

Accediendo a nuestros usuarios desde Conversation.ts

Creando un servicio de usuarios e Inyectando el servicio en nuestros componentes

Pipes en Angular (date, number, json)

Creando nuestro propio pipe para buscar entre nuestros contactos

Estilos

¿Cómo usar estilos CSS y referenciar recursos?

Instalando librerías usando npm (bootstrap y font-awesome) y Referenciando CSS en el angular.json

Reto: Cambiar ícono según estatus

Implementando estilos en la pantalla de login

Terminando de implementar los estilos de nuestra pantalla de login

Implementando estilos en el navbar

Implementando estilos en la pantalla de home

Implementando estilos en home, lista de contactos

Implementando estilos en profile

Reto: Estilos en la pantalla de conversación

Usando ngClass para añadir estilos dinámicos

Reto: Mejorar estilos en la pantalla de conversación

Acceso a datos remotos y login

¿Qué es Firebase? Creando nuestro proyecto

Diferencia entre conexión por sockets y HTTP

Instalación y setup de la librería AngularFire a través de npm

Login/Registro de usuarios con email y password

Reemplazo del servicio de usuarios por un servicio dinámico con conexión a Firebase

Guards para verificar Firebase auth

Creando un CRUD implementando un API REST HTTP (con diversos backends)

Reto: Implementar API HTTP

Opciones y subida de imágenes

Perfil de usuario

Seleccionar fotos usando una librería para image cropping

Guardando las imágenes de perfil en nuestra base de datos de firebase

Conversación

¿Cómo resolver el problema de comunicación en tiempo real?

Enviando un mensaje (con reproducción de sonido)

Mostrando conversación

Enviando un zumbido (con reproducción de sonido y animación)

Reto: Envía una foto

Amigos

Planeación previa para la característica, ¿cómo generaremos las solicitudes?

Enviando una solicitud de amistad

Generando el modal de solicitud de amistad

Aceptando solicitudes de amistad

Mostrando sólo contactos que son amigos

Componentes anidados (con paso de parámetros)

Reto: Mensaje personal en Solicitud de Amistad

Deploy

Creando un wrapper para desktop, usando Electron

Reto: Dándole Características PWA a nuestra App

Exportando app para web, complementando con Firebase Hosting

Conclusión

Conclusión

Cuéntanos