نوشته های مسعود هارونی

معماری امن احراز هویت با Refresh Token (فرانت‌اند)

مسعود هارونی — Mon, 16 Jun 2025 02:46:56 +0330

در دنیای مدرن وب، ایجاد تعادل بین تجربه کاربری روان و امنیت بالا یک چالش همیشگی است. کاربران دوست ندارند مدام مجبور به لاگین شوند، اما توکنهای دسترسی (Access Tokens) با عمر طولانی، یک حفرهی امنیتی بزرگ ایجاد میکنند. راهحل این معما، استفاده از یک معماری هوشمندانه مبتنی بر دو نوع توکن است: Access Token و Refresh Token. این مقاله به جای تمرکز بر کد، به تشریح جریان کار (Workflow) و مفاهیم امنیتی کلیدی این معماری میپردازد.ورک فلو اصلی:تصور کنید کاربر میخواهد وارد حساب خود شود(به مدت طولانی)، فرآیند پشت صحنه به این شکل است:ورود کاربر (Login): کاربر نام کاربری و رمز عبور خود را وارد میکند، سرور پس از تایید، دو چیز را برمیگرداند:Access Token: یک توکن با عمر کوتاه (مثلاً ۱۵ دقیقه) که در Response Request قرار دارد.Refresh Token: یک توکن با عمر طولانی (مثلاً ۳۰ روز) که مستقیماً در یک HttpOnly Cookie امن در مرورگر کاربر Set میشود.ارسال درخواستها به سرور: فرانتاند Access Token را در حافظه خود (Memory/State) نگه میدارد و برای هر درخواستی که به APIهای محافظتشده میزند، آن را در هدر Authorization قرار میدهد.انقضای Access Token: پس از ۱۵ دقیقه منفعل بودن کاربر، Access Token منقضی میشود، اگر فرانتاند با این توکن درخواستی ارسال کند، سرور با خطای 401 Unauthorized پاسخ میدهد.Silent Refresh: اپلیکیشن فرانتاند به صورت هوشمند این خطای 401 را تشخیص میدهد و به صورت خودکار یک درخواست به یک آدرس مشخص در بکاند (مثلاً /api/refresh) ارسال میکند. مرورگر به صورت خودکار Refresh Token را که در کوکی HttpOnly ذخیره شده، به این درخواست ضمیمه میکند. سرور Refresh Token را تایید کرده و یک Access Token کاملاً جدید صادر میکند. اپلیکیشن این توکن جدید را گرفته و درخواست ناموفق قبلی را دوباره، این بار با موفقیت، ارسال میکند. تمام این فرآیند بدون اطلاع کاربر انجام میشود.مفاهیم کلیدی امنیتیبرای اینکه این معماری واقعاً امن باشد، باید چند مفهوم حیاتی را درک و پیادهسازی کنیم.1. HttpOnly Cookie: نقطه امن رفرش توکنتفاوت با کوکی معمولی: یک کوکی معمولی توسط جاوا اسکریپت قابل خواندن است (با دستور). این یعنی اگر یک هکر بتواند کد مخربی را در سایت ما تزریق کند (حمله XSS)، میتواند تمام کوکیها را بدزدد. اما یک کوکی HttpOnly فقط توسط سرور قابل خواندن است و جاوا اسکریپت هیچ دسترسی به آن ندارد.نحوه تنظیم و استفاده: HttpOnly Cookie توسط سرور و از طریق هدر Set-Cookie تنظیم میشود. فرانتاند هیچ نقشی در تنظیم یا خواندن آن ندارد. مرورگر به صورت خودکار آن را در تمام درخواستهایی که به همان دامنه ارسال میشود، ضمیمه میکند.Secure: یعنی کوکی فقط روی پروتکل امن HTTPS ارسال شود.SameSite=Strict: یک لایه دفاعی قوی در برابر حملات CSRF است.2. Refresh Token Rotation: سیستم دزدگیر هوشمنداین یک تکنیک پیشرفته برای افزایش امنیت است. ایده اصلی این است که هر Refresh Token فقط یک بار قابل استفاده است.چطور کار میکند؟کاربر با Refresh-Token-A یک Access Token جدید درخواست میکند.سرور یک Access Token جدید و یک Refresh-Token-B کاملاً جدید به کاربر میدهد.سرور فوراً Refresh-Token-A را باطل میکند.چرا این کار مفید است؟ این تکنیک به ما کمک میکند سرقت توکن را تشخیص دهیم. فرض کنید هکری Refresh-Token-A را دزدیده است. اگر هکر سعی کند از آن استفاده کند، سرور درخواست او را میپذیرد و یک جفت توکن جدید به هکر میدهد، اما همزمان Refresh-Token-A را در Black list خود قرار میدهد (معمولاً برای چند دقیقه). حالا وقتی کاربر واقعی (که هنوز از Refresh-Token-A میخواهد استفاده کند ) سعی کند یک توکن جدید بگیرد، سرور متوجه میشود که کسی در حال تلاش برای استفاده از یک توکن دزدیده شده و باطل است. در این لحظه، سرور برای امنیت کامل، تمام Sessionهای فعال آن کاربر را باطل کرده و او را مجبور به لاگین مجدد با رمز عبور میکند.3. حملات XSS و CSRFXSS (Cross-Site Scripting): تصور کنید یک نفر روی دیوار وبسایت شما یک کد مخرب به عنوان نظر ثبت میکند. هر کسی که آن صفحه را ببیند، آن کد در مرورگرش اجرا میشود. این کد میتواند توکنهایی که در localStorage یا کوکیهای معمولی ذخیره شدهاند را بدزدد. HttpOnly Cookie بهترین دفاع در برابر این نوع سرقت است.CSRF (Cross-Site Request Forgery):به طور مثال شما در وبسایت بانک خود (my-bank.com) لاگین کردهاید و توکن دسترسی شما در یک کوکی HttpOnly ذخیره شده است.هکر برای شما یک ایمیل میفرستد که در آن یک عکس بامزه از گربه وجود دارد و شما روی آن کلیک میکنید.کد HTML آن عکس این شکلی است: مرورگر شما برای بارگذاری این "عکس"، یک درخواست به سرور بانک شما میفرستد. از آنجایی که این درخواست به دامنه my-bank.com است، مرورگر با خوشنیتی و به صورت خودکار، تمام کوکیهای مربوط به آن سایت (از جمله کوکی HttpOnly که توکن دسترسی شما در آن است) را به درخواست ضمیمه میکند.سرور بانک درخواست را میبیند، توکن معتبر را در کوکی پیدا میکند و فکر میکند این درخواست از طرف خود شماست. در نتیجه یک میلیون تومان به حساب هکر منتقل میکند! (توجه کنید این اتفاق در صورتی اتفاق میوفتد که Access Token در Http Only Cookie ذخیره شده باشه که اگر از این مکانیزم استفاده میکنید حتما حتما باید از Anti CSRF Token استفاده کنید که در ادامه بهش میپردازیم.)4. توکن ضد CSRF (Anti-CSRF Token)این توکن، سلاح ما برای مقابله با حمله CSRF است، به خصوص وقتی از کوکیها برای احراز هویت استفاده میکنیم.توجه: اگر Access Token شما در Memory ذخیره شده و هربار قبل از درخواست به Server در Request Header قرارش میدید لازم نیست از Anti-CSRF Token استفاده کنید، Acess Token ای که دارید استفاده میکنید همین کار رو براتون انجام میده.چطور کار میکند؟وقتی کاربر لاگین میکند، سرور علاوه بر توکنها، یک رشته تصادفی و مخفی دیگر به نام Anti-CSRF Token تولید میکند.این توکن مخفی را در بدنه پاسخ به فرانتاند میفرستد. (برخلاف Refresh Token، این یکی در کوکی نیست و نکته همینجاست که اگر در کوکی باشه دوباره به صورت اتوماتیک توسط مرورگر ضمیمه درخواست هایی میشه که از Origin ما زده میشه و این مجددا باعث CSRF attacks میشه!).فرانتاند این توکن را در حافظه خود نگه میدارد.برای هر درخواست مهمی که وضعیت را تغییر میدهد (مثل POST, PUT, DELETE)، فرانتاند باید این توکن مخفی را در یک هدر سفارشی (مثلاً X-CSRF-TOKEN) قرار دهد.سرور قبل از انجام هر کاری، چک میکند که آیا توکن موجود در این هدر با توکن مخفی که برای آن کاربر صادر کرده، مطابقت دارد یا خیر.چرا این کار امن است؟ سایت هکر که میخواهد حمله CSRF را انجام دهد، به این توکن مخفی دسترسی ندارد و نمیتواند آن را در هدر درخواست جعلی خود قرار دهد. در نتیجه، سرور درخواست را به دلیل نداشتن هدر معتبر X-CSRF-TOKEN رد میکند و حمله شکست میخورد.یک سناریوی کامل: سارا در مقابل هکرهابیایید همه این مفاهیم را در یک داستان واقعی ببینیم:ورود امن: "سارا" در اپلیکیشن شما لاگین میکند. سرور یک Access Token (۱۵ دقیقهای) در پاسخ JSON و یک Refresh Token (۳۰ روزه) به نام RT-1 در یک HttpOnly Cookie برایش ارسال میکند. همچنین یک Anti-CSRF Token به نام Anti-CSRF-XYZ را در پاسخ JSON قرار میدهد (البته اینجا حیاتی نیست چون Access Token به صورت JSON در Response body ارسال شده پس یعنی ما باید آن را در حافظه خودمون ذخیره کنیم و همانطور که قبلا توضیح دادم قبل از هر درخواست به سرور اون رو ارسال کنیم و عملا همون کار Anti-CSRF Token رو انجام میده برامون). فرانتاند Access Token و Anti-CSRF-XYZ را در حافظه نگه میدارد.حمله CSRF: سارا در حالی که لاگین است، به اشتباه وارد سایت hacker.com میشود. این سایت سعی میکند یک درخواست POST برای حذف حساب کاربری سارا به سرور شما بفرستد. مرورگر سارا به صورت خودکار کوکی RT-1 را به درخواست ضمیمه میکند. اما، سایت هکر به توکن Anti-CSRF-XYZ دسترسی ندارد و نمیتواند هدر X-CSRF-TOKEN را به درستی تنظیم کند. سرور شما درخواست را به دلیل نداشتن این هدر معتبر، رد میکند. حمله CSRF شکست خورد.انقضا و چرخش توکن (Refresh Token Rotation): Access Token سارا منقضی میشود. اپلیکیشن به صورت خودکار با استفاده از RT-1 یک توکن جدید درخواست میکند. سرور درخواست را تایید کرده، یک Access Token جدید و یک Refresh Token جدید به نام RT-2 برای سارا صادر میکند. سپس RT-1 را در لیست "اخیراً استفاده شده" (همون Black listای که قبلا صحبت کردیم) قرار میدهد.سرقت و شناسایی: حالا فرض کنید هکری به طریقی توانسته RT-1 را درست بعد از استفاده سارا بدزدد. هکر با خوشحالی سعی میکند با RT-1 یک Access Token برای خودش بگیرد. سرور شما RT-1 را در Black list خود پیدا میکند و فوراً متوجه یک تلاش برای استفاده مجدد (Replay Attack) میشود. سرور به عنوان یک اقدام امنیتی، بلافاصله تمام Refresh Token های معتبر سارا (از جمله RT-2) را از دیتابیس خود حذف میکند. دفعه بعدی که اپلیکیشن سارا بخواهد از RT-2 استفاده کند، با خطا مواجه شده و سارا مجبور به لاگین مجدد با رمز عبور میشود. حمله هکر نه تنها شکست خورد، بلکه شناسایی و خنثی شد.

کامپوننت Trans در i18next

مسعود هارونی — Wed, 11 Jun 2025 18:57:27 +0330

سلام به همه توسعه‌دهندگان عزیز!در مقاله قبلی، با قدرت تابع t در کتابخانه i18next آشنا شدیم و دیدیم که چطور میتونیم به سادگی متن‌ها و متغیرها را در اپلیکیشن React خود ترجمه کنیم، اما گاهی با چالشی فراتر از یک متن ساده روبرو می‌شویم.فرض کنید می‌خواهید در یک جمله ترجمه شده، یک کلمه را bold کنید، یا یک لینک قرار دهید. در اینجاست که تابع t به تنهایی کافی نیست، زیرا فقط یک رشته (string) ساده را برمی‌گرداند.اینجاست که react-i18next وارد صحنه می‌شود: و کامپوننت رو معرفی میکنه.کامپوننت Trans چیست و چرا به آن نیاز داریم؟کامپوننت ابزاری تخصصی برای مدیریت ترجمه‌هایی است که شامل عناصر JSX (مانند تگ‌های HTML یا دیگر کامپوننت‌های React) هستند. این کامپوننت به شما اجازه می‌دهد ساختار JSX خود را مستقیماً درون کامپوننت بنویسید و به i18next بگویید که چگونه متن‌ها و کامپوننت‌ها را با هم ترکیب کرده و ترجمه نهایی را رندر کند.تفاوت کلیدی با تابع t:تابع t('key'): یک کلید می‌گیرد و یک رشته متنی برمی‌گرداند.کامپوننت : محتوای JSX را به عنوان فرزند (children) می‌گیرد و یک عنصر React کامل را رندر می‌کند.وقتی شما از استفاده می‌کنید، i18next به طور هوشمند فرزندان آن را اسکن کرده و به قطعات مختلفی تقسیم می‌کند، مثل متن‌های ساده و کامپوننت‌ها. سپس یک کلید ترجمه استاندارد با تگ‌های ایندکس‌گذاری شده (مانند <0> و <1>) می‌سازد تا شما در فایل JSON خود از آن استفاده کنید.مثال‌های کاربردیبهترین راه برای درک قدرت ، دیدن آن در عمل است.مثال ۱: قالب‌بندی ساده متن (مثل Bold یا Italic)فرض کنید می‌خواهید این جمله را ترجمه کنید: "برای شروع، به داشبورد خود بروید."کد JSX:فایل ترجمه (مثلاً public/locales/fa/translation.json): i18next انتظار دارد کلید goToDashboard را به این شکل دریافت کند:در اینجا <1> جایگزین تگ شده است. i18next به طور خودکار ترتیب عناصر را تشخیص داده و ایندکس‌گذاری می‌کند.مثال ۲: استفاده از کامپوننت‌های React (یک لینک قابل کلیک)این یکی از رایج‌ترین سناریوهاست. فرض کنید می‌خواهید کاربر قوانین و مقررات سایت را بپذیرد.کد JSX:فایل ترجمه: در این حالت، به جای ایندکس‌های عددی، می‌توانیم از نام‌های خواناتر استفاده کنیم تا کار برای مترجم ساده‌تر شود.حالا باید به کامپوننت بگوییم که termsLink چیست. این کار با پراپرتی components انجام می‌شود:کد JSX (تکمیل شده):حالا تگ را در رشته ترجمه پیدا کرده و آن را با کامپوننت که به آن پاس داده‌اید، جایگزین می‌کند.مثال ۳: ترکیب کامپوننت‌ها با متغیرها (Interpolation)می‌توانید به راحتی متغیرها را نیز با کامپوننت‌ها ترکیب کنید، به طور مثالکد JSX:فایل ترجمه:در اینجا <1> معادل و <3> معادل است. متغیر username نیز مانند قبل استفاده می‌شود.نکات کلیدی و بهترین روش‌ها (Tips & Best Practices)چه زمانی از Trans استفاده کنیم؟ یک قانون طلایی: همیشه از تابع t استفاده کنید، مگر اینکه مجبور باشید! تابع t ساده‌تر و سریع‌تر است. فقط و فقط زمانی به سراغ بروید که نیاز دارید عناصر JSX (مثل تگ‌ها, لینک‌ها یا کامپوننت‌های اختصاصی یا ... ) را درون یک رشته ترجمه قرار دهید. استفاده بیش از حد از آن می‌تواند کد شما را پیچیده کند و در سرعت Renderingتون تاثیرگذار باشد.استفاده از نام‌های خوانا برای کامپوننت‌ها همانطور که در مثال ۲ دیدید، استفاده از پراپرتی components با نام‌های مشخص (مثل ) بسیار بهتر از ایندکس‌های عددی (<1>) است. این کار فایل‌های ترجمه شما را برای خودتان و به خصوص برای مترجمان، بسیار خواناتر و قابل مدیریت‌تر می‌کند.چگونه کلید ترجمه صحیح را پیدا کنیم؟ (نکته طلایی دیباگ) گاهی اوقات فهمیدن اینکه i18next دقیقاً منتظر چه ساختاری در فایل JSON شماست، دشوار است. بهترین راه برای این کار، فعال کردن حالت debug در تنظیمات i18next است.در فایل i18n.js خود، debug: true را اضافه کنید:حالا کنسول مرورگر خود را باز کنید. وقتی کامپوننت رندر می‌شود و کلید خود را پیدا نمی‌کند، یک پیام missing key در کنسول چاپ می‌کند و دقیقاً همان رشته‌ای که انتظار دارد را به شما نشان می‌دهد. شما می‌توانید به سادگی آن را کپی کرده و در فایل JSON خود استفاده کنید!جملات کامل را ترجمه کنید سعی نکنید با ترکیب چند کلید ترجمه شده، یک جمله بسازید. این کار باعث شکننده شدن ترجمه‌ها می‌شود، زیرا ترتیب کلمات در زبان‌های مختلف متفاوت است. شما را تشویq می‌کند که یک عبارت کامل و منسجم را ترجمه کنید که این یک روش صحیح در بین‌المللی‌سازی است.جمع‌بندیکامپوننت یک ابزار تخصصی و ضروری در react-i18next است.این کامپوننت پلی است بین دنیای استاتیک رشته‌های متنی و دنیای داینامیک کامپوننت‌های React.با استفاده هوشمندانه از آن، می‌توانید تجربه‌های کاربری بسیار غنی، کاملاً تعاملی و به زیبایی ترجمه شده را برای تمام کاربران خود در سراسر جهان فراهم کنید.

قدرت پنهان تابع t در i18next

مسعود هارونی — Tue, 10 Jun 2025 00:36:14 +0330
سلام به همه توسعه‌دهنده‌های عزیز! 👋تا حالا با خود فکر کرده‌اید که آرگومان دوم تابع t در کتابخانه i18next دقیقاً چه کاری انجام می‌دهد؟ شاید در نگاه اول فکر کنید که فقط برای تعیین یک مقدار پیش‌فرض (Default Value) کاربرد دارد، اما این تنها بخش کوچکی از ماجراست.این آرگومان در واقع یک آبجکت قدرتمند از گزینه‌ها (Options Object) است که به شما اجازه می‌دهد ترجمه‌هایی هوشمند، داینامیک و وابسته به شرایط مختلف بسازید. بیایید این قابلیت‌های کلیدی را با هم مرور کنیم:1️⃣ مقدار پیش‌فرض (Default Value)این ساده‌ترین و شناخته‌شده‌ترین کاربرد آن است. اگر کلید ترجمه مورد نظر شما در فایل‌های زبان پیدا نشود، این مقدار به عنوان جایگزین نمایش داده می‌شود و از نمایش کلیدهای خام و ناخوانا در رابط کاربری جلوگیری می‌کند.2️⃣ درون‌یابی (Interpolation): تزریق مقادیر داینامیکاین قابلیت به شما اجازه می‌دهد مقادیر متغیر (مانند نام کاربر یا تعداد) را مستقیماً درون رشته‌های ترجمه تزریق کنید. برای این کار از سینتکس {{variable}} استفاده می‌شود.فرض کنید در فایل fa.json چنین چیزی داریم:در کامپوننت خود به این شکل از آن استفاده می‌کنیم:3️⃣ مدیریت جمع و مفرد (Pluralization)با این قابلیت، دیگر نیازی به نوشتن if/else برای نمایش حالت مفرد یا جمع یک عبارت ندارید. کافیست متغیر count را به تابع پاس دهید تا i18next به طور خودکار نسخه صحیح را انتخاب کند.در فایل fa.json:نحوه استفاده:4️⃣ کانتکست (Context): ترجمه بر اساس زمینهاین ویژگی برای زمانی ایده‌آل است که یک کلید مشخص باید بر اساس یک زمینه خاص (مانند جنسیت) ترجمه‌های متفاوتی داشته باشد.در فایل fa.json:نحوه استفاده:✨ نتیجه‌گیریآرگومان دوم تابع t ابزاری بسیار قدرتمند است که ترجمه‌های شما را از حالت ایستا به حالتی پویا و هوشمند تبدیل می‌کند. با استفاده صحیح از این قابلیت‌ها می‌توانید کدهای تمیزتر، خواناتر و تجربه‌ی کاربری بسیار بهتری برای مخاطبان بین‌المللی خود خلق کنید.شما از کدام قابلیت بیشتر استفاده می‌کنید؟ تجربیات خود را در کامنت‌ها به اشتراک بگذارید!

استفاده از Index array در Key props در react.js

مسعود هارونی — Fri, 12 Apr 2024 04:08:46 +0330
ممکنه برای شما هم پیش اومده باشه زمانی که میخواهید یک لیست از Item هارو render کنید از Index array ها در Key prop استفاده کنید.در این مقاله میخواهیم به این مسائل بپردازیم: دلیل استفاده از Key prop هنگام render کردن List هااستفاده از Index array item در key prop چه مشکلاتی به وجود میاوردراه حل این موضوعدلیل استفاده از Key propاگر تا الان با استفاده از Array method ها (مثل map و یا filter ) تلاش کرده باشید، یک لیست از Item هارو Render کنید با این خطا مواجه میشوید: Warning: Each child in a list should have a unique "key" prop.ریکت نیاز به یک کلید (Key) دارد برای شناسایی هر Item از یک Array زمان Rendering، درواقع ریکت با استفاده از Key مشخص میکند، کدام آیتم از آرایه متعلق به کدام کامپوننت است.زمانی که شما به درستی برای Item هاتون کلید مشخص کرده باشید، اون Key به ریکت کمک میکنه برای متوجه شدن اینکه دقیقا چه اتفاقی افتاده تا بتونه بهینه‌ترین Update رو روی DOM انجام بده.در ساده‌ترین تعریف، اگر به درستی Key prop رو مشخص کرده باشید و یکی از عناصر Array تغییر پیدا کنه، ریکت بجای اینکه کل لیست رو مجددا Render کنه فقط اون عضوی که تغییر کرده رو Update میکنه.استفاده از Index array item در key prop چه مشکلاتی به وجود میاورد؟یکسری قوانین وجود داره برای کلیدها: کلید یک آیتم از آرایه باید نسبت به بقیه آیتم‌های آرایه یونیک یا یکتا باشد (اگر با کلیدهای آرایه های دیگر برابر باشد ایرادی ندارد)کلیدها، نباید تغییر کنند (به طور مثال، با اضافه کردن یا حذف کردن یا حتی sort کردن Array نباید کلید های این آرایه تغییر کند)کلیدها، نباید زمان Rendering ساخته شوند (اگر کلیدهارو زمان Rendering بسازید، با هربار Render شدن لیستتون کلیدها مجددا ساخته میشوند و تغییر میکنند و عملا با تعریف نکردن کلید هیچ تفاوتی ندارد)فکر میکنم تا الان دیگه متوجه این موضوع شدید که چرا نباید از index های یک Array به عنوان Key prop در render کردن Item ها استفاده کرد، طبق قانون دوم، کلیدها نباید تغییر کنند، زمانی که ما از index ها استفاده میکنیم، اگر به طور مثال عنصر اول آرایه حذف شود، عنصر دوم index عنصر اول را میگیرد و این باعث تغییر کلیدها میشود.زمانی که شما برای کلیدها از index استفاده میکنید ریکت دقیقا مانند زمانی رفتار میکند که هیچ کلیدی برای Item مشخص نکردید، و این ممکن است باعث به وجود اومدن مشکلاتی هنگام rendering شود.راه حل این موضوعاگر دیتایی که استفاده میکنید از یک Database میاد، میتونید از ID ردیف ها استفاده کنید که کاملا یکتا (unique) هستند.و اگر دیتایی که استفاده میکنید Local هست خودتون میتونید با استفاده از یکسری پکیج ها و کتابخانه ها مثل uuid برای هر Item یک key یکتا بسازید.

useReducer در React.js

مسعود هارونی — Sun, 11 Feb 2024 10:41:25 +0330
useReducer in React.jsقطعا تا الان اسم useReducer به گوشتون خورده، اینکه درتلاشه برای حل چه مشکلی و نحوه استفاده ازش رو در ادامه بررسی میکنیم.تعریف useReducerاگر توسعه دهنده ریکت باشید، قطعا تا الان از state ها استفاده کردید (با استفاده از useState hook) و میدونید که این useState hook یک ورودی از ما دریافت میکنه و یک خروجی میدهد، که ورودی همون initial state هستش (مقدار اولیه برای این state) و خروجی هم یک array هست از دو مقدار، اولی خود state و دومی تابع setter اون state که با استفاده ازش مقدار درون state رو تغییر میدادیم و باعث Rerender شدن کامپوننت میشدیم.حالا بنظرت چرا من useState رو یکبار دیگه توضیح دادم؟! ببین useReducer دقیقا کار useState رو انجام میده فقط تنها تفاوتی که دارن اینه که useReducer یکسری مشکلاتی که useState داشته رو برطرف کرده.طبیعیه زمانی که تعداد variable state ها و update state هامون داخل یک کامپوننت زیاد بشه، مدیریت کردنشون داخل همون کامپوننت سخت باشه، در چنین شرایطی ما با استفاده از useReducer منطق و logic اون کامپوننت رو ازش جدا میکنیم و باعث خوانایی بهتر کدمون میشیم.قطعا براتون پیش‌امده که نیاز داشتید چنتا state update رو در یک زمان واحد انجام بدید، به طور مثال زمانی که یک بازی شروع میشه شما نیاز دارید که نمرات رو صفر کنید، تایمر بازی رو ست کنید، و ...خیلی از اوقات update کردن یک state وابسته به وضعیت یک state دیگر است، و اگر درون اون کامپوننت تعداد زیادی state وجود داشته باشه، انجام این کار بدون استفاده از useReducer میتونه خوانایی کد شما رو کاهش بده.پس به عنوان جمع بندی: از useReducer زمانی استفاده میکنیم که میدیریت state های کامپوننتمون پیچیده شده و باید منطق کامپوننت رو ازش جدا کنیم.نحوه استفاده از useReducer همونطور که میدونی useReducer یکی از hook های پیشفرض React هست و باید از خود این کتابخانه import بشه، دقیقا مثل useState.دوتا ورودی داره، اولی reducer function هست و دومی initial stateو به همین‌شکل دو خروجی هم داره به شکل یک Array که اولی state و دومی dispatch هست.Reducer functionاین دقیقا همون تابعی هست که تمام منطق update state های مارو داخل خودش نگهداری میکنه، این تابع دو ورودی داره، اولی state هست و دومی مقداری است به نام action (در ادامه توضیح میدم action چیه)Initial stateیادته در useState ما مقدار اولیه داشتیم؟! اینجا هم دقیقا به همون شکل هستش، یعنی مقدار ‌اولیه‌ای که قرار میدیم درون state ذخیره میشه.Stateاین state از useReduceer خروجی داده شده، و دقیقا مثل state هایی که از useState خروجی داده میشدن میشه ازش استفاده کرد.Dispatchیادته، وقتی از useState استفاده میکردیم یک مقدار setter هم بهمون برمیگرداند که ازش برای update کردن state استفاده میکردیم؟! این هم دقیقا با همون هدف ایجاد شده، یعنی تابعی هست که یک ورودی دریافت میکنه و با استفاده از اون ورودی مقدار state رو update میکنه، که این ورودی دقیقا همون مقدار Action داخل تابع reducer هست که بالاتر توضیح دادیم.یک استاندارد بین برنامه‌نویس‌ها وجود داره برای ورودی این dispatch function اون هم به این صورت هست که یک Object با دو کلید Type و Payload دریافت میکنند. کلید Type مشخص میکنه الان قراره چه اتفاقی برای state بیوفته، و Payload هم مقداری هست که قراره بدیم به State.

متد های کمتر شناخته شده آرایه در JS

مسعود هارونی — Wed, 06 Dec 2023 23:31:21 +0330
بریم سر اصل مطلب، توی این پست میخوام خیلی سریع چنتا از Array method های JS که خیلی به گوشمون نخوردن رو بگم و با کاربرد هاشون آشنا بشیم.groupByاین متد به شخصه برای خود من از همه هیجان انگیز تره اگر SQL کار کرده باشید یک دستوری وجود داره تحت همین عنوان که در ساده ترین حالت ممکن، دیتارو group میکنه (دسته بندی میکنه).روش استفاده از این متد به شکل زیر هستش، تصور کنید یک آرایه داریم از people: const people = [ { name: "Masoud", age: 19, job: "Frontend developer" }, { name: "Amir", age: 27, job: "Backend developer" }, { name: "Arsalan", age: 22, job: "Backend developer" }, { name: "Ali", age: 21, job: "Electronic engeener" }, ];میخوایم افراد رو براساس شغلشون دسته بندی کنیم: const groupedPeople = Object.groupBy(people, (person) => person.job);به عنوان آرگومان اول Array رو دریافت میکند و آرگومان دوم یک تابع که این تابع هر کدام از عناصر آرایه رو به صورت پارامتر دریافت کرده و هرکدام از آنهارا بازگرداند طبق اون property ارایه دسته بندی میشه و خروجی هم یک Object هست. نکته: این فیچر توسط اکثر مرورگر ها پشتیبانی میشه (برای safari هنوز پشتیبانی نمیشود){ 'Frontend developer': [ { name: 'Masoud', age: 19, job: 'Frontend developer' } ], 'Backend developer': [ { name: 'Amir', age: 27, job: 'Backend developer' }, { name: 'Arsalan', age: 22, job: 'Backend developer' } ], 'Electronic engeener': [ { name: 'Ali', age: 21, job: 'Electronic engeener' } ] }Withتوصیه میشه از این متد استفاده نکنید چراکه منسوخ شده، صرفا بررسی میکنیم که اگر جایی چنین کدی رو دیدید بتونید متوجه منظورش بشید.کارکردش سادست، دوتا آرگومان از ما میگیره، اولی یک index هست و دومی مقداری که قراره توی اون index از ارایه جای گذاری بشه. (شما مقدار index رو منفی هم میتونید بدید به طور مثال -1 آخرین عنصر آرایه رو درنظر میگیره)

هویستینگ در جاوا اسکریپت

مسعود هارونی — Fri, 03 Nov 2023 23:20:18 +0330
در ساده ترین تعریف ممکن، Hoisting یک رفتار پیشفرض از مفسر جاوا اسکریپت هست که متغیر ها و فانکشن ها میتونن قبل از اینکه تعریف بشن، مورد استفاده قرار بگیرنconsole.log(name); var name;خروجی کد بالا دقیقا مثل کد زیر هست: (هر دو undefined هستن)var name; console.log(name);خیلی از دوستان تصورشون از مفهوم Hoisting اینه که مفسر جاوا اسکریپت تعریف متغیر ها و توابع (variables and functions declaration) رو در زمان اجرای کد منتقل میکنه به بالاترین نقطه از اون Scope تا بقیه کد ها بدون گرفتن خطا بتونن از این متغیر ها و توابع استفاده کنن، ولی حقیقتش اینطور نیست، در حقیقت مفسر جاوا اسکریپت قبل از اجرای کدها، کد هارو اسکن میکنه و تعریف متغیر ها و توابع (variables and functions declaration) رو اضافه میکنه به حافظه، به همین دلیل زمان اجرا خطا نمیگیرید.هویستینگ فقط در تعریف متغیرها مفهوم هویستینگ فقط در تعریف متغییر ها وجود داره، به کد زیر دقت کنید: var name; console.log(name); name = "masoudharooni"کد بالا خروجی undefined رو نمایش میده، همونطور که گفتم هویستینگ فقط برای تعریف متغیر هستش، اگر من بعد از استفاده از یک متغیر مقداری رو به اون اختصاص (assing کنم ) بدم، اون مقدار لحاظ نمیشه، کد زیر هم دقیقا خروجی مشابه داره: console.log(name); var name = "masoudharooni"نکته: توی هویستینگ متغیر داخل scope ای در دسترس هست که تعریف شده، به مثال زیر دقت کنید: function sayHello(){ b = "hello" console.log(b); var b; } sayHello(); console.log(b);در کد بالا با صدا زدن تابع sayHello عبارت hello در خروجی چاپ میشه، ولی در خط بعد اومدیم log کردیم متغیر b رو که داخل تابع sayHello تعریف شده، اینجا ما خطای b is not definedرو دریافت میکنیم.let and const VS varمفهوم Hosting فقط برای متغییر هایی وجود داره که با استفاده از کلیدواژه var تعریف شدن، در حقیقت اگر شما با استفاده از let یا const یک متغیر (البته که const متغییر نیست، شما از من بپذیرید ??) رو تعریف کنید دیگه لازم نیست نگران Hoisting باشید.به مثال زیر دقت کنید: name = "masoud" console.log(name); let name;این تکه کد با خطا مواجه میشه: connot access 'name' before initializationهویستینگ در توابعشما یک تابع رو قبل از اینکه تعریف بشه هم میتونید صدا بزنید، به مثال زیر دقت کنید: sayHello(); function sayHello (){ conosle.log("hello!"); } # output: hello!ولی اگر به شکل expression اون تابع رو تعریف کنیم به این شکل نیست: sayHello(); const sayHello = function (){ console.log("hello!"); } # output: sayHello is not definedنتیجه گیریسعی کنید حدالامکان از Hoisting اجتناب کنید، چون خیلی از اوقات باعث به وجود اومدن یکسری مشکلات توی برنامتون میشه.

نرخ تبدیل (Conversion Rate) , نرخ ماندگاری (Customer Retention Rate) چیست؟!

مسعود هارونی — Tue, 31 Oct 2023 12:31:42 +0330
نرخ تبدیلنرخ تبدیل، به درصد کاربرانی میگویند که یک اقدام خاص رو انجام میدن، مثال: ثبت نام در خبرنامه یا خرید یک محصول، یا تماس با پشتیبانی یا . . .یک فروشگاه اینترنتی رو تصور کنید که کاربران میتوانند در آن محصولات رو مشاهده یا خریداری کنند، نرخ تبدیل این فروشگاه اینترنتی درصد کاربرانی هست که یک محصول رو خریداری کردند.(Views / Actions) * 100 = Conversion rate(تعداد اقدامات / تعداد بازدید ) * نرخ تبدیل = 100فرمول محاسبه نرخ تبدیل به شکل بالا است:تصور کنید یک فروشگاه اینترنتی در روز 1000 بازدید کننده داره، و از این 1000 بازدید کننده 200 نفر خرید میکنند از این فروشگاه نرخ تبدیل این فروشگاه اینترنتی 20% است.نرخ ماندگارینرخ ماندگاری (Customer Retention Rate) درصد مشتریانی هست که توی یک بازه زمانی مشخص به خرید از یک کسب و کار ادامه میدهند.مثال: تصور کنید یک فروشگاه اینترنتی امسال 100 عدد مشتری داره، سال آینده از این 100 عدد مشتری 70 نفر از این سایت هنوز خرید میکنن، نرخ ماندگاری این سایت 70% هست. نرخ ماندگای = 100 * (تعداد کل مشتری ها / تعداد مشتریانی که هنوز به خریدشون ادامه میدهند )اهمیت نرخ تبدیل و نرخ ماندگارینرخ تبدیل و نرخ ماندگاری دو معیار مهم برای اندازه گیری موفقیت یک کسب و کار هستند، نرخ تبدیل نشون میده که شما در جذب مشتری های جدید چقدر موفق بودید، درحالی که نرخ ماندگاری نشون میده شما در حفظ مشتریان خود چقدر موفق بودید.بهبود نرخ تبدیل و نرخ ماندگاریتجربه کاربری خوبی برای کاربرانتون فراهم کنید: مطمئن بشید که کاربرانتون راحت میتونن با وب سایتتون کار کنند و سعی کنید تجربه کاربری خوبی از کار با محصولتون براشون بسازید.محصولات و خدمات باکیفیت ارائه دهید: محصولات و یا خدماتی که ارائه میدهید ارزش خرید داشته باشند، سعی کنید خدمات پس از فروش به کاربرانتون ارائه دهید که این باعث افزایش نرخ ماندگاری میشه، همچنین سعی کنید پیشنهادات جذاب مثل تخفیف به کاربرانتون بدید که این باعث افزایش نرخ تبدیل محصول شما میشه.امیدوارم از خوندن این مقاله لذت برده باشید، من مسعود هارونی هستم و در تلاشم که بتونم با اشتراک گذاری دانشم اون رو هر روز تکمیل تر از دیروز کنم.

تست A&B چیست و چگونه به کسب و کار ما کمک میکند؟!

مسعود هارونی — Tue, 31 Oct 2023 12:00:39 +0330
A&B testingتوی این مقاله به بررسی A&B testing میپردازیم، اینکه چه کمکی به کسب و کار ما میکنه و در چه جهتی میتونه برای رسیدن به اهدافمون به ما کمک کنه.What is A&B testing ?!در ساده ترین تعریف، تست A&B، روشی است برای مقایسه دو نسخه مختلف از یک موجودیت (Entity) با استفاده از دیتای واقعی* اینکه چه هدفی داریم از مقایسه این دو نسخه رو در ادامه کامل بررسی میکنیم.مثال: تصور کنید ما میخواهیم رابط کاربری ( UI ) صفحه اصلی وب سایتمون رو تغییر بدیم، ولی مردد هستیم که آیا این تغییر باعث افزایش بازدید و بهبود تجربه کاربری (UX) کاربران ما میشود یا خیر، دو نسخه از وب سایتمون رو آماده میکنیم، یک نسخه با UI فعلی، و یک نسخه با UI جدید، این دو نسخه رو به صورت تصادفی به دو گروه از کاربران نمایش میدیم، حالا باید طبق یکسری معیار هایی که وجود داره مثل نرخ کلیک (CTR) و یا نرخ تبدیل (Conversion rate) و همینطور نرخ ماندگاری (Customer retention rate) بررسی کنیم که کدوم نسخه عملکرد بهتری داشته است (اگر این معیار ها (نرخ تبدیل و یا نرخ ماندگاری ) رو نمیشناسی میتونی این مقاله رو بخونی ??) و میتونیم نسخه ای که عملکرد بهینه تری داشته رو به عنوان نسخه اصلی استفاده کنیم.مراحل انجام تست A&B:مشخص کردن هدف: سعی کنید قبل از انجام A&B تست، هدفتون رو مشخص کنید تا بتونید تمرکز بیشتری روی هدفتون داشته باشید، آیا میخواهید نرخ تبدیل رو افزایش بدید؟ یا اینکه میخواهید محصول یا خدماتی رو آزمایش کنید؟ یا میخواهید اطلاعاتی راجب نحوه تعامل کاربران با وب سایتتون جمع آوری کنید.مشخص کردن فرضیه: به طور مثال قبل از انجام A&B تست، مشخص میکنیم که UI جدید نرخ تبدیل بالاتری نسبت به UI فعلی دارد، بعد از انجام تست اگر فرضیه ما تحقق پیدا کرد، در حقیقت A&B تست ما موفق بوده، البته که این فرضیه باید یکسری ویژگی ها داشته باشد، باید حتما قابل اندازه گیری باشد، باید حتما قابل آزمایش باشد، که بتونیم با انجام تست اون رو رد یا تایید کنیم.ایجاد کردن دو نسخه از محتوا: در اکثر مواقع برای تست یک ویژگی جدید، نسخه فعلی را نسخه A ، و نسخه ای که میخواهند آن را بررسی کنند نسخه B در نظر میگیرند.نمایش نسخه به کاربران: دو نسخه ای که ایجاد کردیم رو به صورت تصادفی به دو گروه از کاربران نمایش میدهیم.جمع آوری اطلاعات: بعد از نمایش نسخه ها به کاربران، با جمع آوری و تجزیه و تحلیل داده ها باید مشخص کنیم که کدام نسخه عملکرد بهتری داشته است.نتیجه گیری: بعد از تجزیه و تحلیل و مشخص کردن نسخه ای که عملکرد بهتری داشته، الان میتونیم از این نسخه به عنوان نسخه اصلی استفاده کنیم.نتیجه گیریاین نوع تست، بسیار مفید است چرا که شما با استفاده از دیتای واقعی کاربران خودتون، محصلتون رو تست میکنید.سعی کنید برای انجام A&B تست به هر نسخه حداقل 1000 کاربر رو اختصاص بدید تا دیتای به دست آمده معتبر باشد.من مسعود هارونی هستم، امیدوارم از خوندن این مقاله لذت برده باشید، خوشحال میشم نظرتون رو برام بنویسید و بهم کمک کنید تا باهم این مقاله رو کامل تر کنیم.

کاستوم هوک ها در ریکت و تفاوت آنها با توابع معمولی (به همراه مثال واقعی)

مسعود هارونی — Wed, 04 Oct 2023 18:51:32 +0330
مواردی که در این مقاله بررسی میکنیم.- custom hook ها در ریکت چی هستند و چطور میتونیم تعریفشون کنیم.- چرا و چه زمان هایی باید از Custom hook ها استفاده کنیم.- تعریف یک کاستوم هوک کاربریکاستوم هوک ها اصلا چی هستند؟!درساده ترین تعریف همون توابع جاوا اسکیریپتی هستند فقط با دوتا تفاوت، 1- در تعریفشون از کلمه کلیدی use استفاده شده مثل هوک های داخلی ریکت (useState,useEffect , ...) 2- شما داخلشون میتونید از react hook ها استفاده کنید (داخل توابع عادی جاوا اسکیریپت چنین قابلیتی وجود ندارد.)چه زمانی باید از این کاستوم هوک ها استفاده کنیم؟!به طور کلی کاستوم ها استفاده میشوند تا منطقی رو داخل خودشون نگهداری کنند که میخواهید داخل react component هاتون ازش استفاده کنید، و برای پیاده سازی این منطق نیاز به توابع داخلی react دارید.استفاده از این کاستوم هوک ها این امکان رو به شما میدهد که منطقی که توی کامپوننت های مختلفتون تکرار شده رو در یک هوک (همون تابع خودمون ) ثابت داشته باشید، این باعث میشه کدتون خواناتر و قابل نگهداری تر باشه (تست و دیباگ و توسعه کدتون راحت تر باشه).تفاوت کاستوم هوک ها و توابع عادی در جاوا اسکیریپتقطعا تا الان تفاوتشون رو متوجه شدید، و متوجه شدید که کاستوم هوک هارو ما فقط میتونیم داخل React component ها استفاده کنیم ولی توابع عادی Javascript رو داخل هر فایل JS ای میتونیم استفاده کنیم، و قطعا این رو هم متوجه شدید که ما داخل توابع عادی جاوا اسکیریپت نمیتوانیم از توابع داخلی و هوک های ریکت استفاده کنیم، ولی داخل CustomHook ها این قابلیت رو داریم، از طرفی این رو هم متوجه شدید که Custom Hook ها با کلمه کلیدی use تعریف میشن ولی توابع عادی به این شکل نیست.ما از Custom hook ها استفاده میکنیم برای : زمانی که نیاز داریم یک منطق (Logic) رو در چندین کامپوننت مختلف استفاده کنیم، و برای پیاده سازی اون منطق نیاز به توابع و هوک های داخلی React (مثل: useState, useEffect, . . . )داریم.زمانی که میخواهید منطقی رو در کامپوننتتون استفاده کنید که به API و منابع خارجی دسترسی دارد.کاستوم هوک ها باعث میشوند کد های شما مختصر تر و خوانا تر شود.کاستوم هوک ها باعث میشوند کد های شما قابل نگهداری تر شود (یعنی توسعه، دیباگ و تست کد هاتون راحت تر باشه)مثال عملی از Custom hook هااین مثالی که میخوام براتون بزنم رو خودم داخل پروژه هام استفاده میکنم و به نظرم خیلی کاربردی هستش، یک custom hook میخوایم تعریف کنیم که با صدا زدنش داخل کامپوننت هامون، بیاد ابعاد viewport (همون صفحه نمایش کاربر) رو بهمون بده.زمانی که این هوک رو داخل کامپوننت ریکتمون فراخوانی کنیم، یک آرایه به ما برمیگرداند، که عنصر اول این آرایه برابر با عرض صفحه نمایش کاربر و عنصر دوم آن برابر با ارتفاع صفحه نمایش کاربر است.خیلی ممنونم که این مقاله رو مطالعه کردید، امیدوارم براتون مفید بوده باشه، من مسعود هارونی هستم و در تلاشم که بتونم دانش خودم رو با بقیه به اشتراک بذارم.منابع: منبع اصلی من برای نوشتن این مقاله داکیومنت ReactJs و تجربه خودم در استفاده از CustomHook ها بوده.

لاراول دیباگبار چیست؟ (به همراه آموزش ویدیویی?) (Laravel debugbar)

مسعود هارونی — Sun, 04 Sep 2022 20:51:35 +0430
سلام امیدوارم حالتون خوب باشه، میتونید محتوایی که داخل این مقاله وجود داره رو به صورت ویدیویی هم ببینید، فقط کافیه روی این لینک کیلیک کنید.??پکیج Laravel debugbar ابزاری هست که از پکیج PHP debugbar استفاده کرده برای محیط Laravel، شما با استفاده از این پکیج میتونید راحت تر نرم افزارتون رو آنالیز کنید و متوجه باگ های نرم افزارتون بشید.روش نصب پکیج Laravel debugbarشما میتونید با استفاده از کامپوزر خیلی راحت این پکیج رو نصب کنید، با استفاده از دستور زیر: (راستی من یه مقاله راجب کامپوزر هم نوشتم که به صورت کامل همه چیز رو باهم برسی کردیم، حتما اون رو هم بخون?)composer require barryvdh/laravel-debugbar --devدستور --dev که گذاشتیم برای اینه که به کامپوزر بگیم این پکیج رو فقط برای محیط development برای ما نصب کن، چون میاد یکسری اطلاعات از نرم افزار ما جمع آوری میکنه، ممکنه توی محیط Production نرم افزار رو کند کنه و توصیه نمیشه تو محیط Production ازش استفاده بشه.اگر از auto-discovery که به صورت پیشفرض روی لاراول وجود داره استفاده میکنید فقط کافیه که وارد config\app.php بشید و مقدار APP_DEBUG رو برابر true قرار بدید.اگر هم از auto-discovery استفاده نمیکنید که باید کد زیر را: Barryvdh\Debugbar\ServiceProvider::class,در بخش ServiceProvider توی آرایه Provider در فایل config/app.php قرار بدید و اگر هم میخواید از facade برای log گرفتن مسیج ها استفاده کنید، کد زیر رو 'Debugbar' => Barryvdh\Debugbar\Facades\Debugbar::class,به بخش facades در app.php اضافه کنید.اگر مراحل بالارو بدون هیچ مشکلی انجام داده باشید، الان پکیج روی پروژتون نصب شده و میتونید ازش استفاده کنید.Messages tabبه تصویر بالا توجه کنید، وقتی پکیج روی پروژتون نصب باشه یک آیکون لاراول پایین سمت چپ مرورگرتون پدیدار میشه، که اگر روش کلیک کنید یک پنجره مثل عکس باز میشه که شامل تعدادی Tab هست که تب اول تب Messages یا همون پیام ها هستش، توی این تب شما میتونید از اطلاعاتتون با یک استایل مشخص Dump بگیرید یه چیزی مثل Console مرورگر هست با یکسری استایل.با استفاده از متد های زیر شما میتونید اطلاعاتتون رو توی این تب نمایش بدید: Debugbar::info($object);Debugbar::error('Error!');Debugbar::warning('Watch out…');Debugbar::addMessage('Another message', 'mylabel');Timeline tabشما با استفاده از این تب میتونید ببینید که هر درخواست چقدر طول کشیده تا انجام بشه، همچنین میتونید متوجه بشید کل نرم افزارتون چقدر زمان برده تا اجرا بشه در حقیقت Boot بشه.متد های زیر برای این تب تعریف شده اند: Debugbar::startMeasure('render','Time for rendering');Debugbar::stopMeasure('render');Debugbar::addMeasure('now', LARAVEL_START, microtime(true));Debugbar::measure('My long operation', function() { // Do something…});Exceptions tabتوی این تب، Exception های نرم افزارتون رو نمایش میده، به شکل زیر توجه کنید: متد Exception این که کجا Throw شده تکه کدی که Exception داشته و یک آرایه از اطلاعاتش رو براتون نمایش میده، که شما با تکه کد زیر میتونید Exception هاتون رو به این صورت داشته باشید، البته که اگر از کد زیر هم استفاده نکنید باز هم این اطلاعات رو میده، ولی نرم افزارتون رو متوقف میکنه.try { throw new \Exception("این متد Exception است.");} catch (\Exception $e) { Debugbar::addException($e);}Views tabتوی این تب تمام View ها یا تمپلیت (Template) هایی که به واسطه Route کنونی لود شده رو نمایش میده و اگر روی هر کدوم کلیک کنید، پارامتر هایی که این ویو دریافت کرده رو هم بهتون میگه، به تصویر زیر توجه کنید:پارامتر این ویو orders هست که اگر تصویر زیر رو ببینید متوجه خواهید شد:Route tabاین تب تمام اطلاعات مربوط به Current Route یا روت کنونی رو براتون نمایش میده به تصویر زیر توجه کنید:Queries tabاین تب تمام کوئری هایی که به واسطه روت کنونی زده شده رو براتون نمایش میده به صورت SQL و حتی زمان اجرا و فایلی که اجرا شده رو هم بهتون میگه، به تصویر زیر توجه کنید:Models tabتمام مدل هایی که توی کنترلر مربوط به این Route ازشون استفاده شده رو نمایش میده.Sessions tabهمونطور که از اسمش مشخصه تمام سشن های که ست شده رو نمایش میده.Request tabتمام اطلاعات مربوط به ریکوئست کنونی رو نمایش میده:سمت راست پنجره رو اگر نگاه کنید یک سری اطلاعات میبینید:ریکوئست متد و روتی که بهش ریکوئست زده شده، میزان فضایی که از مموری اشغال شده، میزان زمانی که طول کشیده تا اجرا بشه و نسخه PHP و آیکون فولدر هم مربوط به previous endpoint request یا همون روت هایی که قبلا بهش ریکوئست زده شده که میتونید مرتبشون هم بکنید، یا کلا همشون رو پاک کنید. https://www.aparat.com/v/9lrwx خیلی ممنونم ازتون که وقت گذاشتید و تا اینجا مطالعه کردیدید??ممنون میشم نظرتون رو توی بخش کامنت ها بنویسید و این مقاله رو لایک کنید، لایک کردن شما باعث بیشتر دیده شدن این مقاله میشه و به من انگیزه میده، اگر دوست داشتید باهم گپ بزنیم میتونید از راه های ارتباطی زیر با من در ارتباط باشید:ایمیل | لینکدین

تینکر در لاراول چیست؟! یک پکیج فوق العاده برای کار با تینکر?

مسعود هارونی — Wed, 24 Aug 2022 01:45:52 +0430
تصور کنید قراره مقدار بازگشتی مدل Article رو به صورت دستی تست کنید و از صحت و درستی اطلاعات به صورت عینی اطمینان حاصل کنید و پروژه روی Production mood هست، چه میکنید؟!اگر طریقه‎ی استفاده از Tinker را بلد نباشید یک Route موقت میسازید و یک callable funciton به بخش action آن پاس میدهید و خروجی که میخواهید ببینید را چاپ میکنید، باید تغیرات را commit کنید و پوش کنید روی Github یا هر سرویس دیگه ای که استفاده میکنید، فقط و فقط برای تست یک مقدار از یک متد.احتمال این هم وجود دارد که بعد از اینکه تست مورد نظرتون رو انجام دادید Routeی که مشخص کرده بودید رو پاک نکنید و این Route یک روت پابلیک است که هیچ permissionی و یا middlewareی روش ست نشده و خب ممکنه که امنیت وبسایت شمارو تحت شعاع قرار بده.اینجاست که تینکر به دادمون میرسه.?تینکر یک ابزاره برای لاراول که شما با استفاده ازش میتونید با کل اپلیکیشن لاراولیتون Intraction داشته باشید در حقیقت بتونید با کل اپلیکیشنتون ارتباط برقرار کنید فقط و فقط از طریق Command line.شما با استفاده از دستور زیر میتونید از تینکر استفاده کنید.php artisan tinkerبعد از این دستور هر کد PHPای که بخواید میتونید بزنید و با Enter خروجی رو بهتون نشون میده.تینکر به صورت پیشفرض روی تمام اپلیکیشن های لاراولی موجود است، ولی اگر به هر دلیلی روی اپلیکیشنتون وجود نداشت میتونید از روش زیر نصبش کنید: composer require laravel/tinkerمحدودیت تینکرزمانی که شما از تینکر استفاده میکنید با یک محدودیت روبه رو میشید، اون هم اینه که دستوراتی که مینویسید فقط باید در یک خط باشن.اصلا نگران نباشید، الان دوتا راه حل میدم بهتون که راحت بتونید این محدودیت رو دور بزنید.?✔راه حل اولمتونید از Editor خوده Tinker استفاده کنید، که یک فضایی رو در اختیارتون قرار میده برای نوشتن دستوراتتون، برای استفاده از این ادیتور شما باید اول خوده تینکر رو با دستوی که قبلا برسی کردیم ران کنید و دستور edit را بزنید.php artisan tinkereditراه حل دومکار کردن با استفاده از این روش خیلی راه تر از روش قبل هست، چون میخوایم از یک پکیج استفاده کنیم که کاملا رایگانه و یک محیط گرافیکی توی مرورگر برای استفاده از تینکر در اختیارمون قرار میده.نصب و استفاده از این پکیج خیلی راحته، که در ادامه برسیش میکنیم.این پکیج رو با استفاده از کامپوزر نصب میکنیم، اگر نمیدونی کامپوزر چیه، حتما این مقاله رو بخون.composer require spatie/laravel-web-tinker --devبعد از نصب باید assetهای مربوط به این پکیج رو توی حالت publish قرار بدیم، که با استفاده از دستور زیر این کارو انجام میدیم: php artisan web-tinker:installپکیج ما الان آمادست که ازش استفاده کنیم، فقط کافیه روت tinker را در مرورگر باز کنیم، چنین محیطی را در اختیارمون قرار میده که سمت چپ کدهای مدنظرمون رو مینویسیم، و سمت راست با زدن ctrl+enter میتوانید خروجی را ببینید.ما میتوانستیم از tinkerwell هم استفاده کنیم، ولی هدف از این مقاله این بود که با استفاده از یک پکیج رایگان این کار را انجام دهیم.⭐ امیدوارم از این مقاله لذت برده باشید، لطفا مقاله رو لایک کنید و نظرتون رو حتما برام بنویسید، من رو هم در اینستاگرام دنبال کنید، تا بیشتر بتونیم باهم ارتباط برقرار کنیم.- راه های ارتباطی با من : اینستاگرام - ایمیلارادتمند شما مسعود هارونی

کامپوزر چیست؟! چرا باید از کامپوزر استفاده کنیم؟

مسعود هارونی — Fri, 19 Aug 2022 17:32:39 +0430
سلام امیدوارم حالتون خوب باشه، و سرشار از انرژی مثبت باشید.* بحث مدیریت وابستگی پروژه به پکیج‎ها و کتابخانه ‎ها خیلی بحث حیاتی و مهمی هستش و اگر ما از یک Package manager استفاده نکنیم ممکنه به دردسر بیوفتیم.کامپوزر (Composer) چیست؟!در کوتاه ترین تعریف، کامپوزر یک ابزار برای مدیریت وابستگی ها در PHP هست.شما کتابخانه هایی که برای پروژتون نیاز دارید رو وارد میکنید کامپوزر با تمام وابستگی هایی که دارند براتون نصب و مدیریتشون میکنه. ( این مقاله هدفش بیشتر صبحت در رابطه با بخش های فنی Composer هست و راجب فرایند نصب کامپوزر روی سیستم کامپیوتریتون صحبت نخواهیم کرد.)Composer initشاید اولین دستوری باشد که در کامپوزر یاد میگیریم، این دستور کامپوزر را برای پروژه ما initialize میکنه، در حقیقت با این کامند شما کامپوزر رو برای پروژتون استارت میزنید.یک سری سوال ازتون میپرسه و طبق جواب هایی که بهش میدید براتون یک فایل کانفیگ میسازه به اسم composer.json که تمام کانفیگ نرم افزارتون داخلش قرار داره.یک سری از سوالات کامپوزر رو اینجا براتون نوشتم: Package name (/) [masoudharooni/first-package]:اسم پکیج یا پروژتون رو میپرسه که یک اسم هم بهتون پیشنهاد میده که اگر Enter بزنید همون اسم پیشنهادی رو قرار میده. که اینجا : masoudharooni/first-package هست. ** در تمام مراحل اگر Enter بزنید و چیزی وارد نکنید، یا مقداری که بهتون پیشنهاد داده رو قرار میده یا خالی قرار میده اون بخش رو **Description []: توضیحی راجب پروژه رو ازتون میخواد.Author [masoud harooni , n to skip]: نویسنده پکیج رو ازتون میخواد، که میتوانید نام نویسندگان را با کاما ( , ) جدا کنید.Minimum Stability []: شما اینجا میتونید یک رفتار پیشفرض (default behavior) تعریف کنید برای فیلتر کردن پکیج ها بر اساس پایداریشون (Stability ) که به صورت پیشفرض stable هست.Package Type (e.g. library, project, metapackage, composer-plugin) []: project License []: دیگه فکر نمیکنم نیازی به توضیح داشته باشه. این کانفیگی هست که باهم ست کردیم: composer.jsonبریم سراغ کامندهایی که کامپوزر در اختیارمون قرار میدهComposer installکامپوزر به دنبال فایل comopser.lock میگردد اگر آن را پیدا کند، دقیقا همان پکیج هایی را که مشخص شده با همان ورژن ها نصب میکند، در غیر این صورت فایل composer.json رو میخواند و پکیج هایی که داخل بخش require مشخص شده رو نصب میکنه، و ورژن پکیج های نصب شده را داخل فایل composer.lock قرار میده.Composer updateبا استفاده از این کامند کامپوزر فایل کانفیگ (composer.json) رو میخونه، اگر پکیجی در بخش require وجود داشته باشه که نصب نشده باشه اون رو نصب میکنه، یا اگر پکیجی نصب شده باشه که داخل require وجود نداشته باشه اون رو حذف میکنه و بقیه پکیج هارو هم اگر آخرین ورژنشون در دسترس باشه اونهارو نصب میکنه، و نهایتا اطلاعات جدید پکیج هارو در فایل composer.lock قرار میده.Composer requireبا استفاده از این کامند شما میتوانید یک پکیج را به بخش require ها در فایل کانفیگ اضافه کنید.Composer removeبا استفاده از این کامند نیز شما میتوانید پکیج مورد نظر خود را از بخش require های فایل کانفیگ حذف کنید، اگر هم نیاز داشته باشید تمام وابستگی های پکیج مورد نظرتون رو حذف کنید میتونید از دستور زیر استفاده کنید.composer remove vendor/packagename --update-with-dependenciesComposer outdated --directتمام پکیج هایی که منسوخ شده اند و توسط root package هاتون مورد استفاده اند رو نمایش میده.Composer dumpautoload مجددا فایل composer.json رو میخونه و یک لیست از تمام کلاس هایی که قراره include شوند در پروژه جمع آوری میکند (در فایل : autoload_classmap.php)مشخص کردن ورژن های خاص از پکیج هاشما برای مشخص کردن یک ورژن خاص از یک پکیج باید از Passing version ها استفاده کنید که بخشی از آنها را در تصویر زیر براتون قرار دادم.Passing versions in composerتشکر از اینکه وقت گذاشتید و تا اینجا مطالعه کردید، نظرتون رو برام حتما کامنت کنید و اگر دوست داشتید مقاله رو لایک کنید و اون رو به دوستاتون معرفی کنید.- برای عمیق تر شدن در مطالب این مقاله رو هم مطالعه کنید.ارادتمند شما مسعود هارونی

TDD چیست و چرا اهمیت دارد؟!

مسعود هارونی — Tue, 15 Mar 2022 14:10:37 +0330
What is TDD ??‍♂️⭐ سلام امیدوارم حالتون خوب باشه، توی این مقاله میخوایم راجب تست نویسی برای نرم افزار ها صحبت کنیم، ببینیم تست نویسی چیه، چرا باید بلد باشیم، چه مزایا و معایبی داره، چرا تمام شرکت های بزرگ یکی از اصلی ترین پارامتر هاشون برای استخدام، مهارت در تست نویسیه، نرم افزار ها رو توی دو وضعیت با هم مقایسه کنیم ( با تست و بدون تست ) و به چنتا از سوالای پرتکرار راجب تست نویسی پاسخ بدیم، پس با من همراه باشید.⭐ داخل این مقاله تمرکز اصلی ما روی مفاهیم تست نویسی هست و کد نمیزنیم، توی مقالات آینده تکه کد های فریم ورک های معروف و تست هایی که براشون نوشته شده رو با هم مورد برسی قرار میدیم.TDD چیست؟همانطور که میدانید، TDD مخفف Test Driven Development هست، و نوعی روند توسعه نرم افزار به حساب میاد، خیلی ها فکر میکنند که TDD یعنی تست نویسی، بله درسته، ما به واسطه TDD تست هم مینویسیم ولی خود TDD همونطور که گفتیم بک روند توسعه نرم افزاره، در ساده ترین تعریف، "ما کدی مینوسیم که نرم افزارمان را به صورت کاملا اتوماتیک تست کند"، منظورم از تست چیه؟! یعنی خروجی هایی که، بخش نرم افزاری که در حال تست آن هستیم با خروجی هایی که انتظار داریم برابر باشند.به طور مثال، شما انتظار دارید اگر به فانکشن sum دو عدد 3 و 4 را دادید، مقدار 7 را بازگرداند، شما تستی مینویسید و مشخص میکنید، که خروجی باید حتما عدد باشد و مقدار 3 و 4 را به فانکشن پاس میدهید و مجددا انتظار دارید که خروجی 7 باشد.ما الان یک تست نوشتیم، به این نوع تست UnitTest میگویند، که کوچک ترین اجزا نرم افزار مارو تست میکند (کوچک ترین بخش های نرم افزاری فانکشن ها و متد ها هستند)Red Green Refactor cycle :Red Green Refactor cycleیک چرخه ای وجود داره به نام Red Green Refactor که زمانی که میخواید از TDD توی نرم افزارتون استفاده کنید حتما باید از این چرخه پیروی کنید، همونطور که توی تصویر بالا میبینید: ? این چرخه با Red یا همون قرمز آغاز میشه.Red : یعنی شما باید اول تست رو بنویسید، بعد اون فانکشنالیتی رو پیاده سازی کنید، پس همونطور که توی عکس نوشته شما اول باید یک تستی بنویسید که با شکست مواجه شود.Green : بعد از اینکه تست شما با شکست مواجه شد، الان وقتشه که تمام تمرکزتون رو بذار برای اینکه، فقط بتونید تست رو پاس کنید (منظورم از تمام تمرکز اینه که در این مرحه خیلی درگیر کیلین بودن کد ها نشید، فعلا تنها وظیفه شما پاس کردن این تست ها است.)Refactor : بعد از اینکه تست ما پاس شد، الان وقتشه که ما کد هامون رو ریفکتور کنیم، الان باید به کیلین بودن کد ها اهمیت بدید و کد هارو تمیز کنید و روش های پیاده سازیتون رو اگر به تغیر نیاز داره، تغیر بدید و . . چرا اول باید تست بنویسیم بعد نرم افزار رو پیاده سازی کنیم؟ اول تست نوشتن در توسعه نرم افزار روی معماری نرم افزار تاثیر میگذارد، یعنی: برای هر بخش کوچیک نرم افزاری که تست مینویسید، اون برنامه نویس یا دولوپر، (که عمدتا خودتا هستید، ولی در شرکت های بزرگ یک پزیشن شغلی وجود داره که این کار را برای شما انجام میدهد.) مجبور میشه طبق قوانین و قواعدی که شما توی تست تعریف کردید رفتار کنه، و این امکان رو به شما میده که زمان تست نویسی، API اون بخش رو که درحال تست آن هستید، از بالا (منظور نگاه Abstract هست ) نگاه کنید، سعی کنید همیشه قبل از پیاده سازی تست بنویسید، چون تست نوشتن برای نرم افزار هایی که قبلا پیاده سازی شدن، خیلی کار سخت و دشواریه، و اون کیفیتی که مد نظر ما هست رو هم برامون فراهم نمیکند. چرا اصلا وقتی خودمون میتونیم دستی نرم افزار رو تست کنیم، باید تست اتوماتیک بنویسیم؟!یکی از سوالات پرتکرار این است که: چرا وقتی خودم دارم دستی نرم افزارمو تست میکنم، بیام کلی زمان و انرژی بذارم که اتوماتیک نرم افزارم تست بشه؟! درسته، اگر نرم افزار شما نرم افزار بزرگی نباشه، روشی که مد نظرتونه شاید کارکنه، ولی زمانی که نرم افزار بزرگ میشه و دغدغه های توسعه نرم افزار بیشتر و بیشتر میشه، تقریبا احتمال صحیح کارکردن روش شما به صفر میرسد، زمانی که دستی نرم افزار را تست میکنید، ممکنه یک بخشی رو جابندازید، یا بخشی دیگر را فراموش کنید و اون بخش زمانی که نرم افزار ریلیز بشه، توی Production Mode به مشکل بخوره و خب میدونید که دیباگ کردن نرم افزار توی مود پروداکشن، زمان بیشتری از ما میگیره و زمان بیشتر مساوی با هزینه پیشتر است.تست نوشتن تلف کردن وقته؟خیلی از برنامه نویسان و یا حتی خیلی از شرکتا فکر میکنند که تست نویسی برای پروژه های نرم افزاری اتلاف وقت است، ولی اصلا اینطور نیست، به عکس زیر توجه کنید: ?تفاوت توسعه نوم افزار با تست و بی تستهمونطور که میبینید زمان توسعه نرم افزار بدون تست نویسی از زمانی که تست مینویسیم، خیلی کمتره، ولی زمانی که پروژه ریلیز میشه و الان باید از پروژه نگهداری شود(دیباگینگ، یا اضافه کردن فیچر یا . . .) نرم افزار بدون تست زمان خیلی بیشتری نسبت به نرم افزاری که تست داشته مصرف کرده، و به همین علت اگر کل زمانی که برای توسعه نرم افزار صرف شده رو در نظر بگیریم نرم افزار بدون تست، زمان بیشتری مصرف میکند، ولی چون شرکت ها و اشخاصی که به آینده فکر نمیکنن و فقط میخواهند سریع پروژه رو تحویل بدن، همان تایم توسعه را در نظر میگیرند، فکر میکنند که تست نویسی اتلاف زمان است ولی همانطور که دیدیم اصلا اینطور نیست، مثال زیر هم عکسی دیگر است برای درک بهتر موضوع.تست نوشتن هزینه توسعه را چند برابر میکندیکی دیگر از باور های غلط بعضی از برنامه نویسان و شرکت ها این است که گمان میکنند تست نویسی هزینه توسعه نرم افزار را افزایش میدهد، ولی باید بگویم که اینطور نیست، به تصویر زیر توجه کنید: ?همانطور که در بالا میبینید، توسعه یک نرم افزار واحد بدون تست نویسی و با تست نویسی مقایسه شده است، نرم افزار بدون تست نویسی در مجموع 480 ساعت زمان از ما گرفته، و نرم افزار با تست نویسی 310 ساعت، و اگر ما به برنامه نویسانمان به ازای هر ساعت، 120 دلار بدهیم، این اختلاف برابر میشود با 20,400 دلار که مبلغ زیادی است، علاوه بر این، بدون تست نویسی نرم افزار ما 170 ساعت دیر تر ریلیز میشود، و اگر محصول برای فروش داشته باشیم در آن 170 ساعتی که محصولی نفروخته ایم، ضرر مالی ما چندین برابر میشود.حتما Code Coverage ما باید %100 باشد؟کد کاوریج به درصد کدی میگویند که برای آن تست نوشته شده، اگر بخوام سوال بالا رو ساده تر بپرسم میشه: "حتما باید برای تمام قسمت های نرم افزار تست بنویسیم؟".خب جواب این سوال خیر هست، شما قرار نیست کد کاوریج 100 درصد داشته باشید، شما باید برای قسمت های اصلی و حیاتی نرم افزارتون تست بنویسید، کدکاوریج %90+ عدد خوبیه، خب طبیعتا هرچه کدکاوریج شما بیشتر باشد، باگ نرم افزار شما نیز کمتر است.وقتی تست مینویسیم دیگه لازم نیست پس از ریلیز شدن نرم افزار اون رو تست کنیم؟یکی از باور های غلطی که وجود داره اینه که زمانی که ما برای نرم افزارمون تست نوشتیم دیگه لازم نیست توی مود پروداکشن اون رو دستی تست کنیم، تست نوشتن به این معنا نیست که باگ نرم افزاری شما صفر میشود، بلکه به این معناست که مقدار قابل توجهی از آنرا کاهش میدهد.امیدوارم تا اینجا مقاله براتون مفید بوده باشه و تونسته باشم اطلاعات مفیدی رو بهتون انتقال بدم، ممنون میشم مقاله رو با دوستاتون به اشتراک بذارید.??اگر سوالی داشتی حتما توی بخش کامنت ها بپرسید، تا باهم سطح دانشمون رو افزایش بدیم.✌?

معماری MVC چیست و چرا باید از آن استفاده کنیم؟!?‍♂️

مسعود هارونی — Mon, 14 Mar 2022 22:09:34 +0330
What is MVCMVC چیست؟ خیلی از جاها MVC رو یک الگوی طراحی مینامند(Dsign Pattern) ولی در حقیقت، MVC یک معماری نرم افزار است، نه یک الگوی طراحی، چرا؟ اگر بخوام در کوتاه ترین حالت، و در عین حال ملموس ترین حالت ممکن توضیح بدم، معماری نرم افزار ساختار و استراکچر اصلی پروژه نرم افزاری مارو مشخص میکند، اما دیزاین پترن ها تنها راه حل هایی هستند، برای مشکلات رایج در برنامه نویسی شی گرا. این معماری نرم افزار که مخفف Model-View-Controller هست، همونطور که میبینید از قانون Separation of concern پی روی میکند، یعنی چی؟ یعنی اینکه نگرانی های ما (همون Concern ها) که در اینجا منظورش همین سه بخش نرم افزاری هست، رو از هم جدا میکنه، چه مزیت هایی داره این کار؟! زمانی که شما این سه بخش نرم افزاری رو از هم جدا میکنید، ساختار پروژتون قابل درک تر میشه (برای یک شخص سومی که قراره با کد های شما کار کنه)، زمانی که به مشکل برخوردید خیلی راحت میتونید مشکل رو رفع کنید، چون بخش های مختلف از هم جدا هستند و شما فقط به سراغ همان بخشی میروید که مشکل دارد، هزینه نگهداری کد ها کاهش میابد، سرعت توسعه افزایش میابد، تایم توسعه کاهش میابد، سرعت دیباگینگ افزایش میابد، خطاهایی که به دلیل تمیز نبودن کد و یا در هم بودن کد ها به وجود آمدند، کاهش میابند و . . . چرایی استفاده از MVCزمانی که ما از معماری MVC استفاده میکنیم، Cohesionعه نرم افزار ما افزاریش میابد (Cohesion : به انسجام بخش های نرم افزاری گفته میشود، مثلا زمانی که داریم یک ماژول رو توسعه میدیم، ببینیم که چقدر کلاس ها و متد هایی که درونش استفاده کردیم به هم مربوطه، هر چقدر بیشتر به هم ارتباط داشته باشن، Cohesion نرم افزار ما افزایش میابد، ما همیشه باید برای افزایش Cohesion در نرم افزارمون تلاش کنیم) و Coupling رو هم کاهش میدهد (Coupling : منظور میزان وابستگی نرم افزار است، میزان وابستگی ماژول ها به یک دیگر و . . . )توی برنامه نویسی یک جمله معروف وجود داره و اون هم اینه: The problem is money and Time و اگر ما بتونیم با روشی هزینه و تایم توسعه رو کم کنیم، اون روش روش مناسبیه.زمانی که شما از یک معماری درست برای نرم افزارتون استفاده نکنید ممکنه دچار Spaghetti Code بشید (یعنی کد هاتون مثل اسپاگتی، در هم تنیده باشن، و این اون جمله معروفه رو نقض میکند.?)هزینه نگهداری یعنی چی ؟! تصور کنید که به مشکل خوردید و چون کدتون استاندار نیست برای رفع مشکل زمان خیلی زیادی از دست میدید و زمان از دست رفته مساوی با پول از دست رفته است، چون شما باید به دولوپر هاتون حقوق بدید و اگر هم محصولی داشته باشید، توی تایم دیباگینگ علاوه بر هزینه ای که باید به دولوپر پرداخت کنید، شما فروشی هم ندارید و این ضرر مالی شما چندین برابر میشود.اجزا مختلف MVC اجزا مختلف MVC Models :به طور خلاصه ما برای انجام عملیات CRUD ( که مخفف : Create, Read, Update, Delete میباشد) استفاده میکنیم، به طور خلاصه Model اون بخش نرم افزاره که با Data Source ها ارتباط برقرار میکنه، این دیتا سورس ها الزاما نباید دیتابیس های رابطه ای باشند (RDBMS : یا همون Realational DataBase Management System ) بلکه ممکنه اصلا یکسری فایل TXT باشند یا فایل JSON ( اگر نمیدونید JSON چیه حتما پیشنهاد میکنم این مقاله رو بخونید ?) یا هر دیتا سورس دیگه ای.تقریبا توی پروژه های نرم افزاری که با این معماری Implement شدن (ممکنه همه هم اینطور نباشن) به ازای هر جدول در دیتابیس، یک کلاس تشکیل میدهند و ساختار بخش Model ها اینگونه است.Views : در این قسمت تمام کد های Present نرم افزار قرار دارند، در حقیقت کد های سمت کاربر (Client) و این به این معناست که دیگر نباید هیچ گونه کدی از سمت کلاینت در کد های سمت سرور ما باشد، معمولا در بخش View مجددا فایل ها دسته بندی میشوند، به طور مثال، View های مربوط به Athentication جدا هستند و یا View های مربوط به صفحه اصلی و به همین صورت.Controllers : اولین بخش پس از Router همین کنترلر هستش، تعداد زیادی کنترلر میتواند در نرم افزار ما وجود داشته باشد که هر یک از آنها مربوط به یک موجودیت (Entity) هستند، و کنترلر مثل یک پل میمونه میان Models و Views و وظیفه Interaction را میان اینها ایفا میکند.Requst pipeline or Requestما برای WebServer مشخص میکنیم که زمانی که ریکوئستی از سمت کاربر برایش آمد، هیچ کاری نکنه، و اون ریکوئست رو بده به یک فایلی که ما مشخص کردیم به نام، FrontController و این FrontController میاد و بخش Route ریکوئست (توی یکسری از فریم ورک ها بهش میگن Path ) میده به یک فایلی به نام Router.Route : بخش URL رو در نظر بگیرید، دامین سایت رو ازش جدا کنید، مقدار باقی مانده میشود Route، یا همون URI github.com/masoudharooni => URL github.com/ => Domain /masoudharooni => URI || Routeدر نرم افزار های MVC یک بخشی وجود دارد به نام Router که این روتر وظیفش مشخص کردن مسیر و هدفی است که ریکوئست برای آن زده شده است، روتر چگونه مسیر رو مشخص میکند؟! روتر ها لیستی دارند از مسیر ها و روت های نرم افزار ما که به آن Route Hub میگویند، و طبق آن مسیر ریکوئست را مشخص میکنند.Router طبق همون Route Hub مسیر را مشخص میکند، به طور مثال میگوید اگر روت برابر بود با "Login/" شما بورو داخل کنترلر AthenticationController و متد Login رو صدا بزن.Middleware : یه بخشی توی معماری MVC هست که شاید به اندازه سه بخش قبلی با اهمیت نباشد، ولی این هم از اهمیت بالایی برخوردار میباشد، این Middleware دقیقا چیه و چه کاری انجام میده؟!زمانی که روتر مقصد رو مشخص کرده، و ریکوئست به سمت کنترلر حرکت میکند، باید از یک واسط نرم افزاری بگذرد، این واسط نرم افزاری ما یا اجازه میدهد که ریکوئست به کنترلر برسه یا اجازه نمیدهد.توی خیلی از وب سایت ها دیدید که IP های مربوط به یکسری کشور های خاص بلاک شده، یعنی با اون IP نمیتونید وارد سایت بشید، دقیقا یک Middleware ست کردن و اسم کشور رو داخل بلک لیست قرار دادن، یا مثلا اگر شما بخواهید، کسی نتواند، با مرورگری جز کروم وارد وب سایتتون بشه، یک وایت لیست تشکیل میدید و یه Middleware براش ست میکنید و مشخص میکنید که هیچ مرور گری جز این مرورگری که در وایت لیست من وجود دارد نمیتواند به کنترلر دسترسی داشته باشد، یا میخواهید اگر در یک دقیقه بیشتر از 60 بار درخواست برای لاگین کردن به وب سایت آمد، اون IP رو بلاک کنید (این کار رو برای جلوگیری از حملات Brute force انجام میدهند. ) در تمام این کار ها، قبل از اینکه ریکوئست به کنترلر برسد و منابع نرم افزاری مارو درگیر کنه، جلو اون درخواست گرفته میشود.یا برای Static Caching هم میتوان از همین Middleware ها استفاده کرد، یعنی زمانی که Route یکسان بود و کش وجود داشت دیگه ریکوئست به کنترلر نمیرسد و منابع مارو مصرف نمیکند، یک فایل استاتیک برای کاربر رندر گرفته میشود، و این فرایند سرعت وب سات رو به طور اعجاب انگیزی افزایش میدهد.برای بحث Localisation هم استفاده میشود، تا به حال براتون پیش اومده که با VPN یک وب سایت رو باز کنید و اون وب سایت زبانش رو به زبان سرور VPN شما تغیر دهد؟ یک Middleware ست کردند و با استفاده از IP شما زبان وب سایت رو برای شما کاستومایز میکنند.خیلی ممنونم ازتون که تا اینجای مقاله رو مطالعه کردید، اگر براتون مقدور هست، لطفا مقاله رو لایک کنید و با دوستاتون به اشتراک بذارید.❤?خب بریم که با هم به چنتا سوال مهم در رابطه با MVC پاسخ بدیم.چه تغیراتی میتوان در ساختار معماری MVC داد ؟ببینید، این معماری اینجوری نیست که بگیم انعطاف پذیر نیست و فقط باید به همین شکل استفاده شود، ولی باید یک نکته ای رو مد نظر داشته باشید، اون هم اینه که تغیر و یا ایجاد یک معماری نرم افزار نیازمند تجربه و دانش بسیار زیاد است، که اگر این پارامتر هارو ندارید بهتره که این کارو انجام ندید.توی نرم افرار های MVC فقط همین 3 بخش وجود دارد؟!خیر، همانطور که دیدید ما یک مفهومی داشتیم به نام Middleware و این جدایی از سه بخش اصلی است، اینطوری نیست که بگویم اگر معماری ما mvc است دیگر نمیتوانیم بخش هایی جز 3 بخش اصلی داشته باشیم، میتوانیم بخش هایی برای Middleware ها و یا Entity ها و یا Servicec ها و . . . داشته باشیم.توی ساختار MVC حتما باید این 3 بخش اصلی وجود داشته باشد؟!خب مسلما این معماری از سه بخش اصلی Model , Views , Controller تشکیل شده، ولی همانطور که گفتیم انعطاف پذیر هم هست، فقط شما باید دانش مورد نیاز آن را داشته باشید.توی خیلی از نرم افزار ها، مانند وب سرویس ها، چون رابط کاربری وجود ندارد، دیگه بخش View رو ندارند و این وابطه به سیاست های نرم افزاری شماست.امیدوارم جواب سوالاتون رو گرفته باشید، اگر باز هم سوالی داشتید توی بخش کامنت ها بپرسید با هم بهشون میپردازیم.?❤

web API چیست و چرا باید ازش استفاد کنیم؟ چگونه باید یک web API بسازیم؟

مسعود هارونی — Sat, 05 Feb 2022 17:15:01 +0330
APIاگر وارد دنیای نرم افزار شده باشید ، قطعا تا الان واژه API به گوشتون خورده ، حالا این API که انقدر راجبش صحبت میشه و انقدر اهمیت داره ، چیه واقعا؟!?‍♂️API چیست ؟??واژه API مخفف کلمه Application Programming Interface است که اگر بخوایم ترجمش کنیم به زبان فارسی ، میشه رابط برنامه نویسی اپلیکیشن ( البته ترجمه اصطلاحات تخصصی برنامه نویسی کار درستی نیست ?).کوتاه ترین تعریفی که میشه از API داشت اینه : API یک رابطه بین دو نرم افزاره ، همین ، که اگر بخوام بیشتر توضیح بدم میتونم بگم این رابطه نرم افزاری ارتباط بین سرویس دهنده و سرویس گیرنده رو هم برقرار میکنه.سرویس گیرنده به چه کسی میگن؟!? درواقع سرویس گیرنده به تمام کسانی میگن که از API ما استفاده میکنن و به همین صورت سرویس دهنده هم به کسی میگویند که به سرویس گیرنده سرویس ارائه میدهد.منظورم از سرویس چیه؟! سرویس میتونه هر چیزی باشه به طور مثال : ارسال یک پیامک ، یا ارسال یک ایمیل ، یا ارسال شرایط آب و هوایی یک منطقه یا ارسال قیمت ارز و سکه و طلا یا . . . .چرا استفاده از API ضروری و حیاتیه؟!میخوام با طرح چنتا مثال ساده این موضوع رو براتون شفاف کنم ، پس با من باش??گوشی های موبایل ، امروزه تقریبا میشه گفت پراستفاده ترین دستگاها بین مردم هستن ، درسته؟!و داخل این گوشی ها ، اپلیکیشن های زیاده وجود داره که هر کدوم از این ها دیتا های خیلی زیادی رو بهمون نمایش میدن ، ما با این اپلیکیشن ها قیمت ارز ، طلا ، سکه ، دلار رو چک میکنیم ، شرایط جوی مناطق مختلف رو برسی میکنیم ، اخبار مطالعه میکنیم ، توی فروشگاه های اینترنتی مثل دیجی کالا خرید میکنیم و . . . آیا تمام این اطلاعاتی که ما توی گوشی موبایل خودمون میبینیم ، توی موبایل ما ذخیره شدند؟!اگر جوابتون بله بود باید بگم که اشتباه میکنید ، اینطور نیست ، ولی چرا؟!اگر قرار باشه تمام اطلاعاتی که ما ازشون استفاده میکنیم توی تلفن همراهمون باشه که باید یه حافظه خیلی خیلی زیادی داشته باشیم و خب آیا تمام مشکل ما کم بودن مقدار حافظست؟!خیر ، تصور کنید یه نرم افزار برای دیدن اخبار دانلود کردید و اون نرم افزار بیاد و تمام اخباری که تا اون روز ثبت شده را توی تلفن همراه شما ذخیره کنه و عملا دیگه اینجا نیازی به API نداره ، شاید با خودتون بگید خب اخبار های روز های آینده چی میشه ؟!بله دقیقا این مسئله ای بود که میخواستم راجبش صحبت کنم ، بروز بودن اطلاعات داخل نرم افزار برای ما حائز اهمیته و خب این کاریه که API برای ما انجام میده ، پس بریم که با هم یه نتیجه گیری کنیم ?✏دلایل استفاده از API و آشنایی با کاربرد های آن؟! همون طور که گفتیم یکی از دلایل اینه که داخل نرم افزار های موبایلی یا دسکتاپی ما نباید حافظه زیادی از دستگاه کاربر اشغال کنیم و از طرفی هم ، نیاز به استفاده از داده ها داریم ، پس از API استفاده میکنیم.دومین دلیل اینه که ما نیاز به دیتا های بروز داریم و خب عملا راهی جز استفاده از API نداریم.سومین دلیل: خودتون رو درحال توسعه یک نرم افزار تصور کنید ، به طور مثال این نرم افزار یک نرم افزار مدیریت بانک هستش ، توی این نرم افزار شما نیاز دارید که قیمت ارز هارو به صورت لحظه به لحظه داشته باشید ، توی این موقعیت راهی جز استفاده از API سریس هایی که قیمت ارزهارو ارائه میدن ندارید.در توسعه نرم افزار ها و اپلیکیشن های تحت وب نیز API کاربرد دارد ، چطور؟!برنامه نویس بک اند یک API رو برای نرم افزار توسعه میدهد و برنامه نویس فرانت اند با درخواست دادن به اون API به داده ها و دیتا ها دسترسی پیدا میکنه و به کاربر نمایش میدهد. (هرچند میتوان بدون توسعه API هم نرم افزار های تحت وب را توسعه داد ولی این رو مدیر پروژه با توجه به نیازمندی های پروژه مشخص میکنه که آیا نیازه API توسعه داده بشه یا خیر ، ولی با توسعه API اگر بخواهید نرم افزار هایی تحت پلتفر موبایل یا دسکتاپ برای وب سایت خود پیاده کنید دیگر مانعی نخواهید داشت.?)زمانی که از API استفاده میکنیم ، دقیقا چه اتفاقی میوفته؟!زمانی که شما از یک API استفاده میکنید ، این ارتباطی که این همه مدت راجبش صحبت کردم بین سرویس گیرنده ( که شما هستید) و سرویس دهنده (وب سریسی که شما از API ان استفاده میکنید ) تشکیل میشه و عملا شما میتونید از توابع و متد هایی که سرویس دهنده مشخص کرده داخل نرم افزار خودتون استفاده کنید ، اگر بخوایم عمیق تر بشیم ، درواقع شما به صورت مستقیم نمیتونید از توابع و متد های سرویس دهنده استفاده کنید بلکه شما با توجه به نیاز خودتون درخواستی به EndPintی که سرویس دهنده مشخص کرده میدهید و سرویس دهنده اطلاعاتی که شما نیاز داشتید رو تحت قالب JSON (اگر نمیدونی JSON چیه اینجا کیلیک کن) توی Respons براتون ارسال میکنه.( اصلا نگران نباشی الان تمام این هارو یه دور با هم مرور میکنیم ??)EndPoint چیه؟! به آدرسی میگن که سرویس دهنده مشخص کرده برای ارتباط و استفاده از API ، مثلا میگه مسعود ، اگر میخوای از API من استفاده کنی ، تا قیمت دلار رو بهت بدم به این آدرس ریکوئست بفرست : example.com/api/v1/dollarبه این آدرس EndPoint میگن ، Response هم اون پاسخی هست که از طرف وب سریس برای ما ارسال میشه به فرض ما میخواستیم با استفاده از سامانه پیامکی ، پیامکی ارسال کنیم ، با استفاده از API درخواست میفرستیم و در صورت موفق بودن ، وب سرویس به ما پاسخ میده که درخواست با موفقیت انجام شد ، به این ریسپانس ( Response ) میگویند.توسعه API در زبان های برنامه نویسی مختلف?این API که این همه راجبش صحبت کردیم چطوری توسعه داده میشه؟! به عکس ریز دقت کن.سیر تکامل روش های توسعه APIتوی عکس بالا سیرتکامل روش های توسعه API رو مشاهده میکنیم ،که میخوایم با هم تک تک برسیشون کنیم (من دیگه مخفف هر کدوم و یا سال تولدشون رو نمیگم چون توی تصویر هست) (چون توی ویرگول نمیشه اول خط کلمه انگلیسی نوشت من قبل از نوشتن هر کلمه انگلیسی یه "و" میذارم ، دیگه به بزرگی خودتون ببخشید❤)و RPC: با استفاده از RPC شما میتوانستید یک تابعی را از داخل یک سیستم دیگر که به شبکه متصل است صدا بزنید ولی خب یک سری مشکلات داشت که با هم برسیش میکنیم.و CORBA :یه مقدار که جلو تر رفتیم به خاطر نواقصی که RPC داشت CORBA متولد شد ، نرم افزار هایی که با هم کار میکردند ، همگن نبودند (یعنی سیستم عامل متفاوتی داشتند یا با زبان های برنامه نویسی متفاوتی دولوپ شده بودند) و همین دلیل باعث شد CORBA متولد شود و نواقص RPC را جبران کند.و SOAPخیلی سریع برای توسعه وب سرویس همه گیر شد و هنوز هم در شرایطی خاص استفاده میشه ، در واقع SOAP یک پروتکله که اگر بخواید با استفاده ازش وب سرویس توسعه بدید نسبت به REST و یا GraphQL که یک نوع معماری هستند خیلی سخت تر و پیچید تر است.و RESTتقریبا میشه گفت پر استفاده ترین معماری برای ساخت API همین REST هست ، REST بر خلاف SOAP یک معماری هست و کار باهاش نسبت به SOAP بسیار راحت تره ، REST یک معماری Client Server میباشد ، یعنی Server و Client به طور کامل از هم جدا هستند و سمت کلاینت فقط Call API انجام میده برای دریافت اطلاعات ، معماری REST یک Resource identifier هست یعنی Resource ها توسط URL مشخص میشوند (همون EndPoint خودمون)و GraphQLشرکت متا ( فیس بوک قدیم ) برای رفع نواقص REST این معماری رو خلق کرد ، که یک سری از نواقص REST رو پوشش میده ولی یک مقدار از REST پیچیده تره و فیچرهای جدیدی داره که REST اون هارو نداره ، به طور مثال شما توی GraphQL میتونید مشخص کنید که چه بخشی از اطلاعات رو میخواید مثلا اگر قراره اطلاعات کاربران که شامل اسم کاربر یا سن کاربر یا . . . است برای شما توی Response برگرده ، شما میتونید مشخص کنید که من فقط الان اسم کاربر رو نیاز دارم و دیگه بقیه اطلاعات براتون ارسال نشه ، ولی خب ما توی رست هم میتونیم با استفاده از یک سری ترفند ها یک فیچر رو پیاده سازی کنیم.⭐ این مقاله صرفا برای آشنایی شما بود ، توی مقالات بعدی با هم یه REST API کوچیک مینویسیم و درموردش گپ میزنیم.?⭐ امیدوارم این مقاله براتون مفید بوده باشه ، اگر به نظرتون مطالب مفیدی داخلش گفته شده ممنون میشم با بقیه برنامه نویسان هم به اشتراک بذارید تا با هم این کامیونیتی رو ارتقا بدیم??❤راه های ارتباطی با من : ??ایمیل ---- گیت هاب

پرتکرار ترین خطاهای برنامه نویسی

مسعود هارونی — Thu, 27 Jan 2022 23:18:32 +0330
Most Common Types of Erorrs in programmingحتی خیلی از کسانی که سال هاست در دنیای برنامه نویسی مشغول به کار هستند انواع ارور هارا نمیشناسند و همه آنهارا باگ خطاب میکنند ، که اینگونه نیست ، باگ ها هم نوعی از انواع خطا ها هستند که در ادامه با آنها آشنا میشویم.1 - خطا های قواعد نوشتاری ( Syntax Errors )زبان های برنامه نویسی هم مانند ، زبان انسان ( انگلیسی ، فارسی ، فرانسوی و . . . ) قواعد و قوانینی دارند که باید برای برقراری ارتباط با کامپیوتر به وسیله ی این زبان ها این قوانین را رعایت کنیم.برای مثال: در یک سری از زبان های برنامه نویسی زمانی که ما میخواهیم یک رشته ( String ) را چاپ کنیم ، از قاعده ی نوشتاری ( Syntax ) زیر استفاده میکنیم.print('Hello World!');اگر برای انجام این دستور ، تابع قوانین زبان برنامه نویسی خود نباشیم ، با یک ارور مواجه خواهیم شد به نام Syntax Error یا Parse Error که همان خطای قواعد نوشتاری میباشد.به طور مثال اینگونه بنویسیم : print('Hello World!') # semicolon is missing print('Hello World!); # single quotation isn't currect print('Hello World!"); pri("Hello World); and . . . .هنگامی که ما با چنین اروری مواجه میشویم ، کل برنامه متوقف میشود تا زمانی که مشکل برطرف شود.رعایت قواعد نوشتاری کاره دشواری نیست ، زیرا کامپایلر یا مفسر زبان برنامه نویسی ، خطای نوشتاری مارا به ما گوشزد و ما میتوانیم آن را اصلاح کنیم.2 - خطای منطقی (Logic Errors OR Bugs)خطای منطقی به خطایی میگویند که همه چیز از لحاظ نوشتاری صحیح میباشد ولی الگوریتم پیاده سازی نرم افزار مشکل دارد ، به طور مثال :شما نرم افزاری را دولوپ کرده اید ( توسعه داده اید) که قرار است 2 عدد را از کاربر گرفته و آنها را جمع کند : کاربر دو عدد 2 و 3 را به برنامه پاس میدهد ، به جای اینکه برنامه عدد 5 را بازگرداند ، عدد 6 را باز میگرداند ، هیچ خطایی وجود ندارد و برنامه صحیح کار کرده است ، ولی جواب منطقی نمیباشد زیرا حاصل ضرب اعداد را محاسبه کرده است در صورتی که ما انتظار حاصل جمع اعداد را داشتیم ، این یک مثال خیلی ساده بود از خطا های منطقی.Bug : قطعا تا الان کلمه ی باگ به گوشتون خورده ، باگ به همین خطا های منطقی یا Logic Error ها میگویند ، که به اشتباه خیلی از کسانی که تازه وارد دنیای برنامه نویسی میشوند به تمام خطا ها باگ میگویند.* در سال 1999 میلادی ، ناسا ، به دلیل یک باگه محاسباتی ( Logic Error || خطای منطقی ) یک فضا پیمارا از دست داد.3 - خطای کامپایل (Compilation Errors OR Compile Time Erorrs)برخی از زبان های برنامه نویسی کامپایلری هستند ( توی یه مقاله جدا تفاوت بین زبان های کامپایلری و مفسری رو توضیح میدم) یعنی توسط یک نرم افزار به نام کامپایلر کد های سطح بالایی ( کد سطح بالا به کدی میگویند که به زبان انسان (انگلیسی) نزدیک است) که ما نوشتیم را به کد سطح پایین ( کدی که به زبان ماشین (Binary Code ) نزدیک باشد) تبدیل میکنند تا کامپیوتر بتواند آنهارا متوجه شود و به دستورات ما عمل کند.این نوع خطا هنگام انجام فرایند کامپایل اتفاق میوفتد برای مثال ، زمانی که ما به یک Syntax Error برخورد میکنیم ، همزمان Compile Time Error نیز اتفاق میوفتد. (برای درک بیشتر این موضوع به مثال زیر توجه کنید) زمانی که ما کد زیر را کامپایل میکنیم : print('Hello World!'; کامپایلر به ما میگوید که این دستور برایش ناشناخته است و نمیتواند آن را به زبان ماشین تبدیل کند زیرا انتظار دارد که پرانتز هارا ببندید.4 - خطای محاسباتی (Arithmetic Errors) این خطا یکی از زیر مجموعه های خطا های منطقی (Logic Errors ) یا باگ ها است که مخصوص محاسبات میباشد.تقریبا میشه گفت معروف ترین Arithmetic Error خطای Division by Zero میباشد ، این خطا هنگامی رخ میدهد که ما یک عدد را تقسیم بر صفر کنیم ، همانطور که میدانید ، تقسیم بر صفر بینهایت است و ما انقدر حافظه نداریم که آن را ذخیره کنیم ، به همین دلیل با خطای Division by zero مواجه میشویم.در برخی از زبان های برنامه نویسی ثابتی (Constant) وجود دارد برای نمایش این مقدار به نام infinity.5 - خطای منبع (Resource Errors) زمانی که برنامه شما اجرا میشود ، کامپیوتر شما مقداره مشخص و معینی ، فضا به این برنامه اختصاص میدهد و اگر برنامه از این مقدار تجاوز کند با Resource Errors مواجه میشویم.اگر بخواهم مثالی از این نوع خطا برای شما بیاورم میتوانم به یک حلقه بینهایت (infinity loop) اشاره کنم :(حلقه بینهایت به حلقه ای میگویند که همیشه اجرا شود شرط حلقه همیشه برقرار باشد.)while(true){ print("Masoud Harooni"); }این حلقه هیچ گاه پایان نمی یابد به همین دلیل ، مقدار وحشتناکی از حافظه مارا اشغال میکند و با یک Resource error مواجه میشویم.6 - Interface Errorsتصور کنید که یک API دارید که زمانی که میخواهید از آن API استفاده کنید ، باید 3 تا آرگومان به آن پاس بدهید ولی تعداد آرگومان ها یا کمتر است یا بیشتر در این لحظه شما با Interface Errors مواجه خوهید شد.امیدوارم این مقاله براتون مفید بوده باشه ، ممنون میشم مشکلات و نواقصم را برام کامنت کنید تا در کنار هم پیشرفت کنیم?‍♂️?❤ایمیل : اگر چیزی رو میخواستید مطرح کنید در رابطه با مقاله از این ایمیل میتونیم با هم در ارتباط باشیم.?به امید موفقیت تک تکتون?

جیسون چیست و چه کاربردی دارد؟ ( به همراه مثال عملی از اسنپ ??)

مسعود هارونی — Thu, 27 Jan 2022 17:28:03 +0330
JSONکلمه JSON مخفف کلمه JavaScript Object Notation هست ، در واقع جیسون (JSON) یک Object جاوا اسکیریپت می باشد که برای ذخیره دیتا و یا انتقال آن استفاده میشود ، جیسون خیلی حجم کمی دارد و به اصطلاح میگویند Light weigh هستش ، جیسون خوانایی بالایی هم دارد در واقع (Human-Readable) هست که میشه گفت یک راه راتباطی استاندارد (Communicate Standard) بین دستگاه های مختلف میباشد.قبل از اینکه JSON به یک استاندار تبدیل بشه از XML که مخفف (Extensible Markup Language) است استفاده میشد ، که یک زبان نشانه گذاریه ، مانند HTML (HyperText Markup Language) ، ولی مانند HTML تگ ها از پیش تعریف نشده اند و شما با توجه به نیاز خود تگ تعریف میکنید ، XML علاوه بر اینکه یک زبانه نشانه گذاری میباشد ، یک فورمت فایل برای ذخیره داده ها و انتقال و تبادل آنها میان دستگاه های مختلف نیز میباشد.جالب است بدانید که ، MongoDB که یک دیتا بیس (DBMS = DataBaseManagementSystem) NoSql هست برای ذخیره داکیومنت های خود در Collection ها از فرمتی به نام Bson استفاده میکند که شباهت زیادی با جیسون دارد.JSON VS XMLتفاوت های تکنیکال میان JSON و XML : 1 - همانطور که میدانیم XML یک زبانه نشانه گذاریه ، ولی JSON یک فرمت فایل برای ذخیره و یا ارسال داده میان قسمت های مختلف یک دستگاه یا دستگاه های متفاوت میباشد.2 - برای ما برنامه نویسان اهمیت زیادی دارد ، تکنولوژیی که استفاده میکنیم از لحاظ حجم ، سبک باشد و حافظه کمتری اشغال کند ، چون طبیعتا هرچه نرم افزار ما سبک تر باشه سرعت اجرای بالاتری نیز خواهد داشت و JSON نسبت به XML خیلی سبک تر میباشد و سرعت اجرای بالاتری نیز دارد.3 - جیسون ( JSON ) برپایه زبان برنامه نویسه جاوا اسکیریپته و XML برپایه SGML.4 - جیسون ( JSON) برای یادگیری خیلی راحت تر و قابل فهم تر از XML میباشد زیرا به زبان انسان (انگلیسی) نزدیک تر است و خوانایی بالاتری نیز دارد ، در واقع Human-Readable تر هست.5 - جیسون از آرایه ها ( آرایه ها یک نوع ، داده هست که در زبان های برنامه نویسی استفاده میشود برای ذخیره و نگهداری چندین مقدار ) پشتیبانی میکند ولی XML چنین ، توانایی را ندارد.6 - امنیت XML از JSON بیشتر است ولی این مقدار ، مقداره قابل توجهی نمیباشد.7 - جیسون ( JSON) فقط از متن ( Text ) ، اعداد ، و دیتا تایپ ها ( انواع داده هستند در زبان های برنامه مانند اعداد صحیح (integer) و یا رشته ها ( به مجموعه کاراکتر هایی که پشت سر هم قرار میگیرند یک رشته میگوند )(String ) و . . . ) پشتیبانی میکند ولی XML علاوه بر تمام مواردی که JSON پشتیبانی میکند ، از عکس ها ، نمودار ها و . . . پشتیبانی میکند.مثال های عملی : رسیدیم به بخش جذاب این مقاله یعنی مثال های عملی درباره این دو تکنولوژی ، در چندین مثال عملی میخوایم با هم تفاوت میان این دو تکنولوژی را برسی کنیم.اول از همه با یک مثال خیلی ساده شروع میکنیم : '{"name":"Masoud", "age": 17, "car":null}'این یک متنه خیلی ساده تحت قالب جیسون هست ، که ماننده آرایه ها دارای index و value میباشد ، این متن جیسون حاوی 3 عنصر است که اطلاعات یک فرد با نام مسعود و سن 17 را نمایش میدهد که ماشین ندارد ( null یک نوع دیتا تایپ هست در زبان های برنامه نویسی ---- برای اطلاعات بیشتر اینجا کلیک کنید )بریم سراغ یک مثال دیگه :در این مثال ما میخوایم از یک شرکت اطلاعات کارمندانش را تحت قالب JSON دریافت کنیم : {"employees":[ { "firstName":"Parsa", "lastName":"Rezaee" }, { "firstName":"Ahmad", "lastName":"Mozaffary" }, { "firstName":"Masoud", "lastName":"Harooni" } ]}اول و آخر متنی که تحت قالب JSON است ، باید آکولاد (Curly Bracket) باشد ، در واقع یک متنه جیسون با آکولاد شروع و تمام میشود.جیسون را ماننده یک آرایه تصور کنید ، ما میتوانیم آرایه های چند بعدی داشته باشیم ( آرایه ی چند بعدی ، به آرایه ای میگویند که داخل خود مجددا آرایه ای داشته باشد ) در جیسون هم چنین ساختاری برقرار است.اگر بخواهیم در یک جیسون ، جیسونی دیگر داشته باشیم ، از یک [ ] ( Square Brackets ) استفاده میکنیم که مشخص کنیم میخواهیم مجددا جیسونی بنویسیم.چند مثال عملی با XML : Ali Ahmadi Ali Ahmadi Ali Ahmadi همانطور که میبینید ، جیسون خیلی تعداد خطوط کمتری نسبت به XML دارد و برای یادگیری قابل فهم تر و راحت تر است.Snappیک مثال کاملا کاربردی از شرکت اسنپ برای درک بهتر موضوع :هنگامی که شما ، از سرویس تاکسی رانی اسنپ استفاده میکنید ، یک مقعیت مکانی را برای مبدا سفر و دیگری را برای مقصد سفر خود ، انتخواب میکنید.نام ، نام خوانوادگی ، عکس پروفایل ، شماره تلفن همراه ، زمان درخواست ماشین و . . . تحت قالب جیسون برای سرور های شرکت اسنپ ارسال میشه و طبق الگوریتم هایی که از پیش تایین کردند برای انتخاب راننده ، برای شما یک راننده انتخاب میکنند و مجددا ، اطلاعات راننده ، تحت قالب جیسون برای شما ارسال میشود و شما میتوانید آنها را در تلفن همراه خود مشاهده کنید.امیدوارم این مقاله براتون مفید بوده باشه و تونسته باشم کمکی به کامیونیتی برنامه نویسان ایرانی کرده باشم ، اگر سوالی داشتید میتونید سوالتون رو برام ایمیل کنید تا با هم دربارش گپ بزنیم : راه ارتباطی با من ??‍♂️