Crossfit Chess 1.0: Zero to App Android (Parte IV)

En el post anterior, la parte III de esta serie "Crossfit Chess 1.0: Zero to App Android" vimos como consumir servicios de la API REST con Gson y Volley, las librerías de Andorid

A la aplicación de ejemplo que intentamos hacer le pusimos de nombre Crossfit Chess porque pretende ser una App Sencilla en Android entrenadora de ajedrez.

En el paso de hoy, mostraremos las imágenes recuperadas del backend y las mostraremos en el activity

Comencemos

La API rest la habíamos construido con Node.js y Heroku y la habíamos publicado en:

https://infinite-lowlands-19433.herokuapp.com/chess/api/chess

Debemos agregar una libreria al graddle

compile 'com.nostra13.universalimageloader:universal-image-loader:1.9.4'

 Agregamos un nuevo botón y un ImageView:

Evento onCreate

La lista de productos, es la respuesta del Gson, o sea lo que recupera del backend:
Prestarle mas atención al Bloque debajo del rectángulo, donde se hace la invocación a Heroku

Este código se ejecuta en el onCreate

 El evento "callback" que procesa la invocación, y puebla la lista de productos que contiene las imágenes.
Este código se ejecuta en el onCreate:

Evento onClick

Luego, en el onClick del botón, como tenemos la lista de productos poblada, lo insertamos en el ImageView:

Veamos la aplicación funcionando en este punto:

  

  

Y después del último "Tap" vuelve al inicio:

Estas imágenes se podrían reemplazar por diagramas de distinta complejidad, donde el usuario podría resolver la solución. O bien ser la puerta de entrada a ejercicios de distintos niveles: los peones representando a los ejercicios mas sencillos y los reyes a los mas complejos.

Read More

Crossfit Chess 1.0: Zero to App Android (Parte III)

En esta serie de "Crossfit Chess 1.0: Zero to App Android" estamos haciendo una App Sencilla en Android que pretende ser un entrenador de ajedrez.

Para esto, tomará problemas desde un servidor, publicados con JSON.

En el post anterior vimos precisamente como consumimos un servicio Json con Gson, hoy seguiremos con la misma linea, pero invocando a mas servicios de la API, y finalmente mostrando en pantallas las imágenes recuperadas desde el servidor.

Comencemos

Paso 05 - Invocamos una API REST

La API rest la habíamos construido con Node.js y Heroku y la habíamos publicado en:

https://infinite-lowlands-19433.herokuapp.com/chess/api/chess

La cual se como:

Tenemos que darle el permiso a Internet en el AdnroidManifest:

<uses-permission android:name="android.permission.INTERNET"/>

Debemos agregar

compile 'com.mcxiaoke.volley:library:1.0.18'

Implementamos el GsonRequest, esta es una clase genérica, que puede ser siempre  igual 

O sea, asi está ok

   

public class GsonRequest extends Request {
    private final Gson gson = new Gson();
    private final Class clazz;
    private final Map headers;
    private final Response.Listener listener;

    /**
     * Make a GET request and return a parsed object from JSON.
     *
     * @param url URL of the request to make
     * @param clazz Relevant class object, for Gson's reflection
     * @param headers Map of request headers
     */
    public GsonRequest(String url, Class clazz, Map headers,
                       Response.Listener listener, Response.ErrorListener errorListener) {
        super(Method.GET, url, errorListener);
        this.clazz = clazz;
        this.headers = headers;
        this.listener = listener;
    }

    @Override
    public Map getHeaders() throws AuthFailureError {
        return headers != null ? headers : super.getHeaders();
    }

    @Override
    protected void deliverResponse(T response) {
        listener.onResponse(response);
    }

    @Override
    protected Response parseNetworkResponse(NetworkResponse response) {
        try {
            String json = new String(
                    response.data,
                    HttpHeaderParser.parseCharset(response.headers));
            return Response.success(
                    gson.fromJson(json, clazz),
                    HttpHeaderParser.parseCacheHeaders(response));
        } catch (UnsupportedEncodingException e) {
            return Response.error(new ParseError(e));
        } catch (JsonSyntaxException e) {
            return Response.error(new ParseError(e));
        }
    }
}

Agregamos el código de invocación, es importante agregar también el "callback", o sea, la clase que manipulará las respuestas:

  

        GsonRequestCallback gsonRequestCallback = new GsonRequestCallback();

        GsonRequest gsonRequest = new GsonRequest<>(URL, Producto[].class, null, gsonRequestCallback, gsonRequestCallback);

        Volley.newRequestQueue(this).add(gsonRequest);

Entonces la clase Callback es:

   
    private  class GsonRequestCallback implements
            Response.Listener, Response.ErrorListener {

        private String TAG_GSON = "GSON CallBack::" + GsonRequestCallback.class.getName();

        /**
         * Called when a response is received.
         *
         * @param response
         */
        @Override
        public void onResponse(Producto[] response) {
            Log.d(TAG_GSON, "onResponse()" + response) ;

            Toast.makeText(CrossfitChessActivity.this, "Productos: " + response.length, Toast.LENGTH_SHORT).show();

            productos = Arrays.asList(response);

            Log.d(TAG_GSON, "productos: " + productos);
        }

        /**
         * Callback method that an error has been occurred with the
         * provided error code and optional user-readable message.
         *
         * @param error
         */
        @Override
        public void onErrorResponse(VolleyError error) {

            Log.d(TAG_GSON, "onErrorResponse()" + error);
            Toast.makeText(CrossfitChessActivity.this, "ERROR", Toast.LENGTH_SHORT).show();
        }
    }

Nuevamente, la prueba de Junit, aunque estuvo cerca de funcionar.... no funcionó...

En la ejecución, observemos que muestra un Toast que dice que recuperó 6 productos desde el backend:

En el próximo post, veremos como esos 6 productos se muestran en la activity

Read More

Crossfit Chess 1.0: Zero to App Android (Parte II)

En el post anterior vimos los pasos básicos de la creación de la aplicación Crossfit Chess versión 1.0

Hoy vemos como agregar otros componentes básicos, concretamente agregaremos una ProgressBar y consumiremos un recurso Json (en el backend de heroku) con la libreria Gson

Comencemos

Paso 03 - Agregando un Progress Bar

Y en codigo java agregamos:

   

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

Y en también la siguiente clase java encapsulamos:

   
   /**
     * Encapsula el prendido y apagado de la ProgressBar
     */
    public static class MyProgressBar {

        private static ProgressBar indicadorProgreso;
        private static boolean isOff = true;

        public static void switchProgressBar(AppCompatActivity activity) {
            indicadorProgreso = MyProgressBar.getInstance(activity);
            if (isOff) {
                MyProgressBar.ON();
            } else {
                MyProgressBar.OFF();
            }
        }

        private static ProgressBar getInstance(AppCompatActivity activity) {
            if (indicadorProgreso == null) {
                indicadorProgreso = (ProgressBar)activity.findViewById(R.id.indicador_progreso);
            }

            return indicadorProgreso;
        }

        private static void OFF() {
            indicadorProgreso.setVisibility(View.GONE);
            isOff = true;
        }

        private static void ON() {
            indicadorProgreso.setVisibility(View.VISIBLE);
            isOff = false;
        }
    }

Veamos como agregamos la progress bar:

Sobre el activity

Agregamos el código XML de la progress bar que mencionábamos más arriba.

Y la clase Java que hicimos para encapsular

El resultado:

De esa forma se ve la progress bar activa/inactiva

Paso 04: Parseamos un Json

Para parsear un Json, que es:

https://infinite-lowlands-19433.herokuapp.com/chess/api/chess

Agregamos las dependencias de GSON en el build.gradle

Una clase para la abstracción del objeto que vamos a recibir:

Quise agregar código para invocar al Gson desde los Junit pero no funciono... no lo repliquen, o háganlo mejor :)

 El resultado:

Pero desde el Main Activity anduvo ok:

O sea, recuperamos el Json del servidor

En el proximo post, tomaremos esas imágenes y las mostraremos en la aplicación.

Read More

Crossfit Chess 1.0: Zero to App Android (Parte I)

Vamos a hacer una aplicación en Android desde "Zero", que llamaremos "Crossfit Chess" con la intención de que sea un entrenador de ajedrecistas

La idea a largo plazo de la aplicación es recuperar imágenes de Problemas de Ajedrez del servidor y mostrarlas en la App. 

Mientras tantos, aplicaremos algunos conceptos de Android

El backend es con heroku, que está explicado en este post y este otro post como se armó.

Comencemos:

Paso 01 - Creamos el Proyecto

Creamos el ejemplo a partir de un proyecto vacío, y lo bautizamos con un nombre que nos guste:

"CrosssfitChess" en nuestro caso, y el directorio de trabajo es:

/Users/pabloin/Desktop/NoCuestaNada/Mob/CrossFit Chess/03 Version Inicial/CrossfitChess

Next...

 Elegimos una Basic Activity...

Algunos nombres:

Y tenemos el "Hola Mundo" que nos da Android Studio

Paso 02 - Agregamos un Botón

Siguiendo con los pasos básicos, vamos a agregar un botón, y agregarle un evento asociado a la presión del botón:

Agregamos el código del boton:

Vista Preliminar

 Implementamos el método del evento onClick del botón:

Ejecutamos la App en el emulador:

 Resultado en el Emulador:

Cuando Presionamos el botón, levanta el Toast:

        

Read More

¿Como conectar un Moto G al Android Studio sobre OSX?

Cuando desarrollamos con el Android Studio, generalmente nos acostumbramos a utilizar el Emulador.

Pero cuando necesitamos hacer alguna prueba sobre un dispositivo real, como un Moto G ¿Cuales son los pasos para conectar el Moto G al Android Studio?

Comencemos

Paso 01: Instalar Drivers de Motorola para OSX

El primer paso que deberíamos hacer es descargar el software controlador del dispositivo, de la página oficial de Motorola:

• https://motorola-global-es-latam.custhelp.com/app/answers/detail/a_id/89882

En nuestro caso, realizaremos la instalación sobre un OSX versión 10.11.5, pero la página tiene hasta la versión 10.10 la cual instalaremos

Paso 02: Habiltiar Modo Desarrollador en Moto G

El segundo paso es habilitar el Modo de Desarrollador en el motorola.

Hay un video en YouTuve que  explica muy claramente este paso:

https://www.youtube.com/watch?v=RUaat-kj2ro

Igualmente, compartimos las pantallas para habilitar el modo de Desarrollador

   

Luego, para permitir que desde el Android Studio aparezca el dispositivo, tiene que estar habilitada la depuración USB y la instalación desde fuentes desconocidas:

   

Obviamente, la recomendación es revertir la opción de "fuentes desconocidas" si no es un dispositivo de uso exclusivo de testing.

Luego desde el Android Studio, podemos ejecutar la aplicación en el dispositivo Moto G:

Y desde el dispositivo, pide una confirmación mas sobre permitir la instalación desde la computadora donde está ejecutando el Android Studio, que luego de aceptar vemos la pantalla de la aplicación VRViewApp que estamos utilizando como ejemplo en este post:

   

De esta manera, logramos ver como se realiza la conección entre un  Moto G al Android Studio sobre OSX para probar el desarrollo de aplicaciones con Android

Read More

Android y SQLite3 ¿Como acceder y abrir las base de datos?

Android y SQLite3 

¿Como acceder y abrir las base de datos SQLite3 que usamos en nuestras app?

FAQ #01: ¿Como Accedemos a la Base de Datos SQLite del dispositivo?

Vamos al ADM:

Y dentro del ADB, encontramos la base de datos usualmente en:

//data/data/com.mi_Dominio.app/databases

Usando el icono, "Pull a file from device" podemos descargar la base de datos al escritorio:

FAQ #02: ¿Como abrimos la Base de Datos SQLite del dispositivo?

Una vez que exportamos la base de datos, y la tenemos en el escritorio, podemos abrirla con los comando de SQL lite, o más cómodo con una Interfaz gráfica, por ejemplo SQLiteBrowser (http://sqlitebrowser.org/) que nos bajemos. 

Desde la terminar también podemos acceder al SQLite3, en mi caso esta en:

/Users/pabloin/Library/Android/sdk/platform-tools

Luego, por linea de comandos podemos ejecutar, por ejemplo:
.help
.quit
etc..
Una guía completa:

http://www.tutorialspoint.com/sqlite/sqlite_commands.htm

Y en la terminal se ve:

Desde la linea de comandos podemos ejecutar:
Con el ./adb shell conectamos la shell del android del dispositivo, con la shell de la PC... y de esta manera podemos acceder más rápido a la base de datos (ya que no tenemos que exportar los datos cada vez que queremos actualizarlos)

MacBook-Pro-de-Pablo:platform-tools pabloin$ pwd
/Users/pabloin/Library/Android/sdk/platform-tools
MacBook-Pro-de-Pablo:platform-tools pabloin$ ./adb shell
root@generic_x86:/ # sqlite3 /data/data/com.probarnocuestanada.crossfitchess/d>

Pero podemos ejecutar una herramienta visual SQLLite3:

http://sqlitebrowser.org/

Y una vez descargado, lo vemos en:

Ok, esto fue como acceder, descargar y abrir las base de datos SQLite que utilizamos dentro de nuestras aplicaciones Android

... una nota de color:

Me pareció interesante la página http://sqlitebrowser.org/ que dice que es hosteada por GitHub:

This page was generated by GitHub Pages using the Architect theme byJason Long.

Es una opción interesante cuando querramos difundir alguno de nuestro proyectos.

Links 

Muy buen post sobre este tema:

• http://www.hermosaprogramacion.com/2014/10/android-sqlite-bases-de-datos/

Read More