ToDo List (o lista de tareas) en Ionic
Tags: javascript, ionic, typescript, spanish
Published: 2022-07-11 01:43:57

Antes de comenzar: 

👉🏾 [Demo](https://ionic-todo-list-7e44b.web.app/) operativa.

👉🏾  [Repo](https://github.com/enzotrucchi/ionic-lista-tareas) en GitHub 

🎯 Proyecto realizado con Ionic 6 y utilizando Ionic Storage. Permite agregar, modificar, eliminar tareas. 
Se presentan en una lista.

&nbsp;


## Objetivo del proyecto:

Desarrollar una app utilizando Ionic 6, que tenga como principal funcionalidad administrar tareas. Utilizaremos **IonicStorage** para almacenar en local las tareas.
 En la primera versión, vamos a desarrollar un servicio para gestionar las tareas:
		- Crear tarea
		- Modificar
		- Borrar
		- Obtener todas
		- Obtener por Id


Así nos debería quedar nuestra app:


<img width="100%" style="width:100%" src="https://media.giphy.com/media/l6x3rJ3HRNtBSKUOV3/giphy.gif">


&nbsp;
&nbsp;

### Iniciando el proyecto en Ionic 
Vamos a utilizar la opción blank para tener una plantilla limpia. 
  
📢 En mi caso elegí la opción de Angular al momento de seleccionar el frame con el cual trabajar, por lo tanto en la carpeta que seleccciones, abrimos terminal y tipeamos: 

    ionic start todo-list blank


### Estructura de archivos y carpetas 📃
¡Empezamos la parte interesante!
Lo primero que voy a hacer es armar la estructura de carpetas y archivos que posteriormente vamos a utilizar.
Con esto, *ya podríamos hacer nuestro primer commit.*


![Estructura de archivos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kg23s8yb3rt3igoolhsa.png)

&nbsp;
&nbsp;

### Instalando Ionic Storage
Para la versión 6 de Ionic, utilizando Angular, instalamos Ionic Storage con npm, basandonos en el siguiente link:
[Ionic Storage Oficial](https://github.com/ionic-team/ionic-storage)

Siguiendo la documentación oficial: 

> If using Angular, install the  `@ionic/storage-angular`  library instead:

    npm install @ionic/storage-angular

### Interface

    export  interface  ITarea {
    
	    id?:  number;
	    
	    titulo:  string;
	    
	    descripcion:  string;
    
    }


###  Definiendo nuestro component home.page 
Vamos a basarnos en componentes de Ionic como  **ion-item-options** y **ion-buttons**, además de utilizar una lista de items para mostrar las tareas que ya tengamos cargadas. 
 ![home.page.html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hh6awdsccwy3egrnn27j.png)
 

Cuando ingresemos a este componente, vamos a buscar las tareas a nuestro servicio. Para tomar estas tareas que nos devuelve el servicio y poder utilizarlas en nuestro componente, ya tenemos definido un array de tareas siguiendo la interfaz ***ITarea***

Después, sólo utilizamos *AlertController* para el cuadro de diálogo de eliminar y nos vamos a la ruta /tareas enviando el id si estamos modificando una tarea. Caso contrario, estamos agregando. Vamos a /tareas pero sin enviar id. 

![home.page.ts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l08vyx2tk8syot5bqatt.png)
 
En nuestro servicio definimos los métodos para hacer CRUD de Tarea. 
📌 Importante no olvidarse de esta línea (ya que nos dará error al intentar utilizar storage): 

    await this.storage.create();

Lo demás, sólo un poco de Js   ✔️  ✔️ 

![tarea.service](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7qcw6q3lsvjt9vecthfs.png)
 

 
Eso es todo!
Con un poquito de *Js* y utilizando *IonicStorage*, tenemos funcionando nuestra lista de tareas con opción de eliminar, agregar y modificar .

Si te gustó, compartilo!

**Hasta la vista!** 


<img width="100%" style="width:100%" src="https://media.giphy.com/media/l1J3CbFgn5o7DGRuE/giphy.gif">

&nbsp;

[![Invitame un café en cafecito.app](https://cdn.cafecito.app/imgs/buttons/button_6.svg)](https://cafecito.app/enzotrucchi)