Curso Android: Construir un lector de feeds simple
Bienvenidos al primer capítulo del curso sobre Android daremos inicio con el funcionamiento de la arquitectura de esta plataforma móvil y los bloques básicos de una aplicación.
Kernel de Linux
En la base tenemos el kernel 2.6 de Linux, Android lo utiliza por su robustez demostrada y por la implementación de funciones básicas para cualquier sistema operativo, por ejemplo: seguridad, administración de memoria y procesos, implementación de conectividad de red (network stack) y varios interpretes (drivers) para comunicación con los dispositivos físicos(hardware).
Android utiliza como base el kernel de Linux pero los dos sistemas no son lo mismo, Android no cuenta con un sistema nativo de ventanas de Linux ni tiene soporte para glibc (libería estándar de C) ni tampoco es posible utilizar la mayoría de aplicaciones de GNU de Linux.
Además de todo lo ya implementado en el kernel de Linux, Android agrega algunas cosas específicas para plataformas móviles como la comunicación entre procesos (lograda a través del binder), la forma de manejar la memoria compartida (ashmem) y la administración de energía (con wakelocks). De las características únicas del kernel utilizado por Android encuentran más información en Android Kernel Features.
Librerías y ejecución
Sobre el kernel, tenemos un conjunto de librerías de C y C++ utilizadas por el sistema para varios fines como el manejo de la pantalla (surface manager), mapas de bits y tipos de letra (Free Type), gráficas en 2D y 3D (SGL y OpenGL), manejo de multimedia (Media Framework), almacenamiento de datos (SQLite) y un motor para las vistas web y el navegador (WebKit).
Junto a estas librerías, encontramos lo necesario para la ejecución de las aplicaciones a través de la máquina virtual Dalvik. Cada aplicación utiliza una instancia de la máquina virtual ejecutando un archivo DEX (Dalvik Executable) y el sistema está optimizado para que se ejecuten múltiples instancias de la máquina virtual. Se desarrolla en java pero no se utiliza una máquina virtual de Sun para su ejecución ni tampoco archivos CLASS.
Estructura de aplicaciones
Sobre las librerías encontramos una estructura que nos brinda un contexto para desarrollar, este framework permite a los desarrolladores aprovechar un sistema de vistas ya construido, administrar notificaciones y acessar datos a través de proveedores de contenido entre otras cosas.
Aplicaciones
Las aplicaciones centrales que incluye el sistema por defecto son: teléfono, navegador, manejo de contactos, etc. En esta capa de la arquitectura es donde trabajaremos desarrollando aplicaciones.
Bloques básicos de una aplicación
Una vez vista la arquitectura, empezaremos con lo fundamental para desarrollar una aplicación. Los componentes básicos de una aplicación son: activities, intents, views,services, content providers y broadcast receivers. Si dominan bien estos términos pueden saltar directo al código.
- Activities: son componentes de la interfaz que corresponde a una pantalla. Podemos visualizarlo como un mazo de cartas en el que tenemos varias cartas pero solamente una está hasta arriba. Una aplicación para una lista de cosas por hacer (remember the milk) puede tener una actividad para ingresar las cosas por hacer y otra actividad para mostrar el listado, en conjunto estas actividades conforman la aplicación.
- Intents: son mensajes que provocan notificaciones o cambios de estatus, que al ser recibidos por actividades o servicios pueden levantar procesos. De esta forma se unen componentes dentro de la misma aplicación o de diferentes aplicaciones.
- Views: son los componentes de la interfaz de usuario, diferentes vistas pueden agruparse a través de grupos logrando una jerarquía, esto se logra a través de la disposición de los componentes a través de un archivo XML.
- Services: son componentes que ejecutan operaciones en segundo plano y no tienen una interfaz de usuario. Por ejemplo, al escuchar música, hay un servicio encargado de la reproducción que se ejecuta de fondo y la aplicación que manipulamos le manda mensajes a este servicio diciéndole que se detenga, pause o reproduzca la siguiente canción.
- Content Providers: representan la abstracción para almacenar y obtener datos permanentes e incluso entre aplicaciones diferentes. El sistema incluye algunos proveedores de contenido útiles (audio, video, etc) y además pueden desarrollarse nuevos.
- Manifest: El archivo
AndroidManifest.xmles donde se configura la aplicación, se agregan actividades, se asignan permisos, etc. - Broadcast Receivers: son componentes que responden a avisos y anuncios de difusión (broadcast). Estos avisos provienen del sistema (batería baja, una llamada entrante, etc) y de aplicaciones (pasando avisos de una aplicación a otra). Aun que no muestran una interfaz de usuario algunas veces utilizan barras de progreso para mostrar avances. Estos se activan a través de mensajes asincrónicos llamados intents (mencionados arriba).
Ejemplo: Lector de feeds
La aplicación que realizaremos es un lector para el feed de Maestros del Web, queremos que al finalizar se vea de la siguiente forma:
Disposición inicial
Arrancamos descargando el código base que debe ser importado hacia un proyecto nuevo. En mi caso, el código descargado lo tengo en el folder
“/Users/ykro/Desktop/LectorFeedMDWBase”:
En este código encontrarás algunas cosas de ayuda para el desarrollo del proyecto. Si quisieran iniciar desde cero, con un proyecto nuevo, lo mínimo que deberían hacer para tenerlo listo es:
- Darle permiso a la aplicación para que pueda accesar a internet
Para hacer esto, vamos al archivo
AndroidManifest.xml y justo antes de la etiqueta que cierra manifest colocamos:
1
2
| <br /><uses-permission android:name="android.permission.INTERNET" /><br /> |
- Tener un LinearLayout con orientación vertical en el archivo de diseño principal.
Para lograr esto, en el archivo
/res/layout/main.xml es necesario tener:
1
2
3
| <br /><LinearLayout android:id="@+id/LL01" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android"></LinearLayout> |
- Tener una forma de reconocer XML.
En el código de demo se provee la clase
src/com/android/mdw/demo/XMLParser.java.
No vamos a repasar el código de cómo se hace el reconocimiento de XML, este parser tiene un funcionamiento general sin embargo para los fines de esta aplicación nos interesa que devuelva una lista simplemente encadenada (LinkedList de Java) y en cada posición un diccionario (HashMap de Java) porque de esa forma vamos a almacenar los datos. Esto se logra a través de un método llamado
parse() y adicional a esto, en el constructor elXMLParser debe recibir la dirección del feed que reconocerá.Diseño
Trabajaremos con los siguientes views para lograr el objetivo.
- LinearLayout: agrupa los elementos en un solo sentido (vertical u horizontal).
- ListView: muestra los elementos en un listado vertical con scroll.
- TextView: una etiqueta para colocar texto.
- Button: un botón para presiona.
Vamos a colocar primero un LinearLayout con arreglo vertical y dentro de él dos cosas:
- LinearLayout con arreglo horizontal (para la etiqueta y el botón).
- ListView para los elementos del feed.
Nuestro archivo
/res/layout/main.xml quedaría entonces de la siguiente forma:
01
02
03
04
05
06
07
08
09
10
11
12
13
| <br /><LinearLayout android:id="@+id/LL01" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android"> <LinearLayout android:id="@+id/LL02" android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content"> <TextView android:id="@+id/tvLoadTip" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Presione el botón para cargar datos"><br /> </TextView><br /> <Button android:id="@+id/btnLoad" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Enviar"><br /> </Button><br /> </LinearLayout> <ListView android:id="@+id/lstData" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="5dip"> </ListView></LinearLayout></p><p> |
Es importante notar los identificadores que colocamos, ya que los utilizaremos más adelante.
Mostrar datos siguiendo el diseño
Luego de terminado el diseño podemos enfocarnos en el código que nos permitirá poblar elListView con los elementos del feed que vamos a leer. Trabajemos ahora en el archivo
src/com/android/mdw/demo/Main.java. Inicialmente encontramos 2 constantes que utilizaremos para guardar la información en un HashMap.
1
2
3
| static final String DATA_TITLE = "T";static final String DATA_LINK = "L"; |
Agregamos una estructura de datos estática para guardar la información del feed una vez la fuimos a traer y reconocimos.
1
2
| static LinkedList |
En una aplicación real esto no debería hacerse nunca, todo campo estático (variable de clase) debería ser final y en este caso no lo es porque lo asignaremos luego de que el parser devuelva la data. La forma correcta de realizar este almacenamiento volátil es utilizando clases de aplicación, algo que veremos en próximos capítulos y si se quisiera almacenamiento no volátil se tiene acceso a base de datos a través de SQLite.
Haremos también una función auxiliar que recibe una lista de mapas, y utilizando esta data crea un adaptador para poblar al ListView del diseño.
1
2
3
4
5
6
7
8
9
| private void setData(LinkedList SimpleAdapter sAdapter = new SimpleAdapter(getApplicationContext(), data, android.R.layout.two_line_list_item, new String[] { DATA_TITLE, DATA_LINK }, new int[] { android.R.id.text1, android.R.id.text2 }); ListView lv = (ListView) findViewById(R.id.lstData); lv.setAdapter(sAdapter);} |
Nuestro objetivo final es tomar una vista (ListView) creada en el diseño y poblarla de datos a través de un adaptador. La información que representaremos por cada fila del listado es el título del artículo y el link del mismo. Para nuestro caso vamos a utilizar el adaptador simple (SimpleAdapter) que recibe 5 parámetros.
- Un contexto sobre el cual puede trabajar, lo obtenemos llamando a
getApplicationContext() - Un Listado de mapas con la data a mostrar, lo recibimos como parámetro en la función.
- Un Layout para cada fila, en este caso usaremos uno de los predeterminados de Android llamado
android.R.layout.two_line_list_itemeste nos permite tener elementos con información en 2 líneas. - Un arreglo de String con las llaves del diccionario que representarán los datos obtenidos de la lista especificada anteriormente.
- Un arreglo de int con los identificadores de los elementos de cada línea
Con esta configuración, el adaptador nos dará elementos de 2 líneas mostrando en la primera el título del artículo y en la segunda el link del artículo. Esta configuración resulta muy útil porque todo está hecho, sin embargo no es personalizable, si queremos cambiar algunas cosas (fondo, color, letra, etc) de cada elemento sería necesario agregar otro layout para cada fila y si deseamos mostrar más información o no utilizar una lista de mapas entonces sería necesario hacer nuestro propio adaptador (esto lo haremos en próximos capítulos).
Carga de datos
La carga de datos nos tomará cierto tiempo, vamos a mostrarle un aviso de que los datos se están cargando. Queremos que el aviso se muestre y como tarea de fondo cargue los datos (esto NO es un servicio) vamos a necesitar de un hilo de ejecución que haga esta tarea.
Android nos presenta la restricciones que no podemos alterar, los elementos de interfaz gráfica en un hilo de ejecución que no sea el principal por lo que es necesario utilizar un manejador para enviar un mensaje de un hilo a otro cuando la carga de datos haya terminado. Agregaremos entonces una variable para el diálogo de progreso es necesaria una variable global porque iniciamos el diálogo en una función y lo ocultamos en otra
1
2
| private ProgressDialog progressDialog; |
Otra para el manejador de mensajes entre hilos de ejecución:
01
02
03
04
05
06
07
08
09
10
11
| private final Handler progressHandler = new Handler() { @SuppressWarnings("unchecked") public void handleMessage(Message msg) { if (msg.obj != null) { data = (LinkedList setData(data); } progressDialog.dismiss(); }}; |
Para el manejador, haremos una clase interna y anónima este tipo de clases las verán seguido para agregar funcionalidades que requieren de clases pero su tarea es tan pequeña que no vale la pena darle un nombre (y luego terminar con muchos nombres que se utilizan una sola vez).
Dentro de la clase Handler hemos agregado la anotación
@SuppressWarnings("unchecked") para evitar una advertencia por la conversión de tipo (type casting) de objeto hacia lista realizada adelante. Es necesario implementar el métodohandleMessage(Message msg) y es aquí donde revisamos si viene un mensaje, lo convertimos a lista, llamamos al método setData previamente definido y cerramos el diálogo de progreso.
Por último, vamos a hacer una función auxiliar que inicia la carga de datos, muestra al usuario un diálogo de que se están cargando los datos y levanta un thread para lograr la carga.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
| private void loadData() { ProgressDialog progressDialog = ProgressDialog.show( Main.this, "", "Por favor espere mientras se cargan los datos...", true); |
new Thread(new Runnable(){ @Override
public void run() { XMLParser parser = new XMLParser(feedUrl); Message msg = progressHandler.obtainMessage(); msg.obj = parser.parse(); progressHandler.sendMessage(msg); }}).start();}
Para el diálogo de progreso, le enviamos 4 argumentos:
- Contexto, dado por la aplicación, como esta función la vamos a llamar desde una clase interna, el acceso es con el campo this de la clase Main.
- Título, no nos interesa que tenga título el aviso.
- Mensaje, le pedimos al usuario que espere.
- Indeterminado, no se puede cuantificar cuanto tiempo falta o cuanto progreso se ha logrado entonces el aviso será de duración indeterminada.
Luego tenemos un Thread a partir de otra clase interna y anónima que es una instancia deRunnable y definimos el método run donde se especifica lo que hará el hilo de ejecución y llamamos al método start para iniciarlo. En el
método run instanciamos un parser nuevo deXML construimos un mensaje a partir del manejador y se lo enviamos con la data obtenida del parser.Llamando todo desde la función onCreate
Trabajemos dentro de la función
onCreate la cual se llama cuando la actividad es creada, primero le ponemos un bonito título a la ventana.
1
2
| setTitle("Lector de feed Maestros del Web"); |
El siguiente paso es asociarle una acción al botón para que cargue los datos, primero obtenemos el botón haciendo uso de la función
findViewById con el identificador colocado en el diseño para posteriormente colocarle las acciones a realizar cuando se presione a través del método setOnClickListener. Este método recibe una instancia de la claseOnClickListener, de nuevo vamos a hacer una clase anónima y sobrecargaremos el método onClick.
1
2
3
4
5
6
7
| Button btn = (Button) findViewById(R.id.btnLoad);btn.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { }}); |
Dentro de la función
onClick validaremos si el ListView ya tiene datos, si no los tiene los cargamos con una llamada a loadData pero si ya los tiene vamos a mostrarle un diálogo de alerta al usuario preguntando si está seguro que desea hacerlo.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
| ListView lv = (ListView) findViewById(R.id.lstData);if (lv.getAdapter() != null) { AlertDialog.Builder builder = new AlertDialog.Builder(Main.this); builder.setMessage("ya ha cargado datos, ¿Está seguro de hacerlo de nuevo?") .setCancelable(false) .setPositiveButton("Si", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int id) { loadData(); } }) .setNegativeButton("No", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int id) { dialog.cancel(); } }) .create() .show();} else { loadData();} |
Para crear el diálogo de alerta, encadenamos llamadas a partir de un constructor
AlertDialog.Builder que recibe un contexto y de nuevo utilizamos Main.this.
Estas llamadas encadenadas nos permiten:
- Establecer un mensaje (setMessage)
- Obligar al usuario a responder y no solo cerrar (setCancelable)
- Colocar una acción cuando la respuesta es positiva (setPositiveButton)
- Colocar una acción cuando la respuesta es negativa (setNegativeButton)
- Crear el diálogo (create)
- Mostrar el diálogo (show)
Las más complicadas son las llamadas para colocar acciones ante una respuesta positiva o negativa. Ambas requieren de un Listener que se disparara cuando el usuario presione el botón. Dentro del método
onClick de otra clase anónima más, cuando es positivo llamamos a loadData y cuando es negativo ocultamos el diálogo.
Luego de todo, el código completo queda de esta forma:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| Button btn = (Button) findViewById(R.id.btnLoad);btn.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { ListView lv = (ListView) findViewById(R.id.lstData); if (lv.getAdapter() != null) { AlertDialog.Builder builder = new AlertDialog.Builder(Main.this); builder.setMessage("ya ha cargado datos, ¿Está seguro de hacerlo de nuevo?") .setCancelable(false) .setPositiveButton("Si", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int id) { loadData(); } }) .setNegativeButton("No", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int id) { dialog.cancel(); } }) .create() .show(); } else { loadData(); } }}); |
Para terminar, queremos aprovechar que contamos con el link de cada artículo y que cuando el usuario presione algún elemento en nuestra aplicación pueda visitarse el artículo vía el navegador.
01
02
03
04
05
06
07
08
09
10
11
| ListView lv = (ListView) findViewById(R.id.lstData);lv.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView av, View v, int position, long id) { HashMap Intent browserAction = new Intent(Intent.ACTION_VIEW, Uri.parse(entry.get(DATA_LINK))); startActivity(browserAction); }}); |
Esto lo conseguimos modificando el evento de click sobre los ítems de la lista (setOnItemClickListener) primero obteniendo el elemento que ha sido presionado y luego con un intent de ACTION_VIEW este intent predefinido realiza la acción más obvia para mostrar datos al usuario, en nuestro caso se le envía un URI lo que permite visualizarlo con el navegador.
Descarga:
Puedes descargar el código de la aplicación completa y funcional en (Github): Construir un lector de feeds simple.
Conclusión
- Arquitectura de Android: conocimos la forma en que está construída la arquitectura.
- Bloques básicos de una aplicación: los elementos principales de una aplicación de Android.
- Manifest: aprendimos la forma y la ubicación del manifest, archivo para configuración de la aplicación.
- LinearLayout, TextView y Button: tuvimos un primer acercamiento a los elementos de la UI a través de estos 3 controles, una forma de manejar el diseño (layout) y dos controles para la interfaz de la aplicación.
- Eventos OnClick: aprendimos a manejar los eventos con listeners y asociar acciones para cuando el usuario interactúa con los elementos de la UI.
- Dialogs: iniciamos a trabajar con diálogos para mostrar avisos al usuario, en este caso únicamente de confirmación previo a la carga de datos.
- Threads y Handlers: el proceso de la carga y parsing de datos fue realizado con un thread extra y para la comunicación con el thread principal utilizamos un Message Handler.
- Iniciar otras activities: aprendimos el mecanismo necesario para iniciar otras activities aun que no fueran hechas por nosotros.
Las imágenes fueron tomadas de http://developer.android.com
Siguiente capítulo: UI en Android y aumentar la funcionalidad de un lector de feeds →
El logotipo de Android es compartido por Google bajo licencia Creative Commons por Atribución.
ANDROID: Es un sistema operativo (como el Windows) pero para teléfonos móviles que pueden ser de muchas marcas y que ha hecho Google, el sitio donde buscas cosas. Son como los iPhones pero de menor diseño (menos el mío, que es precioso) y los que lo tienen son personas muy frikis y que seguro que se sienten por encima tuya. Huye de ellos. Al igual que los iPhone, puedes sacar de quicio a sus dueños diciendo lo siguiente:
INSTAGRAM: es un programa que se instala en el iPhone y que sirve para que cuando haces una foto, la foto se salga como esas fotos de la gente que aún usan cámaras lomográficas y que todos llamamos perroflautas. Para resumirlo, es como quitar la gracia de tener una cámara de fotos lomográfica pero quedarte con el mismo resultado, pero en una foto mala del iPhone. Vamos que no tiene sentido pero no hay moderno de iPhone que se precie que no lo tenga instalado.
FOURSQUARE: es un programita que usa el gps que trae el smarphone y te dice cosas que tienes alrededor tuya y puedes decir a los demás a través de Facebook y de Twitter que estás en ese sitio. Te da mucho puntos si lo que quieres es dártela de interesante y que todo el mundo pueda saber que estás obsesionado con sitioscomo Bershka o en echar la Loteria en la administración de tu barrio.
TWITTER: Es como el facebook, pero con desconocidos que leen tus cosas, y tú no te puedes alterar porque esto pase.
LATITUDE: Es un programa cuyo fin último y demoniaco es que Google lo sepa todo de ti y ofrecerle esta información a compañías terceras para que cuando busques una tienda donde comprar compresas solo te salga como sugerido la recicladora de papel del polígono que tienes enfrente de casa.
LLAMADA DE TELÉFONO: Es un concepto antiguo 
ANGRY BIRDS: Un juego tontísimo pero al que no puedes dejar de jugar. Consiste en tirar pájaros que hacen cosas contra ladrillos para matar cerdos verdes.Da igual que hayas pasado todas las fases del Halo, si no juegas a esto, no eres nadie.
BLACKBERRY: Puedes que si conoces a alguien que era empresario o rico antes de que todo el mundo tuviera un iPhone o un Android hayas escuchado hablar de ellas. Son smartphones que antes servían para recibir email y que hoy sirven para lo mismo que los iPhone y Android. Sus dueños también se creen que son “viejos ricos” y miran con mucho escepticismo a los “nuevos ricos” que somos los que tenemos Android y iPhone porque lo suyo viene de antiguo. Son como el estamento nobiliario de la telefonía Puedes sacarlos de quicio diciéndoles cosas como:
