Diseñando Apps (II)

Ahora vamos a usar el Editor de bloques para definir la forma de comportarse de la aplicación. Le diremos a los componentes lo que deben hacer y cuándo hacerlo, como lo que debe suceder cuando el usuario de tu aplicación pulse un botón.
En nuestro caso, vamos a decirle al botón de nuestra imagen que reproduzca un sonido cuando el usuario lo pulse.

Hacé clic en el botón Bloques.

La ventana del editor de bloques se observa de esta manera:

En la pestaña bloques hay dos grupos: Integrados y Screen1.

Los bloques integrados son el conjunto de bloques que están disponibles para cada aplicación a construir.

Los bloques debajo de Screen 1 son los que se encuentran vinculados con los componentes que hemos seleccionado para nuestra aplicación.

Los botones situados debajo de cada grupo se amplían y se muestran los bloques cuando se hace clic en ellos.

1.    Hacemos clic en el bloque Botón1 

2.    Seleccionamos el bloque "Cuando Boton1. Clic" y lo arrastramos al Visor.

3.    Hacé clic en Sonido1.

4.    Buscamos el bloque llamar "Sonido1.Reproducir", lo arrastramos al Visor y lo "enganchamos" dentro del bloque anterior.

5.    Buscamos el bloque llamar Sonido1.Vibrar, arrastralo al Visor y "enganchalo" a continuación del bloque anterior.

6.    Hacemos Clic en el bloque integrado Matemáticas 

7.    Seleccionamos el bloque numérico, lo arrastramos al Visor y lo vinculamos a la derecha de la palabra "milisegundos" del bloque anterior. Con el teclado cambiaremos el número "0" por "1000".
Tu Editor de bloques debe parecerse a esto:

Listo!!!! Probemos si nuestra aplicación funciona.

Vamos a generar un "Paquete de aplicación" (un archivo APK), para que podamos distribuir la aplicación.

- Desde el menú "Generar" seleccionaremos la opción App (guardar archivo .apk en mi ordenador). Se descargará un archivo "MiprimeraApp.apk" a nuestra computadora.

- Enviaremos ese archivo a nuestro dispositivo Android, vía email.
O si el sistema no nos permite adjuntar archivos apk a nuestro email, lo subiremos al drive, lo descargaremos.

- En nuestro dispositivo Android, instalaremos la aplicación.

- Y la ejecutaremos.
¿Cómo resultó?

Siiiii
Así se ve mi primera App en mi celu!!!! 

TOY REFELIZ!!!

Read More

Diseñando APPs (I)

En este nueva unidad trabajaremos en el diseño de aplicaciones móviles para celulares.

Para crear aplicaciones para móviles existen numerosas plataformas de desarrollo. Una de ellas es App Inventor, desarrollada por Google para crear aplicaciones para dispositivos Android. El entorno de desarrollo es completamente visual, tanto en la etapa del diseño como en la de programación (a través de bloques), y por eso es una buena puerta de acceso para los que recién se inician en la materia.

Fuente: Aulas Virtuales Entramar

Clase Nº 1: Nuestra primera aplicación con App Inventor.

Empecemos la construcción de nuestra primer app:
La vamos a llamar "MiprimeraApp".

A medida que construyas vas a aprender a usar las tres herramientas fundamentales de trabajo de App Inventor:

- El Diseñador, el lugar donde diseñás tu aplicación, y que se ejecuta en el navegador web.

- El Editor de bloques, el lugar donde se configura el comportamiento de la aplicación, y que también se ejecuta en el navegador web.

- El Teléfono

IMPORTANTE!!!! Para usar App Inventor necesitamos una cuenta de GMail. Por suerte, ya la tenemos...

¿Listo? Vamos al sitio de App Inventor:
http://ai2.appinventor.mit.edu
y nos logueamos con nuestro email.

Se nos abrirá una página con los términos de uso que tendremos que aceptar.

Originalmente, la página está en Inglés, pero podemos seleccionar el idioma desde el último menú de la derecha.

El mensaje nos indica que aún no tenemos proyectos creados y nos sugiere el uso de una Guía si es la primera vez que trabajaremos en este tema.

Crearemos un proyecto nuevo haciendo clic en el botón "Comenzar un proyecto nuevo".

Escribimos el nombre del proyecto, por ejemplo: MiprimeraApp, en una sola palabra, sin espacios, y hacé clic en Aceptar.

En el navegador se abre el Diseñador, el lugar donde se diseñan las pantallas de tu aplicación, organizando los distintos componentes en el Visor (el espacio central).

Los componentes disponibles se encuentran a la izquierda, bajo la etiqueta Paleta, agrupados en secciones:

- Interfaz de usuario
- Disposición
- Medios
- Dibujo y animación
- Maps
- Sensores
- Social
- Almacenamiento
entre otros.









Vamos a crear un botón que tenga la imagen que descargamos a nuestra PC.
1. Hacemos clic, arrastramos y soltamos el componente Botón a Screen1.

3. En la lista de Propiedades, debajo de la palabra Imagen, hacé clic en Ninguno para que se abra el menú de opciones, hacé clic después en Subir archivo, seleccioná de tu computadora el archivo y hacé clic en Aceptar.

4. Eliminamos el texto para Button1 que aparece bajo la propiedad Text usando la tecla de retroceso.
Ahora agregaremos una etiqueta que diga "Acariciame" (o lo que quieran).

5. Arrastramos y soltamos el componente Etiqueta al Visor, situándolo por debajo del de la imagen. Aparecerá en la lista de componentes como Etiqueta1

6. En la ventana de propiedades, cambiá la propiedad Texto (text) de Etiqueta1 para que diga "Acariciame" (o lo que quieran). Verás el cambio del texto en el diseñador y en el dispositivo.

7. Cambiá el Color de Fondo (BackgroundColor) de Etiqueta1, haciendo clic en el cuadro.
8. Cambiá el Color de Texto (TextColor) de Etiqueta1
9. Cambiá el Tamaño de la Fuente (FontSize) de Etiqueta1 a 30

Finalmente, agregamos el sonido.

10. Hacemos clic en la sección Medios de la Paleta para ver los componentes disponibles en esa sección.
12. Arrastramos un componente Sonido y lo colocamos en el visor.
Al colocarlo, aparecerá en la parte inferior del Visor marcada como Componentes no visibles.

13. En la lista de Propiedades, debajo de la palabra Origen, hacemos clic en Ninguno para que se abra el menú de opciones, hacemos clic después en Subir archivo, seleccionamos de la computadora el archivo que descargamos y hacemos clic en Aceptar.

Read More