App Inventor 2

App Inventor 2

Después de mucho tiempo sin escribir, vuelvo con más ganas de hacer apps. Y qué sorpresa tan grata me he llevado al ver que ha salido una nueva versión de App Inventor. El otro día la probé y esta muy bien la verdad. Aquí explico un poco con lo que me encontré:

Lo primero que vi fue que ahora la url para acceder es distinta. Como es la versión 2, la url sería la siguiente http://ai2.appinventor.mit.edu para poder acceder a tu panel personal donde poder desarrollar las apps.

Una vez en el panel lo primero que noté fue que la cabecera y las opciones de menú son distintas. En la cabecera de la web tenemos las opciones para crear un nuevo proyecto, guardarlo, importar alguno que tengamos guardado y también podemos conectarnos al dispositivo android o abrir el emulador. Además, con la opción de “build” podemos crear el archivo .apk o mediante un código QR instalar la app en nuestro móvil. Estos son los cambios más importantes en la cabecera.

En el menú, ahora tenemos por un lado los botones para añadir una nueva pantalla o borrar una que ya tengamos, y en el lado derecho los botones para cambiar entre el panel de diseño y los bloques.

Cuando vamos al apartado de bloques vemos un cambio considerable en la pantalla. El menú de la lista de bloques lo tenemos a la izquierda de la pantalla y las piezas de puzle ahora están más resaltadas, coloreadas y con el texto mas legible. La mayoría de las piezas son las mismas pero ahora puedes modificar fácilmente entre una y otra ya que todas ellas poseen una lista desplegable para elegir el elemento sobre el que trabajar en caso de tener más de uno igual (como por ejemplo 2 botones, o 2 imágenes).

Estos son los mayores cambios en cuanto a la programación de apps. Pero también hay algunas variaciones a la hora de instalar y poder usar nuestra app.

Existen 3 métodos para instalar App Inventor y probar nuestros programas:

1.- El método más fácil de seguir y que está altamente recomendado es el de probar nuestro código en un dispositivo android que tenga acceso a internet (preferiblemente Wifi). Con este método simplemente debemos descargarnos la app de App Inventor desde el market de Google y desde el menú de “Connect” pulsamos “AI Companion”. El programa nos proporcionará un código QR el cual podremos insertar en nuestro dispositivo android cuando abrimos la app descargada. Y con esto ya estamos conectados a nuestro panel de desarrollo para poder probar en vivo todo lo que hacemos.

2.- Si no disponemos de un dispositivo android tendremos que usar un emulador. Para ello nos descargamos de aquí el programa de App Inventor y lo instalamos en nuestro sistema operativo (en Linux todavía no han publicado los pasos). Una vez instalado lo ejecutamos y desde nuestro panel de desarrollo ya podemos dale a “Connect”-> “Emulator”. Es muy sencillo también.

3.- Si tenemos un dispositivo android pero no sin internet, podriamos optar por la opción de probar nuestro código en el dispositivo conectado a nuestro ordenador con un calbe USB. En este caso también deberemos descargar e instalar la aplicación de App Inventor en nuestro ordenador. Además, también deberemos tener instalada la app en el dispositivo. Una vez tengamos estas dos cosas podremos ejecutar la de nuestro ordenador y desde el panel de desarrollo darle a “Connect”->”USB”. Con esto ya podremos ver nuestra app en el dispositivo.

Esto es por ahora lo nuevo de App Inventor. A seguir desarrollando!

14 Thoughts on “App Inventor 2: nueva versión

  1. Omar Guerra on 26 agosto, 2014 at 23:21 said:

    Amigo saludos…

    Agradezco mucho toda tu buena explicación, pero hay algo que no logro entender, o bien, no sé cómo hacerlo… quiero hacer una app que al abrirla me lleve a un sitio web, o bien, que cuando la abra pueda tocar un botón y ese botón me lleve a un sitio web… he intentado en la ventana del BLOCKS y no consigo hacerlo… como te digo es algo muy sencillo: que al tocar un botón en el teléfono me lleve a un sitio web…

    Por otro lado, ¿cómo se hace para ubicar cualquier elemento de la interfaz (una imagen, un botón, un texto, etc) donde uno desee?

    De antemano muchas gracias por tu respuesta…

    • ivillarroel on 28 agosto, 2014 at 19:21 said:

      Hola Omar,

      Si lo que quieres es que al pulsar un botón se te abra una ventana del navegador a una dirección web concreta los pasos son los siguientes:

      1.- Tienes que sacar un objeto botón al diseño
      2.- Sacar también un objeto “ActivityStarter”
      3.- Dentro de las propiedades del “ActivityStarter” debes poner en el apartado Action lo siguiente: android.intent.action.VIEW
      4.- En la propiedad DataUri introduces la dirección Web que quieres que se abra.
      5.- Después en los bloques creas un bloque “When button.click” y metes dentro “call.ActivityStarter.StartActivity” (no debería ser muy difícil de encontrar).

      Con respecto a la ubicación de los objetos dentro de la pantalla es más fácil si usas Layouts (Horizontal, Vertical o Table) en el diseño. De esta manera puedes ir haciendo zonas donde ubicar los objetos que quieres mostrar en pantalla.

      Espero haberte ayudado.

      Saludos!

  2. Caro on 7 marzo, 2015 at 12:12 said:

    Hola.
    Estoy empezando con app inventor y como tu bien comentas ha habido algunos cambios con respecto a las versiones anteriores…Como soy muy inexperto estoy siguiendo tutoriales para aprender, en uno de ellos aparece una ficha “procedure” con ranuras para argumentos y en la nueva version esto no aparece.
    ¿como puedo solucionar esto?
    Gracias

    • ivillarroel on 7 marzo, 2015 at 23:42 said:

      Buenas Caro,
      En la nueva versión puedes sacar un bloque de “procedure” y en una esquina tiene un cuadrado azul. Al pinchar ahí puedes añadir los argumentos de la siguiente manera:
      1- En el bloque “imputs” de la izquierda escribes el nombre del parámetro.
      2.- Arrastras ese bloque al bloque “imputs” de la derecha.

      De esta forma se van añadiendo los argumentos. Espero que te haya servido y si no me he explicado bien dime.

      Gracias y saludos!

  3. Caro on 8 marzo, 2015 at 22:36 said:

    Gracias Ivillarroel.
    Me ha venido genial!!

  4. Daniel on 24 marzo, 2015 at 22:29 said:

    Hola amig@, me podrías explicar como grabar mi voz por celular y en lo posible como reproducirla cuando quiera ?? O darme una idea. Porque he mirado videos, y no encuentro como hacerlo, estoy trancado hace mucho ya en eso :-( . Si me ayudas te lo recontra agradeceria.

  5. Paulina on 12 abril, 2015 at 17:54 said:

    Hola
    me podrías decir como hago que un sprite que esta oculto aparezca cuando selecciono de una lista de opciones algo, no se como prograrlo en el editor de bloques. Gracias!

    • Iker on 20 abril, 2015 at 15:45 said:

      Hola Paulina,

      Para hacer eso es bastante sencillo. Simplemente deberás utilizar el bloque “cuando SelectorDeTuLista.DespuésDeSelección ejecutar” y dentro introducir el bloque “poner imagenSprite.visible como” unido a uno de lógica llamado “cierto”.

      Un ejemplo sería así: http://bit.ly/1aKFjB6

      Espero haberte ayudado.

  6. Franco on 16 abril, 2015 at 8:52 said:

    Buenas, quería saber si alguien me puede ayudar estoy haciendo una aplicación y necesitaría saber si alguien me puede explicar como hacer comandos de voz, porque estoy trabajando con el reconocimiento de voz y me esta costando un poco. Hace poco que me inicie en esto y a su vez poco entiendo. Desde ya gracias

    • Iker on 20 abril, 2015 at 16:03 said:

      Hola Franco,

      Para utilizar los comandos de voz es necesario utilizar un elemento de “ReconocimientoDeVoz” que lo puedes obtener en el apartado de “Medios”. Con ese elemento los bloques que te pueden servir son:
      – “llamar ReconocimientoDeVoz.ObtenerTexto”: Te servirá para que capte como texto lo que se diga en ese momento.
      – “cuando ReconocimientoDeVoz.DespuésDeObtenerTexto resultado ejecutar”: Te servirá para realizar alguna acción inmediatamente después de haber captado el sonido.
      – “ReconocimientoDeVoz. Resultado”: Este sería el texto de lo que se ha captado por voz.

      Te dejo aquí un ejemplo: http://bit.ly/1D5ztRy
      Lo único que hacen estos bloques es que al cargar la pantalla se activa el reconocimiento de voz para después mostrar el texto captado en una etiqueta.

      Espero haberte ayudado, de no ser así coméntame qué problemas te surgen y quizás pueda ayudarte.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Post Navigation

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies