Cara Menyisipkan Embed Video dari Google Drive dengan Web Viewer Di Kodular.io

Google Drive yang merupakan salah satu layanan situs yang memfokuskan Cloud Storage yang bisa menampung beberapa file sampai maksimal 15 GB untuk akun

Google Drive yang merupakan salah satu layanan situs yang memfokuskan Cloud Storage yang bisa menampung beberapa file sampai maksimal 15 GB untuk akun Google Personal.

Kali ini, penulis membahas tutorial cara menampilkan embed video yang bersumber dari Google Drive ke aplikasi Android dengan bantuan Webview melalui Kodular.

HAL-HAL YANG DIPERHATIKAN SEBELUM MEMULAI :

1. Pastikan kamu memiliki video di dalam Google Drive.
2. Video tersebut telah diubah "share permission" menjadi anyone, sehingga video tersebut bisa diakses oleh siapa saja di dalam aplikasi Android.

A. CARA MENGAMBIL KODE ID VIDEO DARI GOOGLE DRIVE :

1. Kunjungi situs https://drive.google.com/drive/my-drive?hl=id

2. Lakukan login seperti pada umumnya.

3. Carilah file video yang ingin dimasukkan ke dalam aplikasi, klik 2 kali untuk membukanya.

4. Klik ikon titik tiga bawah yang berada di sebelah kanan.

5. Klik Share / Bagikan.

6. Klik Copy Link.

7. Buka halaman tab baru, pastekan link tersebut di address bar kosong. Jangan tekan Enter, salinkan kode id video yang telah diberi garis merah bawah.

Clue : https://drive.google.com/file/d/[idvideo]/view?usp=sharing

8. Buka halaman tab baru, ketikkan http://drive.google.com/uc?id= di address bar kosong. Jangan tekan Enter. pastekan kode id video ke dalam sambungan "id=" tadi.

Clue : http://drive.google.com/uc?id=[idvideo]

B. CARA MEMBUAT APLIKASI ANDROID :

1. Aktifkan web browser di komputer atau laptop anda.

2. Ketikkan http://c.kodular.io pada address bar. Tunggu sampai halaman utama muncul.

3. Melakukan login dengan cara manual atau sistem OAuth. Tunggu beberapa saat sampai redirect ke homepage. Lihat gambar di bawah ini.

4. Klik Create Project untuk membuat project baru.

5. Isikan nama judul project sesuai dengan keinginan anda. Misalkan, nama judul project adalah "googleform2". Klik Next.

6. Aturlah tampilan Theme UI aplikasi Android, klik Finish.

7. Mulai merancang tampilan pada gambar di bawah ini.

8. Klik Blocks.

9. Buatlah program untuk event pada saat pertama kali membuka aplikasi (OnCreate).

Masukkan "http://drive.google.com/uc?id=[idvideo]" yang telah terisi kode id video ke dalam blok program Web1.URL(). Hal ini berguna untuk mendeteksi akses jaringan internet terhadap situs tersebut.

10. Buatlah program proses tampilan situs ke dalam Webview setelah menekan button yang dipilih. Pada pengisian halaman webView tersebut harus diawali dengan "data:text/html, [isikan pesan]". Fungsinya untuk mengkonversi dari teks biasa menjadi HTML.

Masukkan "http://drive.google.com/uc?id=[idvideo]" yang telah terisi kode id video ke dalam blok program Web_Viewer1.GoToURL(), situs video tersebut akan muncul jika situs tersebut berhasil memasuki ke server Google yang ditandai dengan Response Code 200.

11. Buatlah program untuk menampilkan informasi jika aplikasi tersebut sedang tidak terhubung internet.