Strategi dalam

Pemrograman
Visual
Visual Programming Language

– Kesalahan umum
– VPL tidak menghilangkan text
– Banyak VPL mengandung text dengan batasan tertentu
– Tujuan VPL yang utama adalah berusaha melakukan peningkatan dalam desain
Bahasa pemrograman.
– Keuntungannya adalah VPL mempunyai sintaktik yang lebih sedikit, mekanisme
pemrograman yang bebas walaupun belum pernah mencoba membuat
program sebelumnya.
Tujuan Utama VPL

– Membuat pemrograman yang mudah digunakan

– Meningkatkan cara yang benar bagi orang-orang yang berada dalam lingkup
pemrograman
– Meningkatkan kecepatan dalam membuat tugas-tugas pemrograman
Strategi VPL

1. Concreteness
2. Directness
3. Explicitness
4. Immediate visual feedback
Concreteness

– Tidak abstrak
– Menjelaskan (ekspresi) beberapa aspek dari program menggunakan objek yang
sesuai fakta-fakta

– Memungkinkan programmer untuk menentukan beberapa aspek semantic pada

objek atau nilai tertentu
– Memungkinkan system secara otomatis menampilkan efek dari program pada objek
atau nilai tertentu
Directness (langsung)

– The feeling that one is directly manipulating the object (B. Shneiderman)
– Dari sudut pandang kognitif, komputasi secara langsung adalah kedekatan
antara sebuah tujuan dan tindakan yang dibutuhkan pengguna untuk
mencapainya.
Memungkinkan pemrogram untuk memanipulasi objek atau nilai khusus secara langsung
daripada menjelaskan semantic-semantic tekstual.

B. Shneiderman, Direct manipulation: a step beyond programming languages. Computer 16(8): 57-69, August 1983.
Explicitness (ketegasan)

– Beberapa aspek semantic bersifat tegas pada environmentnya apabila langsung

dinyatakan (tekstual atau visual).

– Contoh ketegasan dalam VPL

– Untuk system secara eksplisit menggambarkan hubungan aliran data (program slice
information) melalui penggambaran tepi yang diarahkan antar variable yang terkait.
Immediate Visual Feedback

– Umpan balik visual langsung

– Mengacu pada display otomatis dari efek perubahan (edit) program.
– Tanimoto (1990) telah menciptakan istilah “liveness”
– Mengkategorikan kedekatan umpan balik semantic yang secara otomatis disediakan
selama proses perubahan program.
– Terdapat empat tingkat liveness.

Tanimoto, S., VIVA: a visual language for image processing. Journal of Visual Languages Computing2(2): 127-139, June
1990.
Immediate Visual Feedback
(tingkatan liveness)
1. Tidak ada semantic yang tersirat dalam computer.
sehingga tidak ada umpan balik tentang program yang disediakan untuk
programmer.
Contoh : diagram entity – relationship untuk dokumentasi
2. Programmer dapat memperoleh umpan balik semantic tentang sebagian
program namun tidak disediakan secara otomatis.
Kompilator mendukung tingkat 2 sangat rendah, dan interpreter mendukung
lebih banyak karena tidak terbatas pada nilai output akhir.
Immediate Visual Feedback
(tingkatan liveness)
3. Umpan balik semantic tambahan yang secara otomatis tersedia setiap kali
melakukan pemrograman, seperti pengeditan dan semua nilai yang terkena
dampak akan kembali ditampilkan secara otomatis.
memastikan konsistensi tampilan dan system apabila pemicu perubahan
tersebut adalah pengeditan program.
Fitur perhitungan otomatis spreadsheet mendukung tingkat ketiga liveness ini.

4. Sistem merespon perubahan program (seperti level 3) dan kejadian lain

seperti system waktu dan mouse sepanjang waktu.
memastikan semua data system secara akurat dengan perhitungan yang terus
menerus
Contoh VPL

– Dari keempat strategi tersebut, diterapkan pada empat contoh VPL yang
didemonstrasikan dalam beberapa cara.
1. Imperative visual programming by demonstration
2. Form/spreadsheet based visual programming
3. Dataflow visual programming
4. Rule-based visual programming
Imperative visual programming

– Pemrograman visual yang sangat penting melalui demonstrasi

Chimera
– Merupakan contoh umum pemrograman imperative yang didukung VPL, yaitu
programmer menunjukkan tindakan yang diinginkan.
– Programmer adalah end user, sehingga dalam hal ini VPL bertujuan untuk
meningkatkan aksesibilitas pemrograman dengan jenis tugas tertentu

D. Kurlander, Chimera: example-based graphical editing. In A. Cypher (ed.),Watch What I Do: Programming by
Demonstration, MIT Press, Cambridge, Mass, 1993.
Imperative visual programming
(Chimera Con’t)
– Domain Chimera adalah graphical editing.
– Sebagai pengguna akhir yang bekerja pada grafis, mungkin akan menemukan
pengeditan yang dibangun berulang,
– urutan manipulasi hanya dilakukan pada layar / tampilan, seharusnya dapat
digeneralisasi.
Imperative visual programming
(Chimera Con’t)

– Contoh pengguna menggambar sebuah kotak dengan panah yang menunjuk

kedalamnya.
– Demonstrasi ini digambarkan setelah serangkaian panel dipilih.
Imperative visual programming
(Chimera Con’t)

– Chimera merupakan contoh liveness level 3.

– Directness pada Chimera digunakan dalam cara semantic program yang
langsung memanipulasi objek untuk menunjukkan hasil yang diinginkan.
Form/spreadsheet pada VPL

Forms/3
– merupakan contoh VPL yang mengikuti paradigm form.
– Pemrogram membuat program dengan menentukan bentuk dan isi.
– Ini adalah paradigma yang sering dilihat dalam spreadsheet yang bentuknya
berbentuk grid, isinya ditentukan oleh formula (persamaan) sel.
– Mendefinisikan formula setiap sel menggunakan kombinasi penunjuk
(pointing), mengetik (typing), dan isyarat (gesturing) yang fleksible.
Form/spreadsheet pada VPL
(Forms/3 con’t)
– Contoh dari jenis kotak yang ditentukan
oleh sketsa grafis, dengan spesifikasi
yang dapat dirubah dengan peregangan
kotak tanpa manipulasi langsung
– Concreteness -> box segera terlihat
ketika cukup persamaan
– directness -> manipulasi langsung
menentukan kotak.
Form/spreadsheet pada VPL
(Forms/3 con’t)
– Forms/3 adalah sebuah Bahasa lengkap – Turing.
– Meningkatkan penggunaan spreadsheet biada dengan konsep lengkap,
sehingga mendukung fitur grafik, animasi, dan rekursi tanpa memodifikasi
bahasa pemrograman tradisional.
– Pengguna ideal forms/3 adalah future programmer (yang belum menekankan
pada Bahasa pemrograman tradisional)
– Tujuan Forms/3 adalah mengurangi jumlah dan kompleksitas dari mekanisme
yang dibutuhkan untuk melakukan pemrograman aplikasi.
Dataflow pada VPL

Prograph (1989)
– Dataflow (aliran data)
– Programmer professional.
– Paradigma dataflow
– adalah pendekatan pemrograman visual yang digunakan paling banyak dalam industri
untuk semua tingkatan dari tingkat rendah hingga rinci yang dikelompokkan ke dalam
prosedur dan objek.
– Digunakan oleh VPE dengan domain khusus tingkat rendah,
– Contohnya, Sistem visualisasi ilmiah
Cox, P., F. Giles, T. Pietrzykowski, Prograph: a step towards liberating programming from textual Conditioning. 1989 IEEE Workshop on
Visual Languages, Rome, Italy, Oct. 4-6, 1989
Dataflow pada VPL
(Prograph Con’t)
– Mendukung debugging kuat dengan menggunakan teknik visualisasi dinamis.
– Level liveness (2)
– Programmer secara eksplisit meminta tampilan nilai setiap kali ingin melihatnya.
– Namun aktivitas runtime atau urutan node dapat dilihat di seluruh eksekusi

– Level liveness (3)

– Programmer melakukan perubahan yang sedikit (data atau kode) di tengah-tengah eksekusi, stack window
atau tampilan yang sedang aktif akan secara otomatis menyesuaikan dan melanjutkan dari kondisi tersebut.

– Perbedaan dataflow paradigm dengan yang lain

– Melalui ketegasannya
– Bahasa alur data mengatur aliran control secara eksplisit dan murni.
Dataflow pada VPL
(Prograph Con’t)

– Dengan operasi tingkat rendah, untuk menentukan

hypotenuse segitiga siku-siku.
– Grafik dari tingkat rendah ke tingkat yang lebih tinggi,
dan begitu seterusnya
Dataflow pada VPL
(Microsoft VPL)
– Aplikasi pengembang yang didesain
pada model programan yang berbasis
dataflow
– Target untuk beginner programmer
– Memeberikan manfaat lebih seperti
untuk prototyping atau
pengembangan code.
– Ditujukan untuk pengguna umum,
(student, pemrogram, web developer
hingga professional programmer)
Dataflow pada VPL
(Microsoft VPL)

– Terdiri dari urutan aktifitas yang

terhubung dan direpresentasikan sebagi
sebuah block dengan input dan output.

– Gambar disamping memperlihatkan

hubungan blok aktivitas yang
memperlihatkan bahwa pesan dapat
dikirim dari aktivitas satu ke aktivitas yang
lain.
Dataflow pada VPL
(Microsoft VPL)

– Sebuah koneksi yang

memanggil tindakan sepeti
“SayText”

– Pin koneksi
Rule-Based pada VPL

Cocoa (1994)
– Sebelumnya dikenal dengan KidSim
– VPL berdasarkan aturan spesifikasi programmer melalui postcondition pada precondition.
– Cocoa merupakan Bahasa lengkap – turing, namun fitur-fitur belum dirancang untuk membuat pemrograman
yang luas, didesain agar anak-anak bebas menggunakan program simulai dengan kemampuan mereka sendiri.
– Concreteness
– Hampir sama dengan Chimera

– Keduanya menggunakan demonstrasi sebagai semantiknya.

D. Smith, A. Cypher, and J. Spohrer, Kidsim: programming agents without a programming language. Communications of the ACM 37(7): 54-67, July
1994.
Rule-Based pada VPL
(Cocoa Con’t)
– Cocoa wall climber
– Setiap aturan ditunjukkan
dengan precondition grafis di
sebelah kiri dan postcondition
grafis pada sebelah kanan.
Terima kasih
Tugas

– Analisa program scratch yang anda buat (Tugas I) dengan strategi pemrograman
visual yang ada, dan jelaskan.
– Hasilnya, dikumpulkan maksimal tiga hari dari sekarang.
– Melalui edmodo