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
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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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