DevSource

📅 روز 4: لیست‌ها و جدول‌ها در HTML 🎯 نمایش مرتب اطلاعات تا اینجا یاد گرفتیم متن، عکس، لینک و فرم بسازیم. امروز یاد می‌گیریم چطور اطلاعات رو مرتب و ساختاریافته نمایش بدیم. 📝 لیست‌ها (Lists) لیست‌ها برای نمایش مجموعه‌ای از آیتم‌ها استفاده میشن. مثلاً: خرید روزانه…

📅 روز 5: پروژه Login Page با HTML
🎯 جمع‌بندی تمام مباحث HTML
تا اینجا یاد گرفتیم:
✅ تگ‌های پایه
✅ لینک‌ها
✅ تصاویر
✅ فرم‌ها
✅ لیست‌ها
✅ جدول‌ها
حالا وقتشه همه چیز رو کنار هم بذاریم و اولین صفحه واقعی خودمون رو بسازیم.

🧠 پروژه امروز: صفحه ورود (Login)
تقریباً همه سایت‌ها یک صفحه ورود دارن.
ما هم یک نسخه ساده از اون رو فقط با HTML می‌سازیم.
ساختار صفحه

<!DOCTYPE html>
<html>
<head>
  <title>Login Page</title>
</head>

<body>

  <h1>ورود به حساب کاربری</h1>

  <form>

    <p>ایمیل</p>
    <input
      type="email"
      placeholder="ایمیل خود را وارد کنید"
    >

    <br><br>

    <p>رمز عبور</p>
    <input
      type="password"
      placeholder="رمز عبور"
    >

    <br><br>

    <button>
      ورود
    </button>

  </form>

</body>
</html>

🔍 بیایم کد رو بررسی کنیم
عنوان صفحه

<h1>ورود به حساب کاربری</h1>
عنوان اصلی صفحه.
فرم

<form>

</form>

تمام ورودی‌ها داخل فرم قرار می‌گیرن.
فیلد ایمیل

<input
  type="email"
  placeholder="ایمیل خود را وارد کنید"
/>

کاربر ایمیلش رو وارد می‌کنه.
فیلد رمز عبور

<input
  type="password"
  placeholder="رمز عبور"
/>

کاراکترها مخفی نمایش داده میشن.
دکمه ورود

<button>ورود</button>

برای ارسال فرم.

🎯 چالش امروز
سعی کن این موارد رو به پروژه اضافه کنی:
✅ یک لوگو یا عکس بالای فرم
✅ لینک "ثبت نام"
✅ لینک "فراموشی رمز عبور"
🚀 خروجی فاز HTML
اگر این ۵ روز رو کامل انجام داده باشی، الان می‌تونی:
✅ ساختار هر صفحه‌ای رو بسازی
✅ فرم طراحی کنی
✅ عکس و لینک اضافه کنی
✅ اطلاعات رو با لیست و جدول نمایش بدی
📌 فاز بعدی: CSS
از فردا وارد جذاب‌ترین بخش فرانت‌اند می‌شیم:
🎨 CSS
جایی که صفحه‌های ساده HTML تبدیل میشن به رابط‌های کاربری حرفه‌ای و مدرن. 😎🔥

#html_lessons@devsourcech
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
‌
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir

❤2

31 viewsHamed, 16:57

DevSource

راهنمای دوره📢 جهت استفاده از دوره، روی هشتگ‌ها بزنید و مطالب را دنبال کنید 👇 دوره ۳۰ روزه رایگان HTML, CSS, JavaScript 🎓 جهت آمادگی برای ورود به React.js 🚀 شامل سه فاز: فاز اول: آموزش HTML 🪜 #html_lessons@devsourcech فاز دوم: آموزش CSS 🎨 #css_lessons@devsourcech…

اینجا آموزش فشرده HTML برای ورود به React.js تموم شده 🎉🚀

از اینجا وارد فاز دوم آمادگی ورود به ریکت یعنی دوره CSS میشیم 💻📚

دوستان در حال حاضر کارهای مربوط به ادیت، ضبط و ساخت ویدئو کوتاه در رابطه با پیش‌نیازهای ورود به ریکت در حال انجامه و فصل هاهم در حال ضبطه

قراره باهم کلی صحبت کنیم و به زودی منتشر میشه تا شما همیشه دسترسی داشته باشید به دوره رایگان HTML, CSS, JavaScript جهت آمادگی ورود به React.js 🎥✨

تا اون زمان پست‌های کانال رو دنبال کنید و از راهنمای دوره و هشتگ‌ها استفاده کنید.

انتهای هر پست براتون چالش و تمریناتی گذاشتم

زیر پست تمریناتتون رو بفرستید میبینم من شخصاً و کمکتون میکنم 🤝💪

#Hamed
#html_lessons@devsourcech
#css_lessons@devsourcech
#تکنولوژی

اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅

⚠️ آدرس کانال در تلگرام (حتما جوین بشید)
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir/

❤2

34 viewsHamed, edited 17:00

DevSource

🎨 فاز 2: CSS
نقشه راه یادگیری CSS برای React 🚀
خب حالا صفحاتمون هنوز ظاهر جذابی ندارن
اینجاست که CSS وارد میشه 💻.
CSS مسئول:
رنگ‌ها 🎨
فونت‌ها ✍️
فاصله‌ها 📏
چیدمان عناصر 📦
ریسپانسیو بودن 📱
هست.
🗺️ مسیر یادگیری CSS
📅 روز 6
اتصال CSS به HTML 🔗
رنگ‌ها 🌈
فونت‌ها 🔤
Text Styling ✨
📅 روز 7
Box Model 📦
Margin
Padding
Border
📅 روز 8
Display
Block
Inline
Inline-Block
📅 روز 9
Position
Relative
Absolute
Fixed
📅 روز 10
Flexbox (بخش اول) 🧶
📅 روز 11
Flexbox (بخش دوم)
تمرین عملی 💪
📅 روز 12
CSS Grid 📐
📅 روز 13
Hover
Transition
Animation های ساده 🎬
📅 روز 14
Responsive Design 📱💻
Media Query
📅 روز 15
پروژه نهایی CSS
ساخت Landing Page 🌐
🎯 هدف این فاز
بعد از این 10 روز باید بتونی:
✅ صفحات زیبا طراحی کنی
✅ UI های مدرن بسازی
✅ صفحات موبایل و دسکتاپ طراحی کنی
✅ برای ورود به React آماده بشی
#css_lessons@devsourcech
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir

29 viewsHamed, 22:33

DevSource

0:08

This media is not supported in your browser

VIEW IN TELEGRAM

#نمونه_کد_فرانت_اند@devsourcech 📄

اینپوت با React.js ⚛️
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
‌
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir

24 viewsHamed, 22:34

DevSource

#نمونه_کد_فرانت_اند@devsourcech 📄 اینپوت با React.js ⚛️ #Hamed #تکنولوژی اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅ ‌ ⚠️ آدرس کانال در تلگرام( حتما جوین بشید ) 🚀 @devsourcech ✅ در بله 🔹 Ch: @devsource سایت مستندات برنامه نویسی:…

Jun 05 2_52 AM.txt

10.4 KB

#سورس_کد_فرانت_اند@devsourcech

20 viewsHamed, edited 22:35

DevSource

0:10

This media is not supported in your browser

VIEW IN TELEGRAM

#نمونه_کد_فرانت_اند@devsourcech
اینپوت با React.js ⚛️

34 viewsHamed, 22:36

DevSource

#نمونه_کد_فرانت_اند@devsourcech اینپوت با React.js ⚛️

Jun 05 3_00 AM.txt

8.1 KB

#سورس_کد_فرانت_اند@devsourcech

27 viewsHamed, edited 22:36

DevSource

📅 روز 6: شروع CSS
🧠 خبCSS چیست؟
Cascading Style Sheets
است.
اگر HTML اسکلت ساختمان باشد 🏗️
CSS طراحی داخلی، رنگ‌آمیزی و دکوراسیون آن ساختمان است 🎨
اتصال CSS به HTML
ابتدا یک فایل به نام:
style.css
بساز.
سپس داخل HTML این خط را قرار بده:

<link rel="stylesheet" href="style.css">

داخل تگ <head>.
اولین استایل

<h1>سلام دنیا</h1>

h1 {
  color: red;
}

تغییر رنگ متن

h1 {
  color: blue;
}

تغییر اندازه متن

h1 {
  font-size: 40px;
}

تغییر فونت ضخیم

h1 {
  font-weight: bold;
}

تغییر رنگ پس‌زمینه

body {
  background-color: lightgray;
}

🎯 تمرین امروز
یک صفحه HTML بساز که:
یک عنوان داشته باشد
یک متن داشته باشد
رنگ عنوان را تغییر بده
اندازه عنوان را تغییر بده
رنگ پس‌زمینه صفحه را عوض کن
💡 نکته مهم:
از امروز وارد بخشی شدی که ظاهر سایت‌ها را می‌سازد.
تقریباً هر چیزی که در ظاهر یک سایت می‌بینی، با CSS ساخته شده است.
📌 فردا: Box Model — مهم‌ترین مفهوم CSS که هر توسعه‌دهنده فرانت‌اند باید بلد باشد. 🚀

#css_lessons@devsourcech
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
‌
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir

41 viewsHamed, 22:39

DevSource

📅 روز 6: شروع CSS 🧠 خبCSS چیست؟ Cascading Style Sheets است. اگر HTML اسکلت ساختمان باشد 🏗️ CSS طراحی داخلی، رنگ‌آمیزی و دکوراسیون آن ساختمان است 🎨 اتصال CSS به HTML ابتدا یک فایل به نام: style.css بساز. سپس داخل HTML این خط را قرار بده: <link rel="stylesheet"…

#css_lessons@devsourcech

34 viewsHamed, 22:40

DevSource

0:06

This media is not supported in your browser

VIEW IN TELEGRAM

#نمونه_کد_فرانت_اند@devsourcec🖥️
صفحه لاگین 🔐
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
‌
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir

54 viewsHamed, edited 22:50

DevSource

animated-login-form.zip

21.2 KB

#سورس_کد_فرانت_اند@devsourcech
سورس صفحه لاگین

HTML CSS JavaScript

#Hamed

55 viewsHamed, edited 22:50

DevSource

0:10

This media is not supported in your browser

VIEW IN TELEGRAM

#نمونه_کد_فرانت_اند@devsourcech
هاور افکت
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
‌
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir

❤1👍1

50 viewsHamed, 14:30

DevSource

#نمونه_کد_فرانت_اند@devsourcech هاور افکت #Hamed #تکنولوژی اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅ ‌ ⚠️ آدرس کانال در تلگرام( حتما جوین بشید ) 🚀 @devsourcech ✅ در بله 🔹 Ch: @devsource سایت مستندات برنامه نویسی: 🥇 https://devsource.ir

interactive-helon-lattice-grid-model.zip

19.4 KB

#سورس_کد_فرانت_اند@devsourcech
#Hamed

40 viewsHamed, edited 14:30

DevSource

0:30

This media is not supported in your browser

VIEW IN TELEGRAM

#نمونه_کد_فرانت_اند@devsourcech
تکنیک Procedural Animation

لینک گیت هاب :
https://github.com/HamedFarazi/Procedural-Animation1/tree/main

لینک مشاهده لایو:
https://procedural-animation1.vercel.app/

#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
‌
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir

❤1

53 viewsHamed, edited 18:40

DevSource

textflakescss-doodle.zip

16 KB

#سورس_کد_فرانت_اند@devsourcech
#Hamed

48 viewsHamed, edited 18:41

DevSource

این تکنیک با Canvas ساخته نشده 🛠️

فقط با:
✅ CSS
✅ JavaScript
✅ CSS Doodle

این انیمیشن از تکنیکی به اسم Procedural Animation استفاده می‌کنه. 🎬

یعنی به جای اینکه 100 متن و 100 انیمیشن دستی بسازی، یک الگوریتم می‌نویسی که خودش موقع اجرا همه‌چیز رو تولید می‌کنه. 🤖

ترفندهای استفاده‌شده:

• CSS Variables
• @property
• Dynamic Keyframes
• 3D Transform
• CSS Doodle

فرانت‌اند مدرن بیشتر از اینکه حفظ کردن کد باشه، یاد گرفتن این جور تکنیک‌هاست. 🚀

1️⃣ CSS Doodle
کل افکت روی کتابخانه css-doodle.com ساخته شده.

<css-doodle></css-doodle>

این کتابخونه اجازه میده با CSS الگوها، انیمیشن‌ها و آثار هنری تولید کنی. 🎨

2️⃣ CSS Custom Properties (متغیرهای CSS)

--color-1: #fff;
--color-2: #fed790;

و بعد:

color: var(--color-1);

متغیرهای CSS فقط برای رنگ نیستن؛ می‌تونن انیمیشن و تم کل سایت رو کنترل کنن. 🎛️

3️⃣ @property
این قسمت خیلی مهمه:

@property --color-2 {
  syntax: '<color>';
  inherits: true;
  initial-value: #fed790;
}

بعد:

--color-2: #00bb9c;

انیمیت میشه. 🎨 با @property می‌تونی متغیرهای CSS رو انیمیت کنی؛ قابلیتی که خیلی‌ها نمی‌شناسن.

4️⃣ CSS 3D Transform

rotate: x y z 2400deg;

و:

translate: 30vmin;
scale: 0;

اکثر انیمیشن‌های حرفه‌ای وب فقط با ترکیب:
translate
rotate
scale
ساخته میشن.

5️⃣ Dynamic Keyframes
این بخش خیلی حرفه‌ایه:

const xKeyframes = layers.map(...)

جاوااسکریپت خودش Keyframe تولید می‌کنه. 🔄
لازم نیست همیشه Keyframe رو دستی بنویسی؛ میشه با JS تولیدشون کرد.

6️⃣ DOM Injection

document.createElement("style")

و
JavaScript
style.textContent = ...;
استایل در لحظه ساخته میشه. 💻

7️⃣ Procedural Animation
کل افکت در واقع از این تکنیک استفاده می‌کنه:

JavaScript

@r(...)
@p(...);

و درنهایت موقع اجرا مقادیر تصادفی تولید میشن. 🎲

دوستان Procedural Animation یعنی به جای ساخت 100 انیمیشن، یک الگوریتم بنویسی که خودش انیمیشن تولید کنه.

#Hamed
#تکنولوژی

اگر این مطلب براتون مفید بود، با زدن روی تیک زیر اعلام حضور کنید ✅

⚠️ آدرس کانال در تلگرام (حتما جوین بشید)
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه‌نویسی:
🥇 https://devsource.ir

75 viewsHamed, edited 18:49

DevSource

یکی دیگه از اشتباهات رایج توی مصاحبه های بک اند اینه که طرف سریع میره سمت حل مسئله، بدون اینکه اول مسئله رو درست تعریف و یا درک کنه.

مثلا سوال میشه: «سیستم رو طوری طراحی کن که بتونه درخواست های زیاد رو هندل کنه»
و اون شخص سریع شروع می کنه به گفتن : ردیس، کافکا، میکروسرویس، لود بالانسر و ...
در حالی که مثلا هنوز نپرسیده که :
حجم ترافیک چقدره؟
الان read سنگین تره یا write؟
ما واسمون latency مهم تره یا consistency
الان bottleneck کجاست؟

"نتیجه این میشه که راه حل از مسئله جلو میزنه"

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

#رادمان #مصاحبه #بکند
‌
⚠️ آدرس کانال در تلگرام(حتما عضو بشید)
🚀 @devsourcech
✅ در بله
🔹 @devsource
‌
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir

❤2

43 viewsسامان بهشتیان, 12:53

DevSource

🚀 همیشه برام عجیبه وقتی می‌بینم یه همکار فرانت‌اند، کدهای HTML رو دستی و کاراکتر به کاراکتر تایپ می‌کنه! انگار هنوز داریم با تبر کد می‌زنیم…

⚙️ ماجرا اینه که Emmet برای فرانت‌کارها مثل یه میان‌بر برای زندگی می‌مونه. مثلاً به جای اینکه نیم ساعت وقت بذاری برای ساختار یه div با چهار تا کلاس و یه ul که داخلش ۱۰ تا li داره، فقط کافیه بنویسی:

div.container>ul>li.item-$*10 و بعد کلید Tab رو بزنی. تموم شد! کل ساختار توی یک ثانیه ساخته میشه.

🔧 نکته‌ی جالب اینجاست که خیلیا فکر می‌کنن باید حتماً یه پلاگین خاص نصب کنن، اما اگه از محصولات JetBrains مثل WebStorm استفاده می‌کنید، Emmet خیلی وقته اونجاست و منتظره شما ازش کار بکشید. فقط کافیه فایل‌تون با پسوند HTML باشه.

حالا سؤال اینجاست، شما هنوز دارید تگ‌ها رو دستی باز و بسته می‌کنید یا از این ابزار برای سرعت بخشیدن به کارتون استفاده می‌کنید؟

خلاصه اینکه نذارید تایپ کردنِ ساختارهای تکراری، وقتِ اصلی‌تون رو برای منطقِ برنامه بگیره.

#سامان #تکنولوژی

⚠️ آدرس کانال در تلگرام(حتما عضو بشید)
🚀 @devsourcech
✅ در بله
🔹 @devsource
‌
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir

❤1

54 viewsسامان بهشتیان, 21:12

DevSource

نسل جدید کتابخانه های کدنویسی چطور خودشون رو با عامل های هوش مصنوعی تطبیق میدن؟

⚙️ داستان از اینجا شروع میشه که agent دیگه مثل یه اسکریپت ساده نیست.
یه agent باید بتونه *ابزار پیدا کنه، ورودی درست بسازه، خروجی قابل‌اعتماد بگیره، و وسط کار هم state رو نگه داره*. برای همین نسل جدید پکیج‌ها دارن به سمت چند تا چیز مشخص میرن:
- *Tool calling استاندارد*
- *Structured output*
- *Context management*
- *Memory / state*
- *MCP یا همون Model Context Protocol*
- *Skill / plugin style extensions*

حالا اینجا یه سؤال پیش میاد… چرا اصلاً پکیج‌ها باید خودشون رو با agentها هماهنگ کنن؟

🚨 چون agentها با API کلاسیک فرق دارن.
قبلاً به برنامه می‌گفتی `fetch_users()`، دیتا می‌گرفت و تموم.
الان agent ممکنه بگه:
«اول ابزار مناسب رو پیدا کن، بعد ورودی‌اش رو بساز، بعد اگر خروجی ناقص بود دوباره retry کن، بعد نتیجه رو به یه ابزار دیگه پاس بده…»
در واقع Agent ها عامل های هوشمندی هستند که خودشون انتخاب میکنند از چه ابزاری استفاده کنند.
اینجاست که کتابخانه‌های جدید دارن از APIهای “تابع‌محور” میرن سمت *قابلیت‌محور*. یعنی به‌جای اینکه فقط چند endpoint داشته باشن، سعی می‌کنن برای agentها *خودتوصیف* باشن.

مثلاً یه پکیج خوب برای agent باید بتونه اینا رو خیلی تمیز expose کنه:
- اسم ابزار
- توضیح کوتاه و دقیق
- schema ورودی
- نوع خروجی
- محدودیت‌ها
- مثال استفاده
- خطاهای قابل‌انتظار

🐳 یه مثال واقعی بزنم… فرض کنید یه تیم DevOps دارید که یه agent برای incident response ساخته.
این agent باید از بین چند ابزار انتخاب کنه:
get_pods()`، `read_logs()`، `check_cpu()`، `restart_service()
اگر این ابزارها فقط یه wrapper معمولی باشن، agent خیلی زود گیج میشه.
ولی اگر هر ابزار schema مشخص، description دقیق، و خروجی ساختاریافته داشته باشه، agent می‌فهمه کی کدوم رو صدا بزنه و چطور نتیجه رو بخونه.

⚙️ اینجاست که MCP خیلی مهم میشه.
MCP عملاً داره یه زبان مشترک برای اتصال agent به ابزارها و منابع می‌سازه.
یعنی به‌جای اینکه هر شرکت برای خودش یه adapter جدا بنویسه، یه لایه استاندارد میاد وسط که agent بتونه با ابزارهای مختلف یک‌جور حرف بزنه.

خلاصه ماجرا اینه که نسل جدید پکیج‌ها دارن برای agentها این ویژگی‌ها رو جدی می‌گیرن:
- *discoverability*: ابزارها راحت پیدا بشن
- *interoperability*: بین فریم‌ورک‌ها کار کنن
- *typed schemas*: ورودی/خروجی قابل‌اعتماد باشه
- *observability*: بفهمیم agent کجا خراب کرد
- *sandboxing / permission*: ابزارها بی‌حساب‌وکتاب اجرا نشن

🚀 یه تغییر مهم دیگه هم هست…
خیلی از کتابخانه‌ها دیگه فقط “tool” نیستن، دارن به شکل *skill package* یا *agent plugin* دیده میشن.
یعنی یه بسته‌ی کوچک که شامل کد، دستورالعمل، metadata و resource میشه و agent هر وقت لازم داشت loadش می‌کنه.

مثلاً تو یه پروژه واقعی ممکنه یه skill برای این داشته باشید:
- خواندن issue از GitHub
- خلاصه‌سازی ticket
- ساختن changelog
- باز کردن PR template
- اضافه کردن label

اینجا agent لازم نیست همه‌چیز رو از صفر بفهمه… فقط skill مناسب رو load می‌کنه و جلو میره.

⚠️ اما مشکل اینجاست… هرچی agentها خودمختارتر میشن، کتابخانه‌ها هم باید *کنترل‌پذیرتر* بشن.
اگر ابزارها خوب توصیف نشده باشن، agent hallucinate می‌کنه.
اگر خروجی‌ها structure نداشته باشن، chaining خراب میشه.
اگر permissionها شفاف نباشن، یه agent ممکنه یه اکشن خطرناک رو اشتباهی اجرا کنه.

پس پکیج‌های جدید دارن خودشون رو با این چند اصل تنظیم می‌کنن:
1. *Agent-friendly API*
2. *خروجی JSON/typed*
3. *متادیتای غنی برای tool selection*
4. *پشتیبانی از context و memory*
5. *هماهنگی با protocolهایی مثل MCP*

🐳 یه سناریوی خیلی واقعی…
فرض کنید یه تیم محصول دارید که یه agent برای پشتیبانی مشتری ساخته.
agent باید از CRM اطلاعات بگیره، billing رو چک کنه، از knowledge base جواب پیدا کنه، و اگر لازم شد ticket بسازه.
اگر هر کدوم از این سیستم‌ها یه library جدا و ناشناخته داشته باشن، agent عملاً فلج میشه.
ولی وقتی پکیج‌ها خودشون رو با schema، protocol و tool registry هماهنگ می‌کنن، agent تبدیل میشه به یه orchestrator واقعی.

جمع‌بندی؟
نسل جدید کتابخانه‌ها و پکیج‌ها دیگه فقط برای برنامه‌نویس انسان ساخته نمیشن… دارن برای *برنامه‌نویس + agent* با هم طراحی میشن.
یعنی APIها باید هم برای آدم قابل‌فهم باشن، هم برای مدل قابل‌استفاده.
و این دقیقاً همون جاییه که آینده پکیج‌ها داره عوض میشه… از “library” به سمت “agent-ready capability layer”.

❤1

72 viewsسامان بهشتیان, 09:31

About

Blog

Apps

Platform