Làm chủ việc phát triển ứng dụng Facebook: Hoàn thành ứng dụng trình diễn môi giới chứng khoán Facebook

Làm chủ việc phát triển ứng dụng Facebook bằng PHP, IBM Rational Application Developer, IBM WebSphere Application Server và DB2, Phần 3: Hoà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 là phần cuối cùng trong loạt bài hướng dẫn ba phần về phát triển một ứng dụng Facebook đầy đủ chức năng trong các ngôn ngữ PHP và Java™ để cung cấp một giao diện Facebook cho một ứng dụng buôn bán môi giới cổ phiếu hiện có. Trong hướng dẫn này bạn sử dụng tất cả các công cụ mà bạn đã cài đặt và các thành phần bạn đã phát triển trong hai phần đầu của loạt bài này để thực hiện các chi tiết của ứng dụng Facebook. Trước khi bạn bắt đầu Hướng dẫn này dành cho các nhà phát triển có trình độ kinh nghiệm khác nhau trong Java, PHP hoặc cả hai, những người muốn gia nhập vào thế giới đang lên của sự phát triển ứng dụng Facebook. Nó cũng dành cho các nhà phát triển nào muốn tìm hiểu cách tích hợp PHP và Java vào chung một ứng dụng. Về loạt bài này Loạt bài này sẽ cho phép bạn phát triển các ứng dụng Facebook của chính mình và làm như vậy bên trên đỉnh của một ứng dụng Java doanh nghiệp hiện có.  Trong Phần 1 bạn đã có một cái nhìn khái quát về Facebook và sau đó cài đặt các công cụ cần thiết gồm cả môi trường Rational của IBM (Rational® Application Developer environment), Zend Core for IBM® với các bản cài đặt kèm theo của Apache 2 và cơ sở dữ liệu DB2® Express-C và WebSphere® Application Server của IBM. Sau đó bạn khảo sát chi tiết các điểm tích hợp của Facebook -- các cơ chế mà Facebook cung cấp để tích hợp ứng dụng vào mạng xã hội -- và bắt đầu một số phát triển khung sườn.  Trong Phần 2 bạn đã tạo ra một dự án ứng dụng web Java™ trong Rational Application Developer của IBM, sau đó tích hợp khung Spring để áp đặt một cấu trúc MVC trên mã lệnh và cung cấp việc tiêm vào thuộc tính/bean, và bạn đã triển khai ứng dụng vào WebSphere.  Phần 3 đảm nhiệm các chi tiết triển khai thực hiện một ứng dụng Facebook đầy đủ chức năng bằng cách sử dụng Ngôn ngữ Đánh dấu Facebook (FBML), Facebook JAVASCRIPT (FBJS), và Facebook API trong cả Java và PHP. Về hướng dẫn này Trong hướng dẫn này, bạn sẽ sử dụng tất cả các công cụ bạn đã cài đặt và các thành phần mà bạn đã phát triển để thực hiện chi tiết ứng dụng Facebook. Ứng dụng này sẽ bao gồm trang vải nền (canvas) chính hiển thị danh mục đầu tư cổ phiếu của người sử dụng (và các cổ phiếu có sẵn khác), một hộp lược tả hiển thị tin điện báo giá thị trường chứng khoán (stock ticker) trong danh mục đầu tư đó, khả năng mua và bán số lượng cổ phiếu từ trang vải nền, và khả năng giới thiệu cổ phiếu cho bạn bè trên Facebook. Bạn sẽ sử dụng cả thư viện trình khách Facebook Java và PHP để giao tiếp với Facebook thông qua giao diện REST của nó từ bên trong các trình điều khiển PHP và Java của bạn, bằng cách sử dụng phiên bản mã nguồn mở của thư viện trình khách Java được chứa trên kho mã Google, gồm cả Tiện ích Bạn bè (Companion Utility) mới để tạo kết nối với Facebook dễ dàng như trong PHP. Sau đó bạn sẽ dùng FBML để tạo ra nội dung Facebook, và FBJS và giao diện AJAX của Facebook để cập nhật giá cổ phiếu trong danh mục đầu tư và tổng giá trị của danh mục đầu tư trong thời gian thực, mỗi giây một lần. Các đều kiện tiên quyết Bạn cần đọc Làm chủ việc phát triển ứng dụng Facebook, Phần 1 (Mastering Facebook application development, Part 1) và Sử dụng song song các ngôn ngữ Java và PHP, Phần 2 (Using Java and PHP languages in parallel, Part 2) trước khi tiếp tục với Phần 3. Yêu cầu về hệ thống Để hoàn thành các bước trong hướng dẫn này, bạn cần các công cụ sau:  Spring Framework -- Tôi sử dụng phiên bản 2.5.3, bản phát hành mới nhất.  Rational Application Developer (Bộ Phát triển ứng dụng Rational) -- Nhận một phiên bản dùng thử của RAD 7.0.0.6 từ IBM (nhấn vào liên kết “Tải về bằng cách sử dụng IBM Installation Manager mới (khuyến cáo)”). Bạn sẽ sử dụng bộ Rational Application Developer như là một bản IDE đầy đủ tính năng dựa trên Eclipse để phát triển ứng dụng Web Java của bạn.  IBM WebSphere Application Server V6.1.  Zend Core For IBM (gồm cả IBM DB2 Express-C).  Zend Studio là một công cụ tuyệt vời để viết mã PHP, mặc dù có thể dùng trình soạn thảo văn bản nào cũng được.  Thư viện thẻ JSON JSP.  Facebook-java-api lưu trên Google Code, gồm cả Companion Utility. Tạo một nguồn cấp JSON giá cổ phiếu trong Java Trang vải nền của ứng dụng của bạn sẽ hiển thị danh mục đầu tư chứng khoán của người sử dụng và các chứng khoán có sẵn khác, và sẽ cập nhật giá cả của những cổ phiếu đó mỗi giây một lần bằng cách sử dụng AJAX. Vì vậy bước đầu tiên trong phần này sẽ là cung cấp dữ liệu JSON này. Cần giả thiết rằng chức năng giá cổ phiếu đã có sẵn trong ứng dụng môi giới cổ phiếu rồi (viết bằng Java), do đó bạn sẽ cung cấp nguồn cấp JSON này từ một trình điều khiển chạy trong 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() trong StockListController.java, như Liệt kê 1, như vậy bạn sẽ được cung cấp một số giá cổ phiếu. Liệt kê 1. 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 một lớp StockPriceSource để mô phỏng sự biến động của giá cổ phiếu Thay vì chỉ cung cấp các chứng khoán cho khung nhìn khi được tìm nạp từ DAO, StockListController bây giờ gọi một đối tượng StockPriceSource để lấy giá cả của từng cổ phiếu, vì giá cả này thay đổi theo thời gian thực, đối lập với được cho theo cơ sở dữ liệu. Một cuộc môi giới chứng khoán thực sự sẽ triển khai thực hiện lớp StockPriceSource để lấy ra giá chứng khoán từ một nguồn dữ liệu ở đâu đó, có độ an toàn cao và theo đặc thù của ngành công nghiệp. Tuy nhiên ứng dụng này sẽ mô phỏng biến động giá cổ phiếu bằng một lớp StockPriceSource chứa một ánh xạ “tin điện báo cổ phiếu với mức giá” (stock ticker to price), và mọi yêu cầu về giá của một cổ phiếu sẽ cập nhật giá đó trong ánh xạ này, thay đổi nó lên xuống một cách ngẫu nhiên trong biên độ thay đổi lập sẵn (xem mã kèm theo trong phần Tải về để biết thêm chi tiết). Để cung cấp StockPriceSource cho StockListController, sửa đổi các định nghĩa bean của StockListController trong spring-servlet.xml và cung cấp một định nghĩa bean mới cho đối tượng StockPriceSource, như Liệt kê 2. Liệt kê 2. Cung cấp cho StockListController một StockPriceSource trong spring-servlet.xml <bean id="stockPriceSource" class="com.jm.fbstockdemo.StockPriceSource"> <bean id="stockListController" class="com.jm.fbstockdemo.StockListController"> <property name="stockPriceSource" ref="stockPriceSource"/> stockList.jsp Thuộc tính của bean stockPriceSource cấu hình hành vi của nó: tất cả các cổ phiếu bắt đầu với giá 5000 cent ($50), có thể thay đổi đến 50 cent mỗi tích tắc (thuộc tính volatility ), và không được phép rớt giá xuống dưới $5 hoặc lên trên $100 trong dải biến thiên ngẫu nhiên của chúng theo thời gian. Thuộc tính stockPriceSource trên bean stockListController cung cấp cho stockListController một cá thể stockPriceSource có phạm vi trên toàn ứng dụng. Vì StockPriceSource là một bean, cùng một cá thể như vậy sẽ vẫn nằm trong bộ nhớ cho đến khi ứng dụng web hoặc IBM WebSphere được khởi động lại, và như vậy biến thiên giá cổ phiếu sẽ vẫn ổn định trong trang vải nền Facebook cho đến khi ứng dụng còn đang chạy. Sử dụng thư viện thẻ JSP JSON để tạo ra nguồn cấp JSON Bây giờ bạn đã có một nguồn cổ phiếu và giá cả của chúng được mô phỏng theo thời gian thực, hãy cung cấp thông tin này như là dữ liệu JSON cho các lần gọi Javascript AJAX mà sẽ chạy trong trang vải nền. JSON (ký pháp đối tượng JavaScript), đặc tả của nó hiện có tại là một định dạng thay thế cho XML để chuyển dữ liệu đối tượng, và đang trở thành được ưa thích đối với dữ liệu AJAX. Nó cô đọng hơn (do đó truyền tải nhanh hơn), cung cấp một ký pháp dễ hiểu cho các thuộc tính của một đối tượng (trái ngược với sự pha trộn của các thuộc tính và các thẻ con của XML), và không như XML cung cấp một cấu tạo rõ ràng để biểu thị một danh sách các mục. Các tính năng này làm cho nó nhanh hơn, đơn giản, và không nhập nhằng khi chuyển dữ liệu JSON thành các đối tượng trong một ngôn ngữ như Javascript mà hỗ trợ các đối tượng và mảng. Tuy nhiên, các khung nhìn của ứng dụng là JSPs, và các JSP gồm cả XML, nên sử dụng một thư viện thẻ JSP cho phép bạn dựng nên các đối tượng bằng cách sử dụng XML, trong khi các thẻ biểu hiện dữ liệu đối tượng ở định dạng JSON. Để làm điều đó, hãy sử dụng thư viện thẻ JSON JSP sẵn có tại taglib.sourceforge.net/index.html. Tải về json-taglib JAR vào thư mục WEB- INF/lib của bạn. Sau đó sửa đổi stockList.jsp -- khung nhìn được StockListController biểu hiện -- để cung cấp dữ liệu dưới dạng JSON, như Liệt kê 3. Liệt kê 3. Sử dụng thư viện thẻ JSON JSP để biểu hiện nguồn cấp giá cổ phiếu JSON <%@ taglib prefix="c" uri="" %> <%@ taglib prefix="json" uri="" %> <c:forEach items="${stocks}" var="stock"> <json:property name="id"><c:out value="${stock.id}"/> <json:property name="ticker"><c:out value="${stock.ticker}"/> <json:property name="price"><c:out value="${stock.price}"/> Một đối tượng JSON gồm có các cặp tên/giá trị, trong đó một giá trị có thể là giá trị kiểu nguyên thủy như một chuỗi ký tự, một đối tượng JSON khác, hoặc một mảng JSON. Trong stockList.jsp, thẻ tạo ra một đối tượng JSON như là vỏ bọc bậc cao nhất của nó. Nhãn tạo ra một thuộc tính của đối tượng bậc cao nhất gọi là stocks là một mảng của các đối tượng JSON, trong trường hợp này là cổ phiếu. JSP lặp qua các cổ phiếu do StockListController cung cấp để xây dựng nên mảng JSON, tạo ra một đối tượng JSON cho mỗi cổ phiếu, mỗi cái với một mã nhận dạng (id), tin điện báo (ticker) và thuộc tính giá cả (price). Chú ý rằng contentType ở đây là text (văn bản) nên bạn có thể xem các kết quả trong một trình duyệt và gỡ lỗi Javascript dễ dàng hơn, nhưng một cách khác nó có thể là “text/json”. Cũng lưu ý rằng bạn không thể bao gồm các chú thích <!-- xml comments --> trong JSP này, vì mặc dù chúng sẽ bị bỏ qua nếu đầu ra là XML, nhưng chúng sẽ được diễn giải như là dữ liệu hỏng khi kết quả được diễn giải như là JSON. Để kiểm tra nguồn cấp JSON của giá cả cổ phiếu, hãy triển khai lại ứng dụng Web lên WebSphere (như trong Phần 2 của hướng dẫn này), di chuyển đến trong trình duyệt của bạn, và bạn sẽ thấy các cổ phiếu và giá cả của chúng ở định dạng JSON. Tải lại trình duyệt và giá cả cổ phiếu trong dữ liệu JSON sẽ thay đổi, vì StockPriceSource sẽ thay đổi giá cả của chúng với mỗi yêu cầu. Xem nguồn cấp JSON này đang hoạt động khi bạn thực hiện việc gọi ra AJAX trong FBJS của trang vải nền (Facebook JavaScript). Tuy nhiên, trước khi bạn đến đó bạn cần phải nhận ra người sử dụng Facebook đang xem trang danh mục đầu tư (portfolio page), do đó hãy chuyển sự chú ý của bạn trở lại phía bên PHP của ứng dụng để kết nối với Facebook và nhận dạng người sử dụng Facebook trong cơ sở dữ liệu DB2 của bạn. Kết nối với ứng dụng và với Facebook trong PHP Bây giờ hãy thực hiện trang vải nền của ứng dụng, gồm cả việc kết nối với Facebook và nối kết người sử dụng Facebook với mã nhận dạng của họ trong cơ sở dữ liệu DB2 IBM, và thực hiện trang danh mục đầu tư chính của người sử dụng, dùng nguồn cấp JSON. Sửa đổi URL gọi lại để sử dụng tập tin .htaccess Trong Phần 1 của hướng dẫn này bạn đã sử dụng một tệp index.php đơn giản để kiểm tra cấu hình ứng dụng Facebook. Do bạn đã bổ sung hoàn thiện cơ sở hạ tầng và đang sử dụng tập tin .htaccess để gửi đi các yêu cầu, bạn cần phải thay đổi URL gọi lại của ứng dụng trong thiết lập của ứng dụng. Trong Facebook, nhấn vào ứng dụng Applications ngay bên dưới hộp tìm kiếm (Search box). Trong ứng dụng Applications bạn có thể nhìn thấy toàn bộ các ứng dụng được cài đặt của bạn. Nhấn vào ứng dụng Developer nó chứa một danh sách các ứng dụng mà bạn là nhà phát triển, hiển thị dưới dạng một danh sách nằm ở phía bên phải (xem Hình 1). Hình 1. Danh sách ứng dụng của bạn trong ứng dụng Developer Nhấn vào tên ứng dụng của bạn để xem trang thiết lập của nó, nhấn Edit Settings, và đổi Callback URL thành thay SERVER bằng URL của máy chủ web Apache 2 ở xa của ứng dụng của bạn. Nếu bạn đặt Callback URL như trong Phần 1, việc này chỉ đòi hỏi loại bỏ tên tệp index.php khỏi phần cuối của URL. Sửa đổi .htaccess để hỗ trợ ứng dụng đầy đủ Do trang vải nền của bạn trỏ đến thư mục fb_stock_demo, được điều quản bởi RewriteRules, của tập tin .htaccess, hãy sửa đổi .htaccess như trong Liệt kê 4 để cung cấp tất cả các quy tắc cần thiết để hoàn tất ứng dụng. Liệt kê 4. Tập tin .htaccess đầy đủ RewriteEngine on # php dispatcher request RewriteCond %{QUERY_STRING} (.*) RewriteRule ^php/(.*) index.php?controller=$1&%1 [last] # index RewriteRule ^$ php/defaultCanvas [next] # php actions RewriteRule ^login$ php/login [next] RewriteRule ^portfolio$ php/portfolio [next] RewriteRule ^recommendStockToFriends$ php/recommendStockToFriends [next] # java actions RewriteRule ^tradeStock$ java/tradeStock [next] RewriteRule ^stockList$ java/stockList [next] RewriteRule đầu tiên định tuyến tất cả các yêu cầu có tiền tố “php/” đến index.php như trong Phần 2 của hướng dẫn này. Quy tắc tiếp theo tiến hành so khớp Callback URL nhưng không có phần đường dẫn tiếp theo được xác định, và nó uỷ quyền cho yêu cầu PHP defaultCanvas. Các hành động PHP khác hoạt động tương tự, và các hành động Java hiện nay bao gồm cả một yêu cầu tradeStock mà bạn sẽ triển khai thực hiện sau trong hướng dẫn này. Sửa đổi app.properties Trong Phần 2 bạn đã phát triển lớp ActionDispatcher nó định tuyến các yêu cầu đến các lớp của trình điều khiển bằng cách sử dụng các tệp thuộc tính trong lớp Injectable. Để cung cấp cho trình điều khiển các ánh xạ định nghĩa trong tập tin .htaccess mới, hãy sửa đổi app.properties (trong thư mục conf, dưới thư mục fb_stock_demo, là nơi chứa tệp .htaccess) như Liệt kê 5. Liệt kê 5. Tập tin app.properties đầy đủ ActionDispatcher/defaultCanvas=DefaultCanvasController ActionDispatcher/login=LoginController ActionDispatcher/portfolio=PortfolioController ActionDispatcher/recommendStockToFriends=RecommendStockToFriendsContro ller AbstractStockDemoFacebookController/facebook_api_key=[YOUR FACEBOOK API_KEY] AbstractStockDemoFacebookController/facebook_secret=[YOUR FACEBOOK SECRET] AbstractStockDemoFacebookController/facebookAppUrl= m/ [YOUR CANVAS PAGE URL] AbstractStockDemoFacebookController/siteUrl= http://[YOUR SERVER URL]/fb_stock_demo DefaultCanvasController/loggedInForward=portfolio DefaultCanvasController/loginView=loginView.php LoginController/alreadyHasUserForward=portfolio LoginController/validUserForward=portfolio LoginController/invalidUserView=loginView.php Vào thời điểm này, dòng đầu tiên là hệ trọng nhất, bởi vì nó sẽ ánh xạ khoá của trình điều khiển defaultCanvas (được cung cấp bởi quy tắc viết lại trong .htaccess) đến lớp DefaultCanvasController sao cho lớp ActionDispatcher sẽ tạo ra một cá thể DefaultCanvasController và cho chạy nó khi có người truy cập trang vải nền của ứng dụng của bạn. Các thuộc tính khác sẽ trở nên hữu ích khi bạn thực hiện phần còn lại của ứng dụng. DefaultCanvasController DefaultCanvasController xử lý các yêu cầu được gửi tới trang vải nền của ứng dụng Facebook (mà không có URI phụ), và cần để xử lý hai khả năng. Một khả năng là, nếu đây là lần đầu tiên người sử dụng truy cập trang vải nền của ứng dụng này, có nghĩa là bây giờ họ chỉ vừa mới thêm ứng dụng vào. Khi họ truy cập lần đầu tiên, bạn có được mã nhận dạng người sử dụng Facebook vì Facebook gửi nó trong yêu cầu, nhưng bạn còn chưa biết người sử dụng facebook này là ai về mặt môi giới chứng khoán, nghĩa là tên người sử dụng là gì theo hệ thống hiện hành, vì vậy bạn cần đến chúng để đăng nhập và thiết lập liên kết đó. Khả năng thứ hai là trường hợp người sử dụng đã đăng nhập vào hệ thống, trong trường hợp này họ có thể bỏ qua màn hình đăng nhập tuỳ chỉnh của bạn và xem danh mục đầu tư của họ. Trong trường hợp đầu, DefaultCanvasController biểu hiện khung nhìn đăng nhập tùy chỉnh của ứng dụng, và trong trường hợp thứ hai, nó chuyển điều khiển đến PortfolioController (mà bạn sẽ thực hiện sau đây), như Liệt kê 6. Liệt kê 6. Lớp DefaultCanvasController class DefaultCanvasController extends AbstractStockDemoFacebookController { public function __construct() { parent::__construct(false); } protected function executeFacebookRequest() { return $this->user ? new ControllerForward ($this- >loggedInForward) : new ModelAndView ($this- >loginView); } } DefaultCanvasController Chuyển giao kết quả là false đến hàm tạo của lớp cha, chỉ rõ rằng không yêu cầu người sử dụng đã được đăng nhập vào hệ thống môi giới chứng khoán. Thuộc tính loginView được thêm vào từ app.properties và tương ứng với loginView.jsp. loggedInForward cũng được thiết lập trong app.properties, và nó xác định rõ khoá của trình điều khiển “portfolio”, ánh xạ đến lớp PortfolioController (tham khảo liệt kê mã lệnh của app.properties để biết các giá trị khoá khác nhau được ánh xạ vào). Trong trường hợp đầu, khi mà người sử dụng lần đầu tiên thêm ứng dụng Facebook và cần đăng nhập vào môi giới chứng khoán, loginView.jsp là một trang đăng nhập đơn giản (xem Liệt kê 7) mà sau đó được hiển thị như trang vải nền của ứng dụng của bạn (xem Mã nguồn để có toàn bộ tập tin). Liệt kê 7. Thẻ form trong loginView.php <span class="label">Username:<input name="username"/> <span class="label">Password:<input name="password" type="password"/> <input type="submit" value="Submit"/> Đây thực sự là FBML, mặc dù nó không sử dụng bất kỳ thẻ FBML đặc trưng Facebook nào. Chú ý rằng hành động (action) của biểu mẫu liên quan đến Callback URL của ứng dụng; Facebook uỷ nhiệm yêu cầu post tới máy chủ của bạn. Lớp LoginController xử lý yêu cầu post (gửi dữ liệu) đăng nhập (xem Mã nguồn để biết thêm chi tiết), bằng cách chèn thêm vào một hàng trong bảng facebook_user, liên kết mã nhận dạng người sử dụng facebook của người sử dụng với ID nhà kinh doanh môi giới chứng khoán của họ. Thực hiện một trình điều khiển cơ sở chung Do tất cả các trình điều khiển, ngoại trừ LoginController đều yêu cầu rằng người sử dụng Facebook được nhận biết trong hệ thống môi giới chứng khoán, và do tất cả các trình điều khiển này sẽ yêu cầu một kết nối với trình khách Facebook, sẽ hữu ích nếu sử dụng một lớp cơ sở chung, kết nối với Facebook và tìm kiếm người sử dụng trong cơ sở dữ liệu trước khi thực hiện các chi tiết của yêu cầu đó. Để làm điều này, hãy thực hiện lớp điều khiển cơ sở AbstractStockDemoFacebookController, như Liệt kê 8. Liệt kê 8. Lớp AbstractStockDemoFacebookController (PHP) abstract class AbstractStockDemoFacebookController extends AbstractStockDemoController { protected $facebook = null; private $requiresUser; protected $user = null; public function __construct($requiresUser = true) { parent::__construct(); $this- >addPrefix('AbstractStockDemoFacebookController'); $this->requiresUser = $requiresUser; } public function executeSpecific() {