Menampilkan file pdf dari Google Drive dan Assets Kodular

Oke pada kesempatan kali ini, saya akan membahas tutorial cara menampilkan file pdf dari Google Drive dan Assets Kodular. Banyak orang yang bertanya-tanya bagaimana cara menampilkan file pdf dari aplikasi android baik secara online maupun offline, berikut di bawah ini akan dijelaskan tahapan membuat aplikasi yang dapat menampilkan dokumen pdf.

menampilkan file pdf dari google drive dan assets kodular
menampilkan file pdf dari google drive dan assets kodular

Kepanjangan dari PDF itu sendiri yaitu Portable Document Format, merupakan sebuah format berkas yang dibuat oleh Adobe System untuk keperluan pertukaran dokumen digital. Format PDF digunakan untuk merepresentasikan dokumen dua dimensi yang meliputi teks, huruf, citra dan grafik. (Source: Wikipedia)

Lalu timbul pertanyaan, apakah Kodular dapat membuat aplikasi android yang dapat menampilkan file pdf?

Jawabanya Iya, karena saat ini sudah ada extension yang dapat membantu menampilkan file pdf.

Cara membuat aplikasi yang dapat menampilkan file pdf dari Google Drive dan Assets Kodular

Pertama-tama kamu dapat download extension PDF VIEWER terlebih dahulu di official app Deep Host, extension ini milik Deep Host yang digunakan untuk menampilkan file pdf yang disimpan di Assets kodular maupun storage aplikasi, kamu dapat mendownload extension tersebut secara gratis.

Setelah itu login ke kodular dengan menggunakan email kamu, kemudian buat project baru dan berikan nama “PDF Viewer”. Setelah itu lanjut untuk membuat desain aplikanya.

berikut di bawah ini adalah desain aplikasi yang saya buat.

desain aplikasi pdf viewer online offline kodular
desain aplikasi pdf viewer online offline kodular

Pada desain di atas saya membuat dua screen, screen1 untuk menampilkan file pdf secara offline dari Assets kodular, sedangkan screen Tampil untuk menampilkan file pdf online. Kamu dapat membuat desain lebih baik lagi karena desain yang saya buat cukup sederhana.

Ketika membuat desain aplikasi, jangan lupa “import extension” PDF VIEWER yang di download tadi, dengan cara klik menu “import extension” pada pallet sebelah kiri bagian bawah, kemudian upload dan klik import jangan lupa untuk seret extension tersebut ke layar project desain.

Pada desain yang saya buat di atas, terdapat komponen View Pager yang berguna untuk membuat slider halaman ke kanan dan ke kiri. Kemudian komponen Web Viewer digunakan untuk menampilkan file pdf secara online dari google drive. Kedua komponen tersebut dapat ditemukan di bagian pallet menu “Layout navigation”.

Selanjutnya ada komponen LIstview image yang berguna menampilkan list data pdf disertai gambar, komponen Notifier sebagai notifikasi. Kedua komponen ini dapat ditemukan di bagian pallet menu “User Interface”.

Komponen Network digunakan untuk mengecek apakah aplikasi dalam kondisi online atau offline, komponen ini dapat ditemukan di bagian pallet menu “Connectivity”.

Upload file pdf ke google drive dan ambil link yang dibagikan

setelah proses membuat desain aplikasi selesai, tahap selanjutnya adalah meng-upload file pdf ke google drive kemudian ambil link untuk dibagikan. Lihat gambar di bawah ini

upload file pdf ke drive dan dapatkan link untuk dibagikan
upload file pdf ke drive dan dapatkan link untuk dibagikan

Setelah upload file pdf ke google drive, janga lupa untuk mendapatkan link dari file pdf tersebut dengan cara seperti gambar di atas. Kamu bisa klik kanan pada file pdf, kemudian klik “dapatkan link yang bisa dibagikan” kemudian akan muncul po-up dan rubah pengaturan akses menjadi “siapa saja yang memiliki link” kemudian klik “salin link” dan klik selesai. Kemudian simpan link yang sudah di copy tadi ke notepad.

Lakukan itu secara berulang pada file pdf yang tersimpan di google drive.

Upload file pdf ke assets kodular

Kemudian lanjut untuk meng-upload file pdf ke assets kodular. Ini berguna agar aplikasi dapat membaca file pdf secara offline dari assets yang tersimpan di apllikasi, lihat gambar di bawah ini

upload file pdf ke asset kodular
upload file pdf ke drive dan dapatkan link untuk dibagikan

Blok program aplikasi pdf viewer google drive dan pdf viewer dari assets kodular

Agar aplikasi yang dibuat dapat menampilkan file pdf dari google drive maupun dari file pdf dari assets, maka diperlukan kode blok program. Berikut di bawah ini adalah kodenya.

blok program menampilkan file pdf dari assets kodular
blok program menampilkan file pdf dari assets kodular

pada blok program di ataas diterapkan di screen 1. Kemudian blok program selanjutnya di bawah ini adalah blok program untuk menampilkan file pdf dari google drive yang diterapkan pada screen “tampil”.

blok program menampilkan file pdf dari google drive kodular
blok program menampilkan file pdf dari google drive kodular

Perhatikan gambar di atas terutama pada prosedur url, pada prosedur tersebut kamu jangan lupa untuk memasukkan link dari file pdf di google drive yang dibagikan dan sudah di copy sebelumnya.

Build project ke aplikasi android

Setelah proses pembuatan program selesai, tahap selanjutnya adalah membangun project yang dibuat tadi menjadi bentuk aplkasi, dengan cara klik “export” dan download sebagai apk.

berikut di bawah ini adalah dokumentasi dari hasil project yang dibuat pada tutorial ini

Dokumentasi aplikasi

Adapun file aia pdf viewer ini saya lampirkan, sebagai bahan pembelajaran untuk kamu.

Sekian tutorial kali ini apabila ada yang ingin ditanyakan, tulis saja komentar di bawah.

4 comments

  1. Mas ko punya saya nama untuk Title PDF nya gak rubah ya masih pdf1, pdf2, pdf3 padahal sudah dirubah nama file pdf nya

    1. pada tutorial diatas untuk pembuatan title pada list view bukan berdasarkan pada title file pdf yang diupload melainkan dibuat secara manual. Kalau mau dirubah titlenya bisa disesuaikan dengan merubah bagian blok program procedure listview tepatnya dibagian title.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.