Làm chủ Grails: Grails và Web di động

M là WWW mới Scott Davis , Tổng Biên tập, AboutGroovy.com Tóm tắt: Hiện nay, trên thế giới có khoảng 3,3 tỷ người sử dụng điện thoại di động và con số này vẫn đang tăng lên. Trong khi đó, việc truy cập Internet qua điện thoại di động cũng đang tăng lên nhanh chóng. Việc phát triển Web cho điện thoại di động đòi hỏi những yều cầu riêng biệt. Trong bài viết Làm chủ Grails này, Scott Davis sẽ giới thiệu với bạn về cách xây dựng những ứng dụng Grails thân thiện chạy trên điện thoại di...

Làm chủ Grails: Grails Web di động M WWW Scott Davis , Tổng Biên tập, AboutGroovy.com Tóm tắt: Hiện nay, giới có khoảng 3,3 tỷ người sử dụng điện thoại di động số tăng lên Trong đó, việc truy cập Internet qua điện thoại di động tăng lên nhanh chóng Việc phát triển Web cho điện thoại di động đòi hỏi yều cầu riêng biệt Trong viết Làm chủ Grails này, Scott Davis giới thiệu với bạn cách xây dựng ứng dụng Grails thân thiện chạy điện thoại di động Nhờ vào cơng nghệ nay, truy cập trang Web từ nhiều trình duyệt khác Những thư viện Ajax đại Prototype, Dojo YUI giúp giải khác trình duyệt Firefox, Internet Explorer Safari Nhưng người truy cập trang Web bạn từ điện thoại di động Nokia, Motorola hay Apple gặp rắc rối với trình duyệt Web thiết bị họ Ngay trình duyệt di động trang bị tính "hỗ trợ HTML đầy đủ" hiển thị tốt số nội dung Web đơn giản Bài viết hướng dẫn bạn tối ưu hóa ứng dụng Grails trình duyệt di động Sử dụng Web di động gia tăng Theo thống kê Trung tâm số liệu quốc tế Internet World Stats, có khoảng 1,4 tỷ người sử dụng Internet — chiếm khoảng 20 phần trăm dân số giới (xem Tài nguyên) Tại Bắc Mỹ, 3/4 dân số sử dụng Internet Một nửa tổng số 6,6 tỷ người trái đất sử dụng điện thoại di động Tại Bắc Mỹ, số người sử dụng điện thoại di động tương đương với số người sử dụng Internet Tại Hong Kong, tốc độ tiêu thụ điện thoại tăng 140 phần trăm, đó, số vùng Châu Âu ( Lithuania, Italia, and Luxembourg) có tốc độ tăng trưởng tới 150 phần trăm Đặc biệt, số khu vực, lượng điện thoại di động nhiểu dân số khu vực Colin Crawford, Phó Chủ tịch tập đồn Dữ liệu truyền thơng Quốc tế (IDG) nói (xem Tài nguyên): "Trong vài năm tới, điện thoại di động thay máy tính cá nhân thiết bị hàng đầu để truy cập internet Hiện nay, có khoảng 30% người sử dụng Internet giới thường xuyên truy cập từ điện thoại di động — chí số nước Nhật Bản — tỷ lệ 70%." Nếu bạn băn khoăn bạn nên cải tiến trang Web thân thiện với di động, số phần Sử dụng Web Di động gia tăng thuyết phục bạn Ý tưởng Web thân thiện di động ban đầu sở thích cá nhân Tơi mua iPhone chúng mắt phiên vào mùa hè năm 2007 Kể từ đó, tơi thường truy cập trang Web hỗ trợ thiết bị Tơi truy cập trang Web (trừ trang Web có applet Flash hay Java™, iPhone khơng hỗ trợ) Vấn đề nội dung có độ phân giải 800x600 (hay cao hơn) thường có chất lượng khơng tốt hình rộng 3,5 inch iPhone Những trang Web thường truy cập từ iPhone đáp ứng nửa yêu cầu mặt UI ràng buộc đặc biệt thiết bị Việc sử dụng m thay cho phương thức www truyền thống URL trang Web phổ biến giải pháp hiệu Những trang http://m.cnn.com, http://m.yahoo.com http://m.google.com hiển thị tốt điện thoại di động tơi Một số trang Web, http://www.twitter.com, biến đổi hiển thị hình: tơi truy cập qua máy tính, tơi xem tất đặc tính; tơi truy cập qua điện thoại di động, nội dung trang web thay đổi cho phù hợp với hình khiêm tốn điện thoại động Cùng URL, UI tối ưu hóa Tơi hướng dẫn bạn cách tối ưu hóa trang web bạn trang Web Những công nghệ cho người phát triển Web di động Từ người phát triển Java, biết ý tưởng ý tưởng 'Write Once, Run Anywhere' (viết lần, chạy tảng hệ thống) Tuy nhiên, việc tối ưu hóa ứng dụng Java tơi cho hệ điều hành hay mơ hình phần cứng định chí cịn chưa có ý nghĩ tơi Nhưng bạn gặp khó khăn phát triển Web di động, bạn nên nắm vững ba công nghệ hàng đầu hộ trợ thiết bị di động khác nhau:  Ngôn ngữ Đánh dấu Mạng không dây (WML) 1.x  WML 2.x hay Mobile Profile (XHTML-MP)  HTML hỗ trợ iPhone Khi hướng dẫn bạn, bạn kết hợp ngơn ngữ đánh dấu WML XHTMLMP vào Groovy Server Pages (GSPs) mà bạn xây dựng với Grails để tạo trang Web thân thiện với di động Và hướng dẫn bạn cách tối ưu hóa HTML sinh Grails để giúp trang hoạt động tốt iPhone Sử dụng WML 1.x kết hợp với Grails WML ngôn ngữ đánh dấu kế thừa từ HTML, khơng phải HTML (WML 1.0 giới thiệu vào năm 1998 WML 1.3 phiên nay.) Đáng ý là, bạn khơng thể xem WML trình duyệt Web bình thường (trừ phi bạn dùng mơ phỏng) bạn khơng thể xem HTML trình duyệt WML Do vậy, nhà cung cấp điện thoại di động thường hỗ trợ cổng chuyển đổi HTML-thành-WML sản phẩm điện thoại di động họ Về loạt viết Grails khung làm việc phát Web đại, kết hợp công nghệ Java phổ biến Spring Hibernate với kỹ thuật đương thời quy ước cấu hình Được viết ngơn ngữ Groovy, Grails cho phép bạn tích hợp trực tiếp với mã trình Java kế thừa bạn Trong đó, tạo linh hoạt cho ngôn ngữ kịch Sau nghiên cứu Grails, bạn thấy việc phát Web theo phương pháp hoàn toàn khác WML truyền qua giao thức Wireless Access Protocol (WAP), giống HTML truyền qua giao thức HTTP WAP WML thường chuyển đổi cho giao tiếp bản: Điều thường thấy đặc tả điện thoại di động có hỗ trợ trình duyệt WAP ngơn ngữ đánh dấu WML 1.x (xem Tài nguyên biết thông tin chi tiết đặc tả WML WAP) Nếu bạn hướng tới mục tiêu người sử dụng BlackBerry, bạn nên quan tâm tới WML ứng dụng bạn (BlackBerry chiếm khoảng 40% thị phần điện thoại thông minh, iPhones Windows® Mobile vị trí thứ hai thứ ba.) Điện thoại thơng minh BlackBerry sử dụng trình duyệt WAP, nhiều người sử dụng thiết bị thích tải trình duyệt Web thực Opera Mini (xem Tài nguyên) Lập kế hoạch cho chuyến công tác Nếu bạn nghiên cứu từ đầu loạt viết Làm chủ Grails, bạn hẳn sẵn sàng với việc tạo ứng dụng lập kế hoạch chuyến (trip planner) thân thiện với điện thoại di động Hãy tạo tệp có tên testwml.gsp thư mục web-app ứng dụng trip planner nhập vào tệp vừa tạo mã trình, biểu thị Ví dụ 1: Ví dụ WML tĩnh

From: DEN

To: ORD

UAL 1234

Jun 30, 10:30am

Next

From: ORD

To: DEN

UAL 9876

Jul 02, 1:15pm

Previous

Bạn xem trực tiếp trang (trên điện thoại bạn) địa http://www.davisworld.org/testwml.gsp Bạn quen với việc xem HTML GSP Trong trường hợp này, bạn sử dụng WML thay cho HTML Khi bạn gửi WML từ GSP, bạn phải viết đè lên kiểu MIME mặc định từ text/html thành text/vnd.wap.wml, dịng Ví dụ Nếu bạn xử lý WML tĩnh, bạn đơn giản tạo tệp với mở rộng WML thay mở rộng GSP Sau đó, phần lớn máy chủ Web gửi trả lại kiểu MIME mà không cần tới phương thức gọi response.setContentType Trong tệp $TOMCAT_HOME/conf/web.xml, bạn thấy ánh xạ MIME cho tệp WML thiết lập Nếu bạn sử dụng Apache HTTPD, ánh xạ mặc định tương tự cho tệp WML có tệp $APACHE_HOME/conf/mime.types Ví dụ biểu thị ánh xạ kiểu MIME Tomcat: Ví dụ Thiết lập kiểu MIME Tomcat wml text/vnd.wap.wml Hãy xem lại Ví dụ 1, điều bạn cần ý DOCTYPE Việc bao gồm câu lệnh Định nghĩa Kiểu Tài liệu (DTD) giúp định danh tệp testwml.gsp tài liệu WML Chú ý tài liệu không bọc thẻ thơng thường Nó bắt đầu kết thúc thẻ Điều bạn cần ý Ví dụ việc thiếu phần Mỗi trang WML card, với thuộc tính id thuộc tính title thân thiện với người sử dụng Việc tải nhiều trang/thẻ tệp đơn lẻ hồn tồn bình thường Đây giải pháp thích hợp dòng điện thoại di động hệ cũ có đường truyền liệu hẹp Bạn tải thời điểm nhiều, yêu cầu nhận chuyển liệu từ điện thoại bạn tới máy chủ Bạn xem thẻ thời điểm, nên thẻ lại nạp sẵn máy di động bạn Với cách này, việc điều hướng xảy hồn tồn phía máy khách Những thẻ

quen thuộc với người phát triển HTML Thẻ WML tương tự thẻ HTML , không phân biệt mặt cú pháp (xem Tài nguyên để tìm hiểu thêm WML) Đây thủ thuật WML thơng minh Bởi bạn làm việc với nội dung dành riêng cho điện thoại di động, bạn tạo siêu liên kết để gọi tới điện thoại người sử dụng chọn liên kết Trong Ví dụ 3, số điện thoại 303-555-1212 gọi: Ví dụ Liên kết gọi WML Chú ý giao thức liên kết không giống với giao thức http:// — mà có dạng wtai://, tên viết tắt Wireless Telephony Applications Interface Bộ mô WML Để hoàn trả trang PC, bạn cần mô WAP (xem Tài nguyên để biết thêm thông tin mô viết này) Truy cập phần mô dotMobi, mô áp dụng applet Java Gõ vào URL chuỗi davisworld.org/testwml.gsp (Chú ý tiền tố http:// cung cấp từ trước.) Sau đó, bạn thấy kết giống Hình 1: Hình Trang WAP mô Chú ý mô dotMobi có hai giao diện khác Chúng khơng giúp tạo cảm nhận khác mà khác khả chúng Nếu bạn thích mơ thiết bị đó, nhà sản xuất phần cứng hầu hết def mlist = { if(!params.max) params.max = [airportList:Airport.list(params)] } Bây giờ, chép grails-app/views/airport/list.gsp sang mlist.gsp (Sau đó, tơi hướng dẫn bạn số cách chuyển hướng người sử dụng điện thoại di động tới nội dung xác.) Trình đánh giá cho biết trang Web không trả lại XHTML-MP Hãy sửa mlist.gsp cho bao gồm DTD cần thiết thuộc tính xmlns thẻ Bạn nên vơ hiệu hóa thẻ meta thiết lập kiểu nội dung cho text/html Bước cuối cùng: chép dòng chứa CSS từ grails-app/views/layout/main.gsp sang tệp (SiteMesh — thư viện khn mẫu mà Grails sử dụng — cấu hình để trang trí mặc định cho tệp text/html.) Ví dụ biểu thị tệp mlist.gsp: Ví dụ Chuyển trang GSP thành XHTML-MP Airport List Trong bạn sửa tệp, bạn muốn đơn giản hóa bố cục bảng Trình đánh giá cho biết lỗi với thẻ , nên bạn cần xóa bỏ thẻ Bởi hình điện thoại di động có chiều rộng ngắn chiều cao, bố cục Ví dụ trơng tốt hơn: Ví dụ Đơn giản hóa bảng ${airport.id?.encodeAsHTML()} ${airport.iata?.encodeAsHTML()} ${airport.name?.encodeAsHTML()} Hình cho thấy trang mơ iPhone: Hình Trang Liệt kê tùy chỉnh cho iPhone Hình 10 cho thấy ready.mobi đánh trip planner sau tùy chỉnh: Hình 10 Trang Liệt kê vượt qua đánh giá Tốt nhiều phải không? Và cần thay đổi chút vượt qua đánh giá ready.mobi Gọi lại từ "Thay đổi khung nhìn với Groovy Server Pages" mà bạn tạo thay đổi khuôn mẫu mặc định cách gõ grails install-templates cửa sổ lệnh Phát triển trang dành cho iPhone iPhone có lẽ ba kiểu thiết bị dễ để hỗ trợ Bạn không cần không cần làm điều khác biệt so với việc phát triển trang Web bình thường Trình duyệt Safari iPhone viết mã trình tương tự mã trình trình duyệt máy tính cá nhân Do vậy, người thấy Safari giống với họ thấy trình duyệt thơng thường khác Mặc dù vậy, bạn gửi số trả lại ẩn iPhone mà thơi Ví dụ, hình iPhone có độ phân giải 320x480 Trong đó, trình duyệt thiết lập mặc định chiều rộng trang Web 980 pixel Điều giúp bạn đọc tốt văn hình điện thoại di động thiết lập chế độ phong cảnh, văn nhỏ hình điện thoại di động thiết lập chế độ chân dung Đừng lo lắng điều này, với thẻ meta đơn giản, bạn điều chỉnh kích cỡ trang Web: Thẻ viewport cho phép bạn cung cấp gợi ý cho trình duyệt di động Safari Mã trình Ví dụ giúp tăng đáng kể khả đọc trang Web hiển thị iPhone (Tuy nhiên, mô iPhone Firefox không hỗ trợ thẻ meta Do vậy, để xem trang Web hoạt động nào, bạn cần iPhone thực.) Ví dụ Thiết lập viewport dành cho iPhone inital-scale có giới hạn từ tới 10 hỗ trợ giá trị phân số Bạn sử dụng giá trị width height (được biểu thị Ví dụ 10), với giá trị tối đa lên tới 10.000 pixel: Ví dụ 10 Thiết lập giá trị width height cho viewport Các siêu liên kết iPhone iPhone cung cấp số xử lý đặc biệt gặp liên kết Nếu bạn sử dụng tiền tố tel: thay http://, biểu thị Ví dụ 11, bạn nhấn lên liên kết, số điện thoại gọi: Ví dụ 11 Những liên kết gọi iPhone

telephone number: 303-555-1212

Nếu bạn sử dụng tiền tố truyền thống mailto:, biểu thị Ví dụ 12, bạn nhấn lên liên kết, ứng dụng thư điện tử khởi động: Ví dụ 12 Những liên kết thư điện tử

mail: Scott Davis

Nếu bạn cung cấp liên kết với Google Maps, biểu thị Ví dụ 13, bạn nhấn lên liên kết, ứng dụng Google Maps gốc khởi động thay hồn trả Safari: Ví dụ 13 Các liên kết Google Map

local google maps: DEN

Việc nhập điểm đầu điểm cuối, biểu thị 14, giúp người sử dụng biết lộ trình họ nhấn lên liên kết: Ví dụ 14 Lộ trình lái xe Google Map

driving directions: Directions

Các chiến lược dành cho Web di động Bây giờ, bạn biết cách tạo nội dung cho ba kiểu thiết bị bản, tất bạn cần làm xác định yêu cầu cho ứng dụng bạn Có ba chiến lược mà bạn cần thực Tạo trang Web dành riêng cho nội dung di động Như bạn biết phần trước, phương thức m nhiều trang Web sử dụng Google, Yahoo!, CNN tất thiết lập miền m tách biệt với trang chính, dành cho nội dung di động Nếu bạn không muốn thời gian với Hệ thống Tên Miền (DNS), bạn tạo URL http://mysite.org/mobile Bạn ký miền mobi dành riêng cho nội dung di động Kiểm tra tác nhân người dùng Tất trình duyệt Web tự đồng với máy chủ chúng gửi yêu cầu liệu tới máy chủ Bạn sử dụng thông tin để tùy biến trang Web cho phù hợp với nội dung dành cho thiết bị di động (Công nghệ http://twitter.com sử dụng.) Truy cập http://davisworld.org/echo.gsp Sử dụng vòng lặp đơn giản, trang Ví dụ 15 trả lại liệu cho HTTP request: Ví dụ 15 Hiển thịRequest Headers Request Headers Header Value ${name} ${request.getHeader(name)} Như bạn thấy Hình 11, trình duyệt Firefox tơi cung cấp nhiều thơng tin tơi mở địa http://davisworld.org/echo.gsp: Hình 11 Xem phần đầu HTTP Dựa chuỗi user-agent biểu thị Hình 11, bạn thấy người yêu cầu chạy hệ điều hành Mac với Intel CPU Bạn biết phiên OS (10.5), chế hồn trả HTML (Gecko) trình duyệt thời (Firefox) Ví dụ 17 cho thấy số chuỗi user-agent phổ biến khác: Ví dụ 17 Các chuỗi user-agent phổ biến BlackBerry7520/4.0.0 Profile/MIDP-2.0 Configuration/CLDC-1.1 UP.Browser/5.0.3.3 UP.Link/5.1.2.12 Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3 Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; NET CLR 1.1.4322) Bằng cách sử dụng giá trị request.getHeader("user-agent"), bạn hiển thị tốt nội dung trình duyệt tương ứng Gửi lại trình duyệt chấp nhận Chiến lược thứ ba nhằm đáp ứng trình duyệt thực muốn Mỗi yêu cầu chứa giá trị accept giá trị user-agent Trình duyệt Firefox gửi giá trị accept này: text/html,application/xhtml+xml,application/xml; Điều cho biết máy chủ mà Firefox hoạt động tốt text/html Nếu máy chủ khơng có liệu text/html, gửi application/xhtml+xml Nếu khơng có hai liệu trên, máy chủ duyệt qua danh sách tìm thấy kiểu MIME mà trả lại Trình duyệt WAP 1.x yêu cầu text/vnd.wap.wml điện thoại đại yêu cầu application/vnd.wap.xhtml+xml Bằng cách ý điều này, lập trình viên gửi lại liệu tương ứng Tất nhiên, ba chiến lược không tách biệt với Hãy sử dụng tất chiến lược để đảm bảo trang Web bạn hoạt động tốt 3,3 tỷ máy điện thoại di động toàn giới Kết luận Việc tối ưu hóa ứng dụng Grails bạn giúp hoạt động tốt điện thoại di động có nhiều mức độ phức tạp khác nhau: dễ dàng (với iPhone), trung bình (với thiết bị XHTML-MP) khó (với thiết bị WML 1.x) Với mơ trình đánh giá giới thiệu viết này, bạn hồn tồn hỗ trợ Web di động Trong viết tiếp theo, bạn nghiên cứu cách làm việc với sở liệu Grails Bạn tìm hiểu Mapping DSL, cách sử dụng thích Hibernate tệp HBM Với kỹ thuật này, bạn sử dụng bảng trường tên để kết nối với Grails, chí chúng khơng tương ứng với quy ước đặt tên theo tiêu chuẩn Grails Mục lục  Sử dụng WML 1.x kết hợp với Grails  Sử dụng WML 2.X (hay XHTML-MP) kết hợp với Grails  Phát triển trang dành cho iPhone  Các chiến lược dành cho Web di động  Kết luận ... di động — chí số nước Nhật Bản — tỷ lệ 70%." Nếu bạn băn khoăn bạn nên cải tiến trang Web thân thiện với di động, số phần Sử dụng Web Di động gia tăng thuyết phục bạn Ý tưởng Web thân thiện di. .. WML XHTMLMP vào Groovy Server Pages (GSPs) mà bạn xây dựng với Grails để tạo trang Web thân thiện với di động Và hướng dẫn bạn cách tối ưu hóa HTML sinh Grails để giúp trang hoạt động tốt iPhone... thời, điện thoại di động trung thành với WML WML 1.x phải đối mặt với thách thức — làm việc tốt với điện thoại di động Ngày nhiều điện thoại di động chuyển tảng WML sang trình duyệt Web PC Như phần