Categories: 免費資源

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

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

簡介

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

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

特色

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

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

註冊

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

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

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

Workspaces

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

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

建立新專案

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

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

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

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

環境介紹

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

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

資源使用率

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

終端機

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

在 Terminal 執行 top 指令。

還有 vim !

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

右邊欄:協作區

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

右邊欄:除錯器

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

第一支程式

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

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

命名為 hello.c

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

複製以下程式到檔案中。

#include <stdlib.h>
#include <stdio.h>

int main(int argc, char *argv[])
{
    printf("Hello, World!");

    return 0;

}

CTRL+S 儲存檔案

按一下 Run 按鈕。

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

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

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

duye.chen

View Comments

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

  • 現在按註冊 要有信用卡號給他勒 是我選錯類別嗎?

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

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

Recent Posts

[教學] 打造你的 NFT 智能合約 – ERC721A

GM!前些日子在幣圈亂玩,一路...

2 年 ago

JavaScript – Singleton 設計模式

前言 在設計程式時,我們有時會...

3 年 ago

PlaidML 讓你的 Mac 也能加速 Tensorflow 機器學習!

相信很多使用 Mac 或者手上...

3 年 ago

RESTful API 測試很煩,只好動手寫屬於自己的測試了

寫在最前面 嗨,大家好久不見!...

3 年 ago

Node.js 與 Socket.io – 即時聊天室實作:資料庫

經過前兩篇(一、二)文章,我們...

6 年 ago