طی چند هفته/ماه گذشته، من در حال بررسی import-graph-visualizer برای تجسم ماژول‌ها و وابستگی‌های آنها در پروژه‌های زاویه‌ای بوده‌ام، که باعث شد به فکر ساختن چیزی مشابه اما یک مفهوم مانند ترکیبات شیمیایی بپردازم.
💡 چرا ترکیبات شیمیایی و نه وابستگی؟
وقتی به دنبال داده‌ای می‌گشتم تا چیزی را با cytoscape ارائه کنم و ساختاری را ارائه کنم، با PubChem مواجه شدم.
PubChem یک API شگفت انگیز برای واکشی داده های مولکولی دقیق ارائه می دهد، بنابراین فکر کردم: چرا ابتدا مولکول ها را تجسم نکنیم؟ 🤯
🚀 چشم انداز واقعی؟
معماران نرم افزار یا توسعه دهندگان از واقعیت افزوده (مانند Apple Vision) برای ترسیم بصری معماری سیستم خود، در هر کجا که هستند، شروع به تصور کردند. آنها به راحتی می‌توانند وابستگی‌ها را در سیستم خود با تجربه‌ای جذاب‌تر و تقریباً بازی‌سازی‌شده شناسایی و درک کنند که منحنی یادگیری را برای توسعه‌دهندگان جدید کاهش می‌دهد.
🌟 اجرای فعلی:
- تجسم مولکول های تعاملی: مولکول ها و پیوندهای آنها زنده می شوند و تصویر واضحی از نحوه اتصال اجزا به یکدیگر می دهند.
- واکشی دینامیک داده از PubChem API: داده‌های مولکولی در زمان واقعی استخراج می‌شوند.
- خواص مولکولی: نمایش خواص شیمیایی کلیدی مانند فرمول مولکولی، وزن مولکولی و نام IUPAC.
🌟 مراحل بعدی:
- اتم‌های متحرک: اتم‌های شناور آن را جذاب‌تر می‌کنند و جلوه‌های گیمیفی را ارائه می‌کنند.
- ممکن است بعداً اضافه شود (به چیزی در مورد تجسم سه بعدی فکر کنید).
🌟 تکنولوژی های مورد استفاده:
- برای اجزای رابط کاربری واکنش نشان دهید
- Cytoscape.js برای تجسم مولکولی مبتنی بر نمودار
- PubChem API برای داده های شیمیایی
- Motion/Threejs برای انیمیشن ها
GitHub: https://github.com/gprakasha/react-cytoscape-molecules
