Sottoporre ad Apple una app creata con Phonegap

Ho letto su molti forum, Phonegap forum stesso su tutti, che moltissima gente ha problemi a sottoporre ad Apple la propria app, e che spesso gli viene rifiutata perchè “non abbastanza app”.

Il motivo, in verità, è piuttosto semplice: se creo una app che è semplicemente una trasposizione mobile di un sito web, al 99% verrà rifiutata da Apple, che argomenterà il rifiuto con la frase “La vostra app non utilizza alcuno strumento tipico di uno smartphone (gps, database, rubrica), quindi spostate il vostro sviluppo verso una versione mobile del sito”. Grazie tante…

A parte la condicio sine qua non di fare una app che non faccia vomitare, è piuttosto semplice utilizzare uno degli strumenti che Phonegap mette a disposizione, uno su tutti lo Storage.

Per utilizzare il database che mette a disposizione Phonegap, è necessario richiamarlo con la seguente funzione:

function activateDB(){
	var db = window.openDatabase("NOME_DB", "VERSIONE_DB", "DISPLAY_NAME_DB", 5*1024*1024);
    db.transaction(populateDB, errorCB, successCB);
}

function populateDB(tx) {

	tx.executeSql('CREATE TABLE IF NOT EXISTS tblPreferiti(id INTEGER PRIMARY KEY ASC, idarticoli INTEGER)');

	}

function errorCB(err) {
		console.log("!!! Error processing SQL: "+err.code + ' - ' + err.message );
}

function successCB() {
}

La funzione activateDB() mi carica nella variabile db il database NOME_DB, dopo di che mi lancia la funzione populateDB() che, a seconda del risultato positivo o negativo, mi richiama successDB() o errorDB(). Tutto chiaro, no?
Come vedete, è piuttosto semplice interfacciarsi con il DB e basta salvarvi qualcosa al suo interno per utilizzare uno degli strumenti messi a disposizione da Phonegap.
Nel mio caso, ho creato una APP ( non ancora disponibile su Apple Store, ma appena lo sarà posterò il link.. ) e ho utilizzato il db per salvarvi gli articoli preferiti.
In verità salvo esclusivamente l’ID degli articoli, che vengono poi caricati dal server remoto ogni volta. Un utilizzo minimo del DB, ma…sufficiente.

Jsonp e parse file json errato

Lavorando su un app con Phonegap mi sono imbattuto in una rogna non da poco, risolta grazie a qualche invocazione dell’Altissimo e un paio d’ore di sbattimento.
La problematica era di risolvere l’annoso problema dell’errore di console di Chrome Origin null is not allowed by Access-Control-Allow-Origin.
Leggendo vari post su internet, la problematica è capitata a tantissima gente e la risoluzione della stessa non sembra così palese come può sembrare.

Io stesso, soprattutto nei blog italiani, non ho trovato molte soluzioni rapide.
A parte la quantità indecente di soloni che si beano della propria conoscenza, cosa che mediamente fa incazzare come quando si paga l’IMU, che preferiscono rompere i maroni ore ed ore, invece che dare velocemente la soluzione, come se far faticare la gente fosse, in Italia, uno sport nazionale. Nei blog americani, invece, ci si imbatte più spesso in persone più malleabili e meno snob.

Veniamo velocemente al codice:

$.ajax({
		url:"http://www.vostrodom.it/pagina.asp",
		type:"GET",
		dataType:"json",
		data:"id=" + ID 
}) [...]

Molto semplicemente, una bella chiamata con jQuery.ajax, ad una pagina sul vostro sito, con il passaggio di una variabile querystring id.
Se usate Google Chrome, noterete un bel messaggio di errore, che avvisa che non possono essere effettuate chiamate CrossDomain, ossia fuori dal dominio della pagina stessa.
La problematica avviene soprattutto se avete lanciato una pagina da file:\\ .

Come ovviare al problema? Usando come dataType:jsonp e non json.
Occhio, le problematiche, usando questo sistema, diventano altre, però, per lo meno, una rogna, di dosso, ve la togliete. Per esempio, scordatevi il passaggio POST dei dati: con JsonP avvengono tutte via GET, con tutte le problematiche di dati e sicurezza che ne derivano. Se queste noie non vi interessano, risolvete in fretta il problema.

Risolto un problema, però, ne viene fuori un altro: jsonp utilizza una funzione javascript per ovviare al Domain Crossing. Non modificando niente, potrebbe venire fuori un errore del tipo Uncaught SyntaxError: Unexpected token.

Un passo alla volta.
Poniamo il caso che il vostro file json sia come nell’esempio seguente:

{
    "glossary": {
        "title": "example glossary" 
    }
}

Al file json manca un quid, ossia una funzione che conglobi tutto.
Modificate il vostro json aggiungendo, ad esempio, readJson([vostro-codice-json]).

readJson({
    "glossary": {
        "title": "example glossary" 
    }
})

Dopo di che, andiamo nel codice javascript a dirgli che la funzione callback che deve leggere si chiama readJson.

$.ajax({
		url:"http://www.vostrodom.it/pagina.asp",
		type:"GET",
		dataType:"json",
		data:"id=" + ID,
                jsonpCallback:	"readJson"
}) [...]

A questo punto, tutti gli odiosi messaggi d’errore della console dovrebbero sparire e, magicamente, potrete fare le vostre belle chiamate json esterne.

Phonegap: creare applicazioni native usando HTML e JS

Se pensate che il mondo delle applicazioni native sia un esclusiva dei relativi linguaggi di programmazione ( Obj-C, .NET, Java ), evidentemente non avete mai sentito parlare del progetto di Adobe, Phonegap.

Phonegap è un framework che permette di generare un’applicativo nativo per iPhone, Android, Windows Phone ed altri, partendo da codice javascript e html. Insignito alla fine del mese di Ottobre del 2012 Jolt Awards come migliore tool di sviluppo mobile, rende la vita facile a coloro che non hanno ( ancora ) conoscenze di sviluppo dedicate.

Un esempio vale più di mille parole:

function checkConnection() {
   var networkState = navigator.network.connection.type;

   var states = {};
   states[Connection.UNKNOWN] = 'Unknown connection';
   states[Connection.ETHERNET] = 'Ethernet connection';
   states[Connection.WIFI] = 'WiFi connection';
   states[Connection.CELL_2G] = 'Cell 2G connection';
   states[Connection.CELL_3G] = 'Cell 3G connection';
   states[Connection.CELL_4G] = 'Cell 4G connection';
   states[Connection.NONE] = 'No network connection';

   alert('Connection type: ' + states[networkState]);
}

document.addEventListener('deviceready',function(e){
   checkConnection();
}, false);

Cosa stiamo facendo? Molto semplicemente, Phonegap mette a disposizione un bell’evento, deviceready, che ci da la sicurezza di lanciare del codice custom non appena il dispositivo è disponibile.
Un bel vantaggio!
Nello specifico, lanciamo la funzione checkConnection(), che ci da alcune informazioni su quale connessione sia attualmente attiva sul nostro telefono.

Attualmente alla versione 2.1, questa pagina ci da una dettagliata panoramica su quali oggetti siano messi a disposizione a noi sviluppatori.

Ogni evento è anche descritto con un minimo di troubleshooting, a seconda del device obiettivo della vostra app. Ad esempio, per quanto riguarda Windows Phone, l’avviso è:” Windows Phone Emulator always detects navigator.network.connection.type as Connection.UNKNOWN“. Quindi … occhio alle eccezioni.

Phonegap Cordova 2.1, XCode: errori in fase di Build

Molti di voi che usano abitualmente Phonegap per creare applicazioni mobili avranno notato qualche cosa di interessante, relativamente al pacchetto di installazione di Phonegap, che ora si chiama Cordova.

A differenza di qualche versione fa, dove si poteva tranquillamente installare il file .dmg, ora è necessario scaricare il pacchetto ed avviare il file create con la console.
Per coloro che non sono così scafati con il sistema Mac o comunque non sono pratici del codice via riga di comando, il sistema potrà rivelarsi un ostacolo non da poco.

Andate sul sito Phonegap.com e scaricate nella cartella Download.
Il file che dovete utilizzare per creare un nuovo progetto Cordova è situato, all’interno della cartella appena scompattata, in /lib/ios/bin.
Copiate la cartella bin all’interno della cartella Download.

Ora aprite la console ( basta andare in alto a destra e digitare terminal ) e andate in [nomeutente]/documents –> la cartella dove avete copiato il tutto.

Nella console digitate:
./create

La console vi risponderà con:
Usage: ./create <path_to_new_project> <package_name> <project_name>
<path_to_new_project>: Path to your new Cordova iOS project
<package_name>: Package name, following reverse-domain style convention
<project_name>: Project name

Digitiamo quindi, al fine di creare il nostro progetto:
./create /Users/[nomeutente]/documents/[nomeapp] com.[nomeapp] [nomeapp]

Vi consiglio di evitare spazi o caratteri strani nel nome del progetto, o XCode potrebbe non essere molto clemente 😉

Ora quello che vi rimane da fare è un bel doppio click sul file di progetto XCode generato.
Se, per caso, aprendo il progetto in XCode, notate alcuni errori gravi ( segnalati in rosso ), oppure direttamente il Build fallisce miseramente, allora c’è una sola cosa da fare: aggiornare XCode. Nel caso in cui l’Aggiornamento Software del Mac non vi segnala la presenza della nuova versione, allora dovete andare nell’ App Store e scaricarlo direttamente.

Una volta aggiornato XCode all’ultima versione disponibile, il vostro Build avverrà senza particolari problemi, salvo alcune segnalazioni di InvokeString deprecato, che dipendono però da Cordova stesso.