این یک ارسال برای چالش AWS Amplify Fullstack TypeScript است
چیزی که من ساختم
من برنامه‌ای ساختم که به کاربران کمک می‌کند با استفاده از Amplify Gen 2 با Typescript ویژگی نادر DC Bat Cowls را پیدا کنند. این که خفاش چیست را می توانید در اینجا پیدا کنید. بازار آنها اینجاست. Summary on Bat Cowls یک پروژه واقعاً جالب است که به من این امکان را می دهد تا کمیک DC خود را بسازم … و ابر شرور خود را در دنیای DC ایجاد کنم.
نسخه ی نمایشی
شما می توانید یک نسخه نمایشی زنده از برنامه را در اینجا مشاهده کنید:
https://www.dcbatcowls.com
مخزن Git:
https://github.com/markramrattan/dcbatcowls
سفر
روند (سفر) من شامل صرف هفته انتشار Amplify Gen 2 برای جذب تمام اطلاعات بود. وحشی بود!🤪 و بینشی باورنکردنی از گام های بزرگی که تیم AWS Amplify در حال انجام است. من احتمالاً می‌توانم 5 وبلاگ بنویسم… روی همه به‌روزرسانی‌های AWS AMPLIFY 😂 (بله به دلیلی با حروف بزرگ نوشته می‌شود که AMPLIFIED است…) اما اگر می‌خواهید مطالب جدید را بخوانید این دو وبلاگ را ببینید:
https://aws.amazon.com/blogs/mobile/team-workflows-amplify/
https://aws.amazon.com/blogs/mobile/new-in-aws-amplify-integrate-with-sql-databases-oidc-saml-providers-and-the-aws-cdk/
اولین کاری که انجام دادم این بود که Quickstart را در هفته انتشار Amplify Gen 2 انجام دادم. آن الگو به شما بینشی سریع و سریع (عملی) در مورد ویژگی های جدید می دهد. اگر می خواهید آن را بررسی کنید، اینجاست. من از نسخه NextJS App Router استفاده کردم.
آنچه عجیب یا جالب است این است که سفر توسعه خودم به NextJS و Typescript تغییر کرده است. سپس این ظاهر می شود… با AWS Amplify Gen 2 با استفاده از تجربه توسعه دهنده مبتنی بر TypeScript و کد اول (DX) برای تعریف backends.
Gen 2 DX یک تجربه توسعه‌دهنده یکپارچه Amplify را با قابلیت‌های میزبانی، باطن، و ایجاد رابط کاربری و رویکرد کد اول ارائه می‌دهد.
فکر می کنم این بدان معناست که … من یک * هستمتوسعه دهنده Full Stack… * به یاد می‌آورم روزهایی را که برنامه‌نویس فرانت‌اند را در رزومه‌ام قرار می‌دادم 😆 آن روزها خیلی گذشته است، من از این تجربه Full Stack Developer لذت می‌برم. درک عالی از نحوه عملکرد Amplify بخش مفاهیم است (احتمالاً مکانی عالی برای شروع). این صفحه یک نمای کلی عالی در مورد نحوه تنظیم مجدد ذهن خود در مورد آنچه در حال حاضر است دارد:
https://docs.amplify.aws/nextjs/how-amplify-works/concepts/
این نمودار از صفحه بالا برای درک بصری ساختارها عالی است:
خوب، نظریه کافی است! ما خواندن را انجام دادیم، بیایید این چالش Amplify Gen 2 را بسازیم و در آن شرکت کنیم. پایه اولیه پروژه، قالب شروع سریع است. گاهی اوقات بهتر است از یک بوم خالی شروع نکنید. آن را از بین بردم و شروع به کار روی مدل‌های داده‌ام کردم… چگونه می‌خواستم داده‌ها را ذخیره کنم، چگونه به نظر می‌رسید… آیا استفاده در آن قالب برای کاربران مفید است؟ در حال انعکاس، احتمالاً این کار را اشتباه انجام داده است. من باید زمان بیشتری را با کاربران صرف کنم و به عقب کار کنم. اگرچه… این پروژه هنوز در حال توسعه است و پس از اتمام چالش به کار روی آن ادامه خواهم داد.
من واقعاً از یادگیری ساخت مدل داده لذت بردم. من به Amplify Studio و انجام آن به روش بصری عادت دارم و این یک تغییر بزرگ برای من است. من آن را تجربه بهتری یافتم (اول کد) … که عجیب است (چون من شخص بصری تری هستم).
پس از صرف زمان برای کار کردن مدل. من از مدیر داده برای وارد کردن داده های مورد نیاز استفاده کردم. ای کاش راهی برای اضافه کردن داده ها به صورت انبوه وجود داشت (یعنی) این csv را آپلود کنید، آن را دوباره قالب بندی کنید و آن را در جداول پر کنید (احتمالا وجود دارد… اگر می دانید چگونه، نظر بدهید یا من را تگ کنید). اگرچه می‌گویم، زمانی که خفاش‌ها دوباره در بلاک چین قرار می‌گیرند، احتمالاً از API برای پر کردن داده‌ها استفاده خواهم کرد.
اتصال مدل به رابط کاربری Front UI سرگرم کننده بود. من از tailwind استفاده کردم، به چیزی که می‌دانم بازگشته‌ام (نه همیشه بهترین)، اگرچه توانستم به سرعت آن را طراحی کنم و چیز جالبی را بیرون بیاورم! 😎
بله، صفات مختلف قابل کلیک هستند و شما را به جزئیات بیشتر می برد (نادر).
برای من، این به نظر جالب می رسد! 😎 و خیلی سریع ساخته شد💨 معمولاً حداقل یک ماه طول می کشد تا آن را به این سطح برسانم. در عوض سرعت توسعه من را افزایش داده است. من از Amazon Q با ادغام Amplify استفاده کردم! آن شیزل خیلی خوب است! من می توانم بگویم که این یک بهبود 10 برابری در سرعت توسعه (برای من) است. اگرچه هنوز چیزهای زیادی برای یادگیری وجود دارد! و در مورد ادغام مزایای بیشتر کاربر هیجان زده هستم.
من همچنین یک کیف پول Web3 از ThirdWeb اضافه کردم تا کاربران در آینده بتوانند Bat Cowls خود را به برنامه متصل کنند. یکپارچگی عالی و توانایی تعیین کیف پول و محدود کردن استفاده به بلاک چین های خاص را دارد.
<ConnectButton
client={client}
wallets={wallets}
chain={defineChain(11297108109)}>
</ConnectButton>
من چهار جزء کامل متصل (داده / احراز هویت / عملکرد بدون سرور / ذخیره‌سازی فایل) را اضافه نکردم. فقط جزء داده برای این پروژه. من به راحتی می توانم سه مورد دیگر را اضافه کنم. با این حال، من سعی کردم این را در مورد خودآموزی و بهبود در راستای ایجاد چیزی مفید برای کاربر قرار دهم.
در ادامه (یادگیری مستمر)، قطعاً اجزای بیشتری را در صورت نیاز برای بهره مندی کاربر ادغام خواهم کرد.
به خاطر خواندن بلاگم از شما متشکرم. احساس رایگان برای بررسی آنچه من ایجاد کرده ام. همه بازخوردها استقبال می شود 😎
