This blog post is to summarize the work done in the First Phase of Google Summer of Code @ 2023 for the project Development and integration of Vue.js simulator.
Previous year, the simulator was decoupled from the main repository and was being developed as an independent repository. This year the simulator is being integrated with the main repository as git submodule. With this, a static build of the vue simulator will be served from the main repository and users will be able to use the simulator from circuitverse.org website.
Also, we added the proxy in the simulator dev server so when the project is being developed using
vite dev developers can use the api endpoints from the main repository hosted locally or remotely.
api/v1format for simulator
As our target is to be able to operate the simulator independently without any dependency on the main repository, new api endpoints were created for the simulator. this included creation of the following api endpoints:
GET /api/v1/projects/:id/check_edit_access- To check if the signed-in user has edit access to the project
GET /api/v1/projects/:id/circuit_data- Return the circuit data as a json object if user has view access to the project
PATCH /api/v1/projects/update_circuit- Update the circuit data of the project if user has edit access to the project
POST /api/v1/projects- To create a new project with circuit data
POST /api/v1/simulator/post_issue- To post an issue to Slack channel using Slack hooks
POST /api/v1/simulator/verilogcv- To convert the verilog code to circuitverse simulator compatible json object
JWT was implemented for the circuitverse.org website and the vue simulator. This was done to make the simulator independent of the main repository and to make it more secure. The JWT token is generated from the main repository and is stored in the browser cookie as secure and httpOnly cookie. Depending on whether the user selected the
remember me option, the cookie is saved either as session based or with bi-weekly expiry. The JWT token is then used to authenticate the user for the simulator api requests.
With the creation of the new api endpoints and jwt setup it was time to implement the api endpoints in the vue simulator. The following structure was followed for the implementation:
Previously the simulator used the default browser confirm(), alert() & prompt() for the confirmation of deletion of circuits, renaming of circuits, saving of circuits etc. This was replaced with custom vue components to make the simulator more user-friendly.
Previously when a new project was created the user was redirected to the project details edit page to update the project details. But to make the simulator independent of the main repository, it was necessary to allow users to update project details from the simulator itself which also made the user experience better.
This was achieved with a dialog box to update the project details from the simulator.
At the time of implementing the update project details dialog box, there was no pre-setup
wysiwyg editor available which was compatible with our project. So a custom
wysiwyg editor using the tiptap library was created as a vue component.
With the introduction of the import and export of circuits as
.cv files, users will be able to import and export their circuits as
.cv files. This will allow users to share their circuits with other users and also allow users to import circuits from other users. Also, this would help the users to keep a local backup of their circuits.
The user menu was updated to make it more user-friendly and to reduce the complexity of implementing new features.
The navbar buttons were updated to reduce the complexity and DOM manipulation but most importantly to make the navbar for mobile devices more user-friendly.
Fix custom shortcut to work on load, reduce DOM manipulation and use vue interpolation.
week 1Simulator integration with main repository
week 2New API endpoints creation
week 2JWT implementation for simulator
week 3 & 4Implementation of new api endpoints in simulator
week 4Implementation of new features in simulator
week 5 & 6QuickMenu
week 5 & 6VerilogEditor
week 5 & 6ReportIssue
week 5 & 6CustomShortcutFix
week 5 & 6User Menu revamp
week 5 & 6Navbar revamp
Over the past few weeks, I’ve had an incredible journey contributing to CircuitVerse. The community has been supportive and motivating, and I had the freedom to meticulously plan and execute my tasks, all under the helpful guidance of my mentors. I’ve learned a lot about the inner workings of a large-scale project, and I’ve gained a lot of confidence in my abilities as a developer.