I.E.S. Cuenca Minera
Dto. Tecnologia
UNIDAD: APP INVENTOR
Índice: 1.- INTRODUCCIÓN.................................. INTRODUCCIÓN.......................................................... ............................................... .............................................. ...................................................2 ............................2 2.- ELEMENTOS DE PROGRAMACIÓN EN APP INVENTOR........................... INVENTOR.............................................................. ................................... 3 2,1,.- SENTENCIAS........................... SENTENCIAS.................................................. .............................................. .............................................. ....................................................... ................................ 3 2,2,- CONDICIONES............................... CONDICIONES...................................................... .............................................. ....................................................................... ................................................ .4 2,3,,- BUCLES............................... BUCLES...................................................... .............................................. ............................................... ............................................................ .................................... 4 2,4,- VARIABLES................................ ARIABLES....................................................... .............................................. .............................................. .............................................. ...............................5 ........5 2.5.- EVENTOS....................... EVENTOS............................................... ............................................... .............................................. ............................................................. ...................................... ....5 3.- ¿DE DÓNDE ME BAJO EL APP INVENTOR?....................... INVENTOR?.............................................. ........................................................... .................................... .. 4.- INTER!ACE................. INTER!ACE........................................ .............................................. .............................................. .............................................. .............................................. ..............................." ........" 5.- INSTALACIÓN INSTALACIÓN EN EL MÓVIL #$%$ #%&'($ ) *'#&%$+ /*'(&0....................................................1 /*'(&0....................................................1 5,1,- PRIMERA !ORMA:...................................... !ORMA:............................................................. .............................................. .............................................. ...................................1 ............1 5.2.- SEGUNDA !ORMA:...................................... !ORMA:............................................................. .............................................. ................................................. ................................12 ......12 5.3.- TERCERA !ORMA:.......................................... !ORMA:................................................................. .............................................. ............................................. .............................13 .......13 .- INSTALAR EL PROGRAMA EN NUESTRO MÓVIL PARA USO DE USUARIO /COMPILACIÓN..................................... /COMPILACIÓN.............. .............................................. .............................................. .............................................. .................................................... ............................. 14 .1.- GUARDAR EL PROGRAMA......................................... PROGRAMA................................................................ ....................................................... ................................ ......15 ".- ACTIVIDADES................................ ACTIVIDADES....................................................... .............................................. .............................................. .............................................. ................................1 .........1
-1-
I.E.S. Cuenca Minera
Dto. Tecnologia
1.- INTRODUCCIÓN
Android es un sistema operativo gratuito que utiliza muchos tel é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), 4.0 (Ice Cream Sandwich), 4.1 (Jelly Bean), 4.2 Jelly Bean (Gummy Bear), 4.3 (Jelly Bean), 4.4 (KitKat), 4.5 (kit kat), 5.0 (Lollipop) ...
E A*%* #*'6 #%0%$$% 78+'9' ) %'$$% #%0%$$6 *' 7%&$6 $9'89+$6, ;&'06, &(+$+ ' 6 $#$6 *' G0', <'% & %(9 '*$9' B&'99=, +9'69$+ $&989+$ *' SMS,...
P$%$ $#%'*'% $ #%0%$$% ' A*%* '+'69 & %*'$*% ) +'> $ I9'%'9 . En el ordenador puedes hacer los programas y probarlos ' & '&$*% 69$$* ' ' 6 %*'$*%. S 9''6 & 9'7 < 9$('9 + A*%* #&'*'6 #$6$% 6 #%0%$$6 %'$$*6 $ < #$%$ <'% + 7&+$ ) &9$%6. P$%$ #%0%$$% ' A*%*, 6' I*+$ tres formas: 1.- C Android SDK y Eclipse . S' %'$$ 6 #%0%$$6 '6+%('* +*06 ' J$<$. E6 $ 7%$ @&' &9$ 6 (&'6 #%0%$$*%'6 . 2.-
M'*$9'
&$
$#+$+
*'
#$0
/4
$#%>$*$'9'
$$*$
(B4A)
BAS!4Android , #$%$ %'$$% #%0%$$6 *' $'%$ #$%'+*$ $ + 6' =$+' + V6&$ B$6+ 3.- M'*$9' A## <'9%. E6 &$ 7%$ 9&9<$ *' =$+'% #%0%$$6 69&$* +<''9''9' $6 69%&++'6 + 6 7&'%$ #'$6 *' & #&'. U9$%'6 A## <'9% #$%$ %'$$% &'69%6 #%0%$$6. L @&' 6 necesitas es estar conectado a nternet #$%$ #*'% &9$% ' A## <'9%: - A## I<'9% $#$%'+ ' "# de $ulio de #%"% , ) 6' $(% $ 9* ' #(+ ' 15 *' *+'(%' *' 21. - L *'6$%%$% '9%' $ A('6 *' MIT ) 6 0''%6 *' G0' E' S#'%9&6 ) L L'), ;&9 + D$<* ('% #%7'6% *' US!CA ) *<&0$*% *' $ $#+$+. -2-
I.E.S. Cuenca Minera
Dto. Tecnologia
- A #%+# *' $069 *' 211 &oogle anunci' ue ya no mantendra esta aplicaci'n , #'% @&' $ =$%$ +*0 (%' *'69$* $ $ '*&+$+. - U$ 6'$$ *'6#&6 ' nstituto *ecnol'gico de +assachusetts /+*, &$ 699&+ *' '*&+$+ 6&#'%% #%<$*$ 69&$*$ ' C$(%*0', M$66$+=&6'996 /EE.UU., anunci' ue se hara cargo del proyecto. - E 31 *' *+'(%' *' 211 A## I<'9% *' G0' *'; *' 7&+$%. - E 4 de mar,o de #%"# , ' I699&9 T'+0+ *' M$66$+=&6'996 /MIT << $ #'% ' #%)'+9 ' I9'%'9. - E diciembre de #%"- +* saca A # , &$ &'<$ <'%6 *' A## I<'9%: http://ai#.appin0entor.mit.edu - E no0iembre de #%"4 6$' $ #+ *' *$, + +&$ #*'6 <'% $ $)%$ *' 6 '''96 en espa1ol.
- E 15 *' ;& *' 215 *'6$#$%'+' A## <'9% /' $90&. E>69' &$ $#+$+ F'( #$%$ #$6$% 6 #%)'+96 .# *' A## <'9% $ .$$ *' A## <'9% 2. A#+$+ '. 2.- ELEMENTOS DE PROGRAMACI ÓN EN APP INVENTOR
L6 #%0%$$6 6' %'$$ '*$9' bloques, @&' 6 &$ '6#'+' *' #'$6 *' #&'. N 9'' #%0%$$ 7&'9' '6+%9 ' 9'>9 . V'$6 $0&6 *' '66 (@&'6 :
2,1,.- SENTENCIAS Al programar necesitamos a menudo decirle al ordenador que haga algo. En App Inventor existen numerosos bloques que son sentencias de programaci ón. Se distinguen rápidamente porque expresan una acción a realizar con un verbo en imperativo. Los m ás habituales son call , set y def (abreviatura de define). Además, los bloques que son sentencias sólo están disponibles en dos colores: azul para
modificar variables o propiedades de un objeto y naranja para llamar a funciones. En la imagen siguiente se ven algunos ejemplos de las sentencias para dividir un texto en partes, convertirlo a may úsculas, cambiar la altura, texto o visibilidad de un recuadro de texto o definir una variable.
-3-
I.E.S. Cuenca Minera
Dto. Tecnologia
2,2,- CONDICIONES
Con frecuencia necesitamos realizar distintas acciones en funci ón de que ocurra o no algo. En App Inventor para condicionar nuestro programa tenemos las estructuras if-then , if-then-else , while y choose:
E 9*6 '696 (@&'6 6' #&'*' <'% + 9''6 ' $ #$%9' 6&#'%% & '6#$+ #$%$ '+$;$% ' 9'69 #%'0&9$ @&' 6' =$+' ' #%0%$$ #$%$ *'+*% #% **' +9&$% 6& 7&;. L$6 9%'6 #%'%$6 '69%&+9&%$6 6 =$(9&$'6 ' $ $)%$ *' 6 '0&$;'6, $ 9$, choose , '6 #%8+9+$'9' 0&$ $ ifthen-else + $ *7'%'+$ *' @&' #'%9' *'<<'% &$ <$%$(' ' 7&+ *' @&' 6' +&#$ ' 9'69.
2,3,,- BUCLES
U (&+' #%<+$ $ ';'+&+ %'#'9*$ *' <$%$6 6'9'+$6. E A## <'9% *6#'6 *' 6 (&+'6 while, for range ) foreach.
E #%'% ';'+&9$%8 ' (@&' *' 6'9'+$6 @&' 6' '+$;' ' ' $#$%9$* * '9%$6 6' +&#$ $ +*+ @&' %'7';' ' 9'69. for range '6 ' 9#+ (&+' forH *' 9%6 '0&$;'6 *' #%0%$$+ ), + 9$, 9'' $6 #+'6 *' ''0% ' (%' *' $ <$%$(' @&' 9'%$, 6& +', 7 ) ' 9$$ *' 6 6$96 *' 9'%$+. !$'9', foreach '6 & 9'%$*% 6(%' 6 '''96 *' &$ 69$.
-4-
I.E.S. Cuenca Minera
Dto. Tecnologia
2,4,- VARIABLES
D6#'6 *' $6 ='%%$'9$6 #$%$ *'7% ) +$($% <$%$('6. E 9# #&'*' 6'% &%+ & 9'>9 ) 6' *'+$%$H $ $60$%' & <$% #% #%'%$ <'.
En el gráfico anterior se ve como se declara una variable llamada “total_alumnos” y se le da un valor numérico de 30. Adem ás se ven dos bloques muy importante en App Inventor. Su lenguaje cuenta con una estructura de datos llamada list (lista) que es similar a los Arrays de otros lenguajes de programación. Se ve el bloque con el que se define la lista “alumnos” (se define vac í a al no añadirle ningún item) y también se ve el bloque en el que se le a ñaden dos elementos a la lista alumnos. En este ejemplo se le a ñade el texto que contienen los cuadros de texto “ TextBox1” y “TextBox2”. 2.5.- EVENTOS
E6 *6#'6$(' @&' 6 #%0%$$6 @&' 6'$ +$#$+'6 *' %'6#*'% $ $ 9'%$++ *' &6&$% + ' 9'%7$. E6 $= **' 9$ 6& #%9$+$ 6 (@&'6 *' A## I<'9%, #$%$ ';'+&9$% $++'6 ' %'6#&'69$ $ 6 '<'96 @&' 6' #%*&+$ ' ' 9'7 ' 9$('9. E (%' *' 6 *6996 '<'96 *'#'*' *' (;'9 @&' 6 #%<+$. U (9 $<6$ *' +&$* 6' =$ ='+= ++ 6(%' , '9%$6 @&' ' $+''%'9% $<6$ *' +&$* 6' =$ $09$* ' <, $ '6$;'%$ *' +&$* 6' =$ %'+(* & '6$;', ' (;'9 *' TF99'% *' +&$* ='6 6* '+$*6 ' '6$ %'* 6+$, $ +8$%$ *' 796 *' +&$* 6' =$ ='+= &$ 79 ) $6 6&+'6<$'9'.
-5-
I.E.S. Cuenca Minera
Dto. Tecnologia
E $ $0' $9'%% 6' #&'*' <'% $0&6 *' '696 '<'96. D' '69$ 6''++ 6' $#%'+$ @&' + A## I<'9% 6 6' *6#' *' (;'96 @&' 6' #&'*' ++$% ' $ #$9$$ + & (9 $0', 6 9$( *' 9%6 &+=6 (;'96 @&' 6 *$ $++'6 $ $6 7&+$*$*'6 @&' 9'' 6 9'76 ) 9$('96 A*%*. T''6 $++'6 $ I9'%'9, B&'99=, =$+'% $$*$6, '<$% ) %'+(% '6$;'6, $6 +%*'$*$6 *' #6+ GPS, '9+. T$( 6' #&'*' $#%'+$% + 9*6 6 '<'96 9'' $ '69%&+9&%$ =' '<'9 *H, ) 6 *' +% <'%*'. T'' '69' +% #%@&' 6 #$%9' *' $ 6'++ M) (+6H ' ' '9% *' *'6$%%. M) (+6H '6 **' 6' '' $#&$ $6 #%#'*$*'6 *' 6 *6996 '''96 @&' =$)$ 6* ++$*6 $&$'9' ' ' '9% *' *6': (9'6, (%;&$, '9@&'9$6, +&$*%6 *' 9'>9, '9+. 3.- ¿DE DÓNDE ME BAJO EL APP INVENTOR?
El App inventor no es un programa que te tengas que bajar al ordenador. Funciona en cloud computing, el programa funciona mediante la conexión a Internet, tu trabajas con el programa conectado
directamente al servidor de App inventor. Es como una p ágina web y en ella realizas las operaciones. Solo necesitas una cuenta de gmail. NOTA: hay versiones para poderlas instalar en el ordenador y trabajar sin estar conectado a internet
(offline).
--
I.E.S. Cuenca Minera
Dto. Tecnologia
P$%$ @&' 7&+' '+'69$6 tener instalado 2A3A . T$( '+'69$6 &$ +&'9$ *' G0' G$. Para programar entra en la siguiente direcci ón y te autentifica con tu dirección de correo de gmail...
http://ai#.appin0entor.mit.edu 4.- INTERFACE
-"-
I.E.S. Cuenca Minera
Dto. Tecnologia
L$ 70&%$ &'69%$ la ventana del dise ñador: 1. La paleta contiene todos los elementos que podemos insertar en nuestra aplicaci ón. Hay elementos gráficos como cuadros de texto, botones, lienzo de dibujo (Canvas) y elementos que no se ven en la pantalla del m óvil, como base de datos (TinyDB), aceler ómetro, cámara de v í deo, etc.
2. Viewer: El visor de la pantalla, simula la apariencia visual que tendr á la aplicación en el m óvil. Para añadir un elemento a la pantalla hay que arrastrarlo desde la paleta y soltarlo en el visor. Los elementos que no tengan visibilidad hay que arrastrarlos tambi én al viewer y autom áticamente se desplazar án debajo de él bajo el epí grafe “Non-visible components”
3. Components muestra la lista de los componentes que se han colocado en el proyecto. Cualquier componente que haya sido arrastrado y soltado desde la paleta al visor aparecer á ahí . Si se quiere borrar alguno es en la lista de componentes donde est á el botón que permite borrarlo.
4. Media muestra las distintas im ágenes y sonidos que estar án disponibles para el proyecto. Cualquier archivo de imagen o audio que se quiera usar en la aplicaci ón hay que insertarlo usando este apartado para que est é disponible.
5. Properties: cada vez que en el Viewer se seleccione un componente, en Properties aparecer án todos los detalles que se puedan cambiar de ese componente. Por ejemplo, al hacer clic sobre un componente TextBox se podr á cambiar en Properties su color, texto, fuente, etc. Para aquellos que hayan usado antes entornos de desarrollo del tipo de Visual Studio en Windows o Gambas en Linux le será muy familiar esta forma de trabajar.
E69' '6 ' '9% ' ' @&' 6' *6'$ $ $#+$+. P$%$ #*'% %'$$% $ #%0%$$+ '6 '+'6$% =$+'% ++ ' ' (9 *' $ '6@&$ 6&#'%% *'%'+=$ + ' 9'>9 pen the bloc5s editorH. E6 =$%8 @&' ' $<'0$*% $<6' *' @&' <$ $ *'6+$%0$% &$ $#+$+ @&' $%%$+$%8 + J$<$ '( S9$%9. M'9%$6 6' *'6+$%0$ $ $#+$+ $#$%'+'%8 ' $ #$%9' 7'%% *' $ #$9$$ & 9'>9 *+$9< *' $ +$%0$:
Al terminar la carga, si no est á instalada la aplicaci ón que permite la ejecuci ón o simulación del móvil aparecerá este mensaje:
-K-
I.E.S. Cuenca Minera
Dto. Tecnologia
T%$6 $+'#9$% ' '6$;' $#$%'+'%8 #% 7 ' '*9% *' (@&'6 *' #%0%$$+:
Esta es la pantalla que usaremos para hacer los programas que interaccionan con el interfaz gráfico. Se puede apreciar como est á dividida en dos partes muy claras: un enorme lienzo en “blanco” a la derecha donde se ir án arrastrando los bloques de programación y a la izquierda los men ús que dan acceso a esos bloques. El menú está formado por tres pesta ñas: Built-In, My Blocks y Advanced , y bajo cada una de ellas aparecen a su vez distintos men ús que permitirán seleccionar los bloques disponibles en cada caso. 1. Built-In contiene los bloques que componen el lenguaje de programaci ón propiamente dicho, distribuidos en las secciones Definition, Text, Lists, M ath, Logic, Control y Colors. 2. My Blocks ya se ha nombrado anteriormente y contendr á una lista de los elementos que hayan sido colocados en la pantalla Viewer del dise ñador para poder acceder mediante el programa a sus propiedades y eventos 3. Advanced es una pesta ña que permite acceder de forma global a algunas propiedades comunes a
--
I.E.S. Cuenca Minera
Dto. Tecnologia
todos los elementos que hemos colocado en el Viewer y que sean de un mismo tipo. Por ejemplo, al colocar un par de botones aparecer á “Any Button” y se podr án cambiar ahí algunas propiedades que afecten simult áneamente a los todos los botones. En la parte superior derecha del editor de bloques de programación se pueden ver tambi én los botones que dan acceso a conectar con un tel éfono Android que estuviera enchufado al ordenador o lanzar el emulador.
P*'6 9%$($;$% ' espa1ol ' 06, 9$$...
E '69$6 7'+=$6 A## I<'9% 2 ', 6 #'%9' +*06 *' =$69$ 5 MB.
5.- INSTALACIÓN EN EL M ÓVIL para prueba y depuración (debug).
C&$* =$)$6 9'%$* ' #%0%$$ 9''6 @&' <'% 6 7&+$. P$%$ ' 6ay - formas de
comprobarlo: 5,1,- PRIMERA FORMA:
1.- P$6$% ' #%0%$$ $ 9& < '*$9' 7i8i y la aplicaci'n +* A# C#$ A##. /Esta es la manera aconse$able . - C'+9$ 9& < $ $ 6$ %'* ! @&' 9'0$ ' %*'$*% **' '6986 9%$($;$*. - nstala en tu m'0il +* A# !ompanion: =99#:$##<'9%.9.'*&'>#%'$26'9&#-*'<+'-F7
- 1 -
I.E.S. Cuenca Minera
Dto. Tecnologia
- A%%$+$ ' #%0%$$ MIT AI2 C#$ @&' has instalado en tu m'0il. - En el ordenador, pulsa en Conectar y luego en AI Companion. Te saldrá un QR y un código.
- En tu móvil saldrá esta pantalla. Escribe el código anterior o bien escanea el QR. El programa pasar á a tu móvil.
- 11 -
I.E.S. Cuenca Minera
Dto. Tecnologia
- El programa quedar á conectado hasta que los desconectemos (Conectar / Reinciar Conexi ón) - Si cambiamos algo en el Designer o en los Bloques inmediatamente pasará al programa del móvil. - De esta manera podemos depurar (debug) los programas que realicemos hasta que funcionen correctamente.
5.2.- SEGUNDA FORMA:
2.- Instalamos un EMULADOR en nuestro ordenador con Windows (este emulador también vale para LINUX aunque es m ás dif íc il de instalar), de esta manera podemos hacer las pruebas de
funcionamiento en el emulador del ordenador y cuando funcione correctamente lo pasaremos al m óvil. En este caso no nos hace falta móvil ni Wifi para probar nuestra aplicaci ón. (http://explore.appinventor.mit.edu/ai2/setup-emulator )
- I69$$6 ' &'69% %*'$*% + *F6 ' A## I<'9% ) aiStarter. =99#:'>#%'.$##<'9%.9.'*&$2F*F6 /"%% +B /T$( 6' #&'*' 69$$% '69' #%0%$$ ' LINU, #'% '6 $0 86 +#+$* - A%%$+$ ' 9& %*'$*% ' aiStarter.
- E &'69% #%0%$$ #&6$6 ' !onectar / Emulador
Al cabo de un rato saldrá en nuestro Windows un emulador de Android.
- 12 -
I.E.S. Cuenca Minera
Dto. Tecnologia
Igual que en los casos anteriores, si cambiamos algo del Dise ñador o de los Bloques, ese cambio pasar á al Emulador. NOTA: si quieres que el emulador se ponga de forma horizontal, pulsa la combinaci ón de teclas Ctrl F11
5.3.- TERCERA FORMA:
3.- En caso que no tengas WiFi, conectaremos nuestro programa desde el ordenador al móvil mediante cable USB. (http://appinventor.mit.edu/explore/ai2/setup-device-usb.html)
- Instalamos en nuestro ordenador con Windows el App Inventor y aiStarter. http://explore.appinventor.mit.edu/ai2/windows (100 MB)
/T$( 6' #&'*' 69$$% '69' #%0%$$ ' LINU, #'% '6 $0 86 +#+$* - Instala en tu móvil MIT AI2 Companion: http://appinventor.mit.edu/explore/ai2/setup-devicewifi
- Arranca en tu ordenador el aiStarter y conecta por USB el ordenador al m óvil.
- Arranca el MIT A2 Companion en el móvil.
- P%($% 6 '698 7&+$* $ +'>: =99#:$##<'9%.9.'*&9'69 - V' $ #%0%$$ @&' '6986 %'$$* ) #&6$ !onnect / 9SB T& $#+$+ #$6$%8 $ < ) '9%$%8 ' 7&+$'9.
El programa pasar á a tu móvil.
- El programa quedar á conectado hasta que los desconectemos (Connect / Reset Connection) - Si cambiamos algo en el Designer o en los Bloques inmediatamente pasará al programa del móvil.
- De esta manera podemos depurar (debug) los programas que realicemos hasta que funcionen correctamente
- 13 -
I.E.S. Cuenca Minera
Dto. Tecnologia
6.- INSTALAR EL PROGRAMA EN NUESTRO M ÓVIL PARA USO DE USUARIO (COMPILACIÓN)
Para cargar los programas ya compilados en tu m óvil, es conveniente que éste tenga un escaneador de Código QR, si tu m óvil no lo tiene baja e instala éste por ejemplo: ZXing BarCode Scanner. Hemos visto 3 formas de depurar (debug) el programa. Si ya tenemos nuestro programa terminado lo podemos pasar al ordenador y de
éste
al móvil. Una cosa es depurar (debug) que lo
hacemos mediante Conectar y que realizamos el proceso de creaci ón, corrección de errores y pruebas de la aplicación. Cuando ya tenemos la aplicación totalmente terminada para su uso y distribución, lo que hacemos en compilarla, esto es Generar un archivo de tipo nombre.apk que contiene la aplicaci ón preparada para su instalaci ón. En este caso copiaremos en nuestro ordenador el archivo nombre.apk y desde nuestro ordenador por USB lo podemos pasar al m óvil. Otra forma serí a obtener en nuestro ordenador el c ódigo QR de nuestro programa, para luego escaneando el QR con el m óvil pasarlo a éste. Esta es la forma aconsejable. Estas dos formas la podemos realizar mediante... Generar
- 14 -
I.E.S. Cuenca Minera
Dto. Tecnologia
6.1.- GUARDAR EL PROGRAMA
Como acabamos de ver, podemos crear nuestro programa y obtendremos un archivo de la forma nombre.apk que podemos guardar en nuestro ordenador e instalar en el m óvil para su funcionamiento.
El archivo nombre.apk se denomina programa compilado, es decir preparado para instalarse y funcionar. Pero si queremos guardar el programa fuente para m ás tarde mejorarlo o para compartirlo, debemos pulsar en... Mis Proyectos / Exportar a mi ordenador el proyecto (.aia) seleccionado.
Obtendremos el archivo nombre.aia que podemos compartir. El archivo nombre.aia serí a el código fuente, es decir podemos ver de la manera que est á realizado.
- 15 -
I.E.S. Cuenca Minera
Dto. Tecnologia
7.- ACTIVIDADES
Bibliografia: - OBSERVATORIO TECNOLÓGICO : U6 *' A##<'9% ' $ $60$9&%$ *' T'+0$6 *' $
I7%$+ ) $ C&+$+H - IES Fco. Romero Vargas (Prof. Juan Antonio) - Curso de app inventor (Escuela Superior Inform ática, - Univ. Castilla La Mancha)
- 1 -
