https://virgool.io/feed/@saeed_abdollahi میلیون‌ها کیلومتر اسکرول کردم تا به هدفم نزدیک بشم و این داستان همچنان ادامه داره... fa 2026-04-14 17:56:06 https://files.virgool.io/upload/users/2904076/avatar/wtHgtS.jpg?height=120&width=120 https://virgool.io/@saeed_abdollahi https://virgool.io/@saeed_abdollahi/%D9%86%D9%82%D8%B4-bpm-bpmn-%D9%88-bpms-%D8%AF%D8%B1-%D8%AA%D8%AD%D9%88%D9%84-%D8%AF%DB%8C%D8%AC%DB%8C%D8%AA%D8%A7%D9%84-%D9%86%D8%A6%D9%88%D8%A8%D8%A7%D9%86%DA%A9-%D9%87%D8%A7-%D8%A8%D8%A7-%D8%AA%D9%85%D8%B1%DA%A9%D8%B2-%D8%A8%D8%B1-%D9%86%D8%A6%D9%88%D8%A8%D8%A7%D9%86%DA%A9-%D9%81%D8%B1%D8%A7-%D8%B1%D9%81%D8%A7%D9%87-ktmdxsrwzjp3 تحول دیجیتال در صنعت بانکداری ایران، تنها به دیجیتالی کردن خدمات خلاصه نمی‌شود؛ بلکه نیازمند بازنگری در فرآیندهای بانکی، ساده‌سازی عملیات، و بهبود تجربه‌ی کاربر است.در این مسیر، نئوبانک‌هایی مانند «فرا رفاه» با تکیه بر فناوری‌های نوین، در حال بازطراحی ساختارهای سنتی بانکی‌اند.سه مفهوم کلیدی یعنی (BPM) مدیریت فرآیندهای کسب‌وکار، (BPMN) مدل‌سازی فرآیندها، (BPMS) سامانه‌های مدیریت فرآیند، ستون‌های اصلی این تحول به شمار می‌روند.1. مدیریت فرآیندهای کسب‌وکار (BPM) در نئوبانک‌ها BPMیا Business Process Management یعنی رویکردی ساخت‌یافته برای شناسایی، طراحی، اجرا، و بهبود مداوم فرآیندهای سازمانی.در بانکداری دیجیتال، BPM کمک می‌کند تا سرویس‌ها به‌صورت خودکار، شفاف و کاربرمحور ارائه شوند.در نئوبانک فرا رفاه، این مفهوم در فرآیندهایی مانند:· افتتاح حساب غیرحضوری،· احراز هویت دیجیتال· پرداخت اقساط و تسهیلات آنلاینبه‌کار گرفته شده‌است.به‌جای فرم‌های کاغذی و مراجعات حضوری، فرآیندها بازطراحی شده‌اند تا کاربر فقط با چند مرحله در اپلیکیشن بتواند کار بانکی خود را انجام دهد.این همان جوهره‌ی BPM است: کاهش پیچیدگی، افزایش سرعت، و بهبود تجربه‌ی مشتری.2. مدل‌سازی فرآیندها با BPMN BPMN (Business Process Model and Notation) زبان تصویری استانداردی است که برای نمایش مراحل انجام کار استفاده می‌شود.در نئوبانک‌ها، BPMN کمک می‌کند تا تیم‌های فنی، تحلیلگران و مدیران به‌صورت مشترک یک نقشه‌ی واضح از جریان خدمات داشته باشند.برای مثال، در فرآیند احراز هویت دیجیتال در فرا رفاه، مدل BPMN می‌تواند شامل این مراحل باشد:· کاربر وارد اپلیکیشن می‌شود (رویداد آغازین)· مدارک هویتی را آپلود می‌کند (فعالیت)· سیستم مدارک را بررسی می‌کند (فعالیت سیستمی)· اگر اطلاعات صحیح بود، حساب فعال می‌شود؛ در غیر این صورت به کاربر پیام خطا داده می‌شود (دروازه تصمیم)این مدل به توسعه‌دهندگان کمک می‌کند تا دقیقاً بدانند هر گام در چه شرایطی اجرا می‌شود و چه داده‌هایی بین سیستم‌ها ردوبدل می‌شوند.3. سامانه‌های مدیریت فرآیندهای کسب‌وکار (BPMS)BPMS (Business Process Management System) نرم‌افزاری است که اجرای واقعی فرآیندها را ممکن می‌سازد.در نئوبانک‌ها، BPMS مغز متفکر پشت‌صحنه است که جریان‌های کاری را خودکارسازی و پایش می‌کند.در فرا رفاه، BPMS می‌تواند نقش مهمی در:v هدایت درخواست‌های کاربران (مثل افتتاح حساب، تسهیلات یا انتقال وجه)v اتصال بین سامانه‌های مختلف بانک (احراز هویت، سوابق حساب، اعتبارسنجی)v و نظارت بر زمان پاسخ‌دهی سیستم‌هاایفا کند.به کمک BPMS ، بانک می‌تواند در لحظه بداند که هر درخواست در چه مرحله‌ای است، چه زمانی انجام می‌شود، و آیا نیاز به مداخله انسانی دارد یا نه.این قابلیت باعث کاهش خطا، افزایش شفافیت، و تصمیم‌گیری سریع‌تر مدیران می‌شود.4. تفاوت BPM، BPMN و BPMSمفهومتوضیحکاربرد در نئوبانکBPMرویکرد مدیریتی برای بهبود فرآیندهابهینه‌سازی مسیر خدمات دیجیتالBPMNزبان تصویری برای مدل‌سازی فرآیندهاطراحی نقشه‌ی دقیق سرویس‌ها (مثل احراز هویت)BPMSنرم‌افزار اجرای فرآیندهاکاربرد در نئوبانک5. مزایای پیاده‌سازی BPM در فرا رفاهاجرای مدیریت فرآیندها در نئوبانک فرا رفاه منجر به:· کاهش زمان ارائه خدمات (از چند روز به چند دقیقه)· کاهش نیاز به نیروی انسانی در عملیات تکراری· یکپارچگی بین سیستم‌ها (احراز هویت، اعتبارسنجی، پرداخت و...)· افزایش رضایت مشتری با تجربه‌ای سریع، ساده و امنبه‌طور کلی، فرا رفاه با تکیه بر اصول BPM و استفاده از BPMS، موفق شده است بانکداری دیجیتال را از سطح خدمات آنلاین به سطح مدیریت هوشمند فرآیندهای بانکی ارتقا دهد.نتیجه‌گیرینئوبانک‌ها برای موفقیت در فضای رقابتی امروز باید علاوه ‌بر فناوری‌های جدید، به مدیریت علمی فرآیندهای داخلی خود توجه ویژه داشته باشند.سه‌گانه‌ی BPM، BPMN و BPMS ابزارهایی هستند که این تحول را ممکن می‌سازند.در نهایت، BPM فلسفه‌ی مدیریت کاراست، BPMN زبان ارتباطی بین انسان و سیستم است، و BPMS موتور هوشمند اجرای فرآیندها.نئوبانک فرا رفاه با به‌کارگیری این سه رکن، گامی مؤثر در جهت تحول دیجیتال واقعی و ارائه‌ی تجربه‌ی بانکی نسل جدید برداشته است. سعید عبدالهی سعید عبدالهی Mon, 10 Nov 2025 21:42:47 +0330 https://virgool.io/@saeed_abdollahi/%D9%85%D8%AF%DB%8C%D8%B1%DB%8C%D8%AA-%D9%81%D8%B1%D8%A2%DB%8C%D9%86%D8%AF-%DA%A9%D8%B3%D8%A8-%D9%88%DA%A9%D8%A7%D8%B1-bpm-%D8%A8%D8%A7-%D8%AA%D8%A3%DA%A9%DB%8C%D8%AF-%D8%A8%D8%B1-%D8%B3%D8%A7%D9%85%D8%A7%D9%86%D9%87-%D9%87%D8%A7%DB%8C-%D8%AF%DB%8C%D8%AC%DB%8C%D8%AA%D8%A7%D9%84-%D8%A8%D8%A7%D9%86%DA%A9-%D8%B1%D9%81%D8%A7%D9%87-%DA%A9%D8%A7%D8%B1%DA%AF%D8%B1%D8%A7%D9%86-%D9%81%D8%B1%D8%A7-%D8%B1%D9%81%D8%A7%D9%87-%D9%88-%D9%85%D9%88%D8%A8%D8%A7%DB%8C%D9%84-%D8%A8%D8%A7%D9%86%DA%A9-%D8%B1%D9%81%D8%A7%D9%87-tdupwdrb4rpj در دنیای رقابتی امروز، سازمان‌ها برای بقا و رشد پایدار ناگزیر از بهبود مستمر فرآیندهای کاری خود هستند.در این میان، مدیریت فرآیند کسب‌وکار (Business Process Management - BPM) به‌عنوان یکی از رویکردهای مؤثر در ارتقای بهره‌وری، چابکی و رضایت مشتری، نقش اساسی ایفا می‌کند.بانک رفاه کارگران به‌عنوان یکی از بانک‌های پیشرو کشور، در سال‌های اخیر با توسعه‌ی سامانه‌های هوشمند نظیر «فرا رفاه» و «موبایل بانک رفاه» گام‌های بلندی در مسیر دیجیتالی‌سازی فرآیندهای بانکی برداشته است.اجرای صحیح مدیریت فرآیند کسب‌وکار در این سامانه‌ها باعث شده تا بسیاری از خدمات بانکی به‌صورت یکپارچه، سریع و کاربرپسند در اختیار مشتریان قرار گیرد.تعریف مدیریت فرآیند کسب‌وکارمدیریت فرآیند کسب‌وکار مجموعه‌ای از روش‌ها، ابزارها و تکنیک‌هایی است که برای شناسایی، مدل‌سازی، طراحی، اجرا، تحلیل و بهبود فرآیندهای سازمانی به کار می‌رود.هدف BPM این است که فرآیندهای کاری به‌گونه‌ای سازماندهی شوند که ضمن افزایش کارایی، با اهداف استراتژیک سازمان نیز هم‌راستا باشند.به بیان ساده‌تر:BPM یعنی "بررسی کنیم هر کار در سازمان چطور انجام می‌شود، آن را تحلیل کنیم و سپس آن را بهتر و هوشمندانه‌تر انجام دهیم." اهداف مدیریت فرآیند کسب‌وکار· افزایش بهره‌وری و کاهش هزینه‌ها· کاهش زمان انجام خدمات· افزایش رضایت مشتریان· یکپارچگی بین بخش‌های مختلف سازمان· بهبود کنترل و نظارت بر عملکرددر حوزه‌ی بانکداری، این اهداف به‌طور مستقیم در کیفیت خدمات دیجیتال و سرعت پاسخگویی به مشتریان تأثیرگذار است.مراحل اصلی مدیریت فرآیند کسب‌وکارفرآیند BPM شامل چند مرحله‌ی متوالی و چرخه‌ای است. در این مقاله، چهار مرحله‌ی اصلی شامل شناسایی، مدل‌سازی، طراحی و تحلیل مورد بررسی قرار می‌گیرد.1. شناسایی فرآیندها (Process Identification)در این مرحله، ابتدا باید فرآیندهای کلیدی سازمان شناسایی و فهرست شوند.هدف این است که بدانیم در سازمان چه فرآیندهایی انجام می‌شود و کدام‌یک از آن‌ها بیشترین اهمیت یا مشکل را دارند.v نمونه در بانک رفاه:در سامانه‌ی فرا رفاه فرآیندهایی مانند "درخواست تسهیلات"، "پرداخت قبوض"، "مشاهده وضعیت حساب‌ها" و "مدیریت اقساط" از جمله فرآیندهای اصلی محسوب می‌شوند.در موبایل بانک رفاه نیز فرآیندهایی همچون "انتقال وجه"، "استعلام موجودی" و "پرداخت اقساط" جزو فرآیندهای پرتکرار و حیاتی هستند.با شناسایی این فرآیندها، می‌توان مشخص کرد کدام بخش‌ها نیاز به بهبود یا خودکارسازی دارند. 2. مدل‌سازی فرآیند (Process Modeling)پس از شناسایی، باید جریان انجام کارها به‌صورت مدل‌های تصویری ترسیم شود تا همه‌ی اعضای سازمان، از مدیران تا تحلیل‌گران، درک مشترکی از آن داشته باشند.برای این کار از استانداردهایی مانند BPMN (Business Process Model and Notation) استفاده می‌شود.برای مثال:مدل‌سازی فرآیند "پرداخت قبض" در موبایل بانک رفاه می‌تواند شامل مراحل زیر باشد:1. ورود کاربر به سیستم2. انتخاب گزینه پرداخت قبض3. وارد کردن شناسه قبض و پرداخت4. بررسی و تأیید اطلاعات5. انجام تراکنش و نمایش رسید پرداختنمایش این مراحل در قالب نمودار BPMN باعث می‌شود گلوگاه‌ها و نقاط ضعف (مانند تأخیر در تأیید تراکنش یا خطای کاربر) به‌راحتی شناسایی شوند. 3.طراحی و بهبود فرآیند (Process Design / Improvement)در این مرحله، فرآیند موجود بازطراحی می‌شود تا به شکل بهینه‌تری اجرا شود.هدف، حذف کارهای تکراری، ساده‌سازی مراحل و دیجیتالی‌سازی فعالیت‌ها است.v مثال از فرا رفاه:در گذشته، بررسی مدارک برای دریافت تسهیلات نیازمند مراجعه حضوری بود.با طراحی جدید فرآیند در فرا رفاه، کاربران می‌توانند مدارک خود را به‌صورت آنلاین بارگذاری و وضعیت درخواستشان را لحظه‌ای پیگیری کنند.این بازطراحی باعث کاهش مراجعات حضوری، صرفه‌جویی در زمان و رضایت بیشتر مشتریان شده است.v مثال از موبایل بانک:در طراحی جدید فرآیند "انتقال وجه"، گزینه‌ی «انتقال مکرر» اضافه شده تا مشتری بتواند انتقال‌های دوره‌ای خود را به‌صورت خودکار انجام دهد.این تغییر کوچک، نتیجه‌ی تحلیل فرآیند قبلی و شناخت نیاز واقعی کاربران بوده است. 4. تحلیل فرآیند (Process Analysis)در این مرحله، عملکرد فرآیندها مورد ارزیابی و اندازه‌گیری قرار می‌گیرد تا نقاط ضعف یا فرصت‌های بهبود مشخص شوند.تحلیل فرآیند معمولاً با استفاده از داده‌های واقعی و شاخص‌های عملکرد (KPI) انجام می‌شود.شاخص‌های معمول تحلیل در سامانه‌های بانکی:Ø زمان متوسط انجام تراکنشØ نرخ خطای کاربرانØ تعداد تراکنش‌های موفق روزانهØ سطح رضایت مشتریان از تجربه کاربری v نمونه در بانک رفاه:با تحلیل داده‌های موبایل بانک، مشخص شده که کاربران در ساعات خاصی از روز (مانند ۸ تا ۱۰ شب) بیشترین میزان استفاده را دارند.این اطلاعات به تیم فنی کمک می‌کند تا زیرساخت سرور در آن ساعات تقویت شود و از کندی سیستم جلوگیری گردد.در فرا رفاه نیز، تحلیل داده‌های مربوط به فرآیند "درخواست وام" نشان داده که کاربران بیشترین زمان را در مرحله‌ی «بارگذاری مدارک» صرف می‌کنند.بر اساس این تحلیل، رابط کاربری آن بخش بازطراحی شده تا فرآیند ساده‌تر و سریع‌تر شود. نقش BPM در تحول دیجیتال بانک رفاهاجرای مدیریت فرآیند کسب‌وکار در بانک رفاه باعث شده تا:· خدمات به‌صورت یکپارچه از طریق فرا رفاه و موبایل بانک ارائه شوند.· فرآیندهای زمان‌بر مانند «بررسی تسهیلات» و «پرداخت قبوض» کاملاً دیجیتال شوند.· گزارش‌گیری دقیق و لحظه‌ای از عملکرد سامانه‌ها امکان‌پذیر شود.در نتیجه، BPM نه‌تنها بهره‌وری سازمان را افزایش داده، بلکه تجربه‌ی مشتریان بانک را نیز به‌طور قابل‌توجهی بهبود بخشیده است.نتیجه‌گیریمدیریت فرآیند کسب‌وکار (BPM) ابزاری کلیدی برای سازمان‌هایی است که به دنبال چابکی، کارایی و رضایت مشتری هستند.در بانک رفاه کارگران، اجرای اصول BPM در پلتفرم‌هایی مانند فرا رفاه و موبایل بانک رفاه، نقش مهمی در دیجیتالی‌سازی خدمات، کاهش هزینه‌ها و ارتقای کیفیت تجربه‌ی کاربر داشته است.با تداوم این رویکرد و بهره‌گیری از تحلیل داده‌ها و فناوری‌های نوین، بانک رفاه می‌تواند به الگویی در زمینه‌ی تحول دیجیتال و بهبود مستمر فرآیندهای بانکی در کشور تبدیل شود. سعید عبدالهی سعید عبدالهی Sun, 09 Nov 2025 22:47:58 +0330 https://virgool.io/@saeed_abdollahi/%D8%B1%D9%88%D8%B4-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%AF%DB%8C-%D8%AA%D8%AD%D9%84%DB%8C%D9%84-%D9%86%DB%8C%D8%A7%D8%B2%D9%85%D9%86%D8%AF%DB%8C-%D9%87%D8%A7%DB%8C-%D9%86%D8%B1%D9%85-%D8%A7%D9%81%D8%B2%D8%A7%D8%B1-%D8%A8%D8%A7-%D8%AA%D8%A3%DA%A9%DB%8C%D8%AF-%D8%A8%D8%B1-%D9%BE%D8%B1%D9%88%DA%98%D9%87-%D9%87%D8%A7%DB%8C-%D8%A8%D8%A7%D9%86%DA%A9%DB%8C-%D9%88-%D8%B3%D8%A7%D9%85%D8%A7%D9%86%D9%87-%D9%81%D8%B1%D8%A7-%D8%B1%D9%81%D8%A7%D9%87-s1nogx1vybt5 در دنیای امروز که فناوری اطلاعات نقش اساسی در رشد و بهبود عملکرد سازمان‌ها دارد، طراحی و توسعه‌ی نرم‌افزارهای دقیق و کارآمد به یک ضرورت تبدیل شده است.یکی از مهم‌ترین مراحل در چرخه‌ی توسعه‌ی نرم‌افزار، تحلیل نیازمندی‌ها(Software Requirements Analysis) است.این مرحله به‌منزله‌ی زیربنای موفقیت پروژه محسوب می‌شود، زیرا تمام تصمیمات طراحی، توسعه و تست بر پایه‌ی درک صحیح از نیازهای کاربران و سازمان شکل می‌گیرد.در سازمان‌های بزرگ مانند بانک رفاه کارگران، که سامانه‌های متنوعی همچون «فرا رفاه» برای ارائه‌ی خدمات دیجیتال بانکی ایجاد شده‌اند، اهمیت تحلیل دقیق نیازمندی‌ها دوچندان است.در چنین محیط‌هایی، کوچک‌ترین خطا در تعریف نیازها می‌تواند منجر به اتلاف منابع، نارضایتی کاربران و کاهش اعتماد مشتریان شود. تعریف و اهمیت تحلیل نیازمندی‌هاتحلیل نیازمندی‌های نرم‌افزار فرآیندی است برای شناخت، جمع‌آوری، مستندسازی و اعتبارسنجی نیازهای کاربران، ذی‌نفعان و سازمان، به‌منظور اطمینان از اینکه نرم‌افزار نهایی دقیقاً مطابق با انتظارات طراحی و پیاده‌سازی شود.در واقع، این فرآیند به پرسش‌های زیر پاسخ می‌دهد:· کاربر چه می‌خواهد؟· سیستم باید چه کاری انجام دهد؟· چه محدودیت‌هایی در محیط واقعی وجود دارد؟در حوزه‌ی بانکی، این نیازمندی‌ها می‌توانند شامل مواردی نظیر «امنیت تراکنش‌ها»، «سهولت استفاده در اپلیکیشن‌ها»، «یکپارچگی داده‌ها» و «دقت در پردازش عملیات مالی» باشند. مراحل روش کاربردی تحلیل نیازمندی‌هافرآیند تحلیل نیازمندی‌ها را می‌توان به پنج گام کلیدی تقسیم کرد. هر گام با هدف مشخصی انجام می‌شود و مجموع آن‌ها تصویری روشن از نیاز واقعی پروژه ارائه می‌دهد.1. جمع‌آوری نیازمندی‌ها (Requirements Elicitation)در این مرحله، تحلیل‌گر با استفاده از روش‌های گوناگون مانند مصاحبه، پرسشنامه، مشاهده‌ی رفتار کاربران، جلسات کارگاهی و تحلیل مستندات موجود، نیازهای کاربران و ذی‌نفعان را استخراج می‌کند.به‌عنوان مثال، در توسعه‌ی سامانه‌ی «فرا رفاه»، می‌توان با انجام مصاحبه با مشتریان و کارمندان بانک، نیازهایی مانند «امکان مشاهده‌ی وضعیت تسهیلات»، «مدیریت اقساط» و «پرداخت‌های سریع» را شناسایی کرد.2. تحلیل و طبقه‌بندی نیازمندی‌ها (Analysis & Classification)پس از جمع‌آوری، نیازها باید بررسی، اولویت‌بندی و دسته‌بندی شوند.نیازمندی‌ها معمولاً به دو گروه اصلی تقسیم می‌شوند:نیازمندی‌های کارکردی :(Functional) مشخص می‌کنند نرم‌افزار چه کاری انجام می‌دهد.مثال: «کاربر بتواند از طریق اپلیکیشن فرا رفاه، صورت‌حساب خود را مشاهده کند.»نیازمندی‌های غیرکارکردی :(Non-Functional) مشخص می‌کنند نرم‌افزار چگونه کار می‌کند.مثال: «سیستم باید اطلاعات را در کمتر از ۳ ثانیه بازیابی کند»در سیستم‌های بانکی، شفافیت در تفکیک این دو نوع نیاز، مانع از ابهام در طراحی و اجرا می‌شود.3. مدلسازی نیازمندی‌ها (Modeling Requirements)در این مرحله، نیازمندی‌ها به‌صورت تصویری و ساختاریافته نمایش داده می‌شوند تا روابط بین اجزای سیستم بهتر درک شود.ابزارهای رایج در این بخش شامل نمودارهای Use Case، نقشه‌ی تجربه‌ی کاربر(User Journey Map) است.به‌طور مثال، در فرا رفاه، می‌توان فرآیند «پرداخت قبض» را در قالب یک Use Case نشان داد که مراحل ورود کاربر، انتخاب قبض، تأیید و پرداخت را نمایش می‌دهد.4. مستندسازی نیازمندی‌ها (Requirements Documentation)پس از مدل‌سازی، تمام نیازها در قالب سندی به نام مشخصات نیازمندی‌های نرم‌افزار (SRS: Software Requirements Specification) نوشته می‌شوند.این سند شامل توصیف کامل ویژگی‌ها، محدودیت‌ها، معیارهای پذیرش و روابط بین اجزای سیستم است.در پروژه‌های بانکی، مستندسازی دقیق کمک می‌کند تا در مراحل توسعه، امنیت داده‌ها و الزامات قانونی (مانند مقررات بانک مرکزی) رعایت شوند.5. تأیید و بازبینی نیازمندی‌ها (Validation & Review)در گام نهایی، نیازمندی‌های ثبت‌شده با حضور کاربران نهایی، مدیران پروژه و تیم فنی بازبینی می‌شوند تا از درستی و کامل بودن آن‌ها اطمینان حاصل شود.هدف این مرحله، کاهش خطا قبل از ورود به طراحی و توسعه‌ی نرم‌افزار است.در پروژه‌هایی مثل فرا رفاه، تأیید نهایی نیازها از سوی تیم‌های بانکی و فناوری، تضمین می‌کند که محصول نهایی هم از نظر فنی و هم از نظر تجربه‌ی کاربر، کارآمد باشد. چالش‌ها و نکات کلیدی در تحلیل نیازمندی‌های بانکیتحلیل نیازمندی‌ها در سامانه‌های مالی و بانکی با چالش‌هایی همراه است، از جمله:· حساسیت بالای امنیت و محرمانگی داده‌ها· پیچیدگی فرآیندهای بانکی· نیاز به رعایت مقررات نظارتی· تنوع کاربران (از مشتریان خرد تا کارکنان شعب)برای غلبه بر این چالش‌ها، استفاده از روش‌های Agile در کنار تحلیل سنتی، بازبینی مستمر نیازها و تعامل مداوم با کاربران پیشنهاد می‌شود. نتیجه‌گیریتحلیل نیازمندی‌های نرم‌افزار، مرحله‌ای حیاتی در چرخه‌ی توسعه‌ی سیستم‌های اطلاعاتی است.در بانک رفاه و زیرمجموعه‌هایی مانند فرا رفاه، اجرای دقیق این فرآیند منجر به تولید سامانه‌هایی می‌شود که هم از نظر فنی پایدار و ایمن‌اند و هم از نظر تجربه‌ی کاربر، رضایت‌بخش.یک تحلیل‌گر موفق باید بتواند بین نیازهای کاربر و الزامات سازمان تعادل برقرار کند و با بهره‌گیری از ابزارهای مدرن تحلیل، مسیر توسعه‌ی نرم‌افزار را شفاف، هدفمند و کارآمد سازد. سعید عبدالهی سعید عبدالهی Sun, 09 Nov 2025 21:31:32 +0330 https://virgool.io/@saeed_abdollahi/%D9%85%D8%AA%D8%AF%D9%88%D9%84%D9%88%DA%98%DB%8C-%D9%87%D8%A7%DB%8C-%D8%AA%D9%88%D8%B3%D8%B9%D9%87-%D9%86%D8%B1%D9%85-%D8%A7%D9%81%D8%B2%D8%A7%D8%B1-%D9%86%DA%AF%D8%A7%D9%87%DB%8C-%D8%AC%D8%A7%D9%85%D8%B9-%D8%A8%D9%87-%D8%B1%D9%88%D8%B4-%D9%87%D8%A7%DB%8C-%D8%A7%D8%B5%D9%84%DB%8C-%D9%85%D8%AF%DB%8C%D8%B1%DB%8C%D8%AA-%D9%BE%D8%B1%D9%88%DA%98%D9%87-%D9%87%D8%A7%DB%8C-%D9%86%D8%B1%D9%85-%D8%A7%D9%81%D8%B2%D8%A7%D8%B1%DB%8C-r0hzen06egru در دنیای پویا و پرشتاب فناوری، انتخاب متدولوژی مناسب توسعه نرم‌افزار یکی از عوامل کلیدی در موفقیت پروژه‌های نرم‌افزاری است.متدولوژی‌ها در واقع چارچوب‌ها و فرآیندهایی هستند که تیم‌های توسعه برای برنامه‌ریزی، طراحی، ساخت، آزمایش و تحویل نرم‌افزار از آن‌ها استفاده می‌کنند.هدف اصلی هر متدولوژی، افزایش کیفیت محصول، کاهش ریسک، و بهبود همکاری میان اعضای تیم است.در این مقاله به بررسی مهم‌ترین و پرکاربردترین روش‌ها و متدولوژی‌های توسعه نرم‌افزار می‌پردازیم.1. مدل آبشاری (Waterfall Model)مدل آبشاری یکی از قدیمی‌ترین و ساده‌ترین روش‌های توسعه نرم‌افزار است.در این متدولوژی، فرآیند توسعه به چند مرحله‌ی مشخص تقسیم می‌شود که هر مرحله باید قبل از شروع مرحله‌ی بعدی تکمیل شود.مراحل معمولاً شامل تحلیل نیازها، طراحی، پیاده‌سازی، آزمایش، استقرار و نگهداری است.ویژگی کلیدی: جریان کار خطی و مرحله‌به‌مرحلهمزایا: ساختار منظم، مناسب برای پروژه‌های کوچک و مشخصمعایب: عدم انعطاف در برابر تغییرات و بازخورد دیرهنگام از کاربران2. مدل چابک (Agile Model)رویکرد چابک پاسخی به محدودیت‌های مدل آبشاری است.در این متدولوژی، پروژه به بخش‌های کوچک‌تر (اسپرینت‌ها) تقسیم می‌شود که در هرکدام بخشی از نرم‌افزار به‌صورت تکرارشونده طراحی، پیاده‌سازی و آزمایش می‌شود. Agileبر همکاری نزدیک با مشتری، بازخورد سریع، و تطبیق‌پذیری بالا تمرکز دارد.ویژگی کلیدی: توسعه‌ی تکرارشونده و تدریجیمزایا: انعطاف‌پذیری بالا، رضایت بیشتر مشتریمعایب: نیاز به مشارکت مداوم مشتری، دشواری در پیش‌بینی دقیق زمان و هزینه3. اسکرام (Scrum)اسکرام یکی از چارچوب‌های اجرایی متدولوژی چابک است.در اسکرام، تیم توسعه در بازه‌های زمانی ثابت (معمولاً ۲ تا ۴ هفته) به نام اسپرینت (Sprint) کار می‌کند.در هر اسپرینت، تیم اهداف مشخصی را دنبال کرده و در پایان، محصول قابل ارائه‌ای تولید می‌شود.نقش‌های اصلی: Product Owner، Scrum Master ، Development Teamمزایا: شفافیت بالا، بهبود تدریجی محصول، بازخورد سریعمعایب: نیازمند انضباط تیمی بالا و همکاری مداوم اعضا4. مدل نمونه‌سازی (Prototype Model)در این روش، پیش از توسعه‌ی نهایی، یک نمونه‌ی اولیه از نرم‌افزار (Prototype) ساخته می‌شود تا نیازها و انتظارات کاربر به‌درستی درک شود.پس از دریافت بازخورد از کاربر، طراحی و عملکرد نرم‌افزار اصلاح و سپس نسخه‌ی اصلی ساخته می‌شود.ویژگی کلیدی: تمرکز بر تعامل با کاربرمزایا: درک دقیق‌تر نیازها، کاهش خطا در طراحیمعایب: افزایش هزینه و زمان در صورت تغییرات متعدد5. مدل مارپیچی (Spiral Model)مدل مارپیچی ترکیبی از مدل آبشاری و نمونه‌سازی است و بر تحلیل ریسک در هر مرحله تأکید دارد.هر چرخه‌ی مارپیچ شامل چهار مرحله است: برنامه‌ریزی، تحلیل ریسک، توسعه، و ارزیابی.این مدل به‌ویژه برای پروژه‌های بزرگ و پرریسک کاربرد دارد.ویژگی کلیدی: تمرکز بر مدیریت ریسکمزایا: مناسب برای پروژه‌های پیچیده، شناسایی زودهنگام مشکلاتمعایب: هزینه‌بر و زمان‌بر6. مدل RAD (Rapid Application Development) RADیا توسعه‌ی سریع نرم‌افزار بر سرعت و بهره‌وری تمرکز دارد.در این روش از ابزارهای تولید سریع، طراحی تکرارشونده و بازخوردهای مداوم استفاده می‌شود تا نرم‌افزار در زمان کوتاه‌تری آماده شود.ویژگی کلیدی: سرعت بالا در توسعهمزایا: تحویل سریع‌تر محصول، مشارکت فعال کاربرانمعایب: مناسب نبودن برای پروژه‌های بزرگ یا پیچیده7. مدل DevOps DevOpsدر واقع یک فرهنگ و مجموعه‌ای از روش‌ها است که هدف آن ادغام تیم توسعه (Development) و عملیات (Operations) است.در DevOps ، فرایندهای توسعه، آزمایش، استقرار و نگهداری به صورت خودکار و پیوسته انجام می‌شود تا سرعت تحویل و کیفیت نرم‌افزار افزایش یابد.ویژگی کلیدی: همکاری نزدیک میان تیم‌ها و خودکارسازی فرآیندهامزایا: انتشار سریع‌تر نسخه‌ها، کاهش خطا، افزایش کاراییمعایب: نیاز به تغییر فرهنگی و ابزارهای تخصصیجمع‌بندیانتخاب متدولوژی مناسب، بستگی مستقیم به نوع پروژه، اندازه تیم، بودجه، و سطح ریسک دارد.برای مثال، پروژه‌های کوچک و مشخص ممکن است با مدل آبشاری بهتر پیش بروند، در حالی که پروژه‌های پویا و پیچیده، از رویکردهای چابک یا DevOps بهره‌ی بیشتری می‌برند.در نهایت، هدف از انتخاب هر متدولوژی، تولید نرم‌افزاری کارآمد، باکیفیت و منطبق بر نیاز واقعی کاربر است؛ نه صرفاً پیروی از یک چارچوب خاص. سعید عبدالهی سعید عبدالهی Sat, 08 Nov 2025 08:07:30 +0330 https://virgool.io/@saeed_abdollahi/%DA%A9%DB%8C%D8%B3-%D8%A7%D8%B3%D8%AA%D8%A7%D8%AF%DB%8C-%D8%AF%D8%B1-uiux-%D8%A8%D8%B1%D8%B1%D8%B3%DB%8C-%D8%A7%D9%BE-%D8%B9%D9%84%DB%8C-%D8%A8%D8%A7%D8%A8%D8%A7-%D9%88-%D9%87%D9%85%D8%B1%D8%A7%D9%87-%D8%A7%D9%88%D9%84-kskp4ordywuy مقدمهفرض کن رفتی کافی‌شاپ. می‌خوای قهوه سفارش بدی، ولی منو پیچیده‌ست، دکمه سفارش گم شده، یا اصلاً معلوم نیست، کِی سفارشت آماده میشه.اینجاست که یه طراح UI/UX میاد و مشکل رو حل می‌کنه.حالا Case Study یعنی: همین داستان رو مرحله‌به‌مرحله تعریف کنی و نشون بدی چطور مشکل کاربر رو به یه تجربه عالی تبدیل کردی.پس کیس استادی فقط یه داستان جذاب از پروژه طراحیته.Case study در UI/UX یعنی چی؟خیلی سادش میشه: داستان پروژه‌ت از اول تا آخر.یعنی نشون بدی:· چه مشکلی وجود داشت· چطور تحقیق کردی· چه راه‌حلی پیدا کردی· و در نهایت نتیجه کار چی شدیعنی مثل پشت‌صحنه‌ی یک فیلمه؛ که نشون میدی چرا این تصمیم‌ها رو گرفتی و پشت هر تغییرت یه دلیل و فکر بوده.چرا Case Study مهمه؟· رزومه‌تو حرفه‌ای می‌کنه· باعث اعتماد مشتری میشه· توی لینکدین و سایت‌های نمونه‌کار می‌درخشی· خودت هم از پروسه کارت یاد می‌گیریویژگی‌های یه Case Study خوبمشکل رو معرفی کن (Problem Statement):· بگو مشکل چی بودتحقیق و دیتا بیار (User Research):· توضیح بده چطور نیاز کاربر رو فهمیدی (مصاحبه، پرسشنامه، دیتا)ایده‌پردازی و راه‌حل بده (Ideation):بگو چه ایده‌هایی داشتی و چرا بعضیا رو انتخاب کردی.طراحی و تست نشون بده (Prototyping & Testing)· ماکت زدی، تست کردی، فیگما ترکوندی و کاربر گفت: "آها! الان شد!"نتیجه رو بگو (Impact & Metrics):· نشون بده طراحیت چه تاثیری گذاشته.مثلا: "با این تغییر، نرخ خرید ۳۰٪ رفت بالا."عکس و وایرفریم بذار (Visuals & Mockups):· یادت نره اسکرین‌شات بزاری، چون کیس استادی بدون عکس، مثل پیتزا بدون پنیرهبررسی دو Case Study از اپ های ایرانیمثل علی بابا(رزرو سفر) و همراه اول(اپلیکیشن خدمات اپراتور):Case Study اول: اپلیکیشن علی‌بابامشکل (Problem)کاربران برای خرید بلیط هواپیما یا قطار، خیلی وقتا گیج می‌شدن:· لیست پروازها شلوغ بود.· پیدا کردن ارزان‌ترین یا زودترین پرواز سخت بود.· بعضی کاربرا وسط خرید منصرف می‌شدن چون مراحل رزرو طولانی بود.تحقیق (Research)تیم طراحی علی‌بابا با بررسی رفتار کاربرها فهمید:· مهم‌ترین نیازشون سرعت و راحتیه.· اکثرا دنبال مقایسه قیمت‌ها هستن.· کاربر دوست داره با کمترین کلیک بلیطشو بخره.راه‌حل (Solution)· جستجوی ساده در صفحه اصلی: فقط تاریخ، مبدا و مقصد.· افزودن فیلترهای سریع مثل "ارزان‌ترین" یا "زودترین".· رنگ‌بندی و دسته‌بندی شفاف برای پرواز چارتری و سیستمی.· ساده‌تر کردن مراحل خرید (کمتر کردن فرم‌ها و کلیک‌ها).نتیجه (Result)· زمان انتخاب پرواز برای کاربر کمتر شد.· رزرو بلیط بیشتر شد· تجربه کاربری شفاف‌تر و راحت‌تر شد.درس UX از علی‌بابا: همیشه سریع‌ترین راه رو برای رسیدن به هدف اصلی کاربر طراحی کن.Case Study دوم: اپلیکیشن همراه اول (MyMCI)مشکل (Problem)· کاربرها برای کارای ساده مثل خرید بسته اینترنت یا دیدن باقی‌مانده حجم، باید بین منوهای پیچیده می‌چرخیدن. این باعث می‌شد خیلیا کلافه بشن.تحقیق (Research)طراح‌ها با بررسی رفتار کاربرا فهمیدن:۸۰٪ استفاده فقط مربوط به سه کاره:· خرید بسته اینترنت· پرداخت قبض· دیدن باقی‌مانده شارژ و اینترنتراه‌حل (Solution)· قرار دادن این سه گزینه به صورت کارت‌های بزرگ و واضح تو صفحه اصلی.· استفاده از آیکون‌های ساده و شناخته‌شده.· اضافه کردن اعلان‌ها (Notification) برای یادآوری پایان حجم یا سررسید قبض· طراحی رنگی ساده با تم آبی و سفید برای کاهش شلوغینتیجه (Result)· دسترسی به خدمات اصلی سریع‌تر شد.· تماس‌های پشتیبانی کاهش پیدا کرد.· کاربرا حس بهتری از اپ گرفتن و امتیاز اپ بالاتر رفت.درس UX از همراه اول: نیازهای اصلی کاربر رو دم دست بذار و بقیه رو ببر لایه دوم.نکات طلایی برای نوشتن کیس استادی· ساده و فان بنویس، نه خشک و رسمی· از اسکرین‌شات و تصاویر طراحی استفاده کن· تاثیر تغییرات رو با عدد و آمار نشون بده· داستان‌سرایی کن؛ مردم عاشق داستاننجمع‌بندیعلی‌بابا نشون داد که در طراحی تجربه کاربری، سادگی و سرعت در خرید اولویت شماره یکه.همراه اول ثابت کرد که وقتی کاربرا بیشتر وقتشون رو روی چند ویژگی خاص میزارن، همونارو باید در مرکز طراحی قرار بدی.پس کیس استادی در UI/UX فقط یه گزارش نیست، بلکه یه داستان واقعی از مسیر حل مشکل کاربره.اگه می‌خوای پورتفولیوت جذاب باشه و کارفرما عاشقت بشه، حتماً کیس استادی رو تو نمونه‌کارات اضافه کن.اگه دنبال یه طراح UI/UX هستی که فقط طراحی قشنگ نده، بلکه مشکل رو حل کنه، همین الان بهم پیام بده.#کیس_استادی #طراحی_تجربه_کاربری #فیگما#Case_Study #figma #UI #UX سعید عبدالهی سعید عبدالهی Thu, 21 Aug 2025 18:07:20 +0330 https://virgool.io/@saeed_abdollahi/%D9%85%D9%88%D8%AF%D8%A8%D9%88%D8%B1%D8%AF-mood-board-%D8%AF%D8%B1-%D9%81%DB%8C%DA%AF%D9%85%D8%A7-%E2%80%93-%D8%AA%D8%A7%D8%A8%D9%84%D9%88-%D8%A7%D9%84%D9%87%D8%A7%D9%85-%D8%AE%D9%88%D8%AF%D8%AA%D9%88-%D8%A8%D8%B3%D8%A7%D8%B2-e5wgfjbkvh8z تا حالا شده قبل از شروع یه پروژه، ذهنت پر از ایده‌های رنگی‌رنگی باشه ولی ندونی از کجا شروع کنی؟اینجاست که مودبورد (Mood board) میاد وسط، مثل اون دوست باحال که همه ایده‌هات رو میچینه روی یه تابلو، مرتب و خوشگلمودبورد چیه اصلاً؟خیلی ساده بگم:مودبورد یعنی یه صفحه که پره از عکس، رنگ، فونت، نوشته و هر چیزی که حس و حال پروژه رو نشون میده.مثل یک کاتالوگ یا نقشه ذهنیمثلاً اگه بخوای یه وب‌سایت برای یه کافی‌شاپ طراحی کنی، مودبوردت پر میشه از رنگ قهوه، عکس فنجون، و فونت‌های صمیمی. چرا باید مودبورد بسازیم؟· تا همه (طراح، کارفرما) بفهمن قراره پروژه چه حسی بده.· وقتتو کمتر هدر بدی و زودتر به ایده اصلی برسی.· از وسط کار نگی: «اوه نه! اصلاً همچین چیزی نمی‌خواستم!» آموزش ساخت مودبورد در فیگما (نسخه آسان‌تر از آب خوردن )۱. اول هدف رو پیدا کنبگو این پروژه باید چه حسی بده: شاد؟ مینیمال؟ رسمی؟ لوکس؟2. ایده جمع کنبرو پینترست، اینستاگرام یا حتی عکسای گوشی خودت رو بچرخون. هر چی با حس پروژه جور بود، ذخیره کن.3. فیگما رو باز کن· یه فایل جدید بساز.· از FigJam یا قالب‌های آماده مودبورد استفاده کن (تو فیگما سرچ کن Moodboard Template )· عکس‌ها رو بکش و بنداز تو صفحه. رنگ‌ها رو هم با ابزار eye dropper انتخاب کن.4. توضیح اضافه کنکنار هر عکس یا رنگ یه متن کوچولو بنویس. مثلاً: «این رنگ حس آرامش میده» یا «این فونت برای تیتر عالیه»5. نمایش بده!با فیگما برای هم‌تیمی یا مشتری بفرست. منتظر واکنش «وااااو!» باش. مثالفرض کن قراره مودبوردی برای یک فروشگاه آنلاین لباس بسازیم:هدف: مدرن، جوان‌پسند، شادرنگ‌ها : زرد، سفید، مشکیفونت‌ها: Sans Serif مدرنعکس‌ها: مدل‌های جوان با لباس‌های رنگی، بک‌گراند ساده، نور روشنبافت‌ها: خطوط مینیمال، اشکال هندسی ساده یه مثال دیگه:فرض کن برای یک کافه مودبورد می‌سازی:رنگ‌ها: قهوه‌ای، کرم، طلاییعکس‌ها: میز چوبی، فنجان قهوه، نور گرمفونت: دست‌نویس و صمیمینتیجه؟ یک حس گرم و دعوت‌کننده که مشتری رو جذب می‌کنه. #مودبورد #نقشه_ذهنی #فیگما #moodboard #figma #brainstorming #canvas سعید عبدالهی سعید عبدالهی Sat, 09 Aug 2025 07:31:52 +0330 https://virgool.io/@saeed_abdollahi/%D8%AF%DB%8C%D8%B2%D8%A7%DB%8C%D9%86-%D8%B3%DB%8C%D8%B3%D8%AA%D9%85-%D8%AF%D8%B1-%D9%81%DB%8C%DA%AF%D9%85%D8%A7-%DA%86%DB%8C%D9%87-k7ktp2nbucao اگه وارد دنیای طراحی UI/UX شدی، یه لحظه فکر کن:· چطور اپ بزرگی مثل تپسی یا اسنپ‌فود با ده‌ها صفحه و هزاران دکمه، این‌قدر منظم و هماهنگ طراحی شدن؟· اگه یه دکمه کوچیک بخواد تغییر کنه، باید همه صفحه‌ها رو دستی ویرایش کنن؟اینجاست که یه قهرمان وارد می‌شه:Design System یا سیستم طراحی Design System چیه؟"یه جعبه ابزار بزرگ و منظم برای طراحی"این جعبه ابزار شامل:· رنگ‌ها· فونت‌ها· آیکون‌ها· دکمه‌ها· فرم‌ها· کامپوننت‌ها (اجزای قابل استفاده مجدد) مثال ساده:فکر کن یه دکمه‌ی قرمز با فونت خاص ساختی. اگه بخوای توی ۵۰ تا صفحه از همین دکمه استفاده کنی، نیازی نیست ۵۰ بار بسازیش. فقط یک کامپوننت دکمه نیاز داری که همه جا استفاده بشه. Design System در Figma چطوری ساخته میشه؟Figma دقیقاً برای همین طراحی شده. به راحتی می‌تونی:· Styles تعریف کنی (برای رنگ، متن، سایه و...)· Components بسازی (دکمه، کارت، فرم و...)· Variants اضافه کنی مثلاً دکمه روشن، خاموش، Hoverمیتونی فایل Design System رو Share کنی تا همه‌ی تیم ازش استفاده کنن مزایای استفاده از Design System1. سرعت طراحی بالا می‌رهفقط یک بار طراحی می‌کنی، همه‌جا استفاده می‌کنی.2. ظاهر همه صفحات یکدسته طراحی منظم و حرفه‌ای می‌شه3. تیم طراحی منسجم می‌مونه همه با یه منبع واحد کار می‌کنن4. توسعه راحت‌تر می‌شه برنامه‌نویس می‌دونه از چه ساختاری استفاده کنه5. تغییرات سریع و مرکزی فقط یه جا تغییر بده، همه جا آپدیت میشه معروف‌ترین دیزاین سیستم‌های دنیا:Material design گوگل:https://m3.material.io· استفاده شده در اپ‌های اندروید و گوگل· دکمه‌ها، سایه‌ها، رنگ‌ها و انیمیشن‌هاش معروفه· توی فیگما کامپوننت‌هاش آماده هست (رایگان)· الهام برای: طراحی اپلیکیشن‌های موبایل، مخصوصاً اندرویدCarbon – IBMhttps://carbondesignsystem.com· بسیار حرفه‌ای و مرتب· مخصوص طراحی داشبورد و اپ‌های پیچیده شرکتی· همه‌چیزش داکیومنت شده و قابل استفاده در کدنویسی· الهام برای: طراحی رابط‌های سازمانی یا پیچیدهFluent مایکروسافتhttps://fluent.microsoft.comسیستم طراحی اپ‌ها و ویندوزسبک شفاف و مینیمالآیکون‌ها و حالت‌های hover جذابالهام برای: طراحی دسکتاپ یا اپ‌های حرفه‌ای‌ترAtlassian Design Systemhttps://atlassian.design· مخصوص محصولات Trello و Jira و confluence· تمرکز روی فرم، کامنت، دیتاهای زیاد· الهام برای: طراحی ابزارهای مدیریت پروژه و تیمیShopify Polarishttps://polaris.shopify.com· مخصوص فروشگاه‌های آنلاین· دکمه‌ها، فرم‌ها و فیلترهاش عالیه· الهام برای: طراحی پنل ادمین، سایت فروشگاهیApple Human Interface Guidelines (HIG)https://developer.apple.com/design/human-interface-guidelinesمخصوص طراحی اپ‌های iOS و macOS مینیمال، ظریف، با انیمیشن‌های ملایمالهام برای: طراحی اپ آیفون و اپ‌های لوکسAnt Design – Alibabahttps://ant.design· ساخت چین ولی بسیار پرکاربرد جهانی· بیشتر برای داشبورد و اپ‌های تحت وب· الهام برای: طراحی وب‌اپ‌های پیچیده مثال‌های واقعی از Design System در برندهای ایرانی 1. تپسیاپلیکیشن حمل‌ونقل تپسی یه Design System خیلی منظم داره:· رنگ اصلی: نارنجی· فونت: ایران‌سنس· آیکون‌های اختصاصی برای سفر، پشتیبانی و...· کامپوننت‌های واضح برای دکمه، فرم رزرو، کارت سفرتغییر رنگ دکمه «رزرو سفر»؟ فقط کافیه کامپوننت اصلی ویرایش بشه؛ تو کل اپ تغییر می‌کنه! 2. اسنپ‌فوداسنپ‌فود با ده‌ها سرویس مختلف (رستوران، داروخانه، سوپرمارکت...) حتماً باید از Design System استفاده کنه.· رنگ اصلی: قرمز· دکمه‌ها با حالت‌های مختلف (Hover, Active, Disable)· آیکون‌های اختصاصی برای دسته‌بندی‌ها· ساختار منظم برای کارت غذا، اطلاعات رستوران و فرم جستجومثلاً کامپوننت "کارت غذا" یه بار ساخته شده و برای همه غذاها فقط اطلاعات تغییری می‌کنه. 3. آپبرنامه مالی آپ با ویژگی‌هایی مثل کارت شارژ، پرداخت قبض، کارت به کارت، به‌دلیل گستردگی و تنوع خدمات نیاز به سیستم طراحی داره.· رنگ برند: سبز تیره· فونت: رسمی و ساده· آیکون‌های کاربردی و واضح· ساختار ثابت برای کارت‌های خدمات، دکمه‌ها و اعلان‌هانتیجه؟ کاربر سریع‌تر متوجه عملکرد هر بخش می‌شه چون همه چی استاندارد و تکرارشونده‌ست. ساختن Design System در Figma (گام‌به‌گام) قدم 1: ساختن Styleهامثلا رنگها (primary آبی) و (secondary خاکستری)فونت‌ها (تیتر، بدنه، زیرنویس)افکت‌ها (سایه، گردی گوشه‌ها) قدم 2: ساختن Componentsدکمه‌ها در اندازه و حالت‌های مختلففیلدهای ورودی و فرم‌هاکارت‌ها برای محصولات یا اطلاعات قدم 3: استفاده از Variantsمثلاً دکمه با ۳ حالت: عادی، کلیک‌شده، غیرفعال قدم 4: سازمان‌دهی در یک فایل مستقلفایل Design System رو جدا نگه دار تا توی همه پروژه‌ها استفاده بشه با قابلیت shareنکات حرفه‌ای برای طراح‌هاهمیشه قبل از طراحی یه صفحه، ببین چه چیزی توی Design System داریاگه چیزی جدید طراحی کردی که می‌تونه تکراری باشه، اون رو به Design System اضافه کنهر ماه Design System رو بررسی و به‌روزرسانی کنحتماً Document بنویس برای آموزش تیم (یا خودت در آینده)جمع‌بندی نهایی· دیزاین سیستم یه سرمایه مهم برای طراح‌های حرفه‌ایه· فیگما بهترین ابزار برای ساخت و استفاده از اون هستش· برندهای موفق ایرانی مثل تپسی، اسنپ‌فود و آپ از اون استفاده می‌کنن· اگه دنبال استخدام، پروژه یا مهاجرت هستی، حتماً تو پورتفولیوت نشون بده که کار با Design System بلدی #سیستم_طراحی #تپسی #اسنپ_فود #فیگما #طراحی_محصول #سیستم_طراحی_ایرانی #design_system #figma_design #UI_design #product_design #Figma سعید عبدالهی سعید عبدالهی Thu, 07 Aug 2025 07:36:02 +0330 https://virgool.io/@saeed_abdollahi/%D8%AA%D9%81%D8%A7%D9%88%D8%AA-lo-fi-%D9%88-hi-fi-%D8%AF%D8%B1-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-uiux-%DA%86%DB%8C%D8%B3%D8%AA-da6ljlxlflqj در دنیای طراحی رابط کاربری (UI) و تجربه کاربری (UX)، اصطلاحات Lo-Fi (Low Fidelity) و Hi-Fi (High Fidelity) نقش بسیار مهمی در فرآیند طراحی ایفا می‌کنند. درک تفاوت این دو مفهوم برای طراحان، توسعه‌دهندگان و حتی صاحبان کسب‌وکار ضروری است. در این مقاله، به زبان ساده و با مثال‌های واقعی، به بررسی کامل مفهوم Lo-Fi و Hi-Fi در UI/UX می‌پردازیم، تفاوت‌ها و کاربردهای آن‌ها را شرح می‌دهیم و با مقایسه این دو، به شما کمک می‌کنیم انتخاب درستی در طراحی محصول دیجیتال خود داشته باشید.Lo-Fi در طراحی UI/UX یعنی چه؟Lo-Fi یا Low Fidelity به طرح‌های اولیه، ساده و اغلب سیاه و سفید گفته می‌شود که بیشتر تمرکز آن روی ساختار کلی و جریان کاربر (user flow) است، نه جزئیات بصری. ویژگی‌های طراحی lo-fi :· بدون رنگ یا با رنگ‌های محدود· بدون فونت‌های واقعی، عکس یا آیکون· بدون تعامل واقعی (صرفاً تصویری یا کلیک‌نما)· بسیار سریع و ارزان برای ساخت مثال واقعی:فرض کنید در حال طراحی یک اپلیکیشن سفارش غذا هستید. در نسخه Lo-Fi، تنها یک طرح ساده از صفحات اصلی مانند «خانه»، «لیست غذاها»، «سبد خرید» و «پرداخت» روی کاغذ یا نرم‌افزارهایی مثل Figma کشیده می‌شود. در این مرحله فقط مسیر کاربر مهم است، نه زیبایی یا جزئیات بصری.Hi-fi در طراحی UI/UX یعنی چه؟Hi-Fi یا High Fidelity به طراحی‌هایی گفته می‌شود که بسیار شبیه به محصول نهایی هستند. این طراحی‌ها از رنگ‌ها، تایپوگرافی واقعی، عکس‌ها، آیکون‌ها و تعاملات کامل برخوردارند. ویژگی‌های طراحی hi-fi :· ظاهر دقیق و نهایی محصول· رنگ‌بندی کامل و فونت‌های واقعی· قابلیت کلیک، انیمیشن، و تعامل کامل· مناسب برای تست نهایی با کاربر یا ارائه به سرمایه‌گذاران مثال واقعی:در همان اپلیکیشن سفارش غذا، در نسخه Hi-Fi شما طراحی گرافیکی دقیق صفحات را در Figma یا Adobe XD انجام می‌دهید. کاربران می‌توانند دکمه‌ها را کلیک کنند، انیمیشن‌ها را ببینند، و تجربه‌ای نزدیک به نسخه واقعی داشته باشند.کِی از Lo-Fi و کِی از Hi-Fi استفاده کنیم؟Lo-Fi مناسب است وقتی که:در مراحل اولیه طراحی هستیدمی‌خواهید ایده‌های مختلف را سریع آزمایش کنیدهنوز درباره ساختار کلی محصول مطمئن نیستید Hi-Fi مناسب است وقتی که:مسیر کاربر نهایی مشخص شده استمی‌خواهید طراحی را با کاربر تست نهایی کنیدنیاز دارید طرح را به مدیر، سرمایه‌گذار یا توسعه‌دهنده ارائه دهیدپیشنهاد ویژه برای طراحان:اگر به دنبال طراحی اصولی و حرفه‌ای UX هستید، ابتدا با Lo-Fi شروع کنید، ایده‌های خود را تست کنید، و سپس به سراغ طراحی Hi-Fi بروید. این مسیر، کلید موفقیت در دنیای طراحی دیجیتال است.جمع‌بندی:طراحی موفق نیازمند عبور از مرحله ساده‌سازی تا جزئی‌سازی است. استفاده مناسب از طراحی Lo-Fi و Hi-Fi باعث می‌شود تجربه کاربری بهتری خلق کنید، هزینه‌ها را کاهش دهید و با تست و اصلاح تدریجی، به بهترین نسخه محصول برسید. #طراحی_UI #طراحی_UX #طراحی_رابط_کاربری #نمونه_نهایی #نمونه نهایی#lo-fi #hi-fi سعید عبدالهی سعید عبدالهی Sat, 26 Jul 2025 13:24:41 +0330 https://virgool.io/@saeed_abdollahi/%D8%AA%D9%81%D8%A7%D9%88%D8%AA-user-flow-%D9%88-task-flow-%D8%AF%D8%B1-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-uiux-dwt9wh52deh4 اگه وارد دنیای طراحی UI/UX شده باشی، حتماً با دو اصطلاح معروف “task flow” و “user flow” برخورد کردی. این دوتا مفهومی هستن که خیلی وقتا با هم قاطی میشن.تو این مقاله کامل و ساده و با مثال‌های کاربردی همه چیزو برات روشن می‌کنمUser Flow چیست؟جریان کاربر یا user flow یعنی مسیری که یک کاربر طی می‌کنه تا به یک هدف خاص در سایت یا اپلیکیشن برسه. مثال ساده:فرض کن یک کاربر می‌خواد از یک فروشگاه اینترنتی کفش بخره. مراحل زیر می‌تونه یک User Flow باشه:1. ورود به سایت2. سرچ کردن "کفش مردانه"3. کلیک روی یک محصول4. اضافه کردن به سبد خرید5. وارد کردن آدرس و پرداخت نهایی یه مثال دیگه:فرض کن کاربر وارد اپلیکیشن اسنپ میشه تا تاکسی بگیره:1. باز کردن اپلیکیشن2. انتخاب مبدا و مقصد3. دیدن قیمت و تایید4. انتخاب روش پرداخت5. درخواست سفر6. رسیدن راننده و شروع سفراین مراحل کنار هم، User Flow اپلیکیشن اسنپه برای گرفتن تاکسی. پس User Flow یک تصویر کامل از حرکت کاربر از نقطه A تا رسیدن به هدفهTask Flow چیست؟Task Flow یعنی مسیر انجام یک وظیفه خاص در طراحی رابط کاربری. مثال ساده:فرض کن فقط می‌خوایم ببینیم کاربر چطور یک محصول رو به سبد خرید اضافه می‌کنه.این دیگه کل مسیر خرید نیست، فقط تمرکز روی یک وظیفه است:1. ورود به صفحه محصول2. انتخاب سایز3. کلیک روی "افزودن به سبد خرید" یه مثال دیگه:همون اپلیکیشن اسنپ رو در نظر بگیر.حالا فقط می‌خوایم بررسی کنیم کاربر چطور مقصد رو انتخاب می‌کنه:1. لمس کادر مقصد2. تایپ اسم مکان3. انتخاب مکان از لیست پیشنهادها این یه Task Flow ساده‌ست فقط برای "انتخاب مقصد". Task Flow دقیق‌تره، ساده‌تره و فقط روی یک تسک تمرکز داره.کی از User Flow استفاده کنیم و کی از Task Flow؟ طراحی مسیر کلی کاربر از ورود تا هدف = User Flowبررسی و بهینه‌سازی یک تعامل خاص = Task Flowمعرفی محصول جدید = User Flowساده‌سازی فرم ثبت‌نام = Task Flowچرا دانستن تفاوت این دو مهم است؟· اگر فقط User Flow طراحی کنی، ممکنه جزئیات مهم از قلم بیفته· اگر فقط Task Flow رو ببینی، ممکنه تصویر کلی تجربه کاربر رو از دست بدیترکیب این دو باعث می‌شه یک تجربه کاربری حرفه‌ای و بدون نقص طراحی کنی.نتیجه‌گیریاگر طراح UI/UX هستی یا می‌خوای بشی، باید بدونی که: User Flow = مسیر کامل کاربره Task Flow = فقط روی یک وظیفه تمرکز دارهو هردو مکمل هم هستن. بدون یکی، اون یکی ناقص می‌مونه. پس دفعه بعد که داری یه صفحه طراحی می‌کنی، حتماً اول User Flow رو بکش، بعد Task Flow مربوط به جزئیات اون صفحه رو مشخص کن. نویسنده: سعید عبدالهی #UserFlow #TaskFlow #UXDesign #UXTips#طراحی_تجربه_کاربری #طراحی_رابط_کاربری #طراح_تجربه_کاربری #آموزش_UIUX #طراحی_سایت #طراحی_اپلیکیشن سعید عبدالهی سعید عبدالهی Sat, 26 Jul 2025 13:03:10 +0330 https://virgool.io/@saeed_abdollahi/%D8%AA%D9%81%D8%A7%D9%88%D8%AA-%D9%88%D8%A7%DB%8C%D8%B1%D9%81%D8%B1%DB%8C%D9%85-%D9%85%D9%88%DA%A9%D8%A7%D9%BE-%D9%88-%D9%BE%D8%B1%D9%88%D8%AA%D9%88%D8%AA%D8%A7%DB%8C%D9%BE-%D8%AF%D8%B1-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8Cuiux-%D8%A8%D8%A7-%D9%85%D8%AB%D8%A7%D9%84-%D9%87%D8%A7%DB%8C-%D8%B3%D8%A7%D8%AF%D9%87-%D9%88-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%AF%DB%8C-pbgtdufaciem وقتی صحبت از طراحی یک اپلیکیشن یا وب‌سایت میشه، سه اصطلاح خیلی مهم همیشه تکرار میشن:وایرفریم (Wireframe)، موکاپ (Mockup) و پروتوتایپ (Prototype) اما فرق اینا چیه؟ چرا باید هر کدومشون رو بدونیم و استفاده کنیم؟اگه تو مسیر طراحی UI/UX هستی، یا با طراحان کار می‌کنی، خوندن این مقاله برات واجبه.1. وایرفریم (Wireframe) چیه؟وایرفریم یه نقشه‌ی ساده از ساختار صفحه‌ست.مثل اسکلت ساختمونه؛ خبری از رنگ، تصویر یا فونت نیست. فقط مشخص می‌کنه که چی، کجا قرار بگیره. ✅ مثال ساده:فرض کن قراره یه اپلیکیشن سفارش غذا طراحی کنیم.توی وایرفریم فقط نشون میدیم که:§ لوگو کجاست؟§ دکمه "ورود" کجاست؟§ لیست غذاها چطور نمایش داده میشن؟2. موکاپ (Mockup) چیه؟موکاپ نسخه‌ی تصویری وایرفریمه؛همون طرح وایرفریم رو قشنگ می‌کنیم!رنگ‌ها، فونت‌ها، تصاویر واقعی و دکمه‌های طراحی‌شده اضافه میشن. ولی هنوز قابل کلیک نیست. ✅ مثال ساده:همون اپلیکیشن سفارش غذا، حالا توی موکاپ این شکلی میشه:· دکمه ورود آبی شده با آیکون قفل· لیست غذاها با تصویر و قیمت نمایش داده می‌شن· فونت‌ها جذاب شدن3. پروتوتایپ (Prototype) چیه؟پروتوتایپ نسخه‌ی قابل کلیک و تعاملی از موکاپه.کاربر می‌تونه دکمه‌ها رو کلیک کنه و بین صفحات حرکت کنه، انگار که داره از اپ واقعی استفاده می‌کنه. ✅ مثال ساده:کاربر توی اپ سفارش غذا:· روی "ثبت سفارش" کلیک می‌کنه· صفحه‌ی پرداخت باز میشه· می‌تونه برگرده به صفحه قبلی چرا این سه مرحله انقدر مهمن؟اگه یه پروژه رو از اول با این سه مرحله جلو ببری:1. بهتر می‌تونی با تیم یا کارفرما هماهنگ بشی2. از اشتباهات و دوباره‌کاری جلوگیری می‌کنی3. خیلی زودتر به نتیجه‌ می‌رسی جمع‌بندی:وایرفریم: نقشه‌ی ساده، بدون رنگ و تصویرموکاپ: ظاهر نهایی، اما بدون تعاملپروتوتایپ: شبیه اپ واقعی، با قابلیت کلیک اگه می‌خوای رابط کاربری حرفه‌ای طراحی کنی، باید هر سه مرحله رو بشناسی و استفاده کنی. چون هر کدوم توی مسیر طراحی نقش خاص خودش رو داره. 💬 تا حالا از وایرفریم یا پروتوتایپ استفاده کردی؟ با چه ابزاری کار کردی؟ برامون بنویس 👇نویسنده: سعید عبدالهی سعید عبدالهی سعید عبدالهی Fri, 25 Jul 2025 13:59:14 +0330 https://virgool.io/@saeed_abdollahi/%D9%BE%D8%B1%D8%B3%D9%88%D9%86%D8%A7-%D8%AF%D8%B1-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-uiux-%DA%86%DB%8C%D8%B3%D8%AA-%D9%85%D8%AB%D8%A7%D9%84-%D9%87%D8%A7%DB%8C-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%AF%DB%8C-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%AF%D8%B1%DA%A9-%D8%A8%D9%87%D8%AA%D8%B1-eaefv3938ppy پرسونا در طراحی UI/UX چیست؟ + مثال‌های کاربردی برای درک بهترپرسونا چیهپرسونا چیه و چرا برای طراحی UI/UX انقدر مهمه؟وقتی حرف از طراحی یک محصول دیجیتال مثل اپلیکیشن یا وب‌سایت میشه، اولین چیزی که باید بدونیم اینه که کاربر ما کیه؟اینجاست که پای پرسونا (Persona) به ماجرا باز میشه. پرسونا یه شخصیت خیالیه که نماینده‌ی یه گروه از کاربران واقعی محصولتونه. 🎯 تعریف ساده پرسونا:پرسونا یعنی تصور یک کاربر واقعی با اسم، سن، شغل، هدف‌ها و مشکلاتش، تا بتونیم طراحی رو دقیقاً بر اساس نیاز اون شخص انجام بدیم. چرا پرسونا مهمه؟بدون پرسونا، مثل اینه که چشم‌بسته طراحی می‌کنی و امید داری کاربر ازش خوشش بیاد. ولی با پرسونا، دقیقاً می‌دونی کاربر چی می‌خواد، چه مشکلی داره و دنبال چه تجربه‌ایه. ✨ مثال‌های کاربردی از پرسونا:✅ مثال ۱: اپلیکیشن تمرین در خانهنام: آیداسن: ۳۴ سالشغل: کارمند اداریشهر: تهراناهداف: تناسب اندام در خانه، تمرین سریعمشکلات: وقت کم، انگیزه پایین، فضای محدود برای ورزش نتیجه برای طراحی:· تمرین‌های کوتاه· سیستم یادآور و تشویق· طراحی ساده و بدون پیچیدگی ✅ مثال ۲: اپ سفارش غذا برای دانشجونام: علیسن: ۲۲ سالشغل: دانشجومحل زندگی: خوابگاهاهداف: غذای ارزون و سریعمشکلات: بودجه کم، گوشی ضعیف نتیجه برای طراحی: · نمایش غذاهای با تخفیف· اپ سبک و سریع· پرداخت راحت و تکرار سفارش ساده نکات مهم در ساخت پرسونا:1. حتماً بر اساس داده واقعی یا تحقیقات باشه (نه صرفاً حدس)2. بیش از حد تخیلی نباشه، کاربردی و قابل اجرا باشه3. روی هدف‌ها و مشکلات کاربر تمرکز کنه، نه فقط مشخصات ظاهری ✍️ جمع‌بندیطراحی بدون پرسونا مثل دوختن لباس بدون دونستن سایز آدمه.هر چقدر پرسونا دقیق‌تر باشه، طراحی UI/UX شما به دل کاربر میشینه و تجربه‌ی بهتری رقم می‌زنه.ممنون میشم از این مقاله حمایت کنیدسعید عبدالهی #پرسونا_چیست، #پرسونا_در_UX، #پرسونا_در_طراحی_UI، #مثال_پرسونا_UX، #طراحی کاربرمحور، #ساخت_پرسونا_UX سعید عبدالهی سعید عبدالهی Fri, 25 Jul 2025 12:21:15 +0330 https://virgool.io/@saeed_abdollahi/%D9%85%D8%AA%D8%AF%D9%87%D8%A7%DB%8C-%D9%85%D9%87%D9%85-%D8%A2%D8%B1%D8%A7%DB%8C%D9%87-%D8%AF%D8%B1-%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-njtbm97uxkbb Array methods in JSسلام رفقاامیدوارم حالتون عالی باشه.آرایه ها در جاوا اسکریپت یه سری متدهای مهم داره که امروز میخوایم بررسی کنیم و یادشون بگیریم. با من همراه باشید.1. متد forEach() : این متد خیلی باحال کار میکنه. میاد تک تک المان های آرایه رو برات فراخوانی میکنه و تو میتونی هر کاری دوست داشته باشی، با المان های آرایه انجام بدی.نکته مهم: حواست باشه هر وقت خواستی با متدها کار کنی، باید درونش از callback function استفاده کنی.مثلا ما میخوایم المان های موجود در یه آرایه رو با هم جمع کنیم و در خروجی نمایش بدیم:توضیح مثال:خط 3 یه متغیر به نام sum تعریف کردم و مقدارشو صفر گذاشتم.خط 4 اومدم یه آرایه تعریف کردم که شامل اعداد 1 تا 5 هستش.خط 6 متد forEach() رو استفاده کردم و درونش یه کال بک فانکشن گذاتشم.خط 7 ، در سند html یه پاراگراف تعریف کردم و یه id براش قرار دادم به اسم demo و در جاوا اسکریپت ازش استفاده کردم. در اینجا میخوام بر روی صفحه وب نمایش داده بهش.خط 8، اومدم یه فانکشن تعریف کردم که یه پارامتر داره به اسم item و در نهایت دستور جمع اعداد رو براش نوشتم.اگه این دستورات رو run کنی، جمع اعداد برات نمایش داده میشه.*********یه مثال دیگه از forEach() :مثلا میخوام اعدادی که در آرایه تعریف کردم رو تک به تک در کنسول نمایش بدم:2. متد Array.map() : این متد یه آرایه جدید برمیگردونه که کلا با آرایه اولی که براش تعریف کردیم فرق داره.مثلا من یه آرایه تعریف کردم که شامل [4,9,16,25,36] هستش و میخوام در یه آرایه جدید، جذرش رو نمایش بده.3. متد Array.filter() :این متد یه آرایه جدید ایجاد میکنه و نتایج رو برای ما فیلتر میکنه.مثلا: من یه سری رفیق دارم. میخوام ببینم کدوماشون 18 سالشونه.4. متد reduce() :این متد میاد همه ی المان های آرایه رو در یک المان خلاصه میکنه...مثلا: من چنتا عدد در یه آرایه دارم. میخوام از همدیگه کمش کنم و نتیجه رو در یک المان نشون بدم.5. متد slice() :این متد میاد و به صورت بازه ای المان هایی که ما میخوایم رو میگیره و نمایش میده.مثلا: من چنتا میوه دارم و میخوام از ایندکس فلان تا فلان رو در یه آرایه جدید نشون بده.در اینجا حتی میتونیم از ایندکس منفی هم استفاده کنیم:6. متد splice() :این متد عناصر آرایه رو اضافه و یا حذف میکنه.مثال: در موقعیت ایندکس شماره 2 بیا، هیچ المانی حذف نکن و 2 المان هم به آرایه اضافه کن.مثال دیگه:در موقعیت ایندکس شماره 2 بیا، 2 المان از آرایه حذف کن7. متد sort() :این متد کمک میکنه که ما بر اساس یه الگویی آرایه رو دستکاری کنیم.مثلا من چنتا میوه دارم، میخوام بر اساس حروف الفبا اینارو طبقه بندی کنم.8. متد concat() :این متد هرچندتا آرایه رو به هم متصل (join) میکنه.مثلا:9. متد fill() :وقتی میخوای یه عنصر مشخص شده از آرایه رو پر کنی، از این متد استفاده میکنی.10. متد includes() :میخوایم ببینیم که یه مقداری رو آرایه ی ما داره یا نداره...مقدار بولین (true, false) برمیگردونه.مثلا:11. متد join() :این متد خیلییی کاربردیه. به ما کمک میکنه که آرایه رو به صورت رشته نشون بدیم.مثال:12. متد push() :یه المان به آخر آرایه اضافه میکنه.13. متد pop() :آخرین المان از آرایه رو پاک میکنه.مثال:14 . متد unshift() :یه المان به اول آرایه ما اضافه میکنهمثال:15. متد shift() :یه المان از اول آرایه حذف میکنه.مثال:16. متد every() :این متد مقدار بولین (true, false) برمیگردونه.این متد میگه که آیا تک تک المان های موجود در آرایه شرط رو رعایت میکنن.مثلا من میخوام ببینم که همه ی افراد به سن قانونی رسیدن یا نه؟؟17. متد find() :این متد کمک میکنه اولین مقدار که شرط رو رعایت کنه، برگشت داده بشه.مثلا:در این مثال، اولین عدد بزرگتر از 18، برابر است با 32پس همون رو نشون میده.18. متد Array.from() :این متد یه آرایه از رشته ایجاد میکنه.مثلا:تو این پست سعی کردم، اکثر متدهای کاربردی در جاوا اسکریپت رو بهتون توضیح بدم. امیدوارم که به کارت بیاداگه از این پست خوشت اومد و چیزای خوبی ازش یاد گرفتی، ازت میخوام تو هم این متدهارو به بقیه یاد بدی تا اونا هم استفاده کنن.دوستون دارم. سعید عبدالهی سعید عبدالهی Tue, 14 Nov 2023 18:48:43 +0330 https://virgool.io/@saeed_abdollahi/%D9%85%D9%81%D9%87%D9%88%D9%85-fetchapi-%D8%AF%D8%B1-%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-i8bhniofwzr2 fetchAPI in JSسلام رفقاامیدوارم حالتون عالی باشه.یه مفهوم خیلی مهم در جاوا اسکریپت وجود داره که امروز میخوایم دربارش بحث کنیم.میخوایم ببینیم fetchAPI چیه؟ و چجوری میشه ازش استفاده کرد.برای درخواست‌های Ajax می‌تونیم خیلی راحت از تابع درونی جاوا اسکریپت به اسم fetch استفاده کنیمتابع fetch :این تابع بعد از اجرا شدن، یک promise به ما برمی‌گردونه. این promise شامل یک سری اطلاعات از نتیجه درخواست هست. برای اینکه به این اطلاعات دسترسی داشته باشیم باید promise رو باز کنیم.مثال پایینو ببین:حالا نتیجه رو در کنسول ببین:همونطور که می‌بینیم خروجی یک نمونه از کلاس داخلی Response که شامل اطلاعاتی مثل status و headers و body هست. چیزی که در body قرار گرفته، شامل پاسخ اصلی هست که از سمت سرور اومده. توی این مرحله باید مشخص کنیم پاسخی که از سرور اومده رو به چه فرمتی می‌خوایم؛ متن؟ Json ؟ و... توی شرایط مختلف می‌تونیم از فرمت‌های زیر استفاده کنیم:خروجی همه‌ی فرمت‌های بالا یک promise هست. پس برای دسترسی به خروجی اصلی باید یه بار دیگه promise رو پردازش کنیم.توی مثالمون می‌خوایم خروجی json باشه. پس از خط ۲ کد بالا استفاده می‌کنیم. کد رو بصورت زیر تکمیل کنیم:به همین سادگی. خط 10 کد بالا شامل پاسخی هست که از سرور اومده و به صورت json خواهد بود.نتیجه در کنسول:نکته مهم: در حالت پیشفرض درخواست‌ها با متد GET فرستاده میشن. برای مشخص کردن متد و یا تنظیم کردن هدر باید درخواستمون رو شخصی‌سازی کنیم.شخصی‌سازی درخواستتوی پارامتر دوم تابع fetch می‌تونیم نوع متد رو مشخص کنیم، data پاس بدیم و هدر ست کنیم:توی مثال بالا متد رو method مشخص کردیم. برای ارسال هدر درخواست از headers استفاده کردیم و برای ارسال اطلاعات به سرور از body . نوع body ‌‌می‌تونه رشته‌‌ای یا Blob باشه. و یا FormData مثل کد زیر:مدیریت خطاهاخب می‌دونیم که همیشه درخواست‌ها موفقیت آمیز نیستن و ممکنه خطاهایی مثل ۴۰۴، ۴۰۱ پیش بیاد و یا کلا سرور یا اینترنت در دسترس نباشن. اگه درخواستی موفقیت آمیز نباشه، خروجی تابع fetch بصورت زیر هست:همونطور که می‌بینیم status داره کد ۴۰۴ رو نشون میده و مقدار ok برابر با false هست. برای اینکه بتونیم این خطا رو مدیریت کنیم، کد رو به صورت زیر می‌نویسیم:توی این مثال و توی خط ۵ از response.ok استفاده کردیم که مقدار اون اگه نتیجه درخواست موفقیت آمیز باشه true هست. همچنین از try/catch استفاده کردیم که اگه با خروجی غیرمنتظره‌ای (مثلCORS ) مواجه شدیم بتونیم اون رو مدیریت کنیم.تو این پست، سعی کردم خیلی ساده و راحت متد fetch رو بهتون یاد بدم. امیدوارم که بهتون کمک کرده باشه.اگه سوالی باشه، درخدمتم.دوستون دارم. سعید عبدالهی سعید عبدالهی Fri, 10 Nov 2023 20:35:02 +0330 https://virgool.io/@saeed_abdollahi/%D9%85%D8%AA%D8%AF-call-%D8%AF%D8%B1-%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-wzfhddxqojn4 call method in JSسلام رفقاامیدوارم حالتون عالی باشه.در این پست میخوایم با متد call() در جاوا اسکریپت آشنا بشیم و خیلی راحت ازش استفاده کنیم.برای توضیح این متد با یه مثال خفن و خلاقانه ی خودم میریم جلو که کامل یادش بگیریم.فرض کن ما یه آموزشگاه برنامه نویسی داریم و میخوایم دوره های جاوا اسکریپت، ری اکت و پایتون رو برگزار کنیم.پس برای نشون دادن اطلاعات دوره ها باید از آبجکت استفاده کنیممثال پایینو نگاه کن:من اطلاعات اولیه هر سه تا دوره در قالب آبجکت نوشتم. مثلا دوره جاوا اسکریپت، نامش فلانه، توضیحاتش، و نوع کلاسش (حضوری / آنلاین).در اینجا ما یه تابع نوشتیم که اسمش fullInfo هستش و کل اطلاعات رو در کنسول به ما نمایش میده. ولی یه ایراد داره...این تابع رو ما برای هر سه تا دوره تکرار کردیم که کار قشنگی نیست و تعداد خط های برنامه زیااااااااد شده.این جا متد call به کمکمون میاد.آقای call میاد میگه، چه کاریه که تو در هر آبجکت کدهای تکراری بنویسی....بیا یه آبجکت بنویس و کدهایی که فک میکنی در جاهای دیگه هم ممکنه به کارت بیاد رو، داخلش بنویس و دیگه کاریت نباشه...من میام از آبجکت این کدارو قرض میگیرم...مثال بالا به صورت درست:توضیحش:خط 4 تا 12 : در اینجا من یه آبجکت تعریف کردم و درونش اطلاعات کلی دوره هارو در قالب یه تابع تعریف کردم. تا این جا درست؟خط 14 تا 18: در اینجا یه آبجکت برای دوره ی جاوا اسکریپت درست کردم و بهش گفتم که اسم دوره، توضیحات و نوع دوره، فلانههههه.خط 20 تا 24: در اینجا هم اطلاعات دوره ری اکت رو نوشتم.خط 26 تا 30: اینجام که دوره پایتون رو قرار دادم.متد call بهت کمک میکنه که یه متدی بنویسی که در آبجکت های دیگه هم بشه ازش استفاده کرد.حالاااااااااا.....خط 32، 33 و 34 یه جور کار میکنه. یکیشو توضیح میدم، دو تای دیگه رو خودت میتونی آنالیز کنی....خط 32 میگه اون آبجکت course بوووووود، بیا بنویسشبعد فانکشن fullInfo رو بعدش قرار بده.در نهایت call رو بعدش بنویس که بیاد از course هرچی داره قرض بگیره.در آخر بهش میگی که کدوم دوره رو الگو برداری کنم. که من بهش گفتم بر اساس اون قالب بیا jsCourse رو درست کن.تمااااااااااام. این از متد callنتیجه کار در کنسول:امیدوارم با متد call آشنا شده باشی.اگه سوالی داشتی حتما بپرس.دوستون دارم. سعید عبدالهی سعید عبدالهی Sun, 05 Nov 2023 20:09:40 +0330 https://virgool.io/@saeed_abdollahi/%D9%85%D9%81%D9%87%D9%88%D9%85-promise-%D8%AF%D8%B1-%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-mq0rdhzghwq1 promise in JSسلام رفقاامیدوارم حالتون عالی باشه.امروز میخوایم یه ویژگی مهم ES6 در جاوا اسکریپت رو بررسی کنیم که خیلیا فک میکنن سخته ولی اگه این مقاله رو کامل بخونی به راحتی متوجه میشی.میخوایم ببینیم promise در جاوا اسکریپت چیه و چطوری میشه ازش استفاده کرد.پرامیس که برای مدیریت کردن عملیات ناهمگام استفاده میشه، یکی از کاربردی‌ترین ویژگی‌های جاوااسکریپت هست که از ES6 به این زبان اضافه شده. توی این قسمت می‌خوایم این موضوع کاربردی رو بررسی کنیم.اول ببینیم عملیات ناهمگام چیه؟عملیات ناهمگام به عملیاتی گفته میشه جدا از روند اصلی برنامه پردازش میشهتوی جاوااسکریپت، تابع setTimeout یکی از معروف‌ترین مثال‌ها برای درک مفهوم عملیات ناهمگام هست. با این تابع می‌تونیم قطعه کدی رو بعد از یک تأخیر معین اجرا کنیم. کد زیر رو در نظر بگیرین:متد setTimeout دو تا ورودی میگیره:ورودی اول یه تابع هست و شامل عملیاتی میشه که میخوایم اونو با تاخیر انجام بدیم.ورودی دوم میگه من بعد از چند ثانیه تاخیر، کدهایی که نوشتی رو اجرا کنم، که در اینجا 3000 میلی ثانیه یعنی 3 ثانیه هستش.زمانی که این قطعه کد رو اجرا کنیم، ابتدا خط 5 (عملیات دوم) به ما هشدار داده میشه و بعد از 3 ثانیه alert خط 2به این میگن عملیات ناهمگام.توی جاوااسکریپت، یک سری عملیات مثل اتصال به یک منبع خارجی با Ajax و WebSocket و یا خوندن و نوشتن اطلاعات توی دیتابیس و هارددیسک، جدا از روند اصلی برنامه اجرا میشن. این یعنی عملیات ناهمگام.ما در جاوا اسکریپت دو نوع عملیات داریم:1. همگام2. ناهمگامهمگام یعنی برنامه خط به خط کدهارو اجرا کنه.ناهمگام یعنی اون خط از کدهایی که تایمر دارن بعدا اجرا بشه. و جاوا اسکریپت منتظر نمونه.حالا در promise من که برنامه نویس باشم، بهش میگم که چطوری عملیات های ناهمگام رو مدیریت کن. شاید خواستم اول تایمر اجرا شه و بعدش دستورات دیگه ....پس با promise این کار رو انجام میدیم...درباره promise :پرامیس‌ها برای مدیریت کردن عملیات ناهمگام استفاده میشن. نحوه نوشتن یک promiseخیلی راحته. ابتدا با ساختار اون بشیم و بعد مثال بالا رو با promise خواهیم نوشت:کلاس promise فقط یک آرگومان می‌گیره و اون هم یک تابع هست. این تابع که توی اون باید عملیات ناهمگامِمون رو بنویسیم، بلافاصله وقتی یک promise ساخته شد اجرا میشه.حالا بیاین مشکلی که توی مثالمون داشتیم رو با پرامیس‌ها حل کنیم تا با ساختار اون بیشتر آشنا بشیمبا اجرای این کد ابتدا با یک تاخیر 3 ثانیه‌ای alert خط 3 اجرا میشه (یعنی همون عملیات اولمون) و بعدش alert خط 8 (عملیات دوم) اجرا میشه.پس ما تونستیم عملیات ناهمگام رو مدیریت کنیم.بریم سراغ جزئیات...ببینیم resolve و reject چی هستن؟؟؟همونطور که می‌بینیم تابعی که به promise پاس دادیم دو تا پارامتر می‌گیره که اولی resolve و دومی reject هست:هر دو پارامتر باید به شکل یک تابع توی promiseصدا زده بشن. یعنی :ما توی promise باید به جاوااسکریپت بگیم که کارِ ما به پایان رسید. چون جاوااسکریپت خودش متوجه به پایان رسیدن این عملیات نمیشه. وقتی عملیات ما به پایان رسید، اگر خروجی کار موفقیت‌آمیز بود، باید resolve رو صدا بزنیم و اگر خطا داشت rejectاگه عملیات موفقیت‌آمیز بودتوی promise که نوشتیم توی خط ۴ resolve رو صدا زدیم به این معنی که عملیات ما با موفقیت به پایان رسیده:چرا باید به جاوا اسکریپت بگیم که عملیات ما به پایان رسید؟ برای اینکه بتونیم بعد از به پایان رسیدن عملیات ناهمگام، کار مد نظرمون رو انجام بدیم. توی مثالی که داشتیم، کار مد نظرمون رو به این صورت انجام دادیم:همونطور که می‌بینیم از متغیر promise که مقدار اون یک promise هست، یک متد به اسم then رو صدا زدیم و به اون تابعی رو پاس دادیم. این تابع بلافاصله، زمانی اجرا میشه که ما توی پرامیس resolve رو صدا زده باشیم! پس کاری که می‌خوایم بعد از به پایان رسیدن عملیات ناهمگام اجرا بشه رو با then انجام میدیم.اگه عملیات با خطا مواجه شداگه عملیات ناهمگام با خطا مواجه شد، باید توی پرامیس reject رو صدا بزنیم:این کار به جاوااسکریپت میگه که عملیات ناهمگاممون موفقیت‌آمیز نبود. اگه بخوایم توی برنامه، reject شدن یک پرامیس رو مدیریت کنیم از متد catch که مشابهthen هست استفاده می‌کنیم:همونطور که می‌بینیم، توی catch یک تابع تعریف کردیم. این تابع بلافاصله بعد از اینکه پرامیس reject شد اجرا میشه.به متدهای then و catch میگیم Handler به‌معنی کنترل‌کننده نتیجه عملیات ناهمگام.ما برای مدیریت کردن خطای پرامیس می‌تونیم به جای متدcatch از آرگومان دوم متد then کمک بگیریم:وضعیت های promise :دیدیم که نتیجه پرامیس یا موفقیت‌آمیز هست یا رد شده. در واقع یک پرامیس همیشه سه حالت داره:حالتpendingحالتfullfilledحالتrejected۱. حالت Pendingاین حالت یعنی حالت انتظار. پرامیس در ابتدا و وقتی که ساخته میشه، در این حالت قرار داره:این حالت تا زمانی که resolve یا reject صدا زده نشه باقی می‌مونه.2. حالت fulfilled :حالت پرامیس وقتی resolve رو صدا بزنیم در حالت Fulfilled یعنی برآورده شده و موفقیت‌آمیز بودن قرار می‌گیره:توی این کد، پرامیس بعد از 3 ثانیه توی وضعیت Fulfilled قرار می‌گیره چون resolve رو صدا زدیم.3. حالت rejected :حالت پرامیس وقتی reject رو صدا بزنیم در حالت Rejected قرار می‌گیره. یعنی عملیات ناهمگام موفقیت‌آمیز نبود:توی این کد، پرامیس بعد از 3 ثانیه توی وضعیت Rejected قرار می‌گیره چون reject رو صدا زدیم.نکته‌ای که باید در نظر داشته باشیم اینه که پرامیس فقط می‌تونه توی یک کدوم از حالت‌های Fulfilled و یا Rejected قرار بگیره:خیلی سعی کردم مفهوم promise در جاوا اسکریپت رو به زبان خیلی ساده و خفن توضیح بدم.امیدوارم که متوجه شده باشین.اگه از این مقاله خوشت اومد، ازت میخوام که این مفهوم رو به بقیه هم یاد بدی و برام دعا کنی.دوستون دارم. سعید عبدالهی سعید عبدالهی Sat, 04 Nov 2023 13:39:40 +0330 https://virgool.io/@saeed_abdollahi/%D9%85%D9%81%D9%87%D9%88%D9%85-hoisting-%D8%AF%D8%B1-%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-ffzl4w2d5gpa hoisting in jsسلام رفقاامیدوارم حالتون عالی باشه.اوایل که داشتم جاوا اسکریپت رو یاد میگرفتم، بعضی از کدهایی که مینوشتم باگ داشت و مینوشت: RefrenceError یا SyntaxErrorواقعا نمیدونستم ایراد کار کجاست....بعد از مدتی متوجه شدم که یه مفهومی در جاوا اسکریپت وجود داره به نام hoisting که مطمئنم خیلیامون خواسته یا ناخواسته باهاش دست و پنجه نرم کردیم تا این ایرادات رو برطرف کردیم.امروز میخوایم یاد بگیریم که hoisting چیه؟ در جاوا اسکریپت چطوری استفاده میشه؟ و ....خب بریم ببینیم hoisting که میگن سخته سخته چیه؟مفهوم hoisting در لغت به معنی بالا بردن، بالا اوردن هستش.حالا یعنی چی؟یعنی آقا یا خانم محترم، نصف باگ هایی که داری باهاشون دست و پنجه نرم میکنی برای اینه که داری از یه متغیر در جاوا اسکریپت استفاده میکنی ، بدون این که اون بیچاره رو تعریف کنی.این مثالو نگاه کن:مثال غلطتو این مثال گفتم که دو تا سیب دارم، بیا اونارو تو کنسول نمایش بده.جاوا اسکریپتم میاد میگه، نه داداش از این کارا نکن با مااااااااااااااا.بهت ارور پایینو نشون میده:اروریعنی تو اصلا اپلی برای من تعریف نکردی که حالا میخوای ازش استفاده کنی.... اول متغیر سیب رو تو خط بالاش برام تعریف کن، بعدا ازش استفاده کن....تموم شد و رفت.پس اگه میخوای به باگ نخوری، عکس پایینو ببین:مثال درستپس هرچندتا متغیر که داری، اول بیا تعریفش کن(حالا فرق نداره با let تعریف میکنی یا const) ، بعدا استفاده کن.اینم از مفهوم hoistingیه نکته مهم: سعی کنن همیشه تو خط اول فایل جاوا اسکریپتبنویسی: “use strict”خییلی خییلی میتونه به کمکت بیاد.امیدوارم با مفهوم hoisting آشنا شده باشی. خیلی تلاش کردم که به سادگی این مطلب رو بنویسم تا همه بتونن استفاده کنناگه دوست داشتی، تو هم این مطلب رو به بقیه یاد بده تا دیگه به مشکل برنخورن.دوستون دارم. سعید عبدالهی سعید عبدالهی Fri, 03 Nov 2023 18:24:43 +0330 https://virgool.io/@saeed_abdollahi/%D9%85%D9%81%D9%87%D9%88%D9%85-getter-and-setter-%D8%AF%D8%B1-%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-zabfysf12fb2 getter and setter in JavaScriptسلام رفقاامیدوارم حالتون عالی باشه.یه مفهوم مهم در جاوا اسکریپت رو امروز میخوایم خیلی راحت یاد بگیریم.میخوایم ببینیم getter و setter چیه؟ و چجوری میشه ازش استفاده کرد.فرض کن من یه آبجکت در جاوا اسکریپت به صورت دستی ساختم.مثالو نگاه کن:getter in jsتوضیح مثال: در اینجا من یه آبجکت ساختم کهاسمش: سعید (پراپرتی)فامیلیش: عبدالهی (پراپرتی)زبانش: فارسی (پراپرتی)به تک تک خط های بالا یه پراپرتی (property) میگن.حالا من میخوام مقدار پراپرتی language رو نگه دارم.در اون صورت از get استفاده میکنم. بعدش یه اسم میزارم مثلا lang()در نهایت میگم همون آبجکته بووووووود (this) ، بیا زبانشو برام نگه دار و روی صفحه نشون بده.این از مفهوم getter**************************بریم سراغ setter ؟اینجا دیگه کار راحته.با همون مثال بالا میرم جلو.من میخوام زبانش اون شخص رو به صورت داینامیک وارد کنم نه دستی.اصلا زبانش فارسی نیست، انگلیسیه...عکس پایینو نگاه کن:setter in jsاینجا هم همون آبجکت رو دارم. به جاوا اسکریپت گفتم که پراپرتی language رو مثلا اشتباه وارد کردم، حالا میخوام به صورت داینامیک تو تغییرش بدی.پس set رو تعریف میکنم.و بعدش میگم که زبان اون آدمه انگلیسیه و در نهایت مقدارشو عوض کن.این از setter و getter .خدایی کلی مقاله خوندم تا خودم این موضوعو بفهمم....اگه با این دو مفهوم آشنا شدی و یادش گرفتی، ازت میخوام که تو هم به بقیه یاد بدی. همین.دوستون دارم. سعید عبدالهی سعید عبدالهی Fri, 03 Nov 2023 14:42:57 +0330 https://virgool.io/@saeed_abdollahi/%D9%85%D9%81%D9%87%D9%88%D9%85-closure-%D8%AF%D8%B1-%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-n9iskzc6pi5l closure in JSسلام رفقا. امیدوارم حالتون عالی باشه.یکی از سوالاتی که ممکنه به عنوان JavaScript developer در مصاحبه های شغلی ازت بپرسن، اینه که closure در جاوا اسکریپت چیه و چی کار میکنه؟شاید اولش خیلی سخت به نظر برسه ولی اگه این مقاله رو تا آخر بخونی خیلیییی راحت با این مفهوم آشنا میشی. بهت قول میدم...تعریف closure در یه جمله: یعنی زمانی که تابع بتونه هم از متغیرهای درونی و هم از متغیرهای بیرونی خودش استفاده کنه...تماااااااااام.به صورت کلی، متغیرهایی که در جاوا اسکریپت ساخته میشن، 2 نوع هستند:1. متغیرهای global2. متغیرهای localمتغیرهای گلوبال در همه جای جاوا اسکریپت در دسترس هستند و میشه ازشون استفاده کرد.(هیچ محدودیتی نداره)در حالی که....متغیرهای لوکال فقط درون یه scope یا تابع در دسترس هستن و بیرون از تابع به هیچ دردی نمیخوره.شروع یه داستان:بزار این مفهوم رو با یه داستان خیلی باحال و کوتاه که خودم ساختمش برات بگم.فرض کن یه تابع تو جاوا اسکریپت ساختی و این تابع عزیز ما قصد داره به یه مسافرت بره...آقای تابع یه کوله پشتی برای خودش برمیداره و هرچی متغیر و دستور و لوازم شخصی داره، داخلش قرار میده و هیچ وقت این کوله پشتی رو از خودش جدا نمیکنه.هر زمان که بخواد، میتونه زیپ کوله پشتی رو باز کنه و هرچی دوست داره رو استفاده کنه. (متغیرها، دستورات و ....)مثالو نگاه کن:متغیر لوکال(در اینجا آقای تابع یه متغیر تو کوله پشتی خودش داره و خیلی راحت میتونه ازش استفاده کنه)آقای تابع حتی میتونه از منابع دیگران هم بدون نگرانی استفاده کنه و اونارو هم در کنار خودش داشته باشه.مثال :متغیر گلوبال(در اینجا هم آقای تابع تو کوله پشتی خودش هیچ متغیری نداره و از کس دیگه ای قرض میکنه و استفاده میکنه)تموم شد و رفت. این یعنی مفهوم closureما closure هارو هیچ وقت دستی تنظیم نمیکنیم. خود جاوا اسکریپت اونو به صورت اتومات میسازه.فقط کافیه تو با مفهوم و نحوه ی کار کردنش آشنا بشی.خدایی هیچ محتوایی رو پیدا نکردم که این قدر ساده و باحال این مفهوم رو توضیح بده. پس تصمیم گرفتم خودم یه مقاله بنویسم.اگه خوشت اومد برای بقیه هم این مفهومو توضیح بده و برام دعا کن.دوستون دارم سعید عبدالهی سعید عبدالهی Wed, 01 Nov 2023 18:08:00 +0330 https://virgool.io/@saeed_abdollahi/7-%D8%B9%D8%A7%D9%85%D9%84-%D9%85%D9%87%D9%85-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%85%D9%88%D9%81%D9%82-%D8%B4%D8%AF%D9%86-%DB%8C%D8%A7-%D9%86%D8%B4%D8%AF%D9%86-wdb2scozrsnu سلام رفقا امیدوارم حالتون خوب باشه. برای آماده کردن این مطلب خدایی خیلی زحمت کشیدم، خیلی مطالعه کردم، خیلی سرچ کردم. ازت می‌خوام که تا آخرین کلمه این مقاله رو بخونی و هرچی یاد گرفتی، به دو نفر دیگه از دوستاتم یاد بدیهمین.... بریم که شروع کنیم... مطمئنم که همه جا حرف از موفق شدن یا نشدنه. هرجا میری یه نفر میگه که اگه فلان کارو کنی موفق میشی، فلان حرفو بزنی موفق میشی، اینجوری رفتار کنی موفق میشی و... ولی واقعا موفقیت چیه که همه دنبالشن؟ چرا همه می‌خوان موفق بشن؟ اصلاً از کجا بفهمیم که من و تو موفق هستیم؟ به نظرت موفقیت که همه دارن هرروز درباره‌اش حرف می‌زنن، کیه، چیه، کجاست، چه شکلیه، کی میاد و... موفقیت چیه؟ یه تعریفی که خودم یاد گرفتم اینه که موفقیت یعنی رسیدن به خواسته‌ها به علاوه خوشحالی از خودتچند بار بخونش... اگه یه خواسته‌ای داری که واقعا برات مهمه و بری دنبالش و صد البته در زمان انجام اون کار از خودت راضی و خوشحال باشی یعنی موفق هستیموفقیت یه چیز نسبیه و هر کسی یه جوری تعریفش می‌کنه. از نظر منم موفقیت اینجوری تعریف میشه. 7 عامل مهم و تاثیرگذار موفقیتمی‌خوام خیلی خودمونی این 7 تا عاملو بهت توضیح بدم. شاید اینا رو می‌دونستی شایدم نه... 1. خانواده2. اینترنت و فضای مجازی 3. صدا و سیما 4. آموزش و پرورش 5. دین و مذهب 6. محل زندگی 7. دوستان و الگوهاواقعا خانواده تو موفق شدن یا نشدن من و تو مهمه؟!صد البته، به همین خاطر اولین عامل موفقیت گذاشتمش.حتماً دور و اطراف دیدی که میگن فلانی باباش طلافروشه پسرشم برده پیش خودش... فلانی مادرش استاد دانشگاهه دخترشم... خانواده خیلی مهمه؛ از چند جنبه مختلف، مثل طرز واکنش نشون دادن به مشکلات و چالش ها، طرز رفتار، گفتار، طرز لباس پوشیدن، غذا خوردن و حتی طرز نگاهشون به موفقیت.بزار یه چیز عجیب ولی واقعی بهت بگم. می‌دونستی شخصیت اصلی ما تو سنین ۱ تا ۶ سالگی ساخته می‌شه یعنی حتی قبل از رفتنمون به مدرسه... چیزی که اصلاً تو خانواده‌های ما ایرانیا بهش توجه نمیشه و یه گپ بزرگه، یعنی تو این سنین می‌تونی بفهمی که فرزندت به چی علاقه داره، استعدادش چیه و...در کل خانواده یک عامل مهم و تاثیرگذار در موفقیت توئه 2. اینترنت و فضای مجازیعامل دومی که تو موفقیت تو نقش داره همینه. تو از روی سرچ‌هایی که داری می‌تونی بفهمی که به چی علاقه داری، در چه چیزهایی استعداد داری. پس هدفمند برو جلو. فضای مجازی هم که نگم برات؛ از آدمایی که تو اینستا فالو می‌کنی، کم کم دارن شخصیت و سبک نگاهت رو عوض می‌کنن تا توییتر، فیسبوک و... 3. صدا و سیمااینم مگه مهمه؟ 100 درصداینم به ماها تا الان نگفتن ولی صدا و سیما هر روز داره به مغز ما خوراک مفتی میده که بیا بشین پیش من. چیکار داری بیرون چه خبره... من همه رو چه درست یا غلط بهت می‌گم... بهت میگم که پول چیز بدیه، آدمای پولدار همشون دزد و قاچاقچین، بهت میگم که دنیا پر از جنگ و فساد و بدیه... فکر کنم قضیه دستت اومد4. آموزش و پرورشیا خدا؟! آموزش و پرورش مگه تو موفقیت من و تو نقش داره؟ آفرین.... ما از سن تقریباً ۷ سالگی وارد مدرسه میشیم تا تقریبا ۱۸ سالگی (هر شخصی متفاوته) و اگه ادامه تحصیل بدی و بری دانشگاه، تعداد سال همینجوری بیشتر میشه، برای خود من تا ۲۴ سالگی که مقطع کارشناسی باشه طول کشید... تو این مقطع از عمری که خدا بهت عطا کرده، جز چرت و پرت، چیزی بهت یاد نمیدن. مطمئنم خیلیامون اینو قشنگ لمس کردیم شایدم بعضیا باشن که هزار تا مثال نقض بیارن... 5. دین و مذهباین موضوع رو باز نمی‌کنم ولی دین و مذهب می‌تونه نگاهتو به موفقیت عوض کنه... 6. محل زندگینگم برات که چقدر مهمه جایی که تو الان داری زندگی می‌کنی می‌تونه بگه چقدر تو زندگی موفقی... می‌تونم بگم تقریباً ۳۰ درصد تاثیرگذاره.خواهشاً جبهه نگیرید که من هزار تا مثال می‌تونم بیارم که... 7. دوستان و الگوهای زندگیاینو خیلی شنیدی که تو میانگین ۵ نفر از اطرافیانت هستی... واقعا درسته... مراقب باش با کیا میگردی، کجاها میری، کیارو الگوهای زندگیت قرار میدی و... تو این مقاله خیلی خودمونی خواستم بهت بگم که چه عواملی می‌تونه تو موفق شدن یا نشدن من و تو تاثیرگذار باشه... شاید برای فهم بیشتر، نیاز باشه چند بار دوباره این مطلبو بخونی. به نظرت چه عوامل دیگه‌ای می‌تونه تاثیرگذار باشه؟؟منتظر شنیدن نظراتت هستمخیلی دوستون دارم❤ سعید عبدالهی سعید عبدالهی Wed, 18 Oct 2023 18:05:40 +0330 https://virgool.io/@saeed_abdollahi/%D8%AA%D8%AC%D8%B1%D8%A8%D9%87-%D9%87%D8%A7%DB%8C-%D9%85%D9%86-%D8%AA%D8%A7-24-%D8%B3%D8%A7%D9%84%DA%AF%DB%8C-gdunrfx4o8qt سلام رفقا. امیدوارم حالتون عالی باشه. من متولد اسفند 1378 هستم و تا به اینجای مسیر، کلی پستی و بلندی رو تجربه کردم و دوست دارم یه سری تجربه های خودم رو برای شما به اشتراک بزارم تا بتونید ازش استفاده کنید. (راستی این اولین پست من در ویرگوله?) برای آرزوها و هدفات بجنگ، نزار هیشکی از مسیری که داری میری منصرفت کنهیاد بگیر که مسئولیت زندگیتو کامل قبول کنی و دنبال مقصر نگردیسعی کن هدفات رو به هیشکی نگی، چون حتی نزدیک ترین افراد زندگیت هم چشم دیدن موفقیت تو رو ندارن. هوشمندانه کار کن. دنبال یه شغل خوب باش که بتونی ازش درآمد داشته باشی. هیشکی یه شبه نتونسته با اینستا، تلگرام، یوتیوب و... پولدار بشه. اینا همش کلاه برداریه. تلاش کن، تلاش کن، تلاش کنزبان انگلیسی رو حتما یاد بگیر و باشگاه فراموش نشه. تنهایی به مسیرت ادامه بده، تا زمانی که موفق نشدی، هیشکی حرفاتو قبول ندارهمدرسه و دانشگاه هیچی توش یاد نمیدن. برو دنبال یادگیری یه مهارت که در آینده بتونی ازش درآمد داشته باشیهیچ وقت خودتو با دیگران مقایسه نکن. اونی که میگه من از صفر شروع کردم شاید داره زر میزنه (صفر یکی با ماشین و خونه شروع میشه و صفر یکی دیگه با یه دفتر اجاره ای تو پایین شهر) امیدوارم این مطلب به کارت بیاد. دنبال لایک و کامنت هم نیستم. اگه خوشت اومد، این تجربه ها + تجربه ی خودت رو، به 2 نفر از اطرافیانت منتقل کن که دیگه این اشتباهات رو انجام ندنخیلی مخلصم❤ سعید عبدالهی سعید عبدالهی Mon, 02 Oct 2023 16:20:37 +0330