Zing me open social training 02

Xây dựng ứng dụng Open Social trên Zing Me Nguyễn Thanh Tú tunt@vng.com.vn 05/10/2010 Xây dựng ứng dụng Open Social trên Zing Me 1

Nội dung • Mô hình hoạt động Open Social • Một số khái niệm chính • Chuẩn bị môi trường • Cách viết Gadget • Chạy thử Gadget • Chạy thử REST API • Hỏi và đáp • Phân tích ý tưởng dự thi Xây dựng ứng dụng Open Social trên Zing Me 2

Mô hình ho ạt động của Ứng dụng Open Social trên Zing Me A.1 JS API Gadget Gadget.io makeRequest() (OS App Front-End, rendered by (JSONP call) Shindig) B.1 JS API A.4 JSON Opensocial B.2 JS API Callback DataRequest Callback Sent() A.2 REST API GET/POST (OAuth Reserve Home server phone home) Zing me Shindig (OS App Back-End) Core Lib A.3 JSON Response App’s Data Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social 3

Consumer Key – Conumer Secret và User ID • Consumer Key: do Zing Me cấp để nhận diện dứng dụng. • Consumer Secret: do Zing Me cấp để chứng thực khi có yêu cầu lấy dữ liệu hoặc tương tác với hệ thống. • Ví dụ: – Key: c969713e3048fa919202961e1b9eb9c7 – Secret: bc192fd03531094a78b60a91df93d5c7 • User ID (owner ID): là ID của user sau khi đã đăng nhập vào Zing Me. Xây dựng ứng dụng Open Social trên Zing Me 4

REST protocol và JSON • REST (Representational State Transfer): là cách thức giao tiếp client và server theo giao thức HTTP. – Ví dụ: http://book.com/get?id=100 • JSON (JavaScript Object Notation): là định dạng dữ liệu dưới dạng chuỗi. – Định dạng JSON có thể chuyển trực tiếp về object trong javascript. – Ví dụ: {"book": {"id": "b001","title": "OpenSocial"}} • Tham khảo: – REST:http://rest.elkstein.org – JSON: http://www.json.org/ Xây dựng ứng dụng Open Social trên Zing Me 5

Chu ẩnbị • Web server: apache Download Download Config file code • Back-end: PHP. • Công cụ: – PDT hoặc Netbean – Firefox with Firebug add on. • Kiến thức: – HTML – JavaScript • PHP • Xem thêm hướng dẫn tại đây Xây dựng ứng dụng Open Social trên Zing Me 6

Cấu trúc Gadget XML <?xml version="1.0" encoding="UTF-8"?> <Module> <ModulePrefs title="Your title here"> </ModulePrefs> <Content type="html"> <![CDATA[ Your code gadget here... ]]> </Content> </Module> Tham khảo: http://code.google.com/apis/gadgets/docs/reference.html Xây dựng ứng dụng Open Social trên Zing Me 7

Gadget Hello World <?xml version="1.0" encoding="UTF-8"?> <Module> <ModulePrefs title="Hello Word Sample"> </ModulePrefs> <Content type="html"> <![CDATA[ Hello Word ]]> </Content> </Module> Tham khảo: http://code.google.com/apis/gadgets/docs/reference.html Xây dựng ứng dụng Open Social trên Zing Me 8

Cách ch ạy thử ứng dụng Để chạy ứng dụng trên mạng xã hội cần • Gadget (Client) upload code trên Zing me hoặc Google Để test thử ứng dụng helloword có thể dùng tool Google gadget editor (GGE) http://code.google.com/apis/gadgets/docs/tools.html#GGE • Container: Sử dụng Zing Me container http://dev.container.me.zing.vn/testcontainer.php • Home server: (Xem lại bài trước để biết cách cài đặt và giả lập trên localhost) Xây dựng ứng dụng Open Social trên Zing Me 9

Cách ch ạy thử ứng dụng Sử dụng Google hosting: Dùng tiện ứng dụng Google gadget editor (GGE) http://code.google.com/apis/gadgets/docs/tools.html#GGE Xây dựng ứng dụng Open Social trên Zing Me 10

Cách ch ạy thử ứng dụng Để public file xml: Click File > Save lưu là helloworld123.xml Sau đó click File > Public để lấy đường link. Ví dụ http://hosting.gmodules.com/ig/gadgets/file/105351859311506955799/helloworld123.xml Xây dựng ứng dụng Open Social trên Zing Me 11

Cách ch ạy thử ứng dụng • Đăng nhập http://dev.me.zing.vn • Sử dụng Zing Me container http://dev.container.me.zing.vn/testcontainer.php • Sau đó copy link vừa public vào “Địa chỉ ứng dụng rồi “ấn “Chạy thử” Ví dụ: http://hosting.gmodules.com/ig/gadgets/file/105351859311506955799/helloworld123.xml Xây dựng ứng dụng Open Social trên Zing Me 12

Các tham s ố Gadget XML hay dùng <ModulePrefs> • title: tên ứng dụng • author: tên tác giả • description: mô tả về ứng dụng • etc: author_email, thumbnail.. Ví dụ: <ModulePrefs title="My Title" title_url=http://testos.me.zing.vn author="Tu Nguyen" > ModulePrefs/Require • feature: tên tính năng cần có. Ví dụ: Sử dụng Flash <ModulePrefs> <Require feature="flash" /> </ModulePrefs> Xây dựng ứng dụng Open Social trên Zing Me 13

Zing me Opensocial APIs JAVA SCRIPT APIS Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social

Java Script APIs Gửi request: makeRequest() Nhúng flash: embedFlash() Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social 15

Hướng dẫn tạo makeRequest Ví dụ: Gửi Request yêu cầu lấy thời gian của home server Home server C:Xamphtdocstestostime.php <![CDATA[ <script> function getTime() { var url = "http://testos.me.zing.vn/time.php"; gadgets.io.makeRequest(url, onGetTime); } function onGetTime(response) { if (response.errorCode == 0) { document.getElementById('txtTime').value = response.data; } else { document.getElementById('txtTime').value = "Error"; } Download } code </script> ]]> Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social 16

Hướng dẫn tạo request Gadget: makeRequestGadget.xml <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="Sample Gadget"> <Require feature="opensocial-0.9"></Require> </ModulePrefs> <Content type="html"> <![CDATA[ <script> function getTime() { var url = "http://testos.me.zing.vn/time.php"; gadgets.io.makeRequest(url, onGetTime); } Download function onGetTime(response) { code if (response.errorCode == 0) { document.getElementById('txtTime').value = response.data; Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social 17

Hướng dẫn tạo makeRequest Gadget: makeRequestGadget.xml } else { document.getElementById('txtTime').value = "Error"; } } </script> <center> <h3 > Demo Make Request Gadget </h3> </center> <hr> Time Home Server: <input type="text" id="txtTime" > <input type="button" value="Get Time" onclick="getTime();"> <hr> ]]> Download </Content> code </Module> Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social 18

Hướng dẫn tạo makerequest • URL file makeRequestGadget.xml đã được public trên Zing me • dev.container.me.zing.vn/app_os_test/makeRequestGadget.xml • Login Zing me Dev: http://dev.me.zing.vn • Vào Zing me Container: http://dev.container.me.zing.vn dán url của file makeRequestGadget.xml vào “Địa chỉ ứng dụng” rồi chạy thử Xây dựng ứng dụng Open Social trên Zing Me 19

Hướng dẫn Nhúng Flash <![CDATA[ <script> function embedFlash() { gadgets.flash.embedFlash("http://dev.container.me.zing.vn/app_os_test/flash/card.swf", "flashcontainer", { swf_version: 6, id: "flashid", width: 300, height: 300 }); } gadgets.util.registerOnLoadHandler(embedFlash); </script> <div id="flashcontainer"></div> ]]> Xây dựng ứng dụng Open Social trên Zing Me 20

Hướng dẫn Nhúng Flash • URL file cardTestApp.xml đã được public trên Zing me dev.container.me.zing.vn/app_os_test/cardTestApp.xml • Login Zing me Dev: http://dev.me.zing.vn • Vào Zing me Container: http://dev.container.me.zing.vn dán url của file cardTestApp.xml vào “Địa chỉ ứng dụng” rồi chạy thử Xây dựng ứng dụng Open Social trên Zing Me 21

Zing me Opensocial APIs REST APIS Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social

Zing Open Social REST APIs • Lấy profile của user là guid (guid phải là friends của user đang truy cập ứng dụng) GET /social/rest/people/{guid}/@self • Lấy profile của user hiện đang truy cập ứng dụng GET /social/rest/people/@me/@self • Lấy danh sách bạn bè của user đang truy cập ứng dụng GET /social/rest/people/{guid}/@friends • Tạo feed lên tường user đang truy cập ứng dụng POST /social/rest/activities/@me/@self/@app • Upload hình lên photo của user đang truy cập ứng dụng POST /social/rest/mediaitems/@me/@self Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social 23

Code m ẫu và chạy thử các REST API http://testos.me.zing.vn/test.php Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social 24

Code m ẫu và chạy thử các REST API • Home server: http://testos.me.zing.vn/test.php (Xem code trong file test.php) • Login vào Zing me Dev: http://dev.me.zing.vn Sử dụng account test chitdi1, chitdi2 , ..., chitdi9 mật khẩu giống như account • Lấy thông tin profile của user đang truy cập và danh sách bạn bè http://testos.me.zing.vn/test.php?method=people • Gửi feed lên tường nhà http://testos.me.zing.vn/test.php?method=activities • Upload hình lên photo application http://testos.me.zing.vn/test.php?method=mediaitems • Kiểm tra kết quả: Truy cập dev.me.zing.vn vào Cá nhân > Trang cá nhân Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social 25

Code mẫu và ch ạy thử các REST API Home server: http://testos.me.zing.vn/test.php (Xem code trong file test.php) consumerKey consumerSecret Zing me Provider Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social 26

Code m ẫu và chạy thử các REST API Home server: http://testos.me.zing.vn/test.php (Xem code trong file test.php) Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social 27

Code m ẫu và chạy thử các REST API Lấy thông tin profile của user đang truy cập và danh sách bạn bè http://testos.me.zing.vn/test.php?method=people Xem code trong file test.php Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social 28

Code m ẫu và chạy thử các REST API Gửi feed lên tường nhà http://testos.me.zing.vn/test.php?method=activities Xem code trong file test.php Thông điệp muốn gửi Hyperlink Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social 29

Code m ẫu và chạy thử các REST API Upload hình lên photo application http://testos.me.zing.vn/test.php?method=mediaitems Xem code trong file test.php Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social 30

HỎI ĐÁP Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social 31

PHÂN TÍCH Ý TƯỞNG Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social 32

Phân tích ý tưởng • Tên ứng dụng cần ngắn (không quá 4 chữ) dễ hiệu, liên quan tới nội dung ứng dụng. Nếu không nghĩ ra tên ý tưởng đặc biệt gây tò mò hấp dẫn thì hãy sử dụng một số từ/cụm từ quen thuộc. Ví dụ: Chuyển công trường đào vàng thành đào vàng • Trình bày ngắn ngọn dễ hiểu nếu trò chơi/ứng dụng phức tạp nên đưa ra các tình huống (scenario) như bắt đầu chơi như thế nào … • Cố gắng kéo dài vòng đời của ứng dụng/game bằng cách thêm các chức năng mới/sự kiện • Thúc đẩy người dùng cố gắng đạt được những achievement như điểm số, money, level, virtual items, prizes, awards, … • Đơn giản hóa ứng dụng, tập trung vào các chức năng chính • Sử sử SWF Decompiler để bung flash như nếu muốn sử dụng Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social

Tài liệu tham khảo • Homepage: http://developer.me.zing.vn • Tài liệu: http://code.google.com/p/zingmeapis/ • Zing me Opensocial APIs http://developer.me.zing.vn/download/ZingOsAPI_v1.3.doc • Opensocial http://code.google.com/apis/opensocial/ • OpenSocial Java Client Library http://code.google.com/p/opensocial-java-client/ • OpenSocial PHP Client Library http://code.google.com/p/opensocial-php-client/ • OpenSocial Actionscript 3.0 Client Library http://code.google.com/p/opensocial-actionscript-client/ Xây dựng ứng dụng Open Social trên Zing Me 34

Liên h ệ • Nguyễn Thanh Tú • Email: tunt@vng.com Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social 35

Zing me open social training 02

by Hai Le Minh

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 142

Statistics

Zing me open social training 02 Presentation Transcript