免費資源

免安裝!Cloud 9 讓你打開瀏覽器就能寫程式!

免安裝-Cloud 9 讓你打開瀏覽器就能寫程式

身為一位程式設計師,是否常覺得一些開發環境實在是笨重又肥大呢? 或者覺得輕巧自由而且許多前輩們愛用的 VIM 或 EMACS 難以駕馭? 這裡有一款你只需要準備好對應的環境,你只需要開啟瀏覽器,就能開始寫程式的工具,它叫做「Cloud 9」!

簡介

Cloud 9 是一個開源的網路專案,它採用目前很熱門的 Nodejs 技術作為整個整合開發環境的核心,執行速度、擴充性以及操作使用都與目前眾多的開發環境相似,且啟動速度更快,更為便利。

這套軟體有別於一般整合式開發環境(IDE),它的官方網站就有提供給你直接使用,你完全不需要安裝即可用瀏覽器編寫 JavaScript、nodeJS、PHP、Ruby…等程式語言,等同於擁有一個雲端版的專屬編譯環境。

特色

  • 免安裝
  • 程式碼高亮顯示
  • 自動完成選項
  • 有中斷點可設定
  • 可與 GDB (GNU Debugger) 配合
  • 可直接於網頁中使用終端機
  • 終端機支援複製貼上

值得一提的是,Beaglebone Black 這個單板電腦內建這個極為友善的開發環境。

註冊

前面說過這是一個的雲端版的編譯環境,也就是說,你必須要註冊一個帳號才能夠使用他的功能。直接點選此處進入申請畫面。

Cloud9 註冊

這邊可以選擇申請一個獨立的帳號或是選擇用GitHubBitbucket帳號來作為登入的帳號。

若選用的是獨立帳號的註冊方式,註冊完成後會寄一封確認信到你填寫的信箱中。

Workspaces

Cloud9 Workspaces

註冊完成並登入後,進入的就是這個畫面。這邊會列出你所建立的 Workspace,也就是你所建立的每個專案。

左邊 Menu 的部分還有另外兩個選項,分別是 Shared With MeRepositories,前者是與他人共享的專案,後者則是來自你其他放於網路上的專案,例如 GitHub、Bitbuckket 等。

免安裝!Cloud 9 讓你打開瀏覽器就能寫程式!

建立新專案

Cloud9 建立新專案

Workspaces 點下 Create a new workspace 進入建立畫面。

Cloud9 建立新專案

在這個畫面中填入名稱等資訊後,還可以選擇是否為一個公開的專案,但這邊要注意的是,免費版本只能建立一個私人專案

Choose a template 這部分是讓 Cloud9 知道在為你建立虛擬機器時需要預裝什麼套件,如果你想要手動去建立環境,那就選擇 Custom 就行了。這裡以 Custom 為例。

小提示: Cloud9 所建立的專案都是一台全功能的虛擬機器,作業系統採用 Ubuntu,這意味著你可以在上面裝設任何測試環境,但有容量限制。你可以從稍後的環境中看到細節的資源限制。

環境介紹

建立好第一個專案後,就會進入到主畫面,簡單的區分成五個區域:左邊欄、資源使用率、工作區域、終端機、右邊欄。

Cloud9 環境介紹

再來,把目前這個歡迎檔案關閉後,會有一個歡迎畫面,在這邊可以簡單的設定整個工作環境。

Cloud9 環境介紹

資源使用率

右上角的資源使用率可以點開來檢視細節資訊,也可以讓你調整虛擬機的記憶體大小與磁碟容量,不過此項功能需要付費升級才能使用。

Cloud9 環境介紹

終端機

Cloud9 Terminal

終端機算是 Cloud9 中頗為重要的特色之一,它允許你在這台虛擬機器中下任何 Linux 的指令,所採用的作業系統為 Ubuntu,因此你可以使用 Ubuntu 的指令來操作。

Cloud9 Terminal top

在 Terminal 執行 top 指令。

Cloud9 Terminal vim

還有 vim !

基本的環境差不多就這樣,接下來講一下右邊欄中的兩個有趣功能:協作區、除錯器。

右邊欄:協作區

Cloud9 右邊欄:協作區

若你有邀請你的夥伴一起開發的話,在協作區中你會看到他的名稱,你可以對他做一些權限的控制,同時你們也可以在這個區塊中以文字溝通,就類似聊天室那樣的功能。

右邊欄:除錯器

Cloud9 Debugger

如果你所撰寫的程式有被 Cloud9 的 IDE 所支援的話,在你按下頂端的 Run 按鈕後,這個除錯器便會顯示出相對應的資訊,包含堆疊、變數內容、中斷點等。

第一支程式

因為我們選的是 Custom 的關係,所以並沒有安裝其他的侏儒 PHP 的環境,所以我們以一支 C 語言所撰寫的 Hello, World 為例。

請在左方檔案樹的資料夾上按一下右鍵開新檔案。

Cloud9

命名為 hello.c

Cloud9

雙擊檔案後便會在工作區域中開啟。

複製以下程式到檔案中。

CTRL+S 儲存檔案

Cloud9

按一下 Run 按鈕。

Cloud9

便會在下方看到執行結果。

Cloud9

到這邊,Cloud9 就算是介紹完了,而它不只有這些功能,從官方給的手冊中,它還能建立更為完整的測試環境,包含基本的資料庫等等,詳細的內容你可以參考官方文件

另外是,官方也很貼心的錄製不少教學影片到他們的 YouTube 頻道中,有興趣可以點開來看看。

在〈免安裝!Cloud 9 讓你打開瀏覽器就能寫程式!〉中有 5 則留言

  1. 您寫的很清楚,感謝分享,想請問您使用的秀程式語法外掛是?? 感覺非常優雅!!

    1. 啊,抱歉,我忘了修改文章。

      Cloud9 自從被 Amazon 收購後,就需要填信用卡才能使用了。

您的見解

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料