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 ૮₍´˶• . • ⑅ ₎ა

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

CategoriesProgramming

Mengenal Bahasa Pemrograman Elm

     Bahasa Pemrograman Elm adalah Bahasa pemrograman fungsional untuk Frontend atau User Interface yang kaya akan fungsi Visualisasi yang bersifat Deklaratif. Elm dibuat untuk pengguna Web Apps dengan fungsionalitas untuk 3D Graphic dan Data Visualisation. Dilihat dari Fungsi dan kinerja Elm sangat berguna untuk membuat Game atau Game Dev berbasis Web Apps yang sangat Interaktif. Elm sendiri rilis versi stabilnya pada 21 Oktober 2019 Elm V 0.19 .1 namun pengguna sudah banyak. Sebelum lebih lanjut ke Elm tentunya kita harus tahu dasar dari Html dan CSS ya karena di Elm akan diintegrasikan dengan HTML dan CSS agar lebih cantik, tenang HTML dan CSS hanya pemanis karena Elm sendiri sudah Manis. Belajar Elm sangat mudah apabila Anda sudah memahami Pemrograman Dasar.

Beberapa kelebihan Elm Sebagai Berikut:

1. No Runtime Exceptions.

Elm menggunakan metode inferensi untuk mendeteksi error dan memberikan petunjuk yang jelas. Untuk lebih jelasnya silakah pelajari di link berikut : Detail
Berikut Contoh untuk Runtime Exception:
Pada saat Error akan muncul hints atau petunjuka yang jelas

2. Great Performance

Elm memiliki Virtual DOM sendiri yang di desain untuk kemudahan dan kecepatan. Semua funsional tidak bisa dirubah di Elm dan tolak ukur yang digunakan membuat code javascript yang cepat. 
Perbandingan dengan beberapa Framework terkenal untuk frontend lain, semakin kecil semakin bagus

3. Enforced Sematic Versioning

Elm memiliki Package yang digunakan sesuai dengan kegunaan. berikut link untuk packeage: Detail
tau bisa menggunakan comandline seperti gambar berikut:
Command line untuk Install Package Elm

4. Small Assets

Dibandingkan dengan React, angular dan Vue Assets Elm lebih kecil sehingga otomatis load akan cepat, elm memiliki cara endiri untuk meminimalisir assets silahkan baca di link berikut: Detail
Perbedaan ukuran / Size Asset dibandingkan dengan Vue, Angular dan React

5. Javascript Interop

Elm dapat digunakan di suatu node yang aktif, dan dapat disisipkan di suatu project tanpa menggangu.
Elm Bisa disispkan di project dengan javascript
 
 
Bahasa Pemrogram Elm sering digunakan untuk Desain Grafis atau Game Dev. Berikut Contoh Penggunaan Bahasa Pemrograman silahkan Anda Explore :

Beberapa Contoh Game   Dibuat dari Elm

Snake

Previous Elm versions

Tetris

Breakout

Pong

Mario

Tic Tac Toe

Space Invaders

Memory

Asteroid

Pac Man

Minesweeper

Roguelike

Classic Card & Board Game

Real-Time Strategy

Puzzle Games

Racing Game

  • Elm 0.18
    • Tacks – Real-time multiplayer sailing game [play]
    • Retrorace – Retrorace is a multiplayer game where the aim is to be the first to reach the top of the screen. [play]

Tools

Miscellaneous

Dilihat dari Contoh diatas bermacam macam game berbasis Web yang menggunaan Bahasa pemrograman Elm, tidak hanya untuk Game tentunya juga digunakan untuk landing page dll untuk mempercantik Website. Apabila Anda tertarik dengan Elm silahkan untuk mempelajari langsung di portal Web nya : Link. Akan banyak sekali contoh yang bisa Anda gunakan untuk belajar lebih lanjut.

Semoga Bermanfaat

Wassalamualaikum

 
CategoriesProgramming

Mengenal Svelte JS

         Beberapa minggu yang lalu saya mulai belajar Svelte JS. Mengapa saya belajar Svelte JS, ini dikarenakan saya kebiasaan hunting library atau framework baru  dan tolak ukur saya Fremework atau library yang mendapat bintang banyak di github maka dilihat dari segi ekosistemnya akan bagus pula. Svelte JS mendapat 33.7 Ribu  Bintang dalam kurun waktu 3 Tahun di thaun 2020 dan akan terus naik setiap harinya. Dari segi pengertian dan penggunaan Hampir sama dengan React dan Vue Js yang lebih dahulu rilis dengan usia 6 tahun di tahun 2020. Svelte JS memberikan warna Baru. Salah satu perbedaan jelas Svelte JS dengan React Js dan Vue JS adalah Tanpa menggunakan Virtual DOM. 

Tokopedia juga menggunaan Svelte JS untuk aplikasi yang mereka gunakan, ada beberapa alas an mengapa mereka menggunaan Svelte JS silakan baca Artikel berikut: http://shorturl.at/elrV4 .

Tokopedia tertera sebagai salah satu platform yang menggunakan Svelte

Mari kita explore Svelte JS:

1.  Apa itu Svelte JS.

Svelte adalah cara baru untuk membangun user interface dengan cepat. Sementara framework seperti React dan Vue melakukan semua task mereka di browser,   Namun Svelte melakukan Compile Step secara berkala sehingga tidak semua Task langsung di load di Browser.

2.  Menulis Kode Lebih Sedikit

Dari segi penulisan Svelte JS lebih pendek dibandingkan React dan Vue. Berikut contoh Aplikasi dan codenya:

Aplikasi yang dibuat akan tampil seperti berikut:

Aplikasi dari hasil code

Script code aplikasi tersebut di Svelte sebagai berikut:

Script Code Svelte

Script Code di React sebagai berikut:

Script code di React

Terakhir Script code di Vue sebagai berikut:

Script code di Vue

Terlihat bukan perbedaannya dari segi panjang Script Code yang dibuat untuk aplikasi sederhana tersebut, Svelte lebih seditkit dibandingkan dengan React dan Vue.

Untuk lebih jelasnya silakah Baca di link berikut: https://svelte.dev/blog/write-less-code

3. Tidak menggunakan Virtual DOM

DOM merupakan singkatan dari Document Object Model. Artinya, dokumen (HTML) yang dimodelkan dalam sebuah objek. Objek dari dokumen ini menyediakan sekumpulan fungsi dan atribut/data yang bisa kita manfaatkan dalam membuat program Javascript. Virtual DOM memang lebih cepat dari pada Real DOM. namun mengan Svelte dikatakan lebih cepat walau tanpa menggunakan DOM? silahkan baca di sini : https://svelte.dev/blog/virtual-dom-is-pure-overhead

4. Sangat Reaktif

Yang dimaksud dengan reactif adalah tidak diperlukan banyak library untuk proses di javascript. Kebalikannya Svelte klaim memudahkan fungsi dari javascript. Untuk lebih jelasnya silakan baca di : https://svelte.dev/blog/svelte-3-rethinking-reactivity

 

Lebih dalam lagi mari kita coba ulik2 untuk beberapa fungsionalitas namun disini saya akan membahas contoh script tentang : Declaration, Reactivity, Props, Logic, dan Event.

Dikarenakan ini masih awal saya akan membahas Script menggunakan REPL dari Svelte JS.

Declaration

Pendeklarasian varial dan pemanggilan variable di Svelte mudah seperti di Javascript namun ingat tanpa DOM atau menggunaan innerHTML sehingga script menjadi lebih Pendek. Berikut contohnya:

Contoh Deklarasi Svelte JS

Reactivity

Reactivity disini mengunakan huum aksi reaksi di javascript kita biasa menggunakan onclick=”myFunction()” berbeda dan lebih easy dan lebih pendek pendeklarasian onclick di Svelte. Silahkan lihat Contoh berikut:

Contoh Reactivity

Props

Props adalah property ata variable yang berasal dari luar class atau parent. Berikut contoh untuk props di Svelte:

Contoh untuk Props Svelte

Logic

Pada dasarnya semua logic sama namun perbedaan hanya di penulisan. Berikut penulisan Logic untuk Svelte:

Logic If

{#if args}
    <p>{content}</p>
{/if}

Logic If-Else

{#if args}
    <p>{content}</p>
{:else}
    <p>{content else}</p>
{/if}

Logic Else-If

 
 
{#if x > 10}   
 <p>{content}</p>
{:else if 5 > x}
    <p>{content}</p>
{:else}
    <p>{content}</p>
{/if}

Logic Looping

<script>
    let cats = [
        { id: ‘J—aiyznGQ’name: ‘Keyboard Cat’ },
        { id: ‘z_AbfPXTKms’name: ‘Maru’ },
        { id: ‘OUtn3pvWmpg’name: ‘Henri The Existential Cat’ }
    ];
</script>
{#each cats as { id, name }, i}
    <li><a target=“_blank” href=“https://www.youtube.com/watch?v={id}”>
        {i + 1}: {name}
    </a></li>
{/each}
 

Event

Event digunakan untuk melakukan suatu perintah. Event di Svelte dibuat cukup sederhana berikut contoh untuk onclick dan onMousemove:

Contoh Event Svelte

Sebenarnya masih banyak yang perlu dibahas atau dipelajari di Svelte JS ini namun menurut saya Artikel ini cukup untuk mengenal Svelte JS sesuai dengan judulnya. Untuk developer yang sudah bosan dengan React dan Vue saya sarankan mempelajari Svelte karena menurut saya pribadi cukup berguna untuk PWA (Progressive Web Apps) dan mudah untuk dipelajari. Karena usia masih 3 tahun di 2020 masih belum banyak yang mengetahui tentang Framework Svelte ini. Sejujurnya saat saya pelajari React dan Vue diawal lumayan kesulitan namun untuk Svelte ini lebih mudah dan memberikan perbandingan hasil yang cukup besar. Semoga bermanfaat. 

Wassalamualaikum

CategoriesProgramming

Realtime Chat dengan Html, Javascript dan Socket.io

Realtime Chat atau Realtime Data sering disebut dalam dunia programing adalah suatu hal akan sering digunakan dan sangat diperlukan. Dalam kesempatan ini kita akan membahas dan langsung mem praktik kan Realtime Data dengan Chat App.

Senjata yang akan kita gunakan adalah:

1. HTML

     Sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web. Platform umum yang sering digunakan sehingga akan mudah untuk di praktik kan.

2. Javascript

     Javascript adalah bahasa pemrograman tingkat tinggi dan dinamis. JavaScript biasanya digunakan untuk olah data secara Client ke server namun juga bisa sebagai server ke client. Disini Javascript akan berfungsi GET POST data dari client atau HTML.

3. Socket.io

Apa itu Socket.Io?
Socket.io ada suatu library dari Node.JS yang berfungsi untuk menjembatani realtime data, Namun jangan salah socket.io tidak hanya bisa digunakan di Node.js. Socket.io bisa digunakan di multiplatform dan yang Paling penting Gratis tanpa Batasan jumlah / Unlimited.

Silahkan Berkenalan dengan Socket.io Disini : https://socket.io/

Ayo kita praktikan secara langsung:

1. Buat file index.html.

2. Initialisasi dahulu package.json di terminal.

   $npm init

3. Install socket.io dalam depedencies

$ npm i socket.io

4. install nodemon dalam dependencies, nodemon berfungsi untuk menjalankan Server socket.io.

$npm i --save-dev nodemon

5. Set devStart di package.json untuk menjalankan server nodemon.

"devStart": "nodemon server.js"
{
  “name”“socket.io”,
  “version”“1.0.0”,
  “description”“”,
  “main”“index.js”,
  “scripts”: {
    “devStart”“nodemon server.js”
  },
  “author”“Dhendik”,
  “license”“ISC”,
  “dependencies”: {
    “socket.io”“^2.3.0”
  },
  “devDependencies”: {
    “nodemon”“^2.0.3”
  }
}

 

6. Coding script di Index.html.

<!DOCTYPE html>
<html lang=“en”>
<head>
  <meta charset=“UTF-8”>
  <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
  <meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
  <title>Realtime Chat</title>
  <script defer src=“http://localhost:3000/socket.io/socket.io.js”></script>
  <script defer src=“client.js”></script>
  <style>
    body {
      padding0;
      margin0;
      displayflex;
      justify-contentcenter;
    }
    #message-container {
      width80%;
      max-width1200px;
    }
    #message-container div {
      background-color#CCC;
      padding5px;
    }
    #message-container div:nth-child(2n) {
      background-color#FFF;
    }
    #send-container {
      positionfixed;
      padding-bottom30px;
      bottom0;
      background-colorwhite;
      max-width1200px;
      width80%;
      displayflex;
    }
    #message-input {
      flex-grow1;
    }
  </style>
</head>
<body>
  <div id=“message-container”></div>
  <form id=“send-container”>
    <input type=“text” id=“message-input”>
    <button type=“submit” id=“send-button”>Send</button>
  </form>
</body>
</html>

 

7. Buat Server dahulu server.js untuk initialisasi socket.io.

const io = require(‘socket.io’)(3000)
const users = {}
// Register User yang baru Masuk ke server dan melakukan Join
io.on(‘connection’socket => {
  socket.on(‘new-user’name => {
    users[socket.id] = name
    socket.broadcast.emit(‘user-connected’name)
  })
  socket.on(‘send-chat-message’message => {
    socket.broadcast.emit(‘chat-message’,
message: messagename: users[socket.id] })
  })
  socket.on(‘disconnect’, () => {
    socket.broadcast.emit(‘user-disconnected’users[socket.id])
    delete users[socket.id]
  })
})
 

 

8. Buat client dahulu client.js disini menggunakan Javascript untuk GET POST data di HTML.

const socket = io(‘http://localhost:3000’)
const messageContainer = document.getElementById(‘message-container’)
const messageForm = document.getElementById(‘send-container’)
const messageInput = document.getElementById(‘message-input’)
//Client script untuk register User Baru
const name = prompt(‘What is your name?’)
appendMessage(‘You joined’)
socket.emit(‘new-user’name)
//Chat message client / User
socket.on(‘chat-message’data => {
  appendMessage(`${data.name}${data.message}`)
})
//Chat message pertanda user baru join
socket.on(‘user-connected’name => {
  appendMessage(`${name} connected`)
})
//Chat Message pertanda User disconnected
socket.on(‘user-disconnected’name => {
  appendMessage(`${name} disconnected`)
})
//Event post untuk Submit Message
messageForm.addEventListener(‘submit’e => {
  e.preventDefault()
  const message = messageInput.value
  appendMessage(`You: ${message}`)
  socket.emit(‘send-chat-message’message)
  messageInput.value = 
})
//Event get misal ada message Baru dari User Lain 
function appendMessage(message) {
  const messageElement = document.createElement(‘div’)
  messageElement.innerText = message
  messageContainer.append(messageElement)
}

 

9. Jalankan Server socket.io

$npm run devStart

10. Berikut Hasilnya.  Gambar dibawah menunjukan simulasi chat dari 2 User yang berbeda dan bisa Realtime.

Gmbar ini menunjukan simulasi chat dari 2 User yang berbeda

Jika ingin mencoba sendiri Anda bisa Clone Git dan ikuti arahannya: https://gitlab.com/Sendok/realtimechat.git

Sekian artikel yg bisa dibuat semoga bermanfaat.

Wassalamualaikum.