اپلیکیشن رزرو بلیط اتوبوس | Angular 18 + .NET API

Summarize this content to 400 words in Persian Lang
در این وبلاگ، شما را با ساختن یک برنامه رزرو بلیط اتوبوس با استفاده از Angular 18 برای قسمت جلویی و NET API برای قسمت پشتی آشنا می‌کنم. این برنامه تمام پشته به کاربران امکان می دهد مسیرهای اتوبوس را جستجو کنند، در دسترس بودن صندلی ها را بررسی کنند و بلیط رزرو کنند. اگر یک فیلم آموزشی را ترجیح می دهید، می توانید راهنمای گام به گام من را در اینجا مشاهده کنید: ویدیوی کامل را تماشا کنید.

نمای کلی

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

می‌توانید نسخه زنده برنامه رزرو بلیط اتوبوس را در اینجا کاوش کنید.

برای بازدید از برنامه زنده اینجا را کلیک کنید

Angular 18: آخرین نسخه Angular عملکرد بهبود یافته، کد کارآمد و رابط کاربری پاسخگوتر را معرفی می کند که آن را برای برنامه های پرترافیک مانند رزرو بلیط ایده آل می کند.
API دات نت: دات نت با چارچوب قوی و ویژگی های امنیتی قوی، مدیریت کارآمد و ایمن داده ها را امکان پذیر می کند. به طور یکپارچه با پایگاه‌های داده متصل می‌شود و امکان به‌روزرسانی بی‌درنگ برنامه‌های اتوبوس و وضعیت رزرو را فراهم می‌کند.

ویژگی های برنامه

1. احراز هویت کاربر:کاربران می توانند برای دسترسی به حساب های خود، مشاهده تاریخچه رزرو و مدیریت پروفایل های خود ثبت نام کرده و وارد شوند.

2. مسیرها را جستجو کنید:کاربران می توانند با ورود به شهرهای مبدأ و مقصد و انتخاب تاریخ سفر مورد نظر خود، اتوبوس را جستجو کنند. این برنامه زمان‌بندی اتوبوس‌های بی‌درنگ را از پایگاه داده دریافت می‌کند.

3. در دسترس بودن صندلی در زمان واقعی:این برنامه نمایش تصویری از در دسترس بودن صندلی را در اختیار کاربران قرار می دهد و انتخاب و رزرو صندلی های خاص را آسان می کند.

4. رزرو و پرداخت:هنگامی که کاربران صندلی های خود را انتخاب کردند، به درگاه پرداخت می روند، جایی که می توانند با خیال راحت هزینه بلیط خود را پرداخت کنند.

5. طراحی واکنشگرا:این برنامه کاملاً پاسخگو است و تجربه کاربری روان را در دسکتاپ، تبلت و دستگاه های تلفن همراه تضمین می کند.

پشته فناوری

Front-End:

Angular 18: اجزای مستقل، عملکرد رندر بهتر و ماژولار بودن.

بوت استرپ: برای طراحی و چیدمان واکنشگرا.

TypeScript: برای تایپ قوی و کد ساخت یافته.

Back-End:

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

چارچوب نهاد: برای تعاملات پایگاه داده استفاده می‌شود، به‌روزرسانی‌های بی‌درنگ برای در دسترس بودن صندلی و رزرو را امکان‌پذیر می‌کند.

پایگاه داده:

SQL Server: برای ذخیره داده های کاربر، برنامه های اتوبوس، رزروها و اطلاعات پرداخت.
راهنمای گام به گام

1. راه اندازی پروژه Angular 18با راه اندازی یک پروژه Angular 18 شروع کنید. از Angular CLI برای مقداردهی اولیه برنامه، راه اندازی اجزا و طراحی UI با بوت استرپ استفاده کنید.

ng new bus-ticket-booking-app

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ایجاد کامپوننت برای موارد زیر:

فرم جستجو
انتخاب صندلی
احراز هویت کاربر

2. یکپارچه سازی API دات نتبرای کاوش در اسناد API دقیق برای برنامه رزرو بلیط اتوبوس، اینجا را کلیک کنید

NET API داده های کاربر، اطلاعات رزرو و تعامل با پایگاه داده SQL را مدیریت می کند. در اینجا یک جریان ساده شده است:

ثبت نام و احراز هویت کاربر: API اعتبار کاربر را تأیید می کند و جلسات را مدیریت می کند.

جستجوی مسیر و در دسترس بودن صندلی: داده های بلادرنگ را از پایگاه داده واکشی می کند.

پردازش رزرو و پرداخت: پرداخت ایمن را از طریق یک دروازه یکپارچه تضمین می کند.

3. اتصال Front-End با Back-Endبا استفاده از **HTTPClient **در Angular، قسمت جلویی را به API دات نت متصل کنید تا درخواست ها را ارسال کنید و پاسخ ها را مدیریت کنید. به عنوان مثال، فرم جستجوی اتوبوس، درخواستی را برای بازیابی اتوبوس های موجود بر اساس ورودی کاربر به API ارسال می کند.

this.http.get(‘api/buses’, { params: { from: ‘cityA’, to: ‘cityB’, date: ‘2024-08-20’ }})
.subscribe(response => { /* handle response */ });

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

4. مدیریت احراز هویت کاربربا رویکرد JWT (JSON Web Token)، API دات نت پس از ورود موفقیت آمیز، توکن ها را صادر می کند. سپس Angular توکن را در حافظه محلی ذخیره می‌کند و آن را در هدرها برای درخواست‌های آتی به API قرار می‌دهد.

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

6. استقرار برنامهپس از توسعه، قسمت جلویی و انتهای پشتی را به طور جداگانه مستقر کنید. قسمت جلویی را می توان با استفاده از پلتفرم هایی مانند Netlify یا Vercel میزبانی کرد، در حالی که قسمت پشتی را می توان در Azure یا AWS میزبانی کرد.

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

نتیجه گیریاین برنامه رزرو بلیط اتوبوس نشان می دهد که چگونه Angular 18 و .NET API را می توان برای ساخت یک برنامه تمام پشته و بلادرنگ ترکیب کرد. این برنامه ویژگی‌های ضروری مانند احراز هویت کاربر، مدیریت داده‌ها در زمان واقعی و دروازه‌های پرداخت امن را نشان می‌دهد که همگی در یک رابط کاربری پاسخگو و کاربرپسند پیچیده شده‌اند.

برای مشاهده کامل پروژه، آموزش ویدیویی کامل را ببینید: اینجا را تماشا کنید.

ng new bus-ticket-booking-app

this.http.get('api/buses', { params: { from: 'cityA', to: 'cityB', date: '2024-08-20' }})
  .subscribe(response => { /* handle response */ });