WebView con AndroidStudio. De WEBAPP en PHP a aplicación Android.

WebView con AndroidStudio

WebView con AndroidStudio. De WEBAPP en PHP a aplicación Android. Cómo convertir nuestra aplicación WEB PHP  en una app Android que soporte COOKIES, SUBIDAS y DESCARGAS DE ARCHIVOS.

Despues de dedicarle decenas de horas a programar nuestra aplicación Web, ahora nos encontramos con la ilusión de poder convertirla en una aplicación Android e incluso verla expuesta en GooglePlay.

Supongo que igual que yo, habréis leido bastante sobre los WebViews para Android o habéis intentado hacerlo con App Inventor. Al final me he decantado por utilizar un Webview con Android Studio.

En este post os compartiré el código necesario para, una vez habéis terminado con vuestra WebApp, podáis convertirla en App de Android.

Además , tiene las siguientes características:

Permite el uso de Cookies. Si nuestra aplicación requiere registro de usuarios y cookies para el Login, éstas cookies quedarán guardadas para la próxima vez que inicies la app.

Permite la descarga de archivos.  Las imágenes y estilos de nuestra app quedarán guardadas en el caché de nuestro teléfono.

Permite la subida de archivos. Soporta la subida de archivos a nuestro servidor desde formularios HTML.

Bien, empecemos:

Creando nuestro proyecto.

Una vez hayamos instalado Android Studio, procederemos a crear nuestro primer proyecto.

Si no tienes un proyecto abierto, Android Studio muestra la pantalla de bienvenida, donde puedes hacer clic en Start a new Android Studio project para crear un nuevo proyecto.

Si tienes un proyecto abierto, para comenzar a crear un nuevo proyecto selecciona File > New> New Project en el menú principal.

Deberías ver el asistente Create New Project, que te permite elegir el tipo de proyecto que deseas crear y se completa con código y recursos para comenzar. Esta página sirve como guía para la creación de un nuevo proyecto desde el asistente Create New Project.

En la pantalla Choose your project que aparece, puedes seleccionar el tipo de proyecto que deseas crear entre las categorías de factores de forma del dispositivo, que se muestran como pestañas cerca de la parte superior del asistente.

nuevo proyecto con AndroidStudio

IMPORTANTE: En este caso hay que seleccionar EMPTY ACTIVITY

Haz tu selección y, luego, haz clic en Next.

nuevo proyecto con AndroidStudio

IMPORTANTE: Para este ejemplo hay que introducir los siguientes datos

Name: myapp / Languaje: Java.

El resto, lo dejamos tal cual y esperamos a que se genere el proyecto. Tarda un poco, paciencia.

Primer archivo: AndroidManifest.xml

Copia el siguiente código sustituyendo el actual

PERMISOS

Verás que en las primeras filas ya aparecen los permisos necesarios de tu app. En este caso necesitamos permiso para conectarse a INTERNET, para DESCARGAR archivos y para SUBIR archivos. Hay muchos más que puedes añadir si tu aplicación los necesita.

Después se pide la información básica de la aplicación: Nombre, Iconos, Versión….

Deberás crear tus propios iconos para la App. Te explico cómo:

ICONOS

Hay que  iniciar Image Asset Studio, sigue estos pasos:

Haz clic con el botón secundario en la carpeta res y selecciona New > Image Asset.

 

nueva imagen con AndroidStudio

Deberás crear 2 imágenes para tu app,

y en la parte de la propia actividad <activity> hemos puesto android:screenOrientation=”portrait” para que la aplicación sólo se vea en vertical. Puedes eliminarlo o modificarlo en función de tus necesidades.

Y con esto damos por completado el archivo AndroidManifest.xml

 

Segundo archivo: activity_main.xml

En este caso, al ser algo tan simple para la actividad, simplemente tiene 2 instrucciones:

Decirle qué WebView tiene que mostrar, en este caso le hemos asignado como id en nombre “web_view” y especificamos el  android:layout_height  android:layout_width como “match_parent” para que se ajuste al total de las pantallas.

El código es el siguiente:

 

Tercer archivo: MainActivity.java

Y aquí llegamos al último de nuestros archivos necesarios, el archivo .java.

Aquí es donde se añaden todas las intrucciones para el correcto funcionamiento de nuestra app. No voy a extenderme mucho en explicaciones ya que, si os soy sincero, aún estoy familiarizándome con estas lineas de código y todo lo que hacen.

Vereis que lo primero que hace es cargar todas las librerias que necesita. Pero intentaré aclarar algunas cosas.

  • LINEA 92,  sirve para ocultar el STATUS BAR mientras se ejecuta nuestra aplicación.
  • LINEA 118webView.loadUrl (“http://mi_app.com/”);  aqui es donde ponemos la dirección de nuestra web . Recordad poner la dirección absoluta.
  • LINEA 133,  funcion para permitir descargas de archivos.
  • LINEA 172,  las siguientes lineas hacen que se permita la subida de archivos desde la app a nuestro servidor a través de un boton <input type=”file”> de nuestra webapp. En este caso sólo permite subir imágenes. Puedes modificarlo en la linea 200.
  • LINEA 233,  permite el BACK desde el botón del móvil en caso de poder volver atrás. En caso contrario, cerrará la aplicación.

Y aquí os dejo el código completo.

Yo he usado estos códigos en 3 aplicaciones. Me han funcionado, y siguen haciéndolo perfectamente. En cualquier caso os recomiendo ver videos y leer mucho para aprender más y hacerlo mejor.

Mientras tanto, yo seguiré publicando ayudas para todos aquellos que empezáis. Como yo.

Espero que os sirva y no dudeis en comentar. Hasta pronto!

 

Compartir esta entrada.

11 thoughts on “WebView con AndroidStudio. De WEBAPP en PHP a aplicación Android.

  1. Amigo todo corre bien en Debug, pero al ponerlo en release, para lanzarlo me sale el siguiente error:

    Execution failed for task ‘:app:mergeReleaseResources’.
    > Multiple task action failures occurred:
    > A failure occurred while executing com.android.build.gradle.internal.res.Aapt2CompileRunnable
    > AAPT2 aapt2-7.0.0-alpha03-6992486-windows Daemon #0: Unexpected error during compile ‘C:\Users\3J\AndroidStudioProjects\myapp\app\src\main\res\mipmap-xxhdpi\ic_launcher.png’, attempting to stop daemon.
    This should not happen under normal circumstances, please file an issue if it does.
    > A failure occurred while executing com.android.build.gradle.internal.res.Aapt2CompileRunnable
    > AAPT2 aapt2-7.0.0-alpha03-6992486-windows Daemon #1: Unexpected error during compile ‘C:\Users\3J\AndroidStudioProjects\myapp\app\src\main\res\mipmap-xxhdpi\ic_launcher_round.png’, attempting to stop daemon.
    This should not happen under normal circumstances, please file an issue if it does.

    * Try:
    Run with –stacktrace option to get the stack trace. Run with –info or –debug option to get more log output. Run with –scan to get full insights.

    Porfavor espero me puedas ayudar

  2. Asi es amigo. Probé tu código y si me permite cargar imágenes, funciona correctamente, solo que archivos PDF o word salen deshabilitas. Porfavor quisiera saber cómo poder también cargar esos archivos. Mencionaste que en la línea 200 se puede hacer. Gracias de antemano por tu gran ayuda

    1. Hola Jaime. Como ya te dije en el mensaje anterior, la limitacion del tipo de archivo que puedes subir viene determinada por el codigo HTML de tu formulario.
      No tiene nada que ver el codigo de este post.
      Te será muy fácil encontrar en Google información al respecto. Has de usar el atributo “accept” en tu input.
      Por ejemplo, este input permite seleccionar imagenes y archivos .pdf.

      input type=”file” accept=”image/*,.pdf”

      Suerte!!

  3. Buen día estimado amigo. Primero felicitarte me ayudado tu código. Quisiera porfavor me ayudes a que pueda aceptar cargar en los input también archivos. Mencionaste la línea 200. Cual seria el proceso para poder permitir también archivos.

    1. Hola Jaime. Un webview no deja de ser mostrar en la app una pagina web o una aplicacion.
      Para poder subir archivos de todo tipo has de ponerlo en el código PHP de tu aplicacion. Puedes probar tu formulario entrando directamente en la web en lugar de desde la app.
      Espero que te funcione.
      Saludos.

      1. Asi es amigo. Probé tu código y si me permite cargar imágenes, funciona correctamente, solo que archivos PDF o word salen deshabilitas. Porfavor quisiera saber cómo poder también cargar esos archivos. Mencionaste que en la línea 200 se puede hacer. Gracias de antemano por tu gran ayuda

  4. Buenas, antetodo excelente trabajo, me ha servido de mucho, pero me he quedado atascado puesto que no soy capaz de hacer para dar permiso a la geolocalización, es una web que aparece un mapa y cuando carga te pide permiso, pero en la app no lo hace…. ¿Me podrias aconsejar? Gracias de antemano.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

CAPTCHA ImageChange Image