CategoriesData ScienceProgramming

Tips Memanfaatkan AI untuk Produktivitas Coding Maksimal

Tahukah kamu kalau perkembangan AI sekarang sudah melesat jauh? Teknologi ini gak cuma hadir di film sci-fi, tapi juga sudah masuk ke berbagai aspek kehidupan kita, termasuk dunia coding. Dari membantu menulis kode hingga mempermudah debugging, AI semakin jadi “asisten” andalan developer.

Tapi, jangan salah paham. AI bukan ancaman yang bakal “menggantikan” developer. Sebaliknya, AI adalah alat yang bisa bikin kita lebih produktif, lebih fokus, dan lebih kreatif dalam bekerja. Jadi, daripada khawatir, kenapa gak kita manfaatkan potensinya untuk mengurangi beban kerja teknis dan fokus ke hal-hal yang lebih strategis?

AI hadir untuk jadi partner yang membantu, bukan saingan.

Nah, penasaran gimana AI bisa bantu kita coding lebih cepat dan lebih baik? Yuk, kita bahas satu-satu!

Continue reading
CategoriesAndroidProgramming

Task Scheduler di Android dengan AlarmManager

Task Scheduler di Android adalah cara untuk menjalankan tugas-tugas tertentu di latar belakang aplikasi secara terjadwal atau sesuai kebutuhan. Android menyediakan beberapa API yang dapat digunakan untuk mengelola dan menjadwalkan tugas-tugas latar belakang, sehingga aplikasi bisa berjalan lebih efisien, terutama dalam mengelola daya dan konektivitas. salah satunya adalah AlarmManager

Continue reading
CategoriesUI DesignUX Design

Thumb zone dalam Desain apps

Kita menggunakan smartphone hampir setiap hari, dan ibu jari kita menjadi alat utama untuk berinteraksi dengan aplikasi. Thumb zone adalah area pada layar yang paling mudah dijangkau oleh ibu jari kita. Mari kita bahas lebih lanjut mengapa thumb zone itu penting dan bagaimana kita bisa memanfaatkannya dalam desain aplikasi.

Continue reading
CategoriesData SciencePython

Memaksimalkan Analisis Data dengan PandasAI dan LLM Lokal Menggunakan Ollama

Hai! 😊 Kali ini kita akan bahas topik menarik lainnya yang mungkin bisa bikin kerjaan kamu lebih mudah dan efisien dalam dunia data. Kalau kamu suka artikel tentang AI, data, dan integrasi teknologi, kamu ada di tempat yang tepat! Jadi, yuk simak artikel ini!

Banyak pengguna AI masih bergantung pada layanan cloud untuk analisis data, yang bikin privasi jadi isu karena data harus dikirim ke server eksternal. Belum lagi, biaya langganan layanan cloud AI bisa cukup mahal.

Nah, di sinilah local LLM dan PandasAI jadi solusi. Dengan local LLM, semua pemrosesan data dilakukan di perangkatmu, jadi nggak perlu khawatir soal privasi dan bisa hemat biaya karena nggak perlu langganan bulanan. PandasAI juga bikin analisis data lebih mudah karena kamu bisa langsung bertanya ke data tanpa perlu coding rumit. Yuk, kita bahas lebih lanjut!

Continue reading
CategoriesProgrammingUncategorized

Optical Character Recognition (OCR)

Pengenalan & Implementasi Sederhana

Optical Character Recognition (OCR) adalah teknologi yang memungkinkan perangkat keras atau perangkat lunak untuk mengenali teks yang terdapat pada gambar atau dokumen yang dipindai. Teknologi ini secara khusus digunakan untuk mengkonversi gambar teks yang dicetak atau ditulis tangan ke dalam format teks yang dapat diedit, dicari, dan dianalisis oleh komputer. OCR bekerja dengan memproses gambar yang mengandung teks, lalu menggunakan algoritma pengenalan pola untuk memetakan piksel-piksel dari gambar tersebut ke karakter yang sesuai.

Proses OCR umumnya melibatkan beberapa langkah utama:

  • Pemindaian Gambar: Gambar dari teks yang ingin diekstraksi dipindai menggunakan perangkat pemindai atau diambil menggunakan kamera kemudian diubah menjadi representasi digital (format gambar JPEG atau PNG).
  • Pra-pemrosesan: Gambar yang diperoleh kemudian diproses untuk meningkatkan kualitas teks, seperti pembersihan gambar, perbaikan kontras, penghilangan noise, dan penyesuaian skala abu-abu dan rotasi agar teks mudah dikenali.
  • Deteksi Karakter: Algoritma OCR mengidentifikasi blok-blok teks dalam gambar dan mulai mengenali karakter individu berdasarkan pola, bentuk, dan struktur huruf.
  • Pengubahan ke Teks Digital: Karakter yang dikenali diubah menjadi teks digital. Hasilnya kemudian dapat disimpan dalam format teks. Hasil pengenalan teks dapat memerlukan perbaikan manual, terutama jika terdapat kesalahan dalam pengenalan. Ini biasanya terjadi pada teks yang rumit atau font yang tidak umum.
Keuntungan
  • Efisiensi : Menghemat waktu dan tenaga dalam memproses dokumen secara manual.
  • Penyimpanan Digital : Memungkinkan penyimpanan dokumen fisik dalam bentuk digital, yang menghemat ruang fisik.
  • Aksesibilitas : Membantu dalam pengembangan teknologi aksesibilitas, seperti pembaca layar untuk tunanetra.
Tantangan
  • Kualitas Gambar : Menghemat waktu dan tenaga dalam memproses dokumen secara manual.
  • Bahasa dan Font Khusus : Memungkinkan penyimpanan dokumen fisik dalam bentuk digital, yang menghemat ruang fisik.
  • Kesesuaian dengan Layout Kompleks : Dokumen dengan tata letak yang rumit, seperti tabel atau multi-kolom, seringkali membutuhkan pengolahan manual tambahan untuk interpretasi yang benar.

Untuk mengimplementasikan Optical Character Recognition (OCR) dalam sebuah aplikasi, terdapat beberapa opsi teknologi dan layanan yang bisa digunakan, salah satunya Tesseract OCR. Tesseract adalah mesin OCR yang open source dan fleksibel, yang dapat dijalankan baik di sisi klien (client-side) melalui Tesseract.js untuk aplikasi berbasis web, maupun di sisi server (server-side). Kali ini kita akan membahas implementasi OCR yang sangat mudah dan sederhana terlebih dahulu dari sisi klien (client-side). 

Tesseract OCR dapat dijalankan di sisi klien menggunakan Tesseract.js, sebuah pustaka JavaScript yang memungkinkan pemrosesan pengenalan teks langsung di dalam browser tanpa perlu server. Ini adalah solusi yang ideal untuk aplikasi web yang ingin melakukan OCR secara langsung, mengurangi latensi, meningkatkan privasi (karena tidak perlu mengunggah gambar ke server), dan memberikan hasil secara real-time kepada user.

Hal pertama yang dilakukan adalah mendapatkan file Tesseract.js terlebih dahulu. file tersebut dapat didapatkan dengan beberapa cara yaitu include CDN di dalam project

				
					<script src="https://cdn.jsdelivr.net/npm/tesseract.js@4.0.2/dist/tesseract.min.js"></script>
				
			

atau bisa juga download atau clone dari GitHub Tesseract, atau dengan mengimpor dan menggunakannya setelah instalasi NPM tesseract selesai.

				
					npm install tesseract.js
				
			

Studi kasus kali ini adalah penggunaan OCR untuk membaca file KTP yang di upload. Berikut script JS yang digunakan

				
					<!-- SCRIPT JS -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="tesseract.js"></script>
<script>

	//JS Funct
	function ocr_teseract(elm, e){
		let reader = new FileReader();
      reader.onload = function (event) {
			  let files           = $(elm).get(0).files[0];
        let filename        = files.name;
        let data_from_file  = filename.split(".");
        let type_file       = $.trim(data_from_file[data_from_file.length - 1]);
        	
        Tesseract.recognize(files, "ind").then(({ data: { text } }) => {
          $('#hasil').html('<center><img decoding="async" src="'+event.target.result+'" width="100%" /></center><br><br>' + text);
        });
      }
		reader.readAsDataURL($(elm)[0].files[0]);
	}
	//end JS Funct
</script>
				
			
Hasil Output

Jika ingin hanya mendapatkan NIK saja maka bisa menambahkan code split dan replace seperti berikut :

				
					Tesseract.recognize(files, "ind").then(({ data: { text } }) => {
      let d_split = text.split('\n');
      $.each(d_split, function(i, item) {
        if(item.toUpperCase().includes('NIK')){
          $('#hasil').html('<center><img decoding="async" src="'+event.target.result+'" width="100%" /></center><br><br>' + item.replace('NIK', '').replace(' ', '').replace(':', ''));
        }
      });
    });
				
			
Hasil Output menampilkan NIK saja

Mudah sekali bukan pengimplementasian dari OCR menggunakan Tesseract.js. Penggunaan tesseract.js ini memiliki kelemahan pada pra-pemrosesan data yaitu hasil akan kurang atau bahkan tidak akurat ketika gambar yang diproses memiliki banyak noise, resolusi rendah, rotasi yang tidak benar dan mengaturan teks yang rumit. Berikut contoh jika gambar yang di upload memiliki rotasi yang tidak sesuai :

Hasil ketika rotasi gambar tidak sesuai

Bagaimana ?? seru bukan mempelajari OCR ? xixixi •ᴗ•
Untuk next mari kita kulik-kulik mengenai OCR di sisi server-side yagesya ૮₍´˶• . • ⑅ ₎ა

CategoriesAndroidProgramming

Integrasi AI ke Aplikasi Mobile dengan ML Kit

Dengan perkembangan teknologi yang pesat, machine learning (ML) telah menjadi salah satu tren utama dalam pengembangan aplikasi mobile. Google, melalui ML Kit, menyediakan solusi mudah dan efisien untuk mengintegrasikan fitur-fitur machine learning ke dalam aplikasi Android. ML Kit menawarkan berbagai API yang memungkinkan pengembang untuk mengimplementasikan fitur-fitur canggih seperti pengenalan wajah, pengenalan teks, pemindaian barcode, dan masih banyak lagi tanpa perlu pengetahuan mendalam tentang machine learning.

Continue reading

CategoriesAndroidFlutteriOSProgramming

Reactive Programming di Dart dengan Stream

Stream di Dart adalah aliran berkelanjutan dari data yang mengalir dari satu sumber ke sumber lainnya. Dalam konteks Flutter, stream digunakan untuk mengelola aliran data asynchronous, memungkinkan aplikasi untuk merespons perubahan data secara dinamis tanpa memblokir main thread. Stream cocok digunakan untuk sebuah operasi yang membutuhkan update data secara terus menerus seperti contoh pemutaran suara yang mengupdate durasi setiap detik nya. dengan kata lain Stream adalah salah satu implementasi dari Reactive Programming di Flutter yang mana terdapat variable yang digunakan untuk mengirimkan data dan ada variabel yang menerima data sebagai Subscriber

Continue reading
CategoriesAndroidFlutteriOSProgramming

Meningkatkan Responsivitas Aplikasi Flutter dengan ValueNotifier dan ValueListenableBuilder

Flutter telah menjadi pilihan utama untuk pengembangan aplikasi cross platform untuk saat ini. Salah satu tantangan dalam pengembangan aplikasi Flutter adalah menjaga responsivitasnya, terutama saat data berubah. Dalam artikel ini, kami akan membahas penggunaan ValueNotifier dan ValueListenableBuilder dalam Flutter untuk meningkatkan responsivitas aplikasi tanpa tambahan package lainnya, serta membandingkannya dengan metode setState.

Continue reading
CategoriesAndroidFlutteriOSProgrammingUncategorized

Implementasi Deep Link di Flutter

Pernahkah kalian mengklik suatu link pada Smartphone kalian tapi link tersebut tidak mengarah ke browser melainkan mengarah ke suatu aplikasi ?
hal itu dinamakan Deep Link. Deep Link adalah sebuah hyperlink yang akan mengarahkan user ke sebuah fitur di pada aplikasi. biasanya Deep Link dimanfaatkan untuk link referral, link detail produk, dan banyak fungsi lainnya.

Continue reading