[Phonegap] Programmiamo Direttamente Dal Cellulare

lento · 12 Maggio 2011

Ormai navigato programmatore del web (un mese tondo tondo!) e stufo di dover far tutto dal PC mega incasinato da vari SDK.

Ho deciso di scrivere un applicazione che permetta di sperimentare PhoneGap senza far uso di PC.

Per far questo bisogna installare questo programmino Start.zip

NON Scompattatelo! cambiate l'estensione in Start.apk é un programma che ho scritto per android 2.2 e va installato sul cellulare.

All'avvio il programma cerca una pagina index.html che deve tovarsi nella directory pgap

(Per capirci dovete creare una directory nella memoryCard di nome pgap.)

all'interno di questa directory deve sempre esserci un file di nome index.html.

Nella pagina index.html potete scrivere il vostro programmino o meglio ancora utilizzarla come menu per richiamare svariati

programmini posti in altre pagine HTML.

Il programma è in grado di gestire HTLM5 CSS JavaScript e le API speciali per cellulari di PhoneGap0.9.4.

Per darvi un idea allego tre file html comprendenti due esempi presi dal sito ufficiale di phoneGap cosi potete sperimentare immediatamente alcune funzionalità.

Se vi prendete la briga di fare copia e incolla potete provare tutte le funzionalità di PhoneGap senza compilare una riga.

Dove stà il trucco???

Start è un programmino PhoneGap che al posto di eseguire pagine HTLM chiuse al suo interno (Perciò non visibili ne modificabili) si limita

a lanciare una pagina posta sulla MemoryCard nella directory pgap e che si chiama index.html

Questa pagina è modificabile o estensibile con altre pagine semplicemente scrivendo con un editor testuale.

Quindi potrete scrivere calcolatrici, quiz, album fotografici, fare riprese video, suonare musica, gestire un agenda personale o modificare

quella del telofono, si può attivare telefonate ecc.

Il limite è la vostra conoscenza di HTML5 CSS JavaScript e PhoneGap.

Ci sono due lati negativi in questo modo di utilizzare PhoneGap:

1) Non sono riuscito a far terminare il programma in una qualsiasi pagina ma bisogna ripercorrere tutte le pagine fino all'origine.

oppure mettere ad ogni pagina un link diretto a index.html e in index.html aggiungere quel tasto "esci" che elimina lo storico

in modo tale che premendo una sola volta il tasto del cellulare( Back ) chiuda il programma.

2) se si utilizza localStorage di HTLM5 essendo l'URL dell'applicazione unico il database è uguale per qualsiasi applicazione index.html chiami.

Qui riporto un semplice esempio per far capire un pò il tutto.

Se si usa PhoneGap bisogna scaricare dal sito il programma e prelevare phonegap.0.9.4.js cambiate nome in phonegap.js e installatelo nella directory

pgap in modo che i programmi possano caricare la libreria.

Se non fate uso di API phonegap pohegap.js non serve

Questa è la pagina index.html che ho scritto

<!DOCTYPE HTML>
<HTML>
<HEAD>
 <meta name="viewport" content="width=320; user-scalable=yes" />
 <meta http-equiv="Content-type" content="text/html; charset=utf-8">

 <title>Index</title>
 <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
</HEAD>
<BODY>
<H4>Scegli attività</H4>
<P><A HREF="uno.html"> Uno</A></P>
<P><A HREF="due.html"> Due</A></P>
<BR>
<FORM><INPUT TYPE="button" VALUE="Esci" onClick="history.go(((-1*history.length))+1);"> </FORM>
</BODY>
</HTML>

Questa è la pagina uno.html che scarica un brano MP3 e lo gestisce suonando mettendolo in pausa o fermandolo

(esempio prelevato dal sito PhoneGap)

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   <html>
     <head>
       <title>Media Example</title>
       <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
       <script type="text/javascript" charset="utf-8">

       // Wait for PhoneGap to load
       //
       function onLoad() {
           document.addEventListener("deviceready", onDeviceReady, false);
       }

       // PhoneGap is ready
       //
       function onDeviceReady() {
           playAudio("http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3");
       }

       // Audio player
       //
       var my_media = null;
       var mediaTimer = null;

       // Play audio
       //
       function playAudio(src) {
           // Create Media object from src
           my_media = new Media(src, onSuccess, onError);

           // Play audio
           my_media.play();

           // Update my_media position every second
           if (mediaTimer == null) {
               mediaTimer = setInterval(function() {
                   // get my_media position
                   my_media.getCurrentPosition(
                       // success callback
                       function(position) {
                           if (position > -1) {
                               setAudioPosition((position/1000) + " sec");
                           }
                       },
                       // error callback
                       function(e) {
                           console.log("Error getting pos=" + e);
                           setAudioPosition("Error: " + e);
                       }
                   );
               }, 1000);
           }
       }

       // Pause audio
       // 
       function pauseAudio() {
           if (my_media) {
               my_media.pause();
           }
       }

       // Stop audio
       // 
       function stopAudio() {
           if (my_media) {
               my_media.stop();
           }
           clearInterval(mediaTimer);
           mediaTimer = null;
       }

       // onSuccess Callback
       //
       function onSuccess() {
           console.log("playAudio():Audio Success");
       }

       // onError Callback 
       //
       function onError(error) {
           alert('code: '    + error.code    + '\n' + 
                 'message: ' + error.message + '\n');
       }

       // Set audio position
       // 
       function setAudioPosition(position) {
           document.getElementById('audio_position').innerHTML = position;
       }

       </script>
     </head>
     <body onload="onLoad()">
       <a href="#" class="btn large" onclick="playAudio('http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3');">Play Audio</a>
       <a href="#" class="btn large" onclick="pauseAudio();">Pause Playing Audio</a>
       <a href="#" class="btn large" onclick="stopAudio();">Stop Playing Audio</a>
       <p id="audio_position"></p>
       <p><A HREF="index.html"> Torna al menu</A></p>
     </body>
   </html>

Questa è la pagina due.html dove si può attivare la vibrazione o il Beep o attivare un Allert.

(esempio prelevato dal sito PhoneGap)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
   <title>Notification Example</title>
   <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
   <script type="text/javascript" charset="utf-8">

   // Wait for PhoneGap to load
   //
   function onLoad() {
       document.addEventListener("deviceready", onDeviceReady, false);
   }

   // PhoneGap is ready
   //
   function onDeviceReady() {
       // Empty
   }

   // Show a custom alert
   //
   function showAlert() {
       navigator.notification.alert(
           'You are the winner!',  // message
           'Game Over',            // title
           'Done'                  // buttonName
       );
   }

   // Beep three times
   //
   function playBeep() {
       navigator.notification.beep(3);
   }

   // Vibrate for 2 seconds
   //
   function vibrate() {
       navigator.notification.vibrate(2000);
   }

   </script>
 </head>
 <body onload="onLoad()">
   <p><a href="#" onclick="showAlert(); return false;">Show Alert</a></p>
   <p><a href="#" onclick="playBeep(); return false;">Play Beep</a></p>
   <p><a href="#" onclick="vibrate(); return false;">Vibrate</a></p>
   <p><A HREF="index.html"> Torna al menu</A></p>
 </body>
</html>

Sempre dal sito PhoneGap potete scaricare gli altri esempi e provarli subito senza compilare nulla.

Se PhoneGap CSS e JavaScript vi spaventano....Niente paura! potete divertirvi a scrivere delle semplicissime paginette di solo HTLM

magari arricchite da belle fotografie.

Spero che vi divertiate e entriate a far parte del club: gli squinternauti del web!

(Gruppo fondato da Alter e rivolto a tutti quelli che vogliono divertirsi a scrivere pagine HTML un pò folli e divertenti,

unico prerequisito, non conoscere HTML CSS e JavaScript lo impareremo giocando! :lol: .)

Modificato 13 Maggio 2011 da lento

Nick_7 · 5 Dicembre 2011

Cioè installando questa app si potrebbe in linea teorica programmare sul proprio cell con l'unico problema che il tutto non sarebbe compilabile? :shifty:

lento · 7 Dicembre 2011

Cioè installando questa app si potrebbe in linea teorica programmare sul proprio cell con l'unico problema che il tutto non sarebbe compilabile?

Si.

Se ti accontenti di javascript e html, lo puoi scrivere direttamente nel cell e avviare dette pagine.

Tieni presente che nelle ultime versioni dei cellulari Android e di Phonegap per Android non tutto funziona.

(Probabilmente stavo sfruttando un baco di phonegap.)

Ho abbandonato tutta ste cosa a causa delle notevoli limitazioni di gestione dei files sul cellulare.

Attendo che lo scenario mondiale si chiarisca, nel farattempo... Simbyan e mShell!.

AdrianoTiger · 9 Febbraio 2012

Complimenti Lento!

Io mi ricordo che avevi dato questo tool già 1 anno fa. Lo provai ai tempi ma non funzionava un granché.

Ora ho riprovato e ho visto che devo usare le API di phonegap per poter scrivere apps multipiattaforma. Io inserivo sempre il progetto Symbian e pensavo me lo convertisse lui.

Visto che sei molto informato... avrei una domanda

- vorrei provare un tool che ho scritto portandolo per android e ios. Avrei bisogno di una chiave però. C'è un modo per poterlo fare senza aver bisogno di chiavi? O se non é possibile, che sia almeno gratuito?

Accedi

[Phonegap] Programmiamo Direttamente Dal Cellulare

Recommended Posts

lento

Link to comment

Condividi su altri siti

Nick_7

Link to comment

Condividi su altri siti

lento

Link to comment

Condividi su altri siti

AdrianoTiger

Link to comment

Condividi su altri siti

Please sign in to comment

Community

Attività

Informazione Importante