Đang tải... (xem toàn văn)
Lập Trình Ung Dụng Facebook, LẬP TRÌNH VÀ THIẾT KẾ WEBSITE TƯƠNG TÁC VỚI MẠNG XÃ HỘI FACEBOOK,MẠNG XÃ HỘI FACEBOOK
TÀI LIỆU CỦA THƯ VIỆN LẬP TRÌNH LẬP TRÌNH VÀ THIẾT KẾ WEBSITE TƢƠNG TÁC VỚI MẠNG XÃ HỘI FACEBOOK Dành Cho Người Mới Bắt Đầu TẬ P Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang / 29 Mục lục (nối tiếp tập 1) PHẦN 3: GIỚI THIỆU FACEBOOK APIs PHẦN 4: LÀM VIỆC VỚI GRAPH API .4 Nguyên lý hoạt động 1.1 Cổng giao tiếp HTTP 1.2 Dữ liệu gửi lên cổng giao tiếp 1.3 Kết trả 1.4 Kết luận Tạo ứng dụng 2.1 Tạo ứng dụng đại diện facebook | Bước 2.2 Thiết lập thông số cho ứng dụng đại diện | Bước 10 2.3 Kết nối đến ứng dụng tạo trang HTML để thử nghiệm | Bước 13 2.4 Ứng dụng thực tế 23 Đọc liệu từ Open Graph 24 3.1 Graph API Explorer gì? 24 3.2 Truy cập giao diện 24 3.3 Sử dụng Graph API Explover 25 3.4 Tổng kết 28 Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang / 29 PHẦN 3: GIỚI THIỆU FACEBOOK APIs Tìm đọc tập tại: http://facebook.com/thuvienlaptrinh Trong tập bạn đƣợc học nhiều việc giao tiếp với facebook Bạn chủ động gửi viết, bình luận, chia sẽ, lấy trình bày thơng tin facebook website bạn Tất tiện ích đƣợc gơm lại nhóm đƣợc gọi Facebook APIs Sau danh sách định nghĩa thành phần Facebook APIs Hãy đọc qua để có khái niệm ban đầu trƣớc ta chi tiết phần theo thứ tự (chỉ cần đọc qua khái niệm để biết, không cần suy nghĩ nhiều, vào phần chi tiết bạn hiểu rõ ràng hơn) Graph API: API nhất, cho phép bên ngồi truy cập vào đối tƣợng bên mạng lƣới graph facebook thơng qua hình thức truy vấn HTTP Hầu hết API khác hoạt động dựa API Facebook Query Language: đƣợc gọi tắt FQL, API cung cấp ngôn ngữ truy vấn sở liệu, giúp bên ngồi trực tiếp truy vấn vào sở liệu facebook lấy liệu theo định dạng số lƣợng mà họ mong muốn Open Graph: tƣơng tự nhƣ graph api, giúp cho ứng dụng tạo đƣợc viết facebook, nhƣng mang ý nghĩa “kể hoạt động” ngƣời dùng ứng dụng bạn Dialogs: facebook cung cấp sẵng số hộp thoại dùng cho việc nhƣ: đăng nhập tài khoản facebook, gửi viết lên tƣờng nhà ngƣời gửi yêu cầu cho bạn bè Chat: tích hợp facebook chat vào ứng dụng bạn, tích hợp kết nối tới facebook thông qua dịch vụ Jabber/XMPP Localization and Translation: cơng cụ giúp “nội địa hóa” ứng dụng bạn để thân thiện ngôn ngữ vùng sử dụng Ads API: giúp xây dựng ứng dụng thay cho Facebook Ads Manager and Power Editor Bây bắt đầu học qua thành phần Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang / 29 PHẦN 4: LÀM VIỆC VỚI GRAPH API Nguyên lý hoạt động Nói cách thức hoạt động graph api, ta chia làm vấn đề chính: cổng giao tiếp HTTP, liệu gửi lên cổng kết trả Ta tìm hiểu khái niệm trƣớc thực hành chi tiết chúng 1.1 Cổng giao tiếp HTTP Graph API hoạt động dựa truy vấn HTTP Mọi thao tác muốn thực gửi truy vấn HTTP đến cổng mà facebook cung cấp Cú pháp cụ thể truy vấn lên cổng giao tiếp HTTP nhƣ sau: Cú pháp https://graph.facebook.com/ Trong đó, “https://graph.facebook.com/” cổng giao tiếp HTTP graph api Còn liệu mà ta gửi đến cổng giao tiếp 1.2 Dữ liệu gửi lên cổng giao tiếp Cấu trúc chuỗi đƣợc gửi lên cổng giao tiếp có cú pháp tổng quát nhƣ Cú pháp https://graph.facebook.com/&access_token=??? Thông tin đƣợc chia làm phần: action-data access_token action-data Là chuỗi liệu mô tả công việc cần thực Chia làm mục đích sử dụng “Lấy liệu” “Gửi liệu” Sẽ có cú pháp cụ thể sau acess_token Là khóa an ninh truy vấn, khóa giới thiệu tập Mọi truy vấn đến graph api phải có khóa an ninh 1.3 Kết trả Kết truy vấn HTTP gửi đến graph api trả chuỗi liệu dạng JSON(?) thông báo lỗi Trƣờng hợp thông báo lỗi xãy khai báo khơng cú pháp khóa an ninh khơng có quyền hạn để tiến hành cơng việc mong muốn Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang / 29 (?) JSON viết tắt “JavaScript Object Notation”, cấu trúc dùng để lƣu trữ thông tin, gần giống với XML, nhƣng JSON thƣờng đƣợc dùng cần lƣu trữ liệu nhỏ gọn Vì mà việc đọc xử lý nhanh XML Dƣới ví dụ liệu JSON Ví dụ chuỗi liệu JSON { "SinhVien": [ { "HoVaTen":"Đặng Văn A" , "NamSinh":1989, "Lop":"DI0896A1"} , { "HoVaTen":"Nguyễn Thị B" , "NamSinh":1990, "Lop":"DI0896A1"} , { "HoVaTen":"Trần Văn C" , "NamSinh":1985, "Lop":"DI0896A1"} ] } Ý nghĩa ký hiệu JSON { Bắt đầu JSON } Kết thúc JSON : Đứng tên thuộc tính giá trị thuộc tính , Là dấu ngăn cách thuộc tính JSON, phần từ mảng hai JSON liên tiếp [ Ký hiệu bắt đầu mảng liệu, phần tử mảng JSON số chuỗi Nhưng mảng nên lưu trữ phần tử kiểu với ] Ký hiệu kết thúc mảng liệu Căn vào ý nghĩa ký hiệu nêu trên, ta phân tích liệu ví dụ nhƣ sau: có JSON gốc chứa JSON cịn lại (ln ln có JSON gốc) JSON gốc có thuộc tính tên “SinhVien”, giá trị thuộc tính mảng, mảng chứa JSON Mõi JSON có thuộc tính lần lƣợt “HoVaTen”, ”NamSinh” “Lop” Giá trị thuộc tính liền kề sau tên thuộc tính Tên thuộc tính đặt cặp dấu ngoặc kép “” Giá trị thuộc tính chuỗi, số, mảng json khác 1.4 Kết luận Graph API giao tiếp với bên ngồi thơng qua cổng https://graph.facebook.com Mõi truy vấn HTTP gửi đến cổng giao tiếp bao gồm thông tin: liệu mô Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang / 29 tả cơng việc khóa an ninh Kết trả từ graph api chuỗi theo định dạng JSON thông báo lỗi Thông báo lỗi xãy bạn khai báo sai cấu trúc liệu gửi đến cổng khóa an ninh khơng có quyền hạn để tiến hành cơng việc khóa hết hạn sử dụng Tạo ứng dụng Bây hƣớng dẫn bạn tạo trang HTML đơn giản, có phần kết nối đến facebook Sau hiển thị đoạn kết JSON mà graph api trả truy cập thông tin cá nhân ngƣời sử dụng 2.1 Tạo ứng dụng đại diện facebook | Bước Mọi website bên muốn sử dụng APIs facebook phải tạo ứng dụng facebook để làm đại diện cho website (xem lại tập 1) Đầu tiên, truy cập vào: https://developers.facebook.com Nếu lần bạn truy cập trang này, bạn thấy nhƣ hình dƣới Nếu bạn nhìn thấy nút số 2, nghĩa tài khoản facebook bạn chƣa đƣợc đăng ký nhà phát triển Bạn cần phải đăng ký để sử dụng facebook apis Cịn bạn đăng ký bấm vào nút số để đến trang quản lý ứng dụng facebook bạn (Do ngôn ngữ sử dụng tài khoản facebook dùng để chụp hình Tiếng Việt nên có nút văn hiển thị Tiếng Việt) Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook ĐĂNG KÝ LÀ NHÀ PHÁT TRIỂN ỨNG DỤNG Trang / 29 Đầu tiên, bấm vào đăng ký (nút số đƣợc khoanh đỏ nhƣ hình) Một popup hiển thị nhƣ sau: Check vào “I accept the Facebook Platform Policy and the Facebook Privacy Policy” bấm “Tiếp tục” Nội dung popup chuyển thành nhƣ hình sau: Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang / 29 Lựa chọn đánh dấu vào thành phần mà bạn quan tâm, lƣu ý bạn dấu check mà dùng mũi tên đỏ hình Nếu bạn check vào “Subscribe to weekly platform updates and platform status emails ” nghĩa bạn muốn facebook gửi email thông báo cho bạn mõi facebook platform có thay đổi Nếu bạn check vào “Like the Facebook Developers Page to stay up-to-date” nghĩa bạn muốn thích trang Facebook Developers Chọn xong, bấm “Tiếp tục”, hình popup hiển thị nhƣ hình dƣới nghĩa bạn đăng ký thành cơng trở thành nhà phát triển danh sách facebook Bấm vào nút “Done” để tắt popup bạn đƣợc chuyển tự động sang trang quản lý ứng dụng TẠO ỨNG DỤNG ĐẠI DIỆN Giao diện trang quản lý ứng dụng trƣờng hợp bạn chƣa có ứng dụng nhƣ hình bên dƣới đây: Và dƣới trƣờng hợp bạn có ứng dụng đƣợc tạo trƣớc Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang / 29 Bấm vào “Tạo ứng dụng”, popup nhƣ sau: Số tên hiển thị ứng dụng Số tên namespace ứng dụng (không dấu, không khoảng trắng) Ở số 3, lựa chọn lĩnh vực ứng dụng Chú ý không check vào “Web Hosting” Phần sau tìm hiểu sau Bấm “Tiếp tục”, sau CAPCHA đƣợc yêu cầu nhập Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang 10 / 29 Nhập CAPCHA bấm “Tiếp tục” để xác nhận CAPCHA Nếu nhập đúng, ứng dụng bạn đƣợc tạo hình hiển thị thơng tin ứng dụng nhƣ sau Tuy nhiên, để sử dụng đƣợc website bạn, bạn cần phải cấu hình vài thơng tin cần thiết nhƣ hƣớng dẫn bƣớc dƣới 2.2 Thiết lập thông số cho ứng dụng đại diện | Bước Bạn hoàn thành bƣớc tạo đƣợc ứng dụng làm đại diện cho website bạn facebook Tuy nhiên, chƣa sử dụng đƣợc Bạn cần phải cấu hình vài thơng tin sử dụng ứng dụng cho website bạn Bấm vào nút “Chỉnh sửa ứng dụng” để vào trang thay đổi thông tin cho ứng dụng Do giao diện phần dài, nên cắt phần để hƣớng dẫn bạn PHẦN TIÊU ĐỀ CỦA ỨNG DỤNG Phần trình bày logo, tên hiển thị, ID, mã bí mật trạng thái hoạt động ứng dụng Cụ thể nhƣ sau: Logo tên hai thành phần hiển thị bên ngồi Bạn thay đổi logo cách rê chuột lên logo bấm vào “chỉnh sửa” Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang 15 / 29 Nội dung 2: sau chuyển hƣớng trang xử lý Access Token, việc bạn viết code để đọc Access Token lƣu trữ làm phục vụ cho mục đích bạn trang test.html Để hiểu rõ hơn, vui lịng xem ví dụ sau đây: A Chuẩn bị URL truy vấn HTTP để lấy Access Toekn: URL truy vấn dùng https://graph.facebook.com/oauth/authorize?type=user_agent &client_id=304746743004164 &redirect_uri=http://localhost/FB_API/test.html &scope=read_stream B Tạo trang test.html với nội dung có đoạn javascript để đọc in liệu sau dấu # địa hình test.html Xử lý Access Token if(window.location.hash!=undefined) { document.write(window.location.hash); } C Bắt đầu mở trình duyệt lên, truy vấn HTTP theo URL tạo bƣớc 1: Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang 16 / 29 Đây hình mà Facebook yêu cầu ngƣời dùng cấp phép quyền ứng dụng yêu cầu Ở đây, ngƣời dùng bấm đồng ý để duyệt quyền Ngay sau đó, trình duyệt bị chuyển hƣớng http://localhost/FB_API/test.html kèm theo Access Token sau dấu # Url nhƣ hình dƣới: Và đoạn JAVASCRIPT việc đọc in giá trị từ sau dấu # hình Giá trị có thành phần: access_token Chứa chuỗi Access Token ta cần expires_in Thời gian sống Access Token, tính giây D Giờ có Access Token, ta thử truy cập liệu cá nhân ngƣời dùng Tạo URL truy vấn HTTP đến cổng giao tiếp nhƣ sau: URL truy vấn https://graph.facebook.com/me?access_token=ACT Với ACT chuỗi Acess Token ta vừa có Dán URL vào trình duyệt, ta có kết trả tƣơng tự này, tùy theo tài khoản: (JSON) Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang 17 / 29 Nếu bạn nhìn thấy đƣợc thông tin tƣơng tự nhƣ trên, nghĩa Access Token sử dụng đƣợc, việc lƣu trữ sử dụng gọi API tùy vào mục đích bạn LẤY ACCESS TOKEN BẰNG CÁCH SỬ DỤNG JAVASCRIPT SDK JAVSCRIPT SDK LÀ GÌ? Javascript SDK tập hợp nhiều chức API đóng gói sẵng dƣới dạng hàm chạy client (JAVASCRIPT) Giúp bạn nhanh chóng tiện lợi việc sử dụng Plugin, gọi APIs tạo kết nối ngƣời dùng website Sự kết nối đƣợc gọi “Đăng nhập Faceboook” SỬ DỤNG Để sử dụng, ta việc chèn thêm nội dung vào sau thẻ nhƣ sử dụng facebook plugin vậy, nhƣng với JSDK chèn đầy đủ Chèn JAVASCRIPT SDK | Khai báo 10 11 12 13 14 15 16 17 18 Tập window.fbAsyncInit = function() { /* khai báo sử dụng JSDK */ FB.init({ appId : 'AppID', channelUrl : 'channel.html', status : true, cookie : true, xfbml : true }); /* kiện kết nối viết */ }; /* Khai báo đồng hóa SDK – Cái sử dụng plugin (Xem lại tập 1) */ (function(d){ var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/vi_VN/all.js"; ref.parentNode.insertBefore(js, ref); }(document)); … Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang 18 / 29 Trong đó, appid Là AppID ứng dụng website facebook (chuỗi) channelUrl Địa tập tin chanel, thường tập tin có dòng liệu là: Dòng liệu thay đổi ngôn ngữ sử dụng plugin apis Status Có kiểm tra trạng thái kết nối khơng? Ln để có cookie Cho phép sử dụng cookie hay khơng? xfbml TRUE Nó có nghĩa parse XFBML hay không Tiếp theo, ta khai báo kiện nhận biết thay đổi kết nối Chèn JAVASCRIPT SDK | Sự kiện 10 11 12 13 14 15 16 17 18 19 20 21 22 23 Tập window.fbAsyncInit = function() { /* khai báo sử dụng JSDK */ FB.init({ appId : 'AppID', channelUrl : 'channel.html', status : true, cookie : true, xfbml : true }); /* kiện thay đổi kết nối viết */ FB.Event.subscribe('auth.authResponseChange', function(rs) { if (rs.status === 'connected') { // kết nối }else if (rs.status === 'not_authorized') { // chưa kết nối }else { // chưa đăng nhập facebook } }); }; /* Khai báo đồng hóa SDK – Cái sử dụng plugin (Xem lại tập 1) */ (function(d){ var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/vi_VN/all.js"; ref.parentNode.insertBefore(js, ref); }(document)); … Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang 19 / 29 Giải thích: kiện 'auth.authResponseChange' đƣợc kích hoạt mõi có thay đổi q trình kết nối ngƣời dùng ứng dụng Có trạng thái: connected Người dùng đăng nhập facebook, kết nối với ứng dụng not_authorized Người dùng đăng nhập facebook chưa kết nối đến ứng dụng not_logged Trường hợp lại người dùng chưa đăng nhập facebook Bạn phải lƣu ý kiện đƣợc kích hoạt có thay đổi kết nối Nghĩa phải có chuyển từ trạng thái sang trạng thái “FB” đối tƣợng đại diện cho JAVASCRIPT SDK mà từ ta gọi đến hàm định nghĩa sẵng để tiến hành cơng việc mà mong muốn Dƣới khai báo hàm đƣợc gọi trƣờng hợp có thay đổi kết nối Chèn JAVASCRIPT SDK | Sự kiện | Xử lý kết nối 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 Tập window.fbAsyncInit = function() { /* khai báo sử dụng JSDK */ FB.init({ appId : 'AppID', channelUrl : 'channel.html', status : true, cookie : true, xfbml : true }); /* kiện kết nối viết */ FB.Event.subscribe('auth.authResponseChange', function(rs) { if (rs.status === 'connected') { Display_Name(rs.authResponse.accessToken); }else if (rs.status === 'not_authorized') { FB.login(); }else { FB.login(); } }); }; /* Khai báo đồng hóa SDK – Cái sử dụng plugin (Xem lại tập 1) */ (function(d){ var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/vi_VN/all.js"; ref.parentNode.insertBefore(js, ref); }(document)); /* phần viết hàm xử lý | hiển thị khóa, tên người kết nối ẩn liên kết kết nối */ … Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang 20 / 29 Giải thích: Khi trạng thái kết nối từ trạng thái khác đổi thành “connected” kiện gọi hàm Display_Name(acckey) , hàm tự định nghĩa Khi trạng thái kết nối từ trạng thái khác đổi thành “not_authorized” thành “not_logged” kiện gọi FB.Login() để thực kết nối, hàm thuộc JSDK Tiếp theo, ta khai báo hàm Display_Name() để lấy tên ngƣời vừa kết nối hiển thị lên câu xin chào, đồng thời ẩn LINK kết nối Chèn JAVASCRIPT SDK | Sự kiện | Xử lý kết nối 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 Tập window.fbAsyncInit = function() { /* khai báo sử dụng JSDK */ FB.init({ appId : 'AppID', channelUrl : 'channel.html', status : true, cookie : true, xfbml : true }); /* kiện kết nối viết */ FB.Event.subscribe('auth.authResponseChange', function(rs) { if (rs.status === 'connected') { Display_Name(rs.authResponse.accessToken); }else if (rs.status === 'not_authorized') { FB.login(); }else { FB.login(); } }); }; /* Khai báo đồng hóa SDK – Cái sử dụng plugin (Xem lại tập 1) */ (function(d){ var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/vi_VN/all.js"; ref.parentNode.insertBefore(js, ref); }(document)) /* phần viết hàm xử lý – hiển thị khóa, tên người kết nối ẩn liên kết kết nối */ function Display_Name(acckey){ $('#LoginLink').css('display' , 'none'); $('#Key).html('AccessToken bạn: ' + acckey); FB.api('/me', function(ketqua){ $('#WelcomeText').html('Xin chào '+ketqua.name+''); }); } … Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang 21 / 29 Tiếp theo, phần nội dung Ta thiết kế nội dung đơn nhƣ sau: Chèn JAVASCRIPT SDK | Sự kiện | Xử lý kết nối | Nội dung 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 window.fbAsyncInit = function() { /* khai báo sử dụng JDK */ FB.init({ appId : 'AppID', channelUrl : 'channel.html', status : true, cookie : true, xfbml : true }); /* kiện kết nối viết */ FB.Event.subscribe('auth.authResponseChange', function(rs) { if (rs.status === 'connected') { Display_Name(rs.authResponse.accessToken); }else if (rs.status === 'not_authorized') { FB.login(); }else { FB.login(); } }); }; /* Khai báo đồng hóa SDK – Cái sử dụng plugin (Xem lại tập 1) */ (function(d){ var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/vi_VN/all.js"; ref.parentNode.insertBefore(js, ref); }(document)) /* phần viết hàm xử lý – hiển thị khóa, tên người kết nối ẩn liên kết kết nối */ function Display_Name(){ $('#LoginLink').css('display' , 'none'); $('#Key').html('AccessToken bạn: ' + acckey); FB.api('/me', function(ketqua){ $('#WelcomeText').html('Xin chào '+ketqua.name+''); }); }Xin chào, Khách
đăng nhập facebook Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang 22 / 29 Kịch chạy thử ví dụ: • Khi truy cập http://localhost/FB_API/example.html ta có nội dung: • Khi click vào liên kết “đăng nhập facebook”, popup kết nối đến facebook ra: Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang 23 / 29 • Ngƣời dùng “Đồng ý” quyền mà ứng dụng yêu cầu Sau xử lý xong, popup bị tắt nội dung example bị đổi thành: • Trạng thái kết nối đƣợc trì ngƣời dùng chủ động vào setting họ xóa ứng dụng khỏi danh sách sử dụng họ Có nghĩa sau bạn mở example lên tự động kiểm tra kết nối thị nội dung kết Bạn viết hàm xử lý riêng với mục đích riêng, lƣu trữ Access Token cần Nhƣng trƣờng hợp JSDK, dùng JSDK gọi API bạn khơng cần cung cấp Access Token có kết nối Hàm FB.api('/me', function(ketqua){}); ví dụ lời gọi đến Graph APIs, tƣơng ứng với câu truy vấn https://graph.facebook.com/me?acc ketqua biến JSON chƣa kết lời gọi Bạn truy cập thành phần kết theo kiểu hƣớng đối tƣợng, tức dùng dấu chấm (.) kèm với tên thuộc tính cần lấy, ví dụ nhƣ ketqua.name Nếu bạn gọi thuộc tính khơng tồn trả undefine 2.4 Ứng dụng thực tế Tổng kết lại, ta thấy rằng, để làm việc với Open Graph ta có cách : gửi truy vấn HTTP lên trực tiếp thông qua cổng https://graph.facebook.com dùng Javascript SDK Vậy ta nên sử dụng cách cho tiện Điều ăn thua vào mục đích sử dụng bạn Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang 24 / 29 Nếu bạn muốn tạo Access Token để lƣu trữ sử dụng lời gọi POST tự động truy vấn trực tiếp lựa chọn hồn hảo Cịn bạn cần sử dụng Plugin hiển thị vài thông tin ngƣời dùng chức đăng nhập facebook JSDK thứ bạn nên dùng Chúng ta biết cách Open Graph hoạt động, biết cách lấy khóa truy cập Giờ ta học cấu trúc liệu gửi lên Open Graph Đọc liệu từ Open Graph Open Graph cho ngƣời dùng cách thức truy vấn đọc liệu gửi liệu, phần trình bày với bạn đọc liệu Nhắc lại giới thiệu trƣớc đó, cấu trúc lời gọi đến cổng Graph có dạng nhƣ sau: Cú pháp https://graph.facebook.com/&access_token=??? Cách lấy access_token bạn biết Giờ học cách khai báo action-data Cú pháp action-data tƣơng đối nhiều phức tạp, độ tùy chỉnh cao, nên facebook cung cấp sẵng cơng cụ hữu ích cho lập trình viên dễ dàng tạo chuỗi liệu theo ý muốn cách nhanh đảm bảo độ xác cao nhất, cơng cụ đƣợc gọi Graph API Explorer 3.1 Graph API Explorer gì? Đây công cụ giúp cho bạn dễ dàng khám phá hiểu APIs Bạn làm quen nhanh chóng với chuỗi action-data Bạn thử nghiệm việc đọc, thêm liệu chuỗi action-data bạn tự tạo thông qua hỗ trợ công cụ Bằng cách đó, bạn nhanh chóng nắm bắt kiểm soát đƣợc cấu trúc chuỗi action-data 3.2 Truy cập giao diện Cơng cụ bạn đƣợc truy cập thông qua Url: Graph API Explorer https://developers.facebook.com/tools/explorer Giao diện cơng cụ truy cập bao gồm thành phần nhƣ sau: Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang 25 / 29 Phần 1: để chọn hình thức sử dụng, có hình thức GET, POST (POST chia làm POST DELETE) Get tƣơng ứng với lấy liêu, Post tƣơng ứng với gửi liệu (viết) Delete tƣơng ứng với xóa liệu Phần 2: chuỗi action-data dùng, chuỗi tự đánh vào dùng tool phần tạo Phần 3: nút bấm để thực truy vấn để xem kết actiondata tạo kết đƣợc hiển thị phần Phần 4: công cụ giúp bạn tạo action-data cách click chọn (sẽ hƣớng dẫn cụ thể sau) Phần 5: khung trình bày kết truy vấn 3.3 Sử dụng Graph API Explover Bạn đƣợc giới thiệu API Explover, hƣớng dẫn bạn sử dụng công cụ để tạo chuỗi action-data cho mục đích sử dụng Đầu tiên bạn cần hiểu rằng, chuỗi action-data bao gồm thành phần chính: “đối tƣợng bị tác động” “hành động” Đối tƣợng bị tác động: thành phần xuất chuỗi action-data, đối tƣợng ngƣời, viết, hình ảnh, … đƣợc đại diện id usename Hành động: ám liệu để mơ tả làm với đối tƣợng Nhƣ muốn lấy id, tên, đƣờng dẫn đến đối tƣợng, … Bây ta thực hành lấy liệu mình, liệu ta lấy bao gồm thông tin nhƣ sau: Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang 26 / 29 Mã số nhận dạng (id) Tên định danh nhận dạng (username) Tên hiển thị đầy đủ (name) Giới tính (gender) Địa trang cá nhân (link) Hình đại diện loại vuông (picture – type: square) BƯỚC TIẾN HÀNH Bước 1: vị trí (2) bạn xóa trắng phần action-data công cụ tự sinh sẵn thay “me” Vì muốn truy cập liệu (ngƣời kết nối) nên dùng “me” để thay id username Bước 2: quan sát vị trí (4) thấy có trƣờng liệu mà đƣợc chọn trƣớc id username Để xóa trƣờng thơng tin ta việc click lên tên trƣờng thơng tin Cịn để thêm trƣờng thơng tin ta click vào dấu + bên dƣới trƣờng thông tin cuối cùng, đƣợc danh sách trƣờng thông tin để chọn Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang 27 / 29 Cứ tiếp tục chọn đầy đủ trƣờng thông tin ta cần Đặc biệt ngoại lệ có trƣờng thơng tin có thơng tin nhỏ (đƣợc gọi tùy chọn) nhƣ trƣờng thông tin picture Khi ta chọn tới trƣờng picture kết ta tạm đƣợc thời Theo yêu cầu ta phải chọn picture – type: square, ta click vào dấu + thêm thuộc tính picture chọn “type”, sau chọn giá trị “square” cho type, nhƣ hình sau Đến đủ thơng tin ta cần bạn nhìn lại khung số (2), bạn thấy ta có giá trị chuỗi action-data trơng nhƣ sau: Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang 28 / 29 Bước 3: Để xem thử kết trả truy vấn chuỗi action-data đó, ta click lên nút “Gửi” vị trí số (2) Và kết (theo định dạng JSON) đƣợc hiển thị khung số (5) nhƣ hình sau: Nhƣ vậy, sau vài thao tác đơn giản, bạn tạo đƣợc chuỗi actiondata, bạn cịn việc copy sử dụng vào mục đích ứng dụng mà bạn thiết kế 3.4 Tổng kết Đến lúc bạn hồn tồn nắm đƣợc cấu trúc để thao tác với Graph APIs Ta tổng hợp lại kiến thức theo tóm tắc nhƣ sau: Graph APIs đƣợc cung cấp thông qua cổng giao tiếp: https://graph.facebook.com Dữ liệu gửi lên cỗng Graph có phần: Action Data Access Token Key Action Data bao gồm phần là: đối tƣợng bị tác động hành động Chuỗi đƣợc tự tạo (nếu bạn quen) nhờ trợ giúp công cụ Graph API Explover đƣợc cung cấp tại: https://developers.facebook.com/tools/explorer Access Token Key lấy dựa vào hình thức: truy vấn trực tiếp sử dụng javascript sdk Khi có đủ action-data access token key, ta việc thực truy vấn http đến cổng graph để lấy liệu ta cần theo cấu trúc: Cú pháp /& access_token= Trong đó, phần màu đỏ liệu cố định Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang 29 / 29 Dƣới chuỗi truy vấn HTTP đầy đủ gửi lên cổng Graph theo ví dụ bên trên: Ví dụ https://graph.facebook.com/me?fields=id,username,name,gender,link,picture.type(square)& access_token=CAACEdEose0cBAM46dK4MgCmVLyELU7EDjOCfYaY605yMi2QQZCs76DmD0S mqXyGUzMWQSGqSpZAGUL0vwsZC9M0TjFs6szoPb4zl4YvHLyEFIsIMqvxj7mvaZCZCBLxIZBWA 7OaZAue7iZCAiyZCINDQZCmpeM4ahgv5ADH68OZCzMYcqIfouqqRh5XPfAAPQWMi1NcPtIov MQuHwZDZD - Hết Tập - Tập nói VIẾT BÀI LÊN FACEBOOK QUA GRAPH APIs http://facebook.com/thuvienlaptrinh Cảm ơn bạn ủng hộ Tập Dành cho người bắt đầu Đặng Văn Lel ... click vào liên kết “đăng nhập facebook? ??, popup kết nối đến facebook ra: Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang 23 / 29 •... người kết nối ẩn liên kết kết nối */ … Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang 20 / 29 Giải thích: Khi trạng thái kết... Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang 21 / 29 Tiếp theo, phần nội dung Ta thiết kế nội dung đơn nhƣ sau: Chèn JAVASCRIPT SDK | Sự kiện | Xử lý kết nối