Seleccionar página

Cómo crear una app híbrida con PhoneGap Framework – Instalación

Cómo crear una app híbrida con PhoneGap Framework

Aprenderemos a desarrollar nuestra primera app híbrida con PhoneGap.

PhoneGap

En este primer artículo veremos una introducción al concepto de app híbrida y aprenderemos a instalar las herramientas que Adobe PhoneGap pone a disposición de los programadores  y desarrolladores de apps.

Instalaremos la herramienta de escritorio PhoneGap en nuestro ordenador y la app de PhoneGap para el dispositivo móvil.

En próximos artículos conoceremos la estructura de una app híbrida desarrollada en PhoneGap y crearemos algunas apps sencillas de prueba.

App Híbridas: una forma sencilla de aprender a crear tus primeras Apps

apps móvil

Comentamos hace unos días como el desarrollo de aplicaciones móviles nativas nos ofrece ventajas frente al resto de aplicaciones móviles y algunos inconvenientes cómo la curva de aprendizaje o formación del programador de la app.

Desarrollar una app nativa te obliga a programar una versión de la misma para cada sistema operativo y tener conocimientos de distintos lenguajes de programación: Objetive- C y Swift (IOS), Java y XML (Android), C# y .Net (Windows)… si vienes del mundo del desarrollo web y ya conoces tecnologías como HTML, CSS y JavaScript desarrollar una app híbrida te resultará muy sencillo.

Características principales de las Apps Híbridas

Una aplicación híbrida es una mezcla entre tecnologías web y tecnologías nativas

Para su desarrollo el programador implementa código propio de tecnologías web (HTML5, CSS3, JavaScript) de esta forma la app se puede utilizar en distintas plataformas. Esto es así porque en las aplicaciones hacen uso del navegador web del dispositivo sin que esto quede latente al usuario.

Son capaces de acceder a varias de las APIs nativas de cada sistema operativo y a gran parte de la funcionalidad del dispositivo: cámara, GPS…

Ofrecen mejor rendimiento y experiencia de usuario que las aplicaciones web pero inferior a las apps nativas. No necesitan conexión a internet y se distribuyen desde las apps Stores

PhoneGap Framework para el desarrollo de apps híbridas

PhoneGap es un framework para desarrollar aplicaciones móviles que hoy en día pertenece a Adobe. Es una distribución de Apache Cordova y cómo tal es software de código libre, esto quiere decir que podemos hacer uso del mismo en cualquier aplicación sin necesidad de atribución o adquisición de licencias de ningún tipo.

PhoneGap nos permite desarrollar aplicaciones para dispositivos móviles utilizando JavaScript, HTML5 y CSS3. Las aplicaciones construidas con estas tecnologías reciben el nombre de apps híbridas, debido a que no son realmente aplicaciones nativas al dispositivo aunque funcionen en cada uno de ellos.

El renderizado de la app se realiza mediante vistas web (hace uso del navegador) y no con interfaces gráficas específicas de cada sistema

PhoneGap trabaja con una serie de librerías que permiten tener acceso a el acelerómetro, la cámara, los contactos, la red, el almacenamiento, las notificaciones, etc del terminal móvil. 

Instalación en 4 pasos de PhoneGap

1 Descarga la versión para Windows o Mac de la app para escritorio desde:  http://phonegap.com/getstarted/

PhoneGap

2 Instala en tu móvil la app de PhoneGap: http://phonegap.com/getstarted/

Iremos desarrollando la app en el ordenador. Para probar su funcionamiento lo haremos desde el dispositivo móvil conectando a la app que estamos desarrollando en nuestro ordenador.

PhoneGap

3 Abre la aplicación de escritorio PhoneGap en tu ordenador y pulsa sobre el signo + para crear un nuevo proyecto llamado: «Mi primera app».

PhoneGap

Selecciona un proyecto vacío, escoge una carpeta donde quieres que se vayan guardando tus proyectos. Puedes crear una nueva carpeta en el escritorio llamada «misapps» donde puedes ir guardando los códigos de prueba que veremos en otros post.

 

4 Por último vamos a conectar desde el móvil con nuestra aplicación. Abre app del móvil y modifica Server Address. Para conocer dirección y puerto de conexión debes consultar en PhoneGap en tu ordenador.

Server Address

Si todo ha ido bien nos vemos en el siguiente artículo sobre apps, donde aprenderemos la estructura de archivos de una app híbrida y desarrollaremos algunas apps sencillas.

Enlaces de Interés

⇒ Adobe PhoneGap: página oficial, descargas de software, foros, documentación…

Libros y vídeos desarrollar aplicaciones móviles con PhoneGap: enlaces desde la página oficial a libros y vídeos editados sobre PhoneGap y Apache Cordova. Te convertirás en un experto en el desarrollo de aplicaciones móviles con PhoneGap.

Comunidad de habla hispana de PhoneGap: foro de habla hispana, con múltiples tutoriales y recursos.

Página oficial de Apache Cordova

Desarrollo de aplicaciones móviles: nativas, web e híbridas

Desarrollo de aplicaciones móviles: nativas, web e híbridas

Una pequeña introducción a las aplicaciones móviles: nativas, web e híbridas.

aplicaciones móviles: nativas, web e híbridas

Una de las primeras decisiones que debemos tomar cuando desarrollamos una aplicación móvil es decidir el tipo de app más adecuada para el proyecto: apps nativas, web o híbridas.. Esta decisión debemos tomarla en base a múltiples factores: funcionalidad, presupuesto, rendimiento, público objetivo… Vamos a diferenciar los distintos tipos de apps que podemos desarrollar y sus principales ventajas.

Aplicaciones móviles: nativas, web e híbridas

Apps Nativas

Desarrollo específico para cada sistema operativo (Android, iOs…) utilizando las tecnologías propias de cada plataforma. Cada sistema operativo  Android, iOS o Windows Phone emplean distintos lenguajes, esto implica que debes tener conocimiento de distintos lenguajes de programación: Objetive- C y Swift (IOS), Java y XML (Android), C# y .Net (Windows)… y desarrollar una aplicación distinta en cada uno de ellos, por desgracia el código no es reutilizable así que además de conocer los distintos lenguajes de programación tienes que tener claro que el tiempo de desarrollo se duplica o triplica.

Las apps nativas  pueden  acceder a todas las características del hardware del dispositivo como: cámara, GPS, agenda, almacenamiento de datos… Su rendimiento es muy alto y ofrecen la mejor experiencia de usuario. Este tipo de aplicaciones está disponible en las apps Store y no necesitan de conexión a internet para funcionar*. 

Como desventaja podemos destacar el coste de implementación, desarrollar una app nativa te obliga a programar una versión de la misma para cada sistema operativo (o por lo menos para los más aceptados en el mercado). 

Un ejemplo de aplicación nativa es Facebook.

*en caso de necesitar conexión para realizar algunas funciones solicitan la misma.

Apps Web Móviles

Se desarrollan con HTML, CSS y JavaScript, es decir, con tecnologías web. La programación es independiente del sistema operativo, por lo tanto solo implementarás el código una vez. Para acceder a ellas se emplea el navegador del dispositivo por lo que requieren siempre conexión a internet para su funcionamiento. 

La principal ventaja que ofrecen es que su desarrollo es más rápido, sencillo y resultan bastante económicas. Además resulta fácil implementar diseño responsive para los diferentes dispositivos.

Por contra:

– No se pueden distribuir dentro de las apps Stores (Market, Store). 

– No pueden acceder a todas las capacidades del dispositivo (por ejemplo a almacenamiento de datos o a contactos).

– Necesitan conexión para interactuar con ellas.

Apps Progresivas

Evolución de las apps web. Nuevo desarrollo de apps llamadas Aplicaciones Web Progresivas cuyo objetivo es acercar la experiencia de uso a una app nativa. Si te interesa información sobre este nuevo tipo de aplicaciones visita el siguiente enlace:

Developers google

Apps Híbridas

Una aplicación híbrida es una mezcla entre tecnologías web y tecnologías nativas. Para su desarrollo el programador implementa código propio de tecnologías web (HTML5, CSS3, JavaScript) de esta forma la app se puede utilizar en distintas plataformas. Son capaces de acceder a varias de las APIs nativas de cada sistema operativo y a gran parte de la funcionalidad del dispositivo: cámara, GPS…

Ofrecen mejor rendimiento y experiencia de usuario que las aplicaciones web pero inferior a las apps nativas. No necesitan conexión a internet y se distribuyen desde las apps Stores.

Decisión del tipo de app

Decidir que aplicación móvil es más adecuada es bastante complejo y debes plantearte varias cuestiones:

  • Presupuesto: si tu presupuesto es elevado puedes decidir desarrollar una aplicación nativa en cada una de las plataformas para las que quieres que esté disponible.
  • Acceso a funciones del dispositivo: si necesitas enviar notificaciones, acceder a contactos o almacén de datos queda descartada la opción de app tipo Web.
  • Diseño e interfaz de usuario: si el diseño y la interfaz de usuario son complejos debes plantear en base al presupuesto una app nativa o híbrida.
  • App escalable: si tu aplicación va a ser modificada y ampliada en un futuro y está desarrollada como aplicación nativa cada mejora supondrá un coste elevado.
  • Store: si necesitas promocionarla en la app Store deberás decantarte por una app híbrida o nativa…

Otros datos de interés:

Enlaces a distintas apps store o tiendas app: