نوشته های Payam Zahedi

مهارت‌ها و تکنولوژی‌هایی که باید در Flutter یاد بگیرید

Payam Zahedi — Sat, 24 Oct 2020 10:00:11 +0330

تو این مقاله به مهارت ها و نیازمندی های که میتونه تو مسیر Flutter بهتون کمک کنه اشاره میکنیم و برای هر کدوم چندلینک آموزش خوب رو به اشتراک میزاریم. این مقاله میتونه به کسانی که جویای کار در زمینه Flutter هستن کمک کنه که مفاهیم و مواردی که در Flutter مهم هست رو شناسایی کنن و اون هارو یاد بگیرن. همچنین شرکت ها و کسب کارهایی که نیازمند یک توسعه دهنده Flutter هستن میتونن با توجه به این مقاله آگهی بهتری رو ارائه بدن.پ.ن: متاسفانه آگهی هایی که در سایت Jobinja برای توسعه دهنده Flutter ثبت شده کیفیت مناسیبی ندارن و امید وارم این مقاله بتونه به دوستان کارفرما کمک کنه آگهی های با کیفیت تری رو تولید کنند.پ.ن: سعی میشه این مقاله تا حد امکان به روز بمونه بنابراین اگر نظر یا پیشنهادی دارید که باعث بهبود این مقاله میشه و یا لینک و منبع مفیدی دارید اون رو تو کامنت ها و یا به صورت مستقیم با من در میان بگذارید. توانمندی های مقدماتیدر این قسمت به تاپیک هایی اشاره میکنیم که یک توسعه دهنده Flutter میبایست اون ها رو به خوبی بلد باشه و این توانمندی ها خیلی به شما کمک میکنه که بتونید در یک شرکت استخدام بشید و معمولا این توانمندی ها به عنوان پیشنیاز و یا مهارت های مورد نیاز در یک آگهی مطرح میشن.آشنایی با زبان Dartوقتی داریم با Flutter کار میکنیم مهم ترین چیز اینه که زبان دارت که زبان توسعه اون هست رو خوب بشناسیم و تغییراتش رو دنبال کنیم. خوشبختانه از اونجایی که روند استفاده Flutter خیلی خوب بوده تیم Dart هم داره خیلی خوب زبان رو نسبت به نیاز های جدید آپدیت میکنه .زبان Dart خیلی به زبان های خانواده C و Java شبیه و یادگیریش برای کسانی که این طیف زبان هارو بلدن خیلی راحته.پ.ن: پیشنهاد میشه حتما درموردقابلیت Extension Method در دارت مطالعه کنید.A tour of the Dart languageEffective DartDart Extension MethodsA simplified introduction to Dart and Flutterشناخت ویجت های StateLess و StateFullاین دو نوع Widget در Flutter جزء اولین مفاهیمی هستند که تو آموزش ها و به اون ها میپردازن و خیلی مهمه که نحوه کار کردنشون رو درک کنیم.Flutter in focus Widget seriesMedium: Stateful vs Stateless Widgetflutterclutter: StatelessWidget vs. StatefulWidgetLifecycle of Widgets.آشنایی Widget های پیشفرض Flutterفلاتر برخلاف اندروید تعداد خیلی زیاد تری از کامپوننت ها و یا Widget هارو به صورت پیشفرض ارائه کرده. شناخت این ویجت ها میتونه خیلی به طراحی و ساخت UI های مختلف کمک کنه. خوشبختانه تیم Flutter یه مجموعه ای رو با نام Widget of the Week معرفی کرده که توی اون هر هفته (تغریبا) یک Widget رو معرفی میکنه. Widget Of the WeekFlutter Widget LivebookMedium : Flutter Widgetمفهوم طراحی Declarative در Flutterطبق گفته دایکیومنت های Flutter :Flutter is declarative. This means that Flutter builds its user interface to reflect the current state of your app فلاتر طراحی UI رو به صورت Declarative پیاده سازی کرده و ما هم برای طراحی نیاز داریم که این مفهوم رو درک کنیم و فرقش رو با طراحی imperative بدونیم. لینک های زیر به بهتر درک کردن این مفهوم کمک میکنن.Introduction to declarative UIStart thinking declarativelyMedium: Intro to Declarative UI with FlutterDeclarative UI Patterns (Google I/O)مفهوم State Management تو فریم ورک های Declarative که طراحی با استفاده از State ها پیاده سازی میشن State Management ها به ما کمک میکنن که State های مختلف رو مدیریت کنیم و بتونیم با کاربر ارتباط برقرار کنیم. مدیریت State پیشفرض Flutter با استفاده از متد SetState است که داخل کلاس StatefulWidget تعبیه شده. اما زمانی که Scale پروژه ها بزرگ میشه کار کردن با SetState خیلی سخت میشه برای همین الگو ها و کتابخونه های فراوانی برای راحت تر شدن مدیریت State توسعه داده شدن که ما تو این مقاله به دوتا از معروف ترین های اون ها اشاره میکنیم. لینک های زیر صرفا برای درک State Managment و نحوه کار با SetState قرار داده شده اند.Flutter State-ManagementIntroduction to State Management in Flutterزبان طراحی Material Designزبان طراحی Material Design توسط گوگل توسعه داده شده و به عنوان زبان طراحی اصلی اندروید هم معرفی میشه. باز هم خوشبختانه تیم Flutter مجموعه ای از Widget ها رو توسعه دادن که مطابق Material Design هستند. میتونید این Widget هارو از طریق import کردن فایل material.dart مورد استفاده قرار بدید. علاوه بر این تیم Flutter مجموعه ای از Widget هایی که مربوط میشه به زبان طراحی Cupertino (که زبان طراحی پیشفرض IOS هستش) هم توسعه دادن. Using Material Design with FlutterMaterial Components widgetsMaterial.ioکار با Theme هاوقتی از Theme ها استفاده میکنیم درواقع داریم قابلیت های مقیاس پذیری،نگهداری و خوانایی پروژمون رو بالا میبریم. کار کردن با Api های Theme تو Flutter خیلی آسونه و به راحتی میتونید از اون ها تو پروژتون استفاده کنید. به عنوان مثال فرض کنید که تو یک پروژه تمام طرح هارو پیاده کردید و بعد از طراحی ها کارفرما بهتون میگه که من با رنگ اصلی پروژه مشکل دارم رنگ اصلی رو تغییر بده. اگه از Theme ها استفاده کرده باشید خیلی راحت با تغییر چندتا خط رنگ رو عوض کنید. اما اگه به صورت Inline به طرحاتون رنگ داده باشید این تغییر بسیار دشوار خواهد بود.Use themes to share colors and font stylesFlutter Interact: Material Theming with Flutter Medium: Flutter ThemesThemes in Flutterنحوه Navigation و Routing(مسیریابی) در Flutter درواقع Navigation در Flutter راه کاریه برای پیمایش بین صفحات. و ما با استفاده از ویجت Navigator میتونیم صفحه جدیدی رو باز کنیم، به عقب برگردیم و ... Flutter NavigationMedium: Push, Pop, PushClean Navigation in Flutter Using Generated RoutesFlutter in action: Flutter routing in depthاتصال به سرور (Restfull)در اکثر پروژه ها کار با سرور جزء خواسته های اصلی پروژه‌هاست. تو Flutter دو تا پکیج مشهور برای این کار وجود داره. پکیج http که توسط تیم Dart توسعه داده شدن و به عنوان پکیج پیشفرض Flutter شناخته میشه. و پکیج Dio که یه کتاب خونه خیلی خوب برای اینکار محصوب میشه. قابلیت های Dio نسبت به http بیشتر هستن و معمولا کار رو برای ما راحت تر میکنن.http package:Fetch data from the internetJSON and serializationdio package:Handling Network Calls and Exceptions in FlutterMedium: dio in flutterUpload Image to Server using DioDio Interceptors in Flutterپکیج های Bloc و Provider از مهمترین پکیج های State Management در Flutter میتونیم به Bloc و Provider اشاره کنیم. این دوتا پکیج خیلی محبوب هستند و تو پروژه های مختلف نصبت به Scale پروژه یکدوم از اون هارو انتخاب میکنیم. پکیج Provider پکیج Provider با استفاده از قابلیت های Context و InheritedWidget به ما کمک میکنه بتونیم State های برناممون رو مدیریت کنیم. کار کردن با Provider خیلی سادست و معمولا از اون در پروژه هایی استفاده میشه که Scale پروژه زیاد نیست. خیلی محبوبه و منابع زیادی براش وجود داره.Simple app state managementPragmatic State Management in Flutter (Google I/O 19)Making sense of all those Flutter ProvidersCodeWithAndrea - flutter ProviderState Management With Providerپکیج Blocبا استفاده از پکیج Bloc که در واقع برای پیاده سازی راحت تر Bloc Pattern تولید شده، خیلی راحت میتونیم Business Logic رو از سایر کد جدا کنیم. این پکیج از Stream ها برای پترن خودش استفاده میکنه. و همونطور که میدونید وقتی داریم از Stream ها استفاده میکنیم میتونیم بریم به سراغ Reactive Programing و از پکیج RxDart استفاده کنیم. Bloc برای پروژه های با Scale متوسط و بزرگ خیلی خوبه و میتونه تو توسعه خیلی مفید باشه. Flutter Bloc Library DocumentArchitect your Flutter project using BLOC patternBLoC, Reactive Programming, Streams - Practical use casesUnderstanding Flutter Bloc PatternGetting Started with the BLoC PatternFlutter Bloc &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; Cubit Tutorialفریم ورک Animation در Flutterیکی از نقاط قوت و قابلیت های خفن Flutter، انیمیشن ها هستن. پیاده سازی Animation های خیلی سخت توی Flutter خیلی آسونه. Flutter شامل دو نوع Animation میشه. implicit animations و explicit animations که برای هر دوشون کلی کلاس از پیش تعریف شده وجود داره. پیشنهاد میکنم برای درک کامل انیمیشن ها در Flutter حتما سری Flutter in focus مربوط به انیمیشن هارو ببینید.Introduction to animationsHow to choose which Flutter Animation Widget is right for you?Flutter in focusFlutter animations: The basicsAnimations in Flutter - Easy Guideذخیره سازی (Persistence) معمولا ذخیره سازی در فلاتر به سه بخش تقسیم میشه: ذخیره سازی در دیتابیس (Database)ذخیره سازی در فایل(File)ذخیره سازی در ساختار Key : Valueهرکدوم از این موارد بسته به شرایط و نیاز تو پروژه ها استفاده میشن. ولی تسلط کامل به هر سه مورد میتونه یه مزیت محصوب بشه.Flutter PersistenceData Persistence on FlutterStep by step to persist data in FlutterChoosing the right database for your Flutter appپ.ن: تو این بخش نمیخوایم در مورد دیتابیس های فلاتر صحبت کنیم و معمولا همین که کسی بتونه با دیتابیس پیشفرض فلاتر (Sqflite) کار کنه میتونه کافی باشه. اما اگه با انواع دیتابیس ها و پکیج ها آشنا باشید مزیت خیلی خوبیه به عنوان مثال پیشنهاد میکنم در مورد Hive هم کمی مطالعه کنید. بومی سازی (Localization)از اون جایی که اکثر اپلیکشن های ما به زبان فارسی نوشته میشن نیازمند بومی سازی نیز هستند. خود فریمورک فلاتر برای این فرایند یکسری ابزار توسعه داده. وقتی یک اپ رو با استفاده از ابزار Localization توسعه میدیم احتمالا برای کاربر اون منطقه جذاب تر میشه. مثلا وقتی ما زبان برناممون رو فارسی انتخاب میکنیم همه نوشته های دیفالت فلاتر به فارسی در میان و جهت صفحه از LTR به RTL تبدیل میشه. این میتونه به تجربه کاربری کمک کنه.Internationalizing Flutter appsInternationalizing and Localizing Your Flutter AppFlutter: internationalization tutorialsتا اینجا راجع به مهارت های اولیه که یک توسعه دهنده فلاتر نیاز داره تا بتونه کارهای خودش رو پیش ببره و یا بتونه برای یک موقعیت شغلی اقدام کنه، صحبت کردیم. در ادامه مقاله میریم سراغ مهارت های عمیق تری که دونستن اون ها باعث میشه شما درک عمیق تری نسبت به فلاتر داشته باشید و نیازمندی های بیشتری رو حل کنید.توانمندی های پیشرفتهتو این بخش به موضوعات و مفاهیمی اشاره میکنیم که نیاز به نگاه عمیق تر داره. این مفاهیم میتونه به ما در توسعه اپلیکیشن ها بزرگتر و کاراتر کمک کنه.طراحی واکنش گرا (Responsive UI design)از اونجایی که فلاتر داره به سمتی میره که بتونه برای پلتفرم های دیگه مثل Web و سیستم عامل های Desktop هم خروجی بده خیلی، طراحی واکنش گرا جزو نیازمندی هایی حساب میشه که خیلی میتونن به پروژه های مولتی پلتفرم کمک کنن.Creating responsive appsThe Best Flutter Responsive UI PatternFlutter web — getting started with responsive designکد نویسی غیر همزمان در دارت (asynchronous coding in Dart)از مفاهیم مهم هر زبان دارت کدنویسی غیر همزمانه. از قابلیت های مهمی که زبان Dart تو این زمینه داره میشه به Futures, Streams, background tasks, isolates, event loops, Async/Await و ... اشاره کرد. و باز هم خوشبختنانه تیم Flutter یه سری ویدیو دیگه درمورد همین موضوع تولید کرده که خیلی راحت میشه این مفاهیم نصبتا سخت رو توش درک کرد. پیشنهاد میکنم حتما این سری ویدیو هارو ببینید.&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br/&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;Flutter in focus: asynchronous coding in dartAsynchronous programming: futures, async, awaitDart asynchronous programming: Isolates and event loopsDart asynchronous programming: Futuresکلاس های Widgets, RenderObjects, Elements در Flutterوقتی در مورد این سه تا کلاس صحبت میکنیم در واقع داریم در حوزه Render کردن Widget ها توسط Flutter صحبت میکنیم. این که بدونیم فلاتر زیر کاپوت (Under the hood) داره چطور ویجت هارو میسازه و نمایش میده و یا اونهارو اپدیت و یا جایگزین میکنه خیلی میتونه به ما کمک کنه که برنامه بهینه تری بنویسیم. How Flutter renders WidgetsFlutter Europe : Flutter, what are Widgets, RenderObjects and Elements? Medium: How Flutter Renders Widgets?Flutter Rendering: Under the Hoodتست نویسی در Flutterتست نویسی جزء مهم ترین وظایف یک توسعه دهنده است. مخصوصا تو پروژه های بزرگ این فرایند خیلی جاها باعث جلوگیری از هدر رفتن زمان میشه. اگه تست خوبی نوشته باشیم و تو پروژه تغییری انجام میدیم میتونیم ببینیم که این تغییر رو چه قسمت های دیگه ای تاثیر داشته. تو فلاتر تست ها به سه دسته تقسیم میشن: Unit Test, Widget Test , Integration Test .پ.ن: متاسفانه خیلی از کارفرما ها حاضر نیستن هزینه تست نویسی رو قبول کنن و به همین دلیل معمولا خیلی از پروژه ها تستی براشون نوشته نشده. Testing Flutter appsThe Boring Show: Testing Flutter Apps CodeLab: How to test a Flutter appUnit Testing With Flutter: Getting StartedWidget Testing With Flutter: Getting Startedکار با Flutter Webقابلیت خروجی گرفتن پروژه روی Web چند وقتی میشه که توسط Flutter معرفی شده. این قابلیت خیلی میتونه توی خیلی از پروژه ها مفید باشه. اما نکته ای که وجود داره این که این قابلیت هنوز با چنل Stable مرج نشده و اگر کسی میخواد از اون استفاده کنه باید از چنل Beta استفاده کنه (در حال حاظر آخرین ورژن ارائه شده توسط فلاتر نسخه 1.22.1 هستش). خب همین که یه قابلیت توی فریم ورک Stable نشده، میتونه نشون دهنده این باشه که کار کردن باهاش میتونه ریسک بالایی داشته باشه. علاوه بر اون خیلی از پلاگین ها و پکیج هایی که در حال حاضر برای پلتفرم های موبایل قابل استفاده هستن هنوز برای نسخه Web در دسترس نیستن. Flutter Interact 19 : Designing for the Web with FlutterBuilding a web application with FlutterWrite your first Flutter app on the webIns and Outs of Flutter WebGoing deeper with Flutter’s web supportتوسعه Package و Plugin در فلاتراگر نیاز دارید که کدهاتون به صورت یک کتابخونه در بیارید و اون ها رو با دیگران به اشتراک بگذارید میتونید از Package و یا Plugin استفاده کنید. Package درواقع مجموعه ای از کدهای دارت هست که نیازمندی به کد های پلتفرم نداره. در عوض Plugin معمولا از کد های پلتفرم ها تشکیل شده. Developing packages and pluginsCode Lab: How to write a Flutter pluginModern Flutter Plugin DevelopmentHow to Create, Publish and Manage Flutter Packagesکار با ویجت CustomPainterاگه با اندروید کار کرده باشید CustomPainter خیلی شبیه به CustomView هست. از این widget زمانی استفاده میشه که میخوایم یک Widget رو خودمون طراحی کنیم. شما با استفاده از canvas و paint تقریبا میتونید هر چیزی رو طراحی کنید و بکشید. Flutter Widget of the Week: CustomPaint Flutter In Focus: Custom painting in Flutter How to draw and animate designs with Flutter CustomPaint WidgetDrawing Custom Shapes With CustomPainter in Flutterتوسعه کد مخصوص پلتفرم (Platform-specific code)این ویژگی فلاتر زمانی استفاده میشه که ما نیاز داریم که به هر نحوی کدی که مربوط به پلتفرم هستش رو اجرا کنید. مثلا فرض کنین که میخوایم میزان روشنایی صفحرو در قالب درصد به دست بیاریم و همچنین چون هنوز پلاگینی برای این مثال درست نشده ما باید خودمون این مقادیر رو از پلتفرم ها دریافت کنیم. در این موقعیت باید هم برای Android و هم برای IOS کد نیتیو بزنیم و مقادیر رو از Api های پلتفرم ها دریافت کنیم و در کد Dart استفاده کنیم. Writing custom platform-specific codeHow to access native(Android/IOS) code in the flutter using MethodChannel.How to develop a platform channel in Flutter between Dart and Native Codeکار با DevToolsابزار DevTools مجموعه ای از ابزارهای عملکردی (Performance) و رفع اشکال (Debugging) برای دارت و فلاتر است. DevTools در حال حاضر در نسخه بتا ارائه شده، اما روند توسعه آن بسیار فعال میباشد. DevTools خیلی میتونه تو اشکال زدایی برنامه کمک کنه و اگر کسی نیاز داره که برنامش رو بهینه ترکنه DevTools خیلی میتونه موسر باشه. از کار هایی که DevTools میتونه انجام بده میشه به موارد زیر اشاره کرد:Inspect the UI layout and state of a Flutter app.Diagnose UI jank performance issues in a Flutter app.CPU profiling for a Flutter or Dart app.Network profiling for a Flutter app.Source-level debugging of a Flutter or Dart app.Debug memory issues in a Flutter or Dart command-line app.Analyze code and app size.برای آشنایی بیشتر با DevTools میتونید به از لینک های زیر استفاده کنید.DevTools OverviewFlutter Day: Dart DevToolsMedium: Dart DevToolsافزایش کارایی (Performance)یکی از فاکتور های مهم برای یک اپلیکیشن کاریی و یا Performance اونه. اپلیکیشنی که Performance خوبی نداشته باشه میتونه روی تجربه کاربری هم تاثیر بگذاره. خوشبختانه تیم فلاتر برای این موضوع هم دایکیومنت ها و محتوا های خوبی ارائه داده. Flutter performance profilingFlutter Europe: Optimizing your Flutter AppPerformance best practicesFlutter in Focus: Flutter performance tips لینک های بیشترلینک هایی که در زیر به اشتراک میزاریم مجموعه ای از منابع و سایت هایی هستن که خودشون آموزش های فلاتر تولید میکنن و یا مجموعه ای از آموزش ها رو درون خودشون قرار دادن. اگر این منابع رو به صورت پیوسته دنبال کنید میتونید آموزش های خوبی رو ببینید.کانال Youtube مربوط به Flutter.دوره کامل آموزش Flutter که توسط همکاری Google و Udacity تولید شده.سایت FilledStack یه سایت برای آموزش توسعه موبایله که آموزش های خیلی مفیدی داره.سایت raywenderlich یکی از سایت های عالیه هست که توزمینه Android, iOS و Flutter منابع فوق العاده ای داره. خیلی از لینک های این مقاله از این سایت گرفته شده.سایت codewithandrea هم یکی دیگه از سایت های خوبه که تو زمینه توسعه Flutter کار میکنه.سایت Codelabs گوگل که دیگه نیاز به معرفی نداره. این سایت شامل مجموعه از آموزش های خیلی خفنه گام به گام که میتونید به صورت رایگان ازشون استفاده کنید.کانال MTECHVIRAL که توسط دوست هندیمون Pawan Kumar درست شده.سایت Flutter Widget Livebook مجموعه از Widget ها که به صورت Live در اختیار ما میزاره.مجموعه از کد ها خیلی خوب که تو Codelab قرار داده شده و میتونید باهاشون بازی کنید و تغییرشون بدید.و انتشارات Flutter Community در سایت Medium که واقعا میتونید مقاله های فوق العاده ای توش پیدا کنید.خوب امیدوارم این مقاله براتون مفید بوده باشه، لطفا اگر انتقاد یا پیشنهادی دارید که میتونه به بهتر شدن مقاله کمک کنه حتما اون هارو تو کامنت ها و یا به صورت مستقیم با من در میان بگذارید. دیگر مقالات من در ویرگول: https://virgool.io/@payam-zahedi/git-pull-vs-fetch-teskevifk9hn https://virgool.io/flutter-community/flutter-learning-abstract-zcj0phhevl5v

تفاوت Git Pull با Git Fetch

Payam Zahedi — Mon, 11 May 2020 17:52:43 +0430

مقدمهخب شاید تفاوت این دو دستور چیز خیلی کوچیکی تو گیت باشه. اما بعد شناخت این دو دستور متوجه میشید که درک عمیق تری از Git پیدا کردید و با Git بیشتر آشنا شدید. تو این مقاله اول یه نگاه کلی به نحوه کار کردن گیت میندازیم و بعد تفاوت این دو دستور رو باهم میبینیم.نحوه کار کردن گیتخب قبل از بررسی تفاوت این دو دستور بزارید ببینیم git چطور کار میکنه. گیت در حالت کلی روی سه نسخه از پروژه شما کار میکنه (شاید بشه گفت Copy). خوب این سه تا نسخه چی هستن.staging arealocal repositoryremote repositoryحالا باید ببینیم این نسخه‌ها چی هستند. ولی قبل اون یه نکته رو فراموش نکنید؛ این نسخه‌ها همشون مربوط میشن به کامپیوتر شما و هیچ ربطی به هیچ جای دیگه‌ای ندارن. در ادامه توضیح میدم که این‌ها کجا ذخیره میشن.1. نسخه staging areaشاید کلمه staging رو تو git status دیده باشید. وقتی میگیم یه فایل رفته تو محدوده staging (یا همون Staging area) به این معنیه که گیت روی اون فایل نظارت داره و تغییراتش رو بررسی میکنه. وقتی شما یه فایل رو git add میکنی اون فایل میره به staging area و بعد اون هست که وقتی git status میزنید به شما نشون میده که این فایلی دارید الان تغییر کرده یا هر چیز دیگه‌ای. اما بعد از این که یه تغییری رو commit میکنیم چه اتفاقی میوفته؟ خب این رو تو مرحله بعد بررسی میکنیم.2. نسخه local repositoryبعد از مرحله staging وقتی یه سری تغییرات رو commit میکنیم، گیت میاد و این تغییرات رو توی جایی به نام local repository ذخیره میکنه. اینجا دقیقا همون جاییه که branchها و commitهای شما ذخیره میشن. و احتمالا وقتی شما روی فایلی تغییرات ایجاد میکنی git گیت میاد و تغییرات این فایل رو با آخرین کامیت مقایسه میکنه و میبینه تو این خط‌ها تغییرات ایجاد شده. (قطعا داستان یکم پیچیده‌تر از این حرفاست) 3. نسخه remote repositoryخب این نسخه یا copy از پروژه شما اطلاعات مربوط به repository که اون رو به صورت remote به git معرفی کردید رو تو خودش ذخیره میکنه. بزارید با یه مثال توضیح بدم. فرض کنید یه پروژه ماشین حساب دارید و میخواید اون رو به صورت open source بزارید تو GitHub. واسه این کار اول پروژتون رو تو ماشین خودتون درست میکنید، و بعد اون میرید تو GitHub و یه repository می‌سازید. بعد با استفاده از دستور زیر پروژتون رو به GitHub متصل می‌کنید.git remote add origin https://github.com/repisitory-urlخب اینجا چه اتفاقی میوفته؟ اتفاقی که میوفته اینه که git میاد و copy از پروژه درست میکنه اون رو با پروژه‌ای که تو GitHub درست کردید مرتبط میکنه. منظور از مرتبط کردن اینه که اطلاعات این copy از طریق commit کردن تغییر نمیکنه.عکس زیر به خوبی نحوه کار گیت رو ترسیم کرده.شمای کلی از نحوه کار کردن gitگیت خیلی شبیه به عکس بالا کار میکنه اما خوب زمانی که pull یا fetch انجام میدیم چه اتفاقی میفته؟ با دیدی که الان نسبت به گیت پیدا کردیم الان خیلی راحت می‌تونیم این قضیه رو درک کنیم.دستور Git Fetch وقتی دستور Git fetch رو اجرا می‌کنیم اتفاقی که میفته اینه که git میره و اطلاعات رو از روی remote (که میتونه یه repository تو GitLab یا GitHub باشه) میگیره و اون اطلاعات رو نسخه remote repository ذخیره میکنه. نکتش اینه که نسخه staging area و نسخه local repository هیچ تغییری نمیکنن. یعنی بعد fetch کردن، کدتون هیج تغییری نمیکنه. خب اگه بخوایم تغییرات رو دریافت کنیم چیکار باید بکنیم؟ بزارین جواب این سوال رو تو مرحله بعد بدیم.دستور Git Pullخب pull هم دقیقا مثل fetch میره و اطلاعات رو از روی remote میگیره و اون اطلاعات رو نسخه remote repository ذخیره میکنه، بعد از اون میاد اطلاعات نسخه remote repository رو با نسخه local repository مرج میکنه. واسه همینه که شما بلافاصله بعد از pull کردن تغییرات رو تو کدتون دریافت میکنید. عکس زیر میتونه خیلی خوب تفاوت این دو دستور رو نشون بده.نحوه کار کردن pull و fetchهمونطور که تو عکس هم میبینید git pull همون git fetch هست که بعد از عملیات fetch محتویات remote branch رو با local branch مرج میکنه. در واقع انگار دستور:git pull origin masterمساویه با:git fetch git merge origin/masterکدوم گزینه رو انتخاب کنیم؟خب وقتی دارید تو یه پروژه کار می‌کنید نسبت به نیازتون از این دو دستور استفاده می‌کنید اما من به شخصه زمانی که رو یه برنچ هستم مثلا master و میخوام اطلاعات اون برنچ رو اپدیت کنم از پول استفاده می‌کنم. و زمانی که از اطلاعاتی که قراره مرج بشه اطمینان ندارم اول اون رو fetch می‌کنم و بعد اون رو مرج می‌کنم. یک سناریو دیگه هست که بزارید با یه مثال توضیحش بدم.مثلا فرض کنید که دارید رو برنچ master یه پروژه کار می‌کنید و دوستتون بهتون میگه که من یک سری باگ‌ رو روی برنچ bug پوش کردم لطفا اینارو بررسی کن و بعد با برنچ master مرجش کن. نکته داستان اینجاست که اگه شما تو برنچ master باشی و دستور زیر رو بزنی:git pull origin bugگیت میره و اطلاعات برنچ bug رو میگیره با برنچ که داریم روش کار می‌کنیم مرج میکنه. خب این چیزی نبود که ما می‌خواستیم، ما می‌خواستیم اطلاعات رو بررسی کنیم اگر همه چیز اوکی بود بعد با master مرجش کنیم. خب اینجا هم می‌تونیم از fetch استفاده کنیم کافیه که دستور زیر رو وارد کنیم:git fetchو بعدش:git checkout bug و بعد این که کدهارو بررسی کردیم بریم و برنچ master رو با bug مرج کنیم.نتیجه‌گیریتو این مقاله برای این که بتونیم دوتا دستور fetch و pull رو عمیقا متوجه بشیم تا یه حدودی ساختار git رو بررسی کردیم و بعد این دو دستور رو مورد بررسی قرار دادیم. fetch فقط اطلاعات رو از سمت remote دریافت میکنه درصورتی که pull این اطلاعات رو با برنچ local مرج میکنه. امیدوارم این مقاله براتون مفید بوده باشه. اگر دوست دارید می‌تونید این مقاله رو لایک کنید و لطفا برای بهبود این مقاله نظراتتون رو با من به اشتراک بگذارید.شما می‌تونید با استفاده از لینک زیر من رو در گیت‌هاب پیدا کنید:https://github.com/payam-zahediو صفحه من در لینکدین:https://www.linkedin.com/in/payam-zahedi/ https://virgool.io/flutter-community/flutter-learning-abstract-zcj0phhevl5v منابع1. Git - git-pull Documentation2. Git - git-fetch Documentation3. version control - Stack Overflow4. Git Fetch vs Pull - freecodecamp5. Git tower

آموزش فلاتر ( Flutter ) - ارتباط با سرور Dio

Payam Zahedi — Sun, 24 Nov 2019 18:39:52 +0330

https://files.virgool.io/upload/users/35634/posts/oljoppi6tbvw/zwpemtw9rrtj.png چند وقتی میشه با فلاتر آشنا شدم. نسبت به تجربه‌ای که تو اندروید داشتم طراحی UI تو فلاتر خیلی آسون‌تره واسه همین تصمیم گرفتم یه پروژه با فلاتر درست کنم و تصمیم دارم پروژمو این جا با شما به اشتراک بزارم. تو این مجموعه از پست‌ها چند تا از مهم‌ترین موضوعات فلاتر رو باهم بررسی می‌کنیم و در نهایت یک پروژه کامل رو به پایان می‌رسونیم. این پست چهارمین پست از این سری هستش و در اون به ارتباط با سرور با استفاده کتابخونه Dio می‌پردازیم. برای دیدن قسمت قبل می‌تونید به این لینک مراجعه کنید.مطالبی که تو این مجموعه یاد می‌گیریم به چند قسمت تقسیم میشن:مقدمه.طراحی UI اولیه اپلیکیشن.ساخت مدل‌ها و کدهای مربوط به تبدیل اون به Json (از کتابخونه معروف json_serializable استفاده می‌کنیم).ارتباط با سرور (از کتابخونه Dio تو این قسمت استفاده شده).استفاده از کتابخونه cached_network_image برای گرفتن عکس از اینترنت و کش کردن اون.استفاده از انیمیشن در فلاتر.ساخت launcher icon دلخواه برای android و ios در فلاتر.ساخت سرور فیکخوب قبل از این که یه راست بریم سراغ کتابخونه Dio باید یه سرور داشته باشیم که بتونیم داده‌هارو از روی اون بخونیم. تو این اپ ما از سرور فیک JSONPlaceholder استفاده کردیم. این سایت به ما این امکان رو میده که از API ها از پیش آماده شدش استفاده کنیم، علاوه بر اون با استفاده از یک فایل Json این امکان رو به ما میده که سرور API فیک خودمون رو هم بسازیم. از طریق این لینک می‌تونید به قسمتی برید که آموزش میده سرور فیک خودتون رو بسازید. در این پروژه هم از این فایل json به عنوان منبع سرور فیک استفاده شده. بیشتر از این توضیحی نمیدیم و میریم سر اصل مطلب. اگر خواستید می‌تونید دایکیومنت‌های سایت رو بررسی کنید و سرورفیک خودتون رو بسازید.کتابخانه Dioکتابخانه Dio قابلیت‌های زیادی از جمله پشتیبانی از Interceptor ها، تنظیمات(پیکربندی) سراسری، کنسل کردن درخواست‌ها، دانلود فایل‌ها و ... داره. توضیحات خود کتابخونه Dio:A powerful Http client for Dart, which supports Interceptors, Global configuration, FormData, Request Cancellation, File downloading, Timeout etc.واسه استفاده از این کتابخونه اول باید اون رو به پروژه اضافه کنید. پس کد زیر رو به فایل pubspec.yaml اضافه کنید.dependencies: dio: 3.x.x #latest versionدستور flutter pub get رو اجرا کنید و دیگه همه چیز آمادس.متدهای GET , POST , PUT , DELETEمتد GETکد زیر یک نمونه ساده از دریافت داده با استفاده از متد GET هستش.import 'package:dio/dio.dart'; void getHttp() async { try { Dio dio= Dio(); Response response = await dio.get("http://www.google.com"); print(response); } catch (e) { print(e) } }در کد بالا یه در خواست با متد GET ارسال شده که نمونه Dio درخواست رو ارسال میکنه و منتظر میمونه تا جوابو دریافت کنه و بعد جواب رو تو کنسول چاپ میکنه. و همچنین سایت google در اولین پارمتر به عنوان url برای متد فرستاده میشه.متد POSTاز متد POST زمانی استفاده می‌کنیم که به عنوان مثال بخوایم چیزی رو برای سرور ارسال کنیم. import 'package:dio/dio.dart'; void postHttp() async { try { Dio dio= Dio(); Response response = dio.post("url.com", data: {"id": 12, "name": "wendu"}); print(response); } catch (e) { print(e) } }تو این متد از روش پست استفاده کردیم و علاوه بر آدرس پارامتر data رو هم برای Dio ارسال کردیم. این پارامتر همون داده‌هایی هست که تو متدها POST و PUT برای API خودمون ارسال می‌کنیم. اگه از نرم‌افزار postman برای تست استفاده کرده باشین میتونین این پارامتر‌هارو تو تب body اضافه کنید.متد PUTمتد PUT معمولا زمانی استفاده میشه که می‌خواید مقادیری رو اپدیت کنید. import 'package:dio/dio.dart'; void putHttp() async { try { Dio dio= Dio(); Response response = dio.put("url.com", data: {"id": 12, "name": "wendu"}); print(response); } catch (e) { print(e) } }این متد هم دقیقا مثل متد POST نوشته میشه.متد DELETEزمانی استفاده میشه که بخوایم یه مقدار رو حذف کنیم.import 'package:dio/dio.dart'; void deleteHttp() async { try { Dio dio= Dio(); Response response = dio.delete("url.com/2"); print(response); } catch (e) { print(e) } }تو این مثال درواقع داریم آیتمی با id دو رو حذف می‌کنیم. خوب تا اینجا که به نظرم کار خیلی ساده بود.رسیدگی به Error هاارور ها و اکسپشن ها مربوط به Dio با استفاده از کلاس DioError مورد بررسی قرار میگره. این به این معنیه که وقتی اررور یا اکسپشنی اتفاق میوفته در عبارت try-catch، یه ابجکت DioError پرتاپ میشه و ما با استفاده از catch اون رو مورد بررسی قرار میدیم. به تیکه کد زیر توجه کنید.try { //404 await dio.get("https://wendux.github.io/xsddddd"); } on DioError catch(e) { if(e.response) { print(e.response.data) print(e.response.headers) print(e.response.request) } else{ print(e.request) print(e.message) } }در کد بالا ما ابجک DioError رو گرفتیم و داده ها داخلش رو پرینت کردیم شما هم میتونید این کار رو انجام بدید. اما یه نکته مهم درمورد اررور ها وجود داره. اررور ها به دو دسته تقسیم میشن:ارور های سیستمیارور های response(پاسخ)از ارورای سیستمی میشه به خاموش بود کانکشن های اینترنت (مثل WiFi و دیتا) یا قطع بودن اینترنت اشاره کرد و ....و از اررور های پاسخ میشه به اررور 404 اشارده کرد( در واقع Dio هر ریسپانسی که status کدش بین 200 تا 300 نباشه رو به صورت یک اررور برمیگردونه- البته این اپشین قابل تنظیمه).کلاس Request Optionاین کلاس زمانی استفاده میشه که میخواید با استفاده از Dio یه درخواستی رو ارسال کنید. کار با این کلاس خیلی مهمه و با استفاده ازش میتونید درخواست هاتون رو شخصی سازی کنید. این کلاس از متغیر هایی زیر تشکیل شدهRequest Option { /// Http method. String method; /// Request base url, it can contain sub path, like: "https://www.google.com/api/". String baseUrl; /// Http request headers. Map headers; /// Timeout in milliseconds for opening url. int connectTimeout; /// Whenever more than [receiveTimeout] (in milliseconds) passes between two events from response stream, [Dio] will throw the [DioError] with [DioErrorType.RECEIVE_TIMEOUT]. int receiveTimeout; /// Request data, can be any type. T data; /// path will be added to base url String path="" /// request content type String contentType; /// request Response type ResponseType responseType; /// `validateStatus` defines whether the request is successful ValidateStatus validateStatus; Map extra; /// Common query parameters Map*/ > queryParameters; }توضیحات مختصری درمورد هرکدوم از مقادیر بالا:متغیر Method: به عنوان نوع نوع درخواست http میشه ازش استفاده کرد. (Post, Put, Delete,Get)متغیر BaseUrl: به عنوان آدرس اصلی استفاده میشه. مثلا اگه دامنه Api هاتون مشخصه میشه این متغیر رو ثابت تعریف کنید.متغیر Headers: که با استفاده از یه Map میتونید هدر های درخواستتون رو مشخص کنید.متغیر connectTimeout و receiveTimeout: اولی برای تا زمان اتمام برقراری ارتباط و دومی برای زمان ارتباط دریافت جواب هستش.و مواردی که کاملا مشخص هستند و خودتون میتونید مطالعه کنید و از بحث این آموزش خارجه.با استفاده از این کلاس میتونید درخواست هاتون رو شخصی سازی کنید. همچنین میتونید یه ابجکت ثابت برای همه ی درخواست هاتون استفاده کنید. برای اینکار میتونید یه requestOption درست کنید و به وقتی دارین ابجکت Dio رو میسازید به این ابجکت پاسش کنید. به کد زیر نگاه کنید.استفاده از Dio در این پروژهما در این پروژه از Dio استفاده کردیم، و یه کلاس به اسم سرویس درست کردیم تا کارهای مربوط به ارتباط با سرور مون رو اونجا پیاده سازی کنیم. میتونید به آدرس زیر برید و با توجه به چیز هایی که یاد گرفتید کد مربوط به پیاده سازی Api رو مطاله کنید. https://github.com/payam-zahedi/featured-food-sample/blob/master/lib/api/service.dart لینک کلاستو کلاس بالا مهم ترین بخش، متد دریافت اطلاعات مربوط به غذاهاست. اگر به کد زیر نگاه کنید متوجه میشید که با استفاده از متد GET، یه درخواست به فایل /db ارسال کردیم و بعد از پارس کردن json یه لیستی از غذا هارو برمیگردونیم.static Future fetchData() async { try { Response response = await getInstance().get("/db"); if (response.statusCode == 200) { // If server returns an OK response, parse the JSON. var jsonString = json.encode(response.data); Map userMap = jsonDecode(jsonString); return FoodList.fromJson(userMap); } else { // If that response was not OK, throw an error. throw DioError(message :'exception throwed in Try'); } } on DioError catch(e) { throw Exception("SomeThing is Wrong: \n ${_checkError(e)}"); } }اگر پیشهاد، انتقاد یا نظری دارید خوشحال میشم که با به اشتراک گزاشتنش باعث بحبود عملکردم بشید ممنون.منابعhttps://pub.dev/packages/diohttps://medium.com/flutter-community/dio-interceptors-in-flutter-17be4214f363https://blog.usejournal.com/flutter-http-requests-with-dio-rxdart-and-bloc-da325ca5fe33

درخواست انتشار مقاله شما

Payam Zahedi — Tue, 08 Oct 2019 17:27:59 +0330

اجتماع فلاتریبا سلاماین انتشارات مخصوص برنامه‌نویسان و توسعه‌دهندگان فلاتره و هدفش گسترش اجتماع فلاتر برای فارسی زبانانیه که در سراسر ایران دارن با این پلتفرم کار میکنن. اگر مقاله‌ای در حوزه‌های مختلف فلاتر نوشتید می‌تونید از طریق لینک‌های زیر اون رو برای ما ارسال کنید. لطفا نکات نگارشی زیر رو برای انتشار تو این انتشارات رعایت کنید تا افراد موقع خوندن مقالات شما تجربه کاربری بهتری داشته باشن.لینک‌های ارتباطی Email: pzahedi1995@gmail.comLinkedIn: @payamzahedi95Twitter: @payamzahedi95از طریق لینک‌های بالا آدرس مقالاتتون رو برای ما ارسال کنید. بعد از بررسی مقاله درخواست ثبت مقاله تو انتشارات براتون ارسال خواهد شد. نکات نگارشینکاتی در زیر ارائه شدن اختیاری هستند اما برای بهتر شدن تجربه کاربری مقالاتتون پیشنهاد میشن. بنابر‌این سعی کنید تا حد امکان اون‌هارو رعایت کنید.بایدهاسعی کنید تا حد امکان در مقالتون به جزییات اون موضوع اشاره کنید. به صورتی که وقتی کسی اون رو میخونه یک دید کلی از موضوع پیدا کنه و تا حد ممکن سعی کنید کل موضوع رو پوشش بدید تا کاربر دیگه نیازی نداشته باشه تا مقالات دیگه رو مطالعه کنه. حتما سعی کنید عکس مناسب و مرتبط با مقالتون رو پیدا کنید. عکس خوب برای جذب کاربر در نگاه اول بسیار موثره.تا حد امکان در جاهایی که نیازه از نیم‌ فاصله استفاده کنید. در فارسی کلماتی مثل "دانش‌آموز" با نیم فاصله نوشته میشن که در نهایت باعث زیبایی متن میشه.برای شکل‌هاتون توضیحات اضافه کنید.وقتی نیاز هست که از کاما، نقطه ویرگول، علامت نقل‌قول یا… در متن استفاده کنید اول اون علامت رو بزارید و بعد از اون یه space قرار بدید. قبل از کاما، نقطه و این قبیل علامت‌ها نباید space وجود داشته باشه.اگر مقاله انگلیسی رو ترجمه کردید لینک منبع رو تو مقالتون بزارید. همچنین سعی کنید منابعتون رو تا حد امکان ذکر کنید.نبایدهاکل کدتون رو کاملا تو متن مقاله کپی نکنید. سعی کنید تکه کد مرتبط رو ارائه بدید و برای سورس کد از لینک‌های خارجی استفاده کنید. (به عنوان مثال از لینک گیت‌هاب برای سورس کدهاتون استفاده کنید)یک مقاله‌ی طولانی رو در یک پست ارائه نکنید. اگر مقالتون طولانیه سعی کنید اون رو به مقالات کوچک‌تر تقسیم کنید.عنوان مقالتون را ساده در نظر نگیرید و سعی کنید برای مقاله‌تون عنوان مناسب انتخاب کنید. عنوان مقاله نباید از ۲۵ کلمه بیشتر باشه. یک عنوان خوب عنوانی هست که محتوای مقاله رو در چند واژه بیان کنه و بتونه توجه خواننده رو به خودش جلب کنه و همینطور مقاله شما رو از سایر مقالات حوزه‌ی مشابه متمایز کنه.انتقادات و پیشنهادات نظرات، انتقادات و پیشنهادات ارزشمندتون در هر بخش از فعالیت‌های ما، میتونه بهمون کمک کنه تا نقاط قوت و ضعفمون رو به درستی بشناسیم و بتونیم عملکرد بهتری داشته باشیم. همچنین باهم در رشد هرچه سریع‌تر اجتماع فلاتری سهیم باشیم.آدرس ایمیل من در اختیار شماست تا پیشنهادات و انتقاداتتون رو برام ارسال کنید و یا نظراتتون رو در زیر این پست برامون به اشتراک بزارید.Email: pzahedi1995@gmail.comاگر از این مجموعه خوشتون اومد و یا براتون مفید واقع شد می‌تونید اون رو با دوستانتون به اشتراک بگذارید و این یکی از راه‌هایی هست که می‌تونید این انتشارات رو حمایت کنید. علاوه بر این با لایک کردن و ارسال نظر به این پست کمک میکنید که در موتور های جستجو محبوبیت بیشتری رو کسب کنه.

آموزش فلاتر ( Flutter ) - تبدیل Json

Payam Zahedi — Tue, 13 Aug 2019 22:59:05 +0430

سلام به همگی چند وقتی میشه با فلاتر آشنا شدم. نسبت به تجربه ای که تو اندروید داشتم طراحی UI تو فلاتر خیلی آسونتره واسه همین تصمیم گرفتم یه پروژه با فلاتر درست کنم و تصمیم دارم پروژمو این جا با شما به اشتراک بزارم. تو این مجموعه از پست ها چند تا از مهم ترین موضوعات فلاتر رو باهم بررسی می‌کنیم و در نهایت یک پروژه کامل رو به پایان میرسونیم. این پست سومین پست از این سری هستش واسه دیدن قسمت قبل به این لینک مراجعه کنید.چیز هایی که تو این مجموعه یاد میگیریم به چند قسمت تقسیم میشن:مقدمه.طراحی UI اولیه اپلیکیشن.ساخت مدل ها و کد های مربوط به تبدیل اون به Json (از کتابخونه معروف json_serializable استفاده می‌کنیم).ارتباط با سرور ( از کتابخونه Dio تو این قسمت استفاده شده ).استفاده از کتابخونه cached_network_image برای گفتن عکس از اینترنت و کش کردن اون.استفاده از انیمیشن در فلاتر.ساخت launcher icon دلخواه برای android و ios در فلاتر.تعریف Json: تعریف Wikipedia:جی‌سان (به انگلیسی: JSON) مخفف JavaScript Object Notation (نشانه‌گذاری شیء جاوااسکریپت)، یک استاندارد باز متنیِ سبک برای انتقال داده‌ها است به گونه‌ای که برای انسان نیز خوانا باشد. با وجود ارتباط عمیقی که با جاوااسکریپت دارد، جی‌سان مستقل از زبان است و مفسرهایش تقریباً برای هر زبانی موجود هستند.اما اگر بخوام به زبان ساده تربگم Json یه زبان (Notation) که برای ذخیره و با تبادل اطلاعات استفاده میشه. ما معمولا زمانی از Json استفاده میکنیم که بخواهیم اطلاعاتی رو از سمت سرور بگیرم و یا برای سرور ارسال کنیم. ساخت مدل اولیه:واسه این که کار با داده ها رو آسون کنیم مدل ها رو میسازیم. مدل ها معمولا کلاس هایی هستند که صرفا داده رو نگه میدارن و معمولا منطق دیگه ای درون خودشون ندارن. اگه با Java کار کرده باشید به این کلاس ها Pojo میگن. همچنین اگه با کاتلین کار کرده باشید بهشون Data Class میگن که کار باهاشون خیلی هم آسونه.اما بریم سراغ ساختن مدل خودمون تو Dart. واسه ساختن مدل تو فلاتر مراحل زیر رو انجام بدین:تو پوشه lib پروژتون یه پوشه درست کنید و اسمش رو بزارید model.حالا فایل مدلتون را داخل این پوشه بسازید که با توجه به این پروژه اسم مدلمون food هستش. پس یه فایل دارت درست کنید و اسمش رو بزارید food.dart و ذخیرش کنید. داخل فایلی که درست کردید یه کلاس به نام Food درست کنید.بیاید برای شروع فرض بگیریم که کلاس Food ما دوتا خصوصیت بیشتر نداره. یه name که برای نمایش اسم غذا و یه image که ادرس عکس غذا رو درون خودش نگه میداره. پس کد کلاسمون چیزی شبیه به این میشه: class Food { final String name; final String image; //constructor Food({ this.name, this.image, });} سوال اینجاست که چطور این مدل رو تبدیل کنیم به Json و بر عکس مثلا وقتی دیتا Json از سرور بگیریم چطور تبدیلش کنیم به مدلمون؟ تو این مقاله به دو روش معمول که تو فلاتر (دارت) پیشنهاد شده رو مورد بررسی قرار میدیم:سریال سازی (تبدیل) دستی.سریال سازی خودکار توسط code generation.معمولا از روش اول واسه داده های ساده و از دومی برای داده های پیچیده که مدیریتشون سخته استفاده میشه.سریال سازی دستی - Manualتبدیل دستی تو فلاتر خیلی سادست. فلاتر یه کتاب خونه داخلی از پیش تعریف شده تو پکیج dart:convert داره که کار باهاش خیلی راحته. فرض کنید json نمونه ما به این شکله:{ "name" : "pizza", "image" : "url" }کافیه پکیج dart:convert رو اضافه کنید و بعد کد زیر رو اجرا کنید.Map food = jsonDecode(jsonString); print('pizza name , ${food['name']}! ');print('image url ${food['email']}.');همونطور که میبینید متد jsonDecode یه ورودی از نوع String میگیره و خروجی از نوع Map به ما میده. شما به راحتی میتونید با پیمایش تو Map به اطلاعات دست پیدا کنید. اما ما هدفمون اینه که از json یک مدل درس کنیم ولی اینجا یه خروجی مپ داریم.پس باید یکسری کد ها به مدلمون اضافه کنیم. فایل مدلتون رو به شکل زیر تغییر بدین:class Food { final String name; final String image; //constructor Food({ this.name, this.image, }); //named constructor Food.fromJson(Map json) : name = json['name'], image= json['image']; }اگه به تیکه کد بالا نگاه کنید میبینید که ما یه Constructor جدید به کلاس مدلمون اضافه کردیم تو دارت به این شکل از constructor ها Named Constructor میگن اگه اطلاعاتی درموردش ندارید میتونید به این لینک مراجعه کنید.در واقع کاری که Constructor جدیدمون انجام میده اینه که یه پارامتر Map رو میگیره و مقادیر مدلمون رو مقداردهی میکنه. شاید حدس زده باشید ما با ترکیب Constructor جدیدمون و متد از پیش تعریف شده jsonDecode میتونیم به راحتی json رو به مدل تبدیل کنیم. Map foodMap = jsonDecode(jsonString); var food= Food.fromJson(foodMap );print('pizza name , ${food.name}!'); print('image url ${food.email}.');به این فرایند میگن Decode کردن. در واقع ما یه json داریم اول تبدیلش میکنیم به یه Map بعدش با فرستادن Map به مدل اونو تبدیل به مدل میکنیم. اما حالت برعکس چی؟ اگه بخوایم یه مدل رو به json تبدیل کنیم چی؟ فلاتر و دارت باز هم یه متد واسه این کار دارن. jsonEncode یه متد که یه پارامتر Map میگیره و اونو به string تبدیل میکنه همون json ماست. واسه استفاده از این متد لازمه بازم کلاس مدلمون رو یکم تغییر بدیم. پس کد کلاستون رو به کد زیر تبدیل کنید: class Food { final String name; final String image; //constructor Food({ this.name, this.image, }); //named constructor Food.fromJson(Map json) : name = json['name'], image= json['image']; Map toJson() => { 'name': name, 'email': email, }; }واسه استفاده از jsonEncode لازمه به این شکل ازش استفاده کنید.var food=Food("name","url"); String json = jsonEncode(food.toJson());ما تو کد بالا یه مدل ساختیم پاسش کردیم به متد jsonEncode و یه خروجی json رو دریافت کردیم. یه نکته باید بگم اونم این که نیاز نیست متد toJson مربوط به مدل مون رو صدا بزنیم. در واقع خود متد jsonEncode این کار رو برامون میکنه. چه عالییی...پس کدمون به این شکل تغییر میکنه: var food=Food("name","url"); String json = jsonEncode(food);تا اینجا encode و decode کردن جیسون رو به صورت دستی یاد گرفتیم. اما یه سوال بزرگ اونم این که اگر مدلمون 20 تا فیلد داشت چی؟ قراره کلی کد بزنیم؟ این جاست که کتابخونه json_serializable به کمکون میاد.سریال سازی خودکار - Automaticدر واقع کاری که که کتابخونه json_serializable انجام میده اینه که کدهایی اضافی و تکراری(boilerplate code) شما رو هر دفعه که کلاس مدلتون تغییر میکنه از نو میسازه ( Generate میکنه) . واسه استفاده از این کتابخونه نیازه که اول وابستگی های اون رو به فایل pubspec.yaml اضافه کنید.dependencies: # Your other regular dependencies here json_annotation: ^2.0.0dev_dependencies: # Your other dev_dependencies here build_runner: ^1.0.0 json_serializable: ^2.0.0وابستگی های بالا رو مثل کد بالا به فایل pubspec.yaml اضافه کنید. شاید این فایل هم بتونه کمکتون کنه.مرحله بعد اضافه کردن کتابخونه json_serializable به مدلتونه. کد کلاس مدلتون رو به کد زیر تغییر بدید.//1 import 'package:json_annotation/json_annotation.dart'; //2 part 'food.g.dart'; //3 @JsonSerializable() class Food { final String name; final String image; //constructor Food({ this.name, this.image, }); //4 Food.fromJson(Map json) => _$FoodFromJson(json); //5 Map toJson() => _$FoodToJson(this); }اضافه کردن این کتابخونه به مدل به 4 بخش تقسیم میشه:ایمپورت کردن فایل json_annotation.dart به مدل.اضافه کردن food.g.dart . این همون فایلیه که توسط کتابخونه تولید(generate) میشه .اضافه کردن انوتیشن @JsonSerializable کتابخونه json_serializable از طریق این انوتیشن می فهمه که برای چه کلاس هایی باید کد تولید کنه.متد _$FoodFromJson(json); که توسط json_serializable تولید شده و در فایل food.g.dart قرار داده شده یه متده که کد های اضافی برای تبدیل json به مدلمون رو داخل خودش نگه داری میکنه.متد _$FoodToJson(this) این متد هم مثل متد بالا تولید و در فایل food.g.dart قرار داده شده و کارش برعکس کار متد بالا، تبدیل مدل به json هست. اما اگه کد بالا رو اجرا کنید هنوز هم یه مشکلی هست و حتما به یه ارور مثل ارور زیر بر میخورید.عکس استفاده شده در flutter.devمشکل اینجاست که ما کدمون رو تغییر دادیم اما generator رو فعال نکردیم. و به ما ارور میده که فایل مورد نظر generate نشده. واسه فعال کردن generator در فلاتر 2 روش وجود داره:تولید کد یکباره(One-time code generation)تو این روش ما generator رو برای یک اجرا میکنیم و اگه تغییراتی رو فایل مدلمون اعمال کنیم باید باز هم اجراش کنیم . برای اجرا generator به این روش کد flutter pub run build_runner build رو در ریشه پروژتون در terminal اجرا کنید. اگه از cmd استفاده میکنید یادتون نره که به آدرس ریشه پروژتون برید.تولید کد به صورت مداوم(Generating code continuously)با این روش هر وقت که ما تغییری رو فایلای مورد نظرمون ایجاد میکنیم کد مرتبط باهاش بلافاصله تولید میشه. واسه استفاده از این روش کد flutter pub run build_runner watch رو در ریشه پروژتون اجرا کنید. واسه اطلاعات بیشتر تو این مورد میتونید برید به این لینک. و اما یه نکته یادتون نره که generator رو وقتی لازم نداشتید متوقف کنید واسه متوقف کردنش CTRL + C رو همزمان فشار بدید.سخن پایانی و مهممثال بالا یه مثال ساده بود اگر میخواید پروژرو ادامه بدید باید بگم که مدل ما یکم پیچیده تر از این کدیه که زدیم. میتونید به عنوان تمرین مدل رو خودتون کامل کنید. لینک مدل کامل شده روی گیت هاب من هست. اگرم حوصله نداشتید میتونید فایلش رو کپی کنید.منابعflutter.dev-JSON and serializationpub.dev-json_serializable packageFlutter Academy-Work with JSON in Flutter - Part 2: json_serializableMedium Automatic Json Serializing in Flutter Using Json Annotation&amp;amp;amp;amp;amp;amp;amp;amp;lt;br/&amp;amp;amp;amp;amp;amp;amp;amp;gt; پیشنهاد میکنم لینک های بالا رو مطالعه کنید.لینک گیت هاب https://github.com/payam-zahedi/featured-food-sample https://www.linkedin.com/in/payam-zahedi

آموزش فلاتر ( Flutter ) - طراحی UI

Payam Zahedi — Wed, 24 Jul 2019 09:15:41 +0430

آموزش فلاتر ( Flutter ) - مقدمه

Payam Zahedi — Sun, 21 Jul 2019 16:01:59 +0430

آموزش فلاترسلام به همگی چند وقتی میشه با فلاتر آشنا شدم . نسبت به تجربه ای که تو اندروید داشتم طراحی UI تو فلاتر خیلی آسونتره واسه همین تصمیم گرفتم یه پروژه با فلاتر درست کنم و تصمیم دارم پروژمو این جا با شما به اشتراک بزارم. تو این مجموعه از پست ها چند تا از مهم ترین موضوعات فلاتر رو باهم بررسی می‌کنیم و در نهایت یک پروژه کامل رو به پایان میرسونیم . نمونه نهایی پروژه:چیز هایی که تو این مجموعه یاد میگیریم به چند قسمت تقسیم میشن:مقدمه .طراحی UI اولیه اپلیکیشن .ساخت مدل ها و کد های مربوط به تبدیل اون به Json (از کتاب خونه معروف json_serializable استفاده می‌کنیم).ارتباط با سرور ( از کتاب خونه Dio تو این قسمت استفاده شده ).استفاده از کتاب خونه cached_network_image برای گفتن عکس از اینترنت و کش کردن اون.استفاده از انیمیشن در فلاتر.ساخت launcher icon دلخواه برای android و ios در فلاتر.چند نکته در مورد اپلیکیشنی در نهایی:در ابتدا این توضیح رو بدم که UI این اپ رو تو یک ویدیو آموزشی در YouTube دیدم . و بعد از این که UI مورد نظر رو پیاده سازیش کردم تونستم قابلیت های دیگش رو ( مثل ارتباط با سرور ، دریافت عکس از اینترنت و ...) کامل کنم. تو قسمت بعدی چگونگی پیاده سازی UI رو توضیح میدم و لینک های مرتبط باهاش رو براتون قرار میدم.