Introducción

En este módulo vamos a introducirnos programar aplicaciones para Android usando varias tecnologías, como son: App Inventor 2, Processing y Scketware. Depende de tu experiencia previa y cómo te has defendido en el módulo anterior te será más fácil o difícil. No desesperes y por supuesto si te queda alguna duda ponte en contacto con tu tutor.

Unidad 14. Programación de App con Inventor 2

App Inventor 2, es otro desarrollo del MIT (Instituto Tecnológico de Massachusetts) junto con Google, en concreto orientado para realizar aplicaciones móviles para Android. App Inventor es un lenguaje de programación orientado a bloques y eventos, si recuerdas, en el módulo anterior vimos que con Scratch usábamos precisamente estos paradigmas de la programación orientada en bloques, por lo que no te costará mucho trabajo adaptarte a App inventor 2.

Si navegas por el Play Store, verás que hay muchas aplicaciones que constan de pocos elementos y son muy simples. La mayoría estarán desarrolladas o se pueden desarrollar con App Inventor 2. Usando la misma estructura de Scratch, con opciones diferentes pero la misma estructura, puedes desarrollar aplicaciones de forma muy rápida

¿Es mejor App Inventor 2 o Android Studio?. Android Studio es la programación de forma nativa para desarrollar aplicaciones para Android, al ser la base, ahí tienes todo, es la fuente de la que todos parten: el SDK de Android. Ahora bien, yo he sido tutor de Android varios años, tanto con Eclipse como con Android Studio y salvo excepciones muy contadas, hacer una aplicación en Android Stuido puede ser un suplicio. Lo primero que debes saber Java y a un alto nivel, luego conocer los entresijos de cada versión y por supuesto requiere más tiempo. Eso sí, hay que decir que con App Inventor 2 encontrarás fácil lo que esté pre-configurado para App Inventor 2, lo que no esté es mucho más difícil o incluso imposible, alguna limitación debe tener. Pero poco a poco salen versiones nuevas y claro está que la tendencia es facilitar las cosas para que el usuario desarrolle de forma rápida aplicaciones para Android.

Siendo desarrollador de aplicaciones de todo tipo, te puedo decir que con App Inventor 2 puedes desarrollar aplicaciones para Android de forma muy rápida, cosas que cuestan mucho tiempo de forma nativa, aquí con arrastrar dos elementos y poner dos bloques ya tenemos la aplicación para subirla al Play Store. Por motivos personales, estoy viendo muchas aplicaciones para bebes y niños que son muy fáciles, el típico programa para aprender a leer, pulsas un botón, sale un animal y suena un sonido...Eso se hace en pocos minutos con App Inventor 2.

No me gusta entrar en las guerras de lenguajes, creo que para cada caso, se requiere una tecnología, de echo, en otro curso que doy, aprender hacer aplicaciones en Android híbridas a través de webview, se llama: "Desarrollo de aplicaciones web multiplataforma". Está en el Aula Mentor dentro de la sección de programación, además de aprender ha hacer web, con HTML5, CSS3, jQuery y jQuery Mobile, se aprende hacer aplicaciones para Android. Con todo esto te digo, que lo importante es no cerrarse en ningún caso, no sacar la espada, escucdo y aceptar nuevas forma de programa, y por supuesto: usar aquella tecnología que requiera cada proyecto.

Me ha salido al emular App Inventor 2 que debe actualizarse., ¿qué hago?

En este caso, lo que necesita es actualizar la versión de AI Companion del emulador, por lo que debes seguir sus instrucciones, básicamente es dejar que se descargue, Aceptar la instalación, Pulsar en Install cuando se descargue la actualización y finalmente pulsar en Done y no en Open como nos dice el mensaje de la web.

Nos aparece un mensaje diciendo que tenemos que actualizar Companion en el emulador (puedes que el mensaje esté en inglés)

Actualizar AI Companion en emulador App Inventor 2. Imagen 1

En el emulador, seleccionamos que sí, que queremos actualizar pulsando OK

Actualizar AI Companion en emulador App Inventor 2. Imagen 2

Luego pulsamos sobre INSTALLA para que instale la nueva versión de la aplicación

Actualizar AI Companion en emulador App Inventor 2. Imagen 3

Una vez finalizado pulsamos la opción "DONE" tal como nos indicaban al inicio y ya podemos ir a la web y continuar. En caso que detectemos que se ha quedado bloqueado (durante mucho tiempo, espera al menos un minuto después de pulsar [ENTENDIDO]), dale a reiniciar conexión. Importante: Si le das a reiniciar la conexión completamente, lo que hace es poner el estado de fábrica, por lo que tendrás que volver a actualizar Companion tal y como hemos realizado ahora.

Actualizar AI Companion en emulador App Inventor 2. Imagen 4

Unidad 15. Programación de App con Processing

En unidades anteriores vimos que con Processing podemos programar aplicaciones para nuestro PC. Ahora, verás que de forma sencilla puedes hacer lo mismo con Android ¿por qué? porque solo con cambiar el tamaño de la pantalla y poco más podrás configurar tu aplicación para que funcione en Android.

¿Qué es lo que necesitamos? Aquí tenemos que añadir un modo a Processing, que se llama como no, Modo Android. Ahora, dependiendo del ordenador que tengas tendrás más o menos problemas, mi consejo, para que te salga todo como en el curso, usa las versiones que se facilitan en el curso, ya que sino nos encontraremos con resultados inesperados.

A veces, otro fallo es poder conectar la aplicación con nuestro programa de Android. En tal caso, puedes usar emuladores, o en su defecto realiza la aplicación en el modo PC.

¿Qué tengo que tener para probar el modo Android correctamente?:

  • Processing en modo Android
  • Los drivers de tu móvil instalados correctamente, busca que cada modelo requiere unas particularidades
  • El móvil en modo desarrollador. Busca en google que cada modelo se activa de una forma
  • El modo depurador activado. Normalmente está en los ajustes del móvil
  • Estar pendiente, ya que es posible que cuando conectemos nuestro PC al móvil nos salga en el móvil una pantalla diciendo ¿Deseas autorizar al dispositivo XXXX:XXXX a usar el modo depuración USB? le das a que sí y a recordar y así no tendrás problemas la próxima vez. ¿Y si me conecto a otro pc? Pues tienes que repetir los pasos y autorizar nuevamente.

Unidad 16. Programación de App con Sketchware

Hemos creado varios vídeos para ayudarte a crear aplicaciones. Ten en cuenta que se basa en Scratch, App inventor 2, es decir la filosofía es la misma, pero cambian algunas cosas, por lo pronto el idioma es en inglés

Empecemos por crear el "Hola mundo" con Sketchware:

Modificamos el anterior para crear "Hola mundo temporizado":

Crear app para conectar con nuestro arduino a través de webview (requiere tener cargado en arduino el archivo de ejemplo):

Lista de la compra creada con Sketchware:

Ayuda para las actividades del curso: módulo 3

A continuación podrás ver unos vídeos de ejemplo para que te sirvan para realizar la actividad.

Primer ejemplo: Hola Mundo

Se recomiendo encarecidamente que realices por ti mismo este vídeo, ya que sino no te acostumbraras a la metodología de esta aplicación. En caso que no consigas reproducirlo, aquí tienes el archivo .aia para que lo importes a tus proyectos: Descargar fichero HolaMundo.aia aquí

¿Cómo puedo coger el dato de un usuario para recoger la opción correcta?

Aquí podemos usar muchas técnicas, ya sea usando casillas de verificación, usando botones, label...etc. En el siguiente vídeo puede ver una forma de crear una pregunta y comprobar que es lo que ha respondido el usuario.

Se recomiendo encarecidamente que realices por ti mismo este vídeo, ya que sino no te acostumbraras a la metodología de esta aplicación. En caso que no consigas reproducirlo, aquí tienes el archivo .aia para que lo importes a tus proyectos: Descargar fichero usuarioPregunta.aia aquí

¿Cuál es la forma más fácil de hacer esta actividad?

La forma más sencilla para resolver el problema de la actividad, es agregar las 10 preguntas en la misma pantalla en un Screen o ventana, y cuando le des al botón de COMPROBAR, mirar el número de aciertos y ya decir un mensaje u otro. Simplemente es coger el ejemplo que se da arriba y en vez de buscar hacer una pregunta, hacer 10. Recorrer las preguntas, coger un contador de aciertos, ir aumentado este si es correcta y al final simplemente hacer la cuenta.

Y ¿Cómo controlamos el orden de las preguntas en esta opción? Pues la verdad que en esta opción es muy difícil cambiar el orden de las preguntas, ya que tendríamos que tener por un lado las preguntas anotadas y luego por otro el ordena de salida en pantalla.

¿Qué opción puedo elegir si quiero hacer la actividad completa?

La forma más sencilla en caso que no estés muy acostumbrado/a a usar App Inventor 2 sería coger el ejemplo anterior y crear 10 ventanas/Screen una por pregunta, pero claro, por un lado me interesa que hagas esta opción para que pruebes la navegabilidad de una aplicación a través de varias pantallas, pero por otro, existen opciones más óptimas.

Si usas la opción de "pasar datos por pantalla" debes tener una forma de ir almacenando las respuestas y pasárselas a la siguiente pantalla, de modo que vas pasando el "testigo" de una pantalla a otra. También se puede usar una base de datos de preguntas o un archivo para guardar las cosas.

Las mejores opciones (para un futuro) para usar este tipo de acciones es el uso de listas, base de datos usando una forma de almacenamiento de las preguntas, en App Inventor 2 tenemos varias opciones como son: Ayuda actividad M3_1

¿Cómo puedo crear/usar listas en App Inventor 2?

Imagina que quieras hacer una aplicación que lleve el control de los alumnos que han asistido a un evento, los que han venido a clase (o los que han faltado), una lista de compra...etc. Al final, todos los elementos tienen en común un elemento muy usado en todas las aplicaciones y es las listas. Estas listas sirven para almacenar cosas, y bueno, aunque son de forma temporal, ya que si queremos que permanezca en el tiempo debemos usar bases de datos, archivos u otros medios, nos son útiles para representar los datos indistintamente.

Mira el siguiente ejemplo e intenta reproducirlo por ti mismo/a una vez que lo entiendas. Es vital que te fijes en los pequeños detalles y como verás en el módulo de Sketchware, hay cosas que se hacen de forma distinta. Descargar fichero listaCompra.aia aquí

¿Es posible poner mi aplicación en dos idiomas?

Por supuesto, existen varias formas de hacerlo, aquí vamos a ver una en la que usamos una pantalla inicial, en la primera pantalla preguntamos el idioma. Dependiendo del que elija el usuario guardamos "es" o "en" y lo que hacemos es que ese valor lo vamos pasando por nuestra aplicación, para ello usamos una cosa que se llama [tomar el valor inicial], y si es "es" ponemos el texto en español y si es "en" lo ponemos en inglés.

Puedes descargar el ejemplo de una Calculadora Bilingüe en App Inventor 2: Pulsando aquí para descargar Calculadora_bilingue

¿No hay una forma más fácil de hacerlo?

Si, existen otros métodos que usando el API de google, podemos usar su traductor, el problema de esto, es que en todo momento la aplicación necesita de internet y sino hay internet o este es lento, puede "aburrir" al usuario. Eso sí, como ventaja, podremos traducirlo al idioma que queramos.

En esta ocasión debemos usar una aplicación creada en Processing para crear la aplicación de Android. Los pasos a seguir serían los siguientes:

  • Sigue los pasos del manual para instalar el modo Android en Processing. Te recomiendo encarecidamente que uses las versiones que hay en el curso en la sección recursos, ya que hay cosas que cambian de una versión a otra.
  • Una vez termines asegúrate que te funciona el modo Android
  • No consigo poner el modo Android ¿qué hago?. Usa el modo Java, y no te quedes atascado en ninguna actividad, y por supuesto ponte en contacto con tu tutor, seguro que te orientará.
  • ¿Cómo empiezo?. Primero tenemos que entender la actividad, y buscar una solución aproximada, es decir, existe un ejemplo que vimos en el módulo anterior, en la que se mostraban unos cuadrantes "detectaCuadrante" y a partir de ahí debes pensar que lo que se pretende es que lancemos una secuencia de cuadrantes y el usuario detecte esa secuencia. Comparamos lo que ha pulsado el usuario con lo que hemos generado y si coincide, ¡ha acertado! y sino, ¡ha perdido!
  • Otro punto importante que no debes pasar por alto es que al ser un juego debe haber una secuencia a seguir, es decir, existirá un momento de inicio, un momento que muestra la secuencia, otro momento que esperamos que el usuario pulse, otro momento que comprobamos y mostramos el resultado. Dependiendo de este resultado, aumentamos el nivel o no.
  • Bien, una vez que tenemos eso claro tenemos que ir atacando la actividad por partes, es decir, ¿cómo genero un vector? ¿cómo compruebo donde ha pulsado el usuario? ¿cómo creo el orden del juego?
  • ¿Cómo genero un vector?.
    int[] listaParaAcertar = {};
    int[] intentoUsuario={};
    				
  • ¿Cómo relleno/genero el vector inicial que tendrá que repetir el usuario?.
    //Preparamos el vector
    listaParaAcertar=append(listaParaAcertar, int(random(1, 4)));
    				
  • ¿Cómo compruebo donde ha pulsado el usuario?.
    
    //Tenemos que coger el evento del ratón cuando hace click y ver en el cuadrante que lo ha realizado
    //Una vez que lo hemos capturado, añadir al vector o lista de intentos del usuario el valor. Así se el orden
    void mouseClicked() {    
    
        if (mouseX < width/2 && mouseY < height/2) {
    		//Estoy en el primer cuadrante
    		background(255);
    		cuadrante1();
    		intentoUsuario=append(intentoUsuario, 1);	
    
        } else if (mouseX > width/2 && mouseY < height/2) {
    
    		//Estoy en el segundo cuadrante
    		background(255);
    		cuadrante2();
    		intentoUsuario=append(intentoUsuario, 2);
    
      	}// Y así con el resto de los cuadrantes
    	
    	
    }
    				
  • Lo ideal es definir funciones para lo que se repita mucha y así el código es más sencillo
    
    /****************************    FUNCIONES AUXILIARES   **************************/
    //Definimos el Cuadrante 1 como funcion para no repetir
    void cuadrante1() {
    	fill(colorCuad1);
    	rect(0, 0, width/2, height/2);
    }
    
    //Definimos el Cuadrante 2 como funcion para no repetir
    void cuadrante2() {
    	fill(colorCuad2);
    	rect(width/2, 0, width/2, height/2);
    }
    
    //Definimos el Cuadrante 3 como funcion para no repetir
    void cuadrante3() {
    	fill(colorCuad3);
    	rect(0, height/2, width/2, height/2);
    }
    
    //Definimos el Cuadrante 4 como funcion para no repetir
    void cuadrante4() {
    	fill(colorCuad4);
    	rect(width/2, height/2, width/2, height/2);
    }
    				
    
    							
  • Lo ideal es crearte alguna funciones más, del tipo muestraSecuenca(lista)...etc. Es decir, que lo que haga sea mostrar en pantalla la secuencia que ha introducido. Si por ejemplo tengo una lista rellena con 4 cuadrantes aleatorios. Imagina listaParaAcertar={c1, c2, c1, c3}, tendré que hacer:
    • Mostrar c1 (cuadrante 1)
    • Esperar 1 segundo
    • Mostrar c2 (cuadrante 2)
    • Esperar 1 segundo
    • Mostrar c1 (cuadrante 1)
    • Esperar 1 segundo
    • Mostrar c3 (cuadrante 3)
    • Esperar 1 segundo
    • Si metes esto en un for, es recorrer el listado de la longitud que tenga y mostrar el cuadrante correspondiente, esperar un segundo y a por el siguiente...
  • Con esta ayuda creo que ya puedes comenzar ha realizar la actividad por ti mismo. Respecto para probar la actividad y demás, creo que inicialmente es mejor que uses el modo Java en tu ordenador y ya una vez te funcione, lo ejecutes en el smartphone con Android. Es decir, no interesa perder el tiempo en hacer que la aplicación funcione para Android, si no funciona para PC.
  • Puedes usar un emulador o tu propio dispositivo debes tener los drivers del movil instalados, luego tendrás que poner el móvil en modo de purador, autorizar la firma...(tal y como hemos comentado antes con App Inventor 2).
  • ¿Has terminado la aplicación en modo Java y sigue sin funcionar o no consigues instalar el modo Android? No te preocupes, la mayoría de las veces que falla es por temas de incompatibilidades, y bueno incluso a mí me da error cuando uso el programa de la pantalla, llegar a esa conclusión me costó trabajo, ya que normalmente instalamos muchos programas y claro, puede ser que al usar las mismas librerías entren en conflicto. Saber que programa es el que hace que falle es muy difícil. En estos casos, te recomiendo que hagas la aplicación en modo JAVA* y no en Android. La verdad que la única diferencia es el tamaño de pantalla y que se ejecuta en un dispositivo con Android, pero lo importante es el código en Processing, yo es lo que voy a probar, así que sino te funcione, no pierdas demasiado tiempo*.
  • En la carpeta recursos hay un ejemplo que se llama "detectaCuadrante". Partiendo de este ejemplo, tendrás que hacer el "memory". Es decir, necesitarás un orden aleatorio c1 (cuadrante 1), c2 (Cuadrante 2)...etc.
  • Ahora tendrás que almacenar ese orden en una lista, array o vector. Luego grabarás los cuadrantes que ha introducido el usuario. Finalmente lo que haces es comparar un vector o lista con el otro.
  • ¿Cómo hacemos que suba de nivel conforme vaya acertando el usuario?. cuando se usan juegos se suele usar una función o método que sea: reiniciavalores() o subeNievel(). Ahí deberíamos agregar un número más recordar, es decir, si antes hemos generado 4 cuadrantes aleatorios: c1,c2,c1,c3. Ahora generaremos cinco, por ejemplo: c3,c1,c3,c4,c2...y así hasta que queramos. Te puedes ayudar de una variable que sea "nivelUsuario" y así sabes hasta donde ha llegado.
  • * Existe una forma que podemos probar para usar el modo Android con Processing. Si tienes suficiente tiempo para probar, te comento un método alternativo al que hay. Para este paso tendrás que tener un poco de manejo con la instalación de programas. La idea es, descárgate la última versión de Android Studio. Esta versión es con la que se desarrollan aplicaciones para Android de forma nativa. Una vez lo tengas, abre el SDK Manager y asegúrate de tener la versión 4.2 instalada. Una vez que la tengas, créate al menos un ADV (Android Device Virtual) con la versión 4.2. En verdad lo que estamos haciendo es preparando todo el ordenador para hacer aplicaciones con Android Studio. Ahora, la idea es, una vez que tengas esto funcionando correctamente, desinstala y te vuelves a bajar la versión del curso de Processing. Si recuerdas, en uno de los pasos te pedía si queríamos instalar el SDK o localizarlo (es decir, ponerle la ruta). El truco es eso, usar la parte de Android oficial y funcionando; después decirle a Processing donde está (Locale SDK) y ya debería funcionar.

Se han creado varios vídeos en la unidad 16 para que te acostumbres al uso de Sketchware. Te recomiendo que primero veas esos vídeos y posteriormente vuelvas aquí. Si lo has realizado, ten en cuenta los siguientes consejos:

El primer problema que nos podemos encontrar en esta actividad es, ¿qué pasa sino tengo un dispositivo en Android?. Se podrían usar emuladores para intentar hacerlo, pero realmente costaría mucho trabajo. En tal caso que no puedas realizar esta aplicación con Sketchware porque no dispongas un dispositivo con Android, realiza la aplicación en App Inventor 2. La ayuda que hay aquí es para Sketchware, pero revísala ya que te vendrá muy bien para resolverla en App Inventor 2.

¿Cómo afrontar esta actividad?

  • Revisa todos los vídeos existentes en esta sección. Intenta hacerlo por tu parte, así cogerás soltura.
  • Piensa primero qué elementos vas a necesitar
  • Busca un ejemplo donde encuentres aquel componente que no sepas como funciona
  • Organiza los elementos de una forma que te sea cómoda. Muchas veces pensamos en aplicaciones complejas y luego vemos que se pueden desarrollar de una forma sencilla.
  • Añade antes de agregar nada un Scroll Vertical y le pones de parámetros/propiedades Layout_Width--> Match_parent (se ajuste al elemento padre) y Layout_heigth --> wrap content (se ajuste al contenido)
  • Agrega una disposición vertical y selecciona Layout_Width--> Match_parent (se ajuste al elemento padre), dentro arrastra un imageView, ve a propiedades y elige las mismas opciones
  • Deberás agregar disposiciones o Layout (vertical/horizontal) según necesites. Si te fijas en la imagenes de los layout verás si los elementos de dentro se organizan de forma horizontal o vertical
  • ¿Cómo hago la parte de las imágenes? Lo más fácil, es decir, tengo varias imágenes: imagenInicio.jpg, imagenError1.jpg, imagenError2.jpg, imagenError3.jpg...etc. Así con los distintos errores. Este trabajo te requiere que cojas una imagen y a partir de ella crees varias. Es más fácil de lo que parece y con el propio editor de imágenes del sistema operativo puedes hacerlo. De todas formas, sino estas muy acostumbrado/a a usar este tipo de programa, puedes descargarte estas imágenes: Descargar imágenes ahorcado aquí
  • Descomprime las imágenes anteriores y pásalas a tu smartphone con Android. Así podrás subirlas al programa desde el gestor de imágenes o Image Manager. Una forma fácil de hacerlo es usar Drive de Google, incorporarlas a tu Galería y manejar las imágenes desde ahí.

    Ayuda actividad M3_3 parte 1 Ayuda actividad M3_3 parte 2 Ayuda actividad M3_3 parte 3

  • Después del imageView que será un contenedor de imágenes, necesitaremos varios textview para mostrar el contenido, por ejemplo: un TextView para la palabra que tiene que adivinar, otro TextView para las palabras que vaya diciendo (para que no se repita), y otro más para mostrar el número de errores acumulados, un EditText, para que el usuario vaya introduciendo las palabras que el crea. Puedes tener una apariencia parecida a esta:

    Ayuda actividad M3_3

  • ¿Cómo creo las palabras? Lo más correcto es usar una lista de elementos
  • Crea una lista de palabras, estás serán las que se les pedirá al usuario. Si esta parte la ves muy complicada, hazlo solo con una palabra. Créate una variable que contenga la palabra a buscar
  • Decide si se le da una pista (primera letra) o no.
  • Puedes crear una lista para cada cosa, es decir, una lista para el listado de palabras que vas a tener, otra lista para el listado de letras acertadas, otra para el listado de letras erróneas. Existe una función que devuelve la longitud de la lista (lenght), por tanto, la longitud de cada lista representa el error/acierto del usuario
  • Dentro de la sección texto, hay una forma de unir y buscar palabras
  • Tendremos que crear varias lista y jugar con ellas, por ejemplo, la lista de palabras, la lista de letras, de guiones, variables para llevar las cuentas...etc

Te sientes preparado/a. Es normal que al inicio creas que es difícil, pero partiendo de saber cómo funciona el juego, solo es buscar la forma de intentar reproducirlo. ¿Necesitas más ayuda? En caso que necesites más ayuda se ha elaborado un documento guía para realizar esta actividad, lo importante es que al final se haga el trabajo y sobre todo que practiques, en este caso con Sketchware.Descargar aquí una ayuda adicional

Esta web utiliza cookies, puedes ver nuestra la política de cookies, aquí Si continuas navegando estás aceptándola. Pulsa para quitar este mensaje
Política de cookies +