Membuat aplikasi dan Game

 Cara Membuat Aplikasi dan Game Menggunakan App Inventor

App Inventor merupakan alat yang paling sederhana untuk memulai mengenal dunia pemprograman android. Sebelumnya App Inventor dikembangkan oleh Google namun belakangan pengembangannya diserahkan pada MIT. Kelebihan App Inventor ketimbang alat pemprograman yang lain adalah pengguna dapat membuat atau melakukan pemprograman aplikasi android tanpa coding melainkan hanya perlu melakukan drag-and-drop pada blok-blok puzzle sebagai pengganti coding.

A.    Cara Mengisntal App Inventor

App inventor ini bisa digunakan secara online maupun offline. Jika digunakan secara online maka kita tinggal mengunjungi link https://appinventor.mit.edu/ . Sedangkan jika akn digunakan secara offline, maka kita harus menginstal aplikasinya dengan cara:

1.     Pastikan laptop kita sudah terinstal java, karena App inventor ini menggunakan bahasa pemprograman Java.

2.     Instal App inventor sesuai dengan versi laptop yang digunakan (32 bit atau 64 bit)

3.     Untuk membuka peladen (server) App Inventor Offline Buka file "AI2U.exe"

4.     Setelah peladen App Inventor offline ini dibuka maka akan muncul tampilan seperti di bawah ini. Selanjutnya untuk memulai menjalankan peladen, klik "All AI2U Server". 

5.     Setelah kedua peladen bejalan (running), selanjutnya buka browser Chrome. Pada adress bar Chrome, isikan alamat "localhost:8888" tanpa tanda petik

6.      Klik pada "Click here to use your Google Account to login"

7.     Selanjutnya login, Setelah kamu login kamu akan masuk pada user interface App Inventor Offline.

Saya menggunakan App Inventor online, cara membukanya adalah sebagai berikut:

a.     Kunjungi link https://appinventor.mit.edu/ .

b.     Kemudian klik “Buka Aplikasi”

c.     Masuk ke akun email dan kemudian akan muncul tampilan seperti berikut

 

 

B.    Cara penggunaan App Inventor

1.     Klik “projects” kemudian klik “start new project”

2.     Kemudian buat nama file dan jangan menggunakan spasi lalu klik ok

3.     Maka akan muncul seperti tampilan berikut. Terdapat 5 bagian yaitu

a.     Tab Menu

b.     Pallete             : Berisi Fitur yang akan digunakan

c.     Viewer            : Menampilkan hasil design yang telah dibuat

d.     Component     : Menampilkan semua tools yang digunakan

e.     Properties        : Menampikan Properti tools yang digunakan

4.    Buatlah tampilan awal untuk aplikasi yang akan  dibuat. Masukkan latar yang diinginkan seperti gambar berikut dengan cara klik “background image” pada bagian properties kemudian import latar yang diinginkan.

5.     Buat button, sehingga tampilan menjadi seperti pada gambar

6.     Tambahkan screen 2 dengan cara klik “add screen” kemudian ulangi langkah d dan e untuk menambhkan background dan button untuk membuat screen menu yang berisi about us, materi, video, game, soal latihan dan evaluasi seperti tampilan gambar berikut

7.     Membuat Screen about us

a.     Buat screen about us yang berisi tentang profil pembuat aplikasi dan button petunjuk penggunaan seperti gambar berikut. Kemudian klik bloks agar ketika tombol di klik beralih ke screen about us.

Langkah – Langkah Bloks

Klik screen menu> ubah terlebih dahulu nama button dengan  nama “B_About” > klik bloks > dan masukan koding seperti gambar berikut

b.     Buat screen  Petunjuk_Penggunaan seperti gambar berikut, jangan lupa untuk menyentang tombol “html” pada bagian properties agar teks yang kita masukkan berupa paragraph dan terlihat rapih

c.     Klik screen menu> klik tombol materi > ubah terlebih dahulu nama button dengan  nama “BPetunjuk” > klik bloks > dan masukan koding seperti gambar 1 Bloks menu

8.   Buat screen Materi_PPT yang berisi button Materi dan PPT seperti gambar berikut. Kemudian klik bloks dan buat koding seperti pada “gambar Bloks Menu” agar ketika tombol di klik beralih ke screen Materi dan PPT.

9.     Membuat screen Materi dan screen PPT yang berisi button Materi dan Button PPT

a.     Membuat screen materi

1.     Buat screen Materi yang berisi Materi tentang momentum dan impuls,  jangan lupa untuk menyentang tombol “html” pada bagian properties agar teks yang kita masukkan berupa paragraph dan terlihat rapih

2.     Kemudian ke screen “Materi_PPT” > klik button konsep > ubah nama button menjadi “Bkonsep” > klik “bloks” > dan lakukan koding seperti pada gambar

b.     Membuat Screen PPT

1.     Buat screen PPT yang berisi link PPT tentang momentum dan impuls

langkah langkah :

a.     masukkan file ppt ke gdrive >salin link Gdrive > klik “WebViewer” pada bagian pallete di user interface > klik bloks dan lakukan kodingan seperti gambar berikut

b.     Kembali ke tombol “designer” klik screen Materi_PPT > klik button PPT> ubah nama button dengan “BPPT”  >  klik bloks > dan lakukan koding seperti gambar 2. Bloks Materi_PPT

c.     Klik screen menu> klik tombol materi > ubah terlebih dahulu nama button dengan  nama “BMateri” > klik bloks > dan masukan koding seperti gambar 1 Bloks menu

 

10.  Membuat Screen Video

a.     Buat screen Video yang berisi link video pembelajaran yang sudah terupload kemudian salin link > klik “WebViewer” pada bagian pallete di user interface > Kemudian klik bloks dan lakukan koding seperti gambar berikut

b.     Kembali ke designer > Klik “menu” > klik button Video > ubah nama button dengan “BVideo”  klik bloks > dan lakukan koding seperti pada “gambar Bloks Menu” agar ketika tombol di klik beralih ke link video yang kita upload.

11.  Membuat Screen Soal Latihan

a.     Buat screen “Soal_Latihan” yang berisi soal soal latihan. Kemudian lakukan  langkah langkah :

-       buat button seperti pada gambar “Tampilan screen soal_Latihan”

-       Buat screen Hal_Score seperti pada gambar “tampilan hal score” dan buat kodingan di bagian bloks

-       Buat koding seperti gambar berikut untuk mengatur soal yang akan muncul di tampilan aplikasi dan agar ketika siswa selesai mengerjakan soal maka diakhir score nilai akan muncul

12.  Membuat screen Evaluasi

a.     Buat screen Evaluasi yang berisi link quizizz yang sudah terupload kemudian salin link > klik “WebViewer” pada bagian pallete di user interface > Kemudian klik bloks dan lakukan koding seperti gambar berikut

b.     Kembali ke designer > Klik “menu” > klik button Evaluasi > ubah nama button dengan “BEvaluasi”  klik bloks > dan lakukan koding seperti pada “gambar Bloks Menu” agar ketika tombol di klik beralih ke link quizizz yang kita upload.

C.    Cara membuat Game di App Inventor

1.     Tampilan Game yang dibuat

2.     Tampilan game di aplikasi

3.     Langkah langkah membuat game di App inventor

a.     Buat Screen “Hal_Game” seperti gambar 3

-       Buat dan atur Horizontal arrangement yang terdapat pada bagian pallete di menu “layout” > Buat label dengan nama “Score_Label pada bagian pallete di menu “use interface> dan buat button start dan reset pada bagian pallete di menu “use interface”

-       Buat canvas yang terdapat pada bagian pallete di menu “Drawing and animation” >tambahkan ball dan “image sprite”

b.     Lakukan kodingg dengan klik bloks dan buat koding seperti gambar

c.     Kembali ke designer > Klik “menu” > klik button Game > ubah nama button dengan “BGame”  klik bloks > dan lakukan koding seperti pada “gambar Bloks Menu”

D.    Kelebihan dan Kekurangan App Inventor

a.     Kelebihan

1.     Kita tidak lagi menemukan kode-kode program seperti halnya ketika menggunakan tools developing lain. Kode-kode itu sudah dibungkus kedalam objek visual, yang dinamakan Blocks. Kita tinggal memahami fungsi dari Blocks tersebut, kemudian bagaimana dia berinteraksi dengan Blocks lain, dan terakhir merangkainya persis seperti merangkai puzzle untuk membuat suatu bentuk atau gambar.

2.     Kita tidak perlu mengingat dan menulis instruksi. Salah satu sumber terbesar dari kekesalan para programmer pemula adalah menuliskan kode program dan muncul pesan error pada jendela pesan.

3.     Hanya seperti blok yang dipasangkan satu sama lain. Pemrograman dengan App Inventor tidak menampilkan pesan kesalahan, tetapi blok bahasa App Inventor akan mencegah kita untuk melakukan kesalahan di tempat pertama. Sebagai contoh, jika sebuah fungsi mengharapkan suatu bilangan, Anda tidak dapat memasukkan teks. Hal ini tidak dapat mencegah semua kesalahan, tetapi akan sangat membantu.

4.     App Inventor membuat komponen-komponen dan blok diorganisasikan pada sebuah laci yang siap sedia. Kita dapat dengan mudah memprogram hanya dengan mencari program blok-blok yang sesuai dan tidak perlu mengingat instruksi atau harus membuka program manual.

5.     Sesuai dengan penjabaran iatas, app inventor ini adalah software yang praktis da mudah dalam membuat suatu aplikasi

b.     Kekurangan

1.     Agak rumit pada saat membuat tampilan halaman seperti yang kita inginkan

2.     Adakalanya, ketika di cek di emulator, posisi button yang telah kita atur tidak sesuai dan acak acakan

3.     Tidak bisa di undo ketika kita ingin mengembalikan ke pengaturan yang teah kita edit

4.     Fiturnya agak terbatas

Berikut Aplikasi dan Game yang telah dibuat https://drive.google.com/file/d/1rIWpGN-V6VCrSJqRIMJkh_PkPA_5a1zz/view?usp=sharing