Веб-среда разработки и обучения

За последние годы в Сети появилось множество веб-сервисов, предназначенных для хранения и редактирования файлов определенного типа и выполняющих функции, которые ранее были присущи приложениям, устанавливаемым на локальном компьютере. В качестве примера можно привести комплекс Google Drive, предоставляющий возможность обработки текстовых документов, электронных таблиц, презентаций и рисунков. Сами файлы при этом хранятся на сервере, а работа с ними осуществляется на клиентском компьютере через браузер без необходимости установки каких-либо дополнительных программ. Аналогичной функциональностью обладает веб-сервис Microsoft Office 365.

В то же время аналоги таких настольных приложений, как интегрированные среды программирования (Integrated Development Environment, IDE), в Web пока представлены недостаточно. Основная причина состоит в сложности подобной разработки — здесь нужно не только редактировать файлы программ, но и запускать их на сервере, что требует больших мощностей, грамотной политики выделения ресурсов и повышенных средств безопасности для исполняемого кода. Кроме того, затруднено и создание адекватного задаче интерфейса в браузере; основные проблемы здесь — меньшее разнообразие элементов пользовательского интерфейса, большее время их загрузки и отклика на события, генерируемые пользователем, невозможность хранения на стороне клиента больших массивов информации, необходимых, например, для осуществления интерактивной подсказки по коду. Поэтому среди Web-приложений, связанных с разработкой программ, пока преобладают так называемые online-компиляторы с ограниченным интерфейсом и минимальной интерактивностью.

Перечислим некоторые распространенные веб-среды разработки программ.

IDEOne — средство трансляции программ на 50 языках программирования, компиляторы которых расположены на сервере. Интерактивный вво/-вывод отсутствует. Представляет собой онлайн-компилятор, а не полноценную среду разработки.
Cloud9 IDE — полноценная Web-среда, поддерживающая несколько языков, в том числе Python и Ruby. Предоставляет пользователям хранилище проектов на сервере, но интерактивный ввод/вывод не обеспечивается.
Compilr — инструмент компиляции проектов, написанных на 10 языках программирования, в том числе Cи, C++, C#, Python, Java, JavaScript, VB и PHP. Обеспечивает интерактивный ввод/вывод и предоставляет хранилище проектов на сервере.
CodeRun Studio — полноценная бесплатная веб-среда разработки для языков C#, JavaScript, PHP с возможностью хранения проектов на сервере. Однако среди многочисленных типов проектов отсутствуют консольные приложения для C#.
SourceLair — минималистский по интерфейсу веб-сервис, аналогичный по функциональности IDEOne. Позволяет компилировать и запускать программы на 15 языках программирования. Вывод при этом осуществляется на той же интернет-странице, ввод надо формировать предварительно в отдельной вкладке, интерактивный ввод/вывод отсутствует. Отсутствует также возможность сохранять проекты на сервере.

Среда ProgrammingABC.NET WDE

В 2009 году на факультете математики, механики и компьютерных наук Южного федерального университета для целей дистанционного обучения была начата разработка бесплатной веб-среды программирования PascalABC.NET WDE (Web Development Environment, WDE). Первоначально среда была ориентирована на использование языка программирования PascalABC.NET, компилятор и IDE которого также были разработаны в ЮФУ. В 2012 году в веб-среду была добавлена поддержка новых языков (C#, VB.NET, IronPython, F#), а среда была переименована в ProgrammingABC.NET WDE. Среда ориентирована преимущественно на обучение программированию, поэтому в ней имеется ряд специализированных сервисов, среди которых следует отметить встроенный электронный задачник Programming Taskbook.

Рис. 1. Пример интерфейса ProgrammingABC.NET WDE

На рис. 1 приведен пример интерфейса среды ProgrammingABC.NET WDE. Горизонтальное меню здесь заменяют панель инструментов и боковая панель с разделами авторизации, справки, файлового браузера, примеров программ и опубликованных файлов. Слева внизу располагается окно вывода, а между редактором и окном вывода находится строка статуса.

Среди возможностей ProgrammingABC.NET WDE выделяются две основные группы: базовые средства среды программирования и функционал Web-приложения. Среда программирования предоставляет следующие возможности: редактирование программы с подсветкой синтаксиса, компиляция и запуск на выполнение, прерывание процесса выполнения, интерактивный ввод/вывод (то есть возможность осуществлять ввод, приостанавливая выполнение программы на сервере), поддержка компиляции модулей и библиотек, скачивание исполняемых файлов на локальный компьютер. Как веб-приложение среда WDE позволяет сохранить программу на сервере, опубликовать программу в общем каталоге для незарегистрированных пользователей и открыть доступ к своей программе на чтение для зарегистрированных пользователей. Зарегистрированным пользователям предоставляется также возможность манипуляции файлами и папками на сервере, находящимися в личном каталоге.

Кроме того, в ProgrammingABC.NET WDE имеются компоненты, отсутствующие в других средах, — модуль графики, позволяющий создавать простые графические и анимационные приложения, и электронный задачник по программированию.

Компиляция и выполнение

Компиляция и выполнение программы в среде ProgrammingABC.NET WDE производятся на сервере, где расположены компиляторы всех языков, поддерживаемых средой (линейка .NET: PascalABC.NET, C#, VB.NET, F# и IronPython). Браузер пользователя синхронизируется с сервером посредством специальных запросов AJAX. При выполнении команды запуска программы ее текст извлекается из Web-редактора и посылается на сервер, на котором запускается соответствующий компилятор. При успешной компиляции программа запускается на выполнение, результаты возвращаются клиенту и отображаются в окне вывода.

При инициации ввода в консольной программе ее выполнение на сервере приостанавливается и клиенту возвращается сигнал о том, что ожидается ввод. В ответ на это в браузере клиента на странице веб-среды открывается поле ввода, в которое пользователь вводит данные. Введенные данные пересылаются на сервер, и программа возобновляет свою работу. Основная проблема приведенной схемы взаимодействия клиента и сервера состоит в распознании ситуации, когда запущенная на сервере программа приостановлена из-за выполнения оператора ввода. Перехват ввода возможен не во всех языках программирования, поэтому проблема решается двумя способами. В языке PascalABC.NET оператор ввода переопределяется таким образом, чтобы обеспечивалась посылка клиенту сигнала о том, что производится ввод. В остальных языках оператор ввода переопределить нельзя, поэтому перед компиляцией программы ее текст анализируется на наличие данного оператора, после чего совершается подмена вызова специальной функцией ввода, которая и посылает нужный сигнал. Среда ProgrammingABC.NET является одной из немногих, поддерживающих возможность интерактивного ввода/вывода.

Публикация программ

Публикация программы в веб-среде предназначена для ее просмотра и выполнения другими пользователями. Имеется два способа публикации: публикация в общей папке (данный способ публикации доступен для всех пользователей) и открытие общего доступа к файлу программы, расположенному в личной папке (подобный способ публикации доступен для зарегистрированных пользователей). В первом случае ссылка на опубликованную программу имеет вид pascalabc.net/WDE/?file=01090.pas, где 01090.pas — имя опубликованного файла, присваиваемое ему автоматически при публикации. Во втором случае ссылка выглядит иначе: pascalabc.net/WDE/?shared=miks/grf.pas, где miks — имя пользователя, grf.pas — имя программы в папке пользователя. В обоих случаях при переходе по ссылке в браузер загружается веб-среда ProgrammingABC.NET, в которой отображается копия опубликованного файла. Пользователь может немедленно запустить данную копию программы на выполнение, изменить ее текст, сохранить в своей папке (при этом исходный текст опубликованного файла не изменяется). Такой вариант публикации программ на сайтах, обеспечивающий загрузку программы в веб-среду с возможностью немедленного исполнения, более гибок и нагляден, чем традиционный способ, при котором просто приводится текст программы.

Способ публикации программ в общей папке подходит для создания сборников программ по различным тематикам, что удобно при организации дистанционного обучения. Наиболее естественно оформить такой сборник в виде интернет-страницы, содержащей ссылки на программы, а также пояснения к этим программам. Подобный механизм реализован на страницах «Программы и алгоритмы для начинающих» и «Программы и алгоритмы для студентов» сайта системы PascalABC.NET.

Другим способом применения публикации в общей папке при дистанционном обучении может быть подготовка программ-заготовок для различных учебных заданий, включающих формулировку задания (в виде комментария) и, возможно, начальные и завершающие фрагменты программы, связанные с описанием переменных, вводом исходных данных и выводом результатов. Таким образом, папка общего доступа может использоваться преподавателем для размещения учебных материалов и заготовок учебных заданий. Для проверки выполненных заданий удобнее хранить программы в личных папках студентов: выполнив очередное задание и сохранив его в некотором файле в своей личной папке, студент открывает к нему общий доступ и сообщает ссылку на этот файл преподавателю. При этом для доработки задания (если преподаватель обнаружил недочеты) студенту достаточно исправить свою программу, оставив ее в режиме общего доступа, что позволит преподавателю через установленный промежуток времени сделать повторную проверку задания.

Язык PascalABC.NET

Важной особенностью среды ProgrammingABC.NET является поддержка языка программирования PascalABC.NET, объединяющего расширения Паскаля, реализованные в среде Delphi, с возможностями платформы .NET. Сохраняя базовые черты языка Паскаль, делающие его одним из лучших языков для начального обучения программированию, язык PascalABC.NET содержит расширения и библиотеки, связанные с современными технологиями программирования. Язык включает ряд расширений, в том числе внутриблочные описания переменных, методы в записях, операцию new для создания объектов, определение методов внутри классов. Наряду с традиционными системными процедурами и функциями Паскаля, в программах на языке PascalABC.NET можно использовать стандартную библиотеку классов .NET. Язык включает все средства, характерные для .NET-языков, в частности, единый механизм обработки исключений, единый механизм управления памятью в виде сборки мусора, а также возможность совместного использования модулей, написанных на разных .NET-языках.

В компиляторе языка PascalABC.NET реализован вариант стандарта OpenMP для распараллеливания программ на многопроцессорных системах с общей памятью. В состав стандартных библиотек системы PascalABC.NET входит библиотека MPI, позволяющая разрабатывать распределенные параллельные программы.

Интегрированная среда программирования PascalABC.NET в настольном варианте имеет минимум настроек и практически не создает дополнительных файлов, однако содержит ряд средств, упрощающих процесс разработки программ: подсветку синтаксиса, подсказку по коду (включающую подсказку по точке, подсказку по параметрам подпрограмм, всплывающую подсказку по коду), форматирование текста программы, переход к определению и реализации имени, элементы рефакторинга. Повышению эффективности данной среды при обучении программированию способствует включение в ее состав электронного задачника Programming Taskbook и ряда специализированных модулей с упрощенным интерфейсом (модули школьных исполнителей «Робот» и «Чертежник», модуль растровой графики GraphABC, модуль векторных графических объектов ABCObjects, модуль Collections упрощенных коллекций и др.).

Работа с графикой

Реализация графических программ для Web-среды программирования должна кардинально отличаться от реализации графики в настольных приложениях, в частности, на стороне клиента для визуализации графики необходимо использовать только средства браузера. Исходя из этого, в среде ProgrammingABC.NET графика реализуется на основе тега

Специализированный для Web-среды модуль графики Graph включает функции рисования графических примитивов, а также объекты для работы с цветами, перьями, кистями, шрифтами и графическим окном. Реализация этого модуля включает протокол передачи графических команд клиенту в компактной форме — для передачи графических команд используется обычный поток вывода. На стороне клиента графические команды переводятся в соответствующие команды JavaScript, которые и осуществляют рисование на битовом образе, соответствующем тегу

Рис. 2. Результат выполнения графической программы

Благодаря компактной форме передаваемых на клиент графических команд, обеспечивается высокая скорость прорисовки графики, что позволяет не только быстро генерировать изображения, но и создавать несложные анимационные приложения.

Электронный задачник

Поддержка нескольких языков программирования позволила интегрировать в среду ProgrammingABC.NET универсальный вариант задачника по программированию Programming Taskbook, что существенно расширило применение веб-среды для учебного процесса, в частности при дистанционном обучении программированию и при организации самостоятельной работы учащихся.

Электронный задачник Programming Taskbook разработан на факультете математики, механики и компьютерных наук ЮФУ. Задачник независим от конкретного языка и среды программирования и может использоваться при изучении языков Visual Basic, Паскаль, C++, C#, Visual Basic.NET, Python. Базовый набор заданий, входящих в электронный задачник, включает 1100 учебных заданий по всем темам курса программирования, начиная от скалярных типов данных и управляющих операторов и заканчивая рекурсивными алгоритмами, линейными динамическими структурами и бинарными деревьями. В задачнике широко представлены задания, связанные со сложными структурами данных: массивами, строками и файлами. Задачник также включает 200 заданий, связанных с ЕГЭ по информатике. Имеется конструктор, позволяющий создавать новые группы учебных заданий, оформляемых в виде динамических библиотек, что делает их доступными для любых языков и программных сред, поддерживаемых задачником.

Наличие конструктора учебных заданий позволяет использовать Programming Taskbook в качестве платформы для разработки специализированных электронных задачников. Примером подобного задачника может служить задачник по строковым алгоритмам биоинформатики Programming Taskbook for Bioinformatics, который также интегрирован в веб-среду ProgrammingABC.NET.

Вариант электронного задачника поддерживает .NET-языки PascalABC.NET, C#, VB.NET и IronPython. Программа, использующая задачник, должна подключать дополнительные элементы соответствующего языка программирования (модуль PT4Web для языков PascalABC.NET, Visual Basic. NET и IronPython, класс PT4Web для C#). Для быстрого создания программ-заготовок, связанных с определенным заданием, можно воспользоваться соответствующей командой Web-среды или специальным сервисом сайта электронного задачника (для этого достаточно перейти на сайте в раздел «Задания», выбрать группу заданий и одну из ссылок [Pascal], [C#], [VB.NET], [Python] рядом с именем требуемого задания в выбранной группе). Каждая из ссылок генерирует программу-заготовку на соответствующем языке программирования и загружает ее в Web-среду.

Интерактивный ввод для программ, использующих задачник, не требуется — все исходные данные такие программы получают непосредственно от задачника. Вывод результатов перенаправляется в специальное окно, которое создается браузером с помощью средств JavaScript и содержит всю информацию в виде текста HTML. Помимо полученных результатов, в окне выводится формулировка задания, исходные данные, а в случае ошибочного решения — пример правильных результатов. На рис. 3 дан пример среды с загруженной в нее программой на языке C#, выполняющей задание Matrix45 из группы «Двумерные массивы (матрицы)», и открытым окном задачника с информацией об успешном выполнении задания.

Рис. 3. Вид веб-среды с окном электронного задачника

По выполненным заданиям может быть получена подробная статистика.

Ограничения и преимущества

Веб-среда ProgrammingABC.NET WDE, как и другие веб-среды программирования, по ряду причин не может полностью заменить настольные среды разработки и рассматривается как дополнение к ним. К принципиальным ограничениям относятся: необходимость постоянного подключения к Сети; низкая скорость работы Web-интерфейса; большое время отклика на операции, связанные с обращением к серверу; отсутствие возможности простого доступа к локальным файлам (необходимо их предварительно закачать на сервер); запрет программного выполнения ряда операций на сервере в целях безопасности. Кроме этого, имеются еще ограничения, устранение которых требует дополнительных ресурсов на разработку: отсутствие подсказок, созданных средствами технологии автодополнения IntelliSense; отсутствие возможности использовать файлы, отличные от файлов программ (например, файлы изображений); отсутствие отладчика; отсутствие возможности одновременного запуска нескольких программ.

В то же время обсуждаемая веб-среда обладает рядом преимуществ перед настольными интегрированными средами разработки: запуск программы на любом компьютере возможен без предварительной установки соответствующего ПО, что решает проблему лицензирования; возможность использования актуальной версии компилятора; веб-среда кросс-платформна — для ее использования достаточно подключиться к Интернету и запустить браузер; программы хранятся на сервере и могут быть запущены с любого клиентского компьютера. Кроме того, встроенный в ProgrammingABC.NET WDE электронный задачник позволяет по-новому взглянуть на процесс дистанционного обучения программированию.

***

Ближайшие направления развития веб-сред программирования таковы:

встраивание в редакторы веб-сред функций, характерных для настольных сред разработки — отладчиков, средств IntelliSense, средств автоматического форматирования текста программ и т. п.;
отделение сервисов запуска программ от сервисов редактирования файлов программ и сервисов хранения программ, а также навигации по дереву папок на сервере;
увеличение типов проектов, доступных для разработки в веб-средах;
сращивание Web-сред разработки и настольных сред, при котором проект, созданный в настольной среде и сохраненный на сервере, может быть открыт в веб-среде и наоборот.

Будущее развитие веб-среды программирования ProgrammingABC.NET диктуется не только указанными тенденциями, но и ее нацеленностью на обучение. Помимо увеличения числа доступных языков программирования, предполагается разработка таких новых средств и подсистем, как подсистема преобразования программного кода с одного языка на другой, дополнительные группы заданий для электронного задачника по специализированным областям программирования, модули для создания интерактивных графических веб-приложений, подсистема управления группами пользователей с ролями «Учитель» и «Ученик», подсистема автоматической проверки задач в стиле олимпиадного программирования. Немаловажным фактором совершенствования веб-среды является также ее переработка с целью балансировки нагрузки на сервер и увеличения количества одновременно работающих со средой пользователей.

Михаил Абрамян, Станислав Михалкович ({mabr, miks}@math.sfedu.ru) — доценты факультета математики, механики и компьютерных наук Южного федерального университета (Ростов-на-Дону).