Archive

Archivo de Autor

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
Leer más…

Categorías:JavaScript Etiquetas: , , ,

Animaciones 3D con Three JS y Oracle JET

En el día de hoy me gustaría enseñaros la librería JavaScript ThreeJS.

¿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 herramientas adicionales. 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, y posterior muestra en el navegador, de complejas animaciones en 3D sin el esfuerzo de tener que realizar una aplicación independiente o un plugin.

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

El objetivo

El objetivo de este post es desarrollar una aplicación capaz de generar una matriz, y que además, la aplicación pueda moverse por ella después de haber utilizado el giroscopio del dispositivo.

El desarrollo

Antes de empezar debemos identificar o crear el contenedor donde se creará el canvas en el que se visualizará nuestra animación 3D. En este caso utilizaremos el div “pageContent”, este div lo hemos creado en el index.html donde se visualizarán los distintos módulos de la aplicación; por defecto viene creado en el template “navdrawer”.

var container = document.getElementById( ‘pageContent’ );

El siguiente paso será crear la cámara. Este objeto pretende imitar la forma en que el ojo humano ve. Es el modo de proyección más común utilizado para la representación de una escena 3D.

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);

Para la representación de la cámara necesitamos 4 parámetros:

fov — Camera frustum vertical field of view.
aspect — Camera frustum aspect ratio.
near — Camera frustum near plane.
far — Camera frustum far plane.

Leer más…

Categorías:JavaScript Etiquetas: , , ,

Oracle JET y la realidad aumentada

Hoy me gustaría enseñaros como una aplicación híbrida realizada con Oracle JET (Framework JS) puede ser tan potente como deseemos sin tener que realizar un desarrollo nativo. Y, además, para apoyar esta demostración me serviré de la realidad aumentada.

jetOracle JET está dirigido a desarrolladores JavaScript que trabajan en aplicaciones en el lado del cliente, y es una colección de librerías JavaScript de código abierto que junto a las librerias propias de Oracle permiten crear aplicaciones que se consumen e interactúan simple y eficientemente con otros productos Oracle.

Más información en este otro post introductorio a Oracle JET.

1
La realidad aumentada consiste en combinar el mundo real con el virtual mediante un proceso informático, enriqueciendo la experiencia visual y mejorando la calidad de comunicación.
Gracias a esta tecnología se puede añadir información visual a la realidad y crear todo tipo de experiencias interactivas.

 

El Desarrollo:

Hemos elegido JET como Framework de desarrollo de aplicaciones de movilidad por su agilidad a la hora de desarrollar y por la facilidad al acoplar plugins cordova.

Para el desarrollo de la realidad aumentada nos basaremos en un plugin cordova, mediante el cual podremos comunicarnos con lenguaje JavaScript y de esta forma explotar las apis del dispositivo.

Paso a paso:

Gracias a Yeoman podemos agilizar el desarrollo de aplicaciones JET, ya que nos genera un esqueleto básico de la aplicación.

Para ello ejecutaremos el comando:

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

yo oraclejet:hybrid augmentedReality –platforms=Android

Leer más…

Categorías:JavaScript Etiquetas: , ,

Oracle MCS como proveedor de autenticación en Oracle MAF

Oracle Mobile Application Framework (MAF) no sólo nos proporciona un desarrollo rápido y funcional, sino que nos ofrece una autenticación robusta y en un marco de autorización.

Screen-Shot-2014-07-20-at-10.32.21-pm1.png

MAF nos permite autenticarnos contra varios tipos de autenticación, en este caso nos centraremos en HTTP Basic y nos apoyaremos en Oracle Mobile Cloud Service (MCS) como servidor de autenticación.

Captura de pantalla 2016-03-20 a las 19.47.13

Oracle Mobile Cloud Service

 

Creación de un dominio y un rol

Accedemos a nuestra consola de Mobile Cloud Service.

Dentro del menú podremos ver todas las opciones que nos permite MCS, en nuestro caso seleccionamos la opción de “Aplicaciones” -> “Gestión de usuarios móviles”.

En la pantalla de gestión de usuario móviles, se pueden gestionar los dominios, roles o los usuarios que usaran MCS, en nuestro caso crearemos un nuevo dominio y posteriormente asignaremos ese dominio a nuestro MBE.

Captura de pantalla 2016-03-26 a las 18.17.55.png

Leer más…

Categorías:MAF / ADF Mobile Etiquetas: , ,

Novedades de Oracle MAF 2.2 (Mobile Application Framework)

octubre 16, 2015 Deja un comentario

Recientemente Oracle ha lanzado al público la nueva versión de Mobile Application Framework v2.2, incorporando las siguientes novedades:

1. Componente de interfaz de usuario

Pull To Refreh:

Acción muy demandada por los usuarios y que impedía poder usar un swipe down al principio de la lista para refrescar el componente.

Para poder usarlo se debe agregar el componente amx:refreshContainer. En este componente, además de los listener, encontramos la posibilidad de poder informar al usuario según la situación:

  • El usuario está realizando un swipe down y se va mostrando.
  • El usuario ha terminado de realizar el pull to refresh y se está ejecutando un proceso. Por ejemplo se puede cambiar el texto a “Actualizando…”.
  • Ha terminado la acción programada y se le informa al usuario de la actualización.

Tirar para refrescar

Swipe to reveal:

Se le añade la posibilidad de poder mostrar menús contextuales en las listas, cuando se realiza swipe left o right dentro de una lista.

Para poder usarlo se debe agregar el componente amx:accessoryLayout. Este componente, además de poder indicar el ancho del panel, contiene su propio style para poder diseñarlo a nuestro gusto.

Deslizar Para Revelar Muestra Leer más…