Cara membuat aplikasi chat sederhana dengan sketchware

Berikut ini adalah cara membuat aplikasi chat menggunakan sketchware.

1.Buat project baru di Sketchware dan masukan nama, package sesuai dengan yang anda inginkan.

2.Setelah project baru di Sketchware anda telah selesai dibuat kemudian hubungkan project tersebut dengan firebase agar dapat digunakan secara online.

Baca juga : Cara Membuat aplikasi dan menghubungkanya dengan Firebase.

3.Buatlah tampilan halaman untuk Mendaftar , Login dan Lupa Password.

4. Buat juat juga tampilan custom view pada tab VIEW > CustomView seperti gambar berikut.

Baca juga :

Cara Membuat halaman Aplikasi Untuk Daftar di Sketchware.

Cara Membuat halaman aplikasi Untuk Login di Sketchware.

Cara membuat halaman aplikasi Lupa password di Sketchware.


4. Setelah siap lalu buat tampilan untuk halaman chat susuai yang anda inginkan atau sebagai contoh gambar dibawah ini.

Keterangan Untuk membuat halaman chat:

a.menggunakan linear1 (h) dibagian atas dengan gravity : Right , width :match_parent dan heigth : wrap_content. Kemudian di dalam linear1(h) masukan textview1 lalu ganti text dan idnya menjadi keluar.

b. Dibawah linear1(h) tambahkan ListView1 dengan weight : 1 Kemudian Set ListView1 dengan CustomView yang telah dibuat sebelumnya.

c.Dibawah listview1 masukan imageview1 dengan width :150 dan heigth : 150 lalu ubah idnya menjadi imageview_display.

d.Dibawah imageview_display masukan linear2 (h) dengan width : match_parent dan heigth :wrap_content. Didalam linear2 (h) masukan linear3(h) dan sebuah imageview2 lalu ubah id imageview2 dengan "Tombol_kirim".

d. Didalam linear3 (h) tambahkan imageview3  dengan width : 30 dan heigth : 30. Lalu ubah  idnya dengan "upload_gambar". Tambahkan juga edittext1 lalu ubah hint dan idnya menjadi pesan.

4.Atur tampilan untuk Listview1 set dengan CustomView yang sebelumnya talah di buat .Aktifkan Listview1 > Event > OnBindCustomView Tambahahkan kode langsung untuk listview1 agar selalu refresh di posisi bawah jika data baru di push.

listview1.setTranscriptMode(ListView.TRANSCRIPT_MODE_ALWAYS_SCROLL);
listview1.setStackFromBottom(true);


Tambahkan juga kode berukut agar keypad tidak mengganggu :

android.view.inputmethod.InputMethodManager imm = (android.view.inputmethod.InputMethodManager)getSystemService(INPUT_METHOD_SERVICE);
imm.hideSoftInputFromWindow(getCurrentFocus().getWindowToken(), 0);

Lalu tambahkan juga kode berikut untuk identifikasi pengguna yaitu berpola :

If FirebaseAuth getUid equals (get value at position key uid of List Map chats) then,
linear1.setGravity(Gravity.RIGHT);
else,
linear1.setGravity(Gravity.LEFT);



Hasilnya akan seperti ini :

5.Setelah tampilan selesai dibuat selanjutnya buka tab component lalu tambahkan component intent, File_picker, Calendar , Sharepreference ,Firebase Auth ,firebase Database (Profil) , Firebase Database (Chat) ,seperti pada gambar dibawah ini.

6.Jika semua sudah siap kemudian buka tab  Event > OnCreate. Lalu tambahkan blok view dan set Imageview_display menjadi Gone.

7.Selanjutnya aktifkan filepicker dengan cara klik imageview2/ upload_photo Event> OnClick > blok > component > pickfiles.

8.Setelah filepicker aktif buka onFilePicker dan tambahkan blok seperti gambar dibawah.

9.Setelah settingan onFilepicker selesai tambahkan blok pada komponen Firebase Storage > onUploadProgress seperti gambar dibawah.

10.Selanjutnya pada komponen Firebase Storage > onUploadSucces seperti tambahkan pula blok seperti gambar dibawah.

11.Tambahkan Blok pada Firebase Database(Profil) seperti gambar dibawah ini .

12.Aktifkan juga Imageview2/ tombol kirim dengan cara klik imageview2/ tombol_kirim seperti gambar dibawah.

13.Jika semua sudah barulah aktifkan tombol keluar dibagian atas dengan menambahkan kode :

finishAffinity();

Atau jika tidak ingin user log Out hilangkan blok firebaseAuth SignOut dan sisakan blok " finishAffinity();"  saja.

Itulah untuk membuat aplikasi chat sederhana menggunakan sketchware.

Share this post