کدنویسی برنامه های PWA بوسیله Vue JS 2, Firebase, NodeJS & Express

ایجاد یک برنامه وب مترقی زیبا به سبک اینستاگرام با Vue 2 ، Quasar V1 ، Firebase ، Nodejs & Express

عنوان اصلی : Quasar V1: PWA (with Vue JS 2, Firebase, NodeJS & Express)

سرفصل های دوره :

مقدمه:
چرا به Backend نیاز داریم؟
شروع به کار:
به روز رسانی: Quasar V1 Documentation
طرح، صفحات و مسیرها - شروع به ساخت Quasagram:
کد ماژول تمام شده
طراحی - صفحه اصلی:
کد ماژول تمام شده
طراحی - صفحه دوربین:
معرفی ماژول
یک قاب عکس و دکمه عکس اضافه کنید
افزودن فیلدهای متنی و دکمه ارسال
طراحی را برای دسکتاپ تطبیق دهید
یک Data Object برای Post Data تنظیم کنید
کد ماژول تمام شده
ویژگی‌های دستگاه اصلی - دوربین:
معرفی ماژول
نمایش فید دوربین در قاب عکس
getUserMedia - پشتیبانی مرورگر و Polyfill
تصویر را بگیرید
تصویر را به Blob تبدیل کنید
یک فیلد آپلود تصویر بازگشتی اضافه کنید
نمایش تصویر بازگشتی در بوم
دوربین را بعد از عکس برداری و وقتی کاربر صفحه را ترک می کند غیرفعال کنید
کد ماژول تمام شده
ویژگی‌های دستگاه بومی - مکان:
معرفی ماژول
مختصات موقعیت مکانی کاربر را دریافت کنید
نام شهر و کشور کاربران را دریافت کنید
رسیدگی به خطاها
یک حالت بارگیری اضافه کنید
اگر موقعیت جغرافیایی پشتیبانی نمی شود، دکمه مکان را پنهان کنید
کد ماژول تمام شده
Firebase - Cloud Firestore Database & Storage:
مقدمه ای بر Firebase
چگونه از Firebase استفاده می کنیم
یک پروژه Firebase ایجاد کنید
پایگاه داده Cloud Firestore - چند پست اضافه کنید
یک تصویر به فضای ذخیره سازی اضافه کنید
Node.js & Express Backend:
معرفی ماژول
Backend ما را به صورت محلی ایجاد و راه اندازی کنید
راه اندازی مجدد خودکار را با Nodemon اضافه کنید
نقطه پایانی پست های ساده را اضافه کنید
سرور Backend ما (1) را مستقر کنید - Heroku را راه اندازی کنید
سرور Backend ما (2) را مستقر کنید - با ساخت های Heroku مستقر کنید
اگر می خواهید از Cloud Functions استفاده کنید
کد ماژول تمام شده
دریافت پست‌های پایانی:
معرفی ماژول
به پایگاه داده Firestore متصل شوید
نقطه پایانی پست ها - پست ها را بگیرید
پست ها را در صفحه اصلی نمایش دهید
مرتب سازی پست ها بر اساس تاریخ
رسیدگی به خطاها
در حال بارگذاری
نمایش بازگشتی "هنوز هیچ پستی وجود ندارد".
کد ماژول تمام شده
ایجاد نقطه پایانی پست:
معرفی ماژول
نقطه پایانی createPost را اضافه کنید
متغیرهای محیطی برای مدیریت URL های API ما
داده های پست را به نقطه پایانی ارسال کنید
داده های فرم را با Busboy تجزیه کنید
ذخیره اطلاعات فیلد به عنوان یک پست (1)
ذخیره اطلاعات فیلد به عنوان یک پست (2)
تصویر را آپلود کنید (1) Google Cloud Storage را پیکربندی کنید
تصویر را آپلود کنید (2) تصویر را در پوشه Temp ذخیره کنید
تصویر را آپلود کنید (3) در Google Cloud Storage آپلود کنید و URL تصویر را ذخیره کنید
اعتبار سنجی را اضافه کنید
بررسی خطاها و موفقیت ها
Handle Loading
به یاد داشته باشید که به اندازه تصاویر خود در فضای ذخیره سازی توجه داشته باشید
کد ماژول تمام شده
تکلیف 1 - پایگاه داده و پایانه:
تکلیف 1 - پایگاه داده و پایانه
کار 1 - پروژه را اجرا کنید
کار 2 - یک پروژه Firebase ایجاد کنید
کار 3 - یک پایگاه داده Cloud Firestore ایجاد کنید
کار 4 - یک Node.js & Express Backend راه اندازی کنید
کار 5 - پایگاه داده Firestore را راه اندازی کنید
کار 6 - نقطه پایان وظایف
کار 7 - نمایش وظایف در برنامه
کار 8 - ایجاد نقطه پایانی کار (1)
کار 9 - ایجاد نقطه پایانی کار (2)
کار 10 - ایجاد نقطه پایانی کار (3)
کار 11 - یک صفحه بارگیری اضافه کنید
PWA - فایل راه اندازی و مانیفست:
معرفی PWA
Quasagram را در حالت PWA راه اندازی کنید
پرونده مانیفست
ویژگی های آشکار
کد ماژول تمام شده
PWA - نمادها برای همه دستگاه‌ها:
معرفی ماژول
Icon Genie را نصب کنید
نماد منبع را ایجاد کنید
آیکون ها را ایجاد کنید
کد ماژول تمام شده
PWA - نصب صفحه اصلی:
معرفی ماژول
بنر نصب برنامه را ایجاد کنید
یک نماد برنامه را به بنر اضافه کنید
نمایش بنر نصب برنامه در دسکتاپ
بنر نصب برنامه فقط در صورت نصب برنامه نمایش داده شود
اگر روی Yes کلیک کردند، درخواست نصب بومی را نشان دهید
به کاربر اجازه دهید بنر نصب برنامه را مخفی کند
بنر نصب برنامه را متحرک کنید
کد ماژول تمام شده
PWA - کارگران خدمات و جعبه کار:
معرفی ماژول
کارگر خدماتی چیست؟
رویدادهای کارگران خدماتی
Workbox چیست؟
پوشه src-pwa
قابلیت های ذخیره سازی اولیه و آفلاین
فایل Custom Service Worker را فعال کنید
PWA - Precaching:
معرفی ماژول
Precaching چیست؟
Precache را فعال کنید
برنامه تولید را بسازید و به Live Backend تغییر دهید
برنامه را در Firebase میزبانی کنید
نمایش Precaching در Live App
راهی سریعتر برای آنلاین شدن / آفلاین
کد ماژول تمام شده
PWA - استراتژی های ذخیره سازی:
معرفی استراتژی های ذخیره سازی
از چه استراتژی های ذخیره سازی می توانیم استفاده کنیم؟
Stale while Revalidate Strategy به عنوان همه چیز برای اکثر درخواست ها
Cache First Strategy برای فونت Google ما
اولین استراتژی شبکه برای درخواست پست
کد ماژول تمام شده
PWA - همگام سازی پس زمینه:
معرفی همگام سازی پس زمینه
پشتیبانی از همگام سازی پس زمینه را بررسی کنید
ایجاد همگام‌سازی پس‌زمینه پست
اگر پست آفلاین ایجاد شده باشد، به صفحه اصلی هدایت شوید
نمایش پست‌های آفلاین (1) - پایگاه داده IndexedDB را با IDB باز کنید
گزارش های جعبه کار را غیرفعال کنید
نمایش پست‌های آفلاین (2) - داده‌های درخواست خام را دریافت کنید
نمایش پست‌های آفلاین (3) - فیلدهای فرم را دریافت کنید و پست آفلاین را به صفحه اضافه کنید
به پست‌های آفلاین سبک متفاوتی بدهید
نمایش پست آفلاین آپلود شد (1) - افزودن onSync Hook به صف
نمایش پست آفلاین آپلود شد (2) - ارسال پیام به مشتری (مرورگر)
نمایش پست آفلاین آپلود شد (3) - سبک های پست آفلاین را حذف کنید
کد ماژول تمام شده
PWA - Push Notifications:
معرفی ماژول
چگونه اعلان‌های فشاری کار می‌کنند
ایجاد یک بنر «فعال کردن اعلان‌ها» (1) - استفاده مجدد از بنر نصب برنامه
ایجاد یک بنر "فعال کردن اعلان ها" (2) - بهبود سبک
درخواست مجوز اعلان‌ها
نمایش اعلان از برنامه ما
گزینه های اعلان
نمایش اعلان با استفاده از Service Worker
اقدامات اعلان
کلیک‌های اعلان را مدیریت کنید
Handle Notification بسته است
اشتراک Push موجود را بررسی کنید
یک اشتراک Push جدید ایجاد کنید
اشتراک Push را با Web Push ایمن کنید (1)
اشتراک Push را با Web Push ایمن کنید (2)
ذخیره اشتراک در پایگاه داده Cloud Firestore (1)
ذخیره اشتراک در پایگاه داده Cloud Firestore (2)
نکته ای درباره اشتراک های Push و کارگران خدمات
یک اعلان فشاری "پست جدید" از سرور Backend ما ارسال کنید
اگر از توابع ابری استفاده می‌کنید (مهم)
به اعلان‌های فشاری در Service Worker گوش دهید
نمایش اعلان فشار واقعی
صفحه اصلی ما را با کلیک بر روی اعلان باز کنید
URL Open را از Backend ارسال کنید
کد ماژول تمام شده
مرورگرهای دسکتاپ - تست و تعمیر:
معرفی ماژول
میزبانی برنامه
فایرفاکس - تست
فایرفاکس - رفع مشکلات
Safari - تست
Safari - رفع مشکلات
تست Edge و Internet Explorer در مک با VirtualBox
لبه
اینترنت اکسپلورر
کد ماژول تمام شده
موبایل - Android - در حال توسعه، آزمایش و بهبود:
معرفی ماژول
در حال توسعه در شبیه ساز Android (1) - Android Studio را نصب کنید
در حال توسعه در شبیه ساز Android (2) - راه اندازی دستگاه مجازی
در حال توسعه در شبیه ساز Android (3) - در شبیه ساز Android راه اندازی کنید
در حال توسعه در شبیه ساز اندروید (4) - اشکال زدایی
برنامه زنده را در شبیه ساز اندروید راه اندازی کنید
در حال توسعه بر روی یک دستگاه اندروید واقعی
رفع مشکل همگام‌سازی پس‌زمینه
نمایش تصویر در اعلان در Android
رفع همگام سازی پس زمینه را بررسی کنید
کد ماژول تمام شده
موبایل - iOS - در حال توسعه، آزمایش و تعمیر:
معرفی ماژول
در حال توسعه در iOS Simulator (1) - نصب Xcode و راه اندازی شبیه ساز
در حال توسعه در iOS Simulator (2) - راه اندازی در iOS Simulator
در حال توسعه در iOS Simulator (3) - اشکال زدایی
چگونه توانستم اشکال زدایی شبیه ساز سافاری کار کند
رفع پاورقی در iOS Safari
در حال توسعه بر روی یک دستگاه iOS واقعی
مشکلات دکمه دوربین و پست تصویر را برطرف کنید
کد برنامه تمام شد
تکلیف 2 - برنامه های وب پیشرو:
تکلیف 2 - برنامه های وب پیشرو
کار 1 - اجرای برنامه را دریافت کنید
کار 2 - رنگ تم را تغییر دهید
کار 3 - ایجاد نمادهای برنامه
کار 4 - دکمه نصب برنامه (1)
کار 5 - دکمه نصب برنامه (2)
کار 6 - پیش کش را فعال کنید
وظیفه 7 - استراتژی های ذخیره سازی حافظه پنهان
کار 8 - همگام‌سازی پس‌زمینه (1)
کار 9 - همگام‌سازی پس‌زمینه (2)
کار 10 - همگام‌سازی پس‌زمینه (3)
کار 11 - اعلان‌های فشاری - مجوز اعلان (1)
کار 12 - اعلان‌های فشاری - مجوز اعلان (2)
کار 13 - اعلان‌های فشاری - ایجاد اشتراک Push (1)
کار 14 - اعلان‌های فشاری - ایجاد اشتراک Push (2)
کار 15 - اعلان‌های فشاری - اشتراک Push را در پایگاه داده ذخیره کنید
کار 16 - "شما مشترک هستید!" اطلاع
کار 17 - ارسال Push Notification از Backend
کار 18 - نمایش اعلان فشار
کار 19 - اعلان فشاری را کنترل کنید
Task 20 - میزبان برنامه در Firebase و Backend در Heroku
بعد چه خواهد شد؟ :
بعد چه خواهد شد؟
به‌روزرسانی: Quasar V2، Vue 3 و Composition API
سخنرانی پاداش: از من بیشتر بیاموزید