وایب کدینگ: خودتان یک برنامهٔ کوچک بسازید
در وایب کدینگ (vibe coding) با زبان ساده میگویید چه چیزی میخواهید بسازید. دستیار کد را مینویسد، نتیجه را نشان میدهد و بر اساس بازخورد شما آن را تغییر میدهد. لازم نیست خودتان برنامهنویسی بلد باشید. مثلاً میتوانید یک کوییز برای یک دورهٔ آموزشی، یک بازی کوچک یا ابزاری کاربردی برای همکارانتان بسازید.
فقط به برنامهٔ دسکتاپ نیاز دارید. لازم نیست Node.js و git را نصب کنید: برنامه خودش آنها را همراه دارد.
1. یک پوشهٔ کاری انتخاب کنید
یک پوشهٔ خالی روی رایانهتان بسازید، مثلاً کوییز-آموزشی، و آن را بهعنوان پوشهٔ کاری گفتگو انتخاب کنید. نحوهٔ این کار را در دسترسی به فایلهای محلی میخوانید. دستیار فقط در همین پوشه کار میکند.
2. بگویید چه میخواهید
تا جای ممکن دقیق بگویید چه چیزی میخواهید بسازید. برای مثال:
یک کوییز برای کارگاهی دربارهٔ امنیت اطلاعات بهصورت یک صفحهٔ HTML بساز. ده سؤال چندگزینهای، با دکمههای بزرگ، نمایش امتیاز در پایان و یک دکمه برای شروع دوباره.
دستیار چنین صفحهٔ سادهای را با وبسرور داخلی برنامه نمایش میدهد. نتیجه در مرورگر داخلی ظاهر میشود: دکمهٔ مرورگر (نماد کرهٔ زمین) در نوار بالا. دربارهٔ این موضوع در سرورهای محلی و مرورگر داخلی بیشتر بخوانید.
راضی نیستید؟ فقط بگویید چه چیزی باید عوض شود:
دکمهها را سبز کن و وقتی پاسخ اشتباه است، پاسخ صحیح را نشان بده.
عکسهای خودت و نگاه دستیار به صفحه
یک عکس به پیامت پیوست کن و بخواه:
این عکس را روی صفحهٔ وب بگذار.
دستیار عکس را در پوشهٔ پروژه، مثلاً در img/، ذخیره میکند و روی صفحه میگذارد. این کار با تصویری که دستیار همین حالا برایت ساخته هم ممکن است.
صفحهای که در مرورگر داخلی باز است مشکلی دارد؟ بخواه:
ببین مشکل صفحه چیست.
دستیار آنوقت متن، یک تصویر از صفحه و پیامهای خطای صفحه را میبیند. ببین اجازه دادن به دستیار برای دیدن صفحه.
وقتی دستیار خودش صفحهای را در مرورگر داخلی باز میکند، صبر میکند تا صفحه بارگذاری شود و پیامهای خطای آن را میبیند، مانند خطای اسکریپت یا فایلی که بارگذاری نمیشود. پیش از اینکه بگوید کار میکند، آنها را برطرف میکند. سپس صفحه را مانند یک کاربر امتحان میکند: روی دکمهها کلیک میکند، فیلدها را پر میکند، کلیدها را فشار میدهد و خطاهایی را که در این میان پیدا میشوند برطرف میکند. اینکه همهچیز همانطور که میخواهید کار میکند یا نه، خودتان بررسی میکنید.
3. برنامههای بزرگتر
اگر چیز بزرگتری میخواهید، مثلاً برنامهای با چند صفحه، دستیار میتواند برای نمونه با Vite و React یک پروژه بسازد:
در این پوشه با Vite یک برنامهٔ React بساز که همکاران بتوانند با آن اتاق جلسه رزرو کنند. همهچیز را نصب کن، برنامه را اجرا کن و نتیجه را نشان بده.
شروع چنین پروژهای (مثلاً با npm create vite@latest) را روی کارت فرمان تأیید میکنید. پس از آن دستیار بستهها را نصب میکند. این را هم تأیید میکنید، یا اجازهٔ نصب بستهها بدون پرسش را روشن میکنید. نصب بستهها را ببینید. برای هر فرمان کارت نمیخواهید؟ در نخستین کارت اعتماد به این پروژه را انتخاب کنید.
4. نسخهها را ذخیره کنید
نسخه یک تصویر لحظهای از پروژهٔ شماست. اگر تغییری را نپسندید، میتوانید به نسخهٔ قبلی برگردید. در زمان مناسب از دستیار بخواهید:
یک نسخه ذخیره کن.
بار اول، دستیار یک تاریخچهٔ نسخه برای پوشه راه میاندازد. فایلهایی که شبیه اطلاعات محرمانهاند، مانند گذرواژهها یا کلیدها (از جمله کلیدهای Google API)، هرگز وارد هیچ نسخهای نمیشوند. اگر دستیار چیزی را کنار بگذارد، به شما اطلاع میدهد.
5. پروژهتان را روی GitHub بگذارید
در GitHub پروژهتان را آنلاین نگه میدارید. به این ترتیب یک نسخهٔ پشتیبان دارید و میتوانید روی رایانهٔ دیگری کار را ادامه دهید.
اتصال GitHub
هر کس حساب GitHub خودش را وصل میکند. هنوز حساب نداری؟ اول در github.com/signup یک حساب رایگان بساز.
- به تنظیمات بروید و در وضعیت دسکتاپ پنل GitHub را پیدا کنید.
- روی اتصال GitHub کلیک کنید. برنامه یک کد نشان میدهد و
github.com/login/deviceرا در مرورگرتان باز میکند. - کد را در GitHub وارد کنید (با کپی کد میتوانید آن را کپی کنید) و اجازه دهید. اگر صفحه باز نشد، روی باز کردن GitHub کلیک کنید.
- اکنون پنل متصل بهعنوان @نام-شما را نشان میدهد.
GitHub چه میخواهد؟ GitHub برنامهٔ AI-School Desktop از HandiHow-B-V را نشان میدهد و دسترسی به مخزنهایت (repo) را میخواهد: خواندن و نوشتن، از جمله در مخزنهای خصوصی. این دسترسی برای ساختن و بهروز کردن پروژهات لازم است. فقط وقتی اجازه بده که صفحه روی github.com باشد.
کد منقضی شده؟ کد حدود ۱۵ دقیقه اعتبار دارد. اگر منقضی شد، دوباره روی اتصال GitHub کلیک کن.
مخزنهای یک سازمان:
- اگر سازمان برنامههای شخص ثالث را محدود کرده باشد، در صفحهٔ اجازه کنار نام سازمان روی Request (درخواست دسترسی) کلیک کن. بعداً هم میتوانی این کار را در github.com/settings/applications > AI-School Desktop انجام دهی.
- یکی از مالکان سازمان آن را در Settings > Third-party access > OAuth application policy سازمان تأیید میکند.
- بدون این تأیید، مخزنهای خودت کار میکنند ولی مخزنهای سازمان نه.
حساب دیگری میخواهی؟ روی قطع اتصال کلیک کن و پیش از وصل کردن دوباره، در مرورگر از github.com خارج شو (یا از پنجرهٔ خصوصی استفاده کن). وگرنه GitHub همان حسابی را به کار میبرد که با آن وارد شدهای.
نسخههای قدیمیتر برنامه پیام «ورود با GitHub هنوز در این نسخهٔ برنامه در دسترس نیست» را نشان میدهند. در این صورت برنامه را بهروز کن.
آنلاین کردن و بهروزرسانی
سپس مثلاً بگویید:
این پروژه را روی GitHub بگذار.
دستیار کارتی با نشانی دقیق و برچسبهای داخلی برنامه و شبکه روشن نشان میدهد. برای ادامه روی اجرا و برای توقف روی رد کردن کلیک کنید. مخزن جدید خصوصی است، مگر اینکه مخزن عمومی بخواهید. اگر نشانی github.com نباشد یا مخزن عمومی شود، کارت هشدار میدهد. هنگام آنلاین کردن میبینید کدام فایلها فرستاده میشوند.
بعدها مثلاً از این جملهها استفاده میکنید:
- «نسخهٔ جدید را آنلاین کن.» دستیار نسخههای جدیدتان را به GitHub میفرستد.
- «جدیدترین نسخه را بگیر.» دستیار تغییرات را از GitHub دریافت میکند.
- «پروژهٔ https://github.com/naam/project را در این پوشه دانلود کن.» دستیار یک پروژهٔ موجود را دانلود میکند.
یک پروژهٔ عمومی را بدون اتصال هم میتوانید دانلود کنید. برای آنلاین کردن و ساختن مخزن جدید، اتصال لازم است.
6. نکتههای ایمنی
- مخزنهای جدید خصوصیاند. فقط وقتی مخزنی را عمومی کنید که همه اجازهٔ دیدن کد را داشته باشند.
- هرگز گذرواژه، کلید یا اطلاعات محرمانهٔ دیگر را در برنامهتان نگذارید.
- از کلید Google API استفاده میکنید (که با
AIzaشروع میشود، مانند کلید وب یک برنامهٔ Firebase)؟ آن را در فایلی بگذارید که دستیار بیرون از نسخهها نگه میدارد، مانند.env. اگر کلید در کدتان باشد، آن فایل آنلاین نمیشود. - پیش از کلیک روی اجرا، همیشه نشانی روی کارت را بررسی کنید.
- اتصال بهصورت رمزگذاریشده در حساب کاربری شما روی همین رایانه ذخیره میشود. دستیار هرگز کلید GitHub شما را نمیبیند. اگر روی رایانهٔ مشترک کار میکنید، در پایان کار روی قطع اتصال کلیک کنید.
- قطع اتصال اتصال را فقط از همین رایانه حذف میکند. اگر میخواهید دسترسی را کاملاً لغو کنید، این کار را در GitHub در Settings > Applications انجام دهید.