UCSC Tech4Good
APIs & Frameworks
Overview
-UC Santa Cruz's Tech4Good Lab ↗ is a research organization dedicated to social computing and developing systems to help individuals and communities to thrive in work, education, and more. During my time at the lab, I worked on the APIs and Frameworks team where I was involved in adding functionality to Causeway ↗, an educational app where users can learn skills like web development through streamlined learning pathways, project hierarchies, mentorship, and collaboration.
+UC Santa Cruz's Tech4Good Lab ↗ is a research organization dedicated to social computing + and developing systems to help individuals and communities to thrive in work, education, and more. During my time at the lab, I worked on the APIs and Frameworks team where I was involved in adding functionality + to Causeway ↗, an educational app where users can learn skills like web development through streamlined + learning pathways, project hierarchies, mentorship, and collaboration.
Task
-My teammate and I were responsible for developing an integrated development environment (IDE) that could be added to Causeway to allow users to learn programming concepts hands-on. The IDE had to include the following components:
+My teammate and I were responsible for developing an integrated development environment (IDE) that could be added to Causeway to allow users to learn programming concepts hands-on. The IDE had to include the following + components:
To accomplish this task, we used the Stackblitz WebContainers API ↗, which allows us to boot up a WebContainer― a browser-based runtime for executing applications and operating system commands. From there, we can populate the container's file system, install packages, and finally run the IDE server in a browser window.
+To accomplish this task, we used the Stackblitz WebContainers API ↗, which allows us to boot up a WebContainer― + a browser-based runtime for executing applications and operating system commands. From there, we can populate the container's file system, install packages, and finally run the IDE server in a browser window.
Development
Setting up the WebContainer
-First, we constructed the WebContainer using Vite ↗, a development tool equipped with a dev server and used for building modern web apps. This involved constructing referenceable HTML objects for our code editor/textarea and output boxes as depicted below:
+First, we constructed the WebContainer using Vite ↗, a development tool equipped with a dev server and used for + building modern web apps. This involved constructing referenceable HTML objects for our code editor/textarea and output boxes as depicted below:
- Then, we installed the WebContainers API package and created an event listener for booting up a WebContainer instance, and imported an Express app to the WebContainer, which contains the files index.js (for app startup and routing) and package.json (to handle dependencies), into our main JS module. At this point, we were able to load the contents of a file in the code editor.
+Then, we installed the WebContainers API package and created an event listener for booting up a WebContainer instance, and imported an Express app to the WebContainer, which contains the files index.js (for app startup and routing) and package.json (to handle dependencies), into our main JS module. At this point, we were able to load the contents of a file in the code editor.
Running the Dev Server
-To be able to run commands such as "npm install" from inside the WebContainer, we created an installDependencies function inside the event listener. From there, we created another function called startDevServer, which
+To be able to run commands such as "npm install" from inside the WebContainer, we created an installDependencies function inside the event listener. From there, we created another function called startDevServer, + which
This allowed us to run the Express app inside the WebContainer, and successfully update the output box based on the code in the code editor.
Creating a File System Tree
-We utilized the API's file system operations to build a file tree, which involved recursively traversing through the directories with the readdir function. Then, we used mat-tree (an Angular Material design component) to create the file tree pane UI. In order to make a selected file editable in the code editor, we created a function to write changes to the code editor and used CodeMirror to listen to the value changes and immediately update the output box accordingly. We also styled the code editor for better readability using the corresponding CodeMirror scss code.
+We utilized the API's file system operations to build a file tree, which involved recursively traversing through the directories with the readdir function. Then, we used mat-tree (an Angular Material + design component) to create the file tree pane UI. In order to make a selected file editable in the code editor, we created a function to write changes to the code editor and used CodeMirror to listen to the value + changes and immediately update the output box accordingly. We also styled the code editor for better readability using the corresponding CodeMirror scss code.
Connecting a Terminal
-Finally, we used Xterm.js to embed a terminal in our IDE, which is the same terminal used by Visual Studio Code and other popular IDEs. We constructed a referenceable HTML object for the terminal window and redirected the output of our installDependencies and startDevServer methods to the terminal. Then, we created a button to toggle the visibility of the terminal for a better user experience.
+Finally, we used Xterm.js to embed a terminal in our IDE, which is the same terminal used by Visual Studio Code and other popular IDEs. We constructed a referenceable HTML object for the terminal window and redirected + the output of our installDependencies and startDevServer methods to the terminal. Then, we created a button to toggle the visibility of the terminal for a better user experience.
Reflections
-Coming from very little experience with JavaScript, this task was super rewarding and helped me learn a lot about working with APIs and frameworks like Angular and Express.js. I enjoyed being able to work in a team alongside other passionate individuals and contribute to a cause that could improve means of education for future students!
+Coming from very little experience with JavaScript, this task was super rewarding and helped me learn a lot about working with APIs and frameworks like Angular and Express.js. I enjoyed being able to work in a team + alongside other passionate individuals and contribute to a cause that could improve means of education for future students!