آموزش Ionic 6+ از مبتدی تا پیشرفته - ساخت برنامه تحویل غذا

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

معرفی Introduction

• معرفی دوره Course Introduction

• یونیک چیست؟ What is Ionic?

• Angular چیست؟ What is Angular?

• آشنایی با اکوسیستم یونی و نحوه عملکرد آن Understanding Ionic Ecosystem & How it Works

• تکامل یونی Evolution of Ionic

• Ionic 6+ در مقابل Ionic 5 در مقابل Ionic 4 در مقابل Ionic 3 Ionic 6+ vs Ionic 5 vs Ionic 4 vs Ionic 3

• برنامه یونی - کامپایل شده یا ترکیبی Ionic App - Compiled or Hybrid

• خازن در مقابل کوردووا Capacitor vs Cordova

• طرح کلی دوره Course Outline

• چگونه از این دوره بیشترین بهره را ببرید How to get the Most out of this Course

• چگونه از طریق رسانه های دیگر با من ارتباط برقرار کنیم؟ How to Reach Out to Me through other medium?

• به انجمن آموزش آنلاین ما بپیوندید Join our Online Learning Community

راه اندازی محیط زیست Setting up the Environment

• معرفی ماژول Module Introduction

• Nodejs را نصب کنید Install Nodejs

• ایجاد اولین پروژه شما Creating your first project

• ویرایشگر کد ویژوال استودیو را راه اندازی کنید و ساختار پروژه Ionic را درک کنید Setup Visual Studio Code Editor & Understand Ionic Project Structure

ساخت برنامه های بومی با خازن Building Native Apps with Capacitor

• معرفی ماژول Module Introduction

• ایجاد برنامه اندروید و اجرا در شبیه ساز و دستگاه اندروید واقعی Creating an Android App & Running in Emulator & Real Android Device

• ایجاد یک برنامه iOS و اجرا در شبیه ساز و دستگاه واقعی iOS Creating an iOS App & Running in Simulator & Real iOS Device

• رفع مشکلات موجود در مک بوک پرو M1 (با نصب کوکوپود) Fix problems in M1 MacBook Pro (with cocoapods installation)

مبانی یونی Ionic Basics

• معرفی ماژول Module Introduction

• قالب های یونی استارتر Ionic Starter Templates

• مسیریابی و ناوبری یونی Ionic Routing & Navigations

• ناوبری یونی با استفاده از NavController Ionic Navigation using NavController

• چرخه عمر صفحه Ionic + Angular Ionic + Angular Page Lifecycle

• نحوه استفاده از خدمات در Ionic How to use Services in Ionic

• نحوه استفاده از Shared Components در Ionic How to use Shared Components in Ionic

• استفاده از Promise async در انتظار گرفتن است Use of Promise async await try catch

• اپراتورهای پخش Spread Operators

• سازنده در مقابل ngOnInit Constructor vs ngOnInit

• مدل در مقابل رابط Model vs Interface

کار با درخواست های HTTP Working with HTTP Requests

• معرفی ماژول Module Introduction

• REST API چیست؟ What is REST API

• واکشی همه داده‌ها و نمایش در برنامه Fetch all Data & Display in App

• واکشی تک داده و نمایش در برنامه Fetch Single Data & Display in App

• نحوه استفاده از HTTP POST, PUT Methods How to use HTTP POST, PUT Methods

• نحوه برخورد با مشکل CORS How to Deal with CORS Issue

• مقابله با خطای ترافیک متن شفاف در اندروید 10+ Dealing with clear text traffic error in Android 10+

• راه های دیگر برای مقابله با CORS Other ways to deal with CORS

اشکال زدایی برنامه های Ionic Debugging Ionic Apps

• معرفی ماژول Module Introduction

• اشکال زدایی برنامه Ionic با استفاده از console.log() Debugging Ionic App using console.log()

• اشکال زدایی با استفاده از ابزارهای توسعه دهنده مرورگر و نقاط شکست Debugging using Browser DevTools & Breakpoints

• اشکال زدایی رابط کاربری و عملکرد برنامه Debugging the App UI & Performance

• اشکال زدایی برنامه های اندروید در دستگاه واقعی یا شبیه ساز Debugging Android Apps in Real Device or Emulator

• اشکال زدایی برنامه های IOS در دستگاه واقعی یا شبیه ساز Debugging IOS Apps in Real Device or Simulator

استایل و طرح‌بندی برنامه‌های Ionic Styling & Theming Ionic Apps

• معرفی ماژول Module Introduction

• شروع با CSS Utilities Starting with CSS Utilities

• تنظیم متغیرهای تم جهانی Setting Global Theme Variables

• تنظیم همه رنگ های تم به یکباره Setting all Theme Colors at once

• ایجاد یک رنگ تم جدید Creating a New Theme Color

• تنظیم سبک های جهانی Setting Global Styles

• تنظیم سبک های خاص پلت فرم Setting Platform-Specific Styles

• یک ظاهر طراحی اجزای اصلی با متغیرها Styling Core Components with Variables

• متغیرهای CSS خاص مؤلفه و قوانین سفارشی Component-Specific CSS Variables & Custom Rules

• استفاده از حالت تاریک Using Dark Mode

استفاده از برخی از ویژگی های دستگاه بومی Using Some Native Device Features

• معرفی ماژول Module Introduction

• شبکه و نان تست Network & Toast

• اشتراک گذاری Share

• دوربین - عکس بگیرید، از عکس بگیرید و تصویر را از طریق ایمیل به اشتراک بگذارید Camera - take picture, get from photos & share image via email

• مشکل نمایش تصویر را با استفاده از webPath حل کنید Resolve image display issue using webPath

• مخاطبین - به مخاطبین تلفن دسترسی داشته باشید Contacts - access phone contacts

• شماره تماس و تست در iOS Call Number & Test on iOS

• اعلان های محلی Local Notifications

• کد منبع پیوست شده Attached Source Code

بررسی اجمالی اجزای یونی Ionic Components Overview

• معرفی ماژول Module Introduction

• ویژگی ها، دارایی و شکاف ها Attributes, Property & Slots

• شبکه یونی (شبکه یونی) Ionic Grid (ion-grid)

• اندازه و پاسخگویی ستون شبکه (یون کل) Grid Column (ion-col) Sizes & Responsiveness

• ترازبندی ردیف و ستون شبکه Grid Row & Column Alignments

• شبکه یونی در مقابل لیست یونی Ion-grid vs ion-list

• آیتم یونی، برچسب یونی و متن یونی Ion-item, ion-label & ion-text

• اقلام رسانه (عناصر تصویر) و موارد فهرست قابل کشیدن Media Items (Image Elements) & Swipable List Items

• آشنایی با پیمایش مجازی Understanding Virtual Scrolling

• پیاده سازی پیمایش مجازی (ion-virtual-scroll) Implementing Virtual Scrolling (ion-virtual-scroll)

• پیاده سازی پیمایش بی نهایت (ion-infinite-scroll) Implementing Infinite Scrolling (ion-infinite-scroll)

• دکمه های تقسیم بندی شده Segmented Buttons

• اضافه کردن اسپینر (یون اسپینر) Adding a Spinner (ion-spinner)

• با استفاده از Loading Controller Using the Loading Controller

• با استفاده از کنترلر ActionSheet Using the ActionSheet Controller

• شاداب کننده یون Ion-refresher

• اسلایدهای یونی (منسوخ شده) ion-slides (deprecated)

• یون پاور ion-popover

• کد منبع پیوست شده Attached Source Code

یکپارچه سازی عناصر PWA Integrating PWA Elements

• معرفی ماژول Module Introduction

• افزودن عناصر PWA Adding PWA Elements

• پیاده سازی عناصر PWA برای دوربین و نان تست Implementing PWA Elements for Camera and Toast

• کد منبع پیوست شده Attached Source Code

شروع به کار با برنامه تحویل غذا Getting Started with Food Delivery App

• معرفی ماژول Module Introduction

• ایجاد یک پروژه خالی برای برنامه تحویل غذا Creating a Blank Project for Food Delivery App

• راه‌اندازی طرح‌بندی برگه‌ها و اعمال تم در یک پروژه خالی Setting up Tabs Layout & apply Theming in a Blank Project

• طراحی صفحه فرود اپلیکیشن (صفحه اصلی) Designing App Landing Screen (Home Page)

• مشکلات Swiper را حل کنید Resolve Swiper issues

• کد رفرکتور برای صفحه اصلی (با اجزای مشترک و بارگذاری اسکلت) Refractor Code for Home Screen (with shared components & skeleton loading)

• طراحی صفحه جستجو Designing Search Screen

• کد شکست برای صفحه جستجو (همچنین ایجاد مؤلفه صفحه خالی) Refractoring Code for Search Screen (also Creating Empty-Screen Component)

• طراحی صفحه منوی رستوران (صفحه موارد) Design Restaurant Menu Screen (Items Page)

• افزودن اقلام به سبد خرید Add Items To Cart

• کد شکست برای صفحه منو (صفحه موارد) Refractor Code for Menu Screen (Items Page)

• طراحی صفحه نمایش سبد خرید Design Cart Screen

• ساخت سبد خرید کاربردی Making Cart Functional

• کد رفرکتور برای صفحه گاری Refractor Code for Cart Screen

• طراحی صفحه حساب کاربری Design Account Screen

• کد Refractor برای صفحه حساب Refractor Code for Account Screen

• طراحی صفحه نمایش همه آدرس ها Designing All Addresses Screen

• کد شکست برای صفحه آدرس Refractor Code for Address Screen

• کد منبع پیوست شده Attached Source Code

مدیریت دولتی State Management

• معرفی ماژول Module Introduction

• استفاده از خدمات مشترک Using Common Services

• استفاده از موضوعات و اشتراک های RxJS برای مدیریت دولتی Using RxJS Subjects & Subscriptions for State Management

• استفاده از خدمات برای سبد خرید و ذخیره سازی Using Services for Cart & Storage

• قابلیت سفارش مجدد Reorder Functionality

• کد منبع پیوست شده Attached Source Code

ساختار داده ها با استفاده از مدل ها Structuring data using Models

• معرفی ماژول Module Introduction

• مدل آدرس Address Model

• مدل رستوران Restaurant Model

• مدل دسته بندی Category Model

• مدل مورد Item Model

• مدل سبد خرید Cart Model

• مدل سفارش Order Model

• کد منبع پیوست شده Attached Source Code

کار با نقشه های گوگل Working with Google Maps

• معرفی ماژول Module Introduction

• راه اندازی و یکپارچه سازی API در برنامه API Setup & Integration in App

• طراحی افزودن صفحه نمایش آدرس Design Add Address Screen

• افزودن Google Maps SDK Adding the Google Maps SDK

• افزودن نشانگر و ادغام موقعیت جغرافیایی خازن بومی Adding Marker & Integrating Native Capacitor Geolocation

• استفاده از Geocoding API و افزودن آدرس Using Geocoding API & adding Address

• به روز رسانی آدرس Update Address

• کد شکست Refractor Code

• کد منبع پیوست شده Attached Source Code

پیاده سازی مدال ها Implementing Modals

• معرفی ماژول Module Introduction

• باز کردن یک مدال Opening a Modal

• با استفاده از Places API به جستجوی معین مکان بپردازید Search location modal using Places API

• چگونه مکان ها را از کشورهای مختلف یا کل جهان جستجو کنیم How to Search Places from different Country or whole World

• به روز رسانی موقعیت نشانگر Updating Marker position

• رفع اشکال Bug fixes

• تغییر نشانگر با استفاده از موقعیت جغرافیایی Change Marker using Geolocation

• ادغام Modal در CartPage Integrating Modal in CartPage

• ادغام Modal در صفحه اصلی Integrating Modal in HomePage

• رفع اشکالات در Search-Location Modal Fixing Bugs in Search-location Modal

• استفاده از Modal برای ویرایش نمایه Using Modal for Editing Profile

• پایان کار Finishing Touches

• کد منبع پیوست شده Attached Source Code

احراز هویت کاربر User Authentication

• معرفی ماژول Module Introduction

• طراحی صفحه ورود به سیستم Design Sign-in Screen

• سرویس Auth ایجاد کنید Create Auth Service

• طراحی صفحه ثبت نام Design Sign-up Screen

• ایجاد صفحه رمز فراموش شده Create Forgot Password Screen

• اضافه کردن یک محافظ تایید Adding an Auth Guard

• Firebase را راه اندازی کنید Setup Firebase

• احراز هویت کاربر با استفاده از Firebase User Authentication using Firebase

• خروج از سیستم یک کاربر Logging out a User

• پیاده سازی قابلیت Reset Password Implementing Reset Password functionality

• واکشی و به‌روزرسانی نمایه در صفحه حساب Fetch & Update Profile in Account page

• کد منبع پیوست شده Attached Source Code

کار با داده های زنده (بذر داده ها) در Firebase Firestore Working with live data (data seeding) in Firebase Firestore

• معرفی ماژول Module Introduction

• درج داده های شهرها با استفاده از کنسول firebase Insert Cities data using firebase console

• کنترل پنل مدیریت را در برنامه ایجاد کنید Create Admin Control Panel in the App

• ایجاد بنر و مشاهده همه در برنامه Create Banners & View all in App

• طراحی افزودن صفحه نمایش رستوران Design Add Restaurant Screen

• رستوران ها را در Firestor اضافه کنید Add Restaurants in Firestore

• داده‌های زنده را در صفحه اصلی و صفحه جستجو واکشی کنید Fetch live data in HomePage & SearchPage

• مسیریابی هویت مبتنی بر نقش Role based Auth Routing

• افزودن آیتم های منوی رستوران Add Restaurant Menu Items

• واکشی آیتم های منوی رستوران Fetch Restaurant Menu Items

• عملیات CRUD را برای آدرس کاربر انجام دهید Perform CRUD Operations for User Address

• سبد خرید را آماده کنید و تمام عملیات سفارش را انجام دهید Prepare Cart & perform all Order Operations

• کد منبع پیوست شده Attached Source Code

پیاده سازی چند بهینه سازی در برنامه ما Implementing few Optimizations in Our App

• معرفی ماژول Module Introduction

• استفاده از گارد ورود خودکار Using Auto-Login Guard

• با استفاده از ENUM در برنامه ما Using ENUM in our app

• درخواست خروج را تأیید کنید Confirm Prompt for Logout

• چند نکته برای بهینه‌سازی طراحی در صفحه‌های سبد خرید و تأیید اعتبار Few Design Optimization Tips in Cart & Auth Screens

• رفع اشکالات جزئی و به کارگیری مفاهیم جدید بهینه سازی Fixing Minor Bugs & applying new Optimization Concepts

• مدیریت کاربر (UID) با یک موضوع Managing the User (UID) with a Subject

• چگونه بنرها را قابل کلیک کنید و به منوی رستوران بروید How to make Banners clickable & navigate to Restaurant Menu

• کد منبع پیوست شده Attached Source Code

آماده سازی اپلیکیشن Ionic برای تولید Preparing Ionic App for Production

• معرفی ماژول Module Introduction

• تغییرات برای iOS (در app.module.ts) Changes For iOS (in app.module.ts)

• پلتفرم‌های Android و iOS را اضافه کنید، پیکربندی و اجرا کنید در دستگاه‌ها Add Android & iOS platforms, Configure & Run in devices

• StatusBar را سفارشی کنید و افزونه SplashScreen را در برنامه Ionic نصب کنید Customise StatusBar & install SplashScreen plugin in Ionic App

• آیکون های سفارشی و Splash Screens برای اندروید و iOS ایجاد کنید Generate Custom Icons & SplashScreens for Android & iOS

• تنظیم قوانین سفارشی Firebase Firestore & Storage Setting Firebase Firestore & Storage Custom Rules

• لینک های مفید Useful links

• کد منبع پیوست شده Attached Source Code

انتشار برنامه های ما Publishing Our Apps

• معرفی ماژول Module Introduction

• انتشار اپلیکیشن IOS در اپ استور Publishing IOS App on App Store

• انتشار اپلیکیشن اندروید در پلی استور Publishing Android App on Play Store

• لینک ها و نکات مفید Useful Links & Tips

• کد منبع پیوست شده Attached Source Code

در حال تبدیل به نسخه ماژولار Firebase 9 Converting to Firebase 9 Modular version

• معرفی ماژول Module Introduction

• تبدیل به Firebase 9 مدولار - قسمت 1 - احراز هویت Convert to Firebase 9 modular - Part 1 - Authentication

• تبدیل به Firebase 9 مدولار - قسمت 2 - CRUD Convert to Firebase 9 modular - Part 2 - CRUD

• تبدیل به ماژولار Firebase 9 - قسمت 3 - همه پرس و جوها Convert to Firebase 9 modular - Part 3 - All queries

• تبدیل به ماژولار Firebase 9 - Part 4 - Storage Convert to Firebase 9 modular - Part 4 - Storage

• کد منبع پیوست شده Attached Source Code

برخی بهبودهای جزئی و رفع اشکال Some minor improvements & bug fixes

• معرفی ماژول Module Introduction

• اجرای Bottom Sheet Modal در برنامه ما Implementing Bottom Sheet Modal in our App

• به روز رسانی مجموعه سفارشات و قوانین Firestore Updating Orders collection & Firestore rules

• اعمال برخی بهبودها در برنامه ما Applying some improvements in our app

• رفع اشکال ایجاد مجوز احراز هویت کاربر رستوران در برنامه ما Fixing create restaurant user auth bug in our app

• حذف ماژول های firebase غیر ضروری از app.module.ts Removing unnecessary firebase modules from app.module.ts

• به روز رسانی provideAuth() در app.module.ts Updating provideAuth() in app.module.ts

• نحوه استفاده از پشتیبانی RTL و LTR در برنامه Ionic How to use RTL & LTR Support in Ionic App

• کد منبع پیوست شده Attached Source Code

یکپارچه سازی دروازه های پرداخت (با استفاده از توابع ابری Firebase، شبیه سازهای firebase) Integrate Payment Gateways (using Firebase cloud functions, firebase emulators)

• معرفی ماژول Module Introduction

• تنظیم سفارش برای پرداخت و طراحی صفحه پرداخت Setting up Order for payment & designing Payment Screen

• یکپارچه سازی درگاه پرداخت Razorpay در حالت تست Integrating Razorpay payment gateway in test mode

• کار با حالت زنده Razorpay با استفاده از توابع و شبیه سازهای Firebase Working with Razorpay live mode using Firebase functions & emulators

• یکپارچه سازی Stripe Paymeny Gateway API در برنامه ما Integrating Stripe Paymeny Gateway API in our App

• پلاگین Stripe را نصب کنید و عملکرد را آماده کنید Install Stripe Plugin & prepare functionality

• Test Stripe در Android و iOS (Test & Live Mode) Test Stripe in Android & iOS (Test & Live Mode)

• ثبت سفارش از طریق Stripe Place Order via Stripe

• برنامه ما را با آخرین تغییرات rxjs بهینه کنید Optimise our App with latest rxjs changes

• کد منبع پیوست شده Attached Source Code

به Ionic 7 ارتقا دهید Upgrade to Ionic 7

• معرفی ماژول Module Introduction

• موارد جدید در Ionic 7 What's new in Ionic 7

• ایجاد پروژه Ionic 7 و درک ساختار فایل Creating Ionic 7 Project & Understanding File Structure

• پروژه Ionic 6 را به Ionic 7 ارتقا دهید (رویکرد ماژولار مانند Ionic 6) Upgrade Ionic 6 project to Ionic 7 (Modular Approach like Ionic 6)

• با استفاده از روش مستقل به Ionic 7 ارتقا دهید Upgrade to Ionic 7 using Standalone Approach

• کامپوننت های Ionic را با آخرین ویژگی ها به روز کنید Update Ionic Components with latest features

• کد منبع پیوست شده Attached Source Code

آموزش ساخت اپلیکیشن چت Firebase Learn to Build Firebase Chat App

• آموزش ساخت اپلیکیشن چت Firebase Learn to Build Firebase Chat App