Pertemuan Ke 13

pengenalan PLUGIN DI CORDOVA

List Materi:

1. Pengertian Plugin Cordova

2. Jenis Plugin Cordova

3. Mencari Plugin Cordova

4. Syntax Plugin Cordova

5. Penerapan Plugin Cordova

List Praktikum:

1. Menerangkan apa yang akan dibuat

2. Melakukan create project cordova

3. Copy Paste Project Aplikasi-kunjungan download disini

4. Menambahkan plugin dan juga platform

5. Menambahkan View Flashlight

6. Build Project

PENGERTIAN PLUGIN CORDOVA

Library Apache Cordova atau disebut Plugin Cordova adalah sekumpulan kode tambahan berupa syntax javascript yang dapat mengintegrasikan kemampuan native ke dalam aplikasi hybrid. (menggunakan harus mempunyai internet)

Integrasi: tindakan menyatukan komponen yang lebih kecil ke dalam satu sistem yang berfungsi sebagai satu.

Kemampuan Native: penggunaan fitur-fitur pada perangkat smartphone seperti GPS, SMS, Camera dan lain sebagainya. (catatan: untuk penggunaan plugin cordova tidak sebanyak yang ada di android studio)

Library: kumpulan code yang biasanya terkumpul dalam sebuah namespace/ module/ package (tergantung anda menggunakannya di bahasa pemrograman apa) yang dapat di import/ reuse ke program lain.

Plugin: perangkat lunak yang menambahkan fitur tambahan ke aplikasi. Nama lain untuk plugin adalah add-in, add-on, atau ekstensi.

Kata Dosen saya: Library dan plugin sama hanya beda istilah.

Saat ini kemampuan aplikasi hybrid masih terus dikembangkan sampai memiliki kemampuan yang sejajar dengan aplikasi native. Seluruh plugin cordova yang tersedia rata-rata telah memiliki dokumentasi yang lengkap mulai dari integrasi dengan aplikasi sampai dengan penggunaan syntax pluginnya. Beberapa sumber plugin cordova antara lain:

• APACHE REPOSITORY

• NPM REPOSITORY

• GITHUB REPOSITORY

• DLL

SUMBER PLUGIN CORDOVA

• APACHE REPOSITORY

Repository Milik Apache. Repository ini dapat dibilang paling lengkap perihal dokumentasinya

• NPM REPOSITORY

Repository Milik Node Package Manager (NPM) sebagai sumber alternatif

• GITHUB REPOSITORY

Repository Pihak ketiga yang biasanya dikembangkan oleh orang umum

Repository: Secara sederhana arti dari kata repository adalah tempat penimbunan, tempat penyimpanan, gudang.

Repository: Tempat penyimpanan dari kumpulan software/aplikasi yang bisa didownload untuk digunakan atau dapat diartikan sebuah arsip software yang ada pada media penyimpanan atau internet.

MENCARI PLUGIN CORDOVA

Langkah Pencarian

• Tentukan Repository yang akan digunakan

• Buka halaman pencarian plugin pada Repository tersebut

• Masukkan Keyword Plugin yang akan dicari

• Jika ditemukan, Baca Panduan Penggunaan

PENERAPAN PLUGIN CORDOVA

Langkah Untuk mengimplementasikan Plugin Cordova ke dalam sebuah aplikasi maka yang sangat berpengaruh adalah dokumentasi pada plugin tersebut. dokumentasi biasanya meliputi antara lain

• Bagaimana cara instalasi

• syntax javascript yang digunakan untuk plugin tersebut

• dll

Syntax Javascript yang digunakan tiap plugin berbeda-beda tergantung plugin yang digunakan. Syntax tersebut terdapat pada dokumentasi. Implementasi dan Praktikum secara menyeluruh dapat mengikuti panduan praktikum serta video pembelajaran yang telah disediakan.

PRAKTIKUM

PENGANTAR

Pada praktek kali ini akan dibahas mengenai cara pembuatan fitur Flashlight dan Scan QRCode.

Fitur Flashlight adalah dimana aplikasi dapat mengakses LED Camera (On dan Off) dan menjadikannya sebuah Lampu Senter.

Sedangkan fitur Scan QRCode adalah dimana aplikasi mempunyai fitur khusus yang digunakan/memiliki kemampuan untuk memindai Kode QR (Quick Response).

Sebenarnya tidak hanya Kode QR (QRCode) saja bisa juga Kode Matrix (Data Matix), Kode Bar (Barcode) dari berbagai jenis seperti UPC-A, EAN-13, PDF-417 dan lain sebagainya.

Untuk project yang digunakan pada praktikum kali ini menggunakan project aplikasi-kunjungan, jadi nanti bisa kita modifikasi dan tambahi view baru.

LANGKAH 1

1. Silahkan buka interface Command Prompt bawaan Windows atau aplikasi sejenis seperti PowerShell (jika memungkinkan). GAMBAR berikut

3. Buat Project Cordova dengan nama project: kunjungan, id: com.mobile.kunjungan dan nama aplikasi: Kunjungan. Gunakan perintah cordova sebagai berikut

cordova create kunjungan com.mobile.kunjungan Kunjungan

kemudian tekan enter. Jika berhasil akan memiliki tampilan pada gambar berikut

4. Arahkan Kursor dari Command Prompt ke dalam folder Project pada point No. 3.

Gunakan perintah cd kunjungan kemudian tekan enter. Jika berhasil akan memiliki tampilan seperti gambar berikut

5. Tambahkan Platform Android pada Project yang dihasilkan pada point No. 3

Gunakan perintah cordova platform add android kemudian tekan enter. Jika berhasil akan memiliki tampilan seperti gambar berikut

6. Mempelajari dokumentasi tentang Plugin yang digunakan.

Untuk yang pertama adalah bagian instalasi.

Pada plugin Flashlight, dijelaskan bahwa untuk instalasi menggunakan cara berikut:

Sehingga cara menambahnya menggunakan perintah > cordova plugin add cordova-plugin-flashlight kemudian tekan enter. Jika berhasil akan memiliki tampilan sebagai berikut

Pada gambar di atas terdapat peringatan

Plugin doesn’t support this project ........

hal ini disebabkan bahwa saat menambahkan plugin flashlight maka otomatis menambahkan plugin tambahan yang bernama compat. Sedangkan project yang kita bikin menggunakan versi tinggi yang telah tersedia plugin compatnya. Sehingga instalasi plugin compat bawaan plugin flashlight gagal dilakukan.

Tapi, Pada gambar dibawah ini, kita mencoba untuk

menampilkan daftar plugin yang tersedia pada project yang kita bikin dengan perintah > cordova plugin list yang ternyata plugin flashlight berhasil diinstall.

dan perhatikan file package.json file ini menampung seluruh informasi dari aplikasi kita

7. Langkah berikutnya adalah copy file f7-icon.png di folder aplikasi-kunjungan/mobile/img/f7-icon.png. diletakan di project-f7/kunjungan Sehingga menghasilkan tampilan berikut:

8. Langkah berikutnya adalah mengubah file config.xml yang ada pada project cordova.

Pengubahan disesuaikan dengan konfigurasi aplikasi semisal

id, nama, deskripsi, icon dan lain sebagainya.

Untuk mengurangi tingkat kesalahan pada penulisan, perhatikan code default dari config.xml

Setelah itu rubah menjadi seperti ini, perhatikan teks tebal:

9. Minimise halaman Command Prompt (CMD). Kemudian kosongkan file/folder yang ada di dalam folder www yang ada pada project.

10. Langkah berikutnya copy seluruh file yang ada pada folder mobile (project aplikasi-kunjungan yang ada di htdocs) ke dalam folder www pada project cordova ini.

11. kita akan menambahkan view baru untuk menempatkan perintah on off lampu pada hp

penjelasan:

<script src="cordova.js"></script> adalah menambahkan file library cordova agar syntax library flashlight dapat dijalankan oleh javascript.

menambahkan code di routes.js

menambahkan file baru di pages dengan nama flashlight

12. Mempelajari dokumentasi tentang Plugin yang digunakan terutama bagian penggunaan. Pada plugin Flashlight, dijelaskan bahwa untuk penggunaan menggunakan cara berikut

13. Langkah berikutnya adalah membuat Method Function yang digunakan untuk menangani mekanisme LED menyala dan LED mati.

Ada 2 Method Function yang dibuat yaitu method function untuk nyala LED dan method function

untuk mematikan LED. Tambahkan syntax berikut ke dalam blok methods: {......}.

Langkah berikutnya adalah membuat event yang dihubungkan dengan method function yang dibuat pada langkah ke 18. Event tersebut ditempatkan pada tombol yang sudah dibuat pada langkah sebelumnya. Tambahkan syntax dibawah ini

14. Langkah berikutnya adalah meng-compile project cordova tersebut dengan perintah cordova build android kemudian tekan enter.