توسعه یک برنامه برای مدیریت خانه با AWS Amplify

سلام به همه

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

🚨لطفا توجه داشته باشید، این برنامه یک پروژه شخصی است و برای استفاده تجاری در نظر گرفته نشده است. این فقط برای استفاده من و خانواده من طراحی شده است.🚨

💡پست اصلی ژاپنی اینجاست.(این را هم نوشتم)💡
https://qiita.com/tttol/items/d79b5e67de4c33e27858

• هر کسی که به دنبال حل مشکلات با استفاده از برنامه های وب است
• کسانی که نام Amplify را شنیده اند اما جزئیات آن را نمی دانند
• افرادی که می خواهند برنامه های کاربردی وب را با استفاده از منابع AWS به راحتی توسعه دهند
• کسانی که دانش توسعه اپلیکیشن دارند اما اعتماد کمتری به زیرساخت دارند

“مشکل ما: از بین بردن دردسر بازپرداخت بین اعضای خانواده”

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

همسر: “من رفتم خرید و هزینه را تقبل کردم، پس لطفا بعدا به من پس بدهید.”
من: «ممنون. اوه، اتفاقا من دیروز از داروخانه دستمال کاغذی خریدم، بنابراین می‌خواهم این هزینه را جبران کنم.»
همسر: “هوم، اما من قصد دارم فردا به فروشگاه بروم، پس شاید بتوانیم آن را هم بگنجانیم…”
من: “اوه…” (اینجاست که از فکر کردن به آن خسته می شوم.)

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

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

با به اشتراک گذاشتن این صفحه گسترده بین خود، هدف ما این بود که مدیریت بازپرداخت ها را آسان تر کنیم.

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

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

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

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

من برنامه را با Next.js ساختم و با استفاده از Amplify Hosting آن را مستقر کردم.

را SUMMARY بخش بالای صفحه، بدهی هر فرد را نشان می دهد.

منطقه زیر که لیستی از اقلامی را نشان می دهد که بازپرداخت شده اند. می توانید ببینید که دو مورد، buy grocery و tissue، وارد شده اند. بر اساس این دو مورد، برنامه محاسبه می کند که شوهر هیچ بدهی ندارد، در حالی که زن 1051 ین بدهی دارد. (روش محاسبه بدهی بعدا توضیح داده خواهد شد.)

می توانید موارد جدید را از صفحه اضافه کنید.

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

• به سختی می توان در یک نگاه متوجه شد که چقدر بدهکار هستید.

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

خلاصه دو مورد را نشان می دهد: Total NET debt و debtدر اینجا هر یک از اینها نشان دهنده چیست:

• Total NET debt – این مبلغ نهایی را که یک نفر پس از کسر مبالغ پرداخت نشده متقابل بدهکار است نشان می دهد.
• debt – این مقدار کل مبلغ پرداخت نشده برای هر فرد را قبل از هر گونه جبران نشان می دهد.

بیایید به یک مثال خاص نگاه کنیم.

در تصویر، شوهر قبلاً 2500 ین را پوشش داده است در حالی که زن 398 ین را پوشش داده است. شوهر باید نیمی از 398 ین یعنی 199 ین را به زن بپردازد. زوجه باید نیمی از 2500 ین یعنی 1250 ین را بپردازد. این دو مقدار در زیر نشان داده شده است debt.

با کم کردن این دو مقدار، 1250 – 199 = 1051 بدست می آید، یعنی زن در نهایت 1051 ین به شوهر بدهکار است.

بنابراین، Total NET debt برای شوهر 0 ین و برای زن 1051 ین است.

معماری اپلیکیشن به شرح زیر است. برای کسانی که با Amplify آشنا هستند، این تنظیمات باید کاملاً آشنا باشد.

میزبانی

من از Amplify Hosting استفاده می کنم. در زیر هود، S3 و CloudFront برای ارائه محتوای HTML استفاده می شود.

سطل S3 و توزیع CloudFront مورد استفاده در اینجا قابل مشاهده یا ویرایش نیستند. به نظر می رسد که این منابع به صورت داخلی توسط AWS مدیریت می شوند.

پایگاه داده و API

من از DynamoDB به عنوان پایگاه داده استفاده می‌کنم، جایی که مواردی را که هر شخص برای آن پول پرداخت کرده است ذخیره می‌کنم. عملیات CRUD با استفاده از AppSync با GraphQL انجام می شود.

در Amplify یک فایل فراخوانی می شود amplify/data/resource.ts به طور خودکار تولید می شود، جایی که می توانید معماری DynamoDB را به عنوان IaC (زیرساخت به عنوان کد) تعریف کنید.

import { a, defineData, type ClientSchema } from '@aws-amplify/backend';

const schema = a.schema({
  Todo: a.model({
      content: a.string(),
      isDone: a.boolean()
    })
    .authorization(allow => [allow.group('Admin')]), // User-group based data access
});

// Used for code completion / highlighting when making requests from frontend
export type Schema = ClientSchematypeof schema>;

// defines the data resource to be deployed
export const data = defineData({
  schema,
  authorizationModes: {
    defaultAuthorizationMode: 'apiKey',
    apiKeyAuthorizationMode: { expiresInDays: 30 }
  }
});

همانطور که در ابتدا ذکر شد، این برنامه فقط توسط من و همسرم استفاده می شود، بنابراین کنترل دسترسی مناسب برای مشاهده و ویرایش داده های برنامه ضروری است. در data/resource.ts، من کنترل های دسترسی را تنظیم کرده ام تا فقط کاربران یک گروه کاربری خاص در Cognito بتوانند به DynamoDB دسترسی داشته باشند. قسمت مربوطه به شرح زیر است:

const schema = a.schema({
  Todo: a.model({
      content: a.string(),
      isDone: a.boolean()
    })
    .authorization(allow => [allow.group('Admin')]), // User-group based data access
});

را .authorization(allow => [allow.group('Admin')]), تضمین می کند که فقط کاربران در Admin گروه دسترسی دارند ( Admin گروه به صورت دستی در Cognito از طریق کنسول مدیریت AWS از قبل ایجاد می شود.)

مراجع:
https://docs.amplify.aws/react/build-a-backend/data/set-up-data/
https://docs.amplify.aws/react/build-a-backend/data/customize-authz/user-group-based-data-access/

احراز هویت

Cognito برای احراز هویت استفاده می شود.

مشابه دیتابیس، فایلی به نام amplify/auth/resource.ts به طور خودکار تولید می شود، جایی که می توانید معماری احراز هویت را تعریف کنید.

import { defineAuth } from "@aws-amplify/backend"

/**
 * Define and configure your auth resource
 * @see https://docs.amplify.aws/gen2/build-a-backend/auth
 */
export const auth = defineAuth({
  loginWith: {
    email: true,
  },
})

مراجع:
https://docs.amplify.aws/react/build-a-backend/auth/set-up-auth/

صورت‌حساب Amplify بر اساس پرداخت هزینه انجام می‌شود.

https://aws.amazon.com/jp/amplify/pricing/

هزینه عملیاتی برنامه بودجه بندی خانواده من حدود 100 تا 200 ین (≒ 1 تا 1.5 دلار) در ماه است. از آنجایی که کاربران فعال فقط من و همسرم هستیم، عملاً رایگان است.

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