Mostrando conversación

Clase 45 de 57 • Curso de Ionic Avanzado 2017

Contenido del curso

Introducción a Ionic

Estructura de nuestra App con Ionic

Basics de Angular y TypeScript

Agregando estilos con CSS a nuestra aplicación

Acceso a datos remotos

Opciones y Acceso Nativo

Conversación

Amigos

Deploy

Contenido Bonus

Tomar examen

Comentarios

Carlos Enrique Ramírez Flores

student•

Andres Mauricio Quiñones Mosquera

student•

hola, en ocaciones me pasa que los mensaje no llega en el orden correcto y de igual foma con los nombre

Luis Castillo

student•

como puedo enviar videos?

Juan Camilo Angel Fandiño

student•

Pienso que de la misma forma que las imágenes, sólo que en el mediaType del CameraOptions escoges MediaType.VIDEO.

TODO1

student•

Es posible almacenar en firebase un identificador, en lugar del timestamp para las conversaciones?, ya que al parecer si se tiene dispositivos que no están sincronizados con la hora, los registros se almacenan de forma incorrecta; o sino hay forma que Obtener la hora desde los servidores de firebase en lugar de usar Date.now()

Diego Forero

Team Platzi•

Si, tu puedes crear un hash por cada mensaje, enviarlo y tenerlo guardado y hacer consulta por ese dato.

Carlos Uriel de Jesus Sánchez González

student•

excelente

dana camelo

student•

estoy obteniendo este error al abrir una conversación TypeError: this.conversationService.getById is not a function saben como se puede solucionar?

getConversation() {
  	this.conversationService.getById(this.conversationId).valueChanges().subscribe((data) => {
  		this.conversation = data;
  	}, (error) => {
  		console.log(error);
  	})
  }```

Francisco Alfredo Hernández Reyes

student•

si esa funcion existe en tu ConversationService, deten el ionic serve y lo vuelves a ejecutar, aveces eso ocurre en ionic aun cuando tu metodo existe.

Pedro Roberto Capriles Morales

student•

Respondiendo al reto

Funciones de geoLocation y TakePicture

  async takePicture(source:string){
    try{
      let cameraOptions: CameraOptions={
        quality:50,
        targetWidth:800,
        targetHeight:800,
        destinationType: this.camera.DestinationType.DATA_URL,
        encodingType: this.camera.EncodingType.JPEG,
        mediaType: this.camera.MediaType.PICTURE,
        allowEdit:true,
      };

      cameraOptions.sourceType = (source === 'camera')?this.camera.PictureSourceType.CAMERA: this.camera.PictureSourceType.PHOTOLIBRARY;

      const result = await this.camera.getPicture(cameraOptions);

      const image = 'data:image/jpeg;base64,'+result;
      this.pictureId = Date.now();
      this.userService.uploadPicture(this.pictureId+'.jpg',image).then((data)=>{
        this.userService.getDownloadURL(this.pictureId+'.jpg').subscribe((url)=>{

          if(cameraOptions.sourceType === PictureSourceType.CAMERA){
            this.sendMessageMultimedia(url,ConversationTypeEnum.Picture);
          }
          else if(cameraOptions.sourceType === PictureSourceType.PHOTOLIBRARY){
            this.sendMessageMultimedia(url,ConversationTypeEnum.Image);
          }

          let toast = this.toastCtrl.create({
            message:"Foto Subida",
            duration: 3000,
            position:"bottom"
          });
          toast.present();
        },(error)=>{
          console.log(error);
        });
      }).catch((error)=>{
        console.log(error);
      });
      console.log(image);
    }
    catch(e){
      console.error(e);
    }

  }

  getLocation(){
    this.geolocation.getCurrentPosition().then((response)=>{
      console.log(response);
      this.location = response;
      this.httpClient.get("http://maps.googleapis.com/maps/api/geocode/json?latlng="+this.location.coords.latitude+","+this.location.coords.longitude).subscribe((data)=>{
        console.log(data);
        this.sendMessageMultimedia(this.location.coords.latitude+','+this.location.coords.longitude,ConversationTypeEnum.Location);
      }, (error)=>{
        console.log(error);
      });
    }).catch((error)=>{
      console.log(error);
    })
  }

Servicios detomar foto

    uploadPictureConversation(pictureName: any, image: any) {
        return this.angularFireStorage.ref('pictures/'+pictureName).putString(image,'data_url');
      }
  
      getDownloadURLConversation(pictureName: any) {
        return this.angularFireStorage.ref('pictures/'+pictureName).getDownloadURL();
      }

Front de pantalla de conversación

 <ion-fab right middle>
    <button ion-fab>
      <ion-icon name="send">

      </ion-icon>
    </button>
    <ion-fab-list side="top">
      <button outline ion-fab>
        <img src="assets/imgs/zumbido.png" />
      </button>
    </ion-fab-list>
    <ion-fab-list side="bottom">
        <button color="dark" ion-fab (click)="takePicture('camera')">
          <ion-icon name="camera" ></ion-icon>
        </button>
        <button color="dark" ion-fab (click)="takePicture('album')"> 
            <ion-icon name="images"></ion-icon>
          </button>
          <button color="dark" ion-fab (click)="getLocation()">
            <ion-icon name="pin"></ion-icon>
          </button>
      </ion-fab-list>
  </ion-fab>
  <ng-template *ngFor="let message of conversation">
      <div class="message" *ngIf="message.type== 'text'">
          <b>{{getUserNickById(message.sender)}}</b> dice: {{message.content}}
      </div>
      <div class="message" *ngIf="message.type== 'picture' || message.type=== 'image'">
          <b>{{getUserNickById(message.sender)}}</b>
          <ion-thumbnail slot="start">
              <img src="{{message.content}}" />
          </ion-thumbnail>
      </div>
      <div class="message" *ngIf="message.type== 'location'">
          <b>{{getUserNickById(message.sender)}}</b> 
          <ion-icon name="pin" color="green"></ion-icon><span>>dice: {{message.content}}</span
      </div>
  </ng-template>

  async takePicture(source:string){
    try{
      let cameraOptions: CameraOptions={
        quality:50,
        targetWidth:800,
        targetHeight:800,
        destinationType: this.camera.DestinationType.DATA_URL,
        encodingType: this.camera.EncodingType.JPEG,
        mediaType: this.camera.MediaType.PICTURE,
        allowEdit:true,
      };

      cameraOptions.sourceType = (source === 'camera')?this.camera.PictureSourceType.CAMERA: this.camera.PictureSourceType.PHOTOLIBRARY;

      const result = await this.camera.getPicture(cameraOptions);

      const image = 'data:image/jpeg;base64,'+result;
      this.pictureId = Date.now();
      this.userService.uploadPicture(this.pictureId+'.jpg',image).then((data)=>{
        this.userService.getDownloadURL(this.pictureId+'.jpg').subscribe((url)=>{

          if(cameraOptions.sourceType === PictureSourceType.CAMERA){
            this.sendMessageMultimedia(url,ConversationTypeEnum.Picture);
          }
          else if(cameraOptions.sourceType === PictureSourceType.PHOTOLIBRARY){
            this.sendMessageMultimedia(url,ConversationTypeEnum.Image);
          }

          let toast = this.toastCtrl.create({
            message:"Foto Subida",
            duration: 3000,
            position:"bottom"
          });
          toast.present();
        },(error)=>{
          console.log(error);
        });
      }).catch((error)=>{
        console.log(error);
      });
      console.log(image);
    }
    catch(e){
      console.error(e);
    }

  }

  getLocation(){
    this.geolocation.getCurrentPosition().then((response)=>{
      console.log(response);
      this.location = response;
      this.httpClient.get("http://maps.googleapis.com/maps/api/geocode/json?latlng="+this.location.coords.latitude+","+this.location.coords.longitude).subscribe((data)=>{
        console.log(data);
        this.sendMessageMultimedia(this.location.coords.latitude+','+this.location.coords.longitude,ConversationTypeEnum.Location);
      }, (error)=>{
        console.log(error);
      });
    }).catch((error)=>{
      console.log(error);
    })
  }

    uploadPictureConversation(pictureName: any, image: any) {
        return this.angularFireStorage.ref('pictures/'+pictureName).putString(image,'data_url');
      }
  
      getDownloadURLConversation(pictureName: any) {
        return this.angularFireStorage.ref('pictures/'+pictureName).getDownloadURL();
      }

 <ion-fab right middle>
    <button ion-fab>
      <ion-icon name="send">

      </ion-icon>
    </button>
    <ion-fab-list side="top">
      <button outline ion-fab>
        <img src="assets/imgs/zumbido.png" />
      </button>
    </ion-fab-list>
    <ion-fab-list side="bottom">
        <button color="dark" ion-fab (click)="takePicture('camera')">
          <ion-icon name="camera" ></ion-icon>
        </button>
        <button color="dark" ion-fab (click)="takePicture('album')"> 
            <ion-icon name="images"></ion-icon>
          </button>
          <button color="dark" ion-fab (click)="getLocation()">
            <ion-icon name="pin"></ion-icon>
          </button>
      </ion-fab-list>
  </ion-fab>
  <ng-template *ngFor="let message of conversation">
      <div class="message" *ngIf="message.type== 'text'">
          <b>{{getUserNickById(message.sender)}}</b> dice: {{message.content}}
      </div>
      <div class="message" *ngIf="message.type== 'picture' || message.type=== 'image'">
          <b>{{getUserNickById(message.sender)}}</b>
          <ion-thumbnail slot="start">
              <img src="{{message.content}}" />
          </ion-thumbnail>
      </div>
      <div class="message" *ngIf="message.type== 'location'">
          <b>{{getUserNickById(message.sender)}}</b> 
          <ion-icon name="pin" color="green"></ion-icon><span>>dice: {{message.content}}</span
      </div>
  </ng-template>

Mostrando conversación

Introducción a Ionic

Intro a Ionic Framework, Angular, Platzinger, y Ionic CLI

Instalación de Ionic y más herramientas en Mac OS

Instalación de Ionic y más herramientas de desarrollo en Windows

Estructura de nuestra App con Ionic

Arquitectura de una app en Ionic

Proyecto: Platzinger App

Repositorio del curso

Qué son pages y cómo generar las primeras de nuestra app

Navegación básica entre pages

Reto: Página “Acerca de” accesible desde el menú lateral

Tomando los conceptos compartidos de Angular y Ionic

Basics de Angular y TypeScript

Aclaraciones Ionic vs Angular

Cómo usar tipos de datos con typescript

Qué son e implementando interfaces de TypeScript

NgFor aplicado en la lista de usuarios

NgIf aplicado en la lista de usuarios

Navegación con parámetros

Accediendo a nuestros usuarios con conversation.ts

Creando un servicio de usuarios e inyectando el servicio en nuestros pages

Pipes en TypeScript (Date, Number, Json)

Creando nuestro propio 'Pipe' para buscar entre nuestros contactos

Reto: Mostrar un icono diferente según el status del usuario

Agregando estilos con CSS a nuestra aplicación

Cómo usar estilos CSS y referenciar recursos

Implementando estilos en la pantalla de login

Implementando estilos en la pantalla de home

Implementando estilos en la pantalla de conversación

Usando ngStyle y ngClass para añadir estilos dinámicos

Cambiar icono según status

Acceso a datos remotos

Información importante antes de continuar

¿Qué es Firebase?

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

Login/Registro de usuarios con email y password

Login/Registro de usuarios con Facebook

Implementando Log Out

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

Opciones y Acceso Nativo

Crear page de Perfil

Editar datos básicos del perfil de usuario

Configurando Android Studio

Capturar fotos de cámara y álbum

Preparando aplicación para recibir fotos desde la cámara y galería del Android

Guardando y asignando una foto de perfil al usuario desde la cámara

Preparando aplicación para utilizar geolocalización

Conectándonos al API de Google

Conversación

Más estilos

Enviando un mensaje (con reproducción de sonido)