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

Chia sẻ: Nguyen Nhi | Ngày: | Loại File: PDF | Số trang:37

Thêm vào BST

Báo xấu

57
lượt xem 4
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

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...

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Làm chủ Grails: Grails và Web di động

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 động. Nhờ vào những công nghệ mới hiện nay, chúng ta có thể truy cập trang Web từ nhiều trình duyệt khác nhau. Những thư viện Ajax hiện đại như là Prototype, Dojo và YUI sẽ giúp giải quyết sự khác nhau giữa các trình duyệt Firefox, Internet Explorer và Safari. Nhưng những người truy cập trang Web của bạn từ một chiếc điện thoại di động Nokia, Motorola hay Apple có thể gặp rắc rối với những trình duyệt Web trên những thiết bị của họ. Ngay cả những trình duyệt di động mới nhất được trang bị tính năng "hỗ trợ HTML đầy đủ" cũng chỉ có thể hiển thị tốt một số nội dung Web đơn giản. Bài viết này sẽ hướng dẫn bạn tối ưu hóa ứng dụng Grails trên những trình duyệt di động. Sử dụng Web di động đang gia tăng Theo thống kê của Trung tâm số liệu quốc tế Internet World Stats, hiện có khoảng 1,4 tỷ người đang sử dụng Internet — chiếm khoảng 20 phần trăm dân số thế 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 trong tổng số 6,6 tỷ người trên trái đất đang 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, trong khi đó, một số vùng ở Châu Âu ( như Lithuania, Italia, and Luxembourg) có tốc độ tăng trưởng tới 150 phần trăm. Đặc biệt, ở một số khu vực, lượng điện thoại di động còn nhiểu hơn dân số của khu vực đó. Colin Crawford, Phó Chủ tịch tập đoàn Dữ liệu truyền thông Quốc tế (IDG) nói rằng (xem Tài nguyên): "Trong vài năm tới, điện thoại di động sẽ thay thế máy tính cá nhân như là một thiết bị hàng đầu để truy cập internet. Hiện nay, đã có khoảng 30% người sử dụng Internet trên thế giới thường xuyên truy cập từ điện thoại di động — thậm chí ở một số nước như Nhật Bản — tỷ lệ này là 70%." Nếu bạn đang băn khoăn tại sao bạn nên cải tiến trang Web của thân thiện hơn với di động, thì những con số trong phần Sử dụng Web Di động đang gia tăng có thể đã thuyết phục được bạn. Ý tưởng Web thân thiện di động của tôi ban đầu chỉ là sở thích cá nhân. Tôi đã mua một chiếc iPhone khi chúng ra mắt phiên bản đầu tiên vào mùa hè năm 2007. Kể từ đó, tôi thường truy cập những trang Web được hỗ trợ bởi thiết bị này. Tôi có thể truy cập bất cứ trang Web nào (trừ các trang Web có applet Flash hay Java™, vì iPhone không hỗ trợ). Vấn đề nữa là những nội dung có độ phân giải 800x600 (hay cao hơn) thường có chất lượng không tốt trên màn hình rộng 3,5 inch của iPhone. Những trang Web tôi thường truy cập từ chiếc iPhone chỉ đáp ứng một nửa yêu cầu của tôi về mặt UI do những ràng buộc đặc biệt của thiết bị này. Việc sử dụng m thay thế cho phương thức www truyền thống trong URL của các trang Web phổ biến là một giải pháp khá hiệu quả. Những trang như http://m.cnn.com, http://m.yahoo.com và http://m.google.com hiển thị khá tốt trên chiếc điện thoại di động của tôi. Một số trang Web, như http://www.twitter.com, có thế biến đổi khi hiển thị trên màn hình: khi tôi truy cập qua máy tính, tôi có thể xem được tất cả các đặc tính; khi tôi truy cập qua điện thoại di động, nội dung của trang web đ ược thay đổi cho phù hợp với màn hình khiêm tốn của điện thoại đi động. Cùng một
URL, nhưng UI đã được tối ưu hóa. Tôi sẽ hướng dẫn bạn cách tối ưu hóa trang web của bạn như những trang Web ở trên. Những công nghệ cho người phát triển Web di động Từ khi là một người phát triển Java, tôi đã biết được ý tưởng ý tưởng 'Write Once, Run Anywhere' (viết một lần, chạy trên mọi nền tảng hệ thống). Tuy nhiên, việc tối ưu hóa ứng dụng Java của tôi cho một hệ điều hành hay một mô hình phần cứng nhất định thậm chí còn chưa có trong ý nghĩ của tôi. Nhưng nếu bạn đang gặp khó khăn trong phát triển Web di động, bạn nên nắm vững ba công nghệ hàng đầu được hộ trợ bởi các 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 được hỗ trợ trong iPhone  Khi tôi hướng dẫn bạn, bạn có thể kết hợp ngôn ngữ đánh dấu WML và XHTML- MP vào trong Groovy Server Pages (GSPs) mà bạn xây dựng với Grails để tạo ra những trang Web thân thiện với di động. Và tôi cũng sẽ hướng dẫn bạn cách tối ưu hóa HTML được sinh ra bởi Grails để giúp các trang hoạt động tốt hơn trên iPhone. Sử dụng WML 1.x kết hợp với Grails WML là một ngôn ngữ đánh dấu kế thừa từ HTML, nhưng nó không phải là HTML. (WML 1.0 được giới thiệu vào năm 1998 và WML 1.3 là phiên bản mới
nhất hiện nay.) Đáng chú ý là, bạn không thể xem WML trên một trình duyệt Web bình thường (trừ phi bạn dùng một bộ mô phỏng) và bạn cũng không thể xem HTML trên một trình duyệt WML. Do vậy, các nhà cung cấp điện thoại di động thường hỗ trợ cổng chuyển đổi HTML-thành-WML trong các sản phẩm điện thoại di động của họ. Về loạt bài viết này Grails là một khung làm việc phát trển Web hiện đại, nó là sự kết hợp của các công nghệ Java phổ biến như Spring và Hibernate với những kỹ thuật đương thời như quy ước trong cấu hình. Được viết bằng 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 của bạn. Trong khi đó, nó cũng tạo ra sự linh hoạt cho một ngôn ngữ kịch bản. Sau khi nghiên cứu Grails, bạn sẽ thấy việc phát trển Web theo một phương pháp hoàn toàn khác. WML được truyền qua giao thức Wireless Access Protocol (WAP), giống nh ư HTML được truyền qua giao thức HTTP. WAP và WML thường được chuyển đổi cho nhau trong những giao tiếp cơ bản: Điều này thường được thấy trong các đặc tả điện thoại di động có hỗ trợ trình duyệt WAP và ngôn ngữ đánh dấu WML 1.x (xem Tài nguyên biết thông tin chi tiết về những đặc tả của WML và WAP). Nếu bạn hướng tới mục tiêu là những người sử dụng BlackBerry, bạn nên quan tâm tới WML trong các ứng dụng của bạn. (BlackBerry chiếm khoảng 40% thị phần của điện thoại thông minh, tiếp theo là iPhones và Windows® Mobile lần lượt ở vị trí thứ hai và thứ ba.) Điện thoại thông minh BlackBerry sử dụng trình duyệt WAP, mặc dù vậy rất nhiều người sử dụng thiết bị này vẫn thích tải về những trình duyệt Web thực sự như Opera Mini (xem Tài nguyên). Lập kế hoạch cho một chuyến đi công tác
Nếu bạn nghiên cứu từ đầu loạt bài viết về Làm chủ Grails, thì bạn chắc hẳn đã sẵn sàng với việc tạo một ứng dụng lập kế hoạch chuyến đi (trip planner) thân thiện với điện thoại di động. Hãy tạo một tệp có tên testwml.gsp trong thư mục web-app của ứng dụng trip planner và nhập vào tệp vừa tạo những mã trình, được biểu thị trong Ví dụ 1: Ví dụ 1. 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 có thể xem trực tiếp trang này (trên điện thoại của bạn) tại địa chỉ http://www.davisworld.org/testwml.gsp. Bạn đã quen với việc xem HTML trong một GSP. Trong trường hợp này, bạn đang sử dụng WML thay thế cho HTML. Khi bạn gửi WML từ mộ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, như trong dòng đầu tiên của Ví dụ 1. Nếu bạn đang xử lý WML tĩnh, bạn có thể đơn giản tạo tệp với đuôi mở rộng WML thay vì đuôi mở rộng GSP. Sau đó, phần lớn máy chủ Web sẽ gửi trả lại đúng 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 sẽ thấy rằng ánh xạ MIME cho các tệp WML đã được thiết lập. Nếu bạn đang sử dụng Apache HTTPD, một ánh xạ mặc định tương tự cho các tệp WML có trong tệp $APACHE_HOME/conf/mime.types. Ví dụ 2 biểu thị ánh xạ kiểu MIME của Tomcat: Ví dụ 2. Thiết lập kiểu MIME trong Tomcat wml text/vnd.wap.wml
Hãy xem lại Ví dụ 1, điều tiếp theo bạn cần chú ý là 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 như là một tài liệu WML. Chú ý rằng tài liệu không được bọc trong các thẻ thông thường. Nó bắt đầu và kết thúc bằng thẻ . Điều tiếp theo bạn cần chú ý trong Ví dụ 1 là việc thiếu các phần và . Mỗi một trang WML là một card, với một thuộc tính id duy nhất và thuộc tính title thân thiện với người sử dụng. Việc tải về nhiều trang/thẻ trong một tệp đơn lẻ là hoàn toàn bình thường. Đây là một giải pháp thích hợp đối với những dòng điện thoại di động thế hệ cũ có đường truyền dữ liệu rất hẹp. Bạn tải về tại một thời điểm càng nhiều, thì yêu cầu nhận và chuyển dữ liệu từ điện thoại của bạn tới máy chủ càng ít. Bạn chỉ có thể xem một thẻ tại một thời điểm, nên những thẻ còn lại sẽ được nạp sẵn trên máy di động của bạn. Với cách này, việc điều hướng xảy ra hoàn toàn trên phía máy khách. Những thẻ rất quen thuộc với những người phát triển HTML. Thẻ WML cũng tương tự thẻ HTML , nếu không phân biệt về mặt cú pháp (xem Tài nguyên để tìm hiểu thêm về WML). Đây là một thủ thuật WML thông minh. Bởi vì khi bạn đang làm việc với nội dung dành riêng cho điện thoại di động, bạn có thể tạo một siêu liên kết để gọi tới điện thoại khi người sử dụng chọn liên kết. Trong Ví dụ 3, số điện thoại 303-555-1212 sẽ được gọi: Ví dụ 3. Liên kết có thể gọi được trong WML
Chú ý rằng giao thức của liên kết này không giống với giao thức http:// — mà nó có dạng wtai://, là tên viết tắt của Wireless Telephony Applications Interface. Bộ mô phỏng WML Để hoàn trả trang này trên PC, bạn cần một bộ mô phỏng WAP (xem Tài nguyên để biết thêm thông tin về bộ mô phỏng trong b ài viết này). Truy cập phần bộ mô phỏng dotMobi, bộ mô phỏng này được áp dụng như một applet Java. Gõ vào URL chuỗi davisworld.org/testwml.gsp. (Chú ý rằng tiền tố http:// đã được cung cấp từ trước.) Sau đó, bạn sẽ thấy kết quả giống như trong Hình 1:
Hình 1. Trang WAP được mô phỏng Chú ý rằng bộ mô phỏng dotMobi có hai giao diện khác nhau. Chúng không chỉ giúp tạo ra những cảm nhận khác nhau mà còn khác nhau về khả năng của chúng. Nếu bạn thích mô phỏng một thiết bị nào đó, các nhà sản xuất phần cứng hầu hết
đều cung cấp cấp trang Web nhà phát triển để bạn có thể tải về và cài đặt những bộ mô phỏng mà bạn cần. WML động từ một GSP Ví dụ về WML đầu tiên là những mã trình tĩnh. Ví dụ 4 là một ví dụ sử dụng các thẻ quen thuộc là và : Ví dụ 4. Kết hợp GSP với WML
From: ${flight.iata1} To: ${flight.iata2} Next Chú ý rằng tôi đã mô phỏng một số dữ liệu trong HashMap thay vì thiết lập một cơ sở hạ tầng MVC đầy đủ. Điều quan trọng là để xem bạn có thể kết hợp các thẻ GSP với WML, như tôi đã thực hiện với JavaScript trong phần "Thay đổi khung
nhìn với Groovy Server Pages." (Bạn có thể xem trực tiếp ví dụ này tại địa chỉ http://davisworld.org/testwml2.gsp.) WML 1.x: Sự kết thúc của một kỷ nguyên Mặc dù nhiều người cho rằng WML đã hết thời, nhưng điện thoại di động vẫn khá trung thành với WML. WML 1.x đang phải đối mặt với những thách thức — mặc dù nó làm việc khá tốt với điện thoại di động. Ngày càng nhiều điện thoại di động đã chuyển nền tảng WML sang trình duyệt Web như trên PC. Như nhưng phần tiếp theo sẽ đề cập, việc tạo ra một trang Web thân thiện với di động d ành cho các thiết bị WML 2.x hay iPhones yêu cầu bạn phải cải tiến một chút HTML hiện tại thay vì dịch toàn bộ chúng sang một ngôn ngữ đánh dấu hoàn toàn khác. Sử dụng WML 2.X (hay XHTML-MP) kết hợp với Grails Khi phiên bản WML 2.x được giới thiệu, WML được coi như là tên của nhãn hiệu hơn là tên của một ngôn ngữ đánh dấu riêng biệt (như WML 1.x). Trên thực tế, WML 2.x đơn giản là một phương ngữ XHTML: đặc biệt là XHTML-MP. Phần lớn yêu cầu của XHTML-MP giống với XML. Điều này có nghĩa bạn phải đóng cho mỗi thẻ chứa tương ứng (, ), sử dụng ngoặc kéo cho những thuộc tính của bạn () và chỉ sử dụng chữ in thường cho tên của các phần tử ( thay vì ). XHTML-MP là một tập cha của XHTML-Basic. Bạn có thể thấy rằng với một chút điều chỉnh, trang web của bạn đã có thể làm việc với XHTML-Basic. Nhưng nó không thể sử dụng các bảng dạng lưới hay khung. Ngoài ra, nó chỉ hỗ trợ dịnh dạng ảnh gif và png. Các chức năng khác (như điều chỉnh kích cỡ ảnh và văn bản
luân phiên) cũng không được hỗ trợ trong XHTML-Basic. Có rất nhiều thẻ HTML đã quen thuộc với bạn. Xem Tài nguyên để biết thông tin về những thẻ HTML được sử dụng trong XHTML-Basic và XHTML-MP. Có thể bạn sẽ không biết rằng việc tối ưu hóa trang Web của bạn cho một màn hình hiển thị nhỏ hơn sẽ đòi hỏi gửi lại dữ liệu ít hơn trong mỗi yêu cầu. Các trang Web (bao gồm HTML, CSS và các hình ảnh) nên có dung lượng nhỏ hơn 20KB. Bạn nên giới hạn dung lượng của các tệp bằng cách sử dụng các hàm Expires hoặc Cache-Control. Bạn nên cắt những trang Web dài thành hai hay ba trang khi bạn hiển thị chúng trên điện thoại di động. Ví dụ, trang web http://m.cnn.com đã cắt các bài viết thành ba hay bốn trang, nhưng nó cũng cung cấp một liên kết giúp bạn đọc "toàn bộ bài viết" trên một trang duy nhất. Cũng như với WML 1.x, bạn nên thêm DTD tương ứng vào phần đầu của tệp. Bạn cũng nên sửa thẻ để bao gồm thuộc tính xmlns, như biểu thị trong Ví dụ 5: Ví dụ 5. Khởi động một tệp XHTML-MP ...
Bạn cũng nên gửi nó với kiểu MIME tương ứng của application/vnd.wap.xhtml+xml, mặc dù nhiều thiết bị di động sẽ chấp nhận application/xhtml+xml. Việc sử dụng application/xhtml+xml cũng giúp bạn tìm lỗi của mã trình trên một trình duyệt máy tính cá nhân. Xem XHTML-MP Để xem XHTML-MP, hãy truy cập trang web http://m.yahoo.com.(Nó trông không đẹp lắm trên một trình duyệt Web, nhưng nó trông tuyệt vời trên một chiếc điện thoại di động.) Chọn View > Source, bạn sẽ thấy XHTML-MP DTD ở phần trên cùng của tài liệu. Để hiểu rõ hơn trang Web trông như thế nào trên một thiết bị thực tế, bạn cần tìm một bộ mô phỏng khác. Ví dụ, trang blog của Sandip Chitale cung cấp một tr ình cài thêm vào Firefox, nó trong gi ống như một chiếc iPhone (xem Tài nguyên). Bạn nên biết rằng bộ mô phỏng này lớn hơn một chút so với thiết bị thực tế. Nó trông đẹp hơn một bộ mô phỏng thực sự, nhưng nó sẽ giúp bạn đánh giá được trang Web của bạn sẽ trông như thế nào khi được hiển thị trên iPhone. (Tôi sẽ giới thiệu với bạn một số cách đánh giá chính xác hơn ngay sau đây.) Hình 2 biểu thị m.yahoo.com được mô phỏng trên bộ mô phỏng của Chitale:
Hình 2. Xem trang Web di động Yahoo trên một bộ mô phỏng iPhone Đánh giá XHTML-MP
Một số trình đánh giá trực tuyến có thể giúp bạn biết chắc chắn rằng bạn đang gửi đi XHTML-MP đã được định dạng chính xác. Bạn có thể thử công cụ kiểm tra như W3C mobileOK Basic Checker hay ready.mobi (xem Tài nguyên). Cả hai đều cho kết quả tốt, nhưng bộ mô phỏng ready.mobi đưa ra nhiều thông tin để đánh giá hơn so với W3C. Ví dụ, Hình 3 cho thấy trình đánh giá W3C nói gì về http://m.google.com: Hình 3. Báo cáo của trình đánh giá W3C về trang Web di động của Google Hình 4 là phần đầu tiên trong báo cáo của công cụ ready.mobi về trang web http://m.yahoo.com:
Hình 4. Báo cáo của ready.mobi về trang Web di động của Yahoo Nó đánh giá Yahoo! đạt 4 điểm trong thang điểm 5. Kéo thanh cuộn xuống một chút, nó cung cấp một loạt các thông số khác nhau giúp bạn có thể xem trang web thực tế của bạn sẽ trông như thế nào. Hình 5 biểu thị kết quả trên Nokia N70: Hình 5. Xem trang Web di động của Yahoo bằng cách sử dụng một bộ mô
phỏng Ở dưới cùng của trang, trình đánh giá ready.mobi hiển thị các kết quả chi tiết về các bước kiểm tra, mỗi bước qua được đánh dấu (màu xanh), không qua (màu đỏ), hay cảnh báo (màu vàng). Ví dụ, tuy http://m.yahoo.com dường như hoạt động tốt với rất nhiều thiết bị, nhưng XHTML của nó chưa tương thích 100%, như được biểu thị trong Hình 6:
Hình 6. Xem những lỗi của XHTML-MP Như được biểu thị trong Hình 7, bạn có thể thấy rằng Yahoo! thiếu một số thuộc tính alt trên hình ảnh của nó và những lỗi khi xác định kích cỡ ảnh: