LOADING . . .

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:

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:

Screen_Shot_2021-04-12_at_15_36_57

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.

Screen Shot 2021-04-13 at 21.25.00

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!