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.javanideJava 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.
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í:
Facebook
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.
<!DOCTYPE html>
<!-- Indica que es un documento de HTML5 -->
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'/> <!-- Fija la vista para Android -->
<!-- Indica el encoding del documento para que el navegador lo reconozca. -->
<!-- Inicio de la página web -->
<!-- Inicio de la cabecera, se usa para codigo que no va a ver el usuario directamente sobre la página -->
<!-- Indica el título de la página, por ejemplo Nueva Pestaña es un título por defecto -->
/* A partir de aquí deja de ser código HTML y pasa a ser código javascript */
function CambiarColorRectangulo()
/* Se crea un función(Es como un programa nuevo) y se le da un nombre.
Entre los paréntesis ( ) pueden ir datos para función. En este caso no le puse */
{
/* Todo lo que esté dentro de estos paréntesis pertenece a la función.
Es lo que la función va a hacer. */
var Rectangulo1 = document.getElementById('Rectangulo1');
/* Guarda con el nombre Rectangulo1 un rectángulo que se encuentra más adelante.
Por si no te queda claro y por simplificar, todo este código javascript de la función se ejecutará
mucho más adelante. */
var Rectangulo2 = document.getElementById('Rectangulo2');
/* Lo mismo que lo anterior pero con otro rectángulo */
var r = Math.floor(Math.random() * 255);
/* Se guarda un número aleatorio entre 0 y 255. */
var g = Math.floor(Math.random() * 255);
/* Se guarda otro número aleatorio*/
var b = Math.floor(Math.random() * 255);
/* Se guarda otro número aleatorio */
Rectangulo1.style.fill = 'rgb(' + r + ', ' + g + ' , ' + b + ')';
/* Se le añade un estilo al rectángulo1 con los 3 númeos aleatorios.
Cada número equivale a un color. Se mezclan los 3 colores para obtener un color nuevo.
La r (red) equivale a la cantidad de rojo. 0 = Sin rojo, 255 = Mucho Rojo.
La g (green) lo mismo pero para el color verde.
La b (blue) lo mismo pero para el azul.
*/
Rectangulo2.style.fill = 'rgb(' + r + ', ' + g + ' , ' + b + ')';
/* Los mismos colores pero para otro rectángulo */
}
/* Se acaba lo que hace la función.
Como resumen, esta función lo que va a hacer es:
Cada vez que le toques con el dedo a un rectángulo, se pintarán
los 2 rectángulos de un color aleatorio.
*/
<!-- Ya se acabó el código de javascript, asique estamos otra vez en el HTML. -->
<!-- Se cierra la cabecera -->
<!-- Se abre el cuerpo del documento donde se define todo lo que se va a ver -->
<div class="Web" id="Banner_StringManolo" style="text-align:center;"> <!-- Se crea un contenedor, le damos varios nombres identificadores e indicamos que todo
lo que pongamos dentro se centre -->
<div class = "BannerFijadoAbajo"> <!-- Otro contenedor para otro Banner(El rectángulo de adorno) -->
<svg style = "display:block" width="100%" height="20">
<!-- Svg son imágenes que crea el navegador y crecen automáticamente con el zoom -->
<rect width="100%" height="22" style="fill:rgb(0,0,0);stroke-width:1%;stroke:rgb(0,0,0)" id="Rectangulo2"
onclick="CambiarColorRectangulo();vibrate(100);"/>
<!-- Crea un rectángulo que ocupe todo el ancho de pantalla, lo pintamos de negro y le ponemos borde también negro
En el onclick(Tras hacer click en el rectángulo), se activa el javascript que acabamos de ver, para cambiar el color por uno aleatorio.
Al hacer click también llamamos a otro código de javascript que veremos más adelante.
-->
</svg>
<!-- Acabamos de usar SVG -->
<!-- Cerramos el contenedor del banner de la parte inferior. -->
<div class = "BannerFijado"> <!-- Contenedor para el banner de arriba -->
<svg style = "display:block" width="100%" height="40">
<!-- Iniciamos el area límite de SVG sobre la que crear gráficos -->
<g>
<!-- Contenedor para agrupar varios SVG distintos. En concreto para poder dibujar texto sobre el rectángulo -->
<rect width="100%" height="42" style="fill:rgb(0,0,0);stroke-width:1%;stroke:rgb(0,0,0)" id="Rectangulo1"
onclick="CambiarColorRectangulo();vibrate(50);"/>
<!-- Desactivado para conexiones lentas y testeos. Lo dejo como ejemplo de fuente custom.
<defs>
<style>
@import url("http://fonts.googleapis.com/css?family=Audiowide");
<text x="50%" y="50%" font-family="Audiowide" font-size="30%" fill="white">MiPrimeraApp</text>
</style>
</defs>
-->
<!-- Elimina los bordes del texto SVG -->
<text x="50%" y="50%" font-size="90%" fill="white" dominant-baseline="middle" text-anchor="middle">MiPrimeraApp
</text> <!-- Crea texto SVG (escala junto al rectángulo) -->
</g>
<!-- La g sirve para meter el texto dentro del rectángulo -->
Tu navegador no soporta Scalable Vector Graphics.
<!-- Si el navegador o WebView no pudiese mostrar los SVG se mostraría este mensaje -->
</svg>
<!-- Se acabó el SVG -->
<!-- Cerrando contenedores en los que creamos gráficos SVG -->
<!-- Saltos de línea -->
<div id="content-window" class="WebIncrustada"> <!-- Contenedor en el que se cargará una página web -->
<input type="text" id="url_a" value="http://www.example.com"><br> <!-- Un input para escribir una URL -->
<input id="btn" type="button" value="Ver" /> <!-- Un botón que se usará para ver una Web -->
<input id="btn_a" type="button" value="Visitar" /> <!-- Un botón que se usará para ir a una Web -->
<div class="ContenidoDelSitio" >
<!-- Estilos para hacer más bonita y ordenada la web -->
.BannerFijado{
position: fixed;
left: 0;
right: 0;
top: 0;
}
.BannerFijadoAbajo{
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
.ContenidoDelSitio{
margin: auto;
width: 50%;
height: 50%;
padding: 10px;
text-align: center;
bottom: 0
margin-left: auto;
margin-right: auto;
}
.WebIncrustada{
width: 100%;
height: 200%;
text-align left;
border: 1px solid green;
}
/* javascript: */
btn.onclick =
function(){
var temp = document.getElementById("url_a").value;
document.getElementById("content-window").innerHTML='
<object type="text/html" data="'+temp+'"></object>';
/* Si se hace click en el botón Ver, se pega el HTML de la página web que ponga el usuario.
Necesita mejoras para compatibilidad. */
btn_a.onclick =
function()
{
window.location = temp;
}
/* Si se le da al botón Ir, se abre la página en el WebView */
}
/* Con esta función haremos vibrar el Smartphone. */
function vibrate(milliseconds)
{
Android.Vibrate(milliseconds);
} /* Llama al Vibrate en Java */
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:
import android.webkit.WebView;
import android.webkit.WebSettings;
import android.webkit.WebViewClient;
import android.webkit.WebResourceError;
import android.webkit.WebResourceRequest;
import android.annotation.TargetApi;
Aquí os dejo links con toda la documentación por si quereis ver lo que podeis hacer:
https://developer.android.com/reference/android/webkit/WebViewhttps://developer.android.com/reference/android/webkit/WebSettingshttps://developer.android.com/reference/android/webkit/WebViewClienthttps://developer.android.com/reference/android/webkit/WebResourceErrorhttps://developer.android.com/reference/android/webkit/WebResourceRequesthttps://developer.android.com/reference/android/annotation/TargetApiEn el archivo ya tenemos
import android.app.Activity;
import android.os.Bundle;
Aqui la documentación:
https://developer.android.com/reference/android/app/Activityhttps://developer.android.com/reference/android/os/BundleEl código que tenemos ahora en el archivo es:
package com.mimarca.MiPrimeraApp;
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebSettings;
import android.webkit.WebViewClient;
import android.webkit.WebResourceError;
import android.webkit.WebResourceRequest;
import android.annotation.TargetApi;
import com.mimarca.MiPrimeraApp.R;
public class ActividadPrincipal extends Activity
{
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.principal_actividad);
}
}
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.htmlAhora vamos a crear el webview dentro de la clase con la Keyword Private para que solo sea accesible desde ella:
private WebView MiWebView;
Dentro de la clase añadimos lo siguiente:
MiWebView = new WebView(this);
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:
WebSettings webSettings = MiWebView.getSettings();
El primer ajuste que haremos será activar javascript que viene desactivado por defecto:
webSettings.setJavaScriptEnabled(true);
Un ejemplo de lo que podemos hacer es definir un nuevo User-Agent.
Por ejemplo:
String MiUserAgent
= "MiPrimeraApp"; MiWebView.getSettings().setUserAgentString(MiUserAgent);
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:
$VisitanteDesdeMiApp = 'MiPrimeraApp';
$UserAgentVisitante=$_SERVER['HTTP_USER_AGENT'];
if ($UserAgentVisitante == $VisitanteDesdeMiApp)
{
MostrarWebEspecial();
}
else
{
MostrarWebNormal();
}
Aquí vamos a crear una interfaz para poder exponer código escrito en Java de nuestra aplicación, a javascript desde una web.
MiWebView.addJavascriptInterface(new JSInterface(this), "Android");
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:
function vibrate(milliseconds)
{
Android.Vibrate(milliseconds);
}
Añadimos lo siguiente para tema Versiones:
MiWebView.setWebViewClient(new WebViewClient()
{
@TargetApi(android.os.Build.VERSION_CODES.M)
@Override
public void onReceivedError(WebView view, WebResourceRequest req, WebResourceError rerr)
{
onReceivedError(view, rerr.getErrorCode(), rerr.getDescription().toString(), req.getUrl().toString());
}});
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.phpMiWebView.loadUrl("file:///android_asset/webinterfaz.html");
Y lo mostramos:
setContentView(MiWebView);
Todo junto nos quedaría de la siguiente forma el archivo ActividadPrincipal.java:
package com.mimarca.MiPrimeraApp;
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebSettings;
import android.webkit.WebViewClient;
import android.webkit.WebResourceError;
import android.webkit.WebResourceRequest;
import android.annotation.TargetApi;
import com.mimarca.MiPrimeraApp.R;
public class ActividadPrincipal extends Activity
{
private WebView MiWebView;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.principal_actividad);
MiWebView = new WebView(this);
WebSettings webSettings = MiWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
String MiUserAgent
= "MiPrimeraApp"; MiWebView.getSettings().setUserAgentString(MiUserAgent);
MiWebView.addJavascriptInterface(new JSInterface(this), "Android");
MiWebView.setWebViewClient(new WebViewClient()
{
@TargetApi(android.os.Build.VERSION_CODES.M)
@Override
public void onReceivedError(WebView view, WebResourceRequest req, WebResourceError rerr)
{
onReceivedError(view, rerr.getErrorCode(), rerr.getDescription().toString(), req.getUrl().toString());
}
});
MiWebView.loadUrl("file:///android_asset/webinterfaz.html");
setContentView(MiWebView);
}}
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:
package com.mimarca.MiPrimeraApp;
public class JSInterface {
}
Añadiremos los siguientes imports:
import android.content.Context;
import android.os.Vibrator;
import android.webkit.JavascriptInterface;
Hay muchos otros interesantes, como por ejemplo:
import android.telephony.SmsManager;
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:
{
mContext = c;
}
El contexto nos sirve para acceder a funciones de Android y exponerlas a la interfaz.
https://developer.android.com/reference/android/content/ContextAhora podremos añadir la función del sistema a la que queremos acceder.
Para este tutorial, haremos algo simple, como hacer vibrar el SmartPhone.
@JavascriptInterface
public void Vibrate(long milliseconds)
{
Vibrator v
= (Vibrator
) mContext.
getSystemService(Context.
VIBRATOR_SERVICE);v.vibrate(milliseconds);
}
El resultado del archivo JSInterface.java es el siguiente:
package com.mimarca.MiPrimeraApp;
import android.content.Context;
import android.os.Vibrator;
import android.webkit.JavascriptInterface;
public class JSInterface
{
{
mContext = c;
}
@JavascriptInterface
public void Vibrate(long milliseconds)
{
Vibrator v
= (Vibrator
) mContext.
getSystemService(Context.
VIBRATOR_SERVICE); v.vibrate(milliseconds);
}
}
Ahora abrimos el archivo principal_actividad.xml y lo dejamos de la siguiente forma:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</LinearLayout>
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:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.mimarca.MiPrimeraApp"
android:versionCode="1"
android:versionName="1.0">
<uses-sdk
android:minSdkVersion="14"
android:targetSdkVersion="25" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.VIBRATE" />
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme">
<activity android:name="com.mimarca.MiPrimeraApp.ActividadPrincipal">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
En este archivo las líneas más interesantes de conentar son:
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.VIBRATE" />
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.
Mostrar Temas
