LOADING . . .

Membuat Aplikasi dengan wordpress dan Android Studio - Part 2

07
Apr
Membuat Aplikasi dengan wordpress dan Android Studio - Part 2



Membuat Aplikasi dengan wordpress dan Android Studio - Sesuai dengan janji saya sebelumnya (lihat artikel pembuka mengenai cara membuat aplikasi berita dengan wordpress dan Android Studio) pada artikel kali ini akan memasuki tahap pembuatan project pada Android Studio. Bagi anda yang belum mengikuti seri membuat aplikasi berita dengan wordpress dan android studio ini, bisa anda baca artikel sebelumnya disini:

Membuat Project

Tentu anda sudah paham benar bagaimana cara membuat sebuah project baru pada android studio, tidak ada yang khusus diterapkan pada pembuatan aplikasi ini.

Pilih Empty Activity >> Beri nama project, nama package dan pastikan anda memilih Java, dan Android API 14 sebagai minimum SDK. Lihat pada gambar:


Screen Shot 2021-04-07 at 16.45.20

Install Libraries

Buka gradle anda, tambahkan kode dibawah untuk menambahkan library:

implementation 'com.android.volley:volley:1.1.1'
implementation 'com.squareup.picasso:picasso:2.71828'
implementation "com.google.android.material:material:1.2.0-alpha02"

Untuk fungsi masing-masing library diatas, anda bisa lihat pada artikel sebelumnya

Android Manifest

Buka folder manifest >> Tambahkan kode dibawah pada AndroidManifest.xml, tujuannya karena aplikasi yang dibangun akan diizinkan untuk mengakses internet.

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />

String.xml

Tambahkan kode berikut pada folder res >> values >> string.xml

https://YOUR_WORDPRESS_URL/wp-json/wp/v2/posts?per_page=10

Ganti YOUR_WORDPRESS_URL dengan url website anda

Post.java

Buatlah sebuah java class, kemudian beri nama Post.java, ketik kode dibawah pada java class tersebut

 private String title;
 private String content;
 private String date;
 private String excerpt;
 private String tags;
 private String categories;
 private String feature_image;

Jika sudah klik kanan kemudian Generate, pilih Getter and Setter, pastikan memilih semua value yang tersedia kemudian klik ok

Screen Shot 2021-04-07 at 16.38.40

Pembuatan java class ini sesuai dengan data JSON API pada string URL diatas. Dan tentukan sendiri data apa saja yang ingin anda ambil.

Layout activity_main.xml

Karena pada aplikasi akan menampilkan list berita atau post loop, jadi akan menggunakan RecylerView sebagai menampil data. Copy kode XML dibawah.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    >

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimaryDark"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme"
        app:layout_constraintBottom_toTopOf="@+id/post_list"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:titleTextColor="#FAF7F7" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/post_list"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar" />
</androidx.constraintlayout.widget.ConstraintLayout>

Terdapat juga penggunaan Toolbar seperti pada gambar dibawah:

Screen Shot 2021-04-07 at 16.51.40

Post_view.xml

Selanjutnya adalah membuat tampilan detail artikel yang ingin "diulang" dengan recylerview. Copy kode beikut dan lihat tampilannya pada gambar:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/post_image"
                android:layout_width="match_parent"
                android:layout_height="220dp"
                android:layout_marginTop="5dp"
                android:layout_marginEnd="5dp"
                android:adjustViewBounds="true"
                android:background="#ffffff"
                android:scaleType="centerCrop"
                android:src="@drawable/ic_baseline_image_black"
                />



            <TextView
                android:id="@+id/post_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="8dp"
                android:layout_marginLeft="8dp"
                android:layout_marginTop="8dp"
                android:layout_marginEnd="8dp"
                android:layout_marginRight="8dp"
                android:layout_marginBottom="8dp"
                android:text="Post Title"
                android:textSize="18sp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/post_image" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

Gambar

Screen Shot 2021-04-07 at 16.54.18

Oke, sekian artikel Membuat Aplikasi dengan wordpress dan Android Studio Part 2: Instalasi Library dan Pembuatan Layout Loop Artikel. Sampai jumpa di artikel selanjutnya yang sudah akan masuk ke logika programming dari data JSON API ke Java Android Studio. Jika anda ber-domisili di Bali dan sedang mencari Wordpress Developer dan berkeinginan untuk mengembangkannya ke aplikasi Native Android bisa memnghubungi saya Bali Web Programmer atau hubungi langsung melalui halaman kontak.



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