Agregar la habilidad de eliminar records

Clase 30 de 36 • Curso Básico de Ionic 2018

Juan C Felizzola

student•

Para agregar una imagen como avatar y en los detalles usé Lorem Pixel para generar imagenes aleatorias. Hice lo siguiente:
En home.html en <ion-item> agregué:

<ion-item (click)="irAVistaDeDetalleExistente(lugar)">
    <ion-avatar item-start>
      <img src="http://lorempixel.com/350/230/">
    </ion-avatar>
    <h2>{{ lugar.nombre }}</h2>
    <h3>{{ lugar.direccion }}</h3>
    <p>{{ lugar.categoria }}</p>
</ion-item>

Y en lugar.html en <ion-list> agregué:

<ion-card>
  <img src="http://lorempixel.com/350/230/"/>
</ion-card>

Nathaly Stefani Riaño Bejarano

student•

Genial! No funcionó con lorempixel, así que utilicé pleceimg

home.html
<ion-avatar item-start> <img src="https://placeimg.com/350/230/arch"> </ion-avatar>

lugar.html
<ion-card> <img src="https://placeimg.com/350/230/arch"/> </ion-card>

Alexander Sandoval

student•

Creo que es por el https. Me pasó lo mismo que a @NathaRB.

Pedro Roberto Capriles Morales

student•

Metodo donde cargamos la imagen

uploadPhoto($event):void{
    this.file = $event.target.files[0];

     Functions.getBase64(this.file).then((result)=>{
       console.log(result);
       this.lugar.imagen= result;
      return result;
    });

  }

HTML del formulario desde donde cargaremos la imagen.

 <ion-item>
          <ion-label fixed>Imagen</ion-label>
          <ion-avatar item-end>
            <img *ngIf="lugar.imagen" src="{{lugar.imagen}}">
            <img *ngIf="!lugar.imagen" src="../../assets/imgs/logo.png">
          </ion-avatar>
     </ion-item>
     <ion-item>
        <ion-label stacked>Cargar Imagen</ion-label>
        <ion-input type="file" (change)="uploadPhoto($event)"></ion-input>
      </ion-item>
    <ion-item>

Resultado

La clase abstracta con el método usado para convertir la imagen a base 64 es el siguiente:

export abstract class Functions{
    static getBase64(file:File) {
        return new Promise((resolve, reject) => {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => resolve(reader.result);
          reader.onerror = error => reject(error);
        });
      }
}

Carlos Uriel de Jesus Sánchez González

student•

Es elemental ver el curso de angular

Juan Guillermo Perez Cardozo

student•

en ionic 4 no me salio funciono la confirmacion de la eliminacion. sera investigar

Fabian Bohorquez

student•

Lastima que no suban el contenido del codigo ?

Diego Forero

Team Platzi•

Lo publicaremos pronto.

Fabian Bohorquez

student•

Muchas Gracias GOLLUM23 se que tu trabajo debe ser duro, pero lastimosamente me e fijado que no es el único curso que falta a;adir el código, pero bueno, son cosas que deben mejorar con la practica. como me gustaria que ustedes le compitieran, a las grandes ligas de la educación online.

<ion-item (click)="irAVistaDeDetalleExistente(lugar)">
    <ion-avatar item-start>
      <img src="http://lorempixel.com/350/230/">
    </ion-avatar>
    <h2>{{ lugar.nombre }}</h2>
    <h3>{{ lugar.direccion }}</h3>
    <p>{{ lugar.categoria }}</p>
</ion-item>

uploadPhoto($event):void{
    this.file = $event.target.files[0];

     Functions.getBase64(this.file).then((result)=>{
       console.log(result);
       this.lugar.imagen= result;
      return result;
    });

  }

 <ion-item>
          <ion-label fixed>Imagen</ion-label>
          <ion-avatar item-end>
            <img *ngIf="lugar.imagen" src="{{lugar.imagen}}">
            <img *ngIf="!lugar.imagen" src="../../assets/imgs/logo.png">
          </ion-avatar>
     </ion-item>
     <ion-item>
        <ion-label stacked>Cargar Imagen</ion-label>
        <ion-input type="file" (change)="uploadPhoto($event)"></ion-input>
      </ion-item>
    <ion-item>

export abstract class Functions{
    static getBase64(file:File) {
        return new Promise((resolve, reject) => {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => resolve(reader.result);
          reader.onerror = error => reject(error);
        });
      }
}

Agregar la habilidad de eliminar records

Introducción

Aprende sobre Ionic con los cursos actualizados

Introducción al Curso de Ionic

Pre-Requisitos para este curso de Ionic

Treasure Hunting GeoCatching

Instalación y overview de Ionic CLI

Preparación de entorno de desarrollo en Mac

Preparación de entorno de desarrollo en Windows

Preparación de entorno de desarrollo en Linux

Aspectos Básicos

Crear una Aplicación

Corriendo Aplicación en el Browser

Estructura de Archivos

Estructura de una vista de Ionic

Navegación

Creando un nuevo page

Navegar a un page

Navegación por Tabs

Parámetros de navegación

Navegación hacia atrás

Navegación raíz

Estilos (Theming)

Introducción a estilos

Colores Personalizados

Alineación y transformación de texto

Padding y Márgenes

CRUD en Ionic y Firebase

Generar proyecto e instalar dependencias

Agregar y configurar AngularFire

Agregar servicio de acceso a datos

Crear una lista con array estático

Crear una vista para agregar records

Agregar la habilidad de ver records

Crear lista dinámica y agregar la habilidad de editar records

Agregar la habilidad de eliminar records

Implementando Login con Facebook

Deployment

Correr aplicaciones en emulador

Correr aplicación en dispositivos Android

Correr aplicación en dispositivos iOS

Publicando nuestra aplicación en Android y iOS stores

Conclusiones del curso