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

ionic – navigasi part 1

0
Degananda.com -

Pada ulasan ini hingga ulasan selanjutnya mengenai ionic studi kasus yang akan dibuat adalah sebuah aplikasi untuk mengelola catatan atau note. Hal ini sama seperti studi kasus yang digunakan pada ulasan/tutorial angular. Teknologi yang akan digunakan adalah :

  • Angularfire(database : firebase)
  • ionic

Navigasi adalah sebuah mekanisme dan sistem yang mengatur tentang perpindahan halaman yang dilakukan oleh user pada saat event tertentu. Contohnya pada saat user melakukan tap terhadap satu tombol ataupun saat callback selesai(biasannya ditandai dengan loading, ketika loading selesai user akan dipindahkan halaman / load view yang baru). Berbeda dengan browser, pada ionic tidak memiliki “url bar” atau “address bar” sehingga navigasi hanya dilakukan via user input event atau setelah menerima callback tertentu.

1. Navigation Stack

Stack secara harfiah berarti tumpukan. Jika anda pernah mempelajari stack dalam bahasa lain (misalnya java) konsep navigation stack di ionic juga seperti itu. Last in first out(LIFO). Stack memiliki dua fungsi utama yakni pop ataupun push. Pop ketika kita hendak mengeluarkan item paling atas dan push untuk memasukan item ke urutan yang paling bawah.

Halaman pada ionic di ibaratkan sebuah stack atau tumpukan. Semua halaman ditumpuk menjadi tumpukan. Memiliki halaman paling atas dan halaman paling bawah. Sisannya adalah halaman yang berada diantarannya. Ionic juga melakukan page caching pada dom untuk meningkatkan performa. Meskipun dengan berbagai optimasi yang ada ionic tetap tidak mampu menandingi kecepatan dari aplikasi yang dibangun dengan native language.

1.1 Cara kerja navigation stack

Perlu diketahui lagi bahwa , push pada stack akan menambahkan item ke bagian bawah dari stack/tumpukan. Sedangkan pop pada stack akan mengeluarkan item dibagian paling atas/terahir masuk, LIFO. Halaman baru pada ionic akan dipush kedalam sebuah stack dan ketika terjadi navigasi backward(back) maka akan dilakukan fungsi pop(lihat bagian 1.4). Ionic tidak hanya menggunakan satu buah stack melainkan lebih dari satu stack hal ini diperuntukan untuk mengakomodasi tab(biasannya berada dibagian atas ataupun bawah aplikasi). Ilustrasi dibawah adalah bagaimana cara kerja navigation stack pada ionic.

1.1. Saat ini user berada pada halaman utama

pada halaman utama ini, posisi home akan berada didalam stack dan user berada pada halaman home(navigasi)

1.2. User menuju ke halaman contact

pada saat user menuju ke halaman contact, yang terjadi adalah halaman contact akan dipush kedalaman stack. Ini membuat home menjadi dibagian paling bawah stack dan contact menjadi dibagian paling atas stack dengan kata lain Halaman yang diakses saat ini oleh user adalah stack paling atas.

1.3. User menuju ke halaman about

Halaman about akan dipush kedalam stack dan menjadi paling diatas , dan contact berada diantara home dan about.

1.4 user melakukan back

yang terjadi saat user melakukan back adalah fungsi pop pada stack dieksekusi. Pop akan mengeluarkan item paling terahir yang dimasukan sesuai dengan konsep LIFO. Maka pada stack saat ini merupakan halaman contact sehingga saat ini user berada pada halaman contact. Begitulah cara kerja navigation stack pada ionic sangat sederhana karena hanya menggunakan stack.

2. Page skeleton

aplikasi pengelola catatan (note) yang akan kita buat sangat simpel, hanya terdiri dari …. halaman

  1. halaman daftar note
    pada halaman ini akan ditampilkan note yang telah kita.
  2. halaman menambah note
    pada halaman ini akan menampilkan form untuk menambah note
  3. halaman mengubah note
    pada halaman ini akan menampilkan form untuk mengubah note, technically antara halaman edit dan tambah adalah sama yang berbeda hanyalah data yang diperlukan dan fungsi/services yang nantinnya akan dieksekusi. Namun, kedua halaman tersebut tetap berada pada dua routes yang berbeda.

sehingga kurang lebih seperti inilah gambaran dari routing apilkasi pengelola catatan kita.

dari halaman daftar note dapat menuju ke halaman tambah note begitu juga sebaliknya dan dari halaman daftar note dapat menuju kehalaman edit note begitu juga sebaliknya. Namun dari halaman tambah note tidak dapat menuju kehalaman edit note begitu juga sebaliknya. Lalu bagaimana proses delete? delete akan dilakukan di halaman daftar note dan item note akan secara otomatis ter”refresh” setelah proses delete.

3. Lets code

kita akan membuat halaman beserta navigasinnya seperti tampak pada bagian page skeleton(bab 2). Sebelum memulai koding siapkan dulu project ionic. Jika belum memahami cara setup project ionic dapat membaca ulasan sebelumnya (https://degananda.com/2017/05/23/membuat-setup-aplikasi-android-dengan-ionic-dan-typescript/).

3.1 persiapan

Berikut ini adalah langkah awal untuk membuat aplikasi note, buat project ionic baru dengan komponen sidemenu

ionic start catatanku sidemenu

jalankan pada browser untuk proses coding dan debugging

ionic serve

secara defalt ionic akan berjalan pada port 8100, jadi buka http://localhost:8100.

3.2 generate halaman

kita akan menggunakan cli untuk mempercepat proses development dan generate dua halaman yaitu :

  1. listnote yang akan kita berinama com-listnote
  2. form-note yang akan kita berinama form-note

perintah yang digunakan untuk melakukan generate halaman adalah

ionic generate page nama_komponen

3.3 Registrasi halaman di app.module.ts

setelah melakukan generate terhadap kedua page diatas jangan lupa untuk menambahkannya pada metadata declarations dan entryComponents pada ngModules. Penjelasan mengenai app.module.ts terdapat pada tutorial angular chapter 3. Sedangkan untuk entryComponent ini difungsikan khusus untuk sebuah “pages” sedangakn declarations untuk page dan component pada app.module.ts

import terlebih dahulu

// import page
import { PageListnotePage } from '../pages/page-listnote/page-listnote';
import { FormNotePage } from './../pages/form-note/form-note';

setelah di import baru masukan ke metadata terkait di ngModule

  declarations: [
    MyApp,
    HomePage,
    ListPage,
    PageListnotePage,
    FormNotePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage,
    PageListnotePage,
    FormNotePage
  ],

3.4 Mengganti rootpage

import page listnote yang akan kita gunakan sebagai rootpage pada app.component.ts

// import page yang akan masuk pada hamburger
import { PageListnotePage } from './../pages/page-listnote/page-listnote';

secara default ionic memiliki rootpage pada “home”. karena rootpage kita berada pada halaman listnote maka ganti rootPage pada app.component.ts menjadi listnote. dan jangan lupa untuk mengganti isi array dari “pages” karena kita menggunakan sidemenu maka jangan lupa mengupdate isi array karena isi dari array tersebut yang akan ditampilkan pada hamburger menu.

  rootPage: any = PageListnotePage;

  pages: Array<{title: string, component: any}>;

  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
    this.initializeApp();

    // used for an example of ngFor and navigation
    this.pages = [
      { 
        title: 'Home', 
        component: PageListnotePage 
      }
    ];

  }

3.5 Buat tombol tambah note

Tombol ini jika kita klik / tap akan melakukan routing ke halaman form-note yang telah kita buat sebelumnya. Carannya yakni membuat button kemudian kita tambahkan user input directive yang berupa (click) kemudian responnya akan menjalankan fungsi navTambahPage() yang akan melakukan navigasi ke halaman form. Prinsip navigasi ini telah kita bahas pada bagian navigation stack pada intinnya kita akan memanfaatkan modul NavController yang secara default telah terimport dan teratur dependecynya untuk kita gunakan fungsi push. Keseluruhan proses diatas kita lakuka di page-listnote.html dan page-listnote.ts

  <div>
    ini halaman list note
  </div>

  <div>
    <button ion-button primary (click)="navTambahPage()">tambah note</button>
  </div>

berikut ini adalah kode untuk melakukan navigasi ke form-note pada saat klik tombol tambah note.

  navTambahPage(){
    this.navCtrl.push(FormNotePage);
  }

ketika tombol tambah note kita klik/tap maka akan langsung melakukan navigasi ke halaman form-note dan secara otomatis akan terdapat tombol back disana berupa arrow backward.

done~ itulah tutorial navigasi sederhana pada ionic untuk part 1, pada part 2 mengenai navigasi akan dibahas lebih dalam mengenai navigasi yang lebih advanced.