APP INVENTOR Y APLICACIONES ALTERNATIVAS
El término app es una abreviatura de la palabra en inglés application. Es decir, una app es un programa. ... Se refieren sobre todo a aplicaciones destinadas a tablets (como el iPad o equipos Android) o a teléfonos del tipo smartphone (como el iPhone o el Samsung Galaxy).Nov 1, 2019
Creando tu primera aplicación: HelloCodi
Ahora que ha configurado su computadora y dispositivo, y ha aprendido cómo funcionan el Diseñador y el Editor de bloques, está listo para construir la aplicación HelloCodi. En este punto, debe tener el Diseñador o el Editor de bloques abierto en su navegador, y un dispositivo Android o un emulador de Android conectado al Editor de bloques. (Consulte las instrucciones de configuración de App Inventor 2 si no tiene estas cosas ejecutándose). Elija Iniciar un nuevo proyecto en el menú Proyectos y asígnele el nombre HelloCodi
debe tener el Diseñador o el Editor de bloques abierto en su navegador, y un dispositivo Android o un emulador de Android conectado al Editor de bloques. (Consulte las instrucciones de configuración de App Inventor 2 si no tiene estas cosas ejecutándose). Elija Iniciar un nuevo proyecto en el menú Proyectos y asígnele el nombre HelloCodi.
HelloCodi: toca la abeja, ¡escucha el zumbido de la abeja!
HelloCodi es una aplicación simple que puedes construir en muy poco tiempo. Usted crea un botón que tiene una imagen de la abeja Codi y luego programa el botón para que, cuando se haga clic en él, el teléfono emita un zumbido.
Para construir HelloCodi, necesitará un archivo de imagen de Codi la abeja. Descargue estos archivos a su computadora haciendo clic en los siguientes enlaces. Para descargar: después de hacer clic en un enlace, haga clic derecho en la imagen y seleccione "Guardar como". Guarde el archivo en su escritorio o carpeta de descargas, o en cualquier lugar donde pueda encontrarlo fácilmente más tarde.
- Imagen de Codi: codi.jpg (clic derecho y guardar)
- Sonido de abeja: Bee-Sound.mp3 (clic derecho y guardar)
Seleccione componentes para diseñar su aplicación
Los componentes de App Inventor se encuentran en el lado izquierdo de la ventana del diseñador debajo del título Paleta . Los componentes son los elementos básicos que utiliza para crear aplicaciones en el teléfono Android. Son como los ingredientes en una receta. Algunos componentes son muy simples, como un componente de etiqueta , que solo muestra texto en la pantalla, o un componente de botón (# 1 a la izquierda) que toca para iniciar una acción.
Otros componentes son más elaborados: un lienzo de dibujo que puede contener imágenes fijas o animaciones, un sensor de acelerómetro que funciona como un controlador Wii y detecta cuando mueve o sacude el teléfono, componentes que envían mensajes de texto, componentes que reproducen música y video, componentes que obtienen información de sitios web, etc.
Para usar un componente en su aplicación, debe hacer clic y arrastrarlo al visor en el medio del Diseñador . Cuando agrega un componente al Visor (# 1 a continuación), también aparecerá en la lista de componentes en el lado derecho del Visor.
Los componentes (# 2 a continuación) tienen propiedades ajustables. Estas propiedades cambian la forma en que el componente aparece o se comporta dentro de la aplicación. Para ver y cambiar las Propiedades de un componente (# 3 a continuación), primero debe seleccionar el componente deseado en su lista de componentes.
Pasos para seleccionar componentes y establecer propiedades
HelloCodi tendrá un componente Button que muestra la imagen de la abeja que descargaste anteriormente. Para lograr esto:
Paso 1a . Desde la paleta Interfaz de usuario , arrastre y suelte el componente Botón a Pantalla1 (# 1).
Paso 1b . Para darle al botón la imagen de la abeja, en el panel Propiedades , debajo de Imagen, haga clic en el texto "Ninguno ..." y haga clic en "Cargar archivo ..." (# 2). Aparecerá una ventana para permitirle elegir el archivo de imagen. Haga clic en "Examinar" y luego navegue hasta la ubicación del archivo codi.jpg que descargó anteriormente (# 3). Haga clic en el archivo codi.jpg , haga clic en "Abrir" y luego haga clic en "Aceptar".
Paso 2 . Cambie la propiedad de Texto del botón :
elimine "Texto para Botón1", dejando en blanco la propiedad de texto del Botón para que no se escriba sobre la imagen de la abeja.
Paso 3 . Desde la paleta Interfaz de usuario , arrastre y suelte el componente Etiqueta al Visor (# 1) , colocándolo debajo de la imagen de la abeja. Aparecerá en su lista de componentes como Label1 .
Debajo del panel Propiedades , cambie el
- (2) Propiedad de texto de Label1 para leer "Touch the Bee". Verá el cambio de texto en el Diseñador y en su dispositivo.
- (3) FontSize a 30.
- (4) Color de fondo de Label1 haciendo clic en el cuadro. Puede cambiarlo a cualquier color que desee.
- (5) TextColor a cualquier color que desee. (Nota: si BackgroundColor y TextColor son iguales, ¡no podrá leer su texto!)
Paso 4 . En Paleta, haga clic en el cajón de Medios y arrastre un componente de Sonido y colóquelo en el Visor (# 1). Donde sea que lo suelte, aparecerá en el área en la parte inferior del Visor marcado como Componentes no visibles . En el panel de Medios, haga clic en Cargar archivo ... (# 2) Busque la ubicación del archivo Bee-Sound.mp3 que descargó anteriormente y cárguelo en este proyecto (# 3). En el panel Propiedades, vea que la propiedad Fuente actualmente dice Ninguno ... Haga clic en la palabra Ninguno ... para cambiar el Origen del componente Sound1 a Bee-Sound.mp3 (# 4).
Programación con el editor de bloques
Hasta ahora, ha estado organizando la pantalla y los componentes de su aplicación en el Diseñador , que se encuentra en una ventana del navegador web. Para comenzar a programar el comportamiento de la aplicación, debe ir al Editor de bloques . Haga clic en el botón Bloques en la esquina superior derecha de su pantalla para ir al Editor de bloques.
Una vez que tenga el Editor de bloques frente a usted, continúe con el siguiente paso para comenzar a programar su aplicación con bloques.
Tocando el sonido
Paso 1 . En el lado izquierdo del Editor de bloques, haga clic en el cajón Button1 para abrirlo. Arrastre y suelte el botón When Button1.Click en el área de trabajo (el área abierta a la derecha).
Esos bloques de color amarillo mostaza se llaman bloques de controlador de eventos . Los bloques del controlador de eventos especifican cómo debe responder el dispositivo móvil a ciertos eventos: se ha presionado un botón, se está sacudiendo el teléfono, el usuario arrastra su dedo sobre un lienzo, etc. cuando Button1.Click es un controlador de eventos.
Paso 2a . Haga clic en el cajón Sound1 y arrastre el bloque Sound1.Play y conéctelo a la sección "hacer" del bloque When Button1.Click . Los bloques se conectan entre sí como piezas de rompecabezas y puedes escuchar un clic cuando se conectan.
Los bloques morados se denominan bloques de comando , que se colocan en el cuerpo de los controladores de eventos. Cuando se ejecuta un controlador de eventos, ejecuta la secuencia de comandos en su cuerpo. Un comando es un bloque que especifica una acción a realizar (p. Ej., Reproducir sonido) cuando se activa el evento (p. Ej., Presionar el botón 1).
Tus bloques deberían verse así en este punto:
Ahora puede ver que el bloque de comandos está en el controlador de eventos . Este conjunto de bloques significa; "cuando se hace clic en el Botón1, se reproducirá Sound1". El controlador de eventos es como una categoría de acción (p. Ej., Se hace clic en un botón) y el comando especifica el tipo de acción y los detalles de la acción (p. Ej., Reproducir un sonido).
Puede leer más sobre los bloques y cómo funcionan aquí: Bloques integrados de App Inventor .
¡Pruébalo en tu dispositivo o con el emulador! Cuando presiona el botón, debe escuchar el zumbido de la abeja. ¡Felicitaciones, tu primera aplicación se está ejecutando!
Nota: hay un problema conocido con el componente de sonido en algunos dispositivos. Si ve un "Error de sistema operativo" y el sonido no se reproduce, o se retrasa mucho en la reproducción, vuelva al Diseñador e intente usar un componente Reproductor (que se encuentra en Medios) en lugar del componente Sonido.
Empaquetando su aplicación
Mientras su dispositivo (emulador o teléfono / tableta) se ha conectado a App Inventor, su aplicación se ha estado ejecutando en tiempo real en su dispositivo. Si desconecta el emulador / dispositivo del Editor de bloques, la aplicación desaparecerá. Siempre puede hacer que regrese volviendo a conectar el dispositivo. Para que una aplicación se ejecute sin estar conectada a App Inventor, debe " empaquetar " la aplicación para producir un paquete de aplicación (archivo apk).
Para "empaquetar" la aplicación para instalarla en su dispositivo o para enviarla a otra persona, haga clic en la pestaña Crear en la parte superior de la pantalla. En Build, hay dos opciones disponibles para que elijas:
1. Aplicación (proporcione el código QR): puede generar un código de barras (un código QR), que puede usar para instalar la aplicación en un dispositivo móvil que tenga una cámara, con la ayuda de un escáner de código de barras, como el escáner de código de barras ZXing (disponible gratuitamente en Google Play).
Este código de barras solo es válido por dos horas. Si desea compartir su aplicación con otras personas mediante un código de barras durante un período más largo, deberá descargar el archivo .apk a su computadora y utilizar un software de terceros para convertir el archivo en un código de barras. Más información se puede encontrar aquí .
2. Aplicación (guardar en mi computadora): puede descargar la aplicación en su computadora como un archivo apk, que puede distribuir y compartir a su gusto instalándolo manualmente en otros dispositivos. (a veces llamado "carga lateral" ).
revisión
Aquí están las ideas clave cubiertas hasta ahora:
- Puede crear aplicaciones seleccionando componentes (ingredientes) y luego diciéndoles qué hacer y cuándo hacerlo.
- Utiliza el Diseñador para seleccionar componentes y establecer las propiedades de cada componente. Algunos componentes son visibles y otros no.
- Puede agregar medios (sonidos e imágenes) a las aplicaciones cargándolos desde su computadora.
- Utiliza el Editor de bloques para ensamblar bloques que definen el comportamiento de los componentes.
- cuándo ... hacer ... los bloques definen manejadores de eventos , que le dicen a los componentes qué hacer cuando algo sucede.
- llamar ... los bloques le dicen a los componentes que hagan cosas.
Escanee la aplicación de muestra a su teléfono
Escanee el siguiente código de barras en su teléfono para instalar y ejecutar la aplicación de muestra.
Descargar código fuente
Si desea trabajar con este ejemplo en App Inventor, descargue el código fuente en su computadora, luego abra App Inventor, haga clic en Proyectos , elija Importar proyecto (.aia) desde mi computadora ... y seleccione el código fuente que desee. Acabo de descargar.
No hay comentarios.:
Publicar un comentario