Día de hackaton (Edición 1, Marzo 2015)

Hoy tengo día libre, y ¿qué significa eso? Pues que lo voy a dedicar a realizar una idea que me lleva rondando la cabeza y que me hará la vida más fácil.

La idea en cuestión es simple, necesito una herramienta que, después de seleccionar varias recetas con el número de personas para los cuales quiero hacerlo, que me diga qué tengo que comprar en el supermercado juntando todos los ingredientes.

Esta idea tiene dos objetivos:

  • Sacar dicha idea y facilitarme la vida cada vez que voy al supermercado, en donde no se qué comprar y tardo muchísimo.
  • Aprender tecnologías que no utilizo, como pueden ser backbone.js, foundation,…

¿Qué pasos he de seguir para llevar a cabo mi idea?

  1. Primero necesito saber las pantallas principales que tendrá mi aplicación. En mi caso son fundamentalmente 2: La de la lista de recetas y la del listado de ingredientes a comprar. Como podéis ver deliberadamente me he dejado tanto la parte de gestión de usuarios como de introducción de recetas,… Al final lo que buscamos es el producto mínimo viable, y a partir de ahí ya iremos añadiendo funcionalidades si realmente tenemos tiempo. (9:00-9:15)
  2. Base de datos: Utilizaré mysql. Escribo en una hoja de papel o mediante el MySQL Workbench (gratuito) un esquema simple de cómo irá y de las relaciones de cada una de las tablas. Escribir un registro en cada tabla para hacer pruebas. (9:15-9:45)
  3. Instalar el framework MVC que utilizaré. He intentado utilizar symfony, pero no tengo una versión 5.4 o posterior de php, como lo cual me decantaré por yii (ya lo utilizo diariamente, con lo cual no me pillará de nuevas). Primeramente habrá que instalarlo, después pasarle el generador automático de modelos. (9:45-10:15)
  4. Empezar a crear la pantallas básica, sin nada gráfico (10:15-11:15)
  5. Hacer el API en sí. En principio tendré 4 funciones(que después por supuesto aumentarán): Función de tomar recetas y de buscar por un texto recetas (GET), recibiendo las recetas que queremos llevar a cabo juntar todos sus ingredientes y guardar el listado de elementos (POST), tomar el listado de ingredientes totales (GET). Aquí es en donde me encuentro con el primer desafío, entender qué es backbone js, ver cómo hacer peticiones get mediante este framework y ver como almacenar igualmente datos (11:15-14:15).

Resultado

Al final he conseguido tener las páginas y el funcionamiento hecho, aunque sin diseño alguno y todo de forma muy muy básica. Es una aplicación que tendré que mejorar muchísimo y que tendrá dos partes principales en una primera etapa, una de ellas es la de introducir más recetas y otra de ellas es la de darle un mínimo diseño.

Conforme pasen los días y lo mejore un poco pondré capturas de pantalla (ahora mismo me daría vergüenza hacerlo.

Problemas que me he encontrado

Backbone js: Me lo imaginaba más sencillo e intuitivo. Es cierto que se pueden hacer cosas interesantes, pero en el momento en que te sales un poco del standar (lo único que intentaba hacer era una vista de una colección) se complica un poco.

Apps nativas vs apps basadas en web vs apps hibridas

Como todos sabréis, actualmente hay tres tipos de aplicaciones móviles: Nativas, basadas en web e híbridas.

apps_hibridwebnative

  • Una aplicación nativa es aquella que está escrita en java (en el caso de android) o en Objetive-C (en el caso de iOS). Como características decir que tiene acceso completo a las funcionalidades de hardware del dispotivo y sólo puede descargarse desde las app stores.
  • Una aplicación para web son webs que utilizan toolkits especiales de javascript (como jQuery Mobile y Sencha Touch) y css personalizados para hacer que los sitios parezcan y funcionen como apps nativas. Sin embargo, sólo pueden ser accedidas a través de navegador, no pueden ser descargadas desde la app store y no tienen acceso a las funciones de hardware del móvil/tablet.
  • Las aplicaciones híbridas están en el medio de las dos anteriores. Básicamente son webs que están embebidas dentro de código nativo. Lo bueno es que esto te permite utilizar funciones que utilicen características propias del dispositivo (como vibración, cámara, …), y todo ello conociendo únicamente HTML y JavaScript. Un ejemplo de una herramienta que sirve para el embebido de esta web en la aplicación es phonegap. El principal problema de esta forma de hacer las apps es que nunca serán tan buenas como las aplicaciones nativas (más lentas y menos usables, por mucho que se piense lo contrario).

Aquí te dejo un gráfico interesante con información de ello:

app_nativevshybrid

También os dejo una imagen que me ha encantado y que refleja como ninguna a qué problemas nos enfrentamos al escoger una u otra:

Hibrido Vs Nativo

¿Cual será la próxima que escogerás para hacer una aplicación para móviles?

keydown, keypress o keyup

En resumen tendremos lo siguiente:

  • El evento keydown se activa cuando el usuario presiona una tecla. Se repite mientras el usuario mantenga la tecla presionada.
  • El evento keypress se activa justo cuando el caracter presionado está siendo insertado. Se repite mientras el usuario mantenga la tecla presionada.
  • El evento keyup se activa cuando el usuario deja de presionar una tecla. DESPUÉS que la acción por defecto de esa tecla ha sido realizada.

El problema que tenía: Había puesto un evento keydown al rellenar una caja de texto. Cuando tecleaba y comprobaba qué texto teníamos en el input no se encontraba la última letra. Al cambiarlo a keyup dejé de tener dicho problema puesto que lo que obtenía es lo que iba tecleando.

Más info en http://quirksmode.org/dom/events/keys.html

Como hacer un placeholder que funcione en todos los navegadores

Hoy me he encontrado con el problema de que estaba intentando hacer un placeholder de inputs y, evidentemente, sólo me funcionaba en aquellos navegadores que soportaran mínimamente

Primeramente utilicé este truco (es perfecto hasta que intentamos hacerlo en elementos input de tipo password)

  1. Descargarme el jquery e incluirlo en la página.
  2. Incluir lo que aparece en la siguiente página.

El código es:

<input type="text" placeholder="Fill me …">

 

Y posteriormente el jquery a añadir:

$('[placeholder]').focus(function() {
  var input = $(this);
  if (input.val() == input.attr('placeholder')) {
    input.val('');
    input.removeClass('placeholder');
  }
}).blur(function() {
  var input = $(this);
  if (input.val() == '' || input.val() == input.attr('placeholder')) {
    input.addClass('placeholder');
    input.val(input.attr('placeholder'));
  }
}).blur();

 

Pero al final utilicé esta otra opción, que resultó perfecta tanto para los input text como para los password.

  1. Descargar el jquery e incluirlo en la página.
  2. Descargar el siguiente archivo javascript (puedes encontrarlo actualizado y con su documentación en la siguiente página).

El código a insertar es:

<input type="text" name="name" placeholder="e.g. Jesus Perez">

Y el jquery a incluir es:
$('input, textarea').placeholder();

Espero que os haya servido!!

Obtener el datetime actual a través de jquery

Con estas líneas de código lo que haré será que cuando clique en un enlace, automáticamente se me situe el datetime actual en un input, listo para ser enviado y almacenado como campo DateTime en mySql

Código HTML

<input id=”inputFecha” type=”text” name=”User[delete_date]” value=”” />
<a id=”enlace” href=”#”>Enlace</a>

 

Código Javascript utilizado

$(document).ready(function(){
$('#enlace').click(function(event){
	event.preventDefault();
	var param1 = new Date();
	var param2 = param1.getFullYear() + '-' + (param1.getMonth()+1) + '-'
 + param1.getDate() + ' ' + param1.getHours() + ':' + param1.getMinutes()
 + ':' + param1.getSeconds();
	$('#inputFecha').val(param2);
});
});

Y es que como sabéis al final el datetime en sql tiene que ser del tipo: 2013-12-11 11:25:00

Código para pasar lo que haya en un canvas a una imagen

Este es el javascript que permitirá mostrar en la página el screenshot del canvas cada vez que le damos a un botón con id #guardarSketch.

$('#guardarSketch').click(function(){
	var canvas = document.getElementById("sketch");

	var img = new Image();
	img.src = canvas.toDataURL();

	$('#imagenesAGuardar').append(img);
});

Muy importante el hecho de crear una nueva imagen, puesto que sino te mostrará la misma imagen muchas veces.

Phonegap, ejemplos de código y posibilidades

El phonegap es una herramienta muy interesante a la hora de crear tus propias aplicaciones móviles sin necesidad de saber los lenguajes de programación de android (java) ni de iOs (Objetive-c). Mediante html, css y js podrás tener una aplicación multiplataforma (te ahorrarás muchas líneas de código).

Las APIS que posee el Apache Cordova (phonegap) y con las cuales se pueden jugar:

  • Acelerómetro – Con él se puede acceder al acelerómetro del dispositivo y guardar las modificaciones del movimiento relacionadas con la orientación.
  • Cámara – Con esta librería se puede acceder a la cámara y a la galería de imágenes de un dispositivo. (Utilizada en F2L, aunque había que insertar plugins)
  • Capturador de ficheros media – Grabar ficheros de audio, capturar imágenes o grabar vídeos.
  • Compás – Se puede obtener la dirección a la cual el dispositivo está apuntando.
  • Conexión – Se puede ver el tipo de conexión que tenemos (None, Ethernet, WiFi,Cell_2G,….).
  • Contactos – Se puede trabajar con la base de datos de contactos del dispositivo.
  • Dispositivo – Se puede obtener el modelo, la versión de phonegap, el nombre del sistema operativo, el identificador único y la versión del sistema operativo.
  • Eventos – Se puede ver cuando Cordova está cargado, cuando la aplicación se pone en segundo plano, cuando se vuelve a pasar a primer plano, si está online o no, el estatus de la batería,… (Utilizada en F2L)
  • Ficheros – Se puede escribir, leer y eliminar los ficheros en el sistema de un dispositivo.
  • Geolocalización – Se puede obtener información de geolocalización de un dispositivo desde el GPS, la dirección IP, RFID, direcciones WiFi y Bluetooth Mac, e ids GSM/CDMA de móviles.
  • Globalización – Permite obtener información de la lengua preferida, el localename, convertir fechas a cadenas y viceversa, obtener la moneda, el primer día de la semana,…
  • InAppBrowser – Se pueden lanzar urls en otras instancias del navegador.  (Utilizada en F2L)
  • Media – Grabar y reproducir ficheros de audio.
  • Notificaciones – Con esta opción se puede acceder a la notificaciones visuales, de audio o de vibraciones de un dispositivo.
  • Splashscreen – Muestra y oculta la pantalla splash de aplicaciones. (Utilizada en F2L)
  • Almacenamiento – Se pueden almacenar variables en el mismo móvil y después volverlas a recuperar. (Utilizada en F2L)

Cosas a parte de esas que se pueden hacer:

  • Hacer traducciones (con ayuda por ejemplo de apis como http://mymemory.translated.net )
  • Integración con Facebook.
  • Integración con Google Maps.
  • Realizar un carrito de la compra.
  • Tener bases de datos internas.
  • Integración con Twitter
  • Utilización del canvas para HTML
  • Utilizar cualquier API que se quiera a la que se pueda acceder mediante ajax

 

Ejemplos de aplicaciones con código disponible:

 

Página con un montón de aplicaciones que han utilizado phonegap http://phonegap.com/app/, ejemplos:

 

Espero que os haya valido para algo (yo al menos tengo un lugar al que acudir para acceder a los links que he encontrado).

(Actualización Junio 2015) He encontrado una página en donde te explican paso a paso cómo hacer un gestor de ingresos y gastos, aquí os lo dejo: http://www.sitepoint.com/creating-an-expense-manager-app-with-apache-cordova/

Dialog vs Popup – Jquery Mobile

La primera de las opciones (dialog) te abrirá una nueva página con el “pop up” en medio mientras que la segunda (popup) te abre esa ventanita por encima de la misma página. Esa es la diferencia más evidente.

A la pregunta… ¿pero puedo poner un diálogo por encima de una capa de texto? la respuesta es no, tienes que modificar y hacer que sea un pop up.
El diálogo (fuera de todo data-role=”page”)
<div data-role=”dialog” id=”documento” data-theme=”d” data-overlay-theme=”d” >
LO QUE SEA
</div>
Se le llamará con un enlace que tenga data-rel=”dialog”
Más info en jquery mobile.

El pop up (dentro del data-role=”page” en el cual queramos mostrarlo)
<div data-role=”popup” id=”documento” data-theme=”d” data-overlay-theme=”d” >
LO QUE SEA
</div>
Se le llamará con un enlace que tenga data-rel=”popup”.
Más info en jquery mobile.

Pack de iconos para jquery mobile

Como os habréis dado cuenta, siempre hay un problema cuando uno intenta utilizar los iconos que hay por defecto en el jquery mobile, y es que son muy pocos.

Para eso está este packs de iconos (realmente sería más correcto decir que es una fuente con doscientos y pico iconos en vez de caracteres).

Podéis encontrarlo en esta página http://andymatthews.net/code/jQuery-Mobile-Icon-Pack/index.html y podéis ver su totalidad si en esa misma pantalla accedéis al “Font Awesome Icons”.

Es muy fácil de instalar y de utilizar (con simplemente incluir un <i class=”icon-envelope icon-white”></i> yo puedo incluir un icono con forma de sobre de color blanco)

Cómo recargar una página utilizando jQuery

Simplemente con el código que pongo aquí debajo se puede hacer que una página se refresque.

    $(document).ready(function() {
        $('#miboton').click(function() {
            // Recargo la página
            location.reload();
        });
    });

Y este sería el botón en cuestión

<input id="miboton" type="button" value="Refrescar" />