Archivo de la etiqueta: modificar db

Tutorial de Ionic – Crear una aplicaci贸n para guardar nuestros sitios geolocalizados – Parte 8 – Eliminar un sitio desde el listado deslizando el item con "ItemSliding".

En el siguiente enlace tienes el 铆ndice para acceder al resto de entradas de este tutorial:

 

隆隆Atenci贸n!! este tutorial se basa en ionic 3 y est谩 desactualizado por lo que es posible que los ejemplos no funcionen en la 煤ltima versi贸n de ionic, haz click aqu铆 para acceder a un tutorial mas actual de Ionic.

Hola a todos.

En el post anterior聽聽vimos como modificar un sitio, hoy vamos a mejorar nuestra app para que se puedan eliminar nuestros sitio, pero para aprender m谩s sobre las posibilidades de ionic lo vamos ha hacer desde el listado, deslizando el elemento del listado hacia la izquierda nos mostrar谩 el bot贸n de eliminar. Tambi茅n aprovecharemos para aprender a utilizar聽AlertController聽para mostrar un dialogo que pida confirmaci贸n antes de eliminar el sitio.

Vamos a ver como ser铆a:

Lo primero que vamos a hacer es modificar el listado para a帽adir un ion-item-sliding聽que es un componente que nos permite deslizar el item, debemos introducir el item dentro de ion-item-sliding y le vamos a a帽adir despues del item un elemento ion-item-options聽que nos permite a帽adir opciones que se mostrar谩n al deslizar el item. Se pueden a帽adir tantas opciones como desees, nosotros solo vamos a necesitar una para borrar el elemento. Vamos a ver como tiene que quedar el c贸digo, editamos el archivo listado.html聽y lo dejamos de la siguiente manera:

<!--
聽聽Generated template for the ListadoPage page.

聽聽See http://ionicframework.com/docs/components/#navigation for more info on
聽聽Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>Listado</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
<ion-list>
  <ion-item-sliding #item *ngFor="let sitio of sitios">
    <ion-item (click)="muestraSitio(sitio)">
      <ion-thumbnail item-left>
        <img [src]="sitio.foto">
      </ion-thumbnail>
      <h2>{{ sitio.address }}</h2>
      <p>{{ sitio.description }}</p>
    </ion-item>
    <ion-item-options side="right">
      <button ion-button  color="danger" (click)="borrarSitio(sitio.id)"><ion-icon name="trash"></ion-icon>
         Borrar
      </button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>
</ion-content>

Como podemos observar hemos puesto el *ngFor聽en la etiqueta ion-item-sliding que ahora envuelve al ion-item que ya ten铆amos.

Despues del ion-item hemos a帽adido un componente ion-item-options聽al que le indicamos que se muestre en el lado derecho (side=”right”).

Dentro de ion-item-options tenemos un bot贸n con in icono (ion-icon) que muestra el icono “trash” que es el t铆pico cubo de basura y el texto “borrar”.
En el evento click del bot贸n le decimos que llame a la funci贸n borrarSitio.

Si probamos la aplicaci贸n pod茅is comprobar en el listado que los items ahora se pueden arrastrar hacia la izquierda y aparece el bot贸n de borrar:

Borrando un sitio
Borrando un sitio

Ahora debemos definir la funci贸n borrar sitio en el controlador del listado. Antes de borrar vamos a sacar un dialogo de confirmaci贸n que nos preguntar谩 si realmente queremos eliminar el sitio, para ello vamos a utilizar el componente Alert.

Alerts

Los alerts son una excelente manera de ofrecer al usuario la posibilidad de elegir una acci贸n espec铆fica o una lista de acciones. Tambi茅n pueden proporcionar al usuario informaci贸n importante, o requerir que tomen una decisi贸n.

Ionic nos proporciona los siguientes tipos de Alerts:

En este caso 聽como lo que queremos es que el usuario confirme el borrado del sitio vamos a utilizar alert de confirmaci贸n.

Para poder utilizar un alert lo primero que debemos hacer es importar AlertController e inyectarlo en el constructor, por lo tanto vamos a editar聽el archivo listado.ts聽y a帽adimos el siguiente c贸digo:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ModalController } from 'ionic-angular';
import { DbProvider } from '../../providers/db/db';
import { AlertController } from 'ionic-angular';


/**
聽* Generated class for the ListadoPage page.
聽*
聽* See http://ionicframework.com/docs/components/#navigation for more info
聽* on Ionic pages and navigation.
*/
@IonicPage()
@Component({
  selector: 'page-listado',
  templateUrl: 'listado.html',
})
export class ListadoPage {

  sitios: any;
  constructor(public navCtrl: NavController,
              public navParams: NavParams,
              public modalCtrl : ModalController,
              public db : DbProvider,
              public alertCtrl : AlertController) {
  }

....

Ahora聽聽vamos a聽聽a crear la funci贸n borrarSitio()聽y definiremos dentro de ella el alert de la siguiente manera:

borrarSitio(id){

    let alert = this.alertCtrl.create({
      title: 'Confirmar borrado',
      message: '驴Est谩s seguro de que deseas eliminar este sitio?',
      buttons: [
        {
          text: 'No',
          role: 'cancel',
          handler: () => {
            // Ha respondido que no as铆 que no hacemos nada
          }
        },
        {
          text: 'Si',
          handler: () => {
               // Aqu脥 borramos el sitio en la base de datos

           }
        }
      ]
    });

    alert.present();

 }

Para crear un alert utilizamos el m茅todo create donde tenemos que definir el t铆tulo en este caso “Confirmar borrado”, el mensaje: “驴Estas seguro de que deseas eliminar este sitio?”.

Despu茅s definimos los dos botones de acci贸n uno para SI y otro para NO, en text definimos el texto del bot贸n y en handler definiremos la acci贸n que debemos realizar, en caso de pulsar “No” no hacemos nada, en caso de pulsar “Si” procederemos a eliminar el sitio.

Una vez definido el alert con聽alert.present()聽hacemos que se muestre.

Ahora que ya sabemos como se usan los alerts vamos a escribir el c贸digo del bot贸n “Si” para borrar el sitio.

Lo primero que tenemos que hacer es crear un nuevo m茅todo en el provider DbProvider聽para eliminar los sitios, por lo tanto editamos el archivo db.ts y a帽adimos la funci贸n borrarSitio():

public borrarSitio(id){
     let sql = "DELETE FROM sitios WHERE id= ? ";
     return this.db.executeSql(sql,[id]);
  }

Recibimos como par谩metro id que es el id del sitio que queremos eliminar de la base de datos, ejecutamos la query y si todo ha ido bien e sitio se habr谩 eliminado para siempre de la base de datos.

Ahora que ya tenemos preparada la funci贸n para borrar el sitio en el provider vamos a volver al alert de confirmaci贸n en listado.ts聽para definir las operaciones a realizar al pulsar el bot贸n “Si”, en la funci贸n handler del bot贸n “Si” a帽adimos el siguiente c贸digo:

borrarSitio(id){

    let alert = this.alertCtrl.create({
      title: 'Confirmar borrado',
      message: '驴Est谩s seguro de que deseas eliminar este sitio?',
      buttons: [
        {
          text: 'No',
          role: 'cancel',
          handler: () => {
              // Ha respondido que no as铆 que no hacemos nada         
           }
        },
        {
          text: 'Si',
          handler: () => {

              this.db.borrarSitio(id).then((res)=>{
            // Una vez borrado el sitio recargamos el listado
              this.db.getSitios().then((res)=>{
              this.sitios = [];
              for(var i = 0; i < res.rows.length; i++){
                  this.sitios.push({
                    id : res.rows.item(i).id,
                    lat: res.rows.item(i).lat,
                    lng: res.rows.item(i).lng,
                    address: res.rows.item(i).address,
                    description: res.rows.item(i).description,
                    foto: res.rows.item(i).foto
                  });
              }

              },(err)=>{ /* alert('error al sacar de la bd'+err) */ })

            },(err)=>{ /* alert('error al borrar de la bd'+err) */ });
          }
        }
      ]
    });

    alert.present();

   }

Lo primero que hacemos es llamar al m茅todo que acabamos de crear en el provider con this.db.borrarSitio(id) pas谩ndole como par谩metro el id del sitio.

En el then lo que vamos ha hacer es refrescar el listado para ello debemos modificar la variable miembro this.sitios que contiene los sitios que se muestran en el listado, lo que hacemos es volver a cargar de la base de datos los sitios, como acabamos de borrar un sitio este no aparecer谩. Para cargar los sitios de la base de datos utilizamos el m茅todo this.db.getSitios que ya tenemos definido y hacemos exactamente el mismo proceso que en la funci贸n 聽ionViewDidEnter聽para rellenar el array this.sitios con los datos obtenidos desde la base de datos. De hecho podemos definir una funci贸n que se encargue de recoger los sitios de la base de datos y rellenar el array this.sitios en lugar de repetir el c贸digo de ionViewDidEnter, eso ya lo dejo como mejora opcional.

Si ejecut谩is el c贸digo comprobar茅is que ya pod茅is borrar los sitio que no os interesen conservar en vuestro dispositivo.

Eso es todo por hoy.

 

Si necesitas desarrollar una aplicaci贸n m贸vil no dudes en solicitarme un presupuesto sin compromiso:

Tutorial de Ionic – Crear una aplicaci贸n para guardar nuestros sitios geolocalizados – Parte 7 – Modificar nuestros sitios.

En el siguiente enlace tienes el 铆ndice para acceder al resto de entradas de este tutorial:

 

隆隆Atenci贸n!! este tutorial se basa en ionic 3 y est谩 desactualizado por lo que es posible que los ejemplos no funcionen en la 煤ltima versi贸n de ionic, haz click aqu铆 para acceder a un tutorial mas actual de Ionic.

Hola a todos,

En el 煤ltimo post vimos como mostrar en un modal los sitios guardados y como abrir el navegador GPS para que nos marque la ruta hasta el.

Hoy vamos seguir desarrollando la app para poder modificar los sitios que tenemos guardados.

Lo primero que vamos a hacer es crear una variable miembro en el controlador del modal聽modal-detalle-sitio.ts聽a la que vamos a llamar edit y que ser谩 del tipo boolean por lo que la a帽adimos debajo de la variable sitio que ya ten铆amos definida:

...

export class ModalDetalleSitio {

聽聽sitio: any;
  edit : boolean = false;
  constructor(public navCtrl: NavController, public navParams: NavParams, private viewCtrl : ViewController) {

...

Esta variable nos servir谩 para mostrar u ocultar el formulario de edici贸n del sitio en funci贸n de si vale true o false. De inicio la ponemos a false para que no se muestre el formulario hasta que pulsemos en el bot贸n editar.

Bien, ahora vamos a modificar la vista para a帽adir el formulario y el bot贸n de editar.

El formulario ser谩 muy parecido al que pusimos en la vista del modal nuevo-sitio.

Editamos el archivo聽modal-detalle-sitio.html聽y a帽adimos el siguiente c贸digo marcado con fondo amarillo:

<!--
聽聽Generated template for the ModalDetalleSitio page.

聽聽See http://ionicframework.com/docs/components/#navigation for more info on
聽聽Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>{{ sitio.address }}</ion-title>
     <ion-buttons start>
      <button ion-button (click)="cerrarModal()">
        <ion-icon name="md-close"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <ion-card *ngIf="!edit">
    <img [src]="sitio.foto" *ngIf="sitio.foto" />
    <ion-card-content>
       <ion-item text-wrap>
          <h2>{{ sitio.address }}</h2>
           <p>{{ sitio.description }}</p>
        </ion-item>
    </ion-card-content>
    <ion-row>
      <ion-col text-center>
         <button ion-button icon-left clear small (click)="comoLlegar()">
           <ion-icon name="navigate"></ion-icon>
           <div>Como llegar</div>
         </button>
      </ion-col>
      <ion-col text-center>
         <button ion-button icon-left clear small (click)="editar()">
           <ion-icon name="editar"></ion-icon>
           <div>Editar</div>
         </button>
      </ion-col>
    </ion-row>
</ion-card>
 <ion-card *ngIf="edit">
      <ion-card-content>
      <form (ngSubmit)="guardarCambios()">
      <ion-item>
        <img [src]="sitio.foto" *ngIf="sitio.foto" />
        <button ion-button icon-left full type="button" (tap)="sacarFoto()">
          Foto&nbsp;&nbsp;
          <ion-icon name="camera"></ion-icon>
        </button>
      </ion-item>
      <hr/>
      <ion-item>
        <ion-label>Descripci贸n</ion-label>
        <ion-textarea [(ngModel)]="sitio.description" name="description"></ion-textarea>
      </ion-item>
      <button ion-button type="submit" block>Actualizar Sitio</button>
    </form>
    </ion-card-content>
    </ion-card>
</ion-content>

Vayamos por partes:

En primer lugar al ion-card que ya ten铆amos y que muestra los datos del sitio le hemos a帽adido *ngIf=”!edit”, con esto le indicamos que solo se muestre si la variable edit est谩 a false, es decir cuando no se est谩 editando:

  <ion-card *ngIf="!edit">

Despu茅s debajo del bot贸n “Como llegar” hemos creado otra columna (ion-col) donde mostramos el bot贸n Editar, en el evento click del bot贸n editar llamamos a la funci贸n editar() que posteriormente definiremos en el controlador, aunque ya adelanto que simplemente cambiar谩 el valor de la variable edit a true:

 <ion-col text-center>
         <button ion-button icon-left clear small (click)="editar()">
           <ion-icon name="editar"></ion-icon>
           <div>Editar</div>
         </button>
      </ion-col>

Despu茅s hemos a帽adido otro elemento ion-card al que le hemos puesto la directiva condicional *ngIf=”edit”, al contrario que el card anterior se mostrar谩 cuando la variable edit valga true, es decir, que dependiendo del valor de edit se mostrar谩 una cosa o la otra.

 <ion-card *ngIf="edit">

Despu茅s dentro de ion-card-content hemos creado un formulario para editar los campos modificables del sitio, en este caso la descripci贸n y la foto.

En el evento (ngSubmit) del formulario llamamos a la funci贸n guardarCambios()聽que definiremos despu茅s en el controlador:

      <form (ngSubmit)="guardarCambios()">

Al igual que ten铆amos en el formulario del modal nuevo sitio, tenemos un item con una imagen聽que mostramos solo si la variable sitio.foto contiene alg煤n valor (*ngIf=”sitio.foto):

<img [src]="sitio.foto" *ngIf="sitio.foto" />

Despu茅s tenemos el bot贸n para sacar una nueva foto:

 <button ion-button icon-left full type="button" (tap)="sacarFoto()">
          Foto&nbsp;&nbsp;
          <ion-icon name="camera"></ion-icon>
        </button>

Al pulsar en el bot贸n se llamar谩 a la funci贸n sacarFoto que deberemos definir en el controlador.

Despu茅s tenemos otro item con el text-area para modificar la descripci贸n del sitio:

<ion-item>
        <ion-label>Descripci贸n</ion-label>
        <ion-textarea [(ngModel)]="sitio.description" name="description"></ion-textarea>
      </ion-item>

Por 煤ltimo antes de cerrar el form tenemos un bot贸n para guardar los cambios:

<button ion-button type="submit" block>Actualizar Sitio</button>

Recordad que al pulsar el bot贸n se lanzar谩 el formulario que en el evento submit llama a la funci贸n聽guardarCambios().

Bien, ahora que ya tenemos preparada la vista tenemos que definir en el controlador todos los m茅todos que vamos a necesitar por lo que vamos a editar el archivo聽modal-detalle-sitio.ts.

Lo primero de todo, como vamos a utilizar la c谩mara y tambi茅n vamos a necesitar el provider db.ts que tenemos creado para gestionar la base de datos, necesitamos importarlos e inyectarlos en el constructor por lo tanto editamos el archivo聽modal-detalle-sitio.ts y a帽adimos el siguiente c贸digo:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
import { LaunchNavigator } from '@ionic-native/launch-navigator';
import { Camera, CameraOptions } from '@ionic-native/camera';
import { DbProvider } from '../../providers/db/db';



/**
聽* Generated class for the ModalDetalleSitio page.
聽*
聽* See http://ionicframework.com/docs/components/#navigation for more info
聽* on Ionic pages and navigation.
*/
@IonicPage()
@Component({
  selector: 'page-modal-detalle-sitio',
  templateUrl: 'modal-detalle-sitio.html',
})
export class ModalDetalleSitioPage {

  sitio: any;
  edit : boolean = false;
  constructor(public navCtrl: NavController, public navParams: NavParams, private viewCtrl : ViewController, private launchNavigator : LaunchNavigator, private camera: Camera, private db: DbProvider ) {
      this.sitio = this.navParams.data;
}

...

Bien, ahora vamos a definir la funci贸n editar que se ejecuta al pulsar el bot贸n editar, como podemos observar simplemente cambia la variable this.edit a true:

editar(){
   this.edit = true;
 }

Si ejecut谩is ahora la aplicaci贸n en el m贸vil ver茅is que al pulsar sobre el bot贸n editar desaparece el card con los datos y aparece el peque帽o formulario para cambiar la foto y la descripci贸n. Evidentemente no podemos tomar una nueva foto ni聽guardar los cambios ya que todav铆a no hemos definido estas funciones en el controlador, por lo tanto vamos a definir ahora la funci贸n sacarFoto():

sacarFoto(){

    let cameraOptions : CameraOptions = {
聽聽聽聽聽聽聽聽quality: 50,
聽聽聽聽聽聽聽聽encodingType: this.camera.EncodingType.JPEG,
聽聽聽聽聽聽聽聽targetWidth: 800,
聽聽聽聽聽聽聽聽targetHeight: 600,
聽聽聽聽聽聽聽聽destinationType: this.camera.DestinationType.DATA_URL,
聽聽聽聽聽聽聽聽sourceType: this.camera.PictureSourceType.CAMERA,
聽聽聽聽聽聽聽聽correctOrientation: true
    }


    this.camera.getPicture(cameraOptions).then((imageData) => {
      // imageData is a base64 encoded string
        this.sitio.foto = "data:image/jpeg;base64," + imageData;
    }, (err) => {
        console.log(err);
    });
  }

Como pod茅is observar esta funci贸n es exactamente igual que la que definimos en el modal nuevo sitio, la 煤nica diferencia es que la foto resultante se la asignamos a la variable this.sitio.foto en lugar de a this.foto.

Si ten茅is alguna duda sobre como聽obtener una fotograf铆a de la c谩mara del m贸vil pod茅is repasar la parte 4 de este tutorial donde vimos con m谩s detalle como utilizar la c谩mara del m贸vil para obtener una foto.

Por 煤ltimo necesitamos guardar los cambios en la base de datos as铆 que vamos a definir el m茅todo guardarCambios()聽que se ejecuta al lanzar el formulario con el bot贸n “Actualizar Sitio”:

guardarCambios(){
    this.db.modificaSitio(this.sitio).then((res)=>{
        this.edit = false;
    },(err)=>{  /* alert('error al meter en la bd'+err) */ })
  }

Llamamos a una funci贸n del provider db llamada modificaSitio y le pasamos como par谩metro 聽this.sitio, si todo ha ido bien nos devolver谩 una promesa, al ejecutar la promesa ponemos la variable this.edit a false para que se oculte el formulario y se vuelva a mostrar la informaci贸n del sitio.

Nos quedar铆a crear la funci贸n modificaSitio en el provider para guardar las modificaciones en la base de datos, por lo tanto vamos a editar el archivo db.ts que se encuentra en la carpeta providers y vamos a a帽adir la siguiente funci贸n:

public modificaSitio(sitio){
    let sql = "UPDATE sitios  SET lat = ?, lng = ?, address = ?, description = ?, foto = ? WHERE id = ? ";
    return this.db.executeSql(sql,[sitio.lat,sitio.lng,sitio.address,sitio.description,sitio.foto, sitio.id]);
  }

En funci贸n modificaSitio聽ejecutamos la sql para modificar los datos del sitio en la base de datos.

Las ‘?‘ se sustituyen por los valores en el orden en que se encuentran en el array que se le pasa como segundo par谩metro al m茅todo this.db.executeSql.

Por si alguno se ha despistado os pongo a continuaci贸n el c贸digo completo hasta el momento del provider聽db.ts:聽

import { Injectable } from '@angular/core';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite';

/*
聽聽Generated class for the DbProvider provider.

聽聽See https://angular.io/docs/ts/latest/guide/dependency-injection.html
聽聽for more info on providers and Angular 2 DI.
*/
@Injectable()
export class DbProvider {

  db : SQLiteObject = null;

  constructor(public sqlite: SQLite) {
    console.log('Hello DbProvider Provider');
  }

  public openDb(){
      return this.sqlite.create({
          name: 'data.db',
          location: 'default' // el campo location es obligatorio
聽聽聽聽聽})
聽聽聽聽聽聽.then((db: SQLiteObject) => {
聽聽聽聽聽聽聽this.db =db;
聽聽聽聽聽})
聽聽}

聽聽public createTableSitios(){
聽聽聽聽return this.db.executeSql("create table if not exists sitios( id INTEGER PRIMARY KEY AUTOINCREMENT, lat FLOAT, lng FLOAT, address TEXT, description TEXT, foto TEXT )",{})
聽聽}

聽聽public addSitio(sitio){
聽聽聽聽let sql = "INSERT INTO sitios (lat, lng, address, description, foto) values (?,?,?,?,?)";
聽聽聽聽return this.db.executeSql(sql,[sitio.lat,sitio.lng,sitio.address,sitio.description,sitio.foto]);
聽聽}

聽聽public getSitios(){
聽聽聽聽let sql = "SELECT * FROM sitios";
聽聽聽聽return this.db.executeSql(sql,{});
聽聽}

聽聽public modificaSitio(sitio){
聽聽聽聽let sql = "UPDATE sitios  SET lat = ?, lng = ?, address = ?, description = ?, foto = ? WHERE id = ? ";
聽聽聽聽return this.db.executeSql(sql,[sitio.lat,sitio.lng,sitio.address,sitio.description,sitio.foto, sitio.id]);
聽聽}

}

Tambi茅n os dejo a continuaci贸n como tiene que quedar el archivo聽modal-detalle-sitio.ts:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';
import { DbProvider } from '../../providers/db/db';
import { LaunchNavigator } from '@ionic-native/launch-navigator';

/**
聽* Generated class for the ModalDetalleSitioPage page.
聽*
聽* See http://ionicframework.com/docs/components/#navigation for more info
聽* on Ionic pages and navigation.
*/
@IonicPage()
@Component({
  selector: 'page-modal-detalle-sitio',
  templateUrl: 'modal-detalle-sitio.html',
})
export class ModalDetalleSitioPage {

  sitio: any;
  edit : boolean = false;


  constructor(public navCtrl: NavController, public navParams: NavParams, private viewCtrl : ViewController, private camera: Camera, private db: DbProvider, private launchNavigator : LaunchNavigator) {
     this.sitio = this.navParams.data;
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ModalDetalleSitioPage');
  }

  cerrarModal(){
    this.viewCtrl.dismiss();
  }

  comoLlegar(){

    let destino = this.sitio.lat+', '+this.sitio.lng;

    this.launchNavigator.navigate(destino)
    .then(
      success => console.log('Launched navigator'),
      error => console.log('Error launching navigator', error)
    );

 }

 editar(){
   this.edit = true;
 }

 sacarFoto(){

    let cameraOptions : CameraOptions = {
聽聽聽聽聽聽聽聽quality: 50,
聽聽聽聽聽聽聽聽encodingType: this.camera.EncodingType.JPEG,
聽聽聽聽聽聽聽聽targetWidth: 800,
聽聽聽聽聽聽聽聽targetHeight: 600,
聽聽聽聽聽聽聽聽destinationType: this.camera.DestinationType.DATA_URL,
聽聽聽聽聽聽聽聽sourceType: this.camera.PictureSourceType.CAMERA,
聽聽聽聽聽聽聽聽correctOrientation: true
    }


    this.camera.getPicture(cameraOptions).then((imageData) => {
      // imageData is a base64 encoded string
        this.sitio.foto = "data:image/jpeg;base64," + imageData;
    }, (err) => {
        console.log(err);
    });
  }

  guardarCambios(){
    this.db.modificaSitio(this.sitio).then((res)=>{
    //  alert(res);
      for (var i in res)
      {
        alert(i+' - '+res[i]);
      }
        this.edit = false;
    },(err)=>{   alert('error al meter en la bd'+err)  })
  }


}

Eso es todo por hoy, en el siguiente post聽seguiremos desarrollando聽la app.

 

Si necesitas desarrollar una aplicaci贸n m贸vil no dudes en solicitarme un presupuesto sin compromiso: