آموزش استاد فلاتر با ساختن یک برنامه چت تماس ویدیویی و صوتی

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

معرفی Introduction

• معرفی Introduction

• ویدئوی نمایشی Demo video

ساختار و پوشه پروژه Project structure and folder

• ساختار پروژه اصلی برنامه Basic project structure of the app

• پوشه پروژه جدید ایجاد کنید Create new project folder

ماژول خوش آمدید Welcome module

• ماژول و کنترلر خوش آمدید Welcome module and controller

• ماژول خوش آمدگویی و کنترلر صحافی Welcome module and binding controller

• ماژول خوش آمدید و کتابخانه ایجاد کنید Welcome module and create library

• ماژول خوش آمدید و مشاهده کنید Welcome module and view

• ماژول خوش آمدید و main.dart Welcome module and main.dart

• ماژول خوش آمدگویی و صفحه نمایش آنبورد Welcome module and onboard screen

• خلاصه ماژول خوش آمدید Welcome module summary

ماژول پیام و میان افزار Message module and middleware

• کنترل کننده ماژول پیام، صحافی، نمایش و کتابخانه Message module controller, binding, view and library

• درک میان افزار Understanding the middleware

ماژول وارد شوید Sign in module

• ورود به سیستم کنترل ماژول، صحافی و کتابخانه Sign in module controller, binding and library

• مسیریابی و اتصال ماژول به سیستم وارد شوید Sign in module routing and binding

تزریق وابستگی Dependency Injection

• وابستگی ها را در سطح جهانی تزریق کنید Inject dependencies globally

ذخیره سازی و وابستگی های محلی Local storage and dependencies

• کلاس StorageService و SharedPreferences را درک کنید Understand StorageService class and SharedPreferences

• اطلاعات بیشتر در مورد StorageService و SharedPreferences More on StorageService and SharedPreferences

• تفاوت بین Get.put، Get.lazyPut و Get.putAsync Difference between Get.put, Get.lazyPut and Get.putAsync

با ورود شخص ثالث وارد ماژول شوید Sign in module with third party login

• به ماژول و لوگوی صفحه وارد شوید Sign in module and page logo

• ورود به ماژول و دکمه ورود شخص ثالث Sign in module and third party login button

• وارد ماژول و شماره تلفن ورود به سیستم قسمت 1 Sign in module and phone number login part 1

• وارد ماژول و شماره تلفن ورود به سیستم قسمت 2 Sign in module and phone number login part 2

• Firebase را با CLI تنظیم کنید Set up firebase with CLI

• وارد ماژول شوید و قسمت 1 handleSignIn() Sign in module and handleSignIn() part 1

• وارد ماژول شوید و handleSignIn() قسمت 2 Sign in module and handleSignIn() part 2

• وارد ماژول شوید و قسمت 3 handleSignIn() Sign in module and handleSignIn() part 3

پیکربندی مجدد تنظیمات iOS و Android و تولید کلید SHA1 و SHA256 را یاد بگیرید Learn to reconfigure iOS and Android settings and SHA1 and SHA256 key generation

• باید درباره ورود به سیستم گوگل بدانید Must know about Google login

• ورود و پیکربندی iOS و Android iOS and Android login and configuration

• ورود به سیستم iOS و اندروید و اثر انگشت iOS and Android login and fingerprint

• iOS و Android شناسه بسته و نام بسته را تغییر می‌دهند و کلید SHA256 را تولید می‌کنند iOS and Android change bundle id and package name and generate SHA256 key

• ورود به سیستم iOS و Android و بازنشانی شناسه مشتری معکوس iOS and Android login and reset reverse client id

بیاموزید که قرار است در آینده چه کاری انجام دهیم Learn what we are going to do next

• اطلاع از ساعات جدید بعدی Knowing about next new hours

ماژول پیام Message module

• صفحه پیام و معرفی Message screen and introduction

• صفحه پیام، آداپتور slivertobox و نوار برگه قسمت 1 Message screen, slivertoboxadapter and tab bar part 1

• صفحه پیام و نوار برگه قسمت 2 Message screen and tab bar part 2

• صفحه پیام و نوار برگه قسمت 3 Message screen and tab bar part 3

• صفحه پیام و نوار برگه قسمت 4 Message screen and tab bar part 4

• صفحه پیام و بارگیری پیام ها قسمت 1 Message screen and load messages part 1

• صفحه پیام و بارگذاری پیام قسمت 2 Message screen and load message part 2

• صفحه پیام و بارگذاری پیام قسمت 3 Message screen and load message part 3

• صفحه پیام و بارگذاری پیام قسمت 4 Message screen and load message part 4

• صفحه پیام و بارگذاری پیام قسمت 5 Message screen and load message part 5

• صفحه پیام و بارگذاری پیام قسمت 6 Message screen and load message part 6

• صفحه پیام و بارگذاری پیام قسمت 7 Message screen and load message part 7

• صفحه پیام و نمایش نماد کاربر قسمت 8 Message screen and show user icon part 8

• صفحه پیام و نمایش نام و پیام قسمت 8 Message screen and show name and message part 8

• صفحه پیام و نمایش تعداد پیام ها قسمت 10 Message screen and show number of messages part 10

• صفحه پیام و قالب زمان قسمت 11 Message screen and time format part 11

• صفحه پیام و مسیر چت قسمت 12 Message screen and chat route part 12

• صفحه پیام و نقاط قرمز روشن قسمت 13 Message screen and clear red dots part 13

ماژول پروفایل Profile module

• ماژول پروفایل و راه اندازی Profile module and set up

• ماژول پروفایل و بخش بدنه Profile module and body section

• ماژول نمایه و نمایش عکس نمایه Profile module and show profile photo

• ماژول نمایه و نماد ویرایش را نشان دهید Profile module and show edit icon

• ماژول پروفایل و دکمه تکمیل Profile module and complete button

• ماژول نمایه و دکمه گفتگو Profile module and dialogue button

• صفحه پروفایل و خروج از سیستم قسمت 7 ProfilePage and logout part 7

• ماژول پروفایل و دکمه خروج Profile module and logout button

• ماژول نمایه و تغییرات جزئی در رابط کاربری Profile module and minor changes in the UI

ماژول Backend (سمت سرور) Backend module(server side)

• لاراول را به صورت محلی نصب کنید Install laravel locally

• سیستم عامل مک پایگاه داده MySQL را ایجاد و راه اندازی می کند Mac OS create MySQL database and set up

• بسته لاراول-ادمین نصب سیستم عامل مک Mac OS install laravel-admin package

• راه اندازی و پیکربندی بسته لاراول-ادمین Laravel-admin package set up and configuration

• درک اولیه لاراول از چارچوب Laravel basic understanding of the framework

• سرور پایگاه داده و اتصال ذخیره سازی محلی Database server and local storage connection

• ویرایش جدول کاربران phpMyAdmin phpMyAdmin users table edit

• MySQL Workbench ویرایش جدول کاربران MySQL Workbench edit users table

ساخت API ساختگی Build dummy API

• لاراول API ساختگی می سازد و با استفاده از پستچی تست می کند Laravel build dummy API and test using postman

• تست API ساختگی لاراول در برنامه Laravel dummy API test on the app

کنوانسیون تغییر مسیر و مسیریابی میان افزار Middleware redirect and routing convention

• تغییر مسیر میان‌افزار را راه‌اندازی کنید و کاربر را در سیستم نگه دارید Middleware redirect set up and keep the user logged in

• درباره راه اندازی و قرارداد لاراول بیاموزید Learn about laravel route set up and convention

ماژول ورود سمت سرور Server side Login module

• ماژول LoginController و روش ورود به سیستم قسمت 1 LoginController module and login method part 1

• ماژول LoginController و تست پستچی قسمت 2 LoginController module and postman test part 2

• ماژول LoginController و تست Postman قسمت 3 LoginController module and Postman test part 3

• ماژول LoginController و نشانه دسترسی و تست پستمن قسمت 4 LoginController module and access token and Postman test part 4

• ماژول LoginController و روی نشانه دسترسی به روز رسانی قسمت 5 کار کنید LoginController module and work on update access token part 5

تماس API در برنامه API call on the app

• تماس API از برنامه و درک اتصال Calling API from the app and understand the connection

• فراخوانی API از برنامه و خطای Debug API Calling API from the app and debug API error

درک عمیق تر از ذخیره پروفایل کاربر و اتصال ذخیره سازی محلی Deeper understanding of user profile saving and local storage connection

• ذخیره اطلاعات نمایه کاربر در هنگام ورود به سیستم و حذف در هنگام خروج Saving user profile data during login and remove during logout

• نحوه ذخیره نمایه کاربر برای عملکرد بهتر برنامه را بدانید Understand how saving user profile works for better app performance

• ورود، خروج از سیستم و میان افزار کلاس UserStore UserStore class login, logout and middleware

• دکمه ایجاد صفحه پیام (این قسمت در آپلود اصلی وجود نداشت) Create message page button (this part was missing from the original upload)

درباره بخش های آینده About the upcoming sections

• با بخش های آینده آشنا شوید Learn about the upcoming sections

تماس با ماژول و Serside ساخت API و میان افزار Contact module and serside build API and middleware

• راه اندازی قسمت جلویی ماژول تماس Contact module front end set up

• ماژول تماس و نوار برنامه Contact module and app bar

• تماس با ماژول و تست API با Postman Contact module and test API with Postman

• تماس با ماژول و ساخت میان افزار قسمت 1 Contact module and build middleware part 1

• ماژول تماس و توکن حامل در میان افزار قسمت 2 Contact module and Bearer token in middleware part 2

• ماژول تماس و میان افزار قسمت 3 Contact module and middleware part 3

• با ماژول تماس بگیرید و کار بر روی قسمت 4 میان افزار را تمام کنید Contact module and finish working on middleware part 4

• تماس با ماژول و بارگذاری داده ها از سرور قسمت 5 Contact module and load data from server part 5

• تماس با ماژول و داده های بارگذاری فلاتر و چاپ قسمت 6 Contact module and flutter load data and print part 6

• تماس با ماژول و نمایش عکس پروفایل سایر کاربران قسمت 7 Contact module and show other users profile photo part 7

• تماس با ماژول و نمایش داده های دیگر کاربران قسمت 8 Contact module and show other users data part 8

• جلسات آتی Upcoming sessions

• تماس با ماژول و درک پرس و جو چت Contact module and understand chatting query

• ماژول تماس و پرس و جو الگوریتم چت قسمت 2 Contact module and chatting algorithm query part 2

• ماژول تماس و الگوریتم چت قسمت 3 Contact module and chatting algorithm part 3

• ماژول تماس و مسیریابی الگوریتم چت قسمت 4 Contact module and chatting algorithm routing part 4

• ماژول تماس و مسیریابی قسمت 5 Contact module and routing part 5

ماژول چت Chat module

• ماژول چت و ارسال پیام ایجاد تابع قسمت 1 Chat module and send message create function part 1

• ماژول چت و ارسال پیام ایجاد شیء پیام قسمت 2 Chat module and send message create message object part 2

• ماژول چت و ارسال پیام افزودن داده به مجموعه firebase قسمت 3 Chat module and send message add data to firebase collection part 3

• ماژول چت و ارسال پیام و برگرداندن شناسه سند قسمت 4 Chat module and send message and return document id part 4

• ماژول چت و ارسال پیام درک مجموعه و زیر مجموعه قسمت 5 Chat module and send message understand collection and sub-collection part 5

• ماژول چت و ارسال پیام و درک فیلدهای مجموعه قسمت 6 Chat module and send message and understand collection fields part 6

• ماژول چت و ارسال پیام و دریافت شناسه سند از مجموعه قسمت 7 Chat module and send message and get document id from collection part 7

• ماژول چت و ارسال پیام و دریافت فیلدهای مجموعه firebase قسمت 8 Chat module and send message and get firebase collection fields part 8

• بخش 9 ماژول چت و ارسال پیام و به روز رسانی اسناد Chat module and send message and update documents fields part 9

• ماژول چت و ارسال پیام و درک orderBy محدودیت و عکس فوری قسمت 10 Chat module and send message and understand orderBy limit and snapshot part 10

• ماژول چت و ارسال پیام و درک داده های عکس فوری ویرایش قسمت 11 Chat module and send message and understand snapshot data edit part 11

• ماژول چت و ارسال پیام و دریافت عکس فوری پرس و جو قسمت 12 Chat module and send message and get query snapshot part 12

• ماژول چت و ارسال پیام و افزودن اسناد به لیست موقت قسمت 13 Chat module and send message and add docs to temporary list part 13

• ماژول چت و ارسال پیام و درک لیست موقت قسمت 14 Chat module and send messages and understand the temporary list part 14

• ماژول چت و ارسال پیام و انتشار منابع شنونده قسمت 15 Chat module and send message and release listener resources part 15

• ماژول چت و ارسال پیام و برش برای رابط کاربری قسمت 16 Chat module and send message and slivers for ui part 16

• ماژول چت و ارسال پیام و نمایش پیام در رابط کاربری قسمت 17 Chat module and send message and show message on the ui part 17

• ماژول چت و ارسال پیام و متن در رابط کاربری قسمت 18 Chat module and send message and style text in the ui part 18

• ماژول چت و ارسال پیام و درک CustomScrollView و Slivers قسمت 19 Chat module and send message and understand CustomScrollView and Slivers part 19

• ماژول چت و ارسال پیام و لیست چت چپ قسمت 20 Chat module and send message and left chat list part 20

• ماژول چت و ارسال پیام و رفع اشکال قسمت 21 Chat module and send message and fix bug part 21

• ماژول چت و ارسال پیام و اسکرول خودکار قسمت 22 Chat module and send message and auto scrolling part 22

• ماژول چت و ارسال پیام و minScrollExtent قسمت 23 Chat module and send message and minScrollExtent part 23

• ماژول چت و ارسال پیام و min و maxScrollExtent قسمت 24 Chat module and send message and min and maxScrollExtent part 24

• ماژول چت و بارگیری داده های همگام بیشتر قسمت 25 Chat module and load more data async part 25

• ماژول چت و قسمت 26 شنونده را اضافه کنید Chat module and add listener part 26

• ماژول چت و بارگذاری اطلاعات بیشتر قسمت 27 Chat module and load more data part 27

• ماژول چت و درک پیمایش و بارگذاری داده های بیشتر قسمت 28 Chat module and understand scrolling and load more data part 28

• ماژول چت و چت دستگاه به دستگاه قسمت 29 Chat module and device to device chat part 29

• ماژول چت و ارسال تصویر قسمت جلویی روش 30 Chat module and send image part front end method 30

• ماژول چت و ارسال تصویر و درک روش upload_img قسمت 31 Chat module and send image and understand upload_img method part 31

• ماژول چت و ارسال تصویر و نقطه پایانی API قسمت 32 Chat module and send image and API end point part 32

• ماژول چت و ارسال تصاویر و مشاهده در مرورگر قسمت 33 Chat module and send images and view on browser part 33

• ماژول چت و ارسال دستگاه تصاویر به دستگاه قسمت 34 Chat module and send images device to device part 34

ماژول تماس صوتی VoiceCall module

• ماژول VoiceCall و تنظیمات اولیه قسمت 1 VoiceCall module and basic set up part 1

• ماژول VoiceCall و تنظیم نمای قسمت 2 VoiceCall module and set up view part 2

• ماژول VoiceCall و نشان دادن آواتار و پارامترهای مسیریابی اولیه VoiceCall module and show avatar and basic routing parameters

• ماژول VoiceCall و نام قسمت 3 را نشان دهید VoiceCall module and show the name part 3

• ماژول VoiceCall و نمای میکروفون قسمت 4 VoiceCall module and microphone view part 4

• نمایش ماژول VoiceCall و دکمه تماس و دکمه بلندگو قسمت 5 VoiceCall module and call button and speaker button view part 5

• ماژول VoiceCall و کنترلر و agora قسمت 6 را راه اندازی کردند VoiceCall module and controller and agora set up part 6

• ماژول VoiceCall و agora resisterHandler قسمت 7 VoiceCall module and agora resisterHandler part 7

• راه اندازی ماژول VoiceCall و موتور agora قسمت 8 VoiceCall module and agora engine set up part 8

• ماژول VoiceCall و روش joinChannel و leaveChannel VoiceCall module and joinChannel and leaveChannel methods

• ماژول VoiceCall و تغییر حالت در نمای قسمت 10 VoiceCall module and change state in the view part 10

• ماژول VoiceCall و بررسی کنید که آیا کاربر می تواند به چت روم بپیوندد یا نه به قسمت 11 VoiceCall module and check if the user can join chatting room or not part 11

• ماژول VoiceCall و دو شبیه ساز به اتاق چت قسمت 12 می پیوندند VoiceCall module and two simulators join the chatting room part 12

• ماژول VoiceCall و دستگاه واقعی و شبیه سازها در حال صحبت قسمت 13 VoiceCall module and real device and simulators talking part 13

• ماژول VoiceCall و درک کنید که چرا به API قسمت 14 نیاز داریم VoiceCall module and understand why we need API part 14

• ماژول VoiceCall و ایجاد کنترلر در لاراول باطن قسمت 15 VoiceCall module and create controller in the laravel backend part 15

• ماژول VoiceCall و api خود را برای توکن دسترسی قسمت 16 بسازید VoiceCall module and build your api for access token part 16

• ماژول VoiceCall و پخش صدا و باز کردن قسمت 17 توکن VoiceCall module and play sound and reinit the token part 17

• ماژول VoiceCall و دریافت شناسه کانال به صورت پویا قسمت 18 VoiceCall module and get channel id dynamically part 18

• ماژول VoiceCall و توکن و api binding قسمت 19 VoiceCall module and token and api binding part 19

• ماژول VoiceCall و تست API در Postman قسمت 20 VoiceCall module and API test on Postman part 20

• ماژول VoiceCall و از توکن دسترسی استفاده کنید و توکن Agora 21 را دریافت کنید VoiceCall module and use access token and get Agora token 21

• ماژول VoiceCall و برقراری تماس با توکن واقعی قسمت 22 VoiceCall module and initiate call with real token part 22

• ماژول VoiceCall و ارسال اعلان قسمت 23 VoiceCall module and send notification part 23

• ماژول VoiceCall و ارسال اعلان قسمت 24 VoiceCall module and send notification part 24

• ماژول VoiceCall و ارسال اعلان Firebase Admin SDK قسمت 25 VoiceCall module and send notification Firebase Admin SDK part 25

• ماژول VoiceCall و ارسال اعلان قسمت 26 VoiceCall module and send notification part 26

• ماژول تماس صوتی و ارسال اعلان تست پستچی 27 VoiceCall module and send notification Postman test 27

• ماژول VoiceCall و ارسال نوتیفیکیشن cloud api قسمت 28 VoiceCall module and send notification cloud api part 28

• ماژول VoiceCall و ارسال اعلان و api ابری قسمت 29 VoiceCall module and send notification and cloud api part 29

• ماژول VoiceCall و ارسال اعلان تنظیمات اندروید قسمت 30 VoiceCall module and send notification android setting part 30

• ماژول تماس صوتی و تکلیف قسمت 31 VoiceCall module and Assignment part 31

• ماژول تماس صوتی و ارسال اعلان و تنظیمات بال زدن قسمت 32 VoiceCall module and send notification and flutter settings part 32

• ماژول VoiceCall و ارسال اعلان تنظیمات و توکن دستگاه قسمت 33 VoiceCall module and send notification flutter settings and device token part 33

• ماژول VoiceCall اعلان ارسال کنید و قسمت 34 رمز دستگاه را دریافت کنید VoiceCall module send notification and get device token part 34

• ماژول VoiceCall و ارسال اعلان و بررسی توکن دستگاه قسمت 35 VoiceCall module and send notification and check device token part 35

• ماژول VoiceCall و ارسال اعلان و ایجاد bind_fcmtoken endpoint قسمت 36 VoiceCall module and send notification and create bind_fcmtoken endpoint part 36

• ماژول VoiceCall و ارسال اعلان و دریافت و ذخیره توکن دستگاه قسمت 37 VoiceCall module and send notification and get and save device token part 37

• ماژول VoiceCall و ارسال نوتیفیکیشن و تست پستچی و شبیه ساز قسمت 38 VoiceCall module and send notification and Postman and emulator test part 38

• ماژول VoiceCall و ارسال اعلان و دستگاه به تماس دستگاه قسمت 39 VoiceCall module and send notification and device to device call part 39

• ماژول VoiceCall و درک اعلان تماس صوتی قسمت 40 VoiceCall module and understanding voice call notification part 40

• بخش 41 ماژول تماس صوتی و اطلاع رسانی درک VoiceCall module and understanding notification part 41

• ماژول VoiceCall و درک پیش زمینه و اطلاع رسانی پس زمینه قسمت 42 VoiceCall module and understand foreground and background notification part 42

• ماژول تماس صوتی و درک عملکرد اعلان دریافت قسمت 43 VoiceCall module and understand receive notification function part 43

• بخش 44 ماژول تماس صوتی و درک لغو و اعلان پس‌زمینه VoiceCall module and understanding cancel and background notification part 44

• جلسات آتی Upcoming sessions

متفرقه Miscellaneous

• صفحه کلید و منوی چت را مخفی کنید Hide keyboard and menu of chat

• نمایش عکس نمایه در صفحه پیام Show profile photo in message page

• نمایش عکس نمایه در صفحه نمایه Show profile photo in profile page

ماژول تماس تصویری Video call module

• تماس تصویری و ساختار پوشه و تغییر وضعیت قسمت 1 Video call and folder structure and state changes part 1

• تماس تصویری و تغییرات در موتور آگورا راه اندازی قسمت 2 Video call and changes in the agora engine set up part 2

• تماس تصویری و روش سوئیچ دوربین قسمت 3 Video call and switchCamera method part 3

• تماس تصویری و رابط کاربری قسمت 4 Video call and UI part 4

• تماس تصویری و رابط کاربری قسمت 5 Video call and ui part 5

• تماس تصویری و رابط کاربری و برقراری تماس قسمت 6 Video call and ui and make call part 6

• طراحی تماس تصویری و دکمه رابط کاربری قسمت 7 Video call and ui button design part 7

• تماس تصویری و رابط کاربری و نمایش نام کاربر دیگر قسمت 8 Video call and ui and show other user's name part 8

• تماس تصویری و بخش اندروید قسمت 9 Video call and android section part 9

• راه اندازی تماس تصویری و iOS قسمت 10 Video call and iOS set up part 10

• تماس تصویری و ارسال اعلان بین دستگاه ها قسمت 11 Video call and send notification between devices part 11

• تماس ویدیویی و زمان نمایش در رابط کاربری قسمت 12 Video call and show time on the UI part 12

کد کامل Complete code

• کد کامل Complete code