Xây dựng ứng dụng Open Social
   trên Zing Me

   Nguyễn Thanh Tú
   tunt@vng.com.vn



                                  ...
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 Gadge...
Mô hình ho ạt động của
Ứng dụng Open Social trên Zing Me
             A.1 JS API                                          ...
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 Zi...
REST protocol và JSON

• REST (Representational State Transfer): là cách thức giao tiếp
  client và server theo giao thức ...
Chu ẩnbị

• Web server: apache                         Download      Download
                                            ...
Cấu trúc Gadget XML

<?xml version="1.0" encoding="UTF-8"?>
<Module>
   <ModulePrefs title="Your title here">
   </ModuleP...
Gadget Hello World

<?xml version="1.0" encoding="UTF-8"?>
<Module>
   <ModulePrefs title="Hello Word Sample">
   </Module...
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
  ...
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/...
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 ...
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.v...
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...
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...
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.ph...
Hướng dẫn tạo request
 Gadget: makeRequestGadget.xml


<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs tit...
Hướng dẫn tạo makeRequest
 Gadget: makeRequestGadget.xml


       } else {
            document.getElementById('txtTime')....
Hướng dẫn tạo makerequest
•    URL file makeRequestGadget.xml đã được public trên Zing me
•    dev.container.me.zing.vn/ap...
Hướng dẫn Nhúng Flash

<![CDATA[
           <script>
       function embedFlash() {
       gadgets.flash.embedFlash("http:...
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/...
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)
...
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 O...
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)
•   ...
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)




    ...
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 ...
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.z...
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...
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...
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ài liệu tham khảo

• Homepage: http://developer.me.zing.vn
• Tài liệu:                  http://code.google.com/p/zingmeap...
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
Upcoming SlideShare
Loading in …5
×

Zing me open social training 02

3,739 views
3,650 views

Published on

Hướng dẫn lập trình viết ứng dụng trên mạng xã hội Zing me

Thông tin chi tiết xem tại
http://developer.me.zing.vn/

Download config & sample files
http://code.google.com/p/zingmeapis/downloads/list

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,739
On SlideShare
0
From Embeds
0
Number of Embeds
161
Actions
Shares
0
Downloads
2
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Zing me open social training 02

  1. 1. 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
  2. 2. 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
  3. 3. 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
  4. 4. 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
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 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) • 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
  26. 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) 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
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. 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
  31. 31. HỎI ĐÁP Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social 31
  32. 32. 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
  33. 33. 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
  34. 34. 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
  35. 35. 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

×