7/16/2019 App Inventor

http://slidepdf.com/reader/full/app-inventor-5633888a60abf 1/27

App inventorCómo programar los teléfonos móviles con Android mediante

App inventor.

¿Qué es Android?

Android es un sistema operativo gratuito que utiliza muchosteléfonos móviles actuales (teléfonos inteligentes = smartphone),está basado en LINUX. Android pertenece a Google.

Cada cierto tiempo aparecen nuevas versiones: 1.5 (Cupcake), 1.6(Donut), 2.0 (Eclair), 2.2 (Froyo), 2.3 (Gingerbread), 3.2(Honeycomb), Ice Cream Sandwich...

 También existen otros sistemas operativos para teléfonos como elSymbian OS y el iOS, pero en España se está imponiendo elAndroid. (Ver gráfico estadístico de como en España se estáimponiendo el Android)

El Android lo podemos programar fácilmente y realizar programasde fórmulas matemáticas, juegos, ubicación en los mapas degoogle, mover un robot mediante blutooth, contestación automáticade sms,...

7/16/2019 App Inventor

http://slidepdf.com/reader/full/app-inventor-5633888a60abf 2/27

- ¿Para aprender a programar el Android necesito tener unteléfono móvil con Android?

No. Solo necesitas un ordenador y conexión a Internet. En el

ordenador puedes hacer los programas y probarlos en unemulador instalado en el mismo ordenador.Si tienes un teléfono móvil con Android puedes pasar los programasrealizados al móvil para ver cómo funcionan.

- ¿Qué programa se utiliza para programar el Android?

Hay tres formas principales:

1.- Con Android SDK y Eclipse . Se realizan los programasescribiendo códigos. Es la forma que utilizan los buenosprogramadores. Puedes ver ejemplos en este vídeo.

2.- Mediante una aplicación de pago (50 € aproximadamente)llamada BASIC4Android, para realizar programas de maneraparecida a como se hace con Visual BasicIMPORTANTE: si te interesa esto de hacer programas sencillospara Android consulta este tutorial de aprendizaje e iniciación quehe realizado: pequeño tutorial BASIC4Android.

3.- Mediante App inventor. Es una forma intuitiva de hacer

programas situando convenientemente las instrucciones como sifueran piezas de un puzzle. Utilizaremos App inventor para realizarnuestros programas. Lo que sí necesitas es estar conectado aInternet para poder utilizar el App inventor.

- App Inventor apareció el 12 de julio de 2010, y se abrió a todo elpúblico en 15 de diciembre de 2010.- A principo de agosto de 2011 Google anunció que ya nomantendría esta aplicación, pero que la haría código libredestinado a la educación.- Una semana después el Instituto Tecnológico de

Massachusetts (MIT), una institución de educación superiorprivada situada en Cambridge, Massachusetts (EE.UU.), anunció

7/16/2019 App Inventor

http://slidepdf.com/reader/full/app-inventor-5633888a60abf 3/27

que se haría cargo del proyecto.Ver web.- El 31 de dicembre de 2011 App Inventor de Google dejó defuncionar.- El 4 de marzo de 2012, el Instituto Tecnológico de Massachusetts

(MIT) volvió a poner el proyecto en Internet.

App inventor

Para entrar es necesario tener una cuenta en Google.http://appinventor.mit.edu/

http://beta.appinventor.mit.edu

7/16/2019 App Inventor

http://slidepdf.com/reader/full/app-inventor-5633888a60abf 4/27

Los programas se realizan mediante bloques, que son una especiede piezas de puzzle.

No tiene programa fuente escrito en texto.

- ¿De dónde me bajo el App inventor?

El App inventor no es un programa que te tengas que bajar alordenador. Funciona en cloud computing, el programa funcionamediante la conexión a Internet, tu trabajas con el programaconectado directamente al servidor de App inventor. Es como unapágina web y en ella realizas las operaciones.

7/16/2019 App Inventor

http://slidepdf.com/reader/full/app-inventor-5633888a60abf 5/27

Para que funcione necesitas tener instalado JAVA. Tambiénnecesitas asociar tu correo a Google, esto se realizainmediatamente sin dificultad.

 Te pedirá que te autentifique, si no tienes cuenta de Google,simplemente te registras con el correo que tengas, en mi caso conmi cuenta de yahoo.com.

7/16/2019 App Inventor

http://slidepdf.com/reader/full/app-inventor-5633888a60abf 6/27

New: para crear un nuevo programa.

More Actions: Upload Source: para cargar un programa. Losprogramas están en formato comprimido.zip. Pero para cargarlos no tenemos que descomprimirlo manualmente, sino que el Appinventor se lo traga en zip.

More Actions: Download Source: si hemos realizado unprograma como el Adivina y queremos guardarlo en nuestroordenador, lo marcamos y pulsamos Download Source. Se guarda enformato .zip

7/16/2019 App Inventor

http://slidepdf.com/reader/full/app-inventor-5633888a60abf 7/27

Baja a tu ordenador el programa que vamos a realizar:Pitagoras.zip, y luego ve a More Actions: Download Source: para cargarlo (no hace falta descomprimirlo, déjalo con el .zip)

Hay que tener en cuenta que el programa que realizamos se cargará

en el servidor de App inventor en Internet.

NOTA: El Internet Explorer da a veces errores en la subida y bajadade archivos, es preferible utilizar el Chrome de Google.

NOTA: Si quieres instalarlo en tu ordenador, te bajas el instalador ysigue estos pasos...http://beta.appinventor.mit.edu/learn/setup/setupwindows.html

NOTA: Si se sale el error: "Please locate the command

directory on your computer and enter the full path below",instala el App inventor:http://beta.appinventor.mit.edu/learn/setup/setupwindows.html

 También es posible que salga este mensaje al abrir el "Block Editor"

Ejemplo: http://teach.appinventor.mit.edu/curriculum/hello-purr

- Vamos a ver como he creado el programa desde elprincipio. Pitagoras.zip

En nuestro caso va a ser el teorema de Pitágoras. Introducimoslos dos catetos y nos dará la hipotenusa.

- Pulsamos New.

7/16/2019 App Inventor

http://slidepdf.com/reader/full/app-inventor-5633888a60abf 8/27

Screen1 es la pantalla de nuestro móvil.

En Palette están los elementos o componentes que podemos poneren la pantalla de nuestro móvil. Botones, casilleros, imagenes,etiquetas,...

Vamos a arrastrar a la pantalla Screen1:

Una etiqueta (Label1)

Un casillero (TexBox1)

Otra etiqueta (Label2)

Otro casillero (TexBox2)

Un botón (Button1)

7/16/2019 App Inventor

http://slidepdf.com/reader/full/app-inventor-5633888a60abf 9/27

Otra etiqueta (Label3)

Fíjate a la derecha están las Propiedades de cada elemento...

Si marcas Label1, en la derecha puedes ponerla negrita (Bold),

tamaño (FontSize), el texto que quieres que aparezca en esaetiqueta (Text)

Cada cierto tiempo pulsa en botón Save, para guardar los cambios

que vayas realizando...

- ¿Cómo va quedando esto? Open the Blocks Editor

Si conectamos el móvil mediante USB al ordenador y pulsamosDownload to Connect Phone pasaríamos el programa al móvil.

7/16/2019 App Inventor

http://slidepdf.com/reader/full/app-inventor-5633888a60abf 10/27

Pero nosotros queremos utilizar el emulador para ver como vaquedando en nuestro ordenador, y además aún nos queda poner loscódigos del programa, para ello pulsamos Open the Blocks Editor.

Abrimos y permitimos que entre JAVA...

Si te salen estos mensajes pulsas en Descargar, luego Abrir el programa que hasdescargado y lo Ejecutas.

7/16/2019 App Inventor

http://slidepdf.com/reader/full/app-inventor-5633888a60abf 11/27

Saldrá una pantalla como la de abajo, pero sin el código.

Pulsamos en New emulator (espera un minuto que carguetotalmente) y luego en Connect to Device... emulator - 5554,pasa pasar el programa que estamos haciendo al emulador (espera

que cargue totalmente).Si no sale el programa en la pantalla, pulsa el botón de abajo dondepone MENÚ.

7/16/2019 App Inventor

http://slidepdf.com/reader/full/app-inventor-5633888a60abf 12/27

7/16/2019 App Inventor

http://slidepdf.com/reader/full/app-inventor-5633888a60abf 13/27

Si te sale una pantallita negra indicando emulator: warning:opening audio input failed, vas al Administrador de tareas (Ctrl +Alt + Supr) y termina la tarea adb.exe.

7/16/2019 App Inventor

http://slidepdf.com/reader/full/app-inventor-5633888a60abf 14/27

- Vamos a ver el código...

Vamos a utilizar 3 variables numéricas: un cateto (x), otro cateto(y), la hipotenusa (z).

Esas variables tenemos que declararlas, para ello vamos a Built-In /Definition

(Declararlas significa presentarlas antes de que el programa

comience)

Sacamos la pieza variable.

En variable ponemos x

Pulsamos donde pone as

luego en Math

y luego en 123 para indicarle que trabajamo

con números.

Lo ponemos en el valor 1.

Si te equivocas al poner una pieza, la puedes borrar echándola en la

papelera que aparece en la parte inferior derecha.

7/16/2019 App Inventor

http://slidepdf.com/reader/full/app-inventor-5633888a60abf 15/27

 Ya tenemos las tres variables numéricas con valor inicial 1.En My Blocks están los elementos de los que disponemos en lapantalla y las variables que hemos creado.

Queremos que cuando hagamos Click en el Button1, serealice la fórmula del teorema de Pitágoras.

Vamos a My Blocks / Button1 / y sacamos Button1.Click 

7/16/2019 App Inventor

http://slidepdf.com/reader/full/app-inventor-5633888a60abf 16/27

- Dentro de Button1.Click 

- Tomamos el contenido del TextBox1.Text y lo asignamos a lavariable x

- Tomamos el contenido del TextBox2.Text y lo asignamos a lavariable y

- Hacemos la raiz cuadrada (sqrt) de x elevado a 2 más yelevado a dos y ese resultado lo asignamos a z

- Ponemos en el Label3.Text la unión (join) de "La hiponenusavale..." y el valor de z.

Las piezas de las operaciones matemáticas las tomamos de Built-InLos TextBox, Label, Button y las variables establecidas las tomamosde My Blocks

7/16/2019 App Inventor

http://slidepdf.com/reader/full/app-inventor-5633888a60abf 17/27

 Ya lo tenemos. Pruébalo para ver cómo funciona.

- Me funciona en el emulador, ahora ¿cómo lo paso al móvil?

Como indiqué anteriormente pulsamos en Package for Phone y, o

bien lo guardarmos en nuestro ordenador, será un archivo de laforma pitagoras.apk y luego este archivo por cable USB,bluetooth,... lo pasamos al móvil. O bien lo pasamos directamente almóvil mediante Dowload to Connected Phone. También se puede pasar mediante código de barra.

________________________________________________________________

Otro Programa

Adivina el número. Adivina.zip

Ahora se trata de hacer un programa llamado Adivina.zip dondepulsamos un botón, en ese momento el móvil crea un númeroaleatorio comprendido entre el 1 y el 100 que debemos adivinar.

Luego introducimos un número en el casillero y pulsamos elbotón ¿Es este?

El programa nos responderá si el número creado es igual, mayoro menor que el que hemos introducido.

Metemos en la pantalla Screen1 los siguientes elementos: Button1,Label1, TextBox1, TableArrangement1, Label2 y Label3

es de poner estos componentes... Así es como quedará elemulador...

7/16/2019 App Inventor

http://slidepdf.com/reader/full/app-inventor-5633888a60abf 18/27

: La Label3 no aparece porque en he desmarcado suiedad Visible.

Pulsamos en Block Editor y montamos este puzzle deinstrucciones...

7/16/2019 App Inventor

http://slidepdf.com/reader/full/app-inventor-5633888a60abf 19/27

Explicación:

7/16/2019 App Inventor

http://slidepdf.com/reader/full/app-inventor-5633888a60abf 20/27

- Definimos la variable ordenador como numérica

- Definimos la variable mio como numérica.

- Cuando hacemos Click en el Button1: 

- Se asigna a la variable ordenador un número aleatorio comprendido entre el 1 y el 100

- En la Label3.Text aparece el número creado (Estas dos piezas delpuzzle, Label3.Text = ordenador, las borraremos luego para que nosepamos el número del ordenador)

- Cuando hacemos Click en el Button2:

- Se le asigna a la variable mio el valor que el usuario del juegoponga en el Text1.Text

- Si el número del ordenador es mayor que el mio, aparece enel Label2.Text la frase Mi número es mayor

- Si el número del ordenador es menor que el mio, aparece enel Label2.Text la frase Mi número es menor.

- Si el número del ordenador es igual que el mio, aparece en elLabel2.Text la frase HAS ACERTADO.

________________________________________________________________

Otro Programa

Ruleta rusa Ruleta.zip

Vamos a ver un programa basado en el juego de la Ruleta.zip rusa

En este caso tenemos una pistola para 6 balas.

Primero Rearmamos la pistola poniendo una sola bala y girando eltambor. La bala se ubicará aleatoriamente en uno de los 6 sitios.

Luego vamos pulsando de manera desordenada los distintosbotones.

Si el número de lugar de la bala coincide con el número del Botónpulsado, la pantalla se tiñe de rojo

En caso contrario se deshabilita (Button.Enabled = False ) el botón

pulsado

7/16/2019 App Inventor

http://slidepdf.com/reader/full/app-inventor-5633888a60abf 21/27

es de poner estos componentes...

: La Label3 no aparece porque en he desmarcado suiedad Visible.

Así es como quedará elemulador...

7/16/2019 App Inventor

http://slidepdf.com/reader/full/app-inventor-5633888a60abf 22/27

Cuando pulsamos el botón de Rearmar, Button7.Click , se crea unnúmero aleatorio del 1 al 6, se habilitan (Enabled = True) todos losbotones y se pone el fondo de la pantalla en blanco.

Cuando pulsamos cualquier botón:

7/16/2019 App Inventor

http://slidepdf.com/reader/full/app-inventor-5633888a60abf 23/27

- Si el valor x generado aleatoriamente en el rearme coincide con elnúmero del botón, se pone la pantalla roja.

- En caso contrario, se deshabilita el botón pulsado.

Otro Programa

Tres iguales Tresiguales.zip

Se trata de pulsar el botón Comienzo, en ese momentos tresimagenes fresa.gif, limon.gif y pera.gif, se van reproduciendoaleatoriamente en los cuadros (Image1, Image2 y Image3). Cuandopulsamos el botòn Para, las imagenes quedan estáticas, seincrementa en uno el número de intentos y se comprueba si las tresimagenes son iguales, en este caso se incrementa en uno el número

de aciertos.Fijate que en el temporizador Clock1 hemos puesto unTimeInterval de 200

Que las imágenes que vamos a utilizar ( fresa.gif, limon.gif ypera.gif ) la hemos Añadido en el apartado Media. Aquí tienes losdibujos de las frutas.

os componentes... Así es como quemulador...

7/16/2019 App Inventor

http://slidepdf.com/reader/full/app-inventor-5633888a60abf 24/27

7/16/2019 App Inventor

http://slidepdf.com/reader/full/app-inventor-5633888a60abf 25/27

7/16/2019 App Inventor

http://slidepdf.com/reader/full/app-inventor-5633888a60abf 26/27

Declaramos las variables numéricas.

Cada vez que se active el temporizador Clock1.Timer...

Creamos tres números aleatorios x, y y z del 1 al 3

Dependiendo del número que salga y de la variable insertamos undibujo

En botón Button1.Click es de parada, cada vez que lo pulsamosdeshabilita el temporizador Clock1.Timer= false, incrementamos enuno los intentos y los mostramos en el Text1.Text, ademáscomprobamos si los números aleatorios x, y, z son iguales, en estecaso incrementa en uno los aciertos y los muestra en el Text2.Text.

El Button2.Click vuelve a habilitar el temporizadorClock1.Enabled=true

El Button3.Click establece los valores iniciales y arranca eltemporizador.

Subir la aplicación al Play Store de Google(antes se llamaba Android Market (marzo 2012)).

- Un vez construida nuestra aplicación, la podemos subir al Play

Store de Google, para que cualquier persona la pueda bajar.(Gratuitamente o de pago)

7/16/2019 App Inventor

http://slidepdf.com/reader/full/app-inventor-5633888a60abf 27/27

Pero...

...para subir aplicaciones al Play de Google, debemos tener unacuenta de Desarrollador, para tener esta cuenta debemos abonar25 $ ( aproximadamente 20 €).

Entramos en esta página y nos damos de alta abonando 25 $ decuota de registro. https://play.google.com/apps/publish/signup