Transcript FB.api
「Web程式設計與應用」期末計畫摘要：
熱門商家指南by Facebook click
組員：張勤、賴昱行、王俊心
Date: 2014.06.10
內容大綱
隨著網路社群的普及，各種公開的網路社
群資料已經隨手可得，本專題應用
「facebook API」搭配「Google map API」
吃遍台灣
流程圖
Facebook API 登入使用者資訊
Google API 回傳經緯度
Facebook API 擷取商家資訊，並計算排名
Google API 顯示商家位置
介面
前端使用Bootstrap
Demo
使用技術
Koding
Facebook API
Google map API
Node.js
Bootstrap
Koding
線上coding，不用自行建造環境
(簡單來說就是一台ubuntu的虛擬機器)
預設環境
Apache：在家目錄WWW裡面就可以架設網站啦
Git
npm
C,C++,Java,PHP,Python,Ruby,Perl,Go,MySQL,MongoDB,
Django...開發環境。
終端機：Koding是給你一個Ubuntu的VM環境 (也可以透過
遠端ex:putty來access，不用透過Koding介面)
sudo權限：讓你可以安裝各種套件
共同編輯：共同coding同一份程式碼、聊天視窗、畫圖板
3GB虛擬主機空間
Custom Domain
Koding
適合的使用者
早期開發合作開發專案
短期教學使用
如果是長期使用某個網站，還是建議自行
架設網站環境
Google map API
註冊金鑰
Google map API
初始化
Google map API
地理編碼
Google map API
marker
Google map API
導航服務
Facebook API
Register App
Facebook API
Initializing
FB.init({
appId
: '304633493025006', // your app’s ID
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.0' // use version 2.0
});
Facebook API
Search for Nearby Restaurants
FB.api('/search?q=restaurant&type=place¢er
='+lat+','+lng+'&distance='+range+'&fields=name,i
d,location', function(response)
Facebook API
Search for Likes, Checkins Counts
FB.api('/' + store.id, function(response2) {
Facebook API
Callback and Closure
Facebook API runs asynchronously
Need to use callback or closure for nested
FB.api calls
function getStores (lat, lng, range, callback) {
FB.api(/search for restaurants, function(response) {
for each (response.data.length) {
FB.api(‘/search for checkins&likes, function(reponse2)
callback(stores);
Ranking
After all stores’ checkins, likes, and
talk_about infos are received, we can
calculate each restaurant’s rank based on
these information by assigning weighting to
each parameters.
Thanks for your attention