Nuestra aplicación en Android

Tener desarrollada una aplicación para FirefoxOS significa poder tenerla para otras plataformas fácilmente, como Webapp. En este artículo vamos a ver como pasar nuestra aplicación de tiradas de dados a Android con los menores cambios posibles. Aquí tenéis algunos enlaces útiles para seguir el artículo:

• Código fuente de la aplicación para Android creada en el ejemplo
• El anterior artículo en el que creamos la aplicación de tirar dados para FirefoxOS
• Un interesante manual sobre Android en Español, de la Universidad Complutense de Madrid
• Información sobre la instalación de Eclipse con el plugin ADT

El primer paso que hemos de dar es descargar el entorno de programación que prefiramos para programar Android. En mi caso uso Eclipse con el plugin ADT, que podéis instalar siguiendo las instrucciones. Una vez lo tengamos creamos un proyecto nuevo en blanco y metemos nuestra aplicación HTML en el directorio "assets":

Con esto ya tenemos el código dentro del proyecto, pero todavía no mostrará nada si lo ejecutamos. Para que funcione debemos hacer dos cosas: Crear en la vista un componente de tipo WebView que nos muestre el contenido HTML y modificar el controlador principal para que cargue en dicho componente nuestra página de inicio. Lo primero es lo mas sencillo: Vamos a la carpeta "res/layout" y buscamos la plantilla principal, en mi caso "activity_main.xml". Ahí solo hay que insertar el siguiente componente:

   
<android.webkit.WebView
        android:id="@+id/webkit"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

Este deberá de colocarse dentro de la etiqueta raíz (en mi caso "RelativeLayout") sustituyendo cualquier otro contenido que hubiese. Nos creará el componente de tipo WebView ocupando todo el alto y ancho de la ventana principal. A continuación abrimos el código, en mi caso: "src/com.legendarya.lanzadados/MainActivity" y buscamos el método "onCreate":

   
protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);

 // Código insertado para la WebApp
 WebView mWebView = (WebView) findViewById(R.id.webkit);
 mWebView.getSettings().setJavaScriptEnabled(true);
 mWebView.loadUrl("file:///android_asset/index.html");
}

La primera línea es la descripción del método, y junto a las dos siguientes (la llamada al padre y la elección de la plantilla) es el contenido que teníamos originalmente. Lo que hemos añadido son las tres últimas líneas:

• Primero localizamos el WevView (identificado en este caso como "webkit")
• La siguiente línea indica que el Javascript esté activado para este componente, pues por defecto no lo está y sin el la programación no funcionaría.
• Por último se carga dentro del componente nuestra pantalla principal "index.html"

¡Listo! Solo con esto, que podemos reutilizar para otros proyectos cambiando tan solo el contenido de "assets", ya podemos ejecutar la aplicación obteniendo el siguiente resultado:

En conclusión

En este artículo hemos creado fácilmente una webapp de Android a partir de una aplicación FirefoxOS que habíamos desarrollado anteriormente. Este es el esquema que aplicaremos de ahora en adelante: Desarrollar ejemplos en FirefoxOS que se puedan portar posteriormente a otras plataformas, ahorrándonos así mucho trabajo y logrando mayor difusión. Por tanto la mayoría de los próximos artículos se centrarán simplemente en el desarrollo de webapps sobre FirefoxOS y las tecnologías que necesitamos aprender para ello.

Sin embargo de vez en cuando escribiré algún que otro artículo tanto para ver como portar la aplicación a las demás plataformas (empezando por iPhone) como para describir problemas y posibles soluciones en la compatibilidad de las diversas tecnologías, y la manera de resolverlas, como el framework LungoJS.