Creación de aplicaciones para Android con AppInventor

De WikiEducator
Saltar a: navegación, buscar



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

Instalacion

Instalación



  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

Uso en entorno web

Documentación


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



Actividad



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

Procedimiento.png

  • 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

Inicializar.png

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

Clock.png

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

Ifelse.png

Resetear marcadores

  • Cuando hagamos un click poner a cero las etiquetas

Archivo:Reset.click

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

Sound.png


Otras referencias web

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