BAB II LANDASAN TEORI 2.1 ATM (Automatic Teller Machine) - Perancangan Sistem Penyampaian Permasalahan Mesin ATM (Automated Teller Machine dan EDC (Electronic Data Capture) Berbasis Platform Menggunakan Phonegap Framework
BAB II LANDASAN TEORI
2.1 ATM ( Automatic Teller Machine)
ATM adalah sebuah alat elektronik yang mengijinkan nasabah perbankan untuk mengambil uang dan mengecek rekening tabungan mereka tanpa perlu dilayani oleh seorang "Teller" di Bank. Banyak ATM juga berfungsi untuk penyetorantransfer uang dan transaksi perbankan lainnya. Pada mulanya mesin pintar ini ditemuka n oleh Don Wetzel, Vice President of Product Planning pada perusahaan Docutel. Konsep ATM pertama kali lahir pada tahun 1968, lalu prototipenya muncul setahun kemudian, dan akhirnya Ducotel mendaftarkannya pada Kantor paten pada tahun 1973.
Perusahaan Docutel membeli mesin ATM dari tiga orang pembuatnya, yaitu Don Wetzel, yang pada saat itu adalah seorang Vice President of Product Planning di Docutel, Tom Barnes (kepala mekanik) dan George Chastian, seorang insyinyur listrik. Ide awalnya berasal dari Wetzel, ketika mengantri di bank. Wetzel kerapkali merasa kesulitan ketika berurusan dengan bank yang harus selalu mengantri untuk satu layanan sebagai nasabah bank. Hingga akhirnya ketiga penemu ini menciptakan mesin ATM yang di Indonesia dikenal dengan istilah Anjungan Tunai Mandiri. Dan dana yang dihabiskan untuk sebuah mesin ATM pertama kali adalah sekitar lima juta dollar.
2.2 EDC ( Electronic Data Capture)
EDC adalah mesin yang dapat digunakan oleh nasabah perbankan sebagai alat pembayaran elektronik (mesin gesek kartu ATM baik Debit ataupun Credit Card). Mesin EDC menggunakan teknologi wireless (GSM) dan fixed line (line telepon). Alat ini akan terhubung secara online dengan sistem jaringan bank. Istilah yang dipakai dalam EDC:
Magnetic Stripe adalah panel berwarna hitam yang berada pada sisi belakang Kartu, yang berisi data pemilik kartu
2. Chip adalah komponen elektronik yang memilki fungsi sama seperti
magnetic stripe yang dirancang untuk menjalankan fungsi penyimpanan
dan pemprosesan data 3. EMV singkatan dari Europay, MasterCard dan VISA, sebuah standar global untuk operasi IC (Integrated Circuit) Card atau umumnya disebut "kartu chip". IC Card ini dipakai pada terminal EDC untuk melakukan transaksi penjualan (POS) dan anjungan tunai mandiri (ATM), sebagai alat transaksi kartu kredit dan kartu debit.
4. Swipe adalah menggesekkan magnetic stripe yang ada pada kartu pada mesin EDC
5. Dip adalah memasukkan Chip kartu pada Chip Reader pada mesin EDC 6.
Sales Slip/Sales Draft adalah kertas yang disediakan oleh Bank untuk dipergunakan oleh Merchant pada saat mencetak data Transaksi Kartu dan berfungsi sebagai alat bukti bagi Merchant pada saat melakukan penagihan kepada Bank.
7. Void : Pembatalan transaksi 8.
Settlement adalah proses penutupan transaksi oleh Merchant dengan pihak Bank melalui EDC agar Merchant dapat dibayar atas total jumlah transaksi dan pemegang kartu akan tertagih oleh bank.
9. Chargeback adalah penagihan/pembebanan kembali oleh Bank kepada Merchant atas tagihan yang telah dibayar oleh Bank kepada Merchant.
10. Merchant Discount Rate (MDR) adalah sejumlah/prosentase fee yang diberikan oleh Merchant kepada Bank atas setiap transaksi yang dilakukan pada mesin edc. Setelah Kartu digesekkan (Swipe atau dip) pada EDC, maka respon yang akan muncul pada layar EDC dapat berupa :
1. Approved: limit kredit cukup untuk transaksi dan transaksi disetujui 2.
Decline: limit kredit tidak cukup untuk transaksi 3. Reffer / Please Call: perintah kepada Merchant untuk menghubungi Bagian
Otorisasi Bank
Pick Up/Capture Card: perintah kepada Merchant untuk menahan Kartu
2.3 PhoneGap
PhoneGap adalah sebuah development framework yang berbasis standar open source yang dapat digunakan untuk membangun aplikasi-aplikasi mobile. Aplikasi yang dikembangkan dengan PhoneGap dapat dijalankan secara lintas platform. Hal ini dikarenakan development framework yang digunakan menggunakan bahasa scripting HTML, CSS dan JavaScript. PhoneGap memiliki slogan yang cukup bombastis yaitu
Write Once. Compile in the cloud. Run Anywhere . Adapun Requirement pada
PhoneGap Framework dapat dilihat pada gambar 2.1.Gambar 2.1 : Requirement PhoneGapPhoneGap SDK menyediakan sebuah API, yaitu sebuah lapisan abstrak yang menyediakan pengembang dengan akses ke fitur hardware dan platform tertentu.
PhoneGap menjelaskan bahwa dengan kode yang sama dapat digunakan pada
sejumlah platform mobile dengan sedikit perubahan koding ataupun tidak, yang membuat aplikasi kita dapat dipakai untuk kalangan pengguna yang lebih luas.
Berikut Platform platform yang sudah mendapat dukungan dari PhoneGap dapat dilihat pada gambar 2.2.
Gambar 2.2 : PhoneGap Support2.4 Xcode
Xcode adalah sebuah suite of tools, yang dikembangkan oleh Apple, untuk mengembangkan software untuk platform Mac OS X dan iOS. Untuk menggunakan Xcode, tentunya kita harus menggunakan Mac OS X. Untuk mendownload Xcode, dapat didownload dari situs resmi developer Apple secara gratis di http://developer.apple.com/technologies/xcode.html.
Xcode adalah integrated development environment (IDE) yang berisi seperangkat alat pengembangan perangkat lunak yang dikembangkan oleh perusahaan Apple yang berfokus pada pengembangan perangkat lunak untuk OS X dan iOS.
XCode itu sendiri pertama kali dirilis pada tahun 2003, perluncuran tersebut didukung dengan versi 4.6 terbaru dan tersedia Mac App Store secara gratis untuk Mac OS X Lion and OS X Mountain Lion. Aplikasi utama dari perangkat ini adalah integrated
development environment (IDE), yang juga bernama Xcode. Xcode Suite juga
mencakup sebagian besar pengembangan dokumentasi Apple, dan built-in Interface
Builder, sebuah aplikasi yang digunakan untuk membangun graphic interface. Xcode
juga mencakup versi modifikasi dari GNU Compiler Collection, di Xcode 3.1 dan llvm-
gcc compiler dimana semua tersusun secara sistematis dalam file dan group. Hal
pertama yang perlu kita ketahui adalah framework. Framework merupakan seperti class-class pada java, dan unit-unit VCL pada delphi. Adapun tampilan Compiler Xcode pada Maverick OS X dapat dilihat pada gambar 2.3.
Gambar 2.3 : Xcode Maverick OS X2.5 HTML 5
HTML5 merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML dan hingga bulan Juni 2011 masih dalam pengembangan. Dimana tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin. Banyak pengembangan website yang dibuat menggunakan HTML 5. HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium dan WHATWG (Web Hypertext Application Technology Working Group). Dimana WHATWG bekerja dengan bentuk web dan aplikasi dan W3C merupakan pengembang dari XHTML 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML. Berikut tujuan dibuatnya HTML5 : 1.
Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript 2. Mengurangi kebutuhan untuk plugin eksternal (Seperti Flash) 3. Penanagan kesalahan yang lebih baik 4. Lebih markup untuk menggantikan scripting 5. HTML5 merupakan perangkat mandiri
Proses pembangunan dapat terlihat untuk umum Fitur baru dalam HTML5 : 1.
Unsur kanvas untuk menggambar 2. Video dan elemen audio untuk media pemutaran 3. Dukungan yang lebih baik untuk penyimpanan secara offline 4. Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section
5. Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.
Beberapa browser sudah mendukung HTML5 seperti safari, chrome, firefox, dan opera. Kabarnya IE9 (Internet Explorer) akan mendukung beberapa fitur dari HTML 5. Pembuatan HTML 5 juga di karenakan Standard HTML4 yang dijumpai banyak memiliki kelemahan untuk mendukung aplikasi web yang interaktif. Akibat hal ini banyak orang menambahkan fitur baru baik disisi aplikasi web ataupun disisi
browser . Solusi ini dikenal dengan plugin dan salah satunya adalah Flash dan
Silverlight . Semakin menjamurnya plugin didalam aplikasi atau browser membuat
aplikasi web ini susah untuk menembus banyak browser. Hal ini dikarenakan setiap plugin mempunyai cara yang berbeda-beda, sebagai contoh kita ingin memasang
plugin flash untuk sharing video maka pada halaman web kita harus ditulis sebagai
berikut <object type="application/x-shockwave-flash" width="400" height="220" wmode="transparent" data="flvplayer.swf?file=movies/holiday.flv"> <param name="movie" value="flvplayer.swf?file=movies/holiday.flv" /> <param name="wmode" value="transparent" /> </object> pada browser maka lain caranya bila kita menggunakan Silverlight. Teknologi
Silverlight dikembangkan oleh Microsoft. Contoh penggunaan Silverlight pada
halaman web dapat dilihat pada HTML dibawah ini <object width="300" height="300" data="data:application/x-silverlight-2," type="application/x-silverlight-2" > <param name="source" value="SilverlightApplication1.xap"/> </object> HTML5 ini dibuat menyederhanakan kompleksitas penggunaan media video dengan standard baru yaitu penggunaan tag <video>. Dengan fitur baru ini maka kita cukup menulis script untuk menjalankan file video sebagai berikut
<video src=tutorialku.mp4> </video>
Isu bagaimana menjalankan file video pada aplikasi web merupakan salah satu contoh bagaimana HTML4 tidak dapat mencakup masalah ini dan masih banyak lagi isu pada HTML4. Oleh karena itu, kita sudah saatnya memanfaatkan HTML5 sebagai
standard aplikasi web kita. Bagaimana caranya untuk menguji apakah browser yang
anda install itu sudah support HTML5 atau tidak dan seberapa banyak fitur HTML5 yang disupport? Caranya cukup mudah, pertama-tama pastikan komputer anda sudah terhubung dengan internet dan arahkan ke alamat web sebagai berikut: http://html5test.com
Dari data yang ada pada website itu browser Maxthon 3.4.1 merupakan
browser terbaik dalam hal mendukung bahasa HTML5 dengan 422 total skor diikuti
kemudian dengan google Chrome 20 dengan 414 total skor kemudian berturut-turut Opera 12.00 dengan 385, Firefox 13 dengan 345, Safari 5.1 dengan 317 dan Internet Explorer 9 dengan 138 point.
Node.js adalah platform yang dibangun atas JavaScript runtime Chrome untuk membuat aplikasi jaringan dengan peforma tinggi dan skalabel. Node.js menggunakan I/O model non-blocking serta event-driven, yang membuatnya ringan serta effisien, sehingga tepat untuk aplikasi data-intensive real-time yang berjalan di perangkat terdistribusi. Adapun tampilan halaman website node.js dapat dilihat pada gambar 2.4.
Gambar 2.4 : Node.jsSaat tulisan ini dibuat, banyak perusahaan besar telah menggunakan node.js sebagai platform dalam development aplikasi mereka. Salah satu diantaranya adalah
LinkedIn , yang menggunakan node.js sebagai aplikasi server side untuk mendukung
layanan mobile web serta mobile application mereka. Dua alasan utamanya adalah kemudahan melakukan scaling ke beberapa server dan performa yang sangat tinggi dari node.js. Kersen Informatika telah mengadopsi node.js sebagai background
application untuk mendukung layanan Fleet Management serta GPS Tracking.
Platform ini memungkinkan untuk membangun aplikasi yang memiliki performa tinggi untuk mendukung banyaknya kendaraan yang dikelola.Hal yang harus diperhatikan dalam development dengan node.js adalah sifat non-
blocking dari platform ini. Untuk menjabarkan sifat non-blocking dapat dilihat
pada gambar 2.5.Ga
mbar 2.5 : Non Blocking Node.js
Pada diagram alir diatas platform synchronous seperti PHP atau Java akan menampilkan “hasil query” setelah aplikasi selesai melakukan “query ke db“. Namun pada node.js, karena sifatnya non-blocking atau biasa juga dikenal sebagai
, aplikasi tidak akan menunggu hingga 50ms proses “query ke db”
asynchronous
untuk menjalankan proses selanjutnya yaitu “tampilkan hasil query” sehingga hasil yang ditampilkan menjadi tidak benar. Untuk mengatasi hal ini, sifat event-
driven dari node.js bisa dipergunakan, dimana secara explisit dinyatakan kepada
proses “tampilkan hasil query” agar berjalan setelah ada aba – aba event selesai melakukan proses “query ke db“. Sifat asynchronous yang dijabarkan diatas banyak dipakai developer kelas dunia untuk membuat aplikasi berbasis node.js menjadi cepat dan berperforma tinggi. Dimana desain aplikasi mereka menjalankan banyak proses bersamaan secara paralel yang pada akhirnya menampilkan data tepat setelah mendapat aba – aba dari semua proses, seperti yang dijabarkan pada gambar 2.6 berikut.
Gambar 2.6 : Flowchart Node.jsTiga query kecil dijalankan secara bersamaan dengan waktu eksekusi yang lebih cepat daripada satu query besar, sehingga total waktu yang dibutuhkan aplikasi untuk menampilkan hasil menjadi lebih singkat. Kesimpulan: Sifat non-blocking dan event driven adalah hal yang sangat mendasar dari node.js dan harus dijadikan pertimbangan dalam membuat aplikasi ringan dan berperforma tinggi dengan platform node.js.
2.7 Eclipse
Eclipse adalah sebuah IDE (Integrated Development Environment) untuk mengembangkan perangkat lunak dan dapat dijalankan di semua platform (platform- ). Eclipse dikembangkan dengan bahasa pemrograman Java, akan tetapi
independent
Eclipse mendukung pengembangan aplikasi berbasis bahasa pemrograman lainnya, seperti C/C++, Cobol, Python, Perl, PHP, dan lain sebagainya. Selain sebagai IDE untuk pengembangan aplikasi, Eclipse pun bisa digunakan untuk aktivitas dalam siklus pengembangan perangkat lunak, seperti dokumentasi, test perangkat lunak, pengembangan web, dan lain sebagainya. Eclipse pada saat ini merupakan salah satu
IDE favorit dikarenakan gratis dan open source, yang berarti setiap orang boleh melihat kode pemrograman perangkat lunak ini. Selain itu, kelebihan dari Eclipse yang membuatnya populer adalah kemampuannya untuk dapat dikembangkan oleh pengguna dengan komponen yang dinamakan plug-in.
Untuk menginstall Android SDK pada eclipse, silahkan mengunjungi alamat dan download-lah yang sesuai dengan sebagai berikut : martinus@martinusadyh:[~]$ wget -c http://dl.google.com/android/android-sdk_r06-linux_86.tgz
- 2010-08-29 05:23:06-- http://dl.google.com/android/android-sdk_r06-linux_86.tgz Resolving dl.google.com... 64.233.181.190, 64.233.181.91, 64.233.181.93, ... Connecting to dl.google.com|64.233.181.190|:80... connected. HTTP request sent, awaiting response... 200 OK Length: 16971139 (16M) [application/x-tar] Saving to: `android- sdk_r06-linux_86.tgz' 100%[==================================================== ========================================================= ===================>] 16,971,139 73.5K/s in 4m 16s
2010-08-29 05:27:23 (64.8 KB/s) - `android-sdk_r06- linux_86.tgz' saved [16971139/16971139] martinus@martinusadyh:[~]$
Proses download sudah selesai, sekarang ekstrak pada direktori yang diinginkan (jika menggunakan windows bisa diekstrak pada C:\> atau /home/[nama- user] jika menggunakan GNU/Linux) yang nantinya akan membuat sebuah direktori seperti C:\android-sdk-windows_86 di Windows atau /home/[nama-user]/android-sdk- linux_86 jika menggunakan GNU/Linux. Jika proses ekstrak sudah selesai, sekarang downloadlah Android Component dengan cara masuklah pada direktori /home/[nama- user]/android-sdk-linux_86/tools melalui terminal dan jalankan perintah android seperti dibawah ini : martinus@martinusadyh:[~]$ cd android-sdk-linux_86/tools/ martinus@martinusadyh:[~/android-sdk-linux_86/tools]$ android Starting Android SDK and AVD Manager No command line parameters provided, launching UI. See 'android -- help' for operations from the command line.
Setelah kita mengetikkan android pada terminal, maka tidak lama akan muncul
Android SDK and AVD Manager. Untuk menginstall dan menambahkan komponen,
sekarang pilihlah menu Available Packages dan pilihlah semua opsi yang terdapat pada menu sebelah kanan seperti gambar 2.7.
Gambar 2.7 : Menambahkan komponen Android SDK2.8 Teknik CSS (Cascading Style Sheet) for Retina Display
Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa
komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman. Sama halnya styles dalampengolahan kata seperti yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama- sama dalam beberapa berkas warna tabel, ukuran border, warn warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
CSS 3 adalah versisudah mendukung CSS 3. CSS 2 didukung seutuhnya oleh CSS 3 dan tidak ada perubahan, hanya ada beberapa penambahan, sehingga ketika bermigrasi dari CSS 2 ke CSS 3, tidak perlu mengubah apapun. CSS 3 memiliki beberapa fitur baru, seperti: 1.
Animasi, sehingga pembuatan animasi tidak memerlukan program sejenis
2.
Beberapa efek teks, seperti teks berbayang, kolom koran, dan "word- wrap ".
3. Jenis huruf eksternal, sehingga dapat menggunakan huruf yang tidak termasuk "web-safe fonts".
Zaman sekarang banyak orang menggunakan perangkat yang sangat portabel untuk bekerja. CSS adalah alat yang mengatur konten suatu aplikasi, yang memudahkan pengguna dalam menggunakan aplikasi mobile. Teknik Retina Display pertama kali diperkenalkan oleh perusahaan Apple dengan produk mobile yang menggunakan layar ganda kepadatan pixel, menciptakan gambar yang lebih tajam pada layar yang lebih kecil. Produsen perangkat lain juga mengikuti dengan versi mereka sendiri dengan layar kepadatan pixel tinggi. Sehingga tidak diragukan lagi keuntungan bagi konsumen dan pengguna aplikasi. Ini menjadi tantangan untuk web
developer dan desainer untuk membuat website dan aplikasi mereka kompatibel
dengan Retina Display tersebut. Saat ini para pengembang aplikasi berusaha untuk membuat tampilan yang lebih hidup dan dinamis dalam aplikasi khususnya aplikasi
mobile . website ditampilkan sesuai dengan ukuran layar perangkat dengan kemampuan zoom-
in & zoom-out yang mudah. Sebenarnya jika website kita sudah Responsive, hal
tersebut tidak akan menjadi masalah. Tetapi karena Smartphone dan tablet PC sekarang kebanyakan memiliki resolusi yang tinggi (Retina Display), maka website yang dioptimalkan untuk layar monitor juga dapat ditampilkan dengan tajam dan teksnya tetap enak dilihat. Hanya saja kadang-kadang kita menemukan beberapa permasalahan kecil pada layout website yang umum terjadi apabila kita membuka website kita di perangkat Mobile.
Viewport merupakan attribut baru untuk tag <meta> yang berguna untuk
mengatur bidang tampilan layar (viewport). Dengan menambahkan tag ini di <head> akan membuat layar Mobile Device menampilkan seluruh tampilan layout full. Kodenya seperti ini: <meta name="viewport" content="width=device-width">
Apple pertama kali memperkenalkan layar dengan kualitas kerapatan 2 kali lipat pada tahun 2010 ketika peluncuran iPhone 4 dengan istilah Retina Display. Dimana jumlah pixel 2 kali lipat lebih banyak dan dirapatkan sehingga kualitas teks dan gambar lebih tajam. Jika layar ini membuka image di website terutama icon yang ukurannya kecil atau logo, maka logonya akan buram (Blur). Karena gambar kita tidak dioptimalkan untuk Retina Display, kita harus membuat logo yang sama dengan ukuran 2 kali lipat logo biasa dan ditampilkan dalam ukuran logo biasa. Misal logo website kita ukurannya 100×50 pixel dengan file logo.png dan kita mempunyai logo lain dengan nama file logo-retina.png yang ukurannya 2x lipat yaitu 200×100 pixel. Jika kita memanggil logo-retina.png dan menampilkannya dalam ukuran 100×50 pixel maka kita akan memiliki logo yang lebih tajam dan jelas ketika dibuka di layar perangkat mobile dengan Retina Display atau HiDPI. Adapun kodenya seperti ini: @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi) {
#logo { width:100px; height:50px;
} }
<img src="logo-retina.png" width="100" height="50" /> $('img[data-retina]').retina({checkIfImageExists: true}); <img src="logo.png" data-retina="logo-retina.png" id="logo" /> Sekarang bagaimana membuat background pada CSS menjadi Retina Display dengan menggunakan Media Query. Hasil ukuran gambar berdasarkan density dapat dilihat pada gambar 2.8. body { width:100px; height:50px; background:url(background.png); }
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi) { body { background:url(background-retina.png); background-size:100px 50px; } }