در این ویدیو از پلی لیست آموزش رایگان پروژه محور 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

در این ویدیو از آموزش پروژه محور جنگو به بررسی سیستم 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

آموزش 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

آموزش 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 به بررسی ساختار 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 - 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 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 - 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 - 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 - Pause or Cancel Query

در این ویدیو از آموزش React Query به بررسی مفاهیم Pause و Cancel Query و برخی مسایل مرتبط به آن پرداختیم. از طریق خصوصیت enable در ری اکت کوییری میتوان فعال بودن یا غیر فعال بودن کوییری برای fetch کردن دیتا استفاده کرد و همچینین از Abort Controller و Abort Signal برای cancel کردن درخواست ها استفاده کر


Video: https://youtu.be/xqfOX1Rwzr8

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

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

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

سلام وقت بخیر دوستان. احتمالا پنل ادمین ریاکت رو در روزهای آینده شروع کنیم و همزمان جنگو رو باهاش ببریم جلو. اگر UI Designer هستید چنانچه دیزاین سیستم یا UI Kit خاصی برای پنل ادمین دارید که بتونیم در این پلی لیست پیاده سازیش کنیم خوشحال میشم بهم اطلاع بدید. ممنونم. منظورم چیزیه که تو فیگما مثلا طراحی شده باشه

@HemanHP2

آموزش React Query - useInfiniteQuery Hook

در این ویدیو از آموزش React Query به بررسی useInfiniteQuery Hook برای پیاده سازی infinite pagination پرداختیم. ابتدا شیوه ذخیره سازی داده ها در این حالت را بررسی و سپس یک کاستوم هوک نوشتیم که بتوانیم از آن در کامپوننت استفاده کنیم. و در نهایت دریافت داده ها را از طریق کلیک پیاده سازی کردیم


Video: https://youtu.be/IA7dMV7crJg

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

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

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

آموزش React Query - Infinite Scrolling


در این ویدیو از آموزش React Query مفهوم Infinite Scrolling را پیاده سازی کردیم. ابتدا با استفاده Intersection Observer زمان لود داده های جدید را مشخص و با استفاده از اسکرول لیست خود را آپدیت کردیم. در نهایت ضرورت دقت در مورد بهینه سازی کامپوننت ها بويژه در زمان کار با داده های سنگین شرح دادیم. به عنوان مثال نیز با استفاده از useCallback شیوه گرفتن داده ها را از query cache بهینه کردیم.


Video: https://youtu.be/AbUKEGNfJ9M

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

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

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

اگر برنامه نویس جنگو هستید حتما استفاده از select_related و prefetch_related رو تو کوییری ست هاتون مد نظر داشته باشید. دیروز با دوستی سرویسی رو چک میکردیم که کار سنگینی رو انجام و میداد و بیش از ۸۰ ثانیه رو یک سیستم نسبتا قوی طول میکشید، صرفا با اضافه کردن مواردی که گفتم تایم اجرا اومد رو ۵ ثانیه




بهینه سازی جنگو از طریق select_related
Link: https://youtu.be/TK3P4Cy5fNg


بهینه سازی جنگو از طریق prefetch_related
Link: https://youtu.be/lkThOygE8LM


بهینه سازی جنگو از طریق defer و only
Link: https://youtu.be/u629fDW5drM

پلی لیست نکته ها و ترفندهای جنگو:
https://www.youtube.com/playlist?list=PLJ9zDGwhhsBwdrfdaoOqbYev3_ocuBOfv


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

آموزش React Query - تفاوت initialData و placeholderData

در این ویدیو از آموزش React Query به بررسی initialDate و placeholderData پرداختیم. تاکنون گفتیم که برای دسترسی به داده ها بایستی تابع fetch داده ها را دریافت و به واسط کاربری انتقال دهیم. React Query از طریق دو خصوصیت initialData و placeholderData به ما این امکان را می دهند که برای کوییری ها داده های اولیه ست کنیم. در این ویدیو به عنوان مثال سرویس GetById را پیاده کردیم و از طریق tailwindcss یک Drawer ساده ایجاد کردیم که با کلیک بر روی هر آیتم جزییات آن در دراور نمایش داده شود.


Link: https://youtu.be/jx-zffeFCpc

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

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

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

ویژگی های جدید Django 5

نسخه Django 5 منتشر شد و ویژگی‌های جدیدی به آن اضافه شده و روند سازگاری با Asyncio سرعت بیشتری به خود گرفته است. در این ویدیو به برخی از ویژگی های مهم آن همچون مقادیر پیش فرض در سطح دیتابیس و Generated Field ها پرداختیم و در نهایت در مورد ضرورت بررسی CancelError که در نسخه های قبل وجود نداشت و در این نسخه امکان مدیریت آن اضافه شده صحبت کردیم.

Link: https://youtu.be/lKibwV47uLI
-------------

آموزش پردازش موازی در پایتون - جنگو مفاهیم thread, process و async await در پایتون
Link: https://youtu.be/TRnS-hMytc4

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

اگر مثل من به حوزه های مرتبط با دیتا مخصوصا در مقیاس بزرگ علاقه دارید پیشنهادم اینه که حتما دیتابیس خفن ScyllaDB رو دنبال کنید. هم آینده خوبی داره و هم از نظر فنی بسیار دیتابیس جذابیه. حتی جذاب تر از کاساندرا! :)
حدودا دو ماه دیگه هم یک سامیت دارند که رایگان می‌تونید ثبت نام کنید:

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

https://www.scylladb.com/scylladb-summit-2024/

آموزش React Query - ایجاد ایتم با useMutation


در این ویدیو از آموزش React Query به بررسی اولیه هوک useMutation پرداختیم. ابتدا با استفاده از React Hook Form یک فرم ساده برای ایجاد آگهی ساختیم و پس از ذخیره از طریق invalidateQueries لیست خود را به روزرسانی کردیم


Link: https://youtu.be/SqaB3cfl7eU

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

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

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

آموزش React Query - پیاده سازی Optimistic Update با useMutation

در این ویدیو از آموزش React Query به بررسی مفهوم پیاده سازی Optimistic Update با useMutation پرداخت. ابتدا فرمی ساختیم که آگهی را آپدیت کند و سپس برای ایجاد واسط کاربری بهتر به روزرسانی آگهی به گونه ای انجام دادیم که بلافاصله بعد از زدن دکمه ذخیره واسط کاربری به روزرسانی شود و در صورتی که مشکلی در فراخوانی سرویس داشتیم به وضعیت قبل برگردیم.


Link: https://youtu.be/I0-Qey-VL_Y

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

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

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