مهدی نعمتی
چجوری خروجی API تمیز داشته باشیم
داشتن یه استاندارد تو ارائه API به دیگر برنامه نویسان میتونه علاوه بر حرفه ای و کامل نشون دادن کار، باعث بشه کسایی هم که دارن از این API استفاده میکنن کمترین ابهام و سوال رو داشته باشن که خود این موضوع هم باعث کمتر شدن مشکلات و افزایش سرعت توسعه پروژه میشه. تو این پست ما چند مورد از استاندارد های کلی برای ارائه API رو بررسی میکنیم. 1. اولین و مهمترین مورد؛ داکیومنت مناسب داشتن داکیومنت مناسب باعث راحت تر شدن خوندن و تست سیستم میشه و هر کسی که هم داره از سیستم استفاده میکنه میتونه خودش بره بخش های مورد نیازش رو ببینه، یکی از مهمترین ابزار های داکیومنت سازی که متن باز ( open source ) هم هست، swagger هست. که داکیومنت کاملی برای پیاده سازی داره و میتونین از سایتش بخونین. 2. پسوند فایل رو تو اسم متد نزار یه سری از برنامه نویس ها پسوند فایل رو هم تو اسم متد میارن مثلا: /users/{id}/pending-orders.json به جاش از این استفاده بهش: /users/{id}/pending-orders 3. عدم خلاصه نویسی اسم ها تا جای امکان اسم ها کامل نوشته بشه تا هر کسی که داره متد هارو میبینه کامل به عملکرد متد ها آشنا بشه 4. از اصطلاحات تخصصی استفاده نشه کسی که داره متد هارو میبینه شاید کسی هست که میخواد قالب وب سایتی رو داینامیک کنه یا اپی رو بنویسه و هیچ شناختی از اصطلاحات کاری شما نداره، که همین موضوع باعث میشه برنامه نویس API نیاز باشه مجددا متد هارو توضیح بده مثلا به جای استفاده از : /users/{id}/pan از این استفاده بشه : /users/{id}/user-number 5. از اسم جمع برای لیست استفاده بشه اگه جایی قرار یه لیستی به کاربر برگردونده بشه، بهتره از اسم جمع برای متد استفاده بشه که استفاده کننده ها هم بدونن قراره لیست بگیرن از این متد. 6. تو خروجی جیسون از camelCase استفاده کنین به جای این : { user_name: "Mehdi" } شیوه درست : { userName: "Mehdi" } 7. نسخه بندی (versioning) رو فراموش نکن فقط به الان فکر نکن، به توسعه و آینده هم فکر کن. استفاده از نسخه بندی باعث میشه هیچ کدوم از کلاینت ها چه قدیمی و چه جدید موقع ارتقا سیستم براشون مشکلی پیش نیاد. https://api.dariatech.com/v1/users با این روش وقتی که بخش کاربرا به روز رسانی داشت، هنوز هم نسخه قدیمی برای کاربران فعلی فعاله میتونن بدون مشکل استفاده کنن و هم اینکه میشه نسخه جدید رو از اپلیکیشن به کاربران عرضه کرد. 8. صفحه بندی رو فراموش نکن از صفحه بندی برای ارسال دیتا به کلاینت استفاده کنین، تا حجم زیادی از اطلاعات برای کلاینت ارسال نشه. 9. از پروتکل رمزنگاری شده استفاده کنین به جای استفاده از http از https استفاده کنین، چون علاوه بر امنیت بیشتر ، رو بعضی از کلاینت ها مثل نسخه های جدید اندروید از http برای زدن درخواست به سرور جلوگیری میشود.
مهدی نعمتی
افزونه های VS code مورد نیاز برای فلاتر
تو این پست میخوام یه سری افزونه (Extension) برای ویژوال استدیو کد (Visual Studio Code) رو معرفی کنیم که یه سری از این افزونه ها برای پروژه های فلاتر هست و یه سریشون هم کلا برای کد نویسی به زبان های دیگه هست تا کد نویسی ساده تر و سریعتر بشه. 1 . ساخت ویجت ها تو فلاتر به سریعترین شکل با Awesome Flutter Snippets این ویجت مجموعه ای از ویجت ها، کلاس ها و متد های پر استفاده رو تو خودش نگه میداره که میتونین خیلی سریع و با نوشتن چند حرف از اون ها استفاده کنین. ( لینک ) 2 . بدون رفتن به مرورگر مستقیم پکیج به پروژه اضافه کن با Pubspec Assist دیگه نیازی نیست برای پیدا کردن یه پکیج بری و مرورگر رو باز کنی و دنبال پکیجت بگردی و اسمش و کپی کنی و بیاری تو اپ، با کمک این پکیج خیلی ساده تر میتونی پکیج مورد نظر رو پیدا کنی و خودکار به اپ اضافه بشه. برای اینکار از کلید های Ctrl + Shift + P رو میگیریم بعدش میگیم که Pubspec Assist رو میخوایم ، مرحله بعدش نوع ش رو میگیم که چی باشه که یکی از دو مورد normal یا dev هست و بعدش هم اسم پکیجمون و دکمه انتر و تمام. ( لینک ) 3 . استفاده ساده تر از کتابخانه Reverpod با افزونه Flutter Riverpod Snippets اگه خواستین از کتابخونه reverpod راحتتر استفاده کنین این افزونه دقیقا برای همین کار ساخته شده ( لینک ) 4 . منظم کردن ایمپورت های dart-import با دو جرکت ایپورت های صفحه رو مرتب کن ، اول با گرفتن کلید های Ctrl + Shift + P و بعدش هم تایپ Fix Imports و زدن دکمه انتر ( لینک ) 5 . دادن آیکون مرتبط با هر فولدر به جای آیکون ساده فولدر یا Material Icon Theme فقط کافیه این افزونه رو نصب کنید، خودش بقیه کارا رو انجام میده ( لینک ) 6 . حذف فضای خالی بیهوده از کدها با افزونه Remove empty lines برای اینکه تو سریعترین حالت ممکن فضای خالی اضافه را حذف کنین از این افزونه میتونید استفاده کنید، کار باهاش هم راحته دکمه های Ctrl+ Shift + P و عبارت Remove empty lines را بنویسید. 7 . گرفتن اسکرین شات تو یه زیبا با CodeSnap برای این کار کلید های ترکیبی Ctrl + Shift + P رو میگیریم و عبارت CodeSnap رو تایپ میکنیم، کدی که میخوایم رو انتخاب میکنیم و بعدش آیکونی که برای ما به نمایش در میاد رو میزینم ،اسکرین شات آماده میشه
نیما خاکی
تفاوت های نسخه پنجم و ششم React Router Dom
تفاوت های React Router نسخه 6 و نسخه 5: کتابخانه React Router یک کتابخانه Server Side و Client Side است که برای مسیریابی در کتابخانه React استفاده میشود. React Router در جاهای مختلفی استفاده میشود، مثل سمت فرانت، سمت سرور و حتی در React Native. توی نسخه ششم این کتابخانه تغییرات زیادی در پس زمینه اتفاق افتاده، مثل بهینه سازی الگوریتم های مسیریابی اضافه شدن چندین Component جدید و همچنین کاهش 58 درصدی سایز باندل. تو این مقاله تلاش میکنیم تا چند مورد از تغییرات بین نسخه پنجم و ششم این کتابخانه رو ذکر کنیم. کلمه Switch با Routes جایگزین شد در نسخه ششم دیگه Switch رو نمیشه از react-router-dom ااکسپرت کرد. در نسخه های قبلی میتونستیم از Switch استفاده کنیم که Route ها رو درونش قرار بدیم. ولی در نسخه ششم به جای Switch از Routes استفاده میکنیم که Route ها رو درونش قرار میدیم. نحوه تعریف کردن Route تغییر کرده است کامپوننتی که باید بر اساس یه Route در مسیریابی render شود دیگه نمیتونه به عنوان یک فرزند به Route پاس داده شود و باید به عنوان یک prop با نام element به Route پاس داده شود دیگه نیازی به کلمه exact نیست با نسخه ششم React Router دیگه نیازی به کلمه exact نیست. همون طور که در این مقاله ذکر شده، به علت بهینه شدن الگوریتم نسخه ششم router به راحتی میتوانیم یک Component رو در یک مسیر خاص render کنیم بدون اینکه به کلمه exact نیازی داشته باشیم. در نسخه های قبلی router از بالا به پایین به ترتیب route ها رو چک میکرد ولی در نسخه ششم الگوریتم بهتری برای لود کردن route ها داره و نیازی نیست که نگران ترتیب route ها باشیم چون دیگه ترتیب route ها دیگه مهم نیست. برای اینکه درک بهتری از سه مبحثی که گفته شد داشته باشید میتونید به تیکه کدهای پایین یه نگاه بندازید. نسخه پنجم: نسخه ششم: دیگه نیازی به نصب react-router-config به صورت جداگانه نیست کتابخانه react-router-config به ما قابلیت تعریف کردن route ها رو به صورت آبجکت های جاوا اسکریپتی به جای المان های ری اکتی میداد، که تمامی توابع این کتابخانه به هسته نسخه ششم اضافه شده است. نسخه پنجم: نسخه ششم: کلمه useNavigate جایگزین useHistory شده است. در نسخه ششم router مسیریابی تغییراتی داشته که useHistory در بیشتر جاها جایگزین useHistory شده است. بعضی از قابلیت های پر استفاده تابع useHistory مثل go, goBack و goForward را هم میتوان با useNavigate پیاده سازی کرد فقط باید به router بگیم که چند مرحله جلو یا عقب بره. که برای جلو رفتن از اعداد مثبت و برای برگشت به عقب از اعداد منفی استفاده میکنیم. نسخه پنجم : نسخه ششم: دیگه NavLink هیچ prop ای به عنوان activeClassName و activeStyle نداره در نسخه های قبلی میتونستیم کلاس یا استایل جداگانه ای به NavLink بدیم زمانی که NavLink مورد نظرمون فعال بود، ولی در نسخه ششم router، این دو prop حذف شده و برای دستیاب به نتیجه قبلی باید از روشی متفاوت عمل کنیمد. در نسخه ششم NavLink یک تابع که به ما یک سری اطلاعات میده رو به صورت ورودی میگیره که راحت تر و بهتر استایل ها رو کنترل کنیم. جایگزینی Redirect با Navigate در نسخه ششم دیگه Redirect در کتابخانه react-router-dom وحود نداره و به جاش از Navigate استفاده میکنیم. امیدوارم این مقاله برای استفاده از نسخه ششم react-router-dom بهتون کمک کرده باشه.
نیما خاکی
پیاده سازی منطق Refresh Token با JWT و Axios
پیاده سازی منطق Refresh Token با JWT و Axios تو این پست میخوایم منطق Refresh Token رو در کتابخانه React با کمک کتابخانه محبوب Axios پیاده سازی کنیم. زمانی که کاربر از صفحه یا قسمت ورود مشخصات کاربری خودش رو وارد میکنه، در صورت درست بودن اطلاعات وارد شده، از سرور یک Access Token و یک Refresh Token میگیره. با کمک Interceptor های Axios اپلیکیشن ری اکت ما میتونه چک کنه که آیا در آخرین درخواستی که به سمت سرور فرستاده شده، توکن JWT ما منقضی شده یا نه. که در صورت منقضی بودن Access Token ما، Axios یه درخواست برای تازه سازی Access Token میده و به صورت اتوماتیک آخرین درخواستی که به خاطر معتبر نبودن توکن به خطای سروری(401) خورده بود رو تکرار میکنه. برای درک بهتر این مفاهیم بیاین به این تیکه کد باهم نگاه کنیم. در تکه کد بالا وقتی یک درخواست به سرور به خطا میخوره اول چک میکنیم که از صفحه ورد نباشه( چون در این صورت یعنی کاربر نام کاربری و یا رمز عبور رو اشتباه وارد کرده و نیازی به refresh token نیست.) در مرحله بعد چک میکنیم که آیا خطای سرور از نوع 401 هست یا نه؟(خطای معتبر نبودن و یا منقضی شدن token) و اینکه آیا این مرحله رو قبلا برای این درخواست تکرار کردیم یا خیر که اگه شروط ما true برگردونه اول متغیری که تکراری بودن درخواست رو در خودش ذخیره میکنیم به حالت true در میاریم که در صورت تکرار همین خطا با همین شرایط برنامه تو حلقه بی پایان گیر نکنه و بعدش access token رو به روز رسانی میکنیم و در نهایت هم درخواستمون رو تکرار میکنیم و به سمت سرور میفرستیم. با همین چند خط کد میتونیم منطق refresh token رو به صورت اتوماتیک پیاده سازی کنیم.
.jpg)
مهدی نعمتی
چه شرکت هایی از فلاتر استفاده میکنن
اگه هنوز هم به قدرت فلاتر ایمان نیاوردین، تو این پست میخوایم چندتا از پروژه های خوب فلاتری که توسط شرکت های بزرگ توسعه داده شده رو بررسی کنیم تا ببینیم چقدر فلاتر میتونه قدرت داشته باشه Google Pay سرویس گوگل پی بیش از 100 میلیون کاربر تو کشور های مختلف داره و اپی که برای این کار داشته و حدود 1.7 میلیون خط کد برای اندروید و ios نوشته بودن. یه حساب و کتاب ساده هم انجام بدیم متوجه میشیم یه تغییر تو یه لاجیک چه وقتی رو از تیم توسعه میگرفته یا اینکه اگه مشکلی وجود داشت باید دو تا اپ با هم مشکلشون حل میشد. از اون سمت هم برای هر پلتفرم نیاز به تیم و افراد بیشتری هم بوده. اینجوری شد که گوگل تصمیم گرفت این پروژه رو به فلاتر منتقل کنه، که نتیجه این کار به این شکل شد که : حدود 70% کار کردن روی این پروژه کمتر شد حدود 35% هم تعداد خط از کد ها کمتر شد این تغییر تا حدی خوب بود که David Ko مدیر بخش مهندسی (Engineering Director) گفته بود که : «همه فلاتر را دوست داشتند؛ می توانستیم هیجان را در چهره های افراد ببینیم که در مورد سرعت ساخت یک رابط کاربری صحبت می کردند.» eBay ایبی رو که همه میشناسیم تقریبا، داستان از اونجا شروع میشه که کسایی که تو کار خرید و فروش ماشین بودن به ایبی اعتماد خاصی داشتن، و تو سال 2018 تیم eBay Motors با خودشون میگن یه اپ مخصوص این افراد تولید کنیم که کارشون راحتتر بشه، بعد از اینکه تیمشون نشست و بررسی کرد متوجه شدننوشتن دو تا اپ یکی برای اندروید و یکی ios تو اون مدت زمانی که داشنن غیر ممکنه، برای همین دنبال یه سیستم چند پلتفرمی میگشت. اون زمان تازه نسخه های اولیه فلاتر منتشر شده بود و ایبی تقریبا یک ماهی رو روی بررسی فلاتر وقت گذاشت در نهایت فلاتر رو انتخاب کرد. ایبی یه گروهی رو فرستاد به یه دوره آموزش فلاتر و بعدش کارش رو شروع کرد، و هرچقدر هم کارا رو پیش میبردن بیشتر از این فریمورک لذت میبردن تا جایی که کوری اسپراگ، مهندس ارشد (Senior iOS Engineer) گفته بود که "فلاتر نه تنها انتظارات ما را برآورده کرده، بلکه به طور چشمگیری از آنها فراترهم رفته است." یه نگاهی هم بخوایم به آمار ایبی از این کار بندازیم میرسیم به اطلاعات زیر : 98.3 درصد کدهای مشترک بین پلتفرم ها سرعت توسعه تقربیا دو برابری تمامیه توسعه دهندگان گفتن که فلاتر رو به روش های فعلی ترجیح میدن! لینک مقاله رو در سایت ایبی میتونید تو این لینک مشاهده کنید Alibaba Group علی بابا بزرگترین فروشگاه دست دوم کالای تو کشور چین هست که یه بخشی از کارش رو روی اپ فلاتر آورده، وقتی که تیم Xianyu خواست یه برنامه ای داشته باشن که کراس پلتفرم (cross platforms)، از سرعت و پرفرمنس بالایی برخوردار باشه اومد سراغ فلاتر Sua Musica اپی که بیش از 10 میلیون کاربر فعال تو ماه داره، بعد از استفاده از فلاتر یه آماری داده : بیش از 350 درصد افزایش رضایت بیش از 13 درصد افزایش در eCPM Toyota شرکت ژاپنی تویوتا هم دنبال یه سیستمی بوده که بتونه باهاش رابط گرافیکی قدرتمندی رو ایجاد کنه و از اون سمت هم بتونه با سیستم موجود خودش رو وفق بده،بعد از استفاده از فلاترخیلی راضی بودن تا اونجایی که دانیل هال، مهندس ارشد تویوتا موتور توآمریکای شمالی دلیل اصلی موفقیت فلاتر تو شرکت رو متن باز بودن و جامع نرم افزاری قوی اون اعلام کرده خب اپ های خارجی رو بررسی کردیم؛ یه اپ دیگه ای هم هست که تو ایران با فلاتر نوشته شده که خیلی هم معروفه تلوبیون وارد توضیحات بیشتر نمیشیم، اپیه که معروفه و خیلی ازش استفاده میکنن، یه جمله ای از طرف برنامه نویسش میزارم فقط : "این پروژه چالش واقعا بزرگی برای من بود و از طرفی ریسک زیادی هم داشت، چون تا به حال هیچ برنامه ای در ایران با 14 میلیون نصب فعال، با فریمورک نوپایی مثل فلاتر پیاده سازی نشده بود."
مهدی نعمتی
ویجت Expanded در فلاتر
امروز هم میخوایم یه ویجت خیلی کاربردی رو معرفی کنیم، ویجتی که میتونه جای خالی رو پر کنه ! قبلا در رابطه با ویجت های Column ( لینک معرفی ) و ویجت Row ( لینک معرفی ) صحبت کردیم و دیدیم که چجوری کار میکنن و واسه چه کاری به وجود اومدن. مثلا برای ویجت Row اگه بخوایم ببینیم چیکار میکنه، اینجوریه که اگه کدی شبیه به زیر داشته باشیم Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ MyWidget(), MyWidget(), MyWidget(), ], ), خروجی شبیه به زیر رو خواهیم داشت : تو یه سری از سناریو ها پیش میاد که ما نیاز داشته باشیم یه ویجتی بیاد کل فضای خالی رو برای خودش بگیره ، مثلا تو تصویر بالا به جای اینکه آیتم وسط دو طرفش خالی باشه، کل فضای خالی رو برای خودش بگیره، تو این حالت میتونیم از ویجت Expanded استفاده کینم. به کد زیر دقت کنید : Row( children: [ MyWidget(), Expanded( child: MyWidget(), ), MyWidget(), ], ), با توجه به این کد ما خروچی شبیه به این رو خواهیم گرفت : ما وامدیم تو ویجت Row توضیح دادیم و نشون دادیم چجوری قرار میگیره، تو ویجت Column هم شرایطی دقیقت مثل همین ویجت Row را خواهیم داشت و هیچ تفاوتی نداره. حالا بعضی مواقع پیش میاد که ما دو تا از ویجت های ما باید فضای خالی رو پر کنند که میتونیم دو تا ویجت Expanded استفاده کنیم، یا مواردی هم پیش میاد که جای خالی موجود نباید به صورت مساوی بین ویجت های Expanded تقسیم بشه، تو این حالت ما میتونیم از پراپرتی flex استفاده کنیم و مقدار را برای آن تنظیم کنیم، به کد زیر دقت کنید : c hildren: [ MyWidget(), Expanded( flex: 2, child: MyWidget(), ), MyWidget(), Expanded( flex: 1, child: MyWidget(), ), ], ), خروجی کد بالا به شکل زیر خواهد بود : با توجه به کد و خروجی مشخصه که ویجتی که پراپرتی flex با مقدار 2 را گرفته دو برابر فضا را نسبت به ویجتی که پراپرتی flex با مقدار 1 را گرفته اشغال کرده است.