「 ­­­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 APImarker

Google map API導航服務

Facebook APIRegister App

Facebook APIInitializing

FB.init({appId : '304633493025006', // your app’s IDcookie : true, // enable cookies to allow the server

to access // the sessionxfbml : true, // parse social plugins on this pageversion : 'v2.0' // use version 2.0

});

Facebook APISearch for Nearby Restaurants

FB.api('/search?q=restaurant&type=place&center='+lat+','+lng+'&distance='+range+'&fields=name,id,location', function(response)

Facebook APISearch for Likes, Checkins Counts

FB.api('/' + store.id, function(response2) {

Facebook APICallback 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