Inicio > Tech - Application Development > Agregar librerías de terceros en Oracle JET usando Bower

Agregar librerías de terceros en Oracle JET usando Bower

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:\JET\threeAvtDemo –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

1

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

2

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

3

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:

threeAvtDemo\scripts\grunt\config\bowercopy.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.

4

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();

Además, conseguiremos una agradable sensación al hacer que el cubo vaya girando poco a poco.

1j0rlh

  1. Carlos
    junio 15, 2017 en 17:10

    Muy interesante. Siguiendo las instrucciones he podido poner a funcionar el ejemplo en un proyecto de OracleJet web, pero sobre android me falla por un problema con WebGL. Podrías compartir las fuentes del proyecto o indicar si necesitaste alguna configuración adicional? Gracias!

  2. Carlos
    junio 16, 2017 en 09:30

    Muy Interesante! . He podido seguir el ejemplo usando Oracle-Jet Web, pero dentro de android está dando problemas con webgl. Puedes compartir las fuentes o tal vez explicar si has realizado alguna configuración adicional? Gracias!

    • noviembre 10, 2017 en 13:12

      ¡Gracias por tu interés Carlos! Sobre poner alguna configuración adicional, el post va sobre como agregar librerías de 3º y en el post realizamos un ejemplo.

      Si necesitas más ayuda sobre el ejemplo necesitaríamos más información.

  1. No trackbacks yet.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: