The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Case Study: Building a To-Do List App

Next ►
►

In this case study, we will walk through the process of building a simple To-Do List app using Apache Cordova. This project will help you understand how to apply the concepts learned in previous modules to create a functional mobile application.

Objectives

  • Create a new Cordova project.
  • Implement a user interface for the To-Do List app.
  • Use Cordova plugins to interact with device storage.
  • Add, display, and delete to-do items.
  • Test the app on a mobile device.

Step 1: Create a New Cordova Project

1.1 Setting Up the Project

First, ensure that you have Cordova installed. If not, you can install it using npm:

npm install -g cordova

Next, create a new Cordova project:

cordova create todoApp com.example.todoApp TodoApp

Navigate to the project directory:

cd todoApp

1.2 Adding Platforms

Add the platforms you want to build for. For this example, we'll add Android and iOS:

cordova platform add android
cordova platform add ios

Step 2: Implementing the User Interface

2.1 Basic HTML Structure

Create an index.html file in the www directory with the following content:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>To-Do List App</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div class="container">
        <h1>To-Do List</h1>
        <input type="text" id="new-todo" placeholder="Enter a new to-do">
        <button id="add-todo">Add</button>
        <ul id="todo-list"></ul>
    </div>
    <script src="js/index.js"></script>
</body>
</html>

2.2 Styling the App

Create a styles.css file in the www/css directory:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    width: 300px;
    margin: 50px auto;
    background: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
}

input[type="text"] {
    width: calc(100% - 22px);
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
}

button {
    width: 100%;
    padding: 10px;
    background: #28a745;
    color: #fff;
    border: none;
    cursor: pointer;
}

button:hover {
    background: #218838;
}

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

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

li:last-child {
    border-bottom: none;
}

.delete {
    color: #dc3545;
    cursor: pointer;
}

Step 3: Adding Functionality with JavaScript

3.1 Basic JavaScript

Create an index.js file in the www/js directory:

document.addEventListener('deviceready', function() {
    const newTodoInput = document.getElementById('new-todo');
    const addTodoButton = document.getElementById('add-todo');
    const todoList = document.getElementById('todo-list');

    addTodoButton.addEventListener('click', function() {
        const todoText = newTodoInput.value.trim();
        if (todoText) {
            addTodoItem(todoText);
            newTodoInput.value = '';
        }
    });

    function addTodoItem(text) {
        const li = document.createElement('li');
        li.textContent = text;
        const deleteButton = document.createElement('span');
        deleteButton.textContent = 'Delete';
        deleteButton.classList.add('delete');
        deleteButton.addEventListener('click', function() {
            todoList.removeChild(li);
        });
        li.appendChild(deleteButton);
        todoList.appendChild(li);
    }
});

Step 4: Using Cordova Plugins for Storage

4.1 Installing the Storage Plugin

Install the Cordova Storage plugin:

cordova plugin add cordova-sqlite-storage

4.2 Modifying JavaScript for Storage

Update index.js to save and load to-do items from the device storage:

document.addEventListener('deviceready', function() {
    const newTodoInput = document.getElementById('new-todo');
    const addTodoButton = document.getElementById('add-todo');
    const todoList = document.getElementById('todo-list');
    let db;

    // Open or create the database
    db = window.sqlitePlugin.openDatabase({name: 'todo.db', location: 'default'});

    // Create the table if it doesn't exist
    db.transaction(function(tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS todos (id INTEGER PRIMARY KEY, text TEXT)');
    }, function(error) {
        console.log('Transaction ERROR: ' + error.message);
    }, function() {
        console.log('Database and table ready');
        loadTodos();
    });

    addTodoButton.addEventListener('click', function() {
        const todoText = newTodoInput.value.trim();
        if (todoText) {
            addTodoItem(todoText);
            newTodoInput.value = '';
        }
    });

    function addTodoItem(text) {
        db.transaction(function(tx) {
            tx.executeSql('INSERT INTO todos (text) VALUES (?)', [text], function(tx, res) {
                const li = document.createElement('li');
                li.textContent = text;
                li.setAttribute('data-id', res.insertId);
                const deleteButton = document.createElement('span');
                deleteButton.textContent = 'Delete';
                deleteButton.classList.add('delete');
                deleteButton.addEventListener('click', function() {
                    deleteTodoItem(res.insertId, li);
                });
                li.appendChild(deleteButton);
                todoList.appendChild(li);
            });
        });
    }

    function loadTodos() {
        db.transaction(function(tx) {
            tx.executeSql('SELECT * FROM todos', [], function(tx, res) {
                for (let i = 0; i < res.rows.length; i++) {
                    const row = res.rows.item(i);
                    const li = document.createElement('li');
                    li.textContent = row.text;
                    li.setAttribute('data-id', row.id);
                    const deleteButton = document.createElement('span');
                    deleteButton.textContent = 'Delete';
                    deleteButton.classList.add('delete');
                    deleteButton.addEventListener('click', function() {
                        deleteTodoItem(row.id, li);
                    });
                    li.appendChild(deleteButton);
                    todoList.appendChild(li);
                }
            });
        });
    }

    function deleteTodoItem(id, li) {
        db.transaction(function(tx) {
            tx.executeSql('DELETE FROM todos WHERE id = ?', [id], function(tx, res) {
                todoList.removeChild(li);
            });
        });
    }
});

Step 5: Testing the App

5.1 Building the App

Build the app for the desired platform:

cordova build android
cordova build ios

5.2 Running the App

Run the app on an emulator or a physical device:

cordova run android
cordova run ios

Conclusion

In this case study, we have built a simple To-Do List app using Apache Cordova. We covered the following steps:

  • Setting up a new Cordova project.
  • Creating a user interface with HTML and CSS.
  • Adding functionality with JavaScript.
  • Using Cordova plugins to interact with device storage.
  • Testing the app on a mobile device.

This project demonstrates how to apply the core concepts of Cordova to create a functional mobile application. In the next case study, we will build a Weather App, which will introduce additional Cordova features and APIs.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved