Cara Membuat Crud Menggunakan IONIC 4

bewoksatukosong.com | Hallo semuanya balik lagi dengan om bewok, kali ini om bewok akan memberikan tutorial cara membuat aplikasi notes (catatan) menggunakan IONIC 4, ya intinya sih bikin aplikasi crud (create read update delete). Oh iya ionic 4 ini basic nya angular DULUNYA, tapi sekarang sudah bisa  menggunakan react, vue setau om bewok, tapi kali ini om bewok memberikan tutorial ionic 4 menggunakan angular. Kalau kalian mau lihat tutorial basic belajar javascript bisa lihat di bawah ini ya.

Tapi kalau ga mau lihat juga gapapa sih hehe om bewok bakal ngejelasin dengan bahasa semudah mungkin, agar teman-teman di sini paham. hehe 

Oh iya tutorial ini sebenarnya akan ada lanjutanya. yaitu membuat crud dan authentication menggunakan firebase. firebase ya seperti penyimpanan data tapi secara real time, cocok buat aplikasi chat atau untuk aplikasi yang bekerja secara real time.  authentication itu maksudnya kita membuat form register dan login dengan bantuan firebase. 

Jadi tahapan kita untuk belajar ionic 4 ini adalah

1. Membuat aplikasi crud menggunakan IONIC 4 (saat ini)

2. Membuat crud menggunakan ionic 4 dan firebase

3. Membuat Authentication (form login dan Register) menggunakan ionic dan firebase.

Sebelum kita membuat aplikasi Ionic 4 ini, om bewok jelasin dulu nih, makhluk apa sih ionic 4 ini ? 

Ionic adalah bentar googling dulu 😆😆

Ah langsung intinya aja jadi ionic ini kita bisa membuat aplikasi mobile android & ios hanya menggunakan html, css, javascript. Bukan hanya mobile tapi bisa sekaligus (maruk ya), jadi kita bisa membuat aplikasi mobile, desktop, web PWA secara bersamaan dan juga hanya dalam satu base. keren kan ? ya keren sih. kok pake sih ?? 🤣

Kalau di tanya "Untuk membuat aplikasi mobile di tahun 2019 ini, bisa pake apa aja sih om ? 

Banyak banget

1. Java android, tapi ada yang lebih baru lagi yaitu menggunakan bahasa kotlin, katanya orang-orang udah mulai hijrah ke kotlin untuk android java, karena ada beberapa yang ribet di java tapi di permudah menggunakan kotlin.

2. React Native yang dasar nya juga menggunakan javascript, instagram, facebook juga menggunakan react native, yang kata pengguna nya aplikasi nya udah kayak native app. Nativa app tuh semacem java android yang bener-bener pure untuk mobile.

3. Flutter yang bener-bener lagi trending banget, udah mulai banyak yang nyoba, flutter ini dari google jadi sudah jelas bukan kaleng-kaleng nih flutter, bahasanya menggunakan dart. kalau sekilas mirip java sih. 

4. IONIC 4 yang lagi mau kita pelajarin sekarang, udah banyak juga orang-orang yang menggunakan ionic 4, kabarnya ada bank salah satu  di indonesia yang menggunakan ionic loh, berarti bukan kaleng-kaleng juga nih ionic 4, walaupun banyak yang suka nyindir ionic 4 adalah hybrid app, tapi untuk perfomance juga bukan kaleng-kaleng. 

Requirement untuk Ionic 4

1. Install nodejs terlebih dahulu 

2. Browser chrome atau apapun

3. Text editor visual studio code (bebas)

4. Internet

1. Buka cmd kalian atau terminal

2. Buat folder terlebih dahulu dengan cara mkdir ionic

3. Pindah direktori dengan cara cd ionic 

4. lalu ketikan npm install -g ionic

5. lalu ketikan ionic start crud blank

6. Setelah selesai ketikan cd crud 

7. lalu ketikan ionic serve

8. Sebenarnya perintah no 6 dan 7 ada tutorial-Nya di terminal setelah kita menginstall. crud itu nama folder yang kita buat, kalian bebas mau nulis apa aja, tapi kalau bisa untuk belajar di samain dulu aja.

9. Nanti dia akan otomatis buka browser kalian dengan alamat localhost:8100 dan sabar ya, soalnya agak lama untuk awalnya, nanti lama-lama juga kayak biasa

10. Selesai.

Langsung saja kita buat crud-Nya, ayo buka text editor kalian. 

Oh iya tiap kamu ganti sesuatu, lalu kamu save, dia langsung mereload dan akan di tampilkan ke browser kamu, jadi istilahnya secara real time atau live. 

Aplikasi yang akan kita buat sebenarnya sederhana banget, jadi masih banyak yang harus di kembangin lagi.  

Gambar 1. Tampilan aplikasi mobile android crud notes menggunakan ionic 4

Gambar 2. Tampilan Aplikasi crud menggunakan ionic 4 pada browser chrome

Gambar 3. Tampilan struktur ionic 4

Kalian buka 📂src/app/home.page.html lalu ketikan di bawah ini. ini yang akan menampilkan ke browser kalian.

<ion-header>
  <ion-toolbar>
    <ion-title>
      Aplikasi Catatan
    </ion-title>
  </ion-toolbar>
</ion-header>

Membuat title yang paling atas yaitu aplikasi catatan.

<ion-content padding>
  <ion-item>
      <ion-input type="text" placeholder="Enter task" [(ngModel)]="taskName"></ion-input>
      <div class="item-note" item-end>
        <ion-button (click)="addTask()"><ion-icon name="add">Add task</ion-icon></ion-button>
      </div>
  </ion-item>

Kita membuat input text untuk menambahkan text, dan jangan lupa memberikan name="taskName" itu biasanya kalau di input text biasa. ion button ini pada bagian addTask artinya ketika kita click akan melakukan sesuatu kalau di javascript biasa seperti biasa 
<button onClick="addTask()">add task </button>

<ion-list>
      <ion-item *ngFor="let todo of taskList; let i = index">
        {{todo}}
        <ion-col class="ion-float-right">
          <div class="item-note ion-float-right" item-end>
            <ion-button clear (click) = "updateTask(i)"><ion-icon name="create"></ion-icon></ion-button>
            <ion-button clear (click) = "deleteTask(i)"><ion-icon name="trash"></ion-icon></ion-button>
          </div>
        </ion-col>
      </ion-item>
    </ion-list>

Untuk *ngFor ini looping seperti menggunakan forEach taskList lalu kita buat variabel dengan nama todo dan di tampilkan dengan cara {{todo}} kita dapatkan dari home.page.ts bisa di lihat kode di bawah ya. Selanjutnya seperti biasa membuat button onClick updateTask dan button onClick deleteTask

Lalu kalian masuk ke 📂 src/app/home.page.ts lalu ketikan 

Oke sudah selesai. Tapi mari om bewok jelaskan satu persatu ya

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

Ini kita membuat nav controller untuk navigasi dan alertController berfungsi ketika kita klik edit maka muncul alert atau popup. nah sebelum kita bisa menggunakan alert, kita masukin dulu nih alert controller nya. 

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

Lihat file teman-teman, ini component yang digunakan pada folder home, ada home.page.html dan home.page.scss(css)

export class HomePage {
  taskList = [];
  taskName: string = "";

  constructor(public navCtrl: NavController, public alertController: AlertController) { }

taskList ? inget pada bagian home.page.html yap ini kita membuat taskList untuk di jadikan array. 
taskName inget pada bagian home.page.html [(ngModel)]="taskName" kalau di html biasa seperti <input type="text" name="taskName"/> got it ?

addTask() {
    if (this.taskName.length > 0) {
      let task = this.taskName;
      this.taskList.push(task);
      this.taskName = "";
    }
  }

addTask inget pada bagian home.page.html pada bagian 
button onClick="addTask" 
atau kalau di sini seperti ion-button (click)="addTask"
Jika taskName lebih besar dari 0 maka buat variabel masukan taskName (input text [(ngModel)], lalu tambahkan yang ada di task ke taskList. 

Setelah selesai tolong taskName =""; di bersihkan, biar kalau nambahin langsung tambahin, ga perlu ngapus inputan yang lama.

async updateTask(index) {
    let alert = await this.alertController.create({
      header: 'Are you sure ? ',
      // subHeader: 'Subtitle',
      message: 'Type in your new task to update.',
      inputs: [{ name: 'editTask', placeholder: 'edit data' }],
      buttons: [{ text: 'Cancel', role: 'cancel' },
      {
        text: 'Update', handler: data => {
          this.taskList[index] = data.editTask;
        }
      }
      ]
    });
    alert.present();
  }

Ini untuk bagian update-Nya ya. 
buat function updateTask parameter index, lalu buat variabel dengan nama alert yang di gunakan untuk membuat objek. alertController ? kamu inget yang paling di atas kan, nah ini fungsinya, ini mirip seperti sweetalert, header, message, inputs, buttons ini ketika alert muncul maka menampilkan itu semua. 

deleteTask(index) {
    this.taskList.splice(index, 1);
  }

Ini untuk menghapus data, splice berfungsi jika hanya 1 data, maka dia akan menghapus. 

Gambar 4. Aplikasi Catatan menggunakan ionic 4

Oh iya kenapa agak beda dengan javascript yang biasa kita pelajarin karena ionic menggunakan angular dan angular menggunakan typescript yang mana di buat oleh microsoft, dan agak mirip-mirip gitu jadinya, jadi kayak berbeda tapi serumpun haha.

Semua tutorial ini bisa kamu lihat di github om bewok dan yang mau belajar javascript dari 0 sampai ngerti bisa lihat di bawah ini 

Source Kode Github Membuat Aplikasi IONIC 4
Daftar Tutorial Javascript es5 & es6