آموزش Angular: برنامه های وب پیشرفته

مقدمه Introduction

• خوش آمدی Welcome

• آنچه باید بدانید What you should know

• با استفاده از پرونده های تمرینی Using the exercise files

1. برنامه های وب مترقی 1. Progressive Web Apps

• یک برنامه وب مترقی چیست؟ What is a Progressive Web App?

• معماری مترقی Progressive architecture

• PWA امروز PWAs today

• نسخه نمایشی Android و iOS Android and iOS demo

2. تهیه برنامه زاویه ای 2. Preparing the Angular App

• بررسی فناوری Technology review

• تنظیم پروژه اصلی Setting up the basic project

• اجرای برنامه Running the app

• ایجاد کلاس های منطق کسب و کار Creating the business logic classes

• ایجاد خدمات: موقعیت جغرافیایی و نقشه ها Creating services: Geolocation and maps

• ایجاد خدمات: داده Creating services: Data

3. ایجاد رابط کاربری 3. Creating the User Interface

• با استفاده از مواد زاویه ای Using Angular Material

• ایجاد اجزای صفحه Creating the page components

• اضافه کردن مسیرها به پروژه Adding routes to the project

• ایجاد قطعات: لیست Creating components: List

• ایجاد اجزا: قهوه Creating components: Coffee

• افزودن موقعیت مکانی Adding place location

• اضافه کردن رتبه های قهوه Adding coffee ratings

• جزء قهوه یک ظاهر طراحی شده Styling coffee component

4- اتصال به خدمات وب 4. Connecting to Web Services

• ایجاد یک API RESTful Creating a RESTful API

• اتصال زاویه ای با ماژول HTTP Connecting Angular with HPPT module

• اتصال Connecting the form with the service

• ویرایش ورودی قهوه Editing a coffee entry

• عملکردهای تلفن همراه در ارتباط است Connecting mobile actions

5- ایجاد PWA قابل نصب 5. Creating an Installable PWA

• برنامه وب آشکار است The web app manifest

• تعیین نمادها و رنگ های تم Defining icons and theme colors

• ساخت یک برنامه وب صفحه اصلی iOS Making an iOS home screen web app

• تست قابلیت نصب Testing installation capabilities

• دعوت از کاربر برای نصب برنامه Inviting the user to install the app

6. رفتن به صورت آفلاین با کارگران خدمات 6. Going Offline with Service Workers

• یک کارگر خدماتی چیست؟ What is a service worker?

• پوسته برنامه قبل از ذخیره سازی با ngsw Pre-caching app's shell with ngsw

• ارائه برنامه در حالی که آفلاین است Serving the app while offline

• UI را برای تغییر وضعیت شبکه به روز کنید Update UI on network status change

• پنهان پنهان ngsw-manifest Dynamic ngsw-manifest cache

• پشتیبانی از به روز رسانی برنامه ها Supporting app updates

• افزودن اعلانهای فشار وب Adding web push notifications

• اعتبارسنجی با Lighthouse و DevTools Validating with Lighthouse and DevTools

نتیجه Conclusion

• مراحل بعدی Next steps