Creación de aplicaciones para Android con AppInventor

http://appinventor.mit.edu/sites/appinventor.mit.edu/files/AppInventor-Doc-Diagram.png

Instalación

Instalación

http://beta.appinventor.mit.edu/learn/setup/index.html En linux: http://beta.appinventor.mit.edu/learn/setup/setuplinux.html

1. Primero debemos tener una cuenta en Google
2. Debemos tener instalado SDK de java
3. App Invetor es entorno para desarrollar aplicaciones Android
   1. Es un entorno web
   2. Las aplicaciones que desarrollemos quedan en la nube
   3. Estarán accesibles siempre que conectemos a la página logeados
4. Necesitamos instalar AppInvetor Setup (Sitio de descarga arriba)

• • Se puede seguir facilmente el proceso de instalación el la página
  • Para esta sesión usaremos windows por evitar problemas de compatibilidad con móviles por usb

Documentación

Documentación

http://beta.appinventor.mit.edu http://beta.appinventor.mit.edu/learn/tutorials/index.html https://sites.google.com/site/appinventorspain

Al abrir el entorno vamos a tener tres entorno para trabajar

1. diseñador de componentes
2. Editor de bloques
3. Un dispositivo de teléfono Android
   1. un emulador
   2. El teléfono conectado usb

• En ambos casos los cambios se ven instantaneos en el dispositivos

Más recursos

Más recursos

AI Java Bridge Conversión automática de las apps de inventor para el market de Google

Actividad

Actividad

Instalación Hola, gatito http://www.appinventor.org/hellopurr Pintar en pantalla http://beta.appinventor.mit.edu/learn/tutorials/paintpot/paintpot-part1.html

Actividad 3 Mole Math

Componentes

Cavas

ImageSprite

Sound

Labels

HorizontalArrangements

Button

Clolk

Colocando componetes

1. Basic==>Canvas (Width fill, Height 300)
2. Animation==>ImageSprite (Rename Mole, Picture mole.png)
3. Basic==> Button ((Rename ResetButton, Text Reset)
4. Basic==>Clock
5. Screen Arrangement ==> HorizontalArrangement Debajo del botón)
6. Basic Label (2)
   1. Label1(Rename HitsLabel, text Hits)
   2. Label2 (Rename HitsCountLabel, text 0)
7. Screen Arrangement ==> HorizontalArrangement Debajo del anterior
8. Basic Label (2)
   1. Label1(Rename MissesLabel, text Misses)
   2. Label2 (Rename MissesCountLabel, text 0)

Comportamiento a los componentes

Mover el topo

Crearemos el procedimiento MoveMole

Lo invocaremos cuando se inicie el juego

El lienzo va a ser nuestra pantalla

El Canvas 0,0 fill,300

Cuentas Canvas 200px, Mole.png 36 ps

Maximo en fila 200-36 = 164 (0-164) (Canvas.Width - Mole.Width)

Igual de altura (Canvas.Height- Mole.Height)

Creando el procedimiento

1. Abrimos el editor de bloques#
2. Vamos a la seccion BuitIn==>Definition
3. Arrastramos toProcedure (nombre MoveMole)
4. MyBlock==>Mole.MoveTo

• Para probar el funcionamiento botón derecho sobre el procedimiento y opción Do it
• Vemos como Mole cambia de posición en la pantalla

Invocar al procedimiento al arrancar la aplicación

• MyBlock==>Screen1.Initialize
• MyDefinition==> call.MoveMole y lo encajamos

Mover Mole cada segundo

• My Block==> Clocl1.timer
• MyDefinition==> call.MoveMole y lo encajamos
• El intervalo es la propiedad timerInterval en el diagrama de componentes no de bloques

La puntuación

• Ahora cada vez que se toque la pantalla queremos actualizar los contadores
• Si ha acertado incrementaremos en el label de hits
• Si ha fallado en el label de misses
• MyBlock==> Canvas1.Touched
• Build.in=>Control.ifelse

Resetear marcadores

• Cuando hagamos un click poner a cero las etiquetas

Añadido que vibre el teléfono

• Que cuando cacemos al topo el móvil vibre
• Sound1.vibrate
• Para ello agregamos en el diseño de componente el elemento sound
• Y procedemos según la imagen

Otras referencias web

http://android.scenebeta.com/tutorial/tutoriales-de-app-inventor