ToDo List (o lista de tareas) en Ionic

Antes de comenzar:

👉🏾 Demo 운영.

👉🏾 Repo ko GitHub

🎯 Proyecto realizado con Ionic 6 y utilizando Ionic Storage. Permite agregar, modificar, eliminar tareas.
목록에 있는 대로 표시합니다.

Objetivo del proyecto:

Desarrollar una 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:
- 크리타레아
- 수정자
- 보라
- 옵트너 토다스
- Id로 Obtener

Así nos debería quedar nuestra 앱:

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.

Instalando Ionic 스토리지 설치

Para la version 6 de Ionic, utilizando Angular, installamos Ionic Storage con npm, basandonos en el siguiente link:
Ionic Storage Oficial

Siguiendo la documentación official:

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

npm install @ionic/storage-angular

상호 작용

export  interface  ITarea {

    id?:  number;

    titulo:  string;

    descripcion:  string;

}

Definiendo nuestro 구성 요소 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.


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, 유일한 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. 반대로, estamos agregando. Vamos a/tareas pero sin enviar id.



En nuestro servicio definimos los métodos para hacer CRUD de Tarea.
📌 Importante no olvidarse de esta linea(ya que nos dará error al intentar utilizar storage):

await this.storage.create();

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



에소 에스 토도!
Js는 IonicStorage를 활용하고, 다음 기능을 사용하고, 비용을 제거할 수 있는 새로운 목록을 나열하고, 종합적으로 수정합니다.

당신은 그것을 비교합니다!

하스타 라 비스타!