Vídeo Tutoriales de App Inventor.



Buenas,

Hoy os traigo un trabajo grupal. Dicho trabajo está dividido en 7 vídeos donde se mostrarán como funciona "App Inventor" y aspectos de la creación de aplicaciones.

Dichos videos explican los siguientes aspectos:

  • Requisitos técnicos para poder utilizar "APP Inventor"

       

       
  • Entorno de diseño web de aplicaciones móviles



       
  • Entorno de programación "Block Editor"



       
  • Diseño de mi primer programa "Hola Ciclo"



       
  • Diseño mejorado del programa "Hola Ciclo"



       
  • Utilización de controles "TextBox", "Label", "ListPicker", "CheckBox" y "Button"



       
  • Utilización de controles "Canvas", "ImageSprite" y "Clock"




Para finalizar mando un agradecimiento a todos los participantes, por su gran labor y esfuerzo en la realización de los tutoriales :-)

Espero que os sea de utilidad, comenten cualquier duda y opinión.

Saludos
 

Práctica 4

Buenas,

Hoy vamos a proponer una nueva actividad, en este caso usaremos los conocimientos ya ganados anteriormente.

La actividad consiste en el famoso juego "El ahorcado", el cual consiste en que uno meterá un número, y otro tendrá que acertarlo.

El juego tendrá las siguientes características:
  • Un jugador podrá cometer hasta 5 errores, al 6ª habrá perdido.
  • Con cada error que vaya cometiendo irá apareciendo una imagen, dicha imagen aparecerá en otra "Screen".
    • Con el 1º fallo, se mostrará la imagen de la cabeza.
    • Con el 2º fallo, se mostrará la imagen de cabeza + cuerpo.
    • Con el 3º fallo, se mostrará la imagen de cabeza + cuerpo + brazo izquierdo.
    • Con el 4º fallo, se mostrará la imagen de cabeza + cuerpo + brazo izquierdo + brazo derecho.
    • Con el 5º fallo, se mostrará la imagen de cabeza + cuerpo + brazo izquierdo + brazo derecho + pierna izquierda.
    • Con el 6º fallo, se mostrará la imagen completa y terminará el juego.
    • Si el jugador acierta, aparecerá una copa indicando que ha ganado.
  • También con cada error irá apareciendo un mensaje indicando el nombre del jugador, y si el número es mayor o menor.
  • Un "TextBox" para el nombre del jugador.
  • Un "TextBox" para el número secreto.
  • Un "TextBox" para el número a adivinar.
  • 4 botones.
    • 1 - Número aleatorio.
      • Nos dará un número aleatorio.
    • 2 - Ver/Ocultar Número Secreto.
      • Este botón tendrá que controlar si se ha introducido un número, que no tenga puntos y que sea un número de entre el 1 y el 100, en el caso de que no lo cumpla indicará "número incorrecto".
      • Nos ocultará tanto el botón de número aleatorio como la casilla del número.
    • 3 - Comprobar.
      • Este botón tendrá que controlar si se ha introducido un número, que no tenga puntos y que sea un número de entre el 1 y el 100, en el caso de que no lo cumpla indicará "número incorrecto".
      • Nos comprobará si hemos acertado el número.
      • Nos mostrará un mensaje indicando nuestro nombre y si el número es mayor o menor.
        • Ejemplo:
          • José, el número a encontrar es mayor.
    • 4 - Salir.
      • Con él saldremos de la aplicación.
Pasamos a ver como quedaría la parte gráfica y sus componentes.

 
 

 La parte interna nos deberá de quedar algo así.

Screen1









Screen2


El resultado final quedará algo así.


Espero que os animéis a realizarla, comenten cualquier duda y opinión.

Saludos
 

Práctica 3

Buenas,

Hoy vamos a proponer una nueva actividad usando unos nuevos objetos.

La actividad consiste en una pelota que irá rebotando en los objetos que encuentre a su paso, lo cuales algunos aumentarán su velocidad y otros la disminuirán, también tendremos una barra la cual iremos moviendo con el dedo, la pelota no deberá tocar el fondo de la pantalla, si lo hace la partida habrá acabado.
La actividad tendrá que tener las siguientes características:
  • Un contador de puntos:
    • En el se irán registrando los puntos obtenidos.
  • Un botón de reiniciar.
    • Cuando se pulse en él, tanto la pelota como la barra se regresarán a su posición inicial, la pelota comenzará a moverse.
    • El contador de puntos se reiniciará a 0.
  • Un botón de salida.
  • Dos cubos:
    • El primero será rojo, cuando la pelota choque contra él, la pelota perderá un punto de velocidad y la barra cambiará al color rojo.
    • El segundo será Azul, cuando la pelota choque contra él, la pelota ganará un punto de velocidad y la barra cambiará al color azul.
  • Una pelota:
    • La pelota irá rebotando en los distintos obstáculos, cuando choque con el cubo azul sumará un punto, cuando la pelota coche con el cubo rojo perderá un punto y por último si la pelota toca el fondo de la pantalla la partida habrá acabado y la barra se cambiará al color inicial.
  • Una barra:
    • La barra se moverá horizontalmente con el dedo, evitando que la pelota choque contra el suelo.
Para la realización de esta actividad vamos a ver 2 elementos nuevos:
  • Canvas: Es un elemento en el cual podemos meter imágenes las cuales podrán interactuar en la pantalla, moverse, etc....

    • ¿Dónde está?: Palette, Basic, Canvas.
    • ¿Cómo se usa?: Una vez lo has introducido en la pantalla le das el tamaño del lienzo que necesites, dentro meteremos los elementos que interactuarán.
  • ImageSprite: Es un elemento el cual introduciremos dentro del "Canvas", dicho elemento se le podrá añadir una imagen.

    • ¿Dónde está?: Palette, Animation, ImageSprite.
    • ¿Cómo se usa?: Una vez lo has introducido dentro del "Canvas", le añades una imagen, luego esa imagen se moverá en la pantalla según le indiquemos nosotros.

Pasamos a ver como quedaría la interfaz gráfica de nuestra aplicación.



La parte interna de nuestra aplicación quedará algo así.


 
 
 

El resultado final de nuestra aplicación quedará algo así.


 
Espero que os animéis a realizarla, comenten cualquier duda y opinión.
 
Saludos