Displaying & Caching Image Using Kingfisher

Image atau gambar adalah hal yang tidak bisa dihindari dan pasti selalu digunakan dalam setiap front-end software development tidak peduli platform apa yang digunakan, baik itu mobile, desktop, ataupun web. Pada kesempatan kali ini saya akan membahas dalam platform mobile, khususnya iOS. 

Dalam pembuatan aplikasi mobile pasti kita akan membutuhkan image untuk mempercantik sekaligus menjelaskan sesuatu, misalnya untuk melakukan send email kita menggunakan button bergambar amlop. Salah satu hal penting yang tidak terlihat dalam software development mobile adalah memperhatikan jumlah data yang digunakan. Tentunya yang banyak memakan data adalah jika kita menggunakan image yang tidak disimpan di dalam installer (.ipa). Tentu saja jika user menyadari bahwa aplikasi kita menggunakan banyak sekali data, maka bukan tidak mungkin user akan berhenti menggunakan aplikasi tersebut.

Solusi dari permasalahan ini adalah menggukan cache. Apa itu cache? Cache adalah suatu cara untuk menyimpan data yang sudah diproses oleh user. Data ini suatu waktu bisa saja digunakan lagi tanpa perlu melakukan proses komputasi ulang. Untuk lebih jelasnya bisa dibaca di dewaweb dan techtarget.

Salah satu library yang populer di iOS (Swift) development adalah Kingfisher. Kingfisher merupakan library yang bisa membantu kita menampilkan image melalui URL dan sekaligus melakukan caching pada image tersebut, sehingga jika akan digunakan lagi maka aplikasi tidak akan me-load ulang gambar itu melalui URL-nya.

Install Kingfisher

Jika menggunakan CocoaPods, maka cukup dengan menambahkan line berikut di Podfile :

pod 'Kingfisher', '~> 4.0'

Jika menggunakan Carthage, maka tambahkan line berikut di Cartfile :

github "onevcat/Kingfisher" ~> 4.0

Jika menggunakan Swift-Package-Manager, maka tambahkan liner berikut di Package.swift :

import PackageDescription

let package = Package(
    name: "YourAwesomeSoftware",
    dependencies: [
        .Package(url: "https://github.com/onevcat/Kingfisher.git",
                 majorVersion: 4)
    ]
)

Fitur-fitur dari Kingfisher

1. Unduhan gambar dan caching tidak sinkron.
2. Jaringan berbasis URLSession. Prosesor dan filter gambar dasar disediakan.
3. Cache multi-layer untuk memori dan disk.
4. Tugas mengunduh dan memproses yang tidak dapat dibatalkan untuk meningkatkan kinerja.
5. Komponen independen. Gunakan sistem pengunduh atau caching secara terpisah sesuai kebutuhan Anda.
6. Mengambil gambar terlebih dahulu dan menampilkannya dari cache nanti bila diperlukan.
7. Ekstensi untuk UIImageView, NSImage dan UIButton untuk langsung mengatur gambar dari URL.
8. Animasi transisi internal saat mengatur gambar.
9. Placeholder yang dapat disesuaikan saat memuat gambar.
10. Pemrosesan gambar yang dapat diperluas dan dukungan format gambar.

Cara menggunakan

Cara paling dasar dalam menggunakan Kingfisher adalah menggunakannya di ImageView.

let url = URL(string: "url_of_your_image")
imageView.kf.setImage(with: url)

Tentu saja kingfisher tidak hanya bisa digunakan di ImageView saja, anda juga bisa menggunakannya pada komponen lain, misalnya UIButton, custom-made-view, dan lainnya menggunakan cara yang sama.

Sekian informasi yang dapat saya bagikan, jika ada kesalahan, masukan, ataupun pertanyaan silakan tinggalkan di komentar atau kirim email

Sharing is Caring

References :
https://github.com/onevcat/Kingfisher
https://github.com/onevcat/Kingfisher/wiki/Installation-Guide
https://searchstorage.techtarget.com/definition/cache
https://www.dewaweb.com/blog/penjelasan-cache-dan-jenis-jenisnya/

Sentralisasi Hibernate Cache dengan Terracotta/Ehcache

ORM cache diperlukan untuk mengurangi akses ke database, yaitu untuk pengaksesan data yang sama berulang kali.

Defaultnya, hibernate telah menerapkan caching pada level Session (L1). artinya, cache tersebut hanya digunakan oleh 1 user, dalam 1 proses transaksi. Bagaimana untuk menerapkan caching untuk multi-user (multi-session)?

Untuk kasus demikian, perlu diterapkan caching pada level SessionFactory (L2). 1 aplikasi memiliki 1 SessionFactory yang menghandle setiap Session pada aplikasi.

Kemudian dalam pengembangannya, untuk penerapan aplikasi enterprise, tidak menutup kemungkinan adanya 'kerja sama' antar aplikasi untuk mengolah suatu proses bersama. dan tidak menutup kemungkinan pula adanya share data yang sama. Pertanyaan berikutnya, bagaimana cara untuk menerapkan cache untuk multi-aplikasi?

Untuk kasus demikian, kita bisa membuat suatu sentralisasi cache di mesin tertentu. Cache ini bisa berupa memcache (data tersimpan di memory) atau disk cache (data tersimpan di disk).

Pada penerapan memcache, dibutuhkan RAM yang besar karena data tersimpan di RAM. karena disimpan di RAM, jika mesin mati, maka cache akan hilang. Sedangkan pada penerapan disk cache, dibutuhkan harddisk yang besar karena data tersimpan di harddisk dan keuntungannya adalah cache akan tetap tersimpan jika mesin mati.

Sebagai bahan perbandingan, bisa baca juga artikel ini http://surniaulula.com/2012/12/04/memcached-vs-disk-cache/.

Sentralisasi cache ini konsepnya adalah meletakkan cache di mesin/alamat tertentu, dan tiap aplikasi yang ingin menggunakannya bisa mengeset L2 cachenya ke alamat tersebut. Dengan demikian, tiap aplikasi akan menggunakan cache yang sama dan konsistensi data tetap terjaga.

Yang akan kita gunakan di sini adalah penggunaan disk cache dengan terracotta bigmemory.

PRE-REQUISITES:
- bigmemory-max-4.0.2 distribution

LIBRARIES:
- maven repository: terracotta-releases http://www.terracotta.org/download/reflector/releases
- org.hibernate.hibernate-core-4.1.12.Final
- org.hibernate.hibernate-ehcache-4.1.12.Final - exclusion: net.sf.ehcache.ehcache-core
- net.sf.ehcacheehcache-ee-2.7.0
- org.hibernate.javax.persistence.hibernate-jpa-2.0-api-1.0.1.Final
- org.slf4j.slf4j-jdk14-1.6.6
- org.terracotta.bigmemory-4.0.2
- org.terracotta.terracotta-toolkit-runtime-ee-4.0.2

DOWNLOADS:
- http://terracotta.org/downloads/bigmemorymax/free

STEP BY STEP CONFIGURATION
SERVER SIDE:
1. download bigmemorymax, mesti download sendiri karena di situ ada license key
2. terracotta-license.key (yg didapat dari email dari terracotta) diletakkan di BigMemory Max Free home directory
3. taruh bigmemory-max home directory ke server
4. edit bigmemory-max-4.0.2/server/tc-config.xml, host disesuaikan dengan ip server
5. utk menyalakan: bigmemory-max-4.0.2/server/bin/start-tc-server.sh (unix) atau start-tc-server.bat (win)

CLIENT SIDE CONFIGURATION
1. set repository dan dependency tiap aplikasi
2. set di hibernate config:

 <property name="hibernate.cache.use_second_level_cache">true</property>  
 <property name="hibernate.cache.use_query_cache">true</property>  
 <property name="hibernate.cache.region.factory_class">org.hibernate.cache.ehcache.SingletonEhCacheRegionFactory</property>  
 <property name="hibernate.cache.provider_class">net.sf.ehcache.hibernate.EhCacheProvider</property>  
 <property name="hibernate.generate_statistics">true</property>  
 <property name="hibernate.cache.use_structured_entries">true</property>  
 <property name="net.sf.ehcache.configurationResourceName">${ehcache-config-location}</property>  

3. set di ehcache config:

 <!-- default -->  
 <defaultCache maxElementsInMemory="0" eternal="false" statistics="true">  
   <cacheEventListenerFactory class="net.sf.ehcache.event.TerracottaCacheEventReplicationFactory" />  
   <terracotta clustered="true" />  
 </defaultCache>  
 <!-- cache per entity -->  
 <cache name="com.nostra.entity.Class" eternal="false" statistics="true" >  
   <cacheEventListenerFactory class="net.sf.ehcache.event.TerracottaCacheEventReplicationFactory" />  
   <terracotta consistency="eventual" />  
 </cache>  
 <!-- server address: disesuaikan dengan tc-config.xml di server -->  
 <terracottaConfig url="ip-server:port" />  

SOURCE CODE IMPLEMENTATION
1. tambahkan annotation @Cache dan concurrency strategynya pada entity yang akan dicache.

REFERENCES:
- http://ehcache.org/documentation/2.5/integrations/hibernate
- http://terracotta.org/documentation/4.0/bigmemorymax/get-started