در روز برنامه نویس ببینیم پروژه شخصی 1itnevis.com به کجا رسیده است؟!

 امروز، ۱۳ سپتامبر، روز برنامه‌نویس است؛ روزی برای تبریک گفتن به کسانی که بخش بزرگی از دنیای دیجیتال امروز را با کدها، الگوریتم‌ها و ایده‌هایشان ساخته‌اند. به همین مناسبت، روز برنامه‌نویس را به همه برنامه‌نویسان، توسعه‌دهندگان و کسانی که با کدنویسی تلاش می‌کنند چیزی را بهتر، سریع‌تر یا متفاوت‌تر بسازند تبریک می‌گویم. برای من اما امسال این روز یک بهانه شخصی‌تر هم دارد؛ فرصتی برای مرور اتفاقاتی که طی چند هفته اخیر در یکی از پروژه‌های شخصی‌ام، یعنی 1itnevis.com، رخ داده است.

آی‌تی‌نویس در چند هفته اخیر وارد یک دوره اورهال اساسی شده است؛ تغییری که فقط به ظاهر سایت یا چند اصلاح جزئی در قالب محدود نمی‌شود. بخش‌های مختلف پروژه با هدف بهبود عملکرد، افزایش کارایی، اصلاح ساختار و البته آماده‌سازی بهتر سایت برای مسیر سئو مورد بازبینی قرار گرفته‌اند. بعضی از این تغییرات برای کاربر در نگاه اول قابل مشاهده نیستند، اما در پشت صحنه می‌توانند تأثیر مهمی روی نحوه عملکرد سایت، سرعت، ساختار کد و حتی امکان توسعه آن در آینده داشته باشند.

نکته جالب اینجاست که بخش قابل توجهی از این مسیر با ترکیبی از برنامه‌نویسی و تجربه شخصی خودم و استفاده از Gemini برای دریافت، بررسی و تولید کد پیش رفته است. در واقع این پروژه برای من به نوعی یک تجربه عملی از همکاری انسان و هوش مصنوعی در توسعه یک پروژه واقعی تبدیل شده؛ جایی که هوش مصنوعی صرفاً یک ابزار برای تولید چند خط کد نیست، بلکه می‌تواند در تحلیل مشکل، پیشنهاد راه‌حل، نوشتن کد، اصلاح خطاها و حتی پیدا کردن مسیرهای جدید برای بهینه‌سازی یک پروژه مورد استفاده قرار بگیرد. در ادامه این مطلب می‌خواهم قدم‌به‌قدم مسیر این تغییرات را مرور کنم و ببینیم در این چند هفته چه اتفاقی برای 1itnevis.com افتاده است.

اضافه کردن MCP در آی تی نویس

یکی از تغییرات جالبی که در جریان این اورهال به آی‌تی‌نویس اضافه کردیم، پشتیبانی از MCP یا Model Context Protocol بود؛ استانداردی که برای ایجاد یک روش استاندارد میان مدل‌های هوش مصنوعی و منابع، داده‌ها و ابزارهای مختلف طراحی شده است. ایده اصلی این است که یک مدل هوش مصنوعی بتواند به جای اتکا به روش‌های اختصاصی و متفاوت، از یک سازوکار مشخص برای دسترسی به اطلاعات یا قابلیت‌های یک سرویس استفاده کند. با توجه به اینکه آینده وب تا حد زیادی با هوش مصنوعی گره خورده است، برای من مهم بود که آی‌تی‌نویس نیز از همین حالا امکان تعامل با این اکوسیستم را داشته باشد.

پیاده‌سازی اولیه MCP در آی‌تی‌نویس با کمک Gemini انجام شد. در مرحله اول اما یک مشکل جالب وجود داشت؛ پیاده‌سازی به شکلی بود که ابزار یا رابط MCP در سایت نمایش داده می‌شد و کاربر می‌توانست اثر آن را در صفحه مشاهده کند. در حالی که هدف من دقیقاً برعکس بود: MCP باید بخشی از زیرساخت سایت باشد و در پس‌زمینه کار کند، نه اینکه یک ابزار یا المان اضافی به رابط کاربری سایت تبدیل شود. به همین دلیل دوباره با Gemini سراغ کد رفتیم و با اصلاح ساختار و نحوه اجرای آن، بخش مربوط به MCP را از دید کاربر کاملاً مخفی کردیم.

در نهایت، MCP به شکلی در سایت قرار گرفت که در پس‌زمینه اجرا می‌شود و رابط کاربری آی‌تی‌نویس را تحت تأثیر قرار نمی‌دهد. این تجربه برای من نمونه خوبی از چیزی بود که در ابتدای مطلب درباره همکاری برنامه‌نویسی انسانی و هوش مصنوعی گفتم؛ بخشی از کار را خودم انجام دادم، برای بخش‌هایی از کد از Gemini کمک گرفتم، خروجی را آزمایش کردم، ایرادهایش را پیدا کردم و دوباره از هوش مصنوعی برای اصلاح آن استفاده کردم. در واقع استفاده از Gemini در این پروژه بیشتر شبیه یک همراه برنامه‌نویس بود تا یک ابزار تولید کد یک‌باره؛ کد تولید شد، اجرا شد، مشکل مشخص شد و بعد در چند مرحله اصلاح شد تا به نتیجه‌ای برسیم که با ساختار و نیاز واقعی پروژه هماهنگ باشد.

استفاده از ابزارک تماس با ما بلاگر در متن صفحه تماس با ما

یکی دیگر از بخش‌هایی که در جریان این بازطراحی تغییر دادیم، فرم «تماس با ما» در بلاگر بود. در حالت عادی، فرم تماس با ما در بلاگر به شکل یک Widget یا ابزارک ارائه می‌شود و برای استفاده از آن باید این ابزارک را در یکی از بخش‌های قالب، معمولاً سایدبار، قرار داد. این روش اگرچه ساده است، اما از نظر طراحی و تجربه کاربری چندان ایده‌آل نیست؛ مخصوصاً وقتی قرار است یک صفحه اختصاصی برای تماس با ما داشته باشیم و انتظار داریم فرم تماس دقیقاً در همان صفحه و در جای مناسبی نمایش داده شود.

برای حل این مسئله، با کمک Gemini سراغ کد قالب و ساختار ابزارک فرم تماس بلاگر رفتیم. هدف این بود که به جای نمایش فرم در سایدبار، خود فرم را داخل صفحه اختصاصی «تماس با ما» قرار دهیم. در این فرایند، کدهای لازم برای فراخوانی و نمایش فرم در محتوای صفحه به قالب اضافه شد و هم‌زمان نمایش ابزارک اصلی فرم تماس در سایدبار را کاملاً مخفی کردیم. به این ترتیب، ابزارک همچنان در ساختار بلاگر وجود دارد و عملکرد آن حفظ می‌شود، اما دیگر یک فرم تکراری و اضافی در کنار صفحات سایت نمایش داده نمی‌شود.

نتیجه این تغییر برای من نمونه دیگری از استفاده عملی از Gemini در توسعه 1itnevis بود. در ظاهر، مسئله فقط جابه‌جا کردن یک ابزارک به نظر می‌رسد، اما در بلاگر محدودیت‌های ساختاری خودش را دارد و نمی‌توان هر Widget را به سادگی مانند یک قطعه HTML معمولی در هر جایی قرار داد. با کمک Gemini توانستیم ساختار قالب را بررسی کنیم، روش مناسب برای نمایش فرم را پیدا کنیم و بعد با اصلاح کد، فرم تماس را دقیقاً در صفحه‌ای که برای آن طراحی شده بود قرار دهیم. در نهایت هم ابزارک سایدبار مخفی شد تا صفحه تماس با ما یک فرم مستقل، تمیز و بدون عناصر اضافی داشته باشد.

بهبود اجرای جاوا اسکریپت و فعال سازی لودتنبل در بلاگر

در بخش دیگری از بهینه‌سازی‌های انجام‌شده روی 1itnevis، تمرکزمان را روی نحوه بارگذاری عناصر مختلف سایت گذاشتیم. یکی از کارهایی که با کمک Gemini انجام دادیم، استفاده از روش Defer برای بارگذاری کدهای جاوااسکریپت بود. در حالت عادی، بعضی از اسکریپت‌ها می‌توانند هنگام بارگذاری صفحه باعث ایجاد وقفه در پردازش HTML شوند و مرورگر را مجبور کنند قبل از ادامه کار، ابتدا آن کدها را دریافت و اجرا کند. با استفاده از Defer، اجرای اسکریپت‌های غیرضروری را به زمانی موکول کردیم که پردازش اولیه صفحه انجام شده باشد تا محتوای اصلی سایت سریع‌تر در اختیار کاربر قرار بگیرد.

در کنار آن، Lazy Load را نیز برای منابعی که لازم نیست از همان لحظه اول بارگذاری شوند فعال کردیم. ایده Lazy Load این است که عناصری مانند تصاویر، به‌خصوص تصاویری که در بخش‌های پایین‌تر صفحه قرار دارند، تنها زمانی بارگذاری شوند که واقعاً به آن‌ها نیاز باشد یا کاربر به محدوده نمایش آن‌ها نزدیک شود. این کار باعث می‌شود مرورگر در ابتدای ورود به صفحه مجبور نباشد تمام منابع را به صورت هم‌زمان دریافت کند و در نتیجه حجم درخواست‌های اولیه کاهش پیدا کند.

این تغییرات شاید در ظاهر برای کاربر قابل مشاهده نباشند، اما تأثیر مستقیمی روی کارایی و سرعت بارگذاری سایت دارند. هدف ما این بود که مرورگر ابتدا محتوای اصلی و قابل مشاهده صفحه را سریع‌تر پردازش کند و بارگذاری بخش‌های غیرضروری را به زمان مناسب‌تری منتقل کنیم. در این قسمت هم Gemini بیشتر نقش یک دستیار برنامه‌نویسی را داشت؛ کدهای مربوط به قالب را بررسی کردیم، روش‌های مناسب برای Defer و Lazy Load را پیاده‌سازی کردیم و بعد نتیجه را آزمایش و اصلاح کردیم تا این بهینه‌سازی‌ها بدون ایجاد مشکل در عملکرد بخش‌های مختلف 1itnevis انجام شوند.

امکاناتی به سایت اضافه کردیم که توسط بلاگر پشتتیبانی نمی شود

بخش دیگری از این پروژه مربوط به تغییرات گسترده در استایل و ساختار قالب بلاگر بود؛ تغییراتی که بسیاری از آن‌ها در حالت عادی و از طریق امکانات پیش‌فرض بلاگر قابل انجام نیستند. در واقع، یکی از اهداف من این بود که 1itnevis شبیه یک وبلاگ با قالب آماده بلاگر به نظر نرسد و بتوانم چیدمان و رفتار بخش‌های مختلف سایت را تا حد ممکن مطابق نیاز خودم طراحی کنم. در این میان، بخش منوها و نحوه چیدمان آن‌ها در نسخه دسکتاپ و موبایل را مستقیماً خودم طراحی و پیاده‌سازی کردم. این موضوع شامل تفاوت در نحوه نمایش منوها در اندازه‌های مختلف صفحه و کنترل دقیق‌تر روی ساختار رابط کاربری بود.

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

حذف سایدبار از صفحه لندینگ نیز یکی دیگر از همین تغییرات بود. در ساختار معمول بلاگر، سایدبار بخشی از قالب است و نمی‌توان به شکل ساده گفت که مثلاً در یک صفحه خاص نمایش داده شود و در صفحه‌ای دیگر وجود نداشته باشد. برای 1itnevis می‌خواستم صفحه لندینگ فضای بیشتری در اختیار محتوای اصلی داشته باشد و سایدبار در آن مزاحم طراحی صفحه نباشد. بنابراین با تغییر کد قالب و استفاده از منطق شرطی، کاری کردیم که سایدبار در صفحه لندینگ نمایش داده نشود، در حالی که در سایر بخش‌های سایت همچنان قابل استفاده باشد.

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

مجموع این تغییرات برای من یک نکته مهم را روشن کرد: بلاگر محدودیت‌های خودش را دارد، اما این محدودیت‌ها لزوماً به معنی غیرممکن بودن یک قابلیت نیستند. وقتی به کد قالب دسترسی داشته باشیم و با ساختار داخلی آن آشنا باشیم، می‌توان بخش قابل توجهی از رفتار سایت را تغییر داد. در این پروژه نیز ترکیبی از برنامه‌نویسی مستقیم خودم و استفاده از Gemini برای پیدا کردن راه‌حل، تولید و اصلاح کد و آزمودن ایده‌های مختلف باعث شد 1itnevis از یک قالب استاندارد بلاگر فاصله بگیرد و به سایتی با ساختار و تجربه کاربری کاملاً شخصی‌سازی‌شده تبدیل شود.

ترکیب انسان و هوش مصنوعی

در نهایت، چیزی که در این چند هفته روی 1itnevis تجربه کردم برای من بیشتر از یک بازطراحی ساده قالب بلاگر بود. بخش قابل توجهی از امکاناتی که امروز در سایت وجود دارد، در حالت پیش‌فرض بلاگر اصلاً قابل پیاده‌سازی نیستند و برای رسیدن به آن‌ها مجبور شدیم وارد کد قالب شویم، ساختارهای موجود را تغییر دهیم و راه‌حل‌های جدیدی برای محدودیت‌های بلاگر پیدا کنیم. در بعضی قسمت‌ها کدنویسی را مستقیماً خودم انجام دادم و در بخش‌های دیگر از Gemini برای بررسی کد، پیدا کردن راه‌حل، تولید کد و اصلاح خطاها کمک گرفتم.

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

به نظرم این دقیقاً یکی از تفاوت‌های مهم بین «تولید کد با هوش مصنوعی» و برنامه‌نویسی در همکاری با هوش مصنوعی است. اگر صرفاً از هوش مصنوعی بخواهیم کد تولید کند و همان خروجی را بدون بررسی استفاده کنیم، ممکن است در کوتاه‌مدت به نتیجه برسیم، اما در بلندمدت نگهداری و توسعه پروژه سخت شود. در این پروژه، هوش مصنوعی در کنار تجربه و تصمیم‌گیری انسانی قرار گرفت؛ من مشخص می‌کردم چه چیزی می‌خواهم، کد را بررسی و اجرا می‌کردم، مشکلات را پیدا می‌کردم و دوباره برای اصلاح یا بهبود سراغ Gemini می‌رفتیم. نتیجه این فرایند، کدی است که نه‌تنها کار می‌کند، بلکه ساختار آن مشخص است، بخش‌های مختلف آن قابل فهم و مستند هستند و مسیر برای توسعه و بهبودهای بعدی نیز بسیار ساده‌تر شده است.

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