طراحی به نسخه آزمایشی: تسریع توسعه برنامه با ابزار هوش مصنوعی

Summarize this content to 400 words in Persian Lang
چگونه با کمک V0، Claude، و ChatGPT، به‌سرعت پیش‌نمایش یک برنامه React را برای AWS re:Invent طراحی و ساختم.

چالشتیم DataStax Developer Relations می‌خواست نشان دهد که چگونه Langflow، یک IDE کم‌کد و بصری، می‌تواند با یک پایگاه داده محلی استفاده شود. یک توسعه دهنده باطن یک نمونه Langflow را ایجاد کرد که با پایگاه داده Apache Cassandra® کار می کرد. او از Create React App برای یک POC frontend سریع برای پرس و جو از موجودی سواگ شرکت استفاده کرد.

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

توانایی رها کردن ارجاعات بصری در ابزارها برای تسهیل تکرار، یک تغییر بازی برای طراحان است.

من یک اسکرین شات از اثبات UI مفهومی را در V0 انداختم تا ایده پردازی سریع شروع شود. با تنظیم نتایج با یک سری دستورات، استایل و چیدمان اجزا را به روز کردم. این کد React برای کامپوننت هایی تولید کرد که می توانستم به عنوان نقطه شروع استفاده کنم.

هرچند نه چندان سریع. V0 از shadcn استفاده می کند که به طور کامل با Create React App سازگار نیست.

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

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

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

ساختن همه چیز در کد، استفاده مجدد از مؤلفه‌ها و سبک‌ها را در پروژه‌ها آسان می‌کند و به ما امکان می‌دهد برنامه‌های جدید را به سرعت راه‌اندازی کنیم. هنگامی که تیم DevRel برای نسخه ی نمایشی دیگری به یک رابط کاربری چت سریع نیاز داشت، این کار مفید بود.

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

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

من بین Claude و ChatGPT تغییر اسکرین شات از نتایج تغییرات کد، انجام تنظیمات و اجرای برنامه برای مشاهده نتایج را تغییر دادم. قالب بندی پس از کار در چرخه های تکراری بسیار بهبود یافته است. با این حال، پرس‌و‌جوها هنوز نتایج ثابتی نداشتند.

بدانید چه زمانی باید یک هم تیمی را تگ کنیداین برنامه 95 درصد از راه را به آنجا رسانده بود، اما باید به زودی کار را تمام کنم. من از یک توسعه دهنده front-end برای عیب یابی مشکل سازگاری کمک خواستم. آنها به سرعت یک تابع تجزیه نوشتند، و ما آماده بودیم که به صورت زنده پخش کنیم! 🚀

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