61
edits
Changes
Summer of Code/2015/Interactive JS Shell (view source)
Revision as of 20:10, 9 April 2015
, 20:10, 9 April 2015→About your project
==About You==
==About You==
* '''What is your name?'''
* '''What is your name?'''
Bishal Santra
My name is Bishal Santra and I am a 3rd year undergraduate student at IIT Kharagpur, India.
* '''What is your email address?'''
* '''What is your email address?'''
bsantraigi@gmail.com
bsantraigi@gmail.com
bytestorm_
bytestorm_
* '''What is your first language? (We have mentors who speak multiple languages and can match you with one of them if you'd prefer.)'''
* '''What is your first language? (We have mentors who speak multiple languages and can match you with one of them if you'd prefer.)'''
Bengali/Hindi
I am comfortable with English, Bengali and Hindi.
* '''Where are you located, and what hours (UTC) do you tend to work? (We also try to match mentors by general time zone if possible.)'''
* '''Where are you located, and what hours (UTC) do you tend to work? (We also try to match mentors by general time zone if possible.)'''
India (UTC+5:30)
India (UTC+5:30)
'''Possible Working Hours'''
'''Possible Working Hours'''
Till the end of June (Approx. 32 hrs./week)
Till the end of June (Approx. 32 hrs./week) ('''Stay: '''In Mumbai)
{| class="wikitable"
{| class="wikitable"
| Weekends || 3:00 - 18:30 || 8:30 - 23:59
| Weekends || 3:00 - 18:30 || 8:30 - 23:59
|}
|}
1st July - 14th July (Approx. 50 hrs./week)
1st July - 14th July (Approx. 50 hrs./week) ('''Stay: '''Hometown or IIT Kharagpur)
{| class="wikitable"
{| class="wikitable"
|-
|-
|}
|}
14th July - End of GSoC (Approx. 38 hrs./week)
14th July - End of GSoC (Approx. 38 hrs./week) ('''Stay: '''IIT Kharagpur)
{| class="wikitable"
{| class="wikitable"
|-
|-
'''For more details and source code of the application shown below, I would like you to take a look at my blog post. [http://bytestorm.in/new-projects/interactive-programmers-shell/ Link]'''
'''For more details and source code of the application shown below, I would like you to take a look at my blog post. [http://bytestorm.in/new-projects/interactive-programmers-shell/ Link]'''
THE USER INTERFACE:
'''THE ARCHITECTURE'''
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 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)
If we intend to make a standalone installation of the program i.e. no external server dependency then we would need the following packages to be installed.
Installable using yum: '''NodeJS'''
Only the required environment libraries e.g '''gcc''' for C tutorials, '''JS''' is taken care by NodeJS, '''octave''' for Matlab codes, '''python''' for python dev etc.
A new web-activity (right now the default template works). This is the interface the students will be using. The screenshots attached are of the same web activity. About the tutorial part this application will be able load a tutorial file. Each tutorial file will have some levels. Each level needs the student to input a code and gives the explanation about the syntax/use of that code. Student can save a level to continue later on.
Tutorial files will be in json/xml format.
Further internet access will be required if the student wants to download more tutorials that is not packaged in default installation.
THE USER INTERFACE(AND THE TUTORIAL CREATOR):
The user interface would be implemented using HTML5 and JS. The GUI will mainly consists of two main parts namely the tutorial creator and the viewer.
The user interface would be implemented using HTML5 and JS. The GUI will mainly consists of two main parts namely the tutorial creator and the viewer.
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 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
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.
'''''LINK TO ANIMATED GIF OF THE DEBUGGER INTERFACE ([http://wiki.sugarlabs.org/images/f/fe/Final.gif LINK])'''''
* [[File:Final800 anim.gif|centre|thumb|800x800px|]]
'''A SCREENSHOT FROM THE SUGAR WEB-ACTIVITY'''
[[File:JsRan.png|thumb|1100x1100px||centre]]
[[File:Vdi2.png|centre|thumb|800x800px|]]
'''DEBUGGING A JAVASCRIPT CODE :'''
[[File:ErrorLog.png|thumb|1100x1100px||centre]]
[[File:Vdi3.png|centre|thumb|800x800px|]]
[[File:Vdi4.png|centre|thumb|800x800px|]]
[[File:CSaved.png|centre|thumb|1100x1100px|]]
'''RUNNING AN ERRONEOUS JAVASCRIPT CODE :'''
[[File:ErrorLog.png|thumb|800x800px||centre]]
[[File:CRan.png|thumb|1100x1100px||right]]
'''SAVING A C CODE TO SERVER'''
[[File:CSaved.png|centre|thumb|800x800px|]]
'''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.
The main GUI shown above is build usingJavascript and HTML/CSS.It communicates with a host computer (can be the device running Sugar itself) which is aNodeJSbased server. Support for languages depends on the compilers which are installed in the host computer.
The main GUI shown above is build usingJavascript and HTML/CSS.It communicates with a host computer (can be the device running Sugar itself) which is aNodeJSbased server. Support for languages depends on the compilers which are installed in the host computer.
I would probably be using the [https://github.com/adobe-research/theseus Thesus] library for visual debugging.
I would probably be using the some JS parser library, UglifyJS for visual debugging.
For checking flaws in code before running it I am familiar with two tools [http://www.splint.org/ Splint] and [https://github.com/danmar/cppcheck cppcheck]. I am looking into other possible solutions for this part.
For checking flaws in code before running it I am familiar with two tools [http://www.splint.org/ Splint] and [https://github.com/danmar/cppcheck cppcheck]. I am looking into other possible solutions for this part.
* '''If your project is successfully completed, what will its impact be on the Sugar Labs community? Give 3 answers, each 1-3 paragraphs in length. The first one should be yours. The other two should be answers from members of the Sugar Labs community, at least one of whom should be a Sugar Labs GSoC mentor. Provide email contact information for non-GSoC mentors.'''
* '''If your project is successfully completed, what will its impact be on the Sugar Labs community? Give 3 answers, each 1-3 paragraphs in length. The first one should be yours. The other two should be answers from members of the Sugar Labs community, at least one of whom should be a Sugar Labs GSoC mentor. Provide email contact information for non-GSoC mentors.'''
My opinion : First of all my answer to why programming is important is that there is a great fun in coding and that's something which will make you keep going to learn more about it. Also it just can't be learned by reading books or attending lectures, you have to try it out. Learning computer is very important to keep up the pace with the outer world. It also help you to understand how these computers, smartphones and those cool gadgets work. To me it is the easiest way to build things.
'''My opinion : '''First of all my answer to why programming is important is that there is a great fun in coding and that's something which will make you keep going to learn more about it. Also it just can't be learned by reading books or attending lectures, you have to try it out. Learning computer is very important to keep up the pace with the outer world. It also help you to understand how these computers, smartphones and those cool gadgets work. To me it is the easiest way to build things.
'''Walter: '''We want our users to be full-fledged participant, hence they need to learn to program. We don't provide as yet any good place for them to learn JS. This is that place.
'''Tony Anderson: '''One problem is to limit the scope of a project to something that is achievable in the available development time. The interactive tool should assist in working with javascript. The reference text is Eloquent Javascript. In the text there are a large number of examples of javascript illustrating programming concepts using javascript. Part I introduces javascript independent of HTML and CSS. The examples are proven using console.log so this interface needs to be supported.
* '''What will you do if you get stuck on your project and your mentor isn't around?'''
* '''What will you do if you get stuck on your project and your mentor isn't around?'''
===Miscellaneous===
===Miscellaneous===
* We want to make sure that you can set up a [http://developer.sugarlabs.org development environment] before the summer starts. Please do ''one'' of the following:
* '''We want to make sure that you can set up a [http://developer.sugarlabs.org development environment] before the summer starts. Please do ''one'' of the following:'''
** Send us a link to a screenshot of your Sugar development environment with the following modification: when you hover over the XO-person icon in the middle of Home view, the drop-down text should have your email in place of "logout".
** Send us a link to a screenshot of your Sugar development environment with the following modification: when you hover over the XO-person icon in the middle of Home view, the drop-down text should have your email in place of "logout".
[[File:Sugarlabs bsantraigi.png|thumb|1100x1100px|]]
[[File:Sugarlabs bsantraigi.png|thumb|1100x1100px|]]
* Describe a great learning experience you had as a child.
* '''Describe a great learning experience you had as a child.'''
* Is there anything else we should have asked you or anything else that we should know that might make us like you or your project more?
I got my first hands on my first desktop gifted by my uncle when I was in 6th standard. It was Pentium 3 loaded with Windows 98. I still remember how obsessed I was with that computer for next 4 years. Sometime later I made an animation using powerpoint and a clip art (tear down the clip art and move it at every slide :P ). After I did that I was so damn happy that I would show it to anyone who came to our house. Anyone would say I am nostalgic that I still cherish those memories.
* '''Is there anything else we should have asked you or anything else that we should know that might make us like you or your project more?'''
Truly said I have had this idea for some time in my mind but I couldn't get any good platform where I could have implemented it. So I started looking into the various educational organizations taking part in GSoC 2015. Later I came across the project idea Interactive JavaScript Shell here and it is the perfect suit for my project idea. So, I look forward to getting selected in this project.
Truly said I have had this idea for some time in my mind but I couldn't get any good platform where I could have implemented it. So I started looking into the various educational organizations taking part in GSoC 2015. Later I came across the project idea Interactive JavaScript Shell here and it is the perfect suit for my project idea. Also sugar labs is the perfect place for this project because it aims helping that part of the community who needs it most. So, I look forward to getting selected in this project.
[[Category:2015 GSoC applications]]
[[Category:2015 GSoC applications]]