Categorías del Tutorial

icono_twiter icono LinkedIn icono Facebook Icono Xing
Roberto Canales Mora

Creador y propietario de AdictosAlTrabajo.com, Director General de Autentia S.L., Ingeniero Técnico de Telecomunicaciones y Executive MBA por el Instituto de Empresa 2007.
Twitter:

Autor de los Libros: Planifica tu éxito: de aprendiz a empresario y Informática profesional, las reglas no escritas para triunfar en la empresa

Puedes consultar mi CV y alguna de mis primeras aplicaciones (de los 90) aquí

Ver todos los tutoriales del autor

Fecha de publicación del tutorial: 2010-03-01

Tutorial visitado 6.757 veces Descargar en PDF
ScrumCards de Autentia en Android.

Puedes descargar el código fuente aquí

ScrumCards de Autentia en Android

Creo francamente que se ha producido una gran evolución en los dispositivos móviles sin precedentes. ¡Ahora ya sí se pueden usar de un modo eficiente!

Para poder ser justos en la comparación de las dos principales tecnologías: IPhone y Android quiero desarrollar la misma aplicación o equivalente a la recién desarrollada sobre la baraja de Scrum en el IPhone: http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=scrumIphone.

Aunque en Autentia ya hay gente que lleva tiempo cachareando con Android, voy a probar a ver el tiempo que tardo en hacerlo yo... bien oxidado, desde cero. Esto huele a pique...

Instalación del entorno

Nos vamos al Web de desarrollo de Android en http://developer.android.com/index.html

Nos bajamos la última versión del SDK de Android. Yo estoy en Mac.

El entorno consta de una extensión de Eclipse y un SDK. Leeros bien las instrucciones que ...por mucho correr ... yo tuve algún problemita.

Descargamos entonces eclipse Galileo para Mac. Me bajo la versión con soporte para Java (no J2EE que no necesitamos para nada)

Tarda una ratito.

Arrancamos eclipse en nuestro Mac y definimos la ubicación por defecto de área de trabajo. Marcad si queréis el check para que no os lo pregunte más,

A mi me da un pequeño error que ignoro relacionado con php. Pinchamos en Eclipse en el menú Help->Install New Software. Luego si queremos actualizar podemos usar la opción Check for Updates.

Pulsaremos Add e insertaremos la dirección del servidor de Android (ir a las instrucciones para ver el que esté en ese momento).

Nos aparecerán los elementos a instalar.

Se instalarán

Tarda una rato porque tiene que bajarse el software de internet

Ahora podemos tirar eclipse y volverlo a arrancar. Diremos que queremos crear un nuevo proyecto.

De tipo Android Project.

Pero nos dirá que no hemos establecido el SDK todavía. Esto es lo que os decía que hay que leerse las instrucciones antes ... no es problema porque lo salvamos con facilidad.

Nos vamos a ir al directorio donde hayamos descargado el SDK de Android. En mi Mac lo lógico me parece ponernos en Developer/....En el directorio de herramientas pulsamos android.

Nos vamos a la pestaña de Settings y pinchamos Force https using http. Esto es porque no me funciona la conexión https ...

Vamos a la lengüeta de paquetes disponibles y elegimos las últimas revisiones del SDK.

Pinchamos en Instalar seleccionados... y estamos en marcha.

Como esto tarda, vamos a hacer una configuración mientras.

Establecer el path del SDK

Ahora tenemos que asegurarnos que ponemos en el path de nuestro sistema operativo la carpeta de Tools para una buena integración con Eclipse. Debemos editar o crear el fichero .bash_profile en el Mac. Ver instrucciones de cómo se hace en otros sistemas operativos.

Yo lo hago con el Vim exportando la variable path.

Grabamos y salimos

Ya se han descargado todos los paquetes.

Comprobamos lo que tenemos.

Crear un Emulador

Ahora desde cualquier lugar podríamos invocar al emulador ... pero todavía nos falta una pequeña configuración

No tenemos definido ningún dispositivo virtual ... así que poco vamos a poder emular.
Vamos a Virtual Devices y seleccionamos New

Le ponemos el nombre deseado, el nivel de API de las descargadas, el tamaño de la memoria y el swing tal y como veis...

Ya tenemos un dispositivo Android por defecto

Sólo tenemos que lanzarlos. Tarda un ratillo en arrancar pero ya estamos .

Navegamos por la Web de Autentia a ver cómo queda.

En el emulador podemos hacer lo mismo que en un teléfono normal.

Os recomiendo leer las instrucciones del emulador http://developer.android.com/guide/developing/tools/emulator.html

Para rotar el emulador de Android en Mac recordad que hay que pulsar simultaneamente Fn + Ctrl + F11 (o lo que sea)... lo mejor es consultar la documentación.

Creación de un proyecto

Bueno, vamos de nuevo a Eclipse e intentamos crear el proyecto ... lástima ... todavía no podemos.

Nos vamos a las preferencias de Eclipse

E indicamos la localización del SDK de Android

Nos encuentra los targets.

Y por fin empezamos.

Un proyecto Android se basa en una primera actividad que hemos llamado CartasScrum.

Una actvidad puede tener una ventana que está definida en un fichero xml.

Los ficheros xml de Andrioid son pre-compilados generándose una clase R de referencias que podemos usar en nuestros programas.

Vemos en la primera captura que nuestra clase de actividad CartasScrum hereda de Activity y que establece como vista R.layout.main.

Una aplicación tiene distintas actividades que para nuestra baraja podría ser:

  • La pantalla de selección de carta a mostrar (botones).
  • La pantalla con el detalle

La primera que se ejecutará se basará en el contenido del fichero Android.xml

Una de las cosas más importantes a tener en cuenta con las actividades es su ciclo de vida. Cuando se arrancan, se paran, se restablecen ...

Como estamos en Eclipse, vamos a redefinir los métodos básicos para ver ese ciclo de vida en nuestro lo... y así de camino vemos cómo funciona.

Establecer trazas

Pulsando sobre la clase actividad con el botón derecho se nos muestra la opción de Source -> Override/Implement Methods ... Esto es una de las cosas que más he echado de menos en xcode a la hora de desarrollar en Iphone.

Elegimos los métodos OnPause, OnRestart ... ya hay que leerse la documentación porque no es el objetivo del tutorial.

Usaremos los métodos Log.x para trazar información

Aparece algo como esto

public class CartasScrum extends Activity {
    public static String MIAPP = "CartasScrum"; // constante solo para trazas
    
    /** Llamada al crearse la actividad. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        Log.i(MIAPP,"Estamos en OnCreate");
        
        setContentView(R.layout.main); // establecemos la vista de plantilla
    }
    
    @Override
    protected void onDestroy() {
        // TODO Auto-generated method stub
        Log.w(MIAPP,"Estamos en OnDestroy");
        super.onDestroy();
    }
    
    @Override
    protected void onPause() {
        // TODO Auto-generated method stub
        Log.w(MIAPP,"Estamos en OnPause");
        super.onPause();
    }
    
    @Override
    protected void onRestart() {
        // TODO Auto-generated method stub
        Log.w(MIAPP,"Estamos en OnRestart");
        super.onRestart();
    }
    
    @Override
    protected void onResume() {
        // TODO Auto-generated method stub
        super.onResume();
    }
    
    @Override
    protected void onStart() {
        // TODO Auto-generated method stub
        Log.w(MIAPP,"Estamos en OnStart");
        super.onStart();
    }
    
    /* (non-Javadoc)
    * @see android.app.Activity#onStop()
    */
    @Override
    protected void onStop() {
        // TODO Auto-generated method stub
        Log.w(MIAPP,"Estamos en OnStop");
        super.onStop();
    }
}


Damos a ejecutar como aplicación Android.

Y abrimos en Eclipse la perspectiva de depuración.

Abajo a la derecha nos aparece la consola de log. Podemos poner un filtro para ver sólo los mensajes que nos interesan

Por la etiqueta que hemos puesto en el parámetro de nuestra llamada a la función Log.

Añadir elementos a nuestra primera ventana

Desde el principio vemos que todo está muy ordenadito y estructurado. Todas las cadenas están en un fichero llamado strings.xml dentro del directorio res (muy importante). Podemos editar visualmente el contenido para cambiar la cadena por defecto en la ventana de nuestra primera actividad.

En el directorio layout dentro de 'res' vemos que está main.xml. Si lo pinchamos podremos editar visualmente nuestra ventana. Le podemos cambiar el tema por ejemplo ...que es un conjunto de estíos.

Para montar nuestra botonera vamos a insertar debajo el texto por defecto y layout tabular. De él colgarán 5 filas y a su vez los botones dentro de cada fila. Fijaos a la derecha.

Como la quinta fila sólo tiene un botón, vamos a sacarla del layout tabular (pulsando el botón Down) para que quede como un elemento más libre. Podemos ver que cada botón tiene un identificador y texto tipo @+id/Button01.

Si arrancamos la aplicación no aparece ningún texto porque todavía no lo hemos registrado.

Nos vamos de nuevo al editor de cadenas de caracteres y agregamos del boton1 al 13.

Y tendremos que ir uno a uno por los botones para, en su propiedad text, seleccionar el texto del botón que hemos creado.

Ya vemos el aspecto que tiene.

No vamos a complicarnos mucho con el aspecto visual aunque sí describir una pincelada de cómo se hace.

Estableciendo estilos

Podemos asociar a los botones un estilo de tal modo que cambiando externamente el estilo cambien todos los botones ... vamos... el mismo concepto que css. Creamos un fichero xml pichando el botón derecho sobre el directorio res dentro de Eclipse. Elegimos crear un fichero xml de Android.

Decimos que es un fichero de valores y le llamamos styles.xml (por seguir un poco la convención). Es importante el destino: res/values

Añadimos un elemento de tipo Stile, estilo.

Dentro de estilo (botonesGrandes) un item o elemento.

Y decimos que la propiedad androide:textSize es 18pt (ojo que en la captura me he confundido y pone tex...)

Ahora le asociamos el estilo al botón.

Y vemos cómo queda

Con paciencia se lo asignamos a los demás.

Creación de la segunda ventana

Ahora vamos a crear la segunda pantalla que será el soporte de la segunda actividad.
Creamos de nuevo un fichero xml de Android

Le llamamos detallecarta.xml. Ponedlo en minúsculas porque luego es muy puntilloso para estos temas. Elegimos que es de tipo layout.

Veis lo que os decía si lo pones con mayúsculas.

Bueno, repetimos la operación y borramos el fichero anterior para evitar líos.

Ahora vamos a irnos a por nuestras cartas de Scrum a www.autentia.com

Fijaos que he cambiado el nombre de las imágenes para que no de guerra en Android. En Iphone trababa que se llamasen ?, 0,5, Descansamos? Aquí no cuela por lo que evitamos problemas.

Desde el escritorio (Finder en Mac) pinchamos y arrastramos todas las imágenes al directorio drawable-hdpi. Si os fijáis, la clase R se verá modificada añadiendo nuevos identificadores de estos elementos.

La base de nuestra ventana será un ImageView y pondremos en la propiedad Background la imagen del reverso... se hace seleccionándola visualmente como se ve en la captura.

Añadir una segunda actividad

Ahora vamos a añadir la clase de la actividad.
Desde el asistente de eclipse añadimos una clase.

La llamamos DetalleCartas y decimos que hereda de android.app.Activity

Podemos copiar y pegar el código del OnCreate de la primera actividad y decirle que la vista asociada es nuestra DetalleCartas (usando el asistente de autocompletar a partir de la clase R)

Vamos a añadir la actividad al fichero de manifiesto. Aunque vamos a invocar una actividad directamente desde otra, en este fichero se pueden establecer filtros de invocación automáticos (cosa que no vamos a hacer de momento). Decimos que queremos editar el fichero con el editor de manifiesto (pinchando el botón derecho sobre AndroidManifest.xml)

Pinchamos en añadir y aplicamos un filtro para ver sólo las que empiezan por A... nuestra actividad.

Elegir la acción

Enlazando todo con código

El código es sencillísimo. Creamos un gestor de eventos inicializado con la actividad y la imagen asociada a cada botón.

Al pulsar el botón, llamaremos a la segunda actividad y le pasaremos como parámetro la imagen con la que tiene que pintar (dentro de un Intent). He quitado los métodos que no usamos para nada (On..)

package es.autentia.ScrumCards;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.util.*;
import android.view.View;
import android.widget.Button;

public class CartasScrum extends Activity {
    public static String MIAPP = "CartasScrum"; // constante solo para trazas
    
    /** Llamada al crearse la actividad. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        Log.i(MIAPP,"Estamos en OnCreate");
        
        setContentView(R.layout.main); // establecemos la vista de plantilla
        establecerListener(R.id.Button01, R.drawable.carta_0_cc); // asociamos el gestor de eventos
        establecerListener(R.id.Button02, R.drawable.carta_05_cc);
        establecerListener(R.id.Button03, R.drawable.carta_1_cc);
        establecerListener(R.id.Button04, R.drawable.carta_2_cc);
        establecerListener(R.id.Button05, R.drawable.carta_3_cc);
        establecerListener(R.id.Button06, R.drawable.carta_5_cc);
        establecerListener(R.id.Button07, R.drawable.carta_8_cc);
        establecerListener(R.id.Button08, R.drawable.carta_13_cc);
        establecerListener(R.id.Button09, R.drawable.carta_20_cc);
        establecerListener(R.id.Button10, R.drawable.carta_40_cc);
        establecerListener(R.id.Button11, R.drawable.carta_100_cc);
        establecerListener(R.id.Button12, R.drawable.carta_nose_cc);
        establecerListener(R.id.Button13, R.drawable.carta_descansamos_cc);
    }
    void establecerListener(int ID,int IDimagen) // ponemos el gestor de eventos y le asociamos una imagen
    {
        Button botonAux = (Button) this.findViewById(ID);
        botonAux.setOnClickListener( new GestorClicks(IDimagen,this)); // le pasamos la imagen y la actividad
    }
    
// clase auxiliar de gestión de eventos para asociar la imagen al botón
class GestorClicks implements View.OnClickListener
{
      int idImagen = R.drawable.reverso_cc; // ponemos por defecto el reverso
      Activity actividad = null;
      
      public static String MIAPP = "CartasScrum - GestorEventos"; // para depuración
      
      GestorClicks(int pImagenID, Activity pActividad) // constructor
      {
          idImagen = pImagenID;
          actividad = pActividad;
      }
      public void onClick(View v) {
          Log.i(MIAPP,"Boón pulsado " + v.getId());
          Log.i(MIAPP,"Mostraremos la imagen " + idImagen);
          
          Intent parametros = new Intent (actividad.getApplicationContext(),DetalleCartas.class); // creamos los parametros
          parametros.putExtra("es.autentia.ScrumCards.IDImagen", idImagen); // pasamos un parametro extra a la actividad
          
          actividad.startActivity(parametros); // invocamos la actividad
      }
}

Y la segunda actividad es todavía más sencilla porque simplemente cambiamos la imagen a mostrar en la vista. Al pulsar en la vista finalizamos la acción por lo que volvemos a la anterior.

package es.autentia.ScrumCards;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.util.Log; // para el log
import android.view.View;
import android.widget.*; // para el ImagaView
import android.content.Intent; // para los parametros extra en el Intent

public class DetalleCartas extends Activity {
    
    public static String MIAPP = "CartasScrum-DetalleCartas"; // para log
    public int idimagen = R.drawable.carta_100_cc; // si falla algo que salga siempre el 100
    
    /** Invocado cuando se llama la primera vez. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        Intent parametros = this.getIntent(); // recuperamos parametros.
        
        int IDImagen = parametros.getIntExtra("es.autentia.ScrumCards.IDImagen", idimagen);
        
        Log.i(MIAPP,"Estamos en OnCreate");
        
        setContentView(R.layout.detallecartas); // recordar invocar antes de enlazar componentes visuales
        
        ImageView vista = (ImageView) this.findViewById(R.id.ImageView01); // enlazamos con la vista
        vista.setOnClickListener( new GestorClicksVentana(this));
        
        vista.setImageResource(IDImagen); // ponemos la imagen
    }
}
//clase auxiliar de gestión de eventos para asociar la imagen al boón
class GestorClicksVentana implements View.OnClickListener
{
      Activity actividad = null; // enlace con nuesta actividad
      
      public static String MIAPP = "CartasScrum - GestorClicksVentana";
      
      GestorClicksVentana(Activity pActividad) // asociamos en parámetro con la veriable de clase
      {
          actividad = pActividad;
      }
      public void onClick(View v) { // manipulamos en evento
          // TODO Auto-generated method stub
          Log.i(MIAPP,"Botón pulsado " + v.getId());
          actividad.finish(); // cerramos la actividad
      }
}

Sencillo ¿verdad? todo es fácil cuando ya lo has conseguido ;-)

Algunas conclusiones sobre el desarrollo Iphone/Android

Bueno, otro reto que no he tardado más en resolver que unas cuantas horas... La verdad es que me anima bastante a afrontar cualquier reto en este tipo de desarrollos.

Como resumen diría:

Ventajas del desarrollo con IPhone

  • Es un único dispositivo por lo que no hay que "hacerlo todo tan parametrizable ni flexible".
  • Un buen aspecto visual es más fácil de obtener.
  • En emulador y entorno xcode es más rápido en cargar y en conmutar vistas (desarrollo/depuración).
  • Documentación muy buena.
  • En entorno más integrado y sencillo de montar.

Inconvenientes del desarrollo con IPhone

  • Sólo se puede desarrollar en Mac.
  • Hay que aprender un nuevo lenguaje: Objetive-C
  • Tienes que preocuparte de la gestión de memoria.
  • Xcode no está tan evolucionado con asistentes como Eclipse: Auto-completar (xcode tiene pero me gusta menos), asistentes para construcción de clases, redefición de métodos, etc.
  • No poder instalar tus propios programas en tu dispositivo sin pagar.

Ventajas del desarrollo con Android

  • Se programa en Java en cualquier entorno (aunque esto sólo lo es para el que ya conoce Java ya que para el que conoce Cocoa trabajar con Iphone sea trivial).
  • Te olvidas de la gestión básica de memoria (aunque es como todo.. las buenas prácticas hay que usarlas igual).
  • Hay una gran cantidad de empresas aproyándolo por lo que el potencial de talento y velocidad es impresionante.

Inconvenientes del desarrollo con Android.

  • Emulador lento al cargar aunque engancha al vuelo (no hay que cargarlo constantemente).
  • Entorno gráfico poco elaborado para mi gusto.

Bueno, ya sabéis que si queréis desarrollos o formación sobre todas estas cosas y la integración con entornos transaccionales podéis encontrarnos en www.autentia.com.

A continuación puedes evaluarlo:

Regístrate para evaluarlo

Por favor, vota +1 o compártelo si te pareció interesante

Share |
Anímate y coméntanos lo que pienses sobre este TUTORIAL: