Si desarrollas aplicaciones para android seguramente más de alguna vez te ha pasado por la cabeza hacer una app de tu blog u obtener las últimas entradas de wordpress en Android, si es tu caso o te interesa aprender como hacerlo entonces hoy es tu día de suerte, vamos a ver lo necesario para hacerlo, te muestro el codigo necesario y vamos a ir paso por paso hasta lograr obtener en nuestra app Android las últimas entradas de nuestro blog.
Pues bien, como hemos mencionado en la introducción de este post, vamos a ver como obtener las últimas entradas de wordpress en Android para visualizar imágen y titulo de cada entrada.
Antes que nada necesitamos lo siguiente:
- Un blog wordpress por supuesto
- El plugin JSON API ( descargar plugin JSON API )
- Android Studio
- Seguir las instrucciones de este post
Obteniendo las últimas entradas de WordPress
Lo primero que tenemos que hacer es instalar el plugin JSON API que nos permitirá obtener las últimas entradas de wordpress en formato JSON.
¿Necesitas aprender algo nuevo ? Ve a Udemy, busca el tema del que quieres aprender, selecciona el curso para ti y continua con tu aprendizaje.
UdemyInstalamos normalmente el plugin y aparecerá una nueva opción en Ajustes -> JSON API
No es necesario activar las demás opciones que nos aparecen desactivadas, con las funciones Core es más que suficiente.
Como puedes ver nos ofrece varios metodos pero los 2 más interesantes son get_recent_posts y get_post.
El día de hoy unicamente utilizaremos el primero que nos permite obtener las entradas más recientes pero toma nota que el metodo get_post nos permite obtener información en particular de una entrada, este metodo lo utilizaremos para la pantalla individual de cada post, realizaremos un post sobre este tema más adelante.
Una vez que tenemos nuestro plugin instalado podemos ir a:
https://misitioweb.com/api/get_recent_posts/ o https://misitioweb.com/blog/api/get_recent_posts/
según sea tu caso.
Al ir a esta dirección obtendremos las últimas entradas wordpress en formato JSON listas para ser leidas por alguien, por ejemplo una app android.
Ahora que hemos obtenido la información de los post en wordpress vamos a parsearlo en android.
Parseando el JSON
Antes que nada te recomiendo la siguiente herramienta para ver la jerarquia de tu JSON.
Ahora es necesario que nuestra app android lea e interprete nuestro JSON.
Para leer nuestro JSON he utilizado el siguiente codigo que requiere la librería org.apache.http.legacy.
private void obtenerUltimasEntradas(){
class ObtenerUltimasEntradas extends AsyncTask<String,Void,String> {
@Override
protected void onPreExecute() {
super.onPreExecute();
}
@Override
protected void onPostExecute(String s) {
super.onPostExecute(s);
// AQUI INTERPRETAREMOS EL JSON OBTENIDO
}
@Override
protected String doInBackground(String... params) {
String responseStr = "EC";
HttpClient client = new DefaultHttpClient();
HttpPost post = new HttpPost(URL_OBTENERENTRADAS); //Tu URL que te da la funcion get_recent_posts
try {
HttpResponse response = client.execute(post);
responseStr = EntityUtils.toString(response.getEntity());
} catch (Exception e) {
e.printStackTrace();
}
return responseStr;
}
}
ObtenerUltimasEntradas ws = new ObtenerUltimasEntradas();
ws.execute();
}
}El codigo para interpretar el JSON que nos da el plugin JSON API es el siguiente:
try {
JSONObject response = new JSONObject(s);
JSONArray posts = response.getJSONArray("posts");
for (int i = 0; i < posts.length(); i++) {
Object[] info = new Object[3];
JSONObject obj = posts.getJSONObject(i);
info[0] = obj.getString("id"); // Obtenemos id del post
info[1] = obj.getString("title"); // Obtenemos titulo del popst
JSONObject thumbnail = obj.getJSONObject("thumbnail_images");
for (int j = 0; j < thumbnail.length(); j++) {
JSONObject medium = thumbnail.getJSONObject("medium");
info[2] = medium.getString("url"); // Obtenemos imagen del post
}
mNavItemsEntradas.add(new NavItemEntradas(info));
/* ArrayList de elementos tipo NavItemEntradas que me permitira almacenar la información de las entradas y mostrarlas posteriormente* /
}
postList = (ListView)view.findViewById(R.id.postlist);
DrawerListAdapter adapter = new DrawerListAdapter(getActivity(), mNavItemsEntradas, fragmentManager);
postList.setAdapter(adapter);
} catch (JSONException e) {
e.printStackTrace();
Toast.makeText(getActivity(),"Ocurrio un error al obtener las últimas entradas.",Toast.LENGTH_SHORT).show();
}Con esto ya hemos obtenido en android el id, imagen y titulo de cada uno de las ultimas entradas wordpress en android.
Lo siguiente será definir como agregar esta información a nuestra interfaz, en mi caso he creado un drawer list adapter personalizado y lo he colocado a un listview como su adaptador, en este es donde enlázo la info de cada entrada con su respectivo componente de la vista.
La clase NavItemEntradas luce asi:
class NavItemEntradas {
String id;
String titulo;
String imagen;
public NavItemEntradas(Object[] info) {
id = String.valueOf(info[0]);
titulo = String.valueOf(info[1]);
imagen = String.valueOf(info[2]);
}
}Y el Adaptador personalizado para nuestro listview:
class DrawerListAdapter8 extends BaseAdapter {
Context mContext;
ArrayList<NavItemEntradas> mNavItemsEntradas;
FragmentManager fragmentManager;
public DrawerListAdapter8(Context context, ArrayList<NavItemEntradas> navItems, FragmentManager fm) {
mContext = context;
mNavItemsEntradas = navItems;
fragmentManager = fm;
}
@Override
public int getCount() {
return mNavItemsEntradas.size();
}
@Override
public Object getItem(int position) {
return mNavItemsEntradas.get(position);
}
@Override
public long getItemId(int position) {
return 0;
}
@Override
public View getView(final int position, View convertView, ViewGroup parent) {
final View view;
if (convertView == null) {
LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
view = inflater.inflate(R.layout.item_snippet_entrada, null);
}else {
view = convertView;
}
// Asignamos valores a controles
ImageView iv_imagenpost = (ImageView) view.findViewById(R.id.imagenpost);
TextView tv_titulopost = (TextView) view.findViewById(R.id.titulopost);
tv_titulopost.setText(mNavItemsEntradas.get(position).titulo);
String tmpUrl = mNavItemsEntradas.get(position).imagen;
Uri imageUrl = Uri.parse(tmpUrl);
Picasso.with(view.getContext()).load(imageUrl)
.resize(300,150)
.placeholder(R.drawable.loading).error(R.drawable.loading)
.into(iv_imagenpost);
iv_imagenpost.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
PantallaEntradaCompleta entradaCompleta = new PantallaEntradaCompleta();
Bundle bundle = new Bundle();
bundle.putString("idPost", mNavItemsEntradas.get(position).id);
entradaCompleta.setArguments(bundle);
fragmentManager.beginTransaction().replace(R.id.mainContent ,entradaCompleta).addToBackStack("Entrada"+mNavItemsEntradas.get(position).id).commit();
}
});
return view;
}
}Cabe resaltar que para establecer la imagen a nuestro elemento de imágen en el layout del item de cada entrada utilizo la librería picasso ( com.squareup.picasso:picasso:2.5.2 ) y aprovecho para establecer un evento onclick a la imágen para cuando el usuario de click mande a la pantalla individual de cada post, misma que trataremos en otro post de este blog más adelante.
El Layout de nuestra vista
En cuanto a layouts yo tengo el layout principal donde tengo el listview:
<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/swipeRefreshLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/tv_anuncio2"
android:layout_marginTop="5sp">
<ListView
android:id="@+id/postlist"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.SwipeRefreshLayout>Como puedes ver lo tengo dentro de un SwipeRefreshLayout que me gusta bastante, puedes aprender más sobre como utilizar el swiperefreshlayout aquí.
El layout independiente de cada item de nuestra lista es el siguiente:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="@+id/imagenpost"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="centerCrop"/>
<TextView
android:id="@+id/titulopost"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/separador"
android:layout_alignLeft="@+id/imagenpost"
android:layout_alignTop="@+id/imagenpost"
android:layout_alignRight="@+id/imagenpost"
android:layout_alignBottom="@+id/imagenpost"
android:paddingTop="10dp"
android:paddingBottom="30dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:gravity="center"
android:textAllCaps="true"
android:typeface="sans"
android:layout_gravity="center_horizontal"
android:textColor="#000000" />
</LinearLayout>El resultado de este post sobre como obtener las últimas entradas de wordpress en android es algo parecido a lo siguiente.
Puedes ver la estructura de imágen de cada post full width y abajo su titulo.
Si este post te fue de utilidad no olvides compatirlo en tus redes sociales o dejarme un comentario abajo para aclarar cualquier duda respecto al tema del post, si puedo ayudarte con gusto lo haré.
Hasta luego!