Desarrollo de aplicaciones moviles

1

Uiversidad Tecnolgica de Nayarit

2014

DESARROLLO DE APLICACIONES MOVILES

Freddy Santiago Veloz Garcia TICS 51 MESTRA. Janitn Cardeas Castellanos

2014

2


2014

Valor Creativo

Contenido

1 Eclipse 3

1.1 Configuracin e instalacin 3 1.2 Primera aplicacin 5

2 App Inventor 10

2.1 Configuracin 10 2.1.1 Conexin a un telfono o tableta con un cable USB 10 2.1.2 Instalacin y ejecucin del emulador en EA2 12

2.2 Primera aplicacin 13

3 Netbeans 18

3.1 Configuracin del Android SDK 18 3.2 Primera aplicacin 20

4 Android Studio 22

4.1 Configuracin e instalacin 22 4.2 Primera aplicacin 23

Contents 1 Ttulo 1 Error! Marcador no definido.

1.1 Ttulo 2 Error! Marcador no definido. 1.1.1 Ttulo 3 Error! Marcador no definido.

3


2014

1 Eclipse

1.1 Configuracin e instalacin

1. Visita la pgina de descarga

de Java en el sitio web de

Oracle para encontrar la

descarga del entorno

JDK. Desplzate hacia abajo

hasta encontrar la actualizacin

51 de Java SE 7, y descarga

JDK.

2. Una vez que selecciones

Descargar, acepta los

trminos de servicio y

escoge el sistema operativo

correspondiente para ese

JDK en especfico (Windows,

Mac, Linux, etc.)

4


2014

3. Una vez que la descarga est completada, debes hacer doble clic en el

archivo para empezar con la instalacin de JDK.

4. Despus de la instalacin

inicial est completada,

aparecer una ventana

emergente preguntndote

dnde estarn los archivos

Java. Puedes escoger cambiar

dnde quieres almacenar los

archivos, pero es mejor quedarte

con la carpeta que aparezca

como predeterminada.

5. Cuando la instalacin se haya

completado, empezaremos

con la instalacin de

Eclipse. Ve

a http://www.eclipse.org/downloa

ds/.

6. Para los usuarios de

Windows, tendrs que saber

qu versin de sistema

operativo tienes. Si tu

computadora es de 64-bit,

selecciona Windows 64 y si es

de 32-bit, selecciona Windows

32 bit.

7. Una vez que descargues el

archivo de Eclipse,

necesitars descomprimir el

archivo Zip, el cual crear

5


2014

una carpeta de Eclipse sin comprimir. Debes extraer el archivo a la raz de la

unidad C:\, as creando la carpeta C:\eclipse, o slo muvelo o esa carpeta

despus de extraerlo. Ya que Eclipse no tiene algn instalador, habr un archivo

dentro de la carpeta de Eclipse llamado eclipse.exe ( ). Puedes hacer doble clic

en el archivo para ejecutar Eclipse.

8. Despus de que eclipse se haya

instalado completamente y se haya

extrado, crea una carpeta de trabajo

donde contendrs todos los

archivos de programa que

has creado.

9. Ahora que terminaste de instalar Eclipse, reinicia tu computadora. Al reiniciar

tu computadora se actualizar la memoria de tu sistema y permitir que los

cambios creados por los instaladores surjan efecto.

1.2 Primera aplicacin

El Eclipse es un entorno de trabajo profesional, por lo que en un principio puede parecer complejo el desarrollo de nuestros primeros programas. Todo programa en Eclipse requiere la creacin de un "Proyecto", para esto debemos seleccionar desde el men de opciones:

6


2014

O desde la barra de conos del Eclipse: Ahora aparece el dilogo donde debemos definir el nombre de nuestro proyecto: En el campo de texto "Project Name"

ingresamos como nombre: Proyecto1 y

dejamos todas las otras opciones del

dilogo con los valores por defecto.

Presionamos el botn "Finish".Ahora en la ventana de "Package" aparece el proyecto

que acabamos de crear:

7


2014

Como segundo paso veremos que todo programa en Java requiere como mnimo una clase. Para crear una clase debemos seleccionar desde el men de opciones: O desde la barra de conos del Eclipse:

En el dilogo que aparece debemos definir el nombre de la clase (en nuestro primer ejemplo la llamaremos Clase1, luego veremos que es importante definir un nombre que represente al objetivo de la misma), los otros datos del dilogo los dejamos con los valores por defecto:

8


2014

Luego de presionar el botn "Finish" tenemos el archivo donde podemos codificar nuestro primer programa:

Ms adelante veremos los archivos que se crean en un proyecto, ahora nos dedicaremos a codificar nuestro primer programa. En la ventana de edicin ya tenemos el esqueleto de una clase de Java que el entorno Eclipse nos cre automticamente.

Todo programa en Java debe definir la funcin main. Esta funcin la debemos codificar dentro de la clase: "Clase1". Procedemos a tipear lo siguiente:

Es decir tenemos codificado en el entorno del Eclipse nuestro primer programa:

9


2014

Como ltimo paso debemos compilar y ejecutar el programa, esto lo podemos hacer desde el men de opciones:

O desde la barra de conos del Eclipse:

Si no hay errores de codificacin debemos ver el resultado de la ejecucin en una ventana del Eclipse llamada "Console" que aparece en la parte inferior:

10


2014

2 App Inventor

2.1 Configuracin

2.1.1 Conexin a un telfono o tableta con un cable USB

Estos son los pasos para comenzar a utilizar la aplicacin Inventor con el cable USB: Paso 1: Instale el programa de instalacin del software Inventor App Para conectar con USB, es necesario instalar primero el software de configuracin de App Inventor en el equipo. (Esto no es necesario para el mtodo de wifi.) Siga las siguientes instrucciones para su sistema operativo, a continuacin, volver a esta pgina para pasar al paso 2 Importante: Si est actualizando una instalacin anterior del software de la aplicacin Inventor, vea Cmo actualizar el software de la aplicacin Inventor. Puede comprobar si el equipo est ejecutando la ltima versin del software, visite la pgina de prueba de conexin. Paso 2: Descargar e instalar el Compaero MIT EA2 App en el telfono. Abra QR escner de cdigo de su dispositivo y escanear el cdigo QR en la parte inferior izquierda para descargar la Companion App desde Play Store. Si no puede utilizar la Play Store, utilice el cdigo QR de la derecha para descargar el Companion App directamente a su telfono.

11


2014

Despus de la descarga, paso de que los las instrucciones para instalar la aplicacin Companion a su device.You necesitan instalar el Compaero MIT EA2 slo una vez, y luego dejarlo en su telfono o tableta para cada vez que utilice la aplicacin Inventor. Nota: Si decide no ir a travs de la tienda Play y en lugar cargar la aplicacin directamente (tambin conocido como "carga lateral), tendr que habilitar una opcin en la configuracin de su dispositivo para permitir la instalacin de aplicaciones de" fuentes desconocidas "Para saber esto. Establecer en las versiones de Android anteriores a la 4.0, vaya a "Ajustes> Aplicaciones" y luego seleccione la casilla junto a "Fuentes desconocidas". Para los dispositivos con Android 4.0 o superior, vaya a "Ajustes> Seguridad" o "Pantalla Configuracin> Seguridad y Lock "y luego seleccione la casilla junto a" Desconocidos "y confirme su eleccin. Paso 3. Inicie aiStarter (Windows y GNU / Linux) La comunicacin entre el ordenador y el telfono o la tabla requiere un programa llamado aiStarter . El programa aiStarter se instal al instalar el paquete de instalacin de Inventor App. Habr accesos directos a aiStarter desde el men Inicio, en el escritorio, y desde Todos los programas (Windows solamente).Windows y Linux: Cada vez que desee utilizar USB con App Inventor, tendr que poner en marcha manualmente el aiStarter en su ordenador .Los usuarios de Mac no tienen que hacer esto: aiStarter se iniciar automticamente en un Mac, y ejecutar de forma invisible en segundo plano. Para Ayuda con aiStarter, ver Ayuda para la conexin.

El icono aiStarter

Para iniciar aiStarter en Windows,

haga doble clic en el icono (imagen

superior). Usted sabr que ha

lanzado con xito aiStarter cuando

usted ve una ventana como la

siguiente:

Paso 4: Configurar el dispositivo para USB (Gire la depuracin en USB) En su dispositivo Android, vaya a Configuracin del sistema, Opciones de Desarrollador, encenderlas, y asegrese de que est permitido "Depuracin USB". En la mayora de los dispositivos con Android 3.2 o mayor, puede encontrar esta opcin en Ajustes> Aplicaciones> Desarrollo. En Android 4.0 y posteriores, que se encuentra en Configuracin> Opciones para desarrolladores. Nota: En Android 4.2 y posteriores, las opciones para desarrolladores est oculta de manera predeterminada. Para que est disponible, vaya a Ajustes> Acerca del telfono y el nmero de Build grifo siete veces. Vuelva a la pantalla anterior para encontrar opciones de Developer, incluyendo "Depuracin USB". Paso 5: Conecte el ordenador y el dispositivo, y autenticar si es necesario. Conecte su dispositivo Android al ordenador mediante el cable USB - asegrese de que el dispositivo se conecta como un "dispositivo de almacenamiento masivo" (no

12


2014

"dispositivo de comunicacin") y que no se monta como una unidad en el ordenador. Esto puede significar que usted tiene que ir al Finder (en Mac) o My Computer (en Windows) y desconectar cualquier unidad de disco (s) que se monta cuando se ha conectado el dispositivo Android. En Android 4.2.2 y posteriores, el dispositivo aparecer una pantalla con el mensaje de permitir la depuracin USB? la primera vez que lo conecte al ordenador nuevo. Pulse el botn "OK". Esta autentica el equipo al dispositivo, lo que permite al ordenador comunicarse con l. Tendr que hacer esto para cada equipo que desea conectar con el dispositivo, pero slo una vez por equipo.

2.1.2 Instalacin y ejecucin del emulador en EA2

Para utilizar el emulador, primero tendr que instalar primero algn tipo de software en el equipo (esto no es necesario para la solucin wifi). Siga las siguientes instrucciones para su sistema operativo, y luego volver a esta pgina para pasar a iniciar el emulador. Paso 1. Instale el programa de instalacin del software Inventor App Paso 2. Inicie aiStarter (Windows y Linux solamente) El emulador requiere el uso de un programa llamado aiStarter . Este programa es el auxiliar que permite que el navegador para comunicarse con el emulador. El programa aiStarter se instal al instalar el paquete de instalacin de Inventor App. Habr accesos directos a aiStarter desde el escritorio, el men Inicio, Todos los programas y de Stratup carpeta (slo en Windows). Linux: Cada vez que desee utilizar el emulador con App Inventor, tendr que iniciar manualmente la aiStarter en su ordenador. Los usuarios de Mac y de Windows no tienen que hacer esto! El aiStarter se iniciar automticamente en un Mac, Windows al iniciar sesin en su cuenta y ejecutar de forma invisible en segundo plano. Para Ayuda con aiStarter, consulte Conexin de Ayuda.

El icono aiStarter

Para iniciar aiStarter en Windows,

haga doble clic en el icono (imagen

superior). Usted sabr que ha

lanzado con xito aiStarter cuando

usted ve una ventana como la

siguiente:

Paso 3. Conecte el emulador Desde el men de App Inventor (Inventor del software basado en la nube App en ai2.appinventor.mit.edu), vaya al men Conexin y haga clic en el emulador de opcin.

13


2014

Usted obtendr un aviso diciendo que el emulador est conectando. Iniciar el emulador puede tardar un par de minutos. Usted puede ver las pantallas de actualizacin como el siguiente como el emulador se pone en marcha:

El emulador inicialmente aparecer una pantalla vaca negro (# 1). Espere hasta que el emulador est listo, con un fondo de pantalla de color (# 2). Incluso despus de que aparezca el fondo, deber esperar hasta que el telfono emulado ha terminado de preparar su tarjeta SD: habr un aviso en la parte superior de la pantalla del telfono mientras se prepara la tarjeta. Cuando conecte, el emulador se iniciar y mostrar la aplicacin que tenga abierta en App Inventor. App Inventor resulta ser una pgina estable dentro de internet de esta manera no es necesaria la instalacin del programa en s, pero es por esto que debe configurarse todo lo anterior para el buen funcionamiento del programa.

2.2 Primera aplicacin HelloPurr: toque el gatito, le oy maullar HelloPurr es una aplicacin sencilla que se puede construir en un tiempo muy corto. Para crear un botn que tiene una imagen de un gato en l y, a continuacin, programar el botn para que cuando se hace clic en un "miau" reproduce el sonido. Para construir HelloPurr, necesitar un archivo de imagen de un gato y de un archivo de audio con un sonido "miau". Descarga estos archivos a su ordenador haciendo clic en los siguientes enlaces. Para descargar: despus de hacer clic en un vnculo, haga clic derecho sobre la imagen o la barra de sonido y seleccione "Guardar como". Guarde ambos archivos en su escritorio o en la carpeta de descargas, o en cualquier lugar que usted puede encontrar fcilmente ms tarde. Foto del gatito: kitty.png (Haga clic derecho y guardar)

14


2014

Maullido de sonido: meow.mp3 (Haga clic derecho y guardar) Seleccionar los componentes para disear su aplicacin

El inventor de la aplicacin de componentes se encuentra en el lado izquierdo de la ventana del diseador, con el ttulo de la paleta. Los componentes son los elementos bsicos que se utilizan para hacer que las aplicaciones en el telfono Android. Son como los ingredientes de una receta. Algunos componentes son muy simples, como una etiqueta de componente, que slo muestra el texto en la pantalla, o un botn de componente (# 1 a la izquierda) que se toca para iniciar una accin. Otros componentes son ms elaborados: un dibujo lienzo (# 2 a la izquierda) que puede almacenar imgenes fijas o animaciones, un Acelermetro sensor que funciona como un controlador de Wii y detecta al mover o agitar el telfono, los componentes que envan mensajes de texto, los componentes que desempean msica y video, componentes que obtienen informacin de los sitios Web, y as sucesivamente.

Para utilizar un componente en su aplicacin, tendr que hacer clic y arrastrarlo hacia el espectador en el centro del Diseador. Cuando se agrega un componente al Visor (# 1 abajo), tambin aparecer en la lista de los componentes en el lado derecho del visor. Componentes (# 2 abajo) tienen propiedades que se pueden ajustar para cambiar la forma en que el componente aparece o se comporta dentro de la aplicacin. Para ver y cambiar las propiedades de un componente (# 3 abajo), primero debe seleccionar el componente deseado en la lista de componentes. HelloPurr tendr un botn de componente que muestra la imagen de la gatita que descarg previamente. Para lograr esto:

Paso 1. Desde la base de la paleta, arrastre y suelte el botn de componente para Screen1 (# 1). Para hacer que el botn tiene una imagen de un gato, en la Propiedades panel, debajo de imagen, haga clic sobre el texto "Nada ..." y haga clic en "Upload Nueva ..." (# 2). Una ventana se abrir para que pueda elegir el archivo de imagen. Haga clic en "Browse" y luego vaya a la ubicacin de la kitty.png archivo que ha descargado anteriormente (n 3). Haga clic en el kitty.png archivo, haga clic en "Abrir" y, a continuacin, haga clic en "OK".

15


2014

Paso 2. Cambie el botn de texto de propiedad: Eliminar "Text de Button1", dejando la propiedad de texto en blanco del botn de modo que no hay escritura sobre la cara del gatito. Su diseador debe tener este aspecto: Si toda la imagen del gatito no aparece, puede solucionar este problema mediante el establecimiento de las propiedades Height y Width del botn "Fill de Padres". Para ello, haga clic en el componente Button, vaya a las propiedades de la mano derecha panel, desplcese hacia abajo hasta la parte inferior donde dice Anchura y haga clic en la palabra "automtico" para activar la lista desplegable. Seleccione la opcin "Llenar de Padres". Haga lo mismo con la propiedad Height.

16


2014

Paso 3. Desde la base de la paleta, arrastre y suelte la etiqueta componente al Viewer (# 1), situndose por debajo de la imagen del gatito. Esto aparecer en su lista de componentes como Label1. Bajo la Propiedades panel, cambie el texto

propiedad de Label1 a leer "Pet the Kitty" (# 2). Usted ver el cambio de texto en el diseador y en su dispositivo. Cambie el Tamao de Letra de Label1 a 30 (n 3). Cambie el BackgroundColor de Label1 haciendo clic en el cuadro (# 4): se puede cambiar a cualquier color que te gusta. Cambie el TextColor de Label1 (# 5) a cualquier color que te gusta. En este caso, el color de fondo se establece en azul y el color del texto se establece amarillo.

Paso 4. En virtud de la paleta, haga clic en el Medios cajn y arrastre un sonido componente y lo coloca en el visor (# 1). Dondequiera que se te cae, ste aparecer en el rea en la parte inferior del visor de marcado componentes no visibles. Bajo el Medios panel, haga clic en Agregar. (# 2) Vaya a la ubicacin de la meow.mp3 archivo que descarg anteriormente y

subirlo a este proyecto (# 3). En el panel Propiedades, ver que la Fuente propiedad actualmente dice None. Haga clic en la palabra None. para cambiar el componente Sound1 Fuente de meow.mp3 (# 4). Programacin con el Editor de bloques Hasta ahora ha sido la organizacin de la pantalla y los componentes de su aplicacin en el Diseador, que est en una ventana del navegador web. Para empezar a programar el comportamiento de la aplicacin, es necesario ir al Editor de bloques. Si usted no tiene un editor de bloques en ejecucin, haga clic en el botn Abrir el Editor de bloques en la parte superior derecha de la ventana del diseador. Si necesita ayuda para obtener el Editor de bloques comenz, volver a las instrucciones de configuracin para obtener ayuda. Nota: Una manera fcil de cambiar entre el Editor de bloques y diseador es el uso de la barra de tareas que muestra las aplicaciones que se ejecutan en el equipo. El Editor de

17


2014

bloques se ejecuta localmente como un programa de java y est representado por un icono de la taza de caf. El diseador se est ejecutando en su navegador web para que pueda llegar a ella haciendo clic en el icono de su navegador. Una vez que tenga el Editor de bloques en frente de usted, contine con el siguiente paso para empezar a programar su aplicacin con bloques. Hacer el juego de sonido Paso 1. Bajo la paleta Mis bloques en el lado izquierdo del Editor de bloques, haga clic en el Button1 cajn para abrirlo. Arrastre y suelte el Button1.Click bloque en el rea de trabajo (la zona abierta a la derecha). Esos bloques verdes se denominan controladores de eventos bloques. Los bloques de control de eventos specifiy cmo el telfono debe responder a ciertos eventos: un botn se ha pulsado, el telfono est siendo sacudida, el usuario est arrastrando su dedo sobre un lienzo, etc Los bloques de control de eventos son de color verde y el uso de la palabra cuando. Por ejemplo, cuando Button1.Click es un controlador de eventos

Paso 2. Haga clic en el Sound1 cajn y arrastre el Sound1.Play bloques y conectar a la seccin de "hacer" del que Button1.Click bloque. Los bloques se conectan entre s como piezas de rompecabezas y se puede or un sonido de clic cuando se conecten. Los bloques de color prpura y azul son llamados comandos bloques, que se colocan en el cuerpo de controladores de

eventos. Cuando se ejecuta un controlador de eventos, se ejecuta la secuencia de comandos en su cuerpo. Un comando es un bloque que especifica una accin a realizar (por ejemplo, la reproduccin de sonido) cuando se activa el evento (por ejemplo, al pulsar Button1). Sus bloques deben tener este aspecto en este punto:

Ahora usted puede ver que el bloque de comandos se encuentra en el controlador de eventos. Este conjunto de bloques significa, "cuando se hace clic en Button1, Sound1 jugar". El controlador de eventos es como una categora de la accin (por ejemplo, un botn se hace clic), y el comando especifica el tipo de accin y los detalles de la accin (por ejemplo, la reproduccin de sonido a sonido especificado).

18


2014

Usted puede leer ms acerca de cmo funcionan los bloques aqu: Comprender Bloques. Prubelo. Al hacer clic en el botn tiene que or el maullido del gatito. Felicitaciones, su primera aplicacin se est ejecutando

3 Netbeans

3.1 Configuracin del Android SDK Este sencillo instructivo, ser muy til para aquellos que quieren empezar a desarrollar apps en el mundo Android y no saben por dnde empezar. Prerrequisitos Son pocos y muy fciles de conseguir:

NetBeans IDE

Android Plugin para NetBeans

Android SDK

Si an no tenemos Netbeans, lo primero es descargarlo desde https://netbeans.org/downloads/ e instalarlo. Lo ms recomendable es elegir la opcin All; dependiendo de la velocidad de su conexin, tardar entre 10 mins y 1 hora. Luego, es necesario instalarle el plugin de Android. ste no viene por defecto instalado, primero se hace necesario agregar el repositorio donde se encuentra y luego s, instalarlo. Para esto, se debe agregar un nuevo Update Center al IDE. Esto lo hacemos va Tools > Plugins > Tab de Settings. Ah, hacer click en Add. En Nombre, ponerle alguna descripcin significativa (NBAndroid, por ejemplo), y en URL: http://nbandroid.org/release73/updates/updates.xml OK. En este momento deben aparecer cuatro repositorios, como la siguiente imagen:

A continuacin en Available plugins hacer click en Check for newest. Esto har una consulta en todos los repositorios, incluyendo el que se acaba de agregar. Una vez terminado el proceso de update, en Search escribimos Android, debe aparecer el nuevo plugin. Seleccionarlo y darle install. Luego de un par de Next y OK estar instalado el plugin. Hasta ac solo hemos instalado el plugin, es decir, la posibilidad de que NetBeans

entienda cuando se le hable de Android. Ahora falta lo ms importante, la librera Android, para ellos entramos a http://developer.android.com/sdk/index.html y una vez all abrir la pestaa Use an existing IDE y hacer click en el botn Download the SDK Tools. Esto descargar el tar.gz del SDK Android ms reciente. Al terminar la descarga, descomprimir el archivo (En Linux, con el comando tar -xzvf har todo el trabajo en un solo comando). Una vez descomprimido, vamos dentro de NetBeans a Tools > Options > Miscellaneous > Android. En SDK Location, la carpeta descomprimida, as:

19


2014

Hasta ac tenemos configurado el Android SDK, sin embargo, an falta un ltimo paso y es validar que todos los componentes de Android estn instalados. Para ello vamos a Tools > Android SDK Manager. Esta ventana permite aregar o actualizar las ltimas Tools del SDK y descargar un Target, es decir, la versin de Android con la cual vamos a trabajar (Ice Cream, Gingerbread, etc) y puede ser una o ms. Seleccionando una o ms API y la seccin Tools le damos Install packages. Esto descargar el API (Target) que deseemos y las Tools para trabajar con dicho Target. Al final si seleccionamos solo el check de installed debe verse similar a este:

Hasta ac llega la primera parte, donde ya est todo configurado y listo para desarrollar en Android usando NetBeans. En la prxima entrega un tpico Hola Mundo. Aunque, si son tan impacientes como yo, seguro lo harn antes. Hasta entonces.

3.2

20


2014


Lo primero es crear un AVD (Android Virtual Device), que no es ms que un emulador de un dispositivo Android (una mquina virtual). Sin esto, no podemos emular nuestras aplicaciones hechas: cada vez que quisiramos probar una App tendramos que pasarla a un dispositivo Android fsico. Para crear la AVD, estando en NetBeans seleccionar Tools > AVD Manager > New. Ac el asistente pregunta por un nombre para la mquina virtual (puede ser cualquiera). Luego vienen dos cosas muy importantes, el device, el cual es el dispositivo fsico en el cual se basa nuestra AVD, y por ltimo el target, es decir la versin API de Android que utilizar esa mquina (Gingerbraid, Ice Cream Sandwich, etc). En el device aparecen algunos reconocidos modelos Nexus y otros genricos. Estos devices lo que traen preconfigurado son las propiedades fsicas del aparato como: tamao de la pantalla (en pulgadas), memoria RAM, memoria interna o disco, nmero de cmaras, botones por hardware (estilo blackberry clsica) o por software (pantalla 100% touch). La siguientte figura muestra un ejemplo. Si ningn dispositivo predeterminado satisface nuestras necesidades, crear un nuevo device. Ahi mismo en el AVD Manager, es solo cambiar de TAB hacia Device Definitions y luego en Edit. Es decir en, Tools > AVD Manager > Device Definitions > New Device. All podremos personalizar el nmero de cmaras del dispositivo, los dpi, el tamao de la pantalla, etc. A continuacin n, un dispositivo que yo cre. Un supuesto Galaxy Note 2:

21


2014

Hasta ac, ya est configurada nuestra mquina virtual. Ahora si, a crear el proyecto. En NEw project, escoger tipo Android: Luego, escoger el nombre del proyecto, el paquete y por ltimo el API Target: Lo ideal es escoger una API en el mismo nivel que la del device, para no tener problemas de ejecucin. Se genera un nuevo proyecto con una clase MainActivity. sta, es la clase principal o de entrada de la aplicacin. Ser lo primero que se ejecute, al iniciar la App. En ella, agregamos el siguiente cdigo:

22


2014

Al ejecutar este proyecto, el resultado ser:

4 Android Studio

4.1 Configuracin e instalacin

1. Descargue el Android Estudio paquete desde arriba.

2. Instalar Android Studio y las herramientas del SDK:

Windows: 1. Ejecute el archivo EXE descargado, android-studio-paquete-. exe

2. Siga el asistente de instalacin para instalar Android Studio.

Problema conocido: en algunos sistemas Windows, el script lanzador no encuentra donde est instalado Java. Si se encuentra con este problema, es necesario establecer una variable de entorno que indica la ubicacin correcta. Seleccione el men Inicio> Equipo> Propiedades del sistema> Advanced System Properties. A continuacin, abra la pestaa Opciones avanzadas> Variables de entorno y agregar una nueva variable del sistema JAVA_HOME que apunte a la carpeta de JDK, por ejemplo C: \ Archivos de programa \ Java \ jdk1.7.0_21.

Mac OS X: 1. Abra el archivo DMG descargado, el androide-studio-paquete-. dmg

2. Arrastre y suelte Android Estudio en la carpeta Aplicaciones.

Problema conocido: Dependiendo de la configuracin de seguridad, cuando se intenta abrir Android de estudio, es posible que vea una advertencia que dice que el paquete est daado y debe ser movido a la papelera. Si esto ocurre, vaya a Preferencias del Sistema> Seguridad y Privacidad y bajo Permitir que las aplicaciones descargadas desde, seleccione cualquier lugar. A continuacin, abra Android Studio de nuevo.

Linux: 1. Descomprimir el archivo Tar descargado, el androide-studio-paquete-.

tgz, en un lugar adecuado para sus aplicaciones.

2. Para lanzar Android de estudio, navegue a la /android-studio/bin directorio en un

terminal y ejecutar studio.sh

Es posible que desee aadir android-studio/bin / a la variable de entorno PATH,

23


2014

para que pueda empezar a Android Studio desde cualquier directorio. Eso es todo! Usted est listo para comenzar a desarrollar aplicaciones con Android Studio. Nota: En Windows y Mac, las herramientas individuales y otros paquetes SDK se guardan en el directorio de la aplicacin Android Studio. Para acceder directamente a las herramientas, utilizar un terminal para navegar en la aplicacin y busque el / sdk directorio. Por ejemplo: Windows: \ Users \ \ AppData \ Local \ Android \ android-studio \ sdk \ Mac: / Applications / Android \ Studio.app / sdk / Para obtener una lista de algunos problemas conocidos, consulte tools.android.com / knownissues.


Al abrir Android Studio nos muestra una serie de accesos directos a las principales acciones que podemos realizar en un primer momento con esta herramienta. Para crear una nueva aplicacin debes hacer clic sobre New Project... A continuacin ser el momento de indicar los datos principales de nuestra primera aplicacin. Debes especificar los siguientes datos: Application name: Es el nombre que deseas dar a tu aplicacin, el cual ser

mostrado en el repositorio de aplicaciones Play Store as como en la lista deAplicaciones dentro de los Ajustes del dispositivo.

Module name: Este nombre de mdulo (proyecto) es utilizado por el entorno de desarrollo (Android Studio). Normalmente suele ser igual que el nombre de la aplicacin, aunque no podrs usar determinados caracteres especiales como el espacio.

24


2014

Package name: Nombre del paquete, que debe ser unidentificador nico de la aplicacin. Este nombre no se muestra al usuario, pero se debe mantener el mismo nombre de paquete durante todo el tiempo de vida de la aplicacin, ya que es la manera en la que distintas versiones de la aplicacin se consideran la misma aplicacin. Se suele utilizar el nombre de dominio al revs de la empresa o del autor que realiza la aplicacin, seguido de un identificador de la aplicacin. Este nombre de paquete debe ser un nombre vlido de paquete Java, por lo que no se admitirn determinados caracteres. Por defecto aparece el prefijo com.example, pero en una aplicacin real debe ser modificado por otro nombre.

Project location: Carpeta en la que almacenarn los archivos correspondientes al proyecto.

Minimum required SDK: Debes elegir la versin de API ms baja que tu aplicacin puede soportar. Cuanto ms bajo sea el nmero de versin mnima, ms dispositivos podrn utilizar tu aplicacin, pero eso significar tambin que tendrs menos caractersticas disponibles.

Target SDK: Indica el nivel de API ms alto con la que se sabe que la aplicacin puede funcionar correctamente. Este dato informa al sistema que has probado correctamente la aplicacin con esa versin sin problemas de compatibilidad, y que puede ejecutarse tambin en versiones anteriores, hasta la versin mnima indicada anteriormente.

Compile with: Versin de API que deseas utilizar para compilar el proyecto, seleccionndola entre las versiones instaladas en el SDK. Conviene que sea la versin ms moderna.

Theme: Tema (combinaciones de colores) del interfaz de usuario que se tomar como base para la aplicacin.

Create custom launcher icon: Debes dejarlo activado si deseas que el asistente de creacin del proyecto muestre una ventana que te permite crear un icono personalizado para la aplicacin.

Create activity: Te permite crear, tambin durante este asistente, una pantalla para la aplicacin con un diseo prefijado.

Mark this project as a library: Marcar el proyecto como una librera utilizable en otros proyectos, en lugar de una aplicacin ejecutable por el usuario.

GridLayout, Fragments, Navigation Drawer, Action Bar: Selecciona los elementos que desees utilizar en la aplicacin entre los indicados, para que se utilice en el proyecto la librera de soporte (Support Library) que permite utilizar estos elementos en versiones antiguas que no soportaban esos elementos.

25


2014

Si has dejado activada la opcin de crear un icono personalizado, la siguiente pantalla ser la que te permita disearlo. Podrs hacerlo desde una imagen almacenada en un archivo, una imagen prediseada (Clipart) o slo texto. Podrs cambiar algunas caractersticas del icono, como los mrgenes, colores y formas. De igual manera, si dejaste activada la opcin de crear una Activity (pantalla de la aplicacin), la siguiente pantalla te permitir elegir el estilo deseado para la pantalla. Seleccionando los distintos tipos mostrados en la lista podrs ver en la parte derecha el estilo correspondiente a cada uno. Posteriormente podrs crear otras Activities.

Para finalizar, indica el nombre que le deseas dar a la clase Java asocidada a la Activity (Activity Name), el nombre para el archivo que almacenar la estructura de los

26


2014

elementos que contendr (Layout Name), y el tipo de navegacin (Navigation Type) que podr utilizar el usuario. Ten en cuenta que los tipos de navegacin requieren al menos la versin 11 de la API (Android 3.0). None: Sin ninguna herramienta de navegacin inicialmente. Fixed Tabs + Swipe: Pestaas fijas en la parte superior y desplazamiento lateral. Scrollable Tabs + Swipe: Desplazamiento lateral con ttulos. Dropdown: Men desplegable Al finalizar el asistente de creacin de la aplicacin, y despus de que se realicen de forma automtica algunas descargas necesarias, se abrir el entorno principal de Android Studio con el proyecto recin creado. Como podrs comprobar en la vista previa, la nico que hace la aplicacin es mostrar el mensaje Hello World en una pantalla blanca.

27


2014

En la parte central de la ventana podrs ver el cdigo fuente de la Activity que se ha creado, separado en dos archivos seleccionables en las pestaas que hay sobre el cdigo (MainActivity.java y activity_main.xml). El lado izquierdo puede estar ocupado por las Tool Windows (Ventanas de herramientas), siendo una de esas posibles ventanas la de estructura del proyecto (project). Si no se muestra esta seccin, puedes hacerla visible con el icono que aparece en la parte inferior izquierda (opcin Project), con el men View > Tool Windows > Project, o con la combinacin de teclas Alt+F1. La seccin derecha de la pantalla puede estar ocupada por la vista previa de la Activity, simulando uno de los dispositivos Android. Para ver la vista previa, debe estar visible el cdigo fuente del Layout de la Activity (archivo XML con la estructura de la pantalla). Si no aparece la vista previa, puedes mostrarla con desde el mismo icono anterior de la parte inferior izquierda (seleccionando Preview), o desde el men View > Tool Windows > Preview. Tambin puedes hacer visibles unos botones en los laterales que te facilitarn la apertura y cierre de las Tool Windows. Para ello usa View > Tool Buttons. Una vez que se ha terminado de crear el proyecto podrs ejecutarlo usando el men Run > Run 'NompreProyecto', o bien usando el icono en forma de tringulo verde de la barra de herramientas, o con la combinacin de teclas Mays+F10 que es lo ms rpido si te acustumbras al teclado. Pero recuerda que antes debes tener creado un dispositivo virtual Android, o un dispositivo real Android conectado al PC, en el que se ejecutar tu proyecto. Antes de que se ejecute la aplicacin debers seleccionar con qu dispositivo quieres hacerlo, seleccionando uno que se encuentre en ejecucin (Choose a running device), o iniciar el emulador con un dispositivo virtual creado previamente (Launch emulator > Android virtual device).

28


2014

Tras desbloquear la pantalla de inicio del dispositivo si fuera necesario, podrs ver la aplicacin en funcionamiento.

Y en la lista de aplicaciones aparecer instalada la que acabas de crear.

Desarrollo de aplicaciones moviles

Documents

Transcript of Desarrollo de aplicaciones moviles