icono_twiter icono Facebook
Carlos García Pérez

Técnico especialista en informática de empresa (CEU).

Ingeniero Técnico en Informática de Sistemas (UPM)

Creador de MobileTest, Haaala!, Girillo, toi18n.

Charla sobre desarrollo de aplicaciones en Android.

Ver todos los tutoriales del autor

Fecha de publicación del tutorial: 2011-04-22

Tutorial visitado 13.567 veces Descargar en PDF
Desarrollo de aplicaciones mixtas (web/nativa) en Android.

Desarrollo de aplicaciones mixtas (web/nativa) en Android.

Introducción

En ocasiones crear una aplicación basada en una arquitectura mixta entre una aplicación nativa y una aplicación web y comunicarlas en base a nuestras necesidades puede ser muy adecuado y ahorrarnos mucho tiempo de desarrollo.

Todos estaremos deacuerdo en que:

  1. Una aplicación web (html, javascript, css, etc) tiene la ventaja de que no hay que distribuir la aplicación cuando hay un cambio en la misma, con cambiar el código en el servidor bastaría.
  2. Una aplicación web no puede acceder directamente a los recursos del dispositivo: GPS, camara de fotos, agenda, etc.

Y digo yo, ¿por qué no una mezcla que aproveche ambas ventajas?.. pues bien, de eso se trata este pequeño tutorial.. ver como comunicarnos entre ambas partes web y nativa

Si quieres trastear, puedes descargarte el código fuente desde clic aquí. Si quieres probarlo directamente en tu dispositivo puedes descargarte la aplicación desde clic aquí

Construcción de una aplicación mixta en Android

El código fuente está autocomentado, no creo que tengas problemas si tienes una base de programación en Android.

Captura de pantalla de la aplicación a construir:

Captura de pantalla de la aplicación

assert/carlos-garcia.html

única página web que compone la aplicación, aunque podría haber sido generada dinámicamente en un servidor, en este ejemplo está ubicada como un estático en la carpeta assert del proyecto.

Ten mucha precaución con la parte de javascript, pues si tienes un error como por ejemplo poner "var" en los parámetros de los métodos no ves errores en los los, simplemente NO funciona la comunicación.

res/layout/main.xml

Interface gráfico de la aplicación, observe que abajo hay un WebView que será donde se muestre la parte web.

es.carlosgarcia.android.MyAndroidToJsInterface

Interface de comunicación entre la parte web y la parte no web (nativa).

es.carlosgarcia.android.WebDemoActivity

Actividad de la aplicación.

AndroidManifest.xml

Archivo de configuración de la aplicación.

Conclusiones

Como veis no es dificil comunicar ambas partes y aprovechar las ventajas de cada paradigma, ahorrándonos mucho tiempo y coste.

Espero que os haya sido útil, un saludo.
Carlos García.

A continuación puedes evaluarlo:

Regístrate para evaluarlo

Por favor, vota +1 o compártelo si te pareció interesante

Share |
Anímate y coméntanos lo que pienses sobre este TUTORIAL:

Fecha publicación: 2012-11-18-16:55:37

Autor: tecnocodigo

Y si quisiera desde
public void metodoDemo1()
{
Toast.makeText(this, "Invocado el metodo: metodoDemo1", Toast.LENGTH_SHORT).show();
}
En lugar del TOAST, modificar el valor de un EditText que previamente he declarado como public en la clase y asociado en onCreate.....

¿por qué no funciona?
Tiene algo que ver con View.???

Fecha publicación: 2012-07-30-13:50:08

Autor: PoderosoDuke

Hola el tutorial me parece bueno , quería hacerte una consulta, si la pagina html la tuvieramos en un apache podriamos comunicarnos igualmente con la Activity ??. muchas gracias.