Aplicaciones móviles con APP Inventor - IES Colonial App Inventor.pdf · 2 Aplicaciones móviles...

27
Aplicaciones móviles con APP Inventor Curso 2016/2017 Curso de Iniciación al desarrollo de aplicaciones Android con App Inventor 2 Autor: Antonio Ruiz Murcia Profesor de matemáticas en el IES Blas Infante Córdoba, Febrero 2017 CEP “Luisa Revuelta” de Córdoba

Transcript of Aplicaciones móviles con APP Inventor - IES Colonial App Inventor.pdf · 2 Aplicaciones móviles...

AplicacionesmóvilesconAPPInventor

Curso2016/2017

CursodeIniciaciónaldesarrollodeaplicacionesAndroidconAppInventor2

Autor:AntonioRuizMurcia

ProfesordematemáticasenelIESBlasInfanteCórdoba,Febrero2017

CEP“LuisaRevuelta”deCórdoba

2AplicacionesmóvilesconAppInventor

Descripción:Hastahacealgunosañosestabaextendida lacreenciadequedesarrollar programasdesoftwarerequeríagrandesconocimientosinformáticos,serunexpertoenlamateria.Sin embargo, con la aparición de algunos lenguajes de programación educativos (LPE) comoScratch,queutilizanuna técnicade cómputocreativo (entornosgráficosen losque losusuariosprogramanmediantebloquesdeaccionesdeunamanerafácile intuitiva),sehacomprobadoquehastaunniñopuedecrearsuspropiosprogramasojuegos.App Inventor es un entorno de desarrollo de aplicaciones para dispositivos Android creado porGoogleyelMITaunque,enlaactualidad,esesteúltimoquienseencargadesumantenimiento.Elservicioseofrecea travésdelmodelo“computaciónen lanube”, loquesignificapoderaccederygestionar nuestro trabajo desde cualquier ordenador y lugar. Con una interfaz de programaciónque recuerdaa Scratch cualquierapuedeelaborar, enpocashoras, suspropiasaplicaciones sinnecesidaddedisponerdeconocimientospreviosenprogramación.Numerososestudiosindicanquealaprenderaprogramar,losestudiantesutilizanelpensamientocomputacionaladquiriendohabilidadesdelpensamientoprocedimentalquesonutilizadasparaeldesarrollodelalógicaylainteligenciaengeneral(Barrera,2013).Además,favorecelacreatividad,mejoralamotivaciónyfacilitalaadquisiciónydesarrollodecompetenciasclave.En un principio, App Inventor estaba destinado al alumnado universitario para que pudieradesarrollarsuspropiasaplicacionesalamedidadesusnecesidades.Peroprontosedescubrióque,por su facilidad de uso, estaba al alcance de estudiantes de etapasmás tempranas. Hoy en díacuentaconunacomunidaddecercade6millonesdeusurariosregistradosquerepresentana195paísesentodoelmundo.Objetivos:

• Introducir al profesorado en el desarrollo de aplicaciones móviles con App Inventor • Dar a conocer el potencial de App Inventor y las posibilidades que ofrece en el ámbito

educativo • Manejar y programar los diferentes sensores que se encuentran integrados en los

dispositivos móviles (acelerómetro, ubicación, dirección, etc.) • Utilizar los gestos que son detectados sobre la pantalla táctil del dispositivo y aplicarlos

en el diseño de juegos • Integrar la utilización de aplicaciones externas (Google Maps) en nuestra aplicación • Crear archivos de geolocalización (kml) para generar vistas gráficas tridimensionales

de rutas con Google Earth • Compartir proyectos en la Galería de App Inventor • Fomentar el uso de App Inventor como una herramienta para la adquisición y

desarrollo de competencias clave del alumnado

Contenidos:• El entorno de desarrollo: Gestión de Proyectos, Editor de Diseño y Editor de Bloques • Conectando con el emulador: MIT AI2 Companion • Componentes de interfaz de usuario • Componentes Reconocimiento de Voz y traductor Yandex • Lienzo y Sprites. Nuestro primer juego • Variables y listas. Procedimientos. Diseñando un test • El acelerómetro. Componente Reloj: Juego de la abeja • Gestos detectados sobre la pantalla táctil. Dibujar sobre un lienzo. La cámara de fotos

y uso de la galería. Pequeña base de datos. Guardar una imagen • Animaciones • Sensor de ubicación: localización GPS. Visores de listas y archivos de texto. Activity

Starter (para la integración de aplicaciones externas). Archivos “kml” • Sensor de Orientación. Construcción de una brújula • Instalación de la APK en nuestro dispositivo móvil • Compartir proyectos con otros usuarios en la Galería • App Inventor en el aula. Experiencias

AplicacionesmóvilesconAppInventor3

ÍNDICEINTRODUCCIÓN ...................................................................................................................................... 4CÓMOACCEDERALSITIODEAPPINVENTOR ......................................................................... 5BREVEDESCRIPCIÓNDELENTORNODEDESARROLLO ..................................................... 5GESTORDEPROYECTOS ................................................................................................................ 5Configuracióndelidioma .......................................................................................................... 5GestióndeProyectos................................................................................................................... 6ConectandoconelEmuladoroundispositivomóvilAndroid(WifioUSB)....... 6GenerarelarchivoAPK .............................................................................................................. 8Proyectosdeotrosusuarios..................................................................................................... 8

EDITORDEDISEÑO.......................................................................................................................... 9Paleta................................................................................................................................................10Visor..................................................................................................................................................10Componentes................................................................................................................................10Propiedades ..................................................................................................................................10

EDITORDEBLOQUES ....................................................................................................................10APRENDEMOSHACIENDO ...............................................................................................................12TRADUCTOR ......................................................................................................................................12Paso1...............................................................................................................................................12Paso2...............................................................................................................................................13Paso3...............................................................................................................................................14Paso4...............................................................................................................................................15Paso5...............................................................................................................................................16Paso6...............................................................................................................................................17Paso7...............................................................................................................................................17Paso8...............................................................................................................................................17Paso9...............................................................................................................................................18Paso10(Traducimoseltexto) ..............................................................................................18Paso11(Leereninglés)...........................................................................................................19Paso12(Comprobamosfuncionamientoygeneramosarchivo.apk).................19

Actividad1..........................................................................................................................................20Actividad2..........................................................................................................................................20Actividad3..........................................................................................................................................20JUEGODELFRONTÓN ...................................................................................................................21Paso1.Diseñandola“pala” ...................................................................................................21Paso2.CreamoselProyectoenAppInventor ..............................................................22Paso3.Añadimosloscomponentes...................................................................................23Paso4.ProgramamoselbotónEmpezar(Inicio) ........................................................25Paso5.RebotedelaPelota ....................................................................................................25Paso6.ArrastredelaPala .....................................................................................................26Paso7.ColisiónPelota-Pala ..................................................................................................26Paso8.Generamos.apkyguardamos...............................................................................26

Actividad4..........................................................................................................................................27

4AplicacionesmóvilesconAppInventor

INTRODUCCIÓNEl uso de las TIC en el aula constituye una pieza fundamental para producir loscambiosmetodológicosquepermitanelobjetivodemejoradelacalidadeducativa.Numerososestudiosapuntan lasventajasqueofrecesuutilizaciónparafavorecerelaprendizaje del estudiante.Morrisey (2007) destaca que con estas herramientas seimpregnandedinamismoalasclases,enriqueciendodeformamotivadoraelespaciodeaprendizaje.Porotrolado,diversosestudiosdemuestranquelosniñosqueaprendenaprogramarobtienenmejoresresultadosenrazonamientomatemáticoyresolucióndeproblemas.Según indica Barrera (2013), al aprender a programar se adquieren habilidades delpensamientoprocedimentalquesonutilizadasparaeldesarrollodelalógica.App Inventor es un entrono de desarrollo de aplicaciones para dispositivos Androidcreado por Google en 2010 junto con elMIT a partir de investigaciones previas eninformáticaeducativa.DehechopresentaunainterfazdeprogramaciónquerecuerdaaScratch,yaquesebasaenbloquessecuencialesqueseensamblancomolosbloquesfísicosdeLEGO.Ademásutilizauneditordediseño“draganddrop”(arrastrarysoltar).

En2011Googledejadeladoelproyectoperoanteslopublicacomocódigoabierto,yes el Instituto Tecnológico de Massachusetts (MIT) el encargado de continuar esteproyecto.App Inventor es un servicio que se ofrece a través del modelo “cloud computing”(computaciónen lanube), loquesignificapoderaccederygestionarnuestrotrabajodesdecualquierordenadorylugar.

AplicacionesmóvilesconAppInventor5

La característica principal de App Inventor es que no se necesitan conocimientosprevios de programación. Cualquiera que disponga de una cuenta de Google y unnavegadorWebpuedeempezaradesarrollaraplicacionesparadispositivosAndroid.

CÓMOACCEDERALSITIODEAPPINVENTORElservicioAppInventorseencuentraenladirección:

http://ai2.appinventor.mit.edu/yparaaccederesnecesariodisponerdeunacuentaGmail.

BREVEDESCRIPCIÓNDELENTORNODEDESARROLLOParadesarrollarnuestrasaplicacionesdisponemosdetresherramientas:

1. GestordeProyectos2. EditordeDiseño3. EditordeBloques

GESTORDEPROYECTOSNospermiteconfigurarelidiomaenelquedeseamostrabajar,crearnuevosproyectos,guardarlosoimportarlosasícomocompartirlos,informardeerrores,accederaayuday tutoriales, generar archivos .apk (para instalar la aplicación en el dispositivoAndroid), etc. Incluye además una herramienta que nos facilitará la elaboración ydesarrollo de nuestras aplicaciones: podemos conectar un dispositivomóvil Android(WifioUSB)yver loscambiosdenuestraaplicaciónconformevamosmodificandoeldiseñoylosbloquesdecódigo.

ConfiguracióndelidiomaSerálaprimeraacciónquerealizaremosantesdeempezarunnuevoproyecto.

6AplicacionesmóvilesconAppInventor

GestióndeProyectosPodemosGuardar nuestro proyecto en los servidores deApp Inventor o en nuestroordenadorenelformato.aia

En“Misproyectos”senosmuestralalistadeproyectosquehemosdesarrolladoynosofrece la posibilidad de compartirlos (código y diseño) con otros usuarios de AppInventoratravésdelaopción“PublicarenlaGalería”.Tambiénesposible firmarel archivode instalación .apk conunacontraseñapara sucifrado(Keystore)

ConectandoconelEmuladoroundispositivomóvilAndroid(WifioUSB)Comosehamencionadoanteriormente,parapoder ir comprobando tantoeldiseñocomo el funcionamiento del código de nuestra aplicación, podemos instalar unEmulador en el ordenador o, mejor aún, conectar nuestro teléfonomóvil o tabletamedianteWifiouncableUSB.La opción más recomendable es utilizar nuestro dispositivo móvil como banco depruebasatravésdelaconexiónWifi.Paraelloserequierequetantoelordenadorenelqueestamostrabajandocomonuestrodispositivomóvilseencuentreenlamismared(aunqueelordenadorestéconectadoaInternetatravésdecable).

AplicacionesmóvilesconAppInventor7

Para establecer la conexión necesitamos instalar en nuestro dispositivo Android laaplicación“MITAI2Companion”disponibleenGooglePlayStore.

Ahora,paraconectarAppInventorconelmóvilharemosclicenConectar,yelegiremoslaopciónAICompanion.

Seabriráunaventanacomoesta:

A continuación abrimos en elmóvil la aplicación que hemos descargado. Cuando laabramoselegiremosConnectwithcode(yescribiremoselcódigodeletrasynúmerosqueapareceenlaventana)oScanQRcode(sólotenemosqueapuntaralcódigoQRylaconexiónseestableceráautomáticamente).

8AplicacionesmóvilesconAppInventor

GenerarelarchivoAPKUnavezquehayamosfinalizadonuestraaplicacióntenemosquegenerarelarchivodeinstalaciónparaeldispositivomóvil.Estosarchivostienenlaextensiónapk.Senosofrecedosopciones:

• App (generar código QR para el archivo .apk). Usando cualquier lector decódigos QR en nuestro móvil, obtenemos el enlace de descarga de nuestraaplicación. Es conveniente recordar que debemos modificar los Ajustes ennuestro dispositivo para permitir la instalación de Apps que no preceden dePlayStore(Configuraciónpordefecto)

• App (guardar archivo .apk en mi ordenador). Ahora podemos publicarnuestra App en Play Store o enviarlo a nuestro dispositivo para suinstalación.

ProyectosdeotrosusuariosHaciendo clic enGalería tenemos acceso a proyectos que han sido compartidosporotrosusuarios.Esterepositorioderecursospuedesernosdegranayudapararesolver dudas y seguir profundizando en el uso y programación de algunoscomponentesqueofreceAppInventor.

AplicacionesmóvilesconAppInventor9

EDITORDEDISEÑOSeencuentradivididoencuatrocolumnas:

Paraaccederaleditordediseñoharemosclicenelbotón“Diseñador”situadoenlapartesuperiorderecha(alladodelbotónBloques)

10AplicacionesmóvilesconAppInventor

PaletaSituada a la izquierda nosmuestra los diferentes componentes disponibles, quepueden ser visibles (botones, etiquetas, deslizadores, etc.) o no-visibles(notificadores,traductor,sensores,etc.).

VisorRepresentalapantalladeldispositivomóvil.DesdelaPaletairemosarrastrandoysoltando aquí los componentes que conformarán nuestra aplicación. Loscomponente no visibles semostrarán en la parte inferior. Con el visor podemosdiseñar el aspecto (la forma en que se distribuyen e integran los componentesvisibles)delaapp.

ComponentesEsta columna está integrada por los componentes que hemos agregado a laaplicación. El primero es siempre la pantalla (ventana) que estamos diseñando,queenelcasodeserlaprincipalolaúnicadelaapp,sellamaráScreen1(enestecasonosepuedemodificarelnombre).EsconvenienteasignarleunnombreacadacomponenteconelfindeidentificarlofácilmentecuandoprocedamosasuprogramaciónenelEditordeBloques.DebajodeComponentes tenemoselapartadodeMedios.Desdeaquísubiremoslosarchivos(imágenes,sonidos,etc.)quevayamosautilizarennuestraApp.

PropiedadesNos permite establecer la configuración que tendrá por defecto cada uno de loscomponentesqueconformannuestraApp(tantovisiblescomonovisibles).Estosvalores iniciales los podemos modificar posteriormente desde el Editor deBloques.

EDITORDEBLOQUESEnestapantallaprogramaremoscadaunodeloscomponentesdelaaplicación,esdecir,iremosindicandolasaccionesquedeberánrealizarsecuandoseproduzcaunevento (hacerclicenunbotón,transcurraciertotiempodereloj,cambienuestraubicación,arrastrarundeslizador,colisionendossprites,etc.).SeaccedehaciendoclicenelbotónBloquessituadoenlapartesuperiorderecha(alladodelbotónDiseñador)EstáformadoporlacolumnaBloques(izquierda)yelVisor.

AplicacionesmóvilesconAppInventor11

Dentro deBloques, en el apartado de Integrados, tenemos de un conjunto deherramientas básicas para la programación. A continuación, se encuentran loscomponentesconlosnombrequeleasignamosdesdeelEditordeDiseño.Alhacerclicsobrecualquiercomponentesenosdespliegaunconjuntodeaccionesdisponibles para dicho componente. Las acciones se completarán con lasherramientasdelapartadoIntegrados.

12AplicacionesmóvilesconAppInventor

Las acciones se realizarán siempre como consecuencia de la ocurrencia de unevento. Los eventos se pueden producir por la interacción del usuario con loscomponentesvisibles (arrastrarundeslizador)opor loscambiosdevalordeunsensor(orientacióndeldispositivomóvil,acelerómetro,etc.).Porejemplo,sideseamosquealhacerclicsobreelbotónHablar(creadoenlafasede diseño) se active el componente Reconocimiento de Voz construiríamos unbloquecomoelsiguiente:

EnlapartesuperiorderechadelVisorencontramosunaMochilaquenosserádeutilidad cuando deseemos utilizar el mismo código en otra ventana u otraaplicación.En laparte inferior izquierdadelVisorsenosmuestraunnotificadordeerroresquenosayudaráadepurarnuestraapp.

APRENDEMOSHACIENDOPara tener una idea más precisa del funcionamiento de App Inventor,empezaremosconeldesarrollo,pasoapaso,dedosaplicacionesmuysencillas.Serecomiendallevarlasacaboenelordenadorconformeserealizalalectura.

TRADUCTORVamos a crear un sencillo traductor de Español-Inglés en el que el texto lopodremosintroducirescribiendoobiendirectamentehablandoyhaciendousodelreconocimientodevoz.Una vez realizada la traducción podremos indicarle que la lea (de texto a voz)usandoelaltavozdeldispositivomóvil.

Paso1EntramosenladireccióndeAppInventor:http://ai2.appinventor.mit.eduindicandonuestracuentadeGmailqueutilizaremosparaaccederalservicio.Seleccionamos el idioma español y hacemos clic en el botón “Comenzar unproyecto nuevo…”. Elegiremos un nombre para nuestro Proyecto, por ejemplo,“Traductor”(ocualquierotro).

AplicacionesmóvilesconAppInventor13

UnavezaceptadalaoperaciónsecargaráenpantallaelEditordeDiseño.

Paso2En la columna Componentes estará seleccionada la ventana principal que pordefecto es nombrada como “Screen1”. Dicho nombre no se puede modificar.Veremos más adelante que cuando añadimos ventanas nuevas si será posiblerenombrarlas.En la columnaPropiedades (para este componente) indicaremosquedeseamosunadisposiciónhorizontal “centrada”,nombredelaApp:Traductor(esteseráel nombre que aparecerá debajo del icono en nuestro dispositivo móvil) yseleccionamos orientación “Vertical” para la pantalla. En Título escribiremos“TraductorEspañolInglés”.Lodemáslodejamostalycomoestá.

14AplicacionesmóvilesconAppInventor

Paso3Ahora iremos añadiendo a la pantalla “Screen1” (Visor) los componentesnecesarios, eligiendo el lugar en el que deseamos que aparezcan (aquellos queseanvisibles).Eselmomentodedecidirel“aspecto”quetendránuestraApp,porloqueelegiremoscolor,tamaño,forma,etc.,paracadaunodeloscomponentes.Componente1:Botón(Hablar)Necesitaremos un botón (Hablar) para que al hacer clic sobre el se inicie elReconocimiento de voz. Por consiguiente, hacemos clic sobre el componenteBotóndelaInterfazdeUsuario(columnaPaleta)yloarrastramoshastaelVisor,situándose en la parte superior de la pantalla principal (Screen1). Aparecerácentrado en la ventana pues, anteriormente, elegimos Disposición Horizontal“Centro” en las propiedades de Screen1. En la columna Componentesrenombramos Botón1 por “boton_hablar”. Cuando en una aplicación tenemos ungran número de componentes, es muy conveniente renombrarlos adecuadamenteparafacilitarsuprogramación(alrecordarnoslafunciónquetieneasignada)Paraestecomponenteboton_hablarestableceremos lassiguientesPropiedades(columnaderecha):

• ColordeFondo:Rosa• Ancho:Ajustaralcontenedor• Forma:Redondeado• Texto:Hablar

AplicacionesmóvilesconAppInventor15

Componente2:CampodeTexto(Textoparatraducir)ArrastramosahoraelcomponenteCampoDeTextohastasituarlodebajodelbotónHablar. Utilizaremos esta caja de texto para recoger el texto obtenido por elreconocimientodevoz,obienparaintroducirconeltecladoeltextoquedeseemos.Aligualqueantes,lorenombramosporCampoDetexto_español.Propiedades:

• Ancho:Ajustaralcontenedor• Pista:textoespañol• Multilínea:activado(silalongituddeltextosuperaelanchodelapantalla,

seampliaráelaltodelacajadetextoparamostrareltextoíntegroenvariaslíneas)

Componente3:ReconocimientodeVozEnlaventanaPaleta,dentrodelbloqueMedios,arrastramoshastaelinteriordelVisor el componente Reconocimiento de Voz, el cual aparecerá en la parteinferiorfueradelapantallaprincipal(Componentesnovisibles).

Paraestecomponentenoserequiereestablecerpropiedadalguna.

Paso4Vamos a proporcionarles funcionalidad a los componente que hemos agregadohastaestemomento.ParaelloentraremosenelEditordeBloqueshaciendoclicenelbotónBloques(situadoenlapartesuperiorderecha).

16AplicacionesmóvilesconAppInventor

• Haciendo clic sobre el componente llamado boton_hablar (en ventana

Bloques) se desplegará las diferentes opciones disponibles. Elegimos laprimeraetiqueta:cuandoboton_hablar.Clic.

• HacemosclicsobreelcomponenteReconocimientoDeVoz1yposteriormentesobre la etiqueta llamar ReconocimientoDeVoz1.ObtenerTexto, quearrastraremoshastaelinteriordelaetiquetaanterior.

• RepetimoslaoperaciónanteriorperoeligiendoestavezlaetiquetacuandoReconocimientoDeVoz1.DespuésDeObtenerTexto.

• Hacemos clic sobre el componente CampoDeTexto_español, elegimos laetiqueta“ponerCampoDeTexto_español.Textocomo”,quelacolocaremosenelinteriordelaetiquetaanterior.

• Situando el cursor del ratón (sin hacer clic) sobre Resultado, se nosdespliegaunaventanacondosopciones:tomarResultadoyponerResultado.Elegimos la primara y la encajamos en la etiqueta “ponerCampoDeTexto_español.Textocomo”colocándolaasuderecha.

Elresultadodebesercomosemuestraabajo

Paso5Conectamosnuestrodispositivomóvil conApp Inventor, tal y comosedescribióanteriormente,paracomprobarelbuenfuncionamientodelorealizadohastaaquí.

Al hacer clic en el botón Hablar se iniciará el reconocimiento de voz.Pronunciamos alguna frase finalizando con un silencio. A los pocos segundosapareceráenpantallaeltextocorrespondiente.

AplicacionesmóvilesconAppInventor17

Si hay demasiado ruido ambiental, el reconocimiento de voz no funcionarácorrectamentey,enesecaso,espreferibleintroducireltextoatravésdelteclado.

Paso6Componente4:DisposiciónhorizontalContinuamosconeldiseñodenuestraApp.Volviendo al Editor de Diseño (botónDiseñador), añadiremos el componentevisibleDisposiciónHorizontal, que seencuentradentrodel apartadoDisposición,arrastrándolohastasituarlodebajodelCampoDeTexto.Propiedades:

• DispHorizontal:Centro• DsipVertical:Centro• Ancho:Ajustaralcontenedor

Paso7Componente5:BotónTraducirComponente6:BotónLeerComponente7:Etiqueta1(parasepararlosbotones)AlinteriordelcomponenteDisposiciónHorizontalarrastraremosdosbotonesquerenombraremosporboton_Traduciryboton_Leer,respectivamente,yunaetiquetaparasepararambosbotonesentresí.Propiedades(botónTraducir):

• ColorDeFondo:Turquesa• Ancho:45porciento• Forma:Redondeado• Texto:Traducir

Propiedades(botónLeer):

• ColorDeFondo:Naranja• Ancho:45porciento• Forma:Redondeado• Texto:Leer

Propiedades(Etiqueta1):

• Ancho:5porciento• Texto:(dejamoselcampoenblanco)

Paso8Componente8:CampodeTexto(textotraducido)Añadimos un nuevo CampoDeTexto arrastrándolo hasta colocarlo debajo de laDisposición Horizontal anterior. Lo renombraremos por CampoDeTexto_ingles.Estecajadetextolautilizaremosparamostrarlatraduccióndeltextoenespañolyparaintroducir,desdeelteclado,eltextoeninglésquedeseamosquelea.

18AplicacionesmóvilesconAppInventor

Propiedades:

• Ancho:Ajustaralcontenedor• Pista:textoinglés• Multilínea:activado

Componente9:TextoaVoz(Leer)TambiénañadiremoselcomponenteTextoAVozqueseencuentraenelapartadodeMedios.Nosserviráparaleereltextoeninglés.Propiedades:

• País:GBR• Idioma:en(English)

Paso9Componente10:TraductorYandexComodeseamosquelaaplicacióntraduzcaeltextoalinglés,necesitamosañadirelcomponente (no visible) TraductorYandex que se encuentra en el apartadoMedios. El idioma se establecerá en los bloques de programación (Editor deBloques).

Paso10(Traducimoseltexto)EntramosnuevamenteenelEditordeBloques(botónBloques)paraprogramarelbotónTraducir.

AplicacionesmóvilesconAppInventor19

Cuando hagamos clic sobre él, llamaremos al traductor Yandex indicándole elidiomaalquedeseamostraduciryellugardondeseencuentraeltextoatraducir.Asimismo,unavezrealizadalatraducción,debemosindicardondequeremosquelamuestre.EnnuestrocasoseráenCampoDeTexto_ingles.Arrastrandolaetiquetaspertinentesdebemosobtenerunosbloquesasí:

Laetiqueta“tomartraducción”seobtienealhacerclicsobreellacuandoaparezcaal situar el cursor sobre “traducción” (etiqueta Traductor Yandex1.TraducciónRecibida).Laetiqueta:

se utiliza para escribir texto. Se obtiene en la herramienta básicaTextodentrodelapartadoIntegrados.

Paso11(Leereninglés)Finalmente, programamos el botón Leer. Cuando hagamos clic en el botón leerllamaremos al componente TextAVoz1 indicándole, con la etiquetacorrespondiente,queeltextoaleerseencuentraenelCampoDeTexto_ingles.Elbloquequedaríaasí:

Paso12(Comprobamosfuncionamientoygeneramosarchivo.apk)Testeamos la aplicación con nuestro dispositivo móvil (debemos mantenerloconectado a App Inventor) y, si todo va bien, podemos generar el archivo deinstalación.apk.Comoseindicóanteriormente,podemosgeneraruncódigoQR(necesitamosunellectorQR)obienguardarloenelordenador.

20AplicacionesmóvilesconAppInventor

Actividad1Modificar el programa anterior para que la traducción y lectura la realice en elidiomafrancés.

Actividad2ModificarlaAppparaquealagitareldispositivomóvillea(altavoz)eltexto“Estaesmiprimerapráctica”Paraellonecesitamosañadirdoscomponentesmás.Componente11.AcelerómetroEstecomponente(novisible)seencuentraenelapartadodeSensores.Propiedades:

• IntervaloMínimo:400milisegundos(entredossacudidas)• Sensibilidad:moderada

Componente12.TextoAVoz2(paraleerenespañol)SeencuentraenelapartadoMedios.Propiedades:

• País:ESP• Idioma:es(español)

Programacióndeloscomponentes:

Actividad3Añadimos un icono a nuestra aplicación y la instalamos en nuestro dispositivomóvil.AppInventorutilizaelsiguienteiconopordefecto:

Para cambiar el icono debemos subir una imagen (Columna ComponentesapartadoMedios).EnlapropiedadIconodelcomponenteScreen1,seleccionamoselnombredelarchivodenuestraimagen.

AplicacionesmóvilesconAppInventor21

JUEGODELFRONTÓNEsunclásicodelosjuegosparaordenador.Setratadeunabolaquerebotaenlosbordes de la pantalla y una pala (rectángulo) que es manejado por el jugador.Cuandolabolarebasaa lapalaycolisionaconelbordeinferiorde lapantalla,eljugadorpierdeyeljuegosedetiene.Existen diferentes maneras para controlar el movimiento de la pala (Sprite).Nosotros utilizaremos aquí el “arrastre” con el dedo (por su simplicidad en laprogramación).Paradiseñarla“pala”utilizaremoseleditordeimágenes“pixlrweb”disponibleenladirección:https://pixlr.com/editor/

Paso1.Diseñandola“pala”Unavezhayamosentradoenel sitioWeb “pixlr.com” seleccionamos “Crearunanuevaimagen”.Acontinuación,establecemossutamañoen60x20píxeles.

La“pala”eslapropiaimagenquehemoscreado,unrectánguloquesolotenemosquerellenardecolor.Seleccionamoselcolorenlapaleta

22AplicacionesmóvilesconAppInventor

Pararellenardecolorelrectánguloutilizamosel“botedepintura”haciendoclicenelinteriordelaimagen

Por último, guardamos el archivo con el nombre “pala” y formato “jpg” parasubirloaAppInventor.

Paso2.CreamoselProyectoenAppInventorAl igual que en el ejemplo anterior, haciendo clic en “Proyectos” seleccionamos“Comenzarunproyectonuevo…”y leasignamoselnombrequedeseemos,porejemplo“Fronton”(noestápermitidoelusodetildesparanombrarunproyecto).PropiedadesdelcomponenteScreen1:

• OrientaciónDeLaPantalla:Vertical• Título:Frontón

AplicacionesmóvilesconAppInventor23

Paso3.AñadimosloscomponentesEn la parte superior de la pantalla colocaremos un componente deDisposiciónHorizontal donde alojaremos, demomento, unbotón de Inicio. Esta estructuranos facilitará posibles ampliaciones futuras (activar sonido, contador de puntos,otrosbotones,etc.)Debajo de la Disposición Horizontal añadiremos un componente Lienzo, quealbergará un componentePelota y un componenteSpriteImage. Todos ellos seencuentrandentrodelapartadoDibujoyanimación.SubimosaAppInventorelarchivo“pala.jpg”creadoanteriormente(Botón“Subirarchivo…”)ElLienzoesunpanelrectangularsensiblealtactodentrodelcualsepuededibujary tambiénmoverSprites (imágenes). HayeventosquepermitensabercuándoydóndesehatocadounLienzo,ohaciadóndesehaarrastradounSprite(ImagenoPelota).Existenmétodosparadibujarpuntos, líneasycírculoscomoveremosenotrasprácticas.LosSpritessonobjetosgráficosquepodemosmover,arrastrar, lanzaryhacerlosinteractuarconotrosSprites.El componente Pelota es un Sprite que viene predeterminado (por su usofrecuente en juegos) en App Inventor. En la columna Propiedades (Editor deDiseño)podremosindicarleelradio,color,velocidad,dirección,etc.ElcomponenteSpriteImageesunSpritequevienerepresentadoporunaimagenquehemossubidopreviamenteaAppInvnetor.Constituyenlabasedelosjuegosgráficosbasadosenmovimiento.PropiedadesdeDisposiciónHorizontal1:

• DispHorizontal:Centro• DispVertical:Centro• Alto:10porciento• Ancho:Ajustaralcontenedor

PropiedadesdeBotón1:RenombramosBotón1porBoton_Inicio

• Texto:EmpezarPropiedadesdeLienzo1:

• Alto:85porciento• Ancho:Ajustaralcontenedor…• ColorDeFondo:Negro

PropiedadesdePelota1:

• Radio:20• ColorDePintura:Violeta• Intervalo:10(milisegundos)

24AplicacionesmóvilesconAppInventor

ElradiodePelotaindicanúmerodepíxeles.Unintervalode10(milisegundos)yunavelocidadde5(píxeles)indicaquecada10milisegundoslapelotasemoverá5píxeles(enladirecciónindicada)Direcciónesunánguloquevieneexpresadoengrados(sexagesimales).0gradosindicaladerecha.90grados,arriba.180,alaizquierda.270,haciaabajo.

PropiedadesdeSpriteImage:

• Foto:Seleccionamos“pala.jpg”• X:137• Y:325

LaposiciónX:0,Y:0representalaesquinasuperiorizquierdadellienzo.X:25Y:50indica25píxeleshacialaderechay50haciaabajo(coordenadascartesianas).

AplicacionesmóvilesconAppInventor25

Paso4.ProgramamoselbotónEmpezar(Inicio)ConectamosnuestrodispositivomóvilconAppInventorparaircomprobandoelfuncionamientodelaaplicación.Dentro del Editor de Bloques (botón Bloques) seleccionamos cuandoboton_inico.clicdelcomponenteboton_inicio.Añadimos en su interior la etiqueta llamar “Pelota.MoverA” para situar el Sprite“Pelota1”siempreenlamismaposiciónaliniciarlapartida.Laposiciónhorizontal(X) la establecemos a la mitad del ancho del lienzo. Para ello necesitamos lasetiquetasdividirynumérica(“2”)queseencuentranenelapartadoMatemáticas(Integrados). Para la posición vertical (Y) seleccionamos una etiqueta numéricaescribiendoelvalor“20”essuinterior.Nota. Haciendo clic con el botón derecho del ratón sobre cualquier etiqueta nospermite“Duplicarla”,loquenosfacilitarálaescrituradecódigo.Establecemos para el Sprite “Pelota1” una velocidad igual a”5” y una direcciónaleatoria entre 45º y 135º con las etiquetas “poner Pelota1.Dirección” y “ponerPelota1.Velocidad”.Elbloquequedaríacomosemuestraenlaimagen.

Si pulsamos el botónEmpezar de nuestro dispositivomóvil observamos que elSprite “Pelota” se mueve hacia la parte superior del Lienzo y se desliza hastaalcanzarunadelasesquinas.Nuestrosiguientepasoseráconseguirquelabolarebotecuandotoquelosbordes.

Paso5.RebotedelaPelotaAl hacer clic sobre el componente “Pelota1” nos aparecerá la etiqueta “cuandoPelota1.TocarBorde” que deberemos seleccionar. En su interior colocamos laetiqueta“llamarPelota1.Botar”conlaetiqueta“tomarborde”(seobtienealpasarelcursorsobrelapalabra“Borde”delaetiqueta“.TocarBorde”)comoseindicaenlafigura.

Deestaformaconseguimosunmovimientocontinuodelapelota.Debemosestablecerahoraelmanejoycontroldela“pala”.

26AplicacionesmóvilesconAppInventor

Paso6.ArrastredelaPalaComo se indicó anteriormente se pueden definir diferentesmecanismos para elmanejo de la “pala”. En nuestro caso utilizaremos la etiqueta “cuandoSpriteImage1.Arrastrado”. En su interior agregaremos la etiqueta “llamarSpriteUmage:MoverA”, indicando como valor para X: XActual (etiqueta “tomarXActual”) y para Y: la etiqueta numérica “325” (valor establecido durante eldiseño).Deestamanera,cuandoarrastremosconeldedola“pala”sobreellienzo,estásemoverásóloenladirecciónhorizontalhastalaposiciónactualdenuestrodedo.

Paso7.ColisiónPelota-PalaDeseamosquelaPelotareboteenlaPalacuandocolisioneconella.Paraquetengaeste comportamiento debemos seleccionar la etiqueta “cuandoPelota1:EnColisionCon” del componente “Pelota1”, y en su interior colocar laetiqueta“ponerPelota1.Direccióncomo”yañadimos“enteroaleatorioentre45ºy135º. Es decir, cambiando la dirección del Sprite Pelota conseguimos el efectorebote.Comprobamoselfuncionamientoennuestrodispositivomóvil.

Paso8.Generamos.apkyguardamosFinalmente,generamoselarchivo.apkylosguardamosenelordenadorobiengeneramos el código QR para instalarlo en nuestro dispositivo móvil. Antes derealizar esta operación podemos añadir una imagen como icono de nuestraaplicación.

AplicacionesmóvilesconAppInventor27

Actividad4Es evidente que la aplicación que hemos desarrollado admite muchas mejoras.Podemosponerlesonido(paralosrebotes),contadordepuntos,botóndePausayfinaldepartidaEnestaactividadnosplanteamosprogramarun finaldepartida.Cuando labolatoquelaparteinferiordelapantallaeljuegosedetendrá.Paraproporcionarestanuevafunciónsolodebemosmodificarlaetiqueta“cuandoPelota1.TocarBorde”agregandolaetiqueta“Sientones”delbloquedeControl.App Inventor leasignaacadabordeunnúmero(sepuedeconsultaren laayudaintegrada)siendo+1paraelbordesuperior,-1paraelinferior,+3paraelderechoy-3paraelizquierdo.NosotrosdeseamosquecuandolabolarebasealaPalaytoqueelbordeinferioreljuegosedetenga.Es decir,Si Pelota1 tocaborde= -1entonces “ponerPelota1.Velocidad=0”. Elbloquequedaríaasí: