Baca juga : Angular vs React 7: 7 Fitur Utama Dibandingkan

Ionic adalah framework aplikasi mobile populer yang membantu Anda membangun hybrid mobile apps dengan cepat, menggunakan HTML, CSS, dan JavaScript. Pada kesempatan kali ini, kita akan belajar bagaimana untuk mengatur dan membangun aplikasi seluler Anda sendiri dengan ionic dengan menciptakan aplikasi mobile berfungsi penuh bersama-sama. Kita mulai dengan mengenal ionic dan belajar bagaimana untuk memulai dengan ooling.

Dalam tutorial ini, kita membahas:

• apa itu ionic dan berbagai komponen
• Mengapa Anda memilih untuk menggunakan ionic
• cara set up mesin Anda untuk membangun aplikasi ionic hybrid
• alur kerja pengembangan, dari memulai hingga deploy apps

1. Ionic Stack: Cordova, Angular, Ionic

Ionic adalah beberapa teknologi yang rapi dibundel dan dikelola bersama-sama. Saya suka berpikir tentang ionic sebagai stack dari beberapa framework. Interaksi antara teknologi ini adalah apa yang akhirnya menciptakan app yang menghasilkan dan menyediakan pengalaman pengembang dan pengguna yang baik.

Cordova: Hybrid App Framework

Sebagai pondasi, Ionic menggunakan Cordova sebagai framework aplikasi hybrid. Pada dasarnya, hal ini memungkinkan aplikasi web untuk menjadi bundled dalam aplikasi native yang dapat diinstal pada perangkat. Itu komprehensif webview, yang merupakan contoh terisolasi browser yang menjalankan aplikasi web Anda.

Cordova ini juga menyediakan sebuah API yang dapat Anda gunakan untuk berkomunikasi dengan perangkat itu sendiri, misalnya, untuk meminta Koordinat GPS atau mengakses kamera. Banyak dari fitur hardware tambahan ini diaktifkan melalui sistem plugin Cordova, sehingga Anda hanya perlu menginstal dan menggunakan fitur yang Anda butuhkan. Saya akan memperkenalkan kelebihan cordova  kepada anda dalam tutorial nanti.

Angular: Framework Web aplikasi

Angular adalah framework JavaScript terkenal untuk membangun sebuah aplikasi web, dan ionic dibangun di atasnya. Angular menyediakan logika aplikasi web yang digunakan untuk membangun aplikasi yang sebenarnya.

Jika Anda sudah terbiasa dengan hal itu, maka Anda akan dapat dengan cepat mengambil fitur ionic. Jika Anda baru ke Angular, Anda dapat terus membaca dan Anda akan mulai untuk mengambil beberapa angular dasar.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-7735152013281607"
data-ad-slot="6963045784"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Saya  tidak akan menjelaskan tentang angular secara detail, jadi saya sarankan mengambil beberapa waktu untuk mempelajari dasar-dasar dengan membaca dokumentasi angular.

Baca juga : Angular vs React 7: 7 Fitur Utama Dibandingkan

Ionic User Interface Framework

fitur utama yang dijual ionic adalah seperangkat komponen bersih antarmuka pengguna yang dirancang untuk mobile. Ketika Anda membangun aplikasi native, ada SDK native yang menyediakan Anda dengan komponen interface, seperti tab dan dialog.

Ionic menyediakan satu set komponen interface yang mirip untuk digunakan dalam aplikasi hybrid. Ionic suka mengklaim itu SDK yang hilnag untuk hybrid apps, dan ini mengisi peran yang cukup baik. Selain itu, ionic memiliki sejumlah fitur signifikan lainnya yang membuatnya menjadi pilihan yang sangat menarik.

2. Mengapa Ionic

Ionic lebih dari sekedar kumpulan user interface components, tapi juga satu set developer tools dan ekosistem untuk dengan cepat membangun aplikasi mobile hybrid. Saya ingin untuk menerangkan mengapa hybrid apps cocok untuk web developer, rincian tentang platform ionic dan tooling, dan kapan ionic tidak cocok.

Mengapa Hybrid Versus Native atau Mobile Web

Ada perdebatan lama tentang kualitas dari pendekatan yang berbeda untuk membangun aplikasi.   
Hybrid apps adalah sweet spot dalam memberikan pengembang web dengan kemampuan untuk menggunakan keterampilan yang mereka sudah tahu untuk membangun aplikasi seluler yang dapat terlihat dan terasa seperti aplikasi native.

Tooling keren & Ionic Platform

Sangat sedikit framework mobile yang tersedia memiliki tooling yang mendekati kualitas ionic 's tooling. Kita akan melihat lebih dekat tooling utama yang tersedia di akhir tutorial, tetapi saya ingin membahas beberapa fitur yang Anda mungkin akan berguna dari waktu ke waktu.

Ionic CLI

Ionic CLI  di tingkat pertama dan menyediakan banyak fitur yang membantu Anda memulai sebuah proyek, melihat pratinjau itu, dan pada akhirnya mampu membangun itu.

Ionic Platform

Ionic menyediakan sejumlah fitur, beberapa gratis dan lainnya bayar, yang berguna untuk pengembangan profesional, seperti app analytics, push notifikasi, dan deployment tool.

Ionic Market

Ada beberapa Pengaya yang gratis dan berbayar untuk ionic yang dapat dengan mudah diintegrasikan ke dalam aplikasi Anda. Ada tema, komponen unik, dan plugin lainnya.

keterbatasan Ionic

Ionic tidak cocok untuk setiap aplikasi mobile. Pertimbangkan kasus berikut untuk memutuskan apakah ionic cocok untuk proyek Anda.

• Ionic tidak mendukung setiap platform. iOS dan Android sepenuhnya didukung, tapi ionic dapat bekerja dengan lainnya untuk beberapa derajat. Ini juga bekerja terbaik pada versi yang lebih modern. Mendukung perangkat lama atau sistem operasi lama dapat mengakibatkan kinerja yang buruk, biasanya karena implementasi browser yang jelek.
• Ionic tidak menyediakan aplikasi yang benar-benar native. Jika aplikasi Anda memerlukan integrasi yang besar dengan platform native, seperti grafis intensif, Ionic tidak mungkin dapat memberikan kekuatan penuh yang diperlukan. Hal ini karena kebutuhan untuk interface hardware dari aplikasi web ke Cordova, yang dapat menambah beberapa lag.

Dengan kata lain, jika Anda tidak membangun sebuah aplikasi untuk perangkat lama dan tidak memiliki kebutuhan untuk banyak program pada tingkat hardware, ionic lebih dari mampu memberikan kualitas app experience bagi pengguna Anda.

3. instalasi ionic dan Cordova

Ionic dilengkapi dengan CLI (Command Line Interface) yang menarik untuk membantu memulai, membangun dan deploy aplikasi Anda. Anda akan menggunaka banyak sekali CLI selama pengembangan. Ionic juga mengandalkan Cordova, sehingga Anda akan menggunakannya secara tidak langsung.

Anda harus memiliki Node.js yang terinstall untuk memulai. Jika belun ada, luangkan waktu sejenak untuk menginstalnya pada sistem Anda. Saya menggunakan Node.js 5.6 untuk tutorial ini dan saya sarankan pada versi stabil terbaru.

Instalasi ionic dan Cordova sederhana seperti menginstal dua global node modul. Jika Anda telah melakukannya sebelum ini, maka ini harus melihat cukup familiar. Buka terminal dan jalankan perintah berikut:

1:  npm install -g ionic@1.7.14 cordova@6.0.0  

Ini mungkin akan memerlukan waktu beberapa saat, tetapi Anda harus mendapatkan pesan sukses yang mengatakan mereka berdua sudah  diinstal. Anda dapat memverifikasi ini dengan menjalankan perintah berikut ini untuk melihat output nomor versi.

1:  ionic -v && cordova -v  

denga perintah tersebut akan menampilkan versi ionic dan Cordova. Untuk tujuan dari tutorial ini, saya menggunakan versi 1.7.14 ionic dan versi 6.0.0 dari Cordova.

Ada beberapa fitur dalam CLI ionic dan Anda dapat selalu mendapatkan referensi cepat dengan menjalankan ionic help. Anda juga dapat melihat dokumentasi online untuk bantuan lebih lanjut jika diperlukan.

Instalasi lain

Ionic tidak mem bundel semua tooling yang diperlukan untuk membangun sebuah aplikasi, hal itu bergantung pada beberapa tambahan SDK dan perangkat lunak yang disediakan oleh Apple dan/atau Google. Hal ini baik untuk membaca dan mengikuti panduan platform yang disediakan oleh Cordova dikonfigurasi untuk setiap platform yang Anda ingin bekerja dengan itu.

• Android Platform panduan
• iOS Platform panduan

Anda dapat melakukan ini di lain waktu, tetapi Anda akan perlu untuk mengatur platform tooling sebelum dapat Anda pratinjau atau emulasi aplikasi pada simulator atau perangkat.

4. ionic Development Flow

Ada serangkaian langkah umum yang akan Anda lalui saat mengembangkan aplikasi Ionic. Langkah-langkah ini memiliki perintah CLI yang sesuai untuk membantu Anda. Mari kita lihat primary commands yang mewakili typical development untuk membangun aplikasi ionic.

Langkah 1: Memulai sebuah proyek

Dengan asumsi Anda sudah punya ide dasar apa yang Anda rencankan untuk dibuat, langkah pertama adalah untuk menciptakan sebuah proyek baru. Proyek ionic berdasarkan Cordova dan memerlukan beberapa scaffolding untuk Cordova kemudian untuk memahami proyek Anda. Ionic memiliki beberapa prebuilt template yang dapat Anda gunakan untuk menghasilkan sebuah proyek starter, tetapi Anda juga dapat menggunakan proyek Anda sendiri.

Untuk memulai sebuah proyek, jalankan perintah ionic start sample. Itu menghasilkan folder baru dalam direktori saat ini didasarkan pada nama yang Anda berikan (yaitu sample). Sementara menjalankan perintah, ini akan mendownload file dari GitHub yang diperlukan untuk proyek, dan menginisialisasi proyek untuk Anda. Menggunakan default proyek ini, yang memiliki aplikasi dasar dengan interface tab dasar.

Menjalankan cd sample untuk menavigasi ke direktori baru. Ketika Anda memeriksa direktori, Anda akan melihat beberapa file dan direktori. Jangan khawatir dengan file tunggal setiap saat. Berikut adalah beberapa hal yang Anda harus bekerja dengan pada awalnya.

• cordova.xml: File ini berisi konfigurasi untuk Cordova.
• Ionic.project: File ini berisi konfigurasi untuk ionic.
• /plugins: Direktori ini mengontrol Cordova plugin yang terinstall. Awalnya, ini akan dimuat dengan beberapa plugin default preinstalls ionic untuk Anda.
• /platforms: Direktori ini mengontrol assets untuk setiap platform yang dikonfigurasi untuk aplikasi Anda ke target, seperti Android dan IOS. Ionic dapat menginstal sebuah platform untuk Anda secara default.
• /scss: Direktori ini berisi source files untuk style SASS untuk aplikasi. Anda dapat menyesuaikannya karena Anda akan mengetahuinya nanti.
• /www: Direktori ini mengontrol web aplikasi file yang dimuat oleh Cordova. Semua file JavaScript, HTML, dan CSS harus hidup dalam direktori ini.

Untuk tutorial ini, kita akan bekerja dengan proyek Anda hanya dihasilkan dan melihat bagaimana mengembangkan dan pratinjau app.

Langkah 2: Mengembangkan dan Preview App

Anda telah memulai sebuah proyek, sekarang Anda ingin mulai mengembangkan. Selama pengembangan awal, Anda mungkin akan melihat pratinjau pekerjaan Anda dalam browser. Setelah semua, sebuah aplikasi ionic adalah benar-benar hanya aplikasi web. Ionic dilengkapi dengan local development server yang membangun dan menyajikan aplikasi Anda.

Untuk memulai server development, jalankan ionic serve. Segera setelah ini berjalan, buka preview app di browser default Anda. Pada titik ini, Anda dapat menggunakan tool developer browser untuk memeriksa aplikasi, untuk ,melihat kesalahan, dan tugas lain yang Anda biasanya lakukan ketika membangun aplikasi web.

Server terus berjalan di latar belakang dan melihat perubahan file proyek. Ketika mendeteksi bahwa file Anda sudah diedit dan disimpan file, secara otomatis akan mereload browser untuk Anda.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-7735152013281607"
data-ad-slot="8335837205"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Saya sarankan menggunakan Chrome sebagai browser karena developer toolingnya luar biasa. Salah satu fitur yang sangat berguna adalah kemampuan untuk meniru dimensi perangkat, yang membuatnya mudah untuk melihat apa yang tampak seperti aplikasi di perangkat tertentu. Itu bukn emulator asli yang mengeksekusi aplikasi seperti perangkat yang asli, hanya meniru dimensi app.

Langkah 3: Menambahkan sebuah Platform

Cordova mendukung banyak jenis perangkat mobile, yang disebut platform. Anda harus mendaftar pada platform yang Anda ingin targetkan dengan aplikasi Anda dan menginstal project files yang tepat. Untungnya, ini sebagian besar dikelola melalui CLI ionic. Ionic sepenuhnya mendukung iOS dan Android platform.

Untuk menambahkan sebuah platform, jalankan ionic platfrom add android. Mengganti android dengan ios untuk menambahkan iOS sebaliknya. Setelah ditambahkan, Anda akan melihat folder baru di direktori platform proyek Anda. Folder ini berisi file tertentu platform. Secara umum, Anda perlu untuk menghindari membuat terlalu banyak perubahan ke file dalam direktori ini.
Jika Anda memiliki masalah, Anda dapat menghapus platform dan menambahkannya lagi. Untuk menghapus sebuah platform, ionic platform remove android.

Langkah 4: Meniru App

Di beberapa titik, Anda akan ingin untuk mulai melihat pratinjau aplikasi Anda dalam emulator asli. Emulator yang pada dasarnya versi perangkat lunak perangkat asli. Hal ini benar-benar berguna dan cepat untuk menguji bagaimana aplikasi seharusnya berjalan pada perangkat asli. Sadarilah bahwa emulator tidak memiliki semua fitur fisik perangkat karena mereka hanya perangkat lunak yang meniru perangkat.

Beberapa kode Anda mungkin tidak bekerja seperti yang diharapkan, misalnya, jika Anda mengharapkan untuk menggunakan daftar kontak perangkat. Biasanya, hanya fitur yang terintegrasi dengan hardware mungkin tidak bekerja seperti yang diharapkan, tetapi untuk kebanyakan hal ini harusnya bekerja dengan baik.

Mengatur emulator dapat menjadi sedikit tugas, tergantung pada jenis komputer apa yang Anda gunakan dan yang Anda perlukan untuk diuji. Meniru iPhone hanya dapat dilakukan pada komputer yang menjalankan OS X, tetapi Android dapat ditiru di setiap sistem operasi apapun. Untuk mengatur emulator, merujuk pada platform panduan saya terhubung ke sebelumnya.

Setelah semua selesai, Anda bisa meniru menggunakan ionic emulate android -c -l Seperti sebelumnya, menggantikan android dengan ios jika Anda menargetkan iOS. Ini membangun, menginstal, dan meluncurkan app di simulator. Ini dapat menunggu beberapa saat, sehingga Anda mungkin ingin menggunakan beberapa fitur berguna live reload seperti yang Anda lakukan sebelumnya dalam browser.

Anda dapat menggunakan flag opsional -l untuk live reload app di simulator (tanpa perlu untuk membangun kembali dan instal ulang). Ini bagus selama Anda tidak mengubah apapun yang berhubungan dengan bagaimana app dibangun (seperti pengaturan Cordova). Anda juga dapat menggunakan flag opsional -c memiliki pesan konsol yang diteruskan ke terminal log. Saya menggunakannya hampir setiap waktu.

Langkah 5: Deploy aplikasi ke perangkat

Cara terbaik untuk melihat pratinjau app Anda akan benar-benar menginstal dan menjalankannya pada perangkat. Hal ini memerlukan bahwa Anda telah menyiapkan platform dan memiliki perangkat yang terhubung ke komputer Anda. Melakukan hal ini memerlukan beberapa konfigurasi yang bervariasi berdasarkan jenis perangkat yang Anda memiliki. Anda dapat merujuk ke platform panduan di atas dapat menghubungkan perangkat Anda.

Setelah Anda memiliki perangkat yang terhubung, cukup sederhana untuk menjalankan aplikasi di atasnya dari command line. Gunakan ionic run android -c -l dan ionic membangun, deploy, dan meluncurkan app Anda. Sekali lagi, Anda dapat menggantikan ios untuk android. Seperti perintah emulate, Anda dapat menggunakan flag -l dan - c opsional untuk mengaktifkan live reload dan console logging ke terminal.

Setelah app pada perangkat Anda, Anda dapat memutuskan itu dan aplikasi akan tetap diinstal pada perangkat. Hal ini bermanfaat jika Anda ingin menggunakan aplikasi selama jangka waktu untuk menguji bagaimana berjalan atau hanya memamerkan kepada orang lain.

5. Bagaimana tentang Ionic 2

Saya sering mendapatkan pertanyaan tentang ionic 2 dan apakah orang-orang harus menggunakannya. Pada awalnya, tidak ada jawaban sederhana namun. Saya telah bekerja dengan itu dan membangun beberapa prototipe, dan saya tahu beberapa orang yang telah membangun aplikasi produksi dengan itu, tapi itu belum siap.

Kabar baiknya adalah bahwa belajar ionic 1 hari ini berarti bahwa belajar ionic 2 akan cukup mudah. Sebagian besar hal-hal khusus ionic yang akan Anda pelajari dalam tutorial kali ini tetap cukup konsisten setiap versi. Perubahan terbesar akan terjadi karena ionic 2 dibangun dengan Angular 2.

Ringkasan

Dalam tutorial ini, kita membahas banyak tentang ionic.

• Anda belajar tentang kekuatan dan beberapa kelemahan ionic.
• Anda mengatur komputer Anda untuk membangun aplikasi ionic.
• Anda menciptakan proyek pertama Anda dan melihat pratinjau itu dalam browser.
• Anda mengatur sebuah emulator dan perangkat untuk melihat pratinjau app Anda yang terhubung.

Dalam bagian selanjutnya dari tutorial ini, Anda akan mulai untuk membangun aplikasi yang nyata, fungsional yang menggunakan teknik yang dijelaskan dalam tutorial ini.