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

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 <% response.setContentType("text/vnd.wap.wml") %> <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN" "http://www.phone.com/dtd/wml11.dtd" > <wml> <card id="f1" title="Flight 1"> <p mode="wrap">From: DEN</p> <p mode="wrap">To: ORD</p> <p mode="wrap">UAL 1234</p> <p mode="wrap">Jun 30, 10:30am</p> <p> <anchor>Next<go href="#f2"/></anchor> </p> </card> <card id="f2" title="Flight 2"> <p mode="wrap">From: ORD</p> <p mode="wrap">To: DEN</p> <p mode="wrap">UAL 9876</p> <p mode="wrap">Jul 02, 1:15pm</p> <p> <anchor>Previous<go href="#f1"/></anchor> </p> </card> </wml> 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 <mime-mapping> <! WML Source > <extension>wml</extension> <mime-type>text/vnd.wap.wml</mime-type> </mime-mapping> 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ẻ <html> thông thường. Nó bắt đầu và kết thúc bằng thẻ <wml>. Điều tiếp theo bạn cần chú ý trong Ví dụ 1 là việc thiếu các phần <head> và <body>. 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ẻ <p> rất quen thuộc với những người phát triển HTML. Thẻ WML <anchor> cũng tương tự thẻ HTML <a>, 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 <do type="accept"> <go href="wtai://wp/mc;3035551212"/> </do> 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 [...]... 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... hình ảnh của nó và những lỗi khi xác định kích cỡ ảnh: Hình 7 Xem các lỗi Grails và XHTML-MP Liệu Grails có sẵn sàng chạy tốt với Web di động? Hình 8 cho thấy trình đánh giá ready.mobi nói gì về trang liệt kê của ứng dụng trip planner: Hình 8 Grails không tương thích lắm với XHTML-MP Nên chúng ta cần làm một số việc để giải quyết vấn đề này Đầu tiên, tạo ra một bao đóng mlist trong grails- app/controllers/AirportController.groovy... Hãy sử dụng tất cả những chiến lược trên để đảm bảo rằng trang Web của bạn sẽ hoạt động tốt trên hơn 3,3 tỷ máy điện thoại di động trên toàn thế giới Kết luận Việc tối ưu hóa ứng dụng Grails của bạn giúp nó hoạt động tốt trên đ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 các thiết bị XHTML-MP) và khó (với các thiết bị WML 1.x) Với những bộ mô ... trang Web là 980 pixel Điều này giúp bạn có thể đọc tốt các văn bản khi màn hình điện thoại di động được thiết lập ở chế độ phong cảnh, nhưng văn bản sẽ rất nhỏ khi màn hình điện thoại di động được thiết lập ở chế độ chân dung Đừng lo lắng về điều này, vì chỉ với một thẻ meta đơn giản, bạn có thể điều chỉnh kích cỡ của trang Web: Thẻ viewport cho phép bạn cung cấp những gợi ý cho trình duyệt di động. .. thiết bị cơ bản, tất cả những gì bạn cần làm là xác định yêu cầu cho ứng dụng của bạn Có ba chiến lược cơ bản mà bạn cần thực hiện Tạo một trang Web dành riêng cho nội dung di động Như bạn đã biết trong phần trước, phương thức m được rất nhiều trang Web sử dụng Google, Yahoo!, và CNN tất cả đều thiết lập một 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 mất thời gian với... http://mysite.org/mobile Bạn cũng có thể đang ký một miền mobi được dành riêng cho nội dung di động Kiểm tra tác nhân người dùng Tất cả trình duyệt Web đều tự đồng nhất với máy chủ khi chúng gửi yêu cầu dữ liệu tới máy chủ Bạn có thể sử dụng thông tin này để tùy biến trang Web cho phù hợp với nội dung dành cho các thiết bị di động (Công nghệ này đã được http://twitter.com sử dụng.) Truy cập http://davisworld.org/echo.gsp... 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ế... href="http://maps.google.com/maps?q=denver+international+airport">DEN Việc nhập một điểm đầu và một điểm cuối, như được biểu thị trong 14, giúp người sử dụng biết được lộ trình khi họ nhấn lên liên kết: Ví dụ 14 Lộ trình lái xe trên 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... 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... trang Web khi nó được hiển thị trên một chiếc iPhone (Tuy nhiên, bộ mô phỏng iPhone trên Firefox không hỗ trợ thẻ meta Do vậy, để xem trang Web hoạt động như thế nào, bạn cần một chiếc iPhone thực.) Ví dụ 9 Thiết lập viewport dành cho iPhone inital-scale có giới hạn từ 0 tới 10 và hỗ trợ các giá trị phân số Bạn cũng có thể sử dụng các giá trị width và . 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. 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. 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