• 沒有找到結果。

雲端與生活-觀光雲 Cloud System and Life-Tourism Cloud

N/A
N/A
Protected

Academic year: 2022

Share "雲端與生活-觀光雲 Cloud System and Life-Tourism Cloud"

Copied!
27
0
0

加載中.... (立即查看全文)

全文

(1)

1

專題書面報告

雲端與生活-觀光雲

Cloud System and Life-Tourism Cloud

B09802106 邱奕昌 B09802088 馬瑋賢 B09802085 黃昭禹 B09802064 謝文堯

指導教授:許慶賢 教授 專題題號:PRJ2012-CSIE-10118

中華民國 2013 年六月二十四日

(2)

2

目錄

1.摘要 ...3

2.研究動機與目標 ...3

3.小組分工 ...3

4.背景知識介紹 ...3

5.研究方法及步驟 ...4

5.1 初始概念和規劃 ...4

5.2 系統架構與設計 ...4

5.3 安裝與實作流程 ...5

5.4 如何架設雲端平台 ...8

6.專題內容 ...10

6.1 寄信給管理者 ...10

6.2 以 Google Docs 問卷修改運用成討論區 ...10

6.3 在各大社群網站分享以及 QR code ...11

6.4 鑲入 Google map 以及之各種功能運用 ...14

7.問題與結論 ...16

8.未來展望 ...16

9.實驗結果與展示 ...16

10.參考文獻 ...26

(3)

3

1.摘要

近年來由於網路發展的迅速,導致現今的生活的食衣住行育樂都跟網路有關,

只要連上網路點開此網頁都搜尋得到,本專題將雲端運算結合到觀光系統,利 用雲端的特性讓所有想旅遊的使用者連結到此網站可以及找到所想的旅遊景點 及附近美食。

2.研究目標與動機

為何要做此一專題研究與實驗近年來雲端科技被視為最熱門技術之一,對於雲 端運算與理論基礎我們深感興趣,有鑑於此,我們希望透過專題的機會,對雲 端運算基本概念有所認識,並學習如何使用雲端運算的軟體套件,進而把雲端 架構運用到在網站上面,增加可以幫使用者規劃路線圖,達成雲端運算的實體 運用。

預計達成的目標以桃、竹、苗地區的觀光景點,建立一個功能完整,具備雲端 運算特性、具有可讓使用者選擇所需要的景點,並幫他們規劃路線圖,使得使 用者能有更多的時間可以使用,並且可以連結社群網站(Facebook、Plunk、

Twitter)分享。

3.小組分工

黃昭禹:PPT 製作、書面報告製作、網頁文字內容、 資料收集 馬瑋賢:程式撰寫、意見統合、資料收集

謝文堯:網頁版面設計、站內小工具設計、資料收集 邱奕昌:資料分析整理、程式撰寫、資料收集

4.背景知識介紹

Cloud Computing(雲端運算)

「雲」指網際網路(Internet)「端」止使用者端(Client)。大約等於 Network Computing(網路運算)。雲端不是技術,而是一種電腦運算的概念。

本質為分散式(Distributed Computing)的概念,可視為分散式運算的一種。讓 網路上一些(超過一台)不同的電腦同時幫你做事情、進行運算,大幅增加處理 速度。

軟體即服務 (SaaS,Software as a Service) 提供使用者需要的軟體系統,但

(4)

4

是,因為是依照特定使 用者的需求進行開發,一般而言,不於適用於其他的使 用者 平台即服務 (PaaS,Platform as a Service)

提供使用者軟體系統運行所需的平台,通常服務提供者對使用者有諸多限制,

軟體開發者若能配合這些限制,一樣可以在這類型的平台上提供出色的軟體服 務

架構即服務 (IaaS,Infrastructure as a Service) 提供平台提供者所需的基 礎硬體設施,是雲端運算的底層服務,平台提供者不需管理硬體設備,但需要 自行管理硬體設定並保持其上的各項系統正常運行

5.研究方法及步驟

5.1 初始概念和規劃

我們這組決定專題題目之後,去修系上開的"雲端運算程式設計"和"適地性雲端 觀光服務系統"課程中有教我們如何使用 Eclipse、如何架設雲端平台、基本的 Google map API,經過組員間彼此的討論,而我們初步決定以城隍廟作為我們 的主題,過程中收集了城隍廟的資料 例如:歷史背景、當地節慶、周邊美食等 等。

我們假日特別去城隍廟實周邊考察有拍照及影片,也有去吃那邊的美食,最後 我們做出個簡單的城隍廟網站 裡面主要就介紹一些城隍廟的特色、發展等。

而現在我們把地區發展到桃園、新竹、苗栗,使我們網站有更進一步的往觀光 景點網站發展。

5.2 系統架構與設計

系統架設:

programer Eclipse Google API Google Cloud Server

Browser User

(5)

5

整體網頁架構:

5.3 安裝與實作流程

(1)前置作業

我們所使用的是 Eclipse 而 Eclipse 是什麼?

Eclipse 是由 Open Source Community 所創建的開發軟體,並被廣泛地使用在 許多不同的領域。大多數人都知道 Eclipse 是 Java 的 Integrated

Development Environment(IDE)。Eclipse 可由額外的附加功能擴充,目前已 有幾個 open source 的計劃案與公司,將額外的附加元件擴充至 Eclipse 中。

(2)入門 Java

Eclipse 需要安裝 Java Runtime。建議使用 Java 7(又稱為 Java 1.7)或 Java 6。Java 提供兩種版本,Java Runtime Environment(JRE)和 Java Development Kit(JDK)。 JRE 只包含用來啟動 Java 程式的必要功能,而 JDK 則包含額外的開發工具。 Eclipse 包含它自己的開發工具,如 Java 編譯器。

因此,本教程使用 JRE 就足夠了。 當在 Eclipse 以外的環境下編譯 Java 原始 碼時,則需要使用到 JDK。這些需使用到 JDK 的方案不包括在本文章的教學中。

(6)

6

(3)安裝 Eclipse

您可以從http://www.eclipse.org/downloads上下載 "Eclipse IDE for Java Developers" 來安裝 Eclipse,並把它解壓縮到電腦目錄中。 您所下載下來的 檔案格式為"zip"文件。大多數的作業系統皆可以在目錄底下,將檔案解壓縮。

例如透過 Windows7 的文件點擊鼠標右鍵並選擇"Extract all"。 為了避免 Eclipse 產生問題,請盡量使用不含中文以及空白的字串作為檔案的路徑。在 解壓縮所下載的檔案後,Eclipse 可不需經過其他的安裝程序即可直接使用。

(4)啟動 Eclipse

Step 1

啟動 Eclipse,然後選擇“幫助”>“安裝新的軟件...在出現的對話框中,

輸入更新站點的 URL 到工作與“文本框中:

http://dl.google.com/eclipse/plugin/3.7 。

(7)

7

Step 2

您應該看到插件和 SDK 的盒子裡裝著的中心。選擇這兩項的複選框。這安裝插 件,是一個 Google 的 App Engine 的 Java SDK 和 Google Web 工具包 SDK。單 擊“ 下一步“。

Step 3

查看你要安裝的功能。單擊“ 下一步“。

(8)

8

Step 4

閱讀許可協議,然後選擇“ 我接受許可協議中的條款。單擊“ 完成“。

Step 5

然後你將被要求會問,如果你想重新啟動 Eclipse。單擊“ 立即重新啟動。

5.4 如何架設雲端平台

Step 1

Enter Project name and Package

(9)

9

Step 2

取消勾選使用 Google Web 工具包,然后請按 Finish

Step 3

可以開始編輯、撰寫程式

(10)

10

6.專題內容

6.1 寄信給管理者

使用 Html 語法:

<input type="button" value="按鈕文字"

onclick="self.location.href='mailto:欲寄往的 E-mail 網址'>

與文字 E-mail 超連結頗為相似,但是以按鈕方式呈現,一樣能做按鈕的修飾。

6.2 以 Google Docs 問卷修改運用成討論區

以 Google 提供的 Google Docs 表單製作成類似問卷的模式,此問卷答畢將回 傳到 Google 雲端硬碟而存在雲端硬碟,我們再把回傳至雲端硬碟的資料傳至網 頁上做連結,作為簡易的討論區運用。

問卷討論區鑲嵌語法:

<div class="post">

<iframe width='500' height='480' frameborder='0' src='https://docs.google.com/spreadsheet/viewform?

formkey=dGVLUEg4UG94R3dKcUxLUnBoOFJkbEE6MQ'></iframe> <iframe width='500' height='600' frameborder='0'

src='https://docs.google.com/spreadsheet/pub?key=0AkGSkpiZHgKdGVLUEg4UG94R 3dKcUxLUnBoOFJkbEE&single=true&gid=0&output=html'></iframe> <div

class="entry">

(11)

11

6.3 在各大社群網站分享以及 QR code

做出連結可以讓使用者在各大社群網站分享推薦我們的觀光網站 使用 twitter、

plurk、fcaebook、google+釋出的分享連結鑲入網站。

各式社群網站分享語法:

Plurk

<a href="javascript:

void(window.open('http://www.plurk.com/?qualifier=shares&status=' .concat (encodeURIComponent(location.href)) .concat('

') .concat('&#40;') .concat(encodeURIComponent(document.title)) .concat('&

#41;')));">

(12)

12

Twitter

<a href="javascript:

void(window.open('http://twitter.com/home/?status=' .concat(encodeURICo mponent(document.title)) .concat('') .concat(encodeURIComponent(location.

href))));">

Fcaebook

<a href="javascript:

void(window.open('http://www.facebook.com/share.php?u='.concat(encode URIComponent(location.href)) ));">

(13)

13

Google+

<link rel="canonical" href="http://www.xxx.com/blog/12345678" />

QR code

產生網站的 QR code 讓行動裝置能更快速的找到本網站,使用 quickmark 提供之加碼器

function genCode()

function makeCodeContent() 產生 QR code

(14)

14

6.4 鑲入 Google map 以及 之各種功能運用

利用 java script 語法導入 Google map database

<script type="text/javascript"

src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript"

src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js

"></script>

產生 Google map:

在網頁中制定 Google map 之大小與起始位置 function initialize() {

directionsDisplay = new google.maps.DirectionsRenderer();

var chicago = new google.maps.LatLng(24.895468,121.287981);

var myOptions = { zoom:13,

mapTypeId: google.maps.MapTypeId.ROADMAP, center: chicago

} } );

.CreateMarker 在 map 上建立地圖標記

讓使用者可以在地圖上找到已選取的景點位置使用

$(".CheckCount").click(function() )

function createMarker(lat, Lng,contentString) function DeleteMarker(CheckVal)

function clearMarkers() 來建立與清除地圖標記

(15)

15

標記與標記間的路徑規劃:

讓使用者可以知道標記與標記間最接近的路線 使用

function calcRoute()

將景點之座標傳至 google 端請求 google 端規劃回傳最佳路徑 function clearWaypoints()

清除標記之間的路徑

計算路徑之間的距離與行經路線、時間:

讓使用者可以清楚景點與景點間怎麼走、大概需要多久時間

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

directionsDisplay.setMap(map);

directionsDisplay.setPanel(document.getElementById("directionsPanel"));

google.maps.event.addListener(map, 'click', function() { infowindow.close(); }

(16)

16

7.問題與結論

網頁版面的部分以前在學校修過 CSS 和 XML 的課程

其他一些小工具例如:月曆、時鐘、人氣統計等也參考了許多書和網站,其實沒 想像中困難。

難度最大的問題是要如何讓景點標記與另一個景點標記作連結,這個問題難倒 了我們好幾個禮拜,而我們參考了網路上的資訊和經過了無數的測試與失敗,

找到了解決的方法。

8.未來展望

目前此網站主要是支援一般電腦網路用戶為主,對於現在每人人手都擁有智慧 型手機,而我們也支援 QR code 讓手機可以快速的收尋到我們網站,未來可以

開發Android版本讓使用者只需下載就可以使用此網站的資訊,讓網站可支援

平台更加的多元,隨時隨地都可以存取網站。

當然,網站還有一個十分重要的部分,那就是資訊安全;雖然設計網站時還沒 有考慮這個部分,但為了避面一些有害的程式或使用者的惡意破壞;我們有相 當多的資安議題是需要學習的,這部分一是本專題內容未來需要處理和維護的 地方

9.實驗結果與展示

首頁:

http://ciou1231.appspot.com/index.html

(17)

17

我的最愛:

1. 點擊我的最愛選項,會跳出把網站加進我的最愛視窗

2 . 計算出目前在此網站上的人數、當日人氣、累積人氣

(18)

18

月曆:

簡單的月曆,並有目前時間、使用者停留此網站的時間

QRcode :

手機可以掃描 QRcode 圖示進入網站

(19)

19

分享:

點擊圖示可將此往葉粉想到社群網站 並且會計算出此網頁被分享了多少次

景點介紹:

1. 有提供許多桃竹苗景點,點擊地點會出現該地點的介紹 並附註資料來源

2. 該地點的介紹

(20)

20

3. 景點資料來源選項

4. 進入景點資料來源

(21)

21

討論區:

1. 點擊一項功能,之後按下 continue

2. 輸入基本資料並打上內容

(22)

22

3. 往下可以對本網站進行評價,繼續按 continue,想回上一步則按 back

4. 輸入的內容顯示在討論區

(23)

23

推薦網站:

推薦許多不錯的景點網站

連絡我們:

輸入基本資料和想對管理員說的內容,送出資料之後,內容會寄到我們管理員 信箱

(24)

24

行程規劃:

1. 當您點擊地點,下方會顯示出許多景點可供勾選

2. 勾選地點之後,會在下方地圖顯示座標及資訊

(25)

25

3. 點及資訊,會跳出該地點的介紹網頁

4.當勾選第兩個地點,兩個座標間會有路徑相連,右邊會有顯示經過哪些街道,

並會計算出所花費的時間

(26)

26

5. 當勾選更多地點,也能將路徑相連,並提供資訊

10.參考文獻:

[1] GOOGLE MAP API 官方

https://developers.google.com/maps/?hl=zh-tw

[2]網頁版面設計 freecsstemplates http://www.freecsstemplates.org/

[3]google+ 網站

https://developers.google.com/+/api/

[4]Google API 開發詳解:Google Maps 與 Google Earth 雙劍合壁(第二版) 作者:江寬、龔小鵬

[5]大無限的 Google Maps API 開發商機 作者:陳育春

[6]Eclipse 完全攻略:從基礎 JAVA 到 PDE 外掛開發(附 CD) 作者:宮本信二

(27)

27

[7]Eclipse 實作手冊─活用 Java 整合開發環境 (Eclipse In Action: A Guide for the Java Developer

作者:David Gallardo, Ed Burnette, Robert McGovern

[7]雲端網頁程式設計:Google App Engine 應用實作 作者:湯秉翰

[8]HTML 程式設計合集(3) 作者:哲也研究室

[9]HTML&CSS:網站設計建置優化之道 作者:Jon Duckett

[10]網頁語法教學

http://www.w3schools.com/

[11]QR code

http://qrcode.kaywa.com/

[12]Facebook API

https://developers.facebook.com/docs/facebook-login/login-flow-for- web-no-jssdk/

[13]Twitter API

https://dev.twitter.com/terms/display-requirements [14]Plurk API

http://www.plurk.com/API

參考文獻

相關文件

有關於 Java 程式語言,下列何者敘述不正確?(A)Java 程式語言透過 extends 提供多重繼承 (Multiple

public static double calculate(int i, int j) throws ArithmeticException,

National Taiwan University July 9, 2005 Page 5..

Contains the core Swing components, including most of the model interfaces and support

JRE (Java Runtime Environment): for users, JVM + basic libraries JDK (Java Development Kit): JRE + compilers + ... —jdk-6u12-windows-i586-p.exe or other platform

• Copy a value from the right-hand side (value or expression) to the space indicated by the variable in the left-hand side.. • You cannot write codes like 1 = x because 1 cannot

• Instead, static nested classes do not have access to other instance members of the enclosing class. • We use nested classes when it

• manipulating object status (partially done: instance variable assignments).. • deleting objects —[TODO 3]