AWS Amplify و ChatGPT: یکی از راه‌های تولید فایل‌های ساختگی html برای دموهای ما 🤖

در چندین پروژه که کار کرده ام با این چالش مواجه شده ام که نمونه ای از آنچه در پایان پروژه انجام می شود را ارائه دهم. معمولا این کار بعد از چند جلسه است که در آن ملزومات جمع آوری می شود و ایده پردازی انجام می شود.

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

همه اینها بسته به تخصص تیم های ما ممکن است کمی طول بکشد، اما ما همچنان در این راه اندازی اولیه زمان را از دست خواهیم داد. خوشبختانه در یکی از پروژه های گذشته ام، این فرصت را پیدا کردم که با AWS Amplify کار کنم

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

این بدان معناست که تیم‌های ما می‌توانند از استقرار هر دو بخش frontend و backend برای تقویت 🧐 استفاده کنند.

من از React برای frontend خود استفاده خواهم کرد، که از ChatGPT درخواست می‌کند تا فایل‌های ساختگی HTML را تولید کند که سپس می‌توانیم از آنها به عنوان نقطه شروع استفاده کنیم.لطفاً توجه داشته باشید که استفاده از همان کد ارائه شده توسط ChatGPT برای موارد استفاده در تولید توصیه نمی شود، زیرا ممکن است باعث بروز مشکلاتی در سرقت ادبی شود و این فقط برای اهداف نمایشی برای نشان دادن ادغام با API از OpenAI است.⚠️.

با این اوصاف، من از این پیوند از AWS برای مقداردهی اولیه اجزای نسخه آزمایشی استفاده کردم.

من از یک مخزن GitHub استفاده می‌کنم که می‌تواند با Cognito ادغام شود تا به‌محض اعمال فشار، آخرین commit را اجرا کند.

همچنین می‌توانیم کامپوننت‌های Backend را با Amplify Studio اضافه کنیم. رابط کاربری کاملاً شهودی است و تنها با چند کلیک می‌توانیم مؤلفه‌های احراز هویت (Cognito)، داده (AppSync و DynamoDB)، ذخیره‌سازی (S3) و توابع (Lambda) را داشته باشیم.

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

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

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

برای شروع، من باید تابع لامبدا را تغییر دهم، تا توضیحات هر مورد و تصویر آپلود شده را بخوانم، که پیش‌نویسی از آنچه ما به عنوان یک فایل ساختگی می‌خواهیم دارد. بر این اساس، من یک درخواست به ChatGPT ارسال می کنم تا فایل HTML را تولید کند و پاسخ را روی ویژگی HTML مورد ذخیره کند. در این بین، ویژگی HTML نام مورد را دارد. من همچنین 2 ستون دیگر اضافه کردم، یکی برای منعکس کردن ارزش ویژگی HTML موارد ما و دیگری برای یک پیوند خارجی (کمی بیشتر در مورد آن در یک لحظه)

درخواست ChatGPT برای این دمو بسیار ساده است، اما می‌توان آن را کاملاً پارامتریزه کرد و البته ما می‌توانیم مدل خود را بر اساس نیاز خود آموزش دهیم، اما من آن را برای نسخه آزمایشی ساده نگه می‌دارم و از یکی از موارد پیش‌فرض استفاده می‌کنم.

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

اکنون به پیوند خارجی برمی گردیم. من به صورت دستی یک توزیع CloudFront ایجاد کردم تا فایل های HTML تولید شده توسط ChatGPT را در معرض دید قرار دهم. من همچنین باید تابع Lambda را تغییر دهم تا فایل HTML را در S3 نیز ذخیره کنم، که به عنوان مبدا CloudFront عمل می کند.

در اینجا لازم به ذکر است که من از Amplify Hosting به عنوان راه حلی برای افشای برنامه React خود استفاده می کنم. همچنین می‌توانید به جای آن از CloudFront + S3 استفاده کنید و به Amplify اجازه دهید این استقرار را نیز انجام دهد. اگر می‌خواهیم کنترل بیشتری با راه‌اندازی CDN و سطل‌های میزبانی داشته باشیم، این گزینه برای استفاده است، اما برای این نسخه آزمایشی، Amplify Console (میزبانی) بیش از اندازه کافی است… اما ممکن است بعداً استقرار را تغییر دهم تا فقط استفاده کنم. CloudFront + S3 😼.

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

یک نمونه دیگر

یک فایل ساختگی HTML دیگر به صورت خودکار تولید شد

درس های آموخته شده

Amplify می تواند به ما در کاهش زمان توسعه برنامه هایمان کمک کند. این نه تنها از React بلکه برای سایر فریم ورک های محبوب برای توسعه وب و موبایل نیز پشتیبانی می کند.

اگر دانش عمیقی از تمام خدمات AWS مورد نیاز برای این نوع برنامه ها نداشته باشیم، این می تواند ما را از بسیاری از مشکلات نجات دهد، اما اگر یک شرکت سازمانی هستیم که در آن چندین نوع پروژه در یک حساب کاربری داریم (به هر دلیلی). ، همه چیز پیچیده می شود.

حتی اگر می‌توانیم منابع AWS موجود را به‌عنوان مؤلفه‌های Amplify وارد کنیم، ممکن است مدیریت منابع به اشتراک‌گذاشته شده بسیار پیچیده باشد و با پروژه‌های دیگر به هم نخورد. علاوه بر این، اگر برنامه ما نیاز به الزامات خاصی مانند دسترسی به برنامه ما فقط از شبکه داخلی شرکت ما داشته باشد، این راه حل ممکن است راه پیشنهادی نباشد، زیرا باید با پیکربندی شبکه سر و کار داشته باشیم، شاید یک WAF اضافه کنیم. برای فیلتر IP یا انتخاب راه حل دیگری که سازگاری با VPC + DirectConnect را فراهم می کند، که استقرار را کاملاً آشفته می کند 🙀.

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

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