Título: Crear Aplicación Para Android Desde Android. Web con control de Android por JS Publicado por: @XSStringManolo en 23 Octubre 2019, 06:05 am Tutorial por StringManolo.
Crea tu primera aplicación .apk en Android, desde Android utilizando Java, WebView y varios lenguajes Web. Para qué sirve esto? -Para crear una aplicación MiPrimeraApp.apk que se puede instarlar en cualquier móvil con Android. -Para iniciarse o sacar una idea generalizada de como se pueden crear aplicaciones. -Para aprender un poco sobre Android y ver ejemplos de código. -Para crear tu aplicación a partir de esta modificándola y añadiéndole trozos sin tener que escribir todo desde 0. -Para podes programar desde tu móvil cuando no tengas un Pc a mano. -Para obtener una applicación para tu web con la que poder utilizar el dispositivo de tus visitantes. -Para reducir la carga del servidor, obtener información, cobrar por tus servicios... Qué son Java, HTML, javascript, Xml, CSS y SVG? -Lenguajes de programación que te permiten crear aplicaciones o webs a partir de código. Qué es Android? -El sistema operativo utilizado por la mayoría de móviles y tablets. -También se encuentra en muchos otros dispositivos como teles, ordenadores, parquímetros... Qué conocimientos necesito para el tutorial? -Ninguno. Qué conocimientos serían recomendados? -Seguir los tutoriales de w3scholls y de Mozilla de programación. -Saber crear páginas web sencillas con código. -Un poco de POO(Programación orienta a objetos) preferiblemente en javascript, Java o Kotlin. Necesito algo para hacer mi aplicación o mi web? -Software necesario: Java N-IDE https://play.google.com/store/apps/details?id=com.duy.compiler.javanide Java N-IDE será el editor de texto, manager de proyectos y compilador. *Para Windows, Mac o Linux podeis usar Android Studio. En pdfdrive.com hay un montón de libros si buscas "Java Android" en los que se explica todo, empezando por instalar Android Studio. Supongo que Linux es la única plataforma que se os puede complicar la instalación. Apunté hace basante tiempo todos los pasos de la instalación, (Orientado a programar en Android con C++) puede que cambiasen cosas. Yo usé Xubuntu 64 bits. Quizas sea mejor que para Linux busqueis una guía más actual. Aún así os dejo los pasos de instalación por si sirven de algo. Cita de: Pasos: Descargar Android Studio desde su web. Extraer .zip en /home Terminal: $sudo su $cd SDKinstallfolder $cd bin $./studio.sh No import Next -> Custom -> Next Android SDK directory -> /home/Desktop new folder Finish. Close. Download NDK Ir a la web. older versions -> Agree terms. Android NDK Revision 10e(May 2015) (Las hay más recientes pero no eran compatibles, no sé si ahora hay una versión más reciente sin errores de compatibilidad.) Download Java SE Dev Kit Ir a la web. Java SE8u181 Linux-x64.tar.gz Desktop make new folder to install NDK Desktop make " " " Download QT (ir a la web y darle a : Go open source - autodect download) Extract JDK.gz file Extract NDK Extract QT installer using :$ chmod +x qt... (Darle a Tab y se completa la ruta) $./qt.run Next -> Skip -> Next Select installation folder -> Desktop QT QT -> checkbox QT 5.11.2 (La versión que quieras, aqui nl hay problemas de compatibilidad) Tools -> QT installer framework 3.0 Next, agree, install. Empezemos: Una vez tenemos instalado y abierto el Java N-IDE: Le damos a File -> New -> New Android Project Se abre una nueva ventana que cubriremos con lo siguiente: Nombre de la aplicación. Nombre del paquete. Nombre de la actividad. Nombre de diseño. Por ejemplo la app de facebook podría ser algo así: com.facebook.katana MainActivity activity_main.xml En este ejemplo pondremos: MiPrimeraApp com.mimarca.MiPrimeraApp ActividadPrincipal principal_actividad.xml Y le damos a Aceptar. Se creará el proyecto con código básico, con un montón de carpetas y archivos. Arriba tenemos una flecha como la flecha de PLAY. Sirve para compilar. Al darle nos mostrará un error debido a que en el ejemplo vienen configurados nombres por defecto. El error está en la línea 13 del archivo ActividadPrincipal.java El código que da error es: setContentView(R.layout.activity_main); Tiene el nombre que se asigna por defecto R.layout.activity_main Nosotros le llamamos al layout principal_actividad.xml Asique substuimos el nombre y nos queda: setContentView(R.layout.principal_actividad); Le damos a compilar y ya se nos creará nuestra primera aplicación en Android. El sistema por seguridad nos bloqueará la instalación si no tenemos checkeado instalar desde fuentes desconocidas. Le damos a Ajustes. Marcamos fuentes desconocidad tocando la caja. Aceptamos. Le damos a instalar. Abrir. Ya tenemos la aplicación instalada. De momento al abrirla solo muestra un mensaje de saludo HELLO WORLD. (Hola mundo). Ya podemos cerrarla. Ahora lo que vamos a hacer es mostrar una página web en el WebView de Android en el lugar de ese mensaje. Lo primero que necesitamos es programar nuestra página web. 1 - Podemos hacerlo directamente en el Java N-IDE. 2 - Movernos con nuestro gestor de ficheros del telefono y otro editor o web descargada. 3 - O habilitar permisos de acceso a internet y poner la url de una página web. En el Java N-IDE localizamos la carpeta assets que se encuentra dentro de: MiPrimeraApp - app - src - assets Le damos al símbolo más(+) que se encuentra a la derecha de assets. Le damos a crear un archivo XML (ya que no nos sale opción de html) De nombre le pondré A.html y se crea el archivo. El archivo creado es A.html.xml asique más tarde vamos a renombrarlo a webinterfaz.html Como el editor no reconoce archivos html, escribiremos el html directmente en el A.html.xml y después lo renombramos. Le damos al A.html.xml para abrirlo en el editor. Trae por defecto una o dos líneas que borramos. Escribimos nuestra página web. Iré añadiendo comentarios entre <!-- --> o /* */ para el tutorial y explicar cada línea de código. No entraré en mucho detalle, explicaré para que sirve, sin más. Código
Puedes copiar y pegar todo el código con los comentarios, funciona sin problemas. Ahora tocamos el nombre del archivo. Le damos a File. Seleccionamos Save as. Ahí abajo del todo borramos el nombre A.html.xml y le ponemos en su lugar webinterfaz.html Arriba de todo a la izquierda volvemos a las carpetas. Hay varios símbolos. Le tenemos que dar a la flecha que forma un círculo para actualizar los archivos. Así detectará el nuevo archivo webinterfaz.html Aún existe el A.html.xml asique lo eliminamos dándole a la X que está a su derecha. Nos preguntará si estamos seguros que es el archivo que queremos borrar. Aceptamos. Ahora añadiremos el WebView En el archivo ActividadPrincipal.java escribimos los imports correspondientes: Código
Aquí os dejo links con toda la documentación por si quereis ver lo que podeis hacer: https://developer.android.com/reference/android/webkit/WebView https://developer.android.com/reference/android/webkit/WebSettings https://developer.android.com/reference/android/webkit/WebViewClient https://developer.android.com/reference/android/webkit/WebResourceError https://developer.android.com/reference/android/webkit/WebResourceRequest https://developer.android.com/reference/android/annotation/TargetApi En el archivo ya tenemos Código
Aqui la documentación: https://developer.android.com/reference/android/app/Activity https://developer.android.com/reference/android/os/Bundle El código que tenemos ahora en el archivo es: package com.mimarca.MiPrimeraApp; Código
El import nos sirve para poder utilizar código y recursos que se encuentran en otros archivos para poder usarlos en el archivo que tenemos los imports. Los archivos que tienen la letra R. son generados automáticamente por el compilador. Hace referencia a múltiples recursos como puedan ser imágenes, estilos, strings... Creamos la clase ActividadPrincipal que se hereda de Activity. Si no entiendes este código, aquí está muy bien explicado: https://desarrolloweb.com/articulos/android-que-es-una-activity-o-actividad.html Ahora vamos a crear el webview dentro de la clase con la Keyword Private para que solo sea accesible desde ella: Código
Dentro de la clase añadimos lo siguiente: Código Así creamos un nuevo objeto. This hace referencia al propio objeto. También obtenemos una referencia a los ajustes de nuestro WebView para poder manjarlos: Código
El primer ajuste que haremos será activar javascript que viene desactivado por defecto: Código
Un ejemplo de lo que podemos hacer es definir un nuevo User-Agent. Por ejemplo: Código Esto nos sirve por ejemplo para identificar en nuestra página web, si un usuario nos visita desde Google Chrome, Mozilla, Opera, WebView o en este caso nuestra App. Si creamos una web en PHP podríamos hacer lo siguiente: Código
Aquí vamos a crear una interfaz para poder exponer código escrito en Java de nuestra aplicación, a javascript desde una web. Código JSInterface.java lo crearemos después. La cadena de texto "Android" es la que utilizamos en javascript para llamar a Java. Como vimos en la web que creamos: Código
Añadimos lo siguiente para tema Versiones: Código
Y por último la URL que queremos cargar en el WebView: En este caso un archivo HTML local, pero puedes perfectamente poner cualquier link como https://www.example.com/index.php Código
Y lo mostramos: Código
Todo junto nos quedaría de la siguiente forma el archivo ActividadPrincipal.java: Código
Ahora en el administrador de archivos de la izquierda le damos al + para crear un nuevo archivo .java para la interfaz de javascript: Justo encima del archivo ActividadPrincipal.java tenemos la carpeta que lo contiene llamada MiPrimeraApp. A la derecha le damos al + para crear un nuevo archivo: Seleccionamos Java File. En class name nombramos el archivo como JSInterface y aceptamos. Se nos crea un archivo JSInterface con el siguiente contenido: Código
Añadiremos los siguientes imports: Código
Hay muchos otros interesantes, como por ejemplo: Código Que nos permite leer los SMS del Smartphone, o enviar SMS entre otras muchas cosas. El resultado de enviar un SMS es el mismo que si lo hiciésemos normalmente, asique hay que tener cuidado al escribir código, ya que podríamos llegar a enviar SMS en bucle por error y agotar el saldo o recibir una factura muy alta. Dentro de nuestra Interfaz pondremos: Código
El contexto nos sirve para acceder a funciones de Android y exponerlas a la interfaz. https://developer.android.com/reference/android/content/Context Ahora podremos añadir la función del sistema a la que queremos acceder. Para este tutorial, haremos algo simple, como hacer vibrar el SmartPhone. Código
El resultado del archivo JSInterface.java es el siguiente: Código
Ahora abrimos el archivo principal_actividad.xml y lo dejamos de la siguiente forma: Código
De esta forma añadimos el WebView que usaremos de interfaz y decimos que ocupe toda la pantalla. Por último el AndroidManifest.xml que dejamos de la siguiente manera: Código
En este archivo las líneas más interesantes de conentar son: Código Con estas lineas pedimos al usuario que permita estas funcionalidades a nuestra app. Acceso a internet y control a la vibración. Código terminado. Tras darle al botón de Play se contruirá la aplicación. Ya podemos instalarla y probarla. Al darle al rectángulo superior que pone MiPrimeraApp el móvil vibrará y el rectángulo cambiará de color. Si te fijas también cambia el rectángulo de abajo. Si le tocas al de abajo, el móvil vibrará de forma distinta. Esto funciona de igual forma en un página en la Web. Por lo que si ya tienes una página web, puedes hacer una versión especial para Android que controle funciones del Smartphone. Hacer llamadas, mandar mensajes, reproducir música y efectos de sonido, obtener lista de contactos, manejar archivos, obtener imágenes... Todo lo que se te ocurra. (https://i.imgur.com/n1kNKaP.png) |