Nella scorsa lezione, abbiamo visto come utilizzare gli oggetti User. Non è un caso se sono stati introdotti per primi, dal momento che tutte le
interazioni che coinvolgono ACS devono essere effettuate da utenti che sono loggati.
L'oggetto Photos, così come tutte le altre API messe a disposizione, funzionerà solo con utenti già loggati. Quindi, se volessimo testare una delle chiamate di ACS, dovremmo predisporre nel nostro codice
sorgente un meccanismo di login esplicito o forzato.
Per permettere ad un utente di effettuare il login, infatti, abbiamo due possibilità: la prima (login esplicito) è quella di chiedere ad
un utente di registrarsi ed accedere con le sue credenziali, come visto nella lezione scorsa; la seconda (login forzato) è quella di
implementare una login “hard-coded”, dentro il codice sorgente della nostra applicazione. Questo è il caso da adottare quando scriviamo un’app in cui è necessario utilizzare i servizi ACS, ma non si vogliono gestire gli utenti registrati: in pratica si registra un unico
utente, manualmente e attraverso la dashboard, e poi si effettua il login con le sue credenziali all'avvio dell'applicazione, direttamente da codice, nella
chiamata Users.login. In questo caso i valori di login e password dell'utente potrebbero essere memorizzati in una coppia di costanti, magari nel
file alloy.js.
Cloud.Users.login({
login: Alloy.Globals.userLogin,
password: Alloy.Globals.userPassword
}, function (e) {
if (e.success) {
var user = e.users[0];
alert('Success');
} else {
alert('Error');
}
});Dopo questa necessaria premessa, esaminiamo l'API Photos, la cui funzione è quella di permetterci di gestire delle foto sul cloud, compreso l'upload e il resize.
Nelle lezioni passate abbiamo visto come utilizzare la fotocamera del nostro dispositivo. Una volta scattata una foto è possibile memorizzarla nel file
system, ma il più delle volte sarà necessario trasferirla su un server. L'API Photos ci viene incontro permettendoci il trasferimento delle foto sul cloud
di Appcelerator e offrendoci anche un servizio di ridimensionamento delle stesse, rendendole poi disponibili in vari formati (anche
personalizzati).
La seguente tabella mostra i formati standard in cui ACS ridimensiona le immagini che vengono caricate sul cloud. I valori riportati nella colonna Size Name saranno utilizzati per recuperare le URL delle immagini ridimensionate.
Un esempio di chiamata per caricare una immagine è la seguente:
Cloud.Photos.create({
photo: Titanium.Filesystem.getFile('myimage.jpg')
}, function (e) {
if (e.success) {
var photo = e.photos[0];
alert('Success);
} else {
alert('Error');
}
});Se il caricamento avviene con successo, ci verrà restituito un array di oggetti Photos con una struttura simile a quella riportata di seguito:
"photos": [
{
"id": "",
"filename": "myimage.jpg",
"size": 5856663,
"md5": "",
"created_at": "2014-11-10T22:21:34+0000",
"updated_at": "2014-11-10T22:21:36+0000",
"processed": false,
"user": {
"id": "",
"first_name": "Alessio",
"last_name": "Ricco",
"created_at": "2014-11-10T21:30:45+0000",
"updated_at": "2014-11-10T21:30:23+0000",
"email": "me@example.com"
},
"content_type": "image/jpeg"
}
]
Il campo processed = false, ci avvisa che le foto sono ancora in fase di elaborazione sul cloud e che quindi non sono ancora disponibili le
relative versioni ridimensionate. Infatti la chiamata Photos.create è una chiamata asincrona, che non termina immediatamente ma
dopo una fase di post-elaborazione delle foto. Quando il campo processed cambierà valore in true potremo accedere sia alla foto appena
caricata che alle sue versioni ridimensionate.
La chiamata Photos.show serve ad interrogare il cloud per chiedergli di mostrare le informazioni relative ad una immagine salvata in precedenza.
Cloud.Photos.show({
photo_id: photoId
}, function (e) {
if (e.success) {
var photo = e.photos[0];
alert('Success: ' + photo.id);
} else {
alert('Error');
}
});In questo esempio chiediamo informazioni su una immagine che ha come identificativo il contenuto della variabile photoId. In caso positivo l'oggetto che ci verrà ritornato avrà questo aspetto:
"photos": [
{
"id": "",
"filename": "myimage.jpg",
"size": 5856663,
"md5": "",
"created_at": "2014-11-10T22:21:34+0000",
"updated_at": "2014-11-10T22:21:36+0000",
"processed": true,
"user": {
"id": "",
"first_name": "Alessio",
"last_name": "Ricco",
"created_at": "2014-11-10T21:30:45+0000",
"updated_at": "2014-11-10T21:30:23+0000",
"email": "me@example.com"
},
"content_type": "image/jpeg",
“urls”: {
"square":"http://storage.appcelerator.com/.../photo_square.jpg",
"thumb":"http://storage.appcelerator.com/.../photo_thumb.jpg",
"small":"http://storage.appcelerator.com/.../photo_small.jpg",
"medium_500":"http://storage.appcelerator.com/.../photo_medium_500.jpg",
"medium_640":"http://storage.appcelerator.com/.../photo_medium_640.jpg",
"large":"http://storage.appcelerator.com/.../photo_large.jpg",
"original":"http://storage.appcelerator.com/.../photo_original.jpg"
}
}
]
Il campo processed = true ci avvisa che le URL, sia dell'immagine originale che delle versioni ridimensionate, sono disponibili. L'oggetto urls infatti viene popolato con una serie di campi i cui nomi corrispondono ai valori della colonna “Size Name” vista nella tabella a
inizio lezione. Per cui, per accedere alla foto appena caricata in versione miniatura, la sua url sarà:
var photo_url = e.photos[0].urls[“thumb”];
Ovviamente questa chiamata presuppone che ci si trovi dentro una callback come quelle viste finora per i casi Photos.create e Photos.show
, e che il campo processed abbiamo valore pari a true.
È molto frequente nelle applicazioni mobile aver bisogno di una visualizzazione immediata della foto appena caricata. Altre volte è invece utile avere
almeno una miniatura quadrata da poter mostrare immediatamente sullo schermo. ACS ci permette di specificare quali sono i formati che vogliamo vengano processati in modo sincrono, cioè quali formati vogliamo che vengano resi immediatamente disponibili al
termine della chiamata di Photos.create. Per fare questo si utilizza la proprietà photo_sync_sizes[] specificando il formato da elaborare
in modo sincrono.
Cloud.Photos.create({
photo : $.thumbnail.image,
'photo_sync_sizes[]' : "square_75"
}, onPhotoCallback);Se i formati messi a disposizione da ACS non fossero sufficienti è possibile specificare anche uno o più formati personalizzati utilizzando la proprietà photo_size. In questo esempio definiamo un formato htmlit corrispondente a foto quadrate di lato 100 pixel.
Cloud.Photos.create({
photo : $.thumbnail.image,
'photo_sizes[htmlit]' : “100x100#”
}, onPhotoCallback);
In questa lezione abbiamo visto come utilizzare l'API messa a disposizione da ACS per gestire le fotografie. Non abbiamo allegato codice, ma vogliamo esplicitamente invitare il lettore a modificare gli esempi precedenti, in particolare quelli dedicati alla gestione della fotocamera e al processo di login dell’utente, creando un’app che permetta di caricare sul cloud una foto appena scattata.
Nella prossima lezione vedremo quali strumenti ci mette a disposizione ACS per interrogare gli oggetti che abbiamo salvato sul Cloud.