Belajar Parsing File XML, CSV, dan TSV di Ionic

Level menengah, pembaca diharapkan sudah pernah belajar dasar-dasar Ionic sebelumnya.

Konten boleh jadi sang Raja tapi tanpa cara untuk memparsing format-format yang berbeda, maka aplikasi mobile kita akan sulit mengakses konten jenis apapun.

Meskipun JSON merupakan format yang pailng populer dan banyak dipakai untuk bertukar data, namun kita pasti akan sering bertemu dan wajib bekerja dengan format-format lain seperti XML, CSV (Comma Separated Values) bahkan TSV (Tabbed Separated Values).

Ada banyak alasan mengapa klien masih menggunakan format data yang sudah lama. Bisa jadi sistem jadul yang tidak bisa diupgrade tanpa mengeluarkan biaya yang besar atau pengaruh negatif yang bisa didapatkan oleh perusahaan tersebut apabila sistemnya diubah menjadi dua dari sekian banyak alasan tersebut.

Di tutorial ini kita akan belajar bagaimana mem-parsing XML, CSV, dan TSV menjadi objek JavaScript agar bisa dipakai di aplikasi Ionic kita.

Apa yang Akan Kita Buat

Untuk tutorial ini kita akan membuat aplikasi dengan satu halaman yang menampilkan 3 list untuk tiga jenis konten berupa judul komik Inggris dari tahun 60-an sampai 80-an. Setiap list akan menggunakan data yang diimpor dan di parse dari tiga jenis format yang berbeda.

Setelah koding aplikasi selesai dan dijalankan di browser komputer kita, hasilnya kurang lebih akan terlihat sebagai berikut.:

Mari kita buat kerangka awal aplikasinya.

Di aplikasi terminal, jalankan perintah CLI berikut:

ionic start comic blank

Tidak banyak konfigurasi yang akan kita lakukan selain memasang satu package node.js yang kaan kita bahas di bagian berikutnya. Sebagian besar waktu yang kita habiskan adalah untuk proses koding logika parsing beberapa data yang berbeda.

Sekarang setelah struktur dasar aplikasi kita siap sekarang saatnya untuk mengimpor dan memparsing data XML yang akan kita pakai.

Loading dan Parsing Data XML

Pernah menjadi standar utama pertukaran data XML (singkatan dari eXtensible Markup Language) adlah sebuah bahasa berbasis tag sama seperti HTML yang diturunkan dari SGML (Standard Generalized Markup Language).

Meski populer dan banyak dipakai, XML memiliki banyak kekurangan diantaranya:

• Sulit memetakan data XML ke format lain atau struktur tabel database
• Tidak mudah berbagi data antar aplikasi dengan XML
• Sintaksnya relatif lebih kompleks (dibanding format seperti YAML atau JSON)

Anehnya, Angular (framework yang menjadi dasar Ionic) tidak memberikan dukungan native untuk memparsing XML yang artinya kita harus bergantung pada package pihak ketiga untuk menambahkan fungsi ini di aplikasi.

Untuk tutorial ini kita akan memakai package node-xml2js. Package ini memberikan API yang paling mudah dan sederhana untuk memparsing XML menjadi array JavaScript.

Buka lagi aplikasi terminal dan jalankan (pastikan nodejs dan npm sudah terpasang):

npm install xml2js

Jika muncul pesan permission error, tambahkan perintah sudo di depan.

Setelah terpasang, mari kita definisikan struktur ata XML dan membaca data asli yang akan dipakai di aplikasi.

Di dalam editor teks pilihan silahkan tulis kode XML di bawah lalu simpan dengan nama comics.xml ke dalam folder comics/src/assets/data (untuk sub-folder data silahkan buat sendiri):

<?xml version="1.0"?>
<comics>
   <publication>
      <id>1</id>
      <title>Valiant</title>
      <publisher>Fleetway</publisher>
      <genre>Action/Adventure</genre>
   </publication>
   <publication>
      <id>2</id>
      <title>Victor</title>
      <publisher>IPC Magazines</publisher>
      <genre>Action/Adventure/War</genre>
   </publication>
   <publication>
      <id>3</id>
      <title>Lion</title>
      <publisher>IPC Magazines</publisher>
      <genre>Action/Adventure/War/Science Fiction/Information</genre>
   </publication>
   <publication>
      <id>4</id>
      <title>Battle</title>
      <publisher>IPC Magazines</publisher>
      <genre>Action/Adventure/War</genre>
   </publication>
   <publication>
      <id>5</id>
      <title>2000AD</title>
      <publisher>IPC Magazines</publisher>
      <genre>Thriller/Science Fiction/Myth/History</genre>
   </publication>
   <publication>
      <id>6</id>
      <title>Warlord</title>
      <publisher>IPC Magazines</publisher>
      <genre>War</genre>
   </publication>
   <publication>
      <id>7</id>
      <title>Eagle</title>
      <publisher>IPC Magazines</publisher>
      <genre>Science Fiction/Thriller/Adventure</genre>
   </publication>
   <publication>
      <id>8</id>
      <title>Transformers UK</title>
      <publisher>Marvel</publisher>
      <genre>Science Fiction/Action</genre>
   </publication>
</comics>

Seperti yang bisa pembaca lihat, struktur di atas sesungguhnya cukup sederhana. Kita hanya memiliki list daftar komik dimana setiap komiknya memiliki judul (title), penerbit (publisher), dan kategori (genre).

Sekarang mari kita buat logika untuk memparsing file XML ini. Buka file comics/src/pages/home/home.ts untuk mengimplementasi kode TypeScript:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HttpClient } from '@angular/common/http';
import 'rxjs/add/operator/map';
import xml2js from 'xml2js';

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

   public xmlItems : any;

   constructor(public navCtrl: NavController,
               public http   : HttpClient)
   {

   }



   ionViewWillEnter()
   {
      this.loadXML();
   }



   loadXML()
   {
      this.http.get('/assets/data/comics.xml')
      .map(res => res.text())
      .subscribe((data)=>
      {
         this.parseXML(data)
         .then((data)=>
         {
            this.xmlItems = data;
         });
      });
   }


   parseXML(data)
   {
      return new Promise(resolve =>
      {
         var k,
             arr    = [],
             parser = new xml2js.Parser(
             {
                trim: true,
                explicitArray: true
             });

         parser.parseString(data, function (err, result)
         {
            var obj = result.comics;
            for(k in obj.publication)
            {
               var item = obj.publication[k];
               arr.push({
                  id           : item.id[0],
                  title        : item.title[0],
                  publisher : item.publisher[0],
                  genre        : item.genre[0]
               });
            }

            resolve(arr);
         });
      });
   }


}

Pada kode di atas, kita terlebih dahulu mengimpor package node xml2js:

import xml2js from 'xml2js';

Kita juga akan mengimpor package HttpClient dan modul Reactive Extensions for JavaScript. Modul-modul ini akan memungkinkan kita memuat file eksternal serta memanfaatkan Promises dan Observables untuk mengelola data secara asynchronous:

import { HttpClient } from '@angular/common/http';
import 'rxjs/add/operator/map';

Method loadXML, sesuai namanya akan meng-handle pembacaan file comics.xml. Di dalamnya memakai map untuk mengubah data yang diimpor menjadi teks sebelum mengirimkannya ke method subscribe sebagai sebuah observable.

Setelah data berhasil dibaca kita lalu mengirimkan data tersebut ke method parseXML yang menggunakan Promise untuk menghandle data asynchronous yang di return, mengubah XML menjadi JSON dan mengisinya ke properti xmlitems (properti ini lah yang akan dipakai oleh halaman template kita untuk merender list komik di layar):

loadXML()
{
   this.http.get('/assets/data/comics.xml')
   .map(res => res.text())
   .subscribe((data)=>
   {
      this.parseXML(data)
      .then((data)=>
      {
         this.xmlItems = data;
      });
   });
}

Di method parseXML kita akan mulai membuat objek xml2js baru dengan mengirimkan data konfigurasi parser key/value berikut:

• trim: true (menghapus spasi kosong di depan dan akhir nodes)
• explicitArray: true (Selalu mengubah child node ke dalam array)

Opsi konfigurasi lain untuk xml2js bisa dilihat di sini.

Objek parser ini kemudian bisa kita pakai untuk memanggil method parseString yang mengubah xml menjadi JSON. Didalamnya kita hanya membaca objek JSON dari data menjadi objek yang kemudian kita push ke sebuah array dan diakhir method kita kirim ke pemanggilan method melalui resolve.

parseXML(data)
{
   return new Promise(resolve =>
   {
      var k,
          arr    = [],
          parser = new xml2js.Parser(
          {
             trim: true,
             explicitArray: true
          });

      parser.parseString(data, function (err, result)
      {
         var obj = result.comics;
         for(k in obj.publication)
         {
            var item = obj.publication[k];
            arr.push({
               id         : item.id[0],
               title      : item.title[0],
               publisher  : item.publisher[0],
               genre      : item.genre[0]
            });
         }

         resolve(arr);
      });
   });
}

Method loadXML akan kita panggil dari dalam ionViewWillEnter:

ionViewWillEnter()
{
   this.loadXML();
}

Method ionViewWillEnter bisa dimanfaatkan saat kita ingin melakukan sesuatu sesaat sebelum halaman template akan ditampilkan.

Selanjutnya mari kita atur template HTML agar data XML yang tadi dibaca bisa tampil di halaman view.

Buka file comics/src/pages/home/home.html dan ubah menjadi:

<ion-header>
   <ion-navbar>
      <ion-title>
         British Comics of the 60's - 80's
      </ion-title>
   </ion-navbar>
</ion-header>

<ion-content padding>

   <ion-item-group>
      <ion-item-divider color="light">XML</ion-item-divider>
      <ion-item *ngFor="let item of xmlItems">
         {{ item.title }}
      </ion-item>
   </ion-item-group>

</ion-content>

Tidak ada yang kompleks dari HTML kode di atas, hanya ngFor sederhana untuk membaca data JSON yang sudah diparsing untuk membuat elemen yang menampilkan data setiap judul komik.

Sebelum bisa kita lihat di browser desktop kita perlu mengimpor HttpClientModule dari Angular di dalam module root application. Dengan mengimpor modul ini kita bisa memakai HttpClient di dalam kelas komponen page Home.

Buka file comics/src/app/app.module.ts lalu impor HttpClientModule sebagai berikut:

import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
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';

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

Kembali ke aplikasi terminal dan jalankan perintah ionic serve. Kita akan melihat tampilan sebagai berikut.

Jika sudah muncul tampilan seperti di atas, pembaca sudah berhasil mengimpor, memparse dan mengubah data XML menjadi JSON lalu menampilkannya di halaman aplikasi Ionic dan semua itu dilakukan dengan cara yang relatif mudah. Kemudahan ini bisa didapatkan berkat penggunaan xml2js.

Untuk parsing CSV bisa di baca di lanjutan artikel ini di sini.

Diterjemahkan dari Parsing XML, CSV and TSV files with Ionic karya James Griffiths