El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este estudio de caso, vamos a construir una aplicación de lista de tareas utilizando Apache Cordova. Este proyecto nos permitirá aplicar muchos de los conceptos y técnicas que hemos aprendido en los módulos anteriores. La aplicación permitirá a los usuarios agregar, eliminar y marcar tareas como completadas.

Objetivos del Estudio de Caso

Crear una aplicación funcional de lista de tareas.
Utilizar plugins de Cordova para acceder a funcionalidades del dispositivo.
Implementar una interfaz de usuario responsiva.
Manejar la entrada del usuario y el almacenamiento de datos.

Paso 1: Configuración del Proyecto

1.1 Crear el Proyecto Cordova

Primero, necesitamos crear un nuevo proyecto de Cordova. Abre tu terminal y ejecuta el siguiente comando:

cordova create todoApp com.example.todoApp TodoApp

Este comando crea un nuevo proyecto Cordova llamado TodoApp con el identificador com.example.todoApp.

1.2 Añadir Plataformas

Añadimos las plataformas en las que queremos ejecutar nuestra aplicación. Por ejemplo, para Android e iOS:

cordova platform add android
cordova platform add ios

1.3 Instalar Plugins Necesarios

Para esta aplicación, utilizaremos el plugin de almacenamiento local de Cordova. Instálalo con el siguiente comando:

cordova plugin add cordova-plugin-file

Paso 2: Estructura del Proyecto

2.1 Archivos y Directorios Clave

www/: Contiene los archivos HTML, CSS y JavaScript de la aplicación.
config.xml: Archivo de configuración del proyecto.
plugins/: Directorio donde se almacenan los plugins instalados.

Paso 3: Desarrollo de la Aplicación

3.1 Estructura HTML

Crea un archivo index.html en el directorio www/ con el siguiente contenido:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Todo App</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div id="app">
        <h1>Todo List</h1>
        <input type="text" id="new-task" placeholder="Add a new task">
        <button id="add-task">Add Task</button>
        <ul id="task-list"></ul>
    </div>
    <script src="cordova.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

3.2 Estilos CSS

Crea un archivo styles.css en el directorio www/css/ con el siguiente contenido:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

#app {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#task-list {
    list-style: none;
    padding: 0;
}

#task-list li {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

#task-list li.completed {
    text-decoration: line-through;
    color: #888;
}

3.3 Lógica JavaScript

Crea un archivo index.js en el directorio www/js/ con el siguiente contenido:

document.addEventListener('deviceready', function() {
    const taskInput = document.getElementById('new-task');
    const addTaskButton = document.getElementById('add-task');
    const taskList = document.getElementById('task-list');

    addTaskButton.addEventListener('click', function() {
        const taskText = taskInput.value.trim();
        if (taskText) {
            addTask(taskText);
            taskInput.value = '';
        }
    });

    function addTask(taskText) {
        const li = document.createElement('li');
        li.textContent = taskText;
        li.addEventListener('click', function() {
            li.classList.toggle('completed');
        });
        taskList.appendChild(li);
        saveTasks();
    }

    function saveTasks() {
        const tasks = [];
        taskList.querySelectorAll('li').forEach(function(li) {
            tasks.push({
                text: li.textContent,
                completed: li.classList.contains('completed')
            });
        });
        localStorage.setItem('tasks', JSON.stringify(tasks));
    }

    function loadTasks() {
        const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
        tasks.forEach(function(task) {
            const li = document.createElement('li');
            li.textContent = task.text;
            if (task.completed) {
                li.classList.add('completed');
            }
            li.addEventListener('click', function() {
                li.classList.toggle('completed');
                saveTasks();
            });
            taskList.appendChild(li);
        });
    }

    loadTasks();
});

Paso 4: Pruebas y Depuración

4.1 Ejecutar la Aplicación en el Emulador

Para probar la aplicación en un emulador, ejecuta:

cordova emulate android
cordova emulate ios

4.2 Depuración

Utiliza las herramientas de desarrollo del navegador (como Chrome DevTools) para depurar la aplicación. Puedes acceder a estas herramientas cuando ejecutas la aplicación en un emulador o dispositivo real.

Paso 5: Despliegue

5.1 Construir la Aplicación

Para construir la aplicación para producción, ejecuta:

cordova build android --release
cordova build ios --release

5.2 Firmar y Publicar

Sigue las instrucciones específicas para cada plataforma para firmar y publicar tu aplicación en Google Play Store y Apple App Store.

Conclusión

En este estudio de caso, hemos construido una aplicación de lista de tareas utilizando Apache Cordova. Hemos cubierto la configuración del proyecto, la estructura del proyecto, el desarrollo de la aplicación, las pruebas y el despliegue. Este proyecto nos ha permitido aplicar muchos de los conceptos y técnicas aprendidos en los módulos anteriores, y nos ha proporcionado una base sólida para desarrollar aplicaciones móviles con Cordova.

Resumen de Conceptos Clave

Configuración del Proyecto Cordova: Creación y configuración de un nuevo proyecto Cordova.
Estructura del Proyecto: Comprensión de los archivos y directorios clave en un proyecto Cordova.
Desarrollo de la Aplicación: Implementación de la interfaz de usuario y la lógica de la aplicación.
Pruebas y Depuración: Ejecución y depuración de la aplicación en emuladores y dispositivos reales.
Despliegue: Construcción, firma y publicación de la aplicación en tiendas de aplicaciones.

Preparación para el Siguiente Tema

En el próximo estudio de caso, construiremos una aplicación del clima, lo que nos permitirá explorar más a fondo las capacidades de Cordova y aprender nuevas técnicas y mejores prácticas.

Estudio de Caso: Construyendo una Aplicación de Lista de Tareas