Cara Membuat Aplikasi Kamera Dengan Ionic 2

Indonesian (Bahasa Indonesia) translation by Febri Ardian Sanjoyo (you can also view the original English article)

Final product image — What You'll Be Creating

Sebagai pengembang yang bijaksana, Anda mungkin mewaspadai pembuatan aplikasi hybrid yang bergantung pada API asli Android. Beberapa tahun yang lalu, saya juga, dengan Android yang memiliki versi khusus dan beberapa perangkat spesifik. Namun sekarang, kita dapat mempercayai kerangka pengembangan aplikasi hybrid untuk menangani sebagian besar kebiasaan tersebut secara transparan. Ionic 2, yang dibangun di Apache Cordova, adalah salah satu kerangka kerja seperti itu.

Ionic 2 memiliki wrapper untuk beberapa plugin Cordova populer yang memungkinkan Anda memanfaatkan sumber daya asli Android dengan mudah, seperti kamera, sensor perangkat keras, dan sistem file. Dalam tutorial ini, saya akan menunjukkan cara menggunakan wrapper bersama komponen Ionic 2 UI untuk membuat aplikasi kamera sederhana.

Prasyarat

Untuk mengikutinya, Anda memerlukan:

Versi terbaru Android SDK
Node.js v6.7.0 atau lebih tinggi
Perangkat atau emulator yang menjalankan Android 4.4 atau lebih tinggi
Pemahaman dasar tentang TypeScript dan Angular 2

1. Pasang Cordova dan Ionic

Baik Ionic dan Cordova tersedia modul NPM, jadi cara termudah untuk menginstalnya adalah dengan menggunakan perintah npm. Inilah cara Anda bisa menginstal keduanya secara global:

1	npm install -g cordova ionic

Setelah penginstalan selesai, ketik berikut ini untuk memastikan bahwa antarmuka command-line Ionic, atau CLI untuk jangka pendek, dikonfigurasi dengan benar.

1	ionic info \| grep "Version"

Output dari perintah di atas akan terlihat seperti ini:

1	Ionic CLI Version: 2.2.1
2	Ionic App Lib Version: 2.2.0
3	Node Version: v6.7.0

2. Buat Project Baru

Ionic's CLI membuatnya sangat mudah bagi Anda untuk membuat project Ionic 2 yang baru dengan semua file konfigurasi dan kode boilerplate yang dibutuhkan. Ini juga menawarkan beberapa template starter untuk dipilih. Untuk saat ini, mari kita buat sebuah project dengan menggunakan blank starter template.

1	ionic start MyCameraApp blank --v2 --id com.tutsplus.mycameraapp

Pada titik ini, Anda akan memiliki direktori baru bernama MyCameraApp. Untuk sisa tutorial ini, kita akan bekerja di dalam direktori ini.

1	cd MyCameraApp

3. Konfigurasikan Project

Secara default, project Ionic 2 tidak dikonfigurasi untuk menargetkan platform mobile manapun. Inilah cara Anda menambahkan support untuk Android:

1	ionic platform add android

Anda juga harus secara manual mengarahkan Ionic 2 ke lokasi di mana Anda menginstal Android SDK. Jika Anda menggunakan Mac atau Linux, gunakan perintah export untuk melakukannya.

1	export ANDROID_HOME=~/Android/Sdk/

4. Pasang Plugin Ionic

Aplikasi kamera kita memerlukan akses ke kamera dan sistem file perangkat, yang keduanya merupakan sumber asli. Jika Anda mengenal Cordova, Anda mungkin sadar bahwa aplikasi hybrid biasanya berinteraksi dengan sumber daya semacam itu melalui plugin. Meskipun Anda dapat menggunakan plugin Cordova secara langsung dalam project Ionik 2, akan jauh lebih mudah untuk menggunakan Ionic Native wrapper.

Untuk mengakses kamera, kita akan menggunakan plugin cordova-plugin-camera-preview. Ini memungkinkan kita untuk tidak hanya memotret, tapi juga menerapkan beberapa filter gambar kepada mereka. Begini cara menambahkannya ke project Anda:

1	ionic plugin add cordova-plugin-camera-preview

Kita tentu saja harus menyimpan gambar yang kita ambil pada media penyimpanan eksternal, seperti kartu SD. Untuk melakukannya, kita akan menggunakan plugin cordova-plugin-file.

1	ionic plugin add cordova-plugin-file

Terakhir, untuk mendukung perangkat Android yang menjalankan API level 23 atau lebih tinggi, kita memerlukan plugin cordova.plugins.diagnostic.

1	ionic plugin add cordova.plugins.diagnostic

5. Tentukan Layout

User interface aplikasi kita akan terdiri dari komponen berikut:

window pratinjau kamera
Sebuah tombol floating untuk mengambil gambar
Tombol floating untuk menerapkan filter gambar

Kita akan membuat jendela pratinjau kamera (camera preview window) secara terprogram di langkah selanjutnya. Untuk saat ini, mari membuat tata letak HTML yang berisi hanya dua tombol floating action.

Karena aplikasi blank kita sudah memiliki halaman, kita akan menggunakannya alih-alih membuat yang baru. Untuk memodifikasi tata letaknya, buka src/pages/home/home.html. Kosongkan isinya dan tambahkan tag baru <ion-content> ke dalamnya.

1	<ion-content padding>
2
3	</ion-content>

Untuk membuat tombol floating action, Anda dapat membuat tombol HTML biasa dan menambahkan atribut ion-fab ke dalamnya. Selain itu, dengan membungkus <button> tag di dalam <ion-fab> tag , Anda dapat memposisikannya.

Tombol floating action biasanya memiliki ikon. Dengan menggunakan <ion-icon> tag , Anda dapat menambahkan Ionicon untuk itu.

Oleh karena itu, tambahkan yang berikut ke file tata letak Anda:

<ion-fab right top>
    <button ion-fab color="secondary" (click)="changeEffect()">
        <ion-icon name="md-color-wand"></ion-icon>
    </button>
</ion-fab>

<ion-fab right bottom>
    <button ion-fab color="primary" (click)="takePicture()">
        <ion-icon name="md-camera"></ion-icon>
    </button>
</ion-fab>

Seperti yang dapat Anda lihat pada kode di atas, kita telah menambahkan handlers click event ke kedua tombol tersebut. Kita akan menentukannya nanti.

6. Akuisisi Permission

Pada perangkat yang menjalankan Android API level 23 atau lebih tinggi, Anda harus secara eksplisit meminta pengguna untuk mengakses sistem kamera dan file selama runtime. Untuk melakukannya di aplikasi hybrid Anda, Anda dapat menggunakan metode yang tersedia di Diagnostic Ionic Native wrapper.

Mulailah dengan membuka src/halaman/home/home.ts dan mengimpor Diagnostic.

1	import { Diagnostic } from 'ionic-native';

Di dalam konstruktor HomePage class, tambahkan panggilan ke metode checkPermissions() yang baru. Selain itu, tambahkan objek ToastController ke class menggunakan dependency injection. Kita akan menggunakannya untuk menampilkan Ionic 2 toasts, yang hampir identik dengan snackbars asli Android.

Setelah melakukan perubahan di atas, kode Anda akan terlihat seperti ini:

constructor(public navCtrl: NavController, 
            public toastCtrl: ToastController) {
    this.checkPermissions();
}

checkPermissions() {
    // More code goes here
}

Di dalam metode checkPermissions(), gunakan metode isCameraAuthorized() dari kelas Diagnostic untuk memeriksa apakah aplikasi telah memiliki izin untuk mengakses kamera dan sistem file. Karena metode mengembalikan sebuah objek Promise, Anda harus menggunakan callback untuk menangani hasilnya.

Jika aplikasi tidak memiliki izin yang diperlukan, Anda dapat menggunakan metode requestCameraAuthorization() untuk meminta persetujuan.

Jika pengguna memberikan izin, atau jika aplikasi kita sudah memilikinya, kita dapat melanjutkan dan menginisialisasi pratinjau kamera di dalam initializePreview(), metode yang akan kita buat di langkah berikutnya. Jika tidak, mari kita hanya menampilkan toast yang mengandung pesan kesalahan dengan menggunakan metode create() dan present() dari kelas ToastController.

Dengan demikian, tambahkan kode berikut di dalam metode checkPermissions():

Diagnostic.isCameraAuthorized().then((authorized) => {
    if(authorized)
        this.initializePreview();
    else {
        Diagnostic.requestCameraAuthorization().then((status) => {
            if(status == Diagnostic.permissionStatus.GRANTED)
                this.initializePreview();
            else {
                // Permissions not granted
                // Therefore, create and present toast
                this.toastCtrl.create(
                    {
                        message: "Cannot access camera", 
                        position: "bottom",
                        duration: 5000
                    }
                ).present();
            }
        });
    }
});

Inilah dialog camera authorization yang terlihat pada perangkat yang menjalankan Android Marshmallow:

7. Membuat Camera Preview

CameraPreview Ionic Native wrapper memungkinkan Anda menampilkan pratinjau (preview) kamera langsung di dalam aplikasi hybrid Anda. Namun, karena pratinjau menggunakan fragmen Android dan bukan elemen HTML, menambahkannya ke laman kita sedikit rumit.

Sebelum memulai, pastikan Anda mengimpor kedua CameraPreview dan CameraPreviewRect.

1	import { CameraPreview, CameraPreviewRect } from 'ionic-native';

Dengan menggunakan objek CameraPreviewRect, Anda dapat menentukan posisi dan ukuran pratinjau kamera. Untuk saat ini, mari kita isi layar perangkat sepenuhnya.

initializePreview() {
    // Make the width and height of the preview equal 
    // to the width and height of the app's window
    let previewRect: CameraPreviewRect = {
      x: 0,
      y: 0,
      width: window.innerWidth,
      height: window.innerHeight
    };

    // More code goes here
}

Pada titik ini, kita memiliki semua yang kita butuhkan untuk memulai pratinjau kamera. Oleh karena itu, hubungi metode startCamera() pada CameraPreview class dan lewati objek CameraPreviewRect untuk itu. Anda juga harus, tentu saja, tentukan kamera yang ingin Anda gunakan. Dalam tutorial ini, kita hanya akan menggunakan kamera belakang.

// Start preview
CameraPreview.startCamera(
    previewRect, 
    'rear', 
    false, 
    false, 
    true,
    1
);

Pratinjau kamera akan ditempatkan di bawah halaman HTML kita, dan tidak akan terlihat kecuali jika kita membuat latar belakang aplikasi kita transparan. Cara termudah untuk melakukannya adalah dengan menambahkan aturan CSS di dalam file src/app/app.scss.

1	ion-app, ion-content {
2	background-color: transparent !important;
3	}

8. Mengambil Gambar

Saat menentukan tata letak halaman, kita telah menambahkan click handler ke tombol yang akan ditekan pengguna untuk mengambil gambar. Mari kita definisikan handler.

Mengambil gambar dengan CameraPreview Ionic Native wrapper sesederhana memanggil metode takePicture() dan menentukan resolusi gambar yang diinginkan. Untuk saat ini, mari kita gunakan 320 x 320 sebagai dimensi maksimum gambar kita.

1	takePicture() {
2	CameraPreview.takePicture({maxWidth: 320, maxHeight: 320});
3	}

Perlu dicatat bahwa menentukan resolusi besar dapat menyebabkan kesalahan di luar memori.

9. Terapkan Efek Gambar

CameraPreview wrapper memungkinkan Anda untuk dengan mudah menerapkan beberapa efek gambar umum, juga disebut image filters ke gambar Anda secara real time. Kita telah menambahkan click handler ke tombol yang akan ditekan pengguna untuk menerapkan efek gambar. Karena itu, yang perlu kita lakukan sekarang adalah mendefinisikannya.

Agar kode kita tetap sederhana, setiap kali pengguna menekan tombolnya, mari kita ambil efek acak dari berbagai efek, dan aplikasikan. Anda dapat menggunakan fungsi JavaScript Math.random() untuk memilih efek acak, dan metode setColorEffect() dari kelas CameraPreview untuk menerapkannya.

changeEffect() {
    // Create an array with 5 effects
    let effects: any = ['none', 'negative','mono', 'aqua', 'sepia'];

    let randomEffect: string = effects[Math.floor(
                                Math.random() * effects.length)];
    CameraPreview.setColorEffect(randomEffect);
}

Anda dapat menjalankan aplikasi sekarang dan tekan FAB beberapa kali untuk melihat berbagai efek gambar yang diterapkan ke jendela pratinjau kamera.

10. Pindahkan Gambar ke Penyimpanan Eksternal

Aplikasi kita menempatkan semua gambar yang diperlukan di dalam direktori penyimpanan aplikasinya, yang merupakan direktori data pribadi. Jika Anda lebih suka menyimpan foto-foto itu di media penyimpan eksternal, sehingga membuatnya tersedia untuk aplikasi galeri foto pihak ketiga, Anda harus memindahkannya secara manual. Untuk melakukannya, Anda bisa menggunakan pembungkus File Ionic Native.

Seperti biasa, impor wrapper sebelum menggunakannya. Selain itu, nyatakan cordova sebagai variabel global yang diinisialisasi secara eksternal. Ini menawarkan konstanta yang memungkinkan Anda dengan mudah merujuk ke semua direktori file sistem Android yang sering digunakan.

1	import { File } from 'ionic-native';
2	declare var cordova: any; // global variable for paths

Kita harus memindahkan gambar ke direktori penyimpanan eksternal segera setelah diambil. Oleh karena itu, subscribe metode setOnPictureTakenHandler() pada CameraPreview class. Metode ini mengembalikan sebuah array yang berisi absolute path gambar dan thumbnail-nya. Untuk saat ini, kami hanya akan memotret.

Dengan demikian, tambahkan kode berikut di akhir metode initializePreview():

1	CameraPreview.setOnPictureTakenHandler().subscribe((result) => {
2	this.moveFileToExternalStorage(result[0]); // Move picture only
3	});

Di dalam metode moveFileToExternalStorage(), kita dapat menggunakan metode moveFile() dari kelas File untuk benar-benar memindahkan gambar. Metode moveFile() menginginkan sumber dan tujuan direktori dan nama file sebagai argumennya.

Untuk menentukan jalur direktori penyimpanan eksternal aplikasi Anda, gunakan konstanta cordova.file.externalApplicationStorageDirectory. Demikian pula, untuk menentukan jalur direktori penyimpanan pribadi aplikasi Anda, gunakan konstanta cordova.file.applicationStorageDirectory.

Selain itu, untuk mengekstrak nama file gambar dari absolute path, Anda cukup menggunakan metode JavaScript split() dan pop(). Sebaiknya Anda juga menampilkan toast setelah operasi move selesai.

moveFileToExternalStorage(fileName: string) {
    // Determine paths
    let externalStoragePath: string = 
                cordova.file.externalApplicationStorageDirectory;
    let currentPath: string = 
                cordova.file.applicationStorageDirectory + "files/";

    // Extract filename
    fileName = fileName.split("/").pop();

    // Move the file
    File.moveFile(currentPath, fileName,
                  externalStoragePath, fileName).then(_ => {
        this.toastCtrl.create(
            {
                message: "Saved one photo", 
                position: "bottom",
                duration: 2000
            }
        ).present();
    });
}

Aplikasi kamera kita sekarang sudah lengkap. Anda dapat melihat fotonya menggunakan aplikasi galeri foto yang ada pada perangkat Anda.

Kesimpulan

Dalam tutorial ini, Anda belajar menggunakan Ionic 2 dan wrapper plugin yang tersedia di Ionic Native untuk membuat aplikasi hybrid yang dapat memotret, menerapkan efek gambar, dan menyimpannya di media penyimpanan eksternal. Meskipun kita hanya fokus pada platform Android hari ini, Anda dapat yakin bahwa aplikasi kita akan bekerja, dengan sedikit perubahan, juga pada perangkat iOS.

Untuk mempelajari lebih lanjut tentang Ionic 2, Anda bisa merujuk ke dokumentasi ekstensifnya. Kita periksa kursus Ionic 2 kami di Envato Tuts+!

Ionic

Memulai dengan Ionic 2

Reginald Dawson