「 Web 程式設計與應用」期末計畫摘要：熱門商家指南 by Facebook click

「Web程式設計與應用」期末計畫摘要：熱門商家指南by Facebook click 組員：張勤、賴昱行、王俊心 Date: 2014.06.10

內容大綱 隨著網路社群的普及，各種公開的網路社群資料已經隨手可得，本專題應用「facebookAPI」搭配「Google map 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 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 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_aboutinfos are received, we can calculate each restaurant’s rank based on these information by assigning weighting to each parameters.

Thanks for your attention

「 Web 程式設計與應用」期末計畫摘要：熱門商家指南 by Facebook click