Thai IT Business Development Delegation to Tokyo, Japan: November 2012
Google App Engine Using Eclipse
1. 1
Hand-on
Exercises
การพัฒนาโปรแกรม
Web Programming
บน Cloud Computing
โดยใช้
Google App Engine
Assoc. Prof. Dr.Thanachart Numnonda
and
Asst Prof.Thanisa Kruawaisayawan
Mini Master of Java Technology
Faculty of Information Technology
King Mongkut Institute of Technology Ladkrabang
August 2011
Thanachart Numnonda / Thanisa Kruawaisayawan
36. 36
Exercise 5 GWT : Client/Server Communication
เนื้อหาที่ต้องศึกษาก่อน
• การพัฒนาโปรแกรมโดยใช้ Google Web Toolkit Framework
GWT มีวิธีการที่จะพัฒนาโปรแกรมที่จะติดต่อระหว่าง Client กับ Server คือ RPC (Remote
Procedure Call) โดยจะต้องมีการพัฒนาโปรแกรมจาวาที่เป็น Interface และ Class ต่างๆที่เกี่ยวข้อง
แบบฝึกหัดนี้เป็นการพัฒนาโปรแกรม GWT-RPC โดยการทดลองสร้าง Service สำหรับการแสดง
ข้อความแบบสุ่ม (Random Quote Generator) จากนั้นจะทดสอบการรันโปรแกรมบน Development Server
ก่อนที่จะติดตั้งลงบน Google App Engine
5.1 การพัฒนา Random Quote Service
ขั้นตอนนี้จะเป็นการปรับปรุง GWT-RPC ที่พัฒนาขึ้น เพื่อให้ Server ส่งข้อความแบบสุ่มกลับมาแสดง
ยังเครื่อง Client เมื่อมีการเรียกใช้ Service โดยจะมีขั้นตอนดังนี้
1. ปรับปรุงโปรแกรม GreetingServiceImpl.java ให้เป็นไปดัง Listing ที่ 5.1
2. ปรับปรุงโปรแกรม GreetingService.java และ GreetingServiceAsync.java เพื่อให้มี interface
method ดังนี้
String myMethod(String s) throws IllegalArgumentException;
3. ในโปรแกรม Thaiawtapp.java ให้กำหนด แล้วปรับปรุงเมธอด onModuleLoad() ให้เป็นไปดัง
Listing ที่ 5.1 ซึ่งจะต้องทำการ import คลาสต่างๆที่เกี่ยวข้องให้ถูกต้อง (import
com.google.gwt.user.client.Timer;)
4. รันโปรเจ็ค thaigwtapp จะได้ผลลัพธ์เป็นข้อความสุ่มที่เปลี่ยนแปลงไปเรื่อยๆดังรูปที่ 5.1
5. ทำการ deploy บน Google App Engine แล้วทดลองเรียกโปรแกรมจาก url ที่ http://thaigwtapp
.appspot.com
รูปที่ 5.1 ผลลัพธ์การรันโปรแกรม Random Quote Generator
GWT : Client/Server Communication Thanachart Numnonda / Thanisa Kruawaisayawan
37. 37
Listing ที่ 5.1 โปรแกรม GreetingServiceImpl.java
package org.thaijavadev.Main.server;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;
import org.thaijavadev.Main.client.GreetingService;
import org.thaijavadev.Main.shared.FieldVerifier;
import com.google.gwt.user.server.rpc.RemoteServiceServlet;
/**
* The server side implementation of the RPC service.
*/
@SuppressWarnings("serial")
public class GreetingServiceImpl extends RemoteServiceServlet implements
GreetingService {
private Random randomizer = new Random();
private static final long serialVersionUID = -15020842597334403L;
private static List quotes = new ArrayList();
static {
quotes.add("No great thing is created suddenly - Epictetus");
quotes.add("Well done is better than well said - Ben Franklin");
quotes.add("No wind favors he who has no destined port - Montaigne");
quotes.add("Sometimes even to live is an act of courage - Seneca");
quotes.add("Know thyself - Socrates");
}
public String myMethod(String s) {
return (String) quotes.get(randomizer.nextInt(5));
}
}
Listing ที่ 5.2 sourcecode ของเมธอด onModuleLoad() ที่ปรับปรุงใหม่
public void onModuleLoad() {
final Label quoteText = new Label();
Timer timer = new Timer() {
public void run() {
//create an async callback to handle the result:
AsyncCallback callback = new AsyncCallback() {
public void onFailure(Throwable arg0) {
//display error text if we can't get the quote:
quoteText.setText("Failed to get a quote");
}
public void onSuccess(Object result) {
GWT : Client/Server Communication Thanachart Numnonda / Thanisa Kruawaisayawan
38. 38
//display the retrieved quote in the label:
quoteText.setText((String) result);
}
};
greetingService.myMethod(null, callback);
}
};
timer.scheduleRepeating(1000);
RootPanel.get().add(quoteText);
}
}
GWT : Client/Server Communication Thanachart Numnonda / Thanisa Kruawaisayawan
39. 39
Exercise 6 การพัฒนาโปรแกรม RIA ที่เรียกใช้ Web Services
แบบฝึกหัดนี้เป็นตัวอย่างการพัฒนาโปรแกรม GWT-RPC โดยการเรียกใช้ Web Services ของ
Dictionary Service ที่พัฒนาขึ้นในแบบฝึกหัดที่ 2 โดยแทนที่จะพัฒนา Traditional Client แบบที่เรียกใช้ไฟล์
HTML แต่จะมาพัฒนาโปรแกรมแบบ Rich Internet Application โดยใช้ GWT-RPC
6.1 การเพิ่มเมธอด Service ของโปรแกรม GWT-RPC
ขั้นตอนนี้จะเป็นการเพิ่มเซอร์วิสของโปรแกรม GWT-RPC ที่พัฒนาในแบบฝึกหัดที่ผ่านมาอีกหนึ่งเมธอด
ชื่อ searchWord ในกรณีนี้จะต้องปรับปรุงไฟล์ทั้งหมดสามไฟล์คือ GreetingService.java,
GreetingServiceAsync.java และ GreetingServiceImpl.java โดยมีขั้นตอนการพัฒนาดังนี้
1. ปรับปรุง interface ที่ชื่อ GreetingService.java โดยเพิ่มคำประกาศเมธอดดังนี้
public String searchWord(String s);
2. ปรับปรุง interface ที่ชื่อ GreetingServiceAsync.java โดยเพิ่มคำประกาศเมธอดดังนี้
public void searchWord(String s, AsyncCallback<String> callback);
3. ปรับปรุง source code ของไฟล์ GreetingServiceImpl.java โดยการ implement เมธอดที่ชื่อ
searchWord ตาม Listing ที่ 6.1
Listing ที่ 6.1 sourcecode ของเมธอด searchWord
public String searchWord(String s) {
try {
String urlStr =
"http://services.aonaware.com/DictService/DictService.asmx/Define?word=" + s;
URL url = new URL(urlStr);
BufferedReader reader = new BufferedReader(new InputStreamReader(url.openStream()));
String line;
StringBuffer responseData = new StringBuffer();
while ((line = reader.readLine()) != null) {
responseData.append(line + "<br>");
}
reader.close();
return responseData.toString();
} catch (IOException ex) {
return "error";
การพัฒนาโปรแกรม RIA ที่เรียกใช้ Web Services Thanachart Numnonda / Thanisa Kruawaisayawan
40. 40
}
}
6.2 การปรับปรุงโปรแกรม Thaiawtapp.java
ขั้นตอนนี้จะเป็นการแก้ไขโปรแกรม Thaiawtapp.java เพื่อให้แสดงผลลัพธ์ดังตัวอย่างในรูปที่ และเมื่อกด
ปุ่ม Lookup โปรแกรมก็จะแสดงผลลัพธ์แบบ Partial Screen Update โดยการแทรกความหมายของคำที่ค้นหาดัง
ตัวอย่างในรูปที่ โดยมีขั้นตอนการพัฒนาดังนี้
1. ปรับปรับปรุงโปรแกรม Thaiwatapp.java ให้เป็นไปดัง Listing ที่ 6.2
2. รันโปรเจ็ค thaigwtapp จะได้ผลลัพธ์ดังตัวอย่างในรูปที่ 5.1 และ
3. ทำการ deploy บน Google App Engine แล้วทดลองเรียกโปรแกรมจาก url ที่ http://thaigwtapp
.appspot.com
Listing ที่ 6.2 sourcecode ของโปรแกรม Thaiawtappjava
public void onModuleLoad() {
InlineLabel label = new InlineLabel("Lookup meaning of Word");
final TextBox text = new TextBox();
// final TextArea ta = new TextArea();
// ta.setPixelSize(600, 400);
final HTML ta = new HTML();
Button bn = new Button("Lookup");
VerticalPanel panel = new VerticalPanel();
panel.add(label);
panel.add(text);
panel.add(bn);
panel.add(ta);
RootPanel.get().add(panel);
final AsyncCallback callback = new AsyncCallback() {
public void onFailure(Throwable arg0) {
//display error text if we can't get the quote:
ta.setHTML("Failed to get a quote");
}
public void onSuccess(Object result) {
//display the retrieved quote in the label:
การพัฒนาโปรแกรม RIA ที่เรียกใช้ Web Services Thanachart Numnonda / Thanisa Kruawaisayawan