IBM Cloud Docs
Creating a web-based To-Do list

Creating a web-based To-Do list

Create a simple web-based to-do list to get familiar with the basic IBM Cloud features.

Objectives

  1. From this tutorial, you learn how to create a basic website that interfaces with your IBM Cloud database to read and write data.

    The project is a simple to-do list, where you can see a list of notes. You can add and delete notes. Each of your notes has a tag, and you can filter your notes by tag.

  2. To create this to-do list, your application needs to be able to read and write to the database. To read to-dos in "newest first" order and to filter by tag, your database needs to have some secondary indexes. Now, we can create all of that.

You can complete the tutorial in less than an hour. It doesn't cost you anything over your current IBM Cloudant bill (so it's free if you are on the IBM Cloudant Lite plan).

The website that you create is served from your local machine, so no other services are required apart from IBM Cloud.

After you complete it, you have a basic understanding of how applications can interface with IBM Cloudant through an IBM Cloudant SDK (in this case, NodeJS).

Before you begin

You need the following implements to complete this tutorial:

  1. An IBM Cloudant service instance and some service credentials. You can create the instance and credentials in the IBM Cloudant Dashboard by following the Getting started with IBM Cloudant tutorial. Be sure to make a note of the APIKey and URL when you create your service credentials.
  2. Ensure you have access to a Mac or Linux™ terminal.
  3. Download Git.
  4. Download Node.js and npm.

Get the code

  1. Open your terminal.

  2. Type the following command:

    git clone https://github.com/IBM-Cloud/todo-list.git
cd todo-list

Prepare the environment and run the website

In this step, you install all the code dependencies and environment variables you need to run your website.

  1. Ensure you are in the todo-list directory.

  2. From your terminal, run the following command:

    npm install
export CLOUDANT_APIKEY="<the_apikey_from_prerequisites>"
export CLOUDANT_URL="https://<the_url_from_prerequisites>"
npm run start

When you run this command for the first time, your code detects that no database exists. The code creates a database for you with some indexes (by date and by tag) and some sample data.

Check out your website!

Now, you can check out your website.

  1. From your browser, go to https://localhost:8080.

    You can see your to-do list with a couple of items on it:

    Your to-do list
    Figure 1. Your web-based To-Do list

  2. Add or delete notes, or you can filter by tag by clicking one of the tags.

Understanding the code

Database and Index creation

The backend script (server.js), on start-up, tries to connect to the todo database by using the getDatabaseInformation method. If it doesn't find it, it attempts to create it by using the putDatabase method.

After you create the todo database, it creates two indexes by using the postIndex method. The first creates an index on the timestamp field (the creation date of your note), so it can retrieve all notes in reverse chronological order. The second index is on the tag and timestamp so that it can filter by tag and return a date-ordered list for a known tag.

Using the database

The front end is using the popular express framework to display a webpage and call service endpoints in your backend when you click different actions, like create, delete, and filter.

For example, when your webpage is first loaded, it calls the GET /todolist endpoint. The GET /todolist endpoint uses the postFind method to query the database for all documents (by using the index created after the todo database), and then orders the notes by timestamp, and returns them to the front end for display.

Filtering by tag uses the same postFind method, but by using the second index, you create and delete notes by using the postDocument and deleteDocument methods.

Summary

IBM Cloudant allows rapid development of web applications, as its HTTP API is modeled by the Node.js SDK and is easy to integrate with your own code. You create an IBM Cloudant database and add JSON documents that model your own data. Remember to create secondary indexes to help service your query access patterns so that query performance remains quick as your data volume grows.

If you don't fancy writing JavaScript, we have SDKs for Java™, Python, and Go, plus our HTTP API. Don't forget. The IBM Cloudant Dashboard is a great way to explore your databases, create and modify documents, and refine your index and querying skills.

You can find more best practice guidance in our blog and documentation. For a video guide to IBM Cloudant and its capabilities, see the course in our learning center.