این یک ارسال برای چالش AWS Amplify Fullstack TypeScript است.
چیزی که من ساختم
بنابراین روز دیگر — که ممکن است در هر مقطع زمانی بین یک هفته تا سه سال پیش باشد زیرا می دانید، پیچ و تاب زمانی همه گیر – من در TikTok بودم که به خاطر این ویدیو با صدای بلند می خندیدم:
https://www.youtube.com/watch?v=xbmHo5HDB9g
… تقلید از نحوه ضبط پیام های تبریک پست صوتی در گذشته.
یادم می‌آید که فکر می‌کردم، “باید یک برنامه احیا یا چیزی برای این وجود داشته باشد!” و وقتی چالش Amplify Gen 2 AWS Challenge را دیدم، فکر کردم که این می تواند بهترین فرصت برای ساختن آن باشد. اما، نه تنها این، بهانه‌ای را که برای شروع آزمایش با Amplify از دست داده بودم، به من داد.
در هفته گذشته، من چیزهای زیادی یاد گرفتم، اما مهمتر از همه، داشتن زیاد سرگرم کننده امتحان کردن چیزها چیزی که من در نهایت ساختم ترکیبی احمقانه از پست صوتی + دفترچه یادداشت بود (برای هموطنان برزیلی/هندی‌های اطراف، فکر کنید Orkut در روزهای اولیه). من کمی به آن فکر کردم و الزامات فنی که به آن توجه کردم این بود:
- یک کاربر می تواند یک پیام تبریک ضبط کند تا در نمایه خود نشان دهد.
- نمایه کاربری پیام تبریک کاربر و *پیام‌های صندوق ورودی عمومی او را نشان می‌دهد.
- سایر کاربران می‌توانند پیام‌های صوتی را ضبط کرده و به نمایه کاربر ارسال کنند (و بله، پس از ارسال، راه بازگشتی وجود ندارد).
نسخه ی نمایشی
در محصول نهایی، می توانید به پیام تبریک یک کاربر در نمایه او گوش دهید:
و همچنین ضبط و ارسال یک پست صوتی:
و در آخر، در صندوق ورودی خود، پیام‌های جدید جدا شده از پیام‌های باز شده را ببینید، یک پیام تبریک ضبط کنید و حساب خود را مدیریت کنید:
می‌توانید با ثبت‌نام و ترک اینجا خودتان آن را امتحان کنید من یک پست صوتی و در نهایت کد را می توانید در اینجا پیدا کنید.
نکات مهم در موردی که واقعاً آن را امتحان می کنید:
- پس از ارسال پیام، هیچ راه برگشتی وجود ندارد، فقط گیرنده می تواند آن را حذف کند
- پیام های ارسالی هستند عمومی، هر کسی می تواند به آنها گوش دهد 🙂
- روی دسکتاپ بهتر کار می کند
سفر
یک لحظه اشتراک گذاری بیش از حد: احتمالاً نمی دانید (چون من را نمی شناسید) اما من برای مدتی بیش از یک سال در Spotify مهندس پشتیبان بودم و در ماه دسامبر از کار اخراج شدم. از آن زمان، من چیزهایی را به خاطر یادگیری یاد می‌گیرم، تا بتوانم برنامه‌نویسی را دوباره برایم شادی بخشم. من به این نتیجه رسیدم که می خواهم یک توسعه دهنده وب فول استک شوم – من فکر می کنم. بنابراین من برای یادگیری ظاهر مدرن (معروف به React و دوستان) رفتم. من خیلی در آغاز این سفر جدید هستم، که ممکن است با مرور کد من متوجه آن شوید 👀 اما بله، من برای نوشتن دوباره کد هیجان زده هستم!
بازگشت به برنامه در این ارسال، نتیجه یک برنامه Next.js 14 برای مدیریت مسیریابی + tailwindcss و تا حدودی است. نوبروتالیسم طرح.
برخی از یادگیری ها در طول مسیر:
- با تمایز Amplify Gen 1 و Gen 2 گاهی اوقات یافتن پاسخ در وب سخت است. اسناد بسیار کامل هستند، اما زمانی که بخواهید چیزهایی را امتحان کنید که چندان واضح نیستند، متوجه خواهید شد که کارهای Gen 1 را انجام می دهید.
- … اما همانطور که گفتم، اسناد بسیار کامل هستند، و بسیاری از چیزهایی که در نتایج گوگل از دست دادم، پاسخ واقعی را در اسناد پیدا کردم (می دانم، می دانم، کلاسیک).
- از آنجایی که نتوانستم راهی برای استفاده از Amplify SDK برای فهرست کردن/پرس و جوی مستقیم کاربران Cognito پیدا کنم، جدول نگاشت نام کاربری را معرفی کردم تا کار را برایم آسان‌تر کند، راه‌های دیگری برای حل این مشکل وجود دارد، اما این مسیری است که من طی کردم.
- در ابتدا، می‌خواستم ویژگی‌های بسیار بیشتری اضافه کنم، مانند توانایی کاربر برای انتخاب پیام‌های عمومی و کدام خصوصی، یا ضبط چندین تبریک و انتخاب اینکه کدام یک در نمایه نشان داده می‌شود…اما فرصت نداشتم. تسلیم و به نوعی بیش از حد احساس می شد.
اجزای متصل و/یا ویژگی کامل
من توانستم یک را ایجاد کنم پر از ویژگی برنامه با ادغام:
- داده ها -> DynamoDB برای ذخیره پیام ها، تبریک ها و نقشه برداری نام کاربری و AppSync GraphQL API.
- ذخیره سازی -> S3 برای ضبط صوتی پیام ها و احوالپرسی ها.
- احراز هویت -> Cognito با ورود از طریق ایمیل و استفاده از auth اجزای رابط کاربری متصل برای ورود/ثبت نام و مدیریت حساب.
- کارکرد -> توابع لامبدا برای اعتبارسنجی / مدیریت نام های کاربری.
با استفاده از Amplify Gen 2 راه اندازی و استقرار همه این مؤلفه ها به یک کار بسیار ساده تبدیل می شود.
این یک بسته بندی است
من به چیزی که ساخته‌ام بسیار افتخار می‌کنم، باید مجموعه‌ای از چیزهای جدید را امتحان کنم و اکنون فهرست طولانی‌تری از چیزهای React/Next.js دارم که باید عمیق‌تر به آنها بپردازم. اما به طور کلی، من بیشتر به خودم افتخار می کنم که در طول هفته به برنامه پایبند بودم و توانستم یک پروژه سرگرم کننده را یک بار دیگر به پایان برسانم.
Amplify Gen 2 استقرار برنامه ها در AWS را چنان ساده می کند که شبیه تقلب به نظر می رسد. وقتی متوجه شدید که چه امکاناتی وجود دارد، واقعا ابزاری باورنکردنی است. امیدوارم بتوانید چند پیام صوتی ارسال کنید، اگر (یا باید بگویم چه زمانی) اشکالی پیدا کردید، در نظرات به من اطلاع دهید 🐛
