Taller Práctico de Android
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Taller Práctico de Android

on

  • 5,540 views

Transparencias de apoyo del Taller Práctico de Android impartido en la iParty 13 (http://iparty.aditel.org). El código fuente del caso de estudio puede encontrarse aquí: ...

Transparencias de apoyo del Taller Práctico de Android impartido en la iParty 13 (http://iparty.aditel.org). El código fuente del caso de estudio puede encontrarse aquí: https://bitbucket.org/jmunoz/android-example-eltiempo

Statistics

Views

Total Views
5,540
Views on SlideShare
5,280
Embed Views
260

Actions

Likes
3
Downloads
103
Comments
0

3 Embeds 260

http://www.nabbel.es 256
http://feeds.feedburner.com 3
http://grandpotato18.appspot.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Taller Práctico de Android Presentation Transcript

  • 1. http://www.nabbel.es Taller Práctico de Android Javier Muñoz (jmunoz@nabbel.es) @jmunozf
  • 2. PresentaciónAutobomboConceptos BásicosDesarrollo Aplicación
  • 3. PresentaciónAutobomboConceptos BásicosDesarrollo Aplicación
  • 4. ¿Quién soy? Formación Académica Exp. Profesional ● 2003 Ing. Informática ● 2010 Nabbel Universitat Jaume I Director ● 2008 PhD Ing. Software ● 2008 Prodevelop Universidad Politécnica Jefe de Proyectos, I+D+i de Valencia MOSKitt@jmunozf http://www.moskitt.org ● 2007 Integranova Jefe de Proyectos Experiencia con Android ● https://play.google.com/store/apps/developer?id=Nabbel ● Profesor Curso Introducción Android en Universidad de Verano de la Universidad CEU Cardenal Herrera
  • 5. ¿Qué vamos a hacer hoy? Lector del tiempo Datos de http://www.aemet.es/ Aprenderemos Uso básico del SDK Estructura proyecto Android Implementar pantallas Parseo XML datos remotos ContentProviders Tareas en background https://bitbucket.org/jmunoz/android-example-eltiempo
  • 6. PresentaciónAutobomboConceptos BásicosDesarrollo Aplicación
  • 7. PresentaciónAutobomboConceptos BásicosDesarrollo Aplicación
  • 8. Necesidad de Información ¿Quién participa? ¿Cuándo empieza? ¿Cómo llegar?¿Dónde es? ¿Qué ocurre ahora? ¿Hay más parecidos?
  • 9. Escenarios de Aplicación Festivales Musicales Museos Competiciones DeportivasCongresos Ferias Eventos de Empresa Fiestas Populares Parques Temáticos
  • 10. Algunas Aplicaciones Nabbel Eventosfera INNOVALENCIA Follow UsSan Silvestre Romeria 2011 2010
  • 11. Algunas Aplicaciones Nabbel
  • 12. PresentaciónAutobomboConceptos BásicosDesarrollo Aplicación
  • 13. PresentaciónAutobomboConceptos BásicosDesarrollo Aplicación
  • 14. Android: Arquitectura
  • 15. Android: SDKSDK + AVD Plataforma + Emuladores Documentación + Ejemplos Librerías de 3as partes Google Maps GalaxyTabEclipse Plugin Proyecto Eclipse tipo Android Herramientas Empaquetado Debugging Gestión del Emulador (copiar archivos, pantallazos, etc.)
  • 16. Android: Arquitectura AplicacionesActivities Content Providers Pantallas... independientes Acceso a datos entre entre sí aplicaciones Concepto principal Independientes de su persistencia (XML, SQLite, remoto...)Services Funcionalidad de larga Broadcast Receivers duración sin UI Escucha mensajes de difusión Services vs Threads → Services funcionan con app Ejemplos: pantalla apagada, cerrada archivo descargados, batería baja...
  • 17. Android: Arquitectura AplicacionesIntents Acciones estándar: ACTION_MAIN Mensajes asíncronos entre ACTION_VIEW componentes ACTION_ATTACH_DATA ACTION_EDIT Enlazan componentes en ACTION_PICK tiempo de ejecución ACTION_CHOOSER ACTION_GET_CONTENT Contienen: ACTION_DIAL Action ACTION_CALL ACTION_SEND URI ACTION_SENDTO ACTION_ANSWER Extras ACTION_INSERT ACTION_DELETE ¿Qué acciones hay? ACTION_RUN Definidas en SDK ACTION_SYNC ACTION_PICK_ACTIVITY OpenIntents: ACTION_SEARCH ACTION_WEB_SEARCHhttp://www.openintents.org/en/intentstable ACTION_FACTORY_TEST
  • 18. Android: Arquitectura AplicacionesEjemplos de Acción/URI en Intents ACTION_VIEW content://contacts/people/1 ACTION_DIAL content://contacts/people/1 ACTION_DIAL tel:123 ACTION_EDIT content://contacts/people/1Ejecución de Intents Intent i = new Intent(this, IntentA.class); startActivity(i); Uri uri = Uri.parse( "http://iparty.aditel.org" ); startActivity( new Intent( Intent.ACTION_VIEW, uri ) );
  • 19. PresentaciónAutobomboConceptos BásicosDesarrollo Aplicación
  • 20. PresentaciónAutobomboConceptos BásicosDesarrollo Aplicación
  • 21. Desarrollo Aplicación 1.- Crear Proyecto 2.- Crear Emulador 3.- Lanzar App en el Emulador 4.- Editar Interfaz Usuario 5.- Actualizar Interfaz de Usuario 6.- Leer Datos del Servidor 7.- Cargar Imagen en Background 8.- Configurar Spinner 9.- Empaquetar para Distribución
  • 22. Paso 1: Crear proyectoNew > Android ProjetSelect Build Target: Usaremos 2.1 (level 7)
  • 23. Android: Arquitectura AplicacionesActivity básica package com.example.helloandroid; import android.app.Activity; import android.os.Bundle; public class HelloAndroid extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } }
  • 24. Ciclo de VidaActivities: Ciclo de Vida
  • 25. Desarrollo Aplicación 1.- Crear Proyecto 2.- Crear Emulador 3.- Lanzar App en el Emulador 4.- Editar Interfaz Usuario 5.- Actualizar Interfaz de Usuario 6.- Leer Datos del Servidor 7.- Cargar Imagen en Background 8.- Configurar Spinner 9.- Empaquetar para Distribución
  • 26. Desarrollo Aplicación 1.- Crear Proyecto 2.- Crear Emulador 3.- Lanzar App en el Emulador 4.- Editar Interfaz Usuario 5.- Actualizar Interfaz de Usuario 6.- Leer Datos del Servidor 7.- Cargar Imagen en Background 8.- Configurar Spinner 9.- Empaquetar para Distribución
  • 27. SDK y AVD Manager Paso 2: Crear Emulador● AVD Manager ● Gestionar emuladores
  • 28. Desarrollo Aplicación 1.- Crear Proyecto 2.- Crear Emulador 3.- Lanzar App en el Emulador 4.- Editar Interfaz Usuario 5.- Actualizar Interfaz de Usuario 6.- Leer Datos del Servidor 7.- Cargar Imagen en Background 8.- Configurar Spinner 9.- Empaquetar para Distribución
  • 29. Desarrollo Aplicación 1.- Crear Proyecto 2.- Crear Emulador 3.- Lanzar App en el Emulador 4.- Editar Interfaz Usuario 5.- Actualizar Interfaz de Usuario 6.- Leer Datos del Servidor 7.- Cargar Imagen en Background 8.- Configurar Spinner 9.- Empaquetar para Distribución
  • 30. Paso 3: Lanzar App en el Emulador Herramientas● Emulator ● Basado en QEMU ● Diferentes instancias – Tamaños de pantalla y densidad – Skins ● Soporta: – Ubicaciones – SD Cards ● NO soporta – Cámara – Multi-touch
  • 31. Desarrollo Aplicación 1.- Crear Proyecto 2.- Crear Emulador 3.- Lanzar App en el Emulador 4.- Editar Interfaz Usuario 5.- Actualizar Interfaz de Usuario 6.- Leer Datos del Servidor 7.- Cargar Imagen en Background 8.- Configurar Spinner 9.- Empaquetar para Distribución
  • 32. Desarrollo Aplicación 1.- Crear Proyecto 2.- Crear Emulador 3.- Lanzar App en el Emulador 4.- Editar Interfaz Usuario 5.- Actualizar Interfaz de Usuario 6.- Leer Datos del Servidor 7.- Cargar Imagen en Background 8.- Configurar Spinner 9.- Empaquetar para Distribución
  • 33. Paso 4: Editar Interfaz de UsuarioDefinición declarativa (XML) de la Interfaz Layouts → Posicionamiento Views → Interacción
  • 34. Android: Interfaz de Usuario
  • 35. Android: Interfaz de Usuario<?xml version="1.0" encoding="utf-8"?><!-- Main Layout of Status Activity --><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" android:textSize="30sp" android:layout_margin="10dp" android:text="@string/titleStatus"/> <EditText android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1" android:hint="@string/hintText" android:id="@+id/editText" android:gravity="top|center_horizontal"></EditText> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/buttonUpdate" android:textSize="20sp" android:id="@+id/buttonUpdate"></Button></LinearLayout>
  • 36. Android: Interfaz de Usuario
  • 37. Desarrollo Aplicación 1.- Crear Proyecto 2.- Crear Emulador 3.- Lanzar App en el Emulador 4.- Editar Interfaz Usuario 5.- Actualizar Interfaz de Usuario 6.- Leer Datos del Servidor 7.- Cargar Imagen en Background 8.- Configurar Spinner 9.- Empaquetar para Distribución
  • 38. Desarrollo Aplicación 1.- Crear Proyecto 2.- Crear Emulador 3.- Lanzar App en el Emulador 4.- Editar Interfaz Usuario 5.- Actualizar Interfaz de Usuario 6.- Leer Datos del Servidor 7.- Cargar Imagen en Background 8.- Configurar Spinner 9.- Empaquetar para Distribución
  • 39. Definición UI Paso 5: Actualizar Interfaz de Usuario Definición UI Procedural DeclarativaTextView tv= new TextView(this) <TextViewtv.setWidth(100); android:id="@+id/nameLabel"tv.setHeight(60); android:text="phone:"tv.setText("phone"); android:layout_width="100"setContentView(tv); android:layout_height="60" />
  • 40. Identificación Componentes UI Android UI XML● El atributo id identifica la vista dentro de la jerarquía● El símbolo (@) indica que viene un identificador● El símbolo (+) indica que es un nombre nuevo (no una referencia)● Todas las vistas deben definir: <TextView android:id="@+id/nameLabel" ● android:layout_width android:text="phone:" android:layout_width="100" ● android:layout_height android:layout_height="60" />
  • 41. Referenciar Componentes UI Android UI XML● Clase Java con los identificadores de recursos: ● Generada automáticamente al compilar (no tocar!!) ● Se llamará: nuestro.paquete.R ● Contiene identificadores de: – Widgets de los Layouts – Los archivos contenidos en “res/” (layouts, drawables, strings, colors, etc.) ● Widgets accesibles desde el código Java Button btn = (Button) findViewById(R.id.acceptButton);
  • 42. Desarrollo Aplicación 1.- Crear Proyecto 2.- Crear Emulador 3.- Lanzar App en el Emulador 4.- Editar Interfaz Usuario 5.- Actualizar Interfaz de Usuario 6.- Leer Datos del Servidor 7.- Cargar Imagen en Background 8.- Configurar Spinner 9.- Empaquetar para Distribución
  • 43. Desarrollo Aplicación 1.- Crear Proyecto 2.- Crear Emulador 3.- Lanzar App en el Emulador 4.- Editar Interfaz Usuario 5.- Actualizar Interfaz de Usuario 6.- Leer Datos del Servidor 7.- Cargar Imagen en Background 8.- Configurar Spinner 9.- Empaquetar para Distribución
  • 44. Tratamiento de XML Paso 6: Leer datos del servidor● Opciones para manejar el XML ● SAX – Basado en eventos – Compatible con handlers Java pre-existente – El más “estándar” ● SAX Simplificado – Se asocian eventos a etiquetas – Evita gestión en el handler de situación actual ● DOM – Estructura tipo árbol – Mayor consumo de memoria ● XMLPull – Lectura del XML guiada – Pedimos elementos
  • 45. SAX Simplificado SAX Simplificadopublic List<Noticia> parse(){ item.getChild("link").setEndTextElementListener( final List<Noticia> noticias = new ArrayList<Noticia>(); new EndTextElementListener(){ public void end(String body) { RootElement root = new RootElement("rss"); noticiaActual.setLink(body); Element channel = root.getChild("channel"); } Element item = channel.getChild("item"); }); item.setStartElementListener(new StartElementListener(){ item.getChild("description").setEndTextElementListener( public void start(Attributes attrs) { new EndTextElementListener(){ noticiaActual = new Noticia(); public void end(String body) { } noticiaActual.setDescripcion(body); }); } }); item.setEndElementListener(new EndElementListener(){ public void end() { ... noticias.add(noticiaActual); } }); Xml.parse(this.getInputStream(), item.getChild("title").setEndTextElementListener( Xml.Encoding.UTF_8, new EndTextElementListener(){ root.getContentHandler()); public void end(String body) { noticiaActual.setTitulo(body); } return noticias; }); }
  • 46. Desarrollo Aplicación 1.- Crear Proyecto 2.- Crear Emulador 3.- Lanzar App en el Emulador 4.- Editar Interfaz Usuario 5.- Actualizar Interfaz de Usuario 6.- Leer Datos del Servidor 7.- Cargar Imagen en Background 8.- Configurar Spinner 9.- Empaquetar para Distribución
  • 47. Desarrollo Aplicación 1.- Crear Proyecto 2.- Crear Emulador 3.- Lanzar App en el Emulador 4.- Editar Interfaz Usuario 5.- Actualizar Interfaz de Usuario 6.- Leer Datos del Servidor 7.- Cargar Imagen en Background 8.- Configurar Spinner 9.- Empaquetar para Distribución
  • 48. Paso 7: Cargar Imagen enno sepas (3) Android: Cosas que quizá Background Tareas en background: AsyncTaskprivate class DownloadImageTask extends AsyncTask<String, Void, Bitmap> { ProgressDialog dialog = new ProgressDialog(context); protected void onPreExecute() { this.dialog.setMessage("Progress start"); this.dialog.show(); } protected Bitmap doInBackground(String... urls) { return loadImageFromNetwork(urls[0]); } protected void onPostExecute(Bitmap result) { mImageView.setImageBitmap(result); dialog.dismiss(); }} new DownloadImageTask().execute(“http://urlimage”);
  • 49. Desarrollo Aplicación 1.- Crear Proyecto 2.- Crear Emulador 3.- Lanzar App en el Emulador 4.- Editar Interfaz Usuario 5.- Actualizar Interfaz de Usuario 6.- Leer Datos del Servidor 7.- Cargar Imagen en Background 8.- Configurar Spinner 9.- Empaquetar para Distribución
  • 50. Desarrollo Aplicación 1.- Crear Proyecto 2.- Crear Emulador 3.- Lanzar App en el Emulador 4.- Editar Interfaz Usuario 5.- Actualizar Interfaz de Usuario 6.- Leer Datos del Servidor 7.- Cargar Imagen en Background 8.- Configurar Spinner 9.- Empaquetar para Distribución
  • 51. Android: Cosas que quizáSpinner (3) Paso 8: Configurar no sepas Adapters Spinner● Desplegable de Selección● Adapter para las opciones
  • 52. Android: Cosas que quizáSpinner (3) Paso 8: Configurar no sepas Adapters● Adaptar datos para una necesidad● LisAdapters (Interface)→ Datos para ser mostrados en ListView ● (abstract) android.widget.BaseAdapter – Clase base para todos los Adapter ● android.widget.ArrayAdapter<T> – Mostrar contenido de un Array o List public ArrayAdapter (Context context, int resource, int textViewResourceId, List<T> objects)
  • 53. Desarrollo Aplicación 1.- Crear Proyecto 2.- Crear Emulador 3.- Lanzar App en el Emulador 4.- Editar Interfaz Usuario 5.- Actualizar Interfaz de Usuario 6.- Leer Datos del Servidor 7.- Cargar Imagen en Background 8.- Configurar Spinner 9.- Empaquetar para Distribución
  • 54. Desarrollo Aplicación 1.- Crear Proyecto 2.- Crear Emulador 3.- Lanzar App en el Emulador 4.- Editar Interfaz Usuario 5.- Actualizar Interfaz de Usuario 6.- Leer Datos del Servidor 7.- Cargar Imagen en Background 8.- Configurar Spinner 9.- Empaquetar para Distribución
  • 55. Android:Empaquetar para no sepas (3) Paso 9: Cosas que quizá Distribución Compilar y Firmar● Utilizando Eclipse ● Opción del menú contextual: – Android Tools > Export Signed Application Package ● Asistente para seleccionar: – Archivo destino – Almacén de clave – Clave ● Zipalign – Ejecutado por el asistente – Los datos descomprimidos empiezan en una cierta posición – Mejora de rendimiento en dispositivos
  • 56. Android: Cosas que quizá no sepas (3) Crear clave privada Creación Clave Privada● Condiciones ● Contiene los datos tuyos o de tu organización ● Validez después de 22 Octubre 2033 ● NO utilices la de debug● Creación$ keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000 ● Pedirá: – Definir los datos de la organización – Crear el password del almacén de claves – Crear el password de la clave
  • 57. http://www.nabbel.es Taller Práctico de Android Javier Muñoz (jmunoz@nabbel.es) @jmunozf