من به عنوان یک توسعه دهنده وب فرانت اند شروع کردم و سپس تبدیل به یک توسعه دهنده وب شدم فلاکت توسعه دهنده فکر می‌کنم مفاهیمی وجود داشت که به من کمک کرد فلاتر را راحت‌تر بپذیرم. همچنین مفاهیم جدیدی وجود داشت که متفاوت بودند.
در این مقاله، من می‌خواهم تجربه‌ام را به اشتراک بگذارم و با نشان دادن چگونگی انتقال مفاهیم و یادگیری هر مفهوم جدید، به هر کسی که با انتخاب یک اکوسیستم نسبت به دیگری احساس فلج می‌کند، الهام بخشم.
مفاهیمی که منتقل شدند
این بخش مکان هایی را نشان می دهد که توسعه وب فرانت اند و فلاتر شبیه به هم هستند. مهارت هایی را که قبلاً دارید توضیح می دهد که اگر فلاتر را شروع کنید برای شما مزیت است.
1. پیاده سازی رابط های کاربری (UI)
برای پیاده سازی یک UI داده شده در وب جلویی، عناصر HTML را می سازید و با CSS استایل می دهید. برای پیاده‌سازی رابط‌های کاربری در فلاتر، نوشتن را انجام می‌دهید ویدجت و به آنها سبک دهید املاک.
مانند CSS، Color کلاس در دارت با "rgba" و "hex" کار می کند. همچنین مانند CSS، Flutter از پیکسل ها برای واحدهای فضا و اندازه استفاده می کند.
در Flutter، تقریباً برای تمام ویژگی‌های CSS و مقادیر آنها، کلاس‌های Dart و enums داریم. مثلا:
فلاتر نیز دارد Column و Row ویجت ها اینها معادل فلاتر هستند display: flex در CSS برای پیکربندی justify-content و align-items سبک ها، شما استفاده می کنید MainAxisAlignment و CrossAxisAlignment خواص برای تنظیم flex-grow سبک، ویجت(های) کودک(فرزندان) آسیب دیده را بپیچید Column/Row، در Expanded or Flexible.
برای رابط های کاربری پیشرفته، Flutter دارای این ویژگی است CustomPaint کلاس - فلوتر کردن چیزی است که Canvas API توسعه وب است. CustomPaint به شما یک نقاش می دهد تا هر UI را به دلخواه بکشید. معمولا استفاده خواهید کرد CustomPaint وقتی چیزی می خواهید که واقعا پیچیده باشد. همچنین، CustomPaint زمانی که ترکیبی از ویجت ها کار نمی کند، بهترین راه است.
2. در حال توسعه برای چندگانه وضوح صفحه نمایش
وب سایت ها بر روی مرورگرها و برنامه های تلفن همراه بر روی دستگاه ها اجرا می شوند. به این ترتیب، هنگام توسعه برای هر یک از پلتفرم‌ها، باید پلتفرم را در ذهن داشته باشید. هر پلتفرم ویژگی های یکسانی (دوربین، مکان، اعلان ها و غیره) را به روش های مختلف پیاده سازی می کند.
به عنوان یک توسعه دهنده وب، به پاسخگویی وب سایت خود فکر می کنید. شما از پرس و جوهای رسانه ای برای رسیدگی به ظاهر وب سایت خود در صفحه های کوچکتر و وسیع تر استفاده می کنید.
از توسعه وب تلفن همراه به Flutter، شما این را دارید MediaQuery کلاس کمکی این MediaQuery کلاس دستگاه فعلی را به شما می دهد orientation (منظره یا پرتره). همچنین نمای فعلی را به شما می دهد sizeاز devicePixelRatio، در میان سایر اطلاعات دستگاه. این مقادیر با هم، اطلاعاتی در مورد پیکربندی دستگاه تلفن همراه به شما می دهند. می توانید از آنها برای تغییر ظاهر برنامه تلفن همراه خود در اندازه های مختلف صفحه استفاده کنید.
3. کار با دیباگرها، ویرایشگرها و ابزارهای خط فرمان
مرورگرهای دسکتاپ دارای ابزارهای توسعه دهنده هستند. این ابزارها شامل یک بازرس، یک کنسول، یک مانیتور شبکه و غیره است که این ابزارها روند توسعه وب را بهبود می بخشد. فلاتر هم خودش را دارد DevTools. دارای بازرس ویجت، دیباگر، مانیتور شبکه و سایر ویژگی های آن است.
پشتیبانی IDE نیز مشابه است. Visual Studio Code یکی از محبوب ترین IDE برای توسعه وب است. افزونه های مرتبط با وب زیادی برای VS Code وجود دارد. Flutter نیز از VS Code پشتیبانی می کند. بنابراین در حین انتقال، نیازی به تغییر IDE ندارید. پسوند Dart و Flutter برای VS Code وجود دارد. Flutter همچنین با Android Studio به خوبی کار می کند. Android Studio و VS Code هر دو از Flutter DevTools پشتیبانی می کنند. این ادغام های IDE باعث می شود که ابزار Flutter کامل شود.
اکثر فریم ورک های فرانت اند جاوا اسکریپت به همراه خود ارائه می شوند رابط خط فرمان (CLI). مثلا: زاویه ای CLI, ایجاد برنامه React, نمای CLIو غیره فلاتر نیز با یک انحصاری همراه است CLI. Flutter CLI به شما اجازه می دهد تا پروژه های Angular را بسازید، ایجاد و توسعه دهید. دستوراتی برای تجزیه و تحلیل و آزمایش پروژه های فلاتر دارد.
مفاهیمی که جدید بودند
این بخش در مورد مفاهیم خاص فلاتر صحبت می کند که در توسعه وب آسان تر هستند یا وجود ندارند. ایده هایی را که باید هنگام ورود به Flutter در ذهن داشته باشید را توضیح می دهد.
نحوه مدیریت اسکرول
هنگام توسعه برای وب، رفتار پیش‌فرض پیمایش توسط مرورگرهای وب مدیریت می‌شود. با این حال، شما آزاد هستید که پیمایش را با CSS (با استفاده از overflow).
در فلاتر اینطور نیست. گروه های ویجت به طور پیش فرض اسکرول نمی شوند. وقتی احساس می کنید که گروه های ویجت ممکن است سرریز شوند، باید به طور فعال پیمایش را پیکربندی کنید.
در Flutter، پیمایش را با استفاده از ویجت های عجیب و غریبی که اجازه اسکرول را می دهند، پیکربندی می کنید. مثلا: ListView, SingleChildScrollView, CustomScrollViewو غیره. این ویجت های قابل پیمایش به شما کنترل عالی بر روی پیمایش می دهند. با CustomScrollView، می توانید مکانیزم های اسکرول متخصص و پیچیده را در برنامه پیکربندی کنید.
در سمت فلاتر، با استفاده از ScrollViews اجتناب ناپذیر است اندروید و iOS دارند ScrollView و UIScrollView برای رسیدگی به اسکرول. Flutter به راهی برای یکسان سازی تجربه رندر و توسعه دهنده با استفاده از آن نیاز دارد ScrollViews، هم.
ممکن است به توقف فکر کردن در مورد جریان ساختار سند کمک کند و در عوض برنامه را به عنوان یک بوم باز برای مکانیسم های نقاشی بومی دستگاه در نظر بگیرید.
2. محیط توسعه خود را تنظیم کنید
برای ایجاد ساده ترین وب سایت، می توانید یک فایل با a ایجاد کنید .html پسوند و آن را در مرورگر باز کنید. فلاتر به این سادگی نیست. برای استفاده از Flutter، باید Flutter SDK را نصب کرده باشید و فلاتر را برای یک دستگاه آزمایشی پیکربندی کرده اند. بنابراین اگر می خواهید فلاتر را برای اندروید کدنویسی کنید، باید این کار را انجام دهید Android SDK را تنظیم کنید. همچنین باید حداقل یک دستگاه اندروید (یک شبیه ساز اندروید یا یک دستگاه فیزیکی) را پیکربندی کنید.
این مورد برای دستگاه های اپل (iOS و macOS) یکسان است. پس از نصب Flutter در مک، هنوز باید Xcode را قبل از ادامه کار تنظیم کنید. همچنین برای تست Flutter در iOS حداقل به یک شبیه ساز iOS یا یک آیفون نیاز دارید. Flutter برای دسکتاپ نیز یک تنظیم قابل توجه است. در ویندوز، باید Windows Development SDK را با Visual Studio (نه VS Code) راه اندازی کنید. در لینوکس، بسته های بیشتری را نصب خواهید کرد.
بدون تنظیمات اضافی، Flutter روی مرورگرها کار می کند. در نتیجه، می‌توانید تنظیمات اضافی برای دستگاه‌های هدف را نادیده بگیرید. در بیشتر موارد، شما از Flutter برای توسعه اپلیکیشن موبایل استفاده می کنید. بنابراین، شما می خواهید حداقل اندروید یا iOS را راه اندازی کنید. فلوتر همراه با flutter doctor فرمان این دستور وضعیت راه اندازی توسعه شما را گزارش می دهد. به این ترتیب، در صورت نیاز می‌دانید که در تنظیمات، روی چه چیزی کار کنید.
این بدان معنا نیست که توسعه در فلاتر کند است. فلاتر با یک موتور قدرتمند عرضه می شود. این flutter run فرمان اجازه بارگذاری مجدد داغ به دستگاه تست را در حین کدنویسی می دهد. اما پس از آن باید فشار دهید R برای بارگذاری مجدد داغ این یک مسئله نیست. پسوند Flutter's VS Code اجازه بارگذاری مجدد خودکار در تغییرات فایل را می دهد.
3. بسته بندی و استقرار
استقرار وب سایت ها در مقایسه با استقرار برنامه های تلفن همراه ارزان تر و آسان تر است. هنگامی که وب سایت ها را مستقر می کنید، از طریق نام دامنه به آنها دسترسی پیدا می کنید. این نام های دامنه معمولاً سالانه تمدید می شوند. با این حال، آنها اختیاری هستند.
امروزه بسیاری از پلتفرم ها هاست رایگان ارائه می دهند.
مثلا: DigitalOcean به شما یک زیر دامنه رایگان می دهد .ondigitalocean.com.
اگر در حال ساخت یک وب سایت مستندات هستید می توانید از این دامنه ها استفاده کنید. همچنین می توانید زمانی که نگران برندسازی نیستید از آنها استفاده کنید.
در دنیای Flutter با برنامه های موبایل، معمولاً در بیشتر موارد برنامه خود را در دو مکان مستقر می کنید.
شما باید یک حساب توسعه دهنده در هر یک از این پلتفرم ها ثبت کنید. ثبت حساب توسعه دهنده مستلزم پرداخت هزینه یا اشتراک و تأیید هویت است.
برای App Store، باید در برنامه Apple Developer ثبت نام کنید. شما باید حفظ کنید اشتراک سالانه 99 دلار. برای گوگل پلی، باید یک پرداخت یکباره 25 دلاری برای حساب
این فروشگاه‌ها هر برنامه‌ای را که بررسی می‌شود، قبل از انتشار بررسی می‌کنند.
همچنین به خاطر داشته باشید که کاربران به‌راحتی به‌روزرسانی‌های برنامه را مصرف نمی‌کنند. کاربران باید به صراحت برنامه های نصب شده را به روز کنند. این برخلاف وب است که در آن همه فقط می توانند آخرین نسخه مستقر یک وب سایت را ببینند.
مدیریت برنامه های کاربردی مستقر نسبتاً بیشتر از مدیریت وب سایت های مستقر شده است. با این حال، این نباید شما را بترساند. به هر حال، میلیون‌ها برنامه در هر دو فروشگاه نصب شده است تا بتوانید برنامه خود را نیز اضافه کنید.
افکار اضافی در مورد فلاتر
Flutter یک ابزار بین پلتفرمی برای ساخت برنامه های دسکتاپ، موبایل یا وب است. برنامه های فلاتر از نظر پیکسلی کامل هستند. Flutter بدون در نظر گرفتن پلتفرم مورد نظر، رابط کاربری یکسانی را در هر برنامه ترسیم می کند. این به این دلیل است که هر برنامه Flutter حاوی موتور Flutter است. این موتور کد UI Flutter را ارائه می کند. فلاتر یک بوم برای هر دستگاه فراهم می کند و به شما امکان می دهد هر طور که می خواهید نقاشی کنید. موتور برای مدیریت رویدادها و تعاملات با پلت فرم هدف ارتباط برقرار می کند.
فلاتر کارآمد است. سطوح کارایی بالایی دارد. این به این دلیل است که با دارت ساخته شده است و از ویژگی های دارت استفاده می کند.
با این مزایای بسیار، فلاتر برای بسیاری از کاربردها انتخاب خوبی است. برنامه های چند پلتفرمی در زمان تولید و نگهداری در هزینه و زمان صرفه جویی می کنند. با این حال، فلاتر (و راه حل های چند پلتفرمی) ممکن است در برخی موارد انتخاب بهینه ای نباشد.
اگر می‌خواهید کاربران از ابزارهای توسعه‌دهنده پلتفرم برای برنامه شما استفاده کنند، از Flutter استفاده نکنید. ابزارهای توسعه‌دهنده پلتفرم در اینجا به معنای ابزارهای خاص دستگاه مانند گزینه‌های برنامه‌نویس Android است. همچنین شامل ابزارهای توسعه دهنده مرورگر است.
اگر انتظار دارید افزونه های مرورگر با وب سایت تعامل داشته باشند، از Flutter برای وب استفاده نکنید.
همچنین، از Flutter برای وب سایت های پر محتوا استفاده نکنید.
نتیجه
این مروری بر مهارت‌هایی بود که از توسعه وب جلویی به کار با Flutter منتقل شدند. همچنین در مورد مفاهیم توسعه اپلیکیشن صحبت کردیم که باید به عنوان یک توسعه دهنده وب یاد بگیرید.
Flutter برای توسعه دهندگان وب ساده تر است زیرا هر دو شامل پیاده سازی UI هستند. اگر فلاتر را راه اندازی کنید، متوجه خواهید شد که تجربه توسعه دهنده خوبی به شما می دهد. فلاتر را امتحان کنید! از آن برای ساخت برنامه های تلفن همراه و البته به نمایش گذاشتن آنچه می سازید استفاده کنید.
به سلامتی!
