Subscribe to DeepL Pro to translate larger documents.

Visit www.DeepL.com/pro for more information.

Jurnal Penelitian Internasional Teknik dan Teknologi (IRJET) e-ISSN: 2395-0056
Volume: 05 Edisi: 05 | Mei-2018 www.irjet.net p-ISSN: 2395-0072

KERANGKA KERJA IONIK

Priyanka Chaudhary

Mahasiswa, Departemen Ilmu Komputer, ABESIT, Ghaziabad

---------------------------------------------------------------------***---------------------------------------------------------------------
Abstrak-Melalui tugas tentang kerangka kerja yang berharga dua segmen, pertama adalah Native Application dan yang
ini yaitu IONIC, saya tidak hanya mendapatkan pemahaman kedua adalah Hybrid Application.
tentang cara kerja ionic, tetapi juga memiliki kesempatan
besar untuk mengeksplorasi kemampuan saya dalam Aplikasi asli dibuat untuk sistem operasi seluler tertentu.
mengembangkan aplikasi lingkungan hibrida untuk berbagai Program aplikasi ini dibuat menggunakan SDK berbasis
sistem operasi seluler seperti iOS dan Android. Ionic platform, fungsi dan bahasa yang sudah ditentukan
Framework menawarkan seperangkat aturan untuk sebelumnya untuk platform tertentu seperti Objective-C
menggunakan berbagai fungsi yang telah ditentukan untuk untuk iOS dan java untuk Android.
mengerjakan User Interface aplikasi, tanpa perlu
mengkhawatirkan beberapa tampilan aplikasi mobile. Dengan
menggunakan Ionic, aplikasi dapat dibuat dengan
mengimplementasikan aplikasi hanya sekali, dan dapat dilihat
di berbagai platform seperti iOS dan Android. Ionic
memberikan heterogenitas dalam mengembangkan aplikasi.

Aplikasi Ionic dapat dibangun dengan menggunakan dua

teknologi utama: Angular dan Apache Cordova. Kerangka
kerja Ionic adalah SDK, yaitu kit pengembangan perangkat
lunak. Ini tersedia sebagai alat sumber terbuka. Ionic
menyediakan berbagai fasilitas dan alat fungsional yang
sudah ada di dalamnya untuk mengembangkan aplikasi
mobile untuk platform yang heterogen.

Hal ini telah membuat pekerjaan menjadi lebih mudah

bagi para teknokrat untuk membangun sebuah aplikasi di
mana menjalankan aplikasi tidak tergantung pada
platform.

Kata kunci: Kerangka kerja ikonik, pengembangan

aplikasi seluler, aplikasi asli, aplikasi hibrida, platform

1. PENDAHULUAN
Framework Ionic yang bersifat open source
memungkinkan penggunaan untuk membuat aplikasi untuk
perangkat mobile. Framework ini menawarkan banyak alat
dan fasilitas untuk membangun antarmuka seluler dengan
tampilan dan kesan asli. Framework Ionic membutuhkan
kemasan, yang dikenal sebagai pembungkus asli. Hal ini
memungkinkan aplikasi Ionic dapat berjalan di berbagai
perangkat mobile.

Ionic memungkinkan untuk membuat aplikasi mobile

untuk berbagai platform menggunakan HTML (Hypertext
Markup Language), CSS (Cascading Stylesheets) dan
JavaScript. Ionic adalah Framework Pengembangan
Aplikasi Mobile yang didirikan oleh HTML5. Ionic
menangani tampilan dan juga kesan UI dari aplikasi mobile
Hybrid. (Wasserman, 2010).

Jenis pengembangan aplikasi untuk lingkungan mobile

yang heterogen secara garis besar dapat dibagi menjadi
© 2018, IRJET | Nilai Faktor Dampak: 6.171 | Jurnal Bersertifikat ISO | Halaman
9001:2008 3181
 Jurnal Penelitian Internasional Teknik dan Teknologi (IRJET) e-ISSN: 2395-0056
Volume: 05 Edisi: 05 | Mei-2018 www.irjet.net p-ISSN: 2395-0072
Aplikasi hibrida adalah aplikasi yang menggunakan digunakan.
bahasa web untuk implementasinya. Aplikasi ini
kemudian berjalan dalam wadah asli, yang
memungkinkannya berjalan pada sistem operasi seluler
yang heterogen.

Aplikasi seluler hibrida dibuat dengan cara yang sama

seperti situs web lainnya. Tetapi aplikasi hibrida
menargetkan WebView yang dihosting di dalam wadah
asli, bukan browser seluler. Hal ini memungkinkan
aplikasi untuk menggunakan berbagai layanan seluler
seperti izin untuk menggunakan kemampuan perangkat
keras perangkat seluler. Sebagian besar aplikasi mobile
hybrid memanfaatkan teknologi - Apache Cordova,
sebuah platform yang menyediakan seperangkat
antarmuka pemrograman aplikasi JavaScript yang
konsisten. Platform ini menyediakan beberapa plug-in
untuk mengakses kemampuan perangkat, yang dibangun
dengan kode asli.

Ionic menyediakan semua fungsionalitas yang dapat

ditemukan di SDK lingkungan mobile asli. Aplikasi Ionic
memungkinkan penemu untuk membangun aplikasi
mereka dan menyesuaikannya sesuai dengan platform
yang berbeda seperti untuk iOS, untuk Android, dan
menyebarkannya melalui Cordova. Ini mencakup berbagai
komponen seluler, tema dasar yang dapat diperluas, dan
tipografi. Ionic menggunakan kerangka kerja JS yaitu
Angular, yang menawarkan komponen dan metode khusus
untuk berinteraksi.

1.1 TUJUAN

Ionic adalah kerangka kerja HTML front-end yang

mengelola tampilan dan kesan serta interaksi antarmuka
pengguna dari aplikasi hybrid. Aplikasi Ionic terutama
dibuat dan diperoleh melalui Ionic CLI (utilitas baris
perintah), plugin Cordova digunakan untuk
mengembangkan dan menyebarkan sebagai aplikasi
asli. (Malavolta, 2015)

Aplikasi Ionic memiliki tujuan untuk membangun UI

untuk aplikasi mobile tanpa mengimplementasikan
aplikasi tersebut dalam bahasa asli untuk aplikasi berbasis
platform. Dengan Ionic, sebuah aplikasi dapat dikemas
untuk iOS, Android, Windows Phone dan Firefox OS. Hal
ini akan menghemat banyak waktu karena akan
membutuhkan lebih banyak waktu untuk mengembangkan
aplikasi secara terpisah untuk iOS, Android atau
Windows.

Pengembangan aplikasi Ionic dimulai dengan instalasi,

di mana pengaturan aplikasi yang telah dibuat
sebelumnya akan tersedia. Memulai pengembangan
aplikasi menjadi lebih mudah.

Ionic mendukung pengembangan aplikasi dalam modul-

modul, sehingga pemeliharaan & pembaruan menjadi
lebih mudah.

Ionic menawarkan produksi aplikasi lintas platform untuk

berbagai OS seluler dengan teknologi web yang mudah
© 2018, IRJET | Nilai Faktor Dampak: 6.171 | Jurnal Bersertifikat ISO | Halaman
9001:2008 3182
 Jurnal Penelitian Internasional Teknik dan Teknologi (IRJET)
Volume: 05 Edisi: 05 | Mei-2018 www.irjet.net
2. Fitur-fitur Ionic
Framework Ionic disertai dengan berbagai fitur yang
berharga. Atribut yang paling menonjol adalah:
Ionic CLI
Ini adalah utilitas NodeJs yang memiliki perintah untuk
melakukan operasi seperti mem-boot, mengeksekusi,
menjalankan, mereproduksi aplikasi melalui emulasi
aplikasi ion.
Gbr 2.1 Perintah untuk menginstal ionic
Gbr 2.2 Perintah untuk memulai proyek aplikasi ionic
Ionic View
Platform yang nyaman untuk mentransmisikan, berbagi,
menguji aplikasi pada perangkat seluler asli.
Gbr 2.3 Perintah untuk menjalankan aplikasi ionic
Plugin Cordova
Apache Cordova menawarkan plugin untuk memanfaatkan
antarmuka program aplikasi (API) yang memungkinkan
penggunaan utilitas perangkat asli dengan kode javaScript.
(Camden, 2015)
Gbr 2.4 Perintah untuk mengintegrasikan cordova dalam
aplikasi
Arsitektur MVC
Ionic mempraktikkan arsitektur MVC melalui angular
untuk membentuk aplikasi satu halaman yang dapat
digunakan untuk berbagai perangkat seluler. (Resig, 2015)
Ini memisahkan seluruh aplikasi menjadi tiga bagian, yaitu
Model, View, dan Controller.
Model bertanggung jawab untuk memelihara data.
View bertanggung jawab untuk menampilkan data kepada
pengguna, yaitu bagian HTML dan CSS.
Controller mengontrol interaksi antara Model dan View.
© 2018, IRJET | Nilai Faktor Dampak: 6.171 | Jurnal Bersertifikat ISO
9001:2008
e-ISSN: 2395-0056
p-ISSN: 2395-0072
Gambar 2.5 Arsitektur MVC
Komponen CSS
Ionic memudahkan untuk menghadirkan tampilan dan
kesan asli dengan dukungan komponen css. Komponen
yang mengusulkan elemen yang dibutuhkan pada aplikasi
perangkat seluler. Penataan komponen memudahkan
memodifikasi gaya default.
Gbr 2.6 Komponen CSS untuk bilah judul
Komponen JavaScript
Komponen JavaScript menambahkan ekstensi ke
komponen UI dengan layanan javaScript untuk meng-case
semua elemen di berbagai perangkat seluler, yang tidak
dapat dicapai dengan menggunakan HTML dan CSS.
Tema Ionik
Rangkaian gaya yang ditentukan yang digunakan dalam
mendekorasi aplikasi adalah tema. Ionic menawarkan tema
ringan sebagai tema default. Tema dapat disesuaikan
dengan kebutuhan aplikasi.
3. Eksekusi Aplikasi Ionic
Aplikasi Ionic dimulai dengan kerangka kerja yang telah
dibuat sebelumnya saat diinstal. Penyiapan proyek terdiri
dari folder-folder seperti-
node_modules untuk ketergantungan nodejs, platform
untuk berbagai OS seluler, plugin untuk API, sumber daya
untuk aset splash screen, src, dan file untuk menjalankan
aplikasi.
| Halaman
3182
 Jurnal Penelitian Internasional Teknik dan Teknologi (IRJET) e-ISSN: 2395-0056
Volume: 05 Edisi: 05 | Mei-2018 www.irjet.net p-ISSN: 2395-0072
DOM HTML. (Graham, 1995)

Gambar 3.1 Struktur Folder aplikasi

ionik Pengaturan kerangka kerja ionik dapat

digambarkan sebagai-

3.1 folder src

Folder ini terdiri dari kode sumber untuk aplikasi. Ini

akan menjadi kode implementasi untuk beberapa OS
mobile. Elemen-elemen untuk masing-masing
komponen didefinisikan dalam folder ini.

Gbr 3.2 Tampilan folder src yang diperluas

Dalam folder src, komponen aplikasi adalah komponen

utama default. Folder pages terdiri dari semua bagian dari
template. Folder tema berisi file-file gaya aplikasi. Folder
aset menyimpan persediaan seperti gambar dan ikon untuk
aplikasi.

3.1.1 index.html

Ini adalah berkas HTML yang dijalankan ketika proyek

dimuat. File ini akan berjalan secara default untuk memuat
© 2018, IRJET | Nilai Faktor Dampak: 6.171 | Jurnal Bersertifikat ISO | Halaman
9001:2008 3183
 Jurnal Penelitian Internasional Teknik dan Teknologi (IRJET) e-ISSN: 2395-0056
Volume: 05 Edisi: 05 | Mei-2018 www.irjet.net p-ISSN: 2395-0072

3.1.2 main.ts

Ini adalah file typescript yang merupakan titik masuk

aplikasi. File ini mem-bootstrap aplikasi.

3.2 File konfigurasi

Dua file config.xml dan package.json adalah yang paling

penting.

config.xml

Ini digunakan oleh Cordova, yang mencakup

pengaturan yang relevan untuk membangun aplikasi
untuk platform iOS dan Android.

package.json

Ketergantungan paket-paket npm dinyatakan dalam

berkas ini.

Gambar 3.3 Ketergantungan dalam

package.json

3.2 folder www

Folder root web yang berisi kode yang dikompilasi dari

aplikasi ionic untuk berbagai platform. Di dalam folder
www, subfolder build berisi kode yang dikompilasi.

Gbr 3.4 Tampilan folder www yang diperluas

3.3 Folder sumber daya

Folder sumber daya berisi gambar dan ikon yang

digunakan untuk aplikasi splash screen saat membuat
untuk platform yang berbeda seperti iOS dan Android.

© 2018, IRJET | Nilai Faktor Dampak: 6.171 | Jurnal Bersertifikat ISO | Halaman
9001:2008 3184
 Jurnal Penelitian Internasional Teknik dan Teknologi (IRJET) e-ISSN: 2395-0056
Volume: 05 Edisi: 05 | Mei-2018 www.irjet.net p-ISSN: 2395-0072
Gbr 3.7 Berbagai jenis Templat

Gbr 3.5 Tampilan folder sumber daya yang diperluas

3.4 folder node_modules

Ini adalah folder penyimpanan di mana semua

dependensi NPM yang terinstal dapat ditemukan. Ini
berarti semua dependensi yang didefinisikan dalam
berkas package.json akan diunduh dan disimpan di sini
(Tilkov, 2010)

Gbr 3.6 Tampilan yang diperluas dari folder node_modules

Templat di aplikasi Ionic

Framework Ionic menyediakan tiga jenis template utama

yaitu: Templat kosong, Templat menu samping, Templat
tab.

Blank Template memiliki tipe proyek awal yang

kosong Tab Template memiliki antarmuka tab

yang sederhana.

Templat menu samping memiliki navigasi di area konten,

yaitu menu samping.

© 2018, IRJET | Nilai Faktor Dampak: 6.171 | Jurnal Bersertifikat ISO | Halaman
9001:2008 3185
 Jurnal Penelitian Internasional Teknik dan Teknologi (IRJET) e-ISSN: 2395-0056
Volume: 05 Edisi: 05 | Mei-2018 www.irjet.net p-ISSN: 2395-0072

Tema Ionik

Tema ikonik adalah sekumpulan gaya untuk aplikasi di

berbagai platform. Framework Ionic bekerja di atas
teknologi sass. Dengan ini, kustomisasi aplikasi dapat
dilakukan. (Prabhu, 2015)

Gbr 3.7 Menyesuaikan tema warna

Komponen Ionik

Framework Ionic memiliki komponen yang telah

ditentukan yang merupakan konstituen dari antarmuka
lintas platform dari sebuah aplikasi mobile.

Komponen-komponen ini terdiri dari dua jenis:

Komponen Template dan Komponen Dinamis.

Komponen Templat

Komponen yang hanya terdiri dari HTML dan CSS

disebut sebagai komponen template. Juga dikenal sebagai
komponen CSS.

Contoh:
<kartu-ion>
<ion-card-header>
Judul Saya
</ion-card-header>
<konten-kartu-ion>
Konten Saya Ada di
Sini
</ion-card-content>
</ion-card>

Komponen Dinamis

Komponen yang juga mencakup fungsionalitas dinamis

untuk membuat aplikasi menjadi interaktif adalah
komponen dinamis.

Contoh:
<tombol ion-tombol (klik)="buka()">
Buka
</button

Di sini, di ionic, elemen tombol akan diwakili oleh

tombol ion untuk mendefinisikan tombol ion.

© 2018, IRJET | Nilai Faktor Dampak: 6.171 | Jurnal Bersertifikat ISO | Halaman
9001:2008 3186
 Jurnal Penelitian Internasional Teknik dan Teknologi (IRJET) e-ISSN: 2395-0056
Volume: 05 Edisi: 05 | Mei-2018 www.irjet.net p-ISSN: 2395-0072

4. KESIMPULAN
Ionic adalah sebuah backdrop support yang beroperasi di
atas Cordova untuk membangun aplikasi hybrid. Hal ini
memungkinkan untuk mengembangkan antarmuka aplikasi
yang sebanding dengan halaman web, yaitu menggunakan
HTML, CSS, JavaScript. Dan aplikasi ini berjalan di dalam
WebView aplikasi asli. Keutamaan dari kerangka kerja
ionic adalah - kerangka kerja ini merupakan kerangka kerja
open source dimana kode hanya perlu ditulis satu kali dan
dieksekusi di berbagai perangkat mobile (Wasserman,
2010). Penggunaan hanya satu bahasa pemrograman
memungkinkan aplikasi pada semua OS mobile yang
berbeda. Ketersediaan berbagai plugin untuk menggunakan
perangkat keras dan layanan tambahan lainnya untuk
aplikasi mobile. Aplikasi Ionic memiliki grafis yang
dibangun dengan baik. Ini adalah kerangka kerja yang
disukai pengembang di mana teknologi sederhana
digunakan untuk membangun seluruh antarmuka aplikasi.

UCAPAN TERIMA KASIH

Saya berhutang budi secara khusus kepada Prof. Ashutosh
Pandey, Departemen Ilmu & Teknik Komputer, Institut
Teknologi ABES, Ghaziabad atas dukungan dan
bimbingannya yang terus-menerus selama saya bekerja.
Ketulusan, ketelitian, dan ketekunannya telah menjadi
sumber inspirasi bagi saya. Saya juga tidak ingin
melewatkan kesempatan untuk mengakui kontribusi
semua anggota fakultas di departemen ini atas bantuan
dan kerja sama yang baik selama tugas ini. Terakhir,
saya berterima kasih kepada teman-teman saya atas
kontribusi mereka selama tugas ini.

REFERENSI
[1] Camden, R. K. (2015). Apache Cordova dalam Aksi.
Greenwich: Manning Publications Co.

[2] Graham, I. S. (1995). Buku Sumber HTML. New

York: John Wiley & Sons, Inc.

[3] Malavolta, I. (2015). Aplikasi seluler hibrida di

Google Play Store: investigasi eksplorasi.
Florence, Italia: MOBILESoft '15.

[4] Prabhu, A. (2015). Pengantar Preprocessors.

Mumbai: Apress, Berkeley, CA.

[5] Resig, J. (2015). AngularJS dan Pengujian. NJ:

Apress, Berkeley, CA.

[6] Tilkov, S. (2010). Node.js: Menggunakan JavaScript

untuk Membangun Program Jaringan Berkinerja
Tinggi. IEEE Internet Computing, 80 - 83.

[7] Wasserman, A. I. (2010). Isu-isu rekayasa

perangkat lunak untuk pengembangan aplikasi
mobile. New Mexico: FoSER '10.

© 2018, IRJET | Nilai Faktor Dampak: 6.171 | Jurnal Bersertifikat ISO | Halaman
9001:2008 3187