13

BAB III

PERANCANGAN APLIKASI DAN MODUL AVROBJECT

Pada bab ini akan dibahas mengenai pembuatan aplikasi Avrobject dan modul

Avrobject. Penulisan sengaja dijabarkan secara detail agar dapat dengan mudah

dimengerti dan dapat dipraktekkan juga secara langsung. Dilakukan juga proses

pembelajaran mikrokontroler yang diikuti oleh siswa-siswi SMK menggunakan

aplikasi dan modul yang dibuat. Kemudian sebagai bahan penilaian diberikan

sebuah kuisioner kepada siswa-siswi untuk dijawab.

3.1. Pembuatan Aplikasi Avrobject dengan Squeak

Dibuat aplikasi Avrobject yang dapat mengontrol dua buah motor stepper

dengan berbasis click and drag (klik dan seret) layaknya mengendalikan sebuah

obyek. Aplikasi ini berisikan perintah-perintah pada kolom daftar perintah, jika

perintah-perintah ini diseret kedalam kolom script dan bila dijalankan maka code

dalam kolom script akan diunduh ke dalam mikrokontroler. Kemudian

mikrokontroler akan menggerakkan motor yang mendapat perintah untuk bergerak.

Tampilan pada Avrobject dibuat layaknya seperti perintah-perintah dalam

bentuk obyek, sehingga pengguna tidak perlu lagi menulis script seperti

sebagaimana biasanya dengan metode Basic memprogram sebuah mikrokontroler.

Dengan adanya aplikasi ini maka seorang pemula bisa dengan mudah

menggerakkan motor sesuai dengan keperluan. Dalam arti pengguna juga sedang

melakukan pemrograman mikrokontroler, hanya saja terbatas pada modul yang ada

yaitu motor stepper pada modul Avrobject.

Dalam gambar 3.1 menunjukkan hal-hal yang dapat dilakukan oleh pengguna

aplikasi Avrobject. Pengguna dapat membuka aplikasi, membuat script dengan

cara klik dan seret, setelah membuat script bisa mencoba dan melihat jalannya

animasi. Kemudian mengunduh script dan melihat pergerakan motor asli. Jika telah

selesai digunakan, aplikasi dapat ditutup.

14

Gambar 3.1. Use Case Diagram Avrobject

3.1.1. Pendahuluan Pembuatan Aplikasi Avrobject

Sebelum aplikasi dibuat, terlebih dahulu diabstraksikan obyek-obyek yang

ingin dibuat dalam aplikasi ini :

- Avrobject

Avrobject adalah obyek morph yang terluar pada aplikasi yang dibuat.

Pada obyek Avrobject ditambahkan obyek-obyek morph lain sehingga

membentuk sebuah tampilan yang dapat digunakan.

- MainMenu

Merupakan sebuah obyek persegi panjang yang digunakan sebagai latar

belakang tampilan porgram.

- TaskObject

TaskObject merupakan kolom tempat blok-blok perintah ditempatkan.

- DragObject, ada beberapa obyek yang dibuat dari DragObyek, yaitu :

- X

Adalah variabel yang dapat diisikan dengan nilai integer yang digunakan

pada percabangan.

- Delay

Delay berfungsi untuk memberikan jeda pada bagian-bagian tertentu pada

program. Nilai waktu delay ditentukan dalam satuan detik.

- Motor1

Obyek motor satu. Dengan memberikan obyek ini pada bagian paling atas

sebuah script berarti bahwa script dibawahnya dikerjakan oleh motor satu.

15

- Motor2

Obyek motor dua. Dengan memberikan obyek ini pada bagian paling atas

sebuah script berarti bahwa script dibawahnya dikerjakan oleh motor dua.

- RotateLeft

DragObject putar kiri, bisa dimasukkan nilai bilangan bulat positif untuk

membuat motor berputar satu putaran dan diulang sebanyak nilai bilangan

bulat yang diberikan.

- RotateRight

DragObject putar kanan, bisa dimasukkan nilai bilangan bulat positif untuk

membuat motor berputar satu putaran dan diulang sebanyak nilai bilangan

bulat yang diberikan.

- TurnTo

DragObject menuju derajat tertentu, dimasukkan nilai bilangan bulat yang

berisi derajat per 360 derajat.

- TurnDegrees

DragObject bergerak sesuai derajat, dimasukkan nilai bilangan bulat positif

untuk putar kiri sebanyak derajat yang diberikan dan negatif untuk putar

kanan sebanyak derajat yang diberikan.

- If

Digunakan If untuk melakukan percabangan pada saat dimana nilai variabel

X sama dengan parameter yang dimasukkan pada DragObject If.

- For

Digunakan For untuk melakukan perulangan pada baris-baris program.

Dimasukkan sebuah bilangan bulat untuk melakukan perulangan sebanyak

angka bilangan bulat yang dimasukkan.

- Close

DragObject ini digunakan sebagai penutup dari percabangan dan

perulangan. Setelah ditutup dengan Close maka aplikasi akan mengeksekusi

blok yang ada dalam percabangan atau perulangan.

- ScriptLayout

ScriptLayout adalah tempat diletakkannya blok-blok perintah yang ingin

dikerjakan.

16

- AnimationScreen

AnimationScreen adalah layar tempat ditampilkan animasi yang terjadi

pada motor.

- Arrow

Adalah obyek jarum petunjuk posisi arah daripada sebuah jarum motor.

- StartButton

Tombol agar animasi dapat dijalankan, menampilkan pergerakan motor

secara animasi komputer ketika diklik.

- DownloadButton

Tombol agar stringcode diunduh ke dalam AVR, memberi perintah pada

AVR untuk menjalankan motor dan menampilkan animasi pada

AnimationScreen.

3.1.2. Pembuatan Aplikasi Avrobject (Class dan Instance Variable)

Pertama kali mengerjakan sebuah proyek pada Squeak, Squeak menyediakan

dua tipe proyek, yaitu MVCproject dan MorphicProject. Digunakan

MorphicProject untuk pembuatan aplikasi Avrobject karena melibatkan obyek-

obyek yang berupa gambar atau disebut juga morph. Dibuat proyek baru pada

Squeak dengan cara pilih New Project, kemudian New MorphicProject. Setelah

keluar World yang akan digunakan untuk membuat proyek kemudian buka class

browser.

Gambar 3.2. Pembuatan MorphicProject baru

Untuk mengawali pembuatan aplikasi diawali dengan membuat class

category yang baru yaitu Avrobject-Main. Aturan umum penulisan nama class dan

nama method pada Squeak sama pada bahasa Java, yaitu pada huruf paling depan

setiap kata dari class diberi tanda dengan huruf kapital. Sedangkan method atau

17

variabel ditulis dengan awalan huruf kecil dan kemudian jika variabel mengandung

dua kata atau lebih, huruf pertama kata berikutnya ditulis dengan huruf kapital.

Cara membuat class category yang baru yaitu dengan menekan tombol menu

pada mouse (klik kanan) pada kolom class category di class browser kemudian

pilih . Dinamakan class category yang baru dengan nama Avrobject-

Main kemudian Accept (ctrl + s). Class category ini hanya berfungsi seperti sebuah

folder agar ketika mencari class yang dibutuhkan dapat dengan mudah ditemukan.

Gambar 3.3. Pembuatan class category baru

Setelah dibuat class category Avrobject-Main, dalam class category ini

ditambahkan class-class baru yang lain sesuai dengan obyek-obyek yang telah

dirancang dari awal. Namun perhatikan bahwa dalam class DragObject hanya

perlu dibuat sebuah class karena bentuk obyek morph yang dihasilkan mirip satu

dengan yang lain. Dengan class yang dibuat ini dapat mengeluarkan obyek yang

serupa tetapi memiliki nama dan fungsi yang berbeda-beda. Cara membuat class

baru yaitu dengan cara klik pada class category Acrobject-Main kemudian pada

subclass-nya, NameOfSubclass diganti dengan nama class yang telah didaftarkan di

atas, yaitu : Avrobject; MainMenu; TaskObject; DragObject; ScriptLayout;

AnimationScreen; Arrow; StartButton; DownloadButton.

Gambar 3.4. Pembuatan class baru dengan mengganti nama subclass-nya

18

Dalam setiap class yang dibuat, sering akan dipakai sebuah instace Variable

yang digunakan sebagai sebuah variabel global sehingga dapat dipakai oleh class

lain juga. Oleh sebab itu perlu juga dideklarasikan instance variable dari masing-

masing class. Tentunya pertama diabstraksikan / dipikirkan dahulu variabel apa

saja yang akan dibutuhkan, tetapi apabila ingin ditambahkan lagi nantinya bisa

langsung ditambahkan. Cara penambahan intance Variable dengan diisikan

variabel yang dibutuhkan dalam tanda petik satu intanceVariableNames yang

dibatasi dengan spasi antar instance Variable.

- Avrobject : mainMenu taskMenu scriptLayout animationScreen

startButton downloadButton trashCan.

- MainMenu : label

- TaskObject : label motor1 motor2 turnLeft turnRight turnTo

turnDegree variableX ifX forX closeX delay

- ScriptLayout : label

- AnimationScreen : label circle motor1 motor2

- Arrow : delayTime

- StartButton : taskString taskList flagMode taskListIf taskListFor

taskListDo intIf intFor myNumberIf myNumberFor

myNumberDo myAvrobject boxValue valueOfX

taskStringFor taskStringIf

- DownloadButton : port

Gambar 3.5. Pembuatan intanice variable baru

19

Intance Variable tidak dapat diakses oleh class lain begitu saja, melainkan

jika tidak ada method untuk mengeluarkan nilainya, ia tidak akan bisa diakses oleh

class lain ( dalam arti setiap intance variable yang baru dibuat bersifat private ).

Untuk membuatnya dapat diakses oleh class lain, dalam Squeak ada yang namanya

accessor. Accessor ini berfungsi seperti halnya getter dan setter pada bahasa

pemrograman Java. Untuk membuat accessor dari tiap variabel klik tombol menu

mouse pada class yang ingin dibuat accessor-nya. Kemudian klik more, create inst

var accessors. Maka akan dibuat accessor dari tiap-tiap instance variable secara

otomatis.

Gambar 3.6. Pembuatan accessor dari intance variable secara otomatis

3.1.3. Pembuatan Aplikasi Avrobject ( Method )

Obyek tidak akan dapat melakukan apa-apa sebelum diberikan method.

Method membuat obyek menjadi kelihatan hidup dan dapat berinteraksi satu

dengan yang lain. Method pada Squeak sering disebut juga dengan message. Setiap

method yang dibuat pada masing-masing class akan lebih baik jika dimasukkan

dalam method category karena akan lebih mudah mencari method yang telah ditulis

jika sudah dikelompokkan. Seperti hanya terlihat pada accessor yang dibuat

sebelumnya, semua accessor ditempatkan dalam satu buah method category yang

bernama accessing.

20

Untuk mengeluarkan sebuah obyek dari sebuah class perlu ada method

initialize. Method initialize sendiri ketika ia dipanggil tidak dengan memberikan

message initialize, melainkan memberikan message new pada class yang dituju.

Dalam menginisialisasi sebuah obyek morph, pasti ada method draw didalamnya.

Pada umumnya method draw ini berisikan fungsi untuk membentuk obyek yang

akan dihasilkan oleh class tersebut. Untuk membuat proyek morph yang kompleks

akan lebih mudah jika dikerjakan dari morph yang paling terkecil dahulu. Pada

paragraf-paragraf selanjutnya dijelaskan tentang method yang dibuat dalam

masing-masing class dan penjelasannya.

Semua code pemrograman yang dibutuhkan untuk membangun aplikasi

Avrobject berada pada lampiran CD dalam image Squeak. Dilihat menggunakan

tool Class Browser ada komentar dengan tanda “ * ” merupakan komentar atau

penjelasan fungsi utama dari method. Sedangkan tanda “ # ” merupakan komentar

atau penjelasan dari ekspresi code dibawahnya. Tidak akan semua baris diberi

komentar, melainkan apabila pada bagian atas atau di class lain sudah ada

penjelasan mengenai sebuah baris code, jika ada code yang sama tidak diberi

komentar lagi.

MainMenu. Pada class MainMenu dibuat method baru dengan nama initialize.

Caranya dengan klik pada class MainMenu, kemudian pada kolom method

category dipilih “ --- all --- ”. Kemudian pada kolom dibawah diisikan dengan

method initialize. Pada setiap class yang dibuat dalam aplikasi Avrobject memiliki

method initialize dan draw agar dari setiap class bisa ditampilkan obyek yang

dihasilkan ke World Squeak.

initialize

"* Menginisialisasi MainMenu"

super initialize.

“# Menggabungkan diri dengan morph hasil dari method draw”

self addMorph: self draw.

^ self.

super initialize membuat obyek yang akan dihasilkan mewarisi class

yang di atasnya. Oleh sebab itu setiap initialize harus ada super initialize.

self merupakan sebuah obyek yang menunjuk ke obyek yang diberikan message.

addMorph: adalah method dari class Morph digunakan untuk menggambungkan

21

dua buah obyek morph. self addMorph: self draw digunakan untuk

menambahkan obyek yang diberi message dengan obyek hasil dari method draw.

Method draw belum dibuat, tetapi dibuat berikutnya. ^self menujukkan bahwa

method ini mengembalikan sebuah obyek yaitu dirinya sendiri.

Berikutnya dibuat method draw pada class MainMenu. Variabel mainMenu

digunakan sebagai variabel penyimpan obyek yang sedang dibuat. MainMenu

merupakan sebuah obyek PasteUpMorph yang diberi warna putih dan berukuran

1000 x 600 pixel. Sedangkan topBox adalah obyek persegi panjang sebagai tempat

akan ditaruh nama program yaitu teks yang terisi dalam label, “Avrobject”. on:

#startDrag send: #value to: topBox; dan on: #click send:

#value to: topBox; merupakan proteksi agar topBox tidak bisa dipindahkan.

DragObject merupakan obyek yang dapat diklik dan diseret. Apabila obyek

ini hanya diklik maka ia akan menggandakan dirinya sendiri. Obyek hasil

penggandaan ini kemudian diseret kedalam ScriptLayout yang digunakan sebagai

script. Agar bisa menggandakan diri dan diseret dipakai method copyByClick.

dilihat pada potongan program dibawah pada obyek m diberikan message on: send:

to: dan masing-masing mesagge selector diberi simbol (yang bertanda #). Simbol

ini yang dibaca pada saat dilakukan sesuatu, yaitu #startDrag dan #click. Saat

didapat #startDrag dikirim mesaage #grabMorph ke obyek m, begitu juga saat

didapat #click dilakukan method yang berada dalam kurung kotak.

m on: #startDrag send: #grabMorph: to: m.

m on: #click send: #value to:[bar := m duplicate. bar

position: ( ( m position ) + (5@5) ). bar

openInWorld. bar comeToFront].

Dibuat method draw: aString pada class DragObyek karena nantinya

DragObject yang dihasilkan bervariasi sehingga perlu dibuat method yang bisa

diberikan parameter, berbeda dengan MainMenu yang hanya ada satu obyek dalam

proyek ini. self copyByClick pada initialize mengaktifkan method copyByClick

agar apabila obyek ini diklik akan menggandakan diri tetapi apabila diseret/drag ia

tidak menggandakan diri, hanya berpindah tempat.

box merupakan sebuah persegi panjang yang menjadi dasar dari obyek ini.

aString adalah sebuah string yang akan ditulis pada box ini sehingga menjadi

pembeda antara DragObject yang satu dengan yang lain. textBox digunakan untuk

22

tempat diisikan nilai bilangan bulat yang akan menjadi parameter dari DragObject

ketika digunakan dalam script.

ScriptLayout, merupakan tempat diletakkan obyek DragObject yang akan

dibaca dan dijadikan sebuah script. Untuk merapikan posisi DragObject yang

diletakkan pada ScriptLayout, dibuat method onClick agar pada saat ScriptLayout

diklik method akan menjalankan method arrangeDragObject pada class

Avrobject. Prinsip merapikan yang dipakai adalah menetapkan nilai x dan spasi

nilai y antar DragObject. Kemudian diurutkan berdasarkan nilai y lalu ditempatkan

ulang pada World dengan nilai x dan y yang sudah ditetapkan.

TaskObject, merupakan sebuah kolom yang berisikan deretan DragObject

yang dapat digandakan dan diseret ke dalam kolom ScriptLayout. TaskObject

merupakan sebuah obyek PasteUpMorph. Dibuat method drawDragObject:

aString value: aValue untuk menampilkan DragObject pada kolom TaskObject ini.

aString dipakai sebagai nama DragObject dan aValue dipakai sebagai nilai awal

dari parameter tiap DragObject. Seperti pada Motor 1 dan Motor 2 tidak diberikan

aValue karena tidak membutuhkan parameter, sedangkan DragObyek seperti

turnLeft diberi „0‟ karena membutuhkan parameter.

motor1 := self drawDragObject: 'Motor 1' value: ' '.

turnLeft := self drawDragObject: 'Turn Left' value: '0'.

Pada method initialize dilihat bahwa pertama dibuat dahulu kotak terluar dari

TaskObject yaitu dengan method draw. Setelah itu dibuat satu per satu obyek yang

akan ditambahkan pada TaskObject, yaitu variabel X, motor1, motor2, turnLeft,

turnRight, turnTo, turnDegree, If, For, Close dan Delay. Digunakan method

drawDragObject: aString value: aValue untuk membuat DragObject-

nya. Variabel i dan space digunakan untuk memberikan nilai posisi y yang berbeda

pada tiap DragObject agar tidak saling menumpuk saat ditampilkan.

Kemudian yang paling penting juga dalam proyek ini adalah class Arrow.

Arrow menampilkan animasi pergerakan motor stepper pada layar komputer.

Walaupun Arrow sebernarnya diisikan pada obyek AnimationScreen, tetapi pada

class Arrow ditempatkan method turnLeft, turnRight, turnTo, dan turnDegree

bukan pada class AnimationScreen. Animasi Arrow memerlukan delayTime

sebagai skala waktu untuk menyeimbangkan animasi pada layar komputer dengan

modul motor stepper yang asli. Arrow merupakan sebuah morph jarum yang terdiri

23

dari warna biru dan warna merah. Obyek animasi Arrow tampak hanya sebuah

obyek persegi panjang.

Animasi pada Squeak merupakan perubahan bentuk atau posisi morph tiap

delay yang diberikan, caranya yaitu dengan mengubah posisi atau bentuk morph

kemudian diberikan delay dan memperbaharui/refresh World. Dibuat method

rotateLeft: anInteger untuk memutar Arrow berlawanan arah jarum jam dan

rotateRight: anInteger untuk memutar animasi motor searah jarum jam. Method ini

melakukan perubahan heading obyek sebanyak dua derajat tiap kalinya dan

diulangi sebanyak 180 kali. self heading: (self heading \\ 360) dibuat

untuk memproteksi apabila heading sudah lebih dari 360 derajat atau kurang dari

nol dearajat maka akan dikembalikan ke antara 0 hingga 359.

rotateRight: anInteger

"* Method rotateRight atau putar searah jarum jam sebanyak

anInteger yang diberikan"

| delay |

anInteger timesRepeat:[

180 timesRepeat: [

self heading: (self heading + 2).

delay := Delay forSeconds: delayTime.

delay wait.

self refreshWorld.

].

].

self heading: (self heading \\ 360).

Dibuat method turnDegrees: aDegrees untuk menganimasikan Arrow

berputar sebanyak derajat yang diberikan. Masukan dengan tanda negatif dan tanpa

tanda pada textBox turnDegrees akan mempegaruhi arah putarannya. Jika negatif,

maka Arrow akan berputar searah jarum jam sebanyak derajat dalam textBox. Jika

tanpa tanda negatif maka Arrow akan berputar berlawanan arah jarum jam.

turnDegrees: aDegrees

"* Memutar motor sebanyak aDegrees derajat. Tanda negatif

menandakan arah putaran searah jarum jam"

| delay anInteger |

aDegrees negative

ifTrue:[

24

anInteger := (aDegrees*(-1))\\360.

anInteger timesRepeat:[

self heading: ( (self heading + 1) \\360).

delay := Delay forSeconds: delayTime/2.

delay wait.

self refreshWorld.

].

]

ifFalse:[

anInteger := (aDegrees)\\360.

anInteger timesRepeat:[

self heading: ((self heading - 1) \\360).

delay := Delay forSeconds: delayTime/2.

delay wait.

self refreshWorld.

].

].

self heading: (self heading \\ 360).

Dibuat method turnTo: aDegrees untuk menganimasikan Arrow menuju arah

yang dimasukkan pada textBox obyek turnTo. degree > (self heading)

untuk menentukan arah perputaran yang akan digunakan searah jarum jam atau

berlawanan jarum jam, agar tidak terjadi kesalahan apabila derajat absis saat ini

telah melewati arah yang dituju.

turnTo: aDegrees

"* Membuat panah motor menunjuk ke arah aDegrees."

| delay anInteger degree |

degree := aDegrees\\360.

"# Mengetahui apakah derajat yang akan dituju lebih besar

dari posisi saat ini"

degree > ((360-(self heading))\\360)

ifTrue:[

anInteger := (degree - ((360-(self

heading))\\360) ) asInteger.

25

anInteger timesRepeat:[

"# Jika benar maka motor berputar ke berlawanan arah jarum

jam menuju derajat yang dituju"

self heading: ((self heading-1)\\360 ).

delay := Delay forSeconds: delayTime/2.

delay wait.

self refreshWorld.

].

]

ifFalse:[

anInteger := (((360-(self heading))\\360 ) -

degree) asInteger.

anInteger timesRepeat:[

"# Jika salah maka motor berputar searah jarum jam menuju

derajat yang dituju"

self heading: ((self heading+1)\\360 ).

delay := Delay forSeconds: delayTime/2.

delay wait.

self refreshWorld.

].

].

self heading: ((aDegrees \\ 360)*(-1)).

AnimationScreen, merupakan layar untuk menampilkan animasi Arrow.

AnimationScreen hanya merupakan sebuah morph persegi panjang. Tambahan

method lain pada initialize-release adalah drawCircle, method ini digunakan untuk

membuat obyek motor pada AnimationScreen. Dibuat dua obyek motor dengan

cara menggambarkan lingkaran kemudian pada tengah lingkaran ditambahkan

obyek Arrow. Jadi pada saat melakukan animasi yang bergerak hanyalah Arrow

sedangkan yang lain tidak bergerak, oleh sebab itu mengapa ditempatkan method

penganimasian pada class Arrow.

Setelah semua obyek selesai dibuat, saatnya untuk menyatukan obyek-obyek

tersebut. Obyek-obyek tersebut disatukan pada sebuah obyek utama yaitu

Avrobject. Setiap obyek dimasukkan dalam instance variable yang berada pada

class Avrobject agar nantinya dapat digunakan oleh class lain juga. Masing-masing

obyek diletakkan pada posisinya agar terlihat rapi dengan menggunakan message

26

position:. Kemudian digabungkan semua obyek morph yang telah

diinisialisasikan dengan message addMorph:.

mainMenu := MainMenu new.

taskMenu := TaskObject new.

taskMenu position: 10@25.

mainMenu addMorph: taskMenu;

Untuk menjalankan animasi diperlukan script pada ScriptLayout. Script dapat

dibuat dengan cara klik DragObject yang ingin ditambahkan pada TaskObject

untuk digandakan, kemudian diseret/drag ke ScriptLayout. Tetapi script yang

dibuat ini belum dapat dibaca. Oleh sebab itu dibuat sebuah category method baru

dengan nama count yang berisi method taskListArray untuk memasukkan

DragObyek yang berada dalam kolom ScriptLayout dalam sebuah array dan

taskListCount untuk menghitung jumlah DragObject dalam ScriptLayout.

taskListArray adalah method yang digunakan untuk mendaftarkan deretan

DragObject yang berada pada ScriptLayout, agar mudah diakses dibuat sebuah

array baru yang berisi DragObject. Pada Squeak akan terjadi error apabila

membaca sebuah obyek kosong ( null ), untuk mencegah hal ini diperlukan proteksi

dalam membaca obyek. Nilai variabel i merupakan proteksi yang digunakan untuk

mengetahui jumlah obyek pada ScriptLayout.

taskList := Array new: 30.

i := ((self scriptLayout submorphs at:1) submorphs

size) -1.

i timesRepeat: [

label := (self scriptLayout submorphs at:1)

submorphs at: j.

label class = DragObject

ifTrue: [

taskList at: j put: ( (self

scriptLayout submorphs at:1) submorphs at: j).

].

j := j+1.

].

Pada kolom perulangan, akan dilakukan perulangan sebanyak nilai variabel i.

Jika didapat bahwa obyek yang dimaksud adalah DragObject, maka obyek ini akan

27

dimasukkan dalam array taskList. Sedangkan method taskListCount digunakan

untuk menghitung jumlah DragObject yang berada pada ScriptLayout.

Dibutuhkan sebuah tombol untuk menjalankan animasi dan sebuah tombol

lain untuk mengunduh script ke mikrokontroler. Untuk menjalankan animasi akan

dibuat tombol “StartButton”. Sedangkan untuk mengunduh stringcode ke dalam

Arduino dibuat tombol “Download Button”.

Agar obyek StartButton dapat diklik, ditambahkan method startClicked,

method ini digunakan untuk mengecek apakah tombol StartButton sedang diklik

atau tidak. Jika diklik maka akan menjalankan method doAnimation. Method

doAnimation adalah method utama yang digunakan untuk menampilkan animasi

pada layar komputer. Method ini akan membaca setiap array obyek dalam

arrayTaskList kemudian dibandingkan satu-persatu berdasarkan labelnya dan

dijalankan dengan method doAnimationFor: motorObject taskNumber: myNumber

. motorObject adalah motor yang akan diaktifkan sebagai motor aktif dan

myNumber adalah pointer yang menunjuk ke arrayTaskList.

doAnimation

"* Menjalankan animasi motor sesuai taskList yang didapatkan"

| i motor motorObject |

"# Yang dipakai adalah obyek Avrobject ke-2"

myAvrobject := Avrobject allInstances at: 2.

taskList := self sorting.

i := self sorting size.

motor := 'Motor 1'.

taskString := String new.

taskStringIf := String new.

taskStringFor := String new.

taskListIf := Array new: 30.

taskListFor := Array new: 30.

myNumberIf := 0.

myNumberFor := 0.

flagMode := '1'.

1 to: i do: [:myNumber |

boxValue := ((taskList at: myNumber) textBox

contents) asString asInteger.

((taskList at: myNumber) label contents)='X'

28

ifTrue:[

valueOfX := boxValue.

“flagMode = „1‟ mode biasa, „e‟ mode

percabangan, „f‟ mode perulangan”

flagMode = '1'

ifTrue:[

“Mendaftarkan dalam stringcode yang akan dikirim”

taskString := (taskString, valueOfX, 'x').

].

flagMode = 'e'

ifTrue:[

taskStringIf :=(taskStringIf,valueOfX, 'x').

taskListIf at: myNumberIf put: (taskList at:

myNumber).

myNumberIf := (myNumberIf + 1).

].

flagMode = 'f'

ifTrue:[

taskStringFor:=(taskStringFor,valueOfX,'x').

taskListFor at: myNumberFor put: (taskList

at: myNumber).

myNumberFor := (myNumberFor + 1).

].

].

((taskList at: myNumber) label contents) = 'Motor 1'

ifTrue:[ “Jika didapati motor aktif adalah Motor 1”

flagMode = '1'

ifTrue:[

motor := 'Motor 1'.

taskString := (taskString, 'm').

].

flagMode = 'e'

ifTrue:[

taskStringIf := (taskStringIf, 'm').

taskListIf at: myNumberIf put: (taskList

at: myNumber).

myNumberIf := (myNumberIf + 1).

29

].

flagMode = 'f'

ifTrue:[

taskStringFor := (taskStringFor, 'm').

taskListFor at: myNumberFor put: (taskList

at: myNumber).

myNumberFor := (myNumberFor + 1).

].

].

((taskList at: myNumber) label contents) = 'Motor 2'

ifTrue:[ “Jika didapati motor aktif adalah Motor 2”

flagMode = '1'

ifTrue:[

motor := 'Motor 2'.

taskString := (taskString, 'n').

].

flagMode = 'e'

ifTrue:[

taskStringIf := (taskStringIf, 'n').

taskListIf at: myNumberIf put: (taskList

at: myNumber).

myNumberIf := (myNumberIf + 1).

].

flagMode = 'f'

ifTrue:[

taskStringFor := (taskStringFor, 'n').

taskListFor at: myNumberFor put: (taskList

at: myNumber).

myNumberFor := (myNumberFor + 1).

].

].

motor = 'Motor 1'

ifTrue:[

motorObject := (myAvrobject animationScreen motor1).

self doAnimationFor: motorObject taskNumber: myNumber.

]

30

ifFalse: [

motorObject := (myAvrobject animationScreen motor2).

self doAnimationFor: motorObject taskNumber: myNumber.

]

].

"# Menampilkan taskString ke layar Transcript"

Transcript show: taskString; cr.

Untuk menjalankan blok perulangan, saat mendapat DragObject Close,

doAnimationFor: akan menjalankan method doFor: iTimes taskList: taskListFor

iTaskList: iTaskListFor, dimana iTimes adalah jumlah perulangan yang akan

dilakukan, taskListFor adalah blok taskList dalam perulangan, iTaskListFor adalah

jumlah DragObject dalam blok perulangan.

Untuk menjalankan blok percabangan, saat mendapat DragObject Close,

doAnimationFor: akan menjalankan method doIf: aNumber1 sameTo: aNumber2,

dimana aNumber1 adalah nilai variabel X yang akan dibandingkan dengan

aNumber2 yang adalah nilai percabangan. Jika kedua nilai ini sama maka animasi

dalam blok percabangan akan dilakukan, kalau tidak sama tidak akan dijalankan.

Sambil menjalankan animasi, method ini juga mendaftarkan dalam taskString

sebuah string yang nanti akan dikirim ke mikrokontroler. String yang dikirim ini

berisikan deretan karakter-karakter yang digunakan untuk membandingkan

perintah yang satu dengan yang lain dan angka-angka yang merupakan parameter

dari masing-masing perintah.

Untuk mengurutkan script yang ditulis agar tidak salah dalam pembacaan

script dibuat sebuah method sorting. Karena dalam membaca script pada

ScriptLayout diinginkan berdasarakan urutan dari paling atas ke paling bawah

maka method sorting ini mengatur ulang posisi taskList berdasarkan nilai posisi y.

Saat pertama kali taskList dimasukkan, taskList masih diurutkan berdasarkan yang

mana lebih dahulu ditempatkan pada ScriptLayout. Metode pengurutan yang

dipakai adalah mengurutkan dahulu nilai-nilai y yang ada dari terbesar ke yang

terkecil, kemudian membandingkan nilai y dengan taskList yang belum diurutkan.

Jika sama maka DragObject ini dimasukkan dalam taskListSorted.

31

1 to: i do: [:myNumber |

1 to: i do: [:myNumber2 |

(taskListYSorted at: myNumber) =

((taskList at: myNumber2) y )

ifTrue:[

taskListSorted at: mySortNumber put:

(taskList at: myNumber2).

mySortNumber := mySortNumber - 1.

].

].

].

3.2. Pembuatan Modul Avrobject

Untuk pembuatan modul mikrokontroler ini diperlukan beberapa alat

elektronik yaitu :

- Arduino Uno R3

- 2 buah motor stepper 28BYJ-48 5 Volt

- 2 buah driver motor stepper ULN2003

- 2 buah kabel jumper yang tersambung dengan 4 pin female.

- 2 buah kabel jumper yang tersambung dengan 2 pin female.

- 20 cm x 50 cm Acrilic untuk membuat kotak alat.

Gambar 3.7. Diagram Alir Modul Avrobject

32

Kabel koneksi USB Arduino Uno R3 disambung langsung ke port 3 pada

komputer. Kabel koneksi ini berfungsi untuk memberikan daya listrik untuk

menghidupkan Arduino serta untuk melakukan pemrograman chip mikrokontroler

yang berada dalam Arduino dan mengirimkan data ke Arduino. Kedua motor

stepper disambung langsung pada driver motor. Kemudian dari driver motor

pertama yang akan digunakan sebagai driver motor satu, disambung dengan

menggunakan kabel jumper 4 pin pada kaki 4 sampai 7 di Arduino. Untuk motor

dua digunakan juga kabel jumper 4 pin disambungkan pada kaki 8 sampai 11 di

Arduino.

Untuk menjembatani aplikasi Avrobject dengan Arduino dikirimkan

stringcode dari aplikasi ke Arduino dengan menggunakan kabel USB. Avrobject

juga bisa mengirimkan data melalui USB, tetapi data yang dikirimkan hanya

dipakai untuk membaca posisi motor secara hitungan, tidak secara nyata. Sebab

motor stepper tidak memiliki sensor yang menunjukkan posisinya dalam keadaan

nyata seperti pada servo.

3.3. Pembuatan Penjembatanan Aplikasi Avrobject dengan Modul Avrobject

Program yang akan dibuat pada mikrokontroler merupakan deretan library

baru yang berfungsi untuk menggerakkan motor satu dan motor dua sesuai dengan

perintah yang diberikan. Perintah yang diberikan berupa deretan karakter-karakter

(stringcode) dari aplikasi Avrobject, dikirimkan melalui port USB 3 yaitu

menggunakan komunikasi serial. Untuk memprogram chip mikrokontroler dalam

Arduino menggunakan program dari Arduino sendiri yaitu Arduino1.0.5-r2 dengan

menggunakan bahasa perograman C.

Program akan membaca setiap karakter satu persatu mulai dari paling depan

hingga paling belakang dari stringcode yang dikirimkan pada mikrokontroler.

Berikut adalah penjelasan dari masing-masing karakter yang diberlakukan dalam

program.

- m, adalah karakter yang menandakan perintah berikutnya diberikan untuk motor

pertama.

- n, adalah karakter yang menandakan perintah berikutnya diberikan untuk motor

kedua.

- a, adalah karakter yang menandakan perintah putar kanan atau rotateRight.

- b, adalah karakter yang menandakan perintah putar kiri atau rotateLeft.

33

- c, adalah karakter yang menandakan perintah berputar sebanyak derajat tertentu

ke arah diingikan atau turnDegrees.

- d, adalah karakter yang menandakan perintah berputar ke derajat yang

diinginkan terhadap derajat awal (derajat nol) atau turnTo.

- e, adalah karakter yang menandakan memasuki blok if atau percabangan.

- f, adalah karakter yang menandakan memasuki blok for atau perulangan.

- g, adalah karakter yang menandakan akhir dari sebuah blok percabangan atau

perulangan.

- h, adalah karakter yang menandakan perintah delay sejumlah parameter yang

diberikan (dalam satuan detik)

- “ – “ , adalah karakter penanda yang digunakan dalam turnDegrees untuk

menentukan arah putarannya searah jarum jam. Jika tidak ada tanda “ – “ maka

arah putarannya adalah berlawanan dengan jarum jam.

- Angka 0 – 9, merupakan parameter dari tiap-tiap perintah. Jika ditemukan

deretan angka maka akan dibaca angka tersebut berupa puluhan, ratuasan atau

ribuan.

Pada fungsi coClockwise() memberikan output pada kaki-kaki Arduino

yang berubah sesuai urutan binarinya. Switch case mengatur bit yang ingin diubah

sesuai dengan perubahan variabel intMotor dan wiseMode mengatur variabel

intMotor berubah dari kecil ke besar atau sebaliknya untuk menentukan arah

putaran motor. Pemberian nilai HIGH pada sebuah kaki output pada Arduino

memberi tegangan 5 volt pada kaki itu, yaitu pada driver steppper motor.

Sedangkan pemberian nilai LOW pada kaki output memberikan nilai tegangan

ground. Sesuai dengan perubahan itu maka driver motor stepper memberi output

juga pada motor stepper sehingga motor stepper bergerak.

Tetapi setelah dilakukan percobaan error didapatkan bug pada aplikasi jika

menjalankan bit motor pertama kali dari bit 0000, akan ada kehilangan beberapa

derajat dari perintah yang seharusnya dikerjakan. Didapatkan bahwa hal ini

dikarenakan posisi awal motor 0o adalah berada pada bit 0011. Oleh sebab itu

variabel intMotor ditetapkan saat awal memiliki nilai 6, agar pada saat fungsi

coClockwise() dijalankan ia akan menjalankan case 6 terlebih dahulu yaitu bit

0011.

34

Berikut tabel perubahan binari untuk membuat motor stepper bergerak searah

jarum jam dan berlawanan arah jarum jam.

Tabel 3.1. Perubahan binari kaki-kaki output agar motor bergerak

sesuai arah jarum jam atau berlawanan arah jarum jam.

Searah Jarum Jam Berlawanan Arah Jarum Jam

A B C D A B C D

1 0 0 0 0 0 0 1

1 1 0 0 0 0 1 1

0 1 0 0 0 0 1 0

0 1 1 0 0 1 1 0

0 0 1 0 0 1 0 0

0 0 1 1 1 1 0 0

0 0 0 1 1 0 0 0

1 0 0 1 1 0 0 1

3.4. Menghubungkan Aplikasi Avrobject dengan Modul Avrobject

DownloadButton adalah obyek terakhir yang dibutuhkan untuk pengunduhan

stringcode yang telah didapat dari doAnimation pada saat animasi dijalankan.

DownloadButton berfungsi agar apabila ia diklik akan ditampilkan jalannya

animasi pada layar dan mengirim secara langsung stringcode pada animasi tadi.

Maka akan tampak bahwa animasi motor pada layar komputer bergerak

tersinkronisasi dengan motor asli yang digerakkan oleh mikrokontroler.

Ditambahkan method startCliked dan download agar obyek ini dapat

mendeteksi adanya penekanan tombol mouse pada dirinya. Method download

melakukan pengecekan port pada komputer dan mengirimkan data aString melalui

port tersebut. Disini menggunakan port 3 karena USB port yang dipakai untuk

mengirimkan data adalah USB port 3. Jika menggantinya dengan port lain maka

pengiriman data juga harus dilakukan melalui port yang digantikan.

35

download

"* Mengunduh Stringcode yang dihasilkan ke dalam Arduino"

| avrobjectNumber aString |

avrobjectNumber := 2.

aString := nil.

"# aString berisikan Stringcode dari taskString di class

StartButton"

aString := (StartButton allInstances at:

avrobjectNumber) taskString.

port := SerialPort new.

"# Mendeklarasikan atau membuka port USB, yang dipakai

adalah port USB 3"

port := port openPort: 3.

port ifNil: [ Transcript show: 'Something went wrong

with the open - ' ; show: (port); cr.

"# Mengeluarkan error jika port USB 3 kosong"

ifNotNil: [

"# Mengirimkan Stringcode sehingga motor asli bergerak"

port nextPutAll: aString.

port nextPutAll: String cr.

].

port close.

"# Menjalankan animasi pada animationScreen"

(StartButton allInstances at: 2) doAnimation.

Setelah semua obyek telah dibuat method dan class-nya, maka bagian terakhir

adalah menggabungkan semuanya. Yang belum digabungkan adalah obyek

StartButton dan DownloadButton, oleh karena itu pada method draw class

Avrobject ditambahkan pendeklarasian kedua obyek ini.

startButton := StartButton new.

downloadButton := DownloadButton new.

startButton position: 550@350.

downloadButton position: 680@350.

mainMenu addMorph: taskMenu;

addMorph: startButton;

36

addMorph: downloadButton.

Semua obyek telah digabungkan dalam class Avrobject. Kemudian cara untuk

membuat obyek baru dari class Avrobject ini dan kemudian ditampilkan di World

adalah dengan menggunakan tool Workspace dengan menjalankan perintah seperti

pada gambar 3.8.

Gambar 3.8. Membuat obyek Avrobject baru dan membukanya di World.

Gambar 3.9. Tampilan Avrobject di World.

Maka secara singkat semua yang telah dibuat mengenai Aplikasi Avrobject

ini akan tampak seperti Hierarchy Relationship Diagram pada Gambar 3.10, Class

Diagram pada Gambar 3.11 dan State Diagram pada Gambar 3.12.

37

Gambar 3.10. Hierarchy Relationship Diagram Avrobejct

Gambar 3.11. Class Diagram Avrobejct

38

Gambar 3.12. State Diagram Avrobject

39

3.5. Pembelajaran Mikrokontroler pada Siswa-Siswi SMK

Dilakukan proses pembelajaran kepada tujuh orang siswa-siswi SMK Negeri

2 Salatiga kelas XII jurusan Elektronika mengenai pemrograman mikrokontroler.

Pembelajaran pemrograman yang diberikan ada dua metode, yaitu metode Basic

dan metode Flowcode. Metode Basic merupakan pembelajaran mikrokontroler

menggunakan aplikasi Arduino 1.0.5-r2 untuk memprogram mikrokontroler supaya

bisa menggerakkan motor putar kiri dan putar kanan. Metode Flowcode

menggunakan aplikasi Avrobject untuk memprogram mikrokontroler menggunakan

DragObject yang tersedia.

Proses pembelajaran dibagi menjadi dua tahap, tahap pertama yaitu selama

tiga puluh menit siswa mendapat pengajaran bagaimana memprogram Arduino

untuk menggerakkan motor berputar searah jarum jam dan berlawanan arah jarum

jam. Setelah itu selama tiga puluh menit juga dilakukan pembelajaran

pemrograman mikrokontroler menggerakkan motor sesuai fungsi yang ada pada

aplikasi Avrobject.

Siswa juga melakukan sesi tanya jawab dan pada bagian akhir memberi

tanggapan mengenai pembelajaran yang dilakukan dalam sebuah kuisioner.

Kuisioner yang diberikan merupakan sebuah pertanyaan yang siswa-siswi hanya

menjawabnya dengan pernyataan ya atau tidak. Dalam tabel berikut adalah sepuluh

pertanyaan yang diberikan.

Tabel 3.2. Pertanyaan Kuisioner dari Hasil Pembelajaran Mikrokontroler

No. Pertanyaan Kuisioner

1. Apakah anda senang belajar pelajaran tentang komputer ?

2. Apakah anda sudah pernah belajar bahasa pemrograman sebelumnya ?

3. Apakah aplikasi Avrobject terlihat menarik ?

4. Apakah modul Arduino dan motor terlihat menarik ?

5. Setelah melihat dan mencoba kedua metode belajar pemrograman Mikrokontroler

dengan metode Basic dan Flowcode, apakah metode Flowcode dirasakan lebih

mudah ?

6. Apakah dengan pembelajaran menggunakan metode Flowcode bisa membantu

siswa tingkat SMA dan SMK dalam mempelajari pemrograman Mikrokontroler ?

7. Apakah belajar pemrograman Mikrokontroler dengan metode Basic terkesan

susah ?

8. Apakah anda tertarik ketika mendengar hendak belajar pemrograman

Mikrokontroler dengan metode Flowcode ?

9. Apakah ada muncul ketertarikan untuk belajar lebih jauh memprogram

Mikrokontroler dengan metode Flowcode ?

10. Jika ada ekstra kulikuler mengenai Mikrokontroler di sekolah anda dengan

metode Flowcode, apakah anda tertarik untuk ikut ?

40