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.
- User login and photo feed are two API calls: you already know how to do that.
- 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:
- Find a server to host your back-end app
- Create the database, establish relations between tables (unless you’re using NoSQL Databases)
- Expose an API that returns JSON
- Create an admin interface
- Provide security
- 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 ti.cloud 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 my.appcelerator.com 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 http://docs.appcelerator.com/cloud/latest/. 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 ti.cloud module.
var Cloud = require('ti.cloud');
Your App already knows your API keys, so you’re ready to go. The ACS API follows a very simple pattern:
Cloud.Namespace.method({
property1: 'here',
property2: 'here'
},function(e){
// 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 https://github.com/appcelerator-modules/ti.cloud/tree/master/commonjs/example.
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 jsoneditoronline.org
This means that your Titanium code may look something like this:
function doLogin(e){
Cloud.Users.login({
login: $.uid.value,
password: $.pwd.value
}, function (e) {
if (e.success) {
var win=Alloy.createController('feed').getView();
win.open();
}
else {
alert(e.message);
}
});
}
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:
Cloud.Photos.query({
order: "-created_at"
},function (e) {
if (e.success) {
if (e.photos.length == 0) {
// no photos
alert('There are no photos');
}
else {
e.photos.forEach(function(item){
// work with this photo
})
}
}
else {
alert(e);
}
})
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:
Cloud.Photos.create({
photo : event.media
}, function(e) {
if(e.success) {
// reload the feed?
} else {
alert(e.message);
}
});
So there you have it. You very own secure and scalable cloud-based back-end! I have built a proof-of-concept located at github.com/ricardoalcocer/tiphotogram. 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.
