https://virgool.io/feed/@m.saleh.sedeghi fa 2026-04-14 05:06:33 https://files.virgool.io/upload/users/3000395/avatar/okgCJi.jpg?height=120&width=120 https://virgool.io/@m.saleh.sedeghi https://virgool.io/@m.saleh.sedeghi/what-is-alpine-ymjsik5j1baj اول از همه یه عذرخواهی بکنم از کسایی که روی پست قبلی کامنت گذاشتن و جواب شون رو ندادم، زندگی بعضی وقتها یه جوری پیش میره که وبلاگ نویسی که هیچی، غذا خوردن هم از یاد آدم میره! ولی به هر شکل من شرمندم...و حالا میرسیم به پست دوم:چرا به آلپاین بپردازیم؟به عنوان اولین پست آموزشیم، تصمیم گرفتم بیام سراغ قسمتی از دنیای برنامه نویسی که اصلا دوستش ندارم، نه به خاطر اینکه خودش بد باشه ولی خب سلیقه من نیست و به خاطر جبر روزگار مجبوریم باهم بسازیم! کدوم قسمت؟ توسعه فرانت اند! اونم نه قسمتی که پر از رنگ و طرح و چیزهای گوگولیه، بلکه قسمتیش که منطق داره...این روزها همه پروژه‌های وب، نیاز به فرانت اند های پر از قابلیت دارن و برای این کار، شما چند تا آپشن بیشتر ندارین1. کتابخونه‌هایی مثل ری‌اکت و ویو که قدرتشون بر کسی پیچیده نیست ولی خب خیلی سنگین هستن و روی هر پروژه‌ای کارآمد نیستن.2.کتابخونه قدیمی جی کوئری که ... ولش کن پشت سر مرده حرف نزنیم، خوبیت نداره!و در نهایت راه سوم که آلپاین هستش.آلپاین چیه؟آلپاین یه کتابخونه کوچیک و جمع و جور جاوااسکریپتی هستش برای زمان هایی که نیاز ما به اندازه یک فریمورک بزرگ نیست. خیلی وقت‌ها فقط میخواهیم چند تعامل ساده بسازیم:باز و بسته شدن منو، تغییر متن با کلیک، فرم‌هایی که بدون رفرش شدن صفحه به‌روزرسانی میشن و مواردی از این دست.سازنده‌اش، Caleb Porzio (همون کسی که Livewire را ساخته)، Alpine رو با هدف «سبکی و سادگی Vue در قالب HTML» ایجاد کرد.شعارش هم خیلی گویاست:“Think of it like Tailwind for JavaScript.”«بهش مثل Tailwind در دنیای جاوااسکریپت نگاه کن.»یعنی دقیقاً همون فلسفه: حداقلگرایی، سرعت بالا و نوشتن کد در خود HTML.خب دیگه توضیحات اولیه و جی‌پی‌تی نوشت کافیه! بریم سراغ قسمت اصلی ماجرابخش های اصلی و غیر اصلیخب بریم سراغ آشنایی اولیه با بخش های مختلف آلپاین، برای اطلاعات تکمیلی هم داکیومنتیشنش رو سرچ کنید و ببینید.x-data: شروع داستانهمه چیز از x-data شروع میشه، قسمتی که ما متغیرها و استیت هامون رو توش ذخیره میکنیم.x-dataهمونجوری که توی عکس معلومه، متغیرها، استیت‌ها و چیزهای دیگهای که نیاز داریم، به شکل key-value توی این قسمت تعریف میشن و هرچیزی که اینجا تعریف کنیم، توی خود این div و تموم فرزند هاش قابل دسترسی هستن.یه نکته هم بگم که منطق اینجا، همون منطق جاوا اسکریپته یعنی شما میتونید تابع هم اینجا تعریف کنید و توی یه متغیر بریزید.x-text: اولین نتیجهحالا که متغیرمون رو تعریف کردیم، وقتشه یه نتیجه ازش ببینیم که لاقل دلمون خوش باشه. پس میایم کدمون رو آپدیت میکنیمx-textبا نوشتن x-text میتونیم متنی که میخوایم رو توی بخشی که میخوایم بنویسیم. متغیرهایی که توی x-data درست کردیم، توی فرزند ها هم قابل دسترسی هستن. پس یه div داخل قبلی درست میکنیم و متغیر قبلی رو صدا میزنیم. نتیجه کار هم میشه این شکلی:متن داخل message رو چاپ کردهx-on: شروع تعاملی شدنقسمت بعدی x-on هستش که زمانی ازش استفاده میکنیم که بخوایم ایونت های مختلف جاوااسکریپت رو صدا بزنیم. مثلا بخوایم روی یه دکمه کلیک کنیم.اینجا من اول با x-data یه متغیر درست کردم و بهش مقدار اولیه دادم، و با x-text مقدارش رو نشون میدم. قسمت اصلی از x-on شروع میشه که من با استفاده از اون، ایونت click شدن رو کنترل میکنم و بهش گفتم که با هر بار اتفاق افتادنش، مقدار متغیر رو زیاد کن. اینم قبل و بعد از سه بار کلیک کردن:البته برای کلیک کردن،اکثرا از شکل خاص خودش استفاده میکنن و به جای x-on:click از click@ استفاده میکنن.اینجوری خوانا تر و قابل فهم تره اما از لحاظ منطقی، هیچ فرقی با قبلی ندارهx-model: جایی که جادو شروع میشهتا اینجا ما یادگرفتیم که یه متغیر رو با x-data تعریف کنیم، با click@ یه اتفاقی رو رقم بزنیم و با x-text متنمون رو نشون بدیم. حالا فرض کنید که میخوایم کاربرمون یه کاری رو انجام بده، مثلا یه اطلاعاتی رو پر کنه، یا یه چیزی رو انتخاب کنه؛ اینجاست که x-model خودنمایی میکنه.توی عکس بالا من اول یه متغیر خالی تعریف کردم و بعدش یه input گذاشتم که کاربر بتونه اسمش رو وارد کنه، و با x-model، باکس رو به متغیرمون متصل کردم. تهش هم یه x-text گذاشتم که نتیجه رو ببینیم. حالا اگه کاربر چیزی داخل باکس وارد کنه، آلپاین در لحظه متغیر رو آپدیت میکنه و مقدار جدید رو جایگزین میکنه!با تایپ کردن هر حرف، آلپاین در لحظه متغیر رو آپدیت میکنه و باعث میشه که نوشته بعد از متن هم تغییر بکنهالبته x-model فقط به یه input ساده خلاصه نمیشه و جاهای زیادی میشه ازش استفاده کرد؛ مثلا زمانی که کاربر میخواد بین چند تا گزینه انتخاب کنه:تعریف radio و وصل کردن گزینه ها به متغیر answer با x-modelقبل از انتخاب گزینهآپدیت شدن خودکار متن بعد از انتخاب گزینهx-if و x-show: شرط گذاشتننوبتی هم باشه نوبت شرط هاست. x-if مثل یه if عادی عمل میکنه و اگه شرط داخلش برقرار باشه، اون قسمت رو از صفحه حذف میکنه یا اضافه میکنه. x-show هم کارش پنهان کردن و نشون دادن اجزای مختلفه. دقت کنید به کلماتی که استفاده کردم، x-if کلا از DOM المنت ها رو حذف میکنه یا دوباره میسازتشون اما x-show فقط یه display:none روش میذاره.الان باید بتونید قسمت های مختلف این کد رو متوجه بشید. با x-data دوتا متغیر مختلف تعریف شده، یکی چیزیه که کاربر از طریق input وارد میکنه و اون یکی هم پسورد واقعی هستش. هر وقت کاربر mohammad1234 رو وارد بکنه، اول شرط if درست میشه و متن درست بودن پسورد نشون داده میشه و بعد از اون شرط x-show برقرار میشه و اون بخش از کد هم نشون داده میشه.نکته: دقت کنید که x-if رو فقط میشه توی template استفاده کرد که خب منطقی هم هست. اگه نمیدونید چرا؟ سرچ کنید یا از جیپیتی بپرسید.تا همینجا کافیه...بقیه مطالب رو توی پست بعدی میگم که نه زیاد طولانی بشه و نه خسته کننده. اگه نظر یا پیشنهادی دارین خوشحال میشم توی کامنت ها بهم بگید تا دفعههای بعد، پستهای بهتری بذارم. لایک هم یادتون نره!تا پست بعدی، مراقب خودتون و خوبیهاتون باشید.❤️ محمدصالح صدیقی محمدصالح صدیقی Mon, 13 Oct 2025 22:46:01 +0330 https://virgool.io/@m.saleh.sedeghi/%D8%A7%D8%B2-%D8%A7%D9%86%D8%AF%D8%B1%D9%88%DB%8C%D8%AF-%D8%AA%D8%A7-%D9%84%D8%A7%D8%B1%D8%A7%D9%88%D9%84-%D8%AA%D8%AC%D8%B1%D8%A8%DB%8C%D8%A7%D8%AA-%D8%B4%D8%B1%D9%88%D8%B9-%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1-%D9%85%D8%B3%DB%8C%D8%B1-%D9%85%D9%86-ylhoauqttoqn به عنوان اولین پستم میخوام درباره اتفاقی صحبت کنم که قدم اول مسیر شغلی‌م شد. هنوز ادامه داره، ولی تا همین‌جا هم روی مسیرم اثر بزرگی گذاشته.بعد از سه سال تلاش نه‌چندان موفق برای یادگیری برنامه نویسی اندروید و کلنجار رفتن با درس و زندگی دانشجویی توی دانشگاه تهران، تابستون امسال برای پاس کردن واحد کارآموزی دانشگاه، مجبور شدم دنبال شرکت های نرم‌افزاری بگردم. حاصلش هم شد پیدا کردن یه شرکت کوچیک، توی شهر کوچیک خودمون، اونم توی شاخه‌ای که هیچ شباهتی به چیزهایی که بلد بودم نداشت. طراحی سایت با Laravel!و حالا میخوام درباره چیزهایی که توی یک ماه و نیم کارکردن توی این شاخه و این شرکت یاد گرفتم رو باهاتون به اشتراک بذارم.1. هیچ تلاشی بی ثمر نیستوقتی کار توی اون شرکت رو قبول کردم، بزرگترین چیزی که حس می‌کردم، حس شکست بود؛ حس می‌کردم چند سال اخیرم هدر رفته. اینکه از چند ماه قبل از شروع دانشگاه، داشتم سعی می‌کردم برنامه نویسی اندروید رو یاد بگیرم و در نهایت به خاطر مشکلات شخصی و غیرشخصی و درس های دانشگاه( و البته نبود موقعیت شغلی توی شهرهای کوچیک)، مجبور شدم از صفر شروع کنم، به شدت اذیتم می‌کرد.در نهایت با حال بد کار رو شروع کردم و با دنیای جالبی مواجه شدم؛ درگیری با کد های ساختار مند و تا حدی سخت زبان Java، کدهای به شدت راحت Kotlin، خودکار نبودن هیچ چیز در ++C، نفهمیدن Python و بقیه چیزهایی که در زمان‌های مختلفی دانشگاه مجبورم کرده بود یادشون بگیرم. باعث شده بود به سطح جالبی از سازگاری برسم و هیچ مشکلی توی یادگیری رفیق جدیدم، آقای PHP نداشته باشم!2. فشار ددلاین، یک هدیه نه یک نفریناگه شما هم جزو کسایی باشید که درس‌ها رو انباشته می‌کنن (یا می‌کردن) برای شب امتحان، احتمالا به یک حقیقتی پی بردید؛ قدرت بی‌پایان ذهن تحت فشار ددلاین!مثال های زیادی برای این قضیه وجود داره، مثلا همون جزوه‌ای که شما توی سه روز نتونستید بخونید، توی یک شب کامل جمع میشه. مهمون سرزده که میاد، خونه که شبیه بازار شام بود، توی پنج دقیقه مثل دسته گل میشه.وقتی که رفتم توی شرکت، سیل چیزهای جدیدی که باید یاد می‌گرفتم به سمتم سرازیر شد. اولین بارم نبود که کلی چیز برای یادگرفتن وجود داشت؛ بلکه اولین باری بود که زمان به شدت کمی برای یادگیریشون داشتم. وقتی به چت‌جی‌پی‌تی می‌گفتم برام برنامه ریزی فشرده انجام بده، در حداقلی ترین حالت چند ماه وقت میزاشت اما من فقط دو هفته وقت داشتم.روزها مثل برق و باد میرفتن و دوره هایی که داشتم می‌دیدم هم انگار تمومی نداشت. بعد از تموم شدن دو هفته‌، شاید دوره ها تموم نشده بود، اما من بخش های اصلی هرچیزی رو یاد گرفته بودم که برای شروع، کافی و حتی بیش از مقدار مورد نیاز بود.3. یادگیری واقعی، فقط توی پروژهیکی از چیزهایی که بعضی از آدم‌ها (مثل من) به شدت درگیرش میشن، ترس از شروع کارهاست. زمانی که من شروع کردم به یادگیری برنامه نویسی اندروید، دوره های مختلف جاوا رو دیدم، دوره های مختلف کاتلین رو شروع کردم، چندین دوره مختلف صفر تا صد اندروید رو شروع و تموم کردم و در نهایت نه چیزی بلد بودم نه نمونه کاری داشتم!حاصل سه - چهار سال برنامه ریزی های مختلف برای یادگیری کدنویسی، رزومه‌ای خالی و مهارتی در حد صفر بود و حاصل یک ماه و نیم تلاش برای یادگیری طراحی سایت، اینه که من میتونم خودم رو یک فول‌استک جونیور معرفی کنم. تفاوتشون؟ فقط دست به کد شدن و زدن پروژه‌های واقعی.زمانی که شروع به کدنویسی کردم، به ازای هر یک خط کد مجبور بودم چندین و چندبار یه سر به چت‌جی‌پی‌تی عزیز بزنم تا ببینم چرا چیزی که توی ذهنم کار می‌کنه رو نمیتونم توی سیستم پیاده کنم. اونم که هر جوابی که میداد یه باگ ریز داشت و من رو توی لوپ بی پایان سوال و جواب هایی می‌انداخت که به جواب نمی‌رسید، اما هرکدوم یه نکته‌ای داشت که بعدا به کار می‌اومد.4. منبع اصلی: دفترچه راهنماتوی کتاب دینی دبیرستان، یه جمله‌ای داشت که می‌گفت:برای یادگرفتن طرز استفاده صحیح هر وسیله، باید به سراغ دفترچه راهنمای آن رفت. دفترچه راهنمای انسان نیز قرآن است.به شخصه همیشه با این جمله مشکل داشتم چون روش یادگیری من همیشه فضولی کردن توی خود وسیله‌ها بود (انگلیسی بودن دفترچه راهنما هم مزید بر علت!). طبق عادت دوران طفولیت، پس از اینکه دستم به کد رسید و یادگرفتم که چطوری باید یاد بگیرم، رفتم سراغ فضولی در وسیله‌ها. اما کدنویسی، تنظیمات تلویزیون نیست که یه سری آپشن جلوت باشه و تو امتحانشون کنی و بفهمی چیکار می‌کنن؛ اینجا بحث بهترین روش برای انجام هرکار مطرحه. توی این دنیا (تا جایی که من یاد گرفتم) یا کدت نیاز به ریفکتور کردن و بازنویسی داره یا داری چرخ رو دوباره اختراع می‌کنی چون همیشه یکی قبل تو روش بهتری برای انجام این کار داره. بهترین کد و متد و فانکشن؟ اونی که سازنده این وسیله ساختتش. کجا میشه پیداش کرد؟ توی مستندات، داکیومنت‌ها و دفترچه راهنما!داکیومنتیشن یه ابزار، هم بهترین روش استفاده از اون ابزار رو در اختیارتون می‌ذاره، هم پر از مفاهیم جدیدیه که یادگیریشون کلی شمارو توی مسیرتون جلو می‌اندازه. اگه مثال بخوام بزنم، وقتی من میخواستم با دیتابیس کار کنم، مجبور به کشتی گرفتن با SQL و پیچیدگی‌هاش بودم، تازه اگه صرفا یه جدول ساده و چند تا ستون جلوم بود. اگه خدای ناکرده با ارتباطات چند به چند سروکار داشتم هم که دیگه حس می‌کردم عذاب الهی نازل شده! ولی وقتی با داکیومنتیشن Laravel آشتی کردم، فهمیدم که یه چیزهایی به اسم ORM وجود داره که کار رو خیلی ساده تر از قبل پیش می‌بره (از morph نگم براتون). حالا درباره اینکه ORM چیه و چرا و چگونه؟ توی پست‌های بعدیم مفصل توضیح میدم.خلاصه اینکه هیچ‌چیز جای مستندات رو نمی‌گیره. مستندات نه‌تنها بهترین روش استفاده از ابزار رو نشون می‌دن، بلکه پر از نکته‌هایی هستن که سال‌ها تجربهٔ آدم‌های دیگه پشتشه. پس اگر می‌خواید توی مسیر یادگیری جلو بیفتید، دفترچهٔ راهنما اولین جاییه که باید سراغش برید.و در نهایت ...این تجربه که هنوز هم ادامه داره، برای من مثل یک نقطهٔ عطف بود؛ نشونم داد شکست‌های قبلی واقعاً هدررفت نیستن، ددلاین می‌تونه دوست آدم باشه، یادگیری واقعی توی پروژه اتفاق می‌افته و بهترین منبع همیشه مستنداته.از این به بعد قراره تمرکزم توی پست هام بیشتر روی یاد گرفتن و یاد دادن نکات برنامه‌نویسی باشه اما هر تجربهٔ جدیدی که به دست بیارم (چه توی مسیر کارآموزی، چه پروژه‌های شخصی) اینجا باهاتون به اشتراک می‌ذارم.شما تا حالا تجربهٔ تغییر مسیر یا شروع از صفر توی برنامه‌نویسی داشتید؟ چه درسی از مسیرت گرفتی که ممکنه به من یا بقیه کمک کنه؟ پیشنهاد برای بهتر شدن پست‌ها چطور؟ برام توی کامنت‌ها بنویسش.اگه این مطلب برات مفید بود، خوشحال می‌شم لایک کنی تا بدونم ادامه دادن این مسیر ارزشمنده❤️ محمدصالح صدیقی محمدصالح صدیقی Mon, 18 Aug 2025 23:41:42 +0330