Getting started with NimbusBase

For this tutorial you need:

A computer able to run a localhost server. (This tutorial is on a Mac which comes with a localhost server by default.) You also need a Dropbox and Google account and a text editor.

1. Create a empty web page and link the script for NimbusBase

The first step is getting our code base connected to your webpage. Fortunately this is easy.. just attach our script to your header.

<script src="http://nimbusbase.com/static/nimbus.min.js"></script>

So let's create an empty html file and link Nimbusbase inside. We'll call this nimbus.html:

<html>
<head>
<script src="http://nimbusbase.com/static/nimbus.min.js"></script>
</head>
<body>
<p>hello NimbusBase</p>
</body>
</html>

2. Put the webpage on your localhost

NimbusBase needs to either run on a server or localhost because it needs to make cross origin calls (or calls to other web addresses), which are not allowed by local files.

On a mac, this is easy. Go to System Preferences > Sharing > Web Sharing and turn it on.

Click on "Open Computer Website Folder", and put nimbus.html into the folder. Open up http://localhost/nimbus.html, and your page should be there.

3. Getting authentication working

NimbusBase takes care of authentication with multiple services for you. However, you have to first set up the app with your app key and app signature. This is the credential object you need to fill out:

sync_object = {
  "GDrive": {
    "key": "{ Google Client id }",
    "app_id": "{ Google App id }",
    "scope": "https://www.googleapis.com/auth/drive"
  },
  "app_name": "{ App name }",
  "synchronous" : false,
  "Dropbox": {
    "key": "{ Dropbox App Key }",
    "secret": "{ Dropbox App Secret }",
    "app_name": "{ App name }"
  }
};

Nimbus.Auth.setup(sync_object);

Google Drive

For Google Drive, do step 1 here: tutorial. Then go to api access screen to get your client id.

Also set up your app name- this will be the name of the folder that the user has in Google Drive that holds the data. Fill out the client id in the sync object.

Dropbox

First create an app with Dropbox. Choose "App folder" instead of "Full Dropbox" access.

Go to the info section of the app and fill out the sync object from it.

4. Create a button to authenticate

Now create a link that allows you to authenticate with Google Drive. Add the following line to your html:

<a onclick="Nimbus.Auth.authorize('GDrive')">authorize me</a>

This code means that when you click this button, it will ask to authorize with Google Drive. Click and authenticate and then move on to the next step.

5. Playing with the data storage

You can now see that in your Google Drive is a folder with your app name.

Creating a model: First let’s create a model. We're going to do one called Task. Models are schemas for data objects we want to store. Let's open up the developer console in Chrome and execute the following javascript:

Tasks = Nimbus.Model.setup("Tasks", ["descrip", "done"]);

Creating a record: Now that the model is defined, you can add data of that type:

Tasks.create({"descrip":"New task", "done":false });

When you create a data object, it is automatically stored locally. If you have an internet connection, it also persists objects in real time to Dropbox as you create them.

Finding data: You can either find data by its id or find a set of data by a filter criteria.

To find a data by its id, do the following:

instance = Model_Name.find("item's id");

To find data that matches a data filter, do the following:

/*find the first object that matches the descriptions*/
instance = Tasks.findByAttribute("done", false);
/*find the all object that matches the descriptions*/
instances = Tasks.findAllByAttribute("done", false);
/*find the all object returns true for the function that you submitted*/
instances = Tasks.select(function(record) { return record.done == false });

Or to get all the data under a model:

Model_Name.all();

Updating data: Just change the attribute you want on the data and call Save().

instance.done = false;
instance.save();

Deleting data: Just call destroy on the data variable you want to delete.

instance.destroy();

To users of Spine, the Nimbus model borrows heavily from how the Spine model is setup, so this should be extremely familiar.

Try it yourself!

If you haven't authenticated, use the run code to authenticate. After the first time, you should be able to run any code in the editor.

/* first authorize if you have not authorized */
if (!Nimbus.Auth.authorized()) { Nimbus.Auth.authorize("Dropbox"); }

/* Play with models! */
var Note = Nimbus.Model.setup("Note", [ "name", "text"]);
Note.create({"name":"first note", "text":"Hello world"});

Run Code