Front Cast
Открыть в Telegram
1 969
Подписчики
+324 часа
+117 дней
+2230 дней
Архив постов
1 970
در این ویدیو با مفهوم Code Review در برنامهنویسی آشنا میشیم و بررسی میکنیم که چه چیزهایی رو باید در این فرایند در نظر بگیریم.
همچنین درباره Code Review در برنامهنویسی با AI صحبت میکنیم و با اسکیل Review Effort آشنا میشیم.
لینک ویدیو
@frontcast | فرانت کست
1 970
تخفیف ویژه ۶۰ درصدی برای همه دورههای فرانت کست شروع شده.
تا پایان این هفته میتونید با تخفیف ویژه، برای دورههای فرانت کست ثبت نام کنید و مسیر یادگیری برنامهنویسی رو جدیتر ادامه بدید.
اگر برای انتخاب دوره یا مسیر یادگیری نیاز به راهنمایی دارید، بهم پیام بدید تا در موردش صحبت کنیم: @masoodsadri
مشاهده دورهها
@frontcast | فرانت کست
1 970
اسکیل Review Effort رو حدود دو هفته پیش نوشتم. هدف اصلی این هست که فرآیند Code Review بهینهتر انجام بشه. البته فعلا در حال توسعه هست.
ویدیو بعدی یوتوب در مورد Code Review هست و استفاده از این Skill رو هم توضیح میدم.
با هر ابزار AI که کار میکنید میتونید این Skill رو از skills.sh نصب کنید:
https://www.skills.sh/masoodsadri/review-effort/review-effort
گیتهاب:
https://github.com/MasoodSadri/review-effort
@frontcast | فرانت کست
1 970
فصل جدید دوره "آموزش Next.js - حل مسئله" منتشر شده.
در این بهروزرسانی، بخش اول پنل ادمین رو با مدیریت سفارشها پیادهسازی کردیم. از ساخت Layout ادمین و نمایش خلاصه سفارشها و نمودار گزارش فروش گرفته تا مدیریت سفارشها، حذف سفارش و بهروزرسانی اونها.
در بهروزرسانی بعدی، دو فصل "پنل ادمین - محصولات" و "پنل ادمین - کاربران" رو اضافه میکنیم تا بخش ادمین پروژه تکمیل بشه.
این دوره یک آموزش جامع و پروژهمحوره که تمرکزش روی یادگیری مهارت حل مسئله در کنار توسعه فولاستک و معماری نرمافزاره. در طول پروژه هم از آخرین نسخههای Next.js و TypeScript استفاده میکنیم.
بهروزرسانیهای دوره هر دو هفته یکبار منتشر میشن و قدمبهقدم پروژه رو توسعه میدیم.
@frontcast | فرانت کست
1 970
برنامهنویسی فولاستک با Next.js و ترکیب React و Node.js هر دو امکان ساخت یک محصول کامل رو فراهم میکنن، اما تفاوتشون در نحوه سازماندهی بخشهای مختلف برنامه و میزان کنترلیه که روی معماری سیستم داریم.
در روش اول، از Next.js استفاده میکنیم که امکاناتی برای ساخت رابط کاربری، اجرای کد سمت سرور، تعریف API و مدیریت درخواستها در اختیارمون قرار میده.
در روش دوم، معمولا React رو برای رابط کاربری و Node.js رو برای پیادهسازی بکاند به کار میبریم. این دو بخش میتونن مستقل از هم توسعه داده و اجرا بشن.
تفاوتهای اصلی:
- در Next.js، بسیاری از قابلیتهای فرانتاند و بکاند رو میتونیم در یک پروژه مدیریت کنیم.
- در ترکیب React و Node.js، آزادی بیشتری برای انتخاب ساختار بکاند، فریمورک سرور و نحوه ارتباط بین بخشها داریم.
- در Next.js قابلیتهایی مثل Server Rendering، Server Components و روشهای مختلف دریافت داده در اختیارمون قرار میگیره.
- در معماری جداگانه، میتونیم فرانتاند و بکاند رو مستقل توسعه بدیم، مستقر کنیم و در صورت نیاز جداگانه مقیاسپذیر کنیم.
- استفاده از Next.js لزوما به معنی سادهتر بودن همه پروژهها نیست. ساختار پروژه همچنان به طراحی درست نیاز داره.
چه زمانی Next.js انتخاب منطقیتریه؟
- وقتی میخوایم یک وبسایت یا فروشگاه اینترنتی با قابلیتهای فرانتاند و بکاند بسازیم.
- وقتی SEO، نمایش سریع محتوای اولیه و رندر سمت سرور اهمیت داره.
- وقتی میخوایم بخش زیادی از منطق برنامه رو در یک پروژه نگهداری کنیم.
- وقتی تیم کوچکی داریم و ترجیح میدیم پیچیدگی مدیریت چند پروژه مستقل رو کمتر کنیم.
چه زمانی React و Node.js جداگانه انتخاب منطقیتری هستن؟
- وقتی فرانتاند و بکاند نیازهای متفاوتی دارن و باید مستقل توسعه داده بشن.
- وقتی چند کلاینت مثل وبسایت، اپلیکیشن موبایل و سرویسهای دیگر از یک API مشترک استفاده میکنن.
- وقتی بکاند پیچیدهای داریم که به معماری مستقل، پردازشهای پسزمینه یا کنترل بیشتری روی زیرساخت نیاز داره.
- وقتی میخوایم فرانتاند و بکاند رو جداگانه مستقر و مقیاسپذیر کنیم.
نکته مهم:
هیچکدوم از این روشها همیشه بهتر نیستن. حتی میتونیم از Next.js برای فرانتاند و نمایش صفحات استفاده کنیم و یک بکاند مستقل با Node.js هم داشته باشیم. انتخاب درست به نیازهای پروژه بستگی داره، نه صرفا محبوبیت تکنولوژیها.
خلاصه:
فریمورک Next.js برای ساخت بسیاری از وباپلیکیشنهای مدرن، انتخابی یکپارچه و کاربردیه. ترکیب React و Node.js هم وقتی استقلال بیشتر، معماری جداگانه یا بکاند تخصصیتری نیاز داریم، میتونه انتخاب مناسبی باشه. مهمتر از انتخاب ابزار، شناخت نیازهای پروژه و طراحی درست معماری اون هست.
@frontcast | فرانت کست
1 970
برنامهنویسی فولاستک با Next.js و ترکیب React و Node.js هر دو امکان ساخت یک محصول کامل رو فراهم میکنن، اما تفاوتشون در نحوه سازماندهی بخشهای مختلف برنامه و میزان کنترلیه که روی معماری سیستم داریم.
در روش اول، از Next.js استفاده میکنیم که امکاناتی برای ساخت رابط کاربری، اجرای کد سمت سرور، تعریف API و مدیریت درخواستها در اختیارمون قرار میده.
در روش دوم، معمولا React رو برای رابط کاربری و Node.js رو برای پیادهسازی بکاند به کار میبریم. این دو بخش میتونن مستقل از هم توسعه داده و اجرا بشن.
تفاوتهای اصلی:
- در Next.js، بسیاری از قابلیتهای فرانتاند و بکاند رو میتونیم در یک پروژه مدیریت کنیم.
- در ترکیب React و Node.js، آزادی بیشتری برای انتخاب ساختار بکاند، فریمورک سرور و نحوه ارتباط بین بخشها داریم.
- در Next.js قابلیتهایی مثل Server Rendering، Server Components و روشهای مختلف دریافت داده در اختیارمون قرار میگیره.
- در معماری جداگانه، میتونیم فرانتاند و بکاند رو مستقل توسعه بدیم، مستقر کنیم و در صورت نیاز جداگانه مقیاسپذیر کنیم.
- استفاده از Next.js لزوما به معنی سادهتر بودن همه پروژهها نیست. ساختار پروژه همچنان به طراحی درست نیاز داره.
چه زمانی Next.js انتخاب منطقیتریه؟
- وقتی میخوایم یک وبسایت یا فروشگاه اینترنتی با قابلیتهای فرانتاند و بکاند بسازیم.
- وقتی SEO، نمایش سریع محتوای اولیه و رندر سمت سرور اهمیت داره.
- وقتی میخوایم بخش زیادی از منطق برنامه رو در یک پروژه نگهداری کنیم.
- وقتی تیم کوچکی داریم و ترجیح میدیم پیچیدگی مدیریت چند پروژه مستقل رو کمتر کنیم.
چه زمانی React و Node.js جداگانه انتخاب منطقیتری هستن؟
- وقتی فرانتاند و بکاند نیازهای متفاوتی دارن و باید مستقل توسعه داده بشن.
- وقتی چند کلاینت مثل وبسایت، اپلیکیشن موبایل و سرویسهای دیگر از یک API مشترک استفاده میکنن.
- وقتی بکاند پیچیدهای داریم که به معماری مستقل، پردازشهای پسزمینه یا کنترل بیشتری روی زیرساخت نیاز داره.
- وقتی میخوایم فرانتاند و بکاند رو جداگانه مستقر و مقیاسپذیر کنیم.
نکته مهم:
هیچکدوم از این روشها همیشه بهتر نیستن. حتی میتونیم از Next.js برای فرانتاند و نمایش صفحات استفاده کنیم و یک بکاند مستقل با Node.js هم داشته باشیم. انتخاب درست به نیازهای پروژه بستگی داره، نه صرفا محبوبیت تکنولوژیها.
خلاصه:
فریمورک Next.js برای ساخت بسیاری از وباپلیکیشنهای مدرن، انتخابی یکپارچه و کاربردیه. ترکیب React و Node.js هم وقتی استقلال بیشتر، معماری جداگانه یا بکاند تخصصیتری نیاز داریم، میتونه انتخاب مناسبی باشه. مهمتر از انتخاب ابزار، شناخت نیازهای پروژه و طراحی درست معماری اون هست.
@frontcast | فرانت کست
1 970
چتبات هوش مصنوعی بیشتر برای پاسخ دادن به سوالها و تعامل با کاربر استفاده میشه، اما ایجنت هوش مصنوعی میتونه علاوه بر پاسخ دادن، برای رسیدن به یک هدف مشخص چند مرحله رو برنامهریزی و اجرا کنه.
تفاوتهای اصلی:
- چتبات معمولا به سوالها پاسخ میده، توضیح میده یا محتوا تولید میکنه.
- ایجنت میتونه یک هدف دریافت کنه، کارها رو به مراحل کوچکتر تقسیم کنه و برای رسیدن به نتیجه اقدام کنه.
- چتبات بیشتر بر اساس درخواست کاربر پاسخ تولید میکنه، اما ایجنت میتونه در طول انجام کار، نتیجه اقداماتش رو بررسی کنه و مرحله بعدی رو انتخاب کنه.
- ایجنت در صورت داشتن دسترسی مناسب، میتونه از ابزارهایی مثل ترمینال، فایلها، APIها و دیتابیس استفاده کنه.
- ایجنت میتونه چند مرحله رو پشت سر هم اجرا کنه. مثلا کد بنویسه، تستها رو اجرا کنه، خطاها رو بررسی کنه و کد رو اصلاح کنه.
مثلا اگر از یک چتبات بخوایم یک تابع برای ثبت سفارش بنویسه، ممکنه کد موردنیاز رو در اختیارمون بذاره.
اما اگر همین وظیفه رو به یک ایجنت برنامهنویسی مثل Codex یا Claude Code بدیم، میتونه با دسترسی مناسب، فایلهای پروژه رو بررسی کنه، تابع رو پیادهسازی کنه، تستها رو اجرا کنه و در صورت نیاز تغییرات رو اصلاح کنه.
@frontcast | فرانت کست
1 970
سیستم دیزاین و معماری نرمافزار هر دو به ساختارمند شدن پروژه کمک میکنن، اما مسئلهای که حل میکنن متفاوته.
سیستم دیزاین یعنی طراحی یک سیستم کامل برای رسیدن به نیازهای مشخص، مثل تعداد کاربران، حجم درخواستها، سرعت پاسخگویی و میزان دسترسپذیری.
معماری نرمافزار یکی از بخشهای مهم این طراحی هست که روی ساختار نرمافزار، اجزای اصلی و نحوه ارتباط اونها با هم تمرکز میکنه.
تفاوتهای اصلی:
- سیستم دیزاین مشخص میکنه کل سیستم چطور کار کنه و چطور نیازهای عملیاتی رو برآورده کنه.
- معماری نرمافزار مشخص میکنه ساختار نرمافزار چطور باشه و اجزای اصلی چطور با هم ارتباط داشته باشن.
- در سیستم دیزاین درباره Load Balancer، Caching، Database، Queue، تعداد Requestها و مقیاسپذیری تصمیم میگیریم.
- در معماری نرمافزار درباره ساختار ماژولها، مرزبندی مسئولیتها، وابستگیها و ارتباط بین سرویسها تصمیم میگیریم.
- سیستم دیزاین علاوه بر معماری نرمافزار، زیرساخت، ظرفیت سیستم، محدودیتها و نیازهای عملیاتی رو هم در نظر میگیره.
مثلا فرض کنیم میخوایم یک فروشگاه اینترنتی طراحی کنیم که روزانه میلیونها Request دریافت میکنه.
در سیستم دیزاین بررسی میکنیم چطور ترافیک رو بین سرورها تقسیم کنیم، چه زمانی از Cache استفاده کنیم، دیتابیس چطور پاسخگو بمونه و چطور از افزایش ناگهانی ترافیک عبور کنیم.
در معماری نرمافزار مشخص میکنیم بخشهای سفارش، پرداخت، کاربران و محصولات چطور سازماندهی بشن و چه ارتباطی با هم داشته باشن.
@frontcast | فرانت کست
1 970
دیباگ کردن فقط پیدا کردن خطی که باعث خطا شده نیست. بلکه یک فرآیند برای درک رفتار برنامه، پیدا کردن علت مشکل و رسیدن به راهحل درست هست.
چرا Debugging یک مهارت مهم در برنامهنویسیه؟
- کمک میکنه بهجای حدس زدن، علت واقعی مشکل رو پیدا کنیم.
- باعث میشه رفتار برنامه رو بهتر درک کنیم و بفهمیم دادهها چطور پردازش میشن.
- یاد میگیریم چطور از ابزارهایی مثل Debugger، Breakpoint و Log برای بررسی کد استفاده کنیم.
- کمک میکنه خطاهای پیچیده رو به بخشهای کوچکتر تقسیم کنیم و مرحلهبهمرحله بررسی کنیم.
- باعث میشه بهجای برطرف کردن موقت نشانههای خطا، مشکل اصلی رو حل کنیم.
- کمک میکنه بعد از رفع مشکل، با نوشتن تست از تکرار دوباره اون جلوگیری کنیم.
نکته مهم:
برنامهنویس حرفهای کسی نیست که هیچوقت باگ ایجاد نمیکنه. کسیه که میتونه با روش درست، علت باگ رو پیدا کنه و اون رو برطرف کنه.
@frontcast | فرانت کست
1 970
در این ویدیو با مفهوم Skill در برنامه نویسی با هوش مصنوعی آشنا میشیم و بررسی میکنیم که Skill دقیقا چیه و چه مشکلی رو برای کار با AI Agentها حل میکنه.
در ادامه هم با OpenCode از یک Skill در پروژه استفاده میکنیم و کاربرد عملی اون رو بررسی میکنیم.
لینک ویدیو
@frontcast | فرانت کست
1 970
فهمیدن Syntax به ما کمک میکنه بدونیم چطور کد بنویسیم، اما فهمیدن جریان داده باعث میشه بدونیم اطلاعات داخل برنامه چطور حرکت میکنن و چطور روی نتیجه نهایی تاثیر میذارن.
چرا جریان داده مهمه؟
- کمک میکنه بفهمیم داده از کجا وارد برنامه میشه و در نهایت کجا استفاده میشه.
- درک ارتباط بین کامپوننتها، توابع و بخشهای مختلف پروژه رو راحتتر میکنه.
- باعث میشه خطاها رو سریعتر پیدا کنیم و بفهمیم مشکل در کدوم مرحله اتفاق افتاده.
- در ابزارهایی مثل React و Next.js، کمک میکنه ارتباط بین Props، State، درخواستهای سرور و رابط کاربری رو بهتر درک کنیم.
- وقتی با پروژههای بزرگ کار میکنیم، کمک میکنه تغییرات رو با آگاهی بیشتری انجام بدیم و از ایجاد خطاهای ناخواسته جلوگیری کنیم.
- استفاده از AI رو هم موثرتر میکنه، چون میتونیم دقیقتر توضیح بدیم دادهها چطور باید پردازش بشن و انتظار داریم چه نتیجهای تولید بشه.
مثلا ممکنه Syntax مربوط به React رو بلد باشیم، اما اگر ندونیم داده از Server به کدوم کامپوننت میرسه، کجا تغییر میکنه و چطور نمایش داده میشه، پیادهسازی یا عیبیابی یک Feature واقعی برامون سخت میشه.
خلاصه:
حفظ کردن Syntax بهمون یاد میده چطور کد بنویسیم، اما درک جریان داده کمک میکنه بفهمیم برنامه چطور کار میکنه. برای همین، هرچقدر پروژهها بزرگتر و پیچیدهتر بشن، درک جریان داده اهمیت بیشتری پیدا میکنه.
@frontcast | فرانت کست
1 970
دوستان خوبم امروز آخرین فرصت استفاده از تخفیف ویژه ۶۰ درصدی هست.
اگر برای ثبت نام در دورهها نیاز به مشاوره و یا راهنمایی بود لطفا بهم پیام بدید: @masoodsadri
مشاهده دورهها
@frontcast | فرانت کست
1 970
وقتی یک تسک بزرگ رو یکجا به AI Agent میدیم، احتمال خطا و تغییرات غیرضروری بیشتر میشه. بهتره مسئله رو به چند تسک کوچک و مشخص تقسیم کنیم.
برای این کار:
- اول هدف نهایی رو مشخص کنیم.
- بخشهای مختلف کار رو جدا کنیم.
- هر بخش رو به یک تسک مستقل و قابل بررسی تبدیل کنیم.
- ترتیب انجام تسکها و وابستگی بین اونها رو مشخص کنیم.
- برای هر تسک، ورودی، خروجی مورد انتظار و محدودیتها رو مشخص کنیم.
- بعد از انجام هر تسک، تغییرات رو بررسی و تست کنیم.
- اگر از ابزارهایی مثل Codex یا Claude Code استفاده میکنیم، بهتره Agent رو مرحلهبهمرحله جلو ببریم و بعد از هر مرحله نتیجه رو بررسی کنیم.
مثلا بهجای اینکه بگیم "پنل سفارشهای ادمین رو کامل پیادهسازی کن"، میتونیم کار رو به چند مرحله تقسیم کنیم:
۱. ساخت Layout پنل ادمین
۲. دریافت و آمادهسازی دادههای سفارشها
۳. نمایش خلاصه اطلاعات
۴. ساخت جدول سفارشها
۵. اضافه کردن حذف سفارش
۶. اضافه کردن بهروزرسانی سفارش
۷. نوشتن تست و بررسی نهایی
خلاصه:
هرچقدر تسکها کوچکتر، مشخصتر و قابل بررسیتر باشن، AI Agent هم راحتتر میتونه کار رو انجام بده و ما کنترل بیشتری روی تغییرات پروژه خواهیم داشت.
@frontcast | فرانت کست
1 970
فصلهای "پیادهسازی درگاه زرینپال" و "پنل کاربر" به دوره "آموزش Next.js - حل مسئله" اضافه شدن و دوره وارد مرحله جدیدی از توسعه شده.
فصل بعدی با عنوان "پنل ادمین - سفارشها" شامل ۱۰ جلسه جدید از توسعه Layout ادمین تا مدیریت و بهروزرسانی سفارشهاست.
در حال حاضر دورههای فرانت کست با ۶۰ درصد تخفیف ویژه در دسترس هستن و این تخفیف تا پایان هفته اعتبار داره.
@frontcast | فرانت کست
1 970
از امروز تا پایان هفته میتونید با ۶۰ درصد تخفیف ویژه برای دورههای فرانت کست ثبت نام کنید.
اگر تصمیم دارید مسیر فولاستک JavaScript رو شروع کنید، این بهترین فرصت هست.
برای مشاوره یا راهنمایی میتونید بهم پیام بدید تا باهم صحبت کنیم: @masoodsadri
مشاهده دورهها
@frontcast | فرانت کست
1 970
نامگذاری در برنامهنویسی فقط انتخاب اسم برای Variable یا Function نیست. اسمهای درست کمک میکنن کد رو سریعتر بفهمیم و راحتتر تغییر بدیم.
چرا Naming مهمه؟
- اسم مناسب باعث میشه هدف یک Variable یا Function بدون بررسی جزئیات کد مشخص باشه.
- کد خواناتر میشه و درک پروژه برای اعضای تیم راحتتر میشه.
- وقتی چند ماه بعد به کد برمیگردیم، راحتتر میفهمیم هر بخش چه کاری انجام میده.
- اسمهای واضح باعث میشن نیاز به Commentهای اضافی کمتر بشه.
- نامگذاری درست باعث میشه کد راحتتر قابل نگهداری و توسعه باشه.
- اسمهای مبهم میتونن باعث برداشت اشتباه و حتی استفاده نادرست از یک بخش کد بشن.
مثلا اسم getUserData خیلی بهتر از getData یا data میتونه مشخص کنه یک تابع دقیقا چه کاری انجام میده.
نکته مهم:
هدف از Naming این نیست که اسمها همیشه طولانی باشن. اسم باید به اندازهای واضح باشه که مفهوم چیزی که نامگذاری شده رو منتقل کنه.
خلاصه:
کد خوب فقط کدی نیست که درست اجرا میشه. باید برای برنامهنویسهای دیگه و حتی خودمون در آینده هم قابل فهم باشه و Naming یکی از سادهترین و در عین حال مهمترین بخشهای رسیدن به این هدفه.
@frontcast | فرانت کست
1 970
در این ویدیو با مفاهیم و ابزارهای AI برای برنامهنویسی آشنا میشیم. از LLM و AI Chat گرفته تا AI Agent و Coding Assistant.
همچنین درباره Token ،Context ،Context Window و Context Engineering صحبت میکنیم و بررسی میکنیم که این مفاهیم چه نقشی در کار کردن با ابزارهای AI برای برنامهنویسی دارن.
لینک ویدیو
@frontcast | فرانت کست
1 970
خیلی وقتها یک کد فقط به این دلیل که درست اجرا میشه، لزوما کد قابل اعتمادی نیست.
ممکنه یک Feature در حالت عادی درست کار کنه، اما با ورودی غیرمنتظره، خطا، تغییر داده یا شرایط واقعی پروژه مشکل پیدا کنه.
برای تبدیل کد به کدی که بشه روی اون حساب کرد، چند مرحله مهم وجود داره:
- کد رو با ورودیهای مختلف تست کنیم، نه فقط یک حالت معمول.
- حالتهای خطا و شرایط غیرمنتظره رو در نظر بگیریم.
- برای بخشهای مهم Unit، Integration یا E2E Test بنویسیم.
- رفتار کد در شرایط واقعی پروژه رو بررسی کنیم.
- مدیریت خطا مناسب داشته باشیم.
- کد رو از نظر خوانایی و قابل نگهداری بودن بررسی کنیم.
- وابستگیها و فرضهایی که کد بر اساس اونها نوشته شده رو مشخص کنیم.
- بعد از تغییرات، تستهای قبلی رو دوباره اجرا کنیم تا چیزی خراب نشده باشه.
- در نهایت کد رو با Code Review بررسی کنیم.
اگر از AI برای نوشتن کد استفاده میکنیم، این موضوع اهمیت بیشتری پیدا میکنه. نباید فقط بگیم «کد کار میکنه»، بلکه باید از AI بخوایم تستها، حالتهای خطا و Edge Caseها رو هم بررسی کنه و بعد خودمون خروجی رو تست کنیم.
@frontcast | فرانت کست
