در این دوره عملی و پروژه‌محور، قدم‌به‌قدم با فناوری‌های مدرن فرانت‌اند یعنی Vue 3، TypeScript و WebAssembly آشنا می‌شوید تا یک اپلیکیشن تعاملی و پرسرعت برای اعمال فیلترهای مشابه اینستاگرام بسازید. در پایان دوره می‌توانید فیلترهای سفارشی طراحی کنید، عملکرد پردازش تصویر را بهبود دهید و تجربه کاربری خود را به سطح حرفه‌ای برسانید.

• مفاهیم پایه و پیشرفته Vue 3 و Composition API برای ساخت کامپوننت‌های قابل بازیافت
• کار با TypeScript جهت افزایش ایمنی نوعی و رفع خطاهای زمان کامپایل
• ادغام WebAssembly با Vue و TypeScript برای پردازش سریع فیلترهای تصویری
• استفاده از Canvas API برای نمایش و تبدیل تصویر
• طراحی و پیاده‌سازی فیلترهای متداول همچون گری‌اسکیل، کنترست بالا، سِپیا و محوشدگی
• نکات بهینه‌سازی عملکرد و بارگذاری تنبل (lazy loading) ماژول‌های WebAssembly
• پیاده‌سازی رابط کاربری واکنش‌گرا و ریسپانسیو با استفاده از CSS Grid و Flexbox
• انتشار اپلیکیشن به‌صورت PWA و قابلیت نصب روی موبایل

• پروژه‌محوری: یادگیری همزمان نظریه و عمل
• تمرکز بر عملکرد: استفاده از WebAssembly برای پردازش سنگین تصویر
• کامل و به‌روز: بهره‌گیری از جدیدترین نسخه Vue و استانداردهای TypeScript
• کاربرد صنعتی: مهارت‌های قابل ارائه به کارفرما و در رزومه
• پشتیبانی از سوالات و رفع اشکال حین دوره
• ارائه فایل‌های تمرینی و سورس‌کد کامل هر جلسه

• آشنایی اولیه با HTML، CSS و JavaScript
• مفاهیم پایه‌ای TypeScript (انواع داده، اینترفیس و جنریک)
• درک اولیه از فریمورک Vue یا تجربه کار با React/Angular امتیاز محسوب می‌شود
• آشنایی مقدماتی با ابزارهای مدیریت بسته مانند npm یا yarn
• ترجیحاً تجربه‌ای با Rust یا C/C++ برای نوشتن کد WebAssembly

• معرفی دوره و ابزارهای مورد نیاز
• راه‌اندازی پروژه Vue با TypeScript و پیکربندی اولیه
• مبانی Composition API و ساخت کامپوننت‌های پایه
• آشنایی با WebAssembly: مفاهیم، مزایا و مثال ساده
• نوشتن یک ماژول Rust و تبدیل آن به WebAssembly
• ادغام WASM داخل Vue: import و بارگذاری پویا
• ایجاد فیلترهای پایه: گری‌اسکیل، سِپیا، معکوس‌سازی رنگ
• فیلترهای پیچیده‌تر: ماتریس کانولوشن، بلور گاوسی
• بهینه‌سازی عملکرد و کاهش حجم باندل
• ساخت رابط کاربری واکنش‌گرا و قابلیت کشیدن و رها کردن تصاویر
• اضافه کردن پیش‌نمایش لحظه‌ای و اسلایدر تنظیم پارامتر
• تست واحد و انتگرال با Jest و Vue Test Utils
• پکیج کردن اپ به‌صورت PWA و نصب روی موبایل
• نتیجه‌گیری، نکات تکمیلی و گواهی پایان دوره

در یک جلسه عملی، با هم بهره‌گیری از WebAssembly را بررسی می‌کنیم: ابتدا یک تابع ماتریس کانولوشن در Rust پیاده‌سازی می‌کنیم و با wasm-pack آن را به بسته‌ای قابل استفاده در Vue تبدیل می‌کنیم. سپس در App.vue از این تابع فراخوانی می‌کنیم تا با اعمال کرنل 3×3 بتوانیم بلور و شارپنس را در زمان واقعی روی تصویر اعمال نماییم. نتیجه یک تجربه تعاملی و سریع است که در فریم‌ورک‌های صرفاً جاوااسکریپتی ممکن است با تأخیر همراه باشد.

• استفاده از WebAssembly موجب افزایش چشمگیر سرعت پردازش تصویر می‌شود.
• TypeScript کمک می‌کند تا خطاها قبل از اجرا شناسایی شوند و کد مقیاس‌پذیرتر شود.
• Composition API در Vue 3 انعطاف و قابلیت تزریق وابستگی بهتری ارائه می‌دهد.
• بهینه‌سازی حجم نهایی بسته با بارگذاری تنبل (lazy loading) ماژول‌ها.
• پیاده‌سازی PWA باعث دسترسی آفلاین و نصب ساده روی دستگاه‌های موبایل می‌شود.

پس از ثبت‌نام، می‌توانید تمامی ویدیوها، سورس‌کدها و فایل‌های تمرینی را دانلود کنید. لینک‌های دسترسی در پنل کاربری شما قرار دارند و به‌روزرسانی‌های آینده نیز برای شرکت‌کنندگان ارسال خواهد شد. در پایان دوره، گواهی معتبر همراه با جزئیات سرفصل‌ها صادر می‌شود.

برای دانلود دوره و دریافت کد تخفیف ویژه، از لینک زیر استفاده کنید:

• دانلود دوره «ساخت اپلیکیشن فیلترهای اینستاگرام»