Appcelerator Blog

The Leading Resource for All Things Mobile

Using ACS as a back-end for your App

0 Flares 0 Flares ×

On a previous post, I talked about consuming web services. Today I want to talk about ACS (Appcelerator Cloud Services), but before I go into what it is and how it can help you, let’s take a look at a scenario.

Your client asks you to build an App where people can create an account, log in and display a feed with photos that people have uploaded. Any user can then can snap a picture, upload it to the server and after being approved by an administrator let everyone else see it.

The App itself seems pretty straightforward.

  1. User login and photo feed are two API calls: you already know how to do that.
  2. Taking a picture is easy using the Ti.Media.takePicture method. Then another API call to upload.

Now the back-end, that’s another story. You need to:

  1. Find a server to host your back-end app
  2. Create the database, establish relations between tables (unless you’re using NoSQL Databases)
  3. Expose an API that returns JSON
  4. Create an admin interface
  5. Provide security
  6. Get ready to scale in case your App is very successful and you need more space or bandwidth

What if I tell you that with ACS you can do that right now, and maybe build your full App (front-end and back-end) in a day or two? In fact, let’s do it!

Setting up your app

Launch Titanium Studio and go to File > New > Mobile Project. Then select your Project Template. Now on the New Mobile Project screen, make sure you select “Cloud-enable this application”.

Studio has added for you the module, and has created two API Keys: One for production and one for development. What this really means is that you already have a back-end for your app!. Let’s check it out.

Go to and click on My Apps; Login if you have to. You’ll be taken to a screen with a list of all your Apps. Locate the App you’ve just created and click on Manage ACS. You are now on your Adminstrative Console.

Using ACS

ACS has too many features to mention in a single post. If you want to know all there is to know about ACS, I’d suggest you go to For our example we’ll be using two services: Photos and Users. To use ACS on your App, start by getting an instance to the module.

var Cloud = require('');

Your App already knows your API keys, so you’re ready to go. The ACS API follows a very simple pattern:

     property1: 'here',
     property2: 'here'
     // I'm the callback.  The method will call me and the response object is in e

Both the properties for the method and the object that is returned are documented on the API reference. If you’d rather have a more tangible example, there’s a ACS KitchenSink at

User Login

For simplicity, I will not implement a way of creating a new user from the App. I’ll assume that the user is already created. To create a new user, scroll down on your ACS console, click on “Users” and then on “Create a New User”.

Fill out Email, Username, Password and Password Confirmation, and click “Submit”. Now you have a user on the system and you’re ready to login. As explained on the API documentation, and based on the simple pattern described earlier, you can call the login method sending two properties: Login (can be email or userid) and Password. Upon successful login you’ll receive an object with data for this user.

Success Example:

Error Example:

PRO TIP: On Titanium you can do console.log(JSON.stringify(your_object)) to inspect the contents of the object that was returned. Here I’m taking that response and viewing it on

This means that your Titanium code may look something like this:

function doLogin(e){
        login: $.uid.value,
        password: $.pwd.value
    }, function (e) {
        if (e.success) {
            var win=Alloy.createController('feed').getView();
        else {

The Photo Feed

To implement the Photo Feed, we use the “query” method in the Photos namespace. This method can receive many optional parameters. We’ll only use one for retrieving the results in reverse order, so we do -created_at; the minus sign reverses the order. The method will return an object will all the photos.

Example Success

As you can see, ACS has already created 6 different versions of your photo: square_75, thumb_100, small_240, medium_500, medium_640 and large_1024.

PRO TIP: Paging is supported using the “page”, “per_page”, “limit” and “skip” parameters, so implementing “lazy loading” is just a matter of writing the front-end code.

To display the feed is as simple as looping through the “photos” array. Your code may look something like this:

        order: "-created_at"
    },function (e) {
        if (e.success) {
            if ( == 0) {
                // no photos
                alert('There are no photos');
            else {
                    // work with this photo
        else {

Uploading Photos

To upload photos we use the “create” method, which receives the photo in binary form in a property named “photo”. You may get the photo from the photo gallery using Ti.Media.openPhotoGallery or from the camera using Ti.Media.takePicture. Once you have the photo, you may call the “create” method something like this:

          photo :
     }, function(e) {
          if(e.success) {
               // reload the feed?
          } else {

So there you have it. You very own secure and scalable cloud-based back-end! I have built a proof-of-concept located at Here’s how it looks.

I’ve thrown in some bonus conditional Alloy code to use Toolbars on iOS and ActionBar on Android.

This is not a finalized app, just a quick example of you can quickly put together an Alloy-based front-end with an ACS back-end. Feel free to use, fix and improve upon it.

Final thoughts

You can use ACS with or without Titanium, so if you’re looking for a back-end for your web-based app, ACS may be what you’re looking for. For this example we used the ACS SDK for Titanium, but you could also use the native iOS or Android SDK as well as the REST API. ACS offers 20 pre-build services, one of which is Custom Objects. This means that you can create your own data-sets, with your own data structure, and automatically get a REST API to interact with them.

0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- 0 Flares ×


  1. wei

    Great post!

  2. Ray Belisle

    The problem I am finding using ACS as a backend is that some/most clients want an interface that is accessible via a browser (not just a mobile browser and not just Webkit based, Safari/Chrome). Though Titanium works well for Webkit browsers, it fails miserably when you open on a non-webkit based desktop browser (as it should, because it’s a mobile platform). What I would really like to see is hear what people are doing to provide web-based interfaces to an ACS backend. I have been playing with jQuery and the jqGrid as an option, but I would love to hear other options people have used. Ideally I would like to see an interface that support the restful calls back to ACS… easily…

  3. wei

    TO: Ray Belisle
    jQuery post working pretty fine for me when using ACS accessible via a browse. You can play around!

  4. Paul

    Great tutorial to get started!

    However, are there more tutorials out there on how to use ACS. Or how to optimize further?

    The problem I have with this tutorial is that the image that is uploaded takes a very long time to upload (probably because it’s uploading the full resolution image).

    Any direction would be appreciated!

  5. Joe

    Paul: to optimise image uploading, resize on device first with: imageAsResized()!/api/Titanium.Blob-method-imageAsResized

    The marketplace module is mostly included in Titanium, but it also allows you to set the jpeg compression

Comments are closed.

Sign up for updates!

Become a mobile leader. Take the first step to scale mobile innovation throughout your enterprise.
Get in touch
computer and tablet showing Appcelerator software
Start free, grow from there.
0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- 0 Flares ×