آموزش جامع React Native + ساخت اپلیکیشن فروشگاهی + سوالات مصاحبه شغلی - آخرین آپدیت

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

مقدمه Introduction

• مقدمه Introduction

• توسعه موبایل Native در مقابل Hybrid Native vs Hybrid Mobile Development

• آیا React Native یک فریم‌ورک Hybrid است؟ Is React Native Hybrid?

• ابزار Expo CLI Expo CLI

• ایجاد اولین پروژه Creating First Project

• درک ساختار پروژه Understanding Project Structure

• اجرای اپلیکیشن روی موبایل Running the App on Mobile

• شبیه‌ساز اپل [Xcode] Apple [Xcode] Simulator

کامپوننت‌های اصلی Core Components

• مقدمه‌ای بر کامپوننت‌های اصلی Introduction to Core Components

• RQ مقدمه‌ای بر کامپوننت‌های اصلی RQ - Introduction to Core Components

• View Container View - Container

• RQ View Container RQ - View Container

• استایل‌دهی درون‌خطی (Inline Styling) Inline Styling

• RQ استایل‌دهی درون‌خطی RQ - Inline Styling

• روش بهتر استایل‌دهی: شیء StyleSheet Better Way of Styling - StyleSheet Object

• RQ روش بهتر استایل‌دهی: شیء StyleSheet RQ - Better Way of Styling - StyleSheet Object

• مبانی مدیریت رویدادها (Event Handling) Event Handling Basics

• RQ مبانی مدیریت رویدادها RQ - Event Handling Basics

• ارسال پارامتر به تابع مدیریت رویداد Parameter Passing to Event Handler Function

• کامپوننت Button Button Component

• تفاوت ویژگی Color در اندروید و iOS Color Property Difference for Android & iOS

• کار با State: افزایش شمارنده Working with State - Incrementing Counter

• کاهش شمارنده Decrementing Counter

• قابلیت شمارنده با ارسال پارامتر Counter Functionality with Parameter Passing

• روش بهتر برای به‌روزرسانی State: استفاده از Callback Better Way to Update State - Callback

• RQ مدیریت State RQ - State Management

• کار با آرایه به عنوان State Working with Array as State

• استفاده از شیء (Object) به عنوان State Object as State

• RQ استفاده از UseState RQ - UseState

• کامپوننت Switch Switch Component

• استایل‌دهی به کامپوننت Switch Styling Switch Component

• RQ کامپوننت Switch RQ - Switch Component

• کامپوننت Image Image Component

• تعیین اندازه تصویر با resizeMode Sizing Image with resizeMode

• ویژگی‌های DefaultSource، Blur و Fade در تصویر DefaultSource, Blur, and Fade Properties - Image

• RQ کامپوننت Image RQ - Image Component

• کامپوننت TextInput TextInput Component

• ویژگی‌های (Props) کامپوننت TextInput Props TextInput Component

• ویژگی‌های AutoCorrect، AutoCapitalize و Multiline در TextInput AutoCorrect, AutoCapitalize, and Multiline TextInput

• RQ کامپوننت TextInput RQ - TextInput Component

• کامپوننت ScrollView ScrollView Component

• کامپوننت ScrollView افقی Horizontal ScrollView Component

• صفحه‌بندی با استفاده از ScrollView Paging Using ScrollView Component

• تمرین: ساخت دفترچه تلفن با استفاده از تمام کامپوننت‌ها (بخش ۱) Task - Create an Address Book Using All the Components Learned (Part 1)

• تمرین: پیاده‌سازی تغییرات استایل (بخش ۲) Task - Implementing Style Changes (Part 2)

• تمرین: اضافه کردن قابلیت حذف (بخش ۳) Task - Adding Delete Functionality (Part 3)

• کامپوننت FlatList FlatList Component

• پیاده‌سازی Lazy Loading، Header و Footer در FlatList FlatList Implementing Lazy Loading, Header, and Footer Component

• کامپوننت SectionList SectionList Component

• RQ کامپوننت‌های FlatList و SectionList RQ - FlatList & SectionList

ناوبری (Navigation) Navigation

• مقدمه‌ای بر ناوبری (Navigation) Introduction to Navigation

• ساختار Expo Router (File Based) با TypeScript Expo Router (File-Based Routing) Structure with TypeScript

• ساختار Expo Router (File Based) با JavaScript Expo Router (File-Based Routing) Structure with JavaScript

• RQ Expo Router RQ - Expo Router

• ناوبری بین مسیرها (Routes) در موبایل Navigating Between Routes in Mobile

• پیکربندی فایل _layout Configuring _layout File

• RQ فایل‌های _layout RQ - _layout Files

• الگوی ناوبری: Stack Navigator Navigation Pattern: Stack Navigator

• سفارشی‌سازی Header و دکمه بازگشت (به صورت سراسری) Customizing Header and Back Button (Globally)

• سفارشی‌سازی Header و دکمه بازگشت (برای هر صفحه به‌صورت مجزا) Customizing Header and Back Button (Individual Screen)

• سفارشی‌سازی Header و دکمه بازگشت (درون یک صفحه) Customizing Header and Back Button (Within the Screen)

• RQ Stack Navigator RQ - Stack Navigator

• Tab Navigator Tab Navigator

• سفارشی‌سازی دکمه‌های Tab Customizing Tab Buttons

• RQ تب‌ها (Tabs) RQ - Tabs

• Drawer Navigation Drawer Navigation

• سفارشی‌سازی Drawer Customizing Drawer

• RQ Drawer RQ - Drawer

• ناوبری تو در تو (Nested Navigator) Nested Navigator

مدیریت خطا Error Handling

• مقدمه Introduction

• درک خطاها در React Native Understanding Errors in React Native

• مدیریت خطای محلی با استفاده از بلوک Try Catch Local Error Handling Using Try-Catch Block

• مدیریت خطاهای سراسری با Error Boundaries Handling Global Errors with Error Boundaries

• مدیریت خطاهای API Handling API Errors

• افزودن پیام‌های خطای کاربرپسند Adding User-Friendly Error Messages

• استفاده از ErrorUtils برای مدیریت خطای سراسری Using ErrorUtils for Global Error Handling

• RQ مدیریت خطا RQ - Error Handling

ماژول‌های مخصوص پلتفرم Platform Modules

• ماژول‌های مخصوص پلتفرم Platform-Specific Modules

• رندرینگ مخصوص پلتفرم Platform-Specific Rendering

• استایل‌های مخصوص پلتفرم Platform-Specific Styles

• پسوندها/فایل‌های مخصوص پلتفرم Platform-Specific Extensions/Files

درخواست HTTP و عملیات CRUD با Firebase HTTP Request & Firebase CRUD Operation

• مقدمه‌ای بر ماژول Firebase Module Introduction - Firebase

• مقدمه‌ای بر FetchAPI Introduction to FetchAPI

• ارسال داده با استفاده از Fetch API Post Data Using Fetch API

• تمرین: ارسال داده با استفاده از ورودی کاربر Task - Post Data Using User Input

• ارسال داده و اعتبارسنجی فرم Post Data - Form Validation

• دریافت داده با استفاده از Fetch API Get Using Fetch API

• تمرین: دریافت رکوردها و نمایش لیست Task - Get the Records and Display the List

• به‌روزرسانی رکوردها با متد PATCH Updating Records - PATCH Call

• به‌روزرسانی جزئی رکوردها با متد PATCH Updating Partial Records - PATCH Call

• تمرین: به‌روزرسانی پویا (Dynamic) رکوردها Task - Update Records Dynamically

• حذف رکوردها با استفاده از متد HTTP Delete Deleting Records Using HTTP - Delete Method

• تمرین: حذف پویا رکوردها از لیست Task - Deleting Records Dynamically from the List

کار با HTTP از طریق Axios HTTP with Axios

• مقدمه‌ای بر Axios Introduction to Axios

• ایجاد یک نمونه (Instance) از Axios Creating an Axios Instance

• کار با متد POST Working with POST Method

• کار با متد GET Working with GET Method

• کار با متد PATCH Working with PATCH Method

• کار با متد DELETE Working with DELETE Method

رابط کاربری (UI) User Interface (UI)

• چیدمان (Layout) Layout

• نمونه چیدمان با Header، بخش محتوا و Footer (درک Flex) Sample Layout with Header, Content Area, and Footer (Understanding Flex)

• نمونه چیدمان: درک جهت‌های Flex Sample Layout - Understanding Flex Directions

• RQ Flex RQ - Flex

• نمونه چیدمان: درک تراز بندی Justify Content Sample Layout - Understanding Justify Content Alignment

• نمونه چیدمان: AlignContent و AlignItem Sample Layout - AlignContent and AlignItem

• RQ تراز بندی‌های Flex RQ - Flex - Alignments

مدیریت ژست‌ها (Gesture Handling) Gesture Handling

• مقدمه Introduction

• ژست Tap و Press Tap and Press Gesture

• ژست Pan (کشیدن و حرکت دادن) Pan Gesture (Drag & Move)

• ژست Pinch (زوم کردن داخل و خارج) Pinch Gesture (Zoom In & Zoom Out)

• ژست چرخش (Rotation) Rotation Gesture

• ترکیب چندین ژست Combining Multiple Gestures

دوربین و انتخابگر تصویر Camera/ImagePicker

• مقدمه Introduction

• پیکربندی Expo Image Picker Configuring Expo-Image-Picker

• اجرای دوربین Launching the Camera

• مدیریت دسترسی‌ها: دوربین در iOS Managing Permissions - Camera in iOS

• گزینه‌های دوربین Camera Options

• رندر کردن تصویر گرفته شده Rendering the Clicked Image

• استفاده از Image Picker Using the Image Picker

• انتخاب چندین تصویر Selecting Multiple Images

• تمرین: محدود کردن تعداد تصاویر انتخاب شده Task - Limit the Number of Images Selected

اعلان‌های Push Notification Push Notification

• مقدمه Introduction

• تنظیم اعلان‌های محلی (Local Notification) Local Notification Setup

• اولین اعلان First Notification

• مدیریت اعلان‌های دریافتی Handling the Incoming Notification

• واکنش به اعلان‌های دریافتی Reacting on Incoming Notification

• تنظیم Push Notification Push Notification Setup

• کانال اعلان (Notification Channel) Notification Channel

• ارسال اعلان با ابزار Push Notification Pushing with the Push Notification Tool

• ارسال Push Notification با استفاده از Expo API Sending Push Notification with Expo API

• اجرای Push Notification در نسخه SDK 53 Running Push Notifications on SDK 53

ساخت اپلیکیشن React Native بدون Expo React Native App Without Expo

• مقدمه Introduction

• Expo دقیقاً چگونه کار می‌کند؟ How Exactly Expo Does Work?

• RQ نحوه عملکرد دقیق Expo RQ - How Exactly Expo Does Work?

• جایگزین‌ها برای ساخت اپلیکیشن React Native Alternatives for React Native App Creation

• RQ جایگزین‌های ساخت اپلیکیشن RQ - Alternatives for React Native App Creation

• ساخت پروژه با React Native CLI Creating Project with React Native CLI

• RQ ساخت پروژه با React Native CLI RQ - Creating Project with React Native CLI

• درک ساختار پروژه Understand Project Structure

• RQ Unit Test و Ruby Gems RQ - Unit Test & Ruby Gems

موقعیت مکانی و نقشه Location/Map

• مقدمه Introduction

• تنظیمات مربوط به موقعیت مکانی Setup for Location

• دریافت موقعیت مکانی دستگاه Fetching Device Location

• RQ دریافت موقعیت مکانی دستگاه RQ - Fetching Device Location

• تنظیم نقشه Setting Up Map

• مکان‌یابی کاربر روی نقشه Locating User on the Map

• RQ مکان‌یابی کاربر روی نقشه RQ - Locating User on the Map

• مدیریت انتخاب موقعیت روی نقشه Handling Location Selection on Map

ساخت اپلیکیشن فروشگاهی Building E-Commerce Application

• مقدمه‌ای بر محدوده پروژه Introduction to the Scope of Work

• شروع فرآیند ساخت پروژه Commencing the Project Creation

• تنظیم NativeWind CSS برای رابط کاربری Setting Up NativeWind CSS for UI

• تنظیم Tab‌ها Setting Up the Tabs

• سفارشی‌سازی دکمه‌های Tab Customizing Tab Buttons

• مدیریت Headerها در صفحات Taking Care of the Headers on Screen

• دریافت داده‌های محصولات Fetching the Products Data

• طراحی رابط کاربری کارت محصول Creating the Product Card UI

• رندر کردن محصولات با استفاده از FlatList Rendering Products Using FlatList Component

• پیاده‌سازی قابلیت جستجوی محصول Implementing Product Search Functionality

• تنظیم مودال فیلتر Setting Up Filter Modal

• افزودن فیلترها Adding Filters

• دریافت دسته‌بندی‌های داینامیک محصولات Fetching Dynamic Product Categories

• تعاملی کردن فیلترها Making Filters Interactive

• اعمال فیلترها روی محصولات Applying Filters to the Products

• ساخت صفحه جزئیات محصول Creating Product Details Screen

• کار روی UI جزئیات محصول Working on Product Details UI

• تکمیل UI جزئیات محصول Completing Product Details UI

• پیاده‌سازی Context API برای سبد خرید Implementing Context API for Cart

• پیاده‌سازی قابلیت سبد خرید Implementing Cart Functionality

• طراحی رابط کاربری سبد خرید Implementing Cart UI

• تکمیل UI سبد خرید Completing the Cart UI

• پیاده‌سازی خلاصه سبد خرید Implementing Cart Summary

• پیاده‌سازی صفحه ثبت‌نام (SignUp) Implementing Register (SignUp) Screen

• مدیریت مقادیر فرم ثبت‌نام Handling Register Form Values

• پیاده‌سازی صفحه ورود (Login) Implementing Login Screen

• بازنویسی (Refactoring) تب‌های ثبت‌نام و ورود Refactoring Register and Login Tabs

• پیاده‌سازی قابلیت ثبت‌نام Implementing Register (SignUp) Functionality

• دریافت جزئیات کاربر Fetching User Details

• پیاده‌سازی صفحه پروفایل Implementing Profile Screen

• قابلیت ورود Login Functionality

• مدیریت نهایی خطاها Final Error Handling

اتصال درگاه پرداخت Stripe Integrating Stripe Payment Gateway

• تنظیم درگاه پرداخت Stripe Stripe Payment Gateway Setup

• ایجاد API برای Payment Intent Creating API for Payment Intent

• اتصال API مربوط به Payment Intent Integrating Payment Intent API

• اجرای PaymentSheet در Stripe Initiating PaymentSheet of Stripe

• فراخوانی API پرداخت (Checkout API) Calling Checkout API