Pictoblox – Belajar coding semudah menyusun puzzle

1. Pengenalan Interface PictoBlox

Aplikasi PictoBlox adalah aplikasi pemrograman grafis berbasis Scratch 3.0 untuk anak-anak dan pemula yang ingin belajar coding di mana saja. Antarmukanya yang ramah pengguna dan fungsionalitas drag-and-drop yang mirip dengan versi desktop PictoBlox menghilangkan kebutuhan menghafal sintaksis dan aturan yang biasa ditemukan dalam bahasa pemrograman tradisional. Anda dapat membuat game dan animasi, mengendalikan robot, memprogram papan prototipe seperti Arduino Uno, Mega, Nano, ESP32, dan Evive, serta melakukan lebih banyak lagi.

Unduh Aplikasi PictoBlox dari sini untuk memulai: https://play.google.com/store/apps/details?id=io.stempedia.pictoblox 

1. Buka aplikasi Pictoblox, tampilannya akan seperti dibawah ini

2. Setelah berhasil terbuka aplikasinya, akan tampil halaman awal sebagai berikut ;

klik “My Space” untuk menampilkan halaman project, berikut tampilan halaman project

klik tombol “+” untuk membuat project (tugas)

3. Berikut tampilan halaman project

2. Fungsi
3. Sprite

Sprite merupakan object atau karakter yang dapat melakukan berbagai tindakan dengan memahami dan mematuhi intruksi yang diberikan. Beruang yang anda lihat, merupakan salah satu sprite dari Pictoblox bernama Tobi yang akan menjadi teman coding Anda. Sprite memiliki banyak kostum yang dapat Anda berikan aksi dengan menggunakan blok-blok coding sebagai perintah.

2. Backdrop Panel

Backdrop Panel berisi kumpulan background atau latar belakang yang dapat digunakan untuk mempercantik project dan melengkapi dari sprite itu sendiri, sehingga project yang dibuat menjadi lebih menarik.

3. Coding Area

Coding Area merupakan sekumpulan “blok” yang disusun dengan urutan tertentu untuk menjalankan satu atau serangkaian tugas. Anda dapat menyusun beberapa blok code yang dijalankan secara bersamaan, penyusunan blok kode ini harus diarea kode yang berada ditengah layar.

4. Blok Kode

Blok Kode ini seperti potongan puzzle yang digunakan untuk menulis program dengan cara menyeret dan melepaskannya di bawah kode-kode lain pada Coding area, 

5. Palet Blok

Palet blok ini terletak dibagian pinggir paling kiri, palet ini terdiri dari berbagai palet seperti Gerakan, Suara dan Kontrol. Setiap palet memiliki blok berbeda untuk menjalankan fungsi sesuai dengan nama palet itu sendiri. Misalnya, palet gerakan akan mengontrol gerakan sprite, dan palet kontrol untuk mengontrol jalannya sprite sesuai kondisi yang ditentukan, begitu juga dengan palet lainnya. 

3. Project Sederhana Pictoblox
4. Berjalan

Project awal yang sederhana untuk memahami pictoblox yaitu menggerakkan sprite berjalan ke kanan dan ke kiri.

1. Buka Aplikasi Pictoblox dan Klik “My Space”

2. Klik simbol “+” pojok kanan bawah untuk ke tampilan halaman project

3. Sekarang mari kita buat sprite berjalan kekanan dan kekiri

4. Pada “Block Pallet” pilih bagian Events, pilih “When Green Clicked” geser ke kanan

5. Lanjut, pilih Motion, pilih “move 10 step” geser ke kanan. (ini maksudnya bergerak 10 langkah)

6. Masih di Motion, pilih “if on edge, bounce” geser ke kanan (maksudnya akan memantul jika sampai di pinggir)

7. Agar saat sprit berbalik arah terlihat rapih maka perlu kita atur rotasinya. Masih di Motion, pilih “set rotation style left-right”

8. Sampai sini perintah yang kita buat sudah jadi, akan tetapi perintah ini belum bekerja secara maksimal, sekarang mari kita berikan perintah “Forever” dan “wait 1 seconds” pada Block Pallet “Control” agar perintah yang kita berikan bisa berjalan bagus.

9. Perintah yang kita buat sudah berjalan, akan tetapi berjalannya masih kurang sempurna, mari kita lengkapi pada block pallet “Event” pilih “When Green Clicked” kembali

10. Klik Block Pallet “Looks” pilih “Switch costume to Tobi” dan berikan jeda klik block pallet “Control” pilih “Wait 1 seconds”

11. Ulangi kembali langkah tersebut, “Switch costumer to Tobi walking 1” dan berikan jeda

12. Berikan blok kode “Forever” agar sprite berjalan terus menerus.

13. Terkahir agar hasil project lebih menarik, mari kita tambahkan background dengan cara

• Klik dan tahan Backdrop Panel, akan tampil pensil, klik icon pensil
• Klik icon gambar+ yang berada di pojok kiri bawah
• Pilih Background yang diinginkan dan hapus background yang tidak terpakai
• Setelah dipilih, kembali ke papan project
• Selesai.

2. Deteksi Objek

Deteksi object merupakan salah satu project dari pictoblox dengan tambahan extention yang digunakan untuk mendeteksi nama-nama object yang telah kita atur sebelumnya.

1. Buka Aplikasi Pictoblox dan Klik “My Space”

2. Klik simbol “+” pojok kanan bawah untuk ke tampilan halaman project

3. Sekarang mari kita buat sprite yang dapat mendeteksi object, silahkan klik “Extention” pojok kiri bawah.

4. Klik ekstention “Object Detection” tunggu proses pemasangan sampai selesai.

5. Pada “Block Pallet” pilih bagian Events, pilih “When Green Clicked” geser ke kanan

6. Lanjut, pada block code Object Detection, pilih “turn on video on stage with 0 % transparency” klik geser ke kanan

7. Masih di block code, klik dan geser ke kanan juga “set detection threshold to 0.5”

8. Block code diatas baru code untuk membuka kamera HP kita di lembar project. Selanjutnya mari kita tambahkan perintah “forever” pada bagian control klik dan geser ke kanan

9. Masih di block code “Object Detection” pilih “show bounding box” klik geser ke kanan dan “analyse image from camera”. Letakkan didalam code “Forever”

10. Klik block code “Looks”, pilih “think …” klik dan geser ke kanan

11. Klik block code “Variabel” klik “Make a Variable”, Buat variabel baru dengan nama “object” kemudian klik “Ok”

12. Masih di block code “Variabel” pilih “Pilih set object to 0” dan geser ke kanan. Pada bagian ini kita telah membuat box hasil dari deteksi kamera. Selanjurnya kita buat logika untuk kamera membaca object

13. Selanjutnya kita buat beberapa logika menggunakan block code “If – Then”, klik bagian control pilih “if – then” klik tahan geser ke kanan

14. Klik bagian Object Detection, pilih “is person detected?” letakkan diantara if dan then

15. Klik bagian Variabel, pilih “Set object to 0” angka 0 nya ganti dengan nama sendiri.

16. Terakhir klik bagian Look, pilih “Say Hello!” kata Hello! ubah menjadi nama sendiri.

17. Mari buat object lain lagi dengan cara yang sama yaitu Selanjutnya kita buat beberapa logika menggunakan block code “If – Then”, klik bagian control pilih “if – then” klik tahan geser ke kanan

18. Klik bagian Object Detection, pilih “is person detected?” letakkan diantara if dan then, dan kata person ubah ke botol

19. Klik bagian Variabel, pilih “Set object to 0” angka 0 nya ganti dengan botol dan klik bagian Look, pilih “Say Hello!” kata Hello! ubah menjadi botol

20. Selesai. Jangan lupa projectnya disimpan

3. ChatGPT

Selanjutnya kita akan bermain dengan ChatGPT, pada pictoblox tersedia juga extention ChatGPT untuk membuat sebuah project percakapan 2 orang antara manusia dan robot. Berikut langkahnya.

1. Buka Aplikasi Pictoblox dan Klik “My Space”

2. Klik simbol “+” pojok kanan bawah untuk ke tampilan halaman project

3. Sekarang mari kita buat sprite yang dapat mendeteksi object, silahkan klik “Extention” pojok kiri bawah.

4. Klik ekstention “ChatGPT” tunggu proses pemasangan sampai selesai.

5. Klik icon background, klik icon pensil. Untuk memberikan background

6. Klik icon background+ untuk menambah background

7. Pilih dan klik background yang diinginkan, maka hasilnya akan seperti ini

8. Selanjutnya sesuaikan sprite, kita sudah memiliki 1 sprite berbentuk beruang. Sesuaikan posisinya.

9. Langkah selanjutnya kita tambah kembali sprite yang berbentuk robot sebagai “ChatGPT” nya. Klik icon sprite, kemudian klik icon pensil.

10. Pilih icon sprite+ yang terletak di sebelah kiri

11. Pilih Robot dan pilih sprite robot yang diinginkan

12. Atur besar kecilnya ukuran sprite robot

Setelah berhasil mengatur background, menambahkan extention ChatGPT, Sprite pertama dan sprite kedua (robot)nya, langkah selanjutnya mari kita ngoding memberikan perintah pada sripte pertama dan kedua

13. Klik sprite pertama, pilih block code “event” kemudian pilih “When clicked” geser ke kanan.

14. Klik block code “ChatGPT”, pilih “set creativity of ChatGPT” dan “set maximum length to …” geser ke kanan

15. Masih di ChatGPT, pilih “define mango” dan kata mango silahkan diganti sesuai yang anda inginkan, sebagai contoh disini akan diganti menjadi “Belajar pictoblox”

16. Selanjutnya klik block code dan pilih “ask What’s your name? and wait” geser kekanan, kalimat What’s your name silahkan Anda ubah sesuai yang diinginkan, ini sebagai kalimat pembuka. sebagai contoh diganti “Bantu saya !”

17. Klik block code ChatGPT, pilih “ask AI Hello AI”. Hello AI ini silahkan ganti dengan block code “Answer”

18. Klik block code sensing, pilih “answer”, geser ke kanan letakkan dibagian Hello AI

19. Langkah terakhir, klik block code Event, pilih “broadcast message1”

20. Klik “message1” pilih “New message” dan tulis “responAI” kemudian klik “ok”

Sekarang kita telah selesai mengatur sprite yang pertama, selanjutnya mari atur sprite yang kedua yaitu robotnya yang akan menjawab semua pertanyaan dari kita, berikut langkahnya ;

21. Klik sprite robot dan klik block code Events, pilih “when I receive responAI” geser ke kanan

22. Klik block code “Look”, pilih “think hmm… for 2 seconds” geser ke kanan

23. Masih di block code Look, pilih “say hello! for 2 seconds” geser ke kanan

24. Klik block code ChatGPT, pilih “get AI response” letakkan pada bagian say hello, dan 2 seconds ubah menjadi 10 secontd agar tampil lebih lama.

Project ChatGPT telah selesai, sekarang teman-teman dapat menanyakan sesuatu pada Robot ChatGPT.

4. Penutup

Pictoblox merupakan platform belajar coding untuk pemula dengan bahasa pemrograman berbasis block layaknya menyusun puzzle, beberapa project simpel telah kita buat bersama, langkah selanjutnya teman-teman dapat mengekplore sendiri dengan terus berlatih. Selain secara virtual seperti project yang telah kita buat, pictoblox juga dapat digunakan untuk membuat project nyata sederhana yang dikombinasikan dengan perangkat keras yaitu Arduino.