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.

Facebook: invitare tutti gli amici a fare “Mi piace” su una pagina

Una delle cose che non sopporto assolutamente dell’interfaccia di Facebook è la totale assenza di un aiuto per l’utente nell’evitare di fare un milione di click ogni qual volta ci sia da selezionare gli utenti destinatari di un messaggio o di un invito.

Aspettando una sorta di Facebook Pro, dove, pagando, si possa agire normalmente ed agevolmente tra le amicizie e gli utenti delle pagine, inviando loro messaggi privati e quant’altro in libertà, ora come ora bisogna fare di necessità virtù.

La maggior parte dei siti che offrono automazione sui social non fanno quello che serve a me, come Sproutsocial o SendSocialMedia: l’unica cosa è manipolare gli oggetto di Facebook stesso, piegandoli alle proprie necessità.

Un esempio lampante è l’invito a fare mi piace su una pagina di cui si è amministratori.
La sola idea di fare 5000 click per selezionare 5000 amici è di per se stupida, figurarsi un’interfaccia dove non esiste un semplice bottone che selezioni tutte le checkbox.
Chissà come sono gli stipendi di coloro che si occupano del frontoffice di FB…

Se conoscete javascript e avete dimestichezza con la console di Chrome, il gioco sarà molto più semplice di quello che può sembrare.

Andate su Facebook usando Google Chrome, entrate nella vostra pagina e, in alto, cliccate su: Espandi il pubblico –>  Invita i tuoi amici
Se non conoscete Google Chrome, fatevi vedere da uno bravo.

Una volta apertosi l’elenco degli amici, fate click destro –> Ispeziona elemento su uno degli amici. Vi si aprirà la finestra della console, con la porzione di codice selezionata evidenziata.

Andando a spulciare nel codice html, cercate il primo form che contiene il codice selezionato.  Dovrebbe essere qualcosa del tipo:
<form rel=”async” action=”/ajax/pages/invite/send/” method=”post” onsubmit=”return window.Event &amp;&amp; Event.__inlineSubmit &amp;&amp; Event.__inlineSubmit(this,event)” id=”u9y2dfy31“>

L’id in grassetto è importante, segnatevelo da qualche parte, poichè ci sarà da inserirlo via codice manualmente.

Ora andare nella sezione console, cliccando in alto nella finestra del codice di Chrome.
Non stupitevi se troverete, come nell’immagine, un elenco di errori.

Eliminate il contenuto della console, giusto per non confondervi le idee. Per fare ciò usate il tasto di divieto che trovate in basso a sinistra ( quarta icona ).

Ora siamo pronti per selezionare gli oggetti dal DOM; carichiamo in una variabile il form:

var f = document.getElementById('u7h83jn34'); 

Dopo di che possiamo ciclare tutti gli elementi presenti.
Fate attenzione: sostituite il valore u7h83jn34 con l’id del vostro form.

Eccovi il secondo blocco di codice da eseguire:

var modulo = f.elements;
for (i=0; i {
if(modulo[i].type == "checkbox" && !modulo[i].disabled )
{
modulo[i].checked = !(modulo[i].checked);
}
}

Come vedete, ho caricato in modulo il valore di f.elements ( per comodità ).
Per ogni elemento nel form, controllo che sia una checkbox e che non sia disabilitata da FB, modifico lo stato della checkbox.

Notate che se, nella console, usate il tasto freccia su riproporrete il comando immediatamente precedente. Se rilanciate nuovamente il secondo blocco di codice, noterete che le checkbox si deselezioneranno.

Spero vi sia utile!

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.

Problemi con la cache di Facebook?

Vi sarà capitato moltissime volte di dover o voler postare un link ad una pagina o ad un articolo su Facebook, ed il più delle volte non avrete notato il fastidioso problema della cache del social network.

Se il link non fa parte di un vostro sito, ma di uno esterno, il problema non si pone, difficilmente avrete diretto accesso ai tag tipo title e description, ma nel momento in cui la pagina è vostra, o ne siete amministratore, beh, il discorso cambia eccome.

Nel mio caso l’obiettivo era pubblicizzare un articolo su un sito e-commerce di un cliente.
Ho postato il link e ho notato che i tag <title> e <description> erano terrificanti.
Procedo con la modifico dei suddetti tag, aggiorno la pagina, rivado in Facebook, posto nuovamente il link … e il risultato non cambia. Ma come è possibile? Da una parte l’HTML della pagina è perfetto, mentre Facebook mi ripropone i dati precedenti.

Chiaramente FB salva in memoria i dati relativi a quel link, proprio per evitare un eccessivo traffico verso altri siti. Il problema, però, persiste.

Ho notato che questo baco è facilmente aggirabile seguendo la seguente procedura.

E’ sufficiente collegarsi al link http://developers.facebook.com/tools/debug, inserire il link che volete postare su FB , attendere il caricamento dei dati ed il gioco è fatto.

Da questo momento, quando posterete nuovamente il link nella bacheca del Social Network di Mr.Zuckerberg, la cache sarà aggiornata all’ultima versione.

Questa procedura, tra le altre cose, può essere ripetuta N volte, poichè ogni volta verrà aggiornata la versione in memoria.

Nuovo blocco di GMail?

Proprio in queste ore stiamo riscontrando alcuni problemi con alcuni nostri account GMail, mentre su altri funziona tutto regolarmente.

Questa la schermata che ci si è presentata pochi minuti fa:

Andando negli strumenti di Google Chrome, il profilo pare avere qualche problema:

E come succede sempre, cliccando su maggiori informazioni…