Build a 5 Minute Todo App with Syncano's New Ember Add-on

Todd WackerTodd Wacker

With Ember and Syncano, you can get your app up and running fast! This tutorial demonstrates how to build a simple todo app in 5 minutes.

Great news! We just launched our new Syncano Ember add-on. This tool makes it much easier for Ember developers to build their apps with Syncano. I've created a simple todo list app to show you what our new add-on can do!

Why Use Syncano?

Syncano makes it really easy to build out the backend of your application. Within minutes of signing up, I had a custom API that I could use to store, retrieve, update, and delete data for my todo application. I didn't have to write any server-side code. Syncano also has built-in solutions for common application needs such as user login, payment processing with Stripe, and sending SMS messages to users with Twilio.

Getting Started

To get started, we’re going to install ember-cli.

If you don’t have ember-cli already, go ahead and install it from npm.

npm install ember-cli

Once that is set up, we can create our app.

ember new syncano-todo

Using Syncano is as easy as installing the add-on.

ember install ember-syncano

Then, you just need to set up your configuration properly, which will be addressed later in this post.

The Syncano add-on is designed to play nice with Ember Data. This means that you don't have to learn any new syntax to work with your Data Objects. You can use the same findAll, createRecord, or destroyRecord commands you're used to using with Ember Data.

Signing up for Syncano and Creating a Class

Now we need to sign up for Syncano. Once you’ve signed up for a free account, you’ll be directed to your Dashboard. This is where you can manage everything you need with Syncano. We’ll want to create an Instance by clicking the blue "Add" button at the top right corner of the page.

Create Instance

This creates an API Instance that we can use to store information about our todo items. Since our todo list will need todo items, we’ll go ahead and create a Todo Class by clicking on the Classes tab. For our schema, we’ll add title as a string and an is_completed flag as a boolean.

More information on classes and schemas.

Todo Schema

Let's go ahead and create our first "todo" Data Object by clicking on the table icon next to Data Objects. Click the "+" button at the top right of the screen. Since we're not worried about Owner Permissions in this tutorial, we just need to give our Data Object a title such as Finish Syncano Todo App and set is_completed to false.

Todo Data Object

We will also need an API Key and our Instance Name to update our Todo Data Objects from our app. You can get the API Key by selecting API Keys on the bottom left and clicking the "+" button. Click the toggle button for Ignore ACL?. This will allow us to access our API without having users sign in. This is less secure and we would want to be careful using this in real-world applications, but since this is a sample app, we want anyone to be able to create, update, and delete todo items. Click "Copy" next to the API Key that is generated and save it somewhere for later.

API Key

The other piece of information we will need is the name of our Instance. It is located next to the home button at the top left of the page. Click on it to reveal the full name and save it somewhere for later as well.

Todo App

Now, we’ll set up our todo app. The todo app for this example is fairly simple, consisting of one route, one model, and one controller. You can view the source code and follow along.

Configuring the Syncano Ember Add-on

To use the Syncano Ember Add-on we need to update our config file at app/config/environment.js.

We'll need to add a block with the following information:

syncano: {  
  accountKey: 'your-account-key', //optional for this example
  apiKey: 'your-api-key',
  instance: 'your-instance-name'
},

Now that we have that set up, we'll be able to make calls to Syncano through Ember Data.

Setting Up the Todo Model

Our Todo model is simple. We set it up just like we would any other model in Ember. We just need to make sure our properties have the same names and types as they do in Syncano.

import DS from 'ember-data';

export default DS.Model.extend({  
  title: DS.attr('string'),
  is_completed: DS.attr('boolean')
});

Getting All of the Todo Data Objects

A big part of any todo list application is being able to see the entire list.

Navigate to app/routes/todos.js.

We want to set up our model to pull in all of the Todo Data Objects. With the Syncano Add-on installed, doing this is simple. We just make the findAll call we normally would!

model() {  
    return this.store.findAll('todo');
  }

If you have everything configured correctly, this should pull in the Data Object we created earlier in Syncano.

Adding a New Todo Data Object

To create new items, we'll add an action to our controller at app/controllers/todos.js.

This action will create a new record with the information provided by the user every time we click "save".

actions: {  
    saveNewItem() {
      this.store.createRecord('todo', {'title': this.get('newItem'), 'is_completed': false}).save();
      this.set('newItem', null);
  }

As you can see, this is the same call you would normally use to create a new record. If you check your Syncano Dashboard, you should see your new Data Object saved there.

Updating a Todo Data Object

To toggle whether an item is complete or incomplete, we'll add another action to our Todos Controller at app/controllers/todos.js.

toggleComplete(item) {  
      item.toggleProperty('is_completed');
      item.save();
    }

This time, we pass in the item we want to update from the frontend as item. We toggle the is_completed property and save our changes. If you refresh the page, notice that your changes persist!

Deleting a Todo Data Object

The last method we want to include in this sample todo list is the ability to delete items. Once again, this will take place in the Todos Controller at app/controllers/todos.js.

We'll need to add a method called itemDelete, which will take the item we want to delete as its argument.

itemDelete(item) {  
      item.destroyRecord();
    }

As in the last example, we pass the item as an argument. We call the item's destroyRecord method and Syncano is updated accordingly. If you refresh the page, the item is still deleted. If you check your Syncano Dashboard, the Data Object is gone.

Injecting Syncano as a Service

While not used in this basic todo app, the Syncano Ember Add-on allows you to access all of the same Syncano functions you can find in our Javascript library. These functions include running Scripts and User Authentication. To use these in Ember, just inject the Service into your route, controller, or component.

The code looks like this:

syncano: Ember.inject.service('syncano')  

Then, you can call the Syncano Service from anywhere in the route, controller, or component via this.get('syncano').

In Conclusion

This app scratched the surface of what can be done using Classes and Data Objects with Ember and Syncano. Feel free to play around with the source code or, better yet, build your own app using Syncano's Classes and Data Objects. For more information about ember-syncano, view the docs. If you have any questions or comments, reach out to me at @WackerTheHacker.

The next post in this series continues by adding filtering and ordering to our Ember-Syncano Todo App.

Build powerful apps in half the time

Use our serverless platform to set up your backend in minutes.

Learn more
Todd Wacker
Author

Todd Wacker

Dev Evangelist, Developer