Curso Google App Inventor: Interfaz Web

jueves, 11 de noviembre de 2010
AppInventor Google

En el articulo anterior de este curso vimos una pequeña introducción a lo que es el Google App Inventor, hoy vamos a comenzar a hablar de la interfaz de esta aplicación web.




AppInventor Screen
Click para Agrandar



Una vez que tengan acceso a App Inventor, lograran ver una interfaz mas o menos como la de la imagen de aquí arriba. A la derecha del Logo de App Inventor pueden leerse tres opciones: "My Projects" o Mis Proyectos, que los llevara a una ventana donde pueden ver las aplicaciones en las que están trabajando, descargar el código fuente de las mismas o subir el código de otras aplicaciones; "Desing" o Diseño, que es la ventana que se abre por defecto y la que se puede ver en la imagen, que sera lo que vamos a explicar hoy; y "Learn" o Aprendizaje, que los llevara a la documentacion y tutoriales de Google para usar el App Inventor.

Ahora enfoquemonos en "Desing", en esta ventana vamos a encontrar cuatro componentes, a los que aquí vamos a llamar ventanas para evitar confusiones en el futuro.

1. La primera ventana -marcada con un numero 1 en la imagen-, es la Paleta de Componentes, en ella encontraran todos los componentes, que vienen a ser las distintas funcionalidades que podrán añadir a sus aplicaciones. Los componentes en esta paleta están distribuidos en varias categorías como se muestra a continuación:
1.1. En la categoría Basic encontraremos los componentes mas básicos, independientemente del tipo de aplicación que hagas siempre usaras al menos uno de estos, y son los siguientes:






basic

1.1.1. Button o Boton, sirve para presionarlo y que a continuación suceda algo -si, se que es obvio-.
1.1.2. Canvas o Lienzo, sirve para tener una superficie sensible al tacto, es muy util para juegos o aplicaciones de dibujo.
1.1.3. CheckBox, sirve para marcar opciones, como dejar activada/desactivada una función;
1.1.4. Clock o Reloj, es una de las herramientas mas útiles, sirve para programar eventos de tiempo; Image o Imagen, sirve para agregar una imagen.
1.1.5. Label o Etiqueta, sirve para agregar un Texto.
1.1.6. ListPicker o Seleccionador de Lista, sirve para seleccionar un elemento de una lista.
1.1.7. PasswordTextBox o Caja de Texto de Clave, sirve para ingresar un password o clave de acceso sin que se vean los numeros en pantalla -los sustituye por astericos-.
1.1.8. TextBox o Caja de Texto, sirve para ingresar un texto desde la aplicación.
1.1.9. TinyDB o Pequeña Base de Datos, pues eso, es una base de datos muy simple y sirve para guardar información y luego solicitarla cuando sea necesaria.

1.2. La segunda categoria es Media, y posee los componentes que nos daran acceso al contenido multimedia de nuestro telefono, los enumero a continuacion:






Media

1.2.1. Camera o Camara, es el componente que nos dará acceso a la camara para tomar fotografías y usarlas en la aplicación.
1.2.2. ImagePicker o Seleccionador de Imagen, sirve para seleccionar una imagen de tu galería.
1.2.3. Player o Reproductor, es un componente bastante complejo que permitirá que nuestra aplicación reproduzca música o vídeos y controlar la vibración del teléfono. Este componente es mas eficiente para sonidos largos como canciones.
1.2.4. Sound o Sonido, sirve para reproducir sonidos y hacer vibrar el teléfono un determinado periodo de tiempo. Es as eficiente para sonidos cortos que para canciones.
1.2.5. VideoPlayer o Reproductor de Vídeo, este componente permite reproducir vídeos en un espacio dentro de la pantalla de nuestra aplicación, los vídeos deben se de 1GB o menor tamaño.

1.3. La categoría Animation tiene dos componentes: Ball o Pelota, e ImageSprite que se puede traducir como Hada Imagen, estos dos componentes se mueven en un determinadado campo y se usan principalmente para juegos.

1.4. Social, es la categoría en la que se agrupan los componentes relacionados con la comunicación, y son los siguientes:







1.4.1. ContactPicker o Seleccionador de Contacto, te da acceso a tus contactos y te permite seleccionar a uno para usar su nombre, dirección de correo electrónico o foto.
1.4.2. EmailPicker o Seleccionador de Email, es una caja de texto que sirve para ingresar direcciones de correo electronico.
1.4.3. PhoneCall o Llamada Telefónica, sirve para hacer llamadas telefónicas desde la aplicación.
1.4.4. PhoneNumberPicker o Seleccionador de Numero de Telefono, le permite a tu aplicación revisar tus contactos y seleccionar uno para usar su nombre, numero de telefono, direccion de correo electronico y foto.
1.4.5. Texting o Texteo, es el componente dedicado a la mensajería instantánea, sirve para enviar y recibir SMS.
1.4.6. Twitter, es el componente que nos ayudara a hacer una aplicacion para Twitter =p.

1.5. Sensors, es la categoria que agrupa a los siguientes componentes:







1.5.1. AcceletometerSensor o Acelerometro, nos servirá para saber cuando y en que medida el teléfono se mueve en cualquiera de sus ejes.
1.5.2. LocationSensor o Sensor de Ubicación, nos dará información de la ubicación, sea por GPS o por las redes de las operadoras de telefonía.
1.5.3. OrientationSensor o Sensor de Orientación, sirve para saber cual es la orientación que tiene el teléfono en un momento determinado.

1.6. Screen Arrangement, tiene tres componentes que nos serán útiles a la hora de organizar los componentes en la pantalla de la aplicación.

1.7. Other Stuff -otras cosas-, agrupa los siguientes componentes:







1.7.1. ActivityStarter o Iniciador de Actividad, nos servirá para iniciar otras aplicaciones y asi utilizar funciones de estas.
1.7.2. BarcodeScanner, es un escaner de código de barras.
1.7.3. Notifer o Notificador, es el componente que te permite mostrar notificaciones ante diversos eventos.
1.7.4. SpeechRecognizer o Reconocedor de Voz, pues hace eso, reconocimiento de voz para convertirlo a texto.
1.7.5. TexToSpeech o Texto a Voz, es precisamente el componente de texto a voz.

1.8. Not Ready for Prime Time es una categoría que mas bien debería llamarse web, pues agrupa una serie de componentes que nos servirán para crear aplicaciones web.







1.8.1. GameClient o Cliente de Juegos, sirve para comunicarse con servidores web para juegos.
1.8.2. TinyDBWeb o Pequeña Base de Datos Web, es un componente igual al TinyDB pero en vez de crear la base de datos en tu teléfono usa una base de datos web.
1.8.3. Voting o Votos, sirve para hacer encuestas y enviar la información a la web.

2. La ventana marcada con el numero dos en la imagen es el Viewer o Visualizador, aqui es donde mas o menos podremos ver como se vera en la practica nuestra aplicación. Y digo mas o menos primero porque lo que se visualiza aquí no es funcional, y segundo porque el como se vera realmente la aplicación depende mas que nada de la pantalla de nuestro teléfono.

3. La ventana Components nos permite ver cuales son los componentes que hemos agregado a nuestra aplicacion y seleccionarlos para modificar sus valores en la Ventana Properties.

4. La ventana Properties contiene información sobre las propiedades mas básicas de un determinado componente, contrario a lo que los usuarios de Visual Basic pueden pensar, no es aquí donde se va a hacer el trabajo de programación, sirve simplemente para modificar aspectos visuales y un par de cosas mas.

Con esto terminamos el repaso de lo que nos podemos encontrar en la interfaz web del App Inventor de Google, en la siguiente entrega del curso hablaremos del Blocks Editor -el sistema de programación de App inventor-, y veremos como esta distribuido.

7 comentarios:

  • maxi

    rass no sabes xq el wifi de mi MM no funciona? pongo conectar a una direccion y dice conectando extrayendo direccion de ip y luego dice desconectado y asi sucesivament y nunka conecta estuve 20 minutos intentando no sabes xq?? x favor ayuda :(

  • heizor

    maxi: que tu comentario esta en un post equivocado pero que ROM tienes

  • alfredo

    busca en esta pag en la etiqueta milestone hay una solucion para el wifi debe ser eso! muy weno app inventor

  • dementeveloz

    Darang: excelente post para la 1era clase !!

    Yo estoy a la espera de mi acceso (solicitado el mismo día que leí el post anterior :) y no veo la hora de que llegue.

  • dementeveloz

    Ja !!

    Excelente: ya tengo mi acceso a App Inventor.

    Nota: NO recibí ningún email de google.

  • Rasstaylor

    Maxi: aplicaste el Fix 2.2.1 Bugs?

  • Publicar un comentario en la entrada