Archive for the 'tutorial' Category

Geocoding con Google Maps API V3: un esempio

Scopo di questo tutorial è introdurre nella maniera più semplice possibile le funzionalità geocoding offerte dalle Google Maps V3.
Supponiamo di avere una serie di indirizzi stradali dei quali non conosciamo le coordinate. Per visualizzare tali punti sulla mappa abbiamo appunto necessità di una funzione (geocoding) che, a partire da un indirizzo in formato testo, restituisce una coppia di coordinate spaziali.
Lo script che ho realizzato, ampiamente commentato, è composto da diverse parti.

La prima parte definisce e carica due array, contenenti i dati da visualizzare sulla mappa, cioè gli indirizzi stradali e le relative descrizioni

descrizioni = new Array();
indirizzi = new Array();

//popolamento vettori

indirizzi[0]=”Viale Italia 40, La Spezia, Italia”;
descrizioni[0]=”Qui sono nato e cresciuto”;
indirizzi[1]=”via pascoli 64 la spezia italia”;
descrizioni[1]=”Qui ho fatto le elementari”;
indirizzi[2]=”Via Leopardi 1 la spezia italia”;
descrizioni[2]=”Qui ho fatto le medie”;
indirizzi[3]=”via giacomo doria 2 la spezia italia”;
descrizioni[3]=”Qui ho fatto le superiori”;

Il cuore dell’applicazione è costituito dalla funzione javascipt codifica_indirizzi, che ha come parametri in ingresso un indirizzo stradale e una descrizione da visualizzare. In uscita, il risultato della funzione è un marker (ottenuto dal geocoding dell’indirizzo stradale) con la relativa descrizione. Tale funzione viene eseguita, attraverso un ciclo iterativo FOR, tante volte quanti sono gli elementi del vettore indirizzi.

function codifica_indirizzi(indirizzi, titolo)

      {
        geocoder.geocode({ ‘address’: indirizzi}, function(results, status)
           {   map.setCenter(results[0].geometry.location);
               var marker = new google.maps.Marker
                             ({ map: map,
                                 position: results[0].geometry.location,
                               title: titolo });

                                  });

             }

La funzione principale è la funzione visualizzamappa che definisce i criteri di visualizzazione della mappa (tipo ROADMAP, livello di zoom) e attiva il ciclo di scansione dei vettori indirizzi e descrizioni.

function visualizzamappa() {
                  geocoder = new google.maps.Geocoder();
                  var opzioni = {zoom: 15, mapTypeId: 
                                 google.maps.MapTypeId.ROADMAP }
                   map = new google.maps.Map(document.getElementById
                       (“map_canvas”), opzioni);

Il risultato finale lo potete trovare qui.

Piccola digressione. La funzione geocoding utilizzata si presta molto bene a codificare indirizzi inseriti dall’utente in un piccolo form come si vede in questo esempio. Ciò accade poichè la richiesta è asincrona (i dati che ci servono sono localizzati in server)

Ho avuto qualche difficoltà nella corretta visualizzazione delle descrizioni per ogni marker. Il metodo geocode() mal si accorda a soddisfare le richieste del ciclo for .  In pratica il ciclo for incrementa il contatore avanti prima che il marker potesse comparire (senza attendere cioè il risultato della richiesta fatta al server Google dalla funzione). Grazie a un suggerimento di Napolux ho focalizzato il problema e ho trovato la soluzione, “spezzando” il codice scrivendo due funzioni.

In effetti, una maniera più elegante e corretta di codificare una serie di indirizzi fissi, come quelli precaricati nel vettore, è quella di accedere al servizio di geocoding tramite una richiesta http. In questo caso avremmo però bisogno di un API Key. Magari in un altro articolo si approfondirà questo aspetto.

Annunci

Visualizzazione mappe con Google Fusion Tables

Tralasciando per un attimo le nostre piccole creazioni in javascript per sfruttare le potenzialità delle Google Maps V3,  in questo post vorrei introdurre un modo estremamente semplice per visualizzare in una Google Map dati geografici che abbiamo precedentemente immagazzinato in una tabella in formato CSV,  ODS o XLS. A tale scopo possiamo sfruttare il servizio Google Fusion Tables, cui potete accedere previa identificazione con il vostro account Gmail.  
Il sistema è davvero molto semplice:

  1. Cliccate su New Table
  2. Prelevate il file di indirizzi che volete visualizzare dal vostro PC o direttamente da Google Spreadsheet. Cliliccate su Next
  3. Selezionate l’intestazione e le colonne da includere e clicate su Next
  4.  Eventualmente scrivete alcune informazioni aggiuntive sul file
  5. Andate su Edit, Modify, e specificate quali dati devono essere considerati come Location (cambiandone il tipo da Text). Cliccate su Save
  6. Nel menu andate in Visualize poi Map e visualizzate il risultato. Potrebbe accadere, la prima volta che visualizzate la mappa, che non venga centrata subito sui vostri punti).

Un piccolo esempio, creato per l’occasione, lo potete trovare qui.

Le potenzialità del sistema sono davvero notevoli. Diventa infatti estremamente interessante lavorare con indirizzari pubblici trovati sulla rete, oppure, per fare un altro esempio, con le collezioni di POI che vengono utilizzati dai navigatori satellitari. 

Google Fusion Tables, tra l’altro, non nasce solo per visualizzare mappe geografiche ma per elaborare graficamente esempi complessi di lavoro collaborativo tanto da prevedere un merge (unione) tra i nostri dati e quelli di altre tabelle pubbliche o private. Al di là dei nostri interessi geografici dunque, consiglio uno sguardo più che approfondito a questa nuova applicazione dei Google Labs.

Layout XML per la UI Android: primi passi

Per la costruzione della nostra prima, semplicissima, applicazione Android, ci siamo affidati a Java, linguaggio potente ma al tempo stesso complicato specie per chi non ha esperienze di programmazione (e di debugging).
Fortunatamente Android consente un’altra modalità di costruzione delle  interfacce utente (UI), basate su file XML. Scopo di questo articolo è appunto quello di ottenere lo stesso risultato del tutorial precedente utilizzando un layout XML.
Torniamo per un attimo all’applicazione dell’articolo precedente. Eclipse, o meglio un suo plugin, durante l’elaborazione ha creato automaticamente un file di layout denominato main.xml. Siccome la nostra prima applicazione ha utilizzato codice java, quel file è stato ignorato.
Ecco come eseguire le opportune modifiche alla nostra prima applicazione. Andiamo nell’Eclipse Package Explorer, poi nella cartella /res/layout/ e apriamo il file main.xml.
Per vederne la struttura, clicchiamo sulla scheda main.xml posizionato in fondo alla finestra di lavoro. Sostituiamo il contenuto col seguente codice e salviamo

<?xml version=”1.0″ encoding=”utf-8″?>
 <TextView   xmlns:android=”http://schemas.android.com/apk/res/android
     android:layout_width=”fill_parent”
     android:layout_height=”fill_parent”
     android:text=”@string/hello”
  />

Adesso andiamo dentro la cartella res/values/ e apriamo il file strings.xml. Qui inseriremo tutte le stringhe di testo necessarie alla nostra U(ser) I(nterface).  Nell’articolo precedente abbiamo cominciato con la visualizzazione dei testi identificati dalle variabili hello and app_name. Potremmo ad esempio apportare le seguenti modifiche:

<?xml version=”1.0″ encoding=”utf-8″?>
 <resources>
  <string name=”hello”>Questo testo è contenuto nel file strings.xml</string>
  <string name=”app_name”>Viva Android, specie se uso XML</string>
</resources>

Adesso apriamo la classe java che abbiamo creato per il primo esercizio e “diciamole” di utilizzare il layout xml appena definito:

package com.example.helloandroid;
  import android.app.Activity;
  import android.os.Bundle;
  public class HelloAndroid extends Activity
     {   
         @Override    public void onCreate(Bundle  
          savedInstanceState)  
                                                     super.onCreate(savedInstanceState);     
                                                     setContentView(R.layout.main);   
                                                  }
      } 

Invece di passare a setContentView() un oggetto View , gli abbiamo dato il riferimento al layout XML. Tale risorsa è identificata da R.layout.main, un oggetto compilato che rappresenta il layout definito in /res/layout/main.xml. Al di là delle stringhe visualizzate, il risultato è lo stesso della prima applicazione.

Tornando al file main.xml, diamo un’occhiata agli attributi (quattro) dell’elemento TextView

xmlns:android
Dichiarazione di namespace, che associa al prefisso android lo spazio dei nomi definito all’indirizzo http://schemas.android.com/apk/res/android.

android:layout_width
definisce quanto dello schermo disponibile deve essere riservato alla View.

android:layout_height
identico a android:layout_width, solo che si riferisce all’altezza dello schermo disponibile.

android:text
Definisce il testo che TextView deve visualizzare. Nell’esempio, le stringhe non sono inserite direttamente ma vengono “pescate” dal file string.xml. E’ una buona pratica perchè, in caso di modifica dei testi da visualizzare, modificheremo quest’ultimo file anzichè modificare il file di layout.

Linkografia
1) Per la realizzazione di questo piccolo post si è attinto largamente alla documentazione ufficiale di Android relativa alle UI.
2) Per la spiegazione concettuale di cosa sia un namespace si può attingere al lemma su Wikipedia , a questa risorsa di html.it o all’ottimo documento del Prof. Fabio Vitali dell’Università di Bologna.

Inserimento markers su Google Maps V3

Dopo l’articolo nel quale abbiamo imparato a visualizzare una semplice Google Map V3, tentiamo di costruire qualcosa di più utile. L’esigenza potrebbe essere quella di visualizzare su di una mappa centrata una serie di punti particolari.
Con lo scopo di facilitare la comprensione dei termini utilizzati, ricordo che secondo le specifiche di Google Maps tutto ciò che può essere identificato da coordinate geografiche é definito overlay. Un particolare tipo di overlay è il marker, cioè il singolo punto sistemato su una mappa.
Nell’esempio che vi propongo, su una Google Map vengono visualizzati i markers relativi ai luoghi dove ho abitato io e alcuni elementi della mia famiglia. Al passaggio del mouse su ogni marker viene visualizzato il tipo di scuola.
Prima  di cominciare abbiamo bisogno delle coordinate dei punti che desideriamo visualizzare. A tale scopo o annotiamo i dati forniti dal nostro gps oppure utilizziamo applicazioni di geocoding, in grado di estrarre le coordinate da un indirizzo. Possiamo far riferimento a servizi come http://mygeoposition.com/ .

Una volta ottenuti i dati, si tratta di “passarli” al nostro codice. La scelta che ho fatto è stata quella di caricare i dati in tre vettori (array), uno per le latitudini, uno per le longitudini e uno per le descrizioni dei markers.
In fase di visualizzazione, i dati dei vettori verranno letti attraverso un ciclo iterativo for.

var i = 0;
for (i=0; i<lat[1].length; i++)
{
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat[i], long[i]),
map: map, title: descr[i] });
}

Il risultato lo trovate qui mentre qui sotto potete esaminare un estratto del codice usato.

<html>
<head>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″/>

<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?
                 sensor=false”></script>
<script type=”text/javascript”>

function carica_variabili() {

//definizione coordinate su cui centrare la mappa
var lat_centro = “44.114773”;
var long_centro = “9.8517”;

//inizializzazione vettori
var lat = new Array();
var long = new Array();
var descr = new Array();

//popolamento vettori. Per aggiungere punti è sufficiente inserire una nuova terna di
// valori:  lat[4], long[4], descr[4] e cosi’ via

lat[0] = “44.111206”;
long[0] = “9.834749”;
descr[0] = “Qui ho abitato fino al 1990”;

lat[1] = “44.117701”;
long[1] = “9.871722”;
descr[1] = “Qui ho abitato fino al 2000”;

lat[2] = “44.113025”;
long[2] = “9.843195”;
descr[2] = “Qui abita mia zia Maria”;

lat[3] = “44.118320”;
long[3] = “9.846319”;
descr[3] = “Qui abita mia sorella”;

//Opzioni della mappa: zoom livello 14, centrata su un punto particolare,
//modalità IBRIDA

var Opzioni = {
        zoom: 14, center: new google.maps.LatLng(lat_centro, long_centro),
        mapTypeId: google.maps.MapTypeId.HYBRID,
       scaleControl: false    }

var map = new google.maps.Map(document.getElementById(“map_canvas”), Opzioni);

//ciclo FOR per la lettura dei valori dei vettori e relativa visualizzazione su
//mappa

var i = 0;
for (i=0; i<lat[1].length; i++)
    {  var marker = new google.maps.Marker({
       position: new google.maps.LatLng(lat[i], long[i]),
      map: map, title: descr[i] });
    }

}
</script>
</head>

<body style=”margin:5px; padding:2px;” onload=”carica_variabili()”>

<div id=”map_canvas” style=”width: 60%; height: 60%;”></div>

</body>
</html>

Linkografia
@ Maps API V3 Overlays  (Google Code – inglese)
@ Esempio visualizzazione markers singolo (Google Code – inglese)

Installazione AVD e prima applicazione Android

In questo articolo cominceremo a familiarizzare con l’emulatore Android e scriveremo la nostra prima semplicissima applicazione.

Prima di lanciare l’emulatore, è necessario prima creare una AVD (Android Virtual Machine). Che cos’è una AVD? E’ un insieme di specifiche che ci permette di emulare un dispositivo Android anzichè un altro, diverso per configurazione hardware (la tastiera, la memoria, la presenza di una fotocamera, ecc.), la forma (skin) del dispositivo, ed altro ancora. Naturalmente possiamo creare tutti gli AVD che desideriamo, uno per ogni dispositivo da “mimare”.

Per creare un AVD usiamo uno dei tools forniti da Android SDK.

Apriamo un prompt di sistema, ed eseguiamo la riga di comando:

android create avd --target 2 --name ilmioprimoavd
Alla domanda “Do you wish to create a custom hardware profile?” premete Invio per rispondere di no.

Questo è tutto. Abbiamo il nostro AVD denominato ilmioprimoavd. Adesso siamo pronti per creare un nuovo progetto Android.

Apriamo Eclipse, selezionamo File > New > Project.
Selezioniamo “Android Project” e clicchiamo su Next.
Inseriamo i dettagli del progetto come nella figura seguente:

Nella sezione che segue qualche nota sul significato dei diversi campi. Per adesso potete anche prendere tutto per buono, saltare la parte che segue e andare avanti

---------------------------- cut here -------------------------------------------------

Project Name: il nome della directory che conterrà i file del progetto.
Application Name: il nome dell’applicazione che apparirà sul nostro dispositivo Android.
Package Name: il significato sarà certamente chiaro a chi ha familiarità con i packages del linguaggio Java. Per semplificare,  si tratta di un namespace, di un “contenitore” dove è contenuto tutto il codice. Il nome del package deve essere univoco tra tutti i packages installati sul sistema Android; per questa ragione è molto importante usare una codifica standard del tipo domain-style. L’esempio proposto utilizza il namespace “com.tutorial“, dedicato appunto al codice che scriveremo durante i nostri tutorial. Quando saremo in grado di scrivere le nostre applicazioni, sarà opportuno utilizzare namespace appropriati (es. euripide.gps.vicinoame dove  lo sviluppatore di nome Euripide  includerà tutte le versioni dell’applicazione “Vicinoame” che sfrutta il rilevatore GPS di Android).
Create Activity: campo opzionale che identificherà la sottoclasse Activity. Per ora vi basti sapere questo.
Min SDK Version: specifica il livello minimo della versione API richiesta dalla nostra applicazione e ne definisce la compatibilità col nostro dispositivo. Se l’applicazione richiede un API Level superiore a quello supportato dal dispositivo, l’applicazione non sarà installata. La compatibilità verso il basso sarò invece assicurata.

---------------------------- cut here -------------------------------------------------

Cliccate su Finish. Il progetto è pronto ed è visibile nel Package Explorer sulla sinistra (vedi figura).

Aprite il file VivaAndroid.java, presente in src>com.tutorials.prima_applicazione.  Questo il codice creato:

package com.tutorials.prima_applicazione;
 import android.app.Activity;
 import android.os.Bundle;
 public class VivaAndroid extends Activity
  {
   /** Called when the activity is first created. */
   @Override
   public void onCreate(Bundle savedInstanceState)

    {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.main);
    }
  }

Per il momento non ci preoccupiamo del significato delle istruzioni, che comunque potete cercare nell’apposita sezione reference della guida per sviluppatori Android. Limitiamoci a lavorate sul codice proposto apportando le seguenti modifiche:

package com.tutorials.prima_applicazione;
 import android.app.Activity;
 import android.os.Bundle;
 import android.widget.TextView;
 public class VivaAndroid extends Activity
 {
  /** Called when the activity is first created. */
  @Override
  public void onCreate(Bundle savedInstanceState)

   {
    super.onCreate(savedInstanceState);
    TextView tv = new TextView(this);
    tv.setText("Questa è la mia prima applicazione   
               Android!!!");
    setContentView(tv);
   }
}

Non vi resta che andare nel menu Run e selezionare “Android application“. Eclipse compilerà il file java e lo passerà all’emulatore per il risultato:

Links utili
@ Hello World (dalla guida ufficiale per sviluppatori Android)
@ Descrizione della classe TextView e del metodo setText (dalla guida ufficiale per sviluppatori)
@ Un breve tutorial video (inglese) che riprende i contenuti di questo post (nel video l’AVD non viene creato a riga di comando ma direttamente su Eclipse)

Applicazioni per Android: predisporre e configurare l’ambiente di sviluppo

 Android è il sistema operativo per dispositivi mobili più citato del momento. Per chi desidera cimentarsi con lo sviluppo di applicazioni, ecco il primo di alcuni tutorials.

Le istruzioni che seguono riguardano l’installazione di ambiente e tools Android SDK (Android Software Development Kit) su S.O. Windows.
La prima cosa da fare è naturalmente quella di scaricare il pacchetto SDK, che potete trovare qui. Una volta scompattato il file, troverete i files nella cartella 

android-sdk-windows

Per comodità, può essere rinominata in ‘android‘ e collocata nella root

c:\android

Per cominciare, cliccare su Setup. L’applicazione tenterà di collegarsi ad Internet per scaricare il resto dei files.

Può capitare che subito venga visualizzato l’errore

Failed to fetch URL https://dl-ssl.google.com/android/repository/repository.xml

In questo caso cliccate su “Settings” (menu a sinistra) e mettete il segno di spunta su:

Force https://… sources to be fetched using http://…

Fatto ciò, tornate su “Available Packages” e premete nuovamente il tasto  “Refresh”.

Tutti gli strumenti di sviluppo (debugger, emulatore Android, ecc.) sono contenuti all’interno della cartella

c:\android\tools

E’ opportuno, sotto windows, impostare il percorso tra le variabil di ambiente, in modo da poter lanciare i vari tools da riga di comando senza ogni volta scrivere l’intero percorso.

Per far ciò, basta cliccare col tasto destro su Risorse del Computer (su Windows XP) o Computer (su Vista), Proprietà, Avanzate, Variabili di Ambiente, cliccare due volte su Path e aggiungere c:\android\tools dopo averlo fatto precedere da “;“.

Il passo successivo è installare Eclipse, l’ambiente di sviluppo con l’Android Development Tools (ADT) Plugin. Il pacchetto da scaricare lo potete trovare qui

Il pacchetto da scaricare è  Eclipse IDE for Java Developers (92 MB).
Una volta installato il software, è necessario fare il download dell’ADT plugin ed installarlo nell’ambiente Eclipse.

Questi i passi da seguire:

  1. Lanciate Eclipse.  Vi sarà chiesto il nome del workspace dove salvare le nostre applicazioni: c:\android\eclipseworkspace e selezionare Help, poi Install New Software
  2. Cliccare su Add
  3. Inserire un nome nel campo “Name“. Nel campo “Location” inserire  https://dl-ssl.google.com/android/eclipse/
  4. Cliccare su OK
  5. Tornando nella sezione “Available Software View“, dovreste ora vedere “Developer Tools“. Spuntare la checkbox (vedrete le voci Android DDMS e Android Development Tools). Cliccate su Next.
    Le due voci appariranno anche nella sezione “Install Details“. Cliccate su Next per accettare i termini della licenza, poi cliccate su Finish. Al messaggio di Warning (“You are installing software that contains unsigned content. The authenticity or validity of this software cannot be established. Do you want to continue with the installation?“) non vi preoccupate e date l’OK.

Adesso è necessario installare l’ADT plugin:

  1. Riavviate Eclipse, Verificate che il workspace sia quello inserito al passo 2 del paragrafo precedente.
  2. Selezionate Window, Preferences
  3. Selezionate Android dal pannello a sinistra
  4. Cliccate su Browse e andate nella directory dove si trova SDK (C:\android)
  5. Cliccate Apply, poi OK

L’ambiente di sviluppo a questo punto è pronto e configurato, vedremo in seguito come creare la nostra prima semplice applicazione. Buon lavoro!


Annunci
Creative Commons License
Questo/a opera è pubblicato sotto una Licenza Creative Commons.

Addthis

AddThis Social Bookmark Button

Flickr Photos


%d blogger hanno fatto clic su Mi Piace per questo: