Appcelerator Titanium ACS Photo Example

ACS.js

var Cloud = require('ti.cloud');

function createUserACS(u,p,o){
	Ti.API.info("ACS: createUserACS(), u = "+u+", p="+p);
	if(Titanium.Network.networkType == Titanium.Network.NETWORK_NONE){
		alert("No Network. Please try again later.");
		return;
	}
	
	//Alloy.Globals.waitCursorStart();
	Cloud.Users.create({
		username  : u,
		password: p,
		password_confirmation: p,
	}, function(e){
		if (e.success) {
			Ti.API.info("ACS: New ACS userer creation successful");
			Alloy.Globals.ACSValidSession = true;
			alert("New user created");
			var user = e.users[0];
			Alloy.Globals.uid = user.id;
			Alloy.Globals.sessionid = Cloud.sessionId;
			if (o.success) { o.success(); };            
		} else {
			alert("Server error, please try again later");
			if (o.error) { o.error("ACS: createUserACS(): Server error"); };
		}
	});
};

exports.loginACS = function(u,p,o){
	Ti.API.info("ACS: loginACS()");
	if(Titanium.Network.networkType == Titanium.Network.NETWORK_NONE){
		alert("No Network. Please try again later.");
		if (o.error) { o.error("loginACS(): No Network"); };
		return;
	}
	
	Ti.API.info("ACS: Logging in to ACS with username = "+u+", password = "+p);
	Cloud.Users.login({
	  login  : u,
	  password: p,
	}, function(e) {
	  if (e.success)   {
	  	Alloy.Globals.ACSValidSession = true;
	  	Ti.API.info("ACS: Log in to ACS successful");
	  	alert("You are logged in");
	  	Ti.API.info("ACS: Session ID = "+Cloud.sessionId);
	  	var user = e.users[0];
	  	Alloy.Globals.uid = user.id;
	  	Alloy.Globals.sessionid = Cloud.sessionId;
	  	
	  	if (o.success) { o.success(); };  
	  } else {
	  	Ti.API.info('ACS: Login Error:' +((e.error && e.message) || JSON.stringify(e)));
	    createUserACS(u,p,{
	    	success: function(e) {
				Ti.API.info('Create user success'); 
				if (o.success) { o.success(); };  
			},
			error: function(e) {
				Ti.API.info(e);
				Ti.API.info('Logout failure');
				if (o.error) { o.error(); }; 
			}
	    });
	  } 
	});
};

exports.logoutACS = function(o){
	Ti.API.info("ACS: logoutACS()");
	if(Titanium.Network.networkType == Titanium.Network.NETWORK_NONE){
		alert("No Network. Please try again later.");
		if (o.error) { o.error("logoutACS(): No Network"); };
		return;
	}
	
	Cloud.Users.logout(function (e) {
    	if (e.success) {
    	    Ti.API.info("ACS: Logout successful");
    	    alert("Logout successful");
    	    Alloy.Globals.ACSValidSession = false;
    	    if (o.success) { o.success(); };
    	} else {
    	    Ti.API.info("ACS: Logout failed");
    	    Ti.API.info(((e.error && e.message) || JSON.stringify(e)));
    	    alert("Server error, please try again later");
    	    if (o.error) { o.error("ACS: logoutACS(): Server error"); };
    	}
	});
};
	
exports.ACSRead = function(o){
	Ti.API.info("ACS: ACSRead()");
	
	if(Titanium.Network.networkType == Titanium.Network.NETWORK_NONE){
		if (o.error) { o.error("ACS: ACSRead(): No Network"); };
		return;
	}
	
	Cloud.Photos.query({page: 1, per_page: 100, where: {user_id: Alloy.Globals.uid}}, function(e){
	    if (e.success) {
	        Ti.API.info("ACS: ACSRead(): Photo read successful"); 
	        Ti.API.info(e.photos); 
	        if (o.success) { o.success(e); };
	    } else {
	    	Ti.API.info("ACS: ACSRead(): Custom Object delete failed");
	    	if (o.error) { o.error("ACS: ACSRead(): Server error"); };
	    }
	});
	return;
};

exports.ACSDelete = function(id,o){
	Ti.API.info("ACS: ACSDelete(), id = "+id);
	
	if(Titanium.Network.networkType == Titanium.Network.NETWORK_NONE){
		if (o.error) { o.error("ACS: ACSDelete(): No Network"); };
		return;
	}
	
	Cloud.Photos.remove({
	    photo_id: id
	}, function (e) {
	    if (e.success) {
	        Ti.API.info("ACS: ACSDelete(): Photo delete successful");         
	        if (o.success) { o.success(); };
	    } else {
	    	Ti.API.info("ACS: ACSDelete(): Photo delete failed");
	    	if (o.error) { o.error("ACS: ACSDelete(): Server error"); };
	    }
	});
	return;
};

exports.ACSCreate = function(todo, near,o){
	Ti.API.info("ACS: ACSCreate()");
	
	if(Titanium.Network.networkType == Titanium.Network.NETWORK_NONE){
		if (o.error) { o.error("ACS: ACSCreate(): No Network"); };
		return;
	}

	Cloud.Objects.create({
	    classname: 'todos',
	    fields: {
	        todo:todo,
	        coordinates: near? [-122.1, 37.1] : [-122.1, 40.0] 
	    }
	}, function (e) {
		if (e.success) {
			Ti.API.info("ACS: ACSCreate(): Object create successful");
			Ti.API.info("ACS: ACSCreate(): Object reply id = "+e.todos[0].id);
			if (o.success) { o.success(e.todos[0].id); };
		} else {
			Ti.API.info("ACS: ACSCreate(): Object create failed");
			if (o.error) { o.error("ACS: ACSCreate(): Server error"); };
	    }
	});
};

alloy.js

// START: APM service code injection
// Require the apm module
Alloy.Globals.apm = undefined;
try {
Alloy.Globals.apm = require("com.appcelerator.apm");
}
catch (e) {
Ti.API.info("com.appcelerator.apm module is not available");
}

// Initialize the module if it is defined
Alloy.Globals.apm && Alloy.Globals.apm.init();
// END: APM code injection

// The contents of this file will be executed before any of
// your view controllers are ever executed, including the index.
// You have access to all functionality on the `Alloy` namespace.
//
// This is a great place to do any initialization for your app
// or create any global variables/functions that you'd like to
// make available throughout your app. You can easily make things
// accessible globally by attaching them to the `Alloy.Globals`
// object. For example:
//
// Alloy.Globals.someGlobalFunction = function(){};

Alloy.Globals.deviceWidth=Ti.Platform.displayCaps.platformWidth;
Alloy.Globals.deviceHeight=Ti.Platform.displayCaps.platformHeight;
Alloy.Globals.WCWidth=0.5*Alloy.Globals.deviceWidth;
Alloy.Globals.WCHeight=0.1*Alloy.Globals.deviceHeight;
Alloy.Globals.osname=Ti.Platform.osname;
Alloy.Globals.version=Ti.Platform.version;

Alloy.Globals.ACSValidSession = false;
Alloy.Globals.uid=null;
Alloy.Globals.sessionid=null;

app.tss

".container": {
	backgroundColor:"white",
	orientationModes: [Ti.UI.PORTRAIT],
    fullscreen: true,
	navBarHidden: true
}
"View": {
	height: Ti.UI.SIZE
}
"Label": {
	width: Ti.UI.SIZE,
	height: Ti.UI.SIZE,
	color: "#000"
}
".grayLineVW": {
	height: 1,
	backgroundColor: "#b2b2b2"
}
".spacer10VW": {
	height: 10,
}

index.js

var Cloud = require('ti.cloud');
var ACS = require("ACS");

function uploadPhoto(){
	Titanium.Media.openPhotoGallery({
	    success: function(e){
	        if(e.mediaType == Ti.Media.MEDIA_TYPE_PHOTO){
	           image = e.media;
	           //alert(image);
	
	           Cloud.Photos.create({
	                photo: image
	            }, function(e){
	                if(e.success){
	                    var photo = e.photos[0];
	                    alert('Photo Upload Success:\n' +
	                        'id: ' + photo.id + '\n' +
	                        'filename: ' + photo.filename + '\n' +
	                        'size: ' + photo.size,
	                        'updated_at: ' + photo.updated_at);
						getData();
	                }else{
	                    alert('Error:\n' +
	                    ((e.error && e.message) || JSON.stringify(e)));
	                    alert("Code: "+e.code);
	                }
	            });
	       }
	    },
	    cancel: function(){
	
	    },
	    error: function(err){
	        alert("ERROR: "+err);
	    },
	    mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO]
	});
}

$.photosTV.addEventListener('click', function(e) {
	Ti.API.info("index: Photo TableView Row clicked, e.row = "+e.row);
	Ti.API.info("index: Photo TableView Row clicked, id = "+e.row.id);
	
	ACS.ACSDelete(e.row.id, {
		success: function(e) {
			Ti.API.info('ACSDelete success');
			Ti.Analytics.featureEvent('app.index.ACS.ACSDeletSuccess', {});
			getData();
			alert("Photo Deleted");
		},
		error: function(e) {
			Ti.API.info(e);
			Ti.API.info('ACSDelete failure');
			Ti.Analytics.featureEvent('app.index.ACS.ACSDeletFailure', e);
		}
	});
});

function getData() {
	Ti.API.info('Index: getData()');
	
	ACS.ACSRead({
		success: function(e) {
			Ti.API.info('ACSRead success');
			Ti.Analytics.featureEvent('app.index.ACS.ACSReadSuccess', {});
			Ti.API.info('e.photos = '+e.photos);
			loadTable(e);
		},
		error: function(e) {
			Ti.API.info(e);
			Ti.API.info('ACSRead failure');
			Ti.Analytics.featureEvent('app.index.ACS.ACSReadFailure', e);
		}
	});
};

function loadTable(e) {
	Ti.API.info('Index: loadTable()');
	
	// var reply = JSON.parse(e);
	var reply = e;
	
	       
    var rows = [];
    
    var i = 0;
    
    Ti.API.info("index: reply = "+reply.photos.length);
    
    if(reply.photos.length>0){
        
        _.each(reply.photos, function(item) {
			rows.push(Alloy.createController('photoRow', {
				name: item.filename,
				id: item.id,
				//thumbnail: item.urls.thumb_100
			}).getView());
		});
    
	}
	else {
		alert("No Photos");
	}
	
	$.photosTV.setData(rows);
	
}

function ACSlogin() {
    ACS.loginACS("a", "1234", {
		success: function(e) {
			Ti.API.info('Login success');
			Ti.Analytics.featureEvent('app.index.ACS.loginSuccess', {});
			getData();
		},
		error: function(e) {
			Ti.API.info(e);
			Ti.Analytics.featureEvent('app.index.ACS.loginFailure', e);
			alert("No network or server not available. Please try again.");
		}
	});
}

function refresh() {
	getData();	
}

$.index.open();
alert("This application will upload photos from your photo gallery to ACS.\n\n Log into the Dashboard to see the uploaded photos");
ACSlogin();

index.tss

"#titleVW": {
	height: 50,
	backgroundColor: "#f8f8f8"
}
"#refreshtBtn": {
	height: 32,
	width: 32,
	right: 10,
	backgroundImage: "/images/btn_refresh.png"
}
"#photoVW": {
	layout: "vertical"
}
"#photosTV": {
	//height: Ti.UI.FILL
}

index.xml

<Alloy>
	<Window class="container" layout="vertical">
		
		<View id="titleVW">
			<Label>HelloACSPhoto</Label>
			<Button id="refreshtBtn" onClick="refresh" />
		</View>
		<View class="grayLineVW" />
		
		<View id="photoVW">
			<View class="spacer10VW"/>
			<Button id="photoUploadBtn" title="Click to upload photo" onClick="uploadPhoto" />
			<View class="spacer10VW"/>
			<View class="grayLineVW" />
			<View class="spacer10VW"/>
			<Label>Cloud Photos</Label>
			<View class="spacer10VW"/>
			<View class="grayLineVW" />
			<TableView id="photosTV" />
		</View>
		
	</Window>
</Alloy>

photoRow.js

var args = arguments[0] || {};

Ti.API.info("photoRows: args.text = "+args.name);
Ti.API.info("photoRows: args.id = "+args.id);
//Ti.API.info("photoRows: args.thumbnail = "+args.thumbnail);

$.rowLbl.text = args.name;
$.photoRowTVR.id = args.id;
//$.rowThumbIV.image = args.thumbnail;

photoRow.tss

"#photoRowTVR":{
	layout: "horizontal",
	//height: 100,
	height: 40,
	width: Ti.UI.FILL,
	hasChild: false
}
"#rowThumbIV":{
	left: 10
}
"#rowLbl": {
	height: "auto",
	left: 10
}

photoRow.xml

<Alloy>
	<TableViewRow id="photoRowTVR">
		<ImageView id="rowThumbIV" />
		<Label id="rowLbl"/>
	</TableViewRow>
</Alloy>