PythonIDE

У цій статті розповім, як виникла ідея створення онлайн-редактора з інтерпретатором мови програмування Python — PythonIDE.

Мотивація
Мій інтерес до програмування виник завдяки моєму захопленню математикою і вирішення завдань з допомогою алгоритмів. В свій час я освоїв Python, вирішуючи завдання на сайті Project Euler.
У 2013 році я створив навчальний курс по програмуванню на мові Python Learn Programming with Python на освітній платформі Udemy.

У перші ж тижні після того, як курс «вийшов в ефір», я зіткнувся з неочевидною для мене проблемою: у більшості користувачів почали виникати складнощі з установкою середовища розробки. У той час я використовував Eclipse з плагіном PyDev. У багатьох студентів не виходило встановити плагін або були якісь проблеми з Эклипсом.

Через пару тижнів я спробував вирішити проблему, записавши туторіал по установці PyCharm від JetBrains. Знову ж знайшлися користувачі, у яких щось не працювало — у деяких не виходило встановити Python для Windows і вибрати інтерпретатор в PyCharm.

Через деякий час мене осінило і я вирішив використовувати онлайн-редактор коду від Codecademy — Codecademy Labs і перезаписати свої відео-уроки. І знову сталося непередбачене — онлайн редактор коду від Codecademy просто кудись зник.

Так власне і виникла ідея написання свого онлайн редактора для мови Python.

Ідеї
Володіючи лише основами HTML і JavaScript, я никога не вважав себе веб-розробником. На самому початку я стояв перед вибором — підключити JavaScript інтерпретатор або розвантажити браузер, перенісши завдання виконання коду на сервер. Після того, як я дізнався, що мій хостинг-провайдер використовує CentOS з передвстановленим интепретатором Python, я став схилятися до цієї ідеї, вирішивши піти по шляху найменшого опору. Далі необхідно було з'ясувати, як запустити shell-програму з браузера. Будучи новачком в back-end програмуванні не маючи ніяких знань в PHP або ASP я почитав форуми і подивився кілька відео-уроків. В результаті вирішив писати код на PHP і використовувати функцію proc_open(). Почитавши пару статей про bash програмуванні у мене вийшло викликати Linux програми для командного рядка з PHP.

Реалізація
Ознайомившись з функціональністю інтерпретатора Python, я був «приємно» здивований тим, що він для виконання коду йому потрібно передати шлях до файлу з розширенням .py — тобто для кожного виконання програми мені потрібно створювати файл, записувати туди код, зберігати, закривати і передавати інтерпретатору. Для цих цілей я написав на новому для мене PHP функцію створення тимчасового файлу і видалення його після виконання.

Справа залишалася за малим — передати додатком командного рядка «python» тимчасовий файл і видати результат виконання коду користувачеві. Для цього я вирішив використовувати асинхронні запити і для полегшення життя скористався jQuery, написав наступний шматок коду:

$("#run").click(function() {
var content = $("#editor").val();
$.post("executor.php", {
code: content
})
.done(function(data) {
$("#console").html(data);
});
});


Де #editor був моєю TextArea і #run кнопка зі значком «play» і #console — звичайний чорного кольору з білим текстом.

Зізнаюся, я був вражений, коли побачив результат. Результат виконання, який видавався через stdout з'являвся на екрані. Залишалося лише замінити символи переносу рядка "\n" на HTML теги "<br>".

Залишалося лише виправити кілька недоліків — виводити повідомлення, які Python видавав через stderr. До них я додав напис червоного кольору «Error Occured:».

Залишалося лише під'єднати підсвічування синтаксису і я знову стояв перед вибором — Ace або CodeMirror. Дізнавшись, що Ace підтримує автодоповнення коду при натисканні на ТАБУЛЯЦІЇ, вибір був зроблений у бік цього плагіна.

Це внесло деякі зміни в код, тепер текст, написаний у вікні передавався в змінну «content» з допомогою функцій getSession() і getValue()

var content = editor.getSession().getValue();


Висновок
Таким чином, я отримав цілком работоспобный онлайн редактор коду для мови Python, для якого я зареєстрував доменне ім'я pythonide.org і зробив його доступним за адресою pythonide.org/run.html.

Мій маленький успіх смотивировал мене на створення повноцінного коллаборотивного редактора з файловим менеджером і можливістю експортування проектів, тестуванням чого я займаюся в даний момент. Для решти сторінок сайту я зробив простенький дизайн використовуючи Bootstrap і написав кілька текстів.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.