CategoriesiOS

Membangun Aplikasi iOS dengan Menggunakan pattern MVVM

Dalam belakangan ini pattern yang lagi trend digunakan banyak instansi dalam membangun aplikasi baik android ataupun ios hal tersebut terbukti banyaknya recruitment yang membutuhkan spesifikasi dengan pattern MVVM. Nah MVVM itu bagaimana sih? 

MVVM atau Model-View-ViewModel adalah sebuah Architetural Pattern dimana dia membagi tugas dan tanggung jawab kepada 3 komponen nya, yaitu Model, View, ViewModel (Wikipedia).

Model, merupakan sebuah wadah untuk menampung data-data yang telah didapatkan baik dari API maupun data yang dibuat secara local. 

View, komponen yang  bertanggung jawab kepada seluruh tampilan atau UI dalam Aplikasi kita baik UI dari programmatic, storyboard ataupun swiftui. Dan yang terakhir ada ViewModel yang merupakan inti dari Architecture Pattern ini, yaitu bertugas sebagai tempat komunikasi antara Model yang menyediakan data dengan View yang menampilkan data.

Kelebihan MVVM yang kerasa banget adalah code nya enak banget untuk dibuat unit testingnya dan reusable. Akan tetapi terdapat kekurangan juga bagi pemula akan kerasa sulit untuk membuat viewModel yang efektif. Untuk lebih jelasnya mari kita bedah langsung dengan membaca alur kode swift dengan pattern MVVM.

  1. Kita buat model dulu sesuai dengan api yang akan diakses, disini kita akan menggunakan api public dari https://jsonplaceholder.typicode.com dengan mengakses end point bagian post. Dimana balikan data dari api tersebut seperti berikut:

Sehingga kita buat modelnya menjadi:

Jangan lupa kita menggunakan tanda tanya (?) sebagai upaya kalau seandainya terdapat nilai null dari response end point tersebut.

  • Buat networkingnya, disini kita buat class terpisah agar lebih enak maintenancenya. Buat class NetworkService.swift dan buat balikan datanya sesuai dengan yang diperlukan, seperti completion: @escaping ([PostResponse]) yang berarti fungsi tersebut nantinya akan mengembalikan value berupa array data dalam model PostResponse. Data diperoleh dari API di decode menggunakan JSONDecoder.decode dimana data akan dimasukkan ke dalam modelnya.
  • Sekarang buat PostViewModel. Pada class ini berisi function untuk mengambil data dari function networking yang telah dibuat sebelumnya seperti gambar dibawah ini.

Pada code tersebut terdapat 3 variabel yang berbeda”, yaitu api, datapost dan bindPostViewModel. Variable api digunakan untuk memanggil class networkservice yang telah dibuat sebelumnya. Variable dataPost digunakan untuk menyimpan data dari api yang telah dipanggil melalui function fetchApi dan didalam dataPost terdapat didSet dimana setiap kali ada perubahan data maka akan mengirim notif ke view. Variable bindPostViewModel akan digunakan di View nya dan notif viewModel ke view melalui variable ini.

  • Kita buat View, dimana kali ini menggunakan storyboard untuk interfacenya. Dalamnya hanya terdapat UITableView dan UITableViewCell di buat secara terpisah. Cell dari TableView dibuat seperti berikut ini.
  • Kemudian kita setting dataSource untuk tableView seperti berikut ini.

Code tersebut bisa digunakan secara global kalau seandainya kita memakai komponen UITableView dalam membangun aplikasi, untuk untuk menggunakannya kita panggil di view.

  • Untuk coding di viewControllernya seperti dibawah ini

Jadi function yang telah kita set di view model tadi akan dieksekusi disini, jadi kalau terdapat perubahan dari ViewModel akan eksekusi function UpdateDataSource. Pada variable dataSource memanggil PostTableViewDataSource<ListPostCell, UserResponse>! yang berarti cell untuk tableView yang debut adalah ListPostCell dan data yang dipakai adalah UserResponse. Pada function UpdateDataSource di set lah identifier dari cell dan data yang pakai untuk ditampilkan.

  • Sehingga Hasilnya seperti ini
CategoriesAutomated test

Menggunakan Postman Flows

Beberapa waktu lalu postman merilis fitur baru yaitu Flows. Fitur ini sangat membantu saya dalam melakukan testing, kita bisa melakukan testing API dengan GUI dan membuat skenario flow untuk E2E.

Jika sebelumnya kita ingin melakukan test secara paralel dan berurutan harus sedikit menambahkan code pada postman kali ini pada fitur Flows kita cukup drag and drop saja. Less code more effective LMAO XD

Dan bagaimana cara menggunakan Flows ?

Note : Pastikan Postman kalian sudah Update ke versi terbaru atau kalian dapat menggunakan postman versi web

Continue reading
CategoriesiOSProgrammingSwift

Dependency Inversion in iOS

Introduction

Mungkin teman-teman sudah pernah mendengar mengenai SOLID Principle yah. Pada artikel ini kita membahas mengenai Dependency Inversion yang merupakan D dari SOLID. Dependency Inversion ini mengatakan bahwa

“High level modules should not depend on low level modules, both should depend on abstractions. Abstractions should not depend on details. Details should depend upon abstractions. “

High module di sini dapat berupa kelas yang akan mengimplementasikan fitur-fitur yang biasanya merupakan class ViewController.
Low module ini sendiri ialah sub-module yang akan akan digunakan oleh High Module, contoh umumnya seperti NetworkService, DataService, UserDefaultService dll.

Dependency Inversion di sini berfungsi agar kode yang kita tulis dapat bersifat lebih flexible dan mudah untuk dimodifikasi atau biasanya disebut dengan “Loose Coupling”

Code Example

Nah ini contoh pattern yang umum sering dijumpai pada project iOS yang ada.

Biasanya kita membuat sebuah class Singleton dan memanggil dalam class ViewController yang ada. Ini merupakan contoh kode yang menyalahi aturan Dependency Inversion, karena class ViewController tahu DataSourceService secara detail tanpa melalui Abstraction.

Memang tidak ada yang salah dengan kode ini, karena aplikasi yang ada juga berjalan dengan baik. Namun setiap kali terjadi perubahan, maka kita harus merefactor/mengganti kode-kode yang ada. Atau misalnya beberapa bulan ke depan, datasource yang ada berubah dari Firebase menjadi MonggoDB, BackEnd service dll. Nah di sini principle Dependency Inversion memiliki peran yang sangat penting.

Hands On

Di sini class ViewController bergantung pada abstraction seperti DataProviderProtocol. Nah di sini, class ViewController tidak lagi peduli bahwa data yang ada berasal dari mana, yang penting bahwa melalui abstraction ini class ViewController akan mendapatkan data.

Nah pada class SceneDelegate, kita tinggal melakukan dependency injection melalui initialzer terhadap class ViewController ini. Nah contohnya di sini kita menggunakan FirebaseDataProvider.

Seandainya beberapa minggu yang ada, tiba-tiba terjadi migration backend service dari Firebase ke dalam BackEnd company sendiri. Kita tidak perlu lagi mengganti kode yang ada pada class ViewController setiap kali ada perubahan.

Conclusion

Selama sebuah class comform terhadap DataProviderProtocol ini, kita bisa mengganti/melakukan update dengan mudah tanpa merusak kode yang sudah ada. Dengan mengerti aturan dari SOLID ini, kita bisa membuat arsitektur kode yang lebih flexible dan tentunya kode yang ada bersifat testable.

Semoga bisa bermanfaat dan memberikan insight terhadap teman-teman.

Full Project
https://github.com/windywu812/DependencyInversionDemo

CategoriesiOSProgrammingSwift

Leverage MVC Pattern in iOS

Introduction

MVC (Model-View-Controller) adalah salah satu architecture pattern yang menjadi base dari projek baru dari iOS. Saya cukup yakin jika semua iOS developer tentunya tahu dengan pattern ini. Secara umum MVC terdiri 3 komponen yaitu:

  1. Model
    Komponen atau layer ini berisi data model aplikasi, networking service, data persistence dll. Intinya komponen ini berisi logik yang berhubungan data yang ada pada aplikasi kita.
  2. View
    Untuk komponen ini sendiri pastinya kita sudah tahu yaitu Storyboard yang berfungsi untuk membuat view dari aplikasi kita.
  3. Controller
    Komponen ini biasanya kita sebut dengan ViewController, yang berfungsi menjadi jembatan antara model dan view. Di mana controller ini bertugas untuk memanggil data dan mengupdatenya ke dalam view, atau mengirim sebuah respon atau action ketika view seperti button, textfield dll mengalami perubahaan state.

Problem

Untuk architecture ini sendiri menurut saya sangat cocok untuk aplikasi yang masih sederhana, namun kenyataannya implementasi yang ada masih salah. Biasanya dalam project yang ada, kita selalu menempatkan semua logic yang ada dalam ViewController bukan? Biasanya untuk melakukan fetching data, maka kita memanggil Singleton ke dalam ViewController yang ada. Sehingga yang ada bukanlah MVC(Model-View-Controller), melainkan Massive View Controller.

Beberapa masalah yang terjadi:

  1. Menyalahi aturan Single Responsibility Principle di mana ViewController menghandle terlalu banyak operasi, ViewController seharusnya hanya bertugas untuk memanggil dan melakukan update.
  2. ViewController seharusnya tidak mengetahui implementasi detail dari operasi tersebut, dalam kasus ini kita telah menyalahi aturan dari Dependency Inversion Principle, “Module shoud not depend on Detail/Implementation (Concrete Class), it should depend on abstraction”. Dengan menyalahi aturan tersebut, class ViewController menjadi Tighly Couple dengan Singleton yang ada, dan menyebabkan kode yang ada susah untuk ditest.

Nah untuk mengatasi hal tersebut tidaklah susah, kita cukup memanfaatkan Dependency Injection dan mengikuti aturan Dependency Inversion. Ayo kita langsung hands-on aja.

Starter Project
https://github.com/windywu812/BetterMVC

Hands-On

Silahkan membuka branch Main, aplikasi ini ialah aplikasi sederhana yang memuat games dari API dan menampilkannya pada tableview yang ada. Struktur kode tersebut merupakan struktur kode yang sering kita lihat dalam beberapa project. Secara sekilas struktur kode yang ada sudah cukup rapi, namun masih dapat dikembangkan. Dalam kode ini, ViewController masih bergantung pada class NetworkService, sehingga ketika membuat test kita harus menguji implementasi yang asli (memanggil data langsung) yang biasanya memakan waktu cukup lama, padahal sebuah UnitTesting harus berjalan dengan cepat.

1. Mendefine sebuah Protocol

Membuat sebuah protocol, nantinya ViewController akan bergantung pada protocol ini (abstraction), bukan class NetworkService(Concrete Type) secara langsung.

2. Membuat class yang akan mengimplementasi protocol tersebut

Sekarang kode pada fungsi getAllGames pada class ViewController dapat dipindahkan ke dalam class GameImplementation ini.

3. Refactor kode pada class ViewController

Menambah sebuah dependency yaitu GameProtocol(Abstraction) tersebut dan menghandle completion dari fungsi getAllGames

Unit Test

Dengan membuat kode kita menjadi seperti ini, maka kita akan dapat melakukan test dengan mudah dan cepat.

1. Membuat Mock Object

Dengan membuat mock object, kita tidak perlu lagi melakukan test dengan real APICall. Kita dapat membuat data dummy kita sendiri

2. Write Unit Test

Karena ViewController bergantung dengan abstraction, kita dapat dengan mudah untuk mengganti dependency yang ada. Di sini kita tidak lagi menggunakan class GameImplementation, melainkan MockGameImplementation yang berisi data dummy kita.

Kesimpulan

Dengan membuat kode seperti ini, kita dapat membuat class/kode memiliki ruang untuk bernafas yaitu tidak bergantung pada class tertentu (Loose Coupling). Unit Test yang ditulis dapat dijalankan dengan cepat dan secara offline. Jika kita mengetest dengan memanggil API Call secara langsung, maka beberapa masalah yang dapat terjadi ialah:

  1. Masalah Internet yang sangat mempengaruhi kecepatan Unit Testing kita, sehingga hasil yang ada tidak konsisten. Apalagi jika kita berada di jangkauan yang tidak memiliki sinyal internet, maka kita tidak dapat melakuakan test. Test yang ada juga relative cepat yaitu hanya memerlukan waktu sekitar 0.1 detik, jika dibandingkan dengan ApiCall yang asli maka akan membutuhkan waktu beberapa detik.
  2. Kendala terhadap API Call limit pada beberapa API, sehingga akan menghambat proses development yang ada

Untuk melihat hasil akhir, Anda bisa checkout ke dalam branch Final. Semoga dapat memberikan insight baru dan dapat bermanfaat bagi teman-teman.

CategoriesAutomated testAutomated testsProgramming

Cypress vs Mocha | Settings Comparison


cynoteck.com

Halo gaes !! kali ini saya akan berbagi pengalaman ketika menggunakan Cypress dan mocha dalam tools pengujian automation test. Berdasarkan pengalaman pribadi saya saat menggunakan mocha dan cypress yang mana ketika menggunakan mocha jika kita ingin menjalankan semua file testing yang ada di dalam folder satu, maka kita perlu untuk mengubah kode default dan itu akan membutuhkan effort yang bisa berdampak pada pekerjaan. Seperti contoh struktur file dan folder dibawah ini :

Continue reading
CategoriesAndroidProgrammingSecurity

Mengamankan SharedPreferences pada Aplikasi Android

SharedPreferences merupakan penyimpanan key-value data sederhana pada Android. SharedPreferences seringkali digunakan untuk menyimpan setting pada aplikasi, sering juga digunakan sebagai session yang menyimpan info login yang memuat token user untuk login padahal sebenarnya menyimpan data penting seperti user token di SharedPreferences merupakan hal yang fatal dan bisa menyebabkan system di bobol oleh hacker karena SharedPreferences bisa diakses dan dibaca oleh user yang memiliki akses root pada devicenya.

Continue reading
CategoriesProgramming

Implementasi PSR 4 Autoloading pada PHP

PSR atau singkatan dari PHP Standards Recommendations, yang mana artinya adalah rekomendasi-rekomendasi penulisan kode agar setiap programmer memiliki standar penulisan kode, sehingga mudah untuk melakukan kolaborasi atau kerja sama dalam menulis kode PHP, lebih lagi para programmer dapat membuat berbagai library hingga framework dari bahasa pemrograman PHP dengan standarisasi penulisan kode yang sama.

Continue reading
CategoriesProgramming

Benchmark Code dengan BenchmarkDotNet

Saat ini performa system merupakan hal yang sangat penting dan perlu diperhatikan bagi para developer. Semakin baik performa suatu system tentu akan membuat pengguna semakin nyaman menggunakannya. Untuk itu developer seperti kita perlu untuk melakukan Benchmark Code.

Apa itu Benchmark?

Benchmark adalah metode/langkah untuk mengukur serangkaian kode yang ada dalam sebuah fungsi. Dengan melakukan benchmark, kita bisa membandingkan kinerja kode mana yang lebih baik sehingga dapat mengoptimalkan system kita.

Untuk melakukan Benchmark Code, kita akan menggunakan tools dari DotNet yaitu BenchmarkDotNet.

Langkah Benchmark Code

  1. Buat Project baru
  2. Install BenchmarkDotNet Nuget package
  3. Buat Benchmark class
  4. Buat BenchmarkRunner instance
  5. Jalankan aplikasi dalam release mode
Continue reading
CategoriesProgrammingUncategorized

Pengaplikasian Bot Telegram menggunakan PHP : Absensi Sederhana

Telegram merupakan salah satu aplikasi chatting gratis dan memiliki berbagai fitur. Salah satu fitur yang disediakan yaitu Bot. Telegram Bot adalah aplikasi pihak ketiga yang dapat dikontrol menggunakan HTTPS Request ke API Bot yang telah disediakan telegram. Dokumentasi mengenai API Bot dapat dipelajari pada halaman web core telegram.

Pandemi Covid-19 yang terjadi di Indonesia mulai dari awal tahun 2020 sampai sekarang membuat perubahan mekanisme diberbagai sektor. Beberapa sektor yang berdampak adalah mekanisme pendidikan dan pekerjaan. Pada sektor pendidikan yang biasanya secara offline tatap muka di sekolah (luring) menjadi interaktif berbasis online dengan memanfaatkan berbagai platform (daring) yang dilakukan dari rumah. Seperti halnya pendidikan, pada mekanisme pekerjaan pun sama yaitu yang biasanya tatap muka dan melakukan produktifitas di kantor atau yang biasa disebut WFO untuk semua karyawan menjadi produktifitas dilakukan secara interaktif online dari rumah atau WFH untuk sebagian karyawan maupun semua karyawan tergantung pada masing-masing bidang pekerjaan.

Continue reading
CategoriesAndroidProgramming

Mengenal Architecture Pattern MVP pada Android Development

Architecture Pattern adalah bagaimana susunan kode kita pada saat membuat program / aplikasi. contoh dari Architecture Pattern adalah MVC (Model View Controller), MVP (Model View Presenter), dan MVVM (Model View ViewModel). sebagian dari kita mungkin lebih familiar dengan istilah design pattern bahkan salah menganggap kalau MVC, MVP, dan MVVM adalah design pattern. padahal Design Pattern dan Architectural Pattern adalah 2 hal yang berbeda. Design Pattern adalah istilah yang merujuk pada solusi umum yang digunakan untuk memecahkan masalah yang sering terjadi dalam konteks tertentu, contoh dari Design Pattern adalah Factory Pattern, Adapter Pattern, Singleton Pattern, Builder Pattern, dan lain sebagainya. Design Pattern akan saya bahas di artikel yang lain, tetap stay tune di blog ini.

Penggunaan Architecture Pattern cukup penting dan cenderung memudahkan kita dalam proses development, apalagi jika kita berada dalam satu tim development. karena Architecture Pattern membagi tiap koding sesuai dengan fungsinya masing-masing, jadi kita tidak melakukan koding di satu class saja namun dipisah-pisah menjadi beberapa class sesuai dengan fungsinya masing-masing.
disini kita akan membahas salah satu dari Architecture Pattern yang paling sering dipakai dalam Android Development, yaitu MVP.

Continue reading