Proyecto AppInventor - Monitor de Padel - Introducción

Buenas otra vez! Después de mucho tiempo sin escribir nada nuevo en el blog, os voy a informar del proyecto que tenemos entre mano: 

• Aplicación Android para Monitor de Padel, realizado como proyecto por mis alumnos de 2ºCFGM de Sistemas Microinformáticos y Redes.

Hemos dividido el proyecto en 2 grandes bloques:

1. Gestión de Torneos de Pádel: Una de los apartados del proyecto hace referencia a la gestión de torneos a través de una aplicación móvil. Concretamente, la aplicación nos permitirá gestionar para cada torneo, los cuadros del mismo de una forma muy gráfica, basandonos en la utilización de Canvas y Drag&Drop.
2. Gestión de Clases de Pádel: El otro gran apartado será el de la gestión de las clases que imparten los monitores de pádel a sus alumnos. Se trata de una herramienta Cliente-Servidor mediante la cual el monitor de pádel podrá gestionar sus clases y sus alumnos desde el móvil o tablet, y sus alumnos podrán comprobar sus mejoras y avances a través de una aplicación web. Como novedad significativa y valor añadido, el monitor de padel podrá "crear" e modo gráfico, mediante Canvas y elementos propios de un monitor de pádel (conos, escaleras, pivotes, cuerdas, ...), actividades y ejercicios a realizar por sus alumnos

En la próxima entrada definiremos cada una de las partes del proyecto y asignaremos roles a los alumnos para su desarrollo.

Además, "disponemos" de la inestimable ayuda de 2 monitores de padel certificados, que nos asesorarán y ayudarán en la realización del proyecto.

Seguimos !!

Cálculo de fechas en app inventor

Buenas.
Perdonad la ausencia de tanto tiempo en el blog, pero las circustancias del trabajo me han hecho imposible continuar de forma asidua el desarrollo del mismo.

Hoy traigo una pequeña explicación de cómo podemos tratar y operar con fechas en app inventor.

El que haya programado anteriormente habrá comprobado que el tema de fechas y sus operaciones es en muchas ocasiones una "odisea". Hay lenguajes que sí tienen muchas funciones desarrolladas para ello, y otros no tantas ... y tenemos que generarlas nosotros mismos.

App inventor nos da una serie de opciones, definidas en el control RELOJ (Clock)



No es que sea excepcional, pero sí nos va a permitir seguir desarrollando opciones y funciones sobre las que ya nos da el objeto.

Vamos a trabajar sobre un problema real, que me propuso Luis Oliveros en una entrada anterior.

ENUNCIADO :
Queremos saber cuántas semanas y días nos quedan desde hoy hasta un día concreto (en el caso de Luis, el del nacimiento de un hijo/hija).
Por tanto partimos que sabemos la fecha final (prevista).

Nota:

Este programa se puede utilizar para hacer una cuenta atrás, por ejemplo, para saber cuánto tiempo queda para empezar el mundial, cuánto tiempo queda para que llegue el próximo año, cuánto tiempo queda para nuestro cumpleaños,...

QUÉ VAMOS A UTILIZAR:
Vamos a necesitar

• un objeto Clock, que será el elemento fundamental de nuestro programa.
• Tres objetos TextBox en el que insertaremos DÍA/ MES / AÑO sobre el que queremos calcular cuánto falta
• un objeto Label, en el que mostraremos la información
• un objeto Button, que nos realizará los cálculos pertinentes
  
• varias variables definidas por nostros que nos servirán para ir guardando la información que necesitaremos

Nota: todos estos objetos los hemos visto en otros Post (excepto Clock). Si tienes alguna duda de dichos objetos, consulta los Post anteriores.

 CÓMO VA A SER EL PROCESO:

• Vamos a rellenar los 3 TextBox con el día mes y año (fecha final) sobre la que queremos calcular cuánto falta para que llegue dicho día.
• Cuando pulsemos sobre el Button, comprobaremos qué día es HOY y calcularemos el número de milisegundos que hay entre la fecha de hoy y la fecha final (con el objeto Clock)
• Una vez que tenemos el número de milisegundos entre las 2 fechas... "sólo" hay que convertir esos milisegundos  en lo que deseemos (en nuestro caso, cuántas semanas y días, ... pero fácilmente podriamos calcular horas, minutos, años, ... lo que nos interese) (guardaremos estos datos calculados en variables)
• Finalmente lo presentaremos en el Label que hemos preparado para mostrar la información.

COMENZAMOS ...

1. Creamos un nuevo proyecto, llamado CuantoQueda
2. Insertamos los elementos que hemos comentado anteriormente (para darle una mejor visualización, he añadido alguno más,...pero eso no es lo importante en este proyecto)

3. Una vez tenemos la estructura, abrimos el "Block Editor" y generamos los siguientes bloques:
 

1. Vemos que definimos 3 variables:
 
• fecha_actual, en la que guardamos la fecha y hora actual, que nos servirá para calcular cuánto nos queda hasta la fecha final
• milisegundos_total, en la que guardaremos cuántos milisegundos hay entre la fecha actual y la fecha final.
• dias, en la que guardaremos cuántos días supone esos milisegundos entre las 2 fechas.
2. A continuación observamos la primera acción a realizar cuando hacemos Click sobre el botón, que es la de guardar la fecha actual con la función reloj.Now (nos devuelve un 'Instant', que es el elemento de fecha que entiende App Inventor, que no es mas que el número de milisegundos que hay entre 01/01/1970 y el momento actual ...¿¿?¿¿?¿?¿?¿?? .... no te preocupes de cómo funciona internamente el objeto Clock. Por ahora sólo tienes que saber que 'Now' te devuelve la fecha (y hora) actual.
3. Posteriormente, con dicha fecha actual y la fecha final (la creamos mediante el formato anglosajón MM/DD/AAAA), calculamos cuántos milisegundos hay entre estas 2 fechas, mediante la función de Clock llamada 'Duration', concretamente con reloj.Duration
 
4. Una vez que tenemos los milisegundos que faltan ... ya hay poco que hacer: Convertirlo a la unidad de tiempo que queramos. ¿Cómo?, pues como lo haríamos en un ejercicio de primaria...sabiendo pasar de milisegundos a segundos (dividiendo entre 1000), sabiendo pasar segundos a minutos (dividiendo entre 60), minutos a horas (dividiendo entre 60), horas en días (dividiendo entre 24), días en semanas (dividiendo entre 7),... Eso os lo dejo a vuestro conocimiento de conversión entre medidas de tiempo...cosa que está fuera del objetivo de la enseñanaza de la programación en App Inventor. En este caso en concreto, lo vamos a pasar a días, y utilzamos la siguiente función para calcular el número total de días entre las 2 fechas (pasamos los milisegundos a días)

5. La función 'ceiling' redondea un número con decimales al siguiente número Entero. Por ejemplo, el 7,2 nos devuelve 8 (cuando quedan 7,2 días para algo...realmente quedan 8 días)
6. Finalmente, rellenamos el Label de los resultados, con los cálculos pertienentes. Aquí sólo os voy a explicar un poco las funciones
 

7. 'quotient' nos sirve para quedarnos con la parte entera de una división, es decir, por ejemplo, si dividimos 20/7, esta división da como resultado 2,857142857, con lo que quotient nos devuelve el 2 (la parte entera del número)
8. Por otra parte está

9. que calcula el número de días "sobrantes" de las semanas completas, es decir, al total de días, le resta el número de días que hay en las semanas que quedan hasta la fecha final, quedándonos los días que no "rellenan" una semana (de 0 a 6 días nos dará esta operación).
10. Y aquí hemos terminado el ejercicio.

Os dejo el fichero del proyecto para que lo descargueis y lo probeis. No olvideis preguntar lo que os pueda surgir

Espero que os sirva!

Caso Práctico: Visualizar un fichero pdf

Vamos a ver un ejemplo de cómo podemos realizar una aplicación que abra ficheros pdf que tengamos en nuestro dispositivo android. También se explicará cómo visualizar un pdf que se encuentre en una dirección web.

El código está tomado de http://puravidaapps.com/snippets.php#pdf
Haremos unas pequeñas modificaciones para que resulte más entendible para los hispanos-parlantes


Empecemos

Lo primero, creamos un nuevo proyecto, que lo vamos a llamar pdfReader

Vamos a insertar los elementos que nos hará falta para la realización de la aplicación. Quedaría así:

 Podemos observar los elementos que hemos añadido:

• Un HorizontalArrangement, llamado menu, que contendrá los botones del menú que me permitirán mostrar los pdf pertinentes.
• Un Button llamado btnVerDesdeDispositivo, que abrirá un fichero pdf que se encuentre en la tarjeta sd.
• Un Button llamado btnVerDesdeWeb, que abrirá un fichero pdf que se encuentre en una dirección Web.
• Un componente WebViewer, llamado  WebViewer1, que es un visor web, en el que mostraremos el pdf a través del visor web que nos proporciona google.
• Un ActivityStarter, llamado ActivityStarter1, que es un componente muy interesante y potente que nos permite abrir aplicaciones externas a nuestro programa (instaladas en nuestro dispositivo móvil), para que realice una operación que nuestro programa no puede realizar. Veremos en posteriores Post más utilidades de este potente componente.En este caso, será el encargado de abrir la aplicación de Lector de PDF que tengamos instalado en el dispositivo (como puede ser Aldiko, Adobe Reader, ...)
• Un Notifier, llamado Notifier1, que nos permitirá mostrar información a modo de Pop-Up o Cuadro de Diálogo en nuestra aplicación
• También se ha añadido un componente Web, llamado Web1, que nos permite recoger datos HTTP GET o HTTP POST. Está puesto para posibles mejoras futuras, pero no será utilizado en este programa por ahora.

Pues visto los componentes, vamos a ver su comportamiento en el Block Editor:

Tenemos los códigos de los 2 botones:

• btnVerDesdeDispositivo.Click: Le decimos la Acción (que será VER), el tipo de Dato (PDF) y su DataUri (dónde se encuentra en nuestra tarjeta SD).
• btnVerDesdeWeb.Click: Le indicamos la dirección web que se va a visualizar, y en este caso, se utiliza la dirección de Google Docs, que nos permite abrir, entre otros, ficheros PDF (al igual que nos valdría para abrir ficheros .odt de Writer, o .doc de Word, hojas de cálculo, presentaciones Impress o Power Point, y un largo etcétera de tipos de fichero. Podeis ver más información en la página de Google Docs)

Pues nada, sólo nos queda probarlo.

Asegúrate que escribes bien el nombre del fichero pdf y que lo guardas correctamente en la tarjeta SD.

Está probado y funciona muy bien!

Se puede mejora mucho, como utilizando un explorador de ficheros y que pueda abrir el que deseemos, o que tengamos una lista (cargada de una base de datos) con ficheros pdf (o direcciones con pdf) y que carguemos uno u otro según nos interese. O aprovechando las características de Google Docs, que nos permita abrir distintos tipos de fichero (no únicamente pdf).

En fin, que tiene muchas posibilidades de mejora.

Si teneis dudas, no dudeis en consultármelas.

Hasta pronto!

Continuamos con App Inventor!!!

Pues sí, después de un largo periodo, vamos a continuar con las entradas sobre App Inventor. A partir de la semana que viene volveremos a introducir entradas.

Comienza mi grupo de este año a adentrarse en el mundo de la programación en Android a través de App Inventor, y al tratarse de un grupo con grandes posibilidades, intuyo que avanzáremos mucho en el aprendizaje de este 'lenguaje' de programación.

Iré redactando los avances que vayamos teniendo en la materia, y que pueda servir de introducción y aprendizaje para los que deseéis formaros en esta herramienta, que por los mensajes que me han llegado, sois unos pocos.

Nos vemos pronto

Scratch ...¿Otra forma de aprender a programar?

Este Post es únicamente para comentaros que existe una web, de cuya existencia sé por mi amigo y compañero Miguel, que tiene muy buena pinta para aprender programación de una forma muy similar a App Inventor,aunque por lo que he podido ver, no tiene el mismo propósito que éste.

Os dejo el enlace a dicha web: http://scratch.mit.edu

Lo único que os puedo comentar al respecto es que te tienes que descargar un software para su utilización. Si alguien le echa un vistazo y lo comenta en el blog, sería perfecto.

Variables, funciones, procedimientos, eventos, objetos, ... !!!PROGRAMACIÓN!!! . Parte 3 - Funciones

Bueno, pues después de ver variables y procedimientos, ... vamos a ver qué son las funciones.

Lo vamos a ver de la forma más sencilla posible: Una función no es más que un procedimiento (es decir, un grupo de sentencias agrupadas que realizan algo concreto y que admite unos argumentos) pero que además devuelve un valor.

Vamos a verlo con un ejemplo en App Inventor

Variables, funciones, procedimientos, eventos, objetos, ... !!!PROGRAMACIÓN!!! . Parte 2 - Procedimientos

Ya "sabemos" cómo funciona y para qué sirve una variable. Pero hay más ...
En este caso vamos a ver para qué sirve un procedimiento.
Al igual que en las variables, vamos a referenciaros a una explicación más o menos formal en http://www.babylon.com/definition/Procedimientos%20%28Programaci%C3%B3n%29/
Aquí diremos que se trata de un bloque, que tiene un nombre único, que realiza una operación concreta y que se puede utilizar todas las veces que queramos. Esto último es por lo que tiene más sentido el uso de procedimientos.

Variables, funciones, procedimientos, eventos, objetos, ... !!!PROGRAMACIÓN!!! . Parte 1 - Variables

Estamos viendo, y solo hemos comenzado, que App Inventor es una muy potente herramienta para realizar aplicaciones. Con hacer un diseño de la aplicación e irnos al Block Editor y poner un par de puzzles...¡tenemos una aplicación!!!

¿Qué fácil, no?

Bueno, sí y no. Aunque sea cierto que nos dicen que con App Inventor no hay que saber programar para hacer aplicaciones, no es menos cierto que hay que conocer ciertos conceptos de programación. En el último Post vimos el concepto del Condicional (IF..ELSE), válido para cualquier lenguaje de programación (aquellos que opteis por seguir formandoos en temas relacionados con programación, lo agradecereis y comprobareis que existe en cualquier lenguaje de programación).

Pues vamos a ver algunos conceptos que vamos a ir utilizando en App Inventor, cómo utilizarlo en App Inventor ... y serán conceptos que nos servirán para futuros proyectos en cualquier lenguaje de programación. Así que atentos!!!
Este Post lo dedicamos a LAS VARIABLES