/checkbox

checkbox example using dropbox.js

Primary LanguageCoffeeScript

Checkbox, a dropbox.js Sample Application

This application demonstrates the use of the JavaScript client library for the Dropbox API to implement a Dropbox-backed To Do list application.

In 70 lines of HTML, and 250 lines of commented CoffeeScript, Checkbox lets you store your To Do list in your Dropbox! Just don't expect award winning design or usability from a sample application.

See this sample in action here.

Dropbox Integration

This proof-of-concept application uses the "App folder" Dropbox access level, so Dropbox automatically creates a directory for its app data in the users' Dropboxes. The data model optimizes for ease of development and debugging. Each task is stored as a file whose name is the task’s description. Tasks are grouped under two folders, active and done.

The main advantage of this data model is that operations on tasks cleanly map to file operations in Dropbox. At initialization time, the application creates its two folders, active and done. A task is created by writing an empty string to a file in the active folder, marked as completed by moving the file to the done folder, and removed by deleting the associated file.

The lists of tasks are obtained by listing the contents of the active and done folders. The data model can be easily extended, by storing JSON-encoded information, such as deadlines, in the task files.

This sample uses the following Dropbox.Client methods:

  • authenticate
  • signOut
  • getAccountInfo
  • mkdir
  • readdir
  • writeFile
  • move
  • remove

Building

The sample application "vendors" (creates a local copy of) its dependencies, so it doesn't depend on a 3rd party site. Run the vendor.sh script to get the vendored JavaScript libraries, which are not committed to the repository.

Follow the steps below to get your own copy of the sample that you can hack on.

  1. Create a powered_by.js app in your Dropbox.
  2. Get your own API key.
  3. Encode your API key.
  4. Copy the source code to /Apps/Static Web Apps/powered_by.js in your Dropbox.

Dependencies

The application uses the following JavaScript libraries.

The icons used in the application are all from the noun project.

The application follows a good practice of packaging its dependencies, and not hot-linking them.

Credits

This sample's UI design and graphical assets were contributed by Jon Ying.