نوشته های زهرا رضائی

🌟 معرفی پروژه Todo List با React و Bootstrap 🌟

زهرا رضائی — Sun, 11 Aug 2024 17:00:00 +0330

در این پروژه، من یک Todo List ساده اما کامل را با استفاده از React و Bootstrap پیاده‌سازی کرده‌ام. این پروژه نه تنها توانایی‌های من در توسعه وب با React را به نمایش می‌گذارد، بلکه تجربه من در استفاده از Bootstrap برای طراحی واکنش‌گرا و کاربرپسند را نیز به اثبات می‌رساند. در ادامه، به تفصیل به معرفی و بررسی ویژگی‌های این پروژه می‌پردازم.📜 توضیحات پروژهپروژه Todo List یک اپلیکیشن وب است که به کاربران این امکان را می‌دهد که وظایف خود را اضافه، مشاهده، کامل، و حذف کنند. این پروژه با استفاده از React برای ایجاد تعاملات پویا و Bootstrap برای طراحی جذاب و واکنش‌گرا توسعه یافته است. در این پروژه، من با مفاهیم مختلف React مانند State Management و Event Handling آشنا شدم و یاد گرفتم چگونه می‌توان از Bootstrap برای بهبود تجربه کاربری استفاده کرد.🚀 ویژگی‌های کلیدی پروژهاضافه کردن وظایف (Todos): کاربران می‌توانند با وارد کردن متن وظیفه در فیلد ورودی و کلیک بر روی دکمه "Add Todo" یا فشار دادن کلید Enter، وظیفه جدیدی اضافه کنند.حذف وظایف: کاربران می‌توانند با کلیک بر روی دکمه "Remove" هر وظیفه‌ای که دیگر نیاز ندارند را از لیست حذف کنند.علامت‌گذاری به عنوان کامل شده: با کلیک بر روی دکمه "Complete" یا "Undo"، کاربران می‌توانند وضعیت تکمیل یک وظیفه را تغییر دهند. وظایف کامل شده با خط خطی نمایش داده می‌شوند.طراحی واکنش‌گرا: استفاده از Bootstrap به اپلیکیشن این امکان را می‌دهد که به صورت خودکار در اندازه‌های مختلف صفحه نمایش سازگار شود و طراحی کاربرپسند و زیبا را ارائه دهد.🔧 تکنولوژی‌های استفاده شدهReact: برای مدیریت وضعیت و تعاملات پویا.استفاده از useState برای مدیریت وضعیت ورودی و لیست وظایف.ایجاد کامپوننت‌های مجزا برای ورودی و نمایش وظایف.استفاده از event handlers برای مدیریت رویدادهای کلیک و فشار دادن کلید.Bootstrap: برای طراحی زیبا و واکنش‌گرا.استفاده از کلاس‌های Bootstrap برای طراحی فرم‌ها، دکمه‌ها و کارت‌ها.طراحی ریسپانسیو با استفاده از کلاس‌های Bootstrap مانند container, input-group, btn, و card.HTML/CSS: برای ساختار و طراحی پایه.استفاده از HTML برای ساختار اپلیکیشن.سفارشی‌سازی CSS برای تطابق با نیازهای طراحی خاص.📂 ساختار پروژه کامپوننت App.js: کامپوننت اصلی که شامل وضعیت‌های کلی اپلیکیشن و منطق برای افزودن، حذف، و علامت‌گذاری وظایف است.کامپوننت Todo.js: کامپوننت برای نمایش لیست وظایف و دکمه‌های تعامل (کامل کردن و حذف).کامپوننت EnterTodo.js: کامپوننت برای ورودی وظیفه و دکمه "Add Todo".🛠 آموخته‌ها و مهارت‌هادر این پروژه، من توانستم:مدیریت وضعیت با React: یاد گرفتم چگونه وضعیت‌های مختلف (مانند ورودی کاربر و لیست وظایف) را با استفاده از useState مدیریت کنم.تعامل با رویدادها: توانستم با استفاده از event handlers به تعاملات مختلف مانند کلیک و فشار دادن کلید واکنش نشان دهم.طراحی واکنش‌گرا: با استفاده از Bootstrap، یاد گرفتم چگونه طراحی‌های واکنش‌گرا و زیبا بسازم که تجربه کاربری را بهبود بخشد.تفکیک کامپوننت‌ها: یاد گرفتم چگونه اپلیکیشن‌های پیچیده را به کامپوننت‌های کوچک‌تر و قابل استفاده مجدد تقسیم کنم.🎯 نتیجه‌گیریاین پروژه به من کمک کرد تا مفاهیم اساسی React و Bootstrap را بهتر درک کنم و توانایی‌های خود را در طراحی و توسعه وب بهبود دهم. با استفاده از React، توانستم اپلیکیشن‌های تعاملی بسازم و با استفاده از Bootstrap، تجربه کاربری را به سطح بالاتری برسانم. امیدوارم این پروژه به نمایش قابلیت‌ها و مهارت‌های من کمک کند و به شما نیز در یادگیری این تکنولوژی‌ها کمک نماید.با تشکر از زمانی که برای بررسی این پروژه گذاشتید. خوشحال می‌شوم که نظرات و بازخوردهای شما را دریافت کنم!#WebDevelopment #JavaScript #ReactJS #FrontendDevelopment #Coding #Programming #OpenSource #GitHub #CSS #Bootstrap https://github.com/ZahraaaRezaeiii/todoAppReact

انیمیشن در css

زهرا رضائی — Mon, 05 Aug 2024 13:07:07 +0330

سلام به همه! 👋اخیراً در زمینه انیمیشن‌های CSS تحقیق و یادگیری داشتم و دوست دارم آنچه را که آموخته‌ام با شما به اشتراک بگذارم. انیمیشن‌ها می‌توانند به طرز چشمگیری تعامل کاربر با وبسایت را بهبود بخشند و تجربه کاربری را لذت‌بخش‌تر کنند. در ادامه به مفاهیم کلیدی و پیاده‌سازی آن‌ها می‌پردازم:📚 مقدمه‌ای بر انیمیشن‌های CSSانیمیشن‌های CSS از طریق ویژگی @keyframes تعریف می‌شوند که می‌تواند تغییرات پیچیده و چند مرحله‌ای را روی عناصر HTML اعمال کند. به عنوان مثال، انیمیشنی که یک عنصر را به سمت چپ حرکت می‌دهد:@keyframes slideleft { from { transform: translateX(100%); } to { transform: translateX(0); } }⚙️ تنظیمات انیمیشنبرای کنترل دقیق‌تر انیمیشن‌ها، می‌توان از ویژگی‌های مختلفی استفاده کرد. یکی از مهم‌ترین ویژگی‌ها، animation-timing-function است که می‌توان با استفاده از cubic-bezier سرعت و شتاب حرکت را به دقت تنظیم کرد:animation-timing-function: cubic-bezier(0.74,-0.54, 0.25, 1.56);🔄 چرخه انیمیشنویژگی animation-iteration-count تعداد تکرار انیمیشن را مشخص می‌کند. برای مثال:animation-iteration-count: 1; // انیمیشن فقط یک بار اجرا می‌شود🖱️ تاثیرات Hoverبا استفاده از ویژگی :hover می‌توان انیمیشن‌ها را برای تعاملات کاربر تعریف کرد. مثلاً تغییر رنگ پس‌زمینه وقتی که ماوس روی یک عنصر قرار می‌گیرد:#box:hover { animation-name: colorChange; animation-duration: 2s; animation-iteration-count: 3; } @keyframes colorChange { 0% { background-color: red; } 100% { background-color: blue; } }🎨 ترکیب انیمیشن‌هابرای ایجاد جلوه‌های بصری پیچیده‌تر، می‌توان چندین انیمیشن را با هم ترکیب کرد. به عنوان مثال، حرکت به سمت راست همراه با چرخش:#box { animation: slideright 2s linear 1, rotateY 2s linear 1;}@keyframes slideright { to { transform: translateX(300%); }}@keyframes rotateY { 100% { transform: rotateY(360deg); }}🔍 تفاوت بین انیمیشن و ترنزیشن در CSSترنزیشن‌ها:ساده و تک‌مرحله‌ای: ترنزیشن‌ها برای ایجاد تغییرات ساده و تک‌مرحله‌ای استفاده می‌شوند.شروع با تعامل کاربر: ترنزیشن‌ها زمانی آغاز می‌شوند که یک تعامل کاربر رخ دهد.ویژگی‌ها: شامل transition-property, transition-duration, transition-timing-function, و transition-delay.استفاده آسان: استفاده از ترنزیشن‌ها بسیار ساده است و نیاز به تعریف کلید‌فریم‌ها ندارد.انیمیشن‌ها:پیچیده و چندمرحله‌ای: انیمیشن‌ها می‌توانند تغییرات پیچیده و چندمرحله‌ای را شامل شوند.شروع خودکار یا با تعامل کاربر: انیمیشن‌ها می‌توانند به صورت خودکار یا بر اساس تعامل کاربر شروع شوند.ویژگی‌ها: شامل animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, و animation-play-state.انعطاف‌پذیری بالا: انیمیشن‌ها بسیار انعطاف‌پذیر هستند و می‌توانند تغییرات متعددی را در طول زمان ایجاد کنند.🎯 نتیجه‌گیرییادگیری انیمیشن‌های CSS به من کمک کرده تا درک بهتری از ایجاد جلوه‌های بصری جذاب و بهبود تجربه کاربری داشته باشم. این تنها یک شروع است و بی‌صبرانه منتظرم تا پروژه‌های بیشتری را با استفاده از این مهارت‌ها ایجاد کنم.آیا شما هم تجربه‌ای در زمینه انیمیشن‌های CSS دارید؟ خوشحال می‌شوم نظرات و تجربیات شما را بشنوم! 😊#CSS #Animation #WebDevelopment #UX #UI #Frontend #LearningJourney https://github.com/ZahraaaRezaeiii/animation

کدهای وضعیت ۵۰۰ (خطای سرور) _ بخش دوم

زهرا رضائی — Sat, 09 Dec 2023 13:02:47 +0330

کد وضعیت 506 _ Variant Also Negotiates:یکی از ارورهای سمت سرور است و عموما به دلیل کانفیگ و پیکربندی اشتباه سرور ایجاد می شود و در واقع به این صورت است که یک منبع negotiating ، به منبع دیگری اشاره می کند که نمایندگی (representation) ارائه نمی دهد، اما همچنان سعی در انجام مذاکره (negotiate) دارد.برای مثال، یک منبع مذاکره (negotiating resource) می تواند به خودش اشاره کند یا یک redirection را تنظیم کند، و ارور 506 نیز در موقعیت های خاصی مانند این به وجود می آید.کد وضعیت Insufficient Storage _ 507:وقتی کد وضعیت 507 Insufficient Storage دریافت می‌شود، سرور فضای ذخیره‌سازی کافی برای پاسخگویی به درخواست HTTP ندارد.این می‌تواند یک درخواست HTTP PUT یا POST باشد که معمولاً معتبر است و در صورت لزوم از سهمیه مشتری تجاوز نمی‌کند، اما در عوض نمی‌تواند موفق شود زیرا فضای ذخیره‌سازی سرور پر است.کد وضعیت Loop Detected (WebDAV) _ 508:سرور در حین پردازش درخواست، یک حلقه بی نهایت را شناسایی کرد.کد 510 _ Not Extended:پسوندهای بیشتری برای درخواست مورد نیاز است تا سرور بتواند آن را برآورده کند.کد 511 _ Network Authentication Required:نشان می‌دهد که کاربر برای دسترسی به شبکه نیاز به احراز هویت دارد.

کدهای وضعیت 500 (خطای سرور)

زهرا رضائی — Wed, 06 Dec 2023 01:12:51 +0330

کدهای وضعیت 500 (خطای سرور):وقتی درخواستی از سمت مرورگر به سرور ارسال شود و سرور نتواند به آن درخواست پاسخ دهد خطای 500 رخ می‌دهد و که به آن خطای سمت سرور گفته می‌شود. بروز این خطاها بر جایگاه آن در موتورهای جستجو تاثیر می‌گذارد.کد 501 (Not Implemented)این کد نشان می‌دهد درخواستی از سوی مرورگر به سرور سایت ارائه شده که برای سرور ناشناخته بوده و امکان پاسخگویی به آن را ندارد.کد 502 (Bad Gateway)این کد هم نشان می‌دهد سرور هنگام پاسخگویی به درخواست مرورگر، پاسخ نامعتبری دریافت کرده است (سرور پاسخ مناسبی از سرور دیگر دریافت نکرده باشد).کد 503 (Service Unavailable)این کد وضعیت اعلام می‌کند که سرور برای پاسخگویی به درخواست مرورگر آماده نیست. این حالت معمولاً زمانی رخ می‌دهد که سرور برای تعمیر و نگهداری از دسترس خارج شده یا بار ترافیک زیادی به آن تحمیل شده است. از لحاظ سئو این خطا خیلی بد نیست، زیرا خبر از یک وقفه موقت در کار سرور می‌دهد و ربات‌های موتور جستجو متوجه می‌شوند که سرور برای مدت کوتاهی پاسخگو نیست، درنتیجه اتفاق بدی برای رتبه سایت در نتایج جستجو نمی‌افتد، مگر اینکه وقفه طولانی شود.کد 504 (Gateway Timeout)این کد نشان می‌دهد سرور نتوانسته در زمان مناسب به درخواست مرورگر پاسخ دهد.کد 505 (HTTP Version Not Supported)کد 505 نشان می‌دهد نسخه‌ای از پروتکل HTTP که مرورگر کاربر از آن استفاده می‌کند با سرور سازگار نیست.

تفاوت const، let و var در جاوا اسکریپت

زهرا رضائی — Sat, 02 Dec 2023 14:50:45 +0330

از سه کلمه ی کلیدی let, const و var برای تعریف متغیر در جاوااسکریپت استفاده می شود.مقدار دهی اولیه(Initializer):متغیر let , var میتونن مقدار اولیه داشته باشند یا نداشته باشند ولی const حتما باید مقدار دهی اولیه شود در غیر اینصورت با SyntaxError مواجه می شویم.مقدار دهی دوباره(Reassign):بعد از اینکه متغیری و با var و let تعریف کردیم میتوانیم بعدا نیز مقدار جدیدی با آن اساین کنیم. اگر متغیری با const تعریف شده باشه قابل مقدار دهی دوباره نیست و با TypeError مواجه می شویم.تعریف مجدد(Redeclaring):متغیرهایی که با const و let در جاوا اسکریپت تعریف شده اند از لحاظ Redeclaring شبیه هم هستند چون نمی‌توان آن‌ها را مجددا با همان نام تکراری تعریف کرد. اما var در جاوا اسکریپت از لحاظ Redeclaring مشکلی ندارد و می‌توان هرچند بار که می‌خواهیم آن را با همان نام مجددا تعریف کنیم. استفاده از حافظه(RAM):در مورد let و const در جاوا اسکریپت، Global Object ذخیره نمی‌کنند که باعث کاهش مصرف حافظه می‌شود. اما var در جاوا اسکریپت، یک Global Object در حافظه ذخیره می‌کند و رم بیشتری نسبت به let و const اشغال می‌کند.بالا بردن(hoisting):پنجمین تفاوت var و let و const در جاوا اسکریپت، در Hoisting است. Hoisting در لغت به معنی بالا بردن است؛ در اصطلاح برنامه نویسی نیز Hoisting در جاوا اسکریپت به پدیده‌ای اشاره دارد که در هنگام اجرای کد، تعریف متغیرها و تابع‌ها به بالای بلوک کدی که در آن قرار دارند منتقل می‌شوند. به این ترتیب، می‌توانید از متغیرها و توابع قبل از تعریف آن‌ها استفاده کنید.به طور معمول، در زبان‌های برنامه نویسی، باید متغیرها و توابع را قبل از استفاده از آن‌ها، تعریف کنید (اول تعریف کنید و سپس استفاده کنید). اما در جاوا اسکریپت، به دلیل وجود Hoisting، می‌توانید از متغیرها و توابع قبل از تعریف آن‌ها استفاده کنید (اول استفاده کنید و سپس تعریف کنید). var قابلیت hoisting دارد ولی let و const چنین قابلیتی ندارند و اگر قبل از تعریف متغیر با let از آن استفاده کنیم با RefrenceError مواجه می شویم.console.log(x); // undefinedvar x = 5;console.log(x); // Uncaught ReferenceError: Cannot access 'x' before initialization (TDZ)let x = 5;console.log(x); // Uncaught ReferenceError: Cannot access 'x' before initialization (TDZ)const x = 5;در کلمه کلیدی const نیز مانند let، قابلیت Hoisting وجود ندارد. تلاش برای دسترسی به متغیرها قبل از تعریف آن‌ها باعث خطا در اجرا برای let و const می‌شود، که به آن Temporal Dead Zone (TDZ) یا «منطقه مرده موقت» می‌گوییم. TDZ به محدوده‌ای اشاره دارد که در آن متغیرهایی که با استفاده از let و const تعریف شده‌اند، اما هنوز قابل دسترسی نیستند. به عبارت دیگر، از زمان شروع اجرا تا اولین لحظه تعریف و مقداردهی اولیه، متغیر در TDZ قرار دارد و تلاش برای دسترسی به آن باعث ایجاد خطا (ReferenceError) می‌شود.محدوده (scope):محدوده، یعنی جایی که یک متغیر قابل دسترسی است.به‌طور کلی 3 اسکوپ در جاوا اسکریپت داریم:متغیر var یک فانکشن اسکوپ است و فقط داخل فانکشن قابل دسترسی است. متغیر let و ثابت const نیز بلاک اسکوپ هستند و فقط داخل بلاک قابل دسترسی هستند. اما نکته‌ای که باید بدانید این است که اگر متغیر var داخل بلاک باشد، به دلیل بلاک اسکوپ نبودن، می‌توان از بیرون به آن دسترسی پیدا کرد. اما اگر متغیر let و ثابت const داخل فانکشن قرار بگیرند، با اینکه بلاک اسکوپ هستند، باز هم از بیرون تابع نمی‌توان به آن‌ها دسترسی پیدا کرد. یعنی هم بلاک اسکوپ و هم فانکشن اسکوپ را قبول می‌کنند.مشکل var این است که اگر متغیر message از قبل داخل کدهای ما تعریف شده باشد ولی از وجود آن بی‌خبر باشیم، احتمال اینکه کد ما دچار باگ شود زیاد است. چون مقدار متغیر جدید، متغیر قبلی را تغییر می‌دهد. اما در let و const به دلیل Block Scope بودن، وقتی داخل بلاک if قرار بگیرند، داخل همان بلاک قابل دسترسی هستند و مقدار متغیر بیرونی را تغییر نخواهند داد. حافظه ی زیادی را به نسبت let و const اشغال می کند.کلمات کلیدی let و const در اکما اسکریپت ۶ اضافه شده اند.جمع بندی:متغیر var منسوخ نشده است و در جاوا اسکریپت می‌توانید از آن استفاده کنید اما یک متغیر غیراستاندارد است و مشکلات زیادی را به بار می‌آورد. پس بجای استفاده از متغیر var، همیشه از متغیر let و const استفاده کنید.

انواع Selector در کامپوننت‌های انگولار

زهرا رضائی — Tue, 29 Aug 2023 13:18:22 +0330

یک برنامه انگولار از کامپوننت‌‌های مختلفی تشکیل شده است. هر کامپوننت یک کلاس هست که export می‌شود. برای این که بتوان در انگولار از این کلاس استفاده کرد باید آن را به شکل یک کامپوننت تعریف کرد. برای این کار از دکوراتور component@ استفاده می‌کنیم که این دکوراتور خود دارای چندین پراپرتی هست. پراپرتی selector و template در یک کامپوننت ضروری هستند ولی پراپرتی styles آپشنال است. علاوه بر این‌ها لازم است که ماژول component از angular/core@ ایمپورت شود.حال می‌خواهیم راجع به مقادیر مختلفی که پراپرتی selector می‌تواند داشته باشد صحبت کنیم و این که چگونه می‌توان از این کامپوننت استفاده کرد با توجه به مقادیر مختلفی که selector به خود گرفته است.1. تعریف اسم کامپوننت به صورت یه رشته که معمولا با -app شروع می‌شود.@Component({ selector: 'app-element', template: './element.component.html', styleUrls: ['./element.component.css'] })برای استفاده از این کامپوننت از تگ باز و بسته html استفاده می‌کنیم که داخل این تگ اسم کامپوننت قرار می‌گیرد.۲. استفاده از attribute selector@Component({ selector: '[app-element]', template: './element.component.html', styleUrls: ['./element.component.css'] })برای استفاده از این کامپوننت، کامپوننت را به صورت یک attribute داخل یک المنت استفاده می‌کنیم.

۳. تعریف به صورت یک کلاس CSS اس که با dot شروع می‌شود:@Component({ selector: '.app-element', template: './element.component.html', styleUrls: ['./element.component.css'] }نحوه‌ی استفاده از کامپوننت

مفهوم Lazy Loading در انگولار

زهرا رضائی — Fri, 18 Aug 2023 00:24:47 +0330

یک روش برای بهینه‌سازی بارگذاری ماژول‌ها و کامپوننت‌ها در فریمورک انگولار، Lazy Loading است. با استفاده از این روش ماژول‌ها و کامپوننت‌‌ها فقط در هنگام نیاز بارگذاری می‌شوند، به جای این‌که همه چیز را در زمان بارگذاری اولیه بارگذاری کنند. این باعث کاهش زمان بارگذاری اولیه و مصرف منابع شده و تجربه کاربری بهتری را ایجاد می‌کند. زمانی که تعداد ماژول‌ها زیاد و سرعت اینترنت پایین هست دیر لود شدن اپلیکیشن شما تجربه‌ی کاربری خوبی را به کاربران شما ارایه نمی‌دهد.پیاده‌سازی Lazy Loading در انگولار ایجاد ماژول‌های مختلف: برای هر بخش از برنامه یک ماژول جداگانه ایجاد می‌کنیم۲. استفاده از 'loadchildren' در تعریف مسیر برای ماژول‌های ایجاد شده۳. پیاده‌سازی کامپوننت‌ها در ماژول‌های مختلف: برای هر ماژول کامپوننت‌های مربوط به آن ماژول را ایجاد می‌کنیم۴. استفاده از دایرکتیو در app کامپوننتدایرکتیو router-outlet محلی است که قالب کامپوننت فعال‌سازی شده، نمایش داده می‌شود.در این لینک می‌توانید مثال کوچکی از lazy load ماژول را مشاهده کنید.

سرویس ها در انگولار

زهرا رضائی — Thu, 03 Aug 2023 17:29:37 +0330

سرویس ها در انگولار یک قسمت حیاتی از این فریم‌ورک هستند. آن‌ها کلاس‌های TypeScript هستند که منطق تجاری، دسترسی به داده‌ها یا منطق ارتباطی را برای اجزاء دیگر برنامه فراهم می‌کنند. سرویس‌ها در انگولار طراحی شده‌اند تا بتوانند در کامپوننت‌های مختلف به اشتراک گذاشته و استفاده شوند و روشی برای مرکزی‌سازی عملکرد مشترک فراهم کنند. ویژگی‌های کلیدی سرویس‌های انگولار عبارت‌اند از: سینگلتون: به صورت پیش‌فرض، سرویس‌ها در انگولار سینگلتون هستند، به این معنی که تنها یک نمونه از یک سرویس ایجاد می‌شود و در سراسر برنامه به اشتراک گذاشته می‌شود. این اطمینان می‌دهد که داده‌ها و وضعیت یکنواخت در کامپوننت‌های مختلفی که از همان سرویس استفاده می‌کنند وجود دارد. تزریق وابستگی: انگولار از تزریق وابستگی برای مدیریت ایجاد و به اشتراک گذاری نمونه‌های سرویس‌ها استفاده می‌کند. به جای ایجاد دستی نمونه‌های سرویس‌ها، سیستم تزریق وابستگی انگولار نمونه هایی از آن‌ها را برای کامپوننت‌هایی که درخواست می‌کنند، فراهم می‌کند. دکوراتور Injectable: برای ایجاد یک کلاس قابل تزریق به عنوان سرویس، باید آن را با دکوراتور @Injectable() دکوره کنید. این دکوراتور کلاس را به عنوان یک کاندید برای تزریق وابستگی مشخص می‌کند و به عنوان سرویس قابل ارائه می‌شود. مرکزی‌سازی منطق تجاری: سرویس‌ها راه بسیار خوبی برای مرکزی‌سازی منطق تجاری برنامه، تغییر دادن داده‌ها و ارتباط با رابطه عمومی ویژگی‌ها هستند. این کار از جهت قابلیت تعمیر و خوانایی کد بهبود می‌بخشد. به اشتراک گذاری داده: سرویس‌ها برای به اشتراک گذاری داده بین کامپوننت‌های مختلف به صورت منفصل استفاده می‌شوند. کامپوننت‌ها می‌توانند از همان سرویس برای دسترسی و تغییر داده‌های به اشتراک گذاشته شده استفاده کنند. قابل استفاده مجدد: سرویس‌ها کد قابل استفاده مجدد را ترویج می‌کنند چرا که یکسانی بین چندین کامپوننت راهی را برای جلوگیری از تکرار کد فراهم می‌کنند و از یکپارچگی اطمینان حاصل می‌کنند. سرویس‌ها از جداسازی اهداف بین کامپوننت‌ها و منطق تجاری بهره می‌برند. کامپوننت‌ها بر روی رندر کردن و تعامل کاربر تمرکز می‌کنند، در حالی که سرویس‌ها عملکرد زیرین را انجام می‌دهند. برای ایجاد یک سرویس می‌توانید از دستور ng generate service service-name استفاده کنید. این دستور یک فایل سرویس جدید را در پوشه src/app ایجاد می‌کند و به طور خودکار آن را به آرایه providers در ماژول اصلی برنامه اضافه می‌کند که به صورت معمول در سراسر برنامه قابل دسترسی خواهد بود.در انگولار تزریق وابستگی(Dependency Injection) به صورت خودکار فراهم می‌شود و به شما امکان می‌دهد نمونه‌های سرویس‌ها را به کامپوننت‌ها و دیگر اجزاء از طریقconstructor تزریق کنید. این روش بسیار موثر در جداسازی منطق کسب‌وکار از اجزاء فنی برنامه و بهبود قابلیت تست‌پذیری و قابلیت نگهداری کد است. برای تزریق وابستگی در سرویس‌ها، کافیست ابتدا یک سرویس را با دکوراتور ()Injectable@ معرفی کنید. این دکوراتور به انگولار اطلاع می‌دهد که کلاس قابل تزریق است و به عنوان یک کاندید برای تزریق وابستگی در نظر گرفته شود.برای مثال، فرض کنید یک سرویس به نام MyService داریم:سپس در کامپوننت‌ها یا سایر سرویس‌ها می‌توانید از این سرویس با استفاده از تزریق وابستگی استفاده کنید. برای این منظور، نیاز است که نمونه‌ی سرویس را به عنوان پارامتر بهconstructor کامپوننت یا سرویس دیگر تزریق کنید:همچنین، توجه داشته باشید که اگرprovidedIn را برابر با 'root' تنظیم کنید، یک نمونه سینگلتون از سرویس در سراسر برنامه ایجاد می‌شود. یعنی این که همه کامپوننت‌ها و سرویس‌ها که از این سرویس استفاده می‌کنند، از همان نمونه استفاده می‌کنند. اگر از providedIn استفاده نکنید، شما باید این سرویس را به صورت دستی در آرایه providers در ماژول مورد نظر ثبت کنید. تزریق وابستگی در انگولار از جمله اصول اساسی برای توسعه برنامه‌های قابل نگهداری و تست‌پذیر است، و به شما امکان می‌دهد کدهای خود را بهبود دهید و بهتر و قابل‌تر نگهدارید.اگر از تزریق وابستگی(Dependency Injection) استفاده نمی‌کنید، می‌توانید به دو روش زیر یک نمونه از سرویس را ایجاد کنید: ایجاد دستی نمونه: شما می‌توانید به صورت دستی یک نمونه از سرویس را ایجاد کنید با استفاده از new کلمه کلیدی. این روش کاملاً معمولی است، اما به علت اینکه این نمونه‌ها به صورت دستی ایجاد می‌شوند، معمولاً از آن‌ها به عنوان سینگلتون‌ها استفاده نمی‌شود. به عنوان مثال:استفاده از متد get در یک سرویس فراهم‌کننده: شما می‌توانید یک سرویس فراهم‌کننده (Provider) برای سرویس‌ها ایجاد کنید که نمونه‌های سرویس‌ها را ایجاد کند و فراهم کند. این روش به شما اجازه می‌دهد تا نمونه‌های سرویس‌ها را با استفاده از متد get از سرویس فراهم‌کننده درخواست کنید. به عنوان مثال:سپس در کامپوننت‌های خود می‌توانید از این سرویس فراهم‌کننده استفاده کنید: اگرچه این روش‌ها نیاز به دستی ایجاد کردن نمونه‌ها دارند و از لحاظ مدیریت وابستگی‌ها و تست‌پذیری کد ممکن است کمی پیچیده‌تر باشند، اما در موارد خاصی که نیاز به کنترل بیشتری بر روی سرویس‌ها و نحوه ایجاد نمونه‌ها دارید، ممکن است مفید باشند.

مفهوم Ngrx در انگولار

زهرا رضائی — Tue, 25 Jul 2023 17:42:12 +0330

فریمورک انگولار یکی از قدرتمندترین و محبوب‌ترین فریمورک‌های توسعه وب برای ایجاد برنامه‌های تک‌صفحه‌ای (Single Page Application) است. یکی از چالش‌های اصلی در توسعه برنامه‌های پیچیده با برنامه انگولار مدیریت وضعیت برنامه است. این وضعیت معمولا شامل داده‌های کاربر، وضعیت نمایشی صفحه، تنظیمات و سایر اطلاعاتی است که در طول زمان در برنامه تغییر می‌کند.برای مقابله با این چالش و مدیریت بهتر وضعیت در پروژه‌ی انگولار ایجاد شده، Ngrx راه حل است، این کتابخانه الهام گرفته از Redux است که باعث ساده‌تر و موثرتر شدن مدیریت وضعیت برنامه در انگولار می‌شود.مفهوم Ngrx یک کتابخانه مدیریت وضعیت (state management) در انگولار است که به شما کمک می‌کند وضعیت برنامه‌ی خود را به صورت مرتب و مدیریت‌شده‌ای نگه دارید. به طور خلاصه، اصل این کتابخانه بر پایه الگوی Redux است که به شما امکان می‌دهد تغییرات در برنامه را به صورت قابل پیش‌بینی و یک‌طرفه (unidirectional) مدیریت کنید.حالا بیایید با مثالی ساده توضیح دهم:تصور کنید که شما یک برنامه انگولار ساده دارید که یک شمارنده (counter) دارد. این شمارنده را می‌توانید با دکمه‌های "افزایش"، "کاهش" و "صفر کردن" تغییر دهید.بدون Ngrx : وقتی از مدیریت وضعیت بدون Ngrx استفاده می‌کنید، شمارنده به صورت مستقیم در کامپوننت شما ذخیره می‌شود. هربار که کاربر دکمه "افزایش" را می‌زند، مقدار شمارنده افزایش پیدا می‌کند و همینطور برای دکمه‌های "کاهش" و "صفر کردن". اگر بخواهید این وضعیت را به کامپوننت‌های دیگر منتقل کنید، باید از ورودی‌ها و خروجی‌ها استفاده کنید و این می‌تواند باعث پیچیدگی و دردسرهای مدیریتی شود، به ویژه اگر برنامه‌ی شما بزرگتر و پیچیده‌تر شود.با استفاده از Ngrx : وقتی ازNgrx استفاده می‌کنید، شمارنده به عنوان یک وضعیت مرکزی (centralized state) درون یک فروشگاه (store) ذخیره می‌شود. این فروشگاه یک منبع تکی از حقیقت (single source of truth) است که وضعیت کامل برنامه را نگهداری می‌کند. هربار که کاربر دکمه افزایش را می‌زند، یک عملیات (action) به فروشگاه ارسال می‌شود که به آن می‌گوید شمارنده را افزایش بده. سپس، تغییر در وضعیت اعمال می‌شود تا مقدار شمارنده در فروشگاه به‌روز شود. همین روند برای دکمه‌های کاهش و صفر کردن نیز صادق است.مزیت اصلی استفاده از Ngrx این است که شما می‌توانید وضعیت برنامه‌ی خود را از یک مکان مرکزی مدیریت کنید. این کتابخانه شما را از پیچیدگی‌های مدیریتی خلاص می‌کند و باعث می‌شود که بتوانید به راحتی تغییرات در وضعیت برنامه را پیش‌بینی و ردیابی کنید. همچنین، به شما امکان می‌دهد تغییراتی که در وضعیت اتفاق می‌افتد را ثبت کنید و تاریخچه‌ی تغییرات را در نظر بگیرید، که این می‌تواند برای اشکال‌زدایی (debugging) کاربردی باشد.با این وجود، استفاده از Ngrx برای برنامه‌های کوچک و ساده ممکن است یک کم بیش از حد پیچیده به نظر بیاید، اما برای برنامه‌های بزرگ و پیچیده که دارای وضعیت واحد یا اطلاعات مشترکی هستند، این ابزار می‌تواند بسیار مفید و کمک کننده باشد.مثال ۱: مدیریت وضعیت لیست کارها (Todo List) :تعریف عملیات‌ها: در این مرحله، عملیات‌های مورد نیاز برای مدیریت لیست کارها را تعریف می‌کنیم. عملیات‌ها مثل "افزودن کار جدید"، "حذف کار" و "تغییر وضعیت کار" از این دست هستند.تعریف وضعیت اولیه و ایجاد reducer: ما یک وضعیت اولیه برای لیست کارها ایجاد می‌کنیم و یکreducer تعریف می‌کنیم که وضعیت‌ها را بر اساس اقدامات اعمال شده بروز می‌دهد.مثال ۲: مدیریت وضعیت نمایش یا عدم نمایش دکمهتعریف عملیات‌ها: در این مرحله، عملیات‌های مورد نیاز برای مدیریت وضعیت نمایش یا عدم نمایش دکمه را تعریف می‌کنیم. عملیات‌ها مثل "نمایش دکمه" و "عدم نمایش دکمه" از این دست هستند.تعریف وضعیت اولیه و ایجاد reducer: ما یک وضعیت اولیه برای نمایش یا عدم نمایش دکمه ایجاد می‌کنیم و یکreducer تعریف می‌کنیم که وضعیت‌ها را بر اساس اقدامات اعمال شده بروز می‌دهد.در تکه کد بالا برای ایجاد سه اکشن showButton و hideButton نیاز هست فانکشن createAction را از کتابخانه ‌ی Ngrx ایمپورت کنیم و سپس نام یک اکشن را به صورت یک رشته به عنوان ورودی به این فانکشن بدهیم.فانکشن createReducer را از کتابخانه‌ی Ngrx ایمپورت کرده و سپس به عنوان اولین آرگومان ورودی حالت اولیه برنامه را در نظر میگیرم و با on می‌توان تغییراتی را هر اکشن لازم است در وضعیت برنامه ایجاد کند را اعمال کرده و یا اطلاعاتی که از وضعیت برنامه نیاز دارد را ستخراج کند.در تکه کد بالا برای ایجاد سه اکشن Add Todo و Remove Todo و Toggle Todo نیاز هست در ابتدا فانکشن createAction را از کتابخانه ‌ی Ngrx ایمپورت کنیم و سپس نام یک اکشن را به صورت یک رشته به عنوان ورودی به این فانکشن بدهیم.فانکشن createReducer را از کتابخانه‌ی Ngrx ایمپورت کرده و سپس به عنوان اولین آرگومان ورودی حالت اولیه برنامه را در نظر میگیرم و با on می‌توان تغییراتی را هر اکشن لازم است در وضعیت برنامه ایجاد کند را اعمال کرده و یا اطلاعاتی که از وضعیت برنامه نیاز دارد را ستخراج کند.مدیریت وضعیت برنامه: وقتی برنامه‌ها بزرگ و پیچیده می‌شوند، وضعیت آن‌ها نیز پیچیده می‌شود. با استفاده از Ngrx، می‌توانید تمامی وضعیت‌های برنامه را در یک مکان مرکزی ذخیره کنید و تغییرات آن‌ها را به صورت قابل پیش‌بینی و یک‌طرفه اعمال کنید.مدیریت داده‌ها و اطلاعات مشترک: وقتی که بیش از یک کامپوننت به یک مجموعه از داده‌ها نیاز دارند، استفاده از Ngrx می‌تواند بسیار مفید باشد. این کتابخانه به شما امکان می‌دهد تا داده‌های مشترک و مهم بین کامپوننت‌ها را در یک فروشگاه (store) مدیریت کنید.استفاده از Side Effects : این کتابخانه Ngrx دارای افکت‌ها (effects) است که برای مدیریت اعمال جانبی مانند درخواست‌های API و انجام عملیات‌های غیرهمگام استفاده می‌شود. این افکت‌ها از اینکه عملیات‌های محاسباتی و طولانی مدت که باید به صورت غیرهمگام انجام شوند، راحت‌تر می‌کنند.اشتراک اطلاعات بین برنامه‌ها: اگر برنامه شما بیش از یک برنامه کوچک (sub-applications) دارد که باید به صورت مستقل و با دیگر برنامه‌ها ارتباط برقرار کنند، می‌توانید ازNgrx برای اشتراک اطلاعات بین این برنامه‌ها استفاده کنید.این کتابخانه ازTime-Travel Debugging پشتیبانی می‌کند که به شما امکان می‌دهد تغییرات در وضعیت برنامه را در طول زمان پیگیری کنید و مشکلاتی که به وقوع پیوسته‌اند را پیدا کنید.نتیجه گیری:مانند هر مفهوم دیگری در برنامه نویسی Ngrx دارای مزایا و معایبی است و زمانی که در جای درست خود به کار برده شود از مزایای آن برخوردار خواهیم شد. برای مثال های ارائه شده در این مقاله می توان از دکوراتورهای @Input ,@Output به سادگی استفاده کرد و یا از سرویس ها بهره برد و درگیر پیچیدگی های مربوط به Ngrx نشد.مهم است بدانید کهNgrx مناسب برنامه‌های بزرگ‌تر و پیچیده‌تر است و برای برنامه‌های کوچک و ساده ممکن است بیش از حد اجباری و پیچیده به نظر بیاید. همچنین، مدیریت وضعیت با استفاده از Ngrx نیازمند مدیریت مناسب و تجربه برنامه‌نویسی مناسب است، بنابراین قبل از استفاده از آن در پروژه‌های خود، به دقت تصمیم‌گیری کنید که آیا واقعاً نیازمندی‌های پیچیده و مدیریت وضعیت مرکزی دارید یا خیر.در این لینک گیت‌هاب می‌توانید یک مثال از نحوه‌ی استفاده از کتابخانه‌ی Ngrx را در یک پروژه ی انگولاری ببینید. این مثال برای یک شمارنده و دارای سه اکشن برای افزایش و کاهش مقدار شمارنده و همچنین صفر کرن مقدار شمارنده است.گردآورندگان مقاله: هوتن همتی و زهرا رضائی