توسعه دهنده فرانت -اند و طراح رابط/تجربه کاربری
نقشه راهی برای تبدیل شدن به یک توسعه دهنده فلاتر
در دنیای امروز اکثر افراد ترجیح میدن تا کمتر از کامپیوترشون استفاده کنن و بیشتر کارها مثل وبگردی، خوندن اخبار، چت و... رو با موبایلشون انجام بدن و دیگه تقریبا هر کسب و کاری به فکر ساخت و توسعه یه نرم افزار موبایل افتاده و اهمیت بیشتری هم نسبت به توسعه نسخه موبایل نرم افزارشون نسبت به سایر نسخههای وب و دسکتاپ میدن.
از اونجایی که اپهای موبایل از اهمیت زیادی برخوردار هستن و خود من هم به عنوان یک توسعه دهنده موبایل تجربه خوبی از توسعه نرم افزار با فلاتر داشتم، تصمیم گرفتم تا یه مقاله درباره "نقشه راهی برای تبدیل شدن به یک توسعه دهنده فلاتر" بنویسم.
فلاتر چی هست اصلا؟
کاربران موبایل توقع دارن تا نرم افزاری که باش کار میکنن، رابط کاربری زیبا، انیمیشنهای روون و پرفرمنس خوبی داشته باشه، پس توسعه دهندههای اپلیکیشنهای موبایل باید تموم سعیشون رو بکنن تا تموم این ویژگیها رو خیلی خوب و سریع بدون اینکه به کیفیت نرم افزار آسیبی بزنه، پیاده کنن و همین موجب شد تا گوگل به فکر ساخت یه فریم ورک جدید به اسم فلاتر بیوفته.
فلاتر (Flutter) یک واسط کاربری کیت توسعه نرمافزار متنباز است که توسط گوگل طراحی و ساخته شدهاست. فلاتر برای توسعه برنامههای کاربردی برای پلتفرمهای اندروید، آیاواس، ویندوز، مکاواس، لینوکس، گوگل فیوشا و وب استفاده میشود.
- ویکیپدیا
حالا چرا فلاتر؟
حتما از این موضوع مطلعید که بجز فلاتر، فریم ورکهای مختلف دیگهای هم برای توسعه اپهای Cross-platform وجود داره. ولی فلاتر چه ویژگیهایی داره که خودشو نسبت به بقیه فریم ورکها متمایز کرده؟
- توسعه سریع
- رابط کاربری زیبا و گویا
- عملکرد نیتیو (بومی)
این 3 ویژگی اصلی فلاتر هستن که هرکدوم رو بطور خلاصه در ادامه توضیح میدیم.
توسعه سریع
فلاتر از ویژگیای به اسم Hot reload برخورداره که به شما کمک میکنه تا خیلی سریعتر بتونید رابط کاربری رو پیاده کنید و تغییرات مورد نیاز رو انجام بدید و به علاوه باگها رو سریعتر رفع کنید. همزمان با کدنویسی هم میتونید خروجی مدنظرتون رو بدون اینکه مجبور به اجرای مجدد برنامه باشید، مشاهده کنید. این قابلیت در نهایت کمک میکنه تا از هدر رفت وقتتون جلوگیری کنید.
رابط کاربری زیبا و گویا
همه چیز در فلاتر ویجته و هر ویجت هم از ویجتهای مختلف دیگهای تشکیل شده. همین ویژگی به برنامهنویس این امکان رو میده تا بتونه خیلی راحت و سریع رابط کابری مورد نیازش رو پیاده سازی کنه.
عملکرد نیتیو (بومی)
تمامی کدهای نوشته شده در فلاتر به زبان Dart هستن که موقع اجرا به زبان نیتو اون پلتفرم کامپایل میشن که این امر موجب میشه تا برنامه ما همون سرعت و پرفورمنس نرم افزارهای بومی را داشته باشه.
یادگیری فلاتر رو از کجا و چطوری شروع کنیم؟
فلاتر سریع و بسیار راحته و اگه هم تجربه کار با زبان Java یا هر زبان شیءگرا دیگهای رو داشته باشید، دیگه کارتون خیلی راحتترم میشه. ولی با این حال توصیه میکنم که قبل از اقدام به یادگیری فلاتر، آموزشی مقدماتی از Dart ببنید تا اون دانش پایه از این زبان رو داشته باشید.
با یه سرچ ساده متوجه میشید که چقدر آموزشهای مختلف غیر رایگان و رایگانی، برای Dart و Flutter وجود داره که اگر با ویدیو راحتترید، یوتیوب پر از آموزشهای با کیفیت و واقعا خوبه. درنهایت اگه هم بیشتر اهل مطالعه هستید، مدیوم میتونه یه منبع پر از مقالات و آموزشهای عالی براتون باشه.
من خودم اولین بار فلاتر رو از دوره آموزشی فلاتر راکت یاد گرفتم که واقعا دوره کاربردی و نسبتا کاملی بود. التبه تو همین ویرگولم میتونید مقالات و آموزشای جالبی در مورد Dart و Flutter پیدا کنید.
فلاتر چطوری کار میکنه؟
بطور خیلی خلاصه بخوام بگم، تمامی کدهایی که ما به زبان Dart مینویسیم از طریق روش (AOT (Ahead of time، مستقیما به زبان نیتو کامپایل میشن که دلیلشم اینکه iOS اجازه کامپایل به روش پویا رو نمیده.
اگه دوست داشتید میتونید اینجا بیشتر در موردش بخونید.
نصب و شروع کار با فلاتر
1. نصب
اول از همه باید SDK فلاتر رو دانلود و نصب کنید.
داکیومنت وبسایت فلاتر به شکل کاملی و بسته به سیستم عاملتون نحوه نصبش رو توضیح داده. همچنین، تقریبا اولین بخش از هر دوره آموزشی هم به این مورد اختصاص داده شده.
2. راهاندازی ویرایشگر
با هر ویرایشگری که دارای ابزار Command-line یا همون خط فرمان باشه میتونید شروع به ساخت برنامههای فلاتری کنید. Android Studio ،IntelliJ ،VS Code و Emacs از محبوبترین و پر استفادهترین IDEها و ادیتورهایی هستن که برای ساخت اپهای فلاتر ازشون استفاده میشه. راه اندازیشونم بسیار سادست و فقط نیاز دارید تا پلاگینهای مورد نیاز رو نصب کنید و بعد همه چی برای شروع یه سفر هیجان انگیز به همراه فلاتر آمادست :)
داکیومنت راه اندازی ادیتور در وبسایت فلاتر
3. ساخت اولین پروژه فلاتر
دو روش برای ایجاد پروژه جدید در فلاتر وجود داره: استفاده از IDE و یا استفاده از Command-line.
اگه میخواید با IDE، پروژهی جدیدتون رو بسازید توضیح خاصی نیاز نداره. ولی اگه دوست دارید که از طریق Command-line این کارو انجام بدید، از دستور زیر استفاده کنید:
flutter create <project_name>
4. نمای کلی پروژه
بعد از اینکه پروژه فلاتر رو ساختید، فولدرها و فایلهایی مثل عکس پایین رو میبینید. اکثر کدهای نوشته شده به زبان دارت در فولدر lib قرار داده میشن و کدهای نیتیو هم در فودرهای android و ios موجود هستن.
5. اجرای اولین برنامه
اپهاتون رو میتویند هم روی دستگاه فیریکی مثل گوشی خودتون و هم شبیهسازهایی مثل AVD و ... اجرا کنید.
پس از اتصال دستگاه، از یکی از روشهای زیر میتونید استفاده کنید تا اپلیکیشن رو ران کنید.
1. استفاده از دکمه یا میانبر Run در ادیتور.
2. اجرای دستور flutter run در Command-line.
وقتی که پروژه فلاتر جدیدی رو ایجاد میکنید، میبینید که از قبل کدهایی وجود داره و با اجرا اونها، یک برنامه شمارنده خیلی ساده اجرا میشه.
این کدها فقط یک مثال خیلی خیلی ساده از فلاتره و نیازی نیست که نگرانشون باشید.
شما برای ساخت اپ خودتون این کدهارو پاک میکنید تا کدهای خودتون رو جایگزین کنید.
ویجتها در فلاتر
همونطوری که قبلا هم گفتم، همه چیز در فلاتر ویجت هستش و هر کدوم از اونها هم از ویجتهای دیگهای تشکیل شده. پس هرچیزی که تو فلاتر میبینید، در واقع یک ویجته. پس اگر میخواید با فلاتر کار کنید، باید با ویجتهای اون آشنایی پیدا کنید.
برای آشنایی بیشتر میتونید لیست این ویجتها رو از اینجا ببنید. همچنین، پیشنهاد میکنم که ویدیوهای منتشر شده در پلی لیست Widget of the week رو هم مشاهده کنید. تیم فلاتر هر هفته یکی از این ویجتهارو در قالب یک ویدیوی کوتاه 1 دقیقهای توضیح میده.
حرف پایانی
درسته که فلاتر یک تکنولوژی جدیده و نسبت به سایر فریم ورکهای مشابه از توسعه دهندگان کمتری برخورداره، ولی سرعت رشدش به شدت بالاست. بطوریکه در آیندهای نه چندان دور، جامعه توسعه دهندگان اون از سایر فریمورکهای مشابه مثل React Native و Xamarin بیشتر خواهد بود. همین الانش هم فلاتر کامیونیتی بزرگی داره و هر آموزش یا سوالی که داشتید باشید رو میتونید با یه جستوجوی ساده پیاده کنید. پس از این بابتم جای نگرانی نیست.
به عنوان کسی که از برنامهنویسی نیتیو اندروید به سمت فلاتر اومده، باید بگم که درسته که فلاتر هم مثل هر تکنولوژی دیگهای مشکلات مربوط به خودش رو داره، اما خیلی بیشتر از محیط نیتیو ازش راضی هستم و از اینکه این تصمیم رو گرفتم به هیچ عنوان پشیمون نیستم.
امیدوارم که این مقاله براتون مفید بوده باشه. اگر سوالی راجب فلاتر داشتید، اون رو برام کامنت کنید. خوشحال میشم کمکتون کنم.
ساخت modal های داینامیک در vue راحت تر از همیشه!
پلاگینی برای سنجش قدرت رمزعبور کاربر در فلاتر
وب اسکرپینگ (Web Scraping) با JavaScript و Node.js