shadowfurtive/aplicacion_guitarra

Proyecto final de la asignatura de DAMO de la EPSEVG. Desarrollo una aplicación web para Android Studio.

PROYECTO DE FINAL DE DAMO

APLICACIÓN DE APRENDIZAJE PARA TOCAR LA GUITARRA

Proyecto de investigación de la asignatura de DAMO, EPSEVG-UPC.

• Autor: Mario Kochan
• Fecha: 16/12/2022
• Profesor: Guillem Godoy

Características

• Proyecto realizado con JavaScript, HTML, Java, XML y JSON
• Uso de GITHUB
• Creación del .md con Dillinger
• Uso de CreateJS, HowlerJS, Nginx y Android Studio

Idea general

La idea general es desplegar una aplicación web que se pueda ejecutar de forma nativa en el entorno Android. Para eso, programaremos una aplicación web con HTML y JavaScript nativo y la desplegaremos en Android mediante la componente de la WebView.

Aplicación Android

En el IDE de Android Studio, que sera donde programaremos la aplicación nativa de Android, generaremos un nuevo proyecto. En el archivo main.java incluimos el componente de WebView. Este componente sera el responsable de ejecutar una página web en la aplicación. Para ello le indicamos que URL debe utilitzar, que en nuestro caso, es el localhost.

    webView = (WebView) findViewById(R.id.mainweb);
    webView.getSettings().setJavaScriptEnabled(true);
    webView.loadUrl("http://10.0.2.2/index.html");
    webView.setWebViewClient(new MyWebViewClient());

Hay que tener cuidado en el momento de configurar el localhost en Android, ya que el propio Android Studio, para emular el dipositivo telefono, crea una máquina virtual y por ende, el localhost de esta máquina tiene una IP diferente. Nuestra IP local, que es usualmente la 127.0.0.1, en el emulador serà la 10.0.2.2.

Aparte, debemos configurar el acceso a Internet de la propia Aplicacion, para ello le damos permisos a la aplicación para usar Internet y configuramos la configuración de seguridad para incluir el subdominio de 10.0.2.2 como seguro. Este archivo el xml/network_ security_config.xml .

    <?xml version="1.0" encoding="utf-8" ?>
    <network-security-config>
        <base-config cleartextTrafficPermitted="true"></base-config>
        <domain-config cleartextTrafficPermitted="true">
            <domain includeSubdomains="true">10.0.2.2</domain>
        </domain-config>
    </network-security-config>

Incluimos otras funcionalidades para que la aplicación sea más interactiva con el usuario, por ejemplo cuando vuelve atrás:

   @Override
    public void onBackPressed() {
        if (webView.canGoBack()) {
            webView.goBack();
            return;
        }
        super.onBackPressed();
    }

Aplicación web

Para la aplicación web, haremos uso de HTML y JavaScript para crear dos páginas web que se adapten a los datos extraidos a un JSON.

En el index.html generamos una página donde habrá una lista de canciones posibles. Además, añadiremos un buscador para poder buscar las canciones pertinentes.

En cancion.html, generaremos una página nueva dónde se podrá visualizar el pentagrama de la canción, junto con la canción de fondo, con botones para control el pentagrama y su velocidad. La velocidad del pentagrama va a la par de los BMP y los Beats correspondientes por canción.

Ejecución de la aplicación

Se debe abrir la consola de comando y ejecutar el servidor nginx en nuestro ordenador.

nginx.exe

Y luego ejecutar el emulador de Android Studio para poder visualizar bien la página:

Para parar el servidor, hay que ejecutar:

@taskkill /f /im nginx.exe

IMPORTANTE

Hay que cambiar la url del index.html para que en cambio de que apunte a localhost apunte a 10.0.2.2 de forma local y que así funcione en el emulador de Android Studio.