Desarrollando una Aplicación Móvil en Oracle APEX 5.0 - Parte I - Oracle Wiki - Oracle - Toad World

Desarrollando una Aplicación Móvil en Oracle APEX 5.0 - Parte I

Oracle Community

Desarrollando una Aplicación Móvil en Oracle APEX 5.0 - Parte I

Written by Clarisa Maman Orfali

 

Uno de los temas que más me han solicitado últimamente es el desarrollo de aplicaciones móviles con Oracle APEX 5.0.

 

Sabemos que hoy en día, el hecho de contar con la posibilidad de que nuestra empresa tenga una aplicación móvil es moverse hacia el futuro y es por ello que hoy les traigo este artículo.

 

Algo que tendríamos que conocer primero antes de empezar de lleno con APEX, es el tema de las diferentes opciones que tenemos a la hora de desarrollar aplicaciones para dispositivos móviles para que luego de conocerlas podamos tomar mejores decisiones a la hora de elegir una u otra opción dependiendo de las especificaciones de nuestros requerimientos.

 

Actualmente contamos con los siguientes tipos de Aplicaciones móviles:

 

  • Aplicaciones Nativas

  • Aplicaciones basadas en la Web

  • Aplicaciones Hibridas

 

Aplicaciones Nativas

 

Las aplicaciones nativas son aquellas que se desarrollan para la plataforma específica del dispositivo móvil, siendo posible su instalación por medio de la descarga de archivos ejecutables binarios directamente al dispositivo y estos se almacenan localmente en el dispositivo móvil.

Dichas aplicaciones se encuentran a disposición de los usuarios para ser descargadas en las diferentes Tiendas de Aplicaciones como lo son el App Store de Apple, el Marketplace de Android, el Store de Windows Phone o la tienda de BlackBerry.

 

Cuando se desarrolla aplicaciones nativas se desarrolla usando el software correspondiente al sistema operativo del dispositivo, por ejemplo para iOS se usa Objective-C,C o C++, para Android se usa Java, etc.

 

Abajo podemos ver una tabla resumen sobre los lenguajes y formatos usados en cada plataforma:

 


 

Esta demás decir que este tipo de aplicaciones funcionan offline y tienen el completo uso de las APIs del dispositivo móvil como el uso de los contactos, cámara y mucho más, como también disponen de la capacidad de almacenamiento de datos en el mismo dispositivo. Si bien este tipo de aplicaciones se destaca por su desempeño y acceso de los dispositivos tiene una contra parte que es el alto costo no solo de desarrollo sino de mantenimiento y que requiere de actualizaciones continuas entre otros factores.

Aplicaciones basadas en la Web

 

Las aplicaciones basadas en la web son aquellas diseñadas en HTML5, JavaScript y CSS para que se puedan ver en dispositivos móviles. No está atada a ninguna plataforma y no se requiere que el usuario se descargue la app en su dispositivo ni tampoco actualizarla, ya que cuando se realiza algún cambio en ella solo puede refrescar el navegador que use y con eso puede ver los cambios realizados, ya que los mismo se realizan directamente en el servidor donde se encuentra alojada la aplicación, no es como en el caso de las aplicaciones nativas, en la cual el usuario es el responsable de realizar las actualizaciones de las apps que tiene instalado en su dispositivo móvil.

 

Una diferencia importante es que son aplicaciones que solo funcionan si hay conexión a internet. Además cabe mencionar que las aplicaciones basadas en la web son multiplataforma, es decir, funcionan con cualquier dispositivo, ya sea un móvil o una tablet, independientemente del tipo de navegador que se utilice. Como este tipo de aplicaciones no se descargan en el dispositivo no ocupan lugar de almacenamiento y el usuario podría crear un acceso directo de la app para acceder fácilmente a ella. Una ventaja de este tipo de aplicaciones es que son menos costosas, y mucho más fáciles de actualizar, aunque actualmente su funcionalidad es limitada y lógicamente no puede alcanzar un alto nivel de experiencia del usuario como las aplicaciones nativas están en proceso de hacerlo.

 

Aplicaciones Híbridas

 

Las aplicaciones híbridas son las aplicaciones desarrolladas a través de distintos frameworks basados en lenguaje de programación HTML, Javascript y CSS y como nos indica el término híbrido significa que tomamos lo mejor de los dos mundos, el desarrollo nativo y el desarrollo basado en la web.

 

Por ejemplo existe un framework llamado PhoneGap (existen muchos otros) que permite embeber una aplicación basada en la web para que pueda ser instalada en el dispositivo móvil y que pueda usar algunas de las APIs del dispositivo como el uso de la cámara, el acelerómetro, los contactos, etc.

 

Lo mejor de todo, es que este tipo de desarrollo es multiplataforma, ya que PhoneGap nos permite crear los archivos ejecutables para iOS, Android y Windows Phone usando un solo código de desarrollo. Este tipo de aplicaciones también son distribuidas en las distintas tiendas online de las plataformas móviles.

 


Construyendo una aplicación móvil con Oracle APEX 5.0

 

Y ahora viene la pregunta del millón!, qué nos brinda Oracle APEX a nosotros en cuestión de desarrollo móvil?, básicamente nos permite crear aplicaciones basadas en la web y por otro lado podemos crear aplicaciones híbridas usando por ejemplo PhoneGap.

 

En este artículo les mostraré cómo desarrollar una aplicación móvil basada en la web con Oracle Application Express.

 

Los templates usados para el desarrollo de aplicaciones móviles están basados en jQuery Mobile framework y se trabaja de la misma manera que si trabajáramos en el desarrollo de una aplicación de escritorio.

 

Estructura de una Página en jQuery Mobile

 

Una página en jQuery es muy parecida la estructura a una página HTML, cuando vemos el código HTML podemos ver el encabezado y el cuerpo de la página. El encabezado llama a los archivos CSS y los archivos jQuery y en el cuerpo de la página se muestra el contenido de la misma.

 

Para que los acentos se muestren bien, demos usar el código HTML correspondiente a cada letra:

 

á

é

í

ó

ú

ñ

á

é

í

ó

ú

ñ

 

<!DOCTYPE html>

<html>

<head>

<title>P&aacute;gina en jQuery Mobile</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

</head>

 

<body>

<div data-role="page">

<div data-role="header"><h1>El encabezado de p&aacute;gina</h1></div>

<div data-role="content"><h1>El contenido de la p&aacute;gina</h1></div>

<div data-role="footer"><h1>El pie de p&aacute;gina</h1></div>

</div>

</body>

</html>

 

Si creamos un archivo con este contenido HTML y lo nombramos por ejemplo index.html y lo abrimos desde nuestro navegador, podemos ver la estructura de la página, como se muestra a continuación:

 


 

Creando nuestra primera app móvil en Apex

 

Ingresamos al Creador de Aplicaciones de nuestro Espacio de Trabajo y hacemos clic en el botón Crear

 

Se abre el asistente y seleccionamos el icono Móvil.

 


 

Especificamos en el paso Nombre del Asistente:

 

- Esquema: <nombre_esquema>

- Nombre: Mi Primera App Móvil en APEX 5

- Aplicación: <número_aplicación>

- Tema: Mobile(51)

- Estilo de Tema: Red

- Hacemos clic en el botón Crear Aplicación.

 

En la pantalla Confirmar del asistente, revisamos el resumen y hacemos simplemente clic en el botón Crear Aplicación.

 


 

Podemos ver que el asistente nos creó tres páginas, la página global, la página de inicio y la página de conexión.

 

Ingresamos desde nuestro dispositivo móvil a la URL de la app recién creada en la instancia de Oracle. (El ID de mi aplicación es 104323) Si lo hemos creado a la aplicación desde nuestra computadora local no podremos verlo desde el dispositivo celular, abrimos el navegador y ajustamos la ventana al tamaño de un celular.

 

https://apex.oracle.com/pls/apex/f?p=104323

 

 

Podemos ver que si rotamos el celular los elementos de la página de conexión se adaptan al nuevo tamaño de la pantalla.

 


 

Ingresamos los datos de inicio de sesión y vemos la página de inicio en blanco, usando el tema de color rojo.

 


 

Entendiendo la estructura de la página en APEX

 

Cuando editamos la página 1 de inicio de la aplicación podemos ver que tanto el Header como el Footer están creados en la página global 0 como regiones.

 


 

 

Si volvemos al código HTML de una página jQuery:

 

<body>

<div data-role="page">

<div data-role="header"><h1>El encabezado de p&aacute;gina</h1></div>

<div data-role="content"><h1>El contenido de la p&aacute;gina</h1></div>

<div data-role="footer"><h1>El pie de p&aacute;gina</h1></div>

</div>

</body>

 

Podemos decir que la “page” está definida en la plantilla de página, el “header” y el “footer” están definidos en la página global 0 como regiones, y cada uno de ellos tiene su propia plantilla en la parte superior e inferior de la página. Las regiones que nosotros definamos en la página (en este caso en la página de inicio) serán el contenido central de nuestra página.

 

Veamos un ejemplo:

 

En la página 1 vamos a crear una región estática con el siguiente HTML:

 

<h1> Introducción a Oracle APEX 5.0 </h1>

<p><i>Una guía práctica para usuarios de nivel inicial e intermedio para desarrollar aplicaciones web profesionales usando Oracle Application Express 5.0</i></p>

<p style="text-align:center;">

<img src="#APP_IMAGES#mibook.png" width="60%"/>

</p>

 

Al ejecutar la aplicación podemos ver que se agregó el contenido estático en la zona del body.

 


 

 

Ahora vamos a aprender a crear como ejemplo una página que pueda seleccionar y editar registros de la tabla EMP.

 

Para ello desde la página de inicio de la aplicación, hacemos clic en el botón Crear Página.

 

Se abre el asistente y podemos ver las siguientes opciones, la cual vamos a seleccionar “Pantalla”

 


 

 

Tenemos varias alternativas la cual vamos a seleccionar “Pantalla en una Tabla con Vista de Lista” cabe aclarar que las opciones de “Pantalla Tabular” y “Pantalla Maestro/Detalle” no están disponibles en la versión móvil.

 

Ingresamos el nombre de la página como Empleados y dejamos los valores por defecto, en plantilla de región usamos Plain (No Title) y hacemos clic en el botón Siguiente.

 

En origen de Datos seleccionamos la Tabla EMP, en el menú de navegación, creamos una nueva entrada del menú de navegación con el nombre Empleados, clic en el botón Siguiente.

 

En la Página de Vista de Lista seleccionamos la columna de Visualización como ENAME (Varchar2) y hacemos clic en el botón Siguiente. En la Página de Pantalla ingresamos en el nombre de la página “Editar Datos Empleado” y hacemos clic en el botón Siguiente. Seleccionamos la columna de Clave Primaria como EMPNO y nuevamente clic en el botón Siguiente.

 

Seleccionamos la secuencia o el disparador existente para generar la clave primaria, en mi caso selecciono la secuencia llamada EMP_SEQ y hacemos clic en el botón Siguiente.

 

En la siguiente pantalla pasamos todas las columnas al cuadrante de la derecha y hacemos clic en el botón Siguiente.

 

Para los procesos de la página dejamos los valores por defecto indicando en SI los procesos de Insertar, Actualizar y Suprimir y hacemos clic en el botón Siguiente.

 

En la pantalla de Confirmación hacemos clic en el botón Crear.

 

Ejecutamos la página y podemos ver la lista de empleados disponibles.

 


 

 

Para editar un registro de la tabla seleccionamos el nombre del Empleado y se abre el formulario para editar sus datos.

 


 

 

Como podemos ver en esta primera parte, crear una aplicación web móvil en APEX no es un trabajo titánico gracias a los asistentes que nos provee la herramienta para trabajar con muy poco esfuerzo y crear formularios editables para nuestra aplicación, claro que esto es el principio de todo lo que podemos hacer con Apex y el desarrollo móvil.

 

Hasta aquí esta primera parte del artículo, en el siguiente estaremos viendo las diferentes formas para presentar la información a través de la Lista de Vistas.

 

Hasta la próxima!

 

 

1689 2 /
Follow / 18 Jul 2016 at 8:56pm

Hola Ing. Clarisa, quisiera saber si desarrollo una aplicacion con Apex Mobile puedo personalizar la plantilla, y solo solo mostrar menus?

Follow / 5 Nov 2016 at 4:44pm

Si, puedes personalizar la plantilla dependiendo lo que quieras mostrar. Saludos