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



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:
1 |
<ion-fab right top> |
2 |
<button ion-fab color="secondary" (click)="changeEffect()"> |
3 |
<ion-icon name="md-color-wand"></ion-icon> |
4 |
</button>
|
5 |
</ion-fab>
|
6 |
|
7 |
<ion-fab right bottom> |
8 |
<button ion-fab color="primary" (click)="takePicture()"> |
9 |
<ion-icon name="md-camera"></ion-icon> |
10 |
</button>
|
11 |
</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:
1 |
constructor(public navCtrl: NavController, |
2 |
public toastCtrl: ToastController) { |
3 |
this.checkPermissions(); |
4 |
}
|
5 |
|
6 |
checkPermissions() { |
7 |
// More code goes here
|
8 |
}
|
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()
:
1 |
Diagnostic.isCameraAuthorized().then((authorized) => { |
2 |
if(authorized) |
3 |
this.initializePreview(); |
4 |
else { |
5 |
Diagnostic.requestCameraAuthorization().then((status) => { |
6 |
if(status == Diagnostic.permissionStatus.GRANTED) |
7 |
this.initializePreview(); |
8 |
else { |
9 |
// Permissions not granted
|
10 |
// Therefore, create and present toast
|
11 |
this.toastCtrl.create( |
12 |
{
|
13 |
message: "Cannot access camera", |
14 |
position: "bottom", |
15 |
duration: 5000 |
16 |
}
|
17 |
).present(); |
18 |
}
|
19 |
}); |
20 |
}
|
21 |
}); |
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.
1 |
initializePreview() { |
2 |
// Make the width and height of the preview equal
|
3 |
// to the width and height of the app's window
|
4 |
let previewRect: CameraPreviewRect = { |
5 |
x: 0, |
6 |
y: 0, |
7 |
width: window.innerWidth, |
8 |
height: window.innerHeight |
9 |
}; |
10 |
|
11 |
// More code goes here
|
12 |
}
|
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.
1 |
// Start preview
|
2 |
CameraPreview.startCamera( |
3 |
previewRect, |
4 |
'rear', |
5 |
false, |
6 |
false, |
7 |
true, |
8 |
1
|
9 |
);
|
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.
1 |
changeEffect() { |
2 |
// Create an array with 5 effects
|
3 |
let effects: any = ['none', 'negative','mono', 'aqua', 'sepia']; |
4 |
|
5 |
let randomEffect: string = effects[Math.floor( |
6 |
Math.random() * effects.length)]; |
7 |
CameraPreview.setColorEffect(randomEffect); |
8 |
}
|
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.
1 |
moveFileToExternalStorage(fileName: string) { |
2 |
// Determine paths
|
3 |
let externalStoragePath: string = |
4 |
cordova.file.externalApplicationStorageDirectory; |
5 |
let currentPath: string = |
6 |
cordova.file.applicationStorageDirectory + "files/"; |
7 |
|
8 |
// Extract filename
|
9 |
fileName = fileName.split("/").pop(); |
10 |
|
11 |
// Move the file
|
12 |
File.moveFile(currentPath, fileName, |
13 |
externalStoragePath, fileName).then(_ => { |
14 |
this.toastCtrl.create( |
15 |
{
|
16 |
message: "Saved one photo", |
17 |
position: "bottom", |
18 |
duration: 2000 |
19 |
}
|
20 |
).present(); |
21 |
}); |
22 |
}
|
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+!