HTML5 merupakan teknologi yang telah membuka jalur pembuatan berbagai produk software tanpa harus tergantung pada sistem operasi tertentu. Tidak peduli sistem operasi modern apa ataupun hardware apa yang digunakan, hampir semuanya kini dapat mengakses HTML5 dengan minimum perbedaan.
Saat ini banyak cara yang dapat dipilih developer untuk membuat aplikasi. Dengan hanya satu kali menulis kode saja, maka source code tersebut dapat dibuild atau juga dicompile menjadi aplikasi untuk berbagai platform. Pada umumnya cara ini tidak lepas dari peran teknologi web yang muncul lebih dulu atau peran dari aplikasi koding yang menyediakan fasilitas untuk porting source code menjadi bentuk aplikasi native dari suatu platform.
Salah satu teknologi web yang makin marak digunakan bahkan menurut saya oleh Visual Studio Code, Construct bahkan flutter sekalipun berdasarkan kemajuan dari pengembangan HTML5. Penggunaan HTML5 digabungkan dengan Javascript membuat pengembangan aplikasi menjadi lebih simple dan tidak banyak membuang waktu untuk dapat membuat aplikasi dapat berjalan di berbagai platform.
Menulis kode untuk aplikasi yang sama untuk lingkungan sistem operasi atau platform berbeda bisa saja dapat memiliki kesamaan. Tetapi setelah praktek dengan beberapa project aplikasi dan game ternyata tetap saja ada yang berbeda.
Baca juga 3 Tips Sukses Membuat Berbagai Aplikasi Beda Platform dengan HTML5
Pada pembuatan aplikasi yang memanfaatkan HTML5 seringkali orang berpikiran selama dasar (base) nya sama maka tidak akan ada perbedaan. Sekali membuat aplikasi HTML5 + Javascript + CSS maka dianggap dapat digunakan untuk dicompile menjadi aplikasi native sepenuhnya tanpa merubah kode.
Tidak sepenuhnya salah tapi bila mulai berkaitan dengan sisi yang lain seperti penyimpanan localstorage, Pembacaan Ajax, dan lain sebagainya ternyata tetap saja membutuhkan koreksi.
Seringkali saya juga menemukan bahwa saat membuat aplikasi HTML5 di PC ataupun laptop hasil debugnya akan terjadi perbedaan dengan aplikasi mobilenya. Seperti teknologi pendukung HTML5 di mobile yang menggunakan webkit ataupun browsernya belum mendukung teknologi service workers.
Dengan perbedaan ini maka debug baik di sistem operasi atau platform yang digunakan dan debug pada platform tujuan sangat penting. Dari sekian percobaan saya dalam mengatasi perbedaan itu saya seringkali salah mengambil solusi malah pada pembacaannya misalkan begini:
Agar lebih mudah dipahami saya menggunakan metode Asyncrhonous:
1 2 3 4 5 6 7 8 9 | $.ajax({
url:path+'/siswa.json',
success: function(isi){
//isi langsung dimasukkan localStorage untuk simpan
localStorage.siswa = isi;
window.localStorage.setItem('siswa', translate);
},
async:false
});
|
1 2 3 4 5 6 7 8 | function isJson(str) {
try {
JSON.parse(str);
} catch (e) {
return false;
}
return true;
}
|
Sehingga bila dimasukkan dalam ajax jadinya:
1 2 3 4 5 6 7 8 9 10 11 | $.ajax({
url:path+'/siswa.json',
success: function(isi){
//isi diperiksa bila json baru disimpan ke localStorage
if(isJson(isi)==true){
localStorage.siswa = isi;
window.localStorage.setItem('siswa', translate);
}
},
async:false
});
|
Belajar dari kesalahan tersebut, maka sebaiknya yang dideteksi bukan datanya tapi langsung pada platformnya. Sebab bila didebug pada browser hasinya tidak sama bila dijalankan pada aplikasi native. Sehingga perlu menggunkan pendeteksi platform sebagai berikut:
1 2 3 4 5 | function isMobile() {
let check = false;
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
return check;
}
|
Sehingga bila dimasukkan dalam Ajax jadinya:
1 2 3 4 5 6 7 8 9 10 11 12 13 | $.ajax({
url:path+'/siswa.json',
success: function(isi){
if(isMobile()){
translate = isi;
}else{
translate = JSON.stringify(isi);
}
window.localStorage.setItem('siswa', translate);
},
async:false
});
|
Tidak ada komentar:
Posting Komentar