Creación de un Rest API con Google AppScript y uso de Volley Framework en Android – Parte 2
En la primera parte de este tutorial aprendimos como hacer un pequeño Rest API con SpreadSheets de Google Drive. Ahora toca el turno de manejar dicha información en nuestra app, para ello no utilizaremos la manera tradicional (Usando Threads con AsyncTask ver aqui ), en su remplazo usaremos un Framework HTTP client support llamado Volley, el uso de uno o de otro ya depende de gustos. Aqui el video del resultado que esperamos:
Volley: ¿Android de verdad tenia un cliente HTTP?
Como se menciono en el Google I/O de 2013: “Volley is a library that makes networking for Android apps easier and most importantly, faster.” Por lo que ya no es tan doloroso el consumir web services. Anteriormente este tipo de aplicaciones se solucionaban a la manera HTTP client Java tradicional (con flujo de entrada, buffer, etc) pero con Volley, solo necesitamos saber que tipo de respuesta esperamos (JSONObject, JSONArray, String etc) y eso es todo. La siguiente imagen representa el diagrama de nuestra App:
Agregando la Libreria
Para trabajar con Volley necesitamos importar según sea el caso:
- Android Studio: Solo agregamos la dirección de maven central (com.mcxiaoke.volley:library:1.0.+) en nuestro build.gradle
dependencies {
compile 'com.android.support:appcompat-v7:19.1.0'
compile 'com.mcxiaoke.volley:library:1.0.+'
compile fileTree(dir: 'libs', include: ['*.jar'])
}
git clone https://android.googlesource.com/platform/frameworks/volley
Preparando Volley
Para empezar a trabajar con Volley creamos una instancia del mismo (RequestQueue), solo necesitamos crearla a partir del metodo newRequestQueue de Volley que recibe nuestro contexto:
RequestQueue queue = Volley.newRequestQueue(this);
Como mencione anteriormente, debemos saber que tipo de respuesta esperamos recibir, en nuestro caso es un JSONArray. Construiremos una instancia de ese tipo la cual podremos usarla en cualquier momento que lo necesitamos (es como un singleton, aqui preparamos el request, aun no es ejecutado).
Para construir el JsonArrayRequest su constructor recibe la URL a la que queremos acceder, la clase anonima Response.Listener
String URL="https://script.google.com/macros/s/AKfycbzzZbp4a8OdQ1YI_CBMDy17qDW-ouPZGwIbA3QfV_UsP7PAIxk/exec";
JsonArrayRequest req = new JsonArrayRequest(URL, new Response.Listener<JSONArray> () {
@Override
public void onResponse(JSONArray response) {
"Entraremos en este metodo si el llamado fue exitoso"
"recibimos JSONArray response como respuesta"
}
}, new Response.ErrorListener() {
@Override
public void onErrorResponse(VolleyError error) {
"Entraremos en este metodo si existió un error"
}
});
Ahora solo queda ejecutar nuestro request, recordamos que antes hemos creado una instancia RequestQueue llamada “queue”, “queue” tiene un metodo llamado “add” que recibe como parametro un request preparado de cualquier tipo (recordar el de nosotros es JsonArrayRequest llamado “req”), entonces lo pasamos como parametro para que se pueda ejecutar:
queue.add(req);
En nuestro caso solo es uno, pero “RequestQueue” puede ejecutar n llamados como instancias de respuesta hemos creado, ¿cool no es cierto?
Lo demás es cosa de diseño
Como un ListView no es suficiente para mostrar los datos de manera atractiva, hemos creado uno a la medida,con todas las buenas practicas que lo amerita, hemos creamos un modelo llamado “Persona” que es construido con los datos que obtenemos del API (Nombre, Sueldo, SalarioDiario, DiasLaborados).
Modelo Persona
package mx.gdgipn.nominandroid.app.models;
/**
* Created by thespianartist on 4/12/14.
*/
public class Persona {
private String nombre;
private String salarioDiario;
private String diasLaborados;
private String sueldo;
public String getNombre() {
return nombre;
}
public void setNombre(String nombre) {
this.nombre = nombre;
}
public String getSalarioDiario() {
return salarioDiario;
}
public void setSalarioDiario(String salarioDiario) {
this.salarioDiario = "$"+salarioDiario+" por dia";
}
public String getDiasLaborados() {
return diasLaborados;
}
public void setDiasLaborados(String diasLaborados) {
this.diasLaborados = diasLaborados+" dias trabajados";
}
public String getSueldo() {
return sueldo;
}
public void setSueldo(String sueldo) {
this.sueldo = "Sueldo Total $"+sueldo;
}
}
CustomAdapter
public class CustomAdapter extends ArrayAdapter<Persona>{
ArrayList<Persona> data;
LayoutInflater inflater;
public CustomAdapter(Context context, ArrayList<Persona> objects){
super(context, -1, objects);
this.data = objects;
this.inflater = LayoutInflater.from(context);
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
Persona persona = data.get(position);
int layout = R.layout.list_row;
if (convertView == null) {
convertView = inflater.inflate(layout, null);
holder = new ViewHolder();
holder.nombre = (TextView) convertView.findViewById(R.id.nombre);
holder.salarioDiario = (TextView) convertView.findViewById(R.id.salario_diario);
holder.diasLaborados = (TextView) convertView.findViewById(R.id.dias_laborados);
holder.sueldo = (TextView) convertView.findViewById(R.id.sueldo);
convertView.setTag(holder);
}else {
holder = (ViewHolder) convertView.getTag();
}
holder.nombre.setText(persona.getNombre());
holder.sueldo.setText(persona.getSueldo());
holder.salarioDiario.setText(persona.getSalarioDiario());
holder.diasLaborados.setText(persona.getDiasLaborados());
return convertView;
}
public static class ViewHolder{
public TextView nombre;
public TextView salarioDiario;
public TextView diasLaborados;
public TextView sueldo;
}
Diseño de cada Row de la lista
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#90000000"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Nombre"
android:textColor="#FFFFFF"
android:textStyle="bold"
android:gravity="center_horizontal"
android:paddingTop="15dp"
android:paddingBottom="15dp"
android:id="@+id/nombre" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Sueldo"
android:textColor="#89d8fa"
android:layout_marginLeft="10dp"
android:layout_marginBottom="10dp"
android:id="@+id/sueldo" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Salario diario"
android:textStyle="italic"
android:textColor="#ffb900"
android:layout_marginLeft="10dp"
android:id="@+id/salario_diario" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Dias"
android:textStyle="italic"
android:layout_marginRight="10dp"
android:layout_marginBottom="15dp"
android:layout_gravity="right"
android:textColor="#00de72"
android:id="@+id/dias_laborados" />
</LinearLayout>
Finalmente
Nuestro MainActivity contiene el llamado a nuestro API (hecho con Volley), el cual si es un éxito, construira nuestro adapter para el ListView con todos los objetos recibidos, no es tan directo ya que se necesita “parsear” la información, y de la cual creamos un metodo para dicho proposito, a continuacion el codigo completo de nuestro MainActivity:
public class MainActivity extends ActionBarActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//ActionBar de Color Negro, solo por estetica
ColorDrawable colorDrawable = new ColorDrawable(Color.parseColor("#000000"));
ActionBar actionbar = getSupportActionBar();
actionbar.setBackgroundDrawable(colorDrawable);
//Creamos una instancia de RequestQueue que solo recibe el contexto
RequestQueue queue = Volley.newRequestQueue(this);
//URL del SpreadSheet
String URL = "https://script.google.com/macros/s/AKfycbzzZbp4a8OdQ1YI_CBMDy17qDW-ouPZGwIbA3QfV_UsP7PAIxk/exec";
//Creamos una instancia de un ProgressDialog para que el usuario observe que los datos se estan obteniendo
final ProgressDialog progressDialog = ProgressDialog.show(this, "Please wait ...", "Downloading Data ...", true);
//Configuramos nuestro request, al intanciar JsonArrayRequest recibe la URL y un Listener de JSON Array, el cual
//contiene una serie de metodos a implelentar, practicamente si resulto bien o existio un error, ademas
// sirve como un singleton para mandarlo a llamar cuando sea necesario hacer de nuevo el request.
// Recordar que este solo construye el llamado HTTP, se ejecuta mas adelante cuando lo agregamos como parametro del metodo add
//de RequestQueue
JsonArrayRequest req = new JsonArrayRequest(URL, new Response.Listener<JSONArray> () {
@Override
public void onResponse(JSONArray response) {
//Un textview antes de la vista nos permite ver los datos crudos dentro de la misma app
TextView textView = (TextView) findViewById(R.id.datos_crudos);
textView.setText(response.toString());
//dejamos en el Log un pequeño mensaje con el response como string para ver un preview de lo que recibimos
Log.e("respeusta", response.toString());
//buscamos el listview de main_activity
ListView list = (ListView) findViewById(R.id.list_view);
//Si vemos el CustomAdapter debemos pasar un contexto y un ArrayList de objetos Personas
//dicho ArrayList es parseao de la respuesta por medio de la funcion parser
CustomAdapter adapter = new CustomAdapter(getApplicationContext(), parser(response));
//pasamos el adapter para que la lista se muestre en el UI
list.setAdapter(adapter);
progressDialog.dismiss();
}
}, new Response.ErrorListener() {
@Override
public void onErrorResponse(VolleyError error) {
VolleyLog.e("Error: ", error.getMessage());
progressDialog.dismiss();
}
});
// Ejecutamos Volley, con el request preparado
queue.add(req);
}
// La funcion de abajo se encarga de parsear toda la informacion
public ArrayList<Persona> parser(JSONArray respuesta){
ArrayList<Persona> personasAux = new ArrayList<Persona>();
for(int i = 0; i < respuesta.length(); i++){
JSONObject jsonObject;
Persona persona = new Persona();
try {
jsonObject = (JSONObject) respuesta.get(i);
persona.setNombre(jsonObject.getString("nombre"));
persona.setSalarioDiario(jsonObject.getString("salarioDiario"));
persona.setDiasLaborados(jsonObject.getString("diasLaborados"));
persona.setSueldo(jsonObject.getString("sueldo"));
personasAux.add(persona);
} catch (JSONException e) { Log.e("peticion", "Error al parsear");}
}
return personasAux;
}
}
Layout De MainActivity
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="mx.gdgipn.nominandroid.app.MainActivity">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_weight="3" >
<TextView
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/datos_crudos"
android:layout_gravity="center_horizontal" />
</ScrollView>
<ListView
android:layout_weight="1"
android:headerDividersEnabled="false"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/list_view"
android:footerDividersEnabled="false" />
</LinearLayout>
Y eso es todo, no olviden hacer clone del repositorio que dejo a continuación con el ejemplo completo, no duden en dejar sus inquietudes, y si tienen alguna recomendacion de proximos temas con gusto lo trabajo. Saludos
¡Suscribete al feed RSS!