Cara Membuat Aplikasi Percakapan 2 Bahasa (Indonesia-Jerman) Menggunakan App Inventor

Saya akan memberikan tutorial cara membuat Aplikasi 2 Bahasa (Indonesia dan  Jerman) menggunakan App inventor .

1. Buka situs App Inventor Online http://ai2.appinventor.mit.edu/ . Ingat disini kita harus menggunakan  email dari google (gmail).

2.       Setelah masuk di App Inventor, kemudian buat Project baru dengan cara klik “Start New Project” dan klik OK.

3.     Disini kita sudah bisa membuat Interface atau desain tampilan untuk Aplikasi yang akan kita buat, Untuk mengubah desain tampilan dengan gambar yang kita inginkan, pilih propertis kemudian untuk BackgroudColor diubah menjadi “None” dan pada BackgroundImage kita dapat mengupload gambar sesuai dengan keinginan.

4.   Kemudian pada Pallet pilih menu Layout, pilih HorizontalArrangement kemudian drag and drop kedalam screen dan rubah posisi menjadi center.

5. Pilih menu User Interface pada Pallete kemudian pilih Label drag and drog pada HorihontalArrangement. Pada Label yang telah di drag tadi diisi judul Aplikasi Bahasa yang akan dibuat. Kemudian drag and drog Button pada menu User interface kedalam HorizontalArrengment yang terakhir .

Screen1 selesai dibuat, Selanjutnya membuat Screen2 dengan cara Add Screen pada bagian atas.

6.     Pembuatan Screen2 sama persis pada pembuatan Screen1, Kemudian isilah Conten pada Screen2 sesuai dengan kebutuhan.

7.       Setelah itu buat Screen3, dengan isi conten sebagai berikut;

8.       Buat Screen4, ikuti cara sebelumnya

9.   Buat screen lagi sesuai dengan tema atau conten, sebagai contoh 

10.  Setelah semua Screen yang kita butuhkan selesai kita buat, sekarang saatnya untuk membuat logika pada masing-masing Screen.

11.  Logika untuk screen1, buka screen1 kemudian pada pojok kanan atas pilih Blocks, kemudian akan muncul akan lembar kerja untuk membuat logika tersebut dimana logika pada Screen1 berisi seperti ini :

12.   Kemudian logika untuk screen2.

13.   Logika screen3

Pada Logika di screen3 yang button2 dan button3 fungsi dari nama screen yang akan direload masih kosong, dikarenakan conten nya belum diisi. Karena ini adalah sekedar tutorial contoh, dan anda bias mengexplore lebih jauh lagi sesuai kreativitas.

14.   Pada screen4 tidak perlu dikasih logika karena pada screen tersebut tidak ada nya aksi atau hanya sekedar deskripsi saja.

  

15. Masuk pada pemberian logika pada screen5, dimana sebelum memberikan logika kita harus mengupload file yang perlu “Sound” yang akan dijadikan dialog.

16.   Setelah file pendukung selesai diupload semua, saatnya masuk pada logika screen5

Silahkan isi dengan logika ini

17.   Yapppss , langkah untuk membuat Aplikasi 2 bahasa telah selesai dibuat.

18.  Untuk mengeksport hasil Aplikasi 2 Bahasa ini dalam format .apk , dengan cara pilih “Build”  kemudian pilih App (save .apk to my computer). Tunggu sampe proses Build selesai dan format dalam bentuk .apk bisa langsung di install pada Smart phone Android.

Alhamdulilah tutorial kali ini telah selesai, semoga bermanfaat .

Jika ada yang kurang jelas, silahkan tinggalkan komentar dibawah . :D

Read More

Tutorial Membuat Aplikasi Quiz Menggunakan App Inventor

       Assalamualaikum sobat, apa kabar ??? .... 

     sebelumnya kita sudah pernah membahas tentang Installasi App Inventor dan pembuatan Aplikasi pemutar musik yang amat sederhana, kali ini saya akan berbagi ilmu tentang pembuatan Aplikasi Quiz menggunakan App inventor. Cekidottt ...

1. Sebelum mendesign user interface pada aplikasi yang akan dibuat, anda perlu menyiapkan file yang akan di masukan dalam aplikasi tersebut. Misalnya audio/video atau file gambar untuk memperindah aplikasi, sehingga pada designer aplikasi anda tinggal memasukan semua komponen tersebut.

File gambar :

                

   

 2.    Buka program App Inventor dan buat project baru pada navigasi my project. Klik My Project => New Project =>  input name => AplikasiQuiz ( tanpa spasi ).

3.     Langkah selanjutnya yang perlu dilakukan yaitu drag komponen HorizontalArrangment kemudian drop pada viewer, selanjutnya atur properties komponen HorizontalArrangment seperti berikut :

4.  Drag komponen Image kemudian drop pada viever ( letakan di dalam HorizontalArrangement ),

kemudian atur propertis dan upload gambar yang diperlukan :

5.   Drag komponen Label kemudian drop pada viever dan atur propertis

6.    Drag komponen HorizontalArrangment letakan pada viewer, kemudian drag komponen TextBox dan Button letakan didalam HorizontalArrangment.

7.   Drag komponen HorizontalArrangment letakan pada viewer, kemudian drag komponen Button letakan didalam HorizontalArrangment.

8.      Untuk komponen yang terakhir  kita drag Label letakan pada viewer dan atur propertis , Text dihapus atau jangan diisi .

Berikut adalah tampilan layar dari aplikasi Quiz,

9.     Nahh,,,  Setelah semua komponen terpasang, saatnya untuk membuat logika fungsi atau perintah agar aplikasi quis yang akan dibuat bisa dijalankan. Klik “ Open Blocks Editor “ pada sudut kanan atas App Inventor.

10.    Buat Logika fungsi atau perintah pada Blocks Editor seperti ini :

  

 

11.  Setelah semua logika fungsi selesai selanjutnya kita jalankan dengan mengKlik “ New Emulator “ , tunggu sampai proses runing selesai dan secara otomatis Aplikasi Quiz yang kita buat akan tampil dan siap untuk dijalankan .

 Alhamdulilah ... Selesai juga, semoga bermanfaat :D .

Read More