Ember-CLI ToDo example app with Azure Mobile Services

Background

When you create an Azure Mobile Service you can download a ToDo sample app to help you get started on a number of platforms including Windows, iOS and Android. There are also cross platform options available with Xamarin or web app development using PhoneGap or HTML/Javascript. Recently I came across a pretty neat Javascript framework called Ember for creating web apps. While you can go ahead and quickly download the Ember Starter Kit to try out some of the introductory snippets listed on the Emberjs homepage, the better option for serious development of Ember apps is to use Ember-CLI. The Ember Command Line Interface gets you up and running with a full MVC framework and helps install project dependencies using NPM (Node Package Manager) and Bower. Having just started learning Ember-CLI myself I thought it might be useful to do a getting started tutorial showing how to hook it up with Azure Mobile Services to create a ToDo app with same functionality as the other offerings already available on the Mobile Services quick-start page.

Prerequisites

Before you can start using Ember-CLI you will need Node.js installed.

How to install Node.js on Windows

Alternatively you can manage multiple node versions using the latest nvm-setup Windows installer.

See nvm-windows for more commands.

How to install Node.js on Mac

If you’re using a Mac its better to install Node.js using NVM (Node Version Manager) rather than install as admin/sudo user. Run the following commands in Terminal:

NB: In new Terminal sessions you may need to run nvm use default. If you want to you can add this to your bash profile to setup automatically.

Or for a specific node version:

Once you have node installed you can check its working by getting the version:

Installing Ember-CLI and bower

Install ember-cli, bower and phantomjs globally using the -g switch.

Creating the Todo example app using Ember-CLI and Azure Mobile Services

  1. Create an Azure Mobile Service
  2. Create example TodoItem table.
    CreateTable-TodoItem
  3. Create a new Ember-CLI app
  4. Run in ember client in Browser.
  5. Open http://localhost:4200/ in new Browser window to see web app.

    welcome-to-emberjs

  6. Save Azure Mobile Services javascript files into /vendor folder.
  7. Update the Broccoli file Brocfile.js to import /vendor javascripts
  8. Update the js hint file .jshintrc to recognise the WindowsAzure global namespace.
  9. Generate TodoItem model, index controller and route. (Generating a route will also generate a Handlebars index.hbs template by default).

  10. Create azure service. (Generating a service will also generate an azure-service.js initalizer)

  11. Update the services/azure.js script with your own Mobile Service connection strings (on lines 61-62):

    When the app first loads we will need to read a table. In this case we will read the TodoItem table to get a list of TodoItems. When a user needs to add a Todo item we will call the insert method to add an item into a table and update our Ember model for display. The del method will work the same way except the item will be deleted. Finally the update method will be used to save changes to an item, which in this case will be when the TodoItem is completed (stroked out).

  12. Edit models/todo-item.js to handle todo text string and a completed boolean so tasks can be marked off:

    The TodoItem model consists of a string property for the Todo text and a boolean property to say if the Todo item has been completed.

  13. Edit routes/index.js and set model to read TodoItems table:
  14. As ember serve auto updates as you save changes you should see some activity in your Browser’s console log.

  15. In the Browser’s console log you might get a refused to connect error “because it violates the following Content Security Policy directive: connect-src ‘self'” that means we need to update our environment config. To fix this add the following contentSecurityPolicy settings to the ENV var in config/environment.js to allow connections to *.azure-mobile.net:
  16. Update the templates/index.hbs which will be used to display the user interface.

    NB: You will get an uncaught error if you try to add, update or delete items as we still need to handle user actions with a controller.

  17. Update the controllers/index.js to handle actions from user interface and delegate them to our Azure service.

    To allow access to the service from the controller we need to inject the azureService in the initializers/azure-service.js service initializer.

    ember-cli-todo-app
    TodoItem-table

  18. Finally add some styles to grey out and strike through completed items styles/app.css:

    ember-cli-todo-app-style

Download finished Todo ember-cli project on GitHub