Membuat Aplikasi Kalkulator menggunakan MIT APP Inventor 2 Ultimate

Cara Pembuatan Aplikasi Sederhana di MIT App Inventor 2 Ultimate

       Hallo disini saya akan memaparkan tutorial cara pembuatan aplikasi sederhana yaitu membuat aplikasi sederhana berbasi mobile,berikut dibawah ini alat dan bahan juga langkah-langkah pembuatannya.

Alat dan Bahan:

1. PC/Laptop.
2. Aplikasi MIT App Inventor 2 Ultimate (disini saya menggunakan yang offline).
3. Google Chrome.

Langkah-langkah Pembuatannya:

1.     Buka aplikasi MIT App Inventor 2 Ultimate.

2.     selanjutnya, buka Google Chrome atau Mozila firefox dan masuk ke localhost:8888.

3.     Masukan akun yang kita gunakan di MIT APP Inventor.

4.     kita buat new project kita namakan project itu dengan nama Kalkulator  

5.     Selanjutnya kita masuk Screen 1,di Screen 1 ini kita design hingga terlihat seperti kalkulator umumnya seperti gambar dibawah ini.

     

6.     Dan dibawah ini ada gambar component-component yang digunakan di design screen 1,digambar tersebut banyak buton-button,nama text button kita rubah nama textnya sesuai dengan nomor yang akan ditampilkan.

     

7.     Selanjutnya kita masuk ke bagian kode blocksnya seperti gambar dibawah ini.

      

yang terakhir ini merupakan lanjutan dari code block kedua terakhir

8.     untuk kode blocknya hanya segitu dan mohon maaf bila gambarnya juga jika kurang dimengerti tpi coba saja ikuti gambar diatas tata letak codignya berurutan seperti yang diatas.

9.     Selanjutnya kita save dan build aplikasinya

10. Selesai ,dan selamat mencoba

Alhamdulillah cukup segitu saja pembuatan aplikasi sederhana semoga anda berhasil dan mengerti karena saya juga masih belajar itu juga saya pada saat mengerjakanya atau membuat aplikasi itu saya juga agak pusing tetapi dengan usaha insyaallah jika berhasil kita akan merasa puas :)

Terima kasih atas kunjunganya semoga bermanfaat :)

Tutorial Login dan Register With Tiny Web Database

Ikuti Langkah-langkah di bawah ini.

1. Buka App Inventor 2 Ultimate.
2. Lalu Buka project yang Form Login dan Register yang sudah kita buat sebelumnya.
3. Lalu kita buat lagi Screen5 dan kita desain dan set Backgroundnya.
4. Kita tambahkan Textbox untuk memasukkan username yang akan didaftarkan.
5. Masukkan Passwordtextbox untuk memasukkan Password yang didaftarkan.
6. Selanjutnya kita masukkan 2 button.
7. button1 kita namakan SignUp dan button2 kita namakan Back To Login.
8. Terakhir masukkan Tinywebdb yang ada pada pada menu pallete-storage,klik drag dan masukkan viewer.
9. Kita Desain sehingga tampilan seperti gambar yang dibawah ini.
10. 
    
11. Jika sudah selesai kita kembali ke Screen1 kita tambahkan tinywebdb pada Screen1.
12. Lalu kita masuk ke kode blocks.
13. Kita isikan kode blocks sesuai dengan gambar dibawah ini.
14. Setelah selesai kita build appnya dan install aplikasinya di handphone android kita.
15. Setelah diinstall lalu kita coba daftarkan Akun kita masing-masing dengan klik tombol Register.
16. Lalu isi username dan password yang akan kita gunakan dan kita daftarkan.
17. Lalu klik sign Up.
18. Setelah selesai kita klik Back to login.
19. Tunggu beberapa saat atau kita bisa cek apakah username dan password kita telah masuk database atau tidak di http://appinvtinywebdb.appspot.com
20. Cara cek nya kita masuk ke alamat webnya,lalu isi tag nya denan users,klik get value.
21. Cari dan perhatikan username dan password yang kalian masukkan tadi sudah ada atau belum.
22. Jika ada,kita tinggal mencoba untuk login  di app androidnya.
23. Tutorial Register and Login app with  Tiny Web Database telah selesai

Terimakasih Semoga Bermanfaat

App Inventor 2 Ultimate Offline

CARA INSTALL DAN PEMBUATAN FORM LOGIN APP INVENTOR 2 ULTIMATE OFFLINE

     1.Cara Menginstall App Inventor 2 Ultimate Offline

1.     Download MIT App Inventor 2 ultimate,sesuaikai dengan bit komputer yang kita gunakan.

2.     Klik 2 kali  App inventornya yang sudah kita download.

3.     Pilih bahasa yang akan kita gunakan yaitu English.

4.     Akan muncul tampilan klik next.

5.     Akan muncul tampilan Additional Icons,jika kita ingin lebih mudah membuka aplikasi tersebut yaitu supaya icon aplikasi itu langsung muncul di desktop yaitu dengan cara ceklis yang ada tulisan Create a desktop icon.

6.     Lalu Next dan klik Install.

7.     Tunggu beberapa menit untuk memsang aplikasi tersebut.

   Jika sudah selesai memasangnya akan muncul tampilan finish.

2. Cara menjalankan dan Membuat Aplikasi di  MIT APP Inventor 2 Ultimate

1. Buka aplikasi MIT App inventor.
2. Lalu akan muncul 3 CMD,3 CMD tersebut jangan diclose selama kita menggunakan aplikasi tersebut
   
3. Buka Web Browser yaitu Google Chrome atau Mozila Firefox.
4. Pada Browser tersebut langsung buka Localhost:8888
   
5. Selanjutnya,akan muncul tampilan seperti dibawah ini,lalu untuk login ke aplikasi tersebut kita masukkan Email yang akan kita gunakan,jika sudah masukkan email langsung klik login.
   
6. Lalu akan muncul  tampilan Terms of  Service klik I accept the terms of service
   
   
   
7. Muncullah tampilan utama MIT app Inventor,untuk pertama kali kita membuat project,kita langsung klik Start new project.
   
8. Lalu  akan muncul tampilan untuk nama project,kita masukkan nama projectnya Login,klik OK.
   
   
   
9. Selanjutnya  muncul tampilan untuk Desain aplikasi yang akan kita buat,seperti gambar dibawah ini
   
   
   
10. Di tampilan desain, kita disediakan Pallete yaitu untuk memasukan desain menu ataupun tombol di aplikasi tersebut,dengan cara tekan pallete yang kita pilih lalu geserkan ke Screen 1.dan juga sebelah kanannya terdapat properties untuk desain tampilan tersebut,seperti gambar dibawah ini.
    
11. Selanjunya, kita Desain Screen1 untuk form Login,seperti gambar dibawah ini
    
12. Lalu kita tambahkan lagi form untuk jika kita berhasil masuk,caranya kita klik Add Screen lalu kita berinama Screen2 supaya mudah,lalu muncul Screen untuk mendesain Screen jika berhasil masuk.contohnya gambar di bawah ini.
    
13. Kita tambahkan lagi form untuk jika kita tidak berhasil masuk,caranya sama seperti yang no 12,kita berinama Screen3.
    
14. Jika kita sudah selesai mendesain Aplikasi yang kita inginkan,selanjutnya kita pindah ke blocks agar aplikasi itu bisa berjalan,seperti gambar dibawah ini
    
15. Untuk mengisikan kode block,kita tinggal cari saja kode block di Block sebelah kanan tinggal klik saja kode yang akan digunakan,da isi dari kode block tersebut harus sesuai dengan nama-nama properties desain yang kita buat seperti gambar dibawah ini.
    
    
    
16. Terakhir, kita build aplikasi dengan cara klik build ti tool atas lalu pilih App(Save .apk to my computer)seperti gambar dibawah ini
    
17. Jika selesai di build kita tunggu beberapa saat untuk menjadikan file tersebut menjadi apk.
18.   Terakhir kita salin file apk tersebut ke handphone kita lalu pasang/install.
19. Selesailah pembuatan Form Login di App Inventor 2 Ultimate

Terima Kasih Semoga Bermanfaat :)