En el siguiente enlace tienes el índice para acceder al resto de entradas de este tutorial:
Indice Tutorial Ionic >>
- Tutorial de Ionic - Construye Apps móviles multiplataforma con ionic desde cero
- Tutorial de Ionic - Instalar ionic y las herramientas necesarias para el desarrollo
- Tutorial de Ionic - Hola Mundo en Ionic
- Tutorial de Ionic - Estructura de un proyecto Ionic
- Tutorial de Ionic - Mini Juego de acertar números en ionic 2, el controlador de la página y Data Binding y *ngIF
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 1 - Navegación por Tabs
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 2: Mostrando el mapa.
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 3: Añadiendo FAB, marcador y ventana modal.
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 4 - Mostrando la dirección a partir de las coordenadas y sacando foto con la cámara.
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 5 - Guardando nuestros sitios en una base de datos local
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 6 - Mostrar detalles del sitio guardado y abrir navegador gps para llegar a el.
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 7 - Modificar nuestros sitios.
- 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".
- Tutorial de Ionic - Peticiones http - API REST
- Tutorial de Ionic - Firebase - parte 1: Autenticación con correo y contraseña
- Tutorial de Ionic - Firebase - parte 2: Database - Guardar nuestros sitios en la nube.
- Como mejorar el rendimiento de ionic en iOS y solución al problema de las peticiones http CORS
- Libro: Desarrollo de aplicaciones móviles multiplataforma y PWAs con Ionic y Firebase desde cero.
- Firmar el apk para subirlo a Google Play
- Mostrar un mapa offline en Ionic con Leaflet
- Directiva para mostrar y ocultar menú al hacer scroll en Ionic
- Como crear una app multi idioma con Ionic
- Como crear componentes personalizados con 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:
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:
