DAN Armendariz環:您好,歡迎光臨 一個CS50研討會定制雲9, 和CS50 IDE。 所以今天我們要 剛才講一點點 一些的 技術信息 那張架構背後 雲9,以及如何 我們已經實施了一些插件 作為雲9的一部分提供CS50 IDE。 因此,讓我們只跳權和 開始談論插件。 因此,插件是真正的 的雲9經驗的核心。 雲9是底層技術 它提供給我們的IDE, 而且終端窗口處 底,隨著workspace-- Ubuntu的workspace--我們 用它來編譯所有的項目中 並執行我們的習題集, 完成我們的習題集。 但在所有的心臟 這一點,所有的技術 其實只是一堆插件。 一切都是一個插件 可以修改的, 擴展,您可以創建 你自己的插件, 你可以刪除其他 插件,要真正改變 相當多的功能 現有雲9 IDE。 因此,這是現有 雲9環境。 這其實只是 默認雲9環境。 而看看實際如何 距離CS50 IDE不同。 所以這是CS50的IDE。 請注意,有一些視覺 正規雲9之間變化 環境和CS50的IDE。 具體來說,您會 注意到一些改動。 首先,有少 菜單項開始。 實際上,有一種方法 你可以改變這種狀況。 這就是所謂的簡單模式。 默認情況下,簡單模式使能, 它簡化一些菜單項。 它消除了一些 更先進的, 因為坦率地說,很多 被進來的學生 也不需要知道一些 更高級的功能 是不是不知所措 有一堆選項。 但是,我們確實提供採取的能力 關閉那些所謂的培訓輪 並刪除 腳手架使人們 可以變得更習慣 IDE的高級功能。 馬上到 正確的說,有 還一個調試按鈕,這 在標準濁 9環境下簡稱為運轉。 但默認情況下,我們已經配置了 在CS50 IDE調試按鈕 把調試器, 自動編譯源代碼, 連接調試器 到底層GDB-- 而因為這是運行執行 所述debugging--和一些其他步驟 為好。 此外,在終端窗口 very--或者說終端 在在控制台部分標籤 在屏幕的最底部窗口, 更名為僅僅是終端。 而標準中 雲9環境下, 它實際上顯示了 運行的應用程序。 這樣一來,它簡化,再次, 圖形用戶界面,只是一點點。 我們還增加了一些按鈕 到IDE的右上 顯示一些基本信息 關於底層的實例。 同時,我們已刪除了一個 對項目的選項 從最右邊。 因此,所有的這沒有實現 通過修改一定是雲9 源代碼,但 而是通過一對夫婦 那我們已經實現插件 在過去一年左右的時間。 和雲9先後主持和有 在CS50工作區運行。 或者說,在工作區的 被指定為CS50的IDE。 因此,其實這是最主要的區別 雲9和CS50之間 工作區。 還有,在底層 例如,主變化是 我們安裝一些 預配置的項目,如GDB, 和其他一些基本的東西, 我們已經創建,像更新50, 和幾個其他步驟,使 整個過程有點多 統一。 但總體而言,這僅僅是一個 現有系統的修改 雲9為我們創造。 我們要去 展示一下後 是如何實際創建 有些基本的插件, 使我們能夠將東西放到了 菜單系統,開闢了對話。 如果我們有足夠 一次,我們將實際 看看我們如何能夠填充該 有一些信息的對話 從底層的實例。 為了讓我們獲得該 點,讓我們先說一下 關於雲9的架構。 所以,我們正在使用的方式 與雲交互9 完全是通過客戶端。 我們打開一個網頁瀏覽器, 我們鍵入CS50.io. 我們最終的認證後, 都帶有IDE中。 但要意識到有 幾個步驟 實際上讓我們這一點。 的第一件事是, 我的客戶端,web瀏覽器, 根據要求和認證後, 加載GUI和插件 從一些CDN,從一些 內容分發網絡。 這可能是坦言任何地方。 這實際上是獨立的 從底層的實例。 重要的是要認識到,這是很重要 實際上只是一堆靜態文件。 這是一堆的JavaScript 即從CDN下載 在我的網頁瀏覽器, 所有的圖形用戶界面,你 看到這裡 - 這真是key-- 所有的圖形用戶界面,你看這裡 運行在客戶端。 你看到的一切 在雲9工作區 實際上,在瀏覽器中運行。 和任何你發 跟著下面的實例 而與實例 沿著這第二個獨立的通道, 然後被保存到 該泊塢窗實例。 所以,我要說的原因 這是一個碼頭工人的實例 是,基礎技術 不使用虛擬機, 而是用一個 所謂的泊塢窗技術, 這基本上allows--最接近 比喻是一個虛擬機。 但它是微妙的不同 在存在 大量的機會來運行 不同的泊塢窗組合 在一台機器上的實例。 並且可以將它們起轉 在很短時間內連續。 這是不太更多 嚴格分化 不同的泊塢窗實例之間 因為有在虛擬機, 但還是有很多的 分化和分離 這些不同的實例之間。 好。 所以這兩個步驟這裡 是重要的,實現 是,當我們去CS50.io,我們 下載GUI和插件, 這是用JavaScript編寫的,在 到瀏覽器或瀏覽器。 這也許是一對夫婦 兆字節的信息價值。 在這一點上,一旦GUI具有 裝載和插件已經開始, 然後它開始進行通信 泊塢窗實例,不 一定必須是相同的服務器。 現在有一個例外。 實際上,我們可以有兩個 交付機制GUI本身 而在泊塢窗實例 在同一台服務器中,這 其實事情,我們做 雲9的離線版本。 這並不是說我們已經什麼 宣傳非常今年秋季, 但我們也有一個 離線版本 允許您下載一個打包 版本的所有這些事情的 並允許您運行雲 9在脫機環境。 移動這一關雲和到 本地機器有一定的影響。 特別是,你沒有 再有能力 分享您的工作空間與其他人。 您不再可以打開雲從9, 和CS50 IDE,從任何計算機 並看到相同的文件 你正與之前。 但是,相反,它的工作原理完全 您自己的本地機器上 而無需訪問互聯網。 但還是即使在這種模型中,即使 儘管我們有一台虛擬機 這實質上是 運行這些東西。 我們有一個單獨服務器, 提供基本的雲9 內容,然後我們 有一個碼頭工人的實例 即負責傳達 與IDE的後端。 好。 因此整個GUI被寫入 完全在JavaScript 使用的Node.js和雲9 SDK, 我們會得到在短短的一分鐘。 和所有的插件 是在客戶端運行。 所以,讓我們關注則 假設點點 這個第一步驟具有 其實成功完成, 只有看這個泊塢窗實例。 因此,在這種情況下,這 是標準的方式 想這樣做雲9插件 發展是,你會 要編寫代碼,將 可以在用戶的瀏覽器中運行, 你有機會 使用一些API進行通信 與基礎搬運工實例, 運行一些代碼在那裡,做任何事 你可能想這樣做。 因此,這將是 的背景下,我們將 要使用這個談話的其餘部分。 而只要保持這種模式的初衷。 這將是非常重要的 在短短幾分鐘的時間。 有一對夫婦的 聯繫我想告訴你。 首先,雲9提供 相當多的文檔 這是相當不錯的,它展示了如何 做基本的插件開發。 所以,如果你去這個網址, cloud9-sdk.readme.io, 你會看到的文檔存在。 而大量的信息 你將會看到 還可以找到,加上更多。 您還可以找到開源 版本雲9在這個網址, github.com/c9/core,這是我們作為使用 的IDE的離線版本的一部分, 這樣你就可以有 同樣的雲9經驗, 但在離線方式。 好吧。 因此,讓我們來看看一個 實際的雲9工作區在這裡。 再次,我想點 出了幾件事情。 這是,就在這裡,一個正常的CS50的IDE。 而且我已經禁用的少 在查看菜單舒適模式 這樣我可以看到所有 的菜單選項。 我想什麼來告訴你正確的 現在是幾件事情。 首先,如果我進入 首選項,然後 點擊插件管理器, 並輸入CS50在這裡, 我們可以看到,有,實際上 幾個CS50插件 已安裝和我們的運行,以 讓我們已經修改 看到了CS50 IDE。 現在有本質 兩個插件運行。 有一個叫簡單,這 為簡化模式 讓您減少數量 沿頂部的菜單選項, 並此所謂的 不舒服的模式。 再有就是還CS50統計, 但這可能只是稍微名不副實。 因為這是 說明你的信息 關於底層的工作空間。 它注入這些按鈕 沿右上方。 它也注入了一個菜單項進入 窗口項,進入窗口菜單 在這裡,CS50 IDE信息。 而且它是負責實例 這一對話,我們在這裡看到, 與所有我們的信息 見慣了CS50的IDE 工作區。 好。 所以實際上多了一個插件 我們已經開發了為好。 還有一對夫婦別人說 我們也還沒有公開發布。 但其中有一個是整體 插件,可以讓GDB的功能。 所以,雲9的一個方面 是,他們已經提供 該GUI實現一個調試器。 和插件的一個 我們已經創建了基本 鉤GDB該GUI 基於版本的調試器。 而且是負責調解所有 一個用戶可能具有的請求, 跨過或間 創建斷點或任何 沿著這些線路,以把這一 到GDB能夠理解的命令, 發出這些命令GDB。 而一旦GDB 發出一個響應,然後 我們理解這一點, 更新GUI是必要的。 這可能是一個 的更複雜的 插件,這樣反而就是我們的 要著眼於今天其實是在 該統計插件,我們將討論 有關簡單一點點,也是如此。 所以,我前面提到的,我真想 做出非常,非常清楚,一遍, 所有這一切,我們是 這裡看到的基本上是 操作在客戶端。 我們確實看到一個終端窗口 下面,而且,當然, 如果我們輸入命令進入 即,將隨後發表 到底層的實例。 同樣,如果我們打開一個新文件,並 鍵入一些東西進去,並將其保存, 該文件將保存在 底層的實例。 但編輯器本身,這 終端窗口本身, 在所有實施 JavaScript和是所有插件 我們可以互動, 因此,修改。 有很多可擴展性在這裡。 我建議考慮看看 在雲9的GitHub的賬戶 看到的大量的 插件可用, 和公正如何寫了很多 代碼是可擴展性。 所以,有什麼東西 我想提一下 關於這個問題,以及,這是 有很多of--有 很多功能,是 在首選項中提供 窗口,我們已經看到了剛剛 提到剛剛幾分鐘前。 有一件事我們可以做的IDE 開發人員,或雲9開發者, 是真正注入一些 我們自己的偏好面板。 因此,簡單的模式,或 不太舒適模式, 並且還IDE的信息, 或統計插件, 有每個一些偏好 面板,讓我們修改 每個那些的行為。 你會發現,如果我去了 首選項,進入用戶設置, 有一個CS50選項卡,一是 上面寫著IDE信息。 我可以改變 信息刷新率。 實際上,發生了什麼 在統計插件 的是,每第n秒,其中 正秒被這個喜好定義 面板,信息被獲取 從底層的實例,被送到 返回到客戶端側, 插件是那麼 解釋信息 從底層實例 和更新的GUI是必要的。 我們可以看到,現在它被設置 到30秒,這是默認的。 但我可以肯定地改變 如何迅速發生這種情況只 通過修改這個值。 現在,人們的有趣的事情 是,這首選項面板,圖形用戶界面, 真的只是一個GUI版本 大量的基礎設置 這列於JSON。 所以,如果我走了,例如,在 CS50 IDE菜單,或雲9菜單, 根據哪個 你看的版本, 並轉到其中之一 settings--在這種情況下, 該項目settings--的 在這種情況下,項目設置 適用於所有的設置 這一個工作區。 而用戶設置應用 所有的工作區 你可能在你的帳戶。 因此,正如順便說一句 在這裡,要特別清楚, 有之間的分離 2因為雖然在默認情況下,我們 有一個工作區,其中 是CS50的IDE,如果你 要點擊你的小 分身在這裡,去儀表盤, 你會發現,你其實可以 創建額外的工作區也是如此。 在這裡你可以看到,我確實有 一個IDE 50的工作空間,並且還 對本目的 研討會上,一個工作區 所謂的工作區,這是在這裡。 所以無論如何,我有不同的偏好。 這些每個人可能有 單獨的項目的偏好, 但用戶偏好 在所有我的工作空間的共享。 順便說一下,這是 如果你也很方便 要創建一個工作區 不同的自定義選項。 而且它非常方便 創建一個新的工作區。 並選擇一個可能是 被預先配置以某種其他方式, 也許對於PHP具體而言, 或者Django的明確。 甚至只是習慣。 在CS50的工作空間 模板是一個我們 使用自動安裝 更新50和所有的設置 我們已經在那裡,包括所有的 插件,我們已經為CS50 IDE。 好。 但是,讓我們回過頭來此。 如此反复,也有項目 設置,這些是那些 我們正在考慮在這裡。 並注意有 一堆的設置, 其中許多對應的偏好 面板,但不是所有的人。 但是我們可以看到,在這裡,在this--哦 沒有,沒有,我把它在用戶設置? 也許我把它放在用戶設置。 而這一點,在這裡我們去。 在用戶設置,我們可以 看到我們有一個CS50部分, 並且這是被寫入 通過這些雲9插件 我們已經實現。 有簡單的一個 與簡單的插件對應, 而統計其中一個 對應於基於該GUI的 版的首選項面板中。 刷新率,在該 情況下,被設定為20秒。 這一切,我們希望, 一些信息開始 我們將在一點點實際看到 更詳細一點,暫時。 好。 因此,讓我們說,我們要 實際上著手進行。 我們知道所有的東西, 這是發生在客戶端 實際上是在瀏覽器上,做了這 意味著任何插件,我寫的 將要被寫入 在考慮到瀏覽器中。 如果我真的想這樣做 在工作​​區中任何東西, 我或許將不得不啟動 某種溝通 瀏覽器之間和 工作區,以確保 這實際上是完成了。 但是,讓我們現在說, 我想坐下吧 而實際創建我的第一個插件。 那麼,這樣你就能夠 要做到這一點其實是很容易的。 它給在雲9 SDK。 但它把你的 現有工作空間的名稱, 是,你必須在頂部的網址 你的酒吧,並添加以下到它。 ? SDK = 1&德巴= 2。 現在是什麼這是要實現的 該SDK = 1將實際設置SDK 模式為真,這將使 有一些其他的東西。 和調試= 2將允許的錯誤信息 要多一點冗長。 所以,如果你帶了JavaScript的 控制台在您的Chrome開發選項卡, 你居然能 看到很多的更多信息 比你,否則。 所以我建議轉向這兩個 就在同一時間,因為它確實 是非常有用的有這一切 附加信息。 但必須注意的,這一點很重要 打開調試到2的值 意味著它是非常 囉嗦了,它實際上 將在一定程度顯著放緩 你的IDE,特別是當加載 或什麼時候做繁重的任務。 因此,只要記住這一點。 這對發展有益的,但​​你 可能不希望有它在所有的時間。 因此,讓我們真正做到這一點。 但在這種情況下,我居然有 已經建立了這樣的工作空間。 所以,讓我們來看看,SDK = 1&調試= 2。 一對夫婦插件 希望已經安裝。 好吧。 所以,現在,我已經打開了SDK調試 模式,請注意,我們是在調試模式下, 所以我們可以看一下開發工具看 任何錯誤,我會做屏幕外。 我們可以看到,有 一堆錯誤在這裡。 現在,它實際上是很常見 雲9有一對夫婦的錯誤, 我不會擔心 關於他們,直到你 看到的東西,可能會 具體到插件 你碰巧創造。 所以在這裡,舉例來說,我們得到 沒有發現一對夫婦的404s--。 我們認為我們無法加載一些 信息從底層的實例 本身。 而且還有一堆附加 信息,但大部分這種我們 實際上是忽略了現在。 因為這是相當 共同為一個工作區 有只是一對夫婦的錯誤。 好。 我打算把這個出 的方式,回到這裡。 而現在最簡單的方式,漂亮 關於有此開發商的事 啟用模式,它可以讓我 輕鬆創建一個新的插件。 所以,而在此之前我居然沒 提供這些新插件選項, 我們可以看到,如果我回去 我的非開發人員模式在這裡, 有沒有新的插件。 通過啟用的SDK模式,我 有一個新的插件可用 我可以很容易地創建一個。 在這種情況下,有一對夫婦 不同的選擇,簡單, 一個空的插件,一個完整的插件, 安裝程序,雲9捆綁。 讓我們只選擇一個 空插件現在 這樣我們就可以看到一個非常 簡單的版本之一。 現在注意沿 左邊那現在有 在收藏夾中的東西,這 被列出了幾個插件 這是目前提供給我。 如果我展開,我們將 可以看到這些。 現在,我希望你能注意到 這裡的東西,這 的是,這是不實際包含 工作區目錄中 我的基本Ubuntu的實例,但 它包含了硬盤驅動器上。 而在這裡,這是位於,因為 這是知道非常有用的, 特別是如果你要 做任何事情使用Git, 在那裡,這是位於 在.c9文件夾/插件。 所以,如果我去那裡,現在我們可以看到, 插件是在這裡的列表 列表中的插件匹配我 看到我的工作區的左側。 現在,在默認情況下,和 這是種奇怪的, 默認情況下,當我創建一個 新插件在工作區中, 它創建了一個插件,通過 默認情況下有下劃線的名稱。 一般認為可能 導致一些問題。 所以很下一步 我平時執行 只是刪除了 特定插件 只留下簡單的插件, 在那裡開始,plugin.simple。 這是唯一一個在那裡。 好。 那麼,這實際上是什麼樣子的? 那麼,這是再次, 一個JavaScript包 包括一些文件, 包括plugin.js文件,其中 的主要內容 我的插件所在, 一個的package.json文件, 這實際上規定 一些元數據,這個插件, 如作者是誰, 關於它,一個任何其他信息 插件,等等的描述。 而且在默認情況下,它 創建一個空白的README文件, 和一個空的測試文件為你 創建一些額外的文件, 和測試工具,如果 你想做到這一點。 那麼就讓我們來看看第一個時, 很快,在的package.json文件。 這是很容易,只是通過 並填寫本領域 你將要填寫,如 它提供了一個名字,給一個說明, 迭代版本號 每隔一段時間,提供 作者為每 人的貢獻, 將它們添加到貢獻者 部,並在此你休息 可以非常簡單,只是 離開,因為它是現在。 有一件事是 重要的是要注意, 說下plug-ins部分, 有一個叫插件密鑰。 和此相匹配的名稱 JavaScript文件名為plugin.js。 因此,這是雲9是如何知道,當它 讀此的package.json文件, 對JS文件,以實際加載。 如果我創建額外的js文件或者想 從插件重命名js文件, 我也必須改變它 在的package.json文件。 從觀眾的任何問題? 沒有。 有一個人是誰 跟我一起以下為止。 好。 所以,我實際上已經創建了一個 幾個插件已經, 我想,在這個工作空間。 因此,讓我們擺脫了其中的一些,加 SDK = 1&調試= 2,重裝該工作區, 讓如果我們看看 有那些插件了。 C9 /插件。 開始了。 現在,我們可以看到這個我C9 /插件 之一,我們有plugin.1和plugin.2。 因此,我們將只加緊the-- 只是增加難度的量 在這些插件。 但在這裡,如果我的插件創建一個新的, 我可以把它添加到我的收藏夾。 而我只是刪除這些從 底層的文件系統。 讓我們刪除。 現在,如果我打開我的第一個 插件,開放plugin.js, 我們可以看到這裡的根本 簡單的版本一個插件。 我居然回去 這個其他工作區 因為你至少可以在這裡看到的,是什麼 一個空白的插件實際上看起來像。 因此,引擎蓋下,這看起來 非常相似的稱為技術, 我認為,這是RequireJS。 注意,這並不 看起來真的,也許, 一樣其他一些JavaScript 我們可能已經看到文件。 但是,相反,有一對夫婦剛 基本路線,它實際上有。 所有這些東西是第一 由IDE解釋, 但它實際上不是 運行到指定的。 我會告訴你當 實際上意味著在短短的時刻。 但要注意的是,這裡有一個 main.consumes線2號線, 這列出了所有的插件 這個插件是依賴。 因此,在默認情況下,我們也許不會有 對其他插件的任何依賴關係, 但是當我們真正需要 取決於所提供的功能 其他插件的IDE, 我們需要列出這些插件 在main.consumes行。 然後,我們需要 其鏈接到代碼 下面,我會告訴你,在短短 一個時刻,我們如何能做到這一點。 Main.provides給出了 命名這個插件 其他插件可以 在他們的消耗行使用。 所以在這種情況下,我的插件 只是在該處設置在默認情況下, 我們應該改變這種狀況是 適用於我們自己的插件, 因為我們將看到在短短的時刻。 現在,這裡的功能 主,此函數main 實際上運行和解釋,但 它實際上並沒有做的非常多。 它只是得到的一切成立,但 它實際上並不啟動插件, 儘管名字聽起來像什麼。 這實際上是通過發生 的方法的序列 都包含在本插件。 所以,如果我向下滾動,我們可以看到 我們有一個生命週期,其中 在某些情況下稱為負載, 或某些事件稱為卸載, 一些事件實際發生。 這真是在這裡,其中的插件 開始這些方法被調用。 因此,讓我們更具體一點 關於這一點,我們來看一個例子。 所以在這裡為plugin.1什麼 我們基本上要做的事情 是創建一個菜單項 所謂的CS50研討會對話框1-- 因為我們有兩個 them--,我們要 將其注入到窗口菜單。 當我們點擊它,我們 要打開一個對話 向我們展示了一些非常基本的信息。 在這種情況下,僅僅一個世界你好。 所以這是一個非常簡單的 你好世界對話 我們可以實現 作為一個插件在雲9。 所以,讓我們來看看這實際上看起來如何。 我們將逐步通過它,只是 比較快,所以我們 可以看下面的插件也是如此。 請注意,我們在這裡 消費的各種插件。 我們消耗的對話 插件,命令,菜單和用戶界面。 貌似我其實很費時 對話兩次,這樣我就可以刪除。 並注意方式 我正在連接它們, 這是排序的元數據是在告訴 插件系統有什麼要求 實際上是必要的 這個插件加載。 同樣重要的是要注意, 已加載的插件的順序 不能保證。 但是,什麼是保證的是,如果我 在插件指定某些作為一項要求, 該插件將被載入 在此之前已裝入。 因此,這意味著,如果你的插件 要求所提供的一些功能 通過在IDE別的東西,你應該 請確保您的插件消耗 該插件,使得依賴 一定要創建的插件, 或者實例化插件,只 之後,現有的框架存在。 所以我在這裡所提到的 元數據的插件管理器, 哪些我要去消費。 而在主要功能在這裡, 我打算再連接 我的代碼對那些進口的插件。 所以我只是要 創建一些變量 相互匹配的那些的名字,這樣 我可以非常迅速地引用它們 在我的代碼。 我導入對話的原因 是因為我希望我的插件 充當對話插件。 這我能方式 當然這樣做是為了, 我的代碼連接到對話 插件通過導入它 然後通過指定由 創建一個新的對話變量 和連接到 原裝進口插件。 然後通過定義我 插件以一個新的對話。 因此,在初始化時,我 要定義我的插件。 而所謂的這個變量 插件,你會看到 只是用於一般 在整個雲9插件。 我要去實例化一個新的 與某些屬性的對話, 給它一個特定的名字,說它 用戶有可能將其關閉。 那它會顯示一個小x 在右上角, 或者在一個小按鈕 右下角。 我是否可以選擇文本 它,這種對話是什麼稱號 將是,依此類推。 現在,這只是定義了對話, 但它並沒有表現出來。 我實際上是定義 被顯示為它的行動。 再次,我鼓勵你 看看雲9 SDK, 因為有各種對話 但他們確實有據可查。 你可以看到不同類型的 有,並用它們 在任何插件,您的想法。 現在有將是一個 負載部分,和該負載 因為你還記得是功能 所使用的插件的生命週期 實際上實例化的一切 並做好一切準備就緒。 現在,當這個插件加載,我不 要立即顯示一個對話框, 因為這個插件將加載 隨著IDE的其餘部分。 當我加載的IDE,我不希望 對話自動顯示出來。 我只是想讓它顯示當我點擊 在我的窗口菜單項的菜單選項 我會添加到它瞬間。 因此,有兩個不同的步驟 這裡有發生。 我要創建一個 命令,該命令 將負責實際 表現出對雲9 IDE對話。 然後,我需要連接,我 要創建一個新的窗口菜單 項目,運行該命令。 所以,當我點擊該窗口 菜單項,該命令然後運行 因此,我的對話,然後顯示。 所以,這其實是一個相當 考慮這個問題的好方法。 因為第一我可以創建一個命令 他的名字是CS50研討會對話框1, 提供某種 一般上下文它。 這裡最重要的一點是, 注意到EXEC屬性,這 列出了將被調用的函數 在我的插件時運行此命令。 因此,這個命令是有點像 A--這只是一個任意雲9 命令是可用 任何雲9插件。 但實際的功能,它的 外出時運行此命令調用 是節目對話功能 在我plugin.js文件。 我們可以清楚地看到 這些插件的列表 是提供給我們的命令 首選項,滾動的方式down-- 讓我們來看看,其實我們現在看? 插件管理器,不,我想我 - 這是 肯定在這附近。 嗯,有命令列表 某個地方,但我必須有, 我忘了在哪裡。 這樣就OK了,我們會繼續前進。 好吧。 因此,我們有命令的列表 這是提供給我們, 而那些命令 這些只是亂雲9 運行特定代碼的命令。 因此,只要記住這一點,那 我們要運行顯示對話框 功能瞬間。 現在,當我真正想添加一個菜單 項目,我可以通過路徑添加該項目, 僅僅指定正是我想要 它是,窗口/ CS50研討會對話1。 在這一點上,我想 以創建新的項 要運行一個命令, CS50研討會對話1。 再次注意,這是雲計算 9命令我創建的正上方。 現在,我也想 創建一個小分, 所以我可以做同樣的 在隨後的線。 現在,你可能會注意到,作為 定義菜單項的一部分, 有一個數字 與之相關聯的哪個 實際上說的是哪兒 我想該菜單項是 位於菜單列表。 但是,你可能會注意到 我實際上並不 看不到任何數字與 這些菜單,默認情況下。 所以這是一個隱藏的小東西, 我們能做的,一點點改變我們的網址。 因此,除了SDK = 1&調試= 2, 我將設置菜單1-- 並希望它的菜單,沒有菜單。 噢,這是菜單= 1。 堅持住。 而我們將在重裝即見 IDE的是,我仍然在調試模式下, 但現在已經有數字 與所有的菜單相關聯。 這告訴你 數字到底是什麼 就是當你試圖注入 一些在此菜單系統的任何地方。 所以在窗口菜單,我可以 看到該項目45協作, 與之前第38項是安裝程序。 所以,當我想注入 這兩個之間的項目, 我只想選擇一個數字 這兩個項目之間。 所以,我選擇了41和插入我的講座 在該位置對話框1菜單項。 這就是為什麼這個號碼 此處出現的是41號。 這就是,該位置 在雲9菜單的菜單項。 現在同樣的,我想 創建一個除法 並添加它,以便有一個不錯的 這些菜單之間的分工 項目。 所以,我補充說,在位置43。 到目前為止,一切都很好,我希望? 所以,現在讓我們來實際看看 在顯示對話框中的特定代碼 這實際上是負責任的 打開此對話框窗口。 滾動下來,我看到,我想 有這項功能顯示對話框, 它是非常簡單的。 我要運行顯示 方法上的插件變量。 請記住,我們定義這 插件變量如上的對話。 所以酒吧插件,在這種情況下,這是 我們已經在內部定義的對象。 而且這將是一個新的對話 包含在此插件中。 因此,我們實際引用此 插件在很多地方變 在一個典型的雲9 開發環境。 我們會在這裡看到它。 請注意,當我們向下滾動, 有額外的生命週期。 所以注意到,這些響應 到被觸發的事件 通過這個對象,這種對話的對象。 默認情況下,有 裝載和卸載,這 可用於所有的Cloud 9插件。 但是,在該事件 這次對話,有 另一個事件,可以 火也被稱為 繪製,這是發射時 是關於屏幕被繪製, 在第一個實例 該對話顯示。 因此,當它實際上是 將要示出, 有將 向我們提供一些HTML。 而僅僅使用標準 HTML做法可能我們 注入一些很簡單的信息, 我們的Hello World,這一對話。 因此,如果我們再向上滾動,我們可以 看到事物然後遊行 ,它的發生。 首先,我們創建了一個雲9命令 當通過雲9執行, 將要觸發該功能。 這將運行該功能 所謂表演的對話,我已經 寫在我的代碼。 我創建了一個菜單項, 附加到它的相同的命令 當該項目被點擊 菜單,該命令,然後執行 並且該功能,然後運行。 而函數中,我 剛準備打電話the--我 只是要執行show 這個插件,的方法, 將要第一次調用 抽籤的方法,和去 觸發此方法向下跌破,則 畫事件處理程序,在我們的生命週期。 然後它會實際 顯示對話。 還有一個隱藏的方法,使 如果我需要機會隱藏 我對話,我可以做同樣的事情。 所以這幾乎是它 讓這一切工作。 請注意,是如果我們向下滾動 再有一個凍結公共API。 這基本上只是說,我 希望這些方法能夠有效 是公開的,但不是overwriteable 超出此插件的背景下。 及以下,在最底層, 也許是過去的事情 我們真正需要支付 備受關注到這裡,這 是我們要註冊我們 插件具有名稱C9研討會1, 和對象插件。 正如你可能還記得,是 該插件的插件 對象,我們已經確定 貫​​穿本源全部 碼。 和C9研討會1是 我們承諾字符串 以提供在頂部 的這一定義。 好。 因此,讓我們坡道它一點點 看看我們能做些什麼 一點點更有趣。 現在,這僅僅是如此之大。 我的意思是,這是,這是實際上是相當 待其冷卻的代碼,這樣幾行, 我們可以修改現有的IDE 並添加現有的菜單項 或添加新的菜單項,加 命令,並顯示一個對話, 而只是一堆 功能存在。 這真是很偉大。 不過,這並不做了很多,因為它不能 與下面的Ubuntu通信 實例。 所以我們可以說,我 其實想搞清楚 有關的一些信息 基本Ubuntu的情況下, 像的統計資料插件一樣。 因此,讓我們來看看一個 一點資料 有關統計插件如何在工作。 而事實上,這是非常與此類似。 你可能還記得, 有一個對話。 你可能還記得,有 有些信息是 只是沿著菜單欄沿顯示 頂部,它希望你現在 得到怎樣一番風味 我們實現了這一點, 只是在特定的插入菜單項 點,通過實例化一個對話 並顯示該對話。 但是,我們還沒有表現出 你如何,我們可以把它連接 在一個命令 底層Ubuntu的實例。 因此,讓我們來看看,然後在plugin.2, 這不正是這件事情。 我們要打開plugin.js, 這是該代碼。 但在窗口菜單中, 如果我點擊對話框2, 我們可以看到,它說,這 相反,你好CS50,這 不看所有的誘惑,對吧? 除非,看這個。 讓我改變的東西倒在這裡。 我會去我 工作區和變革研討會 說點別的,比如你好,丹。 我將其關閉並保存。 而現在我要重新運行 我對話的菜單項。 並且注意到它有 現在改了它說什麼。 你好,丹。 我似乎已經做了一些下跌 這裡的基本Ubuntu的實例 而不必操控任何 這又完全是運行的代碼 在客戶端。 因此,有明顯的某種 通信這是發生在這裡。 現在,這是一個很大的 雲9 SDK的力量進來, 是,在這個plugin.2, 我們實際上會導致 調用發生在 底層的實例, 並運行一些任意命令。 因此,在這種情況下,我反倒 創造了一個非常簡單的bash腳本 在我的工作區名為研討會。 因此,讓我打開了。 而且我們可以看到,它看起來像這樣。 這只是一個很簡單的bash 腳本,其唯一目的的生活 將是呼應 從這段文字,你好,丹。 或者在它之前,它CS50說你好。 而這一切,它會做。 因為這是一個現 命令,我可以運行。 其實我可以跑下來在這裡。 我們可以看到,它實際上只是 我自然運行的命令。 我可以問我的插件來執行此 命令底層工作區上 並解析信息 這是從它返回, 並用它做什麼,並修改 我的插件和行為,我 在我的插件作為一個結果。好。 因此,讓我們看看如何發生的。 我們看到這個很簡單 研討會批處理腳本,我 [聽不清],它可以實際運行。 現在,讓我們來看看修改 這是必要的綁在一起這 與對話窗口,並運行它。 所以在這裡,我們要做的漂亮 就像我們之前看到了同樣的事情。 但是請注意,中 我已經消耗now--東西 除了對話,這 我又碰巧做了兩次, 這是不necessary--除 以對話和命令 和菜單插件,這是 需要在第一個給我 定義一個新的命令,並 一個項目注入菜單, 我也有這個PROC插件。 而這個PROC插件允許 我們來操作流程 在底層的實例。 我已經把它連接我已經後 說,我的插件需要它。 然後,我把它連接到的代碼, 正如我們在主函數中看到的。 再次,我要 初始化我的對話。 如果我們現在向下移動,我們 可以看到,這是不同的。 負載的功能是一樣的,所以 它只是要創建一個命令 並創建一個菜單項,並連接 該菜單項到該命令。 但是,如果我們現在滾動 下展現的對話, 我們開始看到 在出現分歧。 我們有功能顯示對話,這 只是要顯示的對話。 但是,當我顯示此對話, 當show方法被調用時, 它激發了繪製函數。 而且我會再指定 那裡面的一些內容。 所以我只是要 創建一個div,提供給它 一些基本的文字,你好,世界。 但是請注意,在這裡我 要附加到它的ID。 而且很下一行我要去 使用JavaScript來發現ID, 並存儲該對象 到另一個變量 我只是要打電話的內容。 所以,現在每當我有 內容,我需要做的 只是修改該對象的內部HTML。 而對話的HTML將 然後也被修改。 所以,當這個插件是 然後顯示,它可以發生 這是一個新的事件 這是新來這個插件, 但與發生在每個插件 對話中,當現在這個顯示, 我要調用一個 函數調用獲取信息。 而這個功能是 它的肉在這裡。 我將使用PROC插件, 我們之前描述的,其中的方式, 真的只是一個Node.js的庫 雲9用在這裡。 所以,你可以實際 查找關於如何 工作,如果你進入 Node.js的文件 查查EXEC文件 方法有過程。 我要運行這個特定的 指揮家Ubuntu的工作空間 研討會,這是相同的,那 我之前創建相同的命令。 提供給它的電流 工作目錄,只是 是超安全的條款 哪裡這個前後關係正在運行。 而一旦已 完成並返回, 我要運行這個 函數調用解析輸出。 好。 因此,這然後將要執行 在本地,或者更確切地說,一個命令 遠程Ubuntu的實例。 當我找回一些 信息,我則 要調用一個單獨的函數 稱為解析輸出,即 有這樣的簽名在這裡, 錯了,標準輸出,標準錯誤, 並在此進行一些計算。 所以,如果我收到一個錯誤 在所有的某種, 我實際上將檢查看看 錯誤實際上有一些數據。 如果是的話,那麼我將修改內 這些內容對象的HTML這 是你還記得,我們 連接到所述對話 在該instantiattion 對話,或在第一拉伸 的對話。 我會只想說, 一些錯誤發生。 現在,這是過於簡單。 誤差值通常會 包含的東西,是有益的, 也許是一個錯誤號碼和 錯誤從劇本本身。 或者,如果劇本寫 事到標準錯誤, 該數據將被填充 在該參數為好。 我可能是一點點 小心挑選什麼樣的錯誤 實際上,我向人們展示。 但這個簡單的例子 好足夠了 至少看到這一切功能。 否則,如果有 沒有錯誤,那麼我只是 將要提供的原始 該函數的輸出 到該內容的內部HTML 元件,然後更新我的插件 並顯示在這裡。 而這幾乎是所有的 要得到這個運行。 因此,讓我們想想再 這是如何運作,全面。 當我第一次加載這個插件, 就像第一插件, 我要添加一個命令是 可用任何東西,以任何插件 在雲9,被稱為CS50研討會 對話框2,誰的責任 將運行這個節目 對話,這是你回憶一下, 將實際顯示對話 我要求如下。 然後,我會補充說, 命令到窗口菜單 讓我有機會獲得的。 而當對話 被請求時將要顯示 我將獲取的一些信息 底層Ubuntu的實例 通過使用exec file命令。 打擾一下。 一旦返回,我收到了一些 信息,則在客戶端側 再次,我將能夠解析 該命令的輸出 和更新的內 元素的HTML 我們已經連接到前面。 有了這樣的,我們則有 這個全功能的插件 這讓我獲取信息 從這個任意腳本 我們創造的 我們的基本情況。 但同樣,這真的 重要的,真正的關鍵 分離出,其中每個 這些事情正在發生, 我們有所有這些客戶端的 正在運行的瀏覽器的代碼, 而且還沒有訪問 底層文件系統 直到我們真正運行其中的一些 由雲提供的命令 9 SDK像PROC,還有一些其他的 這使我們能夠讀出一些數據, 或閱讀一些文件,如果我們需要 做那種事情。 現在,這是一個有點簡單的例子。 還有其他的事情,我們 或許會想要做的一樣好。 例如,也許我們真的 想節省一些信息 到首。 或許我們要 添加一個新的偏好設置面板 或類似的規定。 然後就是什麼,你 可以看看雲9 SDK 要獲得更多的信息。 但是,這真的是 足夠的上手。 所以,只是為了更​​具體一點 有關的方式,其中的一些東西 功能,我想只顯示 一個例子,這僅僅是一些 從統計50插件的代碼。 而這段代碼基本上是 根據這些實施例 你實際上已經看到, 但有一些更多的保障 並在為了一些更多的複雜性 實現一些附加的東西 我們要實現的。 舉例來說,如果我想成為 可以節約一些設置, 然後,我需要訪問 到設置插件, 每次我想 閱讀一些設置, 我可以,例如,連接到不同的 在設置事件插件。 所以每次的設置為紅色, 例如,在我自己的插件, 如果我要讀一些 從已保存的存儲設置 用戶的喜好,那麼我就可以 默認設置為一個特定的位置, 對於特定偏好,在那 我們已經JSON樣式選項文件 先前保存,我們前面看到的。 如果我打算寫 一些設置吧, 然後我can--或只要我們檢測 該設置已寫入 用於:因為例如那些 設置已被用戶修改 無論是直接在他們的設置 文件,或者偏好面板 改變了設置 直接文件,然後 其實我可以更新一些代碼 或更新我的插件的行為 基於那些有變動 發生在設置文件中。 但實際上,它的其餘部分是相當 多這一點,你已經看到了。 我們增加了一些,也許 東西是新的。 因此,我們添加了一個首選項文件, 或者更確切地說,偏好設置面板, 到首選項窗口,這再次 你可以找到更多信息 在雲9 SDK給我讀。 但一切 是相當多的,漂亮 類似於我們之前所看到的,只是 一些額外的錯誤檢查 還有一些額外的保護措施 和一些附加的功能 以特色所有不同的 我們已經看到的東西。 如果你還沒有真正 看到它,你可能會 想知道什麼的根本 命令是在統計50窗口。 它實際上功能。 那麼,它is--哦,該死。 一秒。 堅持住。 好。 讓我搬這件事,所以我們實際上可以 看到當我輸入統計50會發生什麼。 注意,在這種情況下,該 命令我出去把 真的再次,只是腳本的 要輸出一堆信息 JSON格式。 其原因是,我們做到這一點 這種方式是,因為我們 正在操作,因為我們已經寫 在JavaScript客戶端代碼, 我們可以很容易只 解析JavaScript對象, 真正能夠操縱 這些對象就像我們會 任何其他的JavaScript對象。 所以這是一個非常方便的 提供了一些資料的方式 從底層的Ubuntu實例, 如版本號,主機 名稱,服務器是否正在監聽, 服務器,等等,什麼等等, 和解析很 方便,速度非常快 在插件,然後將 向我們展示了所有的信息。 如此反复,關鍵洞察力 這裡要牢記 介於這種分離 底層的實例, 並且還其中代碼被加載。 當我有一個客戶, 這是第一次加載。 就在這個靜態的JavaScript文件 某個地方,也許是某種CDN。 我們真的沒有照顧 太多關於這第一步。 我們只知道,它的 在客戶端運行 而當我要的 與此泊塢窗實例進行通訊。 那我們要這麼做 通過雲9 SDK。 我們實際上並不具備的能力, 使用JavaScript或者Node.js的, 直接寫它。 我們只是使用這些現有的SDK API來做到這一點的行動為我們。 再次,之一 真正重要的東西 是,當我創造了這個, 當我創造了這個插件, 並作為我的工作就可以了,一是 重要的事情要做 是打開JavaScript控制台。 因為,因為這是所有 在JavaScript的運行, 在客戶端,如果我使用 一個的console.log method--所以只 顯示一個例子在這裡。 讓我們試著修改這個簡單 插件也記錄一些數據。 我們將添加標準輸出。 因此,讓我們改變這種狀況是在這裡。 現在,當我執行 的console.log,牢記 ,由於該運行 在客戶端, 我會看到這一點我自己 JavaScript控制台,它 是我將如何再能 嘗試解決和調試 一些我有問題。 請注意,由於 我在SDK的方式,我 然後能夠操縱 插件在這種情況下。 所以,即使它是 保存在該實例中, 這是以前的一個例子 規則被侵犯,其中雲9 SDK實際上將拉插件從 潛在的實例,然後運行它們。 所以,以這種方式,我然後 能夠操縱和建設 一些插件在這裡。 但是,為了給我看看 更新這個插件, 因為它是在客戶端, 我需要保存插件 然後重新加載整個工作區, 使新的插件是那麼 下載到我的客戶,到我 Web瀏覽器,然後被使用。 所以,現在當我點擊這個研討會 對話框中,我們仍然可以看到這一點。 但現在希望能在我的JavaScript 對話中,我們應該看到my--等待, 堅持住。 我可能會打開新的對話。 我們應該在這裡看到我接收到的數據。 接收到的數據,你好, 丹,這是你回憶一下, 是的console.log的操作, 我們要求在插件。 因此,這說明再 我前面提到的, 這一對話,或本 圖相反,我 前面提到的情況就是這樣。 但是,還有一個重要的 僅用於開發異常, 這是,插件 它本身實際上可能 被存儲在搬運工實例 暫時,因為據推測雲9 不希望我們能夠 操縱自己的CDN的對象。 和雲9的客戶,在加載時, 會發現這些插件在那。 C9的插件文件夾中,並加載它們。 但是,這些仍然發生 只在客戶端。 於是,這僅僅是一個 只有出現異常 雲9插件的開發。 但對其餘 時間 - 和原因 我們要真正 錘這home-- 是因為大多數時間,這是 要被從CDN運行, 而正要運行 單純從客戶端。 通常情況下將沒有 與插件相互作用, 或有甚至沒有被任何 原因是插件本身 實際上存儲在 底層搬運工例如, 除了在的情況下 該SDK開發。 如此反复,這改變只 略微因為事實 我們正在運行SDK模式。 這將然後加載這些 插件的開發, 和這裡的唯一目的是使 我可以使用雲9做開發 雲9插件。 但即使如此,這並沒有改變 再怎麼任何工作的。 它仍在運行 完全在客戶端上。 它只是意味著,只要我想 在雲9創建雲9插件, 我創建這些插件, 把它們放在我的。 在我家C9 / plugins文件夾 目錄,確保我在SDK的方式, 每一次居然重新加載頁面我 修改該插件, 並查看發生了什麼 我的JavaScript控制台。 只是管理我的JavaScript 控制台來確保 任何故障排除 信息我把安慰, 或其他任何可能發生的 由於錯誤我已經寫 在我的代碼或類似物,在那裡出現。 有了這樣的,這是真的 足夠的上手,我想, 隨著雲9插件。 特別是採取一看SDK 文檔雲9提供。 這是一個偉大的方式來獲得 開始,因此很容易 創建一些插件雲9。 有了這樣的,我要感謝 大家非常多的來到我身邊。 我希望你玩得開心 編寫插件雲9。 或許提高插件 我們現在已經,或甚至 加入一些自己的功能。 我們期待著看到 什麼是你創造。 在此之前,再見。