Creare una applicazione per iPhone con JQtouch

Apple non è famosa per la sua apertura infatti è necessario possedere un Mac per poter sviluppare applicazioni per iPod Touch, iPhone & iPad. Per fortuna ci viene incontro un progettino alquanto promettente JQtouch.

Questa genialata permette a tutti coloro che volessero farlo di realizzare una applicazione web per iPhone, iPod Touch ed iPad. L’unica cosa che serve è un editor di testo e del sano javascript! Vediamo come utilizzarlo

Supponiamo di voler realizzare una applicazione web per iPhone che permetta agli utenti di cliccare su di un pulsante per poter ottenere una frase casuale. Essendo una Web App dovremo semplicemente inserire i dati in uno o più file html. Per prima cosa procuriamoci JQtouch scaricandolo dal seguente indirizzo:

http://jqtouch.googlecode.com/files/jqtouch-1.0-beta-2-r109.zip

Decomprimiamo tutto il contenuto dell’archivio in una nuova cartella e creiamo all’interno di questa il file chiamato index.html . A questo punto apriamo il file appena creato ed inseriamo il seguente testo:

<!doctype html>


<html>


    <head>


        <meta charset="UTF-8" />


        <title>iFortune</title>


        <script src="jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>


        <script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>


        <script src="frasi.js" type="application/x-javascript" charset="utf-8"></script>


        <style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style>


        <style type="text/css" media="screen">@import "themes/jqt/theme.min.css";</style>


        <script type="text/javascript" charset="utf-8">


        $.jQTouch({


            icon: 'icon.png',


            statusBar: 'default',


            startupScreen: 'startup.png',


            useAnimation: true,


            cacheGetRequests: true,


            preloadImages: [


                'themes/jqt/img/chevron_white.png',


                'themes/jqt/img/bg_row_select.gif',


                'themes/jqt/img/back_button_clicked.png',


                'themes/jqt/img/button_clicked.png',


                'themes/jqt/img/grayButton.png',


                'themes/jqt/img/whiteButton.png',


                'themes/jqt/img/loading.gif'


            ]


        });


        function get_one(){


            var frasi = new Array(); //array delle frasi




            frasi[0] = "Sei il solo al mondo a conoscere la verit&agrave;";


            frasi[1] = "Questa frase non ha accenti!";


            frasi[2] = "Il tuo pensiero non &egrave; cambiato!";


            frasi[3] = "Fai pi&ugrave; sport.";


            frasi[4] = "I prodotti Apple costano molto.";


            frasi[5] = "Non fare arrabbiare koalalorenzo";


            frasi[6] = "Sorridi! Tanto solo alla morte non c'&egrave; rimedio!";


            frasi[7] = "Cambia idea... ed in fretta!";


            frasi[8] = "Un viaggio all'estero no?";


            frasi[9] = "La risposta migliore ad ogni domanda &egrave; quella pi&ugrave; moderata!";


            frasi[10] = "Viva i Teletubbies!"


            frasi[11] = "TopMerda dice che sei tu il problema!";


            frasi[12] = "Non avrai altro koalalorenzo all'infuori di koalalorenzo";


            frasi[13] = "Verifica sempre l'hash dei tuoi download!";


            var id = Math.round(Math.random() * (frasi.length - 1)); //ne prende una a caso


            return "<h1>"+frasi[id]+"</h1>";


        }


        function fortuna(){


            $("#return").html(get_one());


        }


        </script>


    </head>

Con questo testo abbiamo definito l’head della pagina HTML della nostra applicazione. È molto importante specificare alcune cose: Abbiamo imposto il caricamento della libreria Javascript di JQtouch, il titolo della nostra applicazione ed abbiamo settato qualche valore: l’icona da utilizzare per l’applicazione, lo stile della barra di stato dell’iPhone durante l’utilizzo dell’applicazione, abbiamo attivato le animazioni, la cache e il pre-caricamento di alcune immagini in modo da non appesantire la navigazione. Cosa importante, abbiamo scritto la funzione javascript per ottenere una frase casuale.

A questo punto non ci resta che scrivere il corpo della nostra applicazione. Quindi inseriamo le seguenti righe al nostro file:

     <body>
        <div id="about" class="selectable">
            <div class="toolbar">
                <a href="#" class="back">Back</a>
                <h1>iFortune</h1>
            </div>
            <div class="info">
                Questa semplice applicazione mostra una frase casuale.
            </div>
            <br><br>
            <a style="margin:0 10px;color:rgba(0,0,0,.9)" class="submit whiteButton fade" target="_blank" href="http://www.koalalorenzo.com">See author Website</a>
        </div>
        <div id="home" class="current">
            <div class="toolbar">
                <h1>iFortune</h1>
                <a class="button flip" id="infoButton" href="#about">About</a>
            </div>
            <div class="info">
                <p><strong>Just ask the fortune:</strong></p>
            </div>
            <br><br>
            <a style="margin:0 10px;color:rgba(0,0,0,.9)" class="submit whiteButton fade" onclick="fortuna();" href="#fortune">Ask</a>
        </div>
        <div id="fortune">
            <div class="toolbar">
                <a href="#" class="back">Back</a>
                <h1>iFortune</h1>
                <a class="button flip" id="infoButton" href="#about">About</a>
            </div>
            <div class="info">
                <p><strong>Fortune said:</strong></p>
            </div>
            <div id="return" class="info">
                <a style="margin:0 10px;color:rgba(0,0,0,.9)" class="submit whiteButton fade" onclick="fortuna();" href="#fortune">Ask</a>
            </div>
        </div>
    </body>
</html>

In questo modo avrete realizzato la vostra applicazione che mostrerà un messaggio casuale ogni volta che si cliccherà sul pulsante “ASK”. Ma ancora non abbiamo finito! Dobbiamo realizzare l’icona dell’applicazione e l’immagine di caricamento. Per i più pigri ne ho realizzate due che potete scaricare e posizionare nella stessa cartella del file index.html:

Per poterla installare sul proprio dispositivo è necessario mettere on-line la pagina appena realizzata. Se avete dropbox potete utilizzare la cartella Public, ovvero la directory dove potete condividere i vostri file. Ottenuto l’indirizzo ( public link ) del file index.html visitiamo con il nostro iPhone ( con Safari ovviamente ), clicchiamo sul + nella barra di safari ed aggiungiamo il sito web alla Home. Ed ecco fatto! La vostra Web App è installata!

Spostiamoci nella home e potrete vedere e testare la vostra app:

Per chi volesse provare l’applicazione sul proprio iPhone può farlo visitando l’indirizzo: http://bit.ly/alyhsu

JQtouch ha molte funzioni più o meno utili: dalla geolocalizzazione, effetti di transizione, scelta di temi differenti e la possibilità di ampliare queste caratteristiche con le estensioni! Tra le tante c’è l’estensione che permette di rendere la vostra applicazione utilizzabile anche in modalità off-line.

Diamo sfogo alla nostra fantasia e creiamo la nostra applicazione per iPhone, iPod Touch ed iPad!