SlideShare ist ein Scribd-Unternehmen logo
1 von 15
Xây dựng ứng dụng Open Social
trên Zing Me
Nguyễn Thanh Tú
tunt@vng.com.vn




Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social   1
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                                                    2
Chu ẩnbị

• Web server: Apache
• Back-end: PHP.
• Công cụ:
       – PDT hoặc Netbean
       – Firefox with Firebug add on.
• Kiến thức:
       – HTML
       – JavaScript
       – PHP




Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social
Cài đặt Web server

•    Download phiên bản XAMPP dành cho Window tại đây:
     http://www.apachefriends.org/en/xampp-windows.html
•    Chạy chương trình để cài đặt XAMPP.




Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social
Config Web server
Copy file ZingMe_Traing_OpenSocialconfighosts đè lên C:WINDOWSsystem32driversetchosts
Copy file ZingMe_Traing_OpenSocialconfighttpd-vhosts.conf đè lên C:xamppapacheconfextrahttpd-vhosts.conf
Copy file ZingMe_Traing_OpenSocialconfigphp.ini đè lên C:xamppphpphp.ini
Restart lại apache để các config có hiệu lực.
Chạy XAMPP Control Panel (sau khi cài đặt sẽ có Icon ở ngoài Desktop)
Chọn Stop, sau đó Start lại Apache




Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social
Ch ạy thử các API

• Chép 2 thư mục (app_test và testos) trong
  ZingMe_Traing_OpenSocialSample_Code vào C:xampphtdocs
• Đăng nhập sandbox zing me:
• Mở trình duyệt với địa chỉ: http://dev.me.zing.vn
• Đăng nhập: các accout để test: chitdi1, chitdi2 , ..., chitdi9 mật
  khẩu giống như account.




Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social
Ch ạy thử các API




Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social
Ch ạy thử các API

•    Sau khi đã đăng nhập vào sandbox zing me, chạy URL
     http://testos.me.zing.vn
      (domain này virtual host ở: C:xampphtdocstestos) để chạy thử các API.




Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social
Ch ạy Ứng dụng Open Social mẫu trên
Sandbox của Zing Me




Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social
Ứng dụng mẫu

• Ứng dụng Trắc nghiệm trên Zing Me, viết theo chuẩn Open Social




Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social        10
Ứng dụng mẫu
• Container: Cần có container để render ứng dụng.
• Zing Me Container: http://dev.container.me.zing.vn




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

• Zing me API
  http://developer.me.zing.vn/download/ZingOsAPI_v1.3.doc
• Java Script APIs
       – makeRequest()
       – embedFlash()
       – …
• REST APIs
       – GET /social/rest/people/{guid}/@self
       – GET /social/rest/people/@me/@self
       – GET /social/rest/people/{guid}/@friends
       – POST /social/rest/activities/@me/@self/@app
       – 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   12
Mô hình ho ạt động


Zing me Container                                                    Home server
                                              makeRequest()
                                                                     Ứng dụng trắc nghiệm
                                              Lấy danh sách bạn bè
  Gadget trắc nghiệm                                                  OpenSocial PHP Client
                                              Danh sách bạn bè



Zing me OpenSocial
Provider                                      Lấy danh sách bạn bè
Nhận request, xử lý và trả
kết quả về Client

  REST API Service
                                              Trả về danh sách bạn bè


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


Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social   14
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   15

Weitere ähnliche Inhalte

Ähnlich wie Zing me open social training 01

Cuộc thi lập trình viết ứng dụng trên Zing me
Cuộc thi lập trình viết ứng dụng trên Zing meCuộc thi lập trình viết ứng dụng trên Zing me
Cuộc thi lập trình viết ứng dụng trên Zing meHai Le
 
Ứng dụng từ điển cho SmartPhone từ Framework PhoneGap trên nền tảng Android
Ứng dụng từ điển cho SmartPhone từ Framework PhoneGap trên nền tảng Android Ứng dụng từ điển cho SmartPhone từ Framework PhoneGap trên nền tảng Android
Ứng dụng từ điển cho SmartPhone từ Framework PhoneGap trên nền tảng Android Lương Bá Hợp
 
Tìm đường trên di động (PhoneGap)
Tìm đường trên di động (PhoneGap)Tìm đường trên di động (PhoneGap)
Tìm đường trên di động (PhoneGap)Lương Bá Hợp
 
Introduction to python 20110917
Introduction to python   20110917Introduction to python   20110917
Introduction to python 20110917AiTi Education
 
Rubik tachtach opensocial-1.2
Rubik tachtach opensocial-1.2Rubik tachtach opensocial-1.2
Rubik tachtach opensocial-1.2Pham Cang
 
Bible app on android
Bible app on androidBible app on android
Bible app on androidKhoa Nguyen
 
Progressive Web App về dự báo thời tiết
Progressive Web App về dự báo thời tiếtProgressive Web App về dự báo thời tiết
Progressive Web App về dự báo thời tiếtTrung Nguyen
 
Báo cáo thực tập chuyên nghành lập trình Android GPSGroup
Báo cáo thực tập chuyên nghành lập trình Android GPSGroupBáo cáo thực tập chuyên nghành lập trình Android GPSGroup
Báo cáo thực tập chuyên nghành lập trình Android GPSGroupTinh Ngo
 
Giới thiệu Android- Bài 2
Giới thiệu Android- Bài 2Giới thiệu Android- Bài 2
Giới thiệu Android- Bài 2hoccungdoanhnghiep
 
Vận dụng kiến thức lập trình web vào môi trường thực tế
Vận dụng kiến thức lập trình web vào môi trường thực tếVận dụng kiến thức lập trình web vào môi trường thực tế
Vận dụng kiến thức lập trình web vào môi trường thực tếVKhang Yang
 
Tim hieu lap_trinh_android_va_tu_xay_dung_ung_dung_minh_hoa_20120809043144_31
Tim hieu lap_trinh_android_va_tu_xay_dung_ung_dung_minh_hoa_20120809043144_31Tim hieu lap_trinh_android_va_tu_xay_dung_ung_dung_minh_hoa_20120809043144_31
Tim hieu lap_trinh_android_va_tu_xay_dung_ung_dung_minh_hoa_20120809043144_31thequocbk
 
Videoconferencereport
VideoconferencereportVideoconferencereport
Videoconferencereporttuanle1984
 
Bài 1: Làm quen với ASP.NET - Giáo trình FPT - Có ví dụ kèm theo
Bài 1: Làm quen với ASP.NET - Giáo trình FPT - Có ví dụ kèm theoBài 1: Làm quen với ASP.NET - Giáo trình FPT - Có ví dụ kèm theo
Bài 1: Làm quen với ASP.NET - Giáo trình FPT - Có ví dụ kèm theoMasterCode.vn
 
Bài 3: Thao tác với dữ liệu SharePoint từ phía client
Bài 3: Thao tác với dữ liệu SharePoint từ phía clientBài 3: Thao tác với dữ liệu SharePoint từ phía client
Bài 3: Thao tác với dữ liệu SharePoint từ phía clientMasterCode.vn
 

Ähnlich wie Zing me open social training 01 (20)

Cuộc thi lập trình viết ứng dụng trên Zing me
Cuộc thi lập trình viết ứng dụng trên Zing meCuộc thi lập trình viết ứng dụng trên Zing me
Cuộc thi lập trình viết ứng dụng trên Zing me
 
Ứng dụng từ điển cho SmartPhone từ Framework PhoneGap trên nền tảng Android
Ứng dụng từ điển cho SmartPhone từ Framework PhoneGap trên nền tảng Android Ứng dụng từ điển cho SmartPhone từ Framework PhoneGap trên nền tảng Android
Ứng dụng từ điển cho SmartPhone từ Framework PhoneGap trên nền tảng Android
 
Tìm đường trên di động (PhoneGap)
Tìm đường trên di động (PhoneGap)Tìm đường trên di động (PhoneGap)
Tìm đường trên di động (PhoneGap)
 
Introduction to python 20110917
Introduction to python   20110917Introduction to python   20110917
Introduction to python 20110917
 
Rubik tachtach opensocial-1.2
Rubik tachtach opensocial-1.2Rubik tachtach opensocial-1.2
Rubik tachtach opensocial-1.2
 
Zing osapi v1.3.3
Zing osapi v1.3.3Zing osapi v1.3.3
Zing osapi v1.3.3
 
Mobile group
Mobile groupMobile group
Mobile group
 
Bible app on android
Bible app on androidBible app on android
Bible app on android
 
Progressive Web App về dự báo thời tiết
Progressive Web App về dự báo thời tiếtProgressive Web App về dự báo thời tiết
Progressive Web App về dự báo thời tiết
 
Báo cáo thực tập chuyên nghành lập trình Android GPSGroup
Báo cáo thực tập chuyên nghành lập trình Android GPSGroupBáo cáo thực tập chuyên nghành lập trình Android GPSGroup
Báo cáo thực tập chuyên nghành lập trình Android GPSGroup
 
Giới thiệu Android- Bài 2
Giới thiệu Android- Bài 2Giới thiệu Android- Bài 2
Giới thiệu Android- Bài 2
 
Vận dụng kiến thức lập trình web vào môi trường thực tế
Vận dụng kiến thức lập trình web vào môi trường thực tếVận dụng kiến thức lập trình web vào môi trường thực tế
Vận dụng kiến thức lập trình web vào môi trường thực tế
 
Android ios wp7
Android ios wp7Android ios wp7
Android ios wp7
 
Web201 slide 1
Web201   slide 1Web201   slide 1
Web201 slide 1
 
Tim hieu lap_trinh_android_va_tu_xay_dung_ung_dung_minh_hoa_20120809043144_31
Tim hieu lap_trinh_android_va_tu_xay_dung_ung_dung_minh_hoa_20120809043144_31Tim hieu lap_trinh_android_va_tu_xay_dung_ung_dung_minh_hoa_20120809043144_31
Tim hieu lap_trinh_android_va_tu_xay_dung_ung_dung_minh_hoa_20120809043144_31
 
Videoconferencereport
VideoconferencereportVideoconferencereport
Videoconferencereport
 
Chương 2.pdf
Chương 2.pdfChương 2.pdf
Chương 2.pdf
 
07 web course 1 php co ban
07 web course   1 php co ban07 web course   1 php co ban
07 web course 1 php co ban
 
Bài 1: Làm quen với ASP.NET - Giáo trình FPT - Có ví dụ kèm theo
Bài 1: Làm quen với ASP.NET - Giáo trình FPT - Có ví dụ kèm theoBài 1: Làm quen với ASP.NET - Giáo trình FPT - Có ví dụ kèm theo
Bài 1: Làm quen với ASP.NET - Giáo trình FPT - Có ví dụ kèm theo
 
Bài 3: Thao tác với dữ liệu SharePoint từ phía client
Bài 3: Thao tác với dữ liệu SharePoint từ phía clientBài 3: Thao tác với dữ liệu SharePoint từ phía client
Bài 3: Thao tác với dữ liệu SharePoint từ phía client
 

Mehr von Hai Le

Bán hàng trong thời đại hội thoại - Facebook
Bán hàng trong thời đại hội thoại - FacebookBán hàng trong thời đại hội thoại - Facebook
Bán hàng trong thời đại hội thoại - FacebookHai Le
 
Ship chung
Ship chungShip chung
Ship chungHai Le
 
Hướng dẫn Up tin trên ChợĐiệnTử.vn
Hướng dẫn Up tin trên ChợĐiệnTử.vnHướng dẫn Up tin trên ChợĐiệnTử.vn
Hướng dẫn Up tin trên ChợĐiệnTử.vnHai Le
 
Hướng dẫn dự thi
Hướng dẫn dự thiHướng dẫn dự thi
Hướng dẫn dự thiHai Le
 
C1792 netcitizens report final (vn) 23 03-10
C1792 netcitizens report final (vn) 23 03-10C1792 netcitizens report final (vn) 23 03-10
C1792 netcitizens report final (vn) 23 03-10Hai Le
 
C1792 netcitizens report final (en) 23 03-10
C1792 netcitizens report final (en) 23 03-10C1792 netcitizens report final (en) 23 03-10
C1792 netcitizens report final (en) 23 03-10Hai Le
 
Fta viettrack 05-2010
Fta   viettrack 05-2010Fta   viettrack 05-2010
Fta viettrack 05-2010Hai Le
 
Adma digital-marketing-yearbook-2009
Adma digital-marketing-yearbook-2009Adma digital-marketing-yearbook-2009
Adma digital-marketing-yearbook-2009Hai Le
 
The 2009 2014 world outlook for advertising for social media web sites
The 2009 2014 world outlook for advertising for social media web sitesThe 2009 2014 world outlook for advertising for social media web sites
The 2009 2014 world outlook for advertising for social media web sitesHai Le
 
Advertising And Pr Usage Trend 2010
Advertising And Pr Usage Trend 2010Advertising And Pr Usage Trend 2010
Advertising And Pr Usage Trend 2010Hai Le
 
Deo Geo Tech Market Segmenation
Deo Geo Tech Market SegmenationDeo Geo Tech Market Segmenation
Deo Geo Tech Market SegmenationHai Le
 
Social Media Ecosystem 2.0 at Barcampsaigon.
Social Media Ecosystem 2.0 at Barcampsaigon.Social Media Ecosystem 2.0 at Barcampsaigon.
Social Media Ecosystem 2.0 at Barcampsaigon.Hai Le
 
Social Media Ecosystem
Social Media EcosystemSocial Media Ecosystem
Social Media EcosystemHai Le
 
Iu Sife
Iu SifeIu Sife
Iu SifeHai Le
 
Introduction
IntroductionIntroduction
IntroductionHai Le
 
Agent Orange
Agent OrangeAgent Orange
Agent OrangeHai Le
 
Stop smoking or never
Stop smoking or neverStop smoking or never
Stop smoking or neverHai Le
 
Resume
ResumeResume
ResumeHai Le
 
Resume
ResumeResume
ResumeHai Le
 
Ba0632 2nd
Ba0632 2ndBa0632 2nd
Ba0632 2ndHai Le
 

Mehr von Hai Le (20)

Bán hàng trong thời đại hội thoại - Facebook
Bán hàng trong thời đại hội thoại - FacebookBán hàng trong thời đại hội thoại - Facebook
Bán hàng trong thời đại hội thoại - Facebook
 
Ship chung
Ship chungShip chung
Ship chung
 
Hướng dẫn Up tin trên ChợĐiệnTử.vn
Hướng dẫn Up tin trên ChợĐiệnTử.vnHướng dẫn Up tin trên ChợĐiệnTử.vn
Hướng dẫn Up tin trên ChợĐiệnTử.vn
 
Hướng dẫn dự thi
Hướng dẫn dự thiHướng dẫn dự thi
Hướng dẫn dự thi
 
C1792 netcitizens report final (vn) 23 03-10
C1792 netcitizens report final (vn) 23 03-10C1792 netcitizens report final (vn) 23 03-10
C1792 netcitizens report final (vn) 23 03-10
 
C1792 netcitizens report final (en) 23 03-10
C1792 netcitizens report final (en) 23 03-10C1792 netcitizens report final (en) 23 03-10
C1792 netcitizens report final (en) 23 03-10
 
Fta viettrack 05-2010
Fta   viettrack 05-2010Fta   viettrack 05-2010
Fta viettrack 05-2010
 
Adma digital-marketing-yearbook-2009
Adma digital-marketing-yearbook-2009Adma digital-marketing-yearbook-2009
Adma digital-marketing-yearbook-2009
 
The 2009 2014 world outlook for advertising for social media web sites
The 2009 2014 world outlook for advertising for social media web sitesThe 2009 2014 world outlook for advertising for social media web sites
The 2009 2014 world outlook for advertising for social media web sites
 
Advertising And Pr Usage Trend 2010
Advertising And Pr Usage Trend 2010Advertising And Pr Usage Trend 2010
Advertising And Pr Usage Trend 2010
 
Deo Geo Tech Market Segmenation
Deo Geo Tech Market SegmenationDeo Geo Tech Market Segmenation
Deo Geo Tech Market Segmenation
 
Social Media Ecosystem 2.0 at Barcampsaigon.
Social Media Ecosystem 2.0 at Barcampsaigon.Social Media Ecosystem 2.0 at Barcampsaigon.
Social Media Ecosystem 2.0 at Barcampsaigon.
 
Social Media Ecosystem
Social Media EcosystemSocial Media Ecosystem
Social Media Ecosystem
 
Iu Sife
Iu SifeIu Sife
Iu Sife
 
Introduction
IntroductionIntroduction
Introduction
 
Agent Orange
Agent OrangeAgent Orange
Agent Orange
 
Stop smoking or never
Stop smoking or neverStop smoking or never
Stop smoking or never
 
Resume
ResumeResume
Resume
 
Resume
ResumeResume
Resume
 
Ba0632 2nd
Ba0632 2ndBa0632 2nd
Ba0632 2nd
 

Zing me open social training 01

  • 1. Xây dựng ứng dụng Open Social trên Zing Me Nguyễn Thanh Tú tunt@vng.com.vn Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social 1
  • 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 2
  • 3. Chu ẩnbị • Web server: Apache • Back-end: PHP. • Công cụ: – PDT hoặc Netbean – Firefox with Firebug add on. • Kiến thức: – HTML – JavaScript – PHP Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social
  • 4. Cài đặt Web server • Download phiên bản XAMPP dành cho Window tại đây: http://www.apachefriends.org/en/xampp-windows.html • Chạy chương trình để cài đặt XAMPP. Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social
  • 5. Config Web server Copy file ZingMe_Traing_OpenSocialconfighosts đè lên C:WINDOWSsystem32driversetchosts Copy file ZingMe_Traing_OpenSocialconfighttpd-vhosts.conf đè lên C:xamppapacheconfextrahttpd-vhosts.conf Copy file ZingMe_Traing_OpenSocialconfigphp.ini đè lên C:xamppphpphp.ini Restart lại apache để các config có hiệu lực. Chạy XAMPP Control Panel (sau khi cài đặt sẽ có Icon ở ngoài Desktop) Chọn Stop, sau đó Start lại Apache Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social
  • 6. Ch ạy thử các API • Chép 2 thư mục (app_test và testos) trong ZingMe_Traing_OpenSocialSample_Code vào C:xampphtdocs • Đăng nhập sandbox zing me: • Mở trình duyệt với địa chỉ: http://dev.me.zing.vn • Đăng nhập: các accout để test: chitdi1, chitdi2 , ..., chitdi9 mật khẩu giống như account. Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social
  • 7. Ch ạy thử các API Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social
  • 8. Ch ạy thử các API • Sau khi đã đăng nhập vào sandbox zing me, chạy URL http://testos.me.zing.vn (domain này virtual host ở: C:xampphtdocstestos) để chạy thử các API. Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social
  • 9. Ch ạy Ứng dụng Open Social mẫu trên Sandbox của Zing Me Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social
  • 10. Ứng dụng mẫu • Ứng dụng Trắc nghiệm trên Zing Me, viết theo chuẩn Open Social Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social 10
  • 11. Ứng dụng mẫu • Container: Cần có container để render ứng dụng. • Zing Me Container: http://dev.container.me.zing.vn Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social 11
  • 12. Zing Open Social APIs • Zing me API http://developer.me.zing.vn/download/ZingOsAPI_v1.3.doc • Java Script APIs – makeRequest() – embedFlash() – … • REST APIs – GET /social/rest/people/{guid}/@self – GET /social/rest/people/@me/@self – GET /social/rest/people/{guid}/@friends – POST /social/rest/activities/@me/@self/@app – 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 12
  • 13. Mô hình ho ạt động Zing me Container Home server makeRequest() Ứng dụng trắc nghiệm Lấy danh sách bạn bè Gadget trắc nghiệm OpenSocial PHP Client Danh sách bạn bè Zing me OpenSocial Provider Lấy danh sách bạn bè Nhận request, xử lý và trả kết quả về Client REST API Service Trả về danh sách bạn bè Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social 13
  • 14. HỎI ĐÁP Xây dựng Ứng dụng Web trên Mạng xã hội và Chuẩn Open Social 14
  • 15. 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 15