icono LinkedIn
Raúl Expósito Díaz

Consultor tecnológico de desarrollo de proyectos informáticos

Ingeniero en Informática por la Universidad Carlos III de Madrid, especialidad en IA

http://raulexposito.com/ - Perfil LinkedIn.

Ver todos los tutoriales del autor

Fecha de publicación del tutorial: 2010-02-25

Tutorial visitado 11.247 veces Descargar en PDF
CREANDO LA BARAJA DE SCRUM DE AUTENTIA COMO APLICACION PARA ANDROID

Creando la baraja de SCRUM de Autentia como aplicación para Android

1 Introducción

Uno de los artefactos más conocidos dentro del ámbito de las metodologías ágiles es el de la baraja de Scrum, con la cual los miembros de un equipo de desarrollo realizan estimaciones de cuánto esfuerzo les va a suponer realizar las historias de usuario en lo que se conoce como planning poker.

En Autentia tenemos unas barajas de Scrum muy trabajadas: los dibujos de las cartas son a color, tienen unos dibujos bastante originales y al tacto se nota que son buenas. Hemos regalado un montón de barajas en eventos que realizamos así que es posible tengas una baraja de éstas. Podeis ver qué aspecto tienen nuestras cartas pulsando en el siguiente enlace.




Hay otras barajas circulando por ahí pero no tienen dibujos, son en blanco y negro y el material es malillo. Así se pierde algo de "magia" y es más dificil hacer que las planificaciones sean divertidas, ¿no os parece?

Pero, ¿qué pasa si no tenemos una baraja como la de Autentia?, ¿estamos condenados a ver unos sosísimos números en blanco y negro?, ¿nos veremos obligados y condenados de por vida a aburrirnos en las reuniones de planificación?. Por suerte hemos pensado en todo. En un tutorial anterior, Roberto Canales creó una aplicación para el iphone con la que poder utilizar nuestra baraja de scrum. En este tutorial vamos a hacer lo mismo sólo que nuestra baraja funcionará en dispositivos Android. De este modo podrás usar nuestras cartas en tus planificaciones con scrum tanto si tienes iphone como si tienes Android. Se pierde el tacto de la carta pero la diversión se mantiene.


   


Como veis aquí siempre estamos rompiéndonos la cabeza y esta vez le ha tocado a nuestro amigo Android.




En este tutorial veremos cómo montar el entorno para desarrollar con Android y cómo hacer una aplicación un poco más completa que un simple "Hola mundo". Como podreis ver todo es relativamente fácil. En un alarde de originalidad hemos llamado al programa scrumdroid.




Podeis descargar el código fuente y el programa ya compilado pulsando los siguientes enlaces:

2 Entorno

  • OSX 10.6 - Snow Leopard
  • Eclipse 3.5.1
  • Android 1.6
  • Java 6
  • Una pedazo de HTC Magic - aunque no es necesario disponer de dispositivos para poder desarrollar para Android

3 Software para descargar

Antes de nada mencionar que en el sitio web de desarrolladores de Android hay un montón de documentación y de ejemplos que os ayudarán a crear vuestras aplicaciones. Este sitio será nuestra fuente de referencia principal:

http://developer.android.com/

Ha sido en ese sitio donde he encontrado los siguientes enlaces, los cuales he usado como base para el ejemplo:

http://developer.android.com/resources/tutorials/views/hello-gridview.html

http://developer.android.com/guide/topics/ui/dialogs.html#CustomDialog

Las versiones que voy a descargar son las de OSX pero el mencanismo es el mismo si trabajas con otro sistema operativo.

3.1 Descargamos el SDK para OSX

Nos vamos a esta dirección y lo descargamos: http://developer.android.com/sdk/index.html




3.2 Descargamos Eclipse 3.5.1

Nos vamos a esta dirección y lo descargamos: http://www.eclipse.org/downloads/




Para OSX bajamos el Cocoa 64bits.

3.3 Descargamos las imágenes de las cartas de Scrum de Autentia

Como indicamos anteriormente las podemos descargar de aqui: http://www.autentia.com/archivo-descargas.php



4 Instalación

4.1 Instalamos el SDK

http://developer.android.com/sdk/installing.html#Installing

Descomprimimos el zip que hemos descargado en un directorio de nuestra elección. En mi caso en /Users/raul/android-sdk-mac_86. Abrimos un terminal nuevo y ponemos: 'nano .bash_profile'. Una vez se nos muestre el fichero añadimos las siguientes líneas:

export ANDROID_HOME=/Users/raul/android-sdk-mac_86
export PATH=$PATH:$ANDROID_HOME/tools

Pulsamos CTRL-O y luego CTRL-X

Salimos del terminal, entramos de nuevo y ponemos android. Si todo funciona correctamente saldrá algo como esto:

$ android 
Starting Android SDK and AVD Manager
No command line parameters provided, launching UI.
See 'android --help' for operations from the command line.



Como vamos a desarrollar para una HTC Magic con Android 1.6 nos vamos a 'Available Packages' y bajamos los complementos para esta versión. Los seleccionamos y pulsamos sobre el botón 'Install Selected'




Si fallase la descarga iríamos a 'Settings' y marcaríamos el check de la imagen. Tras ello volvemos a 'Available Packages' y bajamos los complementos que dijimos anteriormente.




4.2 Instalamos Eclipse

http://developer.android.com/sdk/eclipse-adt.html

Necesitaremos el plugin de ADT (Android Development Tools).

Una vez descargado el Eclipse lo descomprimirmos en un directorio de nuestra elección. Lo ejecutamos y seleccionamos un directorio que hará de espacio de trabajo. Ahí será donde tendremos el código fuente de nuestro proyecto. Cerramos el panel de bienvenida e instalamos el plugin.







Pulsamos sobre el botón 'Add...', en el campo 'Name' ponemos algo como 'Android Development Tools', y en 'location' la siguiente url: https://dl-ssl.google.com/android/eclipse/

Tras conectar con la url nos cargará un apartado llamado 'Developer Tools'.




Lo seleccionamos y le damos a 'Next', aceptamos las licencias en caso de estar de acuerdo con ellas, etc. Tras ello comenzará a descargar los plugins.




Cuando acabe reiniciamos Eclipse. Vereis que tenemos unos iconos nuevos.




Sólo falta indicar dónde está el SDK de Android. Para ello nos vamos a [ Window > Preferences ]. Los usuarios de OSX, a [ Eclipse > Preferencias ] y seleccionamos 'Android' en el panel de la izquierda. Nos aparecerán varios mensajes como estos:




Ponemos el directorio donde tenemos el SDK y pulsamos 'Apply'. Tarda un poco en mostrar los resultados:




Si todo ha ido bien pulsamos ok.

5 Haciéndolo funcionar

Antes de ponernos a hacer nuestra aplicación vamos a crear una de ejemplo para ver cómo podemos hacer que funcione tanto en el simulador como en el dispositivo físico.

Si tenemos un dispositivo físico necesitamos habilitar el modo depuración. Para ello nos vamos a [ Ajustes > Aplicaciones > Desarrollo ] y una vez allí habilitamos la 'Depuración USB'

Creamos el proyecto accediendo a la opción [ File > New > Other > Android > Android Project ]




Dejamos los valores de la siguiente pantalla y pulsamos 'Finish':




Nos creará un proyecto que nos dará errores de compilación. Lo solucionamos dando a [ Project > Clean... > OK ]

Enchufamos el cable USB al dispositivo y ejecutamos el proyecto dándole al botón derecho del ratón encima del nombre del mismo:







Si lo desbloqueamos veremos el clásico 'Hello, World!' en la pantalla de nuestro dispositivo Android. Además la aplicación se queda instalada como una más, podemos desenchufar el cable y seguir usándola en cualquier momento. Yo no sé a vosotros pero esto a mi me parece una pasada.

Hay una aplicación de ejemplo bastante util que se llama "API Demos", la podeis cargar igual que hemos cargado el HelloActivity. Os recomiendo que la probeis porque da un montón de ejemplos de cosas que se pueden hacer con Android.

Si no tenemos dispositivos con Android no pasa nada, podemos usar el simulador. Para ello ejecutamos el proyecto dándole al botón derecho del ratón encima del nombre del mismo igual que mostramos en la imagen anterior y nos saldrá esto:




Pulsamos 'Yes' y en la venta a siguiente, a 'New'. Rellenamos los siguientes datos:




Y le damos a 'Create AVD'. Aceptamos, salimos de las pantallas y le damos de nuevo al botón derecho sobre el proyecto para arrancar la aplicación. Se nos arrancará un proceso con el icono de Android que, tras cargar, nos mostrará lo mismo que sale por la terminal:







Hacer click sobre esta pantalla es como tocar la pantalla del teléfono, de este modo podremos desarrollar aplicaciones para Android aún sin tener ningún dispositivo.

Si usais el emulador no lo cerreis cada vez que hagais un cambio y querais probar algo, NO ES NECESARIO. El emulador hace cambios en caliente, así que sólo necesitais volver a lanzar el proyecto y el simulador recogerá los cambios.

6 El ejemplo

Os paso de nuevo los enlaces tanto al código fuente como al programa ya compilado. Como no podia ser de otro modo podeis importar el proyecto en Eclipse y jugar con él todo lo que querais.

El código fuente en sí no tiene gran cosa, sólo las imágenes, dos ficheros xml y dos clases java. Los xml definen la disposición o layout de las cosas en pantalla y las clases java el funcionamiento. El contenido de los ficheros es el siguiente:

main.xml
	< GridView xmlns:android="http://schemas.android.com/apk/res/android" 
	    android:id="@+id/gridview"
	    android:layout_width="fill_parent" 
	    android:layout_height="fill_parent"
	    android:columnWidth="90dp"
	    android:numColumns="auto_fit"
	    android:verticalSpacing="10dp"
	    android:horizontalSpacing="10dp"
	    android:stretchMode="columnWidth"
	    android:gravity="center"
	/>

Esta definición permite mostrar los elementos en un grid o rejilla, y es el que usamos para mostrar el listado con todas las cartas. Fijaros en que él sólo ya se encarga de tareas como el scroll, cuya barra se ve a la derecha.




custom_dialog.xml
	< LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	              android:id="@+id/layout_root"
	              android:orientation="horizontal"
	              android:layout_width="fill_parent"
	              android:layout_height="fill_parent"
	              android:padding="10dp"
	              >
	    < ImageView android:id="@+id/image"
	               android:layout_width="fill_parent"
	               android:layout_height="wrap_content"
	               android:scaleType="center"/>
	

Este otro layout va a mostrar los elementos de manera lineal. Dentro definimos un espacio para almacenar una imagen, que será la carta seleccionada en la pantalla anterior.




ScrumDroid.java
package com.autentia.android.scrum;

import android.app.Activity;
import android.app.Dialog;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.AdapterView.OnItemClickListener;

public class ScrumDroid extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        final GridView gridview = (GridView) findViewById(R.id.gridview);
        gridview.setAdapter(new ImageAdapter(this));
        gridview.setOnItemClickListener(new OnItemClickListener() {
            public void onItemClick(AdapterView< ? > parent, View v, int position, long id) {
            	showDialog(position);
            }
        });
    }
    
    protected Dialog onCreateDialog(int id) {
    	final Dialog dialog = new Dialog(this);
    	dialog.setContentView(R.layout.custom_dialog);
    	dialog.setTitle("www.autentia.com");
    	dialog.setCanceledOnTouchOutside(true);
    	dialog.setCancelable(true);

    	final ImageView image = (ImageView) dialog.findViewById(R.id.image);
    	image.setImageResource(ImageAdapter.image[id]);
    	
    	return dialog;
    }
}

Define lo que en Android es un Activity. Podriamos decir de mala manera que una aplicación tendrá tantos Activity como pantallas diferentes tenga. En nuestro caso sólo tenemos una pantalla, que es la que muestran las cartas en rejilla, ya que lo que se nos muestra al seleccionar una carta es un diálogo.

El código es muy sencillo: define una rejilla y delega en otra clase el poblado de la rejilla. Cuando la propia rejilla detecta que han pulsado sobre ella crea un diálogo al cual indica la posición que han pulsado para que este diálogo muestre la imagen que corresponda.

ImageAdapter.java
package com.autentia.android.scrum;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;

public class ImageAdapter extends BaseAdapter {
    private Context mContext;

    public ImageAdapter(Context c) {
        mContext = c;
    }

    public int getCount() {
        return image.length;
    }

    public Object getItem(int position) {
        return null;
    }

    public long getItemId(int position) {
        return 0;
    }

    // create a new ImageView for each item referenced by the Adapter
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView;
        if (convertView == null) {  // if it's not recycled, initialize some attributes
            imageView = new ImageView(mContext);
            imageView.setAdjustViewBounds(true);
            imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
        } else {
            imageView = (ImageView) convertView;
        }

        imageView.setImageResource(image[position]);
        return imageView;
    }

    // references to our images
    public static Integer[] image = {
            R.drawable.carta_0_cc, R.drawable.carta_1_2_cc, R.drawable.carta_1_cc, R.drawable.carta_2_cc, 
            R.drawable.carta_3_cc, R.drawable.carta_5_cc, R.drawable.carta_8_cc, R.drawable.carta_13_cc,
            R.drawable.carta_20_cc, R.drawable.carta_40_cc, R.drawable.carta_100_cc, R.drawable.carta_interrogacion_cc,
            R.drawable.carta_taza_cc
    };
}

Esta clase pasa a ser un simple adaptador. Posee un array con todas las cartas y se encarga de configurarlas para que puedan ser volcadas en la rejilla.

7 Conclusiones

Pues como habeis podido ver ha sido todo muy sencillo. Para poder desarrollar aplicaciones para Android no necesitais tener siquiera dispositivos: con el SDK, Eclipse e imaginación teneis todo lo que necesitais.

La documentación es buena y extensa. Se ve que los chicos de Google nos han tenido a los desarrolladores en mente ya que la curva de aprendijaze sabiendo java es sencilla, la barrera de entrada es muy pequeña y se han tomado muchas molestias en preparalo todo para que, con ejemplos sencillos, seamos capaces de desarrollar aquello que tengamos en mente.

Por mi parte nada más. Espero que os haya gustado el ejemplo, que useis estas cartas en vuestras reuniones de planificación y que y si necesitais hacer desarrollos para android o para iphone ya sabeis donde encontrarnos.

Saludos,
Raúl Expósito

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: