Programando y calculando

¡Hoy creamos una aplicación!

Hoy en día nos pasamos los ratos muertos (y los no tan muertos) trasteando con los teléfonos, descargando cientos de APPs inútiles y probándolas para, acto seguido, desinstalarlas. ¿Pero acaso sabemos el trabajo que conlleva crear una APP? ¿Sabemos de qué herramientas disponemos para ello? Pues esto, amiguetes, es lo que vamos a hacer hoy.

Pero primero tenemos que decidir qué vamos a hacer, ya que hay una cantidad de posibilidades impensable. Pero desde la práctica se nos ha propuesto crear una calculadora, así que, si nos facilitan el trabajo de elección, ¿quién soy yo para quejarme? ¡A por ello!


¿Y qué usaremos para crear la APP?

Nos valdremos de App Inventor, que es un entorno de desarrollo de software creado por Google Labs para la elaboración de aplicaciones destinadas al sistema operativo Android (lo siento, manzanitos 😜). La mayor ventaja de este entorno es que podemos diseñar nuestra APP sin necesidad de conocer lenguajes de programación más o menos complejos. Y esto lo haremos mediante el uso de bloques, una forma visual de programar mediante la cual vamos encajando órdenes en función de lo que necesitemos y que podemos reordenar con mucha facilidad. Esto también significa que habrá limitaciones, pero será lo suficientemente versátil para el objetivo que nos hemos marcado.

Podría poner todos los bloques y sus funciones, pero como ya me han hecho el trabajo duro, me lo ahorro y podéis echarle un vistazo antes de comenzar.


¿Cómo empezamos?

Lo primero que tenemos que hacer es ingresar a la web de AppInventor e iniciar sesión con una cuenta de Google. Tras eso se abrirá ante nosotros una pantalla que nos ofrecerá varios tutoriales que son muy interesantes para introducirnos a programar con bloques y mostrarnos las utilidades de las herramientas disponibles. Pero nosotros nos vamos a meter en faena, así que vamos al meollo del asunto.

Si no te manejas con el inglés lo más recomendable es que lo primero que hagas nada más iniciar sesión sea cambiar el idioma. Yo di por hecho que no estaba disponible el español hasta que me di cuenta de mi error bien adentrado en el proyecto. No obstante, el nivel de inglés requerido para desenvolverse es básico y con poca idea se puede trabajar muy cómodo. Bien, ahora que hemos cambiado el idioma (o no, es cuestión de gustos) vamos a crear un nuevo proyecto dándole a "Proyectos > Comenzar un proyecto nuevo". Y ahora es cuando comienza lo bueno.
Tenemos en el mismo entorno dos ventanas de acción distintas: Diseñador y Bloques. Como os podréis imaginar, la ventana de bloques es donde realizaremos la programación, mientras que la de diseño es en la que dispondremos los elementos en la pantalla del teléfono y les daremos la apariencia que queramos.


Diseñador

Bloques



Fase de diseño

En el apartado de diseño podemos integrar muchísimas opciones, pero nosotros nos decantaremos por algo sencillo. Se pueden insertar imágenes en etiquetas, botones, fondos, etc., pero queremos un diseño minimalista y efectivo para nuestra calculadora, así que elegiremos colores planos como fondos.
Algo muy importante de la fase de diseño es que hay que tener muy en cuenta las proporciones de las cosas que metemos en la pantalla y asignar a cada elemento sus dimensiones. Si no queremos tener que andar haciendo scroll todo el rato, hay que echar un poco más de tiempo creando una interfaz agradable. Yo he optado por crear una calculadora con las operaciones básicas (suma, resta, multiplicación, división) y con introducción en pantalla de números enteros solamente, así que el punto decimal lo olvidamos por ahora, solo lo veremos en los resultados, en caso de que la operación arroje una solución así.
Así que queda por delante un buen rato implementando el formato que queremos dar a la pantalla:

CalculadoraInterfaz

Como se puede ver, yo he puesto una matriz de 16 botones, una etiqueta como pantalla en la que se muestran los números y otra como "modelo" de la calculadora.


Fase de programación

No voy a explicar demasiado en cuanto a la programación porque es algo que hay que entender y que iréis aprendiendo conforme trabajéis con el entorno. Algo que recomiendo encarecidamente es que durante la fase de programación conectéis el teléfono al ordenador mediante USB para ver cómo funciona la APP. Esto se puede hacer siguiendo un sencillo tutorial (está en inglés pero si traducís la página con las opciones del navegador lo entenderéis sin problema. Se puede conectar también de forma online o con un emulador, pero a mí lo que menos problemas me ha dado es conectarlo con USB.

Recordatorio: es muy importante activar las opciones de desarrollador y la depuración USB desde nuestro teléfono para conectarlo con éxito al PC.

Os dejo el enlace a la aplicación para vincular el PC y el smartphone para aligerar un poco el proceso.

Tras configurarlo todo y comenzar al programar os puede quedar algo parecido a esto:

ProgramaBloques

Bloques usados

Voy a hacer a continuación un pequeño desglose de las partes más diferenciadas del programa y qué hace cada una:

  • Iniciamos las variables que vamos a usar. En este caso serán solamente tres: NumeroActual, NumeroAnterior y Operacion. Además, creamos la función que mostrará los números por pantalla.

    Variables

  • Aquí se muestra qué hacen los botones de la aplicación al ser pulsados. Los números solo aportan su valor, mientras que el botón de borar reinicia todas las variables. El funcionamiento real de calculadora está cuando pulsamos la tecla igual, que realiza las operaciones de cálculo y muestra el resultado por pantalla.

    Botones

  • La función Operaciones sirve para que se puedan encadenar las cuentas sin tener que pulsar la tecla igual constantemente.

    Operaciones



Utilizando la APP

A continuación podéis ver un pequeño vídeo en el que utilizo la APP que he hecho.
¡Espero que os guste!




Descarga la APP para probarla

Para terminar, os dejo un enlace desde el que podéis descargaros la aplicación. Pulsad aquí para acceder.

QR

Nota: en principio la descarga había que realizarla mediante el escaneo de este código QR, pero, como bien dice la imagen, ese código solamente está disponible por un período de 2 horas. Es por eso que he puesto el enlace a la descarga. Aun así dejo el código para que veáis que se puede hacer de forma simple cuando habéis acabado el proyecto. Simplemente le dais a "Generar > App" y podéis elegir si queréis el código QR o directamente descargar la aplicación en vuestro ordenador.






Y en la chorrada del día...

Ay, ay, el coronavirus... Llega el cambio de hora y nunca se había dado esta situación. Tanto que hasta en los periódicos se mofan del asunto. En este período de confinamiento solamente nos queda tomarnos las cosas con humor. 😂

Cambio de hora

Comentarios