Módulo 4 - Lectura 3.pdf

Entorno de desarrollo para aplicaciones móviles El desarrollo de aplicaciones móviles exige la definición de qué tipo de plataforma se utilizará para el desarrollo de la aplicación. Si se desarrolla para Android, se utiliza el lenguaje Java, mientras que para iOS se utiliza el lenguaje Objective C. E...

Entorno de desarrollo para aplicaciones móviles El desarrollo de aplicaciones móviles exige la definición de qué tipo de plataforma se utilizará para el desarrollo de la aplicación. Si se desarrolla para Android, se utiliza el lenguaje Java, mientras que para iOS se utiliza el lenguaje Objective C. Esto implica que el desarrollador o equipo de desarrollo tiene la necesidad de dominar correctamente varios lenguajes de programación, muy diferentes entre sí, para desarrollar una sola aplicación. Además, cada plataforma requiere el uso de un IDE diferente. Esto produce inconvenientes importantes, sobre todo cuando existe la necesidad de implementar una misma aplicación en diferentes plataformas, ya que se deben hacer múltiples desarrollos para un mismo objetivo. La situación ideal sería realizar un único desarrollo para todas las plataformas, usando un mismo código; de esta manera se puede cubrir un número mayor de usuarios con un ahorro de tiempo y costo importante. En esta lectura presentaremos la herramienta de desarrollo Apache Cordova, que consiste en un framework que funciona como una solución multi-plataforma y que permite usar las últimas tecnologías web: HTML5, CSS3 y JavaScript. También se hará referencia a la herramienta PhoneGap, muy utilizada para el desarrollo de aplicaciones híbridas. Para desarrollar los conceptos, analizaremos el caso del Centro de Actividades Culturales desarrollado en la lectura 1 del módulo 4. Entorno de desarrollo para aplicaciones móviles Referencias Lección 1 de 2 Entorno de desarrollo para aplicaciones móviles Apache Cordova Conceptos básicos y utilización Apache Cordova (versión de código abierto de PhoneGap) es un entorno de desarrollo de aplicaciones móviles. Permite construir aplicaciones para dispositivos móviles utilizando HTML5, CSS3 y JavaScript. De esta manera, no se utilizan las APIs específicas de cada plataforma como Android e iOS. Las aplicaciones resultantes son híbridas, con representación gráfica desarrollada con tecnología web, empaquetadas como aplicaciones para su distribución. Este tipo de aplicaciones tiene acceso a las APIs nativas del dispositivo. Un detalle a tener en cuenta es que PhoneGap es la versión de Adobe de Apache Cordova. Figura 1: Apache Cordova es un entorno de desarrollo para aplicaciones móviles Fuente: [Imagen sin título sobre Apache Cordova] (s. f.). Recuperado de https://cutt.ly/znWTDfl El núcleo de aplicaciones Apache Cordova utiliza HTML5 y CSS3 para la presentación de la aplicación, mientras que para el desarrollo de la lógica usa JavaScript. El uso de HTML5 permite el acceso al hardware del dispositivo, como el GPS y la cámara. Apache Cordova incrusta el código HTML5 dentro del WebView nativo en el dispositivo, utilizando una interfaz de función foránea para acceder a los recursos nativos. Los desarrolladores pueden añadir más funcionalidades mediante extensiones con complementos nativos, las cuales pueden ser llamadas con JavaScript. Esto permite una comunicación directa entre HTML5 y la capa nativa. El uso de tecnologías web para el desarrollo de aplicaciones móviles híbridas hace que estas sean un poco más lentas que una aplicación nativa equivalente. Para llevar a cabo el desarrollo del proyecto solicitado en el caso de estudio, se debe tener en cuenta el requerimiento que establece la necesidad de que el usuario tenga una experiencia similar cualquiera sea la plataforma por la que acceda. Se decide realizar una página web para ser visualizada tanto por computadoras de escritorio como por dispositivo móviles. En este caso se considera un desarrollo único basado en tecnología web y la creación de una aplicación híbrida mediante Apache Cordova. Proceso de instalación Apache Cordova Para realizar el desarrollo de aplicaciones mediante Apache Cordova, es necesario llevar a cabo el proceso de instalación del software. Para hacer la instalación se debe contar con Node.JS previamente instalado en la computadora de desarrollo, ya que es a través de este entorno de ejecución de JavaScript que se realiza la instalación. Los pasos de instalación son los que se detallan a continuación. PA S O 1 PA S O 2 Descargar e instalar Node.JS (https://nodejs.org/es/) PA S O 1 PA S O 2 Instalar el módulo Cordova utilizando la utilidad npm de Node.JS. Dependiendo de en qué plataforma se realice la instalación se debe ejecutar el siguiente comando: para Linux: $ sudo npm install -g para Windows: C:\>npm install -g cordova Cómo crear una aplicación El proceso de creación de una aplicación se inicia con la creación de proyecto Cordova de la manera que se detalla a continuación. Seleccionar un directorio de trabajo. Crear el proyecto en el directorio seleccionado $ cordova create MyApp En este paso se crea la estructura de directorio de la aplicación. Por default se genera un esqueleto con las características de una aplicación web, conteniendo el archivo index.html en la carpeta www. En la figura se observa la estructura creada. Figura 2: Estructura creada para el proyecto cordova llamado MyApp Fuente: elaboración propia. Acceder al directorio del proyecto de la aplicación $ cd MyApp Agregar las plataformas para las cuales se desea construir la aplicación. $ cordova platform add ios $ cordova platform add android $ cordova platform add browser Para este ejemplo se prepara el proyecto para ser construido para las plataformas Android e iOS. Ejecutar la aplicación creada. Se puede realizar la visualización de la aplicación en el browser. $ cordova run browser Figura 3: Visualización de la ejecución de la aplicación en el browser Fuente: elaboración propia. La página principal del proyecto index.html se encuentra en la carpeta www del proyecto creado para la aplicación. Figura 4: Archivo index.html creado para el proyecto de la aplicación Fuente: elaboración propia. Parte del código generado se muestra a continuación. Apache Cordova Connecting to Device Device is Ready Este archivo puede ser editado. Por ejemplo, agregar un título H1 con un saludo como se muestra a continuación en la línea de código subrayada. Bienvenido a mi primera aplicación Apache Cordova Connecting to Device Device is Ready Se puede ejecutar nuevamente la aplicación para ser visualizada en el browser y se obtiene el siguiente resultado. Figura 5: Resultado de la ejecución de la aplicación. En la parte superior se visualiza el título agregado en el archivo index.html Fuente: elaboración propia. Instalación de prerrequisitos para la construcción de la aplicación Para crear y correr la aplicación es necesario instalar los SDKs para cada plataforma que se desee trabajar. Por ejemplo, para construir la aplicación para Android, es necesario tener instalado Android SDK. Para el caso de la plataforma browser, no es necesario instalar ningún SDK. Se puede verificar si están todos los requerimientos exigidos para la construcción de la aplicación, mediante el siguiente comando: $ cordova requirements En la respuesta que se muestra en la figura, se define que están todos los requerimientos para Android. Figura 6: Detalle de requerimientos para Android. En este caso se muestra que todos los requerimientos están instalados. Fuente: elaboración propia. Construcción de la aplicación Por defecto, Cordova create genera una estructura de proyecto basada en una estructura de aplicación web, donde la página inicial del proyecto es index.html, contenida en la carpeta www. Para construir la aplicación para todas las plataformas, se debe ejecutar el siguiente comando: $ cordova build Para construir la aplicación para una plataforma en particular, se especifica la misma al momento de realizar el build. $ cordova build android Test de aplicación Se puede realizar la prueba de las aplicaciones construidas utilizando programas emuladores. Por ejemplo: se puede realizar la comprobación de funcionamiento de la aplicación mediante el emulador de Android. $ cordova emulate android Figura 7: Vista de emulador para android Fuente: [Imagen sin título sobre vista de emulador para android] (s. f.). Recuperado de https://cutt.ly/ynWYfsT El objetivo del desarrollo a realizar en el caso de estudio, es la posibilidad de crear un canal de comunicación que permita llegar a la mayor cantidad de personas posibles. Por lo tanto, se puede aplicar una estrategia que permita el acceso a la información del centro, mediante aplicación web online y también considerar la construcción de una aplicación híbrida para las plataformas principales Android e iOS. C O NT I NU A R Lección 2 de 2 Referencias [Imagen sin título sobre Apache Cordova] (s. f.). Recuperado de https://cordova.apache.org/ [Imagen sin título sobre vista de emulador https://cordova.apache.org/docs/en/latest/guide/cli/index.html para android] (s. f.). Recuperado de