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


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.


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/


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


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


Gadget Hello World

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Hello Word Sample">
</ModulePrefs>
<![CDATA[
Hello Word
]]>
</Content>
</Module>

Tham khảo:
http://code.google.com/apis/gadgets/docs/reference.html


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)


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



Để 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


• Đă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


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>


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()


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


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>
<![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;


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>


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ử


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


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ử


Zing me Opensocial APIs

REST APIS


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


Code m ẫu và chạy thử các REST API
http://testos.me.zing.vn/test.php


• 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


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


Home server: http://testos.me.zing.vn/test.php (Xem code trong file test.php)


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


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


Upload hình lên photo application http://testos.me.zing.vn/test.php?method=mediaitems
Xem code trong file test.php


HỎI ĐÁP


PHÂN TÍCH Ý TƯỞNG


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


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/


Liên h ệ

• Nguyễn Thanh Tú
• Email: tunt@vng.com


Zing me open social training 02

Recommandé

Recommandé

Contenu connexe

Plus de Hai Le

Plus de Hai Le (20)

Zing me open social training 02