Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

IOF Labs Weekend - Android (27082011)

823 views

Published on

Laboratorio para crear una aplicación android básica. Zodiac sign finder

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

IOF Labs Weekend - Android (27082011)

  1. 1. IOF Labs Weekend powered by  27/08/2011  
  2. 2. La aplicación para descargar: http://goo.gl/rqk4D Link a esta presentación: http://goo.gl/tIH8q
  3. 3. Agenda <ul><ul><li>Ambiente de desarrollo </li></ul></ul><ul><ul><li>Estructura de un proyecto Android </li></ul></ul><ul><ul><li>Activities </li></ul></ul><ul><ul><li>Time to code:)  </li></ul></ul><ul><li>Construiremos una aplicación Android </li></ul><ul><li>un poco más allá del Hello World. </li></ul><ul><li>Nivel: Básico </li></ul>
  4. 4. Ambiente de desarrollo
  5. 5. Ambiente de desarrollo <ul><ul><li>Android SDK </li></ul></ul><ul><ul><li>Android SDK completo </li></ul></ul><ul><ul><li>AVD Manager </li></ul></ul><ul><ul><li>Eclipse </li></ul></ul><ul><ul><li>Plugin Android para Eclipse </li></ul></ul><ul><ul><li>Ligar Eclipse con el SDK de Android </li></ul></ul><ul><ul><li>Consola de Logs </li></ul></ul>
  6. 6. Ambiente de desarrollo <ul><li>Android SDK </li></ul><ul><ul><li>Windows: http://dl.google.com/android/android-sdk_r12-windows.zip </li></ul></ul><ul><ul><li>Linux:  http://dl.google.com/android/android-sdk_r12-linux_x86.tgz </li></ul></ul><ul><ul><li>Mac:  http://dl.google.com/android/android-sdk_r12-mac_x86.zip </li></ul></ul><ul><li>Los descargamos y descomprimimos en c:/ o /home y esta ubicación será conocida como  ANDROID_HOME   </li></ul>
  7. 7. Ambiente de desarrollo <ul><li>Android SDK completo </li></ul><ul><ul><li>Ejecutamos  ANDROID_HOME/SDK Manager para descargar las distintas versiones del SDK. Para linux  ANDROID_HOME/tools/android </li></ul></ul><ul><ul><li>Seleccionamos las versiones que necesitemos y le damos instalar </li></ul></ul>
  8. 8. Ambiente de desarrollo Android SDK completo
  9. 9. Ambiente de desarrollo <ul><li>AVD Manager </li></ul><ul><ul><li>Un AVD Manager es el emulador de un teléfono con el sistema operativo Android.  </li></ul></ul><ul><ul><li>Un AVD Manager está relacionado a un  SDK del sistema operativo Android </li></ul></ul><ul><ul><li>Es necesario crear un AVD Manager para poder desarrollar aplicaciones </li></ul></ul>
  10. 10. Ambiente de desarrollo <ul><li>AVD Manager </li></ul><ul><ul><li>Ejecutamos  ANDROID_HOME/SDK Manager </li></ul></ul><ul><ul><li>Seleccionamos Virtual Devices </li></ul></ul><ul><ul><li>Seleccionamos New...  </li></ul></ul><ul><ul><li>Lo nombramos y escogemos la versión de Android que deseamos emular en el campo   target,  los campos restantes los dejamos como vienen </li></ul></ul><ul><li>Listo, ya hemos instalado el SDK de Android y un emulador para trabajar! </li></ul>
  11. 11. Ambiente de desarrollo <ul><li>Eclipse </li></ul>
  12. 12. Ambiente de desarrollo <ul><li>Eclipse </li></ul><ul><ul><li>El IDE recomendado por Google para desarrollar en Android es Eclipse, aunque se puede desarrollar usando un block de notas, vi y en línea de comandos. Si alguien lo hace que nos presuma! :P </li></ul></ul><ul><ul><li>Usaremos Eclipse Galileo 3.5.0  http://www.eclipse.org/downloads/packages/release/galileo/r </li></ul></ul>
  13. 13. Ambiente de desarrollo <ul><li>Plugin Android para Eclipse </li></ul>
  14. 14. Ambiente de desarrollo <ul><li>Plugin Android para Eclipse </li></ul><ul><ul><li>Abrimos Elipse </li></ul></ul><ul><ul><li>Vamos al menú Help -> Install New Software  </li></ul></ul><ul><ul><li>En work with copiamos  https://dl-ssl.google.com/android/eclipse/  y clic en Add...  </li></ul></ul><ul><ul><li>En name ponemos ADT y clic en OK  </li></ul></ul><ul><ul><li>Seleccionamos Developer Tools y continuamos con el wizard hasta que nos se instala y nos pide reiniciar nuestro IDE </li></ul></ul>
  15. 15. Ambiente de desarrollo <ul><li>Ligar Eclipse con el SDK de Android </li></ul>
  16. 16. Ambiente de desarrollo <ul><li>Ligar Eclipse con el SDK de Android </li></ul><ul><ul><li>Dentro de Eclipse  vamos al menú Windows -> Preferences </li></ul></ul><ul><ul><li>En Preferences seleccionamos la opción Android  </li></ul></ul><ul><ul><li>En  SDK Location ponemos la ruta que hace referencia a ANDROID_HOME   </li></ul></ul><ul><ul><li>Clic en Ok </li></ul></ul>
  17. 17. Ambiente de desarrollo <ul><li>Consola de Logs  </li></ul><ul><ul><li>  Para avanzar rápido vamos a   http://repcax.blogspot.com/2010/06/consola-de-logs-para-android.html </li></ul></ul><ul><li>13 Slides para tener listo nuestro ambiente! Ufff... so tired! </li></ul>
  18. 18. Estructura de un proyecto Android
  19. 19. Estructura de un proyecto Android
  20. 20. Estructura de un proyecto Android <ul><ul><li>src </li></ul></ul><ul><li>Aquí se encuentra nuestra jerarquía de paquetes y todas nuestras clases java. </li></ul>
  21. 21. Estructura de un proyecto Android <ul><ul><li>gen </li></ul></ul><ul><li>Aquí se encuentran las clases generadas automáticamente por el SDK de Android. </li></ul><ul><li>Encontramos a R.java la cual nos sirve para encontrar: </li></ul><ul><ul><li>IDs de nuestros componentes gráficos </li></ul></ul><ul><ul><li>Etiquetas (como si fuesen nuestros bundles .properties) </li></ul></ul><ul><ul><li>Ubicación de imágenes </li></ul></ul><ul><ul><li>Variables como arreglos de strings, ints, etc. </li></ul></ul><ul><ul><li>etc. </li></ul></ul>
  22. 22. Estructura de un proyecto Android <ul><ul><li>res/drawable </li></ul></ul><ul><li>Las imágenes que ocupemos en nuestra aplicación </li></ul>
  23. 23. Estructura de un proyecto Android <ul><ul><li>res/layout </li></ul></ul><ul><li>Los archivos XML que representana nuestra vista. Aquí es donde decimos la orientación, donde ponemos botones, cajas de texto, etiquetas, etc. Todos nuestros componentes gráficos. </li></ul>
  24. 24. Estructura de un proyecto Android <ul><ul><li>res/values </li></ul></ul><ul><li>Encontramos principalmente las variables que deseamos usar y que no queremos que estén en código duro dentro de nuestras clase java. </li></ul><ul><li>Aquí encontramos por default el archivo string.xml donde almacenaremos todos los mensajes y etiquetas que use nuestra aplicación. </li></ul><ul><li>Posteriormente haremos referencia a estas cadenas a través de la clase R.java </li></ul>
  25. 25. Estructura de un proyecto Android <ul><li>AndroidManifest.xml </li></ul><ul><li>El punto de entrada de nuestra aplicación, el archivo que maneja configuraciones sobre nuestra aplicación. </li></ul><ul><li>Entre las cosas que hace es: </li></ul><ul><ul><li>Declarar las Activities que ocupa nuestra aplicación </li></ul></ul><ul><ul><li>Solicitar permisos al usuario cuando se esté instalando nuestra aplicación, permisos tales como: conocer la ubicación, conectarse a internet, tener acceso las imágenes de la cámara, etc. </li></ul></ul><ul><ul><li>Etc. </li></ul></ul>
  26. 26. Activities 
  27. 27. Activities  <ul><li>Una Activity es o hace: </li></ul><ul><ul><li>El punto de entrada para cualquier aplicación </li></ul></ul><ul><ul><li>Una ventana que se le presenta al usuario para que éste interactúe con nuestra aplicación </li></ul></ul><ul><ul><li>Responde a los eventos que el usuario realiza, como tocar la pantalla, pulsar un botón, etc. </li></ul></ul><ul><li>Si están familiarizados con java AWT/Swing entonces piensen en una Activity como una ventana de esas. </li></ul><ul><li>Para mayor info de Activities ir a:  http://developer.android.com/reference/android/app/Activity.html </li></ul>
  28. 28. Time to code
  29. 29. Time to code <ul><li>Con la aplicación Android que construiremos podemos saber que signo zodiacal somos. </li></ul><ul><li>Interesante verdad? ...                                                NO!!! </li></ul><ul><li>Pero es un buen ejemplo que va un poco más allá del &quot;Hola mundo&quot; </li></ul>
  30. 30. Time to code <ul><li>- Y... ¿qué cosas de Android usaremos? </li></ul><ul><ul><li>Activity </li></ul></ul><ul><ul><li>DatePickerDialog </li></ul></ul><ul><ul><li>ImageView </li></ul></ul><ul><ul><li>TextView </li></ul></ul><ul><ul><li>strings.xml </li></ul></ul><ul><ul><li>styles.xml </li></ul></ul><ul><ul><li>res/drawable  </li></ul></ul><ul><ul><li>AndroidManifest.xml </li></ul></ul>
  31. 31. Time to code <ul><li>- El paquete base del proyecto es com.iofractal.mobile.android.zodiacfinder </li></ul><ul><li>- Las clases a construir son: </li></ul><ul><ul><li>  activity.ZodiacFinderActivity (Hereda de android.app.Activity) </li></ul></ul><ul><ul><li>  model.ZodiacSign </li></ul></ul><ul><ul><li>  service.ZodiacFinderService </li></ul></ul><ul><ul><li>  util.UtilConstants </li></ul></ul><ul><li>- La vista: </li></ul><ul><ul><li>res/layout/main.xml </li></ul></ul><ul><ul><li>drawable/*.jpg </li></ul></ul>
  32. 32. Time to code <ul><li>Crear proyecto Android en Eclipse </li></ul><ul><li>En el menú: </li></ul><ul><li>File -> New -> Android Project </li></ul>
  33. 33. Time to code
  34. 34. Time to code <ul><li>Llenamos los campos necesarios para la creación del proyecto: </li></ul><ul><li>Project name: zodiacfinder </li></ul><ul><li>Target name: Android 1.5 </li></ul><ul><li>Application name:  zodiacfinder </li></ul><ul><li>Package name: com.iofractal.mobile.android.zodiacfinder </li></ul><ul><li>Create Activity: activity.ZodiacFinderActivity </li></ul><ul><li>Clic en finish ! </li></ul><ul><li>  </li></ul>
  35. 35. Time to code <ul><li>  Por default se crean los siguientes archivos: </li></ul><ul><li>- AndroidManifest.xml </li></ul><ul><li>- com.iofractal.mobile.android.zodiacfinder.R.java </li></ul><ul><li>- res/layout/main.xml </li></ul><ul><li>- res/values/strings.xml </li></ul>
  36. 36. Time to code <ul><li>AndroidManifest.xml </li></ul>
  37. 37. Time to code <ul><li>AndroidManifest.xml </li></ul><ul><li>-  @drawable/icon ícono de la aplicación. Se encuentra físicamente en res/drawable/icon.png </li></ul><ul><li>-  @string/app_name nombre de la aplicación y se muestra en la &quot;barra de título&quot; de la aplicación </li></ul><ul><li>-  @string/app_name  nombre de la aplicación y se muestra en la &quot;barra de título&quot; de la actividad  ZodiacFinderActivity.java </li></ul>
  38. 38. Time to code <ul><li>com.iofractal.mobile.android.zodiacfinder. R.java </li></ul>
  39. 39. Time to code <ul><li>com.iofractal.mobile.android.zodiacfinder. R.java </li></ul><ul><li>A través de esta clase tenemos acceso a los recursos que se encuentran debajo de la carpeta res del proyecto. </li></ul><ul><li>R.drawable.icon hace referencia a res/drawable/icon.png </li></ul><ul><li>R.layout.main hace referencia a res/layout/main.xml </li></ul><ul><li>R.string.app_name hace referencia a la etiqueta  app_name que se encuentra en res/values/strings.xml </li></ul>
  40. 40. Time to code <ul><li>Nota: </li></ul><ul><li>Lo que encontramos en R son solamente identificadores, identificadores que usaremos con  </li></ul><ul><li>- android.content.res.Resources.get String (ID)   </li></ul><ul><li>- android.content.res.Resources.get Drawable (ID)  </li></ul><ul><li>Ejemplo desde una Activity: </li></ul><ul><li>String label = getResources().getString(R.string.app_name) </li></ul>
  41. 41. Time to code <ul><li>main.xml </li></ul><ul><li>- Archivo donde definimos el layout de nuestra activity. Es decir, donde colocaremos los botones, etiquetas, cajas de texto, etc. </li></ul><ul><li>- Regularmente archivo xml que se encuentra en res/layout se usa por Activity. </li></ul>
  42. 42. Time to code <ul><li>strings.xml </li></ul>Las etiquetas usadas en la aplicación y así evitamos  código duro
  43. 43. Time to code <ul><li>Y así, por default tenemos la siguiente aplicación </li></ul>
  44. 44. Time to code <ul><li>Nota: </li></ul><ul><li>Para ejecutar la aplicación, clic derecho sobre el proyecto, Run As -> Android Application </li></ul>
  45. 45. Time to code
  46. 46. Time to code <ul><li>Hasta el momento ya tenemos un proyecto Android con el esqueleto básico mínimo para funcionar. </li></ul><ul><li>Cada vez que ejecutamos el proyecto se genera un archivo con extensión .apk </li></ul><ul><li>Este .apk es el instalable de nuestra aplicación y se encuentra en:  </li></ul><ul><li>directorio_donde_se_creo_el_proyecto/zodiacfinder/bin/zodiacfinder.apk </li></ul><ul><li>Este es el que enviamos a los markets, ej. Android market o que ponemos directamente en la tarjeta de nuestro teléfono para instalar. </li></ul>
  47. 47. Time to code <ul><li>Ok, ok, muy padre... pero mi aplicación que me va a decir mi signo zodiacal? </li></ul>
  48. 48. Time to code <ul><li>Creamos un modelo (POJO) para tener ahí la información del signo: </li></ul><ul><li>- ZodiacSign.java </li></ul><ul><li>Atributos con gettes y setters </li></ul>
  49. 49. Time to code <ul><li>Creamos una interface utilería para las constantes como signos zodiacales, meses del año, etc.  </li></ul>
  50. 50. Time to code <ul><li>Creamos una clase tipo excepción. No la ocuparemos de forma útil, pero buenas prácticas... Clase  NoZodiacTypeException </li></ul>
  51. 51. Time to code <ul><li>Creamos una clase servicio que es donde se encuentra la &quot;lógica&quot; de la aplicación.  ZodiacFinderService </li></ul><ul><li>Con los métodos: </li></ul><ul><ul><li>public List<ZodiacSign> findZodiacSign(int mYear, int mMonth,int mDay, boolean chinese, boolean west) </li></ul></ul><ul><ul><li>public ZodiacSign findWestZodiac(int mYear, int mMonth,int mDay) </li></ul></ul><ul><ul><li>  public ZodiacSign findChineseZodiac(int mYear, int mMonth,int mDay) </li></ul></ul>
  52. 52. Time to code <ul><li>Implementando los métodos... </li></ul><ul><li>Evitamos poner aquí el código y mejor lo ponemos como descargable. Link más adelante </li></ul>
  53. 53. Time to code <ul><li>Lo siguiente será colocar las imágenes que usaremos en la carpeta res/drawable. </li></ul><ul><li>Las imágenes se encuentran en el proyecto descargable. </li></ul><ul><ul><li>background_univ.jpg </li></ul></ul><ul><ul><li>  heading.png </li></ul></ul><ul><ul><li>  icon.png </li></ul></ul><ul><ul><li>  wz_aquarius.jpg </li></ul></ul><ul><ul><li>  wz_aries.jpg </li></ul></ul><ul><ul><li>  wz_cancer.jpg </li></ul></ul><ul><ul><li>etc </li></ul></ul>
  54. 54. Time to code <ul><li>Ahora creamos las etiquetas que usaremos en el proyecto, para eso editamos nuestro archivo strings.xml </li></ul>
  55. 55. Time to code <ul><li>Ahora creamos un archivo de estilos, parecido a lo que haríamos en aplicaciones web con CSS. Creamos el archivo  styles.xml en res/values </li></ul>
  56. 56. Time to code <ul><li>Ok, lo siguiente es el layout de nuestra Activity mediante el archivo layout/main.xml </li></ul><ul><li>-  LinearLayout : Nos pone los componentes &quot;uno tras otro&quot; ya sea horizontal o verticalmente </li></ul><ul><li>-  EditText : Lo usamos para etiquetas </li></ul><ul><li>-  ImageView : Lo usamos para colocar imágenes </li></ul><ul><li>-  TextView : Lo usamos para colocar texto, como si fuese un inputText en html </li></ul><ul><li>-  RelativeLayout : Componentes colocados relativamente al componente padre </li></ul>
  57. 57. Time to code <ul><li>main.xml </li></ul>
  58. 58. Time to code <ul><li>Y finalmente la activity ZodiacFinderActivity </li></ul><ul><li>Se explica el código en este momento y se omite el código aquí. </li></ul><ul><li>Para ver el código descargue la aplicación. </li></ul>
  59. 60. Algo más... <ul><li>- Contacto en twitter: @repcax </li></ul><ul><li>- Acerca de Julio Quiroz: about.me/repcax </li></ul><ul><li>- Esta presentación: </li></ul><ul><ul><li>  http://goo.gl/tIH8q </li></ul></ul><ul><li>- La aplicación: </li></ul><ul><ul><li>http://goo.gl/rqk4D </li></ul></ul><ul><li>No olviden visitar: </li></ul><ul><ul><li>doname.la </li></ul></ul><ul><ul><li>jokotes.com </li></ul></ul><ul><ul><li>librezone.com </li></ul></ul><ul><ul><li>iofractal.com </li></ul></ul>
  60. 61. Imágenes gracias a: <ul><ul><li>http://www.trucospc.info/fondos-de-pantalla/Sistemas-Operativos/Android/imagenes/Android-04.jpg </li></ul></ul><ul><ul><li>http://ranjith.zfs.in/wp-content/uploads/2011/01/Android-project-fn-2.jpg </li></ul></ul><ul><ul><li>http://copybrighter.com/wp-content/uploads/2008/11/rockstar-models.jpg </li></ul></ul><ul><ul><li>http://www.picgifs.com/graphics/a/agenda/graphics-agenda-698534.jpg </li></ul></ul><ul><ul><li>http://www.wp7connect.com/wp-content/uploads/2011/03/tools.png </li></ul></ul><ul><ul><li>http://sridharbroker.com/yahoo_site_admin/assets/images/structure.101182949.jpg </li></ul></ul><ul><ul><li>http://health.usnews.com/dbimages/master/12779/SS_PR_090921alzheimers_activity.jpg </li></ul></ul><ul><ul><li>http://www.miscomentariosparahi5.com/comentarios/gracias/comentarios-de-gracias-32.gif   </li></ul></ul><ul><ul><li>http://4.bp.blogspot.com/-4db53Jv1pa0/TWUl11fbiUI/AAAAAAAAABo/oCHNutfuWM4/s1600/confused-face2.jpg </li></ul></ul>

×