El otro día, buscando formas más fáciles de desarrollar apps, me encontré con Thunkable el que podría ser el sustituto de appInventor.

Al parecer, algunos de los programadores de appInventor desde el MIT vieron que su uso no estaba siendo únicamente para fines educativos como pensaron en un principio sino que más del 50% se utilizaba fuera de ese ámbito. Por ello, han creado una empresa para sacar adelante un proyecto basado en appInventor pero mejorado con el nombre de Thunkable.

Actualmente está en una versión beta que se puede probar de forma gratuita y que ya contiene algunas mejoras significativas comparando con su antecesor:

  1. Compatibilidad con GoogleMaps
  2. Mayor cantidad de ejemplos y tutoriales
  3. Posibilidad de importar tus desarrollos de appInventor (mejorando automáticamente la interfaz debido a su compatibilidad con las nuevas versiones Android)
  4. Soporte técnico y de ayuda
Interfaz thunkable

Interfaz de desarrollo Thunkable

 

Esto es solo el principio ya que están trabajando en otras funcionalidades como exportar tu desarrollo a iOS (iPhone, iPad) y la posibilidad de hacer desarrollos colaborativos entre varios usuarios., algo que viene muy bien para equipos de personas en empresas.

Todos estos avances van a suponer una evolución muy positiva para los que utilizamos appInventor y los que buscamos maneras de crear apps sin programar código pero va a llevar a una consecuencia lógica, utilizar la herramienta va a tener un coste. En principio tienen pensado que para los usuarios particulares será una cuota mensual de entre 5-10$ y además existirá una cuota premium para empresas de cuyo coste aún no se ha mencionado nada.

Dejo aquí el enlace a una entrevista que les hicieron.

Como último detalle, mencionar que todas las personas que tenemos cuenta en appInventor podemos utilizarla para conectarnos a Thunkable y probar sus mejoras.

Ánimo y a esperar más novedades.

Una opción que podemos hacer con App Inventor y que me ha parecido muy interesante es la de compartir. En esta entrada voy a explicar de manera muy básica cómo compartir archivos almacenados en nuestro dispositivo con otra app que tengamos instalada y que sirva para poder enviar contenido. El ejemplo que voy a poner será un botón que al pulsarlo me permitirá elegir con qué aplicación voy a compartir archivos, en este caso utilizaré un archivo con nombre específico para la demostración.

1.- El primer paso es muy sencillo: sacaremos a nuestro diseñador de pantalla los elementos que vamos a utilizar, en mi caso un botón y un componente “compartir”. Este nuevo componente lo podemos encontrar en la sección “Social”.

2.- Cambiamos el texto del botón a “Compartir archivo” para darle un poco de sentido al ejemplo.

Compartir archivo - diseñador

Compartir archivo – diseñador

3.- Ahora ya podemos pasar al editor de bloques. Utilizando el bloque “cuando boton1.clic ejecutar” haremos que al pulsar el botón se produzca una acción. A este bloque le añadiremos uno llamado “llamar compartir1.CompartirArchivo” al que le podemos añadir como texto la ruta y nombre del archivo que queremos compartir.

Quedaría de esta manera:

Compartir archivo - bloques

Compartir archivo – bloques

Aunque este ejemplo es muy básico, se puede aplicar a muchos casos. Un ejemplo sería utilizarlo en la entrada anterior que escribí para poder compartir el archivo de sonido que hemos grabado.

 

Gracias a una petición de uno de los comentaristas en una de las entradas anteriores, he decidido hacer un pequeño tutorial básico sobre cómo grabar sonidos con el grabador de voz para después reproducirlo.

Este tutorial está hecho de la manera más básica para entender un poco el funcionamiento del elemento de grabación de sonidos y ver que es bastante sencillo de utilizar ya que no dispone de muchas opciones.

  1. El primer paso es sacar todos los elementos que vamos a utilizar en el diseñador de pantalla. En este caso los elementos son:
    1. Dos disposiciones horizontales para meter unos botones y que estén bien alineados.
    2. Tres botones que servirán para controlar el comienzo, final y la reproducción del sonido.
    3. Un elemento de grabación de sonidos.
    4. Un elemento reproductor.

      listado de componentes

      listado de componentes

  2. El siguiente paso es adecentar un poco la pantalla con los botones para que se vean bien y que el usuario sepa cómo utilizarlos. En este caso dentro de la primera disposición hemos puesto un botón para iniciar la grabación de sonidos y otro para detener la grabación. Ambos ajustados al ancho del contenedor.
  3. En la otra disposición pondremos el tercer botón que queda (también ajustado al contenedor)  y que servirá para reproducir la última grabación realizada. Esto lo he hecho así para que se vea el funcionamiento del grabador de sonidos. En la mayoría de los casos lo lógico sería utilizar un elemento de almacenamiento para poder guardar todos los sonidos y posteriormente elegir uno para reproducir.

    elementos en la pantalla de diseño

    elementos en la pantalla de diseño

  4. Ahora pasamos al apartado de los bloques. Este apartado lo he dividido en 5 pequeños bloques:
    1. El primero contiene únicamente una variable global que utilizaremos para hacer un control de errores en los botones para que no comience una grabación que ya está en curso o que no detenga una grabación que ya esta parada. En este caso la variable la he llamado “grabando” y la he puesto a “falso” utilizando una pieza del bloque de lógica.

      variable global

      variable global

    2. En el segundo bloque programamos el botón de iniciar la grabación de la siguiente manera:
      • Sacamos el bloque “cuando Boton1 .click ejecutar”.
      • Dentro introducimos el bloque de control “si entonces”.
      • En la condición “si” engancharemos un bloque de lógica para comparar que 2 elementos sean iguales: el primero será la variable global “grabando” y el segundo será una pieza del bloque de lógica que indica “falso”.
      • Dentro de la resolución “entonces” añadimos el bloque “llamar GrabadorDeSonidos1.Iniciar” para indicar que se va a iniciar y a continuación ponemos la variable “grabando” a “cierto”.

        botón grabar sonido

        botón grabar sonido

    3. Para el siguiente bloque haremos exactamente lo mismo pero con algunos pequeños cambios ya que se trata del siguiente botón que hará detener la grabación:
      • En la condición “si” el segundo elemento a comparar será una pieza del bloque de lógica que indica “cierto”.
      • Dentro de la resolución “entonces” añadimos el bloque “llamar GrabadorDeSonidos1.Detener” y a continuación ponemos la variable “grabando” a “falso”.

        botón detener grabación

        botón detener grabación

    4. El siguiente bloque lo sacaremos del apartado de GrabadorDeSonidos1 que será “cuando GrabadorDeSonidos1.DespuésDeSonidoGrabado ejecutar”. Aquí pondremos la pieza “poner Reproductor1.Origen como” y junto a esta la pieza “tomar Sonido” que se puede obtener haciendo click en el parámetro “sonido” y elegir la opción “tomar”.

      asignar grabación al reproductor

      asignar grabación al reproductor

    5. El último bloque contendrá la programación del botón restante, el de reproducir el sonido. Para ello haremos lo siguiente:
      • Sacar la pieza de “cuando Boton3.click ejecutar” y añadimos la condición “si entonces” (esto es igual que con los otros botones).
      • En la condición “si” pondremos otra pieza de comparación de elementos pero esta vez la comparación será si es distinto. El primer elemento a comparar será “reproductor1.origen” y el segundo será un elemento vacío ” “. Esto es para que solamente reproduzca un sonido si se ha grabado algo.
      • Dentro de la resolución “entonces” añadiremos la pieza “llamar Reproductor1.Iniciar”. De esta manera se iniciará la reproducción.

        botón reproducir sonido

        botón reproducir sonido

Con estas pocas piezas de puzzle podemos hacer que el móvil grabe un sonido y reproducirlo. A partir de aquí ya es usar la imaginación y adaptar estos elementos a los distintos casos que se quieran programar.

Aunque en las entradas anteriores sobre App Inventor siempre los nombres de los objetos son en ingles, desde hace ya un tiempo está la posibilidad de trabajar con otro idioma. En este caso vamos a ver cómo cambiar al idioma español para quienes prefieran ver todas las opciones en español.

Dentro de un proyecto, ya sea en el apartado de diseño o en el bloques, en el menú superior a la derecha justo al lado de la opción “Report an Issue” se muestra un pequeño icono que simboliza el mundo. Haciendo click en ese icono podemos cambiar el idioma de la interfaz donde una de las opciones es el español. De esta manera se cambiarán todos los nombres de los objetos y menús.

pantalla diseño app inventor

pantalla diseño app inventor

Así que a partir de ahora en las entradas posteriores mostraré el nombre de los objetos y menús en español.

MWC Barcelona

MWC Barcelona

Esta semana es el MWC (Mobile World Congress) en Barcelona y con ello hay muchas novedades con respecto a tecnologías para los dispositivos móviles. Muchas marcas importantes presentan sus nuevos productos y por el momento parece que la tendencia son los wearables, dispositivos electrónicos portátiles que podemos llevar puestos como por ejemplo: relojes inteligentes, pulseras que registran datos de nuestra salud o incluso las famosas Google Glass.

Por el momento el wearable que más da de qué hablar es el reloj inteligente. Algunos nuevos modelos con capacidad para consultar emails o realizar llamadas ya se están mostrando en el evento. O incluso con la capacidad de conectarse a otros wearables para formar el conjunto perfecto (reloj, auriculares y brazalete inteligente).

Esto sólo es el comienzo, se esperan muchas más cosas el resto de los días del MWC pero hay algo cada vez más claro, todos estos dispositivos disponen de sistema operativo y de apps instaladas para ofrecer al usuario los mejores servicios y comodidades. En poco tiempo todos tendremos wearables en nuestras vidas por lo que el desarrollo de apps para estos dispositivos se verá incrementado.

 

Tras una temporada de descanso y viendo que muchos de los comentarios son en la categoría de App Inventor, añadiré más contenido en esta categoría aunque sin descuidar las demás. Por ello vamos con un nuevo y muy util elemento: TinyDb

Este elemento sirve para guardar datos en la app, es recomendable utilizarlo cuando lo que se quiere guardar no es una gran cantidad de datos. Para las grandes cantidades se recomienda utilizar otro elemento.

En este ejemplo veremos cómo guardar y mostrar un dato introducido por el usuario, su nombre. El funcionamiento sería que el usuario introduce su nombre y pulsa un botón para guardarlo. A continuación puede pulsar otro botón para mostrar el dato en una label.

  1. El primer paso es sacar todos los elementos que vamos a utilizar a la pantalla. En este ejemplo son: 2 label, un textbox, 2 botones y el elemento tinydb. Este último elemento se encuentra en el apartado “Storage” en la columna izquierda.
  2. Configuramos el texto para que sea un poco coherente con lo que vamos a hacer. Quedaría de esta manera:

    pantalla ejemplo tinydb

    pantalla ejemplo tinydb

  3. Lo siguiente ya es ir a los bloques y empezar a sacar piezas para guardar el dato:
    1. De la sección del boton1 que hemos puesto hay que sacar la pieza “when button1.click”.
    2. Dentro introducimos una estructura de control “if then” sacada del grupo “control” que nos servirá para comprobar si el usuario ha introducido algún dato.
    3. En la condición “if” introduciremos una operación lógica con el símbolo distinto en el que el primer parámetro será el texto introducido por el usuario, estos es, “textbox1.text” del bloque del textbox que tenemos. El segundo parámetro será simplemente el texto ” ” obtenido del bloque “text”.
    4. En la parte “then” introduciremos la pieza “callTinydb1.StoreValue” sacada del objeto tinyDb1 (nuestra base de datos). Esta misma pieza requiere 2 más, la primera será un texto con el nombre que le queramos dar al dato que guardamos, en mi caso le he llamado “nombreUsuario”, y la segunda el valor de lo que ha introducido el usuario. Esto es, “textbox1.text”.

      Guardar dato - ejemplo db

      Guardar dato – ejemplo db

  4. Una vez el texto esta guardado falta hacer la parte de mostrarlo por pantalla. Para ello sacamos las siguientes piezas:
    1. De la sección del boton2 que hemos puesto sacamos la pieza “when button2.click”.
    2. Dentro introducimos la pieza “set label2.text” que sacamos del grupo de la label2 y le adjuntamos la pieza “call tinyDb1.GetValue” que obtenemos desde el grupo de nuestra tinyDb.
    3. A esta pieza le añadimos en la parte “tag” el texto con el mismo nombre que hemos llamado al valor que guardamos, esto es, “nombreUsuario”. En caso de que no exista ningún valor podemos mostrar un texto vacío o una frase indicando que no hay dato adjuntando el texto en la parte “valueIfTagNotThere”. En mi caso he dejado vacío pero sería recomendable mostrar un texto indicando que no hay datos guardados.

      Mostrar dato guardado - ejemplo db

      Mostrar dato guardado – ejemplo db

Con estos bloques ya funciona nuestro pequeño ejemplo de guardar y mostrar datos. Algo que hay que tener en cuenta es que los datos que se guardan en un objeto TinyDb NO se borran al salir de la app. Sólo se borran si se borra la cache del móvil desde el panel de administración de aplicaciones.

Para más información, como siempre en la documentación de AppInventor

App Inventor 2

App Inventor 2

Después de mucho tiempo sin escribir, vuelvo con más ganas de hacer apps. Y qué sorpresa tan grata me he llevado al ver que ha salido una nueva versión de App Inventor. El otro día la probé y esta muy bien la verdad. Aquí explico un poco con lo que me encontré:

Lo primero que vi fue que ahora la url para acceder es distinta. Como es la versión 2, la url sería la siguiente http://ai2.appinventor.mit.edu para poder acceder a tu panel personal donde poder desarrollar las apps.

Una vez en el panel lo primero que noté fue que la cabecera y las opciones de menú son distintas. En la cabecera de la web tenemos las opciones para crear un nuevo proyecto, guardarlo, importar alguno que tengamos guardado y también podemos conectarnos al dispositivo android o abrir el emulador. Además, con la opción de “build” podemos crear el archivo .apk o mediante un código QR instalar la app en nuestro móvil. Estos son los cambios más importantes en la cabecera.

En el menú, ahora tenemos por un lado los botones para añadir una nueva pantalla o borrar una que ya tengamos, y en el lado derecho los botones para cambiar entre el panel de diseño y los bloques.

Cuando vamos al apartado de bloques vemos un cambio considerable en la pantalla. El menú de la lista de bloques lo tenemos a la izquierda de la pantalla y las piezas de puzle ahora están más resaltadas, coloreadas y con el texto mas legible. La mayoría de las piezas son las mismas pero ahora puedes modificar fácilmente entre una y otra ya que todas ellas poseen una lista desplegable para elegir el elemento sobre el que trabajar en caso de tener más de uno igual (como por ejemplo 2 botones, o 2 imágenes).

Estos son los mayores cambios en cuanto a la programación de apps. Pero también hay algunas variaciones a la hora de instalar y poder usar nuestra app.

Existen 3 métodos para instalar App Inventor y probar nuestros programas:

1.- El método más fácil de seguir y que está altamente recomendado es el de probar nuestro código en un dispositivo android que tenga acceso a internet (preferiblemente Wifi). Con este método simplemente debemos descargarnos la app de App Inventor desde el market de Google y desde el menú de “Connect” pulsamos “AI Companion”. El programa nos proporcionará un código QR el cual podremos insertar en nuestro dispositivo android cuando abrimos la app descargada. Y con esto ya estamos conectados a nuestro panel de desarrollo para poder probar en vivo todo lo que hacemos.

2.- Si no disponemos de un dispositivo android tendremos que usar un emulador. Para ello nos descargamos de aquí el programa de App Inventor y lo instalamos en nuestro sistema operativo (en Linux todavía no han publicado los pasos). Una vez instalado lo ejecutamos y desde nuestro panel de desarrollo ya podemos dale a “Connect”-> “Emulator”. Es muy sencillo también.

3.- Si tenemos un dispositivo android pero no sin internet, podriamos optar por la opción de probar nuestro código en el dispositivo conectado a nuestro ordenador con un calbe USB. En este caso también deberemos descargar e instalar la aplicación de App Inventor en nuestro ordenador. Además, también deberemos tener instalada la app en el dispositivo. Una vez tengamos estas dos cosas podremos ejecutar la de nuestro ordenador y desde el panel de desarrollo darle a “Connect”->”USB”. Con esto ya podremos ver nuestra app en el dispositivo.

Esto es por ahora lo nuevo de App Inventor. A seguir desarrollando!

Google Maps

Google Maps

Ayer Google publicó una nueva actualización muy importante para su tan conocida app de mapas en Android, Google Maps.

Estas son sus características:

  • Compatibilidad: Únicamente está disponible para Android 4.0.3 en adelante.
  • Adaptación: Ahora la app está especialmente adaptada para Tablets.
  • Nueva manera de explorar: Google ha querido centrarse más en la experiencia del usuario y ha mejorado la forma de explorar con los mapas. Ahora no requiere escribir tanto ya que Google recomienda los lugares de interés cercanos para visitar, comer, etc. según la ubicación.
  • Navegación de rutas optimizada: Teniendo en cuenta el tráfico actual de la ruta elegida, te recomienda la manera más rápida de acceder a tu destino incluso cuando estás en mitad del viaje.
  • Nuevo sistema de puntuación de estrellas 5.0: Incorpora una forma de puntuar los lugares visitados de manera que al realizar una búsqueda muestra la valoración que tus contactos han hecho en ese sitio.
  • No existe sistema de check-in: Google ha decidido eliminar esta característica a partir del 9 de Agosto.
  • Modo offline: Ya no estará disponible la funcionalidad de mapas sin conexión.

Este es un resumen de las modificaciones que tiene esta nueva actualización. En este enlace están los detalles.

Hoy vamos a ver cómo podemos crear una lista desplegable con opciones para elegir. Este componente suele ser muy habitual en las apps sobre todo para elegir localidades, fechas, etc.

  1. El primer paso como siempre es tener un proyecto ya creado o crear uno.
  2. A continuación añadimos el código necesario para crear nuestra lista desplegable con las opciones que queremos. Éste sería el código:

Como podemos observar en el código, la lista desplegable está dividida en varias partes:

  • Picker: Es el elemento principal. En este aparatado indicamos las propiedades que queremos que tenga.
  • PickerColumn: Con este componente indicamos que vamos a añadir una columna. Este quiere decir que podemos hacer una lista desplegable de varias columnas juntas. Esto es más habitual cuando queremos que el usuario elija fecha y hora.
  • PickerRow: Este parámetro indica cada fila que tendrá la lista desplegable. Con el atributo “title” mostraremos el texto que tiene que aparecer en la fila.
<Alloy>
	<Window class="container">
		<Picker id="selector" selectionIndicator="true">
            <PickerColumn id="columna1">
                <PickerRow title="Opción 1" />
                <PickerRow title="Opción 2" />
                <PickerRow title="Opción 3" />
                <PickerRow title="Opción 4" />
            </PickerColumn>          
        </Picker>
	</Window>
</Alloy>

Además de estos atributos podemos añadir más para modificar su apariencia a nuestro gusto. En este enlace se indican todas las propiedades y eventos.

El código que acabamos de hacer es una forma sencilla y estática de crear una lista desplegable pero, ¿cómo podríamos hacerlo de manera que se rellene automáticamente? En el archivo .js que hace referencia a la vista donde hemos añadido nuestra lista, en mi caso index.js, he incluido el siguiente código que simplemente añade una fila extra al objeto.

var fila = Ti.UI.createPickerRow({title: "fila nueva"}); //Definimos uan variable que será la fila nueva y la creamos indicando el texto que mostrará
$.selector.add(fila); //añadimos la fila a la lista desplegable con id=selector.

Así queda el resultado.

Ejemplo de lista desplegable

Ejemplo de lista desplegable

 

Gracias a jQuery Mobile podemos crear una lista desplegable con estilos definidos y muy usable de cara al usuario. Vamos a ver cómo crear una de forma muy sencilla:

  1. El primer paso es el de siempre, debemos tener creado un proyecto o crear uno.
  2. En el archivo donde queremos mostrar nuestro listado añadiremos el código necesario para crearla. Esto incluye una label que indica al usuario lo que debe hacer y la propia lista con sus atributos y elementos.
  3. La lista con los elementos consta de 2 partes:
    • Select: Esta etiqueta es la principal para crear el listado y es donde se indican los atributos como el nombre que tendrá, el id y los eventos que podemos añadir.
    • Option: Cada opción está incluida dentro de una etiqueta “option” con un atributo “value” que indica el valor de dicha opción.

Así, el código sería el siguiente:

<head>
	<title>Listas</title>
	<!-- Incluimos los archivos de estilos y liberías jQuery -->
	<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.min.css" />
	<script src="jquery.mobile/jquery-1.7.2.min"></script>
	<script src="jquery.mobile/jquery.mobile-1.1.0.min.js"></script>
	</head>
	<body>
		<label for="lista-opciones" class="select">Elige una opción</label>
		<select name="lista" id="lista-opciones">
		   <option value="1">Opción 1</option>
		   <option value="2">Opción 2</option>
		   <option value="3">Opción 3</option>
		   <option value="4">Opción 4</option>
		</select>
	</body>

 

Con esto ya tenemos la lista desplegable creada y con buen resultado.

Ejemplo de lista desplegable

Ejemplo de lista desplegable

Además de estas propiedades, existe un gran listado con eventos incluido para poder configurar a gusto de cada uno. Éste es el enlace.

 

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies