Membuat Aplikasi Native Blogger Api pure Aplikasi

Halo sobatku semua, kali ini saya tidak akan memberikan tutorial secara penuh / menyeluruh karena akan sangat panjang jika saya jelaskan dalam satu artikel.

Kali saya hanya ingin membagikan sebuah projek yang sudah saya buat dalam seminggu terakhir ini, projek tersebut ialah blogger api yang mana aplikasi ini memuat konten dari blog yang kita punya dengan menggunakan kunci api.

Berbeda dengan projek saya sebelumnya yang mana blog kita dimuat dalam bentuk WebView yang pastinya tidak berbeda seperti saat kita memuat website kita melalui browser seperti Chrome, Opera, Mozilla dan lainnya.

Akan tetapi meskipun blog / website kita ditampilkan dengan rapih pada tampilan WebView, aplikasi kita tidak memiliki value lebih di mata Google Play store atau masih jauh dari kriteria sebuah aplikasi.

Maka dari itu solusi terbaik untuk membuat blog kita menjadi sebuah aplikasi murni ialah menggunakan kunci Api yang sudah disediakan google. Untuk pembahasan google cloud dan api akan kita bahas lain kali saja karena kali ini saya akan fokus pada projek yang akan saya bagikan ini.

Projek saya ini tentunya masih banyak kekurangan karena dibuat dalam waktu yang singkat dan selebihnya saya serahkan sama kalian untuk bisa menjadi aplikasi yang keren. Jadi langsung saja saya kenalkan projek Blogger Api ini dari berbagai sisi.

Splash Screen

Pada tampilan awal aplikasi ini akan menampilkan tampilan splash seperti yang banyak digunakan aplikasi lain, tampilan splash ini dibuat secara sederhana saja hanya menampilkan logo, Progressbar dan textview dibawahnya, kalian bisa ubah semua itu pada bagian SplashActivity dan untuk durasinya sendiri saya gunakan 3 detik saja agar tidak terlalu lama dan tidak terlalu cepat juga, tapi saya kembalikan lagi ke kalian semuanya, kalian bebas mengubah apapun pada tampilan projek ini.

Halaman Berada

Setelah splash screen berakhir, selanjutnya kita dibawa ke homepage atau halaman utama pada projek kita ini, sebelum menampilkan daftar konten... listview akan menampilkan Shimmer Efek (emptyListView) atau Lazy Load jika dalam istilah blogger, hal ini diperlukan untuk mencegah kekosongan tampilan saat memuat konten, sebenarnya kita bisa saja membuat efek loading hanya menggunakan progressbar saja namun untuk hasil yang memuaskan saya lebih memilih untuk menggunakan Shimmer efek seperti ini.

Pada tampilan awal inipun saya buat se sederhana mungkin agar kedepannya kalian bisa memodifikasi tampilannya menjadi lebih keren lagi atau bahkan menyerupai tampilan website yang kalian miliki, seperti pada projek aplikasi saya lainnya yang akan saya buat tampilannya semirip mungkin dengan blog yang saya miliki.

Untuk sementara kalian bisa ubah tampilan header pada aplikasi ini, mulai dari warna, logo dan nama blog dengan milik kalian, karena logo dan nama blog tidak akan berubah otomatis setelah kalian berhasil memuat blog kalian ke aplikasi ini.

Menampilkan konten lainnya

Pada tampilan awal aplikasi tersebut hanya akan menampilkan sepuluh konten saja karena saya telah membatasi limit per sekali muat yaitu sepuluh artikel saja, namun jika aplikasi di Scroll sampai akhir maka sepuluh konten lainnya akan di tampilkan, begitu juga seterusnya sampai tidak ada lagi artikel yang bisa dimuat.

Kalia juga dapat mengubah loadmore scroll dengan tombol klik, dan jika kalian mau nanti akan saya jelaskan di artikel lainnya.. jadi tinggalkan saja komentar kalian dibawah. Sementara untuk menampilkan keseluruhan artikel sekaligus, kalian bisa ubah MaxResult dari 10 menjadi jumlah yang kalian inginkan misal jumlah artikel kamu 100 artikel kamu bisa ubah ke 100 atau lebih.

Sebagai catatan jika konten yang dimuat berjumlah kurang 200 konten, sepertinya itu masih aman untuk dimuat tapi jika lebih dari itu saya belum coba karena bisa jadi akan terjadi error outOfMemory.

Memuat konten

Selanjutnya memuat konten yang dipilih, tentunya pengguna aplikasi tidak ingin hanya melihat thumbnail dan judul saja bukan !? Maka dari itu menampilkan konten juga menjadi PR buat saya karena halaman konten yang saya buat masih berantakan, pada bagian ini kita harus menambah beberapa kode skin atau style yang sama seperti yang kita terapkan pada blog yang kita miliki atau setidaknya kalian bisa membuat style tersendiri untuk aplikasi ini.

Untuk pembahasan style juga akan saya bahas nanti jika di antara kalian memang butuh penjelasan mengenai style ini. dan untuk sementara mungkin dengan tampilan yang saya buat ini pengunjung tidak akan merasa risih dan gambar berikut adalah contoh dari tampilan halaman konten.

Pertama-tama kalian perhatikan bagian sisi kanan header, disana bisa kamu lihat ada dua icon yang tampil yaitu icon chat dan icon download. Pada icon chat tersebut terlihat bahwa ada angka satu didalamnya, itu menandakan bahwa postingan tersebut memiliki satu komentar dan itu akan termuat secara otomatis tanpa harus kalian ubah lagi.

Notifikasi tersebut secara default akan muncul jika postingan kamu memiliki komentar dan angka nya akan menyesuaikan juga dengan jumlah komentar yang ada, tapi jika postingan tidak memiliki komentar maka notifikasi dan ikon Tersebut tidak akan muncul.

Sayangnya saya baru bisa menampilkan notifikasi tersebut saja dan belum dapat menampilkan komentar pengunjung dan menambahkan komentar secara langsung.

Selain pada halaman posting notifikasi komentar (comments count) juga bisa di temui pada list artikel di homepage atau halaman utama aplikasi juga.

Selanjutnya icon download saya fungsikan sebagai shortcut untuk menuju ke penyimpanan download dan proses download, jadi ketika proses download sedang berlangsung kita dapat melihatnya disana, meskipun sebenarnya dari bilah notifikasi kita juga sudah dapat melihat prosesnya jadi fitur tersebut gak penting-penting banget.

Kemudian untuk interface postpage ini saya letakkan gambar utama atau thumbnail berada di atas judul agar tampilannya muantappps... pada bagian judul, tanggal, author dan konten digabungkan dalam satu wadah yang aesthetic 😂 .

Dan yang perlu kalian perhatikan juga disana gambar author dan nama author akan otomatis menampilkan author blog terkait. misalnya blog kamu penulisnya adalah kamu dengan foto kamu maka yang tampil adalah foto kamu dan nama kamu sebagai author, pokoknya semua tentang kamu dah...

Search Form

Kembali lagi ke homepage pada Kolom pencarian juga bisa kamu gunakan untuk mencari artikel yang ingin kamu baca, hanya saja pencariannya tidak terlalu akurat,, jadi masih sering loading gak jelas dan harus menuliskan pencarian secara spesifik barulah artikel yang di maksud akan tampil disusul rekomendasi lainnya, hal ini juga menjadi PR untuk saya perbaiki kedepannya.

Selain menampilkan hasil pencarian tentunya kita juga dapat memilih hasil pencarian tersebut dan menampilkannya pada postpage atau halaman konten seperti yang sudah saya jelaskan diatas.

Second Activity

Selanjutnya ada juga SecondActivity yang mana aktifitas ini hanya akan dibuka ketika kita meng-klik text atau apapun itu yang mengandung link, sebagai contoh ImageView (gambar) jika kita klik.. jika itu mengandung link maka akan di arahkan ke aktifitas kedua itu dan di buka disana, begitu juga dengan link download jika tidak melalui direct page maka akan dibuka di halaman tersebut dan memulai download lalu kembali ke aktifitas sebelumnya.

Tapi jika link download mengarah ke halaman download seperti MediaFire atau Google Drive maka aktivitas kedua tersebut akan menampilkan halaman downloadnya terlebih dahulu baru kita klik download filenya disana, selain link direct,, link lainnya yang memuat halaman juga akan di tampilkan di second activity tersebut.

Memuat Blog Ke aplikasi

Setelah semuanya selesai mudah-mudahan tidak ada yang terlewat dari pengenalan aplikasi diatas, sekarang jika kalian memang berminat untuk menggunakan ataupun mengembangkan projek ini kalian bisa download sample APK dan file projek SWB nya pada link yang sudah saya sediakan dibawah artikel ini.

Jika kalian sudah mendownload nya jangan lupa untuk mengubah beberapa skrip yang ada pada blok-blok yang sudah tersusun disana, karena jika kalian tidak mengisi / mengubahnya aplikasi tersebut tidak akan menampilkan blog kamu atau malah akan terjadi error, jadi harap perhatikan ini.

Persiapan

• Pertama pastikan kalian memiliki Blog dari google yaitu Blogger Blogspot karena projek ini dirancang untuk memuat Api Key dari blogger api bukan wordpress atau blog lainnya.
  
  
• Jika belum punya blog, silahkan daftar dan buatlah dulu blog kalian, jika sudah selanjutnya siapkan juga Blogger Api nya melalui console.cloud.google.com untuk tutorial sudah banyak juga yang bahas dan kalian bisa cari di google dan YouTube,, atau next saya buatkan juga tutorialnya disini.
  
  
• Intinya kamu harus siapkan Blog ID dan Blogger Api yang nantinya akan kita gunakan pada aplikasi tersebut
  
  
  Akan ada beberapa halaman yang serupa dengan gambar diatas jadi nanti harus teliti.

Untuk mengubahnya silahkan stay di MainActivity dan pertama-tama kamu bisa cek di bagian onCreate jika sudah kemudian pada tab view lihat pada textview1 onTextChanged Selanjutnya ada pada tab MoreBlock di loadmore untuk tataletaknya tidak selalu seperti pada gambar diatas karena ada juga yang menyatu dengan link.

Ingat jangan sampai terlewat ke-tiga halaman tersebut harus berisi Blog ID dan Blogger Api milikmu atau aplikasi akan error.

Jadi sampai disini dulu yang bisa saya jelaskan untuk projek aplikasi ini, mudah-mudahan tidak ada yang terlewat dan mudah-mudahan penjelasan saya diatas dapat dipahami oleh teman-teman semua, jika masih ada yang kurang jelas silahkan tanyakan dikolom komentar dibawah.

DOWNLOAD PROJEK

DOWNLOAD