Desarrollo de aplicaciones mixtas (web/nativa) en Android

4
26622

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.

4 Comentarios

  1. 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.

  2. 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.???

Dejar respuesta

Please enter your comment!
Please enter your name here