KAL
Menu

DartPad

DartPad sebagai tempat bereksperimen tanpa instalasi untuk potongan kode pertama.

Daftar isi

DartPad adalah alat berbasis browser untuk mencoba bahasa Dart tanpa instalasi apa pun, cukup dengan membuka dartpad.dev di browser modern. Topik ini membahas tata letak antarmukanya, alur mencoba potongan kode pertama, cara DartPad menandai masalah pada kode, dan batasannya. Dengan DartPad, eksperimen kecil dapat dilakukan di mana saja, termasuk sebelum Dart SDK dipasang pada mesin kerja.

Antarmuka DartPad#

DartPad adalah alat open source yang menampilkan editor kode pada sisi kiri dan panel keluaran pada sisi kanan. Tombol Run menjalankan program dan keluarannya muncul pada panel kanan, sedangkan tombol New membuat pad baru yang kosong, yaitu area kerja berisi satu potongan kode. Tombol Samples menyediakan contoh bawaan yang dapat dipilih langsung, termasuk contoh Flutter seperti Sunflower yang me-render keluaran visual, bukan teks. Untuk percobaan bahasa Dart murni, titik mulainya adalah pad baru dengan logo Dart yang dibuat melalui New.

Selagi kode diketik, DartPad menampilkan petunjuk, dokumentasi, dan saran pelengkapan otomatis. Tombol Format menata ulang kode dengan dart formatter, meliputi indentasi, spasi, dan pemenggalan baris, sehingga gaya penulisannya konsisten. Panel kanan bawah menjadi tempat munculnya peringatan pemeriksaan statis. Versi SDK yang sedang digunakan DartPad tercantum di pojok kanan bawah, dan fitur bahasa yang tersedia mengikuti versi tersebut.

DartPad memiliki dua jenis keluaran, dan jenis pad yang dipilih menentukan tampilan panel kanan. Pad Dart murni menampilkan teks keluaran program, sedangkan pad Flutter menampilkan antarmuka ter-render di panel yang sama. Jalur ini menggunakan pad Dart untuk seluruh contohnya karena materi jalur berfokus pada bahasanya, sehingga pad Flutter hanya perlu dicoba saat mengikuti jalur Flutter.

Percobaan pertama: program penghitung kata#

Alur pertama yang lazim adalah membuat pad Dart kosong melalui tombol New, memilih entri dengan logo Dart, lalu mengganti isi fungsi main dengan kode sendiri. Program berikut menghitung banyaknya kata pada sebuah kalimat, kemudian mencetak setiap kata beserta nomor urutnya. Kode yang sama berjalan di DartPad maupun di terminal melalui dart run, sehingga keluaran di bawah ini sama persis dengan yang tampil di panel kanan DartPad.

dart penghitung-kata.dart 
void main() {
  const kalimat = 'dart mudah dipelajari dan menyenangkan digunakan';
  final kata = kalimat.split(' ');
  print('Jumlah kata: ${kata.length}');
  for (var i = 0; i < kata.length; i++) {
    print('${i + 1}. ${kata[i]}');
  }
}
text Keluaran 
Jumlah kata: 6
1. dart
2. mudah
3. dipelajari
4. dan
5. menyenangkan
6. digunakan

Metode split(' ') memecah kalimat pada setiap spasi dan mengembalikan koleksi kata, sedangkan kata.length menghitung jumlah anggotanya. Perulangan for klasik menghitung indeks dari 0 sampai batas koleksi, sehingga setiap kata dapat dicetak bersama nomor urutnya melalui interpolasi ${i + 1}. Ekspresi kata[i] mengambil anggota koleksi pada posisi ke-i yang dimulai dari 0, sehingga kata[0] adalah kata pertama dan kata[5] adalah kata terakhir pada keluaran di atas. Deklarasi const pada kalimat menandai nilai yang sudah diketahui saat kompilasi, sedangkan final pada kata menandai nilai yang dihitung sekali saat program berjalan. Ganti isi kalimat dengan teks lain, jalankan ulang, dan amati perubahan jumlah katanya.

Pemeriksaan masalah sebelum Run#

DartPad menjalankan pemeriksaan statis selagi kode diketik, sehingga masalah terlihat sebelum tombol Run ditekan. Peringatan muncul pada panel kanan bawah, dan bila kode yang bermasalah tetap dijalankan, pesan compilation error tampil di panel keluaran. Dokumentasi DartPad memberikan contoh sederhananya, yaitu peringatan muncul segera setelah split diubah menjadi spit.

Pemeriksaan yang sama tersedia di terminal melalui dart analyze. Blok berikut membuat berkas uji yang mengakses anggota length pada variabel nullable, lalu menjalankan pemeriksaan statis atas berkas tersebut. Tanda tanya pada String? menandai tipe yang boleh bernilai null, sedangkan penulisan String saja menandai tipe yang tidak boleh null.

bash 
# membuat berkas uji yang memuat penyalahgunaan tipe nullable
rm -rf uji-analyzer
mkdir uji-analyzer
cat > uji-analyzer/uji-analyzer.dart <<'EOF'
void main() {
  String? nama;
  print(nama.length);
}
EOF
# menjalankan pemeriksaan statis pada berkas uji
dart analyze uji-analyzer/uji-analyzer.dart
text Keluaran 
Analyzing uji-analyzer.dart...

  error - uji-analyzer.dart:3:14 - The property 'length' can't be unconditionally accessed because the receiver can be 'null'. Try making the access conditional (using '?.') or adding a null check to the target ('!'). - unchecked_use_of_nullable_value

1 issue found.

Pesan error menyebut lokasi persisnya (baris 3 kolom 14), penyebabnya (penerima yang bisa bernilai null), dua saran perbaikan, dan kode masalahnya di bagian akhir. DartPad menampilkan pesan serupa untuk masalah yang sama pada panel peringatannya, sehingga pad di browser dan analyzer di terminal saling menguatkan. Perbaikannya terdiri atas dua pilihan, yaitu akses kondisional dengan ?. atau pemeriksaan null yang eksplisit. Kedua saran ini menjadi bekal sebelum aturan null safety dibahas menyeluruh di jalur ini.

Batasan DartPad#

DartPad mendukung core library dart:* yang ditandai multi-platform, dan untuk aplikasi Flutter menyediakan package flutter beserta dart:ui. Antarmuka aplikasi Flutter karenanya dapat dirancang langsung di browser melalui contoh pada Samples. Di luar kedua kelompok tersebut, dukungan library DartPad berhenti.

DartPad tidak mendukung deferred loading dan tidak mendukung package dari pub.dev selain package yang sedang didukungnya. Proyek yang bergantung pada package lain membutuhkan Dart SDK yang dipasang secara lokal. Versi SDK yang digunakan DartPad juga milik layanannya, bukan milik mesin lokal, sehingga perilaku kode di DartPad dapat berbeda dari SDK lokal yang versinya lebih tua atau lebih baru.

Untuk pekerjaan yang lebih besar dari potongan kode, pad di DartPad tidak menyimpan proyek, pubspec, maupun struktur folder. Banyak halaman dokumentasi dart.dev menyematkan DartPad di dalamnya, misalnya halaman Dart overview, sehingga contoh pada halaman tersebut dapat dicoba langsung di tempat. Pola penggunaannya pun jelas, yaitu DartPad untuk eksperimen cepat dan SDK lokal untuk proyek nyata.

Ringkasan#

  • DartPad menjalankan Dart di browser melalui dartpad.dev dengan editor, tombol Run dan Format, serta panel keluaran dan peringatan statis.
  • Pemeriksaan statis DartPad serupa dengan dart analyze di terminal, sehingga masalah terlihat sebelum program dijalankan.
  • Dukungan DartPad mencakup core library multi-platform dan package tertentu, sedangkan proyek dengan dependensi lebih luas membutuhkan SDK lokal.

Referensi#