iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 2
0
Modern Web

30天快速上手 Meteor - 使用 Universal JavaScript Framework 開發即時聊天大平台系列 第 2

Day01:初探 Meteor

此一系列文以 macOS 為開發環境,使用 Windows 的大大請搭配官方 guide 服用 (https://guide.meteor.com)

安裝

$ curl https://install.meteor.com/ | sh

安裝完成的畫面:
https://ithelp.ithome.com.tw/upload/images/20171220/20104727T8cb1kt3Wt.png

經典的 Todo List 範例

執行

安裝好之後,我們先 clone 官方的範例,並且試著將這個專案跑起來:

$ git clone https://github.com/meteor/todos
$ cd todos
$ meteor npm install
$ meteor

meteor 等同於 meteor run,如果當前目錄為一個 Meteor 的專案,便會自動執行。當看到以下畫面就代表成功跑起來了:

https://ithelp.ithome.com.tw/upload/images/20171221/20104727xib1Hj8J1W.png

我們可以到瀏覽器再次確認:
https://ithelp.ithome.com.tw/upload/images/20171221/2010472711wTMoOBqk.png

不過是個 Todo List,有什麼特別的嗎?

除了具有帳號登入以及多國語言等功能(這些功能只需要一點點的程式碼就可以完成),而且這不僅僅是個 Todo List,還是個“多人即時”的 Todo List,各位可以試試看開啟兩個瀏覽器視窗,分別代表不同的使用者,在其中一個視窗進行新增、修改、刪除的動作,另外一個視窗會即時更新最新的狀態,完全展現了 Meteor 的 reactivity。

專案架構簡介

這個專案包含許多資料夾與檔案,大概說明一下主要的幾個:

  • client: 前端(瀏覽器端)的程式碼放這邊
  • server: 後端(伺服器端)的程式碼放這邊
  • imports: 在專案初始執行時,這邊的程式碼不會被載入,只能透過 import 在執行時期動態載入
  • resources: 部署成 mobile app 所需的 icon 和讀取畫面的圖片放這邊
  • mobile-config.js: 部署成 mobile app 所需的設定檔
  • i18n: 翻譯設定檔放這邊
  • test: 測試程式碼放這邊

明天將會先介紹 Blaze - Meteor 預設的前端框架的使用,敬請期待喔!


上一篇
Day00:前言
下一篇
Day02:Blaze/Spacebar 與模板基本使用
系列文
30天快速上手 Meteor - 使用 Universal JavaScript Framework 開發即時聊天大平台8
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言