Flow — Алгоритмыг дүрслэн бодъё

Next.js, React, TypeScript дээрх Монгол интерфэйстэй визуал алгоритм засварлагч.

Ажиллуулах

Node.js 20.9+ болон PostgreSQL шаардлагатай.

cp .env.example .env        # DATABASE_URL-аа бөглөнө
npm install                 # Prisma client-ийг автоматаар үүсгэнэ
npm run db:migrate          # хүснэгтүүд үүсгэнэ
npm run db:seed             # жишээ бодлогууд + (SEED_TEACHER_* байвал) багшийн аккаунт
npm run dev

http://localhost:3000 хаягаар нээнэ. Порт ашиглагдаж байвал:

npm run dev -- --port 4327

Боломжууд

• Хувьсагч, оролт, гаралт, утга олгох, нөхцөл, давталтын блокууд.
• Блок дээр дарж нэмэх, холбоосын + тэмдгээр байрлал сонгох, палеттаас чирж нэмэх.
• Нөхцөлийн тийм/үгүй салаа болон давталтын дотор блок нэмэх.
• Блокийн нэр, илэрхийллийг modal цонхонд засах, хадгалах, болих, устгах.
• “Өөрийн бодлого” товчоор нэр, нөхцөл бичээд хоосон схемээс чөлөөтэй угсрах.
• Сайтыг нээх, refresh хийх бүрд хоосон схемээс эхэлнэ. Өмнөх ажил автоматаар ачаалагдахгүй.
• Ажиллуулах, түр зогсоох, үргэлжлүүлэх, алхмаар гүйцэтгэх, хурд тохируулах.
• Консолд оролт өгөх, үр дүн харах, хувьсагчдын утгыг ажиглах.
• Блокуудаас Python 3 код үүсгэн харах, хуулах, .py файл татах; undo/redo; схем томруулах/жижигрүүлэх.
• Хоёр тооны нийлбэр, тэгш/сондгой, 1-ээс N хүртэлх нийлбэрийн жишээнүүд.
• Өмнөх ажлаа файлын цэсний “Өмнөх ажлыг нээх” товчоор сонгож сэргээх.
• Засвар хийсний дараа LocalStorage-д автоматаар хадгалах, .flow.json экспорт/импорт (нэрийн хажуугийн цэс).

Схем тухайн хөтөч дээр хадгалагдана. Хэрэглэгч, сесс, бодлогын сан PostgreSQL (Prisma) дээр хадгалагдана. Фонтууд апптай хамт үйлчлэгдэнэ.

Үнэгүй хостинг дээр байршуулах (Vercel + Neon)

SQLite файл serverless хост дээр хадгалагддаггүй тул PostgreSQL ашиглана.

1. neon.tech дээр үнэгүй Postgres үүсгээд connection string-ээ хуулна.
2. Repo-г vercel.com-д import хийнэ.
3. Environment variables: DATABASE_URL (Neon-ийн pooled холболт), заавал биш DIRECT_URL (direct холболт, migration-д), TEE_API_BASE_URL.
4. Deploy хийхэд vercel-build скрипт prisma migrate deploy-г автоматаар ажиллуулна.
5. Эхний удаа seed хийх: өөрийн компьютер дээрээ DATABASE_URL, SEED_TEACHER_EMAIL, SEED_TEACHER_PASSWORD-ийг Neon-ийн утгаар тохируулаад npm run db:seed.

Тест: npm test нь DATABASE_URL-г ашиглана. Тест бүх хүснэгтийг цэвэрлэдэг тул DATABASE_URL локал (localhost) Postgres үед л DB-тэй тестүүд ажиллана, үгүй бол алгасна (мэдсээр байж хүчээр ажиллуулах бол ALLOW_REMOTE_TEST_DB=1).

Илэрхийлэл

Хувьсагчийн нэр латин үсэг эсвэл _-ээр эхэлнэ. a + b, n % 2 == 0, i <= n, "Нийлбэр: " + sum зэрэг илэрхийлэл бичиж болно. + - * / %, харьцуулах операторууд, &&, ||, !, хаалт, тоо, текст, boolean дэмжинэ. Оролт болон утга олгох блок байхгүй хувьсагчийг үүсгэж болно.

Илэрхийллийг тусгай parser боловсруулдаг; JavaScript eval ашиглахгүй. Нэг ажиллуулалтыг 10,000 алхмаар хязгаарласан. Массив дэмжинэ: [1, 2, 3], [] гэж зарлаж, a[i] (0-ээс эхэлнэ) гэж уншина, len(a) нь уртыг өгнө. Элемент өөрчлөхдөө "Утга олгох" блокийн нэр дээр a[i] гэж бичнэ; a[len(a)] нь төгсгөлд нэмнэ. Массивыг гаргахад [1, 2, "a"] хэлбэртэй хэвлэгдэнэ. Өөр функц, файлд хандах үйлдэл одоогоор дэмжихгүй.

Python код

Python харагдац нь тухайн схемээс автоматаар үүснэ. .py татах товчоор авсан файлыг python3 filename.py командаар ажиллуулна. Тоо/текстийн оролт болон үйлдлүүдийг хадгалахын тулд шаардлагатай туслах функцууд кодтой хамт үүснэ. Хөтөчийн “Ажиллуулах” товч нь схемийг ажиллуулна.

Pygame

Үндсэн цэсний Pygame холбоосоор /pygame хуудас нээнэ. Нэг Python файл засаж Ажиллуулах дарахад тоглоом, консолын гаралт, алдаа modal дотор харагдана. Зогсоох, Дахин ажиллуулах, .py татах боломжтой. Код энэ төхөөрөмжийн LocalStorage-д автоматаар хадгалагдаж, refresh болон navigation хийсний дараа сэргэнэ. Хадгалалт хаалттай эсвэл дүүрсэн бол мэдэгдэнэ; .py татах товчоор нөөц хуулбар авч болно.

Редактор Python кодыг өнгөөр ялгаж, Python/Pygame функц болон өөрийн def функцүүдийг санал болгоно. Ctrl+Space санал нээнэ, ↑/↓ сонгоно, Enter/Tab оруулна, Esc хаана; Shift+Tab редактороос гарна. Хаалт, хашилт, блокийн : дутуу зэрэг нийтлэг синтаксийн алдааг мөрөөр харуулна. Энэ нь бүрэн Python compiler/type checker биш; үлдсэн алдааг ажиллуулах үед Python мэдээлнэ. Туслах боломжууд интернетгүй ажиллах бөгөөд Python runtime-аас хамаарахгүй. 100,000 тэмдэгтээс урт файлд өнгө болон туслах шалгалтыг түр унтраана.

Үндсэн Хөнгөн Python горим нь төсөлд багтсан Skulpt interpreter болон Canvas ашиглана. Runtime файлууд нийлээд ойролцоогоор 615 KB (шахалтгүй); том Python WebAssembly эсвэл гаднын CDN-ээс файл татахгүй. Browser дотор тусгаарласан iframe + disposable Worker ажиллана. Нэг тоглоомын worker, нэг жижиг синтакс шалгах worker байна. 2 GB RAM төхөөрөмж бүрийн гүйцэтгэлийг баталгаажуулаагүй боловч анхны таталт бүрэн Pygame-ээс мэдэгдэхүйц бага.

Дэмжих боломжууд:

• Python хувьсагч, list/tuple, индекс/slice, if/else, for/while, def, return.
• pygame.display.set_mode, set_caption, flip, update.
• pygame.draw.rect, circle, line, ellipse, polygon.
• screen.fill, get_size, get_width, get_height; blit нь зөвхөн текст.
• pygame.font.SysFont/Font, render; pygame.Rect, colliderect, collidepoint.
• Keyboard, mouse, event.get, key.get_pressed, mouse.get_pos/get_pressed.
• pygame.time.Clock().tick(fps) (1–60 FPS), get_ticks; random/math-ийн нийтлэг функцүүд.

Бүх дэмжих API нь public/pygame/light/capabilities.json файлд байна. Snake жишээ нь жагсаалт, функц, давталт, keyboard, random, онооны текст ашиглана. Тоглоомын давталт бүрд clock.tick(30) дуудна. Тасралтгүй тооцоолол 1.5 секундээс хэтэрвэл worker алдаа буцаана; Stop нь iframe болон worker-ийг устгана. Canvas 1280×720, код 100,000 тэмдэгт, кадрын зурах команд 2,000-аар хязгаарлагдана.

This is the beginning of the README. Read the rest at the original. Read the full README ↗