destacada_appinventor

Para comenzar a trabajar con App Inventor, en primer lugar, tenemos que acceder a su página web. Una vez ahí, nos darán instrucciones de como configurar un dispositivo Android conectado a la misma red wifi o un emulador. Considero que la mejor forma de realizar este curso, y utilizar App Inventor, es mediante un dispositivo Android conectado mediante Wifi, por lo que se va a explicar este proceso.

Instalación y registro

En primer lugar tenemos que instalar la App Companion, es decir, la aplicación que App Inventor utilizará como soporte para mostrar nuestros proyectos. Para ello hay dos formas, instalando manualmente un apk o a través de Google Play Store. Conviene instalar a través de Play Store, ya que cada vez que se produzca una actualización en la App Companion se descargará automáticamente, por lo que siempre estará actualizado.

Para instalar la aplicación, puedes escanear el código QR de la imagen, o pulsar sobre este link.

A continuación, desde la interfaz web de App Inventor, tendremos que iniciar sesión con nuestra cuenta de Google (Gmail) y aceptar los términos de servicio. Una vez aceptados, entraremos en la interfaz de App Inventor, donde en primer lugar configuramos el idioma para que la interfaz se muestre en Español. Para ello, en el menú situado en la esquina superior derecha, pulsa sobre English y, dentro del menú desplegable, escoge Español. Puedes ver una imagen de dicho menú a continuación:

configurar_español

Creando un nuevo proyecto y conectado con nuestro terminal

Después crearemos nuestro primer proyecto para comenzar con el proceso de conexión. Para ello, pulsamos sobre “Comenzar un proyecto nuevo…” o bien sobre “Proyectos/ Comenzar un proyecto nuevo…” donde nos pedirán introducir el nombre de nuestro proyecto, que en este caso sera: hola_mundo.

nuevo_proyecto

Si se ha creado correctamente el proyecto, aparecerá la interfaz de desarrollo de aplicación de App Inventor, que se divide en Diseñador y bloques. En diseñador realizaremos la interfaz gráfica de usuario, o UI, y en bloques programaremos las acciones que realizará nuestra aplicación.

Una vez que tengas la App companion instalada en tu terminal, abre dicha aplicación y en la página web de App Inventor pulsa sobre conectar y después en AI Companion. Aparecerá un código QR y un código alfanumérico. Dentro de la App puedes escribir el código alfanumérico dentro del cuadro de texto o bien escanear el código QR. Si se produce correctamente la conexión, aparecerá la pantalla de nuestro proyecto que irá actualizándose automáticamente cada vez que incluyamos un nuevo elemento en la interfaz gráfica.

Creando el Hola Mundo

Para crear el Hola mundo, un programa típico en los inicios de todo curso de programación en el que se muestra un mensaje, utilizaremos una etiqueta.

App Inventor se basa en dos “modos” de trabajo, el modo “diseñador” y el modo “bloques”. En el modo diseñador crearemos la interfaz gráfica, donde podremos cambiar nombres, textos, etc. Por el contrario, en el modo “bloques” utilizaremos la interfaz gráfica que hemos generado en el modo “diseñador” para realizar acciones.

Para incluir dicha etiqueta en nuestra interfaz gráfica, busca Etiqueta en el menú Interfaz de Usuario, que se encuentra dentro de Paleta, un “contenedor” donde se almacenan todos los elementos que podemos utilizar.

Cuando hayas localizado Etiqueta, pulsa sobre Etiqueta y arrastralo hasta la interfaz gráfica. Ya estará lista para modificar.

etiqueta

Verás que el menú Componentes ahora muestra Etiqueta1, que es el elemento que acabamos de crear. Según vayamos creando elementos se irán agrupando en este menú. Dentro del menú Propiedades podremos modificar diferentes aspectos relativos a cada elemento creado. En este caso, vamos a modificar el texto por “hola mundo” y la posición del texto la modificamos a centro.

Exportando la aplicación a nuestro terminal

El último paso es exportar la aplicación a nuestro terminal, para ello, en el menú superior pulsamos sobre Generar y después sobre App (Generar código QR para el archivo apk). Después se compilará nuestra aplicación y podremos instalarlo a través de nuestro terminal. Dentro de la App Companion pulsamos sobre scan QR code, o escanear código QR, y automáticamente nos aparecerá un dialogo para instalar la aplicación.

En caso de que no hayas instalado un apk con anterioridad, aparecerá un mensaje indicando que no se pueden instalar aplicaciones obtenidas de fuentes desconocidas. Para solucionar este problema hay que activar dentro de los ajustes del terminal la opción “Permitir la instalación de aplicaciones de origen desconocido”. Una vez activado, podemos repetir el proceso e instalar la aplicación.

¡Hasta la próxima!

16 comentarios

  1. Alberto Valero

    ¡Muy bueno! Me pongo ahora mismo

  2. Hola. Muy buenas. Interesado en el curso, pero no me deja instalar la aplicación. Me pide un código de 6 números y no soy capaz de hacerlo funcionar. Muchas gracias.

    1. Luis Díaz

      Hola Antonio,

      Cuando dices que no te deja instalar la aplicación, ¿quieres decir que no te deja instalar la aplicación que has creado o la aplicación AI2 Companion desde Google Play?

      1. Hola Luis.
        Nada, no he dicho nada. Está perfectamente explicado y cuando me he centrado y he ido poco a poco, todo ha ido tal y como me indicabas.
        Un saludo y muchas gracias.

        1. Luis Díaz

          Gracias por el comentario Antonio.

          ¡Un saludo!

          1. Luis

            Me ha pasado lo mismo que a Antonio. He estado 10 minutos buscan el código.

            Te sugiero cambiar la frase:
            “A continuación, desde la interfaz web de App Inventor, tendremos que…”
            por “A continuación, desde un navegador web entra en la dirección http://ai2.appinventor.mit.edu/. Aquí encontrarás la interfaz web de App Inventor, tendremos que…”

            He hecho algunos cursos y se lo que se agradece que se comenten las partes donde nos enganchamos. Muchas gracias por compartir este curso tan interesante.

            1. Luis Díaz

              Hola,

              Muchas gracias por tu sugerencia. Ya he modificado el texto para enlazar a la página.

              Un saludo.

              1. Luis Díaz

                Hola, muchas gracias por reportar el fallo.

                Ya está arreglado.

                ¡Saludos!

  3. Genial! Ahora mismo me pongo manos a la obra!
    Aunque no se de donde voy a sacar tiempo para ponerme a hacer todos los cursos que tenéis……
    Lo único que os falta es un Podcast!!!
    Gracias a bq!

  4. Muy bien explicado la verdad!!!
    Vamos a seguir con el curso ^^

  5. Hola tengo un problema:

    Me da un error (error 1101 que indica que no obtiene respuesta con la url especificada, al leer el codigo qr generado en la web en la prueba de hola mundo

    Tengo quitado el bloqueo de aplicaciones de terceros

    Gracias de antemano un saludo.

    1. sgruben

      Hola Amador,

      ¿Puedes probar con otra aplicación que lea QR?. Puede ser cosa de que la aplicación no enlace correctamente el QR con el enlace a descargar.

      Saludos,

  6. Hola Luis. Un curso super interesante. Muchas gracias. Tengo un problema, al introducir el código que me da la web de App inventor, me da error de red y me pide que lo vuelva a intentar. Lo he intentado muchas veces y nada. Se que se comunican porque cuando pulso el botón de conectar con código de la aplicación, desaparece la ventana de la web donde me dice el código. Lo estoy intentando con una tablet bq, será por eso? debería hacerlo desde un móvil? Un saludo cordial y muchas gracias.

    1. Luis Díaz

      Hola Angel Mari,

      He estado probando y tengo también problemas para conectar con una tablet a App Inventor. Quizá exista algún tipo de bug, aunque anteriormente no he tenido ningún problema.

      Un saludo.

  7. Pingback: Instalando App Inventor, primeros pasos y &ldqu...

Los comentarios están cerrados.