آموزش Ionic React: توسعه موبایل بین پلتفرمی با Ionic

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

معرفی Introduction

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

• ابزارهای مورد نیاز Required Tools

• مشاوره دوره Course Advice

از React تا Ionic From React to Ionic

• بررسی اجمالی Overview

• راه اندازی پروژه: اپلیکیشن Hello World Project Setup: Hello World App

• اضافه کردن Ionic به پروژه React Adding Ionic to a React Project

• پیام های نان تست Toast Messages

• استایل تطبیقی Adaptive Styling

• سفارشی سازی تم Theme Customisation

• Ionicons Ionicons

• برنامه های تمام صفحه Ionic Full-Page Ionic Apps

• کد منبع Source Code

توسعه یک برنامه کامل تک صفحه ای Developing a Complete Single-Screen App

• بررسی اجمالی Overview

• بررسی اجمالی Overview

• راه اندازی پروژه: برنامه ماشین حساب Biorhythm Project Setup: Biorhythm Calculator App

• کد منبع Source Code

• کد منبع Source Code

• فیلدهای ورودی Input Fields

• برچسب های فیلد Field Labels

• فیلدهای تاریخ Date Fields

• تاریخ مورد نظر Target Date

• جزء کارت Card Component

• Day.js Day.js

• تست های واحد Unit Tests

• تست های واحد (قسمت 2) Unit Tests (part 2)

• نتایج بیوریتم Biorhythm Results

• قلاب سفارشی ذخیره سازی محلی Local Storage Custom Hook

• نمودارهای مجدد Recharts

• نمودارهای مجدد (قسمت 2) Recharts (part 2)

• سبک های کامپوننت Component Styles

• تولید و استقرار Production Build and Deploy

ساخت اپلیکیشن اندروید و iOS با خازن Building Android and iOS Apps with Capacitor

• نصب خازن Capacitor Installation

• نصب اندروید استودیو Android Studio Installation

• نسخه های اندروید Android Versions

• شبیه ساز اندروید Android Emulator

• اندروید را بسازید و اجرا کنید Android Build and Run

• دستگاه اندروید فیزیکی Physical Android Device

• همگام سازی خازن Capacitor Sync

• بارگذاری مجدد زنده در اندروید Live Reload on Android

• اشکال زدایی از راه دور Chrome Chrome Remote Debugging

• نصب Xcode و Cocoapod Xcode and Cocoapods Installation

• شبیه ساز iOS iOS Simulator

• iOS ساخت و اجرا شود iOS Build and Run

• دستگاه فیزیکی iOS Physical iOS Device

• بارگذاری مجدد زنده در iOS Live Reload on iOS

• بازرس وب سافاری Safari Web Inspector

• نماد برنامه و تصاویر صفحه نمایش اسپلش App Icon and Splash Screen Images

استفاده از Ionic CLI برای ایجاد پروژه های جدید Using the Ionic CLI to Create New Projects

• توجه: نسخه های یونی/خازن Note: Ionic/Capacitor Versions

• Ionic CLI نصب و استفاده Ionic CLI Installation and Usage

• نمای کلی پروژه تولید شده Generated Project Overview

• ترفندهای کد تولید شده Generated Code Tweaks

• Livereload با خازن Livereload with Capacitor

• چرا TypeScript Why TypeScript

• الگوهای پروژه بیشتر More Project Templates

پیمایش و مسیریابی صفحه Page Navigation and Routing

• کد پروژه Project Code

• نمای کلی و راه اندازی پروژه Overview and Project Setup

• روتر واکنش React Router

• IonReactRouter IonReactRouter

• IonTabs IonTabs

• IonList IonList

• پارامترهای مسیر Route Params

• دکمه برگشت Back Button

• جریان ورود به سیستم Login Flow

• گروه بندی صفحات محافظت شده Grouping Protected Pages

• اشتراک گذاری حالت با React Context Sharing State with React Context

• صفحه مدیریت یافت نشد Handling Page Not Found

احراز هویت با Firebase Authentication with Firebase

• مهم: نسخه Firebase SDK Important: Firebase SDK Version

• ایجاد پروژه Firebase Creating a Firebase Project

• فعال کردن احراز هویت و ورود کاربر Enabling Authentication and User Sign-In

• فرم ورود Login Form

• رسیدگی به خطاهای ورود Handling Login Errors

• Firebase AuthState Observer Firebase AuthState Observer

• AuthState در حال بارگیری AuthState Loading

• عملکرد خروج Logout Functionality

• ثبت نام کاربر جدید Registering a New User

• شناسه کاربری در وضعیت احراز هویت User ID in Authentication State

ذخیره داده ها با Cloud Firestore Storing Data with Cloud Firestore

• ایجاد پایگاه داده Creating a Database

• Cloud Firestore Data Model Cloud Firestore Data Model

• واکشی مجموعه Firestore Fetching a Firestore Collection

• واکشی یک سند Firestore Fetching a Firestore Document

• رابط ورودی Entry Interface

• نگهداری داده های جداگانه برای هر کاربر Keeping Separate Data for Each User

• قوانین امنیتی Firestore Firestore Security Rules

• اجتناب از تضاد مسیر Avoiding Route Path Conflicts

• دکمه های اکشن شناور (FAB) Floating Action Buttons (FABs)

• افزودن یک سند Firestore Adding a Firestore Document

• گوش دادن به به روز رسانی داده ها Listening for Data Updates

• حذف یک سند Firestore Deleting a Firestore Document

• به روز رسانی: فیلد تاریخ با Ionic 6 Update: Date Field with Ionic 6

• افزودن فیلد تاریخ Adding a Date Field

• سفارش و محدودیت را پرس و جو کنید Query Order and Limit

ذخیره فایل های تصویری با فضای ذخیره سازی ابری Storing Image Files with Cloud Storage

• فعال کردن فضای ذخیره سازی ابری Enabling Cloud Storage

• امکان انتخاب یک عکس به کاربران Allowing Users to Select a Picture

• پنهان کردن فیلد ورودی فایل Hiding the File Input Field

• آپلود فایل ها در فضای ذخیره سازی ابری Uploading Files to Cloud Storage

• نمایش تصاویر از فضای ذخیره سازی ابری Displaying Images from Cloud Storage

با استفاده از Native Camera API Using the Native Camera API

• تست اپلیکیشن در اندروید Testing the App on Android

• به روز رسانی: پلاگین دوربین با خازن 4 Update: Camera Plugin with Capacitor 4

• با استفاده از Camera API Using the Camera API

• گزینه های دوربین و خطاها Camera Options and Errors

• فعال کردن ویژگی های مختلف بر اساس پلتفرم Enabling Different Features by Platform

• ارتقا به Firebase v9 Upgrading to Firebase v9

انتشار در اپ استور Publishing to the App Stores

• آماده شدن برای نسخه اندروید Preparing for an Android Release

• ساختن یک APK امضا شده Building a Signed APK

• ساخت بسته نرم افزاری اندروید Building an Android App Bundle

• در حال انتشار در گوگل پلی Publishing to Google Play

• گواهینامه های iOS و اجرا در آیفون فیزیکی iOS Certificates and Running on a Physical iPhone

• انتشار در اپ استور Publishing to the App Store

نتیجه Conclusion

• تبریک و پاداش Congratulations and Bonus