MIT App Inventor Para comenzar a crear una aplicación sencilla en Android usaremos la herramienta MIT App Inventor, comenzamos buscando en nuestro navegador: MIT App Inventor de los resultados que despliega entraremos en: Welcome to App Inventor 2! en la página: http://ai2.appinventor.mit.edu Debemos ingresar la información de nuestra cuenta de correo electrónico para tener acceso al sitio, a continuación nos desplegará un mensaje de bienvenida, indicaremos: Continuar en la siguiente pantalla que nos aparece seleccionaremos: Comenzar un proyecto en blanco debemos indicar el nombre de nuestro proyecto y entrar al mismo en la lista de proyectos. La primera pantalla que nos aparecerá consta de 4 secciones: Paleta, Visor, Componentes, Medios y Propiedades. Inicialmente en la sección de Visor, Componentes y Propiedades encontraremos el primer elemento: Screen1 Comenzaremos agregando un botón a Screen1, arrastrando desde la sección: Paleta-->Interfaz de usuario-->Botón hacia la sección Visor en el área de Screen1, donde aparecerá como: Botón1 A continuación en la sección de Propiedades de Botón1 modificaremos los siguientes datos: Alto: 90% Ancho: Ajustar al contenedor Imagen:(elegimos el archivo) Homero.jpg Texto: (Borraremos el texto que se encuentra escrito) Agregaremos un nuevo elemento desde la sección: Paleta --> Disposición --> Disposición horizontal hacia la sección Visor en el área Screen1 debajo de Botón1, nos aparecerá un pequeño recuadro bajo nuestra imágen, ya aparecerá el elemento en la sección Componentes y estará activa en Propiedades, donde modificaremos: Alto: 10% Ancho: Ajustar al contenedor Posteriormente agregaremos otro botón desde la sección: Paleta--> Interfaz de usuario-->Botón hacia la sección Visor dentro del elemento Disposición horizontal que agregamos en el paso anterior, aparecerá con el nombre: Botón2 En la sección de Propiedades donde ahora se encuentran activas las de Boton2 cambiaremos: ColorDeFondo Activamos: Negrita y Cursiva Alto: Automático Ancho: Ajustar al contenedor Texto: (Cambiaremos "Texto para Botón2" por: Cerrar) A continuación en la sección de Medios daremos click al botón: Subir archivo --> Choose File (buscamos y elegimos el archivo en nuestro equipo) y damos click en Aceptar para agregar los archivos que utilizaremos (para nuestro ejemplo serán una imagen, que subimos y agregamos previamente en el Botón1, y un sonido agregado en éste paso). Después agregaremos el elemento "Sonido" desde la sección: Paleta-->Medios-->Sonido lo arrastraremos hacia la sección Visor en Screen1 donde aparecerá abajo de todos los elementos como: "Sonido1" En la sección de Propiedades de Sonido1 modificamos: Origen--> (Seleccionar en las opciones disponibles la que corresponde al audio) Hasta aquí completamos la parte de Diseño, ahora comenzaremos la parte de la programación, para ello en la parte superior derecha sobre las secciones daremos click al botón: Bloques En ésta pantalla sólo tenemos las secciones de Bloques y Visor, en el listado de elementos de Bloques nos aparecen varios elementos Integrados, los cuales son herramientas definidas por el sitio y los elementos que agregamos anteriormente en Diseño. En la sección de Visor no aparecerá nada hasta que seleccionemos algún elemento de la sección Bloques Comenzamos seleccionando: Botón1 en la sección de Visor nos dará las opciones que podemos programar con dicho elemento, seleccionamos la primera que dice: cuando Botón1.Clic ejecutar y lo arrastramos de la pestaña de opciones hacía la sección Visor. A continuación en la sección Bloques seleccionamos: Sonido1, de las opciones que aparecen para programar en el Visor seleccionamos la tercera opción que dice: llamar Sonido1.Reproducir y la arrastramos dentro del bloque de Botón1. Después seleccionamos Botón2 en la sección Bloques y de las opciones que podemos programar con dicho elemento, seleccionamos la primera: que dice: cuando Botón2.Clic ejecutar y lo arrastramos hacía la sección Visor debajo del bloque del Botón1. Nuevamente en la sección Bloques seleccionamos ahora del grupo: Integrados-->Control, de las opciones que aparecen para programar en el Visor seleccionamos la opción que indica: cerrar pantalla la arrastramos hacia la sección Visor dentro del bloque del Botón2. Hasta aquí hemos terminado la parte de la programación. Para poder utilizar nuestro programa en el celular generaremos desde el menú principal de la página en Generar, donde nos aparecen dos opciones: App (generar código QR para el archivo .apk) App (guardar archivo apk. en mi ordenador) Seleccionaremos la primera, que nos generará un código QR. Para poder utilizarlo en un el celular con Android, descargamos e instalamos la aplicación: MIT AI2 Companion Desde Play Store, al abrir la aplicación seleccionamos la opción: scan QR code y escaneamos el código que generamos al terminar nuestra aplicación en la página de MIT App Inventor, el cuál nos abre una página que nos pregunta si queremos descargar la aplicación, indicamos Descargar, después de la descarga indicamos Abrir-->Instalar nos envía un mensaje de seguridad indicando que no reconoce al desarrollador y que la aplicación puede no ser segura, indicamos: Instalar de todas formas, una vez instalada indicamos: Abrir nos pregunta si queremos enviar la aplicación a analizar, indicamos: No enviar y seleccionamos: Abir a continuación nos aparecerá nuestra aplicación, al presionar la imagen de Homero Simpson escucharemos el sonido que configuramos y al dar click en el botón Cerrar, cerrará nuestra aplicación, la cual quedará instalada para usarla en nuestro celular hasta que la desinstalemos del mismo. Podemos cerrar el código en la página de MIT App Inventor y cerrar nuestra sesión, el proyecto quedará guardado de forma automática y la próxima vez que iniciemos sesión en el sitio nos aparecerá.