Ứng dụng web trên App Engine sử dụng template của Golang. Phần 1.

Trong việc phát triễn ứng dụng web, ngoài lập trình còn một yếu tố không kém phần quan trọng là thiết kế. Hai công đoạn này đòi hỏi những kỹ năng khác nhau, nhưng lại khó mà tách rời với nhau. Mục đích của bài viết này (phần 1 của chuỗi 3 bài viết) chỉ nhằm giới thiệu cho các bạn một kỹ thuật để có thể phân chai công việc. Phần 1 cũng là một nơi thích hợp cho những bạn vừa mới bắt đầu.

Mức độ khó: 2
Yêu cầu: biết cách triễn khai ứng dụng trên nền tảng Google App Engine Go
Giao diện của chúng ta sẽ rất đơn giản như sau:

Mô tả ứng dụng:

Ứng dụng web gồm 3 trang, tương ứng với 3 menu "Home", "Contact", "About". Khi xem mỗi trang ta sẽ thấy 1 phần tiêu đề ("Home" có tiêu đề là "Home Page", tương tự cho "Contact" và "About") kèm theo nội dung chính của trang như sau:

Trang Home: gồm 1 bảng danh sách các sản phẩm của công ty. (như hình trên)
Trang Contact: chỉ gồm 1 đoạn văn bản bao gồm phương thức liên lạc.
Trang About: tương tự như Contact, chứa thông tin tự giới thiệu.

Tiến hành:

Chuẩn bị các file yêu cầu cảu môi trường App Engine

Tạo thư mục tên "exampletemplate".
Bên trong thư mục "exampletemplate" tạo 1 thư mục tên "sources" và 1 file "app.yaml".
Trong thư mục "source" tạo 1 file "index.go", nội dung của file chúng ta sẽ bàn sau.

Nội dung file "app.yaml" như sau:

Phân tích

Để biết người dùng yêu cầu xem trang nào, chúng ta cần tới các Query String Parameter, cụ thể như sau: với đường dẫn http://localhost:8080/?p=home ta sẽ trả về nội dung trang home, với p=contact ta sẽ trả về nội dung trang contact...
Quá đơn giản, cứ viết 1 cấu trúc switch-case, và trả về mã HTML tương ứng cho từng trường hợp. Ta có nội dung của file "index.go" phiên bản 1 như sau

Phiên bản 1

Quá đơn giản, ta lưu mã HTML của trang vào 3 hằng số HTML_HOME, HTML_CONTACT, HTML_ABOUT, dùng 1 cấu trúc switch-case với giá trị so sánh từ method FormValue(key string) của đối tuợng r (kiểu *http.Request). Nói ngắn gọn, r.FormValue("p") sẽ trả về cho ta giá trị của parameter p trên đường dẫn. Đơn giản là thế nhưng hãy nhìn sơ qua đaọn mã HTML của mỗi trang Home (đã được format cho dễ nhìn)

Bất kể khi nào muốn sửa nội dung, ta phải mò tìm trong mớ hổn độn code HTML để sửa.
Nếu xem xét kỹ, ta sẽ thấy mã HTML trùng lặp ở cả 3 trang chiếm khá nhiều, thực tế ta chỉ thấy sữ thay nội dung ở các thẻ:<title>, <h1 id="title">, <div id="detail">. Ta gần như đã x3 dung lượng bộ nhớ cần dùng cho khâu này.

Hai sự bất tiện trên sẽ nhân lê gấp vội vì trong thực tế, một trang web có nhiều thông tin hơn, cũng như cầu kỳ hơn rất nhiều.
Làm thế nào để hạn chế điều đó? Chắc hãn nếu bạn quen thuộc với việc lập trình bạn sẽ đã nghĩ ra cách rằng nên chia mã HTML ra thành nhiều phần, lần lượt in ra theo điều kiện, ví dụ:
___________________________________________________________
fmt.Fprint(w, `<!DOCTYPE html><html><head><title>`)
if r.FormValue("p") == "home" {
fmt.Fprint(w, `Home Page`)
} else if r.FormValue("p") == "contact" {
fmt.Fprint(w, `Contact Page`)
} else {
fmt.Fprint(w, `About Page`)
}
fmt.Fprint(w, `</title>.....`)
___________________________________________________________

Ổn không? Phải nói là ổn, thậm chí về mặt hiệu xuất về tài nguyên thì có thể nói khá cao là đằng khác. Thế nhưng vẫn tồn tại những điểm yếu, nảy sinh khó khăn trong quá trình phát triễn ứng dụng, các điểm yếu đó như sau:

Mỗi lần muốn thay đổi giao diện, ta phải biên dịch lại cả chương trình mặc dù quá trình tính toán logic có thể không hề thay đổi
Việc lập trình và thiết kế đi liền với nhau, khó có thể tách rời, phân chia công việc.

Những rắc rối này dẫn đến kỹ thuật sử dụng template sẽ trình bày ở phần sau.

OPEN-VN Blog

Chủ Nhật, 8 tháng 7, 2012