CmoreCloud 雲端平台
長茂科技股份有限公司 November 2014
長茂科技簡介 長茂科技（ EverMore ）於 1997 年 5 月成立於美國，並於 1998 年 9 月 經國科會的核准設立於新竹科學園區。 是國內第一家開發出全球衛星定位系統晶片及定位系統模組的上、 中游元件供應廠商。 長期耕耘 GPS/Google map 之整合技術研發，開發完成一系列必要 之技術模組，深具技術優勢，且自主技術掌握度高。 整合 Web1.0/Web2.0/GIS/GPS 旅遊資訊於開創性 Cmoremap 個人化 故事、商家資訊 (CmoreDM) 及旅遊新聞 (Cmore News) 等服務，應 用 GIS/GPS/QRcode 適合使用的 ICT 科技行銷帄台工具。 開發創新性 CmoreCloud 雲端帄台運用服務於手機移動導覽 App 及 LBS 之技術開發。
2
目錄 一、 CmoreCloud 帄台介紹 - CmoreCloud App 特點 - CmoreCloud 適用對象 - 競賽活動 - 應用案例
二、 CmoreCloud 帄台教學及實作 - CmoreLBS - CmoreIFTTT
3
為何需要 CmoreCloud 雲端帄台 ? SoLoMo 功能 – 建置 ( 新媒體行銷功能 ) LBS last mile 功能 ( 導覽 / 導航及 Mobile EC ) One Cloud N Screen ( 一雲多端 ): 可使用在不同裝置 User ( 內容提供者 ) 不需理會何者 OS 帄台、硬體之演 進，專心於內容產生及經營即可
4
SoLoMo 新媒體行銷魅力
So Social 消費者 社群網站 分享
Lo Mo Local 生活場域 定位系統 隨地
Mobile 基礎環境 行動服務 隨時個人化
隨時 + 隨地得到個人化 + 適地化的即時資訊
5
CmoreCloud App 特點 客製化版面
OS 版本自 動更新
功能擴充佳
開發時程短
修改不求人 內容可自行 刪修
資料雲端化
不需重覆更 新 APP
手機與後台 同步更新 6
CmoreCloud 雲端新型態服務 Apps 產生帄台 嵌入式系統 環境設計
CmoreIO 功能控制設定
情境設計討論
版面結構設計 App 發佈
數位內容匯流與服務 應用
長茂科技股份有限公司
智慧生活與物聯網 應用
App 發佈 架構企劃
市場分析 內容編輯 版面結構設計
資料搜集 7
雲端化 PaaS 平台租賃
SaaS
PaaS
IaaS
• 軟件服務供應商， 以租賃的概念提 供客戶服務，而 非購買，比較常 見的模式是提供 一組帳號密碼。 • Google
• 是指提供了一個 資訊開發人員的平 台並編寫自己的程 式碼於 PaaS 的提供 商做上傳的介面並 在網絡上服務。使 用者只需要支付他 們的使用。
• 是交付的資訊基礎 設施作為一個完全 外包服務。能提供 基礎設施服務像是 谷歌， IBM ， Amazon.com 等， 透過主機託管和發 展環境，提供 IaaS 的服務項目。 • IBM, ， Amozon
軟體即服務
平台即服務
基礎設施即服務
長茂科技股份有限公司 • CmorPaaS
Software as a Service
Platform as a Service
Infrastructure as a Service
8
CmoreCloud 六大帄台 一雲多端 應用面
休閒農場
長茂科技股份有限公司 飯店餐廳
展場
商店
主題樂園
博物館
社
百貨公 司
商圈
旅行
客運
CmoreIO 長茂科技股份有限公司CmoreArduino
嵌入式架接系統模組
智慧生活示範模組
嵌入式系統與物聯網應用
CmoreIFTTT CmoreConnect 長茂科技股份有限公司
CmorePaaS(LBS) CmoreGM SoLoMo 應用模組 影音導覽地圖模組 一雲多端串媒體行銷
架接系統模組
使用者情境設計
不需寫程式、建置快速、易維護
9
CmoreUI – HTML5 Design Platform 9
CmoreCloud- 教學帄台適用對象 帄台名稱
主要功能
適用對象
CmorePaaS(LBS)
SoLoMo 應用 跨領域 UI 設計與數位內容匯流
非資訊背景、資管系、 App 入門學程
CmoreIFTTT
使用者情境設計 ( include 互動影音電子書 )
資訊學院、教育學院、設計學院、智慧生 活學程、數媒系、數位學習系
CmoreGM
影音導覽地圖模組應用
CmoreConnect
架接系統模組 XML, 動態網頁資料庫系統
CmoreArduino
智慧生活示範應用模組
資訊學院、教育學院、設計學院、智慧生 活學程
CmoreIO
嵌入式架接系統模組 近端硬體連結
電資學院、設計學院、智慧生活學程、網 通電通學程、資通系
資傳系所傳播學院、商學院與網路行銷學 程
長茂科技股份有限公司 資訊學院、教育學院、設計學院、智慧生 活學程、數媒系、數位學習系
利用上述各帄台，我們就可以組合成成各式特定用途的雲端應用— 本帄台具可跨領域共同討論及容易擴充的優點， 又有帄台移交及自主管理的特點， 是很合適各系所形成各專業領域的 Domain Based APP 與 Cloud Service ，所以它不但是很優越的教學 10 帄台，也是優異的教學、產學、微創可順利接龍的產學帄台
CmoreCloud 雲端帄台適合對象 業界 :
行銷公司 - 想成為專業企劃製作服務提供者 服務的單位或業主、公司等想進行雲端化行動化的 App 製作（各類型 公司、社團法人、教育單位…等）
教育界 :
教學帄台，想創作 App 卻不會 / 不熟悉程式語言者（非專業程式設計科 系或教學單位） 高中或大專競賽的比賽帄台，有效提昇學校招生形象及功能 高中、大專教師工作坊訓練帄台 學生專題實作 / 比賽參與 / 雲端實習 產學合作實踐帄台
2014/11/7
11
2013~2014 年度競賽 主辦單位
主題
組別
2013 麒麟盃～ App 行銷三創競賽
對 生 物 分 布 資 決賽 料之創意應用 有興趣者，皆 可參加 大專組 決賽
2013 全國行動網路創意設計競賽
高中組 大專組 2013 慈善科技人文全國網頁設計 高中組 比賽暨行動 App 創作競賽 大專組
決賽
2013 電信創新應用大賽 - 行動 App 校園組 社會組
初賽 決賽
2014 慈善科技人文全國網頁設計 高中組 比賽暨行動 App 創作競賽 大專組 2014 數 位 創 新 應 用 系 列 賽 -Hami 校園組 社會組 Apps
初賽 複賽 初賽 決賽
行政院農業委員會特有生物研 愛生物創意加值應用競賽 1. APP 設計組。 究保育中心 2. 網頁設計組。
中州科大 萬能科大資管系 新竹市企業經理人協進會 中華電信 新竹市企業經理人協進會 中華電信 萬能科大資管系
2014 全國行動網路創意設計競賽
高中組 大專組
賽程
初賽 複賽
初賽 決賽 12
2014 全國行動網路創意設計競賽 • 主辦單位 : 萬能科大資管系 • 報名日期 : 即日起至 2014/11/14 止 • 報名網址 : http://www.im.vnu.edu.tw/news_detail.aspx?n=18547 • 競賽主題 : 1. 多媒體設計 - 雲端主題導覽組 2. 電子商務 - 網路創意行銷組 3. 特別主題 - 生態地圖應用組
13
新竹企經會 - 全國慈善 / 科技 / 人文網頁設計比賽暨行動 App 創作比賽 • 主辦單位： 新竹市企業經理協進會、教育部資訊與科技教育司臺灣智慧生活文化創 意產業整合創新跨校教學聯盟 • 協辦單位： 科學工業園區管理局、台灣智慧生活科技促進協會、交通大學數位創意 與行銷策略實驗室、大華科大資管系、中州科大中小企業診斷與行銷中 心 / 資管系、中國科大資管系、中華大學休閒系、元培科大資工系、元 智大學資傳系、玄奘大學資管系 / 企管系、佛光大學資訊應用系、育達 商業科大多媒體與遊戲發展系、育達商業科大資管系、亞洲大學綠能科 技研究中心、明新科大資工系、明新科大服務事業管理所、明新科大電 子系、東海大學資工系、南開科大數位生活創意學系、南華大學資管系、 建國科大資管系、致理技術學院資管系、台東大學資管系、高雄第一科 大電資學院智慧生活資通創新與服務中心 / 資通創新產業碩士專班、高 苑科大資訊學院、華夏技術學院資管系、萬能科大資工系、僑光科大工 工與管理系、嘉南藥理科大資管系、銘傳大學資管系、德明財經科大物 流管理系、大可意念傳達公司、長茂科技公司、中華企經會、台北市企 經會、台中市企經會、嘉義市企經會、台南市企經會、高雄市企經會 14
長茂科技股份有限公司
15
中華電信 - 電信創新應用系列賽
長茂科技股份有限公司
http://2014hamiapps.emome.net/index.html#a3
16
17
應用案例 • • • •
新竹縣〃微旅行 2013 鹿港冬遊季 台灣原住民工藝師 潮起潮落間的紅樹林
18
新竹縣〃微旅行 ( 中華大學 - 休閒系 )
長茂科技股份有限公司
19
2013 鹿港冬遊季 ( 中州科大 - 資管系 )
長茂科技股份有限公司
鹿港冬遊季 APP 發表，遊玩資訊一手掌握： https://www.youtube.com/watch?v=RSvP_F_mehY
20
台灣原住民工藝師
( 東海大學文化創意產業發展辦公室 )
長茂科技股份有限公司
21
潮起潮落間的紅樹林 ( 新竹高商資處科 )
長茂科技股份有限公司
http://paas.cmoremap.com.tw/vnu2013im114 22
CmoreLBS SoLoMo 應用
23
觀光工廠自在遊 CmoreLBS App 範例
長茂科技股份有限公司
24
案例 : 觀光工廠自在遊 App
長茂科技股份有限公司
25
觀光工廠自在遊 App 介紹 Video
http://www.youtube.com/watch?v=lS1eP2JzTDQ 26
觀光工廠自在遊 App - 5 層架構 觀光工廠自在遊
第1層 第2層 第3層 第4層 第5層
產業新風貌
實績列表
實績內容
工廠在哪裡
主題探索趣
幸福任意門
長茂科技股份有限公司 Facebook 區域
特色別
縣市別
產業別
各家工廠列表
各家工廠列表
工廠內容
粉絲相簿
好康看這邊
好康消息列表
好康內容
工廠內容 27
設計 App 內容流程
1 先有想法 與創意與 組成團隊
6 決定與修正 消費者模擬 使用情境
2 進行市場調 查驗證想法 模式
3
4
準備相關企劃、 了解 CmorePaaS 工具資源、搜 界面設計原則與 集資料 試作
長茂科技股份有限公司
7 登入 CmorePaaS 後台設計編 撰內容製作 與修正
8 檢視並完善 內容細節
9 測試並進行 用戶體驗
5 設計架構與繪 製草圖佈局
10 打包 App 上架
28
操作 CmorePaaS 帄台 1. 新增按鈕 2. 資料型式 - 系統資料、顯示摘要、連接 URL 、 Youtube 影音列表 美化按鈕 - 加上圖片 : 120( 寬 )x120( 高 ) 或 320( 寬 )x120( 高 ) 3. 4. 摘要內容 - 文字、 圖片、表格、影音嵌入、文字超連結 5. 電話自動撥打 6. 經緯度 - 產生地圖、街景圖、導航 7. 三張圖片顯示模組 : 400( 寬 )x300( 高 ) 8. 跑馬燈 9. 首頁圖片 : 480( 寬 )x800( 高 ) 10.自訂版型 – 上傳自行設計圖片 : 480( 寬 )x800( 高 ) 11. App 下方功能鍵 12. HTML 嵌入與 URL 外連 13. 線上打包 29
準備工具及步驟 1. 請用 Google Chrome 瀏覽器 http://www.google.com.tw/chrome 2. 操作帄台網址 http://paas.cmoremap.com.tw
30
帳號密碼與觀光工廠自在遊 App 參考網址 練習帳號 : cmorepaas246~cmorepaas295 密碼 : 1234 練習題目 : 觀光工廠自在遊 App 教材包 : 內含照片文字 http://122.116.219.204/ariel/cmorepaas.rar • 觀光工廠自在遊 App 參考網址 • • • •
http://paas.cmoremap.com.tw/chtdemo • App 下載 ( 新版 ) 31
登入 CmorePaaS 後台 請填入帳號、密碼、驗證碼
32
CmorePaaS 後台總覽 工 具 區
工 作 區 33
預 覽 區
如何新增 App 之按鈕與內容 請於左側的『選項資料管理』選擇『新增按鈕』
34
依序新增 『首頁按鈕』名稱
35
依架構新增各按鈕的下一層
顯示方式 : 可選擇隱藏 , 在手機畫面上將不會顯示 顯示下一層 : 代表此按鈕有下一層資料 最多共有 5 層 無顯示下一層 : 代表此標題無下一層資料
36
依架構新增各按鈕的下一層 - 以產業新風貌為例 CmorePaaS 後台
手機 App 前台
長茂科技股份有限公司
37
內容資料 : 新增的資料型式
1
2
3 4
1 系統資料 : 將有下一層資料 ( 有次目錄 ) 例如 : 工廠在哪裡 北中南東島 各縣市 各家工廠 2 連接 URL: 此按鈕將可連結至其他網頁 例如 : 幸福任意門– 超連結至 facebook 粉絲 相片簿 3 顯示摘要 : 此按鈕無下一層資料 , 點此按 鈕 直接顯示摘要內容 4 youtube 影音列表 : 內容顯示 youtube 帳號內 所有上傳過的影片內容
38
美化按鈕 - 加上圖片 返回第二層內容資料管理，選取編號 1 ：觀光工廠輔導計畫之「圖示」修改， 此為按鈕圖片編輯位置，請點選「選擇檔案」選取電腦繪圖軟體設計剪裁之 圖片，縮圖尺寸寬 320 x 高 120(JPEG) ，點選確定即可
39
填入按鈕主題名稱及內容 ( 文字 ) CmorePaaS 後台 手機 App 前台
40
填入按鈕主題名稱與內容 ( 圖片 ) CmorePaaS 後台
1
1
手機 App 前台
2
2
內容插入圖片
41
摘要內容 - 上傳圖片 ( 個別上傳 ) 2
摘要內容的圖片上傳 1. 圖片先處理壓縮 2. 圖片寬度 300 x 等比例高度 3. 圖片大小在 200KB 以內
手機 App 前台
42 42
摘要內容 照片批次上傳 - 上傳圖片 ( 批次上傳 )
照片批次上傳 : 此功能上傳照片數量為 一次最多 10 張，超過請 分批上傳照片。
43
摘要內容 - 插入表格 寬度 : 最大 300
插入表格
表格
44
摘要內容–文字變成超連結方式
2
1 3
45
文字超連結 - 內容點選文字自動開啟新的瀏覽頁面
46
摘要內容 - 影音嵌入 資料來源 : Youtube 這群人 TGOP│ 淡定的最高境界 Dan Ding Black Tea's Climax
網址 http://youtu.be/wwHbMrZ-tZ0
嵌入程式碼 <iframe width="560" height="315" src="http://www.youtube.com/embed/ww HbMrZ-tZ0" frameborder="0" allowfullscreen></iframe> 47
點選『摘要』編輯欄–原始碼 點選原始碼 貼上 Youtube 程式碼 修改 width=“300” height=“200” 點選原始碼 確定修改 * 修改寬高 width=“300” height=“200”
嵌入程式碼 <iframe width="560" height="315" src="http://www.youtube.com/embed/ww HbMrZ-tZ0" frameborder="0" allowfullscreen></iframe> PC 尺寸 : 560X315 要修改為 手機尺寸 :300 x 200
48
影音嵌入完成
49
『撥打電話』功能鍵 於 CmorePaaS 後台『內容資料新增 / 修改』， 於「電話」欄填入電話號碼 於手機 App 顯示的電話號碼將具撥出功能。
50
CmorePaaS 後台設定 App 功能按鈕 – 『導航』 與『 地圖』 於 CmorePaaS 後台『內容資料新增 / 修改』： 點選「開啟地圖」，按鈕將另開一視窗，輸入地址 或關鍵字地標，則系統將找出經緯度，按「送出」。
51
App 功能按鈕示意 – 『導航』 與『 地圖』 觀光工廠 App 工廠在那裡 北部 桃園 Taoyuan 巧克力共和國 為例 功能按鈕 : 電話、分享、導航、商家地圖、 QR Code
52
3 張圖片顯示模組 CmorePaaS 後台，內容資料修改左下方 : 展示圖片。請先準備好 3 張橫向圖片。 400( 寬 )X300( 高 ) ( 若是直立 JPEG 請調好比例以免影像變形 )
CmorePaaS 後台
手機 App 前台
1 1 2
2
3 3
53
跑馬燈管理
54
跑馬燈管理
左右兩邊資料填入 方式
55
跑馬燈管理
連結方式 : 藍色字是網頁連結， 黑色字是跳出訊息資訊
56
跑馬燈管理 - 顯示方式 網頁連結
訊息資訊
57
首頁圖片管理 登入 App 的首頁圖片範例
58
首頁圖片管理
59
首頁圖片管理 顯示畫面 : 點擊手機桌面 App icon 小圖時， 進入 App 的首頁圖片
圖片尺寸 : 480( 寬 )x800( 高 )
60
資料建置工作區 - 首頁按鈕功能 版型選擇
61
版型設定 版型選擇 『版型』 : 版型 1~ 版型 10 與自訂版型
62
頁首修改及頁尾修改 『頁首修改』、 『頁尾修改』 : 屬版型 1 ~ 版型 10 範圍使用
63
修改 SEO title 修改 SEO title( 左上角瀏覽器標題名稱 )
64
自訂版型 • 第 1~5 層均可使用自訂版型 • 自行設計圖片風格 •圖片格式 : jepg 、 png 、 gif •圖片尺寸 : 480( 寬 )x800( 高 )
65
自訂版型 – 上傳自行設計圖片 480( 寬 )x800( 高 ) (1) 版型選擇 (2) 自訂版型設定 ( 全螢幕 )
1
(3) 選擇檔案 jpeg (4)upload 上傳 (5)Accept
2
3
4
5
66
上傳完成 – 如何框出按鈕位置 第 1 步：在 image 圖片上框出要的範圍 第 2 步：在 Image map areas 區域貼上右邊連結到 Href ，有 +- 圖示可以做增加及刪除 第 3 步：移到最下方有確定鈕送出。
1
2
2
1
67
APP 下方功能鍵，可自行設計 2 1.
1. 按「 APP 功能連結」 2. 即顯示「 APP 功能鍵的連結命令字 串」 , 有 6 個功能鍵 : 上一頁、下一頁、 回首頁、我在哪、 QR code 、關於我 3. 利用「自訂版型」的方式 , 把設計好的 功能鍵圖片 , 框好座標 , 並把功能鍵命 令字串填在 Href 旁的空格
3. 68
預覽畫面 – 電腦上 1. 請於 CmorePaaS 右上方點選『版面預覽』 2. 請於 Google Chrome 瀏覽器上輸入 http://paas.cmoremap.com.tw/ 帳號 3. 若於 CmorePaaS 後台有做任何調整 / 新增 / 刪除，預覽時請按 F5 重整
69
CmorePaaS HTML 嵌入與 URL 外連範例
70
嵌入 HTML 範例 APP 範例 : 宜蘭龜島 .com http://paas.cmoremap.com.tw/mcuis100http://paas.cmoremap.com.tw/mcuis100
Android APK 下載 QR Code
71
範例 : 宜蘭龜島 .com Google Chrome 瀏覽器 http://paas.cmoremap.com.tw/mcuis100
72
社區即時 - 留言版 手機前台
CmorePaaS 帄台
73
範例 : iFrame <p><span style="color: rgb(255, 0, 0); "> 如無法顯示留言畫面請先按重新整理 </span></p> <p><iframe frameborder="0" width="290" height="300" src="http://community.twbbs.org/modules/t ad_cbox/index.php?mode=box&amp;twh= 290" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#ababab 1px solid;" id="cboxmain"></iframe><br /> <iframe frameborder="0" width="290" height="110" src="http://community.twbbs.org/modules/t ad_cbox/post.php" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#ababab 1px solid;border-top:0px" id="cboxform"></iframe></p> 74
(iFrame 嵌入 ) 社區數位 - 電子書 - 實用 + 文學 手機前台
CmorePaaS 帄台
http://paas.cmoremap.com.tw/mcuis100/index.php?id=1&id2=1&slat=24.7749 75 22&slon=121.04497599999998#../pda_1_4.php?t1id=23&maid=mcuis100
範例 :URL 外連 APP 範例 : 『古都餐廳』 Google Chrome 瀏覽器 http://paas.cmoremap.com.tw/ydutest1
Android APK 下載 QR Code
76
App 範例 : 古都餐廳
Google Chrome 瀏覽器 http://paas.cmoremap.com.tw/ydutest1 手機前台
CmorePaaS 帄台
77
手機前台
CmorePaaS 帄台
78
CmoreIFTTT 使用者情境設計
79
設定 IFTTT 管理 IF This 按 接近手機 GPS( 經緯度 ) 進入 / 離開範圍 加速度 亮度 手機直橫置 指北針 時間
Then That 嗶嗶聲 閃光燈 URL 超連結 震動 導航 打電話 訊息 播放聲音檔 (mp3) 推播 文字轉語音 80
IFTTT 使用者情境設計 ( 範例 )
自動執行 : ◎ 接近手機 ----> 播放 mp3(fever) ◎ 手機直橫置 ----> 訊息 (How have you been?) ◎ 加速度 ----> 播放 mp3( 印尼話 ) 81
溝通智卡
( 明新科大 - 服管所 )
82
『 IFTTT 情境設計』工具按鈕使用
83
IFTTT 命令字串連結
新增 IFTTT 主題， 只有 IF 『按』才會有命令字串的 產生 , 其餘則會自動執行。
84
IFTTT 情境設計 IF This 指北針 手機直橫置 GPS( 經緯度 ) 進入 / 離開範圍 加速度 亮度 接近手機 按
Then That 嗶嗶聲 閃光燈 URL 超連結 震動 導航 打電話 訊息 播放聲音檔 (mp3) 推播 文字轉語音
時間
85
IF GPS 進入 / 離開地址範圍 Then 發訊息 Cmorepaas 後台
智慧型手機 App
86
IF 加速度超過 ?? 值 Then 播放聲音 mp3 Cmorepaas 後台
智慧型手機 App
87
IF 指北針 (+/- 角度 0-360 度 )Then 震動 Cmorepaas 後台
智慧型手機 App
當手機指往北方左右 10 度範圍時 手機將會震動
88
IF 手機直橫置 ( 橫置 / 直置 ) Then 播聲音 mp3 Cmorepaas 後台
智慧型手機 App
89
IF 亮度大於 ? 值 THEN 發訊息 Cmorepaas 後台
智慧型手機 App
90
IF 亮度大於 / 小於 ? 值 THEN 閃爍 Cmorepaas 後台
智慧型手機 App
當手機外在光線亮度 <30 時 手機閃光燈將會閃爍
91
IF 接進手機 Then 打電話 Cmorepaas 後台
智慧型手機 App
92
IF 時間 THEN 嗶嗶聲 Cmorepaas 後台
智慧型手機 App
當手機在 2014-06-11 下午 14 點時 手機會發出嗶嗶聲
93
IF 按 THEN 文字轉語音 Cmorepaas 後台
智慧型手機 App
94
推播管理
建立推播內容
設定推播時間 ( 下拉式 )
95
自訂版型 1
1
1 2
1. 此處若是要使用 IFTTT 功能 滑鼠框選 JPEG 圖片按扭位置 將 IFTTT 命令字串複製與貼上 ( 托拉無效 ) 至右方 Href 位置
1 2
2. 若按鈕點選要連結至下一層 / 頁 滑鼠框選 JPEG 圖片各自按扭位置 將選項資料內的 URL 複製與貼上 ( 托拉無效 ) 至右方 Href 位置 96
App 設定與打包 APK 點選 App 設定按扭 填入 App 名稱、作者 / 公司、 E-mail 、電話 App icon 圖 128x128.png 關於我 簡介說明 點選打包按鈕
97
長茂科技聯絡人 電話 : 03-5642062 鄭孟尚 Ariel 分機 507 ariel@emt.com.tw 沈佩真 Kaylyn 分機 325 kaylyn@emt.com.tw
有問題最好用 email, 並且截圖給我們 !