Назад к портфолио
Веб-приложение / IDE

Online Compiler

Браузерная IDE для редактирования, запуска и отладки кода с интерактивной консолью и симуляцией Arduino и ESP32.

ТИПКоммерческий проект
Online Compiler — снимок проекта 1
01 / О проекте

О проекте

Online Compiler — браузерная IDE с собственным серверным движком выполнения программ. Код запускается сервером и локальными Docker-образами, а не передаётся в Judge0 или Piston. Monaco Editor отвечает за редактирование, xterm.js и WebSocket — за интерактивную консоль с настоящим PTY.

Помимо текстового кода, среда охватывает Scratch 3 и Blockly, примеры программ, отладку и симуляцию микроконтроллеров. Arduino Uno эмулируется в браузере, сценарии ESP32 используют QEMU. В предоставленной версии портфолио описаны поддержка 41 языка, отладчики для 7 языков и библиотека проверенных сниппетов.

02 / Задача

Задача

Объединить редактирование, выполнение, ввод в консоль и отладку в одном браузерном окружении с собственным движком.

03 / Что реализовано

Что реализовано

Monaco Editor, несколько файлов и библиотека примеров программ.

Настоящий интерактивный терминал: stdin, Ctrl+C и Ctrl+D.

Собственное выполнение кода и Docker-окружения для языков программирования.

Отладчики и автоматическая проверка эталонных сниппетов.

Blockly, Scratch 3, сцена и спрайты для визуального программирования.

Симуляция Arduino / ESP32 и CI-проверки среды.

04 / Технологии

Технологии

PythonDjangoPostgreSQLWebSocketMonaco Editorxterm.jsDocker

Архитектура и роль технологий

Python
Обработка данных, автоматизация и серверные компоненты.
Django
Серверные маршруты, модели данных и логика веб-приложения.
PostgreSQL
Реляционное хранение связанных данных и транзакционная согласованность.
WebSocket
Двусторонний обмен событиями без постоянного опроса сервера.
Monaco Editor
Редактор кода внутри браузерной среды.
xterm.js
Интерфейс интерактивного терминала в браузере.
Docker
Воспроизводимые окружения и контейнерный запуск компонентов.
05 / Как это работает

Как это работает

  1. Выбрать язык, пример или блочную среду.
  2. Написать программу и запустить собственный движок.
  3. Взаимодействовать с консолью или изучить выполнение в отладчике.
СЛЕДУЮЩИЙ ШАГ

Есть задача? Найдём решение.

Расскажите, что нужно сделать. Уточним детали и предложим следующий шаг.

Обсудить проект