Membuat Aplikasi Profil Sederhana di App Inventor

Aplikasi Profil Sederhana App Inventor by khryaaa


        Membuat aplikasi profil sederhana di App Inventor sangatlah mudah. Karena kita hanya memainkan logika atau block dan sama sekali tidak menggunakan kode(coding). Aplikasi sederhana ini tujuannya untuk mengetahui profil atau biodata kita secara singkat, dalam fitur ini hanya terdapat tombol klik dimana jika kita mengklik tombol yang ada di home maka kita akan menuju ke profil kita. Sebelum kita membuat aplikasi profil di app inventor, kita harus mengenal apasih app inventor itu?

        App inventor adalah program yang dibuat Google dan dikembangkan oleh MIT. App inventor ini berbasis drag and drop yang dapat memudahkan kalian membuat dan mendesain aplikasi sederhana tanpa harus mempelajari bahasa pemrograman contoh aplikasi yang bisa kita buat seperti maps, bluetooth, kurir, profil atau biodata dan masih banyak lagi. yuk, langsung saja kita buat aplikasinya!

Cara membuat aplikasi profil sederhana di app inventor

        Jika anda belum mempunyai app inventor di laptop/komputer anda dapat mengunjungi appinventor.mit.edu di google. Untuk membuat projek baru di app inventor anda harus masuk menggunakan akun google atau gmail anda.

1. Pertama, klik new project.

New Project

2. Muncul kotak dialog, beri nama project anda contoh Profil_sederhana lalu klik ok.

Name Project

3. Di screen1 bagian properties masukkan nama di AboutScreen contoh home, tambahkan gambar sesuai keinginan anda BackgroundImage.

BackgroundImage Screen1

4. Drag HorizontalArrangement di menu sebelah kiri bagian layout. Di bagian properties ubah AlignHorizontal menjadi Center:3, AlignVertical menjadi Center:2, Height menjadi 30 percent dan Width menjadi 100 percent.

HorrizontalArrangement1 Screen1

5. Tambahkan TableArrangement dengan Columns 10 sedangkan Height 50 percent dan Width 100 percent.

TableArrangement Screen1

6. Dibawahnya TableArrangement tambahkan HorrizontalArrangement yang didalamnya ada Image. Bagian Image berilah gambar atau background yang anda sukai dengan Height 30 percent dan Width 35 percent.

                 HorizontalArrangement2 Screen1     Image1 Screen1

7. Setelah itu, tambahkan lagi HorizontalArrangement di propertiesnya ikuti langkah diatas karena sama persis, didalam HorizontalArrangement terdapat Button lalu editlah Text, BackgroundColor, Shape, Height 10 percent, Width 60 Percent dan beri nama untuk tombol anda atur semenarik mungkin seperti gambar dibawah ini.

Button1 Screen1


8. Selesai di Screen1, AddScreen lalu beri nama Screen2. Kita akan menuju pada menu block, di menu block kita membuat fungsi Click dimana jika kita mengklik tombol start di Screen1 akan menuju Screen2 atau tempat profil.

Block1 Screen1

9. Screen2 drag HorizontalArrangement dengan Height 45 percent dan Width 100 percent jangan lupa AlignHorizontal ubah menjadi Center:3 dan AlignVertical ke Center:2. Tambah Image dengan gambar atau foto diri anda yang menarik seperti dibawah ini.

Image2 Screen2

10. Tambah HorizontalArrangement lagi lalu atur seperti cara diatas yang beda hanya Heightnya 5 percent. Masukkan didalamnya Label dan atur none untuk BackgroundColor, anda juga bisa mengatur sendiri tulisan, ukuran, warna dan gaya font anda tebal atau miring dengan mengatur FontBold, FontItalic, FontSize, TextColor dan FontTypeface. Ketik profil atau biodata anda di Text.

Label1 Screen2

11. Untuk Button sama dengan cara di Screen1 seperti gambar dibawah ini.

Button2 Screen2


12. Terakhir menu block di Screen2, dimana fungsi tombol di profil yaitu untuk kembali menuju home atau ke tampilan awal. Caranya sama dengan block di Screen1 yang berbeda adalah kemanakah kita akan menuju jika kita mengklik tombol kembali atau back kita akan menuju ke home atau Screen1.

Block2 Screen2
        Setelah itu anda dapat menerapkannya di handphone anda dengan cara klik Build ada 2 pilihan yang pertama menggunakan QR Code jika anda sudah mempunyai aplikasi app inventor di handphone, yang kedua save komputer, setelah di save alihkan apk ke handphone anda dan jalankan. Selesai dan selamat mencoba.

        Demikianlah cara membuat aplikasi profil sederhana di app inventor, jika kalian mencoba dan kurang mengerti dengan penjelasan saya diatas, anda bisa tanyakan dikolom komentar, InsyaaAllah saya akan menjawabnya. Semoga bermanfaat dan terimakasih :)

Komentar

Posting Komentar

Terimakasih, semoga suka dan bermanfaat :)