آموزش جامع و پروژه‌محور فلاتر برای برنامه‌نویسی اپلیکیشن‌های Android و iOS

ساخت اپلیکیشن‌های موبایلی کاری پر چالش است. یکی از بزرگترین چالش‌ها در این راه، وجود دو پلتفرم اندروید و آی‌اواس با روند توسعه کاملا متفاوت برای گوشی‌های هوشمند است. یعنی تا همین چند سال پیش اگر می‌خواستید برای گوشی‌های هوشمند اپلیکیشنی بسازید، باید برای سیستم عامل اندروید و آی‌اواس و توسط زبانهای مربوطه، به صورت جداگانه کدنویسی می کردید. در واقع به نیروی کار، زمان و هزینه‌ای معادل دو برابر نیاز بود.

البته در سال‌های اخیر به لطف ظهور فریم‌ورک‌های مختلف، این چالش اساسی از سر راه توسعه‌دهندگان برداشته شده است. یعنی نیازی به کدنویسی مجزا برای سیستم عاملهای اندروید و آی‌اواس نیست و با یک بار کدنویسی می‌توانید برای اندروید، آی‌اواس و یا سیستم عاملهای دیگر خروجی Native بگیرید و به این ترتیب در زمان و هزینه‌های مربوطه تا 50% صرفه جویی کنید. یکی از این فریم‌ورک‌ها فلاتر (Flutter) است که توسط شرکت گوگل توسعه داده می‌شود و تا به امروز به لطف ابزارهای جامع و انعطاف‌پذیری، طرفداران زیادی را به سمت خود جذب کرده است.

چرا فلاتر؟

فلاتر یک بسته توسعه نرم‌افزار رایگان و متن‌باز و یک فریم‌ورک واسط موبایل است که به توسعه‌دهندگان این امکان را می‌دهد تا اپلیکیشن‌های موبایل بومی (Native Application) را تنها با یک کد مبنا ایجاد کنند. مزیت فلاتر این است که با کمک آن هر نوع اپلیکیشنی را از ابزارهای خرده‌فروشی‌های آنلاین نظیر برنامه‌های وفاداری مشتریان، کاتالوگ‌ها و فروشگاه‌های اینترنتی گرفته تا اپلیکیشن‌های کسب و کارهای بزرگ نظیر بانکداری، مراکز تماس، پیک و ... را توسعه دهید. فلاتر برای برنامه‌نویسانی که به دنبال راهی سریع و استاندارد برای طراحی اپلیکیشن‌های موبایل هستند بسیار مناسب است. از اینرو شرکتهای معتبر بسیاری در سراسر دنیا از جمله گوگل، بی‌ام‌دبلیو، علی بابا، ای‌بی، اسکوار و ... این فریم‌ورک را برای توسعه اپلیکیشن‌های خود انتخاب کرده‌اند.

رابط کاربری منعطف

فلاتر رابط کاربری بسیار ساده، گویا و منعطفی دارد و این امکان را به شما می‌دهد تا به سادگی محیط اپلیکیشن‌های خود را با هر ظاهر و پیچیدگی که در ذهن دارید، پیاده‌سازی کنید. انجام این کار در بسیاری از زبانهای بومی می‌تواند سختی‌ها و مشکلات بسیاری داشته باشد، اما در فلاتر این سختی‌ها به کم‌ترین حد خود رسیده‌اند.

علاوه بر آن فلاتر دارای قابلیتی تحت عنوان Hot Reloading رسید که تغییراتی که در کدهایتان می دهید را در کمتر از یک ثانیه بارگیری و نمایش می‌دهد. یعنی برای مشاهده تغییرات کوچک نیازی نیست اپلیکیشن را مجددا بارگیری کنید. به این ترتیب بهره‌وری و تمرکز شما در انجام پروژه به بالاترین حد خود خواهد رسید و در عین حال صرفه‌جویی بسیاری در زمان توسعه پروژه خواهید داشت.

رایگان و متن‌باز

فلاتر و تمام ابزارهای آن کاملا متن‌باز و رایگان عرضه می‌شوند و خوشبختانه نیازی نیست برای استفاده از آن هزینه‌ای پرداخت کنید. علاوه بر آن متن‌باز بودن فلاتر باعث شده پکیج‌های جانبی زیادی توسط سایر برنامه‌نویسان توسعه داده شده در دسترس قرار بگیرید. در واقع اگر فلاتر را برنامه‌نویسی اپلیکشن‌های موبایل انتخاب کرده‌اید، خیالتان راحت است که علاوه بر رایگان بودن فریم‌ورک پایه، به مجموعه‌ای جامع و غنی از ابزارها و کتابخانه‌های وابسته دسترسی خواهید داشت.

اگر بخواهید فلاتر را با زبانهای بومی مانند کاتلین یا جاوا مقایسه کنید به این نکته پی می‌برید که توسعه یک پروژه همسان در فلاتر به واسطه ابزارهای موجود، بسیار سریع‌تر صورت می‌گیرد. زیرا بسیاری از Widgetها در فلاتر به صورت آماده وجود دارند که می‌توان با چند خط ساده آنها را فراخوانی کرد، اما در زبانهای بومی نیازمند نوشتن آنها از پایه و علاوه بر آن تست و اشکال‌یابی عملکرد آنها است.

آموزش فلاتر

خوشبختانه فلاتر مستندات آموزشی زیادی برای یادگیری این محیط توسعه در اختیار شما قرار می‌دهد و اگر با مبانی عمومی برنامه‌نویسی آشنایی کلی دارید و تسلط شما به زبان انگلیسی در حد نسبتا خوبی است، نیازی به آموزشهای دیگر نخواهید داشت. البته اگر در برقراری ارتباط با فلاتر و یادگیری آن توسط مستندات موجود دچار مشکل هستید، شاید نیاز باشد از آموزشهای تصویری به زبان فارسی نیز کمک بگیرید. در واقع آموزشهای تصویری مشابه موتور متحرکی است که از فراز و سربالایی ابتدایی پیش رو شما را عبور داده و در مسیر درست قرار می‌دهد. البته روند و شیوه آموزش به خصوص در زمینه محیط گسترده‌ای مانند فلاتر باید اصولی و دقیق باشد. یعنی کاربر با دیدن هر بخش از آموزش، احساس کند می‌تواند اپلیکیشن جدیدی یا حداقل بخش کوچکی از آن را مانند یک تکه پازل طراحی کند.

آیا فلاتر ارزش یادگیری دارد؟

پرسشی که در ذهن تمام افرادی که قصد یادگیری یک زبان برنامه‌نویسی دارند مطرح می‌شود، این است که آیا این زبان خاص ارزش یادگیری دارد و به عبارتی بازار کار خوبی دارد. پاسخ ما به این پرسش در مورد فلاتر به طور قطع "بله" خواهد بود. گوگل برنامه‌های بسیار زیادی برای فلاتر دارد و رشد چشم‌گیر آن در این زمان کوتاه نیز موید همین موضوع است. بنابراین یادگیری فلاتر علیرغم اینکه نیاز به زمان نسبتا زیادی برای یادگیری دارد اما ارزش زمانی که می‌گذارید خواهد داشت. ساخت اپلیکیشن‌های موبایل در ایران بازار کار خوبی دارد اما به دلیل ماهیت خاص این شغل، شما می‌توانید از خارج از کشور نیز پروژه بگیرید و درآمد ماهیانه یک برنامه‌نویس نیمه حرفه‌ای در بازارهای جهانی بیش از 7.000 دلار به صورت ماهیانه است.

از طرفی برنامه‌نویسی از آن دست شغل‌هایی است که به شما امکان کار به صورت انفرادی یا در قالب یک تیم کوچک را نیز می‌دهد. به این ترتیب به جای اینکه برای شخص یا شرکت دیگری کار کنید، می‌توانید اپلیکیشن‌های ساخته شده را به صورت تجاری یا رایگان (نمایش تبلیغات) استورهای جهانی منتشر و بسته به میزان نصب و استفاده از آن، سود قابل ملاحظه‌ای را آن هم به صورت دائمی (فقط از یک برنامه یا بازی) نصیب خود کنید.

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

پاسخ این سوال به میزان هوش، تجربه، حوصله، زمان و تلاش شما بستگی دارد. البته بدون شک شما (که در حال خواندن این مطلب هستید) هوش خوبی داشته‌اید که به این صفحه وارد شدید، پس اگر زمان و حوصله کافی برای یادگیری دارید، با اندکی تلاش می‌توانید فلاتر را به خوبی یاد بگیرید و اپلیکیشن‌های بسیار خوبی را نیز طراحی کنید.

البته باید توجه کنید که برای شروع نباید سراغ اپلیکیشن‌های بزرگ و پیچیده بروید، اما همیشه ایده‌های بزرگ را در سر داشته باشید و سعی کنید بخشهای کوچکی از برنامه را که در زمان یادگیری با آنها آشنا شدید پیاده‌سازی کنید، تا هم تمرینی بر آموخته‌های خود داشته باشید و هم با چالش‌های مرتبط آشنا شوید.

دوره کامل آموزش فلاتر و دارت

سافت‌سرا به عنوان یکی از شرکتهای پیشرو در زمینه آموزش برنامه‌نویسی از فلاتر نیز غافل نشده و آموزش تصویری جامعی برای یادگیری این فریم‌ورک به منظور ساخت اپلیکیشن‌های نیتیو برای iOS و Android تهیه کرده است. هر چند ممکن است با جستجوی کوچکی آموزشهای متعددی در این زمینه پیدا کنید، اما با جرات می‌توان این آموزش یکی از بهترین و کامل‌ترین آموزشهای موجود است که به طور خاص افراد مبتدی را برای رساندن به سطح حرفه‌ای مورد هدف قرار گرفته است.

آموزش گام‌به‌گام و دقیق

این آموزش برای کاربران مبتدی علاقه‌مند به برنامه‌نویسی اپلیکیشن‌های موبایل تهیه شده است و تمام ابعاد و چالش‌هایی که ممکن است کاربران با آن مواجه شوند را مورد بررسی قرار می‌دهد. در این سری آموزشی و در هر بخش با موارد جدیدی آشنا می‌شوید که کامل‌کننده مطالب قبلی است و با پیشرفت آموزش به همان میزان در خود و دانش‌تان در این زمینه پیشرفت خواهید کرد. در نهایت نیز با قرارگیری پازل‌های موجود در کنار هم به یک برنامه‌نویس خوب و آشنا با مباحث کاربردی در زمینه توسعه اپلیکیشن‌های موبایل توسط فلاتر تبدیل خواهید شد.

ساده و روان

شیوه آموزش در این مجموعه به شکلی کاملا ساده و روان است و مدرس به مانند یک مربی آموزش شنا، شما را با یک شیرجه هم‌زمان با خود به محیط فلاتر و دارت خواهد کشید و به شما روش استفاده  صحیح و اصولی از ابزارها و امکانات موجود را خواهد آموخت. در این مجموعه آموزشی سعی شده تا تمام اصطلاحاتی که ممکن است کاربر با آن ناآشنا باشد به شکلی واضح مورد بررسی قرار گیرد تا کاربر (اگر دروس قبل را به خوبی یاد گرفته باشد) در هیچ جایی احساس کاستی و خلا نکند.

بررسی چالشهای مختلف

متاسفانه برنامه‌نویسی در ایران علاوه بر چالشهای جهانی پیشرو، چالشهای انحصاری ویژه خود را نیز دارد. اوضاع فیلترینگ از یک سو و محدودیت‌هایی که برای کاربران ایرانی (به واسطه تحریم‌ها) ایجاد شده از سوی دیگر می‌تواند کار را برای برنامه‌نویسان ایرانی (مقیم در ایران) اندکی سخت‌تر کند. خوشبختانه در این مجموعه ما نیز با تمام این چالش‌ها روبرو شدیم (به صورت اتفاقی یا عمدی) و سعی کردیم با روش مقابله با چالشهای عمومی و نیز مشکلات ناشی از تحریم‌های موجود را در قالب راهکارهای مختلف به شما آموزش دهیم.

مباحث آموزش جامع و پروژه‌محور فلاتر

01 آشنایی کلی با فلاتر

001 مقدمه
002 مروری بر فلاتر
003 ورژن‌های مختلف فلاتر
004 نصب پیش‌نیازها
005 نصب جاوا و فلاتر
006 نصب SDK
007 ایجاد شبیه‌ساز برای تست برنامه
008 باز کردن و اجرای پروژه در اندروید استودیو و ویژوال استودیو کد
009 مروری بر فایلها و پوشه‌های پروژه
010 بررسی کدهایی که تا کنون نوشته‌ایم
011 نمونه کدهای دارت
012 مروری بر انواع داده‌ها در دارت
013 متغیرها
014 برنامه‌نویسی شی‌گرا (OOP)

02 نوشتن یک اپ نظرسنجی/آزمون‌گیری

015 شروع به کار
016 اجرای اولین برنامه نوشته شده
017 کانستراکتور (Constructor)
018 ایجاد ساختار درختی در ویجت‌ها
019 افزودن ویجت Layout
020 اتصال توابع و دکمه‌ها
021 ایجاد توابع بی‌نام
022 بروزرسانی داده‌های ویجت
023 استفاده از ویجت‌های Stateful
024 استفاده از المنت‌های Private
025 ایجاد ویجت‌های سفارشی
026 فرمت‌بندی و استایل‌دهی به متن
027 ایجاد enumها
028 مستندات فلاتر
029 ایجاد کلاس جدید
030 استفاده از Map
031 استفاده از لیست در ویجت‌ها
032 مقایسه const و final
033 مروری بر دستور if
034 دستور if else
035 افزودن شرط به ویجت‌ها (ternary)
036 تفکیک کلاسها در فایلهای مختلف
037 ایجاد ویجت‌های بیشتر
038 افزودن سیستم امتیازدهی به برنامه
039 محاسبه نتیجه امتیازدهی
040 افزودن دکمه Reset به برنامه
041 اشکال‌یابی (debug)
042 افزودن breakpointها
043 مروری بر ابزار Widget Inspector
044 ایمپورت کردن ویجت‌ها

03 نوشتن اپ ذخیره تراکنش‌ها (حسابداری شخصی ساده)

045 شروع به کار
046 چیدمان اجزا درون ستون
047 افزودن کلاس Transaction
048 افزودن ردیف و ستون
049 افزودن آیتم‌های بیشتر به ویجت‌ها
050 مقایسه container، column و row
051 درون‌یابی رشته‌ای (String Interpolation)
052 فرمت تاریخ و ساعت
053 افزودن فیلدهای ورود اطلاعات
054 افزودن propertyها
055 کنترل داده‌های ورودی
056 تفکیک ویجت‌ها در فایلهای مجزا
057 ایجاد ویجت‌های بیشتر
058 اسکرول محتوا
059 ساخت ListView
060 چک کردن مقادیر و افزودن متد onSubmit
061 ایجاد IconButton
062 افزودن صفحات جدید به برنامه
063 رفع مشکلات Modal
064 افزودن تم به برنامه
065 استفاده از فونتهای سفارشی
066 افزودن تصویر به برنامه
067 ساخت ویجت چارت
068 فرمت چارت
069 ویجت Chartbar - قسمت اول
070 ویجت Chartbar - قسمت دوم
071 کامل کردن چارت
072 استفاده از ListTile
073 معکوس کردن چارت
074 افزودن DatePicker
075 افزودن متد انتخاب تاریخ
076 ثبت تاریخ تراکنش
077 حذف تراکنش
078 محاسبه ارتفاع به شکل دینامیک
079 تغییر سایز ویجت به شکل دینامیک
080 تغییر جهت اپ
081 افزودن Switch به برنامه
082 افزودن مد Landscape
083 توجه به چیدمان صفحه کلید مجازی
084 توجه به سایز دستگاه برای نمایش بهتر
085 مدیریت Media Query

04 بررسی حرفه‌ای فلاتر

086 نگاهی عمیق‌تر به فلاتر
087 چگونه فلاتر صفحات را بازسازی می‌کند؟
088 چگونه فلاتر Build را اجرا می‌کند؟
089 کلیدواژه const
090 کدنویسی اصولی
091 ایجاد ویجت‌های چند بار مصرف
092 مروری بر عملکرد ویجت‌ها
093 مروری بر عملکرد اپ

05 نوشتن اپ منوی رستوران

094 نمای کلی برنامه
095 تعریف دسته‌بندی‌‌ها
096 ایجاد صفحه برای دسته‌بندی‌‌ها
097 افزودن فونت و استایل متن
098 ایجاد صفحات مرتبط برای هر دسته‌بندی‌
099 استفاده از routeها
100 ایجاد routeName
101 ایجاد مدل‌های جدید
102 اعمال تغییرات
103ایجاد ویجت وعده غذایی
104 افزودن متن شناور بر روی تصویر
105 افزودن جزئیات غذاها
106 کار بر روی صفحه جزئیات غذاها
107 ایجاد زبانه علاقه‌مندی‌ها (Tab)
108 تکمیل بخش زبانه‌ها
109 افزودن ویجت Drawer (منوی همبرگری)
110 افزودن توابع به منو (ساخت صفحه فیلتر)
111 افزودن آیتم به صفحه فیلتر
112 افزودن منطق فیلترها
113 تغییر صفحه اصلی
114 افزودن غذاها به صفحه علاقه‌مندی‌ها
115 کامل کردن متد افزودن غذاها به علاقه‌مندی‌ها

06 نوشتن اپ فروشگاه اینترنتی

116 نمای کلی برنامه
117 تعریف کلاس Product
118 افزودن محصولات
119 ساخت صفحه جزئیات برای محصولات
120 افزودن Provider به برنامه
121 خواندن اطلاعات از Providerها
122 تفاوت class با mixin
123 تغییر در listener
124 افزودن محصولات به علاقه‌مندی‌ها
125 تغییر Syntaxها
126 استفاده از consumer به جای provider
127 مقایسه Local State و Wide State
128 ساخت سبد خرید
129 افزودن providerهای بیشتر
130 افزودن ویجت جدید به اپ
131 افزودن محصولات به سبد خرید
132 نمایش محتویات سبد خرید
133 کامل کردن صفحه جزئیات سبد خرید
134 حذف آیتمها از سبد خرید
135 افزودن کلاس سفارش‌ها
136 ایجاد صفحه سفارش کالا
137 افزودن منوی کشویی
138 کامل کردن صفحه سفارش‌ها
139 افزودن گزینه Undo به آخرین محصول خریداری شده 
140 پیغام اخطار حذف محصول
141 ایجاد ویجت جزئیات محصول
142 صفحه مدیریت محصولات کاربر
143 افزودن ویژگی ادیت محصولات به برنامه
144 افزودن فیلدهای بیشتر برای ویرایش محصولات
145 افزودن قابلیت درج تصویر به فرم
146 دریافت اطلاعات فرم ثبت محصول
147 اعتبارسنجی فرم
148 ذخیره محصول
149 نوشتن متد ویرایش محصولات
150 تصمیم‌گیری در مورد آرگومان‌های دریافتی
151 ساخت صفحه ویرایش محصول
152 کامل کردن متد Save
153 افزودن پروژه به فایربیس (اتصال به دیتابیس)
154 کار با http verbs
155 دریافت response
156 فیوچر بلاک‌ها
157 افزودن اسپینر لودینگ
158 شناسایی و نمایش خطاها
159 استفاده از async await
160 دریافت اطلاعات از بانک اطلاعات آنلاین
161 نمایش اطلاعات دریافتی از دیتابیس آنلاین
162 نمایش اطلاعات در صفحه محصولات
163 بروزرسانی محصولات
164 حذف محصولات
165 ایجاد خطا
166 آپدیت علاقه‌مندی‌ها بر روی دیتابیس
167 افزودن سفارش‌ها به دیتابیس
168 نمایش سفارش‌ها در لیست
169 استفاده از ویجت FutureBuilder
170 تعریف احراز هویت در backend
171 صفحه احراز هویت
172 ایجاد Card برای صفحه لاگین
173 کامل کردن صفحه لاگین
174 افزودن کلاس auth
175 افزودن بخش Login به برنامه
176 مدیریت خطاها
177 بررسی عملکرد بخش Login
178 افزودن توکن به درخواست‌ها
179 افزودن توکن به سایر درخواست‌ها
180 تنظیم علاقه‌مندی‌ها برای کاربران به صورت مجزا
181 افزودن آیدی کاربر به سفارشات
182 خروج خودکار کاربر (Auto LogOut)
183 ورود خودکار کاربر (Auto LogIn)
184 مروری بر انیمیشن‌ها
185 استفاده از ویجت Animated Builder
186 استفاده از Animated Container
187 انیمیشن‌های Fade و Slide 
188 استفاده از تصویر PlaceHolder برای محصولات
189 تزانزیشن Hero
190 کار با Sliverها
191 انیمیت کردن اطلاعات سفارش
192 ایجاد تم سفارشی برای ترانزیشن بین صفحات

07 نوشتن اپ نمایش لوکیشن

193 شروع به کار
194 کامل کردن صفحه افزودن مکان‌ها
195 افزودن صفحه بارگذاری تصویر
196 استفاده از ImagePicker
197 دریافت تصویر از دوربین
198 افزودن تصویر مکانهای مورد نظر
199 استفاده از DBHelper
200 ذخیره و دریافت اطلاعات از دیتابیس
201 افزودن لوکیشن
202 افزودن Google API به برنامه

08 نوشتن اپ گفتگوی اینترنتی

203 شروع به کار
204 رجیستر کردن اپ در فایربیس
205 ایجاد دیتابیس و خواندن جداول
206 استفاده از StreamBuilder
207 ایجاد فرم عضویت
208 افزودن فرم ورود
209 افزودن متدها برای لاگین
210 افزودن Authentication به برنامه
211 افزودن اطلاعات کاربر به فایربیس
212 افزودن قابلیت LogOut
213 رول‌ها در فایربیس
214 خواندن چت‌ها با استفاده از ruleها
215 افزودن پیام جدید
216 ایجاد حباب چت (Message Bubble)
217 افزودن نام کاربر به پیام
218 استفاده از PushNotificationها
219 تنظیمات PushNotification

09 انتشار اپلیکیشن

220 مروری بر سازوکار ایجاد اپ نهایی
221 تنظیم پرمیشن و نام پکیج نهایی
222 افزودن apiها
223 افزودن آیکن و Splash Screen
224 ایحاد باندل نهایی