Modul Ajar API Flutter
Modul Ajar API Flutter
Pemrograman Pada akhir fase F Melalui Model Pertemuan 3 ● json dan Bernalar Kritis, 2x45
mobile peserta didik Project Based Mandiri,
1. mengidentifikas sterilization Kreatif,
mampu Learning,
memahami Peserta didik i icon-icon ● http dan dio Bergotong
royong
konsep dan menerapkan pemrograman
menerapkan bahasa untuk
perintah HTML, pemrograma pengembangan
CSS, n untuk aplikasi
pemrograman
pengembang perangkat
Javascript,
an aplikasi bergerak sesuai
bahasa perangkat dengan
pemrograman bergerak kebutuhan
server-side serta untuk 2. menerapkan
implementasi beragam pemrograman
framework pada kebutuhan aplikasi
pembuatan web
yang perangkat
statis dan dinamis
untuk beragam kontekstual, bergerak sesuai
kebutuhan yang antarmuka kebutuhan
kontekstual. aplikasi yang aplikasi
Selain itu, peserta saling 3. menganalisis
didik juga berhubungan pemrograman
mampu perangkat
dengan
mendokumentasi
kan serta aplikasi bergerak dengan
mempresentasika lainnya API yang sudah
n web statis dan (Application dibuat
dinamis yang Programmin
telah g Interface).
dikembangkan. secara kreatif
dan
kolaborasi
INFORMASI UMUM
A Identitas Modul
B Kompetensi Awal
Fase 1 Guru mengajak peserta didik 1. Peserta didik menyimak dan 10’
Orientasi untuk melihat tayangan video mengamati materi yang
peserta didik tentang konsumsi API disampaikan oleh guru
pada masalah melalui tayangan yang
● berupa penerapan
(Mengamati) sudah diberikan
konsumsi API di dalam
FLutter
2. Peserta didik bertanya
kepada guru yang belum
https://www.youtube.com/
diketahuinya dan saling
watch?v=mUz2zdCfZJw&
berdiskusi dengan guru
t=1192s
terkait kegiatan yang sudah
dilakukannya
Fase 4 1. Guru dan peserta didik 1. Peserta didik aktif dalam 30’
Mengembangka mendiskusikan project bersama kegiatan pembelajaran.
n dan tentang tujuan akhir project dengan memberikan
menyajikan pendapat tentang pengerjaan
hasil karya
(Menalar / 2. Guru menginstruksikan peserta 2. Peserta didik berkelompok
Mengasosiasi) didik untuk mengerjakan berisikan 5 peserta didik
project secara berkelompok sbg
solusi agar project lebih cepat
diselesaikan
yaml
dependencies:
flutter:
sdk: flutter
http: ^0.13.3
2. Impor library `http` di dalam file `.dart` tempat Anda ingin melakukan
permintaan API:
dart
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
3. Buat fungsi untuk mengambil data dari server menggunakan permintaan
HTTP dan mengurai respons JSON:
dart
Future<void> fetchData() async {
final String apiUrl = 'https://example.com/api/data'; // Ganti dengan URL
API Anda
try {
final response = await http.get(Uri.parse(apiUrl));
if (response.statusCode == 200) {
// Jika permintaan berhasil, parse data JSON
final jsonData = jsonDecode(response.body);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Contoh JSON di Flutter'),
),
body: Center(
child: Text('Data akan ditampilkan di sini setelah berhasil diambil.'),
),
);
}
5. Pastikan juga untuk menambahkan izin internet di file
`AndroidManifest.xml` untuk Android dan file `Info.plist` untuk iOS jika
belum melakukannya.
}
E Asesmen
● Penilaian LKPD
● Penilaian presentasi
● Penilaian diskusi
2 Disajikan PG 6-8
Sebuah
pertanyaan
menerapkan
pemrograman
aplikasi
perangkat
bergerak
sesuai
kebutuhan
aplikasi
3 Disajikan PG 9-10
Sebuah
pertanyaan
menganalisis
pemrograman
perangkat
bergerak
dengan API
yang sudah
dibuat
1
Apa fungsi dari widget "Icon" di Flutter?
a) Menampilkan gambar dari URL yang diberikan.
b) Menampilkan ikon berdasarkan font.
c) Menggambar ikon secara kustom sesuai dengan path yang ditentukan.
d) Menampilkan ikon berdasarkan gambar PNG.
Jawaban: b) Menampilkan ikon berdasarkan font.
2
Bagaimana cara menambahkan ikon ke dalam Flutter menggunakan "IconData"?
a) Menggunakan fitur drag-and-drop di editor Flutter.
b) Menyalin gambar ikon dan tempelkan ke dalam proyek Flutter.
c) Menentukan nomor kode ikon yang sesuai pada objek "IconData".
d) Menggunakan plugin tambahan untuk memuat ikon.
Jawaban: c) Menentukan nomor kode ikon yang sesuai pada objek "IconData".
3
Berikut adalah contoh kode Flutter untuk menampilkan ikon. Manakah yang benar?
dart
a) Icon(name: 'heart');
b) Icon(Icons.favorite);
c) Ikon(icon: 'like');
d) IkonData(Icons.favorite);
Jawaban: b) Icon(Icons.favorite);
4
Dalam Flutter, ikon-ikon yang digunakan diwakili oleh jenis data apa?
a) IconData
b) String
c) IkonWidget
d) IconType
Jawaban: a) IconData
5
Apakah yang harus dilakukan jika ikon yang Anda inginkan tidak tersedia dalam
paket ikon Flutter bawaan?
a) Menggunakan hanya ikon yang tersedia.
b) Membuat ikon kustom menggunakan perangkat lunak desain grafis, lalu
memuatnya ke Flutter.
c) Menghapus fitur yang memerlukan ikon tersebut dari aplikasi.
d) Mengubah tema keseluruhan aplikasi agar sesuai dengan ikon yang tersedia.
Jawaban: b) Membuat ikon kustom menggunakan perangkat lunak desain grafis, lalu
memuatnya ke Flutter.
7
Aplikasi manakah yang paling cocok untuk dikembangkan menggunakan Flutter?
a) Aplikasi permainan dengan grafik 3D kompleks.
b) Aplikasi perbankan yang memerlukan integrasi dengan sistem perbankan pihak
ketiga.
c) Aplikasi e-commerce dengan fokus pada tampilan antarmuka yang menarik.
d) Aplikasi komputasi ilmiah untuk analisis data tingkat lanjut.
Jawaban: c) Aplikasi e-commerce dengan fokus pada tampilan antarmuka yang
menarik.
8
Apa keuntungan utama menggunakan Flutter untuk pengembangan aplikasi?
a) Pengembangan cepat dan biaya yang rendah.
b) Kode sumber yang sangat mudah dibaca.
c) Akses langsung ke sumber daya perangkat keras.
d) Memiliki basis pengguna yang lebih besar dibandingkan dengan teknologi lainnya.
Jawaban: a) Pengembangan cepat dan biaya yang rendah.
Baik, berikut adalah beberapa soal analisis dengan jawaban multiple-choice tentang
aplikasi Al-Quran digital yang dibangun dengan Flutter:
9
Apa manfaat utama menggunakan Flutter untuk membangun aplikasi Al-Quran
digital?
a) Kemampuan untuk menerjemahkan teks Al-Quran secara otomatis.
b) Integrasi yang mudah dengan API Al-Quran online.
c) Kinerja yang sangat tinggi untuk mengakses banyak ayat dalam teks Al-Quran.
d) Pengembangan aplikasi multi-platform untuk iOS, Android, dan web dengan satu
basis kode.
Jawaban: d) Pengembangan aplikasi multi-platform untuk iOS, Android, dan web
dengan satu basis kode.
10
Apa keunggulan menggunakan Flutter dalam hal desain antarmuka untuk aplikasi
Al-Quran digital?
a) Fitur pencarian yang canggih untuk mencari ayat tertentu berdasarkan kata kunci.
b) Integrasi mudah dengan layanan pihak ketiga untuk mengakses tafsir Al-Quran.
c) Kemampuan untuk menciptakan antarmuka yang menarik dengan animasi dan efek
visual yang kaya.
d) Menampilkan transkripsi fonetik untuk membantu pembacaan ayat Al-Quran.
Jawaban: c) Kemampuan untuk menciptakan antarmuka yang menarik dengan
animasi dan efek visual yang kaya.
2. Asesmen Formatif
a. Penilaian Profil Pelajar Pancasila
Nama :
Kelas : XI PPLG
Materi : Penerapan API dalam Flutter
NAMA
Aspek Profil Pancasila
1 Penyampaian B: BAIK
C: CUKUP
2 Penampilan K: KURANG
3 Komunikasi
4 isi
5 Tanggapan pada
audiens
Rubrik Pengamatan:
1) Baik : Jika aspek atau kriteria yang diamati muncul dengan nyata dan
sesuai dengan indikator aspek yang diamati.
2) Cukup : Jika aspek atau kriteria yang diamati muncul cukup nyata dan
cukup sesuai dengan indikator aspek yang diamati
3) Kurang : Jika aspek atau kriteria yang diamati muncul kurang nyata dan
kurang sesuai dengan indikator aspek yang diamati
NO Pertanyaan Y T
Perilaku Peserta
Didik Perkembangan
Peserta didik
mampu
mengemukakan
ide/gagasan baru
dalam kelompok
Peserta didik
dapat
menemukan
lebih dari satu
sumber referensi
Peserta didik
dapat menerima
gagasan/ide/pend
ap at dari teman
sekelompoknya
Peserta didik
aktif dalam
mengungkapkan
pendapat
Proyek: Membangun Aplikasi To-Do List
Langkah-langkah Proyek:
Media Pembelajaran
Media presentasi guru dan siswa
Media Asesmen
Google form
Media Pembelajaran