domingo, 5 de octubre de 2014

Creación de una aplicación de ejemplo:

Objetivo:

Crear una aplicación que reste dos números haciendo uso de dos pantallas, una para introducir los números a restar y la otra para mostrar el resultado.



 Descripción:


  1. Abrir un nuevo proyecto y asignarle como nombre "restanumeros".
  2. En el área de diseño incorporar una la etiqueta a la que  le incluye  el titulo de la aplicación "Resta DOS Números:" personaliza las propiedades a tu gusto.
  3. Agregar un HorizontalArrangement,  con las siguientes características:
    • alineación centrada, 
    • ancho 320 Pixeles y 
    • Altura 70 Pixeles.
  4. En ese horizontalArrangement, se agregan   3 etiqueta, una para el primer número, otra para el Signo y la tercera para el segundo número
  5. Adicionalmente agregamos un  Botón con texto calculo.
  6. En la siguiente imagen se muestra la interfaz creada



Una vez realizado el diseño de la pantalla 01, agregamos una segunda pantalla y en ella elaboramos el Diseño siguiente:





  1. Se incorporan dos etiquetas y un Botón.  
  2. En la Etiqueta 01  digite como texto "El resultado obtenido es:"
  3. En el Botón se incluye el texto "atrás o anterior".
  4. Ahora vamos a construir los blogs para la pantalla01
    • Nos posicionamos en la pantalla 01 y  seleccionamos bloques para construir los bloques de esa pantalla conformada por dos bloques
    • Primer Blog, declara una variable global para el resultado, para ello  vas a Built-in en el panel de la izquierda y eliges la categoria variable y seleccionamos initialice global name 

    • En name, incluimos el nombre de la variable en mi caso resultadoresta, donde dice to se debe de inicializar con 0, para ello va a built-in y en categoría matemáticas elige 0 
  1. Ahora vamos a crear el blog para cuando se da clic sobre el botón se debe de realizar el calculo(resta) de los dos números
    • Seleccionamos el botón en el panel izquierdo y nos aparecen bloques referentes a ese botón

    • El elegimos  When name(nombre del botón) Click
    • Dentro de este debemos de restar los dos números para ello vamos a seleccionar la categoría de bloques de matemáticas y ahí seleccionamos resta, en resta nos pide dos números que son los nombres de los label que contienen los   números a restar.
    • Adicionalmente dentro del blog del botón, también debemos de mostar el resultado en la pantalla 02.
    • Vamos a control y seleccionamos el blog "open and other screen wwith start value

    • para asignar el nombre de la pantalla02  seleccionamos la categoría de texto y ahí seleccionamos el primer blog " ", en donde introducimos Screen2 y donde dice startValue agregamos el nombre de la variable declarada como global resultadoresta. 
    • Listo ya tenemos los blogs de la pantalla01


  1. Agregar los blogs de la pantalla 02:
    • Seleccionamos la pantalla2 Screen2) estando en Bloques, desde Built-in, y despliega la cantidad de blogs permitidos para ese objeto,  seleccionamos el siguiente blog

    • En do agredamos el nombre de la variable resultadoresta y desde control seleccionamos get start value
    • El blog para el botón que se devuelve a la pantalla 01, se utiliza la categoría control y ahí se obtiene el blog When name(nombre del botón) Click y en do agrega el blog screen name  y le asignamos como texto Screen1


















Ahora podemos probar la aplicación, para ello se posiciona en screen1, vas a la opción del menú conect y eliges el medio por el que desea ejecutar la aplicación

Las siguientes imágenes muestran la emulación  del celular:
Imagen 1

Esta es la primer pantalla en donde se introducen los números a restar, al hacer clic sobre el primer numero, despliega el teclado.

 Imagen 2

Al dar clic al botón calcular de la pantalla 01, muestra el resultado a como lo ilustra la imagen 2

Imagen 3

Cuando se  da clic en el botón anterior de  la pantalla2, el emulador despliega pantallas que se muestran en la imagen 3

El emulador en mi caso, con el equipo que tengo  2 Gigas de Ram y un procesador intel core 2 duo, es un poco lento.


Espero la disfrutes



















1 comentario:

  1. Al realizar el ejemplo anterior en app inventor, se puede observar que hacer las interfaces de diseño es relativamente facil, lo que da algunos problemas es el emulador de android. Tambien hay que tomar en cuenta que los bloques esten bien para que la aplicacion funcione con exito.

    Al final estos son los resultados:

    Interfaz principal
    https://drive.google.com/file/d/0B0M50yc2_KTMY2xUa0NpQUYxVU0/view

    Indroduccion de los datos
    https://drive.google.com/file/d/0B0M50yc2_KTMakpYTUxZTlZjN1E/view

    Resultado de la resta
    https://drive.google.com/file/d/0B0M50yc2_KTMLUh3Z1dUNWpYRmc/view

    Resulta al presionar el boton anterior
    https://drive.google.com/file/d/0B0M50yc2_KTMeXUwS0dNR0c0SVk/view

    En conclusion, el app inventor es muy facil de usar y mas si son ejemplos pequeños como el anterior, con un poco mas de investigacion y practica, cabria la posibilidad de hacer aplicaciones mas grandes e interezantes.




    ResponderEliminar