چند روز پیش برای یکی از سیستم هایی که داشتم می‌نوشتم نیاز شد که یک پنل ادمین داشته باشیم، اما من خیلی دوست نداشتم ادمین بر پایه وب باشه! چرا؟ نمیدونم!

با اینکه وقت کمی داشتم که این پروژه رو به انتها برسونم و از طرفی هم تو فکر بودم که چطور ادمین رو درست کنم (وب بزنم یا ی اپ اندروید بنویسم) یکدفعه چشمم به Electron خورد، البته قبلا هم اسمش خورده و بود و کلیت موضوع رو می‌دونستم که میشه با جاوا اسکریپت اپ دسکتاپ نوشت اما از شیوه کارش سر در نمی‌اوردم.

گفتم تعداد روزا کمه و خوب میشه خودمو تو مخمصه بزارم و ی تجربه جدید کسب کنم، و شروع کردم  به خوندن داکیومنت خود الکترون، توضیحات اولیه خوبی داده و با چنتا سرچ فهمیدم جیسوس کرایز! میشه React , Vue , Angular و .. رو بهش وصل کرد! در اصل هر چیز جاوا اسکریپتی بهش وصل میشه(همراه با یک WoooooW بلند!)

پس داکومنت اصلی رو بیخیال شدم! بریم سراغ بزرگترین دانشگاه مفتی-مجازی جهان، Youtube! و همچنین مقالات خوب جهان Medium!

هنوزم نمیدونم چرا یوتیوب فیلتره و من هر وقت بخام برم دانشگاه باید فیلتر شکن روشن کنم، هی یارو که اینو فیلتر کردی، خاک تو سرت 🙁

خب چنتا مقاله و ویدیو خوندم و دیدم و ذهنم کاملا اوکی شد که شیوه کارش چجوریاس و یسری پروژه سمپل آوردم بالا، همه چیز اوکیه پس حالا وقتشه React رو نصب کنیم، سخت ترین کار جهان! کلا از همون اول با کانفیگ React و Webpack مشکل داشتم و دارم و احتمالا خواهم داشت…

همینکه در مرحله سعی و تلاش بودم یک لایو ویدئوی خیلی خوب از Tim Ermilov یافتم که تو ۴۵ (با توضیحات خوب) الکترون و وب پک و React رو کانفیگ و نصب میکنه، بعدش یه دوره حدود ۱۰ قسمت هم داره که کارای باحالی انجام میده (البته برای تازه کاری جالب و باحالن و اپ های خاصی نیستن) که دیدنشون خوبه، البته من ندیدم این ۱۰ قسمت رو چون دیگه رفتم سراغ خود React و کار ساده بود، یسری جاها به مشکل بر خوردم ولی خب با چنتا سرچ کوچیک تونستم حلشون کنم.

پروژه کانفیگ React و Webpack رو هم توی گیتهاب گذاشتم گفتم شاید کسی خواست زودتر پیش بره و برای بعدا خودم هم خوبه…

خب رسیدم به مرحله ای از موضوع که میخاستم از axios استفاده کنم، هولی شت! باز هم مشکل همیشگی من با وب پک سرور! Cors!

حالت کلی تو پروژه های React هم یک افزونه no-cors نصب کردم رو کروم که دیگه از شر این ارور خلاص بشم، ولی اینجا هرکاری کردم نشد! تنظیمات سرور رو عوض کردم، تنظیمات Webpack رو تنظیم کردم، Express رو تنظیم کردم! mode رو روی no-cors گذاشتم اما نشد که نشد! Webpack لنتی! همش تقضیر اینه، هی دست مارو میزاره تو پوست گردو!

گفتم خب راه چاره چیه، اصلا Webpack رو حذف میکنم! بعدش رفتم تو خود ریپو پروژه الکترون تیم دیدم گویا اونم قسمت های بعدی Webpack رو حذف کرده، پس خوبه، مشکلی هم پیش نمیاد اصولا، غیر از Hot Reloader عزیز دل که از دستش میدم!

چه میشه کرد وقت کم بود و باید سریع تموم میشد، شروع کردم به حذف کردن و تنظیمات دوباره پروژه (از کامیت های خود تیم هم استفاده کردم) و البته گیتهاب رو هم بروزرسانی کردم، گفتم الان که بدرد نخورد در آینده هم بدرد نمیخوره، در نهایت هم پروژه خودمو با پکیجر خروجی گرفتم و تمام!

جدای از شوخی Hot Reloader خیلی حرفه! سعی کنید تا جای ممکن با این ابزار کار کنید…

تمام این مسائل توی ۳ روز انجام شد، زیاد نیست ولی کم هم نیست، سریعتر هم میشد پیش رفت.

پیشنهاد میکنم Electron رو توی برنامه کاریتون قرار بدید، و البته نیازی هم به خرید کورس های Udemy و Egghead و اینا نیست و از طریق همین دوره که گفتم و باقی ویدئو های یوتیوب میشه قضیه رو جمع کرد، اگر هم Vue، React یا Angular  یا هر فریموورک دیگه ای کار میکنید کارتون خیلی راحته، حتی اگر کار نمیکنید پیشنهاد میکنم اول یکی از اینارو یاد بگیرید (از طریق همون Youtube و مقالات Medium) و آگاه باشید خود به خود Electron رو بلدید!(همون جاوا اسکریپت خودمونه دیگه، دو تا دستور جدید یاد میگیرید) البته باز هم یسری پکیج ها و ابزار های مخصوص به خودش داره که قطعا کار کردن باهاشون راحته و تو چند روز میتونید جمعشون کنید (من کلا تو این پروژه غیر از dialog الکترون که همون مسیج باکس سیستم عامل هست از بقیه ابزار های مخصوصش استفاده نکردم، ینی نیاز نشد که استفاده کنم)

 

امیدوارم همیشه موفق باشید و به یادگیری ادامه بدید، به یادگیری در مخمصه تحویل پروژه هم ایمان بیارید!