کار با شبکه در فلاتر | به زبان ساده

در زمان توسعه اپلیکیشن‌های موبایل، کار با API-ها امری ناگزیر محسوب می‌شود. حال سؤال این است که روش صحیح استفاده از API در اپلیکیشن‌های فلاتر چیست؟ در این مقاله به بررسی روش کار با شبکه در فلاتر می‌پردازیم و چند پروژه عملی را معرفی خواهیم کرد.

قبل از هر چیز، کدام REST API؟

پیش از آن که شروع به کار روی پروژه‌های فلاتر بکنیم، باید API خود را راه‌اندازی بکنیم. در این مثال، از API مربوط به OpenWeatherMap استفاده می‌کنیم. با کلیک روی این لینک (+) و ثبت نام در وب‌سایت مربوطه یک API_KEY به دست می‌آورید که برای ارسال فراخوانی‌های API مورد نیاز است. پس از ثبت نام در وب‌سایت OpenWeatherMap و دریافت کلید API می‌توانید شروع به پیکربندی اپلیکیشن فلاتر بکنید.

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

کلیک کنید

شروع Retrofit

فرض می‌کنیم شما از قبل یک پروژه فلاتر دارید که آن را راه‌اندازی و اجرا کرده‌اید. در این بخش نخستین وابستگی را به فایل pubspec.yaml اضافه می‌کنیم تا کلاینت API خود را راه‌اندازی کنیم:

dependencies:
   dio: 3.0.9
   retrofit: 1.3.4

dev_dependencies:
   retrofit_generator: 1.3.4+1
   build_runner: 1.9.0

• Dio کلاینت Http ما است که اتصال را برای ما مدیریت می‌کند.
• Retrofit یک کلاینت Dio است که مصرف API-های REST را برای ما آسان‌تر می‌سازد.
• Build runner برای تولید کد در Dart استفاده می‌شود و جدا از pub است.

پس از اجرای دستور زیر می‌توانید شروع به تنظیم کردن کلاینت بکنید:

flutter pub get

در ادامه یک کلاس جدید اضافه کرده و آن را به صورت RestApi با یک URL مبنا از طریق یک «حاشیه‌نویسی» (annotation) تعریف می‌کنیم.

• فایل ow_api.dart

1import 'package:dio/dio.dart';
2import 'package:retrofit/retrofit.dart';
3
4part 'ow_api.g.dart';
5
6@RestApi(baseUrl: "https://community-open-weather-map.p.rapidapi.com")
7abstract class OwApi {
8  factory OwApi(Dio dio, {String baseUrl}) = _OwApi;
9}

به بخش part در زیر ایمپورت‌ها توجه کنید. این بخش به منظور تولید کد استفاده می‌شود. در ادامه دستور زیر را اجرا می‌کنیم:

flutter packages pub run build_runner build

به این ترتیب از build runner استفاده می‌کنیم و کد را برای کلاینت خود در کلاسی که در part تعریف شده است، تولید خواهیم کرد. زمانی که بیلد رانر پایان یافت،‌ آن را در همان پکیج به صورت کلاس API مشاهده می‌کنید. اینک تنظیم کلاینت API پایان یافته است.

تجزیه JSON: تعریف مدل

کار خود را با تعریف کردن مدل پاسخ پیش از پیاده‌سازی عملی فراخوانی API اول آغاز می‌کنیم.

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

کلیک کنید

ما روی پاسخ کامل این مثال تمرکز نمی‌کنیم، بلکه به جای آن به بخشی توجه خواهیم کرد که شامل دمای کنونی است:

1{
2  "main":{
3    "temp":284.04,
4    "pressure":1011,
5    "humidity":93,
6    "temp_min":280.93,
7    "temp_max":287.04
8  },
9}

بنابراین اکنون می‌دانیم که قرار است چیزی دریافت کنیم. در ادامه یک وابستگی برای شروع تجزیه پاسخ JSON اضافه می‌کنیم:

json_serializable: 3.3.0

اینک می‌توانیم دست به کار ایجاد برخی کلاس‌ها برای نمایش پاسخ بکنیم. کار خود را از کلاس پاسخ وضعیت آب‌وهوا آغاز می‌کنیم و کلاس دیگری برای بلوک اصلی می‌سازیم. کافی است هر فیلد را پیاده‌سازی کرده و کلاس را با ()JsonSerializable@ آغاز کنیم.

1import 'package:json_annotation/json_annotation.dart';
2
3part 'weather_response.g.dart';
4
5@JsonSerializable()
6class WeatherResponse {
7  final MainResponse main;
8
9  WeatherResponse({this.main});
10
11  factory WeatherResponse.fromJson(Map<String, dynamic> json) => _$WeatherResponseFromJson(json);
12  Map<String, dynamic> toJson() => _$WeatherResponseToJson(this);
13}
14
15@JsonSerializable()
16class MainResponse {
17  final double temp;
18
19  MainResponse({this.temp});
20
21  factory MainResponse.fromJson(Map<String, dynamic> json) => _$MainResponseFromJson(json);
22  Map<String, dynamic> toJson() => _$MainResponseToJson(this);
23}

کافی است build runner را اجرا کنیم تا بتوانیم دمای کنونی را از پاسخ کنونی تجزیه کنیم.

افزودن فراخوانی API نخست

اینک به کلاینت خودمان بازمی‌گردیم. ما قصد داریم از یک درخواست GET برای واکشی دمای کنونی استفاده کنیم.

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

کلیک کنید

با مراجعه به مستندات API می‌بینیم که باید برخی هدرها را به درخواست خود اضافه کنیم و همچنین یک پارامتر کوئری برای موقعیت مکانی مورد تقاضا داشته باشیم. خوشبختانه Retrofit اجرای این کار را برای ما بسیار آسان ساخته است.

1@GET("/weather")
2@Headers(<String, String>{
3  "x-rapidapi-host": "community-open-weather-map.p.rapidapi.com",
4  "x-rapidapi-key": "{YOUR_API_KEY}"
5})
6Future<WeatherResponse> getCurrentWeather(
7  @Query('q') String location,
8);

قطعه کد فوق کاملاً گویا است. ما می‌توانیم از یک «حاشیه‌نویسی» (Annotation) برای تعریف کردن نوع درخواستی که می‌خواهیم ارسال کنیم (GET ،POST ،PUT و غیره)، بهره بگیریم. با استفاده از یک حاشیه‌نویسی می‌توانیم هدرهای اضافی را افزوده و پارامترهای حاشیه‌نویسی شده‌ای را برای تعریف یک پارامتر کوئری اضافه کنیم. اغلب کاربردها باید پوشش داده شوند. با مراجعه به مستندات (+) می‌توانید ببینید که چطور با نیازهای شما تطبیق می‌یابد.

تعریف کردن هدرها برای هر فراخوانی یک کار تکراری است و از این رو باید Dio را طوری پیکربندی کنید که همه کارهای عمومی را تا حد امکان شامل شود.

ارسال فراخوانی

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

1final dio = Dio(); // Provide a Dio instance to the client
2final client = OwApi(dio); // Initialise the client
3
4// Do the request and print the current temperature of Amsterdam
5client.getCurrentWeather('Amsterdam')
6    .then((response) => print(response.main.temp));

بهتر است از یک service locator برای دریافت وابستگی مانند Dio یا کلاینت API در سراسر پروژه بهره بگیریم و مطولب‌تر است از Get it (+) برای آن استفاده کنیم. Retrofit پیاده‌سازی فراخوان‌ها را بسیار آسان ساخته است، تبدیل نوع خودکار نیز مزیت خوبی نسبت به مدیریت همه چیز از طریق Dio دارد.

سخن پایانی

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