Calculadora APP Inventor

28
1. Creando el proyecto. Entramos en appinventor.mit.edu (página web del proyecto) y pulsamos sobre invent. Una vez ingresemos con nuestra cuenta de Google, pulsamos el botón New e insertamos un nombre para nuestro proyecto. Y así luce la pantalla de edición de proyectos. En el centro tendremos la pantalla principal de nuestra aplicación Android. A la izquierda tenemos todos los componentes que podemos utilizar. Por último, a la derecha tenemos dos columnas: Una lista con todos los componentes que hemos añadido y las propiedades editables del componente seleccionado.

description

app inventor

Transcript of Calculadora APP Inventor

  • 1. Creando el proyecto. Entramos en appinventor.mit.edu (pgina web del proyecto) y pulsamos sobre invent. Una vez ingresemos con nuestra cuenta de Google, pulsamos el botn New e insertamos un nombre para nuestro proyecto.

    Y as luce la pantalla de edicin de proyectos. En el centro tendremos la pantalla principal de nuestra aplicacin Android. A la izquierda tenemos todos los componentes que podemos utilizar. Por ltimo, a la derecha tenemos dos columnas: Una lista con todos los componentes que hemos aadido y las propiedades editables del componente seleccionado.

  • Para aadir un componente basta con seleccionarlo en la lista de la izquierda y arrastrarlo con el ratn hasta el lugar que nos interese. Para este ejemplo vamos a empezar aadiendo dos componentes: Una etiqueta (label) y una tabla (TableArrangement).

    La etiqueta la usaremos como la pantalla digital de nuestra calculadora. Es decir, siempre que pulsemos una cifra, este "label" se ir actualizando. Adems nos mostrar el resultado de la operacin cada vez que pulsemos la tecla "=" o que concatenemos con otras operaciones. Por ello, seleccionaremos el componente y editaremos la propiedad "text" para que su valor inicial sea "0". Adems seleccionaremos el valor "Fill parent" dentro del campo "width". De esta forma este "label" ocupara toda la anchura de la pantalla.

  • Por su parte, el TableArrangement lo emplearemos para contener todos los botones de la calculadora. Para poder realizar tal accin, definiremos 4 columnas (propiedad "columns") y 4 filas (propiedad "rows").

    A continuacin llenaremos cada celda de la tabla con un botn nuevo.

  • El tamao del texto de los botones no nos permite rellenar correctamente la tabla. Ser necesario cambiar su texto (propiedad "text") para poder rellenar la ltima columna.

    Por ltimo, aadidmos un botn ms debajo de la tabla, cambindole la propiedad "text" por "=" y

  • asignndole "fill parent" en el campo "width". Con ello ya tendremos la interfaz grfica bsica de una calculadora.

    Antes de pasar a la parte lgica de la aplicacin, seleccionaremos todos los campos y haremos uso del botn "rename" para asignarles un nombre ms acorde con su funcionalidad. Esto nos permitir programar de forma ms cmoda.

  • Para editar la parte lgica debemos hacer clic en el botn "Open the Blocks Editor".

    Este botn bsicamente nos hace descargar una aplicacin Java, por lo que es muy probable que tu navegador web te avise de ello:

    Si tienes instalado Java 6 (o superior), no deberas de tener ningn problema para poder ejecutar la aplicacin. Seguramente podrs arrancarla con hacer doble clic sobre ella. La aplicacin te dar un error, debido a que nos hemos saltado el paso de configuracin de drivers o la instalacin del emulador de terminales Android. De todas formas no te preocupes, ese paso no es realmente necesario para poder montar tu aplicacin. Y esta es la interfaz grfica del editor de bloques. Arriba tienes una barra con las opciones de la aplicacin. A la izquierda una barra con las listas de acciones y de componentes y por ltimo en la esquina abajo-derecha tienes una papelera para borrar piezas.

  • Si haces clic en "My Blocks" vers que salen listados todos los componentes que hemos aadido en la web del proyecto. Esta lista se genera de forma dinmica, si aades nuevos componentes o los borras en la web, aqu se irn actualizando:

  • Para demostrar su funcionamiento bsico, en Button0 arrastraremos al panel principal la pieza "When Butto0.Click". Acto seguido seleccionaremos el componente LabelResultado (o como hayas llamado al "label") y le pegaremos la pieza "Set LabelResultado.Text to".

    Nos interesa que cada vez que pulsemos un cero, este se aada a la pantalla digital de nuestra calculadora. As que iremos a la pestaa "Built-in" y haciendo uso del componente Text iremos aadiendo las piezas "Join" y "Text".

  • Bsicamente, acabamos de crear una funcin que significa lo siguiente: "Cuando pulsemos el botn 0, se aadir 0 al final del texto". Si hiciramos lo mismo para todos los botones numricos (no lo hagis), nos quedara algo as:

    No obstante siguiendo este funcionamiento habra que pensar que siempre que haya un 0 en pantalla, siempre que pulsemos un dgito acabaremos teniendo ese dichoso 0 a la izquierda, algo que no pasa con las calculadoras. Si nos fijamos, cuando en la pantalla digital aparece cero y pulsas otro dgito, la pantalla pasa a tener nicamente ese nuevo dgito.

    Si tuviramos que tener en cuenta eso una vez hubiramos creado todas las acciones de botones, gastaramos un tiempo tonto en actualizarlos uno a uno:

  • As que lo ms simple es hacer un proceso (bautizado como "addNumber"), que reciba como parmetro el nmero del botn. Este proceso analizar si ya existe un cero, para saber si machaca el valor de la pantalla digital o lo concatena a la derecha:

    Esto ya parece ms "actualizable" y mantenible:

  • Ahora pensemos detenidamente en el funcionamiento de una calculadora. Cada vez que pulsas un botn "+" o cualquier otra operacin, se reinicia la pantalla para poder escribir un nuevo parmetro. Por lo tanto, nos hace falta saber dos cosas que habr que recordar una vez hagamos la tecla "igual":

    1. Cul es el nmero anterior al que hay en la pantalla para poder operar. 2. Qu operacin hay que realizar.

    De esta forma, haciendo uso de la pestaa "Built-in", crearemos dos nuevas variables:

    Ahora, haciendo uso de estas variables y de cmo realizar un proceso (visto antes sobre los botones numricos), pensemos en el funcionamiento de una operacin:

    Necesitamos saber el nmero que hay en la pantalla. Necesitamos saber la operacin a realizar. Por ejemplo, si es una suma, sumaremos el texto de la pantalla con la variable "LastResult" (el

    nmero que haba antes de pulsar +). Una vez sumado, actualizamos la pantalla con el resultado:

  • Y as quedara una vez aadamos la resta, el producto y la divisin:

    Y as quedaran los botones de operaciones:

  • Ahora tengamos en cuenta otra cosa. Cuando obtenemos un resultado, este se imprime en pantalla. No obstante, ese valor no se conversa cuando volvamos a pulsar un botn numrico. Es decir, si en pantalla me aparece como resultado el nmero 128 y quiero hacer ahora otra operacin... pues si por ejemplo pulso la tecla "2" quiero ver en pantalla slo un "2" y no un "1282". As que nos hace falta almacenar una nueva variable, una que nos permita saber cuando se debe reinicia la pantalla cuando pulsemos un dgito:

    Bsicamente, cada botn numrico hara uso de este comportamiento:

  • Y habra que ponerlo del proceso "addNumber":

    Por su parte, habra que hacer un "ClearScreen = true" al final de la funcin de clculo de operaciones:

  • Ahora vayamos con las teclas especiales: el botn "coma" para aadir decimales y el botn "C" para resetear la pantalla. En este caso, para hacer uso de decimales tendremos que aadir un punto "." al "label" de resultados. No obstante hay que tener en cuenta una cosa: Cuando aadas un "." para decimales, debes verificar que no exista ya ms de uno en dicho label:

  • Por su parte, el botn "C" deber realizar un reinicio de todas las variables y actualizar el label de resultados con valor "0":

    Con ello ya disponemos de una aplicacin plnamente funcional. Guardaremos los cambios haciendo uso de "Save" (necesario para sincronizar los datos con el servidor). Una vez sincronizado, el botn pasar a llamarse "Saved" y ser deshabilitado por la aplicacin:

  • Una vez realizado el guardado, en la web del proyecto seleccionaremos el desplegable "Package for Phone" y seleccionaremos "Download to this Computer":

    Esto har que el servidor pase a compilar nuestra aplicacin y como resultado, tras casi un minuto de clculos, nos suministrar un archivo "apk" a ejecutar en nuestro dispositivo mvil. Para poder habilitar la instalacin de software casero en tu dispositivo Android, debers de ir a "Ajustes> Aplicaciones" y activar la opcin de "Orgnenes desconocidos".

  • Puedes suministrar el fichero "apk" va conexin USB o a travs de alguna memoria externa. Sea como fuere, necesitars disponer de algn navegador de archivos para poder localizar el instalable.

    Seleccionndolo se te abrir un sencillo men de instalacin:

    Ahora mismo disponemos de una calculadora plnamente funcional:

  • An as hay que reconocer que nos ha quedado bastante fea, pero esto se puede corregir con dos sencillos puntos:

    1. Cambiar los colores de los componentes. 2. Cambiar el tamao de estos dependiendo del de la pantalla del dispositivo.

    El primer paso no es muy complicado de hacer:

  • Para la parte del redimensionado, necesitaremos almacenar varias variables: La anchura de los botones, la altura de estos y el nmero de pxeles a dejar entre cada botn:

  • Tambin nos resultara til conocer el nmero de columnas y de filas que va a tener nuestra pantalla. S, he dicho pantalla, no tabla. Si tenemos en cuenta el label de operaciones y el botn de resultado, estamos hablando de que tenemos 6 filas:

    Este proceso podra sernos til para cambiar la anchura de un botn:

    No obstante podemos renombrar la funcin y hacer que no slo cambie la anchura de un botn, si no tambin su altura:

  • Ahora pensemos en una serie de puntos:

    1. La anchura de todos los botones debe de ser "anchura total de la pantalla" dividido por el nmero de columnas que hemos definido.

    2. La altura de todos los botones debe de ser "altura total de la pantalla" dividido por el nmero de filas que hemos definido.

    3. Esta redimensin de componentes slo debe de aplicarse cuando la aplicacin arranque, as que realizaremos todos los clculos sobre el componente "Screen1", haciendo uso de su funcin "When Screen1.Initialize".

    4. El nico botn que no se ver afectado es el botn "igual".

    El resultado sera el siguiente:

  • Tambin sera interesante que el label de resultados tuviera la misma altura que los botones:

    Tambin nos interesa que el texto del label no se quede pequeo. Crearemos una variable global llamada "FontSize" y le aplicaremos un valor por defecto. Dentro de la funcin "When Screen1.Initialize" recalcularemos su valor, siendo 2/3 la altura de un botn. Al final de la funcin actualizaremos el tamao de la fuente del label con el valor de dicha variable.

  • El resultado final de nuestro esquema sera el siguiente:

  • Para finalizar quedara bien que elaborramos un icono para nuestra aplicacin. En este caso he dibujado una calculadora:

  • Acurdate de redimensionarlo a un tamao lgico de icono. Por ejemplo, a este le he puesto una anchura de 128 pxeles:

    Para subir una imagen a nuestra aplicacin debemos dirigirnos a la seccin "Media" y seleccionar el botn "Upload new...".

  • Se nos abrir un dilogo desplegable donde seleccionaremos el archivo de nuestra computadora a subir En este caso mi imagen "icon.png".

    Para asignar nuestra imagen como el icono de la aplicacin, seleccionaremos el componente Screen1 y marcaremos el "icon.png" de la lista que nos sale en la propiedad "Icon".