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
Setelah itu klik tombol Launch Default Browser, maka browser akan membuka aplikasi GWT yang tadi kita buat :
Web Application Starter Project 1
Jika di klik tombol Send nya :
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 π
-6.520104
107.638648