lifelong learner — urip iku urup, currently working on accenture.

ionic – struktur aplikasi & deploy pada ionic view

1
Degananda.com -

Ionic 2 dan 3 dibangun dengan menggunakan angular js yang merupakan framework besutan dari google. Untuk menunjang porting dari aplikasi web ke mobile ionic menggunakan cordova(apache cordova) yaitu sebuah framework untuk membangun aplikasi android dengan menggunakan html, css dan javascript. Cordova dulunnya bernama phonegap yang dibuat oleh perusahaan bernama Nitobi. Pada tahun 2011 adobe system membeli nitobi dan sekarang pengembangannya diserahkan kepada Apache software foundation sehingga namannya berubah dari phonegap menjadi apache cordova.

Pada ulasan mengenai ionic ini kami menggunakan ionic versi 3

1. struktur project ionic

Ionic menggunakan berbagai berbagai jenis platform dan plugins, contohnya cordova, angular,  typescript dan node. Oleh karena itu pada project ionic terdapat berbagai folder yang mengakomodasi hal tersebut. Pada ulasan ini diharapkan kita dapat memahami kegunaan dari folder yang terdapat pada project ionic dengan harapan memudahkan saat melakukan coding/development. Berikut ini adalah beberapa nama folder dan file beserta kegunaannya di ionic

  1. resources
    pada folder ini terdapat file – file yang berguna bagi aplikasi kita. Umumnya folder ini digunakan untuk menyimpan gambar, icon atau splashscreen. Jika anda familiar dengan code igniter maka folder ini memiliki fungsi seperti folder assets.

    pada folder resources akan terdapat dua folder secara default yaitu ios dan android, yang masing-masing dibuat untuk menyimpan resources gambar pada setiap platformnya. Contohnya splash screen antara android dan ios berbeda begitu pula dengan icon-iconnya. Hal ini ditujukan untuk memaksimalkan ui sehingga dapat semirip mungkin dengan native meskipun tidak akan 100% mirip look and feelnya
  2. Platforms
    pada folder ini menyimpan file-file yang berguna pada saat kompilasi dan plugin – plugin terkait native devices. Contohnya disini ada folder android (karena pada ulasan sebelumnya kita melakukan build / run untuk platform android) yang isinnya terdapat gradle, mirip seperti gradle jika kita menggunakan android studio.

    pada intinnya folder platforms ini menyimpan file-file yang terkait dengan native platform agar cordova dapat sinkron dengan sistem operasi terkait(ios/android).
  3. Plugins
    folder ini menyimpan file-file yang digunakan untuk apache cordova mengakses native function dari sistem operasi. Contohnya untuk mengakses kamera, gps , dan lain sebagainnya. folder plugins ini sangat erat kaitannya dengan folder platform.

    dapat terlihat bahwa terdapat beberapa plugins default yang terinstall, contohnya splashscreen, agar aplikasi yang kita buat dengan cordova dapat memiliki splashscreen layaknya aplikasi native.
  4. Res
    Isinnya hampir sama dengan folder resources namun bedannya folder ini menyimpan resources dengan berbagai ukuran. Folder ini sama dengan folder res saat kita membuat aplikasi android di android studio.
  5. src
    folder ini adalah jantung dari ionic, waktu kita akan dihabiskan disini untuk melakukan coding. Folder ini menyimpan file – file typescript (controller, model , class, pipe dan lain sebagainnya). Secara umum folder ini sama dengan folder app pada angular.
  6. src/page
    folder yang merupakan lokasi dari view / screen (html).
  7. www/build
    folder yang menyimpan hasil kompilasi. Pada folder ini terdapat index.html yang merupakan file index yang menjadikan aplikasi ionic menjadi single page application. Pada angular folder build ini seperti folder “dist”.
  8. config.xml
    lokasi untuk mengkonfigurasi ionic

selain dari delapan folder/file diatas rasannya hanya tersisa file atau folder konfigurasi untuk node (packages.json dan node_modules) dan typescript.

2. Ionic view

Ionicframework memiliki official cloud yakni ionic.io yang salah satu fiturnya adalah cloud hosting untuk aplikasi ionic. Kita dapat menggunakan ionic view untuk melakukan deploy. Keuntungannya adalah :

  1. sangat membantu dalam proses testing karena jika kita tidak memliki devices pada platform tertentu dapat terbantu. Misalnya kita hanya memiliki android , namun kita ingin test untuk platform ios maka cukup kita install ionic view pada handphone teman/kolega (iphone) tanpa harus menghubungkan dengan kabel konektor usb/install manual
  2. tidak banyak icon aplikasi pada handphone, jika kita membuat aplikasi android dan kita run pada devices maka semakin banyak icon aplikasi dengan ionic view aplikasi yang sedang kita test akan berada dalam satu group(ionic view).

pada intinnya ionic view sangat bermanfaat untuk menunjukan aplikasi kita kepada orang lain atau sekedar untuk internal.

langkah dalam mendeploy aplikasi pada ionic view telah dijelaskan pada console saat kita membuat aplikasi ionic baru. Untuk mudahnya pada saat pertanyaan “link this app ionic dashboard” pilih ya.

maka selanjutnya yang cukup kita lakukan adalah melakukan login dengan ionic login, dan dilanjutkan memberikan perintah  ionic link untuk mengupload project dan sync dengan cloud ionic view. (kami menggunakan ionic 3, untuk ionic 2 mungkin perintahnya agak sedikit berbeda ).

here we go ~

2.1 login pada ionic.io

2.2 Pilih app

setelah login maka pilih nama app (pada dashboard ionic view). Jika belum maka buat terlebih dahulu pada dashboard.

2.3 Upload ke cloud

untuk melakukan upload gunakan perintah :

ionic upload

maka pada dashboard (web ionic.io) akan terlihat satu aktivitas pada tab “deploy”

3. download aplikasi ionic view pada android/ios

3.1 login pada aplikasi android/ios ionic view

setelah mendownload , login dengan akun ionic.io maka anda akan melihat daftar dari app anda. Pilihlah salah satu

3.2 tap salah satu nama app

pilih view app

pilih view app maka aplikasi ionic yang anda upload tadi akan dilaunch / di jalankan

3.3 Tunggu beberapa saat

dan hasilnya seperti dibawah ini, kita tidak perlu menginstall pada devices semuannya berjalan pada cloud. luar biasa!

done.

 

 

  • kin

    hay bro ther master untuk mengedit file folder buid file main.js biar mengarah folder src/page/…ada sample scriptnya