El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest estudi de cas, aprendrem a construir una aplicació de llista de tasques utilitzant Apache Cordova. Aquesta aplicació permetrà als usuaris afegir, editar i eliminar tasques. A més, emmagatzemarem les dades localment al dispositiu utilitzant l'API d'emmagatzematge de Cordova.

Objectius del Mòdul

Comprendre com estructurar una aplicació de llista de tasques.
Aprendre a utilitzar l'API d'emmagatzematge de Cordova per guardar dades localment.
Implementar funcionalitats bàsiques com afegir, editar i eliminar tasques.
Crear una interfície d'usuari simple i responsiva.

Estructura del Projecte

1.1. Creació del Projecte

Primer, crearem un nou projecte Cordova:

cordova create todoApp com.example.todoApp TodoApp
cd todoApp
cordova platform add android ios

1.2. Estructura de Carpetes

L'estructura del projecte serà la següent:

todoApp/
│
├── config.xml
├── hooks/
├── platforms/
├── plugins/
├── www/
│   ├── css/
│   │   └── styles.css
│   ├── js/
│   │   └── app.js
│   ├── index.html
└── ...

Desenvolupament de la Interfície d'Usuari

2.1. index.html

Crearem un fitxer index.html amb una interfície bàsica:

<!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>Llista de Tasques</h1>
        <input type="text" id="new-task" placeholder="Afegeix una nova tasca">
        <button onclick="addTask()">Afegeix</button>
        <ul id="task-list"></ul>
    </div>
    <script src="js/app.js"></script>
</body>
</html>

2.2. styles.css

Afegirem alguns estils bàsics al fitxer styles.css:

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);
}

input, button {
    padding: 10px;
    margin: 5px;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

Funcionalitats de l'Aplicació

3.1. app.js

Implementarem les funcionalitats bàsiques al fitxer app.js:

document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
    loadTasks();
}

function addTask() {
    const taskInput = document.getElementById('new-task');
    const taskText = taskInput.value.trim();
    if (taskText === '') return;

    const tasks = getTasks();
    tasks.push(taskText);
    saveTasks(tasks);
    renderTasks();
    taskInput.value = '';
}

function getTasks() {
    const tasks = localStorage.getItem('tasks');
    return tasks ? JSON.parse(tasks) : [];
}

function saveTasks(tasks) {
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

function loadTasks() {
    renderTasks();
}

function renderTasks() {
    const tasks = getTasks();
    const taskList = document.getElementById('task-list');
    taskList.innerHTML = '';
    tasks.forEach((task, index) => {
        const li = document.createElement('li');
        li.textContent = task;
        li.appendChild(createDeleteButton(index));
        taskList.appendChild(li);
    });
}

function createDeleteButton(index) {
    const button = document.createElement('button');
    button.textContent = 'Eliminar';
    button.onclick = () => {
        const tasks = getTasks();
        tasks.splice(index, 1);
        saveTasks(tasks);
        renderTasks();
    };
    return button;
}

Proves i Depuració

4.1. Executar l'Aplicació

Podem executar l'aplicació en un emulador o dispositiu real:

cordova run android
cordova run ios

4.2. Depuració

Utilitzarem les eines de desenvolupament del navegador per depurar l'aplicació. Podem accedir a aquestes eines prement F12 en el navegador.

Resum

En aquest estudi de cas, hem creat una aplicació de llista de tasques utilitzant Apache Cordova. Hem après a:

Configurar un nou projecte Cordova.
Desenvolupar una interfície d'usuari simple.
Utilitzar l'API d'emmagatzematge de Cordova per guardar dades localment.
Implementar funcionalitats bàsiques com afegir, editar i eliminar tasques.

Aquest projecte ens ha proporcionat una base sòlida per desenvolupar aplicacions mòbils amb Apache Cordova. En els següents mòduls, explorarem funcionalitats més avançades i optimitzacions per millorar les nostres aplicacions.

Estudi de cas: Construcció d'una aplicació de llista de tasques

Objectius del Mòdul

Estructura del Projecte

1.1. Creació del Projecte

1.2. Estructura de Carpetes

Desenvolupament de la Interfície d'Usuari

2.1. index.html

2.2. styles.css

Funcionalitats de l'Aplicació

3.1. app.js

Proves i Depuració

4.1. Executar l'Aplicació

4.2. Depuració

Resum

Curs d'Apache Cordova

Mòdul 1: Introducció a Apache Cordova

Mòdul 2: Conceptes bàsics i APIs

Mòdul 3: Interfície d'usuari i experiència d'usuari

Mòdul 4: Funcions avançades de Cordova

Mòdul 5: Desplegament i distribució

Mòdul 6: Estudis de cas i aplicacions del món real

Mòdul 7: Tendències futures i actualitzacions