Agregar librerías de terceros en Oracle JET usando Bower

Application Development

09/06/2017 - Rafael Prada

El mundo JavaScript es enorme y con una gran comunidad que nos proporciona multitud de líneas de código ya desarrolladas. Para tener un control sobre cada una de estas líneas, y no tener que estar buscando en Google cada una de las librerías, ha nacido “Bower”.

¿Qué es Bower?

Si buscamos una definición encontramos que Bower es una especie de manejador de paquetes para la web, es decir, cualquier librería de código abierto necesaria para el desarrollo de un front-end.

Es probable que se confunda npm con bower, ya que el concepto y funcionamiento es bastante similar, y la diferencia estriba en que npm está enfocado a módulos y Bower está enfocado y optimizado para el front-end.

Ejemplos de uso:

bower install jquery
bower install knockout

Estructura

Cada vez que instalamos un paquete a través de Bower, éste genera una carpeta llamada “bower_components”, en la cual se descargan todos los componentes descargados a través de la herramienta.

El desarrollo

Hoy, desarrollaremos una aplicación híbrida usando una librería muy conocida en el mundo JavaScript como es threeJS.

Dividiremos el desarrollo en 4 pasos:

Preparar estructura de la app
Instalar threeJS con Bower
Configurar Grunt para recuperar las nuevas librerías
Desarrollar la animación 3D que deseamos mostrar.

¿Qué es ThreeJS?

Three.js permite la creación de animaciones 3D aceleradas por GPU utilizando el lenguaje JavaScript como parte de un sitio web sin depender de los complementos de navegación propietarios. Esto es posible gracias a la llegada de WebGL.

Las bibliotecas de alto nivel, como Three.js o GLGE, SceneJS, PhiloGL o una serie de otras bibliotecas, hacen posible la creación de complejas animaciones en 3D que se muestran en el navegador sin el esfuerzo de realizar una aplicación independiente o un plugin.

Véase: https://en.wikipedia.org/wiki/Three.js

Estructura de la aplicación

Nos apoyaremos en yeoman para descargar la estructura principal de la app, utilizando el siguiente comando:

Yo oraclejet: hybrid <<NombreDelProyecto>> –platforms=<<ANDROID,IOS…>>

Ejemplo:

yo oraclejet:hybrid C:JETthreeAvtDemo –appid=com.avanttic.demo.three –appname=three –template=navdrawer –platforms=Android

Instalación de ThreeJS con Bower

Para instalar ThreeJS simplemente hay que usar:

Bower install <<-save>> <<NombreDel Paquete>>

Cuando se usa el tag “–save” le indicamos a bower que registre las dependencias en el fichero bower.json

En nuestro proyecto utilizaremos el siguiente comando:

bower install –save threejs

Cuando finalice la descarga, automáticamente tendremos los siguientes directorios:

Además, podemos observar como el fichero bower.json se ha actualizado automáticamente:

Configurar Grunt

Lo primero es configurar el fichero de grunt para que traiga las nuevas librerías al proyecto, para ellos debemos modificar el siguiente fichero:

threeAvtDemoscriptsgruntconfigbowercopy.js

En este fichero vienen detalladas las librerías que estarán en la aplicación, en la parte final donde se encuentran las librerías de terceros añadiremos la librería de threejs.

“threejs/three.js”: “threejs/build/three.js”,

// Add minified version if available

“threejs/three.min.js”: “threejs/build/three.min.js”

Con este código indicamos, que los ficheros JS “Three.js” y “Three.min.js” que se encuentran en la estructura “threejs/build/” se copian dentro de la carpeta “threejs” que estará dentro de libs.

Después indicamos a través de yeoman que restaure todas las librerías npm y bower.

yo oraclejet:restore

Por último, nos falta inyectar las librerías en Oracle JET, para ello necesitamos abrir los ficheros:

“main-release-paths.json” y añadir la librería que deseamos ejecutar:

“threejs”: “libs/threejs/three.js”

Y el fichero “main.js” añadiendo en los paths la ruta de threeJSpaths:

//injector:mainReleasePaths
{
‘knockout’: ‘libs/knockout/knockout-3.4.0.debug’,
……..
‘signals’: ‘libs/js-signals/signals’,
‘threejs’: ‘libs/threejs/three’
}

Desarrollo de la animación en Oracle JET

El siguiente paso es desarrollar la animación, en este caso, nos hemos situado en el tab de “profile”, y hemos inyectado en el controlador la librería threejs.

Por último, añadimos el siguiente código para generar la animación:

var scene = new THREE.Scene();
var cam = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
var renderer = new THREE.WebGLRenderer({
alpha: true
});
renderer.setClearColor(0xffffff, 0);
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById(‘pageContent’).insertBefore(renderer.domElement, document.getElementById(‘pageContent’).firstChild);
var geometry = new THREE.BoxGeometry(700, 700, 700, 10, 10, 10);
var material = new THREE.MeshBasicMaterial({
color: 0xff0000,
wireframe: true
});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
cam.position.z = 2000;
function render() {
requestAnimationFrame(render);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, cam);
};
render();