基于云計算的在線編程系統設計與實現

陳春燕，孫天驍，張俊*

?

基于云計算的在線編程系統設計與實現

陳春燕，孫天驍，張俊*

（武漢工程大學計算機科學與工程學院，湖北武漢，430205）

本在線編程系統（網頁版和Android客戶端版）將通過云計算中的云服務器功能，實現將代碼等有關內容交給服務器編譯執行，將執行結果和可能的有關錯誤信息返回，并把執行結果分享給朋友共同學習提高等功能。在前端界面設計上，采用HTML5等技術實現的響應式交互網頁能保證用戶的較好體驗。本在線編程系統提供六種編程語言（C/C++、C#、Java、Python2.7、Python3.4）供用戶選擇，方便用戶練習、編寫和分享代碼及其運行結果，具有便攜性、隨時隨地編程等特點。

云計算；在線編譯；編程；HTML5

引言

近年來，隨著智能手機的流行，人們已無需依賴電腦進行各種各樣的娛樂活動。智能手機不僅有較大的觸摸屏幕，高速度的處理節奏、傳感器支持和優秀的互聯網體驗，最重要的是智能手機搭載了開放式的操作系統，任何人都可以基于這個操作系統開發適合于手機運行的應用程序（APP），令智能手機的功能得到無限擴充。

但智能手機的使用使得互聯網每天都會新增大量數據。如何管理這些大數據，提取有用的信息，是當前信息技術的熱點。云計算是一種按使用量付費的模式，這種模式提供可用的、便捷的、按需的網絡訪問，進入可配置的計算資源共享池（資源包括網絡、服務器、存儲、應用軟件、服務），這些資源能夠被快速提供，只需投入很少的管理工作，或與服務供應商進行很少的交互。云計算的模式讓大規模計算變得廉價，讓普通人都可以享受到大數據、云計算本身帶來的便利[1]。

另外，HTML5和CSS3等新技術已在生活中普及。利用HTML5、CSS3和JavaScript開發出的網頁應用程序[2]，相比直接依賴終端操作系統的原始支持語言，具有強交互、響應式，良好的跨平臺性優勢。如果將Web技術和手機應用程序結合在一起，即可創造一個較為出色的手機應用程序。

1 在線編譯器現狀分析

在線編譯器是指在不需要安裝任何的編譯環境和軟件的情況下，就能夠編寫、編譯并執行程序。用戶不需要承擔傳統編譯器所帶來的內存消耗、硬盤存儲空間的消耗就能開始快速編寫程序。用戶還可以到任何一個可以上網的PC上編寫代碼，不需要費時去安裝和配置傳統的編譯環境。現如今在線編譯器種類繁多，但仍存在許多不足，總結有如下幾點：

（1）界面不簡潔，支持編程語言種類少；

（2）傳統的物理服務器在部署、資源分配、可靠性等的不足與限制；

（3）編寫時無感應顯示框，不能高亮顯示代碼；

（4）不具有交互性，代碼不能分享給其他用戶交流學習。

針對以上問題，本文選擇云計算中的云服務器來編譯/解釋和執行在線編程系統中的程序，并將有關結果返回前端呈現給用戶[3]。云服務器利用硬件資源集約化，相比傳統服務器能夠動態調配計算資源，具有可靠、部署簡便、靈活擴展等優點。在前端界面設計上，采用HTML5、Bootstrip等技術能實現界面的響應式交互功能。另外本項目還嵌入了可支持代碼自動縮進、高亮，提供簡單的代碼提示、拼寫檢查等功能的代碼編輯器，給用戶在編寫代碼時提供了方便。本文設計并實現了在線編程系統的網頁版和Android客戶端版兩個版本，進一步方便了用戶進行代碼的學習與提高，本系統的其他特性將在下文中一一敘述。

2 使用的主要工具和技術

2.1 Ubuntu14.04操作系統

本文采用阿里云作為后端服務器提供商。為了能夠運行編程語言的編譯器，需要擁有一個固定的公網IP，在其上執行程序和通過HTTP等協議來與外界交換信息。本文選擇Linux發行版Ubuntu14.04作為云服務器的操作系統。Linux系統是一種免費使用和自由傳播的類Unix操作系統，它以網絡作為核心設計思想，支持多用戶、多任務、多線程和多CPU，是一個性能穩定的多用戶網絡操作系統，其發行版Ubuntu的目標在于為用戶提供一個最新且較穩定的主要由自由軟件構建而成的操作系統。此外，本文使用Putty軟件來遠程登陸此操作系統；在Android平臺上，則使用JuiceSSH軟件登陸。

2.2 LAMP架構

LAMP（Linux-Apache-MySQL-PHP）網站架構是目前國際流行的Web框架，Linux是源代碼可用的操作系統，Apache是一個開放源碼的Web服務器軟件，MySQL是多線程、多用戶的SQL數據庫管理系統，PHP是一種編程語言，主要用于服務器端的應用程序軟件。隨著開源潮流的蓬勃發展，開放源代碼的LAMP已經與J2EE和.Net商業軟件形成三足鼎立之勢。LAMP架構相比于J2EE，其有輕量，快速部署等明顯優點；跟.NET相比，其具有跨平臺，高性能低價格等優點[4]。

2.3 響應式交互界面

響應式交互網頁是指頁面設計應當根據設備環境(系統平臺、屏幕尺寸)進行相應的響應和調整，使網頁適應于任何設備[5]。相比起一般的靜態網頁，它具有跨平臺、節省開發成本、在不同平臺上的表現內容保持一致性、體驗良好等優點。尤其是對于頁面結構較為簡單的在線編譯器，適合響應式頁面，能夠在保證各個設備都能被良好設計和呈現的局限條件下，減少對不同設備的開發成本。

3 系統功能模塊設計

本項目的功能模塊從大的方面可以分為兩大模塊，一方面是客戶端功能模塊，另一方面是云服務器端功能模塊，對用戶和服務器端進行相關活動分析，得出如圖1、圖2所示用例圖。

圖1 系統用戶用例圖

圖2 云服務器用例圖

根據上兩圖和語言程序的開發過程（編寫源程序→編譯→連接→運行），本系統的開發工作主要包括五個模塊：源程序輸入模塊，在線編譯模塊，可執行程序輸出模塊，程序查看模塊和程序分享模塊。各個模塊能夠進行數據的交互傳輸和共享。

3.1 源程序輸入模塊

用戶通過源程序輸入的界面編輯代碼、提交代碼和閱讀執行結果。本文采用HTML5、CSS3、JavaScript以及Bootstrip制作響應式交互網頁。選用Ace.js作為代碼編輯器，用戶在編寫程序時，其代碼能夠進行高亮顯示、自動縮進，并能夠自動生成代碼列表，方便用戶編程，減少代碼編寫的錯誤。選用jQuery JavaScript框架實現屏蔽瀏覽器兼容差異的無刷新提交，優化用戶體驗。本文還在界面中添加標準輸入的表單，添加選擇語言、編譯并執行、查看歷史提交的按鈕（網頁版按鈕名稱為其相對應的英文），豐富在線編程系統的功能。網頁版源程序輸入界面如圖3所示。

圖3 網頁版源程序輸入界面

在線編程系統的APP版采用源程序輸入界面WebView內嵌Ace.js的方案，使得用戶啟動APP后，代碼編輯器完全從本地調取，從而節省用戶的流量，獲得更高的速度和體驗[6]。APP版還錄入支持各語言的“Hello World”程序。即用戶在切換語言的過程中，會自動將對應語言的“Hello World”程序提供給編輯器，用戶已對代碼編輯的情況除外，方便用戶直接在此基礎上編輯代碼，如圖4所示。

另外，本文還給APP設計了檢查更新的功能。為了進一步幫助用戶隨時隨地編程，時常對APP的功能做些改進，其版本號也不斷更新。如果發現存在新版本的APP，則通知前臺彈窗提示用戶，由用戶決定是否更新。在啟動APP時，實例化一個叫做UpdateChecker的類，這個類在后臺新建一個線程，構建一個HTTPS請求，從服務器端獲取有關于最新版本的信息[7]。如果用戶選擇立即更新，前臺則展示一個帶進度條的彈窗，新建一個線程從服務器上下載最新版本的APK文件到用戶Android設備的內置存儲里，代碼如下所示：

private void prepareDownload(final String apkUrl){

AlertDialog.Builder builder = new AlertDialog.Builder(context);

builder.setTitle("檢測到新版本，立刻更新嗎？");

builder.setCancelable(false);

builder.setMessage("V"+ latestVersion + " 版本" + (updateDes.isEmpty() ? "" : " " + updateDes));

builder.setPositiveButton("確定", new DialogInterface.OnClickListener() {

@Override

public void onClick(DialogInterface dialogInterface, int i) {

final ProgressDialog progressDialog = new ProgressDialog(context);

progressDialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);

progressDialog.setCancelable(false);

progressDialog.setTitle("正在下載更新...");

圖4 APP版源程序輸入界面

圖5 APP版錯誤信息返回界面

3.2 在線編譯模塊

本文先在云服務器上搭建LAMP架構：選用Ubuntu14.04作為云服務器的操作系統，安裝Apache服務、MySQL數據庫，構建PHP運行環境，再進行httpd.conf配置調整，最后測試LAMP協同工作。若PHP網頁能訪問MySQL數據庫，則表明LAMP架構已搭建完成，代碼如下。為了使云服務器可以支持多種語言的編譯執行，又在服務器上安裝了C/C++、C#、Java、Python2.7、Python3.4這六種語言的編譯器。這樣，用戶在輸入界面選擇編程語言并且編輯代碼，點擊“Compile Run”按鈕（APP中為“編譯并執行”按鈕）后，前端將代碼等內容傳送給云服務器，云服務器編譯執行并將執行結果和可能的有關錯誤信息返回。

~]

添加:

$link=mysql_connect('localhost','root','123456');

if($link) echo "恭喜你，數據庫連接成功啦！！";

mysql_close();

?>

~]

3.3 可執行程序輸出模塊

可執行程序是指一種可在操作系統中浮動定位的程序，若編譯及后續的連接命令沒有產生錯誤，則生成可執行文件返回前端以窗口的形式呈現給用戶；若有編譯錯誤，云服務器則將結果和發生錯誤的位置信息返回，方便用戶查找程序出錯的位置，如圖5所示。

3.4 程序查看模塊

用戶若想要查看近期已編寫的所有程序及其相關信息，在APP版中只需點擊輸入界面右上方的按鈕（網頁版點擊輸入界面中最下方的“History”鏈接），則可查看到代碼及其提交時間、編程語言、代碼行數、耗時等信息，如圖6所示。具體做法是創建歷史提交記錄的頁面，添加一個列表來顯示各提交代碼的摘要。在輸入界面中放一個復選框，選擇是否生成公開鏈接，如果選擇是，相關信息將被存入數據庫，歷史提交的列表里就會顯示該提交記錄。本文選用Vue.js優雅實現列表和自動繼續向下加載的功能，選用highlight.js實現代碼上色。hightlight.js支持多種語言、多種樣式的代碼上色，可以自動判斷語言類型以起到優雅呈現代碼的效果。如圖6所示。

查看歷史提交功能的相關代碼如下：

$data[] = [

'Id' => (int)$d['Id'],

'codeType' => $codeDisplayName[$d['codeType']],

'codeClass' => $codeClassName[$d['codeType']],

'code' => $codePreview,

'codeLines' => getLinesCount($d['code']),

'inputLines' => getLinesCount($d['input']),

'outputLines' => getLinesCount($d['runtimeOutput']),

'urlCode' => $d['urlCode'],

'runTime' => date("Y-m-d H:i", strtotime($d['runTime'])),

'lastTime' => (int)$d['lastTime'],

'isSuccess' => (bool)$d['isSuccess'],

];

圖6 網頁版歷史提交界面

3.5 程序分享模塊

本文還在APP版中添加代碼分享功能，用戶可將自己編寫的代碼通過鏈接的形式分享給朋友，分享時應使代碼能優雅地呈現出來。

本文使用Bootstrap做移動端的適配。將highlight.js和Vue.js囊括APP版的在線編程系統中，測試好兩者的聯調，在后端使用PHP給前端相應的接口，調試JavaScript和Java之間的數據接口，并優化顯示方式。在結果返回的顯示窗口中添加“生成分享”選項，若用戶點擊此選項，則顯示出一個關于此代碼詳情的頁面，并在代碼信息后提供“以此為基礎新建”的功能，便于用戶利用已有代碼開始新的代碼編寫環境，如圖7所示。在頁面右上方添加分享按鈕，調用Android的通用分享接口，便于用戶通過微信、QQ等途徑將公開鏈接分享給他人查閱。為了進一步優化代碼呈現效果，本文在highlight.js的基礎上實現了代碼行號的功能，方便用戶通過行號對代碼就行點評和學習，如圖8所示。

4 安全性問題

4.1 提高系統通信安全性和可信賴性

傳統互聯網中采用的HTTP協議利用明文傳輸信息，很難保證信息在傳輸過程中不被竊聽和篡改。而HTTPS協議是對HTTP協議的可靠補充，存在不同于HTTP的默認端口以及在HTTP和TCP之間加入加密/身份驗證層，有效地防止了第三方對傳輸內容的竊聽和篡改[8]。本項目使用國外一個公共的免費SSL項目Let's Encrypt為服務器頒發證書，以便于切換到HTTPS協議向外界提供服務。

圖7 代碼詳情界面

圖8 代碼分享界面

4.2 提高服務器內部安全性

這是一個允許用戶遠程提交程序的系統，需防止用戶提交的惡意代碼竊取信息甚至破壞系統。本文使用Linux的權限機制去限制用戶進程所能使用的最大資源和訪問權限：新建一個用戶，利用Linux的ACL機制對其進行權限限制，包括不允許訪問服務器上的關鍵文件夾、限制其在臨時文件夾之外的寫權限。使用C語言編寫一個引導程序，這個引導程序的功能包括：對用戶程序的活動范圍、當前會話的資源占用進行限制，將進程替換到用戶進程等，一定程度上保證了安全性。

5 結束語

本文完成的是一款借助云服務器，支持C/C++、C#、Java、Python2.7、Python3.4語言的在線編程系統。這個編程系統提供網頁版和Android客戶端版，主要定位是方便用戶練習、編寫和分享小段代碼和運行結果，具有便攜性、隨時隨地編程等特點。但仍有不足之處，如支持語言偏少、對Android系統上的操作體驗優化不夠等。我們將通過不斷優化和改良，為廣大青年提供一個高效便捷的學習編程的輔助工具。

[1] 林闖, 蘇文博, 孟坤, 等. 云計算安全:架構、機制與模型評價[J]. 計算機學報, 2013, 36(9): 1766-1774.

[2] 錢海軍. 基于HTML5移動Web頁面開發技術研究[J]. 電腦與信息技術, 2013, 21(1): 50-52.

[3] 王意潔, 孫偉東, 周松, 等.云計算環境下的分布存儲關鍵技術[J]. 軟件學報, 2012, 23(4): 963-970.

[4] 錢鈺. 基于Moodle+LAMP技術的計算機基礎課程教學平臺的研究和開發[D]. 上海: 華東師范大學, 2009, 12(2): 49-60.

[5] 劉耀陽. 響應式WEB交互設計淺析[J]. 科技資訊, 2014, 12(34): 16-17.

[6] 公磊, 周聰. 基于Android的移動終端應用程序開發與研究[J]. 計算機與現代化, 2008, 8: 85-89.

[7] 劉向輝. 基于Java的移動終端中間件的研究與設計[D]. 上海: 華東師范大學, 2005, 5(25): 17-42..

[8] 陸榮杰, 劉知貴, 鄭曉紅. 基于HTTPS隧道技術的統一認證平臺研究與實現[J]. 計算機應用研究, 2006, 23(12): 168-170.

The Online Programming System Based on Cloud Computing Design and Implementation

CHEN Chunyan, SUN Tianxiao, ZHANG Jun*

(School of Computer Science and Engineering Wuhan Institute of Technology, Hubei Wuhan, 430205, China)

This online programming system (web and Android client version) will be on in the cloud cloud server functions, implementation to compile the code and related content to the server to perform, will perform the results and the possible information about the error returns, and to share the results with friends study together to improve, and other functions.On the front-end interface design, by adopting the technical implementation of HTML5 user responsive, interactive web pages can guarantee a good experience.This on-line programming system with six kinds of programming language (C/C++, C#, Java, Python2.7, Python3.4) for the user to choose from, user-friendly exercises, and share code and operation result, has many characteristics, such as portability, programming anytime and anywhere.

cloud computing; online compile; programming; HTML5

陳春燕, 孫天驍, 張俊. 基于云計算的在線編程系統設計與實現[J]. 數碼設計, 2017, 6(5): 3-7.

CHEN Chunyan, SUN Tianxiao, ZHANG Jun. The Online Programming System Based on Cloud Computing Design and Implementation[J]. Peak Data Science, 2017, 6(5): 3-7.

10.19551/j.cnki.issn1672-9129.2017.05.002

TP393

A

1672-9129(2017)05-0003-05

2017-01-26；

2017-03-07。

全國教育信息技術研究“十二五”規劃2015年度重點課程（編號：156222629），湖北省教研項目（編號：2013288，2016311），武漢工程大學教研項目（編號：156222629），武漢工程大學校長基金項目（編號：2016043）。

陳春燕（1996-），女，浙江湖州人，就讀于武漢工程大學，本科在讀，研究方向：云計算與大數據處理。E-mail: 897081287@qq.com