Pengenalan Ionic - Getting Started


Bismillah, dalam tulisan kali ini saya akan mencoba membahas secara singkat apa itu ionic framework, kenapa memilih menggunakan ionic framework dalam pembuatan aplikasi baik itu mobile, web, ataupun desktop, keahlian yang harus disiapkan sebelum belajar ionic dan software apa saja yang dibutuhkan dalam proses develop nantinya.

Apa itu Ionic Framework ?

Ionic framework adalah salah satu Framework atau Software Development Kit (SDK) untuk membuat aplikasi mobile baik itu Android, IOS maupun Windows. Ionic juga bisa digunakan untuk membuat aplikasi Progressive Web Application (PWA).

website : http://www.ionicframework.com

Kenapa memilih menggunakan Ionic Framework ?

Sekarang ini ada banyak sekali cara untuk membuat aplikasi mobile, secara umum dibagi menjadi Native App, Hybrid App dan Web App.
  1. Native App
    Native app itu sendiri memiliki keuntungan dari segi kecepatan aplikasinya, kita bisa leluasa mengakses hardware seperti kamera, gps dll namun beberapa orang yang ingin membangun aplikasi multi platform seperti satu aplikasi yang bisa jalan di Android dan IOS mereka harus mengetik code dua kali (android menggunakan Java dan ios menggunakan Swift). Oleh karena itu untuk membangun aplikasi native yang bisa multi platform banyak developer mulai melirik multi platform sdk seperti react native (facebook) ataupun Xamarin (microsoft). Dengan menggunakan sdk tersebut memungkinkan satu kali code di compile ke android ataupun ios sehingga lebih cepat proses developnya.
  2. Hybrid App
    Jika anda memiliki pengetahuan dasar html dan css (membuat halaman web) maka akan mudah membuat aplikasi mobile dengan jenis ini karena untuk jenis aplikasi ini kita bisa memanfaatkan kemudahan bahasa html,css dan javascript untuk membuat sebuah page dan nanti di compile menggunakan teknologi cordova sehingga bisa jadi aplikasi native Android, IOS atupun platform yang lain. Keuntungan mengunakan jenis ini adalah kemudahan dalam proses pembuatannya dan tetep bisa mengakses hardware seperti kamera gps dll menggunakan teknologi cordova, namun sedikit kelemahan dari jenis ini adalah dari sisi kecepatan aplikasi nya, karena ini masih menggunakan webview untuk menampilkan page yang kita buat maka prosesnya sedikit lebih lambat dari native app.
  3. Web App
    Web App adalah web pada umumnya, bisa di buat menggunakan bahasa html, css, javacript, php untuk server sidenya, kelebihan tipe ini adalah dalam proses distribusi dan updatenya, karena code pada dasarnya tersimpan di satu tempat yaitu server maka ketika ada perubahan kita cukup merubah data di servernya. kelemahan dari tipe ini adalah belum bisanya mengakses hardware seperti kamera gps dll.
Dari 3 jenis di atas saya pribadi memilih menggunakan jenis hybrid untuk membuat aplikasi mobile karena kemudahan dalam pembuatannya (menggunakan html, css dan javascript) serta masih bisa mengakses hardware seperti aplikasi native menggunakan cordova. Sedangkan untuk kecepatan saya rasa produsen mobile sekarang sudah bersaing untuk mempercepat device mereka dengan meningkatkan kapasitas ram dan prosesor mereka sehingga perbedaan kecepatan antara native dan hybrid app tidak akan terasa signifikan oleh user nantinya.

Dari sekian banyak platform yang mengusung teknologi hybrid app saya sendiri memilih menggunakan ionic framework karena platform ini cukup populer sehingga banyak forum yang akan membantu jika mengalami kendala pada saat develop nantinya. komponen yang sudah disiapkan oleh ionic ini juga sudah bagus sekali (menurut saya) dan yang paling membuat saya makin menyukai ionic ini adalah sudah ready progressive web application (pwa)

Apa itu pwa ?

Apa saja yang dibutuhkan sebelum memulai belajar Ionic Framework ?

sebelum Anda memulai belajar ionic framework ini ada baiknya anda mempelajari dulu beberapa keahlian berikut :
  1. HTML  -> Tutorial w3schools
  2. CSS -> Tutorial w3schools
  3. Javascript / Typescript -> Tutorial w3schools 
tanpa belajar 3 keahlian tersebut di atas sebenernya kita bisa langsung belajar ionic namun harus belajar lebih ekstra lagi untuk bisa memahami dengan baik.

Cara Install Ionic Framework 

untuk install ionic framework pertama-tama anda harus download dan install dulu nodejs, saya sendiri menggunakan yang versi LTS setelah nodejs terinstall buka command prompt kemudian ketik perintah berikut
npm install -g cordova ionic
perintah ini akan menginstall program cordova dan ionic di komputer (-g = global, bukan di folder aktif ), ketika proses install berjalan membutuhkan koneksi internet. setelah anda berhasil coba jalankan perintah
ionic -v
jika berhasil maka akan keluar tampilah versi berapa ionic yang terinstall seperti gambar berikut

cek versi ionic yang terinstall

Mulai membuat Project Baru

Untuk memulai membuat project kita bisa mengetikkan perintah ionic start <namaproject> pada folder yang di inginkan, pilih tipe template awal yang dikehendaki lalu enter. Misal :
ionic start cafe
mulai membuat project baru menggunakan ionic
yang mana "cafe" dalam perintah di atas adalah nama projectnya, ketika proses pembuatan project baru ini berlangsung juga membutuhkan koneksi internet, jadi pastikan koneksi internet anda lancar. kalau sudah berhasil nanti akan tercipta folder baru dengan nama cafe, masuk ke folder tersebut dengan perintah cd cafe kemudian ketikkan perintah ionic serve untuk menjalankan local server dan mendevelop aplikasi dengan browser untuk melihat hasil aplikasinya.
cd cafe
ionic serve
menjalankan aplikasi ionic di browser
jika anda menggunakan browser chrome klik kanan lalu pilih inspect untuk mendapatkan view mobile
inspect - toggle device toolbar untuk mendapatkan view mobile

Untuk sementara itu dulu, nanti akan kita lanjutkan belajar membuat page dan navigasinya di ionic pada artikel berikutnya. Semoga bermanfaat,

Berikutnya : Cara Menggunakan Editor Visual Studio Code untuk develop Ionic

Komentar

Posting Komentar

Postingan populer dari blog ini

Membuat Page menggunakan Perintah Generate di Ionic

Gambar
Dalam tutorial kali ini kita akan belajar membuat page menggunakan perintah generate milik command line ionic. Untuk studi kasusnya kita akan buat 4 page yaitu page menu kategori, page order, page setting dan page list menu, yang mana pada 3 tab awal akan kita tampilkan menu, order dan setting sedangkan ketika item kategori di daftar menu di klik nanti akan menuju ke page berikutnya yaitu page list menu. Buka command line arahkan pada direktori kerja anda kemudian jalankan perintah berikut untuk membuat page baru ionic g page MenuKategori setelah itu akan tercipta folder dengan nama menu-kategori di dalam folder src/pages/, perintah diatas akan men generate page (g page) dengan nama "MenuKategoriPage" kata "Page secara otomatis ditambahkan sebagai nama class page tersebut". Berikutnya buat lagi page untuk order settings, dan menu detail ionic g page MenuDetails ionic g page Orders ionic g page Settings Edit page tab agar menampilkan page yang barusan ...
Baca selengkapnya

Menggunakan Visual Studio Code untuk develop Ionic

Gambar
Ada banyak sekali editor yang bisa digunakan untuk develop ionic, mulai dari notepad++, visual studio code, atom, visual studio, dreamweaver dll namun saya sendiri senang menggunakan visual studio code, selain free fitur auto completionnya dan pengenalan typescriptnya saya rasa cukup bagus dan kita bisa menambahkankan add-on/extension yang cukup bervariatif. Download langsung dari situs resminya : https://code.visualstudio.com/ Cara penggunaannya juga cukup mudah tinggal file -> open folder pilih folder project ionic kita sebelumnya lalu ok, code yang bisa kita edit bisa kita lihat di sebelah kiri terletak dalam folder src, sedang setting project ionic kita terletak di root folder dengan nama config.xml Berikutnya : Membuat Page dengan perintah Generate dan Cara Navigasinya
Baca selengkapnya

Mengambil Data dari Server Menggunakan HTTP

Gambar
Umumnya ketika membuat aplikasi mobile, datanya tersimpan di sisi server seperti database mysql, masalahnya ionic tidak memiliki kemampuan untuk mengakses database mysql secara langsung melainkan melalui http service seperti api, yang mana cara kerjanya adalah ionic memanggil sebuah alamat web http dan web tersebut mengambil data dari mysql menggunakan php. Sebagai contoh saya sudah memiliki api dengan alamat http://localhost:8000/api/menus yang mana alamat tersebut menghasilkan json array daftar menu (cara membuat api akan saya bahas di tutorial lain). Nah agar ionic bisa membaca hasil json array tersebut maka edit /src/providers/menu/menu.ts dan matikan fungsi mengisi data menu secara  manual lalu rubah kode load menjadi seperti berikut tambahkan async pada fungsi load menandakan kita mau menggunakan perintah await untuk menyelesaikan mengambil data dari alamat server http://localhost:8000/api/menu menggunakan perintah http.get setelah data didapat lalu dikonversi menjadi ...
Baca selengkapnya