DevCorner: creiamo un QRCode con le Charts API di Google

Abbiamo già visto in passato come leggere i QR code con il nostro Android, ma non saremmo dei veri smanettoni se i suddetti codici non fossimo in grado anche di generarli. Quindi non perdiamo altro tempo e vediamo come creare in maniera davvero semplice un codice QR con il nostro smartphone.

Per farlo senza troppa difficoltà, utilizzeremo le Google Charts API: si tratta di una serie di strumenti messi a disposizione da BigG orientati principalmente a creare dei grafici da implementare in siti web; tuttavia, tra i vari tool, è presente anche uno che, sebbene deprecato, fa al caso nostro.

Basta infatti inserire un qualsiasi testo dopo

https://chart.googleapis.com/chart?chs=200x200&cht=qr&;chl=

per ottenere il QR corrispondente (ovviamente il valore 200x200 è modificabile e indica le dimensioni dell'immagine). Da qui a piazzare il tutto su un'app il passo è breve, e per facilitarlo ulteriormente utilizzeremo la libreria Smart Image View di James Smith, che ci consente di impostare l'immagine ad una ImageView partendo da un URL.

Partiamo, quindi, e per prima cosa scarichiamo la suddetta libreria (link), creiamo una nuova applicazione Android e implementiamo Smart Image View copiando il file .jar all'interno della cartella libs.

Nell'interfaccia grafica vogliamo una EditText dove poter digitare il testo da trasformare in QR, un Button per avviare le operazioni e una ImageView per ospitare il nostro codice. Tuttavia, piuttosto che una normale ImageView utilizzeremo un oggetto del tipo SmartImageView, come indicato di seguito:

Spostiamoci nel MainActivity.java e, per prima cosa, definiamo tutti gli elementi grafici necessari, implementiamo l'OnClickListener e assegniamo ad una stringa statica l'URL di Google per generare il codice QR.

public class MainActivity extends Activity implements OnClickListener{

	Button creaQr;
	EditText testoQr;
	SmartImageView qrImage;

	final static String urlGoogleChart = "http://chart.apis.google.com/chart?chs=200x200&cht=qr&chl=";
	String urlMySite;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		creaQr = (Button) findViewById(R.id.creaqr);
		testoQr = (EditText) findViewById(R.id.testoqr);
		qrImage = (SmartImageView) findViewById(R.id.qrimage);
		creaQr.setOnClickListener(this);

	}

Come avrete intuito, la nostra applicazione per funzionare avrà bisogno di Internet: per questo motivo, prima di continuare, apriamo l'AndroidManifest.xml ed aggiungiamo i permessi per accedere alla rete e per controllare lo stato della connettività.

A questo punto, scriviamo due metodi "di controllo", che ci assicurino che sia presente la connessione Internet e che la casella di testo non sia stata lasciata vuota (per fare quest'ultima operazione, controlliamo che la lunghezza del testo contenuto sia maggiore di 0)

public boolean isOnline() {
	    ConnectivityManager cm =
	        (ConnectivityManager) getSystemService(Context.CONNECTIVITY_SERVICE);
	    NetworkInfo netInfo = cm.getActiveNetworkInfo();
	    if (netInfo != null &&; netInfo.isConnectedOrConnecting()) {
	        return true;
	    }else
	    {
	    Toast.makeText(getApplicationContext(), "Non sei connesso ad internet!", Toast.LENGTH_SHORT).show();	
	    return false;
	    }
	}

	public boolean controlloStringa(String url)
	{
		if(url.trim().length()>0){
			return true;
		}
		else{
			Toast.makeText(getApplicationContext(), "Non hai digitato nulla", Toast.LENGTH_SHORT).show();
			return false;
		}

	}

Infine, non ci rimane che creare un metodo che generi effettivamente il codice QR: per farlo, aggiungiamo all'URL di Google Charts segnalato all'inizio la stringa prelevata dall'EditText ed assegniamo l'immagine creata alla nostra ImageView in modo molto semplice grazie alla libreria Smart Image View (ed, in particolare, grazie al metodo setImageUrl).

Il tutto dovrà essere eseguito al clic dell'unico bottone:

public void creaCodiceQr(String testo){
		if (isOnline()&&controlloStringa(testo)){
			qrImage.setImageUrl(urlGoogleChart+urlMySite);
		}
	}

	@Override
	public void onClick(View view) {
		// TODO Auto-generated method stub
		if (view==creaQr){
			urlMySite = testoQr.getText().toString();
			creaCodiceQr(urlMySite);
		}
	}

Tutto fatto. Sembra banale ma, sfruttando gli strumenti che il vasto web ci mette a disposizione, è davvero così semplice generare un codice QR all'interno della nostra app. Il codice completo del MainActivity.java, quindi, sarà qualcosa di simile:

package com.peppeuz.qrgenerator;

import android.app.Activity;
import android.content.Context;
import android.net.ConnectivityManager;
import android.net.NetworkInfo;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

import com.loopj.android.image.SmartImageView;

public class MainActivity extends Activity implements OnClickListener{

	Button creaQr;
	EditText testoQr;
	SmartImageView qrImage;

	final static String urlGoogleChart = "http://chart.apis.google.com/chart?chs=200x200&cht=qr&chl=";
	String urlMySite;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		creaQr = (Button) findViewById(R.id.creaqr);
		testoQr = (EditText) findViewById(R.id.testoqr);
		qrImage = (SmartImageView) findViewById(R.id.qrimage);
		creaQr.setOnClickListener(this);

	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	public boolean isOnline() {
	    ConnectivityManager cm =
	        (ConnectivityManager) getSystemService(Context.CONNECTIVITY_SERVICE);
	    NetworkInfo netInfo = cm.getActiveNetworkInfo();
	    if (netInfo != null && netInfo.isConnectedOrConnecting()) {
	        return true;
	    }else
	    {
	    Toast.makeText(getApplicationContext(), "Non sei connesso ad internet!", Toast.LENGTH_SHORT).show();	
	    return false;
	    }
	}

	public boolean controlloStringa(String url)
	{
		if(url.trim().length()>0){
			return true;
		}
		else{
			Toast.makeText(getApplicationContext(), "Non hai digitato nulla", Toast.LENGTH_SHORT).show();
			return false;
		}

	}

	public void creaCodiceQr(String testo){
		if (isOnline()&&controlloStringa(testo)){
			qrImage.setImageUrl(urlGoogleChart+urlMySite);
		}
	}

	@Override
	public void onClick(View view) {
		// TODO Auto-generated method stub
		if (view==creaQr){
			urlMySite = testoQr.getText().toString();
			creaCodiceQr(urlMySite);
		}
	}

}

Anche per questa settimana il tutorial è finito: se avete altri dubbi sulla programmazione venite a dare un'occhiata tra i topic del nostro forum, dove ci sarà qualcuno pronto ad aiutarvi! Divertitevi a generare QR per le vostre feste di Halloween nerd (?) e appuntamento al prossimo martedì!