۲۵ بهمن آموزش فلاتر
قدم به قدم برنامه نویسی اپلیکیشن موبایل با فلاتر
سلام خدمت دوستان عزیز و همراهان گرامی و همیشگی هولوسن.
امیدوارم که حالتون خوب و پر از انرژی مثبت باشید.
امروز (۲۵ بهمن ماه ۱۳۹۹) این بلاگ رو شروع به نوشتن کردم. از اونجایی که یکی از خدماتی که هولوسن میده بولت ژورنال هست، تیم ما تصمیم گرفته که یک اپلیکیشن برای این منظور پیاده سازی کنه. چند وقت پیش من یک اپلیکیشن تحت اندروید نوشتم و تا مرز انتشارش هم رفتیم، ولی بعدا به این نتیجه رسیدیم که بدون داشتن اپلیکیشن ios این ورژن رو دادن بی فایده است. پس در تیم فنی تصمیم گرفتیم که استارت اپلیکیشن ios هم بزنیم.
حالا از اینجا به بعد جلسه به جلسه توضیح دادم که چه کارهایی در حین برنامه نویسی این پروژه انجام دادم. پس با من همراه باشید…
روز اول – چرا رفتیم سراغ برنامه نویسی فلاتر؟
۲۵ بهمن ۱۳۹۹
چند روز پیش میخواستم ضبط دوره کاتلین رو شروع کنم و داشتم روی اون کار میکردم. با خودم گفتم چرا از کاتلین برای این منظور استفاده نکنیم؟ همین شد که رفتم سراغ کاتلین. خب اولش یکم تحقیق کردم و دیدم کاتلین یه قابلیتی داره که میشه باهاش اپلیکیشن ios و android رو با هم نوشت. بعد از روی مستنداتی که خوندم متوجه شدم که کاتلین Multi-Platform هست و Cross-Platform نیست. یعنی مجبوری برنامه نویسی swift هم مثلا بلد باشی. برای همین گفتم چه کاریه. ولش کن. میریم سراغ یه کراس پلتفرم.
قبلا یه پروژه با React Native زده بودم و میدونستم چقدر دردسر داره. اما گفتم یه فرصت دیگه بهش بدم. فرصت دادن همانا و پاشیدن ارور در سر و صورتمان هم همانا. از همون اول مسیر خودشو نشون داد. برای همین از گزینه های روی میز حذف شد.
خب گزینه بعدی فلاتر بود. یه استارت کوچیکی باهاش زدم و دیدم بعله. خود جنسه. یه نظر سنجی روی اینستاگرام هم رفتیم و به این نتیجه رسیدیم که جای درستی قدم گذاشتیم.
حالا من میخوام قدم به قدم هر کاری که کردم رو بصورت مستند اینجا داشته باشم و با شما دوستان عزیز به اشتراک بذارم.
تیپ این مدل از آموزش یه مقداری متفاوته، میدونم، بیشتر حالت منتوری داره و بیشتر هدف اینه که خودت دنبال یادگیریش بری و من فقط کمکت میکنم. هرجا هم گیر کردی همینجا، زیر همین پست کامنت بذار.
امیدوارم که با هم قدم های مثبتی برای رشد همدیگه برداریم.
این هم از اولین ویدیوی این مسیر. امیدوارم که لذت ببری.
روز دوم – از اول یه چیزایی رو باید ببینی
۲۷ بهمن ۱۳۹۹
بعضی وقتا خوبه که اجایل (agile) بود و سریع رفت سراغ استارت پروژه و کد زدن. اما بعضی وقتها باید دو قدم جلوترت رو هم ببینی (البته خیلی اتفاق افتاده که خودم همین اصل ساده رو رعایت نکردم).
خب منظورم چیه دقیقا؟
داشتم به ساختار پروژه نگاه میکردم و متوجه شدم که مثل اندروید که یه فایل strings.xml داره توی فلاتر همچین چیزی نداریم. حالا اگه من میخواستم جایی متنی رو عوض کنم باید توی خود سورس کد میگشتم دنبالش. حالا اگه قرار بود اپلیکیشن من MultiLanguage باشه چی؟ باید چه گلی به سرمون بزنیم؟
فکر کنم منظورم رو متوجه شده باشید. برای همین گشتم دنبال اینکه ببینم چطوری میتونم چندزبانه بودن رو توی فلاتر داشته باشم. از بین ویدیوهایی که توی یوتیوب دیدم این ویدیویی که لینکش رو میذارم از همه بهتر بود.
خب حالا یه نگاهی هم به ویدیویی که از نتیجه کار گرفتم میندازیم.
روز سوم – ساختار اولیه
۲۹ بهمن ۱۳۹۹
دیگه وقتش رسیده بود که یه مقدار کدهای اضافه رو پاک کنم و یکم تمیزکاری کنم. پس اول از همه کل کامنتهایی که نمیخواستم رو پاک کردم.
چون ساختار اپلیکیشن رو اینطوری دیدم که پایین اپلیکیشنم یه منو داشته باشم پس از bottom navigation bar استفاده کردم. برای اینکه ببینم توی فلاتر چطوری باید این رو پیاده سازی کنم از این لینک کمک گرفتم.
https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html
همه ی کلماتی که باید ترجمه میشدن رو ترجمه کردم.
یه چیزی میخواستم مثل فایل colors.xml توی اندروید که همه رنگ بندی های اصلی برنامم رو یکجا داشته باشه. برای همین یه کلاس به اسم UiColors نوشتم.
حالا وقتش رسیده بود که قسمت هایی که میشد شکوند رو بشکونم. یعنی چی؟ یعنی باید کدهارو به قسمت های کوچکتری تبدیل میکردم. برای همین رفتم ببینم چطوری میتونم یه ویجت برای خودم بنویسم.
https://flutter.dev/docs/development/ui/interactive
بعد از اینکه یاد گرفتم، رفتم تمام کدهارو تا جایی که میشد ویجت ویجت کردم.
یه فونت خوشگل هم به اپلیکیشن فلاتریمون اضافه کردم.
https://flutter.dev/docs/cookbook/design/fonts
و شد آنچه شد. حتما ویدیورو ببینید تا نتیجه کار رو ببینید. خودم که خیلی حال کردم.
روز چهارم – لیست محتوا
حالا بعد از این که یه دیزاین به نسبت خوب رو با فلاتر به این سرعت زدیم، نوبت به این میرسه که پیشنیاز هایی مثل کار کردن با List View ها یا مثلا Recycler View ها در فلاتر رو هم یاد بگیریم و بیاریمش توی پروژمون.
کلا برای نمایش دادن اطلاعات بصورت گرید (Grid) لازمه که از Adapter ها استفاده کنیم و دیتامون رو به گریدمون وصل کنیم.
راستی گفتیم پیشنیاز. چرا پیشنیاز؟ اصلا پیشنیاز چی؟
منظورم پیشنیاز اتصال به Api هاست. برای اینکه اپلیکیشن فلاترم رو به API وصل کنم تا دیتا رو از سرور بگیرم و نشون کاربر بدم احتیاج دارم که از این لیست ها و گرید ها استفاده کنم.
دو تا لینک توپ هم داریم از نحوه اتصال دیتا به لیست در فلاتر.
https://flutter.dev/docs/cookbook/lists/mixed-list
حالا توجهتون رو به ویدیوی کوتاهی که تهیه کردم در این باره جلب میکنم.
بدون نظر