Proyek GudangKita Bagian 2 – Menghubungkan Aplikasi Android ke Firebase

Ngulik Kode - Assalamu’alaikum teman-teman kembali lagi di Artikel Admin TokoCoding - MuhFikriH, kali ini kita akan melanjutkan Aplikasi GudangKita Part kedua. Di sesi kali ini, Admin akan membantu kalian bagaimana caranya menghubungkan Firebase ke Aplikasi Android dengan bahasa pemrograman Java Native kita. Sebenarnya untuk menghubungkan Aplikasi kita ke Firebase itu ada dua cara yakni :

• Otomatis by Assistant dari Android Studio
• Manual copy paste file google-service.json dari Firebase

Nah umumnya orang-orang menggunakan cara yang pertama, jadi banyak artikel yang sudah membahas cara mengkoneksikannya dengan cara yang pertama. Tapi tidak sedikit juga yang menggunakan cara kedua karna sering gagal jika menggunakan cara yang pertama, oleh karna itu Admin disini akan membantu  kalian yang gagal menggunakan cara pertama untuk menghubungkan Aplikasi Android kalian ke Firebase dengan cara yang kedua. Okey admin rasa sudah cukup pembukaannya maka kita langsung aja eksekusi.

1. Buka Situs Resmi Firebase Source 

Lalu klik "Buka konsol" pada bagian atas.

2. Add Project

Klik "Add project" untuk membuat project baru

3. Nama Project

Masukkan nama project kalian, sebagai contoh disini admin akan membuat project "GudangKita"

4. Google Analytics

Terdapat radio button sebagai pilihan apakah kalian akan mengaktifkan fitur "Google Analytics" atau tidak. Disini Admin akan mengaktifkannya. Sebagai informasi, dengan kalian mengaktifkan fitur ini terdapat banyak keuntungannya, salah satu fitur yang sangat diuntungkan adalah "Crash-free users" yang mana fitur ini akan memberi tahu kalian jika suatu waktu terdapat crash pada Aplikasi kalian, dan juga menunjukan Log dimana titik crash tersebut terjadi.

5. Requirement Google Analytics

Centang saja semua yang dibutuhkan pada form jika kalian masih menginginkan fitur "Google Analytics" lalu klik "Create project"

6. Registrasi Sukses

Tunggu beberapa saat maka project Firebase anda akan siap digunakan. Dan dibawah ini adalah tampilan Dashboard project Firebase kita. Tapi proses belum selesai, saat ini kalian baru saja berhasil membuat project Firebase kalian tapi belum bisa terhubung ke Aplikasi Android kalian. Oleh karena itu mari kita lanjutkan petualangan kita. 

Dibawah tulisan "Get started by adding Firebase to your app" terdapat beberapa button salah satunya Button Android, klik button tersebut.

7. Register App

Terdapat 3 data yang dibutuhkan dalam meregistrasikan App kita ke Firebase, yakni :

• Package name :
  Cara untuk mendapatkan package name App kita adalah dengan membuka project di IDE favorit kalian. Lalu buka file AndroidManifest.xml, lalu pada bagian paling atas tepatnya pada tag <manifest> akan tertera nama Package Apk kita, jika tidak dapat menemukannya kita juga bisa mengeceknya pada file build.gradle(app).

• App Nickname :
  Nickname App kalian di Firebase, kali ini terserah kalian mau menggunakan nama seperti apa yang penting mudah kalian ingat aja.

• SHA-1 :
  SHA-1 terdapat 2 tipe, yakni tipe Release dan Debug. Karena saat ini kita hanya membutuhkan untuk belajar Development saja, maka SHA-1 yang kita butuhkan adalah yang Debug. Untuk saat ini Admin belum membuat artikel bagaimana cara untuk mendapatkan SHA-1 pada laptop kalian. Tapi disini Admin sudah menyiapkan tutorial yang Admin temukan pada Stackoverflow, kalian bisa saja mengikuti tutorial berikut Source

8. Download Config File

Klik button yang bertuliskan "Download google-service.json" jika sudah, copy file yang sudah didownload tadi dan paste pada direktori "App" seperti gambar berikut.

Jika sudah, kembali pada Firebase lalu klik "Next".

9. Add Firebase SDK

Pada sesi kali ini, kalian wajib menambahkan SDK Firebase pada project kalian. Tapi jika kalian sudah mengikuti tutorial ini dari sesi pertama Source, kalian tidak perlu menambahkan banyak SDK. Hanya perlu menambahkan code ke dalam 2 file, yakni :

• Gradle level root (level project) build.gradle.

classpath 'com.google.gms:google-services:4.3.10'

• Gradle modul (level aplikasi), biasanya app/build.gradle.

apply plugin: 'com.google.gms.google-services'

Jika kedua codingan tadi sudah kalian masukkan, maka diatas akan ada notif perubahan pada file build.gradle, yang kalian perlu lakukan adalah dengan menekan tombol "Sync now" tunggu hingga proses selesai.

10. Finished

Kembali pada laman Firebase dan tekan tombol terakhir yang tersisa. Maka proses Registrasi App kita ke Firebase sudah selesai, dan Aplikasi kita sudah terhubung ke Firebase.

Baik teman-teman untuk tutorial GudangKita Part 2 sudah selesai sampai sini, jika ada pertanyaan bisa kalian tanyakan pada kolom komentar. Begitu juga jika ada kritik dan saran. Di tutorial berikutnya kita akan mulai mempelajari Firebase Authentication, yakni fitur dari Firebase yang memudahkan para Developer untuk membuat fitur Autentikasi yang mana nanti bisa terhubung ke Google Account, Facebook, dll.

Terima kasih sudah membaca tutorial ini, sampai jumpa di sesi berikutnya.

Proyek GudangKita Bagian 1 – Setup Aplikasi : Membuat Splash Screen, Mengganti Icon Aplikasi, Dan Setup Tema Aplikasi

Ngulik Kode - Assalamu’alaikum teman-teman selamat datang di artikel pertama saya di Blog Ngulik Kode. Perkenalkan saya Admin TokoCoding - MuhFikriH, disini kita akan belajar bersama-sama membuat CRUD dengan Firebase pada Aplikasi Android dengan Bahasa pemrograman Java. Bagi yang belum tau apa itu Firebase, saya akan bantu menjelaskan nya di lain Artikel. Di artikel ini saya asumsikan temen-temen sudah mengetahui apa itu Firebase. Nah artikel ini akan terbagi menjadi beberapa part. Jadi bagi yang ingin mempelejari nya, silahkan simak setiap artikel nya karena itu semua akan menjadi bagian yang berkelanjutan. Langsung aja yuk kita mulai.

1. Buat Project Android

Buka IDE kesayangan teman-teman, kalo disini saya menggunakan Android Studio. 

• Pilih “Start a new Android Stuideo project”
• Pilih “Empty Activity”

• Sesuaikan requirement device untuk Aplikasi kita

• Tunggu hingga proses selesai dan Aplikasi anda sudah selesai dibuat
• Migrate projek anda ke AndroidX
• Klik tab Refactor -> Migrate to AndroidX

2. Setup Library

Disini kita akan menggunakan beberapa library untuk menunjang kebutuhan aplikasi kita, diantaranya sebagai berikut :

Nama Library	Source	Keterangan
ButterKnife	Source	Library untuk Binding View
SDP	Source	Library untuk menulis satuan size yang akan responsive terhadap setiap ukuran device.
Picasso	Source	Library untuk menampilkan gambar
Converter GSON	Source	Library untuk mengkonversi data JSON ke GSON begitu juga sebaliknya
Google Material	Source	Library agar kita bisa menggunakan widget-widget dari Material Google
Firebase	Source	Library yang akan menjadi Library utama kita agar bisa menggunakan

• Buka file build.gradle(app) anda lalu ubah menjadi seperti berikut.
  
  
  

3. Mengganti Icon Aplikasi

• Siapkan gambar yang akan menjadi icon anda. Disini saya menggunakan asset dari iconfinder.com jika teman-teman ingin membuat nya sama seperti saya, silahkan download icon pada halaman berikut.
• Download gambar gratis : Source
  Download file dalam bentuk SVG
  
• Import gambar
• Buka kembali projek aplikasi teman-teman, lalu buka direkrori App->res->mipmap. Klik kanan pada folder mipmap, lalu pilih new->Image Asset seperti pada gambar

• Pilih letak file yang sudah anda siapkan pada form "path" lalu klik Next seperti pada gambar.

Jika kalian ingin mengganti warna background pada icon, klik pada bagian "Background Layer" dan pilih color, lalu masukkan kode hexa warna yang kalian inginkan.

• Klik finish maka Icon sudah siap digunakan

• Edit file pada AndroidManifest.xml menjadi seperti berikut. 
  
  
  
• Ubah pada bagian :
  - android:icon
  - android:roundIcon
  
• Run kembali projek anda, maka icon aplikasi anda akan berubah.
  
  

4. Membuat SplashScreen

• Buat Activity berikut dengan nama SplashScreenActivity.
  Klik kanan pada direktori gudangkita, lalu pilih new->Activity->Empty Activity

• Centang kolom Launcher Activity
• Edit file activity_splashscreen.xml menjadi seperti berikut.
  
  
  
• Edit file SplashScreenActivity.java menjadi seperti berikut.
  
  
  
• Edit file AndroidManifest.xml, hapus tag <intent filter> pada bagian MainActivity (Jika ada), seperti pada kode berikut :
  
  
  
• Dan berikut hasilnya

Baik teman-teman sekian dulu tutorial GudangKita kali ini. Jika ada saran, kritik, atau pertanyaan silahkan tinggalkan pada kolom komentar ya. Semoga ilmunya bermanfaat, terima kasih dan maaf bila ada salah kata. Sampai jumpa di artikel berikutnya.

Mengenal Apa Itu Design Best Practice Beserta Contohnya

Ngulik Kode - Assalamu’alaikum teman-teman selamat datang di artikel pertama saya di Blog Ngulikode. Perkenalkan saya Admin TokoCoding - Ratih, disini kita akan belajar bersama-sama berbagai pembahasan dan juga praktek dalam dunia design. 

    Design best practice mengacu pada suatu metode atau teknik dimana teknik tersebut sudah menjadi standar  yang telah ditetapkan dalam kualitas, etika, peraturan, tolak ukur dan lain-lainnya. Design best practice sendiri ada banyak, tapi kali ini kita akan membahas 10 Nielsen's 10 Usability Heuristic yang dikemukakan oleh Jakob Nielsen. Dimana prinsip ini sudah menjadi prinsip universal dan telah banyak digunakan produk-produk perangkat lunak.

1. Visibility of System Status

Istilah visibility atau visibilitas sendiri adalah keadaan yang dapat dilihat dan diamati. Jika dalam desain,  terutama UI design sendiri, visibility of system status adalah keadaan dimana design itu  mampu memberikan informasi yang terjadi, terlihat jelas dan dapat diamati oleh user. 

Contoh dari tampilan home Gojek yang menyuguhkan visibility of system status yaitu saldo gopay yang masih kosong.

2. Match Between System & Real World

Heuristik kedua ini menyatakan bahwa Sistem harus berbicara dalam bahasa user, dengan kata, frasa, dan konsep yang akrab bagi pengguna, daripada istilah yang berorientasi pada sistem.

Lagi-lagi kita memakai contoh dari app gojek. Gambar diatas merupakan contoh app tersebut menggunakan Bahasa yang mudah dipahami dan tidak menggunakan istilah system. 

3. User Control & Freedom

Pengertian ini secara singkat adalah memberikan kemudahan dan kebebasan kepada user dalam interface. Contoh yang paling sering adalah dengan adanya tombol undo dan redo di dalam UI design.

Contoh kali ini kita ambil dari app mitra gojek, yang mana 2 button tersebut adalah contoh dari user control and freedom, tentu saja, user bisa memilih salah satu pilihan disana dengan bebas.

4. Consistency & Standards

Konsistensi & Standar adalah nilai kunci dari setiap produk, merek, atau identitas. Dalam istilah sederhana, Sebuah design tidak boleh membingungkan user dengan menggunakan kata-kata, tindakan, desain, atau situasi yang berbeda untuk mendapatkan arti yang sama. 

Contoh button di app gojek seperti gambar diatas merupakan contoh design yang konsisten dalam pembuatan icon di dalam button. 

5. Error Prevention 

Selanjutnya, Error prevention merupakan bentuk pencegahan kesalahan yang mungkin saja dilakukan oleh user. Dengan adanya error prevention ini maka akan memperkecil kemungkinan kesalahan oleh user pemula hingga expert.

Contoh yang sering digunakan adalah memunculkan error message untuk menghindari adanya kesalahan yang lebih fatal. 

Fitur Show/Hide di kolom Password memberikan pencegahan terjadinya password yang salah/typo. User dapat melakukan cek terhadap text yang telah diinput, sehingga dapat meningkatkan kemungkinan password yang telah diinput adalah benar dan mengurangi kemungkinan eror login. 

6.  Recognition Rrather Than Recall 

Membuat user mengenali system daripada mengingat. Dengan kata lain meminimalkan beban untuk user mengingat dengan membuat objek, tindakan, dan opsi terlihat agar user tidak harus mengingat informasi dari satu bagian dialog ke bagian lain

Adanya breadcrumb di file path, atau file recent di Ms. Word memudahkan pengguna untuk mengenali system nya daripada harus mengingat. 

7. Flexibility and Efficiency of Use 

Pada dasarnya user terbagi menjadi dua, yaitu user berpengalaman dan user yang tidak berpengalaman, prinsip fleksibilitas dan efisiensi ini mengharuskan kita membuat design yang nyaman dan memudahkan penggunaan untuk kedua tipe user. 

Kali ini kita menggunakan app shopee, dengan adanya fitur filter, memudahkan user dalam mencari barang, contoh lain adalah fitur sort by ataupun fitur shortcut dan lain-lain.

8. Aesthetic and Minimalist Design

Nyaman dipandang dengan warna kontras yang baik, posisi sesuai dan serasi dengan adanya design minimalist ditambah white space yang sesuai agar user focus dan dalam nilai estetika nya membuat desain lebih elegan. 

Contohnya adalah home page Google yang terlihat sederhana dan elegan juga hanya menyediakan informasi yang sederhana dan penting. Juga fokus pada system yang dibutuhkan user. 

9. Help Users Recognize, Diagnose, and Recover From Errors 

Prinsip ke-9 ini mengharuskan kita membantu user jika ada kemungkinan kesalahan atau kegagalan yang terjadi pada system. Dalam kalimat sederhananya adalah memberi solusi jika ada error, tidak hanya pesannya. 

• Microsoft Edge
  Contoh dari Microsoft edge, bisa dilihat dari gambar dibawah, yang mana tidak hanya pesan error nya saja, tetapi ada juga Langkah langkah yang memudahkan user.

• App Gopay
  Contoh dari app gopay yang menampilkan pesan error untuk memberitahu informasi kepada user. 

10. Help and Documentation 

Berikan fitur bantuan dan dokumentasi dan membiarkan user belajar lebih banyak. Maka secara tidak langsung kita kita telah memberikan control lebih kepada user.

• Fitur bantuan di Gojek

• Fitur bantuan di Google Chrome