Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Dicoding Indonesia

July 27, 2022
Tweet

More Decks by Dicoding Indonesia

Other Decks in Education

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 :
    [email protected]

    View Slide