Introducción
App Inventor consta de 2 partes que se comunican entre sí y que funcionan en el navegador:
1. Diseñador
2. Editor de bloques
Para alternar entre ellas tan sólo es necesario seleccionar el botón correspondiente en la parte superior derecha de la página:
Los bloques se agrupan en 3 grupos:
1. Built-in. Contiene los elementos básicos para dar comportamiento a tu aplicación.
2. Screen1. Contiene los bloques correspondientes a los componentes que has incluido en la página de "Diseñador". Si utilizas varias pantallas, encontrarás aquí los bloques correspondientes a la pantalla que tengas seleccionada en el desplegable “Screen” del menú superior:
3. Any Component. Contiene bloques con funcionalidades más avanzadas.
1. Diseñador
2. Editor de bloques
Para alternar entre ellas tan sólo es necesario seleccionar el botón correspondiente en la parte superior derecha de la página:
DISEÑADOR
La página de "Diseñador" es el lugar donde seleccionas los componentes de tu app y diseñas la interfaz. Está compuesto por las siguientes áreas:
EDITOR DE BLOQUES
El editor de bloques es el lugar donde defines un comportamiento de la app. Está compuesto por las siguientes áreas:
Los bloques se agrupan en 3 grupos:
1. Built-in. Contiene los elementos básicos para dar comportamiento a tu aplicación.
2. Screen1. Contiene los bloques correspondientes a los componentes que has incluido en la página de "Diseñador". Si utilizas varias pantallas, encontrarás aquí los bloques correspondientes a la pantalla que tengas seleccionada en el desplegable “Screen” del menú superior:
3. Any Component. Contiene bloques con funcionalidades más avanzadas.
Tres pasos y tres ventanas
Para
programar nuestras propias aplicaciones con Appinventor siempre vamos a
seguir tres pasos y en cada paso vamos a usar una ventana distinta.
Estos son los pasos:
1 Primero diseñamos nuestra aplicación utilizando la ventana del Diseñador de App Inventor (Designer)
Aquí incluimos los objetos (componentes) que formarán parte de nuestra aplicación.
2 Después programamos la aplicación para que haga lo que queremos usando el Editor de bloques (Blocks)
Desde aquí definimos cómo la aplicación responde a los usuarios y a los eventos externos (el comportamiento de la aplicación).
3 Por último probamos el resultado en la pantalla del emulador, móvil o tablet para corregir los errores.
Para poder trabajar correctamente debemos de tener el navegador con la web de App Inventor abierta, donde cambiaremos entre el Diseñador y el Editor de bloques. También debemos tener conectado nuestro dispositivo (móvil o tablet) o el emulador virtual, que nos permite simular cómo se vería nuestro programa aunque no tengamos ningún dispositivo conectado.
En el menú superior, tenemos un botón llamado "Projects". Al desplegar sus opciones, podemos acceder a "Mis proyectos" (My projects), crear un nuevo proyecto o abrir un proyecto guardado previamente en el ordenador.
Pulsa en Project - Start new project… y dale un nombre a tu proyecto, por ejemplo "hola_mundo"
Puedes usar números y letras pero no puedes usar espacios. Cuando termines entrarás automáticamente en la pantalla del Diseñador.
1 Primero diseñamos nuestra aplicación utilizando la ventana del Diseñador de App Inventor (Designer)
Aquí incluimos los objetos (componentes) que formarán parte de nuestra aplicación.
2 Después programamos la aplicación para que haga lo que queremos usando el Editor de bloques (Blocks)
Desde aquí definimos cómo la aplicación responde a los usuarios y a los eventos externos (el comportamiento de la aplicación).
3 Por último probamos el resultado en la pantalla del emulador, móvil o tablet para corregir los errores.
Para poder trabajar correctamente debemos de tener el navegador con la web de App Inventor abierta, donde cambiaremos entre el Diseñador y el Editor de bloques. También debemos tener conectado nuestro dispositivo (móvil o tablet) o el emulador virtual, que nos permite simular cómo se vería nuestro programa aunque no tengamos ningún dispositivo conectado.
En el menú superior, tenemos un botón llamado "Projects". Al desplegar sus opciones, podemos acceder a "Mis proyectos" (My projects), crear un nuevo proyecto o abrir un proyecto guardado previamente en el ordenador.
Pulsa en Project - Start new project… y dale un nombre a tu proyecto, por ejemplo "hola_mundo"
Puedes usar números y letras pero no puedes usar espacios. Cuando termines entrarás automáticamente en la pantalla del Diseñador.
El diseñador de App Inventor
El
siguiente paso es diseñar la pantalla principal de nuestro programa
(interface de usuario) y elegir los componentes que necesitamos para que
funcione.
Los componentes son los elementos básicos que utilizamos para hacer programas con App Inventor. Son como los ingredientes de una receta. Cada componente hace algo distinto: mostrar un texto en la pantalla, un botón, una imagen, etc. Otros componentes controlan el sensor de movimientos del teléfono o el GPS. Puedes ver una lista de todos los componentes que puedes usar en tus aplicaciones.
Podemos usar varias veces el mismo componente en nuestro programas, por ejemplo, el componente botón (Button) podemos usarlo tantas veces como botones queramos poner en nuestro programa. Para poder distinguirlos fácilmente usaremos nombres distintos, por ejemplo: boton1, boton2, boton3, etc. De esta forma podemos dar instrucciones concretas a cada componente sin confundirnos. Ahora veremos cómo.
Algunos componentes tiene también propiedades que te permiten cambiar cómo se ve el componente en la pantalla o cómo funciona dentro de tu programa. Por ejemplo, el tamaño, el color, etc. Las propiedades de los componentes aparecen aquí:
Los componentes son los elementos básicos que utilizamos para hacer programas con App Inventor. Son como los ingredientes de una receta. Cada componente hace algo distinto: mostrar un texto en la pantalla, un botón, una imagen, etc. Otros componentes controlan el sensor de movimientos del teléfono o el GPS. Puedes ver una lista de todos los componentes que puedes usar en tus aplicaciones.
Podemos usar varias veces el mismo componente en nuestro programas, por ejemplo, el componente botón (Button) podemos usarlo tantas veces como botones queramos poner en nuestro programa. Para poder distinguirlos fácilmente usaremos nombres distintos, por ejemplo: boton1, boton2, boton3, etc. De esta forma podemos dar instrucciones concretas a cada componente sin confundirnos. Ahora veremos cómo.
Algunos componentes tiene también propiedades que te permiten cambiar cómo se ve el componente en la pantalla o cómo funciona dentro de tu programa. Por ejemplo, el tamaño, el color, etc. Las propiedades de los componentes aparecen aquí:
¡Hola mundo!
1 Antes de empezar a añadir componentes a nuestro programa, conecta tu dispositivo o emulador desde aquí:
Si tienes algún problema para conectarte con tu dispositivo o emulador consulta el primer apartado de esta guía "Instalación de App Inventor"
2 Desde la Paleta - User interface, coge el componente Label (etiqueta) y arrástralo al visor (Viewer).
En este caso el componente Label tiene una propiedad llamada Text que contiene el texto que queremos que se muestre en la pantalla.
3 Cambia el texto y escribe "Hola mundo".
4 Cambia también el nombre del componente aquí:
y escribe, por ejemplo, "mi_etiqueta"
5 Para cambiar el color del texto tienes otra propiedad llamada TextColor. Prueba a cambiar el color.
Si todo ha funcionado correctamente deberías de ver en tu emulador o en tu dispositivo el texto que has puesto en tu programa. Recuerda que cada vez que hagas un cambio este aparecerá automáticamente en tu dispositivo. ¿Funciona?
6 Desde la Paleta - User interface, coge el componente button (botón) y arrástralo al visor (Viewer).
7 Cambia el nombre del botón y escribe, por ejemplo, "mi_boton":
8 Cambia el texto del botón (text en sus propiedades) y escribe, por ejemplo,"OK":
9 Para añadir una imagen a nuestro programa utilizamos el componente Image (imagen) dentro de la Paleta - User interface. Arrastra este componente y colócalo en primer lugar, por encima de los otros dos componentes que ya tenemos.
10 En las propiedades del componente image (imagen) selecciona el campo Picture (imagen) y después selecciona Upload File (subir archivo).
También puedes subir una imagen nueva directamente a la librería de imágenes y sonidos (Media) de tu programa aquí:
Estas imágenes que subas a la librería aparecerán en la lista de imágenes disponibles para que las puedas asignar a otros componentes aquí:
Cuando subas la imagen a AppInventor verás que aparece en la pantalla de tu dispositivo.
11 Puedes cambiar el tamaño de la imagen jugando con los valores de ancho (Width) y alto (Height) en sus propiedades. Procura usar una imagen pequeña que no ocupe toda la pantalla.
12 Para añadir un sonido seguimos los mismos pasos que al añadir una imagen. En este caso el componente se llama Sound (Sonido) y se encuentra dentro de la paleta Media. Coge este componente y arrástralo a tu programa igual que hemos hecho con el componente imagen.
Verás que el componente de sonido no es visible en la pantalla de tu dispositivo pero aparece aquí:
Al seleccionarlo verás en sus propiedades un campo origen (Source). Si seleccionas este campo puedes elegir el archivo de sonido que quieres usar o subir uno nuevo desde tu ordenador aquí:
Aquí puedes encontrar sonidos para tu
Ya has visto lo fácil que es añadir componentes usando el diseñador de App Inventor. El siguiente paso es programar lo que queremos que haga nuestra aplicación. En este caso queremos que al pulsar el botón cambie el texto que teníamos al principio y suene un sonido.
Para hacer esto vamos a usar el editor de bloques.
Si tienes algún problema para conectarte con tu dispositivo o emulador consulta el primer apartado de esta guía "Instalación de App Inventor"
2 Desde la Paleta - User interface, coge el componente Label (etiqueta) y arrástralo al visor (Viewer).
En este caso el componente Label tiene una propiedad llamada Text que contiene el texto que queremos que se muestre en la pantalla.
3 Cambia el texto y escribe "Hola mundo".
4 Cambia también el nombre del componente aquí:
y escribe, por ejemplo, "mi_etiqueta"
5 Para cambiar el color del texto tienes otra propiedad llamada TextColor. Prueba a cambiar el color.
Si todo ha funcionado correctamente deberías de ver en tu emulador o en tu dispositivo el texto que has puesto en tu programa. Recuerda que cada vez que hagas un cambio este aparecerá automáticamente en tu dispositivo. ¿Funciona?
6 Desde la Paleta - User interface, coge el componente button (botón) y arrástralo al visor (Viewer).
7 Cambia el nombre del botón y escribe, por ejemplo, "mi_boton":
8 Cambia el texto del botón (text en sus propiedades) y escribe, por ejemplo,"OK":
9 Para añadir una imagen a nuestro programa utilizamos el componente Image (imagen) dentro de la Paleta - User interface. Arrastra este componente y colócalo en primer lugar, por encima de los otros dos componentes que ya tenemos.
10 En las propiedades del componente image (imagen) selecciona el campo Picture (imagen) y después selecciona Upload File (subir archivo).
TRUCO
Tienes imágenes y sonidos para descargar y usarlos en tus programas
Estas imágenes tendrás que descargarlas a tu
ordenador para poder usarlas. Coge cualquier imagen que quieras,
descárgalas a tu ordenador y después úsalas en AppInventor como te hemos
indicado.
También puedes subir una imagen nueva directamente a la librería de imágenes y sonidos (Media) de tu programa aquí:
Estas imágenes que subas a la librería aparecerán en la lista de imágenes disponibles para que las puedas asignar a otros componentes aquí:
11 Puedes cambiar el tamaño de la imagen jugando con los valores de ancho (Width) y alto (Height) en sus propiedades. Procura usar una imagen pequeña que no ocupe toda la pantalla.
12 Para añadir un sonido seguimos los mismos pasos que al añadir una imagen. En este caso el componente se llama Sound (Sonido) y se encuentra dentro de la paleta Media. Coge este componente y arrástralo a tu programa igual que hemos hecho con el componente imagen.
Verás que el componente de sonido no es visible en la pantalla de tu dispositivo pero aparece aquí:
Al seleccionarlo verás en sus propiedades un campo origen (Source). Si seleccionas este campo puedes elegir el archivo de sonido que quieres usar o subir uno nuevo desde tu ordenador aquí:
Aquí puedes encontrar sonidos para tu
Ya has visto lo fácil que es añadir componentes usando el diseñador de App Inventor. El siguiente paso es programar lo que queremos que haga nuestra aplicación. En este caso queremos que al pulsar el botón cambie el texto que teníamos al principio y suene un sonido.
Para hacer esto vamos a usar el editor de bloques.
El editor de bloques
La
ventana del editor de bloques está dividida en dos partes. A la
izquierda verás todos los bloques que podemos usar en nuestros programas
divididos en categorías y a la derecha un espacio en blanco a donde
arrastrar los bloques que queremos usar.
Hay tres categorías de bloques: La categoría Screen1, que
corresponde a la pantalla principal de tu programa, incluye todos los
componentes que antes hemos añadido a nuestra aplicación desde el
diseñador. Ahí verás los componentes Image1, mi_etiqueta, mi_boton y
Sound1. No olvides que esta lista cambiará en función de los componentes
que uses en el Diseñador por cada nueva aplicación que hagas.
Los componentes de esta lista tendrán el nombre que les
hayamos puesto desde el Diseñador, por ejemplo: mi_boton y mi_etiqueta.
De lo contario App Inventor les asigna un nombre por defecto que nos
permite identificar el tipo de componente, por ejemplo:
label1, textbox2, imagen1, etc.
Ya hemos visto que cada componente que usamos en el
Diseñador sirve para hacer cosas distintas. Para programar (dar
instrucciones) lo que queremos que haga cada componente, usamos bloques.
Imagina que cada bloque es una orden que le das al componente para que
haga algo en concreto. Por ejemplo, en el componente Camera (cámara)
tenemos un bloque para hacer una foto (TakePicture), en el componente
etiqueta (Label) tenemos un bloque para cambiar el color del texto
(TextColor), etc.
Cada bloque representa una acción y juntando varios
bloques creamos una secuencia. Verás que los bloques se parecen a piezas
de un puzle, de esta forma puedes unir una pieza detrás de otra sin
riesgo a equivocarte.
Los bloques se identifican por el nombre del componente,
por ejemplo: Camara1, seguido de un punto y el nombre del bloque (por
ejemplo: Camara1.TakePicture, Label2.FontSize, etc).
La categoría de bloques llamada Built-in corresponde a
bloques que siempre están disponibles para cualquier aplicación y que te
permiten controlar tu programa, hacer operaciones matemáticas, trabajar
con cadenas de texto, etc.
Tu primer programa
1 Dentro
de Screen1, selecciona el componente mi_boton. Verás que se despliega
una ventana con todas las acciones y propiedades de este componente. Son
los bloques que pertenecen a este componente (mi_boton) por ser un
componente del tipo botón (button). Más adelante veremos para qué vale
cada uno de estos elementos. De momento, fíjate que cada uno de estos
bloques se llama igual que el nombre que hayamos usado para este
componente en el Diseñador seguido de un punto y del nombre de la acción
o de la propiedad correspondiente. En este caso, los bloques tienen el
nombre mi_boton:
2 El primer bloque de la lista de color marrón es "mi_boton.click". Los bloques de color marrón controlan los eventos que se producen en tu móvil o tablet. Por ejemplo, cuando pulsas un botón, cuando mueves el teléfono, cuando recibes un mensaje, etc. Verás que estos bloques tienen escrito "when...do" (cuando...hacer) o dicho de otro modo, "cuando pase esto... haz esto...".
En este caso este bloque marrón mi_boton.Click se activa si este botón en concreto ha sido pulsado y, de ser así, activa a su vez los bloques que se encuentren dentro de él. Dicho de otro modo, "cuando este botón se pulse... haz esto". Vamos a verlo con el siguiente ejemplo:
3 Selecciona este bloque y colócalo en la pantalla donde te resulte más cómodo.
4 Selecciona ahora el componente mi_etiqueta, dentro de la categoría Screen1, que corresponde al componente etiqueta que hemos colocado desde el diseñador. Verás que se despliega nuevamente una ventana con todos los bloques que tiene este componente.
Las propiedades de este componente aparecen de color verde claro. Por ejemplo, el tamaño de la fuente se encuentra guardado en el bloque mi_etiqueta.FontSize, el color del texto en el bloque mi_etiqueta.TextColor, el propio texto de la etiqueta dentro del bloque mi_etiqueta.Text.
Para cada propiedad (bloques de color verde claro) existe otro bloque complementario de color verde oscuro para cambiar el valor de esa propiedad. Estos bloques color verde oscuro que nos permiten cambiar el valor de las propiedades comienzan con la palabra "set" (establecer/poner) y terminan en "to".
Por ejemplo, el texto de nuestra etiqueta mi_etiqueta (recuerda que habíamos puesto "Hola mundo") se encuentra en el bloque verde claro (propiedad) mi_etiqueta.Text . Para cambiar este texto, tendríamos que usar el bloque verde oscuro complementario "set mi_etiqueta.Text to" y poner el nuevo texto. Vamos a verlo siguiendo con nuestro ejemplo.
5 Busca el bloque "set mi_etiqueta.Text to" y colócalo dentro del bloque marrón (evento) mi_boton.Click así:
Verás que este bloque tiene una marca a la derecha que indica que este bloque espera a su vez otro bloque con el texto que quieres usar.
6 Pincha sobre la categoría de bloques Built-in y dentro de ella, en la categoría Text. El primer bloque se llama " ". Arrástralo y júntalo por la derecha al bloque verde oscuro "set mi_etiqueta.Text" de tu programa así:
7 Si pinchas en el hueco que hay entre las comillas, puedes cambiar el texto. Así:
8 Cambia el texto por "¡Mi primer programa!"
9 Vuelve a la categoría Screen1 y dentro del componente mi_etiqueta coge el bloque "set mi_etiqueta.TextColor to" y colócalo dentro del bloque marrón mi_boton.Click de la misma forma que hemos hecho antes.
10 Ahora dentro de la categoría Built-in y dentro de Colors (colores) selecciona el bloque con el color que más te guste y arrástralo a tu programa para unirlo por la derecha al bloque verde oscuro "set mi_etiqueta.TextColor to".
11 Por último, vuelve a la categoría Screen1 y selecciona el componente Sound1 que corresponde con el sonido que hemos añadido antes desde el Diseñador. Verás un bloque morado que se llama "call Sound1.Play" y que sirve para que tu programa toque el sonido. Arrástralo dentro del bloque marrón junto con los otros bloques.
Tu programa debería de quedar así:
Si todo ha funcionado correctamente deberías de ver los resultados en tu dispositivo. Compruébalo pulsando el botón.
Enhorabuena, ¡acabas de programar tu primera aplicación! No olvides guardarlo pulsando aquí:
Puedes reiniciar tu programa, volviendo a conectar con tu dispositivo así:
2 El primer bloque de la lista de color marrón es "mi_boton.click". Los bloques de color marrón controlan los eventos que se producen en tu móvil o tablet. Por ejemplo, cuando pulsas un botón, cuando mueves el teléfono, cuando recibes un mensaje, etc. Verás que estos bloques tienen escrito "when...do" (cuando...hacer) o dicho de otro modo, "cuando pase esto... haz esto...".
En este caso este bloque marrón mi_boton.Click se activa si este botón en concreto ha sido pulsado y, de ser así, activa a su vez los bloques que se encuentren dentro de él. Dicho de otro modo, "cuando este botón se pulse... haz esto". Vamos a verlo con el siguiente ejemplo:
3 Selecciona este bloque y colócalo en la pantalla donde te resulte más cómodo.
4 Selecciona ahora el componente mi_etiqueta, dentro de la categoría Screen1, que corresponde al componente etiqueta que hemos colocado desde el diseñador. Verás que se despliega nuevamente una ventana con todos los bloques que tiene este componente.
Las propiedades de este componente aparecen de color verde claro. Por ejemplo, el tamaño de la fuente se encuentra guardado en el bloque mi_etiqueta.FontSize, el color del texto en el bloque mi_etiqueta.TextColor, el propio texto de la etiqueta dentro del bloque mi_etiqueta.Text.
Para cada propiedad (bloques de color verde claro) existe otro bloque complementario de color verde oscuro para cambiar el valor de esa propiedad. Estos bloques color verde oscuro que nos permiten cambiar el valor de las propiedades comienzan con la palabra "set" (establecer/poner) y terminan en "to".
Por ejemplo, el texto de nuestra etiqueta mi_etiqueta (recuerda que habíamos puesto "Hola mundo") se encuentra en el bloque verde claro (propiedad) mi_etiqueta.Text . Para cambiar este texto, tendríamos que usar el bloque verde oscuro complementario "set mi_etiqueta.Text to" y poner el nuevo texto. Vamos a verlo siguiendo con nuestro ejemplo.
5 Busca el bloque "set mi_etiqueta.Text to" y colócalo dentro del bloque marrón (evento) mi_boton.Click así:
Verás que este bloque tiene una marca a la derecha que indica que este bloque espera a su vez otro bloque con el texto que quieres usar.
6 Pincha sobre la categoría de bloques Built-in y dentro de ella, en la categoría Text. El primer bloque se llama " ". Arrástralo y júntalo por la derecha al bloque verde oscuro "set mi_etiqueta.Text" de tu programa así:
7 Si pinchas en el hueco que hay entre las comillas, puedes cambiar el texto. Así:
8 Cambia el texto por "¡Mi primer programa!"
9 Vuelve a la categoría Screen1 y dentro del componente mi_etiqueta coge el bloque "set mi_etiqueta.TextColor to" y colócalo dentro del bloque marrón mi_boton.Click de la misma forma que hemos hecho antes.
10 Ahora dentro de la categoría Built-in y dentro de Colors (colores) selecciona el bloque con el color que más te guste y arrástralo a tu programa para unirlo por la derecha al bloque verde oscuro "set mi_etiqueta.TextColor to".
11 Por último, vuelve a la categoría Screen1 y selecciona el componente Sound1 que corresponde con el sonido que hemos añadido antes desde el Diseñador. Verás un bloque morado que se llama "call Sound1.Play" y que sirve para que tu programa toque el sonido. Arrástralo dentro del bloque marrón junto con los otros bloques.
Tu programa debería de quedar así:
Si todo ha funcionado correctamente deberías de ver los resultados en tu dispositivo. Compruébalo pulsando el botón.
Enhorabuena, ¡acabas de programar tu primera aplicación! No olvides guardarlo pulsando aquí:
Puedes reiniciar tu programa, volviendo a conectar con tu dispositivo así:
Instalando tus aplicaciones en el móvil o tablet
Hasta
ahora tu programa funciona porque tu móvil o tablet está conectado a
App Inventor por cable USB o Wifi. Lo que vamos a hacer ahora es
instalar tu programa en tu dispositivo para que funcione como una
aplicación más sin necesidad de que estemos conectados a App Inventor.
Para preparar nuestro programa para instalarlo en el móvil o tablet tenemos dos opciones.
1 La primera consiste en instalar la aplicación escaneando directamente un código QR que descargará la app en formato .apk a tu dispositivo Android. Esta opción se llama "Provide QR Code for .apk" (generar código QR para .apk) y puedes hacerlo ahora mismo pulsando aquí:
Espera a que se complete la generación del código QR:
Aparecerá en una ventana como esta y sólo tendrás que escanearlo con una aplicación para escanear códigos QR que tendrás que tener instalada previamente en tu dispositivo Android:
NOTA: Ten en cuenta que este código QR tiene una validez de 2 horas desde que lo generas.
Cuando termine de instalarse, ve a la carpeta de descargas de tu dispositivo (Download) y encontrarás el archivo “hola_mundo.apk”.
Pincha encima y, si te pregunta con qué aplicación abrirlo, elige “Instalador de paquetes”. Probablemente no te permita la instalación debido a que tu dispositivo no esté configurado para instalar aplicaciones externas. Para resolverlo, ve a Ajustes - Aplicaciones y activa la opción “Orígenes desconocidos” para permitir la instalación de aplicaciones distintas a las que se encuentran en Play Store.
Una vez instalada, encontrarás tu primera aplicación Android entre el resto de aplicaciones de tu dispositivo móvil, con un icono de Android verde y azul.
2 La segunda opción se llama "Save .apk to my computer" (guardar .apk a mi ordenador) y te permite descargar tu aplicación a tu ordenador en un formato llamado APK (Android Application Package) que es el mismo que usa cualquier otro programa para Android que te instalas desde Google Play Store.
Espera a que se genere el paquete con tu aplicación:
Encontrarás el archivo en la carpeta de Descargas habitual de tu ordenador.
Cuando guardas tu programa en formato APK puedes compartirlo por email o como prefieras para que otras personas puedan instalarlo en sus propios dispositivos.
Recuerda que cada vez que hagas cambios en tu programa y quieras poder usarlo sin estar conectado a App Inventor tendrás que instalarlo de nuevo en tu teléfono o descargar una nueva copia en formato APK.
Si por alguna razón los cambios que haces parece que no se actualizan en la aplicación de tu dispositivo, prueba a cerrar tu navegador, vuelve a abrir App Inventor y por último instala de nuevo la aplicación en tu dispositivo. Puede que la memoria caché de tu navegador esté causando problemas y de esta manera se soluciona.
Para preparar nuestro programa para instalarlo en el móvil o tablet tenemos dos opciones.
1 La primera consiste en instalar la aplicación escaneando directamente un código QR que descargará la app en formato .apk a tu dispositivo Android. Esta opción se llama "Provide QR Code for .apk" (generar código QR para .apk) y puedes hacerlo ahora mismo pulsando aquí:
Espera a que se complete la generación del código QR:
Aparecerá en una ventana como esta y sólo tendrás que escanearlo con una aplicación para escanear códigos QR que tendrás que tener instalada previamente en tu dispositivo Android:
NOTA: Ten en cuenta que este código QR tiene una validez de 2 horas desde que lo generas.
Cuando termine de instalarse, ve a la carpeta de descargas de tu dispositivo (Download) y encontrarás el archivo “hola_mundo.apk”.
Pincha encima y, si te pregunta con qué aplicación abrirlo, elige “Instalador de paquetes”. Probablemente no te permita la instalación debido a que tu dispositivo no esté configurado para instalar aplicaciones externas. Para resolverlo, ve a Ajustes - Aplicaciones y activa la opción “Orígenes desconocidos” para permitir la instalación de aplicaciones distintas a las que se encuentran en Play Store.
Una vez instalada, encontrarás tu primera aplicación Android entre el resto de aplicaciones de tu dispositivo móvil, con un icono de Android verde y azul.
2 La segunda opción se llama "Save .apk to my computer" (guardar .apk a mi ordenador) y te permite descargar tu aplicación a tu ordenador en un formato llamado APK (Android Application Package) que es el mismo que usa cualquier otro programa para Android que te instalas desde Google Play Store.
Espera a que se genere el paquete con tu aplicación:
Encontrarás el archivo en la carpeta de Descargas habitual de tu ordenador.
Cuando guardas tu programa en formato APK puedes compartirlo por email o como prefieras para que otras personas puedan instalarlo en sus propios dispositivos.
Recuerda que cada vez que hagas cambios en tu programa y quieras poder usarlo sin estar conectado a App Inventor tendrás que instalarlo de nuevo en tu teléfono o descargar una nueva copia en formato APK.
Si por alguna razón los cambios que haces parece que no se actualizan en la aplicación de tu dispositivo, prueba a cerrar tu navegador, vuelve a abrir App Inventor y por último instala de nuevo la aplicación en tu dispositivo. Puede que la memoria caché de tu navegador esté causando problemas y de esta manera se soluciona.
En resumen
Recuerda
que el primer paso para programar en App Inventor es diseñar tu
programa en el Diseñador y añadir los componentes que vas a necesitar.
Puedes cambiar el nombre de los componentes para recordarlos mejor.
Después desde el Editor de bloques puedes programar lo que quieres que
haga tu programa usando los bloques que tiene cada componente. Siempre
puedes volver al Diseñador y añadir o quitar componentes según lo
necesites. Recuerda también que mientras estás en el Diseñador o en el
Editor de bloques cada cambio que hagas aparecerá automáticamente en tu
dispositivo o en el emulador, de esta manera es muy fácil y rápido
probar tus programas.
Los programas que haces en App Inventor pueden tener dos tipos de componentes: visibles y no visibles.
1 Los componentes visibles de la aplicación son los que se pueden ver cuando la aplicación está funcionando; cosas como botones, cuadros de texto y etiquetas. Estos componentes forman parte de la interfaz de usuario de la aplicación.
2 Los componentes no visibles son aquellos que no se pueden ver y que no forman parte de la interface de usuario. Estos componentes nos permiten usar funciones de nuestro dispositivo, por ejemplo, el componente de mensajes de texto envía y recibe mensajes SMS, el componente LocationSensor determina la ubicación del dispositivo, etc. Ambos componentes, visibles y no visibles, pueden tener propiedades. Las propiedades nos permiten guardar información sobre el componente, por ejemplo, los componentes visibles tienen propiedades como la anchura, altura y alineación que juntos definen la apariencia del componente.
Los programas que haces en App Inventor pueden tener dos tipos de componentes: visibles y no visibles.
1 Los componentes visibles de la aplicación son los que se pueden ver cuando la aplicación está funcionando; cosas como botones, cuadros de texto y etiquetas. Estos componentes forman parte de la interfaz de usuario de la aplicación.
2 Los componentes no visibles son aquellos que no se pueden ver y que no forman parte de la interface de usuario. Estos componentes nos permiten usar funciones de nuestro dispositivo, por ejemplo, el componente de mensajes de texto envía y recibe mensajes SMS, el componente LocationSensor determina la ubicación del dispositivo, etc. Ambos componentes, visibles y no visibles, pueden tener propiedades. Las propiedades nos permiten guardar información sobre el componente, por ejemplo, los componentes visibles tienen propiedades como la anchura, altura y alineación que juntos definen la apariencia del componente.
Información a tener en cuenta
App
Inventor 2 es una plataforma para el desarrollo de aplicaciones sobre
Android que está en versión beta. Esto significa que está en constante
evolución y que puede presentar algunos problemas que se irán
corrigiendo en el futuro. El material de este curso está diseñado con la
versión 2 de AppInventor. Asegúrate de que es esta la versión que estás
usando.
También es posible que se presenten problemas dependiendo de la versión de Android del dispositivo que tengas, especialmente con las más antiguas. Si te encuentras con que tus programas no funcionan como deberían sin razón aparente primero vuelve a conectar tu dispositivo con AppInventor aquí.
Generalmente reseteando la conexión se solucionan muchos problemas. Si no es así, intenta volver a arrancar tu navegador o incluso el ordenador. Si el problema no se soluciona, deberías comprobar la versión de Android de tu dispositivo y actualizar a la última versión si eso es posible.
También es posible que se presenten problemas dependiendo de la versión de Android del dispositivo que tengas, especialmente con las más antiguas. Si te encuentras con que tus programas no funcionan como deberían sin razón aparente primero vuelve a conectar tu dispositivo con AppInventor aquí.
Generalmente reseteando la conexión se solucionan muchos problemas. Si no es así, intenta volver a arrancar tu navegador o incluso el ordenador. Si el problema no se soluciona, deberías comprobar la versión de Android de tu dispositivo y actualizar a la última versión si eso es posible.
