1 HolaRonronea

App Inventor

Práctica 1

Tu primera aplicación

Vamos a crear la primera aplicación con nuestro teléfono Android:
HolaRonronea
Esta página te ayudará a empezar la construcción de tu primera
aplicación: Una imagen de un gatito que maúlla cuando la tocamos.
Cuando termines el desarrollo de Hola Ronronea estarás listo para
diseñar y construir aplicaciones por tu cuenta. Antes de empezar,
asegúratede haber configurado correctamente el equipo.
A medida que desarrollemos Hola Ronronea, aprenderás cómo utilizar las
tres herramientas fundamentales de trabajo de App Inventor:





El Diseñador (designer), el lugar donde se diseña la
aplicación. Se ejecuta en el navegador web.
El Editor de bloques (blocks editor), aplicación Java donde
configuramos el comportamiento de nuestro desarrollo. Esuna
aplicación independiente, que corre en una ventana diferente a la
instancia del navegador.
El teléfono, conectado al ordenador mediante un cable USB. Puede ser sustituido por
el Emulador.

Para construir Hola Ronronea tendrás una imagen de un gatito y el sonido de un
maullido. Descargar estos archivos al ordenador:



foto del gatito
miau sonido

Iniciar el diseño y crear un nuevo proyecto
Enel navegador Web, apunta a la página web de App Inventor
en http://appinventor.mit.edu/explore/ .Regístrate haciendo clic en :”Create”.

IES Carreño Miranda

⎼1⎼

App Inventor

Práctica 1

Crear un nuevo proyecto
Una vez registrado la página de inicio será parecida a esta:

1. Haz clic en Comnenzar un proyecto nuevo en el lado izquierdo, cerca de la parte
superior de la página.
2. Introduce elnombre del proyecto HolaRonronea (una sola palabra, sin espacios) en el
cuadro de diálogo que aparece, clic en Aceptar.
El navegador abrirá el Diseñador, el lugar donde se seleccionan los componentes para su
aplicación, y debe tener este aspecto:

Seleccione los componentes para el diseño de su aplicación
Los componentes de App Inventor se encuentran en el lado izquierdo de la pantalla de diseño,bajo el título “Paleta (Palette) . Los componentes son los elementos básicos que se utilizan
para hacer las aplicaciones en el teléfono Android. Son como los ingredientes de una
receta. Algunos componentes son muy simples, como el componente Etiqueta (Label), que sólo
muestra un texto en la pantalla, o el componente Botón (Button) que mostrará un botón en la
pantalla del teléfono que al ser pulsadoiniciará una acción. Otros componentes son más
elaborados: el componente Canvas es un lienzo de dibujo que puede almacenar imágenes fijas
o animaciones, el AccelerometerSensor es un sensor de movimiento que funciona como un
mando de Wii y detecta cuando movemos o agitamos el teléfono, los componentes que crean o
envían mensajes de texto, los componentes que reproducen música y video, componentescapaces de obtener información de sitios Web, y así sucesivamente.
Para utilizar un componente en tu aplicación, tendrás que hacer clic y arrastrarlo sobre el visor

IES Carreño Miranda

⎼2⎼

App Inventor

Práctica 1

(Viewer), en el centro de la pantalla de diseño. Cuando añadas un componente en el visor,
también aparece en la lista de componentes (Components), a la derecha del visor..
Loscomponentes tienen propiedades, que se presentan en la parte derecha de la pantalla
(Properties) y que se pueden ajustar para cambiar la forma en que el componente interactuará
con la aplicación. Para ver y cambiar las propiedades de un componente, primero debes
seleccionar el componente deseado en la lista de componentes.

Pasos a seguir para seleccionar los componentes y propiedades de
configuraciónQueremos que HolaRonronea tenga un botón con la propiedad de imagen ajustada al archivo
que has descargado antes, con la imagen del gatito, kitty.png. Estableceremos esto del modo
siguiente:
1. Arrastra y suelta un Botón (Button) hasta Screen1, en el área del visor (viewer). El
componente Button se encuentra en la sección Interfaz de usuario (Basic) de
la paleta (palette).
2. En la lista de...