آموزش ساخت کلون واتساپ در React Native - راهنمای اپلیکیشن موبایل - آخرین آپدیت

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

مقدمه Introduction

• ویدئوی معرفی Intro video (from course landing page)

• چگونه سوال بپرسیم How to ask questions

• اکسپو چیست؟ What is Expo?

• ایجاد پروژه ما! Creating our project!

• مرور سریع ساختار پروژه A quick rundown of the project structure

• کد منبع را کجا پیدا کنم؟ Where do I find the source code?

• برخی افزونه‌های مفید VS Code Some useful VS Code extensions

• اجرای برنامه روی دستگاه واقعی Running the app on a real device

• اجرای برنامه روی شبیه‌ساز اندروید Running the app on an Android emulator

• اجرای برنامه روی شبیه‌ساز iOS Running the app on an iOS emulator

مبانی ری‌اکت نیتیو - مرور سریع React Native basics - quick overview

• استایل‌دهی عناصر Styling elements

• دکمه‌ها Buttons

• ناحیه امن SafeArea

• هوک‌ها - useState Hooks - useState

• هوک‌ها - useEffect Hooks useEffect

• هوک‌ها - useCallback Hooks - useCallback

فونت‌ها و صفحه‌های خوش‌آمدگویی Fonts and splashscreens

• انتخاب فونت سفارشی Picking a custom font

• نمایش صفحه خوش‌آمدگویی هنگام بارگذاری Showing a splash screen while loading

• افزودن صفحه خوش‌آمدگویی سفارشی Adding a custom splash screen

• تنظیم فونت‌های سفارشی Setting custom fonts

افزودن سیستم ناوبری Adding the navigation system

• نصب React Navigation Installing React Navigation

• ایجاد ناوبری پشته‌ای Creating the stack navigator

• رفع مشکل نمایش صفحه Fixing the screen display

• ناوبری به یک صفحه با فشار دکمه Navigating to a screen on button press

• پیکربندی گزینه‌های ناوبری Configuring the navigation options

• افزودن تب‌های پایین Adding bottom tabs

• پیکربندی عنوان‌های ناوبری‌های ما Configuring the titles of our navigators

• نمایش آیکون‌ها در تب‌های پایین Displaying icons on our bottom tabs

• جدا کردن ناوبری ما به فایل مستقل Separating our navigator into its own file

• جدا کردن ناوبری 'ورود کرده' Separating the 'logged in' navigator

رابط کاربری صفحه چت Chat screen UI

• ایجاد صفحه چت Creating the chat screen

• تنظیم تصویر پس‌زمینه Setting the background image

• مدیریت ناحیه امن چت Handling the chat safe area

• دکمه‌ها با آیکون Buttons with icons

• استایل‌دهی جعبه متن و دکمه‌ها Styling the textbox and buttons

• نمایش دکمه ارسال هنگام تایپ کاربر Showing a send button as the user types

• استایل‌دهی دکمه ارسال Styling the send button

• مدیریت ارسال پیام Handing a message being submitted

• رفع مشکل پنهان شدن جعبه متن پشت کیبورد Fixing the textbox being hidden behind the keyboard

صفحه ثبت‌نام Sign up screen

• ایجاد صفحه ثبت‌نام Creating the sign up screen

• افزودن کامپوننت کانتینر صفحه Adding a page container component

• ایجاد کامپوننت ورودی سفارشی Creating a custom input component

• افزودن آیکون به ورودی Adding an icon to the input

• استایل‌دهی برچسب Styling the label

• استایل‌دهی جعبه متن Styling the textbox

• نمایش متن خطا Displaying error text

• ایجاد دکمه ارسال سفارشی Creating a custom submit button

• عنوان دکمه ارسال، رویداد onPress و استایل باقی‌مانده Submit button title, onPress and remaining style

• جابجایی بین فرم‌های ثبت‌نام و ورود Switching between sign up and sign in forms

• تنظیم تصویر فرم Setting the form image

• جلوگیری از پنهان شدن فرم توسط کیبورد Prevent keyboard from hiding the form

اعتبارسنجی فرم Form validation

• مدیریت تغییرات متن Handling text changed

• دموی اعتبارسنجی Validation demo

• اعتبارسنجی نام و نام خانوادگی First name and last name validation

• بازآرایی عملکرد اعتبارسنجی Refactoring the validation functionality

• بهبود مقدار بازگشتی Improving the return value

• اعتبارسنجی ایمیل‌ها و رمزهای عبور Validating emails and passwords

• بهبود جعبه‌های متن ما Improving our textboxes

• اعتبارسنجی مقادیر فرم ورود Validating the sign in form values

• مدیریت وضعیت فرم با useReducer Managing form state with useReducer

• ارزیابی اعتبار کل فرم Evaluating the whole form's validity

• ارزیابی اعتبار کل فرم ورود Evaluating the whole sign in form validity

• نمایش پیام‌های خطا Displaying the error messages

ایجاد حساب کاربری (ثبت‌نام) Creating the user's account (signing up)

• دریافت مقادیر فرم Getting the form values

• ایجاد پروژه فایربیس ما Creating our Firebase project

• فایل کمکی فایربیس Firebase helper file

• احراز هویت کاربر با فایربیس Authenticating a user with Firebase

• مدیریت خطاهای 'ایمیل قبلاً استفاده شده' Handing 'email already in use' errors

• نمایش خطاها Displaying errors

• افزودن نشانگر بارگذاری Adding a loading spinner

• ارسال داده‌های کاربر به پایگاه داده Sending user data to the database

• استفاده از Redux toolkit برای مدیریت وضعیت برنامه Using Redux toolkit to manage app state

• پیکربندی بخش احراز هویت Configuring out auth slice

• ذخیره اطلاعات احراز هویت در وضعیت Saving auth info to the state

• دسترسی به داده‌ها از وضعیت Accessing data from the state

• رفتن به صفحه اصلی پس از ثبت‌نام Going to the main page when they sign up

• ذخیره داده‌های ورود در حافظه Saving sign in data to storage

• ایجاد صفحه راه‌اندازی Creating the start up screen

• مدیریت زمانی که حافظه خالی است Handling when storage is empty

• مدیریت توکن منقضی شده Handling an expired token

• ورود خودکار در صورت وجود توکن Auto logging in if a token exists

• پاک کردن حافظه - اجبار به خروج Clearing the storage - forcing the log out

• ورود به سیستم Signing in

• مدیریت خطاهای ورود Handling sign in errors

• رفع خطا: "نمی‌توان به‌روزرسانی وضعیت React را روی یک کامپوننت unmounted انجام داد" Fixing error: "Can't perform a React state update on an unmounted component"

• تایمر خروج Logout timer

• نشانگر بارگذاری برای فرم ورود Loading spinner for the sign in form

• 'حالت تست' برای ورود سریع 'test mode' for quick sign in

صفحه تنظیمات Settings page

• افزودن عنصر عنوان صفحه سفارشی Adding a custom page title element

• رفع حاشیه صفحه تنظیمات Fixing the margin of the settings page

• افزودن فیلدهای ورودی Adding the input fields

• تنظیم مقادیر اولیه فیلدهای ورودی Setting the initial values of the input fields

• افزودن دکمه ذخیره Adding the save button

• به‌روزرسانی کاربر در پایگاه داده Updating the user in the database

• دکمه خروج Logout button

• به‌روزرسانی وضعیت با داده‌های جدید Updating the state with the new data

• پنهان کردن دکمه ارسال در صورت عدم تغییر Hiding the submit button when there are no changes

• نمایش تصویر پیش‌فرض پروفایل کاربر Outputting the default user profile image

• استایل‌دهی تصویر کاربر Styling the user image

• افزودن آیکون 'ویرایش' Adding an 'edit' icon

• درخواست اجازه دسترسی به تصاویر کاربر Requesting permission to access the user's images

• باز کردن انتخاب‌گر تصویر Opening the image picker

• به‌روزرسانی صفحه برای نمایش تصویر جدید Updating the page to show the new image

• دریافت داده‌های blob تصویر Getting the image blob data

• بارگذاری تصاویر با استفاده از Firebase Storage Uploading images using Firebase Storage

• ذخیره تصویر بارگذاری شده در داده‌های پایگاه داده کاربر Saving the uploaded image to the user's database data

• به‌روزرسانی داده‌های وضعیت با عکس پروفایل جدید Updating the state data with the new profile picture

• نشانگر بارگذاری آپلود تصویر Image upload loading spinner

جستجوی کاربران برای چت Searching for users to chat with

• افزودن دکمه هدر 'ایجاد چت' Adding the 'create chat' header button

• باز کردن صفحه چت جدید Opening the new chat page

• ایجاد جعبه جستجوی کاربر ما Creating our user search box

• نمایش پیام در صورت عدم یافتن نتیجه Showing a message when no results were found

• جستجو پس از توقف تایپ کاربر Searching after the user stops typing

• جستجوی کاربران Searching for users

• نمایش نتایج جستجو Outputting search results

• افزودن کاربران ساختگی Adding fake users

• ایجاد کامپوننت نتیجه جستجوی ما Creating our search result component

• استایل‌دهی نتایج جستجو Styling the search results

• پنهان کردن دکمه ویرایش تصویر پروفایل Hiding the profile image edit button

ایجاد چت جدید Creating a new chat

• انتخاب کاربری که می‌خواهیم با او چت کنیم Selecting the user we want to chat with

• ذخیره کاربران یافته شده در وضعیت Storing found users in the state

• دریافت داده‌های کاربر از کاربران ذخیره شده Getting the user data from the stored users

• نمایش پیام هنگام چت جدید Showing a message when it's a new chat

• استایل‌دهی حباب پیام چت جدید Styling the new chat message bubble

• ایجاد چت هنگام ارسال پیام Creating the chat when a message is sent

بازیابی چت‌ها Retrieving chats

• دریافت چت‌های کاربر هنگام شروع برنامه Getting the user chats when the app starts

• لغو اشتراک شنونده‌های فایربیس Unsubscribing the firebase listeners

• دریافت داده‌ها برای هر یک از چت‌های کاربر Getting the data for each of the user's chats

• ذخیره داده‌های چت در وضعیت Saving the chat data to state

• نمایش نشانگر بارگذاری هنگام بارگذاری چت‌ها Showing a loading spinner while we load the chats

• پیمایش لیست چت Iterating the chat list

• تنظیم کاربران ذخیره شده هنگام ورود Setting the stored users on login

• نمایش داده‌های کاربر Outputting the user data

• ناوبری به چت‌ها با فشار Navigating to the chats on press

ارسال پیام‌ها Sending messages

• ارسال پیام‌های متنی Sending text based messages

• به‌روزرسانی داده‌های چت هنگام ارسال پیام Updating chat data when message is sent

• افزودن پیام‌ها به وضعیت برنامه هنگام بارگذاری برنامه Adding messages to app state when the app loads

• نمایش آخرین متن پیام در زیر چت Displaying the latest message text underneath the chat

نمایش پیام‌های چت Outputting chat messages

• نمایش پیام خطا هنگام عدم ارسال پیام‌ها Showing an error message when messages fail to send

• فقط بازیابی پیام‌ها برای چتی که در حال مشاهده هستیم Only retrieving messages for the chat we're looking at

• استایل‌دهی پیامی که ارسال کردیم Styling message that we sent

• استایل‌دهی پیام‌های ارسال شده توسط دیگران Styling the messages sent by others

منوی متنی پیام (اقدامات پیام اضافی) Message context menu (additional message actions)

• واکنش به فشار طولانی روی پیام‌ها Reacting to long presses on the messages

• باز کردن منوی متنی با فشار طولانی Opening the context menu on long press

• گزینه منوی کپی در کلیپ‌بورد Copy to clipboard menu option

• سفارشی‌سازی کامپوننت‌های آیتم منو Customising the menu item components

ستاره‌دار کردن پیام‌ها Starring messages

• فراخوانی تابع ستاره‌دار کردن پیام Calling the star message function

• افزودن پیام‌های ستاره‌دار به پایگاه داده Adding starred messages to the database

• افزودن و حذف پیام‌های ستاره‌دار در وضعیت برنامه Adding and removing starred messages in the app state

• تنظیم وضعیت اولیه پیام‌های ستاره‌دار Setting the initial starred messages state

• به‌روزرسانی گزینه منو برای ستاره‌دار و برداشتن ستاره Updating the menu option for star and unstar

• نمایش آیکون ستاره در کنار پیام Showing a star icon next to the message

• نمایش تاریخ در کنار پیام Outputting the date next to the message

پاسخ به پیام‌ها Replying to messages

• انتخاب پیام برای پاسخ Selecting a message to reply to

• ایجاد کامپوننت پاسخ ما Creating our reply component

• استایل‌دهی بخش پاسخ Styling the reply section

• لغو پاسخ Cancelling the reply

• ارسال پاسخ به پایگاه داده Sending the reply to the database

• نمایش پیامی که به آن پاسخ می‌دهیم Showing the message we're replying to

• جزئیات نهایی برای پاسخ‌ها Finishing touches to the replies

ارسال پیام‌های تصویری Sending image messages

• باز کردن انتخاب‌گر تصویر Opening the image picker

• نمایش پنجره تایید تصویر Showing the popup image confirmation

• بارگذاری تصاویر چت Uploading chat images

• ارسال پیام تصویری Sending the image message

• نمایش تصاویر بارگذاری شده Outputting uploaded images

• رفع باگ: ایجاد چت جدید با ارسال پیام Bug fix: Creating a new chat by sending a message

• ارسال عکس از دوربین شما Sending pictures from your camera

• پیمایش چت به پایین با پیام جدید Scrolling the chat to the bottom on new message

ایجاد چت‌های گروهی Creating group chats

• ایجاد دکمه 'گروه جدید' Creating a 'new group' button

• ایجاد جعبه متن نام چت Creating the chat name textbox

• افزودن دکمه 'ایجاد' Adding the 'create' button

• ایجاد چک‌باکس‌های کاربر Creating the user checkboxes

• انتخاب کاربران برای چت گروهی ما Selecting users for our group chat

• نمایش کاربران انتخاب شده Outputting the selected users

• حذف کاربر انتخاب شده هنگام فشار Removing a selected user when pressed

• استایل‌دهی آیتم‌های لیست کاربران انتخاب شده Styling the selected users list items

• پیمایش لیست کاربران انتخاب شده به انتها Scrolling the selected users list to the end

• مدیریت فشار دکمه 'ایجاد' Handling the 'create' button press

• باز کردن چت موجود در صورت وجود با آن کاربر Opening an existing chat if one with that user exists

• [رفع باگ]: رفع فضای اضافی در پایین صفحه در چت جدید [Bug fix]: Fixing space at bottom of screen when on a new chat

• برخی به‌روزرسانی‌های کوچک رابط کاربری در چت گروهی Some small UI updates when it's a group chat

• نمایش نام فرستنده در چت گروهی Outputting the sender name when it's a group chat

صفحه تنظیمات کاربر چت Chat user settings page

• ایجاد دکمه تنظیمات چت Creating the chat settings button

• ایجاد صفحه مخاطب Creating the contact screen

• نمایش نام و تصویر پروفایل مخاطب Showing the contact's name and profile image

• دریافت چت‌های مشترک Getting the common chats

• نمایش چت‌های مشترک Outputting the common chats

• ناوبری به چت‌های مشترک هنگام کلیک Navigating to the common chats when clicked

صفحه تنظیمات چت Chat settings page

• ناوبری به صفحه تنظیمات چت Navigating to the chat settings page

• تغییر تصویر چت گروهی Changing the group chat image

• استفاده از تصویر چت در جاهای دیگر Using the chat image elsewhere

• ایجاد کنترل‌کننده فرم برای به‌روزرسانی نام چت Creating the form handler for updating the chat name

• به‌روزرسانی نام چت Updating the chat name

• نمایش پیام موفقیت پس از به‌روزرسانی نام Showing a success message when the name is updated

• ایجاد بخشی برای نمایش کاربران چت Creating a section for displaying the chat users

• نمایش کاربران چت Outputting chat users

حذف کاربران از چت‌ها Removing users from chats

• نمایش دکمه حذف از چت Showing the remove from chat button

• نمایش نشانگر بارگذاری هنگام حذف کاربر Showing a loading spinner while a user is bring removed

• حذف کاربر از چت در پایگاه داده Removing the user from the chat in the database

• حذف چت از لیست چت کاربر Removing the chat from the user's chat list

• ارسال پیام اطلاع‌رسانی 'کاربر A، کاربر B را از چت حذف کرد' Sending info message 'User A removed User B from the chat'

• استایل‌دهی پیام‌های اطلاع‌رسانی Styling the info messages

• ترک چت‌ها Leaving chats

• رفع باگ: جلوگیری از نمایش دکمه حذف از چت در چت غیر گروهی Bug fix: Prevent remove from chat button showing when not in group chat

مشاهده تمام کاربران چت در صفحه جداگانه Viewing all chat users on a separate page

• افزودن دکمه مشاهده همه کاربران Adding the view all users button

• ناوبری به صفحه لیست داده‌ها Navigating to the data list screen

• تنظیم عنوان صفحه لیست داده‌ها Setting the title of the data list screen

• نمایش تمام کاربران چت Outputting all the users of the chat

• رویداد فشار روی آیتم لیست داده Data list item on press

افزودن کاربران جدید به چت Adding new users to a chat

• حذف شرکت‌کنندگان موجود از نتایج جستجو Excluding existing participants from search results

• به‌روزرسانی رابط کاربری در صورت افزودن کاربر به چت موجود Updating the UI if we're adding users to an existing chat

• ارسال کاربران انتخاب شده به صفحه قبلی Passing the selected users to the previous screen

• افزودن چت به لیست چت کاربر Adding the chat to the user's chat list

• ذخیره کاربران جدید در داده‌های چت Saving new users in the chat data

• ارسال پیام تایید پس از افزودن کاربر Sending a confirmation message when a user has been added

مشاهده پیام‌های ستاره‌دار Viewing starred messages

• نمایش دکمه مشاهده پیام‌های ستاره‌دار Showing the button to view start messages

• نمایش پیام‌های ستاره‌دار Outputting the starred messages

• نمایش پیام‌های ستاره‌دار در صفحه تنظیمات Showing starred messages on the settings page

ارسال اعلان‌های پوش Sending push notifications

• پیکربندی برنامه برای اعلان‌های پوش Configuring the app for push notifications

• ارسال اعلان‌های پوش تستی Sending test push notifications

• ذخیره توکن‌های پوش دستگاه هنگام ورود Storing the device push tokens on sign in

• حذف توکن‌های پوش هنگام خروج Removing push tokens on logout

• رفع باگ: عدم امکان خروج هنگام انقضای توکن احراز هویت Bug fix: Can't logout when auth token has expired

• ارسال اعلان‌های پوش هنگام ارسال پیام Sending push notifications when a message is sent

• ارسال اعلان‌های پوش هنگام ارسال تصویر Sending push notifications when an image is sent

• مدیریت رویداد کلیک اعلان Handing the notification click event