Microfrontend.ir

آموزش React Query - useQuery Pagination

در این ویدیو از پلی لیست آموزش React Query یک سناریو ساده پیاده سازی Pagination با useQuery را بررسی کردیم. ابتدا Tailwind CSS را به پروژه اضافه کردیم و سپس یک کاستوم هوک جدید به پروژه اضافه کردیم که کار Pagination را انجام دهد و در نهایت متد select را بررسی کردیم که به اما این امکان را می دهد تا در صورت لزوم تبدیل یا transform بر روی داده های Query Cache داشته باشیم.


Video: https://youtu.be/XHgzkY6rOb8

PlayList: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBzELHNdflPj4XgS2hAXBILz

Git Repo: https://github.com/hemanhp/react-query-course

〰️〰️〰️〰️〰️〰️
© | @microfrontend_ir

آموزش React Query - useQuery Hook

در این ویدیو از پلی لیست آموزش React Query به بررسی useQuery Hook پرداختیم. این هوک برای رجیستر یا خواندن اطلاعات از Query Cache استفاده می شود. برای این کار از سرویس استفاده کردیم که لیستی از آگهی را بر میگرداند و بر اساس نوع آگهی آنها را فیلتر کردیم. دلیل استفاده از custom hook برای پیاده سازی بهتر ری اکت کوئری را هم شرح دادیم


Video: https://youtu.be/RP-Kf2J8fWA

PlayList: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBzELHNdflPj4XgS2hAXBILz

Git Repo: https://github.com/hemanhp/react-query-course

〰️〰️〰️〰️〰️〰️
© | @microfrontend_ir

آموزش React Query - Query Status
در این ویدیو از پلی لیست آموزش React Query به بررسی Query Status پرداختیم. ری اکت کوئری وضعیت دیتای داخل کش را از طریق متغیر status به کامپوننت ها اطلاع می دهد. پیش از گرفتن دیتا وضعیت pending و پس از آن success و در نهایت اگر خطایی داشته باشیم error خواهد بود

Video: https://youtu.be/EMMNZIwB4rs

PlayList: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBzELHNdflPj4XgS2hAXBILz

Git Repo: https://github.com/hemanhp/react-query-course

〰️〰️〰️〰️〰️〰️
© | @microfrontend_ir

آموزش React Query - Query Fetching

در این ویدیو از پلی لیست آموزش React Query به بررسی شیوه Query Fetching پرداختیم و حالت هایی ک هری اکت کوئری به شکل اتوماتیک سعی می کند Fetch را انجام دهد را بررسی کردیم

Video: https://youtu.be/rPRnkykrfc0

PlayList: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBzELHNdflPj4XgS2hAXBILz

Git Repo: https://github.com/hemanhp/react-query-course

〰️〰️〰️〰️〰️〰️
© | @microfrontend_ir

در این ویدیو از پلی لیست آموزش React Query به بررسی ساختار Query Cache و Inactive Queries ها پرداختیم.

Video: https://youtu.be/lCeE3C0xlHU

PlayList: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBzELHNdflPj4XgS2hAXBILz

Git Repo: https://github.com/hemanhp/react-query-course
〰️〰️〰️〰️〰️〰️
© | @microfrontend_ir

آموزش React Query - نصب و راه اندازی

در این ویدیو از آموزش React Query به بررسی مسیر نصب و راه اندازی ری اکت کوئری پرداختیم. ری اکت کوئری به صورت کلی یک ساختار Query Cache در اختیار ما قرار می دهد که بتوانیم داده ها وضعیت سرور در آن کش و مدیریت کنیم. ابتدا به بررسی کلی این ساختار پرداختیم سپس با استفاده از Vite یک پروژه ری‌اکتی ایجاد و React Query را نصب کردیم. شیوه استفاده از React Query Dev Tools را مطرح و سپس با استفاده از هوک useQuery به یک سرویس وصل بک اندی وصل شدیم و دیتا را نمایش دادیم. در خاتمه نیز یک پروژه جنگویی را ایجاد کردیم که در ادامه این پلی لیست از آن به عنوان بک اند استفاده کنیم. در انتهای این پلی لیست چیزی شبیه به صفحه آگهی های دیوار را با استفاده از جنگو و React Query ایجاد خواهیم کرد


Video: https://youtu.be/_6FL2Ml9tpo

PlayList: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBzELHNdflPj4XgS2hAXBILz

Git Repo: https://github.com/hemanhp/react-query-course
〰️〰️〰️〰️〰️〰️
© | @microfrontend_ir

آموزش React Query

در این پلی لیست آموزش React Query به بررسی مفهوم Client State Management و Server State Management در React.js و تفاوت های آنها پرداختیم. سپس چالش هایی که React Query در فضای مدیریت استیت برای ما حل می‌کند را معرفی کردیم.

** چون میخوام تو پنل ادمین فروشگاه از React Query استفاده کنم به نظرم اومد که لازمه یک پلی لیست کامل براش بسازم و همزمان آموزش پروژه محور ری اکت رو میبریم جلو

Video: https://youtu.be/1pF4fFcbnfU

PlayList: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBzELHNdflPj4XgS2hAXBILz

〰️〰️〰️〰️〰️〰️
© | @microfrontend_ir

در این ویدیو از آموزش پروژه محور جنگو به بررسی سیستم Authentication در جنگو پرداختیم. ابتدا به چرایی مساله احراز هویت بر بستر HTTP پرداختیم و اینکه چگونه می توان با یک شناسه منحصر بفرد پروتکل stateless به صورت stateful در آید. سپس فرایند احراز هویت جنگو را از طرریق کد جنگو مرور کردیم. پس از DRF را وارد بازی کردیم و نخست view پیش فرض آن و در نهایت این view را به گونه ای تغییر دادیم که فقط کاربران superuser بتوانند لاگین کنند.

** یکی از حملات مهم به وب سایت تایمینگ اتکه. در این حمله مهاجم برای یک کار مشخص چندین درخواست ارسال میکنه و براساس زمان پاسخگویی سرور به نتایج مدنظر خودش میرسه. مثلا فرض کنید مهاجم میخواد بدونه یک کاربر کلن وجود نداره یا پسوردشش غلطه، اگر شما به درستی فرایند احراز هویت رو مدیریت نکنید مهاجم نتیجه دلخواه رو خواهد گرفت. تو این کد جنگو را برای مدیریت این فرایند ریویو کردیم.

Video: https://youtu.be/wx8eTO5dWMc

PlayList: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBwnWCHfoka0G57oL-8fuMGW

Git: https://github.com/hemanhp/djshop

〰️〰️〰️〰️〰️〰️
© | @microfrontend_ir

در این ویدیو از پلی لیست آموزش رایگان پروژه محور Django به مررسی مفهوم کاربر در جنگو پرداختیم. ابتدا تنظیمات مرتبط با مدل یوزر در جنگو را مرور و سپس کلاس های پایه User در جنگو و فیلدهای آن را مرور کردیم. سپس برای Extend Django User Model یک اپ مستقل ساختیم و Custom User خود را نوشتیم و به پروژه اضافه کردیم. همچنین برای مدیریت آن به Django Admin هم اضافه کردیم


Video: https://youtu.be/wXBxfttOGUo

PlayList: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBwnWCHfoka0G57oL-8fuMGW

Git: https://github.com/hemanhp/djshop

〰️〰️〰️〰️〰️〰️
© | @microfrontend_ir

در این ویدیو از پلی لیست آموزش رایگان پروژه محور Django به بررسی مفهوم Authentication یا احراز هویت و Authorization یا اعتبار سنجی و تفاوت های آنها سیستم های نرم افزاری پرداختیم. در کنار رویکرد احراز هویت مبتنی بر مدل که در جنگو وجود دارد روش های مختلفی همچون LDAP و همچنین روش‌های مدرن WebAuthn که امکان احراز هویت بدون پسورد و مبتنی بر کریپتو گرافی است را معرفی کردیم.
روش های مختلفی هم برای Authorization وجود دارد که مهمترین آن Role-Base Access Control است که به راحتی در جنگو قابل پیاده سازی است. همچنین مفهوم Object level permission را مطرح کردیم.

https://youtu.be/wDt3M4Vv-GE

PlayList: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBwnWCHfoka0G57oL-8fuMGW

Git: https://github.com/hemanhp/djshop

〰️〰️〰️〰️〰️〰️
© | @microfrontend_ir

در این ویدیو از پلی لیست دیزاین پترن ها با یک مثال ساده سعی کردیم توضیح دهیم که Single Responsibility Principle چیست و چگونه کدهایی بنویسیم که این اصل را رعایت کنند

Video: https://youtu.be/FhZSza0aj-E

PlayList: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBxUIWhfp9euGlbBIrQUhm2Q

〰️〰️〰️〰️〰️〰️
© | @microfrontend_ir

در این ویدیو از آموزش رایگان پروژه محور Django به بررسی مفهوم موجودی محصول پرداختیم. مدلی ایجاد کردیم تحت عنوان stockrecord که انبارداری محصول را تسهیل کنیم و در نهایت محصول را از طریق django admin ذخیره کردیم. قبل از شروع یک باگ به روزرسانی عکس را که در ویدیوهای قبل بود اصلاح کردیم.


Video: https://youtu.be/Fy1UW6Z-ddw

PlayList: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBwnWCHfoka0G57oL-8fuMGW

Git: https://github.com/hemanhp/djshop

〰️〰️〰️〰️〰️〰️
© | @microfrontend_ir

در این ویدیو از آموزش پروژه محور Django به بررسی روش های Model Inheritance در جنگو پرداختیم. جنگو برای این کار سه رویکرد را ارایه داده است که رویکرد آن استفاده از abstarct model هاست. رویکرد دوم multi table inheritance و رویکرد سوم django proxy model است. ابتدا برای ذخیره اطلاعات زمان به روز رسانی و ایجاد رکورد از یک abstract model استفاده کردیم و سپس به عنوان مثال پروکسی، مدل LogEntry جنگو ادمین را اکستند کردیم.


Video: https://youtu.be/RADrO9uB1Xc

PlayList: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBwnWCHfoka0G57oL-8fuMGW

Git: https://github.com/hemanhp/djshop

〰️〰️〰️〰️〰️〰️
© | @microfrontend_ir

در این ویدیو از آموزش رایگان پروژه محور Django مدل تصاویر محصولات در فروشگاه ایجاد کردیم به گونه ای که بتوان برای هر محصول مجموعه ای از عکس ها اضافه کرد و یکی از آنها را به عنوان عکس اصلی مشخص کنیم. همچنین در صورت حذف عکس سایر عکس ها را مجدد مرتب کردیم.


Video: https://youtu.be/O8Crpne0iWg

PlayList: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBwnWCHfoka0G57oL-8fuMGW

Git: https://github.com/hemanhp/djshop

〰️〰️〰️〰️〰️〰️
© | @microfrontend_ir

در این ویدیو از آموزش رایگان پروژه محور Django مفهوم Business Exception را بررسی کردیم. ابتدا مدل image را به جنگو ادمین اضافه و سپس یک custom exception ایجاد و با استفاده از سیگنال پیش از ذخیره فایل چنانچه فایل تکراری باشد آن Exception را raise کردیم و در نهایت تنظیمات مرتبط با url مدیا ها را اعمال کردیم.


Video: https://youtu.be/KE6w_y4f85g

PlayList: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBwnWCHfoka0G57oL-8fuMGW

Git: https://github.com/hemanhp/djshop

〰️〰️〰️〰️〰️〰️
© | @microfrontend_ir

در این ویدیو از آموزش پروژه محور Django کار با Media در جنگو را بررسی کردیم. یکی از ویژگی های مهم در ذخیره‌سازی فایل‌ها در جنگو امکان پیکریندی storage است به این معنی که میتوان شیوه و مکان ذخیره سازی از فایل سیستم تا object storage هایی همچون آمازون S3 را پیکربندی کرد. برای مدیریت مدیا در پروژه اپ مستقلی تحت عنوان media ایجاد و یک مدل به نام Image طراحی کردیم. همچنین برای مدیریت فایل های تکراری فایل آپلود شده را از طریق SHA-1 هش و ایندکس کردیم تا در صورت لزوم جلوی آپلود فایل های تکراری را بگیریم.


Video: https://youtu.be/F_1Jecc9NRs

PlayList: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBwnWCHfoka0G57oL-8fuMGW

Git: https://github.com/hemanhp/djshop

〰️〰️〰️〰️〰️〰️
© | @microfrontend_ir

در این ویدیو از آموزش رایگان پروژه محور Django مفهوم پیشنهاد محصول و سیستم‌های پشنهاد دهنده را مختصرا معرفی و مدل رابطه محصول با کالاهای مرتبط را پیاده کردیم و آن را به جنگو ادمین اضافه کردیم


Video: https://youtu.be/vGU6x9WMLpo

PlayList: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBwnWCHfoka0G57oL-8fuMGW

Git: https://github.com/hemanhp/djshop

〰️〰️〰️〰️〰️〰️
© | @microfrontend_ir

Bun چیست و آیا می تواند جایگزین Node.js شود؟

در این ویدیو این سوال را بررسی کردیم که Bun چیست و آیا می تواند جایگزین Node.js شود؟ ران تایم انجین پر سرو صدای جاوا اسکریپت با ادعای سرعت و همه کاره بودن نظرات بسیاری را به خود جلب کرده است. در این ویدیو هم شیوه استفاده از bun در پروژه های قدیمی را شرح و هم با استفاده از ابزار مهم k6 برای تست پرفورمنس ادعای سرعت در bun را بررسی کردیم

Link: https://youtu.be/YuJsYrMRtSU

〰️〰️〰️〰️〰️〰️
© | @microfrontend_ir

در این ویدیو از آموزش رایگان پروژه محور Django به بررسی روابط Many to Many در جنگو و پیاده سازی جدول واسط یا Through Model پرداختیم. از این رویکرد برای ذخیره سازی مقادیر ویژگی های محصول استفاده می کنیم.


Video: https://youtu.be/2E-IWTe5mQU

PlayList: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBwnWCHfoka0G57oL-8fuMGW

Git: https://github.com/hemanhp/djshop

〰️〰️〰️〰️〰️〰️
© | @microfrontend_ir