Membuat Aplikasi dengan Wordpress dan Android Studio - Part 3

Membuat Aplikasi dengan wordpress dan Android Studio - Selamat siang, mari lanjutkan seri Membuat Aplikasi Berita dengan Wordpress (Self Hosted) dan Android Studio, bagi anda yang belum mengikuti/membaca artikel sebelumnya, silahkan anda lihat terlebih dahulu beberapa artikel dibawah:

• Part 1: Pengaturan pada website Wordpress 
• Part 2: Instalasi Library dan Pembuatan Layout Loop Artikel

Pada artikel ini, sudah sampai di tahap programming java. Langsung saja dimulai, buka project wordpress anda di Android Studio.

MainActivity.Java

Untuk tampilan layout dari activity_main.xml, silahkan anda baca kembali artikel sebelumnya. MainActivity akan secara langsung menampilkan data post wordpress pada RecycleView. Lihat kode berikut:

public class MainActivity extends AppCompatActivity {

    RecyclerView post_list;
    List<Post> posts;
    PostsAdapter adapter;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

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


        posts = new ArrayList<>();

        post_list = findViewById(R.id.post_list);

        extractPosts(getResources().getString(R.string.wp_url));
        GridLayoutManager manager = new GridLayoutManager(this, 1);
        post_list.setLayoutManager(manager);
        adapter = new PostsAdapter(posts);
        post_list.setAdapter(adapter);


    }

    public void extractPosts(String URL){
        RequestQueue queue = Volley.newRequestQueue(this);
        JsonArrayRequest request = new JsonArrayRequest(Request.Method.GET, URL, null, new Response.Listener<JSONArray>() {

            @Override
            public void onResponse(JSONArray response) {
                Log.d("TAG","onResponse: " + response.toString());
                for(int i = 0; i < response.length();i++){
                    try{
                        Post p = new Post();
                        JSONObject jsonObjectData = response.getJSONObject(i);
                        p.setDate(jsonObjectData.getString("date"));

                        JSONObject titleObject = jsonObjectData.getJSONObject("title");
                        p.setTitle(titleObject.getString("rendered"));

                        JSONObject contentObject = jsonObjectData.getJSONObject("content");
                        p.setContent(contentObject.getString("rendered"));

                        JSONObject excerptObject = jsonObjectData.getJSONObject("excerpt");
                        p.setExcerpt(excerptObject.getString("rendered"));

                        p.setFeature_image(jsonObjectData.getString("featured_media_src_url"));

                        posts.add(p);

                        adapter.notifyDataSetChanged();


                    } catch (JSONException e) {
                        e.printStackTrace();
                    }

                }

            }
        }, new Response.ErrorListener() {
            @Override
            public void onErrorResponse(VolleyError error) {
                Toast.makeText(MainActivity.this, error.getMessage(),Toast.LENGTH_SHORT).show();

            }
        });
        queue.add(request);

    }
}

Pada kode java diatas, terlihat penggunaan PostAdapter. Jadi selanjutnya anda akan membuat sebuah PostAdapter.

PostAdapter.Java

Untuk mendapatkan data pada RecycleView memerlukan sebuah adapter. Adapter adalah class yang mengatur item-item pada RecycleView. Adapter mengatur resource view pada setiap item dari RecycleView. Buka Project Android Studio Pada folder java >> com >> suba >> wordpress >> Klik Kanan >> New >> Java Class >> Beri nama "postAdapter.java". Copy kode berikut dan paste pada postAdapter.java yang tadi anda buat.

import android.content.Intent;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import com.squareup.picasso.Picasso;

import java.util.List;

public class PostsAdapter extends RecyclerView.Adapter {
    List allPosts;

    public PostsAdapter(List allPosts) {
        this.allPosts = allPosts;
    }


    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.post_view, parent, false);

        return new ViewHolder(v);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, final int position) {
        holder.postTitle.setText(allPosts.get(position).getTitle());
        Picasso.get().load(allPosts.get(position).getFeature_image()).into(holder.postImage);

        holder.view.setOnClickListener(new View.OnClickListener(){
            public void onClick(View v){
                Intent i = new Intent(v.getContext(),DetailActivity.class);
                i.putExtra("title", allPosts.get(position).getTitle());
                i.putExtra("content", allPosts.get(position).getContent());
                i.putExtra("featured_media_src_url", allPosts.get(position).getFeature_image());
                v.getContext().startActivity(i);
            }

        });
    }

    @Override
    public int getItemCount() {
        return allPosts.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder{

        ImageView postImage;
        TextView postTitle;
        View view;
        public ViewHolder(@NonNull View itemView){

            super(itemView);
            view = itemView;
            postImage = itemView.findViewById(R.id.post_image);
            postTitle = itemView.findViewById(R.id.post_title);
        }
    }

Jalankan aplikasi anda dan lihat perubahannya seperti pada gambar dibawah:

activity_detail.XML

Pada Folder Res >> Layout >> Klik Kanan >> New >> Layout Resource File >> Beri nama "activity_detail.xml". Buatlah layout seperti gambar dibawah, yang berguna untuk menampilkan detail dari post/artikel wordpress anda.

DetailActivity.Java

Buka Project Android Studio Pada folder java >> com >> suba >> wordpress >> Klik Kanan >> New >> Java Class >> Beri nama "DetailActivity.java". Copy kode java dibawah dan paste pada DetailActivity.java

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.LevelListDrawable;
import android.os.AsyncTask;
import android.os.Bundle;
import android.text.Html;
import android.text.Spanned;
import android.text.method.LinkMovementMethod;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import com.squareup.picasso.Callback;
import com.squareup.picasso.Picasso;

import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.InputStream;
import java.net.MalformedURLException;
import java.net.URL;

public class DetailActivity extends AppCompatActivity implements Html.ImageGetter {
    private TextView contents;
    private ImageView imageIv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_detail);

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setDisplayShowHomeEnabled(true);

        Intent data = getIntent();
        String title = data.getStringExtra("title");
        String content = data.getStringExtra("content");
        String featured_media_src_url = data.getStringExtra("featured_media_src_url");
        getSupportActionBar().setTitle(title);

        contents = findViewById(R.id.post_content);
        contents.setMovementMethod(LinkMovementMethod.getInstance());
        Spanned spanned = Html.fromHtml(content, DetailActivity.this, null);
        contents.setText(spanned);

        imageIv = (ImageView) findViewById(R.id.post_featured_image);
        imageIv.setVisibility(View.GONE);
        Picasso.get().load(featured_media_src_url).into(imageIv, new Callback() {
            @Override
            public void onSuccess() {
                imageIv.setVisibility(View.VISIBLE);
            }

            @Override
            public void onError(Exception e) {
                imageIv.setVisibility(View.VISIBLE);
                imageIv.setImageResource(R.drawable.ic_baseline_image_black);
            }
        });

    }

    @Override
    public Drawable getDrawable(String source) {
        LevelListDrawable d = new LevelListDrawable();
        Drawable empty = getResources().getDrawable(R.drawable.ic_baseline_image_black);
        d.addLevel(0, 0, empty);
        d.setBounds(0, 0, empty.getIntrinsicWidth(), empty.getIntrinsicHeight());

        new LoadImage().execute(source, d);

        return d;
    }

    class LoadImage extends AsyncTask<Object, Void, Bitmap> {

        private LevelListDrawable mDrawable;

        @Override
        protected Bitmap doInBackground(Object... params) {
            String source = (String) params[0];
            mDrawable = (LevelListDrawable) params[1];

            try {
                InputStream is = new URL(source).openStream();
                return BitmapFactory.decodeStream(is);
            } catch (FileNotFoundException e) {
                e.printStackTrace();
            } catch (MalformedURLException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            }
            return null;
        }

        @Override
        protected void onPostExecute(Bitmap bitmap) {
            if (bitmap != null) {
                BitmapDrawable d = new BitmapDrawable(bitmap);
                mDrawable.addLevel(1, 1, d);
                mDrawable.setBounds(0, 0, bitmap.getWidth(), bitmap.getHeight());
                mDrawable.setLevel(1);
                CharSequence t = contents.getText();
                contents.setText(t);
            }
        }
    }

    @Override
    public boolean onSupportNavigateUp() {
        onBackPressed();
        return true;
    }

    @Override
    public void onBackPressed() {
        super.onBackPressed();
    }


}

Kesimpulan

Dengan Memanfaatkan REST API dari website berbasis wordpress, anda akan dengan mudah membuat aplikasi untuk mobile, baik itu android ataupun ios. Sekian artikel ber-seri dari Membuat Aplikasi Berita Dengan Wordpress dan Android Studio, silahkan kembangkan aplikasi ini dengan menambahkan fitur-fitur lainnya, seperti share, add to favourite, menambahkan Admod hingga mengatur tampilan untuk Dark Mode / Light Mode. Silahkan unduh secara gratis melalui akun github saya. Selamat Malam, selamat Hari Raya Galungan dan Selamat menjalankan Ibadah Puasa.

I’d love to hear from you, leave a Reply!

Submit