graasp / graasp-app-code Goto Github PK

View Code? Open in Web Editor NEW

3.0 11.0 2.0 12.32 MB

A flexible code editor for the Graasp ecosystem.

Home Page: https://apps.graasp.eu/5acb589d0d5d9464081c2d46/5d4d33abf2187d1a59454ab5/latest/index.html

License: MIT License

JavaScript 87.05% HTML 11.08% Shell 1.75% CSS 0.13%

graasp-app-code's Introduction

Warning

Project Archived

This app was developed for graasp.eu and has been archived when graasp.eu has been sunset (Jan 2024).

If you are looking for a replacement, take a look at the code capsule app. It allows you to run python code in the browser and even supports other use cases like code reviews. And it runs on graasp.org the new version of Graasp !

Graasp App: Code

Getting Started

To run this app locally you need to have Node and NPM installed in your operating system. We strongly recommend that you also have Yarn. All of the commands that you will see here use yarn, but they have an npm equivalent.

Download or clone the repository to your local machine, preferably using Git.

Installation

Inside the project directory, run yarn to install the project dependencies.

You will also need to create a file called .env.local with the following contents.

REACT_APP_GRAASP_DEVELOPER_ID=
REACT_APP_GRAASP_APP_ID=
REACT_APP_GRAASP_DOMAIN=localhost
REACT_APP_HOST=
REACT_APP_VERSION=
REACT_APP_BASE=

If you are going to deploy the application to our development server, you will need to create a .env.dev file in your root folder following the patter below. Replace the value between <> with those that you received from our developers. Please make sure you do not commit or share the values between <> with anyone, as they are confidential.

REACT_APP_GRAASP_DEVELOPER_ID=<REACT_APP_GRAASP_DEVELOPER_ID>
REACT_APP_GRAASP_APP_ID=<REACT_APP_GRAASP_APP_ID>
REACT_APP_GRAASP_DOMAIN=graasp.eu
REACT_APP_HOST=apps.dev.graasp.eu
REACT_APP_VERSION=latest
REACT_APP_BASE=//$REACT_APP_HOST/$REACT_APP_GRAASP_DEVELOPER_ID/$REACT_APP_GRAASP_APP_ID/$REACT_APP_VERSION/
NODE_ENV=production
BUCKET=graasp-apps-dev
AWS_DEFAULT_REGION=us-east-1
AWS_ACCESS_KEY_ID=<AWS_ACCESS_KEY_ID>
AWS_SECRET_ACCESS_KEY=<AWS_SECRET_ACCESS_KEY>

If you are going to deploy the application to our production server, you will need to create a .env.prod file in your root folder following the patter below. Replace the value between <> with those that you received from our developers. Please make sure you do not commit or share the values between <> with anyone, as they are confidential.

REACT_APP_GRAASP_DEVELOPER_ID=<REACT_APP_GRAASP_DEVELOPER_ID>
REACT_APP_GRAASP_APP_ID=<REACT_APP_GRAASP_APP_ID>
REACT_APP_GRAASP_DOMAIN=graasp.eu
REACT_APP_HOST=apps.graasp.eu
REACT_APP_VERSION=latest
REACT_APP_BASE=//$REACT_APP_HOST/$REACT_APP_GRAASP_DEVELOPER_ID/$REACT_APP_GRAASP_APP_ID/$REACT_APP_VERSION/
NODE_ENV=production
BUCKET=graasp-apps-prod
AWS_DEFAULT_REGION=us-east-1
AWS_ACCESS_KEY_ID=<AWS_ACCESS_KEY_ID>
AWS_SECRET_ACCESS_KEY=<AWS_SECRET_ACCESS_KEY>

Running Locally

Navigate to the cloned or forked project directory using the command line, type yarn start. The app will automatically run on localhost:3000 with a local database running in parallel on localhost:3636. Any changes you make should be automatically rendered in the browser.

graasp-app-code's People

Contributors

Stargazers

Watchers

Forkers

nagai-takayuki 1kastner

graasp-app-code's Issues

output print statements for python

update diff

allow student to stop code that is running

teacher cannot remove header, default and footer codes simply by deleting

replace monaco editor

Currently we use the Monaco Editor for the diffs, but because of issues with Jest, it would be easiest to replace it with another simple diff editor. We do not use many of the functions it offers, so it's a good idea to go with a variation of the diff or split editors from React Ace or something similar.

run code on control/cmd enter

do not show header to students

Show buttons on the side instead.

support images

support full screen

default layout to vertical

show graasp users that interact via public page

Adapt code app to run in Graasp desktop

Adapt build files to include or exclude code (base url)

update pyodide

Use latest version of Pyodide for the Code App.

Pyodide is used in many places in the app, in different ways.

Mozilla Pyodide code and assembler is in either Amazon or public/vendor/pyodide:

packages.json
pyodide-v0.14.1.js
pyodide.asm.data
pyodide.asm.data.js
pyodide.asm.js
pyodide.asm.wasm

Graasp Service Pyodide's Pyodide class is in either Amazon or public/vendor/pyodide:

pyodide-v0.1.0.js (Pyodide.js in the Graasp Service Pyodide Repository)

Graasp Service Pyodide's PyWorker class is in src/vendor
Graasp Service Pyodide's worker.js class is copy/pasted as a string in src/workers/python.js (line 18).

The idea is to liaise with @ypiguet-epfl to update the code in graasp-service-pyodide and then update the corresponding bits here.

Also, it might be good to go fully online (i.e. serve the Pyodide dependencies directly in the code, rather than through AWS).

Finally, it would be good to distribute the Pyodide dependencies through an NPM repository, that way we can just import them in the code, rather than copy pasting code directly.