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
  2. Mengapa kode asinkron? • Memuat data dari internet. • Menulis

    data ke database. • Membuka file dari perangkat.
  3. Mengapa kode asinkron?

  4. Skema pemanggilan data ke internet

  5. Future • Objek yang mewakili hasil operasi asinkron. • Memiliki

    3 keluaran : ◦ Uncompleted ◦ Completed with data ◦ Completed with error
  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<bool> futureFunction1() async { return await Future.delayed( const Duration(seconds: 1), () { return true; }, ); } Future<bool> futureFunction2() async { return await Future.delayed( const Duration(seconds: 1), () { throw "Terjadi kesalahan"; }, ); }
  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<bool>' completedWithData: true Uncaught Error: Terjadi kesalahan
  8. FutureBuilder Widget Widget yang mengembalikan nilai widget yang berjalan saat

    proses asinkron berlangsung.
  9. Pengecekan Data pada Snapshot : • hasData ⇒ snapshot.data •

    hasError ⇒ snapshot.error FutureBuilder Widget ConnectionState pada Snapshot : • none • active • waiting • done
  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
  11. Memuat data melalui internet - network request https://docs.flutter.dev/cookbook/networking/fetch-data import 'package:http/http.dart'

    as http; Future<http.Response> fetchAlbum() { return http.get( Uri.parse( 'https://jsonplaceholder.typicode.com/albums/1', ), ); }
  12. Memuat data melalui internet - change response Future<Album> 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
  13. Memuat data melalui internet - fetch data class _MyHomePageState extends

    State<MyHomePage> { late Future<Album> futureFunction; @override void initState() { super.initState(); futureFunction = fetchAlbum(); } ... } https://docs.flutter.dev/cookbook/networking/fetch-data
  14. Memuat data melalui internet - display data https://docs.flutter.dev/cookbook/networking/fetch-data FutureBuilder<Album>( 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(); }, ),
  15. Let’s Code

  16. Dicoding Dicoding Dicoding Dicoding Indonesia Contact us : Contact me

    : ilham@dicoding.com