چگونه اولین وب سایت خود را Vibe Code کنید

برنامه نویسی Vibe به عنوان یک کلمه کلیدی شروع شد اما به سرعت به یک دسته نرم افزاری خاص تبدیل شد. اکنون تعداد پلتفرم‌های هوش مصنوعی که ویژگی‌های کدنویسی vibe را ارائه می‌کنند نسبت به روزهایی که در سال وجود دارد، بیشتر است. اما اگر می‌خواهید از یکی استفاده کنید، باید بدانید که چگونه کار می‌کنند و تفاوت آن‌ها با پلت‌فرم‌های بدون کد یا کم‌کدی که ممکن است در گذشته استفاده کرده‌اید را داشته باشید.

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

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

نحوه کار کدگذاری vibe

کدنویسی Vibe به معنای سنتی برنامه نویسی نیست. شما کد نمی نویسید، بنابراین بیشتر شبیه سازندگان وب سایت بدون کد یا کشیدن و رها کردن است تا نوشتن برنامه های مبتنی بر HTML5 یا React در یک ویرایشگر متن.

اما به لطف پیشرفت‌های اخیر در مدل‌های زبان بزرگ (LLM) و هوش مصنوعی مولد، می‌توانید اساسا آنچه را که می‌خواهید وب‌سایت‌تان انجام دهد و ظاهر آن را توصیف کنید، سپس به پلتفرم اجازه دهید درخواست شما را تفسیر کند و کد مورد نیاز را در HTML، CSS و جاوا اسکریپت تولید کند.

سپس می‌توانید کد را به‌عنوان فایل خام به هر سرور میزبانی وب مورد نظر خود صادر کنید، یک دامنه جدید ثبت کنید و در عرض چند دقیقه فعال شوید.

اما در واقعیت، همیشه به این سادگی نیست.

وقتی درخواستی را وارد می‌کنید که هوش مصنوعی از آن تولید کند - بسته به اینکه چقدر خاص هستید و فناوری زیربنایی چقدر پیشرفته است - در نهایت به چیزی نزدیک می‌شوید که در بهترین حالت به عملکرد نزدیک است اما هنوز برای تولید آماده نیست. سپس باید سایت تولید شده توسط هوش مصنوعی را تغییر دهید و با استفاده از دستورات بعدی طراحی را اصلاح کنید تا زمانی که به چیزی که از آن راضی هستید برسید.

انواع ابزارهای کدگذاری vibe

البته همه ابزارهای کدنویسی vibe یکسان کار نمی کنند.

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

دسته ابزار کاری که انجام می دهد بهترین برای

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

مولدهای Frontend/UI اجزای بصری و طرح‌بندی‌ها را تولید کنید که اغلب به صورت کد قابل صادرات هستند صفحات فرود، نمونه های اولیه طراحی، یا صیقل دادن ظاهر سایت موجود

پلتفرم های همه کاره تولید کد هوش مصنوعی را با میزبانی، دامنه و ایمیل در یک اشتراک همراه کنید مبتدیانی که می خواهند یک داشبورد واحد برای کل وب سایت داشته باشند، شروع به پایان می کنند

دستیاران کدنویسی هوش مصنوعی داخل یک ویرایشگر کد بنشینید و کار را برای افرادی که قبلا کد می نویسند سرعت بخشید توسعه دهندگانی که یک سایت را فراتر از آنچه که درخواست خالص می تواند انجام دهد گسترش می دهند یا سفارشی می کنند

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

چگونه گام به گام اولین وب سایت خود را کد Vibe کنیم

(اعتبار تصویر: Bolt.new) هر پروژه کدنویسی vibe تقریبا یک قوس را دنبال می کند، صرف نظر از اینکه کدام پلتفرم را انتخاب می کنید. شما از یک بریف به زبان ساده به یک پیش‌نمایش زنده می‌روید، سپس قبل از انتشار، روی صفحات، طراحی و هر مورد اضافی که سایت شما نیاز دارد لایه‌بندی می‌کنید.

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

مرحله 1: اولین درخواست خود را بنویسید

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

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

(اعتبار تصویر: دوست داشتنی) مرحله 2: ساختار تولید شده را مرور کنید

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

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

مرحله 3: طراحی را با اعلان های بعدی اصلاح کنید

از دستورات هدفمند برای تنظیم عناصر منفرد مانند رنگ ها، فاصله ها، فونت ها، قرار دادن تصویر یا سبک دکمه ها استفاده کنید. بسیاری از پلتفرم‌ها همچنین دارای یک ویرایشگر بصری هستند که می‌توانید روی یک عنصر کلیک کرده و مستقیما آن را ویرایش کنید، که سریع‌تر از توصیف یک تغییر کوچک در کلمات است.

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

(اعتبار تصویر: گوگل) مرحله 4: اگر به طور منظم محتوا را منتشر می کنید، یک CMS اضافه کنید

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

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

مرحله 5: اگر چیزی می فروشید، ویژگی های تجارت الکترونیک را اضافه کنید

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

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

(اعتبار تصویر: Lovable.dev) مرحله 6: یک دامنه را وصل کنید و زنده شوید

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

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

بایدها و نبایدهای کدنویسی Vibe

ابزارهای کدنویسی Vibe بسیاری از موانع فنی برای ساخت یک وب سایت را از بین می برند، اما این سرعت با مواردی همراه است که ارزش دانستن قبل از انتشار را دارد.

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

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

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