Як я створив браузерну Python IDE, що працює без інтернету: досвід вчителя інформатики

💡 Усі статті, обговорення, новини про Python — в одному місці. Приєднуйтесь до Python спільноти!

Вітаю! Мене звати Михайло. Я розробник програмного забезпечення з 10-річним досвідом комерційної розробки та профільною освітою. Навчався в Університеті імені Тараса Шевченка за спеціальністю «комп’ютерна інженерія».

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

Чому я взагалі взявся за це

Можна було б сказати: «Ну не працює — значить, не працює». Але реальність така, що освіта й без того переживає складні часи. Пандемія COVID-19 і війна суттєво вплинули на навчальний процес, і постійно відкладати навчання «на потім» — не найкращий варіант.

Також мені не хотілося бути залежним від SaaS-сервісів із обмеженими безкоштовними тарифами, де правила гри можуть змінитися будь-якої миті. Я вже стикався з ситуацією, коли те, що працювало вчора, сьогодні перестає працювати — зокрема у випадку з Replit.

Мені був потрібен інструмент, який дає відчуття надійності та передбачуваності. Такий, що запускається завжди, не залежить критично від інтернету, дозволяє виконувати українську шкільну програму і водночас залишається доступним для кожного.

Контекст і проблема

2025–2026 навчальний рік виявився особливо непростим. Постійні відключення електроенергії, нестабільний інтернет, уроки в класах без стаціонарних комп’ютерів, заняття в укриттях — усе це стало новою реальністю.

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

Більшість сучасних інструментів для програмування не розраховані на українські реалії. Вони орієнтовані на середовище зі стабільним інтернетом і електропостачанням.

Минулого року я використовував Replit у випадках, коли не було доступу до ПК. Це було досить зручно: достатньо браузера, нічого не потрібно встановлювати, можна працювати навіть зі смартфона.

Але цього року стало очевидно: без стабільного інтернету така модель не працює. До того ж Replit поступово відмовився від повноцінної підтримки Python і сфокусувався на AI-first підході до розробки.

Окремий виклик — навчальна програма з Python, яка включає роботу з графічними бібліотеками Tkinter і Turtle. Це досить специфічні інструменти, які працюють не у всіх середовищах.

Ще один важливий фактор — «зоопарк» пристроїв: смартфони, планшети, Chromebook, Windows, macOS, ноутбуки, стаціонарні ПК.

Я шукав інструмент, який був би максимально зручним у теперішніх умовах, безкоштовним і з низьким порогом входу — без реєстрації, SMS і зайвої реклами.

Ідеального варіанту не знайшов, лише компроміси, тому вирішив зробити власну реалізацію:

pyroom.app

Що таке Pyroom

Pyroom — це браузерна Python IDE, яка працює без сервера та виконує код безпосередньо в браузері. За потреби її можна встановити як PWA, щоб отримати ще більш стабільний офлайн-досвід. Має українську та англійську мову інтерфейсу.

Інтерфейс Pyroom

Серед ключових можливостей — підтримка Tkinter і Turtle, підвантаження бібліотек, а також робота з файлами, наприклад із зображеннями. Pyroom однаково добре працює на смартфонах, Chromebook, планшетах і комп’ютерах — фактично на будь-якому пристрої з сучасним браузером.

Окрема важлива частина — можливість ділитися кодом. Це можна зробити як офлайн через QR-код, так і онлайн за допомогою коротких посилань. Також у системі передбачені режими вчителя та учня: можна створювати завдання, додавати текстовий опис і поширювати їх разом із кодом.

Головна ідея Pyroom — це підхід offline-first і максимально простий доступ. Користувачу достатньо відкрити додаток один раз, після чого він може працювати без інтернету з будь-якого пристрою.

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

Чому дизайн тут важливий

Можливо, це здається дрібницею. Але якщо учень відкриває інструмент, який виглядає так, ніби залишився десь у 2010 році, мотивація відразу падає.

Для мене було важливо, щоб діти відчували, що користуються сучасними інструментами, і отримували від цього задоволення. Це напряму впливає на залученість і бажання вчитися.

Саме тому я обрав Monaco Editor — той самий редактор, що використовується у Visual Studio Code. Додатково я реалізував темну тему та адаптивний інтерфейс, який зручно працює навіть на смартфонах.

Технічна частина

Python через WebAssembly

Pyroom використовує Python, скомпільований у WebAssembly (Pyodide), і це визначає його ключову архітектуру. Код виконується локально прямо в браузері, тому потреба в бекенді для основної роботи відсутня. Завдяки цьому можна працювати без сервера, а у випадку зникнення інтернету виконання програм не переривається і продовжується у браузері. Фактично будь-який пристрій із сучасним браузером підходить для роботи, що робить цей підхід принципово відмінним від класичних онлайн-IDE.

PWA та офлайн-кешування

Pyroom працює як Progressive Web App. Після першого відкриття всі необхідні ресурси завантажуються та кешуються, що дозволяє надалі повноцінно працювати офлайн без додаткових налаштувань.

Якщо потрібно використовувати додаткові бібліотеки, такі як NumPy, pandas чи matplotlib, вони також підтримуються, але завантажуються в напівавтоматичному режимі. Коли є інтернет, бібліотека підтягується автоматично під час виконання коду, а за потреби її можна попередньо закешувати, щоб використовувати пізніше вже без підключення до мережі.

Окрім цього, реалізована робота з файлами: користувач може підвантажувати файли безпосередньо у браузер і використовувати їх у своїх програмах.

Найскладніше — Tkinter у браузері

Tkinter — це бібліотека для створення desktop-інтерфейсів, і готових реалізацій для браузера я не знайшов.

Тому довелося піти іншим шляхом і реалізувати власний підхід. У Pyroom використовується віртуальний UI-шар, який перехоплює виклики Tkinter і інтерпретує їх, відмальовуючи відповідні компоненти вже в DOM. Фактично це власна реалізація Tkinter, адаптована для роботи в браузері.

Хостинг та бекенд

Проєкт розгорнутий на платформі Cloudflare, що дозволяє зберігати дуже низьку вартість підтримки. Основна логіка працює повністю на клієнті, тому серверна частина мінімальна і не використовується для базового функціоналу.

Бекенд підключається лише там, де це дійсно необхідно. Наприклад, для підписки на оновлення з можливістю залишити email, для надсилання повідомлень про баги чи запитів на нові функції безпосередньо з додатку або сайту, а також для онлайн-поширення коду через короткі посилання.

Досвід використання

Pyroom наразі перебуває на етапі активного тестування, тому окремі речі можуть працювати нестабільно або не зовсім так, як очікується.

Я сам активно використовую інструмент на уроках, і саме це дозволяє швидко помічати недоліки або розуміти, якого функціоналу не вистачає. Поступово я намагаюся це виправляти та покращувати, орієнтуючись на реальний досвід використання в класі.

З часом формується чіткіше розуміння того, які ще можливості варто додати, щоб інструмент був максимально зручним і корисним.

Якщо ви помітили проблему або маєте ідеї для покращення — буду дуже вдячний за зворотний зв’язок. У додатку є кнопка «Повідомити про баг», також можна зв’язатися зі мною напряму.

Зі статистики видно, що сервіс уже почали використовувати в різних країнах: зараз сайт має приблизно 300–500 відвідувань на тиждень. Водночас зворотного зв’язку поки що значно менше, ніж хотілося б, тому будь-які коментарі справді важливі.

Чи є аналоги?

Найближчим українським аналогом можна вважати ЄPython. Про цей проєкт навіть виходили окремі огляди в медіа, зокрема на ITC.

Водночас підхід до реалізації там суттєво відрізняється. ЄPython побудований на використанні транслятора Skulpt, який перетворює Python-код у JavaScript. Це означає, що використовується не повноцінний Python runtime, і в окремих випадках поведінка програм може відрізнятися від очікуваної. Крім того, можливості розширення такого підходу обмежені самим транслятором.

Також варто зазначити, що офлайн-режим у цьому рішенні відсутній, що є критичним обмеженням у контексті нестабільного інтернету.

У Pyroom використовується інший підхід — виконання Python через WebAssembly із повноцінним runtime. Це дозволяє забезпечити більш передбачувану поведінку програм і кращу сумісність із бібліотеками. Особисто для мене такий підхід виглядає більш передбачуваним і гнучким з точки зору подальшого розвитку.

Трохи про процес розробки

Коли я почав працювати над проєктом, агентивна розробка вже була досить поширеним явищем, хоча власного великого досвіду в цьому напрямку я ще не мав.

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

Першим кроком стало створення MVP — потрібно було перевірити, чи взагалі можлива така реалізація і чи буде все працювати як задумано. Цей етап вдалося пройти досить швидко.

Далі почався більш складний і водночас цікавий етап: переосмислення функціоналу та дизайну. Багато речей я переглянув і фактично переписав проєкт з нуля. Тут дуже допомогло те, що я працюю в школі й створюю інструмент, який у першу чергу потрібен мені самому — це значно спростило прийняття рішень.

Я активно використовував голосовий режим для обговорення ідей та варіантів реалізації. Це дозволяло швидше формулювати думки і знаходити оптимальні підходи.

З власного досвіду я зробив важливий висновок: якщо фіча добре продумана і чітко описана, її реалізація за допомогою інструментів агентивної розробки відбувається швидко і майже без потреби у виправленнях. Але якщо на етапі планування є невизначеність — час на доопрацювання зростає в рази.

Це мій перший проєкт, у якому я працював у такому більш високорівневому, «агентивному» підході, і цей досвід виявився для мене дуже позитивним.

Що далі

Насамперед планую додати режим відладки, покращити дизайн для мобільного режиму, розвинути бібліотеку завдань для вчителя та створити систему, у якій вчителі зможуть налаштовувати, планувати і зберігати завдання. Також мені цікаво додати AI-помічника, який допомагатиме зрозуміти, чому саме код не працює.

Мені дуже цікаво почути думку спільноти, тому буду радий конструктивній критиці, ідеям та порадам.

Якщо ви вчитель, спробуйте Pyroom у роботі та розкажіть про нього колегам. Якщо ви розробник, буду радий технічному фідбеку. А якщо знайдете баг або побачите слабке місце — обов’язково напишіть. Це поки що невеликий проєкт, але я вірю, що він може реально допомогти навчальному процесу в наших умовах.