از Pista Academy حمایت کنید
مرور سریع مفاهیم اصلی پیش از تماشای کامل یا برای جمعبندی بعد از آموزش.
در جلسه 76 آموزش فلاتر، مدرس به بررسی مسائل مرتبط با لود دادهها در صفحه اول و رفع اشکال در دریافت دیتا از بک اند پرداخته میشود. همچنین، نحوه پردازش دیتا به صورت جیسون و ایجاد لیستی از آیتمها با استفاده از مدل گروسر آیتم توضیح داده شده است.
نکات کلیدی
استفاده از اینیش استیت برای لود دادهها در صفحه اول.
رفع اشکال در دریافت دیتا از بک اند.
پردازش دیتا به صورت جیسون برای ایجاد لیست آیتمها.
استفاده از مدل گروسر آیتم برای ساخت لیست آیتمها.
متن ویدیو
متن زمانبندیشده این جلسه برای مرور، جستجو و دسترسی سریعتر.
سلام عرض میکنم خدمت دوستان عزیز. جلسه قبلی ما رسیدیم به اینجا.
نکتهمون این بود که ما میخواستیم این
لود آیتم زمانی اجرا بشه که این صفحه برای
اولین بار میاد بالا. چهجوری این کارو
میکنیم؟ خیلی ساده. ما یه چیزی داشتیم به
نام اینیش استیت
میکنم این شد استت اینجا هر چیزی که میذاشتیم چی کی اجرا
میشد اون بار اول که صفحه میاد بالاض
این ای وا چی شد
حالا اون لو آیتمزو میرم میزارم اینجا
تو بار اول که صفحه میاد بالا اینو لودش بکنه بره دیتا رو دریافت بکنه از اونجا خب
الان اگر من بیام اینجا یه پرینت بذارم م
ریسپانسمو یه پرینتی بگیرم
اینو ببندم دوباره بازش کنم صفحه کنسولمو
بذار باز کنم
خب همه زست خود ۲۰۰و ندیدم این از اد نشد تو دیتابیس
یه بار دیگه
باز همون اروررو داد یه بار دیگه یه چند باری باید بزنیم تا این کار بکنه.
نمیدونم چرا.
من الان مسئله دومم اینه که چرا این نمیره گت و ریکوست گت تموم بزنم بذار
یه بار گ کنم یه چیز دیگه
خب حالا بریم سراغ ریکوست گتمون بگذریم از این اشکال نداره چرا ریکوستی گت من الان
کار نمیکنه این وقتی میاد بالا باید بره
لود بکنه وقتی لود میکنه بهش گفتم چیکار
کنه پرینت بکنه ریسپانسو
بذار من یه پرینت الکی اینجا بذارم پرینت
بیفور
لود مثلاً
باز خطا داد اینجا یه لحظه
خب مشکل حل شد بچهها این بیفول لودو نشون داد اینم که اون پاسخیه که از سمت
در حقیقت دیتابیسم دارم میگیرم تنها کاری
که بچهها دی ان اس این گوشیه رو عوض کردم
یعنی اومدم اینجا
تو این قسمت
اینجا دیگه دی ان اسشو عوض کردم اینو بذارید رو استاتیک آیپی ستینگ و
تنظیمات آیپیشم که به همین صورت بدید
و تمام
خب بریم جلو
حالا من اینو بکنم اینو بذار بردارم دیگه اینو بکنم دات بادی بذار خود دیتا رو
بگیره از بک اند بیاره
ناشش بچه این دیتای منه نگاه کنید مشکل اد شدنم باید حل شده باشه یه تست
بکنیم
مثلاً
تست
۵ تا
اینم درست شد بچهها یعنی دی ان اس همه مشکلات منو حل کرد این تستهم اضافه شد ها
خیلی خب بریم سراغ ادامه کارم چ خوش
ما الان تونستیم ریکوستو بزنیم اطلاعاتو بگیریم حالا باید چیکار بکنیم باید این
اطلاعاتو بیایم نمایشش بدیم توی صفحهمون
خب ما یه چیزی داشتیم اینجا این گروسر
آیتم این اون لیسته بود که ما بر مبنای
این بعد میومدیم تو صفحه یه کاری میکردیم
درسته فقط کافیه که دیتا رو که از بک اندم
میگیرم به این اضافش کنم
ولی قبل اینکه این کارو بخوام بکنم باید
یه تغییراتی توش بدم یعنی اون دیتا رو
نمیتونم همینوری اد بکنم خب اولین کاری
که باید بکنم چیه؟
اولین کاری که باید بکنم بیام بگم که
فاینال
لیست
دیتا مساویه اول باید جیسون. دیکود موقعی
که میخواستم ذخیرهش بکنم چیکار میکردم؟
میومدم انکود میکردم برعکسش میشه دیکود
اون دیتایی که اومده یعنی سپانس.bی رو
باید دیکود بکنم
خب
میگه جیسونو ندارید به خاطر اینه که اینو
باید ایمپورت کنید بچهها این کانورتو
باید این بالا بیارید
مشکل حلشه خب الان حل شد حالا من یه لیستی از
آیتمهایی دارم که از سمت بک اند اومده
درسته؟
حالا باید چیکار بکنم؟ باید برم دونه دونه
این آیتمای که تو اینه رو اضافه کنم به
این میام چیکار میکنم؟ میام یه مپ میزنم
یه مپ میزنم روش و
این کارو انجام میدم پس میام میگم که چی
اینجا
فقط اول باید این تایپ اینو مشخص کنم من این داره ارور میده میگم از جنس
مپ
استرینگ اینجا هم بذارید داینامیک
فاینال بذار هر آیتمی که داخل لیست دیتا. اینز وجود داره بذار هر آیتمی که داخلش
هست خب باید چیکار بکنی؟ باید این آیتم رو
بری اضافه بکنی به
در حقیقت اون گروسریس بم اینجا یه آرایه تعریف میکنم اول همین جا یه آرایی برا
خودم تعریف میکنم فاینال
لیست
گروسر آیتم اسمشو میذارم لودد
آیتمز
آیتم رو اول به این اضافه میکنم. بعد اینو کلاً میدم به این. خب ببینید.
حالا من باید چهجوری این کارو بکنم؟ بذار اول خروجی رم ببینیم همزمان که شما من
دارم این کارو انجام میدم بدونید دارم
چیکار میکنم.
یه کلید دارم بچهها به اضافه یه یه سری
دیتا درسته؟
من میخوام اینو اضافه کنم به اون لیسته
میام میگم که لودد
ا میخوام یه چیزی بهت اضافه کنم
از تایپ چیه از تایپ گروسری آیتمه
مدلمه گروسر آیتم من میگه که تو باید به
من یه آیدی بدی یه نیم بدی یه کوانتیتی
بدی یه کتگوری بدی همه این دیتاها رو باید
به من بدی آیدی میشه چی آیدی میشه همین
این
میشه. کی
میگه خب نیمم چیه میگه نیمم میشه آیتم. ولیو
خب ولیوم کدوم ولیوم؟ این کلش ولیوه بچهها
این کلش ولیوه چی روشو میخوام فقط نیمشو
میخوام پس میشه آیتم. ولیو فقط نیمش
کوانتیتیم چیه دوباره همینه
ولی این دفعه میشه کوانتیتی ایناش
کتگوریم چیه باید بریسم.
کتگوری نه این کتگوری بچهها تایتل
کتگوریه من این تایتله رو باید بردارم برم
داخل دیتا
از اینجا بگردم این تایتله رو که پیدا
کردم کل این کتگوریو برگردونه به من
خب پس اون تایتلو میدم به این میگم برو تو
این بگرد اون تایتلو که پیدا کردی یعنی
اینو که پیدا کردی کل اینو به برگردون
پس اینجا نمینویسم آیتم فلان فلان فلان
اون غلطه
باید برم بگردم داخل اون کتگوریم و در
حقیقت اون کل اون کتگوریو بیارم من همه
چیشو لازم دارم خب چهجوری این کارو بکنم
حالا
برای اینکه بخوام این کارو بکنم قبل از حلقه فور نه ببخشید داخل حلقه فور اینجا
میام میگم که من باید برم دنبال کتگوری
بگردم فاینال
کتگوری
میگم برو تو کتگوریز
خب این چرا خطا میده؟ بهخاطر اینکه ایمپورتش
نکردم.
دقیقاً اون کاری که اینجا کردم باید اینجا انجام میکنم.
داد خب میخوام بره داخلش بگرده ما یه چیزی داریم به نام فرست و اولین چیزی که پیدا
بکنه خب میام میگم که
برو بگرد تو اون توی کتگوری تکتک آیتماش
نگاه کن ببین کدوم کت آیتم
ولیو
تایتلش
برابره با
آیتم.
ولیو چی کتگوری
هر کدوم برابر بود اونو برا من برگردون
چیشو برگردون؟ ولیوشو برگردون مقدارشو
حالا فقط کافیه که این کتگوریو بدم به این
کتگوری تمام
این شد کل کاد من اینو ببندم که کامل ببینید به این صورت
پس اول کتگوریشو پیدا میکنم اینجا بعد
میام اینجا اد میکنم دیتا رو داخل این
لیسته حالا فقط کافیه که این لیستو بدمش
به اون لیست اصلیه
که میخواد تو صفحه نمایش داده بشه.
برای همین فقط یه حرکتی باید بذارم. این
رو فاینالشو برمیدارم چون فاینال نیست
دیگه قراره تغییرش بدم.
میام اینجا این آخر آخر
میگم که
گروسر آیتمز مساوی لودد آیتمز
که بخوام تو صفحه نشون بدم. فقط اینکه این کارو میبرم داخل ست استیت که بخواد صفحه
رو رفرش بکنه
میبرمش داخل ست استیت که صفحهمو رفرش بکنم
دوباره کانتکستم اصطلاحاً بیلد بکنه
ببینیم که کار میکنه فقط من یه لحظه یه چیزی میم به هم ریختش
اومدش همه دیتا اومد پس من یه بار برای اینکه مرور بکنیم
میام از این بالا این چیکار میکرد این زمانی که صفحه برای اولین بار میاد بالا
اجرا میشه درسته میاد لودد آیتمز رو ران
میکنه لودد آیتمز میاد به یه آدرسی
ریکوستی گت میزنه
اطلاعاتو دریافت میکنه دیکود میکنه
میریزه داخل این بعد این یه لیستی از
آیتماست میام روش یه دونه فور میزنم مپ
میزنم میگم که آقا جان هر آیتمی که داخل
این لیسته هست رو اول برو کتگوریشو پیدا
کن بعد بیا با تایپ گروسر آیتم گروسر آیتم
یه مدلی بود که ما تعریف کرده بودیم بیا
اد کن به این آرایه که من خودم اینجا
تعریف کردم در نهایت کل آرایه رو میدم به
گروسر آیتم این گروسر آیتمم که اینجا
داریم چیکار میکردیم روش؟ این پایین یه
جایی داشتیم روش یه مپی میزدیم.
یه جایی ما رو این یه مپی زدیم. کجا بود؟ ایناش اینجا
اگه پیداش کردم. حالا اینجاست مهم نیست. اینجا داریم روش
مپ میزنیم و در حقیقت به ازای تکتک
آیتمهایی که داخلش هست
میایم توی صفحه یه چیزی رو درست میکنیم.
اینم از این بریم بیایم ادامهشو جلسه بعدی
صحبت کنیم. فعلاً خداحافظ. ‏Yeah.
پرسشهای رایج
پاسخ کوتاه و مستقیم به پرسشهایی که معمولاً هنگام یادگیری این موضوع مطرح میشوند.
از اینیش استیت میتوان استفاده کرد تا دادهها در صفحه اول لود شوند.
در این جلسه رفع اشکال در دریافت دیتا از بک اند به طور کامل توضیح داده شده است.
با استفاده از مدل گروسر آیتم و پردازش دیتا به صورت جیسون میتوان لیستی از آیتمها ایجاد کرد.
آخرین بهروزرسانی محتوای متنی:
در این دوره جامع و پروژهمحور با فلاتر و دارت از صفر تا صد آشنا میشوید و با ساخت هشت اپلیکیشن واقعی که هر کدام نکات کلیدی و پرکاربرد فلاتر را پوشش میدهد، مهارتهای خود را به سطح بعدی میبرید. آنچه در این دوره یاد میگیرید: مقدمه و نصب ابزارها: آشنایی با فلاتر، دارت و راهاندازی محیط توسعه مبانی دارت و فلاتر: یادگیری سینتکس دارت و ساخت ویجتهای پایه با اپ «تاسانداز (Roll Dice)» غوطهوری در فلاتر: پیادهسازی اپ «کوئیز (Quiz)» برای مسلط شدن بر ساختار و چرخه حیات ویجتها دیباگ و رفع اشکال: تکنیکهای عیبیابی و ابزارهای Flutter DevTools واکنشگرایی و تمینگ: ساخت «Expense Tracker» برای یادگیری ویجتهای تعاملی، موضوعبندی (Theming) و طراحی ریسپانسیو مدیریت وضعیت (State Management): از Provider تا روشهای داخلی دارت با اپ «TODO» و «Meals» مسیریابی بین صفحات: ناوبری پیشرفته با «Meals App» و انتقال داده بین صفحات انیمیشنها و جلوههای بصری: افزودن حرکات پویا و تراکیب انیمیشنی در «Meals App» فرمها و ورودی کاربر: دریافت و اعتبارسنجی اطلاعات با «Shopping List» ارتباط با سرور: ارسال و دریافت HTTP، کار با JSON و REST API در «Shopping List» دسترسی به امکانات بومی دستگاه: استفاده از دوربین و ذخیرهسازی در «Favorite Places» فراخوانی پوش نوتیفیکیشن و چت زنده: ترکیب فلاتر با Firebase برای ساخت اپ چت با اعلان لحظهای بهروزرسانیها و چشمانداز آینده: نکات پایانی، منابع پیشرفته و مسیر یادگیری ادامهدار چرا این دوره؟ پروژهمحور و گامبهگام، مناسب برای تازهکارها و افراد با تجربه متوسط پوشش تمام جنبههای کلیدی: از طراحی رابط کاربری و انیمیشن تا اتصال به سرور و مدیریت وضعیت پیادهسازی چندین اپلیکیشن واقعی که میتوانید به سادگی برای نمونهکار شخصی یا پروژههای شغلی استفاده کنید لینک گیت هاب دوره جهت دسترسی به کد پروژه های هر فصل https://github.com/pistaacademy/flutter 🔔 همین حالا سابسکرایب کنید تا ویدیوهای آینده را از دست ندهید و یادگیری فلاتر را با هم شروع کنیم!