ارتباط با سرور و API در فلاتر

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

تقریبا اپلیکیشن های آفلاین مثل کتاب ها امروزه کاربردی ندارند و برای اینکه برنامه شما امکانات خوبی و در اختیار کاربر قرار بده باید حتما به یک سرور متصل شود.

اما بیشتر درباره اتصال به سرور و API توضیح بدم.

در یک سمت کار ما یک اپلیکیشن داریم که به آن کلاینت گفته می شود این برنامه توسط کاربر های معمولی نصب و استفاده می شود.

کلاینت میتواند یک وبسایت, اپلیکیشن موبایل, نرم افزار کامپیوتر یا هر چیز دیگری باشد.

در سمت دیگر ما یک سرور در اختیار داریم تا اطلاعاتی که نیاز هست کاربر اپلیکیشن به آن دسترسی پیدا کند و در آن ذخیره کنیم.

به طور کلی روش کار به این شکل هست که ابتدا کلاینت یک درخواست به سمت سرور ارسال می کنید و سرور هم با توجه به درخواست جواب یا Response مورد نظر را به کلاینت میفرستد.

ارتباط بین کلاینت و سرور توسط یک رابط به نام API انجام می شود.

در واقع API مثل یک پل عمل میکند, صرف نظر از تکنولوژی و زبان های برنامه نویسی که در سرور و کلاینت استفاده شده یک API باید بتواند با هردوی آنها ارتباط برقرار کند.

روش استانداری که برای ساخت API های آنلاین به کاربرده می شود استفاده از جیسون JSON هست.

جیسون ها در اکثر زبان های برنامه نویسی پشتیبانی می شود پس ما مشکلی بابت دریافت و تحلیل داده های جیسون نداریم.

ساختار جیسون

جیسون ها دو بخش مهم دارند یکی Json Object و دیگری Json Array هست.

ذخیره سازی اطلاعات در جیسون ها مثل ساختمان داده Map می باشد که هر آیتم یک کلید یا نام دارد.

Json Object ها درون یک جفت علامت {} قرار میگیرند. به شکل زیر.

{
"title": "json api"{

در مثال بالا یک آبجکت داریم که این آبجکت یک فیلد به نام title دارد و مقدار آن برابر است با json api

میتونیم برای آبجکت های خودمون یک اسم نیز قرار بدهیم.

Json Array ها هم مثل آبجکت ها هستند اما با علامت [ ] شروع می شوند.

داخل هر Json Array میتوان چندین Json Object قرار داد.

به شکل زیر دقت کنید.

شماره ۱ و ۲ نشان دهنده یک json object هستند هر دو

اما شماره یک json array نیز داخل خود دارد.

حالا نوبت به آن رسیده که باهم دیگه نحوه پیاده سازی ارتباط با API و در فلاتر Flutter یاد بگیریم.

برای کار با سرور در فلاتر از پکیج http استفاده خواهیم کرد.

چون کار ارتباط با سرور یک کار زمان بر هست ما از Future ها استفاده خواهیم کرد.

ابتدا یک کلاس جدید به نام Post میسازیم و کدهای زیر را در آن قرار میدهیم.

class Post {
  final int userId;
  final int id;
  final String title;
  final String body;

  Post({this.userId, this.id, this.title, this.body});

  factory Post.fromJson(Map json) {
    return Post(
      userId: json['userId'],
      id: json['id'],
      title: json['title'],
      body: json['body'],
    );
  }
}

اطلاعاتی که ما از سرور دریافت میکنیم از نوع Map هست به همین خاطر یک متد سازنده برای کلاس خودمون ایجاد کردیم که کار تبدیل این Map به Post و انجام میده.

حالا کدهای دریافت اطلاعات از سرور

Future fetchPost() async {
  final response =
      await http.get('https://jsonplaceholder.typicode.com/posts/1');

  if (response.statusCode == 200) {
    // If server returns an OK response, parse the JSON
    return Post.fromJson(json.decode(response.body));
  } else {
    // If that response was not OK, throw an error.
    throw Exception('Failed to load post');
  }
}

در کد بالا با دستور http.get یک درخواست به آدرس سرور یا API ایی که داریم ارسال میکنیم.

سپس با استفاده از دستور json.decode(response.body) این اطلاعات و به Map تبدیل کرده و به متدی که در کلاس Post طراحی کرده بودیم ارسال می کنیم.

حالا اگر متد fetchPost صدا بزنم یک Post برای من برمیگرداند که در هر کجای برنامه نیاز داشته باشم می توانم این اطلاعات و نمایش دهم.

برای مثال ما به شکل زیر عمل میکنیم.

 FutureBuilder(
  future: fetchPost(),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Text(snapshot.data.title);
    } else if (snapshot.hasError) {
      return Text("${snapshot.error}");
    }

    // By default, show a loading spinner
    return CircularProgressIndicator();
  },
);