Objeto JSON en javascript: JSON.stringify vs JSON.parse

El objeto JSON contiene los métodos necesarios para analizar el JavaScript Object Notation (JSON) y, a su vez, convertir valores a JSON. A continuación se esponen los métodos de los que consta:

JSON.parse(text[, reviver])
Convierte una cadena de texto en un objeto de javascript.

Parámetros
– text: La cadena que convertirá a JSON. Vea el objeto JSON para una descripción de la sintaxis JSON.
– reviver (Opcional): Función que sobreescribe cómo se transforma el valor producido por el parsing.

Retorna el objeto que se corresponde con el texto JSON entregado.

JSON.parse('{"p": 5}', function (key, value) {
    if(key === "") return value;     
    return value * 2;             
});                           
// { p: 10 }

JSON.stringify(valor[, remplazo [, espacio]])
Convierte un valor dado en javascript a una cadena JSON.

Parámetros
– valor: El valor que será convertido a una cadena JSON.
– función de remplazo (Opcional): Es una función que altera el comportamiento del proceso de conversión a cadena de texto, o un array de objetos String o Number que representan una lista de elementos validos que se incluyen en la cadena JSON.
– espacio (Opcional): Es un objeto de tipo String o Number que es usado para insertar un espacio en blanco dentro de la cadena de salida JSON para su mejor comprensión. Si es un número, se entiende que representa el numero de espacios a agregar; este numero tiene un limite de 10 espacios; numeros menores que 1 inplican que no se utiliza espacio alguno. Si es un cadena (sólo los 10 primeros caracteres son tomados en cuenta), esta es usada como espacios en blanco. Si este parámetro no se define o este es nulo no se agrega ningun espacio.

Retorna un string JSON representando el valor dado.

function replacer(key, value) {
  // Filtrando propiedades 
  if (typeof value === "string") {
    return undefined;
  }
  return value;
}

var foo = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7}; 
var jsonString = JSON.stringify(foo, replacer);
// '{"week":45, "month":7}'

Fuente Json

@ElementCollection vs @OneToMany

Estas dos anotaciones nos permiten elaborar relaciones 1 a N entre dos objetos con JPA. A continuación se va a exponer su funcionamiento:

@ElementCollection
Te permite de una forma muy simple definir una relación de una entidad con otros objetos. Se puede por ejemplo, dado un empleado, definir una lista de strings que se corresponden con los telefonos del empleado. Sería así:

@Entity(name="Employee")
@Table(name="EMPLOYEE")
public class Employee {

	@Id
	@Column(name = "_id")
	private String id;

	@Column(name="name")
	private String name;

	@ElementCollection
	@CollectionTable(name="PHONE", joinColumns=@JoinColumn(name="phone_id"))
	@Column(name="phone_number")
	private List< String> phones;
        .....
}

Teniendo en cuenta este ejemplo tendremos en BD:
– Una tabla EMPLOYEE con las columnas -> _id y name.
– Una tabla PHONE con las columnas -> phone_id y phone_number. (el campo phone_id hara de foreign key, mientras que phone_number contendrá el String del número de teléfono)

En el ejemplo anterior usábamos una lista de String pero podríamos usar un objeto @Embeddable, tal que así:

@Entity
public class Employee {
	@Id
	@Column(name = "_id")
	private String id;

	@Column(name="name")
	private String name;

	@ElementCollection
	@CollectionTable(name="PHONE",joinColumns=@JoinColumn(name="phone_id"))
        private List< Phone> phones;
        ...
}

@Embeddable
public class Phone {
        @Column(name="phone_number")
        private String number;
        ...
}

El resultado de hacerlo así en la base de datos sería exactamente el mismo pero nos va a permitir añadir mas campos en el objeto PHONE.

@OneToMany
Te permite relacionar dos objetos Entity.

@Entity
public class Employee {
	@Id
	@Column(name = "_id")
	private String id;

	@Column(name="name")
	private String name;

	@OneToMany(cascade={CascadeType.ALL}, mappedBy="empl", 
                   fetch=FetchType.LAZY, targetEntity = Phone.class)
	@OnDelete(action = OnDeleteAction.CASCADE)
	private List< Phone> phones;
  ...
}

@Entity
public class Phone {
	@Id
	private long id;

	@Column(name="phone_number")
	private String number;

	@ManyToOne
	@JoinColumn(name="phone_id")
	private Employee empl;
	...
}

Como se puede ver hay que marcar la relacion OneToMany en la entidad Employee, marcándole el campo donde debe apuntar (en este caso «empl»). En ese campo de la entidad Phone se debe marcar la ManyToOne indicandole el nombre de la columna (phone_id) que hará de foreign key.

Además, se ha añadido la anotación @OnDelete para indicarle que haga un borrado en cascada de la lista de teléfonos al eliminar al empleado. Esto es significativo por el hecho de que en el caso del ElementCollection no se permite indicar el tipo de borrado.
Nota: Hay que decir que en el borrado en cascada se eliminan de golpe todos los relacionados mientras que sin él, va haciendo un borrado de cada uno de sus relacionados (es decir, si un empleado tiene 10 teléfonos al hacerlo en cascada se lanzaría un único delete mientras que en el otro caso se lanzan 10 sentencias delete).

Resumen final
– BD: el esquema de tablas y relaciones que va a construir JPA en nuestra BD va a ser muy similar en ambos casos.
– Código: Se puede decir que es mucho más cómodo utilizar @ElementCollection al simplificar el código.
– Potencia: Si queremos poder utilizar toda la potencia de las relaciones optimizando nuestros recursos es mejor decantarse por @OneToMany.

Fuente
– @ElementCollection
– @OneToMany

Integrar Facebook en Unity para apps Android

Paso 1:
Registrarse en https://developers.facebook.com/ para lo que es necesario tener una cuenta de facebook.

Paso 2:
Crear una aplicación en la web anterior en Apps > Add new app. De esta forma obtendremos un App ID.

Paso 3:
Descargar e importar al proyecto de unity el SDK de facebook. Aquí. En mi caso para un windows 64bits instalé openssl-0.9.8k_X64.
Tras importarlo, en la plataforma unity nos aparecera una nueva opcion en el menu llamada Facebook.

Paso 4:
En ese menu nuevo vamos a la opción Edit Settings y rellenamos el App ID que habiamos obtenido en el paso 2.
Así ya tendriamos la configuración básica para poder usar facebook en unity.
Para probarlo podemos añadir un botón en nuestro proyecto que haga una llamada al login de facebook (FB.login(….)). Al pulsar en Login aparecerá una ventana pidiéndonos un User Access Token. Podemos obtenerlo pulsando en esa misma venta en Find Access Token, que nos llevará al Access Token Tool de Facebook, donde podremos generarlo y copiarlo a Unity.

A partir de aquí para Android
Paso 5:
Si en el apartado Android Build Facebook Settings vemos que sale la alerta “OpenSSL not found. Make sure that OpenSSL is installed, and that it is in your path“ es porque debemos instalar OpenSSL en nuestro equipo.
Podemos descargarlo de aquí.
Para instalarlo basta con descomprimirlo en una carpeta de nuestro equipo y modificar la variable de entorno Path, añadiéndole la ruta a la carpeta bin de OpenSSL. También podemos añadir una nueva variable de entorno llamada OpenSSL.

Paso 6:
Si la alerta que sale es “Keytool not found. Make sure that Java is installed, and that Java tools are in your path“ debes instalar la JDK o JRE de java añadiendo la ruta a la variable de entorno del sistema como antes.

Paso 7:
Debajo de esas alertas podemos ver debajo el Package Name, el Class Name y la Debug android key hash.
Estos datos deben introducirse en el apartado Settings de la app de Facebook creada al principio. Tendremos que añadir una nueva plataforma android pulsando en Add Platform e introducir los 3 valores y guardar. Haciendo esto ya podremos probar a compilar y desplegar la aplicación en el dispositivo android.

Paso 8:
En el dispositivo android no se nos pedirá un User Token al hacer login pero puede que se produzca el siguiente error: “Invalid key hash. The key hash ***** does not match any stored key hashes…“ Y es que la key hash que proporciona el SDK de Facebook en sus settings es la de debug, mientras que al desplegar la app en el dispositivo se usa otra, que es la que muestra el mensaje de error. Tendremos que añadir esta key hash en la página de Settings de la app de Facebook, a continuación de la que introdujimos previamente.

English Couple

Se trata de un juego realizado mediante la plataforma Unity y que ha sido exportado a Web Player y a Android.

English Couple

El juego consiste en ir buscando unos libros por el escenario. Cada libro te permite jugar a un juego de realizar parejas sobre una temática aleatoria. Se trata de ir asociando a cada imagen su significado en inglés.
Hay muchas fichas para cada temática para que tengas más palabras que practicar.

Versión Web
Versión Android

Handlebars como sistema de templates en jQuery

HandlebarsJS es un sistema de plantillas Javascript y una herramienta esencial. Está basado en la sintaxis de «Mustache Templates«, a las que han agregado algunas funcionalidades extra.

Documentación Oficial

Ejemplo de uso para intentar explicar como funciona:

1 – Añadimos dentro de nuestra página html el siguiente template y le asignamos un id.

< script type="text/x-handlebars-template" id="templateEx">
{{# each elementos}}
Name: {{name}} 

{{/each}}
< /script>

En esta plantilla se recorre la lista elementos y se escribe el valor de su propiedad name

2 – En nuestro fichero js cuando queramos cargar la pagina tenemos que decirle que compile la plantilla para ello primero tenemos que obtener el código del a plantilla.

var stemplate = $("#templateEx").html();
//Y una vez obtenido poedemos compilar la plantilla:
var tmpl = Handlebars.compile(stemplate);

3 – Ahora solo faltaría asignar los datos al contexto de la plantilla:

var ctx = {};
ctx.elementos = [{"name":"elemento1"},{"name":"elemento2"}];
html = tmpl(ctx);

4 – Ahora añadimos el contenido de la plantilla al html.

$("#content").append(html);
$("#content").show(); 

En este ejemplo se ha usado jQuery para tratar con el DOM pero puede usarse cualquier otra librería.

Aplicación que integra Spring-Boot + AngularJS + Thymeleaf

En mi repositorio de GitHub he dejado una apicación simple que integra Spring-Boot con AngularJS utilizando lo siguiente:

– Para la configuración de Spring se ha utilizado Spring Boot junto con los siguientes módulos
. . . . 1- Spring Data JPA -> como capa de persistencia.
. . . . 2- Spring Data REST con Spring HATEOAS -> para la capa de servicios rest con los que interactuará AngularJS.
. . . . 3- Spring Security -> para la Autenticación y Autorización de la aplicación.
. . . . 4- Spring MVC con Thymeleaf -> se utiliza para gestionar principalmente los listados de consulta, así como todas las vistas que no tienen formularios.
. . . . 5- AngularJS -> se utiliza para las vistas de los formularios de detalles.
. . . . 6- Bootstrap + Angular-ui + Font Awesome + Angular-Show-Errors -> para el diseño y maquetación del front end.
. . . . 7- JUnit -> pruebas unitarias.

– Se utilizan Base de datos y servidor embebidos a modo de ejemplo: H2 y Tomcat.

– Para la creación de informes se utiliza JasperReports. Se ha configurado el pom para que a partir de los ficheros /src/main/resources/static/reports/*.jrxml y genere los /src/main/webapp/jasper/*.jasper. Para ello basta con ejecutar mvn generate-resources.

– La gestión de dependencias se realiza con: Maven y bower.

Instalación
=========
1- Instalar maven (utilizada la 3.0.5)
2- Instalar el wraper de maven para spring-boot:

mvn -N io.takari:maven:wrapper

3- Se puede ejecutar de varias formas:

//Con maven:	
mvn spring-boot:run. 

//o bien

//Construyendo el jar:      
mvn clean package 
//Y haciéndolo correr con:  
java -jar target/springangularjs-0.0.1-SNAPSHOT.jar

4- Si todo va bien la aplicación correrá en: http://localhost:8080/
5- Copiar proyecto e importarlo al eclipse como proyecto de maven.
6- Recordar que para modificar las librerías de js es necesario bower. Para ello:
. . . . a- se necesita tener instalado node.js (https://nodejs.org/)
. . . . b- se necesita también tener instalado git (https://git-scm.com/download/win)
. . . . c- instalamos bower con:

                  npm install -g bower

. . . . d- finalmente ejecutando «bower install» en el proyecto nos colocara en el directorio /src/main/resources/static/bower_components las versiones de las librerías indicadas en el bower.json.

Todo el código esta subido al GitHub
Esquema de la Arquitectura
Digrama de clases

i18n con Spring Boot

Paso 1: Añadir los properties con las keys en src/main/resources/ uno por cada idioma tal que así:
messages.properties (este será el de por defecto)
messages_es.properties

Paso 2: Hay que configurar la aplicación para que la request obtenga el locale. Para ello se pueden añadir estos beans:

	@Bean
	public LocaleResolver localeResolver() {
	    return new CookieLocaleResolver();
	}
	@Bean
	public LocaleChangeInterceptor localeChangeInterceptor() {
		LocaleChangeInterceptor lci = new LocaleChangeInterceptor();
		lci.setParamName("lang");
		return lci;
	}
	@Override
	public void addInterceptors(InterceptorRegistry registry) {
		registry.addInterceptor(localeChangeInterceptor());
	}

Paso 3: Modo de uso.
Desde un controller de Spring basta con inyectar un MessageSource y ya podríamos usarlo.

        .....
	@Autowired
	private MessageSource messageSource;

	@RequestMapping(value = "/list", method = RequestMethod.GET)
        public String listItems(Model uiModel, Pageable page, HttpServletRequest request){
             String msg = messageSource.getMessage(request.getParameter("key.successMessage")
                                                     .toString(),null,LocaleContextHolder.getLocale());
             ....
        }
        ....

Desde el front-end con thymeleaf bastaria con usar el #{key.successMessage}

< html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
>
....
< span th:text="#{key.successMessage}">
....

Bower

Bower es un gestor de dependencias para el desarrollo web frontend. Facilita la tarea de instalar y mantener al día las distintas librerías y frameworks del proyecto.

Instalación:
– Primero se necesita instalar node.js. Se descarga de https://nodejs.org/ y se instala el *.msi en windows.
Puedes comprobar que se ha instalado bien ejecutando por consola el comando:

node -v

– Después se instala git. Para ello hay que descargar y ejecutar https://git-scm.com/download/win

– Por último se instala el bower. Para ello necesitamos el comando npm que ya nos instaló node.js.

npm install -g bower

Para crear por primera vez el archivo bower.json lo más cómodo es, desde la raíz de tu proyecto, lanzar el comando:

bower init

El fichero bower.json sera similar a este:

{
  "name": “Prueba Bower”,
  "version": "0.0.0",
  "authors": [
    "Yo "
  ],
  "dependencies": {
    "jquery": "~3.1.0"
  }
}

En «dependencies» se indican las distintas librerías y sus versiones. El símbolo ~ indica que bower instalará la 3.1.0 o una superior cuando salga siempre que sea de la 3.1.x

Guía de comandos de bower

Crear una aplicación Spring-Boot

Paso 1 – Instalar maven
Se descarga la version de maven (3.0.5 o superior en este caso). Se mete el directorio bin al path.

Paso 2 – Instalar el wraper de maven para spring-boot. Ver https://github.com/takari/maven-wrapper
Se instala con este comando de maven: mvn -N io.takari:maven:wrapper
Luego para compilar se podría hacer (en lugar de mvn clean install):
./mvnw clean install or ./mvnw.cmd clean install

Paso 3 – Crear proyecto boot inicial.
Consiste en, primero, crear aplicacion en esta url: http://start.spring.io/
Y luego, montar aplicacion:

mvn eclipse:eclipse

Paso 3 – Correr la aplicación.
Dos opciones para lanzar la aplicación pueden ser:

//Con maven:	
mvn spring-boot:run. 

//Construyendo el jar:		
mvn clean package 
//Y haciéndolo correr con:	
java -jar target/nombre_jar.jar

Crear una aplicación con gvNIX

gvNIX está basado en Spring Roo y te permite generar aplicaciones web java de manera muy rápida a partir de un esquema de base de datos. http://www.gvnix.org/

Instalación de gvNIX

Comandos a ejecutar para la creación de un proyecto

//Primero se configura la BD de la que luego se hará ingeniería inversa...
jpa setup --database MYSQL --provider HIBERNATE --databaseName mi_base_datos --hostName mi_ip --userName mi_usuario --password mi_contraseña

//Luego se puede comprobar si se ha realizaco la conexión bien
database introspect --schema nombre_de_mi_esquema

// si te dice que no encuentra el driver puedes instalarlo así
addon search mysql
//te deberia salir una lista con los drivers que puedes instalar para a continuación
addon install id --searchResultId xx    
//xx sería el codigo del driver mostrado en el listado que saca el anterior comando...

//En mi caso me dió problemas y el de mysql no me lo instaló bien así que lo instale a mano.
//Para ello me lo descargue y lo instalé con el siguiente comando:
osgi start --url file:///C:\\mysql-connector-java-5.1.18.jar

//Ahora ya se puede crear las entidades a partir de la BD.
database reverse engineer --schema nombre_de_mi_esquema --package ~.domain --includeTables "tab_*"

//se crea el negocio y la presentación para spring mvc
web mvc setup
web mvc all --package ~.web
web mvc finder all

//añadimos la internacionalización
web mvc language --code en
web mvc language --code es

//Seleccionamos el nivel de log
logging setup --level INFO

Hasta aquí ya tendriamos un el proyecto funcionando, podriamos ejecutarlo y ver como se pueden hacer las tareas crud con las pantallas con los estilos por defecto de gvNIX. Ver guia de estilos gvNIX.

Si quisiéramos cambiar la presentación para usar por ejemplo bootstrap deberiamos seguir a continuación los siguientes pasos:

// Añadimos jQuery al proyecto
web mvc jquery setup

// Instalamos Bootstrap
web mvc bootstrap setup

// Instalamos el componente datatables
web mvc datatables setup 

// Añadimos JQuery a todos los archivos
web mvc jquery all

// Se crea los datatables de todos los listados
web mvc datatables all

// Se actualiza bootstrap para que importe los ficheros datatables
web mvc bootstrap update

//Instalamos el security
security setup

// Seactualiza bootstrap para que importe los ficheros del security
web mvc bootstrap update

// Instalamos reports en el proyecto
web report setup

// Creamos un report 
web report add --controller ~.web.SampleController --reportName samplereport

Notas:
web mvc bootstrap setup
Este comando importará e instalará todos los recursos necesarios para utilizar bootstrap. Además, modificará la estructura de algunos tagx existentes para que funcionen correctamente con Bootstrap y modificará todas las vistas de la aplicación para que utilicen los tags de JQuery.

web mvc bootstrap update
Este comando permite regenerar de forma correcta todos los componentes importados por Bootstrap. En caso de una modificación incorrecta de estos componentes, podremos regenerarlos para que vuelvan a su estado inicial.



Documentación oficial versión 1.4.1