Visualizar un post wordpress en Android

Hoy vamos a aprender como visualizar un post wordpress en Android con la ayuda de JSON y el componente webview, con esto podremos añadir las entradas de nuestro blog wordpress a cualquier aplicación android que estemos desarrollando, ¿Te animas? Vamos al codigo del ejemplo!

En post anteriores en este blog hemos hablado sobre como obtener las últimas entradas de wordpress en android con la ayuda del plugin JSON API, si aún no has visto este post te recomiendo que vayas ahora mismo a él.

En nuestra entrada previa vimos como este plugin nos permite obtener las ultimas entradas de nuestro blog en formato JSON y también hicimos enfasis en que otro metodo de los que nos ofrece el plugin nos permite obtener el contenido de un post en especifico unicamente con su ID.

Hoy vamos a ver como visualizar un post wordpress en android precisamente con este mismo plugin y teniendo unicamente el id de dicho post.

¿Necesitas aprender algo nuevo ? Ve a Udemy, busca el tema del que quieres aprender, selecciona el curso para ti y continua con tu aprendizaje.

Udemy

Utilizaremos además el componente webview de android que nos permite visualizar un contenido web en nuestra app.

Comencemos!

El layout XML

Nuestro layout incluye unicamente un textview para el titulo del post y un webview para el contenido, este webview esta dentro de un swiperefreshlayout que me encanta! Todo dentro de un LinearLayout.

<?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:background="@color/blanco"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tituloEntrada"
        android:gravity="center"
        android:layout_marginBottom="5dp"
        android:textSize="20dp"
        android:textAllCaps="true"
        android:padding="10dp"
        android:background="@color/blanco"
        android:typeface="sans"
        android:textColor="@color/negroApp"/>

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/swipeRefreshLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="5sp">

        <WebView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/contenidoEntrada" />

    </android.support.v4.widget.SwipeRefreshLayout>

</LinearLayout>

Ahora que ya tenemos nuestro layout seguimos adelante.

¿Cómo obtener el contenido del post wordpress?

Como mencione al inicio de este post, el plugin JSON API nos permite obtener el contenido de un post o entrada en especifico en formato JSON.

El metodo que nos permite obtenerlo es get_post.

Para obtener el contenido en nuestra App vamos a hacer uso de AsyncTask.

private void obtenerEntrada(){
        class ObtenerEntrada extends AsyncTask<String,Void,String> {
            String URL_OBTENERENTRADA;

            @Override
            protected void onPreExecute() {
                super.onPreExecute();
                swipeRefreshLayout.setRefreshing(true);
                URL_OBTENERENTRADA = "http://tusitioweb.com/api/get_post/?id="+postID;
            }

            @Override
            protected void onPostExecute(String s) {
                super.onPostExecute(s);

                String titulo = "";
                String contenido = "";

                try {
                    JSONObject response = new JSONObject(s);
                    JSONObject post = response.getJSONObject("post");
                    titulo = post.getString("title");
                    contenido = post.getString("content");

                } catch (JSONException e) {
                    e.printStackTrace();
                    Toast.makeText(getActivity(),"Ocurrio un error al obtener el contenido del articulo.",Toast.LENGTH_SHORT).show();
                }

                // AQui va elcontenido donde se establece el valor del textview y webview.

                swipeRefreshLayout.setRefreshing(false);
            }

            @Override
            protected String doInBackground(String... params) {
                String responseStr = "EC";
                HttpClient client = new DefaultHttpClient();
                HttpPost post = new HttpPost(URL_OBTENERENTRADA);
                try {
                    HttpResponse response = client.execute(post);
                    responseStr = EntityUtils.toString(response.getEntity());
                } catch (Exception e) {
                    // TODO Auto-generated catch block
                    Log.e("jmr", e.getLocalizedMessage());
                    e.printStackTrace();
                }
                return responseStr;
            }
        }

        ObtenerEntrada ws = new ObtenerEntrada();
        ws.execute();
    }

Como puedes ver necesitamos el ID del post que queremos visualizar y en una parte del codigo hay un comentario que dice que allí se establece el contenido del textiview (titulo) y webview (contenido).

Agregando el contenido a nuestro webview

Para agregar el contenido a nuestro webview y textview que corresponde al contenido y titulo del post respectivamente hacemos lo siguiente:

tv_titulo.setText(titulo);
wv_contenido.loadDataWithBaseURL(null, contenido,"text/html","UTF-8", null);

Como puedes ver es bastante fácil y nada fuera de lo normal, a excepción de que el contenido en el webview lo cargamos con el metodo loadDataWtihBaseURL y de parametro colocamos que es contenido html con codificación UTF-8.

Y listo! Ahora ya puedes visualizar un post wordpress en Android fácilmente!

Si este post te fue de utilidad no olvides compartirlo en tus redes sociales y dejarme un comentario si tienes algunda duda.

Hasta luego!