How to implement programming question – Web Editor and Code Compilation ?

programming.jpg

GOALS :

  1. Create Editor using which the candidate can write code in any programming language currently available in the market.
  2. Candidate should also be able to compile his code – any number of times.

Now as my requirements were clear.

I started doing some R&D on how other websites deals with this type of questions.

List of Websites which handles programming questions :

  1. Hackerrank
  2. SPOJ
  3. CodeChef
  4. TopCoder
  5. GeeksforGeeks

Findings

  1. HackerRank uses “codemirror” open-source package as code editing tool.
  2. Other open-source package available is Ace
  3. Both the packages mentioned above does not provide capability to “compile and execute code on server side” and are only web IDE.
  4. Both packages are highly configurable (custom themes, etc), provides many add-ons and supports wide range of languages.
  5. For “compile and code execution” on server side we will have to use third party tool like Sphere Engine.
  6. HackerRank also provides api’s for “compile and code execution”
  7. No Open source platform available for compilation of code.

Finalized Services: 

  1. Ace – Ace is an embeddable code editor written in JavaScript. It matches the features and performance of native editors such as Sublime, Vim and TextMate. It can be easily embedded in any web page and JavaScript application.
  2. Sphere Engine – The Sphere Engine platform features 60+ compilers of all the most popular programming languages. Starting from now, you can forget about setting up, maintaining and updating your own programming environment. Our service lets you compile code online through our servers.

# ACE Editor is Open Source.

# Sphere Engine is Priced.

Sample Implementation :

Embedding Ace in Your Site :

Ace can be easily embedded into a web page. Get prebuilt version of ace from ace-builds repository and use the code below:

<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
 #editor { 
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 }
</style>
</head>
<body>

function foo(items) { var x = "All this is syntax highlighted"; return x; }
/ace-builds/src-noconflict/ace.js var editor = ace.edit("editor"); editor.setTheme("ace/theme/monokai"); editor.getSession().setMode("ace/mode/javascript"); </body> </html>

 

Here is the link of the demo

Now comes the implementation of compiler. This compiler will give us the ability to compile our code.

Sphere Engine Compilers is a webservice which allows you remotely use compilers and interpreters. We support vast numbers of languages starting from the most common ones like C++, Java and Python and ending with much more exotic ones like Falcon, Lua and Oz.

Sphere Engine Compilers API allows you to:
  • upload a source code,
  • run the program with input data on the server side,
  • download results of the execution (output, standard error, compilation information, execution time, memory usage, etc.).

In the picture below you can see the flow of the submission from the sending up to the receiving results.

/static/docs/diagram_compilers.png

Sphere Engine Compilers API allows you to:

  • upload a source code;
  • run the program with input data on server side in more than 60 programming languages;
  • and download results of the execution (output, standard error, compilation information, execution time, memory usage, etc.).

Following are the API using which we can compile the code in any programming language.

Test connection

GET /api/v3/test

For testing purposes. Returns the same data every time it is called (if wrong token is provided, then AUTH_ERROR error code is returned).

Example request

curl -A 'SphereEngine-Curl/1.0' \
	 'http://ba519569.compilers.sphere-engine.com/api/v3/test?access_token=2603d6d7e444a346fa11a57b0e05af2f'

Example response

{
    "moreHelp": "sphere-engine.com",
    "pi": 3.14,
    "answerToLifeAndEverything": 42,
    "oOok": true
}

List all supported languages

GET /api/v3/languagesReturns a list of supported programming languages

Return Value:

languages
array
Associative array of languages:

key
integer
language id
value
string
language name and version

Example request:

curl -A 'SphereEngine-Curl/1.0' \
	 'http://ba519569.compilers.sphere-engine.com/api/v3/languages?access_token=2603d6d7e444a346fa11a57b0e05af2f'

Example response:

{  
   "7":"Ada (gnat-4.9.2)",
   "45":"Assembler (gcc-4.9.2)",
   "13":"Assembler (nasm-2.11.05)",
   "104":"AWK (gawk) (gawk-4.1.1)",
   "105":"AWK (mawk) (mawk-3.3)",
   "28":"Bash (bash 4.3.30)",
   "110":"bc (bc-1.06.95)",
   "12":"Brainf**k (bff-1.0.5)",
   "11":"C (gcc-4.9.2)",
   "27":"C# (mono-3.10)",
   "41":"C++ 4.3.2 (gcc-4.3.2)",
   "1":"C++ 4.9.2 (gcc-4.9.2)",
   "44":"C++14 (gcc-4.9.2)",
   "34":"C99 strict (gcc-4.9.2)",
   "14":"CLIPS (clips 6.24)",
   "111":"Clojure (clojure 1.7)",
   "118":"COBOL (open-cobol-1.1)",
   "106":"COBOL 85 (tinycobol-0.65.9)",
   "32":"Common Lisp (clisp) (clisp 2.49)",
   "20":"D (gdc 4.9.2)",
   "102":"D (dmd) (dmd-2.042)",
   "36":"Erlang (erl-5.7.3)",
   "124":"F# (fsharp-3.10)",
   "123":"Factor (factor-0.93)",
   "125":"Falcon (falcon-0.9.6.6)",
   "107":"Forth (gforth-0.7.2)",
   "5":"Fortran (gfortran-4.9.2)",
   "114":"Go (1.4)",
   "121":"Groovy (groovy-2.4)",
   "21":"Haskell (ghc-7.6)",
   "16":"Icon (iconc 9.4.3)",
   "9":"Intercal (c-intercal 28.0-r1)",
   "10":"Java (sun-jdk-8u25)",
   "55":"Java7 (sun-jdk-1.7.0_10)",
   "35":"JavaScript (rhino) (rhino-1.7R4)",
   "112":"JavaScript (spidermonkey) (spidermonkey 24.2)",
   "26":"Lua (luac 5.2)",
   "30":"Nemerle (ncc 0.9.3)",
   "25":"Nice (nicec 0.9.6)",
   "122":"Nimrod (nimrod-0.8.8)",
   "56":"Node.js (0.10.35)",
   "43":"Objective-C (gcc-4.5.1)",
   "8":"Ocaml (ocamlopt 4.01.0)",
   "127":"Octave (3.6.2)",
   "119":"Oz (mozart-1.4.0)",
   "57":"PARI\/GP (2.5.1)",
   "22":"Pascal (fpc) (fpc 2.6.4)",
   "2":"Pascal (gpc) (gpc 20070904)",
   "3":"Perl (perl 5.20.1)",
   "54":"Perl 6 (rakudo-2014.07)",
   "29":"PHP (php 5.6.4)",
   "19":"Pike (pike 7.8)",
   "108":"Prolog (gnu) (gprolog-1.3.1)",
   "15":"Prolog (swi) (swipl 5.6.64)",
   "4":"Python (python 2.7.9)",
   "99":"Python (Pypy) (Pypy)",
   "116":"Python 3 (python-3.4)",
   "117":"R (R-2.11.1)",
   "17":"Ruby (ruby-1.9.3)",
   "39":"Scala (scala-2.11.4)",
   "128":"Scheme (chicken) (4.9)",
   "33":"Scheme (guile) (guile 2.0.11)",
   "23":"Smalltalk (gst 3.2.4)",
   "40":"SQL (sqlite3-3.8.7)",
   "38":"Tcl (tclsh 8.6)",
   "62":"Text (text 6.10)",
   "115":"Unlambda (unlambda-2.0.0)",
   "101":"VB.NET (mono-3.10)",
   "6":"Whitespace (wspace 0.3)"
}

Creates a new submission

POST /api/v3/submissionsPOST parameters:

sourceCode
string
Source code of the submission
language
integer
Language identifier. Language identifiers can be retrieved at /api/3/languages
input
string
Data that will be given to the program on stdin.

Return Value:

id
string
Id of the new submission

Errors:

400 The provided API token is not a valid Sphere Engine Compilers API token

Example Request:

curl -A 'SphereEngine-Curl/1.0' \
-d '{ 
    "language": 11, 
    "sourceCode":"#include int main(){ printf(\"Hello!\"); return 0; }" 
    }' \
-H "Content-Type: application/json" \
-X POST \
'http://ba519569.compilers.sphere-engine.com/api/v3/submissions?access_token=2603d6d7e444a346fa11a57b0e05af2f'

Example Response:

{
    "id": 1
}

Fetch submission status

GET /api/v3/submissions/:idReturns information about a submission.
Parameters:

id
integer
withSource
boolean
Determines whether source code of the submission should be returned.
withInput
boolean
Determines whether input data of the submission should be returned.
withOutput
boolean
Determines whether output produced by the program should be returned.
withStderr
boolean
Determines whether stderr should be returned.
withCmpinfo
boolean
Determines whether compilation information should be returned.

Returned data:

langId Submission’s language identifier
langName Submission’s language name. For example: C++
langVersion Submission’s language version. For example: gcc­4.3.4
time Execution time in seconds.
date Server date and time of submission’s creation in the following format: YYYY­MM­DD HH­MM­SS; for example: 2009­05­19 02­34­56
status Submission’s current status. (see: 9).
result Submission’s current result. (see: 9).
memory Memory used by the program.
signal Signal raised by the program when an error had occurred.
source Source code of the submission. This value is returned if the withSource parameter is set to true.
input Input data of the submission. This value is returned if the withInput parameter is set to true.
output Output produced by the program. This value is returned if the withOutput parameter is set to true.
stderr Stderr produced by the program. This value is returned if the withStderr parameter is set to true.
cmpinfo Compilation information regarding the program. This value is returned if the withCmpinfo parameter is set to true.

Example Request:

curl -A 'SphereEngine-Curl/1.0' 'http://ba519569.compilers.sphere-engine.com/api/v3/submissions/123456?access_token=2603d6d7e444a346fa11a57b0e05af2f'

Example Response:

{
  "langId": integer,
  "langName": string,
  "langVersion": string,
  "time": float,
  "date": string.
  "status": integer,
  "result": integer,
  "memory": integer,
  "signal": integer,
  "source": string,
  "input": string,
  "output": string,
  "stderr": string,
  "cmpinfo": string
}				

Using this API we can easily compile our code.

Soon i will be releasing my GIT repository containing the exact implementation.

 

Hope it helped.


3 thoughts on “How to implement programming question – Web Editor and Code Compilation ?

  1. Can you release the source code of your implementation? I am facing similar requirement for adding a compiler to specific pages on my blog. I was thinking whether there is some plugin which can do this. Like we can add a shortcode and it displays the code editor and compiler there.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s