Draw it to aplikacja typu canvas do współpracy w czasie rzeczywistym opracowana przy użyciu Fluttera do front-endu i Node.js + Express z WebSocket do synchronizacji back-endu. Aplikacja umożliwia wielu użytkownikom jednoczesne rysowanie na wspólnej tablicy, co pokazuje wiedzę specjalistyczną zarówno w zakresie tworzenia interfejsów użytkownika międzyplatformowych, jak i komunikacji sieciowej w czasie rzeczywistym.
🚀 Główny cel:
Umożliwienie bezproblemowej współpracy w czasie rzeczywistym na wspólnej tablicy rysunkowej przy użyciu wydajnej architektury sterowanej zdarzeniami.
🧱 Tech Stack:
Flutter (Dart): Międzyplatformowy front-end mobilny z obsługą gestów i niestandardowym renderowaniem
Node.js + Express.js: Serwer zaplecza z obsługą WebSocket do trwałej komunikacji dwukierunkowej
WebSocket (ws): Do synchronizacji pociągnięć pędzla w czasie rzeczywistym między użytkownikami
CustomPainter: Efektywne rysowanie klatka po klatce na płótnie
Permission Handler & RepaintBoundary: Zapisywanie rysunków jako obrazów na urządzeniu
🖌️ Główne funkcje:
✍️ Współdzielone rysowanie w czasie rzeczywistym: Wszyscy uczestnicy widzą swoje pociągnięcia pędzla natychmiast, korzystając z transmisji WebSocket.
📡 Bezstanowy serwer WebSocket: Lekki serwer Node.js utrzymuje aktywne połączenia gniazd i przekazuje zdarzenia pociągnięć pędzla z niskim opóźnieniem.
🎨 Silnik płótna: Gesty dotykowe są konwertowane na ścieżki wektorowe, które można rysować, i renderowane za pomocą CustomPainter Fluttera.
📁 Eksportuj płótno: Użytkownicy mogą zapisać swoje dzieła jako obraz
🔧 Architektura modułowa: Oddzielne warstwy dla logiki rysowania, zdarzeń serwera i integracji platformy.
Ostatnia aktualizacja
29 maj 2025