Cur So Android

Programación Android Instituto Tecnológic Tecnológico ode deIguala Iguala

ProgramaciónAndroid

INTRODUCCIÓN

ITI

Página 1


¿Qué es Android? 

Android es un sistema operativo para dispositivos móviles, basado en una versión modificada de Linux.



Google posee Android, pero no te cobran por usarlo.



Programadores pueden escribir aplicaciones gratis.

Características  









  

Almacenamiento – Utiliza SQLite, una base de datos relacional muy ligera. Conectividad – Soporta GSM/EDGE, IDEN, CDMA, EV-DO, UMTS, Bluetooth (A2DP y AVRCP), WiFi, LTE y WiMAX. Mensajes – SMS y MMS. Navegador web – Basado en el open source WebKit, con el motor de Chrome V8. Soporte multimedia - H.263, H.264 (3GP o MP4), MPEG-4 SP, AMR, AMRWB (3GP), AAC, HE-AAC (MP4 o 3GP), MP3, MIDI, Ogg Vorbis, WAV, JPEG, PNG, GIF, and BMP. Soporte de HardWare – Acelerometro, cámara, brujula digital, sensor de proximidad y gps. Multitoque – Soporta pantallas multitoque. Multitarea – Soporta aplicaciones multitarea. Soporte para Flash – Android 2.3 en adelante.

Versiones 















ITI

Octubre 2008 – Android 1.0 API Level 1 o Febrero 2009 – Android – Android 1.1 ▪API o Level 2 Abril 2009 – Android 1.5 – Cupcake API Level 3 o Septiembre 2009 – Android 1.6 – Donut o API Level 4 Noviembre 2009 – Android 2.0 – Éclair o API Level 5 Diciembre 2009 – Android 2.0.1 API Level 6 o Enero 2009 - Android 2.1 API Level 7 o Mayo 2010 – Android 2.2 - Froyo API Level 8 o Página 2










Diciembre 2010 – Android 2.3 – Gingerbread API Level 9 y 10 o Enero 2011 – Android 3.0, 3.1 y 3.2 – Honeycomb o API Level 11, 12 y 13 Noviembre 2011 – Android 4.0 – Ice Cream Sandwich API Level 14 y 15 o Semana pasada – Android 4.1 – Jelly Bean API Level 16 o

Algunas estadísticas sobre el uso de Android

A continuación algunos datos sobre el número relativo de productos activos que ejecutan una determinada versión de la plataforma Android. Esto nos puede ayudar a entender el panorama de la distribución del dispositivo y decidir que versión de Android utilizar al programar. La siguiente gráfica y tabla se basan en el número de dispositivos Android que han accedido a “Google Play” en un plazo de 14 días, del 18 de mayo al 1 de junio del 2012.

Fig. 1.1 Datos recogidos durante un período de 14 días que concluyó el 01 de junio 2012.

La siguiente gráfica proporciona un historial de la cantidad relativa de los dispositivos Android activos ejecutando diferentes versiones de la plataforma Android. Proporciona también, una valiosa perspectiva de la cantidad de dispositivos, con los que su aplicación es compatible, basado en la versión de la plataforma. Distribu ción his tórica.

ITI

Página 3


Note que las versiones de la plataforma están apiladas, con la versión más antigua en la parte superior. Este formato indica el porcentaje total de los dispositivos activos que son compatibles con una determinada versión de Android. Por ejemplo, si usted desarrolla su aplicación para la versión que se encuentra en la parte superior de la tabla, a continuación, su aplicación es compatible con el 100% de los dispositivos activos (y todas las futuras versiones). O, si usted desarrolla con una versión de la parte inferior en la tabla, entonces es actualmente compatible con el porcentaje de dispositivos indicados en el eje y, donde la línea de esa versión cruza el eje de la derecha. Cada conjunto de datos en la línea de tiempo se basa en el número de dispositivos Android que accede a “Google Play” en un plazo de 14 días, que finaliza en la fecha indicada en el eje x.

Fig. 1.2 Datos históricos recogidos durante un período de 14 días.

Competidores 

Apple o



iPhone OS

RIM Blackberry Microsoft Windows Mobile 6.5 Phone 7 Series o Symbian Foundation Symbian OS o Palm o WebOS o







ITI

Página 4


En las siguientes gráficas podemos analizar visualmente los cambios en el protagonismo de los Sistemas Operativos para Smartphones de 2010 a 2011 (estimaciones, por Canalys ). En 2010 se enviaron a clientes 299.7 millones de unidades de Smartphones, mientras que las estimaciones en 2011 es de 487.7 millones, un 62.77% de aumento. Android ya lidera en las tres regiones en 2011, meritorio teniendo en cuenta que

en 2010 solo se vislumbraba como primera opción en América, con 3.8 puntos por encima de su inmediato perseguidor, Blackberry. El año pasado ha sido clave para que Android se consolidara como sistema operativo líder, ya no solo desde el punto de vista de elección por parte del usuario final, sino también porque fabricantes de todo el mundo han decidido confiar en la marca de Google: compañías como Fujitsu, NEC o Sharp de Japón; Motorola de USA; Sony Ericsson (ahora Sony) de Europa; LG y Samsung de Corea; HTC de Taiwán; ZTE y Huawei Device de china.

Fig. 1.3 Distribución de sistemas operativos, Europa, Medio Oriente y África

ITI

Página 5


Fig. 1.4 Distribución de sistemas operativos, América

Dispositivos que usan Android 

HTC Dream, Magic (myTouch3G), Hero, Tattoo, Nexus One(*), Desire, Legend Motorola CLIQ, Droid (Milestone), DEXT o o





ITI

Acer, Archos, Dell, Huawei, Lenovo, LG, Samsumg, Sony Ericsson,…

Página 6


Arquitectura de Android

Para entender cómo funciona Android, echemos un vistazo a la Figura 1.5, que muestra las diversas capas que componen el sistema operativo Android. El sistema operativo Android esta dividido en cuatro capas y cinco secciones.

Fig. 1.5 Capas de android 





ITI

Linux Kernell - Android esta basado en un núcleo de Linux. Esta capa

contiene los controladores de bajo nivel para los diferentes componentes de hardware de un dispositivo Android. Libraries - Contienen todo el código que proporciona las características principales de un sistema operativo Android. Por ejemplo, la biblioteca de SQLite ofrece soporte de base de datos para que una aplicación pueda utilizar el almacenamiento de datos usando este manejador. La biblioteca WebKit proporciona funcionalidades para la navegación web, etc. Android Runtime - Se encuentra en la misma capa que las librerías, nos da otro conjunto de librerías esenciales que nos permiten escribir aplicaciones de Android usando el lenguaje de programación Java. Incluye también la máquina virtual Dalvik, que permite a cada aplicación Android ejecutar su propio proceso, con su propia instancia DVM (máquina virtual Dalvik). Dalvik es una máquina virtual especializada, diseñada Página 7






específicamente para Android y optimizada para dispositivos móviles con memoria y CPU limitados. Application framework - Expone las diversas capacidades del sistema operativo Android a los desarrolladores para que puedan hacer uso de ellas en sus aplicaciones. Applications. En esta capa, se encuentran las aplicaciones que se incluyen con el dispositivo Android (tales como teléfono, contactos, navegador, etc), así como las aplicaciones que se pueden descargar e instalar desde el Android Market. Todas las aplicaciones desarrollemos se encontraran en esta capa.

Hasta aquí la introducción. Pasaremos ahora a conocer la herramienta de desarrollo.

ITI

Página 8


HERRAMIENTA DE DESARROLLO

ITI

Página 9


App Inventor

App Inventor es un nuevo sistema de Google que permite diseñar y desarrollar aplicaciones Android a través de una página Web y una interfaz Java. Con conocimientos mínimos de programación, podemos utilizar App Inventor para crear apps desde las más sencillas hasta las más complejas. Un poco mas a fondo, App Inventor es una herramienta visual de “arrastrar y soltar ” para la creación de aplicaciones móviles en Android. Podemos diseñar la interfaz de usuario (el aspecto visual) de una aplicación utilizando un constructor de interfaces de usuario gráficas (GUI) basado en web, a continuación, especificar el comportamiento de la aplicación juntando “ bloques” como si estuviéramos armando un rompecabezas. En la figura 2.1 se muestran los bloques de una aplicación básica.

Fig. 2.1 Los bloques del App Inventor especifican la funcionalidad de nuestra app.

Beneficios de App Inventor

No es necesario recordar ni escribir instrucciones. Una de las mayores frustraciones para los nuevos programadores es, escribir código y que el computadora devuelva solo mensajes de error indescifrables. Esto lleva a muchos ITI

Página 10


principiantes a renunciar antes de que lleguen a la parte más divertida, la resolución de problemas lógicos. Conjunto de opciones. Con App Inventor, los componentes y bloques están organizados y disponibles todo el tiempo par el programador. Programaremos encontrando bloques – que ayudarán a especificar la funcionalidad que queremos construir- y arrastrándolos a nuestro programa. Bloques conectados. Al igual que en un rompecabezas, en App Inventor solo algunas piezas encajan entre si. En lugar de castigar a los programadores con mensajes de error crípticos, el lenguaje de bloques en App Inventor impide que nos equivoquemos. Manejamos eventos de manera directa. Los lenguajes de programación tradicionales fueron diseñados cuando la programación era como trabajar con recetas, o procedimientos. Sin embargo, con interfaces gráficas, y sobre todo con aplicaciones móviles donde los eventos pueden ocurrir en cualquier momento (por ejemplo, recibir un mensaje de texto o una llamada telefónica), la mayoría de los programas se resuelven con controladores de eventos. Un controlador de eventos es una forma de decir: "Cuando sucede esto, la aplicación hace esto". En un lenguaje tradicional como Java, tendríamos que aprender clases, objetos, y objetos especiales llamados “escuchas” (listeners) para formular un simple evento. Con App Inventor solo tenemos que arrastrar el bloque “Cuando” a nuestro

programa. ¿Qué tipo de Apps podemos desarrollar con Inventor?

Podemos construir diferentes tipos de aplicaciones con App Inventor. Usemos nuestra imaginación, desarrollemos todo tipo de aplicaciones divertidas y útiles.      

ITI

Juegos. Software educacional. Aplicaciones de geo localización. Aplicaciones que involucren SMS. Aplicaciones que controlen robots. Aplicaciones que se comuniquen con internet.

Página 11


Para poder empezar a desarrollar en Inventor necesitamos hacer algunas cosas: 

     

Crear una cuenta gratuita en Google App Inventor (necesita una cuenta de correo de Google). Parte del Inventor se ejecuta en la web (el diseñador) y la otra parte de manera local, en nuestra computadora (el editor de bloques). Ingresar al sitio web App Inventor. Obtener e instalar Java. Descargar e instalar la parte de App Inventor que se ejecuta localmente. Ejecutar un emulador de Android para probar nuestras aplicaciones. Descargar e instalar controladores para nuestro dispositivo Android. Configurar nuestro dispositivo para que trabaje con App Inventor.

Una vez que terminemos esto estaremos listos para comenzar a crear nuestras aplicaciones para Android. Obtener una cuenta en Google App Inventor

Si ya contamos con una cuenta de Google, entonces ya tenemos una cuenta App Inventor. Solo tenemos que ingresar al sitio de Inventor y firmar con nuestra cuenta de Google. En caso contrario, tenemos que obtener una cuenta en Google. Actividad 1 – Crear una cuenta en Google

Es muy fácil obtener una cuenta de Google, y es gratis. 1. Ingrese en la página https://accounts.google.com/NewAccount . 2. Llene el formulario con sus datos y oprima el botón crear cuenta al finalizar.

Fig. 2.2 Cuentas de Google. ITI

Página 12


Ingresar al sitio App Inventor

Ya que tenemos una cuenta válida en Google, tenemos a nuestra disposición los tutoriales, el foro, los enlaces a información adicional, y por supuesto al diseñador de aplicaciones, dentro del sitio App Inventor. Actividad 2 – Ingresar al sitio App Inventor

1. Dirijámonos a al sitio http://explore.appinventor.mit.edu/. 2. Seleccionaremos el botón naranja con la leyenda “Use MIT App Inventor”.

Fig. 2.3 Sitio web del MIT App Inventor

3. Una vez dentro del sitio veremos algo como lo mostrado en la siguiente imagen.

Fig. 2.4 Página de inicio del App Inventor

ITI

Página 13


Bueno pues ahora estamos ya, justo donde se diseñan las aplicaciones. Esta área contiene al diseñador, que nos permite seleccionar y arrastrar componentes (botones, etiquetas, reproductores de audio, etc.) a nuestro programa. Además, almacena nuestros proyectos. Al hacer clic en el titulo del proyecto, este se abre para poder ser editado. También podemos empezar a diseñar un nuevo proyecto, haciendo clic en el botón “New”. Si hacemos clic en el botón “Design”, abriremos el último proyecto en el que

estábamos trabajando. Al hacer clic en el botón “Learn” se nos muestra la parte informacional del sitio,

como lo muestra la siguiente figura:

Fig. 2.5 Mini sitio para aprender sobre App Inventor.

Bien, puede explorar el sitio de Google App Inventor mas adelante, por que ahora seguiremos con la instalación de nuestro entorno de trabajo.

ITI

Página 14


Requerimientos para Windows, Mac y Linux

Al estar basado en web y usar Java, App Inventor garantiza su ejecución en los tres sistemas operativos más importantes Windows, Mac y Linux. A continuación los requerimientos específicos para cada sistema operativo.   

Macintosh (con procesador Intel): MacOS 10.5 en adelante. Windows: Windows XP, Windows Vista o Windows 7. GNU/Linux: Ubuntu 8+ o Debian 5+.

Los navegadores de Internet también son importantes, ya que, App Inventor se controla desde Internet. Google recomienda alguno de los siguientes: 







Mozilla Firefox 3.6+ Apple Safari 5.0+ Google Chrome 4.0+ Microsoft Internet Explorer 7+

Obteniendo e instalando Java

Java también es necesario, ya que permite la ejecución del Editor de bloques en todos los sistemas operativos mencionados anteriormente. Puede ser que ya tengamos Java en nuestra computadora, es común su uso en estos días. Podemos indagar si tenemos Java en nuestra computadora, tenemos que ir al siguiente sitio http://www.java.com/en/download/testjava.jsp. Si aparece un cuadro como el de abajo, entonces tenemos Java y podemos pasar al siguiente punto en la instalación de nuestro entorno de trabajo.

Fig. 2.6 Página que indica si tenemos Java. ITI

Página 15


Si no tenemos Java instalado, tendremos que seguir las instrucciones mostradas en la pantalla de la página de Java. Este proceso consume bastante tiempo, ya que se tiene que descargar el software que “pesa” 50 ó 60 MB e instalarse

después en nuestra computadora. Ahora tenemos que probar si nuestra computadora es capaz de ejecutar aplicaciones con Java Web Start. Hacemos clic en el siguiente enlace http://beta.appinventor.mit.edu/learn/setup/misc/JWSTest/AppInvJWSTest.html.

Si todo esta bien se nos debe mostrar lo siguiente.

Fig. 2.7 Probar si podemos ejecutar aplicaciones con Java Web Start

Tenemos que descargar la aplicación “notepad.jnlp” , haciendo clic en el botón “Launch, y tratar de ejecutarla en nuestra computadora. Si se muestra la

aplicación ejecutándose, nuestro equipo tiene configurado Java al 100%. Si la prueba falla, las razones pueden ser: 



ITI

Nuestro equipo está detrás de un firewall que no permite la descarga del programa. Nuestro navegador no está configurado para utilizar Java Web Start y lograr abrir los archivos JNLP, a pesar de que la primera parte de esta prueba se realizó correctamente. Podemos solucionar esto, asociando los archivos .jnlp a la aplicación Java Web Start o reinstalando Java.

Página 16




Nuestro equipo no tiene suficiente memoria para ejecutar App Inventor. Se requiere un tamaño de pila Java de 950 MB de memoria contigua.

Fig. 2.8 Aplicación notepad.jnlp ejecutándose.

App Inventor no va a funcionar si estas pruebas no tienen éxito. No vaya a tratar de usar App Inventor hasta que se haya solucionado el problema. Instalar App Inventor localmente

Para que App Inventor muestre las aplicaciones en las que estamos trabajando, en tiempo real, a medida que las creamos, es necesario instalar algún software en nuestros equipos locales. Para obtener este software, tenemos que ir a la siguiente dirección URL, en el sitio App Inventor http://beta.appinventor.mit.edu/learn/setup/index.html#setupComputer. Debimos haber ingresado a nuestra cuenta de Google antes de acceder a este sitio. En la parte inferior de esta página de configuración, nos encontramos con tres enlaces, tal y como se muestra en la figura 2.9.   

Instrucciones para MacOS Instrucciones para GNU/Linux Instrucciones para Windows

En este curso veremos solo la instalación para Windows.

ITI

Página 17


Fig. 2.9 Instrucciones para la instalación de App Inventor en nuestra computadora.

Actividad 3 – Instalar App Inventor en Windows

1. Hacemos clic en el enlace para Windows en la página web de configuración de Google App Inventor. 2. Descargamos el instalador “appinventor_setup_installer_v_1_2.exe“ .

Fig. 2.10 Instalación de App Inventor en W indows

3. Una vez descargado, ejecutamos “ appinventor_setup_installer_v_1_2.exe”. Seguimos las instrucciones que se nos indiquen.

Fig. 2.11 Cuadro de dialogo al instalar App I nventor.

ITI

Página 18


Bien, ya hemos instalado App Inventor en nuestra computadora con Windows como sistema operativo, pero, ¿como sabemos si funciona? Para saber si funciona tenemos que probarlo, así que tenemos que agregar otro elemento del Inventor, un dispositivo de Android para probar nuestras aplicaciones. Instalar y ejecutar el emulador

Hemos visto hasta ahora que App Inventor se compone de tres partes: En la w eb , el d is eñ ad o r . La parte que accedemos por medio de nuestra cuenta

de Google. . El editor de bloques que descargamos del sitio App En nuestra com putadora Inventor. . Puede ser un emulador en nuestra computadora o un Un dispositivo de prueba teléfono Android conectado vía cable USB. Lo siguiente será instalar un emulador para poder ejecutar las aplicaciones que desarrollemos. Actividad 4 – Abrir el emulador

Tenemos que ir a la opción “My Projects” en nuestra cuenta de App Inventor. Creamos un nuevo proyecto haciendo clic en el botón “new”. Se nos pedirá que

pongamos nombre a nuestro proyecto, sugiero le pongan Practica1.

Fig. 2.12 Cuadro de dialogo Nuevo proyecto en App Inventor

Una vez coloquemos el nombre y hagamos clic en el botón “OK” nos aparecerá el

diseñador de aplicaciones, como se muestra en la figura 2.13. Esta es la forma en la que siempre vamos a entrar a la parte de App Inventor desde web. Para entrar a la parte que se ejecuta en nuestra computadora tenemos que hacer clic en el botón “Opens Blocks Editor” que se encuentra arriba a la derecha en la página.

ITI

Página 19


Fig. 2.13 Diseñador de aplicaciones.

Nos aparecerá un cuadro de dialogo como el que se muestra en la figura 2.14.

Fig. 2.14 Iniciando el Editor de Bloques.

Esperamos un momento, hasta que desaparezca el cuadro de dialogo anterior. Finalmente aparecerá frente a nosotros el editor de bloques de App Inventor, Figura 2.15.

Fig. 2.15 El mismísimo editor de bloques de App Inventor. ITI

Página 20


Si nos ha aparecido la ventana de la figura 2.15 significa que la instalación de Java y del software de App Inventor se ha hecho correctamente. Lo que queremos ahora es mostrar el emulador y probar que funcione para nuestros propósitos. Para hacer aparecer el emulador, hacemos clic en el botón “New Emulator” en la interface del editor de bloques. Esperamos un momento antes de que el emulador aparezca. La figura 2.16 nos muestra la pantalla que aparecerá, advirtiéndonos que tomará algún tiempo la carga del emulador.

Fig. 2.16 Iniciando el emulador.

Ya que toma demasiado tiempo iniciar el emulador, hay que mantenerlo abierto durante toda nuestra sesión de trabajo. Después de esperar, finalmente el emulador se cargará y se debe mostrar una pantalla como la que muestra la figura 2.17.

Fig. 2.17 El emulador de Android ITI

Página 21


La ventaja de un emulador es que no necesitamos un teléfono celular. La desventaja es la lentitud en su inicialización y operación. Conectar nuestro dispositivo Android

¿Como logramos una conexión entre nuestro Android y la computadora? Nuestro dispositivo viene con un cable USB, así que, físicamente es el puente entre el dispositivo y la computadora. Por otro lado, necesitamos los controladores USB para terminar el trabajo. Los controladores son piezas de software instaladas en nuestra computadora y permiten que cierto dispositivo Android se comunique con el Editor de Bloques del App Inventor. Un dispositivo móvil, como los teléfonos inteligentes, tabletas, etc., trabajan mejor y mas rápido como dispositivos de prueba que un emulador. Para poder usar nuestro dispositivo en este curso, tenemos que configurarlo correctamente, además de enlazarlo para que trabaje con el Editor de Bloques. Lo que tenemos que hacer es, conectar el dispositivo mediante el cable usb a la computadora donde hemos descargado el App Inventor. Después hacer clic en el botón “Connect to Device” que se encuentra en la parte superior derecha en la

pantalla del Editor de Bloques. Tendríamos que ver el número de serie de nuestro dispositivo, como se muestra en la figura 2. 18. En caso de ser necesario instalaremos de forma manual nuestros controladores, algunas veces vienen en un cd con nuestros dispositivos, otras veces tenemos que descargarlos desde internet. Actividad 5 – Configurar nuestro dispositivo

Al instalar los controladores USB, como se hizo anteriormente, se hace posible que nuestro dispositivo y la computadora se “vean” mutuamente. Al configurar nuestro dispositivo le permitiremos “hablar” con el App Inventor. Este es el último

paso en la configuración del entorno de trabajo de App Inventor. A continuación configuraremos nuestro dispositivo Android. 1. 2. 3. 4.

ITI

Clic en el botón “home” (comúnmente es el botón central).

Seleccionar el botón menú. Seleccionar configuración. Clic en aplicaciones. Se nos deberá mostrar algo parecido a la figura 2.19.

Página 22


Fig. 2.19 Menú Configuración de Aplicaciones en Android.

5. Hacemos clic en el checkbox a la derecha de “orígenes desconocidos”. 6. Nos movemos hacia abajo en la pantalla y seleccionamos “desarrollo”. En la pantalla de desarrollo seleccionamos “Depuración de “Permanecer activo”. Todo esto con el cable USB desconectado.

USB”

y

Fig. 2.20 Menú Desarrollo en Android.

7. Regresamos a la ventana principal de nuestro dispositivo, haciendo clic en el botón “Home”. Ahora conectamos el dispositivo a la computadora utilizando el cable USB. 8. Vamos a hacer aparecer una ventana, que se encuentra en la parte superior de la pantalla, donde esta el reloj, la fecha, entre otras cosas. Deslizamos el dedo de arriba (tope de la pantalla del dispositivo) hacia abajo, y se nos mostrará la siguiente pantalla. Se nos mostrarán los ítems “depuración USB conectada” y “USB conectado”, fig. 2.21.

Con esto completamos la configuración de nuestro dispositivo para probar las aplicaciones que desarrollemos. Estamos listos ahora para crear apps y aprender sobre el App Inventor.

ITI

Página 23


Fig. 2.21 Conexión vía USB.

ITI

Página 24


CONOCIENDO LOS COMPONENTES DE APP INVENTOR

ITI

Página 25


Utilizar la interface web de App Inventor Esta interface esta compuesto por sólo dos páginas: “My Projects” y “Design”.

Como aprendimos anteriormente, para ingresar al App Inventor tenemos que ir a http://beta.appinventor.mit.edu/ y firmar con nuestra cuenta de Google. Debemos tomar en cuenta algo cuando trabajamos en App Inventor. Aunque estamos en internet, no estamos navegando en un sitio web, estamos ejecutando un programa. Google almacena una copia de nuestros datos en la nube. Mis proyectos

La primera opción es “My Projects” (mis proyectos). En esta opción se nos muestran tres botones “My projects”, “Design” y “Learn”. Los tres los repasamos anteriormente. Un poco mas abajo de estos botones podemos elegir alguna de las siguientes opciones. New , que

nos permite crear nuevos proyectos.

, Delete

es una forma de eliminar proyectos que ya no queremos tener almacenados More Action s, nos permite cargar y descargar proyectos desde “mis proyectos”.

Fig. 3.1 Botones en la opción “My Projects”

Para entrar en la opción de diseño del App Inventor, debemos tener ya un proyecto, de lo contrario, podemos crear uno nuevo. Actividad 6 – Crear un proyecto nuevo

Esta es una tarea sencilla. 1. Hacemos clic en el botón New. 2. En el cuadro de dialogo que aparece, escriba el nombre del proyecto a crear (sin espacios ni puntos en el nombre, podemos usar guion bajo) y después hacemos clic en el botón OK.

ITI

Página 26


Fig. 3.2 Cuadro de dialogo Nuevo proyecto

El diseñador se abrirá con nuestro nuevo proyecto totalmente en blanco, listo para ser desarrollado. Bien, ya sabemos ahora como crear un nuevo proyecto. Diseñar un proyecto

El diseñador esta compuesto por 4 columnas: Palette, Viewer, Components y Properties.

Fig. 3.3 La vista del diseñador.

Palette es nuestra librería de componentes. Podemos seleccionar los componentes que queramos usar, arrastrarlos hasta el Viewer y dejarlos en la pantalla del teléfono virtual. En C o m p o n e n t s se nos permite renombrar los componentes que estamos usando para evitar confusiones, o borra aquellos que no necesitemos. Finalmente tenemos la categoría Properties . Esta nos ayuda a determinar color, tamaño, tipo de texto, entre tantos ítems dependiendo del propósito del componente.

ITI

Página 27


Componentes Básicos

La columna que esta más a la izquierda, almacena componentes. Podemos ver que están organizados por categorías. La primera categoría es la básica. Esta categoría tiene los componentes más básicos pero los mas usados también.

Fig. 3.4 Categoría básica.

Al lado de cada componente se muestra un signo de interrogación encerrado en un círculo. Si hacemos clic en ese signo, se nos mostrará ayuda sobre el componente.

Fig. 3.5 Ayuda sobre el componente en cuestión.

Podemos hacer clic en “More Information” si quer emos información adicional sobre

el componente.

ITI

Página 28


Botón

El componente botón es muy simple. Podemos hacer clic en el y algo sucederá. Un botón, como la mayoría de los componentes en al App Inventor nos da un marco de trabajo, donde muchas cosas pueden ocurrir. Actividad 7 – Manejo del botón 1. Cree una aplicación nueva llamada appBoton_01. 2. De la columna Palette, seleccionamos Basic. Después arrastramos el componente Button hasta la pantalla del teléfono virtual, situado en la columna Viewer. El resultado debe verse como sigue.

Fig. 3.6 Columna Viewer, pantalla del telé fono virtual con un botón.

3. Vamos a cambiar el nombre del componente “Button”. Para hacer esto en la columna “Components” seleccionamos el botón que recién incorporamos. En la parte de abajo de la columna “Components” hacemos clic en el botón “Rename”. Aparecerá un cuadro de dialogo, donde se nos permitirá cambiar el nombre del componente. Escribiremos “Prueba” en la entrada “New name”. Hacemos clic en el botón OK par aceptar los cambios.

ITI

Página 29


Fig. 3.7 Cambiando el nombre al componente.

4. Ahora modificaremos las propiedades del componente Screen1. Específicamente, cambiamos el color de fondo a negro y el texto que muestra a “Hola Android…”.

Fig. 3.8 Cambiando las propiedades del componente Screen1.

5. Modifiquemos también algunas propiedades del botón. Haremos el color de fondo naranja, y remarcaremos el texto (Bold) y finalmente, cambiaremos el texto del botón por “Pruebame!”.

ITI

Página 30


Fig. 3.9 Cambiando las propiedades del botón.

6. Ahora vamos a Editar los Bloques. Hacemos clic en el botón “Open the Blocks Editor”. Justo arriba de la columna “Properties”, en el App Inventor.

Fig. 3.10 Botón Editor de Bloques ITI

Página 31


7. En la interface del Editor de Bloques conectamos nuestro dispositivo.

Fig. 3.11 Conectamos el dispositivo al Editor de Bloques.

8. Ahora empezaremos a conectar bloques. Debajo de la pestaña “My Blocks” vamos a “Prueba” y seleccionamos “when Prueba.Click do”

Fig. 3.12 Edición de los bloques en la Aplicación de ejemplo.

9. En la misma pestaña “My Blocks” y en los bloques de “Prueba” vamos a seleccionar “set Prueba.Text to” y lo colocamos dentro del bloque anterior.

Fig. 3.13 Modificación de las propiedades mediante bloques. ITI

Página 32


10. Bajo “Built -In/Text” arrastramos una variable de tipo texto (es la primera opción), cambiamos el valor de la variable haciendo clic en el texto lo editamos y ponemos “Hola!”.

Fig. 3.14 Ingresar una variable de texto y modificar su valor.

11. Ya esta, terminamos nuestra aplicación. Nuestros bloques quedaron así.

Fig. 3.15 Bloque terminado.

La ejecución de la app en el emulador se muestra a continuación.

Fig. 3.16 App móvil ejecutándose en el emulador. ITI

Página 33


CheckBox

Son ampliamente utilizados para establecer o eliminar opciones. Este componente nos permite añadir casillas de verificación a nuestras aplicaciones. Al marcar o desmarcar uno de ellos nos devuelve un resultado Booleano (verdadero o falso).

Fig. 3.17 Ejemplo de checkbox.

Clock

El componente clock tiene que ver con el tiempo. Podemos utilizarlo como temporizador creando eventos que ocurran a cada cierto periodo. Es un componente invisible. Cuando lo llevamos a la pantalla virtual en la columna “viewer” no se quedará ahí, se colocará sin embargo debajo de la pantalla.

Fig. 3.18 Componente no visible “Clock”.

ITI

Página 34


Image

Es una foto u otro elemento gráfico que puede ser insertado en nuestra aplicación. Una vez cargada la imagen, puede ser usada en cualquier otra aplicación, cuantas veces queramos. Entre los formatos aceptados están JPEG, BMP, GIF y PNG. Label

Es el segundo componente mas usado en App Inventor. Label muestra texto, el cual se especifica en la propiedad Text, en la columna Design.

Fig. 3.19 Componente “ Label ”.

ListPicker

Al llevar este componente a la pantalla virtual en nuestro diseñador, habilitamos las herramientas para manipular listas en el editor de bloques. Las listas de elementos se establecen definiendo una variable con el nombre de la lista y utilizando el bloque “make a list” que se encuentra en la ficha Built -In/List, llenaremos la lista con variables de texto, que se obtienen de Built-In/Text).

Fig. 3.20 Componente ListPicker. ITI

Página 35

Cur So Android

Recommend Documents