از ایده تا اجرای یک پروژه ی نرم افزاری آزاد - اذکار نور

یک بعد از ظهر عادی، روز نمیدونم چند شنبه ولی فکر کنم آخر هفته بود. یه ایده به ذهنم اومد. خب می دونید خوندن اذکار صبحگاه و شامگاه برای مومن چیز خیلی مهمیه. یه جورایی اگه نخونی حس میکنی یه کاریو انجام ندادی و انگار امن نیستی. و خب دلیل محکم از قرآن و سنت هم براش هست که مومن باید روی این اذکار روزمره پایبند باشه و برخی از این اذکار جایگاه و فضیلت فوق العاده ای دارند که آدم نمیتونه از دست بده. البته توی این مطلب نمیخوام وارد جزییات دینی این موضوع بشم و فقط روایت تکنیکالی از این ماجرا رو براتون روایت میکنم.

یه دید یه برنامه نویس نگاه کنید که چطوری یه ایده به ذهنش میاد و اون ایده رو به واقعیت تبدیل میکنه. بعضی وقت ها ایده ها ساده اند و میشه توی چند ساعت یا چند روز انجامشون دادم و بعضی وقت هام زمان برن و انرژی بیشتری می طلبن.

خب به عنوان یه برنامه نویس که این مسئله براش مهمه و چون همه ی اذکار رو حفظ نیستم و از طرفی با سیستم راحتم و موبایل معمولا دم دستم هست خواستم یه پلتفرم بسازم که توی دستگاه های مختلف ران بشه و همه بتونن استفاده کنن. ساده باشه و خصوصا فارسی باشه. برنامه های خوبی به زبان عربی و انگلیسی هست، مواردی هم به زبان فارسی هست اما هیچکدوم اونقدر خوب نبودن که نخوام این پروژه رو استارت بزنم. از طرفی ایده های برای توسعش دارم که این پروژه رو بخصوص میکنه.

خب اولین کاری که کردم انتخاب یه پالت رنگی بود. که رنگ های قهوه ای لایت و دارک و سیاه و سفید رو انتخاب کردم و رفتم توی فیگما شروع کردم برنامه رو موبایل فرست طراحی کردم. mobile first یعنی اول برای موبایل طراحی کنی برای برای تبلت و لپ تاپ و مانیتور های بزرگتر.

به عنوان یه برنامه نویس بک اند اونقدرا از طراحی لذت نمی برم، ولی وقتی پروژه خاص باشه طراحیشم لذت بخشه. خصوصا که میدونم ارزشش رو داره و برام یه اثر معنوی و صدقه ی جاریه میشه. بالاخره دیر یا زود پرونده ی اعمالمون بسته میشه و باید به فکر passive income اخروی باشیم :)

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

خب توی طراحی موبایل یه سری ایده ها به ذهنم اومد که سریع رفتم توی فیگما اصلاحش کردم و قابلیت کولِ هات ریلود پروتوتایپ توی فیگما باعث میشد بیشتر و بیشتر با المان ها، سایز ها و… کار کنم تا اینکه به یه نقطه ی مطلوبی رسیدم. من از اصول طراحی رابط کاربری و تجربه ی کاربری زیاد چیزی نمیدونم جز یه سری چیزایی که بیشترشو از دوست خوبم ادیب یادگرفتم مثل اصل KISS و Visual Hierarchy و چیزای دیگه. در کل فکر میکنم به اندازه ای خوب هست که به نسبت خیلی از اپ های توی این حوزه ساده تر و بهتر باشه. شایدم نیست و من این طوری فکر میکنم. به هر حال به زودی مشخص میشه.

خب حالا دیگه تقریبا هوا تاریک شده بود. بعد از خوندن نماز و خوردن یه چیزی صرفا برای اینکه احساس گرسنگی مفرط نداشته باشم، اومدم VsCode رو باز کردم و شروع کردم اولش فولدر استراکچرم رو درست کردن. طبق معمولا با فایل index.html و پوشه ی Asset شروع کردم و زیرمجموعه هاش رو هم ساختم. فایل های جاوا اسکریپت و سی اس اس که فعلا خالین و فقط توی Boilerplate فایل HTML خودم اومم اونا رو وارد کردم.

خب بعدش شروع کردم به نوشتن کد های HTML، حواسم هم به سمنتیک بود که SEO رو خوب انجام بدم چون بیشتر ورودی اولیه ما از سئو خواهد بود، خصوصا بعد از فاز بتا که پلتفرم استیبل میشه. البته تا اون زمان راه زیادی داریم و کلی باید روش کار کنم. 

شاید باورتون نشه اما یه حس خیلی خوبی دارم و این حس بهم میگه این پروژه خیلی خوب لانچ میشه و موفق میشه. من که رو MVP حساب کردم و کلی برنامه برای توسعه و نگهداریش توی دراز مدت دارم. حتی دامنش رو هم به صورت تستی دو ساله گرفتم. یعنی فکر میکنم توی این دو سال قراره به نسخه ی استیبلش برسه و البته که بعدش با تبلیغات سعی میکنم کراس پلترفمش کنم و  پروژه های کناریشو هم استارت بزنم.

خب خب خب، بسه دیگه. انقدر حرف تو ذهنم هست راجع به این پروژه و اینقدر این کیبرد مکانیکی خوب صدامیده موقع تایپ کردن این متن که آدم دلش میخواد همینطوری ادامه بده. اما نه، بزارید ادامه ی ماجرا رو براتون تعریف کنم.

خب صفحه ی HTML رو به صورت پایه زدم (معمولا اول بیس اچ تی ام ال رو میزنم بعد میرم روی سی اس اس) اینطوری دقیقا میدونم چه چیزهایی رو، چه طوری باید استایل بدم و نیازی نیست هی سوییچ بکنم روی اجرای هر دو سمتش. بعد از نوشتن HTML ما یه ساختمون بدون رنگ و بدون آب و برق داریم که اساسی کار داره. تازه اونجاست که میفهمی هنوز اول راهی و ساعتم تیک توک داره میزنه و کم کم داره دیر وقت میشه. این شب همون شبی بود که من عادت زود خوابیدنی که نصف ماه به زور بود نگهش داشته بودم رو خراب کردم ولی خب… . بگذریم.

شروع کردم کد های CSS رو نوشتن.  با سی اس اس ریست شروع کردم اما از جایی کپی نکردم چون زیاد المان های متنوع توی صفحه ندارم و نیازی به ریست کردن استایل های پیش فرض خیلی چیزا نیست، اونایی رو که لازم دارم خودم مینویسم. اینطوری اضافه کاری هم نداریم. بعدش رفتم سراغ Header که یه تیتر و یه پاراگراف داره.

شاید تعجب کنید ولی بعدش رفتم سراغ فوتر و بعد از Footer، کانتینر Main رو استایل دادم. دلیلش هم این بود که فوتر خیلی رادست تر و ساده تر بود و نیاز به وقت زیادی نداشت برا پیاده سازی برای همین از اون شروع کردم.

نکته: این وسط ترتیب المان ها توی سی اس اس رعایت شده تا پیداکردن تگ های و سکشن های مختلف ساده تر باشه.

بعد از اینکه کد های اصلی استایل دهی به صفحه رو نوشتم، صفحه رو از حالت موبایل در آوردم و به شکل تبلت و لپ تاپ بردم (توی حالت Responsive Mode) و چک کردم ببینم توی چه Break point هایی سایت به مشکل میخوره یا مثلا فونت ها رو چه طوری باید تنظیم کنم. خب بعد از کلی سر و کله زدن با سایز ویوپورت توی Dev tools مرورگر، اومدم Media Query هایی رو برای تبلت و بزرگتر تعریف کردم. یعنی دو تا Mode دارم، موبایل و اسکرین های بزرگتر. به نظر همه چیز خوب میاد و باید برم سمت JS.

جاوا اسکریپت زبان برنامه نویسی سمت کلاینته که صفحه ی وب ما رو Interactive میکنه. باعث میشه من بتونم یه سری رویداد تعریف بکنم و این رویداد ها رو مدیریت کنم. مثلا میگم اگر طرف روی این ذکر کلیک کرد، این پنجره رو باز کن و این متن ها رو یکی یکی نشون بده. البته نه به همین سادگی، بلکه  با صد ها خط کد تونستم functionality مربوط به Counter و کالکشن های اذکار و… رو پیاده کنم. برای اینکه کد ها تمیز تر و خوانا تر باشن فایل data.js رو جدا کردم و توش Model ها رو و instance هام رو قراردادم هر چند بهتره بعدا خود Model ها رو هم توی فایل های جداگانه و پوشه ای به اسم Models قرار بدم اما اون بمونه برا وقتی از VueJS و روتر و کامپوننت استفاده کردیم. فعلا ساده نگهش میدارم.

خلاصه اینکه بعد از یه سری دیباگ کردن و حل مشکلاتی که توی موبایل تست کردم پیش میومد، پروژه رو روی سروری که داشتم دپلوی کردم. یه دامنه آی آر گرفتم و خواستم DNS ها رو روی سرور ست کنم که خطا میداد. مشکل این بود که من رمز عبور امنیتی ام رو یادم رفته. توی سامانه ی Nic.ir رمز عبور امنیتی با رمز اصلی فرق میکنه و جواب یه سواله که همون کار تعریف میکنی. مثل اینکه اسم اولین سگی که داشتی چیه یا چیزایی شبیه به این. حالا میدونی چیش مسخره است؟ اینی که برای تغییر این رمز امنیتی باید یه برگه رو پرینت بگیری، امضا کنی، اسکن کنی و آپلودش کنی و اونام بعد از یک روز کاری ان شالله که تغییرش میدن. چرت ترین روند ممکن برای تغییر یه رمز.

برای حل این مشکل مجبور شدم دامنه رو به اسپیس ایران منتقل کنم و این یعنی تمدید یک ساله اجباری، اما عیب نداره، هزینه خاصی نداره. این کار رو انجام دادم و از طریق پنل اسپیس ایران دی ان اس رو تغییر دادم. خب فازتون چیه دقیقا!!! اگه تغییر دی ان اس نیازی به پاسخ امنیتی داره چرا از طریق نمایندگی میتونم تغییر بدم، اگر حساس نیست و میشه تغییر داد پس چرا خطا میدین و برای تغییرش این همه مکافات داریم؟ بماند که متن خطا هم متغیره و چیز واضحی نشون نمیداد.

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

اوکی الان از طریق www.adhkar.ir میتونید به وب سایت پروژه اذکار نور برین. توی این وب سایت اذکار صبحگاه، شامگاه و سایر اذکار و ادعیه هست و میتونید استفاده کنید.

هنوز کلی کار باید انجام بشه از قبیل اینکه متن اذکار کامل نیست، کالکشن ها ناقصن و عکس کاور برای لینک متا توی هدر طراحی نشده ( برا وقتی که طرف توی سوشال مدیا لینک سایت رو قید میکنه )، صفحه ی درباره پروژه و یه سری ایده دیگه که باید سر فرصت پیاده بکنم.

خب بین این همه کار، تقریبا توی ۲۴ ساعت یه ایده رو لانچ کردن حس خوبی داره. این مطلب رو اپدیت میکنم. این فقط میشه یه pre-release میتونیم اسمش رو بزاریم v0.1.

به روزرسانی پروژه (اواسط خرداد ۱۴۰۳)

کد بیس پروژه رو از جاوا اسکریپت خام به Vue JS مهاجرت دادم. این دومین تجربم توی کار با فریمورک VUE بود و در کل به نسبت به فریمورک های دیگه ی فرانت اند به نسبت قدرتی که داره فوق العاده خوب و آسون برای یادگیریه. البته چون Vue3 استفاده کردم تغییرات زیادی داشت با آخرین باری که استفاده کردم ( اون موقع چیزایی مثل Composition API نبود ولی خب در کل چیز سختی برای یادگیری نبود و توی کمتر از سه یا چهار ساعت کل پروژه رو به VueJS مهاجرت دادم.

این کار اهمیت خیلی زیادی داشت و کارایی و سرعت پروژه رو و همچنین خوانایی و قابلیت توسعه پذیری پروژه رو افزایش میده.کد های جاوا اسکریپت خیلی زیاد میشدن و امکان برنامه نویسی ماژولار به سادگی و با روش های مرسوم Vanilla JS کلاسیک نبود، با مهاجرت به ویو، قسمت های مختلف پروژه به کامپوننت ها و ویو ها و حتی Model های داده ای مجزا تقسیم شدند و در کل پروژه Structure خیلی تمیز تری پردا کرد.

در مورد تغییراتی که توی این مایگریشن انجام دادم اینجا نمیخوام جزیی وارد شم ولی در کل اینو بدونید که خیلی خیلی بهتر شد. مثلا توی ورژن قبلی ما تغییر اندپوینت نداشتیم و اصلا Router وجود نداشت، لذا امکان اشتراک گذاری یک کالکشن اذکار نبود چون ما در واقع فقط یه ایونت لیسنر روی دسته بندی ها داشتیم و یه مدال تمام صفحه باز میکردیم. الان در واقع داریم به ید اندپوینت جدید میریم که ویو و داده های خودش رو داینامیک میگیره.

قدم بعدی احتمالا رفتن به سمت SSR باشه. از اونجایی که این تکنولوژی ها نسبتا جدیدا و تخصصی سمت فرانت هست، خوب میشد اگر دوستان دیگه روی پروژه همکاری می کردن اما باتوجه به محدود بودن زمانم و خاص بودن پروژه و همچنین کم بودن منابع، احتمالا توی این قسمت هم خودم باید دست به کار بشم. بین خودمون باشه اما جلوتر نیاز میشه با فلاتر هم کار کنیم چون خروجی اندروید و آی او اس همین پروژه رو همی میخوایم :) . ویش می لاک.