Con la amplia variedad de dispositivos, plataformas y funcionalidades existentes en el mundo de dispositivos móviles, se ha vuelto muy difícil para los desarrolladores el crear aplicaciones de forma rápida, así como de dar mantenimiento a estas en las diferentes combinaciones de plataformas (iOS, Android, Windows, etc.). Así mismo, poner las aplicaciones en las manos de los usuarios hace que esto sea un tarea casi imposible en un periodo de tiempo corto. Apache Cordova provee un conjunto de APIs para crear aplicaciones móviles híbridas usando tecnologías Web que pueden accesar funciones nativas, tales como la cámara, contactos, acelerómetro, red, etc. En esta sesión, Victor Sosa demostrará como se puede crear una aplicación móvil de una forma rápida que es capaz de ser usada en diferentes dispositivos y plataformas y que además usará funciones nativas. También compartirá buenas prácticas y recomendaciones para proyectos de desarrollo de aplicaciones basadas en Apache Cordova.

1. www.sgcampus.com.mx @sgcampus
www.sgcampus.com.mx
@sgcampu
s
Aplicaciones móviles con Apache Cordova

2. www.sgcampus.com.mx @sgcampus
Agenda
● Tecnologías móviles y su alcance.
● El espectro de aplicaciones móviles.
● ¿Por qué Apache Cordova?
● Conceptos básicos.
● Instalación.
● Uso de la línea de comandos.
● Herramientas.
● Mejores prácticas.
● Tips & trucos.
● Contactos y documentación.
● ¿List@ para contribuir?

3. www.sgcampus.com.mx @sgcampus
Tecnologías móviles y su alcance
● “Para el 2018, más del 50% de los usuarios usarán dispositivos móviles para todas sus actividades en
línea” - Gartner: http://www.gartner.com/newsroom/id/2939217
● Se estima que para el 2020 habrá un promedio de 4.3 dispositvos móviles per cápita – Mobile World
live http://www.mobileworldlive.com/connected-devices-to-hit-4-3-per-person-by-2020-report
● Políticas BYOD (Bring your own device) son cada vez más atractivas para las compañías.
● Las aplicaciones móviles permiten la evolución y uso del Internet de las Cosas (Internet of Things)

4. www.sgcampus.com.mx @sgcampus
Espectro de aplicaciones móviles
Mobile
web
site
(acceso
por
browser)
Native
shell
Contiene
un sitio
m.miorg
externo
Pre-
packag
ed
Recursos
HTML5
HTML5
+
native
UI
Mostly
native
Algunas
pantallas
HTML5
Pure
native
Web-native continuum
HíbridoWeb puro Nativo
puro

5. www.sgcampus.com.mx @sgcampus
¿Por qué Apache Cordova?
● Conjunto de APIs para la construcción de aplicaciones móviles híbridas que proveen mecanismos para
accesar funcionalidades nativas de los dispositivos.
● Soporta una gran variedad de plataformas.
● Auspiciado por la organización Apache con ayuda de muchas otras compañías (Adobe, Google, IBM,
Microsoft, Mozilla, Intel y muchas más)... Y de individuos como tu!
● Sigue los lineamientos de la ASF.
● Dirigido por la comunidad y no por los objetivos de una sola compañía.
● http://cordova.apache.org/

6. www.sgcampus.com.mx @sgcampus
Conceptos básicos
● Aplicación Cordova: Aplicación creada usando la línea de comandos de Cordova.
● Plataforma: Ambiente que es soportado en la aplicación. Por ejemplo: Android, iOS, Windows phone,
etc.
● Plugin: Código inyectado que permite la comunicación entre el webview (Javascript) y la parte nativa
de la plataforma (Java, Swift, .NET, etc).
● Config.xml: Archivo central que contiene las especificaciones de la aplicación y que son compartidas
entre las plataformas.

7. www.sgcampus.com.mx @sgcampus
Instalación
● La línea de comandos Cordova funciona en una Terminal o Windows Prompt solamente.
● Instalar Node.js - https://nodejs.org/
● Asegurarse que los ejecutables de Node.js y NPM están en el PATH
– Windows: echo %PATH%
– Linux & Mac: echo $PATH
● Instalar Cordova usando NPM
– npm install cordova
– En Linux y Mac es probable que se requiera el uso de sudo.
* Conexión a internet es necesaria durante el proceso de instalación.

8. www.sgcampus.com.mx @sgcampus
La línea de comandos de Cordova
● cordova -help: Lista los posibles comandos que se pueden usar.

9. www.sgcampus.com.mx @sgcampus
La línea de comandos de Cordova
● cordova create <aplicación> <identificador> <nombre a desplegar>
● Estructura del proyecto en el sistema de archivos.
● Crea una aplicación con un simple HelloWorld con un HTML y Javascript que espera hasta que el
dispositivo se encuentra listo para usar las funciones nativas
– Para esto, hay que utilizar un EventListener que espere por el evento “deviceready”. Esto
usualmente se logra con el siguiente código:
document.addEventListener(“deviceready”, <callback>, true|false);
* Conexión a internet es necesaria durante el proceso de creación para descargar los archivos del
proyecto.

10. www.sgcampus.com.mx @sgcampus
Línea de comados
● Archivo config.xml
<?xml version='1.0' encoding='utf­8'?>
<widget id="org.victor.sample" version="0.0.1" xmlns="http://www.w3.org/ns/widgets"
xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>HelloWorld</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev@cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<access origin="*" />
</widget>

11. www.sgcampus.com.mx @sgcampus
La línea de comandos de Cordova
● cordova plugin add <plugin>
● Cordova Plugin Registry (http://plugins.cordova.io). Próximamente será movido al repositorio NPMJS!
● Plugin en el sistema de archivos local (útil para el desarrollo de plugins de Cordova)
● Plugin alojado en un repositorio Git (requiere Git en el PATH)
● cordova plugin rm <plugin>
* Conexión a internet es necesaria durante el proceso de instalación del plugin.

12. www.sgcampus.com.mx @sgcampus
La línea de comandos de Cordova
● cordova platform add <plataforma>
● cordova platform rm <plataforma>
* Conexión a internet es necesaria durante el proceso de instalación de la plataforma.
** El SDK de la plataforma debe de ser localizable en el PATH. Consulte las guías de las plataformas
para más detalles para cada una.

13. www.sgcampus.com.mx @sgcampus
La línea de comandos de Cordova
● cordova run <plataforma>
– Corre la aplicación en un dispositivo físico. Si no está conectado el dispositivo a la computadora o
no lo detecta, entonces arranca el respectivo emulador para la plataforma.
● cordova emulate <plataforma>
– Corre la aplicación en un emulador.

14. www.sgcampus.com.mx @sgcampus
La línea de comandos de Cordova

15. www.sgcampus.com.mx @sgcampus
La línea de comandos de Cordova
● cordova build <plataforma>
● Soporta dos banderas:
– debug: Usado para compartir el proyecto compilado para propósitos de testing solamente. Las
app stores no permiten agregar estos archivos por que no están firmadas apropiadamente.
– release: Cuando una aplicación es construida con esta bandera, el archivo no puede ser
instalado dado que le falta la firma. El siguiente paso es firmar el archivo. Este firmado es
dependiente a la plataforma. Ver las guías de las plataformas en la documentación.

16. www.sgcampus.com.mx @sgcampus
Herramientas
● IDE's populares que soportan Cordova
– Eclipse, usando el proyecto THyM - https://www.eclipse.org/thym/
– IBM MobileFirst - http://www.ibm.com/mobilefirst/us/en/
– IBM Rational Application Developer - http://www.ibm.com/developerworks/downloads/r/rad/
– NetBeans - https://netbeans.org/
– MyEclipse - https://www.genuitec.com/products/myeclipse/
– Visual Studio - https://www.visualstudio.com/en-us/cordova-vs.aspx
– AppBuilder - http://www.telerik.com/appbuilder
● Herramientas de integración
– Ionic - http://ionicframework.com/
– Supersonic - http://www.appgyver.com/

17. www.sgcampus.com.mx @sgcampus
Mejores prácticas
● Single-Page Application (SPA).
● Manejo de eventos “click” y “tap”.
● Favorecer animaciones con CSS en lugar de eventos en el DOM.
● Manejo del estado de la red: online y offline.
● Modificar el whitelisting para minimizar los dominios que pueden accesar a la aplicación e incrementar
seguridad.
● Usar InAppBrowser para abrir links que redireccionan a otro sitio.

18. www.sgcampus.com.mx @sgcampus
Tips y trucos
● No incluir las plataformas ni los plugins en sistemas SCM como Git o CVS.
● Usar la bandera –save cuando se agregan plugins y plataformas por primera vez. Esto guardará la
información del plugin o plataforma en el archivo config.xml.
● Usar la bandera –browserify cuando se agrega un plugin para generar código Javascript que puede ser
usado en un web browser. Esto permite probar la aplicación rápidamente.
● Usar LiveReload y el plugin GapReload.
● Cuando se genere una nueva página HTML, no olvides incluir el script cordova.js usando la tag
<script>

19. www.sgcampus.com.mx @sgcampus
Contactos y documentación
● Documentación oficial - http://cordova.apache.org/docs/en/edge/
● Noticias - http://cordova.apache.org/#news
● StackOverflow - http://stackoverflow.com/questions/tagged/cordova
● Grupo en Google - https://groups.google.com/forum/#!forum/phonegap
● Mailing lists - http://cordova.apache.org/#mailing-list
● Blog de Raymond Camden - http://www.raymondcamden.com/category/Mobile

20. www.sgcampus.com.mx @sgcampus
¿List@ para contribuir?
● Lee nuestros lineamientos - http://cordova.apache.org/#contribute
● Suscríbete a nuestra lista de distribución para desarrolladores de Cordova -
dev-subscribe@cordova.apache.org
● No olvides firmar y enviar tu iCLA!!
● Envíanos tus pull requests y no olvides recordarnos sobre ellos.