Apps nativas vs apps basadas en web vs apps hibridas

Como todos sabréis, actualmente hay tres tipos de aplicaciones móviles: Nativas, basadas en web e híbridas.

apps_hibridwebnative

  • Una aplicación nativa es aquella que está escrita en java (en el caso de android) o en Objetive-C (en el caso de iOS). Como características decir que tiene acceso completo a las funcionalidades de hardware del dispotivo y sólo puede descargarse desde las app stores.
  • Una aplicación para web son webs que utilizan toolkits especiales de javascript (como jQuery Mobile y Sencha Touch) y css personalizados para hacer que los sitios parezcan y funcionen como apps nativas. Sin embargo, sólo pueden ser accedidas a través de navegador, no pueden ser descargadas desde la app store y no tienen acceso a las funciones de hardware del móvil/tablet.
  • Las aplicaciones híbridas están en el medio de las dos anteriores. Básicamente son webs que están embebidas dentro de código nativo. Lo bueno es que esto te permite utilizar funciones que utilicen características propias del dispositivo (como vibración, cámara, …), y todo ello conociendo únicamente HTML y JavaScript. Un ejemplo de una herramienta que sirve para el embebido de esta web en la aplicación es phonegap. El principal problema de esta forma de hacer las apps es que nunca serán tan buenas como las aplicaciones nativas (más lentas y menos usables, por mucho que se piense lo contrario).

Aquí te dejo un gráfico interesante con información de ello:

app_nativevshybrid

También os dejo una imagen que me ha encantado y que refleja como ninguna a qué problemas nos enfrentamos al escoger una u otra:

Hibrido Vs Nativo

¿Cual será la próxima que escogerás para hacer una aplicación para móviles?

Problema con phonegap 2.9 al no encontrar libCordova.a

Un problema que me he encontrado una vez pasado mi proyecto de phonegap 2.9.0 a iOS es que cuando intentaba archivar el proyecto me aparecía este mensaje.
file not found: /Users/admin/…/libCordova.a
clang: error: linker command failed with exit code 1 (use -v to see invocation).

La forma de solucionarlo es la siguiente:

  1. Ir a “project settings” y a la pestaña “Build Settings”, y buscar por “Other Linker Flags”.
  2. Clicar tanto en Debug como en Release y sustituir {TARGET_BUILD_DIR}/libCordova.a por ${BUILT_PRODUCTS_DIR}/libCordova.a
  3. Limpiar y posteriormente volver a archivar.

Cómo hacer notificaciones iOS y su script PHP

Aquí os traigo un script en PHP para el envío de notificaciones a un dispositivo iOS.  Tendréis que previamente:

  1. Permitir que la aplicación pueda tener notificaciones. Para el caso de phonegap utilicé este plugin
  2. Generar el archivo ck.pem (Ese archivo ck.pem se generará con una $passphrase determinada). Este paso es el infierno de todos, aquí podéis obtener más información de como realizarlo.
  3. Instalar la aplicación en vuestro dispositivo, os aparecerá un cuadro que preguntará si queréis recibir notificaciones de la aplicación o no.
  4. De alguna forma enviar el ID de vuestro iphone o de vuestro ipad ($deviceToken) a vuestro servidor.
  5. Sustituir las variables $deviceToken y $passphrase así como incluir en vuestro servidor vuestro propio ck.pem

 

 

// Put your device token here (without spaces):
$deviceToken = 'XXXXXXXXXXXXXX';

// Put your private key's passphrase here:
$passphrase = 'XXXXXXXXXXXXXXX';

// Put your alert message here:
$message = 'My first push notification!';

////////////////////////////////////////////////////////////////////////////////
$ctx = stream_context_create();
stream_context_set_option($ctx, 'ssl', 'local_cert', 'ck.pem');
stream_context_set_option($ctx, 'ssl', 'passphrase', $passphrase);

// Open a connection to the APNS server
$fp = stream_socket_client(
	'ssl://gateway.sandbox.push.apple.com:2195', $err,
	$errstr, 60, STREAM_CLIENT_CONNECT|STREAM_CLIENT_PERSISTENT, $ctx);

if (!$fp)
	exit("Failed to connect: $err $errstr" . PHP_EOL);

echo 'Connected to APNS' . PHP_EOL;

// Create the payload body
$body['aps'] = array(
	'alert' => $message,
	'sound' => 'default'
	);

// Encode the payload as JSON
$payload = json_encode($body);

// Build the binary notification
$msg = chr(0) . pack('n', 32) . pack('H*', $deviceToken) . pack('n', strlen($payload)) . $payload;

// Send it to the server
$result = fwrite($fp, $msg, strlen($msg));

if (!$result)
	echo 'Message not delivered' . PHP_EOL;
else
	echo 'Message successfully delivered' . PHP_EOL;

// Close the connection to the server
fclose($fp);

Nota: Como veréis se comunica con el sandbox de apple, con el entorno de pruebas. Al pasar a producción será necesario poner el entorno correspondiente.

Phonegap – Frameworks que se pueden utilizar para ayudarnos en la programación

Hoy traigo un listado de varios frameworks que pueden utilizarse para la creación de apps puesto que son compatibles con phonegap.

Su uso nos facilitará en gran medida el que podamos realizar aplicaciones rápidamente, y cada uno tiene sus ventajas y sus inconvenientes, aquí os presento un resumen pequeñito de ello:

jQuery Mobile

  • Ventajas: Es el más extendido y se puede encontrar muchísimos ejemplos y aplicaciones hechas con este dispositivo.
  • Inconvenientes: Necesita jquery y puede llegar a cargar demasiado el dispositivo, no está hecho mediante MVC.
  • Ejemplos de aplicaciones: link

 

Ionic

  • Ventajas: No corre sobre jquery y ha sido diseñado pensando en la velocidad de carga.
  • Inconvenientes: Está todavía a día de hoy en alfa y no hay prácticamente aplicaciones ni ejemplos de código.
  • Ejemplos de aplicaciones: link
  • Ejemplos de código: link

 

 

Sencha Touch

  • Ventajas: Está hecho para HTML5, tiene gran cantidad de funcionalidades (podéis verlas aquí), Es más fluido que jqueryMobile y sigue la filosofía MVC, tiene muy buena documentación.
  • Inconvenientes: Es únicamente javascript, con lo cual puede ser peor para los nuevos desarrolladores. Es muy difícil debuguear los errores en el framework. El Sencha Touch IDE es una aplicación por la cual hay que pagar (no así el Sencha Touch UI).
  • Ejemplos de aplicaciones: link
  • Ejemplos de código: link

 

Kendo UI Complete

  • Inconvenientes: De pago…

 

AppGyver’s Steroids

  • Ventajas: Gratuito, rápido y fluido
  • Inconvenientes: Muy poca gente lo utiliza actualmente
  • Ejemplos de aplicaciones: link
  • Ejemplos de código: link

 

Otros frameworks que pueden usarse son…

Enyo

TopCoat

 

Espero que os haya sido útil el artículo, y es que las soluciones que hay son muchísimas, varían desde librerías orientadas a css (como topcoat) a librerías basadas en MVC con sets de controles móviles. Si os ha gustado también podéis ir a este artículo con información muy útil de phonegap y con un mayor número de ejemplos de código

Phonegap – Ventajas e inconvenientes

Después de estar trabajando mas de un año con phonegap me he decidido a escribir acerca de las cosas favorables y desfavorables que le veo.

Problemas del phonegap:

  • No está orientado a las aplicaciones con múltiples idiomas. En mi caso tuve que poner todas las traducciones en un fichero js y dependiendo del idioma del navegador de usuario incluir una u otra traducción en cada punto.
  • Va un poco lento. Como sabéis phonegap realmente lo que hace es abrir el navegador (aunque no veas que sea el navegador) e imbuir las páginas html. El problema aquí es que va a ir tan lento como una vaya tu navegador. Y además de eso, a veces se ve que las transiciones se hacen pesadas.
  • Hasta ahora he estado trabajando con la versión 2.9, pero ya han sacado la 3, y hay muchos plugins que ya no son válidos. Por poner un ejemplo tenía un plugin que me permitía enviar notificaciones a través del Google Cloud Messaging (GCM), pero en el momento en que actualice la versión de phonegap ya no valdrá (se llamaba de una forma que está deprecated en nuevas actualizaciones).

 

Aspectos favorables:

  • El mismo código vale para crear una aplicación android e iOS (exceptuando características especiales como Notificaciones,…).
  • No es necesario aprender java ni objetive-c, simplemente saber html y js.
  • Es lo mejor para aplicaciones que sean ligeras/pequeñas.
  • Se pueden hacer muchísimas cosas (ver el post de “Phonegap, ejemplos de código y posibilidades“)

Titanium o phonegap, ¿qué ventajas e inconvenientes tiene cada uno de ellos?

Después de currar con los dos me he preguntado muchas veces cual de las dos formas es la mejor, si titanium o phonegap, y he recopilado las ventajas e inconvenientes de cada uno de los dos:

Phonegap
Pros

  • Es muy fácil comenzar a realizar apps con Phonegap. Curva de aprendizaje muy sencilla para desarrolladores.
  • Todos las herramientas para desarrolladores funcionan (ej: Firebug/ Chrome inspector).
  • No es necesario aprender ningún API nueva.

Contras

  • Las apps no son totalmente nativas.
  • Es necesario utilizar algún framework javascript para crear las apps, como jquery mobile o sencha
  • El rendimiento en android/iOS es a veces muy bajo. Vamos, que a veces va lento y un poco a pedales.

Titanium
Pros

  • Las Apps generadas con Titanium utilizan componentes nativos.
  • No hay necesidad de utilizar otros frameworks.
  • Las apps se realizan utilizando únicamente JS (Nada de HTML ni CSS).

Contras

  • Las herramientas de desarrollo como Firebug / Chrome inspector no funcionan
  • No se puede utilizar HTML ni CSS, lo cual dificulta muchas veces las modificaciones de maquetación de las webs.

 

Personalmente, depende del tiempo que tenga para realizar el desarrollo y de si es necesaria realizar una aplicación para web también utilizaré uno u otro.

En caso de tener que hacer las cosas rápido o tener que hacer una aplicación web escogeré phonegap sin dudarlo, ya que me permitirá reutilizar prácticamente todo el código html css para la creación de las apps.

Phonegap, ejemplos de código y posibilidades

El phonegap es una herramienta muy interesante a la hora de crear tus propias aplicaciones móviles sin necesidad de saber los lenguajes de programación de android (java) ni de iOs (Objetive-c). Mediante html, css y js podrás tener una aplicación multiplataforma (te ahorrarás muchas líneas de código).

Las APIS que posee el Apache Cordova (phonegap) y con las cuales se pueden jugar:

  • Acelerómetro – Con él se puede acceder al acelerómetro del dispositivo y guardar las modificaciones del movimiento relacionadas con la orientación.
  • Cámara – Con esta librería se puede acceder a la cámara y a la galería de imágenes de un dispositivo. (Utilizada en F2L, aunque había que insertar plugins)
  • Capturador de ficheros media – Grabar ficheros de audio, capturar imágenes o grabar vídeos.
  • Compás – Se puede obtener la dirección a la cual el dispositivo está apuntando.
  • Conexión – Se puede ver el tipo de conexión que tenemos (None, Ethernet, WiFi,Cell_2G,….).
  • Contactos – Se puede trabajar con la base de datos de contactos del dispositivo.
  • Dispositivo – Se puede obtener el modelo, la versión de phonegap, el nombre del sistema operativo, el identificador único y la versión del sistema operativo.
  • Eventos – Se puede ver cuando Cordova está cargado, cuando la aplicación se pone en segundo plano, cuando se vuelve a pasar a primer plano, si está online o no, el estatus de la batería,… (Utilizada en F2L)
  • Ficheros – Se puede escribir, leer y eliminar los ficheros en el sistema de un dispositivo.
  • Geolocalización – Se puede obtener información de geolocalización de un dispositivo desde el GPS, la dirección IP, RFID, direcciones WiFi y Bluetooth Mac, e ids GSM/CDMA de móviles.
  • Globalización – Permite obtener información de la lengua preferida, el localename, convertir fechas a cadenas y viceversa, obtener la moneda, el primer día de la semana,…
  • InAppBrowser – Se pueden lanzar urls en otras instancias del navegador.  (Utilizada en F2L)
  • Media – Grabar y reproducir ficheros de audio.
  • Notificaciones – Con esta opción se puede acceder a la notificaciones visuales, de audio o de vibraciones de un dispositivo.
  • Splashscreen – Muestra y oculta la pantalla splash de aplicaciones. (Utilizada en F2L)
  • Almacenamiento – Se pueden almacenar variables en el mismo móvil y después volverlas a recuperar. (Utilizada en F2L)

Cosas a parte de esas que se pueden hacer:

  • Hacer traducciones (con ayuda por ejemplo de apis como http://mymemory.translated.net )
  • Integración con Facebook.
  • Integración con Google Maps.
  • Realizar un carrito de la compra.
  • Tener bases de datos internas.
  • Integración con Twitter
  • Utilización del canvas para HTML
  • Utilizar cualquier API que se quiera a la que se pueda acceder mediante ajax

 

Ejemplos de aplicaciones con código disponible:

 

Página con un montón de aplicaciones que han utilizado phonegap http://phonegap.com/app/, ejemplos:

 

Espero que os haya valido para algo (yo al menos tengo un lugar al que acudir para acceder a los links que he encontrado).

(Actualización Junio 2015) He encontrado una página en donde te explican paso a paso cómo hacer un gestor de ingresos y gastos, aquí os lo dejo: http://www.sitepoint.com/creating-an-expense-manager-app-with-apache-cordova/

Como instalar phonegap en iOS

Estos son los sencillos pasos para instalar en tu mac el phonegap para poder trabajar con él:

  1. Descargar la versión que se quiera desde la página de phonegap. Será un .zip que habrá que extraer en una carpeta.
  2. Abrir mediante el Spotlight el terminal.
  3. Utilizando el navegador accedemos al directorio de cordoba-ios, que por ejemplo en el caso del phonegap 2.9.0 es el de /lib/ios/bin
  4. Tomamos esa carpeta bin y la arrastramos hasta el terminal.
  5. En el terminal pondremos la siguiente sentencia “./create ~/CARPETADONDEQUERAMOSPONERLO/ Nombre_del_paquete Nombre_del_proyecto” (Ej:  “./create ~/Desktop/workspace/demo com.yises.demo demo” )

Una vez realizados estos pasos ya tendremos instalado el proyecto de phonegap y podremos ejecutar en la carpeta del proyecto el archivo con extensión .xcodeproj que nos abrirá el Xcode

Para más información visitad esta página: http://cordova.apache.org/docs/en/2.9.0/guide_getting-started_ios_index.md.html