Reto: Envía una foto

Clase 51 de 63 • Curso de Angular 6 2018

Actualmente, en la pantalla de conversación se pueden enviar mensajes de texto y también zumbidos. Ahora, usando los conocimiento adquiridos para subir imágenes y usarla como avatar, sube imágenes que puedas enviar como un mensaje en la pantalla de conversación.

Juan Diego Lopez Triana

student•

**Me demore un poquito pero lo logre: **

Alejandro Demetrio Cortez Alvarez

student•

Podrias compartir como hiciste el modal?

William Vega

student•

Que buen código, excelente tu uso de async - await.

Ana Lorena Bojorquez Acuña

company_admin•

Ricardo Portillo

student•

Este reto fue más fácil de lo que creía
Código en conversation.component.ts

  sendImage() {
    const currentPictureId = Date.now();
    const pictures = this.firebaseStorage.ref('pictures/' + currentPictureId + '.jpg').putString(this.croppedImage, 'data_url');
    pictures.then((result) => {
      this.picture = this.firebaseStorage.ref('pictures/' + currentPictureId + '.jpg').getDownloadURL();
      this.picture.subscribe((p) => {
        const message = {
          uid: this.conversation_id,
          timestamp: Date.now(),
          text: p,
          sender: this.user.uid,
          receiver: this.friend.uid,
          type: 'image'
        }
        this.conversationService.createConversation(message).then(() => { });
        this.croppedImage = ''
      });
    }).catch((error) => {
      console.log(error)
    });
doNewMessage(){
    const audio = new Audio('assets/sound/new_message.m4a');
    audio.play();
  }
  doZumbido(){
    const audio = new Audio('assets/sound/zumbido.m4a');
    audio.play();
    this.shake = true;
    window.setTimeout(()=>{
      this.shake = false;
    }, 1000);
  }
  getConversation(){
    this.conversationService.getConversation(this.conversation_id).valueChanges().subscribe((data) => {
      this.conversation = data;
      this.conversation.forEach((message) => {
        if( !message.seen){
          message.seen = true;
          this.conversationService.editConversation(message);
          if(message.type == 'text'){
            this.doNewMessage();
          } else if (message.type == 'image') {
            this.doNewMessage();
          } else if (message.type == 'zumbido') {
            this.doZumbido();
          }
         
        }
      });
      console.log(data)
    }, (error)=>{ console.log(error)});
  }

Ruben Garcia

student•

Reto completado:

Juan Antonio Campoy Lira

student•

Jeffry Davila

student•

Le agregue un Modal ahora se ve mejor:

Jeffry Davila

student•

Developer Resolve Studio

student•

Así me quedo el envio de la imagen.

Jeffry Davila

student•

La función getConversation() solo le agregue mas código.

getConversation() {  this.conversationService.getConversation(this.conversation_id).valueChanges().subscribe((data)=>{
this.conversation=data;
this.conversation.forEach((message)=>
{
if(!message.seen)
{
message.seen=true;
this.conversationService.editConversation(message);
if(message.type=='text')
{
const audio=new Audio('assets/sound/new_message.m4a');
audio.play();
}
 else if(message.type=='zumbido')
{
    this.doZumbido();
} 
else if(message.type=='imagen')
{
this.doImagen(message)const audio=new Audio('assets/sound/new_message.m4a');
audio.play();
this.envio_imagen=false;
console.log(this.envio_imagen)
}
}
});
console.log(data);
},(error)=>{
console.log(error);
});
}

Alejandro Demetrio Cortez Alvarez

student•

Jeffry Davila

student•

Me costo mucho hacerlo pero lo logre…

Carlos Alberto García Rosales

student•

lograste ocultar la preview del cortado luego de mandar?

Jeffry Davila

student•

Hola , pues en esa foto que comentaste no se oculta, solo se oculta cuando presionas el seleccionar imagen después que lo hayas mandado, te recomiendo que lo hagas con un modal como el que hice mas abajo, por que una vez que presionas enviar el modal y el preview del cortador se oculta.

Jeffry Davila

student•

Jeffry Davila

student•

conversartion.service.ts

  setImagen(conversation,imagen)
  {
      return this.angularFireDatabase.object('conversation/'+conversation.uid+'/'+conversation.timestamp+'/url').set(imagen);
  }

Jeffry Davila

student•

conversation.component.html

<div class="messageGroup" *ngFor="let m of conversation">
<b>{{getUserNickById(m.sender)}}</b> dice: <br />
<span>{{m.text}}</span>
<div class="imagen_enviada" *ngIf="m.url">
<img  [src]="m.url " class="avatarImage img-fluid" alt="">
</div>
</div>

Edorta Rodríguez

student•

<div class="conversationContainer bluewhitebg" [ngClass]="{'shaker' : shake}">
  <div class="row">
    <div class="col-sm-3 maxwi300">
      <div id="conversationSidebar">
        <div class="vh30">
          <div class="avatarFrameonline">
            <img src="{{'assets/img/generic_avatar.png'}}" class="avatarImage img-fluid">
          </div>
        </div>
        <div class="vh30"></div>
        <div class="vh25">
          <div class="avatarFrameonline">
            <img src="{{'assets/img/generic_avatar.png'}}" class="avatarImage img-fluid">
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-9">
      <br/>
      <span class="friendName">Amigo 1</span> (online)
      <hr/>
      <div class="vh55 overscroll pabo10" id="messageArea">
        <div class="messageGroup" *ngFor="let message of conversation">
          <div *ngIf="!message.type || message.type=='text'">
            <b>{{geUserNickById(message.uid)}}</b> dice : <br/>
            <span>{{message.text}}</span>
          </div>

          <div *ngIf="message.type=='buzz'">
            <b>{{geUserNickById(message.uid)}}</b> ha enviado un zumbido<br/>
          </div>

          <div *ngIf="message.type=='image'">
            <b>{{geUserNickById(message.uid)}}</b> dice : <br/>
            <img [src]="message.url" alt="imagen" class="img-fluid">
          </div>

        </div>
      </div>
      <div class="messageControlsContainer">
        <textarea [(ngModel)]="textMessage" (keyup.enter)="sendMessage()" class="form-control" cols="30"
                  rows="5"></textarea>
        <div id="messageToolBar">
          <div class="item">
            <img src="assets/img/icons/regular_smile.gif" class="tool">
            <i name="caret-down"></i>
          </div>
          <div class="item">
            <img src="assets/img/icons/wink_smile.gif" class="tool">
            <i name="caret-down"></i>
          </div>
          <div class="item" (click)="sendBuzz()">
            <img src="assets/img/zumbido.png" class="tool">
          </div>

          <a class="btn btn-primary btn-sm marri10" accept="image/*">Enviar</a>
          <label class="custom-file-upload">
            <input type="file" (change)="handleInputChange($event)">
            <i name="image"></i> Seleccionar Imagen
          </label>
        </div>
      </div>
    </div>
  </div>
</div>

import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from "@angular/router";
import {User} from "../../interfaces/user";
import {UserService} from "../../services/user.service";
import {ConversationsService} from "../../services/conversations.service";
import {AuthenticationService} from "../../services/authentication.service";
import {extractMessages} from "@angular/compiler/src/i18n/extractor_merger";
import {AngularFireStorage} from "@angular/fire/storage";

@Component({
  selector: 'app-conversation',
  templateUrl: './conversation.component.html',
  styleUrls: ['./conversation.component.scss']
})
export class ConversationComponent implements OnInit {

  friendId: any;
  friendUser: User;
  user: User;
  conversationId: string;
  private textMessage: string;
  private conversation: any[];
  shake: boolean = false;
  private imgSrc: any = '';
  picture: any;


  constructor(private userService: UserService, private activatedRoot: ActivatedRoute, private conversationService: ConversationsService, private authenticationService: AuthenticationService, private firebaseStorage: AngularFireStorage) {
    this.friendId = this.activatedRoot.snapshot.params['uid'];

    this.userService.getUserById(this.friendId).valueChanges().subscribe((data: User) => {
        this.friendUser = data;
      }, (error) => {
        console.log(error);
      }
    );

    this.authenticationService.getStatus().subscribe((session) =>
      this.userService.getUserById(session.uid).valueChanges().subscribe(
        (user: User) => {
          this.user = user;
          const ids = [this.user.uid, this.friendUser.uid].sort();

          this.conversationId = ids.join('|');

          this.getConversation();
        }
      ));
  }

  ngOnInit() {
  }

  sendMessage() {
    const message = {
      uid: this.conversationId,
      timestamp: Date.now(),
      text: this.textMessage,
      sender: this.user.uid,
      receiver: this.friendUser.uid,
      type: 'text'
    }
    this.conversationService.createConversation(message).then(() => this.textMessage = '');
  }


  sendBuzz() {
    const message = {
      uid: this.conversationId,
      timestamp: Date.now(),
      text: null,
      sender: this.user.uid,
      receiver: this.friendUser.uid,
      type: 'buzz'
    }
    this.conversationService.createConversation(message).then(() => this.textMessage = '');
  }


  private getConversation() {
    this.conversationService.getConversation(this.conversationId).valueChanges().subscribe((data) => {
      console.log(data);
      this.conversation = data;
      this.conversation.forEach((message) => {


        if (!message.seen) {
          message.seen = true;
          this.conversationService.editConversation(message);
          if (message.type == 'text') {
            const audio = new Audio('assets/sound/new_message.m4a');
            audio.play();
          } else if (message.type == 'buzz') {
            this.doBuzz();
          }
        }
      })
    }, (error) => console.log(error));
  }

  private geUserNickById(uid) {
    if (this.friendUser.uid === uid) {
      return this.friendUser.nick;
    } else {
      return this.user.nick;
    }
  }

  private doBuzz() {
    const audio = new Audio('assets/sound/zumbido.m4a');
    audio.play();
    this.shake = true;
    window.setTimeout(() => {
      this.shake = false
    }, 1000);
  }

  handleInputChange(event: any) {
    var file = event.dataTransfer ? event.dataTransfer.files[0] : event.target.files[0];
    var pattern = /image-*/;
    var reader = new FileReader();
    if (!file.type.match(pattern)) {
      alert('invalid format');
      return;
    }
    reader.onload = this._handleReaderLoaded.bind(this);
    reader.readAsDataURL(file);
  }

  _handleReaderLoaded(e) {
    let reader = e.target;
    this.imgSrc = reader.result;
    console.log(this.imgSrc)

    this.sendImage();
  }

  private sendImage() {
    if (this.imgSrc) {
      const currentPictureId = Date.now();
      const pictures = this.firebaseStorage.ref('pictures/' + currentPictureId + '.jpg').putString(this.imgSrc, 'data_url');

      pictures.then(() => {
        this.picture = this.firebaseStorage.ref('pictures/' + currentPictureId + '.jpg').getDownloadURL();

        this.picture.subscribe((pictureUrl) => {
          console.log(pictureUrl);

          const message = {
            uid: this.conversationId,
            timestamp: Date.now(),
            text: null,
            sender: this.user.uid,
            receiver: this.friendUser.uid,
            url: pictureUrl,
            type: 'image'
          };

          this.conversationService.createConversation(message).then(() => this.textMessage = '')
            .then(() => console.log('conversacion creada correctamente'))
            .catch(() => console.log('error creando conversaciom'));

        }).then(() => console.log('foto en conversacion enviada correctamente')).catch(() => console.log('error subiendo foto'));

      }).catch(()=>{
        console.log('error obteniendo url. ');
      });

    }
  }
}

Jeffry Davila

student•

conversation.component.ts

 sendImagen()
  {
    const message={
        uid:this.conversation_id,
        timestamp: Date.now(),
        text: null,
        url:null,
        sender:this.user.uid,
        receiver:this.friend.uid,
        type: 'imagen'
    };
    this.conversationService.createConversation(message).then(()=>{}); 
  }

  doImagen(mensaje)
  {
    if(this.croppedImage)
    {
           const currentPictureId = Date.now();
           const picture = this.firebaseStorage.ref('imagenes/'+ currentPictureId + '.jpg').putString(this.croppedImage,'data_url');
           picture.then((result)=>{
           this.img_env=this.firebaseStorage.ref('imagenes/'+ currentPictureId + '.jpg').getDownloadURL();
           this.img_env.subscribe((p)=>{
           this.conversationService.setImagen(mensaje,p).then(()=>{
           }).catch((error)=>
           {
           console.log(error);
           });
           });
     }).catch((error)=>{
  console.log(error);
     });
  } 
  }```

Ivan Cardozo

student•

Tengo la consola prendida fuego por tu codigo .

Elmer Rodriguez

student•

no se si sera la manera correcta pero funciona

conversation.component.ts

croppedImage: any = '';
picture: any = '';
imageChangedEvent: any = '';


sendImagen(){
    if(this.croppedImage){
      const currentPictureId = Date.now();
      const picture = this.firebaseStorage.ref('conversation/pictures/' +this.conversation_id+'/'+currentPictureId+'.jpg').putString(this.croppedImage, 'data_url');
      picture.then( (result) => {
        this.picture = this.firebaseStorage.ref('conversation/pictures/'+this.conversation_id+'/'+currentPictureId+'.jpg').getDownloadURL();
        this.picture.subscribe((p) => {
          const message = {
            uid: this.conversation_id,
            timestamp: Date.now(),
            text: p,
            sender: this.user.uid,
            receiver: this.friend.uid,
            type: 'image'
          }
          this.conversationService.createConversation(message).then( () => {});
        });
      }).catch( (error) => {
        console.log(error);
      });
    }
   
  }

conversation.component.html

<span *ngIf="m.type=='text'">{{m.text}}</span>
<img *ngIf="m.type=='image'" src="{{m.text}}" />

Alejandro Demetrio Cortez Alvarez

student•

sendImage(){
    const currentPictureId = Date.now();
    const pictures = this.angularFireStorage.ref('pictures/' + currentPictureId + '.jpg').putString(this.croppedImage, 'data_url');
    pictures.then((result) => {
      this.picture = this.angularFireStorage.ref('pictures/' + currentPictureId + '.jpg').getDownloadURL();
      this.picture.subscribe((p) => {
        const message = {
          uid: this.conversation_id,
          timestamp: Date.now(),
          text: p,
          sender: this.user.uid,
          receiver: this.friend.uid,
          type: 'img'
        };
        this.conversationService.createConversation(message).then(() => { });
        this.croppedImage = '';
        this.imageChangedEvent = '';
      });
    }).catch((error) => {
      console.log(error);
    });
  }

Ezequiel Fabbroni

student•

Le falta un poco de estilo pero funciona!!!

Daniel Mauricio Valencia Gómez

student•

  sendImage() {
    const currentPictureId = Date.now();
    const pictures = this.firebaseStorage.ref('pictures/' + currentPictureId + '.jpg').putString(this.croppedImage, 'data_url');
    pictures.then((result) => {
      this.picture = this.firebaseStorage.ref('pictures/' + currentPictureId + '.jpg').getDownloadURL();
      this.picture.subscribe((p) => {
        const message = {
          uid: this.conversation_id,
          timestamp: Date.now(),
          text: p,
          sender: this.user.uid,
          receiver: this.friend.uid,
          type: 'image'
        }
        this.conversationService.createConversation(message).then(() => { });
        this.croppedImage = ''
      });
    }).catch((error) => {
      console.log(error)
    });
doNewMessage(){
    const audio = new Audio('assets/sound/new_message.m4a');
    audio.play();
  }
  doZumbido(){
    const audio = new Audio('assets/sound/zumbido.m4a');
    audio.play();
    this.shake = true;
    window.setTimeout(()=>{
      this.shake = false;
    }, 1000);
  }
  getConversation(){
    this.conversationService.getConversation(this.conversation_id).valueChanges().subscribe((data) => {
      this.conversation = data;
      this.conversation.forEach((message) => {
        if( !message.seen){
          message.seen = true;
          this.conversationService.editConversation(message);
          if(message.type == 'text'){
            this.doNewMessage();
          } else if (message.type == 'image') {
            this.doNewMessage();
          } else if (message.type == 'zumbido') {
            this.doZumbido();
          }
         
        }
      });
      console.log(data)
    }, (error)=>{ console.log(error)});
  }

getConversation() {  this.conversationService.getConversation(this.conversation_id).valueChanges().subscribe((data)=>{
this.conversation=data;
this.conversation.forEach((message)=>
{
if(!message.seen)
{
message.seen=true;
this.conversationService.editConversation(message);
if(message.type=='text')
{
const audio=new Audio('assets/sound/new_message.m4a');
audio.play();
}
 else if(message.type=='zumbido')
{
    this.doZumbido();
} 
else if(message.type=='imagen')
{
this.doImagen(message)const audio=new Audio('assets/sound/new_message.m4a');
audio.play();
this.envio_imagen=false;
console.log(this.envio_imagen)
}
}
});
console.log(data);
},(error)=>{
console.log(error);
});
}

<div class="messageGroup" *ngFor="let m of conversation">
<b>{{getUserNickById(m.sender)}}</b> dice: <br />
<span>{{m.text}}</span>
<div class="imagen_enviada" *ngIf="m.url">
<img  [src]="m.url " class="avatarImage img-fluid" alt="">
</div>
</div>

<div class="conversationContainer bluewhitebg" [ngClass]="{'shaker' : shake}">
  <div class="row">
    <div class="col-sm-3 maxwi300">
      <div id="conversationSidebar">
        <div class="vh30">
          <div class="avatarFrameonline">
            <img src="{{'assets/img/generic_avatar.png'}}" class="avatarImage img-fluid">
          </div>
        </div>
        <div class="vh30"></div>
        <div class="vh25">
          <div class="avatarFrameonline">
            <img src="{{'assets/img/generic_avatar.png'}}" class="avatarImage img-fluid">
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-9">
      <br/>
      <span class="friendName">Amigo 1</span> (online)
      <hr/>
      <div class="vh55 overscroll pabo10" id="messageArea">
        <div class="messageGroup" *ngFor="let message of conversation">
          <div *ngIf="!message.type || message.type=='text'">
            <b>{{geUserNickById(message.uid)}}</b> dice : <br/>
            <span>{{message.text}}</span>
          </div>

          <div *ngIf="message.type=='buzz'">
            <b>{{geUserNickById(message.uid)}}</b> ha enviado un zumbido<br/>
          </div>

          <div *ngIf="message.type=='image'">
            <b>{{geUserNickById(message.uid)}}</b> dice : <br/>
            <img [src]="message.url" alt="imagen" class="img-fluid">
          </div>

        </div>
      </div>
      <div class="messageControlsContainer">
        <textarea [(ngModel)]="textMessage" (keyup.enter)="sendMessage()" class="form-control" cols="30"
                  rows="5"></textarea>
        <div id="messageToolBar">
          <div class="item">
            <img src="assets/img/icons/regular_smile.gif" class="tool">
            <i name="caret-down"></i>
          </div>
          <div class="item">
            <img src="assets/img/icons/wink_smile.gif" class="tool">
            <i name="caret-down"></i>
          </div>
          <div class="item" (click)="sendBuzz()">
            <img src="assets/img/zumbido.png" class="tool">
          </div>

          <a class="btn btn-primary btn-sm marri10" accept="image/*">Enviar</a>
          <label class="custom-file-upload">
            <input type="file" (change)="handleInputChange($event)">
            <i name="image"></i> Seleccionar Imagen
          </label>
        </div>
      </div>
    </div>
  </div>
</div>

import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from "@angular/router";
import {User} from "../../interfaces/user";
import {UserService} from "../../services/user.service";
import {ConversationsService} from "../../services/conversations.service";
import {AuthenticationService} from "../../services/authentication.service";
import {extractMessages} from "@angular/compiler/src/i18n/extractor_merger";
import {AngularFireStorage} from "@angular/fire/storage";

@Component({
  selector: 'app-conversation',
  templateUrl: './conversation.component.html',
  styleUrls: ['./conversation.component.scss']
})
export class ConversationComponent implements OnInit {

  friendId: any;
  friendUser: User;
  user: User;
  conversationId: string;
  private textMessage: string;
  private conversation: any[];
  shake: boolean = false;
  private imgSrc: any = '';
  picture: any;


  constructor(private userService: UserService, private activatedRoot: ActivatedRoute, private conversationService: ConversationsService, private authenticationService: AuthenticationService, private firebaseStorage: AngularFireStorage) {
    this.friendId = this.activatedRoot.snapshot.params['uid'];

    this.userService.getUserById(this.friendId).valueChanges().subscribe((data: User) => {
        this.friendUser = data;
      }, (error) => {
        console.log(error);
      }
    );

    this.authenticationService.getStatus().subscribe((session) =>
      this.userService.getUserById(session.uid).valueChanges().subscribe(
        (user: User) => {
          this.user = user;
          const ids = [this.user.uid, this.friendUser.uid].sort();

          this.conversationId = ids.join('|');

          this.getConversation();
        }
      ));
  }

  ngOnInit() {
  }

  sendMessage() {
    const message = {
      uid: this.conversationId,
      timestamp: Date.now(),
      text: this.textMessage,
      sender: this.user.uid,
      receiver: this.friendUser.uid,
      type: 'text'
    }
    this.conversationService.createConversation(message).then(() => this.textMessage = '');
  }


  sendBuzz() {
    const message = {
      uid: this.conversationId,
      timestamp: Date.now(),
      text: null,
      sender: this.user.uid,
      receiver: this.friendUser.uid,
      type: 'buzz'
    }
    this.conversationService.createConversation(message).then(() => this.textMessage = '');
  }


  private getConversation() {
    this.conversationService.getConversation(this.conversationId).valueChanges().subscribe((data) => {
      console.log(data);
      this.conversation = data;
      this.conversation.forEach((message) => {


        if (!message.seen) {
          message.seen = true;
          this.conversationService.editConversation(message);
          if (message.type == 'text') {
            const audio = new Audio('assets/sound/new_message.m4a');
            audio.play();
          } else if (message.type == 'buzz') {
            this.doBuzz();
          }
        }
      })
    }, (error) => console.log(error));
  }

  private geUserNickById(uid) {
    if (this.friendUser.uid === uid) {
      return this.friendUser.nick;
    } else {
      return this.user.nick;
    }
  }

  private doBuzz() {
    const audio = new Audio('assets/sound/zumbido.m4a');
    audio.play();
    this.shake = true;
    window.setTimeout(() => {
      this.shake = false
    }, 1000);
  }

  handleInputChange(event: any) {
    var file = event.dataTransfer ? event.dataTransfer.files[0] : event.target.files[0];
    var pattern = /image-*/;
    var reader = new FileReader();
    if (!file.type.match(pattern)) {
      alert('invalid format');
      return;
    }
    reader.onload = this._handleReaderLoaded.bind(this);
    reader.readAsDataURL(file);
  }

  _handleReaderLoaded(e) {
    let reader = e.target;
    this.imgSrc = reader.result;
    console.log(this.imgSrc)

    this.sendImage();
  }

  private sendImage() {
    if (this.imgSrc) {
      const currentPictureId = Date.now();
      const pictures = this.firebaseStorage.ref('pictures/' + currentPictureId + '.jpg').putString(this.imgSrc, 'data_url');

      pictures.then(() => {
        this.picture = this.firebaseStorage.ref('pictures/' + currentPictureId + '.jpg').getDownloadURL();

        this.picture.subscribe((pictureUrl) => {
          console.log(pictureUrl);

          const message = {
            uid: this.conversationId,
            timestamp: Date.now(),
            text: null,
            sender: this.user.uid,
            receiver: this.friendUser.uid,
            url: pictureUrl,
            type: 'image'
          };

          this.conversationService.createConversation(message).then(() => this.textMessage = '')
            .then(() => console.log('conversacion creada correctamente'))
            .catch(() => console.log('error creando conversaciom'));

        }).then(() => console.log('foto en conversacion enviada correctamente')).catch(() => console.log('error subiendo foto'));

      }).catch(()=>{
        console.log('error obteniendo url. ');
      });

    }
  }
}

 sendImagen()
  {
    const message={
        uid:this.conversation_id,
        timestamp: Date.now(),
        text: null,
        url:null,
        sender:this.user.uid,
        receiver:this.friend.uid,
        type: 'imagen'
    };
    this.conversationService.createConversation(message).then(()=>{}); 
  }

  doImagen(mensaje)
  {
    if(this.croppedImage)
    {
           const currentPictureId = Date.now();
           const picture = this.firebaseStorage.ref('imagenes/'+ currentPictureId + '.jpg').putString(this.croppedImage,'data_url');
           picture.then((result)=>{
           this.img_env=this.firebaseStorage.ref('imagenes/'+ currentPictureId + '.jpg').getDownloadURL();
           this.img_env.subscribe((p)=>{
           this.conversationService.setImagen(mensaje,p).then(()=>{
           }).catch((error)=>
           {
           console.log(error);
           });
           });
     }).catch((error)=>{
  console.log(error);
     });
  } 
  }```

croppedImage: any = '';
picture: any = '';
imageChangedEvent: any = '';


sendImagen(){
    if(this.croppedImage){
      const currentPictureId = Date.now();
      const picture = this.firebaseStorage.ref('conversation/pictures/' +this.conversation_id+'/'+currentPictureId+'.jpg').putString(this.croppedImage, 'data_url');
      picture.then( (result) => {
        this.picture = this.firebaseStorage.ref('conversation/pictures/'+this.conversation_id+'/'+currentPictureId+'.jpg').getDownloadURL();
        this.picture.subscribe((p) => {
          const message = {
            uid: this.conversation_id,
            timestamp: Date.now(),
            text: p,
            sender: this.user.uid,
            receiver: this.friend.uid,
            type: 'image'
          }
          this.conversationService.createConversation(message).then( () => {});
        });
      }).catch( (error) => {
        console.log(error);
      });
    }
   
  }

sendImage(){
    const currentPictureId = Date.now();
    const pictures = this.angularFireStorage.ref('pictures/' + currentPictureId + '.jpg').putString(this.croppedImage, 'data_url');
    pictures.then((result) => {
      this.picture = this.angularFireStorage.ref('pictures/' + currentPictureId + '.jpg').getDownloadURL();
      this.picture.subscribe((p) => {
        const message = {
          uid: this.conversation_id,
          timestamp: Date.now(),
          text: p,
          sender: this.user.uid,
          receiver: this.friend.uid,
          type: 'img'
        };
        this.conversationService.createConversation(message).then(() => { });
        this.croppedImage = '';
        this.imageChangedEvent = '';
      });
    }).catch((error) => {
      console.log(error);
    });
  }

Reto: Envía una foto

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