Project Pertama Google Web Toolkit 2 Tanpa Integrated Development Environment


Kemarin waktu JAMU-1 (Java Meetup) JUG-Bandung yang berisikan GWT (Google Web Toolkit) ternyata banyak yang minta untuk JAMU-2 dibahas lagi tentang GWT, khususnya teknikalnya, soalnya kemarin waktu JAMU-1 memang tidak banyak masuk ke teknikalnya alias codingnya, hanya mengenalkan apa itu GWT dan kenapa GWT.

Pada tutorial ini saya akan bahas tentang bagaimana membuat project pertama GWT versi 2 tanpa IDE (Integrated Development Environment) seperti Eclipse IDE, ataupun NetBeans IDE, artinya murti menggunakan terminal 😀

Hoho, solit dunk?

Enggak juga 😀

Instalasi Apache Ant

Untuk menggunakan GWT tanpa IDE, kita memerlukan Apache Ant sebagai Build Toolnya, kenapa perlu? Karena dengan menggunakan Apache Ant, proses build aplikasi berbasis GWT akan lebih mudah dibandingkan kita harus melakukan kompilasi secara manual satu persatu kelas yang ada dalam aplikasi yang sedang dibangun 🙂

Pertama download Apache Ant nya di :

http://ant.apache.org/

Pastikan anda mengerti setting classpath pada sistem operasi yang anda buat, karena mengetahui cara setting classpath adalah hal yang wajib untuk Java Developer 😀 . Setelah setting classpath, sekarang anda bisa melakukan akses program ant lewat terminal dengan mengetikkan :

ant -version

Dan Apache Ant akan menampilkan versi yang terinstall, misal pada sistem operasi saya hasilnya :

Apache Ant version 1.8.0 compiled on February 1 2010

Selesai, lanjutkan ke proses selanjutnya…

Instalasi Google Web Toolkit

Setelah instalasi Apache Ant selesai, saatnya instalasi Google Web Toolkit. Apaan tuh Google Web Toolkit? Cape deh…. (ngapain ngikutin tutorial ini kalo gak ngerti GWT, liat disini dulu -> http://code.google.com/intl/id/webtoolkit/)

Pertama download dulu GWT nya disini :

http://code.google.com/intl/id/webtoolkit/download.html

Setelah itu tahapannya sama seperti instalasi Apache Ant, yaitu setting classpath agar GWT bisa langsung dieksekusi dari terminal. Untuk mengecek apakah GWT sudah terinstall, ketikkan :

webAppCreator

pada terminal, maka hasilnya akan seperti ini :

Missing required argument 'moduleName'
Google Web Toolkit 2.0.3
WebAppCreator [-overwrite] [-ignore] [-out dir] [-junit pathToJUnitJar] moduleName
where
-overwrite  Overwrite any existing files
-ignore     Ignore any existing files; do not overwrite
-out        The directory to write output files into (defaults to current)
-junit      Specifies the path to your junit.jar (optional)
and
moduleName  The name of the module to create (e.g. com.example.myapp.MyApp)
Missing required argument 'moduleName'Google Web Toolkit 2.0.3WebAppCreator [-overwrite] [-ignore] [-out dir] [-junit pathToJUnitJar] moduleName
where   -overwrite  Overwrite any existing files  -ignore     Ignore any existing files; do not overwrite  -out        The directory to write output files into (defaults to current)  -junit      Specifies the path to your junit.jar (optional)and   moduleName  The name of the module to create (e.g. com.example.myapp.MyApp)

Tergantung versi GWT yang terinstall 😀

Membuat Project

Sekarang saatnya kita membaut project, untuk membuat project GWT, caranya gumakan perintah berikut :

webAppCreator   -out   HelloGWT   khannedy.gwt.HelloGWT

Dimana -out HelloGWT artinya kita akan membuat project pada folder HelloGWT, lokasi folder bisa relative seperti diatas, atau absolut seperti /home/echo/Desktop/HelloGWT/ atau C:/Proyek/HelloGWT/

Dan khannedy.gwt.HelloGWT merupakan nama kelas yang akan dijadikan sebagai kelas aplikasi dalam GWT

Hasil trace nya adalah seperti dibawah ini :

Not creating tests because -junit argument was not specified.

Created directory HelloGWT/src
Created directory HelloGWT/war
Created directory HelloGWT/war/WEB-INF
Created directory HelloGWT/war/WEB-INF/lib
Created directory HelloGWT/src/khannedy/gwt
Created directory HelloGWT/src/khannedy/gwt/client
Created directory HelloGWT/src/khannedy/gwt/server
Created directory HelloGWT/src/khannedy/gwt/shared
Created directory HelloGWT/test/khannedy/gwt
Created directory HelloGWT/test/khannedy/gwt/client
Created file HelloGWT/src/khannedy/gwt/HelloGWT.gwt.xml
Created file HelloGWT/war/HelloGWT.html
Created file HelloGWT/war/HelloGWT.css
Created file HelloGWT/war/WEB-INF/web.xml
Created file HelloGWT/src/khannedy/gwt/client/HelloGWT.java
Created file HelloGWT/src/khannedy/gwt/client/GreetingService.java
Created file HelloGWT/src/khannedy/gwt/client/GreetingServiceAsync.java
Created file HelloGWT/src/khannedy/gwt/server/GreetingServiceImpl.java
Created file HelloGWT/src/khannedy/gwt/shared/FieldVerifier.java
Created file HelloGWT/build.xml
Created file HelloGWT/README.txt
Created file HelloGWT/.project
Created file HelloGWT/.classpath
Created file HelloGWT/HelloGWT.launch
Created file HelloGWT/war/WEB-INF/lib/gwt-servlet.jar

Setelah itu masuk ke folder  HelloGWT, tergantung folder yang dibuat dengan cara menggunakan perintah :

cd HelloGWT

sekarang project GWT sederhana sudah selesai 😀

Kok? Hehehe, emang sudah selesai kok 😀

Menjalankan Aplikasi

Untuk menjalankan aplikasi, kita hanya perlu menggunakan perintah :

ant devmode

tunggu sampai form aplikasi GWT Development Mode :

GWT Development Mode

GWT Development Mode

Setelah itu klik tombol Launch Default Browser, maka browser akan membuka aplikasi GWT yang tadi kita buat :

Web Application Starter Project 1

Web Application Starter Project 1

Jika di klik tombol Send nya :

Web Application Starter Project 2

Web Application Starter Project 2

Mudah kan? tapi ingat, ini adalah Development Mode, artinya bukan Production Mode. Jadi kalo aplikasi kita sudah jadi, bukan seperti ini cara menjalankannya 😀

Production Mode

Anggap saja kita sudah membuat aplikasi dan siap untuk dipublikasi alias diproduksi (production mode), maka tahapan sebelumnya bukanlah cara menjalankan aplikasinya.

Hasil dari GWT adalah WAR (Web Archive), dimana WAR dapat dideploy di server-server java seperti Apache Tomcat, Glassfish dan server Java yang lainnya, dan untuk membuat aplikasi GWT kita agar menjadi WAR, caranya mudah tinggal gumakan perintah :

ant war

maka sekarang akan terbuat file WAR dalam folder project yang tadi dibuat, dalam kasus ini file WAR yang ada pada project saya adalah HelloGWT.war 😀

Mudah kan?

Tanda IDE lagi 😀

Iklan

4 pemikiran pada “Project Pertama Google Web Toolkit 2 Tanpa Integrated Development Environment

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s