DRAKON.SU

Здравствуйте, я студент ТУСУРа Стецко Алексей. Мы вместе с Владимиром Гойником занимались разработкой графической среды программирования "Дракон-Си". Сейчас это тема наших бакалаврских работ. Недавно все завершающие штрихи были выполнены и проект опубликован по адресу:
https://drakon-c.ru/
Возможности среды:
1. Создание дракон-схемы с нуля или редактирование схемы, созданной ранее и сохранённой в этой же среде.
2. Сохранение дракон-схемы в виде PNG-изображения
3. Интерпретация дракон-схемы в текст программы на ЯП Си

Конечно, у среды есть и недостатки. Взят слишком ограниченный набор правил языка ДРАКОН. Выбранный способ рисования схем в редакторе не позволяет делать пересадку лиан. Пользователь ограничен в изменении ширины иконы и размера текста, из-за чего текст возможно эстетически неприятно читать. Для возможной интерпретации вся схема должна содержать фрагменты программы на языке Си, нет прикрытия за "понятным" текстом как в редакторе Геннадия Николаевича Тышова.

Тем не менее с общими задачами "Дракон-Си" справляется, и, думаю, будет интересна школьникам/студентам, начинающим изучать программирование. "Дракон-Си" предлагалось опробовать, протекстировать в четырёх учебных заведениях. Школьники (8-11 классы) дали положительные отзывы (средняя оценка - 9 из 10 баллов).
Не запрещается использовать среду всем желающим, заинтересованным в алгоритмизации.

Алексей, нужны иллюстрации.
1. Выложите дракон-схему в формате png
2. Ваша ссылка не работает. Я исправил ваше сообщение.
Теперь работает.
https://drakon-c.ru/

Пожалуйста. Это дракон-схема программирования. Стояла следующая задача:
- пользователю предлагается ввести число, кратное трём. Затем пользователю выводится факториал введённого числа.
- после этого число увеличивается до ближайшего, кратного пяти.
- если найденное число совпало с исходным, делается вывод, что введённое число кратно пятнадцати.
- при нормальной работе программа возвращает код 0. Если введённое число имеет остаток от деления на 3 равный единице – код ошибки -1, если остаток равен двум – код ошибки -2.

На картинке показана основная часть алгоритма решения. Есть ещё дракон-схема для написания функции вычисления факториала, но она довольно простая. Так как можно прикрепить одну картинку, я прикрепляю картинку побольше.

Почему одну?
Это не так. Можно несколько картинок.
Если будут трудности, вы всегда можете выкладывать картинки в разных сообщениях.

Странно, не заметил. Хорошо. Прикрепляю ещё одну дракон-схему. Её упоминание можно увидеть в схеме, присланной ранее, в иконе "вставка".

От модератора. Два сообщения отделены и перенесены в другую тему viewtopic.php?p=106447#p106447

Сайт: https://drakon-c.ru/ не открывается.
Почему и надолго ли?

Логика построения схем в браузере была неочевидной для пользователя!

Сами схемы содержали программный код, т.е. самую последнюю стадию разработки.
Алгоритма внятного для непрограммиста, т.е. посыл (целевое описания икон) для написания программного кода отсутствует.



В начертании схем имеется ряд отступлений от исходного Дракона.
Некоторые иконы похожи на пауков, имеют до 4-х выводов.
При этом, нанизаны на горизонтальные соединительные линии.
Нет единства принципа в начертании схемы Силуэт, т.к. иконы Ветка нанизаны по горизонтали, а иконы Адрес не нанизаны по горизонтали.

Спасибо за ваши замечания. Сейчас постараюсь ответить на все вопросы.


Пробный период хостинга сайта окончился и мы всё собирались с коллегой внести оплату за год. Но у редактора кроме всего прочего я нашёл ещё много моментов, нуждающихся в до(-раз)работке. Могу огласить недоработки, это не секрет:
1. Убрать шифрование дракон-схем в формате JSON. Мы сочли его лишним и к тому же это замедляет процесс загрузки дракон-схемы. А безопасность файла уже ляжет на плечи пользователя.
2. Пересмотреть идею валентных точек. Изменить подсветку ячеек на добавление строк и столбцов с привычным представлением точек в теории ДРАКОНа - круги, лежащие на соединительных линиях.
3. Встроить компилятор (подробнее эту тему поднимал пользователь tonyk viewtopic.php?f=211&t=7146). Внедрение компилятора позволит наглядно показывать принцип работы алгоритма и отмечать ошибки. Пока мысль такая: компилятор выдаёт сообщение об ошибке в N строке кода, скрипт ищет икону, которая интерпретирована на этой строке кода, обращается к ней и подсвечивает ячейку с иконой красным цветом. В общем необходимо движение в сторону наглядности.
4. Улучшить удаление. Решить проблему непустых циклов, развилок, переключателей. Если пользовать удаляет эти атомы, но они содержат блоки, удалять ли их вместе с атомом или перенести на ту же ветвь/линию, на которой лежал атом? Конечно, я склоняюсь к первому варианту и вопрос опять же в программировании этих функций.
5. Перенести панель редактирования наверх, а низ использовать для истории (3 предыдущих действия пользователя, как минимум).
6. Для схем программирования отменить перенос текста во всех иконах, кроме "комментария"
7. Дополнить редактирование иконы "вопрос" возможностью поменять местами Да и Нет.



Согласен с вами, дополню список восьмым пунктом. Такая идея мне тоже приходила во время изучения ИС Дракон Геннадия Тышова. Дракон-схемы программирования имеют два текстовых окна. В одном программный код пользователя, а в другом его общепонятное назначение. Например, "int score = 0" и "инициализация счётчика".


Я здесь вас немного не понимаю. Расскажите поподробнее, каких "пауков" вы встретили. Успокоим всех арахнофобов.
Если вы говорите о силуэте, я не вижу в этом проблемы. Дракон-схема должна при добавлении ветви расшириться по горизонтали. Так куда добавлять ветвь если не справа от другой ветви?

Здесь тоже соглашусь с вами. Принцип рисования иконы Адрес был взят из редактора "Фабула" Эдуарда Ильченко. Но я не заметил, что и икона Ветка там нанизана тоже по вертикали. Исправим.

Спасибо вам за сообщение. Наш список доработок дополнился:
8. Дополнить панели создания/редактирования полями подобно текстовым окнам ИС Дракон
9. Изменить принцип рисования иконы "Адрес"
Как вы видите список дел довольно велик, поэтому лучше будет выполнить его и опубликовать новую версию приложения. Могу сказать, что в связи с окончанием учёбы мы не ограничены в сроках выполнения. Лучше качественно выполнить работу, чем быстро.

Тут есть два путЯ.

Вариант 1. Создать байт-код, система команд которого максимально упрощает трансляцию в него Дракон-схем. Для понимания посмотрите на язык IL для ПЛК и посмотрите в какие команды преобразуются в него диаграммы, нарисованные на LD. Если ваши команды будут делать внутри себя много работы, то особой разницы в скорости работы по сравнению с компиляцией в машинный код не будет.

Вариант 2. Компиляция в С. Рекомендую использовать GCC. У С, поскольку он изначально рассматривался как язык, в который будут транслироваться другие языки, есть для этого кое-что. Например, используя директивы С-компилятора, можно ставить соответствие номеров строк в исходном языке номерам строк в С-программе. Это нужно для того, чтобы под отладчиком команда, например, "сделать шаг" выполняла один шаг в программе на исходном языке, которому могут соответствовать много строк на С. Но тут надо подумать как это использовать, потому что у Дракона нет формального текстового языка с привязкой к его графическим объектам.

И ещё. Ни в коем случае не встраивайте компилятор! Редактор- отдельно, компилятор- отдельно. Связь между ними через текстовый файл с описанием Дракон-диаграммы, раз уж создатели Дракона не удосужились созданием его текстового описания. Так вы получите два проекта, каждый из которых сможете развивать более-менее независимо один от другого.

Спасибо, tonyk, за участие в судьбе приложения. Кажется, я писал ранее, что мы придерживаемся второго варианта:

Пошаговое исполнение программы тоже интересная идея, постараемся исследовать этот вопрос. Могут ли соответствовать одной ячейке несколько строк кода? Могу сказать, не могут. Причина: текстовые поля веб-страницы не восприимчивы к переносам строк, они заменяют их пробелами. Если пользователь захочет инициализировать три переменные "int a=0; int b=0; int c=0;", то ему придётся записать эти три операцию в одну строку иконы Действие либо использовать три иконы Действие для каждой переменной. В этом плане очевидно "прикрытие" таких строк текстом, понятным "непрограммистам" по типу "объявление трёх чисел". Проблему в этой теме уже поднимал пользователь LKom.
Пока я предлагаю отображать на дракон-схеме ошибки и предупреждения. Принадлежность строки кода какой-либо ячейке определяется индексами в конце этой строки в виде комментария. Учитывая, что код для пользователя помещён в чёрный ящик, считаю это возможным. Пример такой взаимосвязи я показал на картинке в этом сообщении.


Этот тезис мне не совсем понятен. Пока описание "редактор-отдельно, компилятор-отдельно" соответствует текущей версии приложения. Но вы ведь сами поднимали вопрос наглядности. У нас - редактор, у пользователя - компилятор. А мы хотели бы, чтобы всё было у нас и пользователь не жонглировал своими средствами.
Можно смешать муку, яйца, дрожжи в миске, потом переложить тесто в корытце, погрузить в духовку и испечь хлеб. А можно закинуть те же ингредиенты в хлебопечь и не использовать другую утварь. Мы стремимся к хлебопечи.
Если вы имеете ввиду, что компилятор вместе с редактором не должны быть на странице, да ещё и так, чтобы экран делился пополам, я с вами согласен. Пользователь не должен догадываться о компиляторе. Единственное, что будет его связывать с ним - кнопка Play, которая интерпретирует схему и подаст код компилятору. Ошибки, предупреждения и консольный ввод-вывод будут скорее всего во всплывающем окне. Можно, конечно, не особо заморачиваться и сообщения компилятора погружать в скрипт и выводить простым алертом (alert) - вот вам и всплывающее окно) Но лучше это выполнить ... "со вкусом".

Посмотрите, как это сделано в Экслипсе в свете концепции перспектив. Впрочем, скорей всего, пример консольного gdb будет понятней и проще реализуем. Окно приложения одно, но в нём отображается или редактор, или отладчик.

Если Дракон-редактор отделён от Дракон-компилятора, то нет разницы в какой язык транслировать Дракон, и на каком языке его отлаживать. Тут, по-моему, сложнее будет придумать, как настроить взаимодействие Дракона и целевой платформы. В идеале модуль привязки к целевой платформе должен быть отделён от редактора. На выходе модуля привязки make-файл для GCC. Кстати, я не увидел в Дракон-редактора явно функции создания модулей программы и многолистовых схем. Про отсутствие нормальной печати с разбивкой на листы, на которых автоматически расставлены межлистовые ссылки, уже писал тут: https://forum.drakon.su/viewtopic.php?f=62&t=6996&start=160.

Сейчас ваша цель- это получить Си-файл с привязкой к Дракон-схеме и научиться синхронно "шагать" по Дракон-схеме и Си-файлу. Научитесь- получите основу для создания полноценной DragonIDE, нет- будет очередная рисовалка картинок с функцией генерации никому не нужного Си-файла.

Алексей, когда вы откроете свой редактор, чтобы другие люди могли начать его тестировать и использовать?
https://drakon-c.ru/

Проект нуждается в многочисленных доработках, чем я активно занимаюсь в свободное от учёбы время.
Из перечня задач на сегодня были выполнены следующие:
1. Удалено шифрование дракон-схем
2. Изменена концепция валентных точек на "традиционную", описанную в литературе по ДРАКОНу
3. Добавлена возможность поменять Да и Нет в иконе "вопрос"
4. Панель создания была убрана и наверх перемещена панель редактирования иконы
5. В панели редактирования добавлен раздел задания фрагментов программы
6. Изменён принцип отображения иконы "адрес". Теперь он также как и иконы "имя ветви" лежит на точках слияния в петле силуэта. Понимаю, от меня наверное хотели другого - чтобы эти иконы лежали только на вертикалях, но лично меня такие детали не запутывают и дракон-схема всё равно смотрится компактно и ясно.


Ранее подобные задачи были описаны в этой теме: viewtopic.php?f=143&t=7151

Кроме шести перечисленных выше задач были решены побочные задачи:
7. Созданы вспомогательные средства для заполнения фрагмента программы в иконе
8. Созданы кнопки, позволяющие делать иконы шире или уже, независимо от ширины других икон

На сегодняшний день поставлены задачи:
1. Реализовать пересадку и заземление лиан. Я этим сейчас занимаюсь активно, задет пласт моей же концепции представления соединительных линий. Идёт размышление и составление алгоритмов работы новых функций.
2. Решить вопрос удаления циклов, развилок и переключателей. Эта задача связана от части с предыдущей. При пересадке лианы необходимо удалять старый путь и строить новый.
3. Выделить нижнюю панель для истории действий пользователя. Это позволит возвращать дракон-схемы к предыдущим состояниям. Особенно это важно, если при редактировании обнаружился какой-то баг, который я не смог предусмотреть. Допустим, у пользователя возникла ошибка, которая испортила вид дракон-схемы, а предварительно эта схема не была сохранена. С помощью истории пользователь возвращает дракон-схему до момента совершения губительного действия и сохраняет её или делает другое действие. В жизни так нельзя, а в редакторе было бы неплохо.
4. Реализовать возможность создания нескольких листов с возможностью переключения между ними. Зачастую программные проекты не состоят из одной-единственной функции main. Даже, если брать в пример алгоритм быстрой сортировки, который я приводил ранее. Для полной демонстрации сортировки было создано 3 дракон-схемы. В связи с этим появляется потребность интерпретировать в текст программы целый проект. Если в проекте уже >5 дракон-схем, пользователь устанет переключаться между листами и сохранять каждую схему по отдельности.
5. Встроить компилятор. Признаться, эта задача не зря поставлена в конец списка, так как на текущий момент она представляет для меня наименьший интерес.

Вы видите объём сделанной и ещё предстоящей работы. Надеюсь справиться до конца этого года и в следующем году выложить этот проект в публичный доступ.
Кроме того, мы всё это время говорили об автономной среде Дракон-Си. Моя магистерская работа в дальнейшем делает эту среду информационной системой обучения. Это значит, что на сайте можно будет зарегистрироваться как учитель или ученик. Ученик выполняет задания, чтобы обучаться алгоритмизации и программированию с помощью дракон-схем. Учитель следит за успеваемостью учеников, которые закреплены за ним. Система автоматически рассчитывает средний балл ученика, отслеживает его понимание каждой темы и генерирует задания так, чтобы ученик смог улучшить свои показатели. Это не будет значить, что Дракон-Си станет доступна только ученикам и учителям. Это надстройка. Обычные пользователи тоже смогут работать в Дракон-Си.
Это сейчас только обсуждается и исследуется, но так или иначе цель поставлена и план работы уже есть.

Дракон-Си будет развиваться дальше и стремиться к тому, чтобы им пользовались люди.

Добрый день. Хотелось бы сообщить о состоянии проекта на середину декабря 2022 года.
Редактор Дракон-Си, как писалось ранее, станет ядром - главным инструментом - в информационной среде управления обучением, которую я также разрабатываю. Этот проект будет больше отличаться от других дракон-редакторов. Он будет доступен всем, но для учителей и учеников он будет предлагать особые условия работы, повышающие эффективность обучения.


Не хотелось бы писать об этом чересчур подробно, потому что в этой теме главное рассказать о редакторе, но приходится освещать эти аспекты, чтобы была понятна моя занятость.
Работа с сентября по декабрь посвящена именно формулированию технологии, которой будет подчинена вся разработка. Это отклонение в сторону, но отклонение необходимое. Чтобы поезд доехал до станции, рельсы надо прокладывать сразу, а не на ходу поезда. Внедрение редактора в систему обучения было следующим шагом развития, оглашённым в июле 2022 года. Новый научный руководитель обговорил со мной эту и тему и мы совместно наметили план работы в этом семестре ещё в августе 2022 года.
За этот период было написано три доклада, приложить их тексты я не могу, в подтверждение только высылаю вам скриншоты того, что они были сделаны и согласованы с модераторами конференций.
Было сделано одно очное выступление на конференции, на котором было высказано замечание по интерфейсу редактора. Запись конференции приложить также не могу, поскольку она не велась. В результате выступления была поставлена задача изменить интерфейс. Совет был дан профессионалом в области веб-разработки.

Я написал это всё, чтобы вы оценили вновь объёмы предстоящей работы и понимали, что я не бил баклуши, а погружался в другую предметную область. Теперь я делаю целую систему, веб-приложение. Это, как минимум: дополнительные 4 веб-страницы, модель базы данных, бэкенд. К ним также дополняются задачи, описанные ранее:
1. Реализовать пересадку и заземление лиан,
2. Решить вопрос удаления циклов, развилок и переключателей,
3. Обеспечить пользователя возможностью возвращаться на предыдущие шаги конструирования дракон-схемы,
4. Реализовать возможность создания нескольких листов с возможностью переключения между ними,
5. Встроить компилятор.

Итак, редактор дракон-схем будет возможно опубликовать после решения пяти перечисленных задач, чем я буду заниматься в период более свободный от учебных дел - январь-февраль 2023 года. Опубликованный редактор будет лишь малой частью того, что ждёт пользователей в дальнейшем. Опять же концентрирую внимание на объём работы, свою учебную занятость, и прошу отнестись с пониманием и терпением.

Почему редактор должен будет опубликоваться? Не брошу ли я работу как это делали некоторые авторы, которых я читал на этом форуме?
Во-первых, моральный долг. Я занимаюсь этим проектом четвёртый год, и за это время сам обучался, оттачивал навыки алгоритмизации и программирования. Сейчас я это продолжаю делать и не собираюсь бросать работу, потому что план уже намечен и имеются туманные представления о том, как это должно выглядеть и работать.
Во-вторых, если мои моральные обязательства неубедительны, моя магистерская работа будет называться "Информационная система управления обучением по технологии визуального блочного проектирования программ на основе Дракон-Си", она закреплена планом обучения, менять тему уже нельзя и я должен довести эту работу до конца и презентовать её комиссии летом 2024 года. В этом вопросе ставкой будет мой диплом магистра.

Топикстартер этой темы Алексей Стецко, студент Томского государственного университета систем управления и радиоэлектроники (ТУСУР).

Алексей Стецко учился в магистратуре, написал магистерскую диссертацию и защитил её на отлично в пятницу 21 июня 2024 г.
Алексей получил диплом магистра.

Поздравляем Алексея Стецко!

Вы можете скачать автореферат магистерской диссертации
А.С. Стецко Информационная система управления обучением по технологии визуального блочного проектирования программ на основе Дракон-Си.

Спасибо за поздравления. Буду работать дальше. Система интересная, нужная, но успех её реализации зависит от меня как разработчика. Так что буду стараться, изучать новые технологии и тому подобное.

Редактор дракон-схем в системе важен, это буквально ядро системы. Редактор должно рассматриваться с трёх сторон, как ранее было наисано в сообщениях по этой теме.
1. Есть режим создания задания для преодавателя. Он строит дракон-схему, система автоматически записывает его историю построения (одно действие - одно событие истории). Трудности возникают именно в манипуляции историей, если учитель захочет какое-то событие удалить или переставить раньше - потому что это может нарушить порядок построения дракон-схемы. Это кажется задачей рядовой, но всё равно требующей решения. Поэтому я планирую теоретически обосновать процедуру перемещения и удаления событий.
2. Есть режим просмотра для преподавателя. Он смотрит готовые задания других преподавателей и никак не может их менять. Перед ним готовый список событий и учитель может пошагово посмотреть как создаётся требуемая дракон-схема. (Сейчас пришла мысль, что было бы неплохо анимировать просмотр, чтобы уменьшить количество кликов).
3. Есть режим выполнения для ученика. С помощью механизма ведения истории конструирования можно обеспечить проверку действий в реальном времени. Конечно, пошаговая проверка - способ, который чересчур ограничивает свободу ученика в дейсвтиях, такую проверку разумнее использовать на начальных этапах обучения. А способ автоматической проверки задания для продвинутых пользователей - это тоже задача, которую нужно будет решить. Например, программа Packet Tracer имеет своеобразный чек-лист действий, которые надо выолнить в задании. И пользователь, ориентируясь на него, ищет способы это сделать в среде Packet Tracer. Подобный метод можно сформулировать и для среды "Дракон-Си".

И кроме того, система должна реализовывать обучение как бизнес-процесс. И поэтому реализацию связей между учениками и учителями нельзя назвать побочной задачей, она такая же главная как и создание редактора дракон-схем. На меня как на разработчика это накладывает обязательства к применению СУБД и в целом разработку серверной части, в чём я, откровенно говоря, новичок.
Используемый стек технологий на момент написания диссертации: клиентская часть - HTML (Handlebars), CSS (LESS), JavaScript, серверная часть - Express.js, MySQL, MVC, REST API
Планируется заменить MySQL на PostgreSQL, пересмотреть URL файлов.

В общем система большая, сложная, уникальная в предметной области. Её можно рассматривать хоть в телескоп (как веб-приложение), хоть в микроскоп (как редактор дракон-схем), что делает её конечно интересной для научных исследований и публикаций. Как разработчик я к своей системе как к ребёнку привязан и продолжу свою работу.