آموزش ارتباط با سرور و API در فلاتر

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

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

در مطالب دیگر درباره دو روش ارتباط با سرور در فلاتر صحبت کرده ایم.

آموزش رتروفیت در فلاتر

آموزش Dio در فلاتر (پیشنهادی)

معماری کلاینت و سرور

معماری کلاینت-سرور یکی از معماری‌های شبکه است که در آن، وظیفه ارائه خدمات و منابع بر عهده سرور بوده و کلاینت (مشتری) برای دسترسی به این منابع به سرور متصل می‌شود و درخواست‌های خود را مطرح می‌کند.

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

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

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

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

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

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

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

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

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

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

وب سرویس چیست؟

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

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

وب سرویس نیز به عنوان یکی از ابزارهای مهم در معماری کلاینت-سرور به کار می‌رود. وب سرویس‌ها برای ارائه خدمات و منابع به کلاینت‌ها مورد استفاده قرار می‌گیرند. در اینجا، وب سرویس به عنوان یک سرویس اینترنتی، توسط سرور ارائه می‌شود و کلاینت‌ها می‌توانند با ارسال درخواست‌های خود، از خدمات وب سرویس استفاده کنند.

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

API یک نوع وب سرویس است. به طور کلی، API مخفف عبارت “Application Programming Interface” است و به رابطهایی اطلاق می‌شود که برای تعامل برنامه‌نویسان با یک سیستم و یا سرویس خاص، ایجاد شده‌اند. در واقع، API به برنامه‌نویسان این امکان را می‌دهد تا با استفاده از این رابط‌ها، به منابع و سرویس‌های دیگر دسترسی داشته باشند و از آن‌ها استفاده کنند.

JSON چیست و چه کاربردی دارد؟

JSON مخفف عبارت “JavaScript Object Notation” است و یک فرمت متنی است که برای تبادل داده بین مرورگر و سرور و بین برنامه‌های مختلف استفاده می‌شود. فرمت JSON از ساختار داده‌ای ساده و خوانا برخوردار است و برای نمایش اشیاء ساختار یافته و داده‌های ساختار یافته (مانند لیست‌ها و دیکشنری‌ها) استفاده می‌شود.

با توجه به سادگی و پراستفاده بودن فرمت JSON، بسیاری از سرویس‌های وب، پروتکل‌ها و کتابخانه‌های برنامه‌نویسی محبوب از آن استفاده می‌کنند.

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

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

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

{
"title": "json api"
}

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

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

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

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

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

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

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

انواع درخواست های HTTP

برای کار با وب سرویس و API های سطح ابتدا باید یک درخواست به سرور ارسال شود.

این درخواست از طریق پروتکل HTTP صورت می پذیرد که انواع مختلفی دارد.

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

در درخواست GET، داده‌ها به صورت پارامترهای URL ارسال می‌شوند و در نتیجه محدودیتی برای حجم داده وجود دارد. در این روش هر اطلاعاتی که بخواهید به سرور ارسال شود داخل بدنه آدرس URL قرار میگیرد و از نظر امنیت نیز میتواند مشکل ساز شود.

در مقابل، در درخواست POST، داده‌ها به صورت بدنه یا اصطلاحا درون Body درخواست ارسال می‌شوند و بنابراین محدودیتی برای حجم داده وجود ندارد.

استفاده از وب سرویس API در فلاتر

حالا نوبت به آن رسیده که باهم دیگه نحوه پیاده سازی ارتباط با 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<string, dynamic=""> json) {
    return Post(
      userId: json['userId'],
      id: json['id'],
      title: json['title'],
      body: json['body'],
    );
  }
}

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

برای دریافت اطلاعات از وب سرویس متد زیر را به نام fetchPost تعریف میکنیم.

Future<post> 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<post>(
  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();
  },
);

چون متد مورد نظر از نوع Future بود از ویجت FutureBuilder برای نمایش اطلاعات بازگشتی از طرف این متد استفاده میکنیم. با این کار تا زمانی که اطلاعات هنوز دریافت نشده اند میتوانیم پیام مناسبی به کاربر نمایش دهیم.

در مثال بالا درخواستی که ارسال کردیم همانطور که از نام متد مشخص است از نوع درخواست GET میباشد.

برای ارسال درخواست از نوع POST کافیست از متد post استفاده کنید.

  var url = 'http://example.com/api';
  var response = await http.post(Uri.parse(url), body: {
    'testParam': 'Hello World',
  });
  

در مثال بالا یک درخواست از نوع POST ایجاد کردیم.

برای ارسال اطلاعات به سرور از پارامتری به نام body استفاده میکنیم که یک json object دریافت میکند.

مابقی مسائل پردازش اطلاعات دریافتی تفاوتی با مثال های قبلی ندارد.

ارسال اطلاعات به وسیله Header

درخواست‌های HTTP شامل هدرهایی هستند که اطلاعات مختلفی را شامل می‌شوند. این هدرها از قسمت‌هایی مانند نام مشخصات، مقدار مشخصات و غیره تشکیل شده‌اند.

در بسیاری از موارد نیاز هست تا اطلاعاتی را از طریق هدر به وب سرویس ارسال کنیم.

برای مثال کاربر بعد از احراز هویت یک توکن دریافت میکند و این توکن را به همراه تمام درخواست های خود به وسیله هدر ارسال میکند.

این کار باعث میشود افرادی بیرون از اپلیکیشن نتوانند به اطلاعات دسترسی پیدا کنند

در این حالت در فریمورک فلاتر و پکیج http کافیست از پارامتر هدر برای اضافه کردن اطلاعات به هدر استفاده کنید.

var url = 'https://example.com';
  var response = await http.post(
    Uri.parse(url),
    body: {
      'param1': 'value1',
      'param2': 'value2',
    },
    headers: {
      'x-custom-header': 'custom-value',
    },
  );

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