VISUAL STUDIO TOOLS PARA APACHE

CORDOVA
GABRIEL BARRIENTOS
UNIVERSIDAD TECNOLOGICA NACIONAL | Facultad Regional
Tucumn

acin de Aplicaciones Distribuid

Que es Apache Cordova?

Si es posible todo lo que hemos dicho anteriormente y eso gracias al proyecto
Apache Cordova, antiguamente llamado PhoneGap, el cual es un framework
Open Source que te permite construir aplicaciones hbridas empleando
tecnologa Web como HTML5, CSS y JavaScript. En el 2012 PhoneGap se
convirti en uno de los principales proyectos de la Fundacin Apache Software
bajo el nombre Apache Cordova.
Adicional a la posibilidad de construir aplicaciones mviles basadas en
tecnologa Web, Cordova es capaz de crear un puente de interaccin va
JavaScript que permite interactuar con las funcionalidades del hardware del
dispositivo tales como:

Acelermetro: Permite monitorear movimiento, orientacin y notar

agitaciones del dispositivo.
Camera: Permite a los usuarios tomar fotos para tu aplicacin o acceder
a las fotos almacenadas en el dispositivo.
Capturar: Permite capturar video y audio.
Compass: Devuelve el punto cardinal al que se esta orientando el
dispositivo.
Conexin: Permite a tu aplicacin determinar si existe conexin y que
tan fuerte es la seal de la misma.
Dispositivo: Permite acceder a los metadatos del dispositivo.
Eventos: Soporta varios eventos relacionados con el dispositivo como
por ejemplo los cambios en el nivel de la batera.
Ficheros: Acceso al sistema de ficheros del dispositivo, incluyendo la
lectura y escritura de ficheros y directorios.
Geolocalizacin: Permite localizar a tus usuarios.
Globalizacin: Soporta de nmeros y fechas en el formato del idioma
nativo del usuario.
InAppBrowser: Permite el acceso a pginas va URL sin la necesidad de
salir de la aplicacin.
Media: Soporta para el grabado y reproduccin de audio.
Notificacin: Soporta varias formas de llamar la atencin del usuario,
incluyendo sonidos, y alertas basadas en vibracin.
SplashScreen: Permite que el inicio de tu aplicacin posea una
experiencia de inicio particular.
Storage: Provee una base de datos nica por usuario para tu aplicacin.

Puede compilar aplicaciones multiplataforma para dispositivos iOS, Android y

Windows usando Visual Studio Tools para Apache Cordova. El instalador fcil de
usar identifica e instala las versiones adecuadas de los SDK, las herramientas y
las bibliotecas que necesita para compilar aplicaciones Apache Cordova. Use el
depurador de Visual Studio para establecer una asociacin con aplicaciones
iOS, Android y Windows, establecer puntos de interrupcin e inspeccionar
cdigo mediante la consola y el explorador DOM. Apache Cordova permite

tecnologas web estndar de desarrollo multiplataforma como HTML, CSS y

JavaScript.
Puede compilar aplicaciones con las herramientas de estos dispositivos y
plataformas:

Android 2.3.3 y posterior (4.4 proporciona la mejor experiencia de

desarrollador)
iOS 6, 7 y 8
Windows 8 y 8.1
Windows Phone 8 y 8.1

Instalacin nica
Sencillo instalador realiza todo el trabajo pesado necesario para poner en
marcha el equipo con los SDK, bibliotecas, herramientas, etc. necesarios para
crear aplicaciones multiplataforma.

El primer paso para empezar a realizar aplicaciones con Apache Tools, es crear
un nuevo proyecto en blanco Apache Cordova Apps.

Una vez creado el proyecto podemos agregar funcionalidad de dispositivo a la

aplicacin (Plugins)
Apache Cordova usa complementos para dar acceso a funcionalidad de
dispositivo nativa que no est disponible para aplicaciones web simples como,
por ejemplo, el sistema de archivos, la cmara, el acelermetro o los contactos
del dispositivo.
Para agregar funcionalidad de dispositivo, abra config.xml en la raz del
proyecto. Se iniciar el Administrador de configuracin de aplicaciones, en el
que encontrar la pestaa Complementos, que le ofrece complementos
esenciales validados por Microsoft. Tambin puede agregar uno de los cientos
de complementos personalizados creados por la comunidad.

Apli
caci
n
Eje
mpl
o
Apa
che
Crd
ova
Tool
s for
Visu

Use el cdigo que ya conoce

Puede usar su marco de trabajo de JavaScript favorito para compilar su
aplicacin (Angular, Node, React, Ionic...).
Agregando su marco de trabajo de JavaScript favorito a la carpeta de scripts y
editando el cdigo de la aplicacin.

Compile y ejecute (en emuladores y dispositivos)

Puede compilar e implementar su aplicacin en dispositivos y emuladores que
ejecuten Android, iOS, Windows y Windows Phone
El emulador Ripple se ejecuta en Chrome y es el destino de implementacin
predeterminado para los proyectos nuevos. Intntelo ahora presionando el
botn "reproducir" en la barra de herramientas con Ripple seleccionado.
Chrome abrir y cargar la aplicacin.

Objetivo:
Realizar una aplicacin multiplataforma compilando con la herramienta Apache
Cordova for Visual Studio que utilice plugins Android.

Identificacin del problema:

Actualmente en el mbito de educacin las maestras de grado tienen cierto
nivel de dificultad a la hora de comunicarse con los padres de sus alumnos.
Organizan reuniones pero no concurren la totalidad de los mismos, envan
mensajes en papel por medio de los cuadernos diarios de los nios, pero no
tienen la certeza de que el mensaje es entregado con xito. Por lo tanto se
genera cierta incertidumbre al no tener el contacto necesario.

Planteamiento de la solucin:
Para solucionar este problema se propone una aplicacin mvil que permita a
los padres de los alumnos recibir notificaciones en tiempo real sobre las
actividades del establecimiento en donde asiste su hijo/a.
Para el envo de notificaciones por parte de las maestras se emplear un Web
service sencillo que permita enviar un mensaje a quienes hayan implementado
la app Mobile.

Descripcin de la aplicacin:
Aplicacin Mvil (Cliente)
Compilada para la plataforma Android utilizando Visual Studio 2015 con
herramientas Apache Cordova.
Se utilizar JavaScript (AngujarJS), HTML, XML.
Se incorporar los plugins bsicos necesarios para su funcionamiento
validados por Microsoft y para la implementacin de notificaciones push un
plugin desarrollado por la plataforma OneSignal, llamado
OneSignalPushNotificaciones. One Signal es una plataforma que permite enviar
notificaciones a quienes tengan instalada su aplicacin, como as tambin
proporciona documentacin para la utilizacin de esta api para desarrolladores.
Esta api interacta con GCM (Google Cloud Messaging) la nube de google para
mensajes en tipo real.

Web Service (Servidor)

Una app web sencilla compilada en .Net utilizando lenguaje c#, html y SQL
que funcionar como servidor para el envo de mensajes interactuando con la
api de OneSignal para el envo de notificaciones.

Estructura general

Desarrollo
Como vimos en la introduccin, primero tenemos que crear una aplicacin
JavaScript Apache Cordova en Visual Studio 2015.
Otro factor importante a tener en cuenta es la utilizacin de OneSignal Api y
GCM (Google Cloud Messaging)
Procedemos a registrarnos en las pginas oficiales de cada entorno.

Consola Google Developers

https://console.developers.google.com/iam-admin/projects
Si bien para subir aplicaciones al Play Store de Google necesitamos tener
Licencia de Google Developer para la utilizacin de la consola no es necesaria
la misma, ya que no utilizaremos el Store, solo crearemos un nuevo proyecto e
incorporaremos la api de GCM al cual le generaremos una API KEY la cual
utilizaremos para el desarrollo.
Creamos un nuevo proyecto

Habilitamos la API necesaria GCM.

Generamos la API KEY Server en el men credenciales de nuestro Google

Project.

Registro en One Signal

www.onesignal.com
Nos registramos y creamos una Nueva Aplicacin

Seleccionamos que vamos a utilizar GCM

Nos solicitar nuestra API KEY de nuestro Google Project

Seleccionamos el SDK de Cordova

Se nos generar un API ID Key de One Signal, el cual utilizaremos en la

codificacin a la hora de solicitar el registro de nuestra app cliente. Dejamos la

pgina abierta en el navegador de tal manera que una vez que testeamos que
se registr nuestra app cliente checkeamos si ya tenemos algn subscriptor
para poder ingresar al DashBoard de nuestra App.

Procedemos a crear la aplicacin en Visual, luego a instalar los plugins

necesarios para el funcionamiento.
La instalacin de los plugins se realiza por medio de la herramienta que
proporciona Visual Studio, ingresando al config.xml complementos. Elegimos
los necesarios (Algunos son opcionales como por ej. el SplashScreen solo
proporciona un Screen de arranque de la aplicacin).
El plugin que requiere una instalacin especial es el de OneSignal, para ello
hacemos clic derecho en config.xml e ingresamos a l aparte del cdigo y
agregamos el siguiente.

Una vez hecho esto, procedemos a la codificacin.

Al generar el proyecto se nos genera una funcin OnDeviceReady que hace
referencia al inicio de la aplicacin, vendra a funcionar como una funcin
onCreate en otros ambientes de programacin.
Dentro de lo que vendra a ser el constructor de la app realizaremos lo que
sera el registro de la misma en OneSignal, lo cual es necesario para la
recepcin de notificaciones. Para ello ingresamos el siguiente cdigo.

Testeamos la App para verificar que efectivamente se registr nuestro

dispositivo en el Servidor de One Signal, para ello SI O SI tenemos que hacerlo
en un dispositivo fsico ya que los emuladores no lo permiten.

En el DashBoard de nuestra App en OneSignal.com nos figura efectivamente

los usuarios que pueden recibir nuestras notificaciones.
Una opcin es bsicamente utilizar el DashBoard que proporciona OneSignal
para realizar el envo de notificaciones.
Otra es crear un web service sencillo que se encargue de crear notificaciones
para enviar a los usuarios conectados.
Para ello creamos un nuevo Sitio Web en Visual Studio y procedemos a generar
las interfaces necesarias, en este caso implementaremos un Login, Nuevo
usuario y Default (para el envo).

Para la manipulacin de los datos utilizaremos SQLServer. Para ello ingresamos

al SQL Server Management y creamos una nueva db con los campos
necesarios.

Luego dentro del visual realizamos la sincronizacin con nuestra DB creada.

En caso de que no aparezca nuestra instancia de SQLServer, podemos

agregarla manualmente mediante el botn Agregar SQLServer.
Creamos un DataSet que haga referencia a nuestra db, como as tambin para
poder generar procedimientos almacenados para facilitar el trabajo en el
cdigo.

Generamos 3 procedimientos almacenados.

VerificarUsuarioyContrasea: que permitir la autenticacin de usuario y

contrasea.
InsertQuery: para crear un nuevo usuario y cargarlo en DB.
ListaUsuarios (opcional): para obtener los datos de los usuarios
registrados.

Procedemos a crear el cdigo. Comenzamos por el login, bsicamente se trata

de una simple autenticacin en la DB. La cadena de conexin la podemos
obtener en las propiedades de la DB que utilizamos.

El cdigo en NuevoUsuario bsicamente utiliza el procedimiento InserQuery

para agregar un nuevo usuario tomando como parmetros lo ingresado en los
txt.

Para el envo de notificaciones (Default.aspx) nos basamos en la

documentacin que proporciona la api de OneSignal.
https://documentation.onesignal.com/docs/notifications-create-notification
Bsicamente lo que hacemos es enviar una solicitud de autorizacin a nuestra
App creada en OneSignal para lo cual necesitamos enviar como parmetro la
Key de la misma. Podemos encontrarla en:

El cdigo que utilizamos es el proporcionado por la api por lo tanto es genrico

para el lenguaje en el que estamos programando. Lo que vara es la

manipulacin de los parmetros deseamos enviar. En el caso de ejemplo

incorporamos un ttulo y un mensaje.

Testeando nuestro WebService

Resultado en dispositivo Fsico

Observaciones

Para la interfaz del WS se utiliz Boostrap, de tal manera que no

solamente podemos acceder desde la pc, sino tambin desde el
navegador del mvil por ejemplo, ya que se trata de un diseo web
Responsive, es decir, un diseo que permite la visualizacin correcta de
una misma pgina en cualquier dispositivo.
Los mens de la App Mobile son realizados mediante la implementacin
de Ionic Framework.
Para el ejemplo se realiz la compilacin para la Plataforma Android,
pero Apache Cordova nos brinda la posibilidad de compilar tambin para
IOS, Windows Phone y Windows Desktop.

BIBLIOGRAFIA/DOCUMENTACION
INTRODUCCION A VISUAL STUDIO TOOLS FOR APACHE CORDOVA
https://taco.visualstudio.com/en-us/docs/get-started-first-mobile-app/
GCM GOOGLE CLOUD MESSAGING
https://developers.google.com/cloud-messaging/
ONE SIGNAL DASHBOARD
www.onesignal.com
ONE SIGNAL DOCUMENTATION
Instalacin en Apache Cordova for Visual Studio
https://documentation.onesignal.com/v2.0/docs/phonegap-sdkinstallation#cordova-with-visual-studio-click-to-expand
Registro de ID
https://documentation.onesignal.com/v2.0/docs/phonegap-sdk-installation#2add-required-code
Crear Notificaciones (Web Service)
https://documentation.onesignal.com/docs/notifications-create-notification
BOOSTRAP 3, MANUAL OFICIAL
http://librosweb.es/libro/bootstrap_3/
INTRODUCCION A ANGULAR JS
https://codigofacilito.com/courses/angularjs
GENERADOR DE DIAGRAMAS
https://www.gliffy.com
ANTE CUALQUIER SITUACION PARTICULAR
www.youtube.com

www.stackoverflow.com
https://cordova.apache.org/docs/en/latest/