آموزش ساخت اپلیکیشن موبایل با React Native: از ZERO تا EXPERT

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

معرفی Introduction

• معرفی Introduction

• آنچه ما خواهیم ساخت: پیش نمایش طراحی برنامه What we will build: App Design Preview

• منابع و مواد مفید Resources & Helpful Materials

آماده شدن Get Ready

• راه اندازی محیط Environment Setup

• تایپ اسکریپت در مقابل جاوا اسکریپت Typescript vs. Javascript

• ایجاد یک برنامه React Native (و برخی اشکال زدایی) Create a React Native App (and some debugging)

• کاوش در کد برنامه پیش‌فرض Exploring The Default App Code

• در حال اجرا در iOS Running on iOS

• در حال اجرا بر روی اندروید Running on Android

• در حال اجرا با ترمینال Running with Terminal

اصول اولیه React Native Basics of React Native

• JSX چیست؟ What is JSX

• واردات و صادرات: ایجاد اجزا Imports and Exports: Creating components

• اجزای عملکردی در مقابل کلاس Functional vs. Class Components

• توضیح حالت برای اجزای عملکردی و کلاسی Explaining State for Functional and Class Components

• چرخه های زندگی توضیح داده شده است Lifecycles Explained

• لوازم در کامپوننت ها Props in Components

• درک استایلینگ Understanding Styling

ساختار پروژه و صفحه نمایش اسپلش Project Structure & Splash Screen

• شناسایی مولفه ها Identifying Components

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

• ساخت Splash Screen Building the Splash Screen

• مولفه دکمه: قابل فشار دادن در مقابل تاری قابل لمس Button Component: Pressable vs. TouchableOpacity

• مدیریت رنگ Colors Management

صفحات و اجزای احراز هویت Authentication Screens & Components

• پیش‌نمایش صفحه‌های احراز هویت Authentication Screens Preview

• ایجاد سربرگ احراز هویت Creating Authentication Header

• کامپوننت ورودی ساختمان Building Input Component

• تغییر چشمی ورودی رمز عبور Password Input Eye Toggling

• ساخت جزء چک باکس Building Checkbox Component

• دادن سبک سفارشی به اجزای قابل استفاده مجدد Giving Custom Style to Reusable Components

• کامپوننت جداکننده ساختمان Building Separator Component

• React.memo: چیست و چرا باید استفاده کرد React.memo: What it is and Why to Use

• ورود به سیستم Google: مؤلفه و تنظیم بومی Google Login: component & native setup

• بررسی ورود گوگل در اندروید و iOS Checking Google Login on Android & iOS

• استفاده از متغیرهای محیطی Using Environment Variables

• Building Sign Up Footer Actions Building Sign Up Footer Actions

• صفحه ورود به سیستم ساختمان Building Sign in Screen

یکپارچه سازی Git Git Integration

• ایجاد مخزن Github و Git Initialization Creating Github Repository & Git Initialization

• فشار دادن تغییرات به Git Pushing Changes to Git

• سیستم انشعاب Git Git Branching System

ناوبری پروژه Project Navigation

• معرفی React Navigation React Navigation Introduction

• راه اندازی React Navigation Setup React Navigation

• مدیریت تم ناوبری Manage Navigation Theme

• حرکت بین صفحه نمایش Moving Between Screens

• پنهان کردن سربرگ پیمایش پیش‌فرض Hiding Default Navigation Header

• رفع مشکلات منطقه ایمن Fixing Safe Area Issues

• راه اندازی تب های پایین Setup Bottom Tabs

• آماده سازی Codebase برای پیمایش Tab Preparing Codebase for Tab Navigation

• سفارشی کردن طراحی برگه ها Customizing Tabs Design

• مسابقه ناوبری Navigation Quiz

مدیریت لیست ها Managing Lists

• ساخت هدر برنامه Build App Header

• اضافه کردن لیست دسته ها Add Categories List

• افزودن لیست محصولات Add Products List

• فیلتر بر اساس دسته بندی ها Filter by Categories

• فیلتر کردن با تایپ کلمات کلیدی Filtering by Typing Keywords

• ساخت لیست علاقه مندی ها Building Favorites List

ساختن صفحه نمایش با جزئیات Building the Detailed Screen

• انتقال داده ها بین صفحه نمایش Pass Data Between Screens

• رابط کاربری صفحه نمایش جزئیات محصول Product Details Screen UI

• پاورقی چسبنده بسازید Build Sticky Footer

• هدر مطلق را اضافه کنید Add Absolute Header

• ساخت چرخ فلک تصویر Build Image Carousel

• تماس یا ایمیل از برنامه Call or Email from the App

صفحه های مرتبط با نمایه ساختمان Building Profile Related Screens

• ساخت صفحه نمایه Build Profile Screen

• صفحه تنظیمات را اضافه کنید و به URL ها هدایت کنید Add Settings Screen & Redirect to URLs

• ویرایش اطلاعات شخصی Edit Personal Information

• ایجاد صفحه فهرست جدید Create New Listing Screen

• نصب بسته آپلود تصویر Installing Image Upload Package

• قابلیت آپلود تصویر Image Upload Functionality

• افزودن گزینه حذف تصویر Add Image Deleting Option

• تشریح پروپ های پخش Explaining Props Spreading

• از نمایش اجتناب از صفحه کلید استفاده کنید Use Keyboard Avoiding View

• انتخاب کننده سفارشی ساختمان Building Custom Picker

• ایجاد صفحه فهرست جدید را نهایی کنید Finalize Create New Listing Screen

• UI Listings من را بسازید Build My Listings UI

یکپارچه سازی API های REST Integrating REST APIs

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

• روش های REST API توضیح داده شده است REST API Methods Explained

• نمای کلی API مورد استفاده Overview of the API Used

• با استفاده از Axios Using Axios

• ثبت یک کاربر جدید با تماس API Registering a New User with API Call

• REST API ها و روش های HTTP REST APIs & HTTP methods

راه اندازی دولت جهانی Setting Up Global State

• Redux در مقابل React Context Redux vs. React Context

• ایجاد زمینه کاربر Create User Context

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

• مقدمه ای بر Async Storage Introduction to Async Storage

• Token Auth را در Storage ذخیره کنید Save Auth Token to Storage

• شناسایی کاربران احراز هویت شده پس از کشتن برنامه Identifying Authenticated Users After Killing the App

• آزمون جهانی وضعیت و ذخیره سازی Global State & Storage Quiz

خدمات و نمایه را به APIها متصل کنید Connect Services & Profile to APIs

• نمایه را به APIها متصل کنید Connect Profile to APIs

• یکپارچه سازی API نمایه را به روز کنید Update Profile API Integration

• واکشی خدمات از API Fetching Services from API

• نمایش جزئیات خدمات و موارد دلخواه Showing Service Details & Favoriting

• فیلتر کردن موارد دلخواه و حذف موارد دلخواه Filtering Favorite Items & Unfavoriting

• افزودن لیست جدید Adding New Listing

• حذف یک لیست Delete a Listing

• آپلود تصویر در سرور Upload Image to Server

جایزه: جادوی پرز BONUS: The Magic of Linting

• لینتینگ چیست؟ What is Linting

• ESLint را در پروژه ادغام کنید Integrate ESLint in the project

• آخرین موضوع ولی به همان اهمیت Last But Not Least