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