آموزش فلاتر - جلسه 60

سلام عرض می‌کنم خدمت دوستان عزیز. بریم سراغ

ادامه بحثمون و امروز میخوایم یه مبحث

جدید و فصل جدیدو شروع بکنیم. قبلش من

لینک

در حقیقت پروژمون تا پایان فصل قبلیو

بهتون بدم. از اینجا می‌تونید پروژه‌هایی

که تا جلسه قبل انجام دادیم و تموم شد رو

کدش رو دریافت بکنید.

ما هر فصل به فصل دقیقا این توی یه

ریپازیتوری می‌ذارم داخل گیتهاب که بتونید

راحت کدا رو داشته باشید این می‌تونه نقطه

شروع ما باشه برای فصل جدیدمون خب بریم

شروع کنیم

ما توی پروژه‌ای که فصل قبلی انجام دادیم

یعنی اون پروژه اپلیکیشن غذایی که انجام

دادیم یه آب بخورم ببخشید

یه سری مشکلات داشتیم

و مشکلاتم از این جسم بود که

برای جابهجایی دیتا

توی برناممون یا بهتره بگم جابهجایی استیت

توی برناممون خیلی درد سر کشیده بذارین من

تو تصویر بهتون نشون بدم منظورم چیه

ما تو بالاترین سطح برنام‌همون چیو داشتیم بچه‌ها؟ یه اسکرین داشتیم به نام تب

اسکرین که همه اتفاقات اونجا میفتاد.

تو لایه پایین‌ترش ما یه سری اسکرین دیگه هم داشتیم. یه دونه اسکرین داشتیم برای

کتگوری.

یه اسکرین داشتیم برای میلز

یه لایه پایین‌ترش یه اسکرین دیگه داشتیم که جزئیات یه غذا رو نشون میداد داست

دیتیل یه غذا

اینور داستان ما یه اسکرین داشتیم به نام فوریت غذاهای مورد علاقه‌مون

ما یه همچین ساختاری داشت برنامون خاطرتون باشه که

این این میاد اینجا این میومد اینجا این

میومد اینجا و اینم اینجا

ما توی برنامهمون یادتون باشه می‌رفتیم تو

یه غذا

مثلاً اینجا من اینو می‌زدم این می‌رفت تو

لیست مورد علاقهم لیست مورد علاقهم کجا

بود؟ اینجا بود ولی من هیچ ارتباط مستقیمی

بین این د تا لایه نداشتم بچه‌ها این د تا

اسکرین نداشتم

من ارتباط مستقیمی بین این د تا اسکرین

وجود نداشت من بعد چیکار می‌کردم اومده

بودم یه استیتی رو این بالا تعریف کرده

بودم

خب مثلاً اسمشو بذاریم فبرید استیت

شد

من اومدم یه استیتی رو اینجا تعریف کرده

بودم به اسم

مثلاً فوریت

استیت

خب

این استیت کجا لازم بود؟ اینجا لازم بود پس این فورت است اینجا نازل بود

[موسیقی] این اینجا لازمش داشتیم ما

تو این نقطه

ولی کجا تغییر می‌کرد؟ اینجا تغییر می‌کرد. مجبور بودم چون ارتباط مستقیمی

بین این دو تا وجود نداشت اومده بودم این

داخل تب اسکرین یه متدیو تعریف کردم به

نام تاگ فوریت

تاگل

که میومدم اینو پاس می‌دادم به این پایینیا اسمشم گذاشته بودم تو اینا چی

گذاشته بودم؟

آن تاگل

فوریت اگه بید کدو نگاه کنید قشنگ اینو

می‌بینید

بعد دوباره همینو پاس دادم به این پایینیه

خب این فرایند بچه‌ها فراآیند راحتی نیست من اینکه اینو بیارم بدم به این بعد اینو

بدم به این بعد اینو بیارم بدم به این که

یه چیزی اینجا تغییر کنه دوباره همین

مسیررو برگرده بیاد بیاد اینجا بعد اینو

بدم به این خب اصلاً حالا بدقی نیست

اشتباه نیستا خب یعنی شما تو پروژه کوچیک

می‌تونید اصلاً از این روش استفاده کنید

اما هرچقدر پروژهتون بزرگتر بشه و

پیچیدگیاش بیشتر بشه طبیعتاً دیگه این کار

سخت‌تره و خیلی کد شما رو پیچیده می‌کنه

راهحل چیه؟ راهحل اینه که مثل خیلی از

لایبری دیگه که توی حالا حوزه‌های دیگه

وجود داره

اینجا هم یک روشی هست روش‌هایی هست برای

اینکه شما بیاید استعدادتون رو یک تو یک

نقطه مرکزی

نگه دارید و بعد هر جایی که دوست دارید

برید بگیرید ازش استفاده کنید حالا یا

تغییرش بدید هر کاری دوست دارید باهاش

بکنید

توی فلاته برای اینکه بخوایم این کارو

بکنیم یکی از روش‌های جدید و خوب استفاده

از یه پکیجه به نام ریورپات

داریم پکیجی دیگه هم که این کارو می‌کنن

مثلاً یه پکیجی به نام پرووایدر جفتشم

توسط یه تیم نوشته شد ولی خب لیورپات

جدیدتره مدرن‌تره برای ما میریم سراغ

لیورپات

اولین کاری که می‌کنیم باید لیورپادو اد

بکنیم توی پروژهمون خیلی هم ساده است

میایم داخل پروژهمون

پاپ اد اسم اون پکیجه که هست فلات

ریورپات

خب اینو دریافت کرد پس من الان تونستیم اینو اضافهش بکنیم به پروژمون

حالا چهجوری ریوپات کار می‌کنه ریوپات

میاد یه جایی یه چیزی تعریف می‌کنه به نام

پرووایدر شما استیتاتون اونجا تعریف

می‌کنید تو هر اسکرینی که خواستید ازش

استفاده بکنید اون اسکرین میشه یه

کانسیومر یه مصرف کننده و اون مصرف کننده

وصل میشه به اون پرووایدره و میگه که تو

قراره برای من یک چیزی رو درست بکنی یه

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

میام اینجا توی لیپ یه دایرکتور جدید درست

می‌کنم اسمشو می‌ذارم پرووایدرز

یه فایل داخلش درست می‌کنم به نام میل میلز پرووایدر

بریم ساده‌ترین پرووایدری که می‌تونیم اینجا درست بکنیمو ایجادش بکنیم بعد بریم

ازشم استفاده بکنیم.

من یه دیتایی داشتم بچه‌ها یادتون باشه

این لیست یه غذای فیکی بود که داشتم توش

اینا

خب من می‌تونم اینو به عنوان پرووایدر

تعریف کنم کار اشتباهیه ها چون خود این یه

متغییره دیگه شما هر جای بخواید می‌تونید

ایمپورت کنید خیلی چالشی باهاش ندارید ولی

برای اینکه فقط توضیح بدم چهجوری داره کار

می‌کنه اینو می‌برم داخل پرووایدر

اول ویور پلاتو بیارم

ریورپات فلاترپ.

خب میگم فاینال

اسمشو می‌ذارم میلز پرووایدر

یه رف اینجا داریم حالا رفو جلوتر می‌بینید

که ریترن می‌کنه چیو همون دامی میلزی که

داشتم خودشم این بالا ایمپورت می‌کنه

خب اولین پرووایدرمونو درست کردیم. حالا می‌خوام برم از این دامی میلزه هر

جایی که لازمه استفاده کنم. کجا استفاده

می‌کردیم؟ توی تبز.

اینجا که میومدیم

فیلتر می‌کردیم اینهاش. می‌خوام به جای این دامی مییلز برم وصلش

بکنم به اون پروواید. خب گفتم این مثال

مثال مسخره‌ایه چون داریزو شما می‌تونید

هر جا ایمپورت کنید ولی اشکال نداره

می‌خوام فقط مفهومو یاد بگیریم

اول میام میل پرووایدررو اینجا می‌کنم

این میله درسته آره پرووایدرز می پرووایدرز اینم خب

اینم دیگه بچه‌ها لازم ندارید میتونید

براش

دامین میلزو دیگه نیاز نداریم خب کجا

بودیم اینجا

اینو میخوام جایگزین بکنم با اون استیتی

که تعریف کردم آها ریورپادم بذار بعد

بیارم

اینو الان برای خانایی و اینا می‌برمش بالا چون مهمه. خب میایم پایین.

حالا اینو چهجوری جایگزین بکنیم؟ اولین

کاری که باید بکنم گفتم که من باید اینو

این اسکرینو تبدیلش کنم به کانسیومر

خب اینجا دارم استیت فول دارم اینو باید

تبدیلش کنم به کانسیومر فول ویجت

پس اینو می‌کنم

کانسیومر کانسیومر

استیت فول بچه‌ها کانسیومر ویجت هم داریم

این با این فرقش چیه

فول ویجت با ویجه ویجت برای جاهاییه که

استیتلسن

اما اینجا استیت فوله پس اینو استیت فول

استفاده می‌کنم

تغییر بعدی چیه دو سه تغییر دیگه باید

بدیم ما

هر جایی استیت داریم باید بشه کانسیومر استیت

تمام خب پس هر جا استیتم داریم باید تیر بشه به

کانسیومر استیت حالا بریم استفاده کنیم از

این پرووایدری که تعریف کردید

یادتونه گفتم یه رفی من تعریف کردم توی

اون پرووایدره گفتم بعداً باهاش کار دارم

اینا

از این طریق این رفه من می‌تونم دسترسی

داشته باشم به چی؟ به اون استیته.

بنویسید واچ واچ چیکار می‌کنه؟ از اسمش معلومه

حواسشو جمع می‌کنه به این پرووایدره به

محض اینکه تغییر بکنه اینجام تغییر

می‌کنه.

حالا اسم پرووایدرمون چی بود؟

میز

میگم اینو برام بیار میگه خب آوردمش برات

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

یه اسمی براش بذاریم مثلاً اسمشو بذارم

همون میلز می‌ذارم

میگم اینو بیار اسمشو بذار این یه ذره

اینجا فاصله بدم که ببینید خب

حالا چیکار می‌کنم فقط کافیه که به جای

دامی میز بنویسم م می‌رسه

آیا این کار می‌کنه الان بریم ببینیم با

هم

نه چرا کار نمی‌کنه برگردم به این تصویر برای اینکه من بخوام یه ارتباط مستقیم بین

اینا ایجاد کنم از طریق پرووایدر من باید

بچه‌ها کل این اپلیکیشنم رو ببرم زیر چتر

پرووایدر

اینا باید کلش ش بره زیر چطری پرووایدر

چهجوری این کارو می‌کنم میام توی مین

اپلیکیشن کلیم اینجاست دیگه این آش اینجا اپمم رو می‌برم زیر چتر این

پرووایدره میگم تو باید بری داخل این

پرووایدره باشی

اول ریور پلاتو ایمپورت می‌کنم ریورپاد و ریور پلاتی

ریور پلات چرا اومد تو ذهنمون

فلات ریورپات اینو اول میارم اینجا

بعد

اینو برمی‌دارم

به جاش چی می‌ذارم

پرووایدر اسکوپ یه چایلدی میخواد چایلدش میشه این

حالا کل پروژه من رفت زیر چتر در حقیقت این پرووایدره حالا یه چک بکنیم

درست شد خیلی خب بریم بیایم جلسه میخوایم بریم

سراغ یه سری پرووایدرای پیچیده‌تر خیلی

ساده بود یعنی یه متغیر فقط آوردیم عملاً

داخل یه پرووایدر فعلاً خداحافظ