Modul ini adalah untuk My School #digitalmaker Carnival dan Service Learning, FSKTM, UNIMAS

Projek Service Learning

Fakulti Sains Komputer dan Teknologi Maklumat

Universiti Malaysia Sarawak

Semester 1, 2021/2022

Tajuk : Module Tambahan Bengkel Mobile Programming

menggunakan Thunkable
Tarikh : 20 November 2021
Masa : 0900-1230
Fasilitator : 1. Karisma Diana Binti Ismail (Ketua)
2. Mohamad Hafiz Bin Sulaiman
3. Mohd Kamarulariffin Bin Rosli
4. Evan Valentine Anak Peter
5. Francis Yii Zhi Yang
6. Michelle Tan
7. Nur Nadirah Binti Zamaludin
8. Rohayah Binti Sinaro
9. Samuel Ng You Fan
10. Sanggeswary A/P Murthee
Penyelia Fakulti : Encik Mohamad Johan Bin Ahmad Khiri

This training module is for limited use only which has been agreed upon by the university/faculty, co-
organizer SDEC, students, and the community involved in this Service Learning project. Any use beyond
the original purpose must obtain consent from all parties.
 Modul ini adalah untuk My School #digitalmaker Carnival dan Service Learning, FSKTM, UNIMAS

WORKSHOP
MOBILE PROGRAMMING USING
THUNKABLE

Faculty of Computer Science and Information Technology

Universiti Malaysia Sarawak

This training module is for limited use only which has been agreed upon by the university/faculty, co-
organizer SDEC, students, and the community involved in this Service Learning project. Any use beyond
the original purpose must obtain consent from all parties.
 Modul ini adalah untuk My School #digitalmaker Carnival dan Service Learning, FSKTM, UNIMAS

PERSEDIAAN SEBELUM

a. Para pelajar boleh memuat turun aplikasi “Thunkable Live” di App Store atau di Google

Store menggunakan telefon masing-masing.

Student can install the application “Thunkable Live” through App Store or Google Store

using your smartphone.

b. Para pelajar boleh memuat turun gambar bola, dinding dan gol di dalam laptop masing-

masing seperti gambar di bawah.

Student can download the picture of ball, wall and goal in your laptop.

This training module is for limited use only which has been agreed upon by the university/faculty, co-
organizer SDEC, students, and the community involved in this Service Learning project. Any use beyond
the original purpose must obtain consent from all parties.
 Modul ini adalah untuk My School #digitalmaker Carnival dan Service Learning, FSKTM, UNIMAS

PANDUAN PENGGUNA

1. Para pelajar boleh membuka laman sesawang aplikasi Thunkable dengan melayari

https://thunkable.com/#/

Students can open the Thunkable app website by browsing https://thunkable.com/#/

2. Untuk mendaftar akaun Thunkable, para pelajar boleh menekan butang “Sign Up”.

To sign up for a Thunkable account, students can press a button “Sign Up”

This training module is for limited use only which has been agreed upon by the university/faculty, co-
organizer SDEC, students, and the community involved in this Service Learning project. Any use beyond
the original purpose must obtain consent from all parties.
 Modul ini adalah untuk My School #digitalmaker Carnival dan Service Learning, FSKTM, UNIMAS

3. Anda boleh mendaftar akaun menggunakan Akaun Google, Apple atau email.

You can sign up for an account using a Google Account, Apple or email.

4. Selepas mendaftar, pelajar perlu “sign in” akaun yang telah didaftar.

After registering, students need to "sign in" the account that has been registered.

This training module is for limited use only which has been agreed upon by the university/faculty, co-
organizer SDEC, students, and the community involved in this Service Learning project. Any use beyond
the original purpose must obtain consent from all parties.
 Modul ini adalah untuk My School #digitalmaker Carnival dan Service Learning, FSKTM, UNIMAS

5. Pelajar perlu menekan “Create New App” untuk membuka projek baru.

Students need to click "Create New App" to open a new project.

6. Pelajar dikehendaki untuk mengisi maklumat “new project name = Maze Game” dan

“category = Games”

Students are required to fill in the information "new project name = Maze Game" and

"category = Games"

This training module is for limited use only which has been agreed upon by the university/faculty, co-
organizer SDEC, students, and the community involved in this Service Learning project. Any use beyond
the original purpose must obtain consent from all parties.
 Modul ini adalah untuk My School #digitalmaker Carnival dan Service Learning, FSKTM, UNIMAS

7. Selepas mengisi maklumat, tekan “Create”.

After filling in the information, press "Create".

8. Halaman ini ialah tempat untuk mereka bentuk yang akan menunjukkan grafik dalam app

nanti.

This page is a place to design that will show graphics in the app later.

9. Type in “Canvas” dalam Search komponen

Type in "Canvas" in the Search component

This training module is for limited use only which has been agreed upon by the university/faculty, co-
organizer SDEC, students, and the community involved in this Service Learning project. Any use beyond
the original purpose must obtain consent from all parties.
 Modul ini adalah untuk My School #digitalmaker Carnival dan Service Learning, FSKTM, UNIMAS

10. “Drag” komponen “Canvas” keluar ke tengah tempat putih.

"Drag" the "Canvas" component out to the center of the white spot.

11. Type in “button” dalam Search komponen dan drag keluar ke tempat seperti gambar

yang ditunjukkan di bawah.

Type in "button" in the Search component and drag out to the place like the image

shown below.

This training module is for limited use only which has been agreed upon by the university/faculty, co-
organizer SDEC, students, and the community involved in this Service Learning project. Any use beyond
the original purpose must obtain consent from all parties.
 Modul ini adalah untuk My School #digitalmaker Carnival dan Service Learning, FSKTM, UNIMAS

This training module is for limited use only which has been agreed upon by the university/faculty, co-
organizer SDEC, students, and the community involved in this Service Learning project. Any use beyond
the original purpose must obtain consent from all parties.
 Modul ini adalah untuk My School #digitalmaker Carnival dan Service Learning, FSKTM, UNIMAS

12. Type in “group” dalam Search komponen dan drag keluar ke tempat seperti gambar yang

ditunjukkan di bawah.

Type in "group" in the Search component and drag it out to the place like the image

shown below.

This training module is for limited use only which has been agreed upon by the university/faculty, co-
organizer SDEC, students, and the community involved in this Service Learning project. Any use beyond
the original purpose must obtain consent from all parties.
13. Type in “button” dalam Search komponen dan drag keluar ke tempat seperti gambar

yang ditunjukkan di bawah.

Type in "button" in the Search component and drag out to the place like the image

shown below.

14. Drag empat “button” itu dalam bentuk seperti gambar di bawah

Drag the four "buttons" in the shape like the picture below
15. Tekan “button” dan namakan semula nama butang itu di “text” seperti gambar di bawah.

Bagi butang lain, ulangkan langkah yang sama sehingga ada “up”,”right”,”down”, “left”.

Press the "button" and rename the button in the "text" as in the picture below. For

other buttons, repeat the same steps until there are "up", "right", "down", "left".

16. Tekan “Add Sprite Type” untuk create “Sprite_Type2” seperti gambar di bawah.

Press "Add Sprite Type" to create "Sprite_Type2" as shown below.

17. Drag Sprite_Type2 dan letak tepi Sprite1 seperti gambar di bawah.

Drag Sprite_Type2 and place the edges of Sprite1 as shown below.

18. Tekan “Add Sprite Type” lagi untuk create Sprite3, drag dan letak Sprite3 seperti gambar

di bawah.

Press "Add Sprite Type" again to create Sprite3, drag and place Sprite3 as shown below.
19. Pilih sprite1 dan namakan semula "sprite_Type_ Ball."

Choose the sprite1 and rename it "sprite_Type_ Ball." .

20. klik pada muat naik fail untuk memuat naik imej bola.

click on the upload file to upload a ball image.

21. Sprite1 bernama "bola" berubah kelihatan sebagai "bola."

The sprite1 named "ball" changes visible as "ball."

22. pilih sprite2 dan namakan semula sebagai sprite_ Type_wall

choose sprite2 and rename it as sprite_ Type_wall

23. klik pada muat naik fail untuk memuat naik imej dinding seperti arahan No 20.

click on the upload file to upload a wall image as shown in instruction No 20.

24. Sprite2 bernama "dinding" berubah kelihatan sebagai "dinding"

The sprite2 named "wall" changes visible as "wall.

25. pilih sprite3 dan namakan semula sebagai sprite_ Type_goal.

choose sprite3 and rename it as sprite_ Type_goal.

26. klik pada muat naik fail untuk memuat naik imej tiang goal.

click on the upload file to upload a goal box image.

27. Sprite2 bernama "tiang gol" berubah kelihatan sebagai "tiang gol"

The sprite1 named "goal box" changes visible as "goal box."

28. Susun bola di titik permulaan dan kotak gol di penghujung. Kemudian mulakan labirin

di sepanjang laluan.

Arrange the ball at the starting point and the goal box at the end. Then start a maze

along the path.

29. Klik pada pendua. Gandakan dinding seberapa banyak yang anda mahu lakukan

maze dan susun mengikut kretiviti anda.

Click on the duplicate. Duplicate the wall as much as you want to do the maze and sort

it with your creativity.

30. Sekarang klik pada bahagian blok.

Now click on the block section.

31. Pada senarai, klik pada Button1up dan drag.

On the list, click on Button1up and drag it.

32. Klik pada Motion dan drag sprite_Ball ditonjolkan bawah gambar.

Click on Motion and drag sprite_Ball highlighted below image.

33. Salin blok yang diserahkan dengan warna merah di bawah dan dalam bahagian

matematik, seret kotak merah sama seperti dalam imej.

Copy the block highlighted in red below and in the math section, drag the red box the

same as in the image.

34. y= 1 bertukar kepada 5

the y= 1 change to 5
35. tambah komponen sebagai "alert"

add the component as "alert"

36. Tambah blok-blok seperti gambar di bawah, blok tersebut dapat dicari di tempat yang

ditulis.

Add blocks like the image below, those blocks can be found in those written places.

37. Selepasnya, right click untuk “duplicate” blok ini.

Next, right click to “duplicate” the block.

38. Bagi Duplicated blok itu , tukarkan “Sprite_Type_wall” kepada “Sprite_Type_Goal”

dan “You Lost!” kepada “You Won!”.

For the duplicated block, change “Sprite_Type_Wall” to “Sprite Type_Goal” and “You

Lost!” to “You Won!”.

39. Seterusnya, drag blok ini di “Variables” dan blok di “Math”.

Then, drag this block in Variables and block in Math.

40. Jadinya macam ini.

The result will be this.

41. Seterusnya, Drag ketiga-tiga blok ini dan jadinya satu blok.

Next, drag these three blocks to form a proper one.

42. Blok itu perlu nampak macam ni. The

block should be looked like this.

43. Para pelajar boleh melihat dan mencuba permainan dengan menggunakan aplikasi

“Thunkable Live” di telefon masing-masing.

Student can view and try the game using the application “Thunkable Live” trough

your smartphone.