Hướng dẫn cách tạo ứng dụng apps trên Facebook

Thứ Ba, 6 tháng 3, 2012

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 1: Thiết lập các thành phần

Tóm tắt: Phát triển một ứng dụng Facebook sử dụng cả ngôn ngữ lập trình PHP và Java™. Hướng dẫn này sẽ mang lại cho bạn một cái nhìn đầu tiên về Facebook và sau đó từng bước dẫn bạn qua quá trình cài đặt các thành phần cần thiết để tạo ra một ứng dụng Facebook. Tiếp theo, bạn sẽ đi một vòng khảo sát Facebook về cách làm thế nào để tích hợp các ứng dụng của bạn vào trang web. Cuối cùng, bạn sẽ bắt đầu với một ứng dụng cơ bản nhất. Trong phần 2 và 3 của loạt hướng dẫn này, bạn sẽ tìm hiểu làm thế nào để phát triển các ứng dụng mà bạn đã tạo ra trong Phần 1.

Bắt đầu phát triển ứng dụng Facebook
Để bắt đầu phát triển ứng dụng, đầu tiên báo cho các máy chủ của Facebook biết về ứng dụng của bạn, thiết lập các tùy chọn cấu hình cần thiết, tạo ra một vài bảng cơ sở dữ liệu trong DB2, sau đó kết thúc bằng một mẫu nhỏ ban đầu về ứng dụng của bạn để xác nhận rằng nó được cài đặt đúng trong Facebook.
Báo cho các máy chủ của Facebook biết về ứng dụng của bạn
Nếu bạn chưa có một tài khoản Facebook, bước đầu tiên là tạo ra một tài khoản ở tại http://www.facebook.com. Facebook gửi một email xác nhận đến địa chỉ mà bạn cung cấp như là mã nhận dạng đăng nhập của tài khoản - nhấn chuột vào liên kết trong email để hoàn tất việc đăng ký của bạn.

Tiếp theo, thêm ứng dụng Nhà phát triển Facebook (Facebook Developer Application) vào tài khoản của bạn sao cho bạn có thể thêm và quản lý các ứng dụng Facebook của mình. Sau khi đăng nhập vào tài khoản Facebook của bạn, hãy đi tới http://www.facebook.com/developers, ở đây bạn sẽ được chuyển hướng tiếp (xem Hình 32).

Hình 32. Thêm ứng dụng Nhà phát triển

Giữ nguyên các giá trị mặc định và nhấn vào Add Developer. Bạn đã sẵn sàng để phát triển ứng dụng đầu tiên của mình (xem hình 33).

Hình 33. Ứng dụng của nhà phát triển khi thêm nó lần đầu tiên

Để làm các ứng dụng tương lai, bạn có thể đi tới trang vải nền của ứng dụng nhà phát triển thông qua liên kết Left Nav được cài đặt trong danh sách các ứng dụng của bạn. Để thêm vào một ứng dụng, nhấn vào Applycho một phím ứng dụng (Application Key) và bắt đầu cấu hình (xem Hình 34).

Hình 34. Tạo một ứng dụng mới

Mặc dù bạn chỉ cần cung cấp một tên cho một ứng dụng và chấp nhận các điều khoản của nền tảng Facebook, ứng dụng của bạn sẽ không có ích lắm nếu không có những thông tin mà bạn cung cấp trongOptional Fields (xem Hình 35). Hãy chú ý rằng bạn có thể chỉnh sửa trang các thiết lập này bất kỳ lúc nào bạn cần đến trong tương lai sau khi lưu nó lần đầu. Bây giờ chỉ cần điền vào các trường cần thiết để bắt đầu. Trong Phần 2, khi bạn phát triển các ứng dụng, bạn sẽ quay lại trang các thiết lập này.

Hình 35. Cấu hình ứng dụng -- Các trường tùy chọn (Optional Fields)

E-mail liên hệ của nhà phát triển (Developer Contact E-mail) và E-mail hỗ trợ người dùng (User Support E-mail): là email đăng nhập Facebook của bạn; địa chỉ email đầu tiên là để Facebook liên lạc với bạn nếu như ứng dụng của bạn có vấn đề và địa chỉ email thứ hai là để những người sử dụng liên lạc với bạn thông qua trang trợ giúp trong ứng dụng của bạn.
URL của trang vải nền (Canvas Page URL): URL của trang vải nền của ứng dụng của bạn trên trang Facebook, ví dụ như http://apps.facebook.com/MyUniquelyNamedApp. URL phải là duy nhất trong số tất cả các ứng dụng Facebook, nhưng một khi bạn đã gõ số lượng ký tự đủ nhiều, một trình báo hiệu Javascript sẽ báo cho bạn ngay khi đang gõ vào là URL còn có sẵn để dùng hay không, vì thế không cần phải tìm trước các tên trong danh mục ứng dụng để đảm bảo tính duy nhất đó (xem Hình 36).

Hình 36. Nhập vào một URL duy nhất dành cho trang vải nền

Url gọi ngược lại (Callback Url): Thực ra không hoàn toàn là gọi ngược lại theo đúng nghĩa, mà đó là một đại diện ủy quyền của URL của ứng dụng trên máy chủ từ xa. Trong trường hợp này, đó là URL của kịch bản lệnh PHP đang chạy trên máy chủ Apache 2 của bạn để đưa ra nội dùng của vùng vải nền, ví dụ như, http://someserver.com/facebook_app/index.php.

Hiệu quả kết hợp của URL của trang vải nền và URL gọi ngược lại (Callback) là ở chỗ những người dùng có thể tới URL của trang vải nền trong trình duyệt của mình để xem trang vải nền ứng dụng của bạn và Facebook điền vào vùng vải nền trên trang đó bằng cách gọi một kịch bản lệnh PHP từ xa của bạn. Facebook không bao giờ để lộ ra URL gọi ngược lại cho bất kỳ ai trừ nhà phát triển ứng dụng.
Sử dụng FBML / Sử dụng khung nội tuyến (iframe): Là lựa chọn để báo cho Facebook biết URL gọi ngược lại của trang vải nền (Canvas Page Callback) của bạn trả về FBML để Facebook sau đó dịch sang HTML hay là nó trả về thẳng HTML trực tiếp để Facebook hiển thị đúng nguyên văn trong một khung nội tuyến, như là nội dung của vùng vải nền.
Vì FBML dù thế nào đi nữa cũng cung cấp một thẻ <fb:iframe> và cung cấp rất nhiều chức năng để truy cập vào môi trường Facebook khi biểu hiện nội dung FBML, không có lý do gì để không sử dụng FBML. Nếu bạn có một thành phần HTML/Javascript mà bạn muốn nhúng vào, bạn có thể đưa nguyên văn nó vào nguồn của một <fb:iframe> bên trong trang vải nền FBML của bạn.
Kiểu ứng dụng (Application Type): Chọn Website để chỉ định rằng ứng dụng của bạn là ứng dụng được nhúng vào, có nghĩa là được sử dụng trực tiếp trong trang Web Facebook. Chọn Desktop để chỉ định rằng ứng dụng là một ứng dụng trên máy để bàn hay là phần mở rộng của trình duyệt để giao tiếp với các máy chủ của Facebook, ví dụ, một ứng dụng trên máy để bàn nhằm nạp lên và tải về cả khối các bức ảnh của Facebook.
Các địa chỉ IP của máy chủ gửi các yêu cầu (IP Addresses of Servers Making Requests): Để tăng thêm tính bảo mật, hãy chỉ rõ địa chỉ IP máy chủ từ xa của bạn sao cho chỉ có máy chủ của bạn có thể gửi các yêu cầu Facebook (kéo hoặc đẩy dữ liệu) thay mặt cho ứng dụng Facebook của bạn. Nếu ứng dụng của bạn chạy trên nhiều địa chỉ IP, bạn nên chỉ rõ tất cả chúng ở đây.
Ứng dụng của bạn có thể được thêm vào Facebook không (Can your application be added on Facebook)?: Nhấn Yes. Điều này chỉ rõ người sử dụng, bao gồm các nhà phát triển, có thể thêm ứng dụng của bạn vào tài khoản của họ hay không. Chỉ rõ Chế độ phát triển(Developer Mode) ở dưới để hạn chế quyền truy cập chỉ cho các nhà phát triển vào thời điểm này. Dưới nút Developers hãy chỉ rõ các tên của các nhà phát triển khác có thể truy cập vào ứng dụng, khi nó ở trong chế độ phát triển.
Tùy chọn kích thước vải nền của khung nội tuyến mặc định (Default Iframe Canvas Size Option): Tùy chọn này chỉ có liên quan nếu bạn đã đánh dấu chọn nút tròn của khung nội tuyến thay vì FBML làm kiểu nội dung mà URL gọi ngược lại sẽ trả về. Trong trường hợp chọn khung nội tuyến, Facebook không đưa nội dung vào một thẻ <iframe> HTML thuần túy, mà nó sử dụng thẻ <fb:iframe> tương đương của FBML để cung cấp một số chức năng tùy chỉnh bổ sung thêm, bao gồm cả hai thuộc tính boolean loại trừ lẫn nhau, là kích thước thông minh (smartsize) và kích thước điều chỉnh được (resizable), chỉ rõ khung nội tuyến được điều chỉnh kích thước như thế nào. Thuộc tính kích thước thông minh (Smart size) báo cho Facebook điều chỉnh kích thước của khung nội tuyến cho phù hợp với vùng vải nền và thuộc tính kích thước điều chỉnh được (resizable) chỉ rõ rằng kích thước của khung nội tuyến có thể được đặt bằng cách sử dụng API Javascript. Vì bạn đã chọn FBML, nên tùy chọn này là không phù hợp với ứng dụng của bạn.

Các tùy chọn cài đặt và các điểm tích hợp
Việc chọn Yes cho tùy chọn “Ứng dụng của bạn có thể được thêm vào Facebook không?” sẽ làm tiết lộ thêm hai phần tùy chọn, tùy chọn cài đặt và các điểm tích hợp (xem Hình 37 và Hình 38).

Hình 37. Cấu hình ứng dụng -- Tùy chọn cài đặt

Ai có thể thêm ứng dụng của bạn vào tài khoản Facebook của họ (Who can add your application to their Facebook account)?: Đối với ứng dụng của bạn, chọn Users, điều này chỉ rõ rằng những người sử dụng có thể thêm ứng dụng vào tài khoản của họ. Bạn cũng có thể chỉ rõ rằng ứng dụng có thể được thêm vào các trang web cụ thể hay các kiểu trang web cụ thể nào đó trong Facebook.
Mô tả ứng dụng (Application Description): Đặt bất kỳ lời văn nào mà bạn muốn xuất hiện trên trang thêm ứng dụng khi người sử dụng được nhắc thêm ứng dụng.
FBML mặc định (Default FBML): Đây là FBML được biểu hiện đầu tiên trên trang Khái lược của người sử dụng, cho đến khi ứng dụng của bạn cập nhật rõ ràng khái lược của họ, sử dụng thư viện khách PHP (chi tiết hơn về điều này có trong phần 2 của hướng dẫn này). Bây giờ bạn chỉ cần đặt vào đây một cái gì đó để giữ chỗ nhằm hoàn tất bước này để chạy được ứng dụng mẫu.
Cột của hộp khái lược mặc định (Default Profile Box Column): Chọn Narrow. Điều này chỉ rõ rằng chương trình ứng dụng của bạn sẽ xuất hiện trong cột hẹp hơn ở bên trái của trang khái lược chứ không phải cột rộng hơn.
Chế độ nhà phát triển (Developer Mode): Lựa chọn chế độ này để chỉ cho phép các nhà phát triển ứng dụng được thêm nó vào tài khoản của họ. Ứng dụng vẫn chưa được đăng vào trong Danh mục sản phẩm, cho nên ít khả năng có người sử dụng nào đó tìm thấy nó, nhưng nếu họ biết được URL thì họ có thể truy cập nó.Phần các điểm tích hợp cho phép bạn chỉ rõ các điểm tích hợp phụ thêm nữa trong môi trường của người sử dụng. Hiện giờ chỉ cần định rõ URL của dẫn hướng cạnh bên (Side Nav), mà nó chính là URL của liên kết xuất hiện trong danh sách ứng dụng của bạn (liên kết Left Nav). Hãy chắc chắn rằng URL là giống hệt với URL của Trang vải nền và tất cả các chữ đều là chữ viết thường. Các URL của Trang vải nền có phân biệt chữ hoa, chữ thường và thậm chí nếu bạn chỉ rõ một URL của Trang vài nền có kiểu chữ hỗn hợp, nó được chuyển đổi tất cả thành chữ thường, do đó chắc chắn rằng ở đây bạn đã dùng dạng chữ thường, vì nếu trái lại liên kết này sẽ tạo ra lỗi không tìm thấy trang.

Hình 38. Cấu hình Ứng dụng -- Các điểm tích hợp

Nhấn nút đệ trình (submit) các tùy chọn đã thiết lập và bạn sẽ thấy một trang tóm tắt (xem Hình 39).

Hình 39. Trang tóm tắt các giá trị tùy chọn đã thiết lập của ứng dụng

Để thay đổi các giá trị đã thiết lập này, hãy nhấn vào Edit Settings ở bên phải.
Cuối cùng, để kiểm tra việc thiết lập, hãy tạo ra một tệp index.php cơ bản để xác nhận rằng Facebook đang kéo một cách chính xác nội dung của bạn qua đại diện ủy quyền URL gọi ngược lại. Bạn có thể kết nối với Facebook qua thư viện khách PHP và Facebook sẽ biểu hiện FBML của bạn. Tạo một thư mục trong máy chủ Apache 2 của bạn cho ứng dụng của bạn, C:\Program Files\Zend\Apache2\htdocs\fb_stock_demo. Sau đó, hãy vào http://developers.facebook.com/resources.php và tải về thư viện khách PHP dưới dạng tệp tar.gz (xem Hình 40).

Hình 40. Tải về thư viện khách PHP

Thư mục nền tảng facebook ở bên trong có chứa một thư mục khách, thư mục khách gồm các mã khách PHP Facebook. Sao chép thư mục khách này vào thư mục trong Apache 2 vừa tạo ra ở trên để tạo thành thư mục con mới C:\Program Files\Zend\Apache2\htdocs\fb_stock_demo\client.
Tiếp theo, bạn sẽ tạo ra chính bản thân tệp index.php, trong thư mục C:\Program Files\Zend\Apache2\htdocs\fb_stock_demo (xem Liệt kê 5).

Liệt kê 5: Một tệp index.php đơn giản cho Trang vải nền

<?php

// the facebook client library
include_once './client/facebook.php';

// the values on our application's settings summary page
$api_key = 'YOUR_API_KEY';
$secret = 'YOUR_SECRET';

// connect to Facebook, require app installation
$facebook = new Facebook($api_key, $secret);
$facebook->require_frame();
$facebook->require_install();

// obtain the user's id
$user = $facebook->require_login();

?>

<div style="border: solid black 1px; padding: 25px;">
<h2>Hi <fb:name firstnameonly="true" uid="<?=$user?>"
useyou="false"/>!</h2>
<br/>
Welcome to the Developer Works Stock Broker Demo. Coming soon...
</div>

Dòng đầu tiên là để bao gồm (include) thư viện khách PHP Facebook. Đặt $api_key và $secret bằng các giá trị API Key và giá trị Secret trên trang tóm tắt của ứng dụng của bạn. Dòng kế tiếp kết nối vào Facebook, tạo ra một đối tượng ủy nhiệm mà bạn sẽ sử dụng để giao tiếp với các máy chủ của Facebook. Khi sử dụng đối tượng ủy nhiệm này, bạn yêu cầu người sử dụng đang xem ứng dụng của bạn đã phải đăng nhập vào ứng dụng để xem được, và nhận được mã nhận dạng id của người sử dụng để sử dụng nó trong thẻ <fb:name> dưới đây. Bản thân FBML hầu hết là HTML thuần túy và được biểu hiện hoàn toàn tương tự. Thẻ <fb:name> đem lại hương vị FBML -- Facebook biến thẻ đó thành tên của người sử dụng xem ứng dụng (vì bạn đã chuyển mã nhận dạng id của người sử dụng đó). Thẻ này cung cấp một số các tùy chọn và nhiều chức năng về tạo ra văn bản thực sự như thế nào. Trong ví dụ này, chỉ rõ useyou="false" để ghi đè lên giá trị mặc định, là biểu hiện từ you thay cho tên của người sử dụng bởi vì mã nhận dạng id của người sử dụng đã chỉ rõ những người đó là người sử dụng đang xem ứng dụng. Trong trường hợp này bạn muốn nói với người xem của bạn bằng chính tên của họ khi gửi lời chào mừng.
Đặt tệp index.php này vào trong thư mục ứng dụng của bạn, dưới thư mục htdocs của Apache 2, C:\Program Files\Zend\Apache2\htdocs\fb_stock_demo và đi tới URL trang vải nền của ứng dụng của bạn của trong trình duyệt, ví dụ như http://apps.facebook.com/devworksstockdemo/ (xem Hình 41).

Hình 41. Thêm ứng dụng của bạn định tuyến đến trang vải nền của nó

Để nguyên tất cả mọi thứ đã đánh dấu chọn, nhấn vào nút thêm (add) ở dưới đáy và bạn đến trang khái lược của mình. Cuộn xuống dưới và bạn sẽ nhìn thấy hộp khái lược của ứng dụng của bạn, có chứa các mã FBML mặc định mà bạn đã cung cấp (xem Hình 42).

Hình 42. Hộp khái lược của ứng dụng của bạn

Cuộn ngược lên để xem danh sách ứng dụng của bạn và thấy rằng ứng dụng của bạn đã thêm vào liên kết Left Nav của nó (xem hình 42). Bạn có thể phải nhấn vào 'more' để hiển thị toàn bộ danh sách những chương trình ứng dụng.

Hình 43. Liên kết Left Nav của ứng dụng của bạn