1. Membuat Worklight project
Untuk memilai membuat Worklight Project, bisa kita pilih dari menu File > New > Worklight Project, atau dari shortcut icon seperti gambat berikut, pilih Worklight Project
Kemudian ikuti Wizard untuk membuat Worklight Project seperti gambar berikut. Pilih "Hybrid Application" pada Project Templates, kemudian beri nama project, misalnya "Project1" lalu klik Next
Pada tampilan berikutnya, beri nama aplikasi yang akan kita buat, misalnya "AppTest", lalu klik Finish
Sebuah projet dengan nama "Project1" direktori yang berisi direktori-direktofi dan file-file akan dibankitkan (generate). Tempat kita menyimpan kode yang akan kita buat akan berada pada
- Direktori apps, di direktori ini ada direktori dengan nama aplikasi yang telah kita definisikan pada saat membuat project, dalam contoh ini adalah "AppTest". Direktori AppTest adalah direktori untuk menyimpan kode untuk antarmuka pengguna dari aplikasi yaitu file-file HTML5, CSS, JavaScript, gambar. File-file disini nantinya akan dipaketkan dalam file binary yang akan diinstall di perangkat.
- Direktori adapters, merupakan tempat file-file source code dari adapter yaitu komponen yang dapat dipanggil (invoke) dari kode yang berada antar muka yaitu di direktori apps. Kode dari adapter nantinya akan dikompilasi dan dideploy di Worklight Server. Adapter biasanya digunakan untuk menjembatani antara antar muka dengan data yang diambil dari Back-end system.
Disebelah kanan Project Explorer akan ditampilkan sebuah file konfigurasi dari aplikasi yaitu file application-descriptor.xml. File tersebut adalah file XML yang dapat kita edit dengan Aplication Descriptor Editor ataupun dapat kita ubah source dari text XML-nya. Kita bisa lihat dengan memilih tab Source di bagian bawah Editor.
Bagian penting dari source file dari Application Descriptor adalah element mainFile. Elemen ini menunjukan file html yang akan ditampilkan oleh aplikasi pada saat awal aplikasi dijalankan pada perangkat, pada contoh tutorial ini nilai dari element tersebut adalah AppTest.html. File tersebut berada di direktori apps/AppTest
<mainFile>AppTest.html</mainFile>
2. Edit antar muka aplikasi
Klik dua kali file AppTest.html yang ada di Project Explorer untuk membuka dan mengedit file tersebut dengan HTML editor.
Editor HTML akan terbuka lihat dibagian tengah Eclipse. Dengan editor ini kita bisa melihat dan mengedit tampilan HTML di bagian atas (lihat tanda no.1 pada gambar dibawah) dan juga dapat mengedit source HTML (lihat tanda no.2 pada gambar dibawah).
Cobalah untuk mengedit tulisa "AppTest" pada Editor menjadi "Hello my AppTest!", kemudian save dengan menekan Ctrl+S
Dibagian kanan Editor akan muncul Pallete view dan juga Properties view. Jika tidak muncul maka cobalah untuk mengeksplor beberapa tombol ikon yang ada diatas HTML Editor berikut
Pallet view seperti gambar dibawah ini dapat mempermudah kita untuk nenambahkan komponen elemen HTML ada editor baik pada bagian preview (lihat tanda no.1 pada gambar diatas) maupun pada source code (lihat tanda no.2 pada gambar diatas) hanya dengan melakukan drag & drop komponen yang kita inginkan, misalnya sebuah HTML tombol (button)
Akan ada komponen lain yang menarik untuk membuat tampilan antar muka aplikasi jika kita menggunakan komponen JQuery Mobile atau Dojo. Tapi saat ini belum akan kita bahas.
Properties view adalah view untuk mengedit properties dari komponen tampilan atau element HTML yang kita pilih di Editor. Properties bisa berarti attribute dari element HTML, attribute CSS (style) ataupun layout.
Cobalah tambahkan sebuah Submit Button, dari Pallet view ke preview Editor, sehingga kita dapatkan tampilan seperti ini
3. Build, deploy dan lihat hasilnya
Pada tutorial ini, kita tidak benar-benar akan membuat aplikasi mobile yang bisa diinstal di perangkat. Tetapi apa yang sudah kita buat dapat kita test dengan melihat tampilannya menggunakan Browser Simulator.
Build aplikasi dan deploy ke Worklight Server dengan cara mengklik kanan direktori TestApp, kemudian pilih Run As > Build All & Deploy
Mekanisme Build berarti Worklight Studio akan mengkompilasi project atau source code dari aplikasi kita sehingga dihasilkan file-file yang siap di-deploy di Worklight Server.
File-file hasil build dibangkitkan (generate) dan disimpan di direktori bin yaitu file dengan ekstensi .wlapp, .wladapter dan .war. Berikut adalah hasil dari build aplikasi yang sudah dibuat pada tutorial ini:
Setelah proses build, Worklight Studio akan melakukan proses Deploy, file-file tersebut ke Worklight Server. Status proses Build All & Deploy dapat dilihat di Console. Berikut adalah tampilan Console hasil proses build dan deloy yang sukses
Berikut adalah Console dari log output Worklight Server yang telah menjalankan proses deployment aplikasi. Worklight Server merupakan WebSphere Application Server Liberty profile yang berjalan (running) sebagai plug-in pada Eclipse (Worklight Studio).
Dapat dilihat bahwa URL aplikasi adalah http://localhost:10080/Project1/.
Akses Worklight Console dari URL berikut
http://localhost:10080/Project1/console
Klik link "Preview as Common Resources" untuk melihat aplikasi yang sudah di-deploy.
Mungkin anda tidak puas dan bertanya "Hasilnya seperti itu saja?"
Ya, memang seperti itu hasilnya.Tidak terlihat seperti mobile application? Memang belum menjadi mobile hybrid application, tapi dengan sedikit langkah lagi kita akan lihat aplikasi kita bisa jadi aplikasi yang jalan di perangkat bergerak kita, bisa di Android, iPhone/iPad, BB atau Windows Phone.
Kita lanjutkan nanti.
