By Muh
Kamaludin Fadhil | 14 Nov 2018
Aplikasi ionik dibangun dengan Cordova.
Cordova adalah alat pengemasan html / css / js ke dalam aplikasi yang dapat
berjalan di perangkat seluler dan desktop dan menyediakan arsitektur plugin
untuk mengakses fungsi asli di luar jangkauan JS yang dijalankan dari browser
web. Dengan demikian, aplikasi Ionic memiliki struktur file Cordova.
Direktori platform berisi proyek iOS
dan Android Anda. Secara umum, Anda tidak perlu bekerja di direktori ini
kecuali Anda melakukan peretasan khusus khusus atau mengirim aplikasi ke
produksi.
Hooks adalah tindakan khusus yang harus
diambil saat aplikasi Anda bergerak melalui proses pengembangan Cordova. Ini
mungkin berguna untuk proyek yang lebih besar yang memerlukan proses otomatis
untuk menjalankan dan modifikasi kode sumber tetapi biasanya tidak akan
digunakan.
‘Gabungkan’ adalah mengganti file untuk
platform tertentu. Katakanlah Anda telah menggabungkan / ios / someFile.js dan
www / someFile.js. Ketika menyebarkan ke iOS, someFile akan digantikan oleh
versi dalam gabungan. Ini bisa menjadi cara yang efektif untuk membuat
modifikasi khusus platform ke aplikasi Anda, tetapi metode lain sering lebih
disukai. Lihat Pengembangan Platform Silang untuk lebih lanjut tentang topik
ini.
Plugin adalah tempat Cordova menyimpan
plugin yang Anda tambahkan ke proyek Anda. Plugin ditambahkan oleh perintah:
ionic cordova plugin add {plugin}
Di mana {plugin} adalah ID plugin atau URL github.
SCSS adalah untuk file SASS aplikasi Anda. Menggunakan SASS bersifat opsional dalam Ionic, tetapi Ionic sendiri dibangun dengan SCSS, dan ada banyak gaya default yang dapat Anda ubah dengan cepat dan bersih menyesuaikan Ionic tanpa menambahkan segudang CSS yang menimpa.
WWW adalah tempat aplikasi Anda dikembangkan dan di mana Anda akan menghabiskan sebagian besar waktu Anda saat membuat aplikasi Ionic.
Bagaimana Anda harus mengatur struktur file aplikasi Anda masih bisa diperdebatkan, dan dengan latihan, Anda akan menemukan struktur yang paling sesuai untuk Anda. Secara default, Ionic mengatur aplikasi Anda ke serangkaian direktori: css, img, js, lib, dan templates.
CSS berisi file CSS spesifik aplikasi Anda, atau file output yang dihasilkan SCSS Anda, sebaiknya Anda menggunakannya, bersama dengan file CSS lainnya yang ingin Anda tambahkan. CSS ditambahkan ke proyek Anda dengan tag <link> di index.html Anda
IMG cukup jelas; letakkan gambar Anda di sana.
JS menjadi lebih rumit. Secara default, aplikasi awal kami dipecah menjadi app.js, yang berisi metode run dan konfigurasi Angular Anda. Ini adalah tempat Anda menentukan perutean aplikasi dan variabel lingkungan, seperti jenis gaya tab yang akan digunakan, atau apakah Anda harus menggunakan header gaya iOS di Android.
controllers.js berisi pengendali Angular Anda untuk menyatakan yang membutuhkannya. services.js tidak selalu termasuk dalam permulaan, tetapi berisi layanan Angular kustom yang mungkin digunakan aplikasi Anda, seperti salah satu yang memanggil ke API pihak ke-3 untuk mendapatkan informasi yang digunakan aplikasi Anda.
directives.js tidak selalu termasuk dalam permulaan, tetapi ini berisi arahan Sudut khusus yang dapat digunakan aplikasi Anda. Tidak ada keajaiban untuk file-file ini dan nama-nama mereka; Anda bebas untuk mengubah nama dan struktur file ini sesuai keinginan Anda. File JS harus ditambahkan ke index.html proyek Anda, dan modul Angular harus ditambahkan ke definisi aplikasi Angular Anda.
LIB adalah tempat Ionic dan perpustakaan lain yang Anda gunakan dapat ditempatkan. Ini mengikuti pemformatan Bower, dan libs baru dapat ditambahkan dan diperbarui menggunakan Bower. Jika Anda tidak menggunakan Bower, Anda dapat mengubah struktur direktori ini sesuai keinginan Anda atau bahkan menghapusnya sepenuhnya, selama Anda menyalin file Ionic ke lokasi baru dalam proyek Anda.
TEMPLATE adalah tempat file tampilan Anda. Proyek Anda memang memiliki file index.html utama di direktori WWW, tetapi aplikasi Anda mungkin berisi banyak tampilan template yang ditambahkan secara dinamis. Tidak seperti file CSS dan JS Anda, file TEMPLATE tidak perlu disebutkan dalam file index.html Anda. Anda mendefinisikannya dalam definisi $ state Anda, dan Router UI dan Ionic akan mengurus sisanya, termasuk pre-loading file template. File-file ini adalah template Angular dan diuraikan sebelum ditambahkan ke DOM.
Saat Anda mengembangkan aplikasi, Anda mungkin merasa bahwa struktur ini tidak sesuai lagi. Mungkin masuk akal untuk memisahkan aplikasi Anda ke dalam potongan logis. Mungkin Anda memiliki daftar produk, penelusuran produk, dan bagian pengguna aplikasi Anda. Mungkin ada baiknya untuk memecah aplikasi Anda ke folder untuk setiap bagian, dan masing-masing akan memiliki file kontroler dan file templat sendiri. Ini disarankan hanya untuk pengembang yang merasa nyaman membuat perubahan organisasi ini dan memahami bahwa mereka akan menyimpang dari sebagian besar contoh aplikasi dasar ke depannya. Panduan hebat untuk diikuti adalah dari Struktur Aplikasi Angular John Papa.
Aplikasi Ionic Anda, pada intinya, aplikasi Sudut, jadi ketika datang untuk mencari tahu bagaimana untuk mencapai interaksi pengguna dan mengkomunikasikan data di seluruh aplikasi Anda dan sumber eksternal, banyak dari aturan yang sama berlaku. Angular memiliki arsitektur MVVM tempat pengontrol Anda menyuntikkan objek lingkup $. Properti objek ini tersedia untuk template Anda, dan template Anda akan diperbarui secara otomatis saat Anda mengubah nilai properti ruang lingkup $. Dengan pengikatan data 2 arah, kolom masukan juga dapat diikat, dan pembaruan untuk masukan secara otomatis tersedia ke objek lingkup $ pengontrol Anda.
Pengontrol dapat dinonaktifkan atau dimusnahkan saat Anda menavigasi keluar dari laman tertentu, dan satu pengontrol tidak memiliki akses langsung ke pengontrol tampilan sebelumnya. Data dapat dibagi antara halaman dalam beberapa cara, namun. Cara yang paling tepat biasanya melalui penerapan model Angular, layanan. Layanan adalah lajang, dan varitas serta status lokalnya akan tetap ada saat Anda menavigasi dari laman ke laman. Layanan dapat disuntikkan ke aplikasi Anda dengan cara yang sama dengan ruang lingkup $. Suntikan ketergantungan ini adalah konsep dasar untuk Angular dan membangun aplikasi yang besar dan kompleks. Perhatikan bahwa layanan itu sendiri dapat menyuntikkan layanan lain. Dengan cara ini Anda dapat dengan mudah mengabstraksi proses manajemen data yang besar dan rumit. Ionic menyediakan banyak layanan seperti $ loading, $ actionSheet, dan berbagai layanan delegasi. Angular sendiri memiliki beberapa layanan. Mungkin layanan yang paling umum adalah $ http untuk membuat panggilan ajax ke layanan jarak jauh.
Arahan adalah cara untuk memperluas kemampuan HTML. Saat Anda melihat hal-hal seperti <ion-view> atau <ion-tabs>, elemen HTML khusus ini adalah arahan. Membuat arahan khusus dapat memakan waktu cukup lama untuk dikuasai, tetapi digunakan dengan benar, mereka dapat sangat mengurangi kerumitan yang tidak perlu dan kode yang digandakan.
Sumber:
https://ionicframework.com/
Komentar
Posting Komentar