Desarrollar aplicaciones con App Inventor: Capítulo 9

1
837
Cuales serán los pasos para desarrollar nuestra primera aplicación Android

La aplicación HelloPurr tendrá un componente botón que muestre la imagen del gatito que nos descargamos con anterioridad. Para conseguir desarrollar nuestra primera aplicación para el sistema operativo Android con éxito solo deberemos ceñirnos al desarrollo que se expone a continuación.

Es recomendable utilizar los mismos componentes que en los ejemplos

Antes de comenzar a introducir los diferentes componentes en la interfaz de nuestra aplicación quiero deciros que si bien no es necesario que se utilicen los mismos componentes, imagen y sonido, que se utilizan en este manual para el desarrollo de nuestras aplicaciones, si que es conveniente utilizarlos puesto que la facilidad a la hora de corregir errores en las app será mucho mayor, con lo que el aprendizaje también acelerará su velocidad.

El procedimiento para llevar esto a cabo es el siguiente:

  • Paso 1A: Seleccionar y arrastrar el componente Botón a nuestra Pantalla.
  • Como colocar un botón en App Inventor
    Colocar un botón en la pantalla de nuestra aplicación



    Subir un archivo en App Inventor
    Pulsar sobre la sección “Upload File” (Subir Archivo)

  • Paso 1B: Para conseguir que el bóton contenga la imagen del gatito, en el panel de propiedades del botón, debajo de imagen, hemos de hacer click en el texto “Ninguno…” y posteriormente hemos de hacer click en la sección de propiedades del botón sobre el campo “Imagen” y posteriormente sobre “Subir archivo”.
    Imágenes en nuestras apps de Android
    Subir una imagen a nuestra aplicación con App Inventor

    Una vez nos encontremos dentro de este campo lo que hemos de hacer es navegar a través de nuestras carpetas hasta localizar la imagen del gatito que nos hemos descargado en nuestro ordendador con anterioridad. Una vez hayamos encontrado la imagen, hemos de pulsar sobre el botón abrir y listo.

  • Subir una imagen a App Inventor
    Abrir nuestra imagen en la app de App Inventor
  • Paso 2: El siguiente paso será modificar el botón de propiedad del texto. Para ello borramos el texto que contiene en ese momento el botón, dejando la propiedad “texto” del botón vacia. De este modo conseguiremos que no haya ningún texto superpuesto a la cara del gatito. Por tanto, tu diseño debería de estar tal que así.
    Si no hemos conseguido que se muestre de manera completa la imagen del gatito, lo que podemos hacer es modificar la misma a través de las propiedades de altura y anchura situadas en el menú de configuración del botón. O, también podemos encajar la imagen mediante el ajuste a su contenedor, opción que viene reflejada también las secciones de anchura y altura del menú del botón de la aplicación Android.
  • Campos de texto de App Inventor
    El campo de texto ha de permanecer vacio
  • Paso 3: Nos situamos en la interfaz de paleta del usuario, seleccionamos y arrastramos el componente etiqueta al visor principal, situándolo bajo la imagen del gatito. Esta aparecerá en nuestra lista de componentes como Etiqueta1.
    Debajo del panel de propiedades, hemos de cambiar la propiedad de texto de la Etiqueta1. En ese momento veremos el cambio que se ha producido en el texto tanto en el visor de App Inventor como en nuestra tablet o smartphone Android, en función de cual sea el dispositivo que hayamos conectado. Tras esto, hemos de cambiar el tamaño del texto de la Etiqueta1 a 30. También hemos de cambiar el color de fondo de dicha Etiqueta1 haciendo click en la caja y seleccionando aquel que nos parezca mas atractivo. Al igual que con el color de fondo, también hemos de modificar el color del texto seleccionando el de nuestro agrado. Aquí, el color de fondo del texto ha sido seleccionado en azul y el color del propio texto en amarillo.
  • Etiquetas en App Inventor
    Como colocar una etiqueta bajo la imagen
    Cambiar el texto en App Inventor
    Así se quedaría el texto tras la modificación
  • Paso 4: En la paleta, hemos de seleccionar dentro de la sección de medios un botón de sonido y lo situamos en la vista de la aplicación. Da igual donde lo situemos puesto que el botón de sonido aparecerá en la parte inferior de la pantalla como elemento oculto. Una vez lo hayamos situado en la vista de la aplicación lo que hemos de hacer es seleccionar una nueva subida y buscar el archivo mp3 con el maullido del gatito que anteriormente guardamos en el disco duro de nuestro ordenador. Bajo el panel de propiedades hemos de cambiar las propiedades de la fuente de audio. Para ello hemos de pulsar en el botón ninguno lo que nos permitirá cambiar la fuente de sonido por el archivo mp3 del gatito.
  • Como subir un sonido a una app
    Seleccionamos sonido de la paleta de medios.
    Crear una aplicación con App Inventor
    Seleccionamos nuestro sonido de entre las opciones
Programando el Editor de Bloques

Hasta este momento, lo que hemos hecho es seleccionar y colocar los componentes en la sección de diseño, que a la postre es solamente una ventana del nuestro navegador. Para comenzar a programar el comportamiento que tendrán los diferentes componentes de nuestra aplicación Android, tenemos que acceder al “Editor de Bloques”.

Pero esto lo veremos en el siguiente capítulo del curso de Desarrollo de Aplicaciones para el sistema operativo Android con la herramienta App Inventor.

 

CAPITULOS CURSO APP INVENTOR:

Capítulo 1.) Presentación.
Capítulo 2.) Requisitos de hardware y software para realizar las aplicaciones.
Capítulo 3.) Como conectar nuestro dispositivo Android al PC.
Capítulo 4.) Utilizar el emulador de Android de App Inventor.
Capítulo 5.) Que son la paleta y la interfaz de usuario de App Inventor.
Capítulo 6.) Secciones de disposición, medios y dibujo y animación de App Inventor.
Capítulo 7.) Secciones de la paleta, social, almacenamiento y conectividad de App Inventor.
Capítulo 8.) Desarrollar nuestra primera aplicación para Android con App Inventor – Parte 1.
Capítulo 9.) Desarrollar nuestra primera aplicación para Android con App Inventor – Parte 2.

Capítulo 10.) Desarrollar nuestra primera aplicación para Android con App Inventor – Parte 3.
Capítulo 11.) Como utilizar la aplicación que hemos desarrollado en nuestra tablet o smartphone.

1 Comentario

Dejar respuesta

Please enter your comment!
Please enter your name here