APPINVENTOR App Inventor es un entorno entorno de desarrollo de aplicaciones aplicaciones para dispositivos Android. Para desarrollar aplicaciones con App Inventor sólo necesitas un navegador web y un télefono o tablet Android (si no lo tienes podrás probar tus aplicaciones en un emulador). App App Inventor se basa en un servicio web que te permitirá almacenar tu trabao tr abao y te ayudará a reali!ar un seguimiento de sus proyectos. "e trata de una #erramienta de desarrollo visual muy fácil de usar$ con la que incluso los no programadores podrán desarrollar sus aplicaciones. Al construir las aplicaciones para Android Android trabaarás con dos #erramientas% App App Inventor &esigner(&ise'ador) y App Inventor locs *ditor (loques). *n &esigner (&ise'ador) construirás el Interfa! de +suario$ eligiendo y situando los elementos con los que interactuará el usuario y los componentes que utili!ará la aplicación. *n el locs *ditor (loques) definirás el comportamiento de los componentes de tu aplicación.
QUÉ ES UNA APPLICACIÓN Y CÓMO FUNCIONA APP INVENTOR App Inventor permite crear apicacione! para m"vie!# Mientra! $%e %na apicaci"n e!t& 'orma(a por %na !erie (e instrucciones (on(e t) in(ica! $%* tiene $%e !%ce(er en +a!e a %no! eventos# Por e,empo- c%an(o p%!e !o+re %n +ot"n . evento/ m%eve a peota $%e !e m%e!tra 0acia a (erec0a .instrucción/# 1e'inir e!to! evento! e! in!tr%ccione! e! o $%e permite 0acer (e %na manera m%2
int%itiva App Inventor# Inventor# Me(iante %n !i!tema (e +o$%e! .m%2 pareci(o a Scratc0/ 2 !in e!cri+ir nin3%na 4nea (e c"(i3o- p%e(e! crear (e!(e %na apicaci"n $%e cam+ie e coor (e a pantaa- 0a!ta %tii5ar o! !en!ore! (e m"vi o inc%!o con!e3%ir $%e t% m"vi interact)e con LE6O MIN1STORM#
NUESTRA PRIMERA APLICACIÓN Para comen5ar a %!ar App Inventor- (e+emo! ir a !i3%iente in7# in7# Nece!ita! conectarte con %na c%enta (e 3mai para acce(er- 2 to(o! o! pro2ecto! $%e 0a3a! $%e(ar&n a!ocia(o! a e!ta c%enta#
Comentar tam+i*n $%e po(emo! con'i3%rar App Inventor en e!pa8o- p%!an(o arri+a a a (erec0a como !e m%e!tra en a ima3en a contin%aci"n#
Como n%e!tro primer pro2ecto- 0aremo! %na apicaci"n m%2 !encia con %n !"o +ot"n $%e a p%!aro no! (ir& a 'ra!e $%e $%eramo!# Comen5amo! crean(o %n n%evo %n n%evo pro2ecto $%e !e ame RobotParlanchin#
App Inventor !e compone (e (o! parte! m%2 (i'erencia(a! 2 $%e po(emo! cam+iar arri+a a a (erec0a9 e Diseñador 2 2 o! Bloques#
La primera $%e vemo! e! e Diseñador 2 2 !e compone (e9 •
En e centro- e visor # Q%e repre!enta o $%e veremo! en a pantaa (e n%e!tro m"vi
•
•
•
A a i5$%ier(a- a paleta# Contiene a i!ta (e eemento! $%e po(emo! nece!itar para componer n%e!tra apicaci"n# 1e!(e eemento! vi!%ae! como te:to!- +otone!im&3ene!; 0a!ta o! !en!ore! (e m"vi- acce!o a a a3en(a 2 m%c0o m&!# E!to! eemento! o! po(emo! arra!trar !o+re e visor para para po(er %tii5aro!# A a (erec0a (e vi!or- o! componentes# M%e!tran o! eemento! (e a paeta $%e %!a n%e!tra apicaci"n# A a (erec0a (e o! componente!- a! propiedades# In(ica o! (i'erente! par&metro! $%e po(emo! mo(i'icar (e eemento $%e tenemo! !eecciona(o en a vi!ta (e componentes#
Si p%!amo! !o+re o! <o$%e!- encontraremo!9 •
•
A a i5$%ier(a- bloques# to(a! a! in!tr%ccione! con a $%e (e'iniremo! n%e!tro pro3rama En e centro- e visor # Arra!traremo! o! +o$%e! (e a i5$%ier(a !o+re e!ta &rea para (e'inir a! in!tr%ccione! (e n%e!tro pro3rama# pro3rama#
PRIMERA PARTE DE NUESTRA APP: EL DISEÑO Vovemo! a a vi!ta Diseñador para para montar en n%e!tro vi!or o! componente! (e n%e!tra primera apicaci"n# <%!camo! en a paeta e ?# Tam+i*n Tam+i*n !e 0a a8a(i(o a a i!ta (e componente! componente! como e primer primer eemento $%e e!t& (entro (e a pantaa#
A0ora vamo! a a! Propiedades para cam+iar e te:to (e +ot"n- +%!camo! a+a,o (e to(o a propie(a( Texto 2 cam+iamo! =Te:to para ? por =@a+ar?- 2 veremo! como en e vi!or e te:to (e +ot"n !e 0a cam+ia(o#
@aremo! o mi!mo pero en %3ar (e a8a(ir %n +ot"n (e a paeta- arra!traremo! arra!traremo! %na ima3en#
Vovemo! a a i!ta (e propie(a(e!- e!ta ve5 (e a ima3en- p%!aremo! en Foto- %e3o en Subir un archivo - para a8a(ir %na ima3en# Po(*i! %tii5ar e!ta ima3en $%e 0emo! prepara(o para %!ar como n%e!tro Ro+ot Paranc0in9 0ttp!9BBB#(rop+o 0ttp!9BBB #(rop+o:#com!$'(:!e+DB75'r :#com!$'(:!e+DB75'ro+ot#pn3(G> o+ot#pn3(G>## En e vi!or (e+e aparecer %n +ot"n 2 n%e!tro ro+ot como !e m%e!tra a contin%aci"n9
Por )timo- a8a(iremo! %n tercer componente $%e no! permitir& 0acer 0a+ar a n%e!tro ro+ot# En a paeta- a+rimo! e 3r%po Medios- 2 arra!tramo! !o+re a pantaa e componente TextoAVo # Veremo! Veremo! $%e e!te componente !e m%e!tra a+a,o en e n e vi!or- como %n !omponente no visible#
SEGUNDA PARTE: LOS LO!UES Pa!amo! Pa!amo! a a parte (e o! +o$%e!- (on(e (e'iniremo! n%e!tra! in!tr%ccione!# in!tr%ccione!# Si o! 'i,&i!en a co%mna (e Bloques- 0an apareci(o vario! componente! (entro (e Screen"- $%e !on o! eemento! $%e 0emo! a8a(i(o en a vi!ta (e (i!e8o# Lo primera !er& (e'inir %n +o$%e $%e !e accione a p%!ar !o+re e +ot"n# Para eo p%!amo! en Bloques- !o+re Bot#n"- 2 !e m%e!tra %na i!ta (e a! (i'erente! accione! $%e po(emo! pro3ramar reaciona(a! con e!te componente#
Ee3iremo! a primera- $%e repre!enta e evento (e c%an(o !e 0ace !lic !o+re %n +ot"n#
N%e!tro o+,etivo e! $%e !e oi3a %na vo5 a p%!ar !o+re e +ot"n# Por eo- a acci"n $%e $%eremo! (e!enca(enar (e!enca(enar c%an(o !e p%!e !o+re e +ot"n- e! %na in!tr%cci"n (e otro componente $%e a8a(imo! en a parte (e (i!e8o- e TextoAVo # Seeccionamo! a0ora e componente TextoAVo" (e a co%mna (e o! +o$%e!- 2 arra!tramo! !o+re e vi!or e +o$%e mora(o $%e (ice =amar Te:toAVo5># @a+ar?- e c%a !e encar3ar& (e pron%nciar %n te:to# Como e!ta acci"n !er& provoca(a c%an(o !e p%!e e +ot"n- (e+emo! coocara (entro (e +o$%e $%e p%!imo! ante!- a a(o (e a paa+ra9 e$ecutar # Fi,aro! a! m%e!ca! $%e tienen ca(a +o$%e para in(icaro! c"mo enca,an %na! con otra! como !i '%eran pie5a! (e Le3o# A contin%aci"n ver*i! c"mo (e+er4an e!tar $%e(an(o 0a!ta a0ora o! +o$%e!9
inamente a8a(iremo! e te:to $%e n%e!tro Ro+ot Ro+ot Paranc04n pron%nciar&# 1e a co%mna (e Bloques- !eeccionamo! Texto- 2 arra!tramo! e primero a a(o (e a paa+ra $%e aca+amo! (e coocar# E!te +o$%e ro,o no! permite mensa$e (e +o$%e (e %ablar $%e e!cri+ir e te:to $%e $%eramo!# Por e,empo9 =@oa ami3o m4o?#
F
PROAMOS LA APLICACIÓN Ya Ya tenemo! e (i!e8o 2 o! +o$%e!# +o$%e!# Soo no! 'ata in!taar a apicaci"n en n%e!tro n%e!tro m"vi 2 an(roi(# Una (e a! manera! m&! !encia! e! ir previamente a a tien(a (e apicacione! 6oo3e Pa2 en n%e!tro m"vi- 2 (e!car3ar a apicaci"n M&T A&' !ompanion (e!arroa(a (e!arroa(a por a mi!ma 3ente (e App Inventor#
Una ve5 $%e ten3&i! a apicaci"n in!taa(a en v%e!tro m"vi# Arri+a en a Be+ (e App Inventor- p%!a( !o+re !onectar 2 2 %e3o a opci"n A& !ompanion# Aparecer& %n carteito con %n c"(i3o QR#
A0ora en v%e!tro m"vi- en a apicaci"n M&T A&' !ompanion $%e aca+&i! (e in!taarpo(*i! e!cri+ir e c"(i3o $%e o! aparece- o eer e c"(i3o QR p%!an(o e +ot"n a5% =!can QR co(e?# 1e c%a$%ier manera- ver*i! como en v%e!tro m"vi aparece a apicaci"n $%e aca+amo! (e crear 2 !i p%!&i! !o+re e +ot"n %ablar - e!c%c0ar*i! a 'ra!e $%e 0a+*i! intro(%ci(o anteriormente# e n App Inventor (e %na M&T A&' !ompanion- permite $%e va2&i! pro+an(o o $%e 0ac*i! en
manera !encia# Si $%er*i! in!taar a apicaci"n (e'initivamente en v%e!tro m"vi an(roi(ten*i! $%e ir a App Inventor 2 p%!ar en (enerar 2 2 %e3o )uardar archivo *ap+ en mi ordenador* E!te 'ic0ero #ap7 e! a apicaci"n- 2 (e+er*i! in!taaro en v%e!tro m"vi# La manera m&! '&ci e! envi&ro!o por correo 2 a+riro en v%e!tro m"vi#
E"EMPLO DE PROGRAMA EN APPINVENTOR
HUE6O PARES PARES Y NONES , Pulsamos sobre un n-mero% $ /$ 0$ 1 y sacaremos cero$ uno$ dos o tres dedos mediante una imagen. , 2uego elegimos si creemos que va a salir PA3*" o 454*". 6uando pulsamos uno de eso bo tones$ el Android saca un n-mero aleatorio del al 1 y muestra una imagen con cero$ uno$ dos o tres dedos seg-n el n-mero que #a sacado. , "i la suma del n-mero de #emos elegido más la suma del d el n-mero del Android es par$ entonces saldrá un mensae indicando que la suma es PA3$ en caso contrario saldrá un mensae indicando que es 454*".
_________________ - Diseño. , Insertamos los elementos del gráfico en el orden indicado. , *n los otones% 7ama'o 7ama'o de letra 0. Negrita. Negrita.
"ubimos los siguientes /0 arc#ivos% (después ( después de la cuarta mano hay una imagen en blanco, lo mismo entre los dos bocadillos.) bocadillos.)
manos.zip
- Bloques.
_________________ - Comentarios. , Primero pulsamos un otón de los -ltimos% 1$ 8$ 9 o :. orrará mediante la imagen mab.gi el gráfico de la mano del Android puesta anteriormente. &ibuará la mano seg-n el n-mero de dedos (por eemplo m0.gif ; mano con dos dedos). &ibuará un gráfico blanco.png separador blanco.png separador y borrará la el contenido de la *tiqueta/. , &espués pulsamos un otón de Pares o 4ones$ serán los otones / y 0. 2lamará al !roceso sacar y y mostrará un bocadillo de " !ares # o " Nones # , *l !roceso sacar, obtendrá sacar, obtendrá un n-mero aleatorio del al 1$ serán dos dedos del Android. &ibuará la mano del Android$ seg-n el n-mero sacado. 2a imagen será% ma maandroid android.gi .gi asiendo android$ el n-mero aleatorio sacado$ es decir seg-n el n-mero Android$ saldrá la imagen%
ma$ ma $.gi , ma ma% %.gi , ma ma& &.gi , ma ma' '.gi , "umamos el n-mero que #a sacado el Android más el n-mero que #emos pulsado con el otón. Di(idimos entre & mediante )*dulo$ )*dulo$ con el <ódulo obtenemos el resto de la división$ si es cero es que la suma es PA3$ en caso contrario es que es 454*". , Podemos meorar la aplicación con marcadores$ elementos de seguridad$ sonidos$...
