Interactive Programming Flowchart and Code Generation Using Html5

Interactive Programming Flowchart and Code Generation Using HTML5

Flowcharts are used in designing and documenting complex processes or programs. Like other types of diagrams, they help visualize what is going on and help to understand a process which can also assist in finding flaws, bottlenecks, and other less-obvious features within. In the IT field, flowcharts have been used as a stepping stone for aspiring programmers and students. As such, this project will provide an online graphical authoring tool which would allow students to write, execute, analyse and debug a program logic using flowcharts. The approach is designed to emphasize more on algorithm rather than the syntax of a specific programming language in which students can much easily understand the logical flow of data. The created flowchart can be run step-by-step interactively in which updating states and values can be explained and understood in a procedural manner. This is the process of taking an abstract model to a concrete model to which is close to an actual implementation. From this, a source code can be generated into a technology that is compatible with many different platforms/languages such as pseudo code, C, .NET, PHP and more where the student can later relate and theoretically execute.

Project Scope This thesis project aims to design and develop an open interactive diagram authoring tool which would assist students in learning while testing a program data flow and algorithm with dynamic debugging capability that would allow immediate programming flexibility. The application shall consist of multiple sub-systems of different yet related technologies to produce a rich and innovative experience and learning. A user management system will be the back end of the application using PHP and MySQL, which will comprise of registration, login and managing of online contents.

An authoring environment will be the front end providing a friendly drag and drop interface, save/load capability...