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

WebView con AndroidStudio

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 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.
 Visita mis aplicaciones 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

CAPTCHA ImageChange Image