Membuat Aplikasi Ionic Daftar Pekerjaan (Studi Kasus)

Membuat Aplikasi Ionic Daftar Pekerjaan (Studi Kasus) | develop by Warung Komputer.

Sebelumnya kita telah membahas langkah awal instalasi software yang dibutuhkan untuk membuat aplikasi mobile ionic disini, kini kita akan membuat studi kasus project ionic yaitu Membuat Aplikasi Daftar Pekerjaan dengan Ionic v3.

Lansung saja ikuti langkahnya dibawah ini :

Membuat Aplikasi Ionic Daftar Pekerjaan (Studi Kasus)

1. Membuat Project

Buka drive C.

Setelah itu tekan di keyboard shift + klik kanan di folder latihan ionic yang tadi telah dibuat, lalu pilih Open command window here.

Ketik perintah berikut :

ionic start DaftarPekerjaan blank

Maksud dari kode diatas adalah kita membuat aplikasi daftar pekerjaan dengan template blank

Setelah itu masuk ke folder DaftarPerkerjaan dengan perintah :

cd DaftarPekerjaan

Selanjutnya kita kan membuat platform android pada aplikasi tersebut.

2. Membuat Platform Android pada Project

Pada sub bab ini kita akan menambahkan platform Android pada project agar aplikasi tersebut dapat berjalan di OS Android. Ikuti langkahnya sebagai berikut.

Masih di jendela CMD di folder DaftarPekerjaan, ketikkan perintah berikut, lalu tekan enter.

ionic cordova platform add android

Tunggu sampai semua file di download. Setelah itu pastikan apliaksi tersebut bisa berjalan, ketikkan perintah berikut :

ionic serve

Dalam kondisi berjalan kamu tidak bisa mengetikkan perintah apapun ke dalam CMD, untuk itu terlebih dahulu kamu harus menghentikkan prosesnya terlebih dahulu menggunakan tombol keyboard Ctrl + C, lalu ketik y dan tekan enter.

3. Membuka Code Project di Visual Studio Code

Untum memudahkan kita megubah kode yang ada di dalam project ionic yang kita buat. Kita dapat menggunakan editor Visual Studio Code yang tadi diinstall.

Pastikan CMD kamu mengarah ke folder project DaftarPekerjaan.

Untuk membuka Visual Studio Code kamu cukup mengetikkan perintah berikut.

code .

Maka secara otimatis akan menjalankan program Visual Studio Code yang membuka folder project DaftarPekerjaan.

4. Memodifikasi Struktur Halaman

Pada sub bab ini kita akan mengunah struktur halaman sehingga memudahkan dalam membuat aplikasi Daftar Pekerjaan yang kita buat.

Di aplikasi Visual Studio Code, buka file app.component.ts lalu ubah kodenya sebagai berikut.

Lokasi file : DaftarPekerjaan/src/app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';

import { HalamanDaftarPekerjaan } from '../pages/daftarpekerjaan/daftarpekerjaan';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HalamanDaftarPekerjaan;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

Penjelesan kode diatas :

• Mengimport halaman DaftarPekerjaan
• Membuat akses root halaman ke HalamanDaftarPekerjaan

Selanjutnya kita akan mengubah file app.module.ts sebagai berikut :

Lokasi file : DaftarPekerjaan/src/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { HalamanDaftarPekerjaan } from '../pages/daftarpekerjaan/daftarpekerjaan';


@NgModule({
  declarations: [
    MyApp,
    HalamanDaftarPekerjaan
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HalamanDaftarPekerjaan
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Simpan file tersebut, selanjutnya kita akan me-rename halaman home dengan daftarpekerjaan.

Klik kanan folder src/pages/home dan rename menjadi daftarpekerjaan.

Demikian juga ketiga file yang ada didalamnya, ubah menjadi daftarpekerjaan.html,  daftarpekerjaan.scss, dan daftarpekerjaan.ts.

Lalu buka file daftarpekerjaan.ts, ubah menjadi seperti ini :

Lokasi file : DaftarPekerjaan/src/pages/daftarpekerjaan/daftarpekerjaan.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'daftarpekerjaan.html'
})
export class HalamanDaftarPekerjaan {

  constructor(public navCtrl: NavController) {

  }

}

Selanjutnya kita akan meomdifikasi halamannya dengan menambahkan tombol di pojok kanan atas sebagai berikut.

Lokasi file : DaftarPekerjaan/src/pages/daftarpekerjaan/daftarpekerjaan.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Daftar Pekerjaan
    </ion-title>
    <ion-buttons end>
      <button ion-button icon-left (click)="addItem()">Tambah</button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding>
  The world is your oyster.
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
</ion-content>

Ok, kamu bisa melihatnya dengan menjalan perintah di CMD :

ionic serve

Maka tampian home akan menjadi tampilan Daftar Pekerjaan.

Berikutnya kita akna menambahkan icon disamping tombol tambah. Ionic memungkinkan kita untuk menggunakan icon yang telah disediakan sehingga kita tidak perlu repot-repot menambahkannya.

Cara mengimplekemtasikan icon cukup mudah, tambahkan kode berikut di daftarpekerjaan.html.

Lokasi file : DaftarPekerjaan/src/pages/daftarpekerjaan/daftarpekerjaan.html

    <ion-buttons end>
      <button ion-button icon-left (click)="addItem()"><ion-icon name="add"></ion-icon>Tambah</button>
    </ion-buttons>

Untuk melihat icon apa saja yang tersedia kamu bisa menggunjungi halaman website ionic berikut http://ionicframework.com/docs/ionicons/.

Selanjutnya kita akan membuat daftar list pekerjaan yang nanti akan kita buat.

Masih di file daftarpekerjaan.html, tambahkan kode berikut.

Lokasi file : DaftarPekerjaan/src/pages/daftarpekerjaan/daftarpekerjaan.html

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let task of tasks">{{task.title}}</ion-item>
  </ion-list>
</ion-content>

Kita akan menambahkan daftar pekerjaan menggunakan array, buka file daftarpekerjaan.ts dan ubah kodenya sebagai berkut :

Lokasi file : DaftarPekerjaan/src/pages/daftarpekerjaan/daftarpekerjaan.ts

...
export class HalamanDaftarPekerjaan {
  tasks: Array<any> = [];

  constructor(public navCtrl: NavController)  {
   this.tasks = [
      {title:'Membeli sayur ke pasar', status: 'open'},
      {title:'Memmasak nasi', status: 'open'},
      {title:'Membuat sarapan', status: 'open'},
      {title:'Meeting siang 1 siang', status: 'open'} 
   ];
  }

  addItem() {
    let theNewTask: string = prompt("Tambah Pekerjaan");
    if (theNewTask !== '') {
      this.tasks.push({ title: theNewTask, status: 'open' });
    }
  }

}

Untuk mencobanya, jalankan kode CMD :

ionic serve

Maka tampikannya akan seperti ini.

Ketika di klik tombol Tambah, maka akan muncul jendela pop-up seperti ini.

Selanjutnya kita akan memodifikasi list daftar pekerjaan tersebut agar bisa di slide kesamping untuk opsi selesai dan delete-nya.

Lokasi file : DaftarPekerjaan/src/pages/daftarpekerjaan/daftarpekerjaan.html

<ion-list>
  <ion-item *ngFor="let task of tasks">{{task.title}}</ion-item>
  <ion-item-sliding *ngFor="let task of tasks">
    <ion-item>
      {{task.title}}
    </ion-item>
    <ion-item-options side="right">
      <button ion-button icon-only (click)="markAsDone(task)" color="secondary">
        <ion-icon name="checkmark"></ion-icon>
      </button>
      <button ion-button icon-only (click)="removeTask(task)" color="danger">
        <ion-icon name="trash"></ion-icon>
      </button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

Keterangan kode diatas sebagai berikut :

• Kode <ion-item-sliding *ngFor=”let task of tasks”> untuk membuat animasi slide kesamping
• Kode <ion-item-options side=”right”> membuat animasi slide yang jika di geser kekiri akan muncul opsi di kanan
• Kode <button ion-button icon-only (click)=”markAsDone(task)”> adalah untuk menandai bahwa daftar pekerjaan telah selesai
• Kode <button ion-button icon-only (click)=”removeTask(task)” color=”danger”> untuk membuat tombol hapus daftar pekerjaan
• Kode <ion-icon name=”trash”></ion-icon> adalah menambahkan icon tempat sampah

Silahkan dicoba tampilannya, jika sukses akan tampil sepert ini.

Ketia digeser ke kiri, makan akan muncul icon checklist yang berarti menandakan pekerjaan selesai (done) dan icon trash yang berarti akan dihapus.

Sekarang kita akan modifikasi kode javaScript nya yang ada di file daftarpekerjaan.ts agar opsi done dan trash ini berjalan.

Lokasi file : DaftarPekerjaan/src/pages/daftarpekerjaan/daftarpekerjaan.ts

...
    addItem() {
    let theNewTask: string = prompt("Tambah Pekerjaan");
    if (theNewTask !== '') {
      this.tasks.push({ title: theNewTask, status: 'open' });
    }
  }

  markAsDone(task: any) {
   task.status = "done";
  }

  removeTask(task: any) {
    task.status = "removed";
    let index = this.tasks.indexOf(task);
    if (index > -1) {
        this.tasks.splice(index, 1);
    }
  }
...

Sebelum kita mengetes aplikasinya, tambahkan kode css berikut di file daftarpekerjaan.scss.

Lokasi file : DaftarPekerjaan/src/pages/daftarpekerjaan/daftarpekerjaan.scss

.taskDone {text-decoration: line-through;}

Angular menyediakan metode untuk menerapkan class CSS ke elemen. Kita akan menerapkan Angular untuk class CSS dari tugas yang sudah dilakukan <ion-item> sebagai berikut.

Lokasi file : DaftarPekerjaan/src/pages/daftarpekerjaan/daftarpekerjaan.html

    <ion-item>
    <ion-item [ngClass]="{taskDone: task.status == 'done'}" >
      {{task.title}}
    </ion-item>

Berikutnya tambahkan ItemSliding pada file daftarpekerjaan.ts.

Lokasi file : DaftarPekerjaan/src/pages/daftarpekerjaan/daftarpekerjaan.ts

import { NavController, ItemSliding } from 'ionic-angular';

Sekarang kita akan memodifikasi component <ion-item-sliding>. Tambahkan sebuah local template variable #slidingItem. Component ini akan mengeset variable dengan referensi ke masing-masing tombol, jika done berwarna secondary, dan jika dihapus berwarna danger.

Kodenya akan menjadi seperti ini.

Lokasi file : DaftarPekerjaan/src/pages/daftarpekerjaan/daftarpekerjaan.html

    <ion-item-sliding *ngFor="let task of tasks" #slidingItem>
      <ion-item [ngClass]="{taskDone: task.status == 'done'}">
        {{task.title}}
      </ion-item>
      <ion-item-options side="right">
        <button ion-button icon-only (click)="markAsDone(slidingItem, task)" color="secondary">
          <ion-icon name="checkmark"></ion-icon>
        </button>
        <button ion-button icon-only (click)="removeTask(slidingItem,task)" color="danger">
          <ion-icon name="trash"></ion-icon>
        </button>
      </ion-item-options>
    </ion-item-sliding>

Selanjutnya ubah function markAsDone dan removeTask dengan kode berikut.

Lokasi file : DaftarPekerjaan/src/pages/daftarpekerjaan/daftarpekerjaan.ts

  markAsDone(task: any) {
   task.status = "done";
  }

  markAsDone(slidingItem: ItemSliding, task: any) {
    task.status = "done";
    slidingItem.close();
  }

  removeTask(task: any) {
    task.status = "removed";
    let index = this.tasks.indexOf(task);
    if (index > -1) {
        this.tasks.splice(index, 1);
    }
  }

  removeTask(slidingItem: ItemSliding, task: any) {
    task.status = "removed";
    let index = this.tasks.indexOf(task);
    if (index > -1) {
      this.tasks.splice(index, 1);
    }
    slidingItem.close();
  }

Silahkan digeser ke kiri, dan tekan tombol checklist untuk menyelesaikan pekerjaan, makan list daftar pekerjaan akan dicoret seperti pada gambar dibawah ini.

Menambahkan Full-Swipe Gesture

Kamu bisa menambahkan Full-Swipe Gesture layaknya fitur yang ada di aplikasi iOS Mail.

Kamu bisa memodifikasi pada <ion-item> dengan menambahkan ionSwipe sebagai beirkut :

Lokasi file : DaftarPekerjaan/src/pages/daftarpekerjaan/daftarpekerjaan.html

<ion-item-options side="right" (ionSwipe)="removeTask(slidingItem, task)">

Kemudian kamu harus memodifikasi button-nya sebagai berikut.

Lokasi file : DaftarPekerjaan/src/pages/daftarpekerjaan/daftarpekerjaan.html

<button ion-button icon-only expandable color="danger" (click)="removeTask(slidingItem, task)"> 

Silahkan dicoba, ketika digeser kekiri sampai tepi makan akan otomatis terhapus.

Modifikasi Template

Kita bisa sedikit memodifikasi template sehingga lebih menarik. Kita akan mengubah warna navbar-nya menjadi warna biru.

Tambahkan kode berikut.

Lokasi file : DaftarPekerjaan/src/pages/daftarpekerjaan/daftarpekerjaan.html

<ion-navbar color="primary">

Maka tampikannya menjadi seperti ini.

Selesai,

Semoga bermanfaat.

Baca juga : Cara Mudah Membuat Aplikasi Android Serbaguna dengan Universal

Keyword artikel : Membuat Aplikasi Ionic Daftar Pekerjaan, Membuat Aplikasi Ionic Daftar Pekerjaan, Membuat Aplikasi Ionic Daftar Pekerjaan, Membuat Aplikasi Ionic Daftar Pekerjaan, Membuat Aplikasi Ionic Daftar Pekerjaan.