Sugar Labs

Summer of Code/2015/Interactive JS Shell: Difference between revisions

← Older edit
Bytestorm (talk | contribs)
61 edits
Tag: visualeditor
Bytestorm (talk | contribs)
61 edits
Tag: visualeditor
 
(4 intermediate revisions by the same user not shown)
Line 61: Line 61:


  THE NODE.JS SERVER
  THE NODE.JS SERVER
The main server will be Node.js based and would handle the requests sent from the client application. This server is built using the ExpressJS library and the same is used for handling all the requests. This server can also be started on the client device itself which makes it able to run the application even when it's not connected to internet or school LAN.
The main server will be Node.js based and would handle the requests sent from the client application. This server is built using the ExpressJS library and the same is used for handling all the requests. This '''server will be started on the client device itself''' which makes it able to run the application even when it's not connected to internet or school LAN.


  SETTING UP THE CLIENT(SUGAR)
  SETTING UP THE CLIENT(SUGAR)
Line 81: Line 81:


The tutorial creator is for both teachers and students who have earned some knowledge about JS to help other fellow students. This would not require any further development skill. The teacher/student would have to enter only three things to make tutorial expected input code, expected output code and some explanation/hint/syntax about the input code which would help the student to understand the usage of that command. This application will be packaged with some tutorials during its installation only.
The tutorial creator is for both teachers and students who have earned some knowledge about JS to help other fellow students. This would not require any further development skill. The teacher/student would have to enter only three things to make tutorial expected input code, expected output code and some explanation/hint/syntax about the input code which would help the student to understand the usage of that command. This application will be packaged with some tutorials during its installation only.
  THE VISUAL JS DEBUGGER
  '''''THE VISUAL JS DEBUGGER'''''
The interface has a easy Javascript debugging facility where if the student clicks on a line of the code he/she has written the debugger will return the value of all the declared variables just after execution of that particular line. This task is accomplished by the help of library UglifyJS which parses a given source code to and can list out the variables used. I have already built a simple debugger and here is a screencast of that - [http://wiki.sugarlabs.org/images/f/fe/Final.gif LINK].
The Visual debugging interface is implemented using '''''UglifyJS '''''library. The '''''UglifyJS.minify() '''''function creates a source code map and extracts the variables used in the program. The source map can be used to parse codes which contain multiline codes (a single line code broken into more than one line), a feature yet to be added.
 
To make this feature easy to use this debugging interface is loaded as soon as the program is started. Hence the student just needs to click on any line of the code to see the values of the declared variables there.
 
'''I have already built a simple debugger and here is a screencast of that - [http://wiki.sugarlabs.org/images/f/fe/Final.gif LINK].'''
  INTERACTIVE TUTORIALS INTERFACE
  INTERACTIVE TUTORIALS INTERFACE


Line 101: Line 105:
MATLAB is a very important tool available for any engineering/science field.
MATLAB is a very important tool available for any engineering/science field.
We can add support for running matlab/octave(.m) codes by using the octave interpreter.
We can add support for running matlab/octave(.m) codes by using the octave interpreter.
* '''ANIMATED GIF OF THE DEBUGGER INTERFACE ([http://wiki.sugarlabs.org/images/f/fe/Final.gif LINK])'''[[File:Final.gif|centre|1103x1103px|]]
'''''LINK TO ANIMATED GIF OF THE DEBUGGER INTERFACE ([http://wiki.sugarlabs.org/images/f/fe/Final.gif LINK])'''''
* '''A SCREENSHOT FROM THE SUGAR WEB-ACTIVITY'''
* [[File:Final800 anim.gif|centre|thumb|800x800px|]]
[[File:SugarTest.png|thumb|1100x1100px|]]
'''A SCREENSHOT FROM THE SUGAR WEB-ACTIVITY'''
 
[[File:Vdi2.png|centre|thumb|800x800px|]]
* '''RUNNING A JAVASCRIPT CODE :'''
'''DEBUGGING A JAVASCRIPT CODE :'''
[[File:JsRan.png|thumb|1100x1100px||centre]]
[[File:Vdi3.png|centre|thumb|800x800px|]]
* '''RUNNING AN ERRONEOUS JAVASCRIPT CODE :'''
[[File:Vdi4.png|centre|thumb|800x800px|]]
[[File:ErrorLog.png|thumb|1100x1100px||centre]]
'''RUNNING AN ERRONEOUS JAVASCRIPT CODE :'''
* '''SAVING A C CODE TO SERVER'''
[[File:ErrorLog.png|thumb|800x800px||centre]]
[[File:CSaved.png|centre|thumb|1100x1100px|]]
'''SAVING A C CODE TO SERVER'''
* '''COMPILING AND RUNNING A C CODE (SAVED IN SERVER)'''
[[File:CSaved.png|centre|thumb|800x800px|]]
[[File:CRan.png|thumb|1100x1100px||right]]
'''COMPILING AND RUNNING A C CODE (SAVED IN SERVER)'''
[[File:CRan.png|thumb|800x800px||centre]]
* '''Who are you making it for, and why do they need it?'''
* '''Who are you making it for, and why do they need it?'''
I got the motivation for this project from this site [https://try.github.io/levels/1/challenges/1 Github tutorial]. This is very similar to the main idea but also helps the student to learn a language step by step. This is also to make anyone, even with a very little knowledge of the subject, able to make tutorials for fellow students.  
I got the motivation for this project from this site [https://try.github.io/levels/1/challenges/1 Github tutorial]. This is very similar to the main idea but also helps the student to learn a language step by step. This is also to make anyone, even with a very little knowledge of the subject, able to make tutorials for fellow students.  
Retrieved from "https://wiki.sugarlabs.org/go/Summer_of_Code/2015/Interactive_JS_Shell"