Dicoding Developer Coaching #57: Flutter | Buat Aplikasi dengan Mengambil Data dari API

Umumnya, aplikasi selalu membutuhkan data yang berasal dari internet. Selain itu, aplikasi juga dapat menyimpan data ke internet. Kedua proses tersebut dapat dilakukan dengan cara mengakses sebuah API tertentu. Lalu bagaimana Flutter mampu terhubung dengan API layaknya Retrofit pada Android dan Alamofire pada iOS?

Flutter menggunakan aplikasi pihak ketiga yang mampu terhubung dengan API. Di kombinasikan dengan Future, Flutter dapat menangani proses asinkron yang terjadi saat mengambil data melalui API. Untuk lebih lengkapnya akan dibahas pada Developer Coaching dengan poin pembahasan seperti berikut:

- Proses Ambil Data dari Internet
- JSON Parsing
- Pengenalan Future dan Widget FutureBuilder
- Penerapan Ambil Data dari Internet

Transcript

1. Buat Aplikasi dengan Mengambil Data dari API
   Dicoding Developer Coaching #57
   Achmad Ilham
   Curriculum Developer Dicoding
   

   View Slide

2. Mengapa kode asinkron?
   ● Memuat data dari internet.
   ● Menulis data ke database.
   ● Membuka file dari perangkat.
   

   View Slide

3. Mengapa kode asinkron?
   

   View Slide

4. Skema pemanggilan data ke internet
   

   View Slide

5. Future
   ● Objek yang mewakili hasil operasi asinkron.
   ● Memiliki 3 keluaran :
   ○ Uncompleted
   ○ Completed with data
   ○ Completed with error
   

   View Slide

6. Future
   void main() async {
   final uncompleted = futureFunction1();
   print("uncompleted: $uncompleted");
   final completedWithData = await futureFunction1();
   print("completedWithData: $completedWithData");
   final completedWithError = await futureFunction2();
   print("completedWithError: $completedWithError");
   }
   Future futureFunction1() async {
   return await Future.delayed(
   const Duration(seconds: 1),
   () {
   return true;
   },
   );
   }
   Future futureFunction2() async {
   return await Future.delayed(
   const Duration(seconds: 1),
   () {
   throw "Terjadi kesalahan";
   },
   );
   }
   

   View Slide

7. Future
   void main() async {
   final uncompleted = futureFunction1();
   print("uncompleted: $uncompleted");
   final completedWithData = await futureFunction1();
   print("completedWithData: $completedWithData");
   final completedWithError = await futureFunction2();
   print("completedWithError: $completedWithError");
   }
   Result :
   uncompleted: Instance of '_Future'
   completedWithData: true
   Uncaught Error: Terjadi kesalahan
   

   View Slide

8. FutureBuilder Widget
   Widget yang mengembalikan nilai
   widget yang berjalan saat proses
   asinkron berlangsung.
   

   View Slide

9. Pengecekan Data pada Snapshot :
   ● hasData ⇒ snapshot.data
   ● hasError ⇒ snapshot.error
   FutureBuilder Widget
   ConnectionState pada Snapshot :
   ● none
   ● active
   ● waiting
   ● done
   

   View Slide

10. Memuat data melalui internet - http Package
    ● Library berbasis Future yang dibuat
    untuk melakukan request HTTP.
    ● Mendukung seluruh platform, yaitu :
    ○ Mobile (Android dan iOS),
    ○ Web
    ○ Desktop (Windows, MacOS, Linux)
    https://pub.dev/packages/http
    

    View Slide

11. Memuat data melalui internet - network request
    https://docs.flutter.dev/cookbook/networking/fetch-data
    import 'package:http/http.dart' as http;
    Future fetchAlbum() {
    return http.get(
    Uri.parse(
    'https://jsonplaceholder.typicode.com/albums/1',
    ),
    );
    }
    

    View Slide

12. Memuat data melalui internet - change
    response
    Future fetchAlbum() async {
    final response = await http
    .get(Uri.parse('https://jsonplaceholder.typicode.com/albums/1'));
    if (response.statusCode == 200) {
    return Album.fromJson(jsonDecode(response.body));
    } else {
    throw Exception('Failed to load album');
    }
    }
    https://docs.flutter.dev/cookbook/networking/fetch-data
    

    View Slide

13. Memuat data melalui internet - fetch data
    class _MyHomePageState extends State {
    late Future futureFunction;
    @override
    void initState() {
    super.initState();
    futureFunction = fetchAlbum();
    }
    ...
    }
    https://docs.flutter.dev/cookbook/networking/fetch-data
    

    View Slide

14. Memuat data melalui internet - display data
    https://docs.flutter.dev/cookbook/networking/fetch-data
    FutureBuilder(
    future: futureFunction,
    builder: (context, snapshot) {
    if (snapshot.hasData) {
    return Text("data : ${snapshot.data!}");
    } else if (snapshot.hasError) {
    return Text("error : ${snapshot.error}");
    }
    return const CircularProgressIndicator();
    },
    ),
    

    View Slide

15. Let’s Code
    

    View Slide

16. Dicoding
    Dicoding
    Dicoding
    Dicoding Indonesia
    Contact us :
    Contact me :
    ilham@dicoding.com
    

    View Slide