Membuat Game Sederhana Menggunakan App Inventor(2)

Saya akan melanjutkan postingan sebelumnya. 

Game yang kedua ini adalah game sentuh gambar.

Tahapan pembuatan nya sama seperti yang sebelumnya, akan tetapi ada perbedaan dari segi design maupun blocks nya.

Langsung saja..

-- Tahapan Design --

1. Kita membutuhkan empat buah horizontalarrangement. Drag horizontalarrangement dari palette layout ke screen.

2. Drag canvas dan imageSprite dari palette Drawing and Animation ke horizontalarrangement1. 

- Set ukuran canvas menjadi 300*200 (w*h). 

- Upload sebuah gambar untuk imageSprite.

- Set ukuran gambar yang telah di-upload menjadi 50*50 (w*h).

- Rename imageSprite (sesuai keinginan).

3. Drag button ke horizontalarrangement2. Kemudian rename menjadi ResetButton.

4. Drag dua buah label ke horizontalarrangement3.

- Rename label1 menjadi HitsLabel. Pada kolom properties ubah text menjadi "Hit".

- Rename label2 menjadi HitsCountLabel. Pada kolom properties ubah text menjadi 0.

5. Drag dua buah label ke horizontalarrangement4.

- Rename label3 menjadi MissesLabel. Pada kolom properties ubah text menjadi "Misses".

- Rename label4 menjadi MissesCountLabel. Pada kolom properties ubah text menjadi 0.

6. Drag sound dari palette media.

7. Drag clock dari palette sensors. Pada kolom properties set timerinterval.

Design telah selesai. Berikut adalah contoh screen shoot dari design yang telah dibuat :

-- Tahapan Pembuatan Blocks --

1. Pengaturan gerakan dari imageSprite sesuai dengan koordinat x dan y canvas.

Caranya :

a. klik Procedures, pilih to procedure do. Ubah nama procedure sesuai dengan yang diinginkan.

b. klik imageSprite, pilih call image.MoveTo x y

c. klik Math, pilih random integer from .. to..

untuk value from isikan 0 dan untuk value to, klik Math, pilih yang pengurangan. Lalu klik canvas1, pilih canvas.width. Kemudian klik imageSprite pilih yang image.width. Lakukan sebaliknya untuk height.

Gabungkan puzzle seperti gambar dibawah ini :

2. Pengaturan ketika screen aplikasi baru dibuka.

Caranya:

a. klik screen1, pilih when screen.initialize do.

b. klik Procedures, pilih call procedure.

Gabungkan puzzle seperti gambar dibawah ini :

3. Pengaturan timer. 

Caranya :

a. klik Clock, pilih when clock1.Timer do.

b. klik Procedures, pilih call procedure.

Gabungkan puzzle seperti gambar dibawah ini :

4. Pengaturan score. Ketika imageSprite disentuh atau diklik maka score HintsCountLabel akan bertambah, sebaliknya ketika sasaran tidak tepat maka score MissesCountLabel yang bertambah.

Caranya :

a. klik canvas1, pilih when canvas1.Touched do.

b. klik Control, pilih if then else.

c. klik Variables, pilih get, kemudian set touchedSprite.

d. klik HintsCountLabel, pilih set HitsCountLabel.Text to.

e. klik Math, pilih pertambahan. Untuk value yang pertama klik HitsCountLabel pilih HitsCountLabel.Text. Untuk value yang kedua klik Math dan pilih report the number shown isikan 1. Lakukan hal yang sama untuk MissesCountLabel.

Gabungkan puzzle seperti gambar dibawah ini :

5. Pengaturan reset button. Button ini berfungsi untuk mengembalikan score menjadi 0.

Caranya :

a. klik ResetButton, pilih when ResetButton.Click do.

b. klik HitsCountLabel, pilih set HitsCountLabel.Text to.

c. klik Math, pilih report the number shown, isikan value nya 1.

Lakukan hal yang sama untuk MissesCountLabel.

Gabungkan puzzle seperti gambar dibawah ini :

6. Pengaturan vibrate. Hal ini merupakan efek ketika kita memainkan game tersebut di android.

Caranya :

a. klik imageSprite, pilih when image.Touched do.

b. klik sound1, pilih call sound1.Vibrate milisecs.

c. klik Math, pilih report the number shown set value nya 100.

Gabungkan puzzle seperti gambar dibawah ini :

Pembuatan Blocks telah selesai.

Klik Connect --> Emulator

Maka tampilan android nya adalah seperti berikut ini :

Membuat Game Sederhana Menggunakan App Inventor (1)

Hallooooo ^,^

Pada tulisan kali ini saya akan share tentang pembuatan game sederhana menggunakan App Inventor.

Game sederhana yang pertama yaitu game tebak gambar.

Sama dengan postingan sebelumnya saya menggunakan app inventor secara online.

Tahap pembuatan nya adalah sebagai berikut :

Akses halaman ai2.appinventor.mit.edu. Kita diharuskan login menggunakan account google terlebih dahulu. Setelah login maka akan muncul tampilan seperti berikut ini :

Lalu buat project baru dengan cara klik Start New Project

Kemudian isi kan Project Name

-- Tahapan Design -- 

1. Drag horizontalarrangement dari palette layout sebanyak tiga buah. Lakukan pengaturan letak horizontalarrangement dengan cara : pada kolom components klik Screen1 lalu ubah Align Horizontal menjadi center

2. Drag image dari palette user interface ke horizontalarrengement yang pertama. Lakukan upload gambar dengan cara : klik image1 pada kolom components lalu pada kolom properties klik text field picture lalu klik upload file. Pilih file yang akan digunakan. Kita juga dapat mengatur ukuran width dan height dari gambar tersebut, dengan mengatur nya pada kolom properties.

3. Drag label dari palette user interface ke bagian screen antara horizontalarrangement1 dengan horizontalarrangement2. Pada kolom properties hapus text label tersebut.

4. Drag textbox dan button dari palette user interface ke horizontalarrangement2. Textbox digunakan untuk input jawaban dan button digunakan untuk submit jawaban. Pada kolom properties ubah text button menjadi Submit.

5. Drag button dari palette user interface ke horizontalarrangement2. Button ini berfungsi untuk pindah ke pertanyaan berikutnya apabila di klik. Pada kolom properties ubah text button menjadi Next.

6. Drag sebuah label ke bawah horizontalarrangement3. Label tersebut berfungsi sebagai notif apakah jawaban yang diinput benar atau salah.

Tahapan design telah selesai. Screen shoot design dari game tebak gambar lebih kurang seperti berikut ini :

-- Tahapan Pembuatan Blocks --

1. Klik Blocks pada bagian atas sebelah kanan

2. Inisiasi list pertanyaan dan jawaban nya.

   Cara nya :

   a.Klik pada Variables, pilih initialize global. Ubah namanya          dengan QuestionsList untuk daftar pertanyaan dan AnswersList        untuk daftar jawabannya.

   b. Klik pada Lists, pilih make a list.

   c. Klik Text, pilih yang memiliki string quotes.

   Satukan puzzle seperti gambar dibawah ini :

3. Inisiasi Index Question

   Caranya :

   a. Klik Variabels, pilih initialize global. Ubah nama nya menjadi       CurrentQuestionIndex.

   b. Klik Math, pilih yang pertama dan isi kan value nya 1.

   Satukan puzzle seperti gambar dibawah ini :

4. Mengatur ketika screen awal ditampilkan maka pertanyaan pertama      muncul.

   Caranya :

   a. Klik screen1, pilih when screen.initialize.

   b. Klik label1, pilih set label.text.

   c. Klik Lists, pilih select list item list index.

   d. Klik Variabels, pilih get, lalu pilih global                         CurrentQuestionIndex.

   e. Klik Math, lalu isikan value nya 1.

   Satukan puzzle seperti gambar dibawah ini :

5. Pengaturan button next untuk pindah pertanyaan.

   Caranya :

   a. klik button2, pilih when button.click do.

   b. klik Variables, pilih set dan pilih global                           CurrentQuestionIndex. Lalu pilih get dan pilih global               CurrentQuestionIndex. 

   c. klik Math, pilih yang pertambahan dan report the number shown       set value nya 1.

   d. klik Control, pilih if then. 

   e. klik Math, pilih > dan report the number shown set value nya         2.

   f. klik Variables, pilih get, pilih global CurrentQuestionIndex.       pilih juga set, pilih global CurrentQuestionIndex.

   g. klik Math, pilih report the number shown set value nya 1.

   h. klik label1, pilih set label.text.

   i. klik Lists, pilih select list item list index.

   j. klik Variables, pilih get lalu pilih global QuestionsList.           Pilih get satu lagi dan pilih global CurrentQuestionIndex.

   Satukan puzzle seperti gambar dibawah ini :

6. Pengaturan submit jawaban. Kondisi pertama yaitu ketika jawaban      benar maka pada label2    maka muncul "Benar" dan ketika jawaban    salah maka muncul "Salah". Kondisi kedua, ketika jawaban benar,      maka langsung berpindah ke jawaban selanjutnya tanpa klik tombol    next.

   Caranya :

   a. klik button1, pilih when button.click do.

   b. klik Control, pilih if then.

   c. klik Math, pilih equal.

   d. klik textbox1, pilih textBox1.text.

   e. klik Lists, pilih select list item list index.

   f. klik Variables, pilih get 2 buah. dan set masing-masing global       AnswersList dan global CurrentQuestionIndex.

   g. klik label2, pilih set label2.text.

   h. klik Text, pilih text string dan isikan value Benar.

   i. klik Variables, pilih set dan pilih global                           CurrentQuestionIndex.

   j. klik Math, pilih yang pertambahan dan report the number shown       set value nya 1.

   k. klik Variables, pilih get dan pilih global                           CurrentQuestionIndex.

   l. klik label1, pilih set label.text.

   m. klik Lists, pilih select list item list index.

   n. klik Variables, pilih 2 buah get. atur masing-masing value nya       global QuestionsList dan global CurrebtQuestionIndex.

   o. klik label2, pilih set label.text sebanyak 2 kali.

   p. klik Text, pilih text string sebanyak 2 buah. Set masing-           masing value nya null dan "Salah".

      Satukan puzzle seperti gambar dibawah ini :

  Tahapan Blocks telah selesai.

Klik Connect --> Emulator

Tampilannya akan seperti gambar dibawah ini :

Pembuatan Aplikasi Android Menggunakan App Inventor

Halloooooo.. Kali ini saya akan menulis tahapan tutorial menggunakan app inventor.

App inventor?? Apan tuh? Jadi itu semacam aplikasi buat android gitu, TANPA NGODING.. haha seru kan bikin aplikasi tanpa ngoding?? Kita cuma drag and drop item doang..

Nah, dalam pembuatan nya bisa offline atau online. Kebetulan saya bikinnya online karena java yang sudah ter-install di laptop saya versi 1.8. Oh ya, sebelum kelupaan, fyi app inventor ini hasil research MIT, dan kalau mau install app inventor nya, di laptop harus sudah ter-install java 1.7 dulu dan jangan lupa setting path di laptopnya ya sesuai root folder nyimpen jdk nya.

Jadi, tahapannya begini untuk setting path nya : 

1. Pada myComputer klik kanan dan pilih properties

2. Pilih Advanced system settings -> environment variables

3. Pada system variables klik new

4. Lalu isi kan seperti screen shoot dibawah ini :

5. Pada system variables, pilih path kemudian klik edit. Tambahkan      root folder tempat penyimpanan jdk nya. 

 Seperti ini : C:\Program Files\Java\jdk1.7.0_03\bin;

Pengaturan path telah selesaaaiii..

Berhubung saya menggunakan versi online, tahapan dalam penggunaan nya adalah sebagai berikut :

  1. Install app inventor

  2. Setelah ter-install, run aiStarter. Maka akan muncul penampakan      seperti ini :

  3. Kemudian, buka browser lalu akses : http://ai2.appinventor.mit.edu/    

  a. Login terlebih dahulu pada account google.

  b. Pada tampilan awal login, jangan lupa centang sign in as            administrator.

     Maka akan muncul tampilan berikut:

      Lalu klik continue

   4. Klik start new project.

    

      Lalu isikan project name.

      Lalu klik ok

      Maka akan muncul tampilan seperti dibawah ini :

    5. Lalu kita dapat melakukan berbagai setting. Salah satunya            upload image sebagai background.

       Caranya :

       - Lakukan pengaturan pada kolom properties

     - Pilih background image lalu upload file

   6. Tahapan design :

      Lakukan drag and drop item yang diperlukan pada palette.

      a. Pembuatan button

       - Drag button dari palette user interface. Pengaturan tata            letak button dapat dilakukan pada kolom properties

     b. Memasukkan musik

      - Drag player dari palette media. 

       Lalu upload music dari laptop dengan cara :

       Pada components pilih player1
       pada properties klik source
       lalu upload file

   7. Setelah selesai melakukan design (drag and drop beberapa item        sesuai kebutuhan), lalu klik blocks pada bagian atas sebelah         kanan.

             Maka tampilannya adalah seperti berikut ini :

   -  Pada kolom blocks pilih button1 lalu pilih when button click.

   -  Kemudian pada kolom blocks pilih Player1 lalu pilih 
     call player1 start.

pemilihan dapat disesuaikan dengan fungsionalitas yang diinginkan, seperti start, play, pause, dan lain lain.

   - Lalu gabungkan puzzle button dan player yang telah dipilih tadi.

   8. Klik connect dan pilih emulator

   9. Tunggu beberapa saat, dan akan muncul tampilan seperti berikut       ini:

Buka aplikasi yang telah dibuat tadi, lalu klik button

Taddaaaaaaa music is playing..

Segitu dulu ya tutorial sederhana nya.. kebetulan saya cuma masukin item button dan ketika di klik musiknya jalan.

Selamat mencoba ya beberapa item dan fungsionalitas lainnya..

*Thanks to mas Handi yang udah ngajarin materi ini :)

Pendidikan Karakter Bersama Orang-Orang Luar Biasa

impossible to Possible merupakan salah satu quotes yang dapat dibuktikan kebenarannya. Kami mahasiswa/i D4 ITB kerjasama SEAMOLEC telah membuktikan mewujudkan sesuatu yang tidak mungkin menjadi mungkin. Hal itu terealisasi ketika kegiatan outbound yang dilakukan selama dua hari. Outbound dipandu oleh Bapak Stanley, team dari Kaizinov Institute. Tujuan utama dari program outbound ini adalah untuk pembangunan karakter. Banyak kegiatan yang kami lakukan saat outbound ini, yaitu materi tentang motivasi dan pendidikan karakter, berwirausaha, dan games. Banyak pengalaman yang luar biasa yang dapat kami ambil.

Materi motivasi dan pendidikan karakter sangat bagus dan dapat menginspirasi, menumbuhkan semangat dan kepercayaan diri, serta membuka hati dan pikiran bahwa kita sebagai manusia tidak dapat hidup sendiri. Kita sebagai makhluk sosial harus bisa menjadi “lentur”. Maksudnya adalah kita sebagai manusia, khususnya sebagai seorang pemuda harus dapat beradaptasi dengan lingkungan dimanapun kita berada. Kita harus bisa memahami setiap karakter orang yang kita jumpai, yang berada di lingkungan kita agar kita tahu bagaimana cara mengambil sikap jika berhubungan dengan orang tersebut.

Berwirausaha? Ya, kami ditantang berjualan dalam waktu yang seksama dan dalam tempo yang sesingkat-singkatnya. Kami diberikan waktu hanya dua jam untuk berjualan dan harus menghasilkan untung yang sebesar-besarnya. Kami seangkatan batch 9 berjumlah 117 orang, lalu dibagi menjadi empat kelompok yaitu kerbau, kuda, harimau dan matahari. Kebetulan saya bergabung dengan kelompok kerbau \m/. Awalnya kami masih pendiam, malu-malu satu sama lain, tetapi setelah melewati waktu bersama-sama kami semakin akrab, dan kebanyakan anggota kelompok ini adalah orang-orang “gila”. Kelompok kerbau adalah kelompok yang paling rusuh, yang paling seru, dan paling kerrrrreeeeen. Nah jadi, pada tantangan berjualan kali ini kami berkoordinasi dan sepakat membagi anggota kelompok menjadi beberapa kelompok kecil dan memasarkan produk yang akan kami jual menyebar ke beberapa daerah. Kami diberi modal beberapa buku inspiratif dan kapsul ajaib. Pada hari pertama, saya sekelompok dengan rekan saya Amel, Fatih, dan Hadi. Kami berjalan kaki menyusuri jalan raya pondok cabe dari kampus Universitas Terbuka sampai perampatan jalan gaplek. Hmm jaraknya sekitar +/- 2 km dan itu bolak balik tanpa menggunakan angkutan atau kendaraaan bermotor. Kami menawarkan produk kami ke berbagai kalangan. Banyak penolakan yang kami terima. Pada hari pertama itu setelah mengumpulkan dari beberapa kelompok kecil yang menyebar, kelompok kami memperoleh penghasilan 560.000. Pada hari kedua berjualan, kami berkomitmen harus mendapatkan hasil yang lebih banyak daripada hari pertama. Pada hari kedua ini hampir sama sistemnya yang kami gunakan, akan tetapi pada hari kedua ini kelompok kecil saya bertambah dua orang yaitu Kemal dan Tohlah. Pada hari kedua kami berjualan di daerah Pamulang. Kami berusaha door to door di salah satu perumahan, kami juga menjual ke orang-orang disekitaran pasar pagi. Pada hari kedua ini kelompok kami berhasil mengumpulkan 2.570.000. Setelah dikalkulasi hasil berjualan empat kelompok selama dua hari (rentang waktu jualan hanya empat jam) kami berhasil mengumpulkan 14.280.000. Ini merupakan suatu perubahan dan pencapaian yang sangat luar biasa, kami telah membuktikan impossible to possible. Kami berhasil menjual pena yang seharga 2.000 menjadi ratusan ribu per pena, buku yang seharga 50.000 menjadai ratusan ribu bahkan jutaan rupiah. Hal ini dapat terwujud karena tingginya fighting spirit, teamwork, dan pengeksekusian strategi yang matang.

Kegiatan selanjutnya yaitu kegiatan yang paling menyenangkan yaitu games. Kami berlomba-lomba antar kelompok untuk menjadi pemenang. Kami berlomba dengan cara yang sportif. Dengan adanya games ini kami dilatih agar kompak, solid, bekerjasama, bertanggung jawab, dapat memikirkan strategi agar menang, serta memecahkan masalah yang dihadapi.

Setelah outbound selesai maka yang berhak menjadi pemenang selama outbound diumumkan. Penilaian dari hari pertama sampai hari kedua diambil dari berbagai aspek. Daaan kelompok kerbau menjadi JUARA 2 ! Horrreeeeee !! Outbound yang sangat berkesan, outbound yang paling kerrrreeeeeen yang pernah saya ikuti. 

Kelompok Kerbau

Pembangunan Web Menggunakan GO Programming [2]

== PART 2 ==

Saya akan melanjutkan postingan pembangunan web menggunakan pemrograman GO sebelumnya.

Kali ini saya akan membahas tentang cara menampilkan data yang diambil dari database MySQL

*tetep ya pada postingan ini framework saya samarkan*

1. Menampilkan nama provinsi yang ada pada table province

Berikut beberapa potongan source code nya:

- Controller :

*buka file mhs.go*

Tambahkan function berikut :

func Lihat (w http.ResponseWriter, r *http.Request) {

t,_ := mr.MRenderTemplate("login/lihat.html")

r.ParseForm();

p := model.GetProvince()

data := struct { Data []model.Province}{Data:p}

mr.MExecute(w,t,data)

}

- Model :

*buka file M_province.go*

Buat source code berikut :

package model

import (

_ "github.com/go-sql-driver/mysql"

"framework/sys/config"

)

     type Province struct { 

ProvinceId int

ProvinceName string}

func GetProvince() []Province { 

db := config.MuntoiDB

rows, _ := db.Query("SELECT  province.province_id as             ProvinceId, province.province_name as ProvinceName FROM             province")

        mis := []Province{} 

mi := Province{} 

for rows.Next() {

rows.Scan(&mi.ProvinceId, &mi.ProvinceName)

mis = append(mis, mi) 

}

return mis

}

- Routing :

*buka file Routing.go*

Tambahkan source code berikut :

jalan.MuntoiReg("/lihat", mhs.Lihat)

- Buat sebuah file html dengan nama file lihat.html dan simpan pada folder C:\xampp\htdocs\gomuntoi\template\login

<html>

<head>

<title>List Province</title>

</head>

<body>

{{with .Data}}{{range .}}

<input type = "button" value = "{{.ProvinceName}}" />

{{end}}{{end}}

</body>

</html>

- Akses pada browser : localhost:8080/lihat

Maka akan muncul seperti gambar dibawah ini :

2. Menampilkan provinsi berdasarkan id provinsi yang telah dipilih

- Controller :

*buka file mhs.go*

Tambahkan function berikut :

func LihatById (w http.ResponseWriter, r *http.Request) {

t, _ := mr.MRenderTemplate("login/lihat.html")

idprov := r.FormValue("id")

p := model.GetProvinceById(idprov)

data := struct { Data []model.Province}{Data:p}

mr.MExecute(w,t,data)

}

- Model :

*buka file M_province.go*

Tambahkan source code berikut :

func GetProvinceById(id string) []Province{

db := config.MuntoiDB

rows, _ := db.Query("SELECT  province.province_id as                   ProvinceId, province.province_name as ProvinceName FROM                 province where province.province_id="+id)

mis := []Province{}

mi := Province{}

for rows.Next() {

rows.Scan(&mi.ProvinceId, &mi.ProvinceName)

mis = append(mis, mi)

}

return mis

}

- Routing :

*buka file Routing.go*

Tambahkan source code berikut :

jalan.MuntoiReg("/lihatid", mhs.LihatById)

- Akses pada browser : localhost:8080/lihatid?id=7

*pemilihan id kondisional, sesuai yang ingin ditampilkan*

Maka akan muncul seperti gambar dibawah ini :