چهار روش آسان برای دیباگ درخواست شبکه در فلاتر — از صفر تا صد

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

گزینه‌های مختلف برای دیباگ شبکه

با این که تیم فلاتر در حال برنامه‌ریزی برای افزودن یک پروفایلر شبکه به Flutter DevTools هستند، اما هنوز این کار انجام نیافته است. با این حال، برخی ابزارهای دیگر وجود دارند که می‌توان به این منظور مورد استفاده قرار داد. در ادامه گزینه‌های موجود برای دیباگ درخواست‌های شبکه را بررسی می‌کنیم.

فیلم آموزش پروژه محور فلاتر – طراحی اپلیکیشن موبایل با Flutter – مقدماتی در فرادرس

کلیک کنید

گزینه اول: لاگ کردن به شیوه قدیمی

با استفاده از پکیج logs (+) می‌توان درخواست‌های شبکه را مستقیماً در نمای logging در Flutter DevTools و یا در کنسول سیستم نوشت. این روش بسیار ابتدایی محسوب می‌شود، اما به هر حال راه‌اندازی آن آسان است.

ابتدا باید پکیج logs (+) را نصب کنید. سپس لاگ HTML را در اپلیکیشن فلاتر فعال کنید:

1// main.dart
2
3import 'package:logs/logs.dart';
4
5final Log httpLog = Log('http');
6
7void main() {
8
9httpLog.enabled = true;
10
11}

زمانی که کد فوق را به اپلیکیشن خودتان اضافه کردید، Flutter DevTools را باز کنید و به نمای Logging بروید. در این نما زمان ارسال شدن درخواست‌های HTTP را می‌بینید:

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

گزینه دوم: استفاده از Alice

Alice (+) یک بازبینی‌کننده HTTP برای فلاتر است. Alice به طور عمده از روی ابزار Chuck برای اندروید ساخته شده است.

جالب‌ترین نکته در مورد Alice این است که اینترفیس آن را مستقیماً درون اپلیکیشن مشاهده می‌کنید. به این ترتیب برای مشاهده درخواست‌ها یک اپلیکیشن دسکتاپ مجزا یا کنسول جداگانه وجود ندارد. همه درخواست‌های HTTP لاگ می‌شوند و از طریق یک UI که از درون اپلیکیشن فلاتر در دسترس است نمایش می‌یابند.

آغاز کار با آلیس

برای کسب اطلاع در مورد شیوه نصب و دستورالعمل‌های آن به مستندات رسمی (https://pub.dev/packages/alice) این پکیج مراجعه کنید.

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

گزینه سوم: استفاده از Flipper

Flipper (+) یک اپلیکیشن دسکتاپ است که از سوی فیسبوک عرضه شده و امکان دیباگ کردن اپلیکیشن‌های اندروید و iOS را فراهم می‌سازد. تقریباً مشابه آن چیزی که در کلاینت‌های REST از قبیل Postman و Insomnia دیدیم، درخواست‌های شبکه به بخش‌های مختلف تجزیه می‌شوند و به این ترتیب دیدن هدر، وضعیت متد و موارد دیگر بسیار آسان خواهد بود.

در زمان استفاده از Flipper، علاوه بر این که می‌توانید درخواست‌های شبکه خود را دیباگ کنید، برخی پلاگین‌های واقعاً جالب نیز برای مشاهده Shared Preferences, SQLite databases, Redux stores و غیره وجود دارند. Flipper اینک به طور رسمی تنها برای Flipper عرضه شده است، اما صفحه گیت‌هاب آن اعلام کرده است که امکان استفاده از آن روی ویندوز و لینوکس نیز وجود دارد.

آغاز کار با Flipper

Flipper را می‌توانید از این لینک (+) دانلود کنید. سپس باید پکیج flutter_flipperkit (+) ‌را نصب کنید.

نکات نصب

پس از این که از دستورالعمل‌های نصب flutter_flipperkit پیروی کردید، باید مطمئن شوید که اپلیکیشن را یک بار متوقف و دوباره آغاز می‌کنید، چون تغییرهای اعمال‌شده روی main.dart از طریق hot reload تأثیر نمی‌گذارند.

اگر Podfile را ویرایش کرده‌اید و قصد دارید اپلیکیشن را روی شبیه‌ساز iOS اجرا کنید، ممکن است با پیامی به صورت Running Pod Install پس از آغاز اپلیکیشن مواجه شوید. این کار ممکن است مدت بسیار زیادی طول بکشد و این زمان طولانی شاید شما را به شک بیندازد که پردازش هنگ کرده است، اما مشکل اینجا است که در عمل هیچ نوار پیشروی نمایش نمی‌یابد. بنابراین باید صبر کنید تا کار آن به پایان برسد.

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

The 'Pods-Runner' target has transitive dependencies that include statically linked binaries

زمانی که این پکیج را نصب کردید، می‌توانید اپلیکیشن دسکتاپ Flipper را باز کرده و برخی درخواست‌های شبکه را ایجاد نمایید.

Flipper یک اپلیکیشن همو‌اره برای دیباگ درخواست‌های شبکه در فلاتر، دیدن لاگ و گزارش‌های کرش برای iOS و اندروید است. بخش Network inspector مشابه Insomnia یا Postman است و این نکته خوبی محسوب می‌شود. امکان بسط امکانات این اپلیکیشن با استفاده از پلاگین‌ها وجود دارد و بدین ترتیب می‌توانید پایگاه‌های داده SQLite، بخش Shared Preferences و غیره را ببینید. یک عیب این اپلیکیشن آن است که هنوز روی دستگاه‌های فیزیکی کار نمی‌کند و عیب دیگر آن این است که نیازمند برخی وابستگی‌های بیرونی است که زمان بیلد شدن اپلیکیشن را تا حدود زیادی کُند می‌کنند.

گزینه چهارم: استفاده از یک پراکسی دیباگ

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

چرا باید از پراکسی استفاده کرد؟

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

آغاز کار با Charles

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

استفاده از Charles به همراه فلاتر

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

اما خبر خوب این است که می‌توانید این مشکل را به طور دستی با پیکربندی کلاینت HTTP فلاتر برای استفاده از چارلز به عنوان پراکسی رفع کنید. بسته به کلاینتی که استفاده می‌کنید، مراحل کار کمی متفاوت خواهد بود. در این مقاله موارد زیر را توضیح می‌دهیم:

• کلاس HttpClient دارت
• پکیج http
• Dio

اگر از HttpClient استفاده می‌کنید:

1// Make sure to replace <YOUR_LOCAL_IP> with 
2// the external IP of your computer if you're using Android. 
3// Note that we're using port 8888 which is Charles' default.
4String proxy = Platform.isAndroid ? '<YOUR_LOCAL_IP>:8888' : 'localhost:8888';
5
6// Create a new HttpClient instance.
7HttpClient httpClient = new HttpClient();
8
9// Hook into the findProxy callback to set
10// the client's proxy.
11httpClient.findProxy = (uri) {
12  return "PROXY $proxy;";
13};
14
15// This is a workaround to allow Charles to receive
16// SSL payloads when your app is running on Android
17httpClient.badCertificateCallback = 
18  ((X509Certificate cert, String host, int port) => Platform.isAndroid);

در صورتی که از پکیج http استفاده می‌کنید، مراحل پیکربندی Charles برای پکیج http تقریباً همانند مراحل کار در مورد پکیج HttpClient است.

1. وهله جدیدی از HttpClient را پیکربندی کنید تا چنان که در کد فوق دیدیم به پراکسی شما اشاره کند.
2. وهله جدیدی از http.IOClient را با وهله HttpClient که هم اینک ایجاد کردید بسازید.

IOClient همان اینترفیس را که در مثال http به صورت canonical دیدیم، برای ایجاد درخواست‌ها در اختیار شما قرار می‌دهد:

1// Make sure to replace <YOUR_LOCAL_IP> with 
2// the external IP of your computer if you're using Android. 
3// Note that we're using port 8888 which is Charles' default.
4String proxy = Platform.isAndroid ? '<YOUR_LOCAL_IP>:8888' : 'localhost:8888';
5
6// Create a new HttpClient instance.
7HttpClient httpClient = new HttpClient();
8
9// Hook into the findProxy callback to set
10// the client's proxy.
11httpClient.findProxy = (uri) {
12  return "PROXY $proxy;";
13};
14
15// This is a workaround to allow Charles to receive
16// SSL payloads when your app is running on Android.
17httpClient.badCertificateCallback = 
18  ((X509Certificate cert, String host, int port) => Platform.isAndroid);
19
20// Pass your newly instantiated HttpClient to http.IOClient.
21IOClient myClient = IOClient(httpClient);
22
23// Make your request as normal.
24var response = myClient.get('/my-url');

در صورتی که از Dio استفاده می‌کنید، کد مورد نیاز شما به صورت زیر است:

1// Make sure to replace <YOUR_LOCAL_IP> with 
2// the external IP of your computer if you're using Android. 
3// Note that we're using port 8888 which is Charles' default.
4String proxy = Platform.isAndroid ? '<YOUR_LOCAL_IP>:8888' : 'localhost:8888';
5
6// Create a new Dio instance.
7Dio dio = Dio();
8
9// Tap into the onHttpClientCreate callback
10// to configure the proxy just as we did earlier.
11(dio.httpClientAdapter as DefaultHttpClientAdapter).onHttpClientCreate = (client) { 
12  // Hook into the findProxy callback to set the client's proxy.
13  client.findProxy = (url) {
14    return 'PROXY $proxy';
15  };
16  
17  // This is a workaround to allow Charles to receive
18  // SSL payloads when your app is running on Android.
19  client.badCertificateCallback = (X509Certificate cert, String host, int port) => Platform.isAndroid;
20}

نکاتی در مورد پراکسی کردن SSL

اگر اپلیکیشن شما به یک سرور وصل می‌شود که SSL را اجرا می‌کند، باید گزینه پراکسی کردن SSL را نیز در Charles تنظیم کنید. نخستین گام، نصب گواهینامه ریشه Charles است. دستورالعمل‌های انجام این کار بسته به این که شیوه اتصال شما به چارلز از طریق دستگاه فیزیکی iOS یا شبیه‌ساز باشد، متفاوت خواهد بود. بنابراین برای کسب اطلاعات دقیق از این لینک (+) استفاده کنید.

زمانی که گواهینامه‌های لازم نصب شدند و شروع به لاگ کردن درخواست‌های شما کرد، ممکن است در زمان مشاهده یکی از درخواست‌ها با خطای زیر مواجه شوید:

SSL Proxying not enabled for this host: enable in Proxy Settings, SSL locations.

برای اصلاح این خطا کافی است روی درخواست راست-کلیک کرده و گزینه Enable SSL Proxying را از منو انتخاب کنید تا همه چیز به روال مناسب خود بازگردد.

مزایا و معایب Charles

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

از سوی دیگر عیب Charles این است که رایگان نیست، اما اگر دیباگ کردن درخواست‌های شبکه برای شما اهمیت زیادی دارد، بدیهی است که در مورد پرداخت حق اشتراک آن مشکلی نخواهید داشت. از طرفی در مورد iOS اپلیکیشن Proxyman تقریباً همان امکانات Charles را ارائه می‌کند و رابط کاربری بهتری نیز دارد.

مشکل دیگر Charles این است که تنظیم آن سرراست نیست، گرچه دشوار هم محسوب نمی‌شود. تنها دشواری آن تنظیم حالتی است که اپلیکیشن لوکال شما SSL را اجرا کند.

سخن پایانی

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

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

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

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

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های برنامه‌نویسی اندروید
• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش فریمورک Google Flutter برای طراحی اپلیکیشن‌های موبایل
• ایجاد سرویس در اپلیکیشن فلاتر — از صفر تا صد
• آشنایی با فلاتر و DartPad — راهنمای مقدماتی

==