We've provided an example app running on DreamFactory for the backend using only jQuery and Twitter Bootstrap, along with our JavaScript SDK for authenticating and making CRUD calls to the database. The app of choice here is the infamous to do list. To try it out for yourself, just sign up for a free DreamFactory account. You can add items to the list, toggle their completion status, and delete items from the list. Here's what the app looks like in action.

It utilizes the DreamFactory REST API to communicate with the backend (your DreamFactory Services Platform or “DSP” for short).

If you are brand new to DreamFactory we have screencasts explaining how to get started with DreamFactory and build an app from scratch.

We also have to do list apps for other popular frameworks - AngularJS and Sencha Touch.

Be sure to check out the sections at the end of this article. They show how to access our Live API Docs and how enabling CORS on your DSP allows you to run from your local machine or a service like Plunker.

Running and Exploring the App

This section shows you how to run the app and understand how it's put together. To skip straight to the code walkthrough click here.

We're assuming that you have access to the admin console for your DSP. If you don’t have a DreamFactory account, sign up. Once you’ve signed up, go to https://<your-dsp-name>.cloud.dreamfactory.com and you can log in to the admin console. From the Applications tab look for an app named To Do List jQuery.

This app came preinstalled on your DSP. If it was deleted or is missing for some reason you can import it by clicking the Import New App button in the upper right, selecting the To Do List jQuery app from the list, and clicking the Import button.

Then go back to the Applications tab and it will be in the list. Click the preview button next to To Do List jQuery. You should see the app running on the right side of the admin console. Try adding a few items to the list. You can click the item name to toggle the completion, or click the minus to delete.

Click the file manager icon to view the source code for this app. These files are hosted on your DSP and can be edited live by clicking the pencil icon. You can drag and drop files from your desktop to the file manager, or upload zip files. We'll show you later how to run from files on your local machine for development and testing purposes.

Code Walkthrough

This app consists of three files plus the SDK.

index.html - loads jQuery and Twitter Bootstrap and has a table to hold the list. It has an input field and add button for adding items to the list.

app.js - functions for creating, retrieving, updating, and deleting list items and building the list.

style.css - simple styling

The complete source code for this app is available on GitHub at https://github.com/dreamfactorysoftware/app-todo-jquery . You can go there to clone this repo to your local machine.

In the SDK /lib directory there is a file sdk_init.c. This is where you specify the name of your app and the DSP your app is talking to. For hosted apps that use the DSP for app file storage you could set dsp_url to use location.protocol and location.host and it would always init the SDK to use the "current" DSP. If not a hosted app then dsp_url should be set to the DSP you want to use for that app.

When the SDK has been initialized the 'apiReady' event is triggered. At that point the app is ready to make API calls. The first thing we should do is check for a valid session and, if none exists, try to log in. The doLoginDialog() and login() methods take care of this.