App1: Hola Mundo
Propuesta: En esta primera práctica, vamos a empezar con el típico Hola mundo que es el que imprime el texto «¡Hola, mundo!» en un dispositivo de visualización, en la mayoría de los casos una pantalla de monitor. Este programa suele ser usado como introducción al estudio de un lenguaje de programación, siendo un primer ejercicio típico, y se considera fundamental desde el punto de vista didáctico. (Fuente: Wikipedia)
Diseño de la interfaz: Necesitaremos dos botones, uno que indique "Púlsame" y otro "Limpiar".
Resultado final: Aquí puedes una imagen del resultado final del diseño tanto en la app como en el móvil:
Comenzamos a crear!!
Objetivo: Crear una aplicación donde al apretar un botón el móvil nos mostrará una frase predefinida.
Pasos:
Hacer click en el botón "Comenzar un nuevo proyecto". Recuerda previamente haber cambiado el idioma a Español:
Escribir el nombre del proyecto: HolaMundo, sin espacios:
Ahora aparece una ventana con la Interfaz de usuario, donde vamos a arrastrar hacia el visor los siguientes elementos:
Ya tenemos la interfaz terminada, ahora nos toca programar los botones, picando en el botón de arriba a la derecha "Bloques":
Programación de los bloques: Solo tenemos dos, los correspondientes a las acciones de cada botón.
Probar la aplicación: Una vez creada, necesitamos probarla mediante un emulador o mejor aún, con la app MIT AI2 Companion que deberá estar instalada en nuestro móvil o tablet. De este modo, podremos comprobar los cambios que vayamos haciendo, pero sin olvidad que la app todavía no está instalada en nuestro terminal y algunas opciones podrían no funcionar correctamente. Para que funcione, tanto el ordenador como el teléfono deben estar conectados a la misma red wifi.
Nos vamos a Conectar --> AI Companion y nos saldrá una ventana para teclear un código o escanear un código QR; se puede hacer de las dos formas.
Mejorar la aplicación: Verás que si funciona, no se le parece totalmente a la imagen de la solución indicada, para ello vamos a hacerle pequeñas modificaciones:
Cambia la forma de los botones rectangular por redondeada, desde la vista de Diseñador en el apartado Propiedades.
Para que los botones estén más separados, debes añadir dos "etiquetas" más que harán de separador (Etiqueta2 y Etiqueta3) y arrastrarlas entre los elementos que quieres que estén separados. Las propiedades: Ancho: "Ajustar al contenedor" y todo lo demás por defecto. Los componentes deberían estar situados así:
Publicar o instalar la apk: En el emulador, podemos probar los cambios, pero la aplicación todavía no está instalada en nuestro móvil. Tenemos dos opciones, generar un código QR para descargarlo e instalarlo directamente en el móvil o guardar la apk en el ordenador:
También podemos compartir nuestra aplicación en la Galería de App Inventor. Más adelante veremos que también tenemos la opción de publicarla en la Play Store.