MỤC LỤC

.I Cài đặt Eclipse & Các Plugin.........................................................................................2

.I.1. Cài đặt Google Plugin.........................................................................................2
.I.2. Cài đặt Google Web Toolkit Designer................................................................2
.I.3. Restlet Framework..............................................................................................2
.II Tạo project....................................................................................................................3
.II.1. Khởi tạo project.................................................................................................3
.II.2. Cấu hình Restlet Framework.............................................................................4
.II.2.1. Thêm các file restlet.......................................................................................4
.II.2.2. Cấu hình file GENewsBeta.gwt.xml...............................................................4
.III Xây dựng Database và Services trên GAE..................................................................5
.III.1. Xây dựng Database..........................................................................................5
.III.1.1. Các thành phần cơ bản của một lớp dữ liệu JDO........................................5
.III.1.2. Xây dựng cơ sở dữ liệu cho ứng dụng..........................................................6
.III.1.3. Khai báo lớp sử dụng JPA............................................................................7
.III.2. Xây dựng services trên GAE............................................................................7
.III.2.1. Interface khai báo các services.....................................................................7
.III.2.2. Lớp cài đặt các services................................................................................7
.1 Phương thức doInit()..................................................................................................................................8
.2 Phương thức retreive()...............................................................................................................................8
.III.2.3. Lớp cấu hình đường dẫn services.................................................................9
.III.2.4. Cấu hình file web.xml...................................................................................9
.IV Xây dựng các module phía client..............................................................................10
.IV.1. Khởi tạo module client Category...................................................................10
.IV.2. Cấu hình file Categories.gwt.xml..................................................................11
.IV.3. Interface khai báo các services sẽ sử dụng.....................................................11
.IV.4. Thiết kế giao diện nhập liệu trong file Categories.java.................................12
.IV.5. Complile và Run............................................................................................14

Phan Minh Sơn 1

 ỨNG DỤNG CRUD TRÊN GAE

.I Cài đặt Eclipse & Các Plugin

Sử dụng phiên bản Eclipse Galieo 3.5

.I.1. Cài đặt Google Plugin

Google plugin cho eclipse bao gồm plugin cho Google app engine, Google web toolkit.
Trong Eclipse Galieo 3.5 có thể cài đặt như sau :
• Help > Install new software >
• Add > Location = http://dl.google.com/eclipse/plugin/3.5 > ok
Dưới đây là link hướng dẫn chi tiết cài đặt google plugin cho galieo 3.5 :
• http://code.google.com/eclipse/docs/install-eclipse-3.5.html
Google Plugin bao gồm các thành phần sau :
• App Engine Java SDK: Bộ phát triễn phần mềm của App Engine trên Java (GAE)
• Google Plugin for Eclipse: Bộ công cụ của google tích hợp vào eclipse
• Google Web Toolkit SDK: Bộ phát triễn phần mềm của Google Web Toolkit
(GWT)
• Các trình hỗ trợ debug, deploy lên google app engine.

.I.2. Cài đặt Google Web Toolkit Designer

Google Web Toolkit Designer là bộ công cụ hỗ trợ thiết kế giao diện web cho Java
Tương tự như cài đặt Google Plugin :
• Help > Install new software >
• Add > Location = http://dl.google.com/eclipse/inst/d2gwt/latest/3.5 > ok

.I.3. Restlet Framework

Restlet Framework là thư viện hỗ trợ xây dựng web services trên GAE với giao thức
REST và HTTP.
Download:
• Restlet for GAE: http://www.restlet.org/downloads/2.0/restlet-gae-2.0.4.zip
• Restlet for GWT: http://www.restlet.org/downloads/2.0/restlet-gwt-2.0.4.zip
File nén download về có chứa các file .jar, muốn sử dụng restlet framework, ta sẽ add các
file này vào thư mục lib của thư mục war của project.

Phan Minh Sơn 2

.II Tạo project
.II.1. Khởi tạo project

Kích chuột vào biểu tượng: ở góc trái phía trên màn hình.

Trong đó, genewsbeta.data là module dùng để xây dựng cơ sở dữ liệu và các web services
trên GAE, gồm 3 packages cơ bản sau:
genewsbeta.data
• GENewsBeta.gwt.xml:
file cấu hình cho module data
genewsbeta.data.client
• GENewsBeta.java
file codebehind của GENewsBeta.html (Giống như trong .Net)
• GreetingService.java
interface khai báo các services phải cài đặt trên server
• GreetingServiceAsync.java

Phan Minh Sơn 3

 interface khai báo các services sẽ sử dụng cho client
genewsbeta.data.server
• GreetingServiceImpl.java
class cài đặt các services được khai báo trong GreetingService.java
Ở đây ta không sử dụng GreetingService nên sẽ xóa hết các file này đi (gồm :
GreetingService.java, GreetingServiceAsync.java, GreetingServiceImpl.java). Đồng thời xóa
hết nội dung trong file GENewsBeta.java. Sau khi xóa file này sẽ có dạng như sau:
package genewsbeta.data.client;
import com.google.gwt.core.client.EntryPoint;
/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class GENewsBeta implements EntryPoint {
@Override
public void onModuleLoad() {
// TODO Auto-generated method stub
}
}

.II.2. Cấu hình Restlet Framework

.II.2.1. Thêm các file restlet
Ta sẽ thêm các file cần thiết trong restlet framework vừa download vào thư mục:
• workspace>GENewsBeta>war>WEB-INF>lib
Các file cần thêm vào gồm :
• 3 files org.restlet.jar, org.restlet.ext.servlet.jar, org.restlet.ext.xml.jar trong thư
mục lib của thư mục restlet-gae-2.0.4 vừa download về.
• 1 file org.restlet.jar ( phải đổi tên thành org.restlet.gwt.jar trước khi thêm vào)
trong thư mục restlet-gwt-2.0.4 vừa download về.
Tiếp theo, trong giao diện eclipse kích chuột phải vào project, chọn properties>Java
Build Path>Libararies>Add JARs…
Chỉ đường dẫn tới thư mục lib ở trên và chọn 4 file vừa add vào.

.II.2.2. Cấu hình file GENewsBeta.gwt.xml

Thêm dòng khai báo sử dụng thư viện Restlet vào :

Phan Minh Sơn 4

.III Xây dựng Database và Services trên GAE
.III.1. Xây dựng Database
GAE hỗ trợ JDO và JPA cho việc lưu trữ dữ liệu. Kiểu dữ liệu trên GAE là kiểu dữ liệu
hướng đối tượng.
JDO (Java data object) : lớp khai báo đối tượng cần lưu trữ. Một lớp kiểu JDO tương tự
như một table trong cơ sở dữ liệu quan hệ.
JPA (Java persistence api) : giao diện hỗ trợ việc thao tác dữ liệu (Thêm, nhập, xóa,
sửa…)

.III.1.1. Các thành phần cơ bản của một lớp dữ liệu JDO
Một lớp dữ liệu JDO sẽ gồm các thành phần cơ bản sau :
Khóa :
@PrimaryKey
@Persistent(valueStrategy = IdGeneratorStrategy.IDENTITY)
@Extension(vendorName="datanucleus", key="gae.encoded-pk", value="true")
private String key;

Quan hệ :
/**

Phan Minh Sơn 5

 * Relationship ones-to-many : category has many users
*/
@Persistent(mappedBy = "category")
@Element(dependent = "true")
private List<User> users = new ArrayList<User>();

Có thể giải thích như sau : Lớp Category có nhiều users. Mỗi User thuộc một category.
Khai báo dependent = “true” có nghĩa là khi xóa một đối tượng Category thì các đối tượng
User thuộc Category này cũng bị xóa theo.
Thuộc tính :
@Persistent
private String name;
@Persistent
private String description;

Properties (Get, Set) cho thuộc tính :

public String getName(){
return this.name;
}
public void setName(String name){
this.name = name;
}
public String getDescription(){
return this.description;
}
public void setDescription(String desc){
this.description = desc;
}

.III.1.2. Xây dựng cơ sở dữ liệu cho ứng dụng

Ứng dụng gồm 3 lớp dữ liệu cơ bản :
• Entry : lớp dữ liệu bài viết
• User : lớp dữ liệu người sử dụng (phóng viên, biên tập viên, độc giả, nhà quảng
cáo…)
• Category : lớp dữ liệu nhóm tin
Quan hệ giữa 3 lớp này :
• Category has many User
• User has many Entry
Chi tiết của 3 lớp này có thể tham khảo code kèm theo.

Phan Minh Sơn 6

 Ta xây dựng 3 lớp này nằm trong package genewsbeta.data.client.

.III.1.3. Khai báo lớp sử dụng JPA

Để sử dụng JPA cho các thao tác thêm nhập xóa sửa dữ liệu, ta khai báo lớp PMF.java
được đặt trong thư mục genewsbeta.data.server.
Chi tiết tham khảo code kèm theo.

.III.2. Xây dựng services trên GAE

Ta sẽ sử dụng Restlet framework để xây dựng các services CRUD cơ bản trên GAE. Ứng
với mỗi đối tượng dữ liệu (Category, User, Entry) sẽ gồm một interface khai báo các services
và một class cài đặt các services đó. Ngoài ra còn cần phải có một class mô tả các đường dẫn
sử dụng services, một class khai báo sử dụng JPA và một số cấu hình khác.
Ví dụ : Đối tượng category sẽ gồm :
• CategoriesResource.java (interface khai báo services)
• CategoriesServerResource.java (lớp cài đặt services)

.III.2.1. Interface khai báo các services

Một interface khai báo các services sẽ có dạng như sau :
public interface CategoriesResource {
@Get
public Category retreive();
@Put
public void insert(Category cate);
@Post
public void update(Category cate);
@Delete
public void remove();
}

@Get, @Put, @Post, @Delete gọi là các Annotation, dùng để khai báo phương thức sẽ
được gọi theo dạng request nào. Ví dụ : Client sẽ request phương thức retreive() theo kiểu
GET, còn update(Category cate) theo kiểu POST.
Các interface này sẽ được cài đặt ở Package genewsbeta.data.client (cũng có thể được đặt
ở genewsbeta.data.server).
Chi tiết các interfaces có thể tham khảo trong code kèm theo.

.III.2.2. Lớp cài đặt các services

Tại lớp này, ta sẽ tiến hành cài đặt cho các phương thức được khai báo. Nhìn chung các
thao tác là giống nhau cho cả 3 lớp Category, Entry, User.

Phan Minh Sơn 7

 Sau đây ta sẽ mô tả khái quát cách thức cài đặt các phương thức trong lớp
CategoriesServerResource
.1 Phương thức doInit()
Server sẽ thực hiện các công việc trong lớp này trước tiên mỗi khi có yêu cầu request tới
server.
protected void doInit() throws ResourceException{
// Lấy dữ liệu của param “key” trên đường dẫn.
// param “key” được khai báo trong lớp cấu hình đường dẫn
// ví dụ : nếu ta cấu hình đường dẫn như sau :
// http://localhost:8888/restlet/cate/{key}
// khi đó nếu url request tới server là
// http://localhost:8888/resltet/cate/kinhte
// thì {key} chính là “kinhte”
String name = (String) getRequest().getAttributes().get("key");
// Khai báo sử dụng JPA
pm = PMF.get().getPersistenceManager();
try{
if(name != null){
// tìm xem có category theo name
Query query = pm.newQuery(Category.class, "name ==
'"+name+"'");
// kết quả trả về
List<Category> lstcate = (List<Category>)
query.execute();
if(!lstcate.isEmpty()){
// lấy kết quả đầu tiên trả về
cate = lstcate.get(0);
}
}
}catch(Exception e){
System.out.println(e.toString());
}
}

.2 Phương thức retreive()

Lớp trả về đối tượng được request.
public Category retreive(){
Category temp = new Category();
try{

Phan Minh Sơn 8

 // cate là biến toàn cục, nó đã được khởi tạo trong phương
thức // doInit()
if(cate!=null){
temp.setKey(cate.getKey());
temp.setName(cate.getName());
temp.setDescription(cate.getDescription());
// Hiển thị danh sách các user thuộc category này
for(int i = 0; i < cate.getUsers().size(); i++){
temp.getUsers().add(cate.getUsers().get(i));
}
return temp;
}
}finally{
pm.close();
}
return null;
}

Chi tiết cài đặt các phương thức khác có thể tham khảo sourcecode kèm theo.

.III.2.3. Lớp cấu hình đường dẫn services

Ta cần tạo lớp cấu hình đường dẫn services, ở đây lớp này có tên là
GENewsBetaServerApplication trong package genewsbeta.data.server. Thành phần chính của
nó là
router.attach("/cate/{key}", CategoryServerResource.class);

Giải thích như sau : xuất phát từ đường dẫn mặc định (“/”). Nếu url có dạng cate/{key}
thì sẽ tham chiếu tới các services của Category. Đường dẫn mặc định sẽ được cấu hình trong
file web.xml. Nếu đường dẫn mặc định là /restlet/ thì đường dẫn đầy đủ để tham chiếu tới các
services của Category là :
http://localhost:8888/restlet/cate/{key}

.III.2.4. Cấu hình file web.xml

File GENewsBeta\war\WEB-INF\web.xml chứa các thông tin cấu hình các services.
Thay đổi nội dung của web.xml như sau :
<web-app>
<!-- Default page to serve -->
<welcome-file-list>
<welcome-file>GENewsBeta.html</welcome-file>
</welcome-file-list>
<context-param>
<param-name>org.restlet.clients</param-name>

Phan Minh Sơn 9

 <param-value>CLAP FILE</param-value>
</context-param>
<!-- Servlets -->
<servlet>
<servlet-name>GENewsBetaRestletServlet</servlet-name>
<servlet-class>org.restlet.ext.servlet.ServerServlet</servlet-class>
<init-param>
<param-name>org.restlet.application</param-name>
<param-value>genewsbeta.data.server.GENewsBetaServerApplication</param-
value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>GENewsBetaRestletServlet</servlet-name>
<url-pattern>/restlet/*</url-pattern>
</servlet-mapping>
</web-app>

.IV Xây dựng các module phía client

Sau khi xây dựng xong các dịch vụ trên GAE, ta tiếp tục xây dựng các module phía
client, gồm 3 module tương ứng với 3 đối tượng dữ liệu cơ bản : Category, User, Entry
Các module này được xây dựng dựa trên Google Web Toolkit, với sự hỗ trợ của Google
Web Toolkit Designer.
Sau đây ta sẽ sơ lượt qua module client cho Category

.IV.1. Khởi tạo module client Category

Kích chuột phải vào project>Google Web Toolkit>GWT Module

Phan Minh Sơn 10

 Sau khi tạo xong, module Categories sẽ gồm 3 packages sau :
genewsbeta.modules.categories
> Categories.gwt.xml : thông tin cấu hình cho module categories
genewsbeta.modules.categories.client
> Categories.java : file codebehind của Categories.html (giống .Net)
genewsbeta.modules.categories.server
Ở đây ta chỉ quan tâm đến 2 packages đầu tiên.

.IV.2. Cấu hình file Categories.gwt.xml

Sửa nội dung file này lại như sau :

.IV.3. Interface khai báo các services sẽ sử dụng

Tiếp theo, ta sẽ tạo ra lớp CategoriesResourceProxy trong package
genewsbeta.modules.categories.client
nội dung như sau :

Phan Minh Sơn 11

 @Get
public void retreive(Result<Category> callback);
@Put
public void insert(Category cate, Result<Void> callback);
@Post
public void update(Category cate, Result<Void> callback);
@Delete
public void remove(Result<Void> callback);

Chú thích :
Category cate : tham số
Result<Void> callback : kiểu trả về

.IV.4. Thiết kế giao diện nhập liệu trong file Categories.java

Cuối cùng, ta sẽ thiết kế giao diện nhập liệu trong file Categories.java thuộc package
genewsbeta.modules.categories.client
Ở đây ta sẽ sử dụng Google Web Toolkit Designer để thiết kế giao diện
Kích chuột phải vào file Categories.java > Open With > WindowBuilder Editor. Khi đó
sẽ xuất hiện thêm nút Design bên cạnh nút Source

Giao diện thiết kế sẽ hiện thị ra như sau :

Phan Minh Sơn 12

 Với Giao diện thiết kế của Google Web Toolkit Designer, việc thiết kế là rất đơn giản, ta
sẽ thiết giao diện nhập liệu Categories như sau :

Tiếp theo ta sẽ tạo sự kiện click cho các button (kích chuột phải để tạo sự kiện) :
Add event handler > click
Ở đây ta sẽ cài đặt sự kiện click cho button Create :
Khai báo biến toàn cục cateresource
private final CategoriesResourceProxy cateresource =
GWT.create(CategoriesResourceProxy.class);

Trong sự kiện click của button Create :

Phan Minh Sơn 13

 Chi tiết có thêm tham khảo trong file Categories.java của sorcecode kèm theo.

.IV.5. Complile và Run

Cuối cùng, ta sẽ compile tất cả các module trên ra mã javascript.

Phan Minh Sơn 14

 Sau đó, Run để kiểm tra

Phan Minh Sơn 15