Ang Draw ito ay isang real-time na collaborative canvas application na binuo gamit ang Flutter para sa frontend at Node.js + Express sa WebSocket para sa backend synchronization. Binibigyang-daan ng app ang maraming user na gumuhit nang sabay-sabay sa isang shared board, na nagpapakita ng kadalubhasaan sa parehong cross-platform UI development at real-time na komunikasyon sa network.
🚀 Pangunahing Layunin:
Paganahin ang tuluy-tuloy, real-time na pakikipagtulungan sa isang nakabahaging drawing board gamit ang isang gumaganap na arkitektura na hinimok ng kaganapan.
🧱 Tech Stack:
Flutter (Dart): Cross-platform na mobile frontend na may gesture handling at custom na pag-render
Node.js + Express.js: Backend server na may suporta sa WebSocket para sa patuloy na bi-directional na komunikasyon
WebSocket (ws): Para sa real-time na pag-synchronize ng mga stroke sa mga user
CustomPainter: Mahusay na pagguhit ng frame-by-frame sa canvas
Handler ng Pahintulot at RepaintBoundary: I-save ang mga drawing bilang mga larawan sa device
🖌️ Mga Pangunahing Tampok:
✍️ Shared Real-Time Drawing: Ang lahat ng kalahok ay nakikita agad ang mga stroke ng isa't isa gamit ang WebSocket broadcast.
📡 Stateless WebSocket Server: Ang magaan na server ng Node.js ay nagpapanatili ng mga aktibong koneksyon sa socket at nagre-relay ng mga kaganapan sa stroke na may mababang latency.
🎨 Canvas Engine: Ang mga touch gesture ay na-convert sa mga drawable vector path at nire-render gamit ang CustomPainter ng Flutter.
📁 I-export ang Canvas: Maaaring i-save ng mga user ang kanilang likhang sining bilang isang imahe
🔧 Modular Architecture: Paghiwalayin ang mga layer para sa pagguhit ng logic, mga kaganapan sa server, at pagsasama ng platform.
Na-update noong
May 30, 2025