آموزش ارتباط با سرور و API در فلاتر
در بیشتر اپلیکیشن ها شما نیاز دارید که یک اتصال اینترنت برقرار کنید و محتویات مختلفی و از سرور یا 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<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 برای نمایش اطلاعات بازگشتی از طرف این متد استفاده میکنیم. با این کار تا زمانی که اطلاعات هنوز دریافت نشده اند میتوانیم پیام مناسبی به کاربر نمایش دهیم.
مطالب زیر را حتما مطالعه کنید
آموزش پیاده سازی معماری MVVM در فلاتر
روش های افزایش امنیت اپلیکیشن در فلاتر
آموزش کار با پکیج Freezed در فلاتر
آموزش ویجت SafeArea در فلاتر
آموزش استفاده از دیتابیس آماده در فلاتر
آموزش تست نوشتن TDD در فلاتر
15 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سلام. ممنون از بابت مقاله های مفیدتون
سوالم اینجاست که ما در اندروید دئندنسی اینجکشن داریم یا سرویس و متدهایی برای اتصال به سرور در بک گراند. اینها به صورت نیتیو نوشته میشن . الان با فلاتر هم میشه اینکارها رو انجام داد؟
زبان دارت فقط یک Thread داره و نمیتونید عملیاتی و به صورت بک گراند یا multi threas انجام بدید به جای اون مثل جاوااسکریپت از async و await استفاده میشه
کد های اخری ک گذاشتین رو میشه یک بار دیگ توضیح بدید ممنون میشم
از یک futurebuilder برای نمایش ویجت ها در موقعیت خاص استفاده میکنیم اینجا در متد builder این ویجت یک شرط گذاشتیم اگر اطلاعات دریافت شده بود یک تکست قرار بده که عنوان اطلاعات نمایش داده شد است و اگر داخل snapshot که در واقع همان نتیجه متد fetchPost هست ارور بود متن خطا را نمایش دهید. در غیر اینصورت یک progressbar که نمایش دهنده حالت لودینگ هست نمایش داده می شود یعنی در این حالت هنوز نه خطایی دریافت کردیم نه اطلاعاتی از وب سرویس.
سلام
من کدهای زیادی رو برای دریافت اطلاعات با http.get تست کردم از رو مطالب و فیلم های یوتیوب اما همشون خطای xmlhttprequest error رو دارن
مطمئنم ربطی به کد نداره یا وب سرور یا شبیه ساز وب کروم ایراد داره شما تجربه اینو داشتین؟
سلام
هنگام ارسال درخواست از این هدر استفاده کنید
header(“Access-Control-Allow-Origin: *”);
داخل کدهای وب سرویس هم هدر زیر و قرار بدید
header(“Access-Control-Allow-Headers”: “Access-Control-Allow-Origin, Accept”);
سلام ما یه وبسایت داریم بک اندش php هست میتونیم برنامه ای که با فلاتر نوشتیم رو بهش وصل کنیم و از سرویس های بک اندمون استفاده کنم ؟
برنامه اندرویدی که با جاوا نوشتیم رو وصل بهش وصل کردیم فقط مونده نسخه ایفونمون که با فلاتر نوشتیم ولی تجربه اتصال فلاتر رو به بک اند رو نداشتیم ایا میشه برنامه فلاترم وصل کرد و سرویس مثل push notification گرفت یا خیر؟
سلام بله امکان پذیر هست.
سلام اگر بخوام کل جیسون این صفحرو به دلخواه فراخوانی بکنم باید چ کار کنم
https://jsonplaceholder.typicode.com/albums
منظورتون از به دلخواه چی هست؟
سلام خسته نباشید
اقا حسام من می خوام نتیجه هام رو به یک api ارسال کنم (مثلا این جوری فک کنید یک اپ طراحی کردم که میاد هر پیام کاربر رو داخل
{
“number”: 1,
“title”: “quidem molestiae enim”
}
این جور چیزی قرار میده و
پیام دوم میشه number مساوی دو “number”: 2
و تا اخر
حالا چطور این جور api را بسازم؟
سلام
مقداری که میخواید داخل number قرار بدید رو تو پارامتر متد تعریف کنید هربار با صدا زدن این متد مقدارش و قرار بدید.
ببخشید
سوالم این بود که چطور اینجور api رو درست کنم (اصلا نمی دونم چطور api درست کنم)
شما فرض کنید من کدی دارم که هر دقیقه حدود ۵ تا خروجی به صورت رشته داره
حالا من می خوام همه ی خروجی هام رو تو api ذخیره کنم که جایی دیگه بتونم اون ها رو get کنم
سلام وقت بخیر من میخام از weatherMap اطلاعات آب هوا بگیرم و نوع این جیسون ها آرایه می باشد چجوری کلید براشون ارسال کنم تا بتونم به مقادیر اون ارایه دسترسی پیدا کنم
از dio استفاده میکنم
سلام متوجه منظورتون نمیشم, تجزیه جیسون در فلاتر به یک شکل هست فرقی نمیکنه از dio استفاده کنید یا پکیج دیگه اگر منظورتون ارسال پارامتر به سرور هست تفاوت داره برای هر پکیج.