Cyclone4Web - An online integrated development environment for Cyclone

Online Instance on Maynooth University

Guide

1. Goals of this project
2. Before running
3. Run project
4. Project layout
5. Functions
6. Unit Test
7. Third-party frameworks in Cyclone4Web

---

1. Goals of this project

This project is my final homework of CS642[A] — Msc Computer Science (Applied) Project .

The whole project adopts Flask framework, this is a micro web framework written in Python and depends on the Jinja template engine and the Werkzeug WSGI toolkit, to constructing a simple online integrated development environment for Cyclone. Cyclone is designed to provide a general solution to problems that can be described as a graph. Cyclone provides a specification language that allows users to describe a graphical structure along with conditions to be met and automatically solves them for you.

2. Before running

We need to install some softwares and tools to support the project.

• Install Python 3.10.5 in your machine first.
• Clone Cyclone4Web to your machine (Linux is essential).
• (Optional) Open CMD/Terminal and install the virtualenv by using the following command (this is a type of library that allows us to create a virtual environment and use it):

  > pip install virtualenv
  

• (Optional) Enter the project folder running the following command to create a virtual environment:

  > python3 -m venv env 
  ...
  > source env/bin/activate 
  

• Install all the relavant dependencies by using the following command:

  (env) > pip install -r requirements.txt
  

• Make sure you have java (64 bit is recommended) installed on your machine.
• Download Cyclone and Unzip it to a folder called cyclone.
• Copy the entire cyclone folder to the root of the project
• Install graphviz on your machine

  > sodu apt install graphviz
  

This is the well-configured project structure.

3. Run project

Open CMD/Terminal and execute the following command:

(env) > python3 app.py
    * Serving Flask app 'flaskr'
    * Debug mode: on
    * Running on http://127.0.0.1:8080 (Press CTRL+C to quit)
    * Restarting with stat
    * Debugger is active!
    * Debugger PIN: nnn-nnn-nnn

And then, you can visit the project by clicking the local link.

This is the screenshot of HomePage:

4. Project layout

As to the project layout you can visit Project Layout in Flask

This project layout will look like this:

./Cyclone4Web
├── flaskr/
│   ├── __init__.py
│   ├── config.py
│   ├── unit_test.sql
│   ├── src/
│   │   ├── __init__.py
│   │   └── editor_view.py
│   ├── templates/
│   │   ├── about.html
│   │   ├── error.html
│   │   ├── index.html
│   │   └── _layouts/
│   │       ├── default.html
│   │       ├── footer.html
│   │       ├── head.html
│   │       ├── header.html
│   │       └── script.html
│   └── static/
│       ├── js/
│       ├── css/
│       └── img/
├── Cyclone/
├── venv/
├── doc/
├── tmp/
├── ex.sh
├── dot2png.sh
├── app.py
├── MANIFEST.in
├── LICENSE
└── .gitignore

Foloders description:

./Cyclone4Web/flaskr, a Python package containing the application code and files.

./Cyclone4Web/venv, a Python virtual environment where Flask and other dependencies are installed.

./Cyclone4Web/doc, a folder for documents.

./Cyclone4Web/tmp, a foler used for storing temtorary data when server running.

./Cyclone4Web/Cyclone, an unziped Cyclone folder containing a runtime environment of Cyclone.

./Cyclone4Web/flaskr/src, a Python source code folder containing the critical code of interfaces.

./Cyclone4Web/flaskr/static, a folder containing the general static resources including .js, .css, and images.

./Cyclone4Web/flaskr/templates, a folder containing all the .html pages.

./Cyclone4Web/flaskr/templates/_layouts, a folder containing common .html templates that are abstracted using Jinja.

Files description:

./Cyclone4Web/app.py, an entrance of the project.

./Cyclone4Web/ex.sh, a Shell script used for executing the .cyclone file in command-line.

./Cyclone4Web/dot2png.sh, a Shell script used for translate a .dot file into an image file.

./Cyclone4Web/flaskr/__init__.py, a crucial Python file where reads the configuration and defines the interfaces of the homepage entrance and error handlers when project starting.

./Cyclone4Web/flaskr/config.py, a Python file containing two classes namely Config and Constants. The first is used for the configuration of Flask and the other is used for maintaining constants.

./Cyclone4Web/flaskr/unit_test.sql, a test Python file including unit tests for all interfaces

./Cyclone4Web/flaskr/src/editor_view.py, the main Python file including all the definitions of critical interfaces.

./Cyclone4Web/flaskr/static/js/editor.js, the main Javascript file including all the logic that is responsible for dealing with the interfaces.

5. Functions

1. HomePage(http://localhost/editor)
   • website theme change
   • authorization (user isolation)
   • integrate an online code editor
     • syntax highlight
     • simple code complementation
     • the flexible size
     • various themes
     • shortcuts(Run -> Crtl + R | Update -> Crtl + U)
   • integrate an output console
     • the flexible size
     • read only
   • complie the online code and run it
   • save the online code as a local file
   • clear the code in the online code editor
   • support to upload a .cyclone file to the online code editor(Maximum 100KB)
   • a switch of option-trace
   • a switch of option-timeout
   • a loading covering when doing request
   • support to extract the .trace file
   • support to convert the .dot file into an image
   • list the examples in the Cyclone folder
   • put the example code onto the online code editor when clicking
   • a link to the official website of the Cyclone Tutorial
   • a link to the Cyclone author
2. AboutPage(http://localhost/about)
3. ErrorPage(http://localhost/error)
   • 404 Error handler
   • 405 Error handler

6. Unit Test

Unit tests basically contain correctness tests for all interfaces.

1. You need to modify a little code in editor_view.py before running the unit tests:

   ...
   def _get_user_id():
       # Production
       # return request.cookies.get(const.FIELD_USER_ID)
       # Test (We pass parameters instead of using the cookie)
       return request.form.get(const.FIELD_USER_ID)
   ...

2. The unique id will be automatically produced when a user open the web browser to visit Cyclone4Web. It is actually a name of one of the folders under the tmp folder`

   

3. And then assign an avaiable unique id to user_id in Unit tests:

   ...
   user_id = "use your avaiable unique id to replace"
   ...

4. Finally, running the following command to verify:

   (env) > pytest flaskr/ 
   

This is the result in my machine:

7. Third-party frameworks in Cyclone4Web

Name	Version	Link	Description
js-cookie	3.0.1	https://github.com/js-cookie/js-cookie	A simple, lightweight JavaScript API for handling cookies.
Notify.js	0.4.2	https://notifyjs.jpillora.com	Notify.js is a jQuery plugin to provide simple yet fully customisable notifications.
jquery-loading	2.0.0-rc.2	https://carlosbonetti.github.io/jquery-loading	jquery-loading can add and manipulate loading states of any element on the page.
Ace	1.1.5	https://ace.c9.io	Ace is an embeddable code editor written in JavaScript.
Bootstrap	2.3.2	https://getbootstrap.com/2.3.2	Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development.
Flask	2.2.2	https://flask.palletsprojects.com/en/2.2.x	Flask is a micro web framework written in Python and depends on the Jinja template engine and the Werkzeug WSGI toolkit.
Jinja2	3.1.2	https://jinja.palletsprojects.com/en/3.1.x	Jinja is a fast, expressive, extensible templating engine. Special placeholders in the template allow writing code similar to Python syntax. Then the template is passed data to render the final document.
pytest	7.2.1	https://docs.pytest.org/en/7.2.x	The pytest framework makes it easy to write small, readable tests, and can scale to support complex functional testing for applications and libraries.

LICENSE

Apache License Version 2.0 © freestyletime