Làm chủ việc phát triển ứng dụng Facebook PHP, IBM Rational Application Developer, IBM WebSphere Application Server DB2, Phần 3: Hồn thành ứng dụng trình diễn mơi giới chứng khoán Facebook Jake Miles, Tác giả tự do, 软通动力信息技术有限公司 Tóm tắt: Đây phần cuối loạt hướng dẫn ba phần phát triển ứng dụng Facebook đầy đủ chức ngôn ngữ PHP Java™ để cung cấp giao diện Facebook cho ứng dụng buôn bán môi giới cổ phiếu có Trong hướng dẫn bạn sử dụng tất công cụ mà bạn cài đặt thành phần bạn phát triển hai phần đầu loạt để thực chi tiết ứng dụng Facebook Trước bạn bắt đầu Hướng dẫn dành cho nhà phát triển có trình độ kinh nghiệm khác Java, PHP hai, người muốn gia nhập vào giới lên phát triển ứng dụng Facebook Nó dành cho nhà phát triển muốn tìm hiểu cách tích hợp PHP Java vào chung ứng dụng Về loạt Loạt cho phép bạn phát triển ứng dụng Facebook làm bên đỉnh ứng dụng Java doanh nghiệp có  Trong Phần bạn có nhìn khái qt Facebook sau cài đặt cơng cụ cần thiết gồm mơi trường Rational IBM (Rational® Application Developer environment), Zend Core for IBM® với cài đặt kèm theo Apache sở liệu DB2® Express-C WebSphere® Application Server IBM Sau bạn khảo sát chi tiết điểm tích hợp Facebook chế mà Facebook cung cấp để tích hợp ứng dụng vào mạng xã hội bắt đầu số phát triển khung sườn  Trong Phần bạn tạo dự án ứng dụng web Java™ Rational Application Developer IBM, sau tích hợp khung Spring để áp đặt cấu trúc MVC mã lệnh cung cấp việc tiêm vào thuộc tính/bean, bạn triển khai ứng dụng vào WebSphere  Phần đảm nhiệm chi tiết triển khai thực ứng dụng Facebook đầy đủ chức cách sử dụng Ngôn ngữ Đánh dấu Facebook (FBML), Facebook JAVASCRIPT (FBJS), Facebook API Java PHP Về hướng dẫn Trong hướng dẫn này, bạn sử dụng tất công cụ bạn cài đặt thành phần mà bạn phát triển để thực chi tiết ứng dụng Facebook Ứng dụng bao gồm trang vải (canvas) hiển thị danh mục đầu tư cổ phiếu người sử dụng (và cổ phiếu có sẵn khác), hộp lược tả hiển thị tin điện báo giá thị trường chứng khoán (stock ticker) danh mục đầu tư đó, khả mua bán số lượng cổ phiếu từ trang vải nền, khả giới thiệu cổ phiếu cho bạn bè Facebook Bạn sử dụng thư viện trình khách Facebook Java PHP để giao tiếp với Facebook thông qua giao diện REST từ bên trình điều khiển PHP Java bạn, cách sử dụng phiên mã nguồn mở thư viện trình khách Java chứa kho mã Google, gồm Tiện ích Bạn bè (Companion Utility) để tạo kết nối với Facebook dễ dàng PHP Sau bạn dùng FBML để tạo nội dung Facebook, FBJS giao diện AJAX Facebook để cập nhật giá cổ phiếu danh mục đầu tư tổng giá trị danh mục đầu tư thời gian thực, giây lần Các kiện tiên Bạn cần đọc Làm chủ việc phát triển ứng dụng Facebook, Phần (Mastering Facebook application development, Part 1) Sử dụng song song ngôn ngữ Java PHP, Phần (Using Java and PHP languages in parallel, Part 2) trước tiếp tục với Phần Yêu cầu hệ thống Để hoàn thành bước hướng dẫn này, bạn cần công cụ sau:  Spring Framework Tôi sử dụng phiên 2.5.3, phát hành  Rational Application Developer (Bộ Phát triển ứng dụng Rational) Nhận phiên dùng thử RAD 7.0.0.6 từ IBM (nhấn vào liên kết “Tải cách sử dụng IBM Installation Manager (khuyến cáo)”) Bạn sử dụng Rational Application Developer IDE đầy đủ tính dựa Eclipse để phát triển ứng dụng Web Java bạn  IBM WebSphere Application Server V6.1  Zend Core For IBM (gồm IBM DB2 Express-C)  Zend Studio công cụ tuyệt vời để viết mã PHP, dùng trình soạn thảo văn  Thư viện thẻ JSON JSP  Facebook-java-api lưu Google Code, gồm Companion Utility Tạo nguồn cấp JSON giá cổ phiếu Java Trang vải ứng dụng bạn hiển thị danh mục đầu tư chứng khoán người sử dụng chứng khốn có sẵn khác, cập nhật giá cổ phiếu giây lần cách sử dụng AJAX Vì bước phần cung cấp liệu JSON Cần giả thiết chức giá cổ phiếu có sẵn ứng dụng môi giới cổ phiếu (viết Java), bạn cung cấp nguồn cấp JSON từ trình điều khiển chạy IBM WebSphere Sử dụng StockListController.java để cung cấp giá cổ phiếu Để bắt đầu trước tiên bạn phải sửa đổi phương thức handleRequests() StockListController.java, Liệt kê 1, bạn cung cấp số giá cổ phiếu Liệt kê Sửa đổi lớp StockListController (Java) để cung cấp giá cổ phiếu public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) throws Exception { List stocks = getDao().fetchAllStocks(); for (Stock stock : stocks) { stock.setPrice (getStockPriceSource().getPriceInCents(stock.getId())); } return new ModelAndView (getSuccessView(), "stocks", stocks); } Sử dụng lớp StockPriceSource để mô biến động giá cổ phiếu Thay cung cấp chứng khốn cho khung nhìn tìm nạp từ DAO, StockListController gọi đối tượng StockPriceSource để lấy giá cổ phiếu, giá thay đổi theo thời gian thực, đối lập với cho theo sở liệu Một mơi giới chứng khốn thực triển khai thực lớp StockPriceSource để lấy giá chứng khoán từ nguồn liệu đâu đó, có độ an tồn cao theo đặc thù ngành cơng nghiệp Tuy nhiên ứng dụng mô biến động giá cổ phiếu lớp StockPriceSource chứa ánh xạ “tin điện báo cổ phiếu với mức giá” (stock ticker to price), yêu cầu giá cổ phiếu cập nhật giá ánh xạ này, thay đổi lên xuống cách ngẫu nhiên biên độ thay đổi lập sẵn (xem mã kèm theo phần Tải để biết thêm chi tiết) Để cung cấp StockPriceSource cho StockListController, sửa đổi định nghĩa bean StockListController spring-servlet.xml cung cấp định nghĩa bean cho đối tượng StockPriceSource, Liệt kê Liệt kê Cung cấp cho StockListController StockPriceSource spring-servlet.xml stockList.jsp Thuộc tính bean stockPriceSource cấu hình hành vi nó: tất cổ phiếu bắt đầu với giá 5000 cent ($50), thay đổi đến 50 cent tích tắc (thuộc tính volatility ), không phép rớt giá xuống $5 lên $100 dải biến thiên ngẫu nhiên chúng theo thời gian Thuộc tính stockPriceSource bean stockListController cung cấp cho stockListController cá thể stockPriceSource có phạm vi tồn ứng dụng Vì StockPriceSource bean, cá thể nằm nhớ ứng dụng web IBM WebSphere khởi động lại, biến thiên giá cổ phiếu ổn định trang vải Facebook ứng dụng chạy Sử dụng thư viện thẻ JSP JSON để tạo nguồn cấp JSON Bây bạn có nguồn cổ phiếu giá chúng mô theo thời gian thực, cung cấp thông tin liệu JSON cho lần gọi Javascript AJAX mà chạy trang vải JSON (ký pháp đối tượng JavaScript), đặc tả có http://www.json.org/, định dạng thay cho XML để chuyển liệu đối tượng, trở thành ưa thích liệu AJAX Nó đọng (do truyền tải nhanh hơn), cung cấp ký pháp dễ hiểu cho thuộc tính đối tượng (trái ngược với pha trộn thuộc tính thẻ XML), không XML cung cấp cấu tạo rõ ràng để biểu thị danh sách mục Các tính làm cho nhanh hơn, đơn giản, không nhập nhằng chuyển liệu JSON thành đối tượng ngôn ngữ Javascript mà hỗ trợ đối tượng mảng Tuy nhiên, khung nhìn ứng dụng JSPs, JSP gồm XML, nên sử dụng thư viện thẻ JSP cho phép bạn dựng nên đối tượng cách sử dụng XML, thẻ biểu liệu đối tượng định dạng JSON Để làm điều đó, sử dụng thư viện thẻ JSON JSP sẵn có http://jsontaglib.sourceforge.net/index.html Tải json-taglib JAR vào thư mục WEBINF/lib bạn Sau sửa đổi stockList.jsp khung nhìn StockListController biểu để cung cấp liệu dạng JSON, Liệt kê Liệt kê Sử dụng thư viện thẻ JSON JSP để biểu nguồn cấp giá cổ phiếu JSON Một đối tượng JSON gồm có cặp tên/giá trị, giá trị giá trị kiểu nguyên thủy chuỗi ký tự, đối tượng JSON khác, mảng JSON Trong stockList.jsp, thẻ tạo đối tượng JSON vỏ bọc bậc cao Nhãn tạo thuộc tính đối tượng bậc cao gọi stocks mảng đối tượng JSON, trường hợp cổ phiếu JSP lặp qua cổ phiếu StockListController cung cấp để xây dựng nên mảng JSON, tạo đối tượng JSON cho cổ phiếu, với mã nhận dạng (id), tin điện báo (ticker) thuộc tính giá (price) Chú ý contentType text (văn bản) nên bạn xem kết trình duyệt gỡ lỗi Javascript dễ dàng hơn, cách khác “text/json” Cũng lưu ý bạn khơng thể bao gồm thích JSP này, chúng bị bỏ qua đầu XML, chúng diễn giải liệu hỏng kết diễn giải JSON Để kiểm tra nguồn cấp JSON giá cổ phiếu, triển khai lại ứng dụng Web lên WebSphere (như Phần hướng dẫn này), di chuyển đến http://localhost/fb_stock_demo/stockList trình duyệt bạn, bạn thấy cổ phiếu giá chúng định dạng JSON Tải lại trình duyệt giá updateTradeResult(); toggleRefresh(); } Trước tiên tạo số biến sử dụng phần lại kịch trang - đối tượng refreshTimer, nắm giữ đối tượng Timer (đồng hồ) dùng để kích hoạt lời gọi AJAX, portfolioShares, mảng kết hợp “tin điện báo cố phiếu” tham khảo portfolio.php đây, tradeResult, mà giá trị thiết đặt portfolio.php để thông báo cho FBJS kết mua bán init() hàm gọi phần porfolio.php, trang vải hồn tất việc tải Cập nhật kết bn bán trang Việc mà init() làm cập nhật kết việc buôn bán trang này, Liệt kê 25 Liệt kê 25 portfolio.js: updateTradeResult() function updateTradeResult() { if (tradeResult) { var resultElement = getTradeResultElement(); resultElement.toggleClassName (tradeResult > ? 'increase' : 'decrease'); resultElement.setTextValue (formatMoney(tradeResult)); } } function getTradeResultElement() { return document.getElementById('traderesult'); } Nếu biến tradeResult không rỗng (null) (nghĩa portfolio.php thiết đặt giá trị), updateTradeResult() tìm kiếm phần tử 'trade-result' (kết buôn bán) portfolio.php đưa vào để đáp ứng lại việc bn bán Sau sử dụng hai phương thức DOM FBJS đặc biệt, toggleClassName() setTextValue() FBJS sửa đổi DOM cung cấp phương thức DOM đặc biệt để truy cập phần tử phần tử Bạn dễ dàng thêm vào loại bỏ tên lớp, thiết lập tên lớp phần tử cách sử dụng toggleClassName() Phương thức SetTextValue() phương thức đặc biệt cho phép bạn thiết lập giá trị văn phần tử DOM Thay cho innerHTML, mà Facebook không hỗ trợ, bạn thực điều tương tự cách sử dụng setTextValue() để thiết lập văn thuần, setInnerFBML() để thiết lập FBML bên phần tử Chú ý FBJS không cung cấp phương thức getInnerFBML() để nhận nội dung phần tử, khơng mang lại thay hoàn toàn cho innerHTML Đây lý cho việc sử dụng mảng FBJS portfolioShares toàn cục, ngược với việc cho FBJS kiểm tra innerHTML phần tử share (hoặc tương đương) để thu cổ phiếu chứng khốn hàng người sử dụng Cũng có phương cách tốt để giữ thông tin mã FBJS, biểu diễn cách giải khác Cũng lưu ý getTradeResultElement() gọi document.getElementById() với ID mà bạn sử dụng portfolio.php Nếu bạn xem mã nguồn trang trang vải trình duyệt, bạn thấy Facebook nối thêm mã vào phần đầu toàn ID phần tử lớp CSS bạn Nó nối mã làm phần đầu vào toàn tên hàm FBJS tên biến bạn Nó làm việc để gói gọn ứng dụng bạn vùng tên trình duyệt riêng mình, nên bạn viết mã bạn hệ thống khép kín trái ngược với việc phải lo lắng xung đột với trang Facebook xung quanh Làm trang giá chứng khoán giây lần Để khởi động việc làm định kỳ giá chứng khoán, thêm vào phương thức toggleRefresh() Liệt kê 26 Liệt kê 26 portfolio.js: toggleRefresh() function toggleRefresh() { var button = document.getElementById('togglerefresh'); if (refreshTimer) { clearInterval(refreshTimer); refreshTimer = null; button.setTextValue('Start refresh'); } else { refreshTimer = setInterval(refreshPrices, REFRESH_DELAY); button.setTextValue('Pause refresh'); } } Đồng hồ (timer) đồng hồ đếm (interval timer) FBJS làm việc giống đồng nhiệm chúng Javascript, trừ setInterval() setTimer() nhận đầu vào đối tượng Function nghĩa setInterval(refreshPrices), đoạn Javascript để thi hành setInterval('refreshPrices()') ClearInterval() nhận đầu vào đối tượng đồng hồ đếm lặp lại Timer ngừng lại Thực lời gọi AJAX để gọi nguồn cấp JSON giá chứng khốn Do bạn có đồng hồ đếm lặp lại, thêm vào hàm refreshPrices() thực lời gọi AJAX để lấy giá chứng khoán, Liệt kê 27 Liệt kê 27 portfolio.js: refreshPrices() function refreshPrices() { var ajax = new Ajax(); ajax.responseType = Ajax.JSON; ajax.ondone = function (data) { updateStockPrices (data.stocks); } ajax.onerror = onStockListError; ajax.requireLogin = 1; ajax.post (STOCK_PRICE_AJAX_URL); } Việc sử dụng đối tượng Ajax dễ dùng FBJS Bạn quy định kiểu đáp ứng (Ajax.JSON, Ajax.XML Ajax.RAW), cung cấp đối tượng hàm ondone, gọi với liệu trả về, đối tượng hàm onerror, gọi lỗi xảy thực lời gọi Ajax Bạn quy định rõ người sử dụng có buộc phải đăng nhập vào ứng dụng hay không để thực lời gọi Ajax (trường hợp phải đăng nhập vào) Sau bạn gọi phương thức post() với URL cần gọi, gọi hàm ondone hàm onerror bạn yêu cầu hoàn tất Vì cá thể sử dụng responseType, JSON, gọi hàm ondone với liệu JSON dịch sang thành hệ phân cấp đối tượng Javascript thực tế tương ứng với đối tượng JSON mà bạn rõ stockList.jsp UpdateStockPrices() tự chạy qua mảng đối tượng chứng khốn, tìm kiếm hàng mã chứng khoán bảng chứng khoán cập nhật giá cổ phiếu (và tổng tiền đồng đô la người sử dụng sở hữu cổ phiếu mã chứng khoán này), cách sử dụng setTextValue() giống với kết buôn bán Xem Tải để biết thêm chi tiết Trang danh mục đầu tư hoạt động Vào lúc bạn xem ứng dụng hoạt động Vào trang vải bạn, đăng nhập vào hệ thống mơi giới chứng khốn (qua LoginController), trang mơi giới chứng khốn xuất Nó tạm ngừng giây, sau bắt đầu cập nhật giá tính tổng số lên xuống danh mục đầu tư trang Hình Hình Trang danh mục đầu tư hoạt động Nhập vào số cổ phiếu mã chứng khoán để mua, nhấn Buy/Sell, quan sát mua bán phản ánh hàng Hình Hình Trang danh mục đầu tư sau mua bán Cuộc mua bán gửi cho bạn thông báo Facebook, bạn thấy trang Các thơng báo bạn (xem Hình 4) Hình Các thơng báo mua bán Và mua bán gửi hành động đến Nguồn cấp nhỏ bạn (xem Hình 5) đến Nguồn cung cấp tin tức bạn bè bạn (tùy thuộc vào thuật tốn chưa biết) Hình Hành động Nguồn cấp tin mini giao dịch mua bán Đoạn cuối ứng dụng liên kết hàng bảng chứng khoán cho phép người sử dụng giới thiệu mã chứng khoán cho bạn bè Facebook, cách sử dụng yêu cầu Facebook Việc địi hỏi trình điều khiển PHP khác, là, RecommendStockToFriendsController (xem Mã nguồn), đặt ID người sử dụng Facebook người sử dụng, URL ứng dụng, biểu tượng tin điện báo giá thị trường chứng khốn (stock's ticker) vào mơ hình biểu khung nhìn recommendStockToFriendsView.php, Liệt kê 28 Liệt kê 28 recommendStockToFriendsView.php