7/27/2011



Explicamos cómo guardar la configuración de nuestra aplicación Android en un fichero xml y cómo leerla posteriormente. Para ello usaremos SharedPreferences de Android. Mostramos cómo usar el evento OnDestroy para guardar la configuración y el evento OnStart para cargarla. Mostramos el código fuente Java en Eclipse necesario para usar SharedPreferences y un ejemplo de una aplicación completa que usa esta clase: AjpdSoft Monitor Wifi Android.




Para qué es necesario usar un archivo de configuración en aplicaciones Android

Cuando desarrollamos aplicaciones para dispositivos Android, normalmente suelen usarse valores que el usuario ha de marcar o escribir, por ejemplo un correo electrónico, un número de teléfono, marcar algún CheckBox, o algún RadioButton. En estos casos es recomendable (para que la aplicación quede más "profesional") guardar estos valores en un fichero de configuración para que al abrir la aplicación el usuario tenga los últimos datos introducidos. Esto, en aplicaciones para dispositivos Android, es importante, pues es muy incómodo para el usuario volver a introducir los datos, normalmente los últimos datos que ha introducido suelen ser los que usará habitualmente.
Obviamente, este tipo de ficheros de configuración sólo será necesario en estos cosos en lo que desarrollemos una aplicación Android que requiera de escribir y marcar opciones por parte del usuario, si no es así no nesitaremos tales ficheros.
En este artículo explicaremos cómo guardar la configuración de una aplicación Android en un fichero XML usando la clase que incorpora Android llamada SharedPreferences. Veremos que es sencillo y el uso es muy parecido al de los ficheros INI de configuración de aplicaciones de Windows.
Si lo que queremos es guardar datos tipo clientes, proveedores, contactos, facturas, productos, etc. con varios campos como teléfono, dirección, precio, etc. usaremos bases de datos SQLite, como explicamos en este artículo:

Requisitos para hacer programas para dispositivos Android

Antes de continuar, es recomendable revisar el siguiente manual, donde explicamos desde cero (paso a paso) como preparar un equipo Linux para desarrollar aplicaciones Android:

Clase SharedPreferences de Android

IMPORTANTE: para poder usar la clase SharedPreferences en Android debemos añadir al principio de nuestra clase principal el import:
import android.content.SharedPreferences;
La clase SharedPreferences de Android permite a los desarrolladores usar sus métodos, funciones y procedimientos para leer y escribir en un fichero de configuración de aplicación Android. Las aplicaciones Android permiten guardar sus datos de configuración en uno (o varios) ficheros de tipo XML, ubicados dentro de la carpeta de instalación de la aplicación, en la subcarpeta shared_prefs.
Esta clase proporciona opciones para permitir elegir el método de seguridad para el acceso a estos archivos de configuración. Las posibilidades son:
  • MODE_PRIVATE: sólo la aplicación podrá leer y escribir datos de configuración en el fichero XML.
  • MODE_WORLD_READABLE: sólo la aplicación podrá escribir datos de configuración, el resto de aplicaciones del dispositivo Android podrá leer los datos de configuración pero no modificarlos.
  • MODE_WORLD_WRITEABLE: todas las aplicaciones del dispositivo Android podrán leer y escribir datos de configuración en el fichero XML.
  • MODE_MULTI_PROCESS: no suele usarse, puede servir cuando la aplicación tiene múltiples procesos, para "comunicación" entre ellos.

 

Leer valores de un fichero de preferencias de configuración de una aplicación Android

Los métodos que proporciona la clase SharedPreferences para leer los datos del fichero de configuración XML son:
  • contains: comprueba si existe una preferencia en el fichero XML.
  • getAll: obtiene todos los valores de todas las preferencias guardadas en el fichero XML.
  • getBoolean: obtiene una preferencia de tipo Booleano (true, false).
  • getFloat: obtiene una preferencia de tipo Float (numérico).
  • getInt: ontiene una preferencia de tipo Int (entero).
  • getLong: obtiene una preferencia de tipo Long (entero largo).
  • getString: obtiene una preferencia de tipo String (texto).
  • getStringSet: obtiene una preferencia de tipo StringSet (conjunto de cadenas).
  • registerOnSharedPreferenceChangeListener: registra una devolución de llamada que se invoca cuando ocurre un cambio en las preferencias.
  • unregisterOnSharedPreferenceChangeListener: anula el registro de una devolución de llamada anterior.
Hemos destacado en negrita las más usuales. Un ejemplo de lectura de un valor de tipo String en el fichero de preferencias "ficheroconfiguracion.xml" puede ser:
      String valorLeido;
      SharedPreferences prefs =
          getSharedPreferences("ficheroconfiguracion",
              Context.MODE_PRIVATE);    
      valorLeido = prefs.getString("Dato guardado", 
          "Prueba lectura xml configuración"); 
 
Explicamos el código anterior:
1. En primer lugar declaramos una variable de tipo String que será en la que guardaremos el valor leído del fichero de configuración.
2. Creamos la variable de tipo SharedPreferences haciendo una llama a "getSharedPreferences", le pasamos como parámetro a este procedimiento el nombre del fichero de configuración, en nuestro caso "ficheroconfiguracion" y el tipo de acceso "MODE_PRIVATE".
3. Por último llamamos al método "getString" para leer el valor de la preferencia "Dato guardado", si no encuentra este valor devolverá el valor por defecto "Prueba lectura xml configuración".
De esta forma podremos leer cualquier valor y de cualquier tipo contenido en un fichero de preferencias de nuestra aplicación Android.

Guardar valores de configuración en un fichero de preferencias de una aplicación Android

Los métodos que proporciona la clase SharedPreferences para guardar los datos en el fichero de configuración ó preferencias XML son:
  • apply: guarda los cambios realizados en las preferencias cuando el objeto SharedPreferencias está en modo edición.
  • clear: elimina todos los valores de las preferencias.
  • commit: guarda los cambios realizados en las preferencias.
  • putBoolean: guarda un valor de tipo booleano (true, false).
  • putFloat: guarda un valor de tipo Float.
  • putInt: guarda un valor de tipo Int.
  • putLong: guarda un valor de tipo Long.
  • putString: guarda un valor de tipo String.
  • puntStringSet: guarda un valor de tipo StringSet.
  • remove: elimina el valor de una preferencia.
Hemos destacado en negrita las más usuales. Un ejemplo de escritura de un valor de tipo String en el fichero de preferencias "ficheroconfiguracion.xml" puede ser:

   SharedPreferences prefs = 
      getSharedPreferences("ficheroconfiguracion", 
       Context.MODE_PRIVATE);
   SharedPreferences.Editor editor = prefs.edit();
   editor.putString("Mail", txtMail.getText().toString());
   editor.commit();
 
Explicamos el código anterior:
1. Creamos la variable de tipo SharedPreferences haciendo una llama a "getSharedPreferences", le pasamos como parámetro a este procedimiento el nombre del fichero de configuración, en nuestro caso "ficheroconfiguracion" y el tipo de acceso "MODE_PRIVATE".
2. Declaramos una variable (objeto) de tipo SharedPreferences.Editor, necesario para guardar cambios en el fichero de preferencias.
3. Llamamos al método "putString" para guardar en la preferencia "Mail" el valor contenido en el componente visual TextEdit "txtMail".
4. Guardamos los cambios llamando al método "commit" del Editor.
De esta forma podremos guardar cualquier valor y de cualquier tipo en un fichero de preferencias para uso de nuestra aplicación Android.

En qué eventos usar la clase SharedPreferences de Android onDestroy, onStart

Esta clase puede ser usada en cualquier parte y momento de la aplicación, puede usarse al pulsar un botón o en otros eventos. Pero lo normal, puesto que se trata de parámetros de configuración de la aplicación, es usar los eventos onStart y onDestroy de la aplicación Android para leer y guardar respectivamente en el fichero de preferencias.
Por ejemplo, cuando el usuario (o el propio disositivo Android) cierra la aplicación por que haya finalizado su uso (onDestroy), lo normal es guardar en este momento los parámetros de configuración. De la misma forma, cuando el usuario inicia la aplicación para usarla (onStart), en este momento, la aplicación leerá y cargará los parámetros de configuración. A continuación vamos a explicar cómo programar estos dos eventos para una aplicación Android.
Como ejemplo para entender SharedPreferences, supongamos una aplicación que muestra el estado de conexión a la Wifi (IP, estado, SSID, BSSID, MAC) y permite al usuario guardar los datos obtenidos en un fichero de texto. En dicha aplicación permitimos al usuario elegir el nombre del fichero y la ubicación: en tarjeta de memoria (SDCard) o en la carpeta de la aplicación. En el ejemplo queremos guardar el valor del nombre del fichero (TextEdit txtFichero) y el valor de la ubicación (CheckBox opUbicacionFichero). De esta forma, cuando el usuario cierre la aplicación quedarán guardados estos datos y cuando abra la aplicación no tendrá que volver a escribir el nombre del fichero ni el tipo de ubicación. La aplicación en funcionamiento:
En qué eventos usar la clase SharedPreferences de Android onDestroy, onStart
Guardaremos en el fichero de preferencias "AjpdSoftMonitorWifi.xml" el valor "wifi.txt" (introducido por el usuario) y el valor del check SD.
En primer lugar añadiremo el los imports la línea:
import android.content.SharedPreferences;
Crearemos un prodecimiento llamado guardarConfiguracion que escribirá los parámetros de configuración de nuestra aplicación en el fichero de preferencias:

  //guardar configuración aplicación Android usando SharedPreferences
  public void guardarConfiguracion()
  {
    SharedPreferences prefs = 
        getSharedPreferences("AjpdSoftMonitorWifi", Context.MODE_PRIVATE);
    SharedPreferences.Editor editor = prefs.edit();
    editor.putBoolean("GuardarSDCard", opUbicacionFichero.isChecked());
    editor.putString("Fichero", txtFichero.getText().toString());
    editor.commit();
  }
 
El procedimiento cargarConfiguracion para leer el fichero de preferencias y asignar los valores del txtFichero y el opUbicacionFichero será:

  //cargar configuración aplicación Android usando SharedPreferences
  public void cargarConfiguracion()
  {     
    SharedPreferences prefs = 
        getSharedPreferences("AjpdSoftMonitorWifi", Context.MODE_PRIVATE);
    txtFichero.setText(prefs.getString("Fichero", "wifi.txt"));
    opUbicacionFichero.setChecked(prefs.getBoolean("GuardarSDCard", true));    
  }
 
A continuación crearemos los eventos onStart (al iniciar la aplicación Android) y onDestroy (al cerrar la aplicación Android):

    //en el evento "Cerrar aplicación" guardar los datos en fichero xml
    @Override
    public void onDestroy()
    {
      super.onDestroy();
      guardarConfiguracion();
    }
    
    //en el evento "Abrir aplicación" leemos los datos de configuración del fichero xml
    @Override
    protected void onStart() 
    {
      super.onStart();
      cargarConfiguracion();
    }    

Aquí podéis ver el código fuente completo de la aplicación.
 

Formato del fichero XML creado por SharedPreferences

El fichero xml resultante de usar SharedPreferences tendrá el siguiente formato (mostramos el contenido de un fichero de ejemplo de una aplicación real):



wifi.txt


Como se puede observar, SharedPreferences de Android guardará cada valor de preferencia en una línea, por un lado el keyvalue (identificador de clave, en el ejemplo "Fichero" y "GuardarSDCard") y por otro lado el value (valor de cada clave, en el ejemplo "wifi.txt" y "true"). También guardará el tipo de dato de la clave: boolean, string, int, long, float.
En el emulador de Eclipse, el fichero puede verse y consultarse en:
/data/data/MonitorWifi.wifi/shared_prefs/AjpdSoftMonitorWifi.xml
Formato del fichero XML creado por SharedPreferences
Este fichero será eliminado automáticamente cuando se desintale la aplicación.
 

Código fuente completo de una aplicación Android que guarda y lee valores del fichero de preferencias

A continuación mostramos el código fuente completo de la aplicación Android AjpdSoft Monitor Wifi Android que obtiene y muestra datos de la conexión Wifi de nuestro dispositivo. En esta aplicación usamos la clase SharedPreferences para guardar y cargar algunos valores de configuración:
  • Contenido del fichero "MonitorWifi.java"

package MonitorWifi.wifi;

import android.app.Activity;
import android.content.BroadcastReceiver;
import android.content.Context;
import android.content.Intent;
import android.content.IntentFilter;
import android.content.SharedPreferences;
import android.net.ConnectivityManager;
import android.net.NetworkInfo;
import android.net.wifi.WifiInfo;
import android.net.wifi.WifiManager;
import android.os.Bundle;
import android.os.Environment;
import android.widget.TextView;
import android.widget.Button;
import android.view.View;
import java.io.OutputStreamWriter;
import android.widget.Toast;
import android.widget.EditText;
import java.io.File;
import java.io.FileOutputStream;
import android.widget.CheckBox;



public class MonitorWifi extends Activity 
{ 
 TextView textEstado, textIP, textSSID, textSIDOculto; 
 TextView textBSSID, textMAC, textVelocidad, textRSSI;
 EditText txtFichero;
 CheckBox opUbicacionFichero;
 
 private Button buttonRefrescar;
 private Button buttonCerrar; 
 private Button buttonGuardar;
 private String infoIP, infoSSID, infoBSSID, 
     infoSSIDOculto, infoEstado, infoRSSID, 
     infoMAC, infoVelocidad; 
 
    @Override
    public void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        //Asignamos a cada objeto visual creado a su 
        //respectivo elemento de main.xml
        textEstado = (TextView)findViewById(R.id.txtEstado);
        textIP = (TextView)findViewById(R.id.txtIP);
        
        textSSID = (TextView)findViewById(R.id.txtSSID);
        textSIDOculto = (TextView)findViewById(R.id.txtSSIDOculto);        
        textBSSID = (TextView)findViewById(R.id.txtBSSID);        
        textMAC = (TextView)findViewById(R.id.txtMAC);
        textVelocidad = (TextView)findViewById(R.id.txtVelocidad);
        textRSSI = (TextView)findViewById(R.id.txtRSSI);
        buttonRefrescar = (Button) findViewById(R.id.btRefrescar);
        buttonCerrar = (Button) findViewById(R.id.btCerrar);
        buttonGuardar = (Button) findViewById(R.id.btGuardar);
        txtFichero   = (EditText) findViewById(R.id.txtFichero);  

        opUbicacionFichero = (CheckBox) findViewById(R.id.opUbicacionFichero);
        
        //Botón para volver a comprobar el estado de la wifi
        buttonRefrescar.setOnClickListener(new View.OnClickListener() 
        {
          public void onClick(View v) 
          {
            //Volver a comprobar datos wifi               
         mostrarEstadoWifi();
          }
        });     
        
        //Botón para guardar datos en fichero
        buttonGuardar.setOnClickListener(new View.OnClickListener() 
        {
          public void onClick(View v) 
          {
           //si el usuario selecciona Guardar en Tarjeta SDCard
           if (opUbicacionFichero.isChecked()) 
           {
               String estadoSDCard = Environment.getExternalStorageState();
               boolean almacenamientoExternoDisponible = false;
               boolean almacenamientoExternoEscribible = false;

               if (Environment.MEDIA_MOUNTED.equals(estadoSDCard)) 
               {                   
                almacenamientoExternoDisponible = 
                 almacenamientoExternoEscribible = true;
               } 
               else if (Environment.MEDIA_MOUNTED_READ_ONLY.equals(estadoSDCard)) 
                  {                  
                 almacenamientoExternoDisponible = true;
                 almacenamientoExternoEscribible = false;
                  } 
               else 
               {
                 almacenamientoExternoDisponible = 
                  almacenamientoExternoEscribible = false;
                  }           
               
               if (almacenamientoExternoEscribible == true & 
                 almacenamientoExternoDisponible == true)
               {          
                 String carpetaSDCard = 
                  Environment.getExternalStorageDirectory().getAbsolutePath();
                    File carpetaWifi = new File (carpetaSDCard + "/MonitorWifi");
                   carpetaWifi.mkdirs();
                 String rutaFichero = carpetaWifi + File.separator + 
                     txtFichero.getText().toString();             
                 try
                 {        
                    //NO FUNCIONA AÚN, USAR
                  //FALTA CODIGO PARA GUARDAR EN FICHERO
                  Toast.makeText(getApplicationContext(), 
                     "Datos Wifi guardados en fichero: " + 
                     rutaFichero, Toast.LENGTH_SHORT).show();
                 }
                 catch (Exception ex)
                 {
                   //error, mostrar mensaje
                Toast.makeText(getApplicationContext(), 
                  "Error: " + ex.getMessage() + " " + rutaFichero,
                  Toast.LENGTH_SHORT).show();
                 }
               }
               else
               {
                Toast.makeText(getApplicationContext(), 
                     "Error: tarjeta SD no disponible o no escribible", 
                     Toast.LENGTH_SHORT).show();
               }           
           }
           else
           {
                 //para guardar en carpeta de aplicación
                 String rutaFichero = txtFichero.getText().toString();             
                 try
                 {        
                OutputStreamWriter fichero =
                       new OutputStreamWriter(
                           openFileOutput(rutaFichero, 
                             Context.MODE_WORLD_WRITEABLE));               
                   
                   fichero.write(infoIP + infoSSID + infoBSSID + 
                     infoSSIDOculto + infoEstado + infoRSSID + 
                     infoMAC + infoVelocidad);
                   fichero.flush();
                   fichero.close();               
                   Toast.makeText(getApplicationContext(), 
                     "Datos Wifi guardados en fichero: " + 
                     rutaFichero, Toast.LENGTH_SHORT).show();
                 }
                 catch (Exception ex)
                 {
                   //error, mostrar mensaje
                Toast.makeText(getApplicationContext(), 
                  "Error: " + ex.getMessage() + " " + rutaFichero,
                  Toast.LENGTH_SHORT).show();
                 }               
           }
          }
        });  

        
        //Botón para cerrar aplicación Android
        buttonCerrar.setOnClickListener(new View.OnClickListener() 
        {
          public void onClick(View v) 
          {
         finish();
          }
        });  
        
        //llamamos al método para mostrar los datos de la wifi
        mostrarEstadoWifi();
        
        this.registerReceiver(this.myWifiReceiver,
          new IntentFilter(ConnectivityManager.CONNECTIVITY_ACTION));

    }
    
    //en el evento "Cerrar aplicación" guardar los datos en fichero xml
    @Override
    public void onDestroy()
    {
      super.onDestroy();
      guardarConfiguracion();
    }
    
    //en el evento "Abrir aplicación" leemos los datos de 
    //configuración del fichero xml
    @Override
    protected void onStart() 
    {
      super.onStart();
      cargarConfiguracion();
    }    

    //Evento que se produce si cambia el estado de conexión de la Wifi
    //con este evento, los datos de conexión se actualizarán en la aplicación
    //automáticamente al cambiar el estado de la Wifi
    private BroadcastReceiver myWifiReceiver = new BroadcastReceiver()
    {
  @Override
  public void onReceive(Context arg0, Intent arg1) 
  {
   // Auto-generated method stub
   NetworkInfo networkInfo = 
    (NetworkInfo) arg1.getParcelableExtra(
      ConnectivityManager.EXTRA_NETWORK_INFO);
   if(networkInfo.getType() == ConnectivityManager.TYPE_WIFI)
   {
     mostrarEstadoWifi();
   }
  }
    };
    
    //lee el estado de la Wifi en dispositivos Android y muestra el resultado
    private void mostrarEstadoWifi()
    {
     
     ConnectivityManager mAdministradorConexion = 
      (ConnectivityManager) getSystemService(CONNECTIVITY_SERVICE);
     NetworkInfo mInformacionRed = 
      mAdministradorConexion.getNetworkInfo(ConnectivityManager.TYPE_WIFI);
     WifiManager mAdministradorWifi = 
      (WifiManager)getSystemService(Context.WIFI_SERVICE);
  WifiInfo mInformacionWifi = mAdministradorWifi.getConnectionInfo();  
  
     if (mInformacionRed.isConnected())
     {
      int myIp = mInformacionWifi.getIpAddress();        
      int intMyIp3 = myIp/0x1000000;
      int intMyIp3mod = myIp%0x1000000;        
      int intMyIp2 = intMyIp3mod/0x10000;
      int intMyIp2mod = intMyIp3mod%0x10000;        
      int intMyIp1 = intMyIp2mod/0x100;
      int intMyIp0 = intMyIp2mod%0x100;
      
            infoIP = "IP: " + String.valueOf(intMyIp0)
              + "." + String.valueOf(intMyIp1)
              + "." + String.valueOf(intMyIp2)
              + "." + String.valueOf(intMyIp3);
      infoEstado = "Estado: Conectado a red Wifi";
      infoVelocidad = String.valueOf("Velocidad: " + 
        mInformacionWifi.getLinkSpeed()) + " " + 
           WifiInfo.LINK_SPEED_UNITS;
      infoSSID = "SSID: " + mInformacionWifi.getSSID();
      infoBSSID = "BSSID: " + mInformacionWifi.getBSSID();
      infoRSSID = "RSSI: " + mInformacionWifi.getRssi();
      infoMAC = "MAC: " + mInformacionWifi.getMacAddress();
      if (!mInformacionWifi.getHiddenSSID())      
              infoSSIDOculto = "SID oculto: No";      
        else
              infoSSIDOculto = "SID oculto: Sí";
      
      textIP.setText(infoIP);      
      textEstado.setText(infoEstado);
         textVelocidad.setText(infoVelocidad);     
      textSSID.setText(infoSSID);
            textSIDOculto.setText(infoSSIDOculto);
      textBSSID.setText(infoBSSID);
      textRSSI.setText(infoRSSID);
      textMAC.setText(infoMAC);      
     }
     else
     {
            infoIP = "IP: --";
            infoEstado = "Estado: No conectado a Red Wifi";
            infoVelocidad = "Velocidad: --";
            infoSSID = "SSID: --";
            infoSSIDOculto = "SSID oculto: --";
            infoBSSID = "BSSID: --";
            infoRSSID = "RSSI: --";
            infoMAC = "MAC: --";
            
      textEstado.setText(infoEstado);
      textIP.setText(infoIP);
      textVelocidad.setText(infoVelocidad);
      textSSID.setText(infoSSID);
      textSIDOculto.setText(infoSSIDOculto);
      textBSSID.setText(infoBSSID);      
      textRSSI.setText(infoRSSID);
      textMAC.setText(infoMAC);
     }     
    }
    
    
    //guardar configuración aplicación Android usando SharedPreferences
    public void guardarConfiguracion()
    {
     SharedPreferences prefs = 
      getSharedPreferences("AjpdSoftMonitorWifi", Context.MODE_PRIVATE);
      
     SharedPreferences.Editor editor = prefs.edit();
     editor.putBoolean("GuardarSDCard", opUbicacionFichero.isChecked());
     editor.putString("Fichero", txtFichero.getText().toString());
     editor.commit();
    }

    //cargar configuración aplicación Android usando SharedPreferences
    public void cargarConfiguracion()
    {     
      SharedPreferences prefs = 
          getSharedPreferences("AjpdSoftMonitorWifi", Context.MODE_PRIVATE);
      
      txtFichero.setText(prefs.getString("Fichero", "wifi.txt"));
      opUbicacionFichero.setChecked(prefs.getBoolean("GuardarSDCard", true));    
    }
}
  • Contenido fichero "main.xml":





 


    
 



 



 



 


    
 



 



 
    

    
 
 
 
  
     
    
    
    
      android:hint="Guardar en tarjeta SD"
    
    
  • Contenido fichero "AndroidManifest.xml":





    
        
            
                
                
            
        

        
    
 
 
 
    

  La descarga del código fuente completo y el fichero apk de esta aplicación Android (en Eclipse):

 

Artículos relacionados


Créditos

Artículo realizado íntegramente por Alonsojpd miembro fundador del proyecto AjpdSoft.

7/21/2011

Desarrollar aplicación lector de códigos de barras para Android con App Inventor

Os mostramos cómo, de forma muy sencilla y sin código Java, podemos crear una aplicación para dispositivos Android que lea códigos de barras. Para ello usaremos el API gratuita ZXing para Android. Como IDE de desarrollo para Android usaremos Google App Inventor. Publicamos el código en Google App Inventor de la aplicación AjpdSoft Lector Códigos de Barras Android.



Google App Inventor

Si no tienes conocimientos sobre Google App Inventor, es recomendable que leas el siguiente artículo donde explicamos paso a paso el entorno de desarrollo de Google App Inventor y cómo crear y compilar un proyecto:

Desarrollar aplicaciones Android con Google App Inventor de forma visual

ZXing

ZXing es un softeare de código abierto, se trata de una librería multi-formato 1D/2D para lector de código de barras implementada en Java. Permite decodificar códigos QR, Data Matrix y UPC. Permite ser usada para J2ME, J2SE, y Android.

Permite leer los siguientes tipos de códigos de barras:

  • UPC-A y UPC-E.
  • EAN-8 y EAN-13.
  • Código 39.
  • Código 93.
  • Código 128.
  • Código QR.
  • ITF.
  • Codabar.
  • RSS-14 (todas las variantes).
  • Data Matrix.
  • PDF 417 (calidad 'alpha').
  • Aztec (calidad 'alpha').

Diseño de la aplicación AjpdSoft Lector Códigos de Barras Android en Google App Inventor

Una vez creado el proyecto App Inventor, añadiremos los siguientes componentes a lo que será la interfaz gráfica de la aplicación AjpdSoft Lector Códigos de Barras Android:

  • De la paleta "Screen Arrangement" añadiremos un "VerticalArrangement": en él introduciremos dos Label.
  • De la paleta "Basic" añadiremos un Label: lo arrastraremos dentro del VerticalArrangement anterior, lo dejaremos con la propiedad "Text" vacía. En la propiedad "Height" del Label introduciremos 50 pixels. Este Label sólo servirá para que el siguiente no aparezca pegado en la parte superior pues no queda estétimente bien.
  • De la paleta "Basic" añadiremos un Label: lo arrastraremos encima del VerticalArrangement anterior. En la propiedad "Text" introduciremos el texto "Requiere el API gratuita ZXing instalada". Simplemente servirá para mostrar un texto al usuario. La propiedad "Height" introduciremos 30 pixels para que el siguiente componente no quede pegado.
  • De la paleta "Basic" añadiremos un Button: arrastraremos el Button debajo del Label anterior. Este será el botón que ejecutará el lector de códigos de barras. Pulsaremos en "Rename" y le pondremos el nombre "btLeerCodigoBarras". En la propiedad "Text" del Button introduciremos "Leer código de barras". En la propiedad "Width" seleccionaremos "Fill parent".
  • De la paleta "Screen Arrangement" añadiremos un "TableArrangement" debajo del Button anterior. Lo usuaremos para introducir un Label y un TextBox donde mostraremos el código de barras leído. Por lo tanto en la propiedad "Columns" introduciremos el valor 2. En la propiedad "Width" seleccionaremos "Fill parent".
  • De la paleta "Basic" arrastraremos un Label dentro del TableArrangement anterior (en la primera columna). En la propiedad "Text" del Label introduciremos "Código". Desmarcaremos la propiedad "Visible" para que no aparezca hasta que no se lea el código de barras (lo haremos en la ventana del editor de bloques).
  • De la paleta "Basic" arrastraremos un TextBox a la segunda columna del TableArrangement anterior, junto al Label. Cambiaremos el nombre por "txtCodigoBarras". Desmarcaremos la propiedad "Visible" para que no aparezca hasta que no se lea el código de barras (lo haremos en la ventana del editor de bloques). También desmarcaremos la propiedad "Enabled" para que el cursor no quede en este cuadro de texto, si no hacemos esto, al ejecutar la aplicación el cursor aparecerá en este cuadro y se mostrará el teclado en pantalla, algo molesto porque no lo necesitamos.
  • Si queremos añadir un logo o imagen podremos arrastrar un "Image" de la paleta Basic. Subiremos la imagen pulsando el botón "Add" de la sección "Media". Tras subir la imagen, en la propiedad "Picture" seleccionaremos la imagen subida para que aparezca en nuestra aplicación Android. En nuestro caso hemos usado un "Canvas" en vez de un "Picture" para intentar alinear la imagen al centro que, estéticamente, queda mejor.
  • Como ejemplo hemos añadido un Buton al final con el nombre "btCerrar" para que el usuario pueda cerrar la aplicación.
  • El último componente, el más importante, es un componente no visual de la paleta "Other stuff" llamado "BarcodeScanner", lo hemos nombrado como "compLectorCodigoBarras". Este componente será el que lea el código de barras conectando con el API de ZXing.

La aplicación quedaría así en el diseñador de Google App Inventor:

Diseño de la aplicación AjpdSoft Lector Códigos de Barras Android en Google App Inventor

El diseño que quedará en la aplicación Android:

Diseño de la aplicación AjpdSoft Lector Códigos de Barras Android en Google App Inventor

Editor de Bloques de la aplicación AjpdSoft Lector Códigos de Barras Android en Google App Inventor

Una vez que hayamos realizado el diseño de la aplicación pulsaremos en el botón "Open the Blocks Editor" para abrir el editor de bloques (como indicamos aquí). A continuación explicaremos los bloques (piezas del puzle) que iremos añadiendo para los botones "btLeerCodigoBarras" y "btCerrar":

1. Programaremos una acción para cuando el usuario haga clic en el botón "Leer código de barras". Lo que queremos es que se haga una llamada al componente "BarcodeScanner" para que éste, a su vez, use el API de ZXing y muestre la ventana de captura de código de barras . Para ello, en el Blocks Editor de App Inventor, en la pestaña "My Blocks", pulsaremos sobre "btLeerCodigoBarras" (nuestro botón para leer el código de barras) y seleccionaremos la pieza del puzle "btLeerCodigoBarras.Click" correspondiente al evento Click (cuando el usuario hace clic en el botón):

Editor de Bloques de la aplicación AjpdSoft Lector Códigos de Barras Android en Google App Inventor

Para indicar la acción a realizar cuando se haga clic en el botón, seleccionaremos "compLectorCodigoBarras" (componente correspondiente al BarcodeScanner), arrastraremos el "compLectorCodigoBarras.DoScan":

Editor de Bloques de la aplicación AjpdSoft Lector Códigos de Barras Android en Google App Inventor

y lo uniremos a la pieza del puzle anterior "btLeerCodigoBarras.Click":

Editor de Bloques de la aplicación AjpdSoft Lector Códigos de Barras Android en Google App Inventor

2. Ahora queremos recoger el valor devuelto por el componente "BarcodeScanner", si el usuario ha leído un código de barras, el componente debe recoger el valor de éste. Para mostrar el valor del código de barras leído añadiremos del componente "compLectorCodigoBarras" la pieza "compLectorCodigoBarras.AfterScan":

Editor de Bloques de la aplicación AjpdSoft Lector Códigos de Barras Android en Google App Inventor

Como se puede observar, al añadir la pieza "compLectorCodigoBarras.AfterScan" lleva otra pieza encajada llamada "name result", en realidad es una variable que contendrá el valor del código de barras leído.

Ahora queremos que tras la lectura del código de barras (AfterScan) el valor se muestre en nuestro TextBox (txtCodigoBarras). Para ello pulsaremos en "My Blocks", seleccionaremos "txtCodigoBarras" y arrastraremos "txtCodigoBarras.Text" (la pieza "set"):

Editor de Bloques de la aplicación AjpdSoft Lector Códigos de Barras Android en Google App Inventor

y encajaremos esta pieza en la pieza compLectorCodigoBarras.AfterScan:

Editor de Bloques de la aplicación AjpdSoft Lector Códigos de Barras Android en Google App Inventor

Como último paso nos queda indicar qué texto aparecerá en "txtCodigoBarras.Text" y queremos que sea el código de barras leído. Para ello accederemos a "My Blocks", seleccionaremos "My definitions" y veremos una nueva definición creada automáticamente al añadir el "compLectorCodigoBarras.AfterScan" llamada "result" (se le puede cambiar el nombre). Seleccionaremos esta pieza:

Editor de Bloques de la aplicación AjpdSoft Lector Códigos de Barras Android en Google App Inventor

y la arrastraremos y encajaremos en la parte derecha del "set txtCodigoBarras.Text":

Editor de Bloques de la aplicación AjpdSoft Lector Códigos de Barras Android en Google App Inventor

3. Con estos sencillos pasos ya tendríamos la aplicación AjpdSoft Lector Códigos de Barras Android operativa, ya podríamos instalarla en nuestro móvil Android, instalar ZXing y probarla y ver que ya lee un código de barras y obtiene su valor. Pero, si recordamos, hemos ocultado el Label y el TextBox que muestra el código de barras, por lo tanto el usuario no lo verá. Lo que haremos ahora será indicar a nuestra aplicación que cuando se lea el código de barras se cambie la propiedad visible a "sí" (true) de estos dos componentes, para ello en "My Blocks" seleccionaremos "Label2" (que es el Label que muestra, símplemente, el texto "Código:") y arrastraremos la pieza "set Label2.Visible":

Editor de Bloques de la aplicación AjpdSoft Lector Códigos de Barras Android en Google App Inventor

y la soltaremos y encajaremos encima de la pieza "set txtCodigoBarras.Text" (dentro de "compLectorCodigoBarras.AfterScan"). Para establecer el valor "True" (sí) a esta propiedad del Label2 accederemos a "Built-In", seleccionaremos "Logic" y arrastraremos la pieza "true" al final de la pieza "set Label2.Visible":

Editor de Bloques de la aplicación AjpdSoft Lector Códigos de Barras Android en Google App Inventor

Quedando de la siguiente forma:

Editor de Bloques de la aplicación AjpdSoft Lector Códigos de Barras Android en Google App Inventor

Repetiremos la misma operación para el caso del "set txtCodigoBarras.Visible":

Editor de Bloques de la aplicación AjpdSoft Lector Códigos de Barras Android en Google App Inventor

Y también podremos hacerlo para la propiedad "Enabled" del "txtCodigoBarras", quedando la pieza "compLectorCodigobarras.AfterScan":

Editor de Bloques de la aplicación AjpdSoft Lector Códigos de Barras Android en Google App Inventor

4. Por último podremos programar también el botón "btCerrar" para que al pulsarlo el usuario se cierre la aplicación Android. Para ello añadiremos (como ya hemos explicado anteriormente para el botón "btLeerCodigobarras") el evento (pieza) "btCerrar.Click":

Editor de Bloques de la aplicación AjpdSoft Lector Códigos de Barras Android en Google App Inventor

Para indicar que se cierre la aplicación accederemos a "Built-In", seleccionaremos "Control":

Editor de Bloques de la aplicación AjpdSoft Lector Códigos de Barras Android en Google App Inventor

y arrastraremos "call close application" a la pieza anterior "btCerrar.Click":

Editor de Bloques de la aplicación AjpdSoft Lector Códigos de Barras Android en Google App Inventor

El editor de bloques finalizado para la aplicación AjpdSoft Lector Códigos de Barras Android quedará:

Editor de Bloques de la aplicación AjpdSoft Lector Códigos de Barras Android en Google App Inventor

Compilar, empaquetar y generar el .apk para instalar en dispositivo Android

Una vez creado el diseño (interfaz gráfica) y creados los bloques (lógica de la aplicación) podremos compilarla y empaquetarla para generar el fichero apk para instalar en el dispositivo Android. En el siguiente artículo explicamos cómo hacerlo:

Abrir emulador, probar aplicación, compilar y empaquetar, instalar en dispositivo Android

Probar la aplicación AjpdSoft Lector Códigos de Barras Android en un dispositivo Android (Samsung Galaxy S)

Como hemos comentado, el componente BarcodeScanner de Google App Inventor requiere el API ZXing instalado en el móvil Android, para instalarlo (es gratuito) accederemos a Google Market:

Probar la aplicación AjpdSoft Lector Códigos de Barras Android en un dispositivo Android (Samsung Galaxy S)

Buscaremos la aplicación ZXing Barcode Scanner y la instalaremos (es gratuita):

Probar la aplicación AjpdSoft Lector Códigos de Barras Android en un dispositivo Android (Samsung Galaxy S)

Podremos probarla tras ser instalada:

Probar la aplicación AjpdSoft Lector Códigos de Barras Android en un dispositivo Android (Samsung Galaxy S)

Una vez instalada el API ZXing, instalaremos la aplicación AjpdSoft Lector Códigos de Barras Android y la ejecutaremos y probaremos:



Artículos relacionados

Créditos

Artículo realizado íntegramente por Alonsojpd miembro fundador del proyecto AjpdSoft.

7/20/2011

Desarrollar aplicaciones Android con Google App Inventor de forma visual

Mostramos en este artículo cómo desarrollar una aplicación para dispositivos con sistema operativo Android (Smartphones, Tablets, etc.) de forma sencilla sin conocimientos de programación usando Google App Inventor. Se trata de una utilidad web desarrollada por Google que permite realizar aplicaciones para Android sin escribir código Java, todo de forma visual e intuitiva (uniendo piezas de un puzle).



Google App Inventor

Google App Inventor es una aplicación proporcionada por Google que permite a cualquiera crear aplicaciones de software para el sistema operativo Android. Utiliza una interfaz gráfica que permite a los usuarios arrastrar y soltar objetos visuales para crear una aplicación que puede ejecutarse en el sistema Android, que funciona en muchos dispositivos móviles. Todo ello sin usar ni una sola línea de código, de forma intuitiva y gráfica.

La aplicación Google App Inventor se puso a disposición de los usuarios, mediante invitación, el 12 de julio de 2010, el 15 de diciembre de 2010 se puso a disposición de usuarios registrados.

La aplicación está dirigida a personas que no están familiarizadas con la programación de computadoras. La idea de esta utilidad es que cualquier persona pueda desarrollarse sus propias aplicaciones para su dispositivo Android.

Google App Inventor se ejecuta vía web, sólo será necesario ejecutar una pequeña aplicación para mostrar el Editor de Bloques (Block Editor) y el emulador, a partir de ahí todo será vía web, incluso nuestras aplicaciones se guardarán en la web. Por ello podremos acceder a nuestros proyectos desde cualquier equipo conectado a Internet.

Google App Inventor permite conectarse directamente a nuestro equipo Android, aunque en algunos casos no será posible, por ello incluye un emulador para probar las aplicaciones que desarrollemos para Android.

Google App Inventor permite guardar el proyecto en nuestro PC, para enviarlo a otros usuarios o para hacer copia de seguridad y permite también descargar la aplicación .apk compilada para ser instalada en el dispositivo Android. Por ello no necesitaremos ningún tipo de compilador ni nada por el estilo, todo podrá realizarse en el entorno de Google App Inventor.

Alta de usuario en Google, acceso a Google App Inventor

Google App Inventor es una herramienta de Google por lo que para acceder deberemos ser usuarios registrados de Google, podremos usar nuestro usuario y contraseña de GMail o de cualquier otro servicio de Google. Si no disponemos de usuario en Google deberemos darnos de alta desde:

https://www.google.com/accounts/NewAccount

Nos registraremos en Google y dispondremos de todos los servicios de Google gratuitos: GMail, Docs, Picassa, Calendar, Apps, Sites, Reader, Talk, Blogger, Analytics, AdSense, AdWords, ... y ahora también Google App Inventor.

Para acceder a Google App Inventor abriremos un navegador web e iniciaremos sesión en la URL:

http://appinventor.googlelabs.com/about

Introduciremos usuario y contraseña de Google, Google App Inventor detectará que es la primera vez que accedemos, por lo que nos mostrará los términos de licencia, si estamos de acuerdo los aceptaremos para tener acceso a Google App Inventor.

Interfaz de Google App Inventor, opciones más importantes, entorno de desarrollo Android

Elementos más importantes del entorno de Google App Inventor

Vamos a explicar algunas de las opciones más importantes de Google App Inventor, para ir familiarizándonos con este novedoso entorno de desarrollo de aplicaciones para Android. Una vez iniciada sesión en Google App Inventor, pulsaremos en "My projects" para acceder a la gestión de proyectos Android:

Interfaz de Google App Inventor, opciones más importantes, entorno de desarrollo Android

En el entorno de Google App Inventor podremos añadir nuevos proyectos Android pulsando en "New", eliminar proyectos existentes seleccionandos en "Projects" y pulsando "Delete", consultar y acceder a los proyectos guardados haciendo click sobre ellos:

Interfaz de Google App Inventor, opciones más importantes, entorno de desarrollo Android

Y, además, pulsando en "More Actions" podremos descargar el código del proyecto seleccionado, pulsando en "Download Source" o cargar código de algún proyecto existente en nuestro equipo (comprimido en Zip) pulsando en "Upload Source". Google App Inventor permite guardar el código fuente (source code) de cada proyecto en su formato, no genera los ficheros Java contenidos en la aplicación. Por lo tanto los proyectos generados con Google App Inventor sólo podrán ser editados, modificamos y compilados en Google App Inventor:

Interfaz de Google App Inventor, opciones más importantes, entorno de desarrollo Android

Crear nuevo proyecto Google App Inventor para Android, ventana de diseño de la aplicación, componentes

Para crear un nuevo proyecto Android con Google App Inventor pulsaremos en el botón "New" e introduciremos el nombre del nuevo proyecto en "Project name", por ejemplo "AjpdSoftHolaMundoAndroid":

Interfaz de Google App Inventor, opciones más importantes, entorno de desarrollo Android

Al crear un nuevo proyecto Android, Google App Inventor nos abrirá la ventana de diseño de la aplicación:

Interfaz de Google App Inventor, opciones más importantes, entorno de desarrollo Android

A continuación mostramos las partes más importantes de esta ventana de desarrollo de aplicaciones para dispositivos Android:

1. En la parte izquierda tendremos los componentes visuales y no visuales que podremos añadir a nuestra aplicación con tan solo arrastrar y soltar:

Interfaz de Google App Inventor, opciones más importantes, entorno de desarrollo Android

A continuación mostramos la lista de componentes disponibles en la paleta (Palette) agrupados por tipo. Hay que mencionar que dicha lista puede variar pues Google App Inventor es una versión Beta y será susceptible de modificaciones futuras añadiendo nuevos componentes y mejorando los actuales:

  • Basic: Button, Canvas, CheckBox, Clock, Image, Label, ListPicker, PasswordTextBox, TextBox, TinyDB.
  • Media: Camera, ImagePicker, Player, Sound, VideoPlayer.
  • Animation: Ball, ImageSprite.
  • Social: ContactPicker, EmailPicker, PhoneCall, PhoneNumberPicker, Texting, Twitter.
  • Sensors: AccelerometerSensor, LocationSensor, OrientationSensor.
  • Screen Arrangement: HorizontalArrangement, TableArrangement, VerticalArrangement.
  • LEGO MINDSTORMS: NxtColorSensor, NxtDirectCommands, NxtDrive, NxtLightSensor, NxtSoundSensor, NxtTouchSensor, NxtUltraSonicSensor.
  • Other stuff: ActivityStarter, BarcodeScanner, BluetoothClient, BluetoothServer, Notifier, SpeechRecognizer, texttoSpeech, TinyWebDB, Web.
  • Not ready for prime time: FusiontablesControl, GameClient, SoundRecorder, Voting.
  • Old stuff: .

Como se puede apreciar, hay componentes muy interesantes que nos permitirán utilizar la cámara de fotos, reproducir sonidos, acceder a los contatos, hacer llamadas, enviar SMS, usar el sensor de orientación (brújula), usar el sensor de localización, acceso a páginas web, etc. todo ello sin código Java, de forma visual.

2. En la parte central Google App Inventor nos mostrará la ventana principal de nuestra aplicación (diseñador) para que arrastremos los componentes que queramos añadir y la posición que tendrán en dicha ventana. En esta parte podremos ver tanto los componentes visuales (TextBox, Label, Button, ...) como los no visuales (Camera, Player, LocationSensor, BarcodeScanner, ...):

Interfaz de Google App Inventor, opciones más importantes, entorno de desarrollo Android

3. En la parte de la derecha tendremos la ventana "Components" donde Google App Inventor nos mostrará los componentes que hemos arrastrado a nuestra aplicación de forma jerárquica y por orden de aparición. Además, desde esta ventana, seleccionando un componente, podremos cambiarle el nombre pulsando en "Rename", eliminarlo pulsando en "Delete" y añadir ficheros de sonido, imágenes, etc. desde "Media" pulsando en "Add":

Interfaz de Google App Inventor, opciones más importantes, entorno de desarrollo Android

4. En la parte derecha, tras seleccionar un componente en "Components" veremos todas las propiedades del componente seleccionado. Desde aquí podremos modificar propiedades de los componentes tales como tamaño, texto, alineación, colores, imágenes, tipo de letra, etc. Las propiedades variarán en función del componente seleccionado:

Interfaz de Google App Inventor, opciones más importantes, entorno de desarrollo Android

Desde la ventana del diseñador podremos guardar el proyecto pulsando en "Save", hacerle una copia y guardarlo con otro nombre pulsando en "Save As" o bien generar un punto de control (una copia automática) pulsando en "CheckPoint":

Interfaz de Google App Inventor, opciones más importantes, entorno de desarrollo Android

Editor de bloques, Blocks Editor en Google App Inventor para Android

Google App Inventor "separa" la parte de diseño de la lógica de la aplicación, por ello siempre tendremos las dos ventanas abiertas, por un lado el diseñador (explicado anteriormente) y por el otro el editor de bloques (Blocks Editor) que nos permitirá establecer la lógica de la aplicación, las acciones que se realizarán con cada componente del diseñador, controlaremos los eventos que se puedan producir, etc. En definitiva, desde esta ventana será donde desarrollemos la aplicación.

Para abrir el Blocks Editor pulsaremos en el botón "Open the Blocks Editor":

Editor de bloques, Blocks Editor en Google App Inventor para Android

En el primer inicio y dependiendo del navegador, puede que nos solicite confirmación para descargar y ejecutar una aplicación Java: AppInventorForAndroidCodeblocks.jnlp pulsaremos en "Aceptar":

Editor de bloques, Blocks Editor en Google App Inventor para Android

Se iniciará la utilidad Java Web Start (si nos pide confirmación la aceptaremos):

Editor de bloques, Blocks Editor en Google App Inventor para Android

Y se abrirá la ventana App Inventor for Android Blocks Editor:

Editor de bloques, Blocks Editor en Google App Inventor para Android

Las partes más importantes de este editor de bloques son:

1. Built-In: desde esta pestaña del editor de bloques podremos definir y crear lo siguiente:

  • Definition: variables y procedimientos propios.
  • Text: usar funciones de texto tales como: definir una cadena de texto, join, make text, text=, text<, text>, length, trim, upcase, downcase, starts at, contains, split at first, split a first of any, split, split at any, split at spaces, segment, replace all.
  • Lists: usar listas y operaciones sobre ellas tales como: make a list, select list item, replace list item, remove list item, insert list item, length of list, append to list, add items to list, is in list?, position in list, pick random item, is list empty?, copy list, is a list? list to csv row, list to csv table, list from csv row, list from csv table.
  • Math: funciones matemáticas: >, <, =, <=, >=, not =, +, -, x, /, sqrt, random fraction, random integer, random set seed, negate, min, max, quotient, remainder, modulo, abs, round. floor, ceiling, expt, exp, log, sin, cos, tan, asin, acos, atan, atan2, convert radians to degrees, convert degrees to radians, format as decimal, is a number?.
  • Logic: funciones lógicas: true, false, not, =, and, or.
  • Control: flujos de control: if, ifelse, choose, foreach, for range, while, get start text, close screen, close screen with result, close application.
  • Colors: none, black, blue, cyan, dark gray, gray, green, light gray, magenta, orange, pink, red, white, yellow .

Editor de bloques, Blocks Editor en Google App Inventor para Android

Con estas opciones podremos definir toda la lógica de la aplicación.

2. My Blocks: desde donde podremos usar todas los eventos, funciones y procedimientos de cada componente que hayamos añadido en el diseñador de nuestra aplicación. Por ejemplo, si hemos añadido un Button y su nombre es "Button1" en My Blocks aparecerá, haciendo clic sobre él nos mostrará (al estilo de piezas de un puzle) los eventos, funciones, procedimientos y propiedades que pueden ser cambiadas en tiempo de ejecución. Para el caso de un Button mostrará: Button1.Click (cuando el usuario pulsa en el botón), Button1.GotFocus (cuando el botón se enfoca), Button1.LongClick (cuando se hace un pulsación "larga" sobre el botón, manteniéndolo pulsado unos segundos), Button1.LostFocus (cuando se pierde el foco), Button1.BackgroundColor (color de fondo del botón), Button1.Enabled (botón activado), Button1.Disabled (botón desactivado), ... Obviamente, dependiendo del tipo de componente seleccionado tendremos unas propiedades, procedimientos y funciones diferentes:

Editor de bloques, Blocks Editor en Google App Inventor para Android

Emulador, sincronización con dispositivo Android conectado al equipo, compilador y empaquetador apk

Google App Inventor permite ejecutar las aplicaciones que desarrollemos para Android en un Emulador, se trata de una aplicación que conectará con nuestro entorno App Inventor y desde donde podremos probar la aplicación sin necesidad de instalarla en un dispositivo Android físico real. Para ello pulsaremos en "New emulator":

Emulador, sincronización con dispositivo Android conectado al equipo

App Inventor nos mostrará una ventana de aviso indicando que el emulador tardará unos minutos en arrancarse y que debemos esperar a que se sincronice con la SD Card virtual que será la que enlace App Inventor con el emulador para enviar e instalar las aplicaciones Android de forma automática:

Emulador, sincronización con dispositivo Android conectado al equipo

Con el texto: Please wait. It can take 2 or 3 minutes for the emulator to become ready — even longer the first time. The emulator will be ready when the phone screen has a picture background as shown in the right image here. If it has a lock screen, as shown in the left, slide the bar with the green lock icon to the right to unlock it.
Even after the picture appears, continue to wait for the emulator to finish preparing the SD card: watch the notification area at the top of the emulator screen. When the emulator is ready, choose it from the Connect to Device menu to connect The Troubleshooting Guide
.

Se iniciará y abrirá el emulador, en realidad es como si se tratase de un móvil o tablet Android pero en el PC, casi con las mismas funciones:

Emulador, sincronización con dispositivo Android conectado al equipo

Una vez que hayamos desarrollado la aplicación Android (o mientras la vamos desarrollando) podremos ir probándola en el emulador, para ello en el desplegable de "Connect to Device" seleccionaremos el emulador:

Emulador, sincronización con dispositivo Android conectado al equipo

Y la aplicación se instalará y ejecutará de forma automática:

Emulador, sincronización con dispositivo Android conectado al equipo

Además, si disponemos de un móvil o tablet Android compatible con Google App Inventor, conectándolo al equipo, Google App Inventor lo detectará y nos permitirá instalar y ejecutar la aplicación Android de forma automática, desde el diseñador, menúy "Package for Phone" - "Download to Connected Phone":

Emulador, sincronización con dispositivo Android conectado al equipo

La aplicación se compilará y se generará el paquete apk con la aplicación lista para ser instalada en el dispositivo Android. Lo indicará en el botón con el estado "Packaging":

Emulador, sincronización con dispositivo Android conectado al equipo

Tras unos segundos Google App Inventor habrá generado el paquete APK listo para ser instalado con nuestra aplicación, si hemos seleccionado en el menú anterior "Download to this Computer" nos lo guardará en el PC en un fichero .apk que podremos copiar al móvil Android o enviar a otros usuarios:

Emulador, sincronización con dispositivo Android conectado al equipo

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Tras mostrar el entorno de desarrollo y las utilidades de Google App Inventor, vamos ahora a realizar una sencilla aplicación para Android, la típica "Hola Mundo". Crearemos un nuevo proyecto como ya hemos explicado anteriormente, con el nombre "AjpdSoftHolaMundoAndroid", App Inventor abrirá la ventana del diseñador. Arrastaremos un Button de la paleta de componentes "Basic" a la ventana central del diseñador:

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Seleccionaremos el Button añadido en y modificaremos la propiedad "Text" a "Hola mundo", este será el texto (caption) del Button (Botón) que se mostrará al usuario en nuestra aplicación Android:

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Podremos cambiarle el nombre, por defecto "Button1" seleccionándolo y pulsando en "Rename", por ejemplo por "btHolaMundo". Este será el nombre interno, el que usaremos para identificarlo de otros componentes en el editor de bloques, no se mostrará al usuario:

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Cambiaremos el título de nuestra aplicación, para ello pulsaremos seleccionaremos "Screen1" en "Components", en la ventana de "Propierties" modificaremos la propiedad "Title" por "AjpdSoft Hola Mundo Android":

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Ahora vamos a añadir un componente no visual que será el encargado de mostrar un mensaje en la pantala de nuestro móvil Android: "Notifier", accederemos a la paleta de componentes "Palete", pulsaremos en el grupo "Other stuff", arrastraremos y soltaremos el componente "Notifier" a nuestra ventana principal:

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Como podemos observar en la siguiente imagen, el componente queda fuera de la ventana de la aplicación pues se trata de un componente no visible para el usuario (sólo para uso interno del desarrollador Android):

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Como ya hemos hecho con el Button, cambiaremos el nombre por defecto "Notifier1" por que el que queramos, seleccionándolo y pulsando en "Rename", por ejemplo "compNotificador":

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Tras crear el diseño de la aplicación pasaremos ahora a crear la lógica, para ello pulsaremos en el botón "Open the Blocks Editor":

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Una vez abierto el editor de bloques, pulsaremos en "My Blocks":

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Lo que haremos ahora será definir la acción que se ejecutará cuando el usuario pulse en el botón, lo que haremos será mostrar un mensaje en la pantalla. Para ello seleccionaremos el botón "btHolaMundo", en la parte derecha nos mostrará los procedimientos, eventos y propiedades disponibles seleccionaremos "btHolaMundo.Click":

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

A continuación seleccionaremos el componente Nitifier llamado en nuestro caso "compNotificador", seleccionaremos el procedimiento "compNotificador.ShowAlert":

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Una vez que tenemos las dos piezas del puzle, el evento "click" del botón y la llamada al notificador, las uniremos como en un puzle:

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Ahora sólo nos queda establecer el mensaje (texto) que aparecerá en pantalla, para eso nos vamos a "Built-In", pulsaremos en "Text" y seleccionamos "text" que es una pieza del puzle para establecer un texto cualquiera:

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Unimos la pieza "text" del puzle con "notice" del "ShowAlert":

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Introducimos en "text" el texto que queramos que muestre el Notifier, por ejemplo "¡¡Hola mundo Android!! por AjpdSoft":

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Y ya tendremos nuestra primera aplicación para Android con Google App Inventor sin haber escrito ni una sola línea de código Java. Ahora la probaremos, primero en el emulador, para ello pulsaremos en "New emulator":

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Cuando se haya cargado el emulador:

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Pulsaremos en el desplegable "Connect to Device" y seleccionaremos el emulador:

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Se inicará la sincronización automática, Google App Inventor subirá e instalará la aplicación Android en el emulador:

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Si todo es correcto nos la mostrará como si de un móvil real se tratase:

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Pulsando en el botón "Hola mundo" nos mostrará el mensaje "¡¡Hola mundo Android!! por AjpdSoft":

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Si queremos probar la aplicación en real, en un dispositivo Android real, en la ventana del diseñador pulsaremos en "Package for Phone", en el menú seleccionaremos "Download to this Computer":

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

App Inventor compilará y empaquetará la aplicación en un apk, lo guardaremos en el dispositivo móvil o en nuestro PC:

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Si tenemos el móvil conectado podemos guardarlo directamente en la SD del móvil:

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Ahora instalaremos la aplicación en nuestro móvil Android (en nuestro caso un Samsung Galaxy S), pulsaremos en el fichero apk generado por Google App Inventor:

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Nos indicará las posibles acciones de nuestra aplicación, pulsaremos "Instalar":

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Se inicará la instalación de la aplicación Android desarrollada:

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Nos indicará que la aplicación ha sido instalada, pulsaremos "Abrir" para ejecutarla directamente:

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Y ya podremos disfrutar de nuestra primera aplicación Android, desarrollada sin apenas conocimientos de programación:

Desarrollar aplicación en Google App Inventor: Hola Mundo para Android

Conclusiones sobre Google App Inventor

En primer lugar decir que se trata de una versión Beta y que se van añadiendo nuevas funcionalidades cada cierto tiempo.

Hemos de decir que se trata de una curiosa y novedosa forma de "programar", sin duda casi se cumple el objetivo de Google App Inventor: que cada persona pueda realizarse sus propias aplicaciones para su móvil Android.

Es cierto que si bien no se usa código Java sí hacen falta unos conocimientos mínimos de programación para entender la lógica de programación si se quieren realizar aplicaciones profesionales, aunque con práctica y teniendo claro el objetivo del programa Android a desarrollar lo puede hacer cualquier persona sin conocimientos de programación.

Como ventajas podemos destacar:

  • No necesitamos instalar nada en el equipo, por lo que no son necesarios permisos ni conocimientos del sistema operativo.
  • Todos los proyectos quedan guardados en el usuario de Google App Inventor por lo que no tendremos que preocuparnos de hacer copias de seguridad. Siempre los tendremos accesibles desde cualquier equipo con conexión a Internet.
  • Dispone de un emulador para probar las aplicaciones antes de instalarlas en el móvil.
  • Permite conexión directa con el móvil para instalar las aplicaciones de forma automática.
  • No requiere de conocimientos de programación, todo se realiza de forma visual, incluso la lógica de la aplicación.
  • Dispone de muchos componentes (como hemos comentado aquí) para acceso a casi todos los recursos del móvil.
  • Compila y genera el empaquetado listo para ser instalado por lo que no necesitaremos compiladores ni IDEs de desarrollo que a veces son muy complicados y lentos.
  • Quizá sea el IDE de desarrollo de aplicaciones para Android más rápido de entender y de usar gracias a su novedoso método de "piezas de puzle".

Como inconvenientes destacamos:

  • No genera código Java, lo cual es una lástima, Google App Inventor nos podría servir como base para desarrollar aplicaciones profesionales para Android.
  • No dispone de toda la flexibilidad que tienen IDEs como Eclipse, al no tener acceso al código Java generado.
  • Únicamente permite desarrollar aplicaciones para Android.
  • Si no funciona la conexión a Internet no podremos desarrollar.
  • El emulador es menos completo que otros emuladores como los existentes para Eclipse.
  • Faltan algunos componentes, por ejemplo no hay soporte para realizar aplicaciones que usen SQLite (base de datos) en Android.

Artículos relacionados

Créditos

Artículo realizado íntegramente por Alonsojpd miembro fundador del proyecto AjpdSoft.