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
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